First layout prototype

backend/main.go

@@ -15,10 +15,7 @@ func main() {
 	}))
 	r.GET("/ping", func(c *gin.Context) {
 		c.JSON(200, gin.H{
-			"userId":    1,
+			"message":    "pong",
-			"id":        1,
-			"title":     "delectus aut autem",
-			"completed": false,
 		})
 	})
 

frontend/public/build/bundle.js

@@ -27,6 +27,14 @@ var app = (function () {
     function safe_not_equal(a, b) {
         return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
     }
+    let src_url_equal_anchor;
+    function src_url_equal(element_src, url) {
+        if (!src_url_equal_anchor) {
+            src_url_equal_anchor = document.createElement('a');
+        }
+        src_url_equal_anchor.href = url;
+        return element_src === src_url_equal_anchor.href;
+    }
     function is_empty(obj) {
         return Object.keys(obj).length === 0;
     }
@@ -51,9 +59,11 @@ var app = (function () {
     function empty() {
         return text('');
     }
-    function listen(node, event, handler, options) {
+    function attr(node, attribute, value) {
-        node.addEventListener(event, handler, options);
+        if (value == null)
-        return () => node.removeEventListener(event, handler, options);
+            node.removeAttribute(attribute);
+        else if (node.getAttribute(attribute) !== value)
+            node.setAttribute(attribute, value);
     }
     function children(element) {
         return Array.from(element.childNodes);
@@ -265,6 +275,9 @@ var app = (function () {
         : typeof globalThis !== 'undefined'
             ? globalThis
             : global);
+    function create_component(block) {
+        block && block.c();
+    }
     function mount_component(component, target, anchor, customElement) {
         const { fragment, on_mount, on_destroy, after_update } = component.$$;
         fragment && fragment.m(target, anchor);
@@ -406,18 +419,12 @@ var app = (function () {
         dispatch_dev('SvelteDOMRemove', { node });
         detach(node);
     }
-    function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {
+    function attr_dev(node, attribute, value) {
-        const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : [];
+        attr(node, attribute, value);
-        if (has_prevent_default)
+        if (value == null)
-            modifiers.push('preventDefault');
+            dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
-        if (has_stop_propagation)
+        else
-            modifiers.push('stopPropagation');
+            dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
-        dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
-        const dispose = listen(node, event, handler, options);
-        return () => {
-            dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
-            dispose();
-        };
     }
     function set_data_dev(text, data) {
         data = '' + data;
@@ -453,12 +460,12 @@ var app = (function () {
         $inject_state() { }
     }
 
-    /* src/App.svelte generated by Svelte v3.42.4 */
+    /* src/Inner.svelte generated by Svelte v3.42.4 */
 
     const { Error: Error_1, console: console_1 } = globals;
-    const file = "src/App.svelte";
+    const file$1 = "src/Inner.svelte";
 
-    // (30:0) {:catch error}
+    // (31:0) {:catch error}
     function create_catch_block(ctx) {
     	let p;
     	let t_value = /*error*/ ctx[3].message + "";
@@ -469,7 +476,7 @@ var app = (function () {
     			p = element("p");
     			t = text(t_value);
     			set_style(p, "color", "red");
-    			add_location(p, file, 30, 1, 564);
+    			add_location(p, file$1, 31, 1, 698);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -487,26 +494,26 @@ var app = (function () {
     		block,
     		id: create_catch_block.name,
     		type: "catch",
-    		source: "(30:0) {:catch error}",
+    		source: "(31:0) {:catch error}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (28:0) {:then data}
+    // (29:0) {:then data}
     function create_then_block(ctx) {
     	let p;
     	let t0;
-    	let t1_value = /*data*/ ctx[2].title + "";
+    	let t1_value = /*data*/ ctx[2].message + "";
     	let t1;
 
     	const block = {
     		c: function create() {
     			p = element("p");
-    			t0 = text("The number is ");
+    			t0 = text("Message from the server is ");
     			t1 = text(t1_value);
-    			add_location(p, file, 28, 1, 514);
+    			add_location(p, file$1, 29, 1, 633);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -514,7 +521,7 @@ var app = (function () {
     			append_dev(p, t1);
     		},
     		p: function update(ctx, dirty) {
-    			if (dirty & /*promise*/ 1 && t1_value !== (t1_value = /*data*/ ctx[2].title + "")) set_data_dev(t1, t1_value);
+    			if (dirty & /*promise*/ 1 && t1_value !== (t1_value = /*data*/ ctx[2].message + "")) set_data_dev(t1, t1_value);
     		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(p);
@@ -525,14 +532,14 @@ var app = (function () {
     		block,
     		id: create_then_block.name,
     		type: "then",
-    		source: "(28:0) {:then data}",
+    		source: "(29:0) {:then data}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (26:16)   <p>...waiting</p> {:then data}
+    // (27:16)   <p>...waiting</p> {:then data}
     function create_pending_block(ctx) {
     	let p;
 
@@ -540,7 +547,7 @@ var app = (function () {
     		c: function create() {
     			p = element("p");
     			p.textContent = "...waiting";
-    			add_location(p, file, 26, 1, 482);
+    			add_location(p, file$1, 27, 1, 601);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, p, anchor);
@@ -555,20 +562,22 @@ var app = (function () {
     		block,
     		id: create_pending_block.name,
     		type: "pending",
-    		source: "(26:16)   <p>...waiting</p> {:then data}",
+    		source: "(27:16)   <p>...waiting</p> {:then data}",
     		ctx
     	});
 
     	return block;
     }
 
-    function create_fragment(ctx) {
+    function create_fragment$1(ctx) {
+    	let form;
+    	let div;
+    	let input;
+    	let t0;
     	let button;
-    	let t1;
+    	let t2;
     	let await_block_anchor;
     	let promise_1;
-    	let mounted;
-    	let dispose;
 
     	let info = {
     		ctx,
@@ -586,28 +595,41 @@ var app = (function () {
 
     	const block = {
     		c: function create() {
+    			form = element("form");
+    			div = element("div");
+    			input = element("input");
+    			t0 = space();
     			button = element("button");
-    			button.textContent = "generate random number";
+    			button.textContent = "Download";
-    			t1 = space();
+    			t2 = space();
     			await_block_anchor = empty();
     			info.block.c();
-    			add_location(button, file, 21, 0, 397);
+    			attr_dev(input, "type", "url");
+    			attr_dev(input, "class", "form-control");
+    			attr_dev(input, "placeholder", "Insert a Youtube url here...");
+    			attr_dev(input, "aria-label", "URL for the Youtube video to download.");
+    			add_location(input, file$1, 21, 4, 356);
+    			attr_dev(button, "class", "btn btn-outline-primary");
+    			attr_dev(button, "type", "button");
+    			add_location(button, file$1, 22, 4, 495);
+    			attr_dev(div, "class", "input-group");
+    			add_location(div, file$1, 20, 2, 326);
+    			add_location(form, file$1, 19, 0, 317);
     		},
     		l: function claim(nodes) {
     			throw new Error_1("options.hydrate only works if the component was compiled with the `hydratable: true` option");
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, button, anchor);
+    			insert_dev(target, form, anchor);
-    			insert_dev(target, t1, anchor);
+    			append_dev(form, div);
+    			append_dev(div, input);
+    			append_dev(div, t0);
+    			append_dev(div, button);
+    			insert_dev(target, t2, anchor);
     			insert_dev(target, await_block_anchor, anchor);
     			info.block.m(target, info.anchor = anchor);
     			info.mount = () => await_block_anchor.parentNode;
     			info.anchor = await_block_anchor;
-
-    			if (!mounted) {
-    				dispose = listen_dev(button, "click", /*handleClick*/ ctx[1], false, false, false);
-    				mounted = true;
-    			}
     		},
     		p: function update(new_ctx, [dirty]) {
     			ctx = new_ctx;
@@ -620,14 +642,133 @@ var app = (function () {
     		i: noop,
     		o: noop,
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(button);
+    			if (detaching) detach_dev(form);
-    			if (detaching) detach_dev(t1);
+    			if (detaching) detach_dev(t2);
     			if (detaching) detach_dev(await_block_anchor);
     			info.block.d(detaching);
     			info.token = null;
     			info = null;
-    			mounted = false;
+    		}
-    			dispose();
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$1.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    async function ping() {
+    	const res = await fetch(`http://localhost:8080/ping`);
+    	const data = await res.json();
+
+    	if (res.ok) {
+    		return data;
+    	} else {
+    		console.log(res);
+    		throw new Error(data);
+    	}
+    }
+
+    function instance$1($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('Inner', slots, []);
+    	let promise = ping();
+
+    	function handleClick() {
+    		$$invalidate(0, promise = ping());
+    	}
+
+    	const writable_props = [];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<Inner> was created with unknown prop '${key}'`);
+    	});
+
+    	$$self.$capture_state = () => ({ ping, promise, handleClick });
+
+    	$$self.$inject_state = $$props => {
+    		if ('promise' in $$props) $$invalidate(0, promise = $$props.promise);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [promise];
+    }
+
+    class Inner extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "Inner",
+    			options,
+    			id: create_fragment$1.name
+    		});
+    	}
+    }
+
+    /* src/App.svelte generated by Svelte v3.42.4 */
+    const file = "src/App.svelte";
+
+    function create_fragment(ctx) {
+    	let div1;
+    	let img;
+    	let img_src_value;
+    	let t;
+    	let div0;
+    	let inner;
+    	let current;
+    	inner = new Inner({ $$inline: true });
+
+    	const block = {
+    		c: function create() {
+    			div1 = element("div");
+    			img = element("img");
+    			t = space();
+    			div0 = element("div");
+    			create_component(inner.$$.fragment);
+    			attr_dev(img, "width", "200px");
+    			attr_dev(img, "class", "rounded mx-auto d-block p-3");
+    			if (!src_url_equal(img.src, img_src_value = "newpipe_logo.svg")) attr_dev(img, "src", img_src_value);
+    			add_location(img, file, 5, 2, 84);
+    			attr_dev(div0, "class", "container");
+    			add_location(div0, file, 6, 2, 166);
+    			attr_dev(div1, "class", "container");
+    			add_location(div1, file, 4, 0, 58);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div1, anchor);
+    			append_dev(div1, img);
+    			append_dev(div1, t);
+    			append_dev(div1, div0);
+    			mount_component(inner, div0, null);
+    			current = true;
+    		},
+    		p: noop,
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(inner.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(inner.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div1);
+    			destroy_component(inner);
     		}
     	};
 
@@ -642,46 +783,17 @@ var app = (function () {
     	return block;
     }
 
-    async function ping() {
-    	const res = await fetch(`http://localhost:8080/ping`);
-
-    	// const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`);
-    	const data = await res.json();
-
-    	if (res.ok) {
-    		return data;
-    	} else {
-    		console.log(res);
-    		throw new Error(data);
-    	}
-    }
-
     function instance($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('App', slots, []);
-    	let promise = ping();
-
-    	function handleClick() {
-    		$$invalidate(0, promise = ping());
-    	}
-
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<App> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<App> was created with unknown prop '${key}'`);
     	});
 
-    	$$self.$capture_state = () => ({ ping, promise, handleClick });
+    	$$self.$capture_state = () => ({ Inner });
-
+    	return [];
-    	$$self.$inject_state = $$props => {
-    		if ('promise' in $$props) $$invalidate(0, promise = $$props.promise);
-    	};
-
-    	if ($$props && "$$inject" in $$props) {
-    		$$self.$inject_state($$props.$$inject);
-    	}
-
-    	return [promise, handleClick];
     }
 
     class App extends SvelteComponentDev {

frontend/public/index.html

@@ -4,13 +4,21 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>Svelte app</title>
+	<title>Youtube Download Service</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
+	
-	<link rel='stylesheet' href='/build/bundle.css'>
+	<!-- CSS only -->
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+	<!-- <link rel='stylesheet' href='/global.css'> -->
+	<!-- <link rel='stylesheet' href='/build/bundle.css'> -->
 
 	<script defer src='/build/bundle.js'></script>
+	
+	<!-- JavaScript Bundle with Popper -->
+	<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
 </head>
 
 <body>

frontend/public/newpipe_logo.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#CD201F;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Alapkor">
+	<circle id="XMLID_23_" class="st0" cx="50" cy="50" r="50"/>
+</g>
+<g id="Elemek">
+	<path id="XMLID_19_" class="st1" d="M47,28.2c-9-5.3-15.3-9-15.3-9v61.7c0,0,30.4-18,52.3-30.9C72.1,43,57.7,34.5,47,28.2z"/>
+</g>
+<g id="Fedo">
+	<path id="XMLID_5_" class="st0" d="M48.4,40.1c-4.1-2.4-7-4.1-7-4.1V64c0,0,13.9-8.2,23.8-14C59.8,46.8,53.3,42.9,48.4,40.1z"/>
+	<rect id="XMLID_4_" x="41.4" y="55.6" class="st0" width="6.2" height="21"/>
+</g>
+<g id="Vonalak">
+</g>
+</svg>

frontend/src/App.svelte

@@ -1,32 +1,10 @@
 <script>
-	async function ping() {
+  import Inner from './Inner.svelte';
-	  const res = await fetch(`http://localhost:8080/ping`);
-	  // const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`);
-	  const data = await res.json();
-
-	  if (res.ok) {
-	    return data;
-	  } else {
-	    console.log(res);
-	    throw new Error(data);
-	  }
-	}
-
-	let promise = ping();
-
-	function handleClick() {
-		promise = ping();
-	}
 </script>
 
-<button on:click={handleClick}>
+<div class="container">
-	generate random number
+  <img width="200px" class="rounded mx-auto d-block p-3" src="newpipe_logo.svg"/>
-</button>
+  <div class="container">
-
+       <Inner/>
-{#await promise}
+  </div>
-	<p>...waiting</p>
+</div>
-{:then data}
-	<p>The number is {data.title}</p>
-{:catch error}
-	<p style="color: red">{error.message}</p>
-{/await}

frontend/src/Inner.svelte

@@ -1,15 +1,33 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
+	async function ping() {
+	  const res = await fetch(`http://localhost:8080/ping`);
+	  const data = await res.json();
 
-  const dispatch = createEventDispatcher();
+	  if (res.ok) {
-  
+	    return data;
-  function sayHello() {
+	  } else {
-    dispatch('message', {
+	    console.log(res);
-      text: 'Hello!'
+	    throw new Error(data);
-    });
+	  }
-  }
+	}
+
+	let promise = ping();
+
+	function handleClick() {
+		promise = ping();
+	}
 </script>
+<form>
+  <div class="input-group">
+    <input type="url" class="form-control" placeholder="Insert a Youtube url here..." aria-label="URL for the Youtube video to download.">
+    <button class="btn btn-outline-primary" type="button">Download</button>
+</div>
+</form>
 
-<button on:click={sayHello}>
+{#await promise}
-  Click to say hello
+	<p>...waiting</p>
-</button>
+{:then data}
+	<p>Message from the server is {data.message}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}

frontend/src/Nested.svelte

@@ -1 +0,0 @@
-<p>Questo è un paragrafo</p>

frontend/src/Thing.svelte

@@ -1,32 +0,0 @@
-<script>
-	const emojis = {
-        apple: "🍎",
-        banana: "🍌",
-        carrot: "🥕",
-        doughnut: "🍩",
-        egg: "🥚"
-	}
-
-	// the name is updated whenever the prop value changes...
-	export let name;
-
-	// ...but the "emoji" variable is fixed upon initialisation of the component
-	const emoji = emojis[name];
-</script>
-
-<p>
-	<span>The emoji for { name } is { emoji }</span>
-</p>
-
-<style>
-	p {
-		margin: 0.8em 0;
-	}
-	span {
-		display: inline-block;
-		padding: 0.2em 1em 0.3em;
-		text-align: center;
-		border-radius: 0.2em;
-		background-color: #FFDFD3;
-	}
-</style>