├── api
    ├── __init__.py
    ├── requirements.txt
    ├── .gitignore
    ├── models.py
    ├── progress.py
    ├── downloader.py
    └── main.py
├── app
    ├── .npmrc
    ├── src
    │   ├── routes
    │   │   ├── +page.js
    │   │   ├── +layout.svelte
    │   │   └── +page.svelte
    │   ├── lib
    │   │   ├── downloader.js
    │   │   ├── VideoCardWaiting.svelte
    │   │   ├── VideoCardError.svelte
    │   │   ├── UrlField.svelte
    │   │   ├── VideoCard.svelte
    │   │   ├── VideoCardInfo.svelte
    │   │   └── DownloadBar.svelte
    │   ├── variables.scss
    │   ├── app.d.ts
    │   ├── app.scss
    │   └── app.html
    ├── static
    │   ├── logo.png
    │   └── css
    │   │   └── main.css
    ├── .gitignore
    ├── .eslintignore
    ├── .prettierrc
    ├── env.example
    ├── .prettierignore
    ├── vite.config.js
    ├── .eslintrc.cjs
    ├── svelte.config.js
    ├── jsconfig.json
    └── package.json
└── README.md


/api/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/app/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/app/src/routes/+page.js:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | 


--------------------------------------------------------------------------------
/api/requirements.txt:
--------------------------------------------------------------------------------
1 | fastapi
2 | yt_dlp
3 | fastapi_socketio
4 | uvicorn[standard]


--------------------------------------------------------------------------------
/app/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sebarocks/videodlpro/HEAD/app/static/logo.png


--------------------------------------------------------------------------------
/app/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import '../app.scss';
3 | </script>
4 | 
5 | <slot />
6 | 


--------------------------------------------------------------------------------
/api/.gitignore:
--------------------------------------------------------------------------------
1 | # Byte-compiled / optimized / DLL files
2 | __pycache__/
3 | *.py[cod]
4 | /downloads
5 | /dist


--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 | 


--------------------------------------------------------------------------------
/app/src/lib/downloader.js:
--------------------------------------------------------------------------------
1 | import io from "socket.io-client";
2 | import { env } from '$env/dynamic/public';
3 | 
4 | 
5 | const socket = io(`${env.PUBLIC_HOSTNAME}`, { path: "/api/ws/" });
6 | 
7 | export default socket;
8 | 
9 | 


--------------------------------------------------------------------------------
/app/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/app/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100,
6 | 	"pluginSearchDirs": ["."],
7 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
8 | }
9 | 


--------------------------------------------------------------------------------
/app/env.example:
--------------------------------------------------------------------------------
1 | # dot env file for development enviroment
2 | 
3 | # hostname used by socket io using ws://
4 | PUBLIC_HOSTNAME=localhost:8000
5 | 
6 | # api url used to download files and call fetch
7 | PUBLIC_API_URL=http://localhost:8000


--------------------------------------------------------------------------------
/app/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/app/src/variables.scss:
--------------------------------------------------------------------------------
1 | /* Variables and mixins declared here will be available in all other SCSS files */ /* https://github.com/jgthms/bulma/issues/1293 */
2 | $body-overflow-y: auto;
3 | $family-sans-serif : "Fira Sans";
4 | $card-content-padding: 1rem;
5 | 


--------------------------------------------------------------------------------
/app/src/lib/VideoCardWaiting.svelte:
--------------------------------------------------------------------------------
1 | <div class="card-content">
2 |     <div class="content">
3 |      <small>Obteniendo informacion</small>
4 |      <progress class="progress is-small is-primary" max="100">Obteniendo informacion</progress>
5 |     </div>
6 |   </div>


--------------------------------------------------------------------------------
/app/src/app.d.ts:
--------------------------------------------------------------------------------
1 | // See https://kit.svelte.dev/docs/types#app
2 | // for information about these interfaces
3 | // and what to do when importing types
4 | declare namespace App {
5 | 	// interface Locals {}
6 | 	// interface PageData {}
7 | 	// interface Platform {}
8 | }
9 | 


