andrea/youtube-dl-service
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First layout prototype

Browse source
This commit is contained in:
Andrea Fazzi 2021-10-11 11:23:00 +02:00
parent 61f0598093
commit 9eb6a6f2a5
9 changed files with 260 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
backend/main.go
View file

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

270
frontend/public/build/bundle.js
View file

@ -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) {
node.addEventListener(event, handler, options);
return () => node.removeEventListener(event, handler, options);
function attr(node, attribute, value) {
if (value == null)
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) {
const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : [];
if (has_prevent_default)
modifiers.push('preventDefault');
if (has_stop_propagation)
modifiers.push('stopPropagation');
dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
const dispose = listen(node, event, handler, options);
return () => {
dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
dispose();
};
function attr_dev(node, attribute, value) {
attr(node, attribute, value);
if (value == null)
dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
else
dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
}
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";
t1 = space();
button.textContent = "Download";
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, t1, anchor);
insert_dev(target, form, 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(t1);
if (detaching) detach_dev(form);
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.$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];
$$self.$capture_state = () => ({ Inner });
return [];
}
class App extends SvelteComponentDev {

2
frontend/public/build/bundle.js.map
View file

File diff suppressed because one or more lines are too long

14
frontend/public/index.html
View file

@ -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>

20
frontend/public/newpipe_logo.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 887 B

36
frontend/src/App.svelte
View file

@ -1,32 +1,10 @@
<script>
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);
}
}
let promise = ping();
function handleClick() {
promise = ping();
}
import Inner from './Inner.svelte';
</script>
<button on:click={handleClick}>
generate random number
</button>
{#await promise}
<p>...waiting</p>
{:then data}
<p>The number is {data.title}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
<div class="container">
<img width="200px" class="rounded mx-auto d-block p-3" src="newpipe_logo.svg"/>
<div class="container">
<Inner/>
</div>
</div>

40
frontend/src/Inner.svelte
View file

@ -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();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
if (res.ok) {
return data;
} else {
console.log(res);
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}>
Click to say hello
</button>
{#await promise}
<p>...waiting</p>
{:then data}
<p>Message from the server is {data.message}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

1
frontend/src/Nested.svelte
View file

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

32
frontend/src/Thing.svelte
View file

@ -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>