--------------------------------------------------------------------------------
/app/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | 
 3 | /** @type {import('vite').UserConfig} */
 4 | const config = {
 5 | 	plugins: [sveltekit()],
 6 | 
 7 | 	css: {
 8 | 		preprocessorOptions: {
 9 | 			scss: {
10 | 				additionalData: '@use "src/variables.scss" as *;'
11 | 			}
12 | 		}
13 | 	}
14 | };
15 | 
16 | export default config;
17 | 


--------------------------------------------------------------------------------
/app/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	extends: ['eslint:recommended', 'prettier'],
 4 | 	plugins: ['svelte3'],
 5 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 6 | 	parserOptions: {
 7 | 		sourceType: 'module',
 8 | 		ecmaVersion: 2020
 9 | 	},
10 | 	env: {
11 | 		browser: true,
12 | 		es2017: true,
13 | 		node: true
14 | 	}
15 | };
16 | 


--------------------------------------------------------------------------------
/app/static/css/main.css:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 |   body {
 4 |     margin: 0;
 5 |     display: flex;
 6 |     place-items: top;
 7 |     min-width: 320px;
 8 |     min-height: 100vh;
 9 |   }
10 |   
11 |   h1 {
12 |     font-size: 3.2em;
13 |     line-height: 1;
14 |   }
15 | 
16 |   
17 |   #app {
18 |     max-width: 1280px;
19 |     margin: 0 auto;
20 |     padding: 2rem;
21 |     text-align: center;
22 |   }
23 |   
24 |   


--------------------------------------------------------------------------------
/app/src/lib/VideoCardError.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let error;
 3 | 
 4 |   export let card_id;
 5 | 
 6 |   import { createEventDispatcher } from "svelte";
 7 |   const dispatch = createEventDispatcher();
 8 | 
 9 | 
10 | </script>
11 | 
12 | <div class="card-content">
13 | 	<div class="content">
14 |     <button class="delete" on:click={() => dispatch('popCard',card_id)}></button>
15 |     Ocurrio un error!
16 |     <p class="info"> {error}</p>   
17 | 	</div>
18 | </div>
19 | 
20 | <style>
21 |   .info {
22 |     color: red;
23 |   }
24 |   .delete {
25 |     float: right;
26 |   }
27 | </style>


--------------------------------------------------------------------------------
/app/src/app.scss:
--------------------------------------------------------------------------------
 1 | /* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */ /* Import only what you need from Bulma */
 2 | @import 'bulma/sass/utilities/_all';
 3 | @import 'bulma/sass/base/_all';
 4 | @import 'bulma/sass/elements/_all';
 5 | @import 'bulma/sass/form/_all';
 6 | @import 'bulma/sass/components/_all';
 7 | @import 'bulma/sass/grid/_all';
 8 | @import 'bulma/sass/helpers/_all';
 9 | @import 'bulma/sass/layout/_all';
10 | 
11 | @import url('https://code.cdn.mozilla.net/fonts/fira.css');
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/app/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import preprocess from 'svelte-preprocess';
 2 | import adapter from '@sveltejs/adapter-static';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	kit: {
 7 | 		adapter: adapter({
 8 | 			// default options are shown. On some platforms
 9 | 			// these options are set automatically — see below
10 | 			pages: 'build',
11 | 			assets: 'build',
12 | 			fallback: null,
13 | 			precompress: false
14 | 		})
15 | 	},
16 | 	preprocess: [
17 | 		preprocess({
18 | 			scss: {
19 | 				prependData: '@use "src/variables.scss" as *;'
20 | 			}
21 | 		})
22 | 	]
23 | };
24 | 
25 | export default config;
26 | 


--------------------------------------------------------------------------------
/app/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/logo.png" />
 6 | 		<title>Video-DL Pro</title>
 7 | 		<meta name="viewport" content="width=device-width" />
 8 | 		<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
 9 | 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
10 | 		<style>
11 | 			body {		
12 | 				display: flex;
13 | 				justify-content: center;
14 | 			}
15 | 		</style>
16 | 		%sveltekit.head%
17 | 	</head>
18 | 	<body>		
19 | 		%sveltekit.body%
20 | 	</body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/app/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": false,
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/api/models.py:
--------------------------------------------------------------------------------
 1 | from typing import Optional
 2 | from pydantic import BaseModel
 3 | 
 4 | class VideoInfo(BaseModel):
 5 |     title: str
 6 |     thumbUrl: str
 7 |     url: str
 8 |     site: str    
 9 | 
10 | class VideoUrl(BaseModel):
11 |     url: str
12 | 
13 | class ProgressInfo(BaseModel):
14 |     download_id : int
15 |     status : str
16 |     percentage : float
17 |     filename : str
18 | 
19 | class FormatInfo(BaseModel):
20 |     format_id: str
21 |     ext: str
22 |     resolution: str
23 |     fps: Optional[str]
24 |     filesize: Optional[int]
25 |     tbr: Optional[float]
26 |     vcodec: str
27 |     acodec: str
28 |     format_note: str
29 | 
30 | class VideoProgress(BaseModel):
31 |     url : str
32 |     status : str
33 |     percentage : float
34 |     filename : str


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # About
 2 | 
 3 | Videodlpro is a webapp for downloading videos using yt-dlp module. It allows downloading videos and converting to mp3 (using FFMpeg). Built using FastAPI backend and Svelte frontend, it uses WebSockets to show download status in real time.
 4 | 
 5 | # Installation
 6 | 
 7 | ## Requirements:
 8 | 
 9 | * Python (pip)
10 | * Node.js (npm)
11 | * FFMpeg
12 | 
13 | ## Setting up .env
14 | 
15 | First, copy .env file
16 | 
17 | `cd app`
18 | 
19 | `cp .env.example .env `
20 | 
21 | Then feel free to edit it according to your enviroment
22 | 
23 | 
24 | ## Python:
25 | 
26 | `cd api`
27 | 
28 | `pip install -r requirements.txt`
29 | 
30 | `uvicorn main:app`
31 | 
32 | It will run on port 8000 by default
33 | 
34 | ## Node.js (npm)
35 | 
36 | `cd app`
37 | 
38 | `npm install`
39 | 
40 | `npm run prod`
41 | 
42 | It will run on port 3000 by default


--------------------------------------------------------------------------------
/app/src/lib/UrlField.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 |     import { createEventDispatcher } from "svelte";
 4 | 
 5 |     const dispatch = createEventDispatcher();
 6 |     let urlRegex = new RegExp(/^(https?):\/\/[^\s$.?#].[^\s]*$/);
 7 |     let url = "";
 8 | 
 9 |     $: btnEnabled = !urlRegex.test(url) || url == "";
10 | 
11 |     function pasteIt(ev) {
12 |         dispatch("addedUrl", url);
13 |         url = "";
14 |     }
15 |     
16 | </script>
17 | 
18 | <label class="label" for="videourl">Ingrese URL del video:</label>
19 | <div class="control">
20 |     <input class="input" id="videourl" type="text" bind:value={url} />
21 |     <button class="button" type="button" class:is-primary={!btnEnabled} on:click={pasteIt} disabled={btnEnabled}>Agregar</button>
22 | </div>
23 | 
24 | 
25 | <style>
26 | .control {
27 |     display: flex;
28 |     flex-direction: row;
29 |     column-gap: 0.5rem;
30 | }
31 | 
32 | .input {
33 |     flex-grow: 8;
34 | }
35 | 
36 | .button {
37 |     flex-grow: 2;
38 | }
39 | 
40 | </style>
41 | 


--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "videodlpro",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
10 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
11 | 		"lint": "prettier --check . && eslint .",
12 | 		"format": "prettier --write ."
13 | 	},
14 | 	"devDependencies": {
15 | 		"@sveltejs/adapter-auto": "next",
16 | 		"@sveltejs/adapter-static": "^1.0.0-next.41",
17 | 		"@sveltejs/kit": "next",
18 | 		"bulma": "^0.9.4",
19 | 		"eslint": "^8.16.0",
20 | 		"eslint-config-prettier": "^8.3.0",
21 | 		"eslint-plugin-svelte3": "^4.0.0",
22 | 		"prettier": "^2.6.2",
23 | 		"prettier-plugin-svelte": "^2.7.0",
24 | 		"sass": "^1.53.0",
25 | 		"svelte": "^3.44.0",
26 | 		"svelte-check": "^2.7.1",
27 | 		"svelte-preprocess": "^4.10.7",
28 | 		"typescript": "^4.7.4",
29 | 		"vite": "^3.1.0-beta.1"
30 | 	},
31 | 	"type": "module",
32 | 	"dependencies": {
33 | 		"bulma": "^0.9.4",
34 | 		"sass": "^1.54.8",
35 | 		"socket.io-client": "^4.5.1"
36 | 	}
37 | }
38 | 


--------------------------------------------------------------------------------
/app/src/lib/VideoCard.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | import { env } from '$env/dynamic/public';
 4 | import VideoCardInfo from "./VideoCardInfo.svelte";
 5 | import VideoCardWaiting from "./VideoCardWaiting.svelte";
 6 | import VideoCardError from "./VideoCardError.svelte";
 7 | import {fade} from "svelte/transition";
 8 | 
 9 | export let url;
10 | export let card_id;
11 | 
12 | const fetchInfo = (async () => {
13 |     const response = await fetch(`${env.PUBLIC_API_URL}/api/info`,{
14 |         method: 'POST',
15 |         headers: {
16 |             "Content-type": "application/json",
17 |             "Accept":"application/json"
18 |         },
19 |         body: JSON.stringify({"url":url})
20 |     })
21 |     return await response.json();
22 | })();
23 | 
24 | </script>
25 | 
26 | <div class="card" transition:fade>
27 |     {#await fetchInfo}
28 |         <VideoCardWaiting />
29 |     {:then data}
30 |         {#if !data.detail}
31 |             <VideoCardInfo on:popCard {data} {card_id}/>
32 |         {/if}
33 |     {:catch error}
34 |         <VideoCardError on:popCard {error} {card_id}/>
35 |     {/await}
36 | </div>
37 | 
38 | <style>
39 |     .card{
40 |         margin-bottom: 1rem;
41 |     }
42 | </style>


--------------------------------------------------------------------------------
/app/src/routes/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import UrlField from '$lib/UrlField.svelte';
 3 | 	import VideoCard from '$lib/VideoCard.svelte';
 4 | 
 5 | 	let videos = [];
 6 | 
 7 | 	let card_id = 0;
 8 | 
 9 | 	function addUrl(ev) {
10 | 		console.log(`Se agrego url ${ev.detail}`);
11 | 		let newVideo = {
12 | 			url: ev.detail,
13 | 			id: ++card_id
14 | 		}
15 | 		videos = [newVideo, ...videos];
16 | 	}
17 | 
18 | 	function removeVideo(ev){
19 | 		console.log(`Se elimino tarjeta ${ev.detail}`);
20 | 		videos = videos.filter( vid => vid.id != ev.detail);
21 | 	}
22 | 
23 | </script>
24 | 
25 | 
26 | <main>
27 | 	
28 | 	<img src="/logo.png" class="logo" alt="YT Logo" />
29 | 	<h1 class="title">Video-DL Pro</h1>
30 | 
31 | 	<div class="field">
32 | 		<UrlField on:addedUrl={addUrl} />
33 | 	</div>
34 | 
35 | 	<div class="video-list">
36 | 	{#each videos as vid (vid.id)}
37 | 		<VideoCard url={vid.url} card_id={vid.id} on:popCard={removeVideo}/>
38 | 	{/each}
39 | 	</div>
40 | 
41 | </main>
42 | 
43 | <style>
44 | 	.logo {
45 | 		height: 12rem;
46 | 		width: 12rem;
47 | 		will-change: filter;
48 | 	}
49 | 	.logo:hover {
50 | 		filter: drop-shadow(0 0 2em #12ea85aa);
51 | 	}
52 | 
53 | 	h1  {
54 | 		padding: 1rem;
55 | 		font-size: 2.5rem;
56 | 	}
57 | 
58 | 	main {
59 | 		display: flex;
60 | 		flex-direction: column;
61 | 		align-items: center;
62 | 		width: 30rem;
63 | 	}
64 | 	
65 | 	.field, .video-list {
66 | 		width: 100%;
67 | 	}
68 | 
69 | </style>
70 | 


--------------------------------------------------------------------------------
/api/progress.py:
--------------------------------------------------------------------------------
 1 | from models import VideoProgress
 2 | 
 3 | 
 4 | class ProgressTracker():
 5 | 
 6 |     def __init__(self):
 7 |         self.videos: dict[int, VideoProgress] = {}
 8 | 
 9 |     def attachDownload(self, url, download_id):
10 |         self.videos[download_id] = VideoProgress(
11 |             url=url,
12 |             status='created',
13 |             percentage=0,
14 |             filename=''
15 |         )
16 | 
17 |     def setStatus(self, download_id, status):
18 |         self.videos[download_id].status = status
19 | 
20 |     def getStatus(self, download_id):
21 |         vidProg = self.videos.get(download_id, None)
22 |         if vidProg:
23 |             return vidProg.status
24 |         else:
25 |             return 'unknown'
26 | 
27 |     def getPercentage(self, download_id):
28 |         vidProg = self.videos.get(download_id, None)
29 |         if vidProg:
30 |             return vidProg.percentage
31 |         else:
32 |             return 0
33 | 
34 |     def getFilename(self, download_id):
35 |         vidProg = self.videos.get(download_id, None)
36 |         if vidProg:
37 |             return vidProg.filename
38 |         else:
39 |             return '-'
40 | 
41 |     def loadHookInfo(self, download_id, hook_info):
42 |         vidProg = self.videos.get(download_id, None)
43 |         if vidProg:
44 |             vidProg.status = hook_info['status']
45 |             total = float(hook_info['total_bytes'])
46 |             current = float(hook_info['downloaded_bytes'])
47 |             vidProg.percentage = 100 * current / total if total != 0 else 0
48 |             vidProg.filename = hook_info['filename']
49 | 


--------------------------------------------------------------------------------
/app/src/lib/VideoCardInfo.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     
 3 |     import DownloadBar from "./DownloadBar.svelte";
 4 |     import {slide} from "svelte/transition";
 5 | 
 6 |     import { createEventDispatcher } from "svelte";
 7 |     const dispatch = createEventDispatcher();
 8 | 
 9 |     let cardOpen = true;
10 | 
11 |     export let data;
12 |     export let card_id;
13 |     
14 | </script>
15 | 
16 | <header class="card-header">
17 | 	<p class="card-header-title">
18 |         <img class="icon" src="https://{data.site}/favicon.ico" alt="{data.site}">
19 | 		{data.title}
20 | 	</p>
21 | 	<button class="card-header-icon" type="button" on:click={() => cardOpen = !cardOpen}>
22 | 		<span class="icon">
23 | 			<i class="fas fa-angle-{cardOpen ? 'up' : 'down'}"/>
24 | 		</span>
25 | 	</button>
26 |     <button class="card-header-icon" type="button" on:click={() => dispatch('popCard',card_id)} >
27 | 		<span class="icon">
28 | 			<i class="fas fa-close"/>
29 | 		</span>
30 | 	</button>
31 | </header>
32 | 
33 | {#if cardOpen}
34 |     <div class="card-content" transition:slide|local>
35 |         <figure class="thumbnail">
36 |             <img src="{data.thumbUrl}" alt="{data.site} video - {data.title}">
37 |         </figure>
38 |         <div class="details">
39 |             <small><a href="{data.url}">{data.url}</a></small>
40 |             <p> {data.title} </p>
41 |         </div>
42 |     </div>
43 | {/if}
44 | 
45 | <footer class="card-footer">
46 |     <DownloadBar url={data.url} />
47 | </footer>
48 | 
49 | <style>
50 | 
51 |     .card-content{
52 |         display: flex;
53 |         flex-direction: row;
54 |         padding: 0.8rem;
55 |     }
56 |     .thumbnail{
57 |         display: flex;
58 |         flex-direction: column;
59 |         align-items: center;
60 |         width: 40%;
61 |         padding-right: 1rem;
62 |     }
63 |     .details {
64 |         width: 60%;
65 |     }
66 | 
67 |     .card-header-title{
68 |         overflow: hidden hidden;
69 |         white-space: nowrap;        
70 |         text-overflow: '...';
71 |     }
72 | 
73 |     .thumbnail > img { 
74 |         max-height: 6em;
75 |     }
76 |     .icon{
77 |         display: inline;
78 |         width: 18px;
79 |         height: 16px;
80 |         margin-right: 0.5rem;
81 |     }
82 |     .card-footer{
83 |         display: unset;
84 |     }
85 | 
86 | </style>


--------------------------------------------------------------------------------
/app/src/lib/DownloadBar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import socket from '$lib/downloader.js';
 3 | 	import { writable } from 'svelte/store';
 4 | 	import { env } from '$env/dynamic/public';
 5 | 
 6 | 	const progress = writable(0);
 7 | 
 8 | 	export let url;
 9 | 
10 | 	let status = 'ready';
11 | 	var download_id = Date.now();
12 | 	let download_filename;
13 | 	let intervalQuery;
14 | 	let saved = false;
15 | 
16 | 	let progressData = {
17 | 		status: 'ready',
18 | 		percentage: 0,
19 | 		filename: ''
20 | 	};
21 | 
22 | 	socket.on(`finished.${download_id}`, (filename) => {
23 | 		clearInterval(intervalQuery);
24 | 		status = 'complete';
25 | 		download_filename = filename;
26 | 	});
27 | 
28 | 	socket.on(`progress.${download_id}`, (data) => {
29 | 		progressData = data;
30 | 		progress.set(data.percentage / 100);
31 | 	});
32 | 
33 | 	function askProgress() {
34 | 		socket.emit('queryprogress', download_id);
35 | 	}
36 | 
37 | 	function requestVideo(ev) {
38 | 		status = 'downloading';
39 | 		socket.emit('download', {
40 | 			url: url,
41 | 			download_id: download_id
42 | 		});
43 | 		askProgress();
44 | 		intervalQuery = setInterval(askProgress, 250);
45 | 	}
46 | 
47 |     function requestMp3(ev) {
48 | 		status = 'downloading';
49 | 		socket.emit('download', {
50 | 			url: url,
51 | 			download_id: download_id,
52 |             mp3: true
53 | 		});
54 | 		askProgress();
55 | 		intervalQuery = setInterval(askProgress, 250);
56 | 	}
57 | </script>
58 | 
59 | <div class="downloadbar">
60 | 	{#if status == 'ready'}
61 |         <div>
62 |             <button class="button is-info" type="button" on:click={requestMp3}>Mp3</button>
63 |             <button class="button is-success" type="button" on:click={requestVideo}>Video</button>            
64 |         </div>
65 | 		
66 | 	{:else if status == 'downloading'}
67 | 		<small class="barinfo">
68 |             {progressData.status}
69 | 			{progressData.filename}
70 | 			{Math.round(progressData.percentage, 2)}%
71 |         </small>
72 | 		<progress class="progress is-success" value={$progress} />
73 | 
74 | 	{:else if status == 'complete'}
75 | 		<small class="barinfo">{status} {download_filename}</small>
76 | 		<a href={env.PUBLIC_API_URL + '/api/files/' + download_filename} 
77 |             download target="_blank">
78 |             <button class="button" class:is-link={!saved} class:is-light={saved} on:click={()=>saved=true}>
79 | 				{#if saved} Guardado {:else} Guardar {/if}
80 | 			</button>
81 |         </a>
82 | 	{/if}
83 | </div>
84 | 
85 | <style>
86 | 	.downloadbar {
87 | 		display: flex;
88 | 		flex-direction: column;
89 | 		align-items: center;
90 | 		justify-content: stretch;
91 | 		padding-bottom: 0.5rem;
92 | 		padding-top: 0.5rem;
93 | 	}
94 | </style>
95 | 


--------------------------------------------------------------------------------
/api/downloader.py:
--------------------------------------------------------------------------------
 1 | from datetime import datetime
 2 | from yt_dlp import YoutubeDL
 3 | from models import FormatInfo
 4 | from yt_dlp.postprocessor.ffmpeg import FFmpegExtractAudioPP
 5 | 
 6 | # dict_keys(['status', 'downloaded_bytes', 'total_bytes', 'tmpfilename', 'filename', 'eta', 'speed', 'elapsed', 'ctx_id', 'info_dict', '_eta_str',
 7 | #           '_speed_str', '_percent_str', '_total_bytes_str', '_total_bytes_estimate_str', '_downloaded_bytes_str', '_elapsed_str', '_default_template'])
 8 | 
 9 | def processHookInfo(d):
10 |     info={
11 |         "status": d.get('status'),
12 |         "downloaded_bytes": d.get('downloaded_bytes',0),
13 |         "total_bytes": d.get('total_bytes',1),
14 |         "filename": d.get('filename','.\\').split("\\")[-1],
15 |     }
16 |     return info
17 | 
18 | 
19 | ydl_opts = {
20 |     'outtmpl': './downloads/%(id)s.%(extractor)s.%(ext)s',
21 |     'quiet': True,
22 |     'noplaylist': True
23 | }
24 | 
25 | 
26 | class Downloader(YoutubeDL):
27 | 
28 |     def __init__(self):
29 |         super().__init__(ydl_opts)
30 | 
31 |     def tryInfo(self, url):
32 |         try:
33 |             info = self.extract_info(url, download=False)
34 |         except:
35 |             return None
36 |         return info
37 | 
38 |     def getInfo(self, url):
39 |         return self.tryInfo(url)
40 | 
41 |     def getInfoSanitized(self, url):
42 |         info = self.tryInfo(url)
43 |         return self.sanitize_info(info)
44 | 
45 |     def getFilename(self, url):
46 |         info = self.tryInfo(url)
47 |         if info is None:
48 |             return ""
49 |         return f"{info['id']}.{info['extractor']}.{info['ext']}"
50 | 
51 |     def getFilenameMp3(self, url):
52 |         info = self.tryInfo(url)
53 |         if info is None:
54 |             return ""
55 |         return f"{info['id']}.{info['extractor']}.mp3"
56 | 
57 |     def tryDownload(self, url):
58 |         try:
59 |             return self.download([url])
60 |         except:
61 |             return -1
62 | 
63 |     def getFormats(self,url):
64 |         info = self.getInfo(url)
65 |         formats = []
66 |         if info is not None:
67 |             for fmt in info['formats']:
68 |                 fi = FormatInfo.parse_obj(fmt)
69 |                 formats.append(fi)
70 |             return formats
71 |         else:
72 |             return None
73 | 
74 |     def pickFormat(self,format_id):
75 |         self.format_selector = self.build_format_selector(format_id)
76 | 
77 |     def mp3Mode(self):
78 |         self.add_post_processor(FFmpegExtractAudioPP(preferredcodec='mp3'))
79 | 
80 | 
81 | if __name__ == "__main__":
82 |     yee = 'https://www.youtube.com/watch?v=q6EoRBvdVPQ'
83 |     ydl = Downloader()
84 | 
85 | 
86 | 
87 | 


--------------------------------------------------------------------------------
/api/main.py:
--------------------------------------------------------------------------------
  1 | 
  2 | import asyncio
  3 | 
  4 | from fastapi import FastAPI, HTTPException
  5 | from fastapi.middleware.cors import CORSMiddleware
  6 | from fastapi.staticfiles import StaticFiles
  7 | from fastapi.responses import FileResponse
  8 | 
  9 | from fastapi_socketio import SocketManager
 10 | 
 11 | from progress import ProgressTracker
 12 | from downloader import Downloader, processHookInfo
 13 | from models import VideoInfo, VideoUrl, FormatInfo
 14 | 
 15 | api = FastAPI()
 16 | 
 17 | api.add_middleware(
 18 |     CORSMiddleware,
 19 |     allow_origins="*",
 20 |     allow_credentials=True,
 21 |     allow_methods=["*"],
 22 |     allow_headers=["*"],
 23 | )
 24 | 
 25 | api.mount("/files", StaticFiles(directory="downloads"), name="downloads")
 26 | 
 27 | 
 28 | sm = SocketManager(app=api, cors_allowed_origins=[], socketio_path='')
 29 | pt = ProgressTracker()
 30 | 
 31 | @api.post("/download")
 32 | async def downloadUrl(vidUrl: VideoUrl):
 33 |     ydl = Downloader()
 34 |     filename = ydl.getFilename(vidUrl.url)
 35 |     res = ydl.download([vidUrl.url])
 36 |     print(res)
 37 |     return filename
 38 | 
 39 | @api.post("/mp3")
 40 | async def downloadMp3(vidUrl: VideoUrl):
 41 |     ydl = Downloader()
 42 |     filename = ydl.getFilename(vidUrl.url)
 43 |     ydl.mp3Mode()
 44 |     res = ydl.download([vidUrl.url])
 45 |     print(res)
 46 |     return filename
 47 | 
 48 | @api.post("/formats")
 49 | async def formatsUrl(vidUrl: VideoUrl):
 50 |     url = vidUrl.url
 51 |     ydl = Downloader()
 52 |     info = ydl.getFormats(url)
 53 |     if info is None:
 54 |         raise HTTPException(status_code=404, detail="URL not supported")
 55 |     else:
 56 |         return info
 57 | 
 58 | @api.post("/info")
 59 | async def infoUrl(vidUrl: VideoUrl):
 60 |     url = vidUrl.url
 61 |     ydl = Downloader()
 62 |     info = ydl.getInfo(url)
 63 |     if info is None:
 64 |         raise HTTPException(status_code=404, detail="URL not supported")
 65 |     else:
 66 |         return VideoInfo(
 67 |             title=info['title'],
 68 |             thumbUrl=info['thumbnail'],
 69 |             site=info['webpage_url_domain'],
 70 |             url=info['webpage_url']
 71 |         )
 72 | 
 73 | 
 74 | @api.sio.on('queryprogress')
 75 | async def handle_join(sid, data):
 76 |     #print(f"query: {data}")
 77 |     dl_id = int(data)
 78 |     res = {
 79 |         "status": pt.getStatus(dl_id),
 80 |         "percentage": pt.getPercentage(dl_id),
 81 |         "filename": pt.getFilename(dl_id)
 82 |     }
 83 |     await sm.emit(f"progress.{dl_id}", res)
 84 |     #print(f"emit progress.{dl_id}")
 85 | 
 86 | @api.sio.on('download')
 87 | async def handle_join(sid, data):
 88 | 
 89 |     print(f"Download requested: {data}")
 90 |     
 91 |     dl_id = int(data['download_id'])
 92 |     url = data['url']
 93 |     
 94 |     pt.attachDownload(url, dl_id)
 95 | 
 96 |     def temphook(d):
 97 |         pt.loadHookInfo(dl_id,processHookInfo(d))
 98 | 
 99 |     ydl = Downloader()
100 | 
101 |     if data.get('mp3'):
102 |         ydl.mp3Mode()
103 |         ext='mp3'
104 |     else:
105 |         ext = None
106 | 
107 |     ydl.add_progress_hook(temphook)
108 | 
109 |     loop = asyncio.get_event_loop()
110 |     res = await loop.run_in_executor(None, ydl.extract_info, url)
111 |     
112 |     ext = res['ext'] if ext is None else ext
113 |     filename = f"{res['id']}.{res['extractor']}.{ext}"
114 | 
115 |     print(filename)
116 |     await sm.emit(f"finished.{dl_id}", filename)
117 |     #print(f"emit finished.{dl_id}")
118 | 
119 | 
120 | app = FastAPI()
121 | app.mount("/api",api)
122 | 
123 | # Correr build con /index.html
124 | #app.mount("/", StaticFiles(directory="../app/build"), name="site")
125 | 
126 | 


--------------------------------------------------------------------------------