aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md4
-rw-r--r--app/main.py43
-rw-r--r--app/ytdl.py9
-rw-r--r--ui/angular.json3
-rw-r--r--ui/package-lock.json238
-rw-r--r--ui/package.json2
-rw-r--r--ui/src/app/app.component.html3
-rw-r--r--ui/src/app/app.component.sass5
-rw-r--r--ui/src/app/app.component.ts39
-rw-r--r--ui/src/app/app.module.ts4
-rw-r--r--ui/src/app/downloads.service.ts11
-rw-r--r--ui/src/styles.sass3
12 files changed, 108 insertions, 256 deletions
diff --git a/README.md b/README.md
index ed08478..692ccd5 100644
--- a/README.md
+++ b/README.md
@@ -35,9 +35,9 @@ Certain values can be set via environment variables, using the `-e` parameter on
* __GID__: group under which MeTube will run. Defaults to `1000`.
* __UMASK__: umask value used by MeTube. Defaults to `022`.
* __DOWNLOAD_DIR__: path to where the downloads will be saved. Defaults to `/downloads` in the docker image, and `.` otherwise.
-* __CUSTOM_DIR__: whether to enable downloading videos into folders within the __DOWNLOAD_DIR__. Defaults to `true`.
-* __AUTO_CREATE_CUSTOM_DIR__: whether to support automatically creating folders within the __DOWNLOAD_DIR__ if they do not exist. Defaults to `false`.
* __AUDIO_DOWNLOAD_DIR__: path to where audio-only downloads will be saved, if you wish to separate them from the video downloads. Defaults to the value of `DOWNLOAD_DIR`.
+* __CUSTOM_DIRS__: whether to enable downloading videos into custom directories within the __DOWNLOAD_DIR__ (or __AUDIO_DOWNLOAD_DIR__). When enabled, a drop-down appears next to the Add button to specify the download directory. Defaults to `true`.
+* __CREATE_DIRS__: whether to support automatically creating directories within the __DOWNLOAD_DIR__ (or __AUDIO_DOWNLOAD_DIR__) if they do not exist. When enabled, the download directory selector becomes supports free-text input, and the specified directory will be created recursively. Defaults to `false`.
* __STATE_DIR__: path to where the queue persistence files will be saved. Defaults to `/downloads/.metube` in the docker image, and `.` otherwise.
* __URL_PREFIX__: base path for the web server (for use when hosting behind a reverse proxy). Defaults to `/`.
* __OUTPUT_TEMPLATE__: the template for the filenames of the downloaded videos, formatted according to [this spec](https://github.com/yt-dlp/yt-dlp/blob/master/README.md#output-template). Defaults to `%(title)s.%(ext)s`.
diff --git a/app/main.py b/app/main.py
index 56adc00..de13f1e 100644
--- a/app/main.py
+++ b/app/main.py
@@ -17,8 +17,8 @@ class Config:
_DEFAULTS = {
'DOWNLOAD_DIR': '.',
'AUDIO_DOWNLOAD_DIR': '%%DOWNLOAD_DIR',
- 'CUSTOM_DIR': 'true',
- 'AUTO_CREATE_CUSTOM_DIR': 'false',
+ 'CUSTOM_DIRS': 'true',
+ 'CREATE_DIRS': 'false',
'STATE_DIR': '.',
'URL_PREFIX': '',
'OUTPUT_TEMPLATE': '%(title)s.%(ext)s',
@@ -101,18 +101,39 @@ async def delete(request):
async def connect(sid, environ):
await sio.emit('all', serializer.encode(dqueue.get()), to=sid)
await sio.emit('configuration', serializer.encode(config), to=sid)
- if config.CUSTOM_DIR:
- await sio.emit('custom_directories', serializer.encode(get_custom_directories()), to=sid)
+ if config.CUSTOM_DIRS:
+ await sio.emit('custom_dirs', serializer.encode(get_custom_dirs()), to=sid)
-def get_custom_directories():
- path = pathlib.Path(config.DOWNLOAD_DIR)
- # Recursively lists all subdirectories, and converts PosixPath objects to string
- dirs = list(map(str, path.glob('**')))
+def get_custom_dirs():
+ def recursive_dirs(base):
+ path = pathlib.Path(base)
+
+ # Converts PosixPath object to string, and remove base/ prefix
+ def convert(p):
+ s = str(p)
+ if s.startswith(base):
+ s = s[len(base):]
+
+ if s.startswith('/'):
+ s = s[1:]
+
+ return s
+
+ # Recursively lists all subdirectories of DOWNLOAD_DIR
+ dirs = list(filter(None, map(convert, path.glob('**'))))
+
+ return dirs
- if '.' in dirs:
- dirs.remove('.')
+ download_dir = recursive_dirs(config.DOWNLOAD_DIR)
- return {"directories": dirs}
+ audio_download_dir = download_dir
+ if config.DOWNLOAD_DIR != config.AUDIO_DOWNLOAD_DIR:
+ audio_download_dir = recursive_dirs(config.AUDIO_DOWNLOAD_DIR)
+
+ return {
+ "download_dir": download_dir,
+ "audio_download_dir": audio_download_dir
+ }
@routes.get(config.URL_PREFIX)
def index(request):
diff --git a/app/ytdl.py b/app/ytdl.py
index 29fa4bd..4329147 100644
--- a/app/ytdl.py
+++ b/app/ytdl.py
@@ -228,16 +228,17 @@ class DownloadQueue:
elif etype == 'video' or etype.startswith('url') and 'id' in entry and 'title' in entry:
if not self.queue.exists(entry['id']):
dl = DownloadInfo(entry['id'], entry['title'], entry.get('webpage_url') or entry['url'], quality, format, folder)
+ # Keep consistent with frontend
base_directory = self.config.DOWNLOAD_DIR if (quality != 'audio' and format != 'mp3') else self.config.AUDIO_DOWNLOAD_DIR
if folder:
- if self.config.CUSTOM_DIR != 'true':
- return {'status': 'error', 'msg': f'A folder for the download was specified but CUSTOM_DIR is not true in the configuration.'}
+ if self.config.CUSTOM_DIRS != 'true':
+ return {'status': 'error', 'msg': f'A folder for the download was specified but CUSTOM_DIRS is not true in the configuration.'}
dldirectory = os.path.realpath(os.path.join(base_directory, folder))
if not dldirectory.startswith(base_directory):
return {'status': 'error', 'msg': f'Folder "{folder}" must resolve inside the base download directory "{base_directory}"'}
if not os.path.isdir(dldirectory):
- if self.config.AUTO_CREATE_CUSTOM_DIR != 'true':
- return {'status': 'error', 'msg': f'Folder "{folder}" for download does not exist, and AUTO_CREATE_CUSTOM_DIR is not true in the configuration.'}
+ if self.config.CREATE_DIRS != 'true':
+ return {'status': 'error', 'msg': f'Folder "{folder}" for download does not exist inside base directory "{base_directory}", and CREATE_DIRS is not true in the configuration.'}
os.makedirs(dldirectory, exist_ok=True)
else:
dldirectory = base_directory
diff --git a/ui/angular.json b/ui/angular.json
index 3c9a781..1529f3f 100644
--- a/ui/angular.json
+++ b/ui/angular.json
@@ -32,13 +32,10 @@
],
"stylePreprocessorOptions": {
"includePaths": [
- "node_modules/@selectize/selectize/dist/scss/selectize.bootstrap5.scss"
]
},
"scripts": [
- "node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
- "node_modules/@selectize/selectize/dist/js/standalone/selectize.min.js"
]
},
"configurations": {
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 8bbb724..fbcb8a4 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -22,7 +22,7 @@
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
- "@selectize/selectize": "^0.13.6",
+ "@ng-select/ng-select": "^8.3.0",
"bootstrap": "^5.0.0",
"ngx-cookie-service": "^13.0.0",
"ngx-socket-io": "^4.2.0",
@@ -2530,6 +2530,23 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
+ "node_modules/@ng-select/ng-select": {
+ "version": "8.3.0",
+ "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-8.3.0.tgz",
+ "integrity": "sha512-AwAuDs+86++D2kEsik2/ZiQuRk0khd1HESofOm1yMBwbzsw+xLSyVOMml/OehDFSOxli7fAkk07wYtzAhxSB3Q==",
+ "dependencies": {
+ "tslib": "^2.3.1"
+ },
+ "engines": {
+ "node": ">= 12.20.0",
+ "npm": ">= 6.0.0"
+ },
+ "peerDependencies": {
+ "@angular/common": ">=13.0.0 <14.0.0",
+ "@angular/core": ">=13.0.0 <14.0.0",
+ "@angular/forms": ">=13.0.0 <14.0.0"
+ }
+ },
"node_modules/@ngtools/webpack": {
"version": "13.3.8",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.3.8.tgz",
@@ -2689,44 +2706,6 @@
"yarn": ">= 1.13.0"
}
},
- "node_modules/@selectize/selectize": {
- "version": "0.13.6",
- "resolved": "https://registry.npmjs.org/@selectize/selectize/-/selectize-0.13.6.tgz",
- "integrity": "sha512-UVkHH92l/4zLH/acfukry419K2yAKiDf6VmFQ9hZzMpWW2epE7xJIgK47mJLjAQnimP0ROo8BStfwelWcoTQyg==",
- "dependencies": {
- "@selectize/sifter": "^0.6.2",
- "microplugin": "0.0.3"
- },
- "engines": {
- "node": "*"
- },
- "optionalDependencies": {
- "jquery-ui": "^1.13.0"
- },
- "peerDependencies": {
- "jquery": "^1.7.0 || ^2 || ^3"
- }
- },
- "node_modules/@selectize/sifter": {
- "version": "0.6.2",
- "resolved": "https://registry.npmjs.org/@selectize/sifter/-/sifter-0.6.2.tgz",
- "integrity": "sha512-rpWQuzaCEV2GOEfBmP5NGST3IsA/RGRd3vugOGQVxAaN1xMI9tsrMmx5rC811iInq6OeFH3Jix5EfglYQ3XwKQ==",
- "dependencies": {
- "async": "^3.2.3",
- "cardinal": "^2.1.1",
- "csv-parse": "^5.0.4",
- "humanize": "^0.0.9",
- "optimist": "^0.5.2"
- },
- "bin": {
- "sifter": "bin/sifter.js"
- }
- },
- "node_modules/@selectize/sifter/node_modules/async": {
- "version": "3.2.4",
- "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
- "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
- },
"node_modules/@socket.io/component-emitter": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@@ -3338,11 +3317,6 @@
"node": ">=4"
}
},
- "node_modules/ansicolors": {
- "version": "0.3.2",
- "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
- "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg=="
- },
"node_modules/anymatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -3945,18 +3919,6 @@
}
]
},
- "node_modules/cardinal": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
- "integrity": "sha512-JSr5eOgoEymtYHBjNWyjrMqet9Am2miJhlfKNdqLp6zoeAh0KN5dRAcxlecj5mAJrmQomgiOBj35xHLrFjqBpw==",
- "dependencies": {
- "ansicolors": "~0.3.2",
- "redeyed": "~2.1.0"
- },
- "bin": {
- "cdl": "bin/cdl.js"
- }
- },
"node_modules/chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4760,11 +4722,6 @@
"node": ">=4"
}
},
- "node_modules/csv-parse": {
- "version": "5.3.0",
- "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.3.0.tgz",
- "integrity": "sha512-UXJCGwvJ2fep39purtAn27OUYmxB1JQto+zhZ4QlJpzsirtSFbzLvip1aIgziqNdZp/TptvsKEV5BZSxe10/DQ=="
- },
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5611,6 +5568,7 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+ "dev": true,
"bin": {
"esparse": "bin/esparse.js",
"esvalidate": "bin/esvalidate.js"
@@ -6471,14 +6429,6 @@
"node": ">=10.17.0"
}
},
- "node_modules/humanize": {
- "version": "0.0.9",
- "resolved": "https://registry.npmjs.org/humanize/-/humanize-0.0.9.tgz",
- "integrity": "sha512-bvZZ7vXpr1RKoImjuQ45hJb5OvE2oJafHysiD/AL3nkqTZH2hFCjQ3YZfCd63FefDitbJze/ispUPP0gfDsT2Q==",
- "engines": {
- "node": "*"
- }
- },
"node_modules/humanize-ms": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -7072,20 +7022,6 @@
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
- "node_modules/jquery": {
- "version": "3.6.1",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
- "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
- },
- "node_modules/jquery-ui": {
- "version": "1.13.2",
- "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.13.2.tgz",
- "integrity": "sha512-wBZPnqWs5GaYJmo1Jj0k/mrSkzdQzKDwhXNtHKcBdAcKVxMM3KNYFq+iJ2i1rwiG53Z8M4mTn3Qxrm17uH1D4Q==",
- "optional": true,
- "dependencies": {
- "jquery": ">=1.8.0 <4.0.0"
- }
- },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7568,14 +7504,6 @@
"node": ">=8.6"
}
},
- "node_modules/microplugin": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/microplugin/-/microplugin-0.0.3.tgz",
- "integrity": "sha512-3wKXex4/iyALV0GX2juow66J9dabkEMgHeZAihdLTaRTzm0N+RubXioNPpfIQDPuBRxr3JbjNt7B0Lr/3yE9yQ==",
- "engines": {
- "node": "*"
- }
- },
"node_modules/mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -8458,14 +8386,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/optimist": {
- "version": "0.5.2",
- "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.5.2.tgz",
- "integrity": "sha512-r9M8ZpnM9SXV5Wii7TCqienfcaY3tAiJe9Jchof87icbmbruKgK0xKXngmrnowTDnEawmmI1Qbha59JEoBkBGA==",
- "dependencies": {
- "wordwrap": "~0.0.2"
- }
- },
"node_modules/ora": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -9670,14 +9590,6 @@
"node": ">=8.10.0"
}
},
- "node_modules/redeyed": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-2.1.1.tgz",
- "integrity": "sha512-FNpGGo1DycYAdnrKFxCMmKYgo/mILAqtRYbkdQD8Ep/Hk2PQ5+aEAEx+IU713RTDmuBaH0c8P5ZozurNu5ObRQ==",
- "dependencies": {
- "esprima": "~4.0.0"
- }
- },
"node_modules/reflect-metadata": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -11622,14 +11534,6 @@
"integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
"dev": true
},
- "node_modules/wordwrap": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
- "integrity": "sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==",
- "engines": {
- "node": ">=0.4.0"
- }
- },
"node_modules/wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -13511,6 +13415,14 @@
"tslib": "^2.3.0"
}
},
+ "@ng-select/ng-select": {
+ "version": "8.3.0",
+ "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-8.3.0.tgz",
+ "integrity": "sha512-AwAuDs+86++D2kEsik2/ZiQuRk0khd1HESofOm1yMBwbzsw+xLSyVOMml/OehDFSOxli7fAkk07wYtzAhxSB3Q==",
+ "requires": {
+ "tslib": "^2.3.1"
+ }
+ },
"@ngtools/webpack": {
"version": "13.3.8",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.3.8.tgz",
@@ -13634,35 +13546,6 @@
"jsonc-parser": "3.0.0"
}
},
- "@selectize/selectize": {
- "version": "0.13.6",
- "resolved": "https://registry.npmjs.org/@selectize/selectize/-/selectize-0.13.6.tgz",
- "integrity": "sha512-UVkHH92l/4zLH/acfukry419K2yAKiDf6VmFQ9hZzMpWW2epE7xJIgK47mJLjAQnimP0ROo8BStfwelWcoTQyg==",
- "requires": {
- "@selectize/sifter": "^0.6.2",
- "jquery-ui": "^1.13.0",
- "microplugin": "0.0.3"
- }
- },
- "@selectize/sifter": {
- "version": "0.6.2",
- "resolved": "https://registry.npmjs.org/@selectize/sifter/-/sifter-0.6.2.tgz",
- "integrity": "sha512-rpWQuzaCEV2GOEfBmP5NGST3IsA/RGRd3vugOGQVxAaN1xMI9tsrMmx5rC811iInq6OeFH3Jix5EfglYQ3XwKQ==",
- "requires": {
- "async": "^3.2.3",
- "cardinal": "^2.1.1",
- "csv-parse": "^5.0.4",
- "humanize": "^0.0.9",
- "optimist": "^0.5.2"
- },
- "dependencies": {
- "async": {
- "version": "3.2.4",
- "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
- "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
- }
- }
- },
"@socket.io/component-emitter": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@@ -14208,11 +14091,6 @@
"color-convert": "^1.9.0"
}
},
- "ansicolors": {
- "version": "0.3.2",
- "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
- "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg=="
- },
"anymatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -14658,15 +14536,6 @@
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001358.tgz",
"integrity": "sha512-hvp8PSRymk85R20bsDra7ZTCpSVGN/PAz9pSAjPSjKC+rNmnUk5vCRgJwiTT/O4feQ/yu/drvZYpKxxhbFuChw=="
},
- "cardinal": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
- "integrity": "sha512-JSr5eOgoEymtYHBjNWyjrMqet9Am2miJhlfKNdqLp6zoeAh0KN5dRAcxlecj5mAJrmQomgiOBj35xHLrFjqBpw==",
- "requires": {
- "ansicolors": "~0.3.2",
- "redeyed": "~2.1.0"
- }
- },
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -15267,11 +15136,6 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
- "csv-parse": {
- "version": "5.3.0",
- "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.3.0.tgz",
- "integrity": "sha512-UXJCGwvJ2fep39purtAn27OUYmxB1JQto+zhZ4QlJpzsirtSFbzLvip1aIgziqNdZp/TptvsKEV5BZSxe10/DQ=="
- },
"damerau-levenshtein": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -15823,7 +15687,8 @@
"esprima": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
- "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+ "dev": true
},
"esrecurse": {
"version": "4.3.0",
@@ -16478,11 +16343,6 @@
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
"dev": true
},
- "humanize": {
- "version": "0.0.9",
- "resolved": "https://registry.npmjs.org/humanize/-/humanize-0.0.9.tgz",
- "integrity": "sha512-bvZZ7vXpr1RKoImjuQ45hJb5OvE2oJafHysiD/AL3nkqTZH2hFCjQ3YZfCd63FefDitbJze/ispUPP0gfDsT2Q=="
- },
"humanize-ms": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -16903,20 +16763,6 @@
}
}
},
- "jquery": {
- "version": "3.6.1",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
- "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
- },
- "jquery-ui": {
- "version": "1.13.2",
- "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.13.2.tgz",
- "integrity": "sha512-wBZPnqWs5GaYJmo1Jj0k/mrSkzdQzKDwhXNtHKcBdAcKVxMM3KNYFq+iJ2i1rwiG53Z8M4mTn3Qxrm17uH1D4Q==",
- "optional": true,
- "requires": {
- "jquery": ">=1.8.0 <4.0.0"
- }
- },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -17276,11 +17122,6 @@
"picomatch": "^2.3.1"
}
},
- "microplugin": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/microplugin/-/microplugin-0.0.3.tgz",
- "integrity": "sha512-3wKXex4/iyALV0GX2juow66J9dabkEMgHeZAihdLTaRTzm0N+RubXioNPpfIQDPuBRxr3JbjNt7B0Lr/3yE9yQ=="
- },
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -17946,14 +17787,6 @@
"is-wsl": "^2.2.0"
}
},
- "optimist": {
- "version": "0.5.2",
- "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.5.2.tgz",
- "integrity": "sha512-r9M8ZpnM9SXV5Wii7TCqienfcaY3tAiJe9Jchof87icbmbruKgK0xKXngmrnowTDnEawmmI1Qbha59JEoBkBGA==",
- "requires": {
- "wordwrap": "~0.0.2"
- }
- },
"ora": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -18776,14 +18609,6 @@
"picomatch": "^2.2.1"
}
},
- "redeyed": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-2.1.1.tgz",
- "integrity": "sha512-FNpGGo1DycYAdnrKFxCMmKYgo/mILAqtRYbkdQD8Ep/Hk2PQ5+aEAEx+IU713RTDmuBaH0c8P5ZozurNu5ObRQ==",
- "requires": {
- "esprima": "~4.0.0"
- }
- },
"reflect-metadata": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -20217,11 +20042,6 @@
"integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
"dev": true
},
- "wordwrap": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
- "integrity": "sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw=="
- },
"wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index 3ea2e71..b46cd94 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -25,7 +25,7 @@
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
- "@selectize/selectize": "^0.13.6",
+ "@ng-select/ng-select": "^8.3.0",
"bootstrap": "^5.0.0",
"ngx-cookie-service": "^13.0.0",
"ngx-socket-io": "^4.2.0",
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 8af200c..23dccce 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -58,8 +58,7 @@
<div ngbDropdownMenu aria-labelledby="advancedButton" class="dropdown-menu dropdown-menu-end folder-dropdown-menu">
<div class="input-group">
<span class="input-group-text">Download Folder</span>
- <select class="form-select" name="folder" #folderSelect [(ngModel)]="folder" (change)="folderChanged()" [disabled]="addInProgress || downloads.loading">
- </select>
+ <ng-select [items]="customDirs$ | async" placeholder="Default" [addTag]="allowCustomDir()" addTagText="Create directory" [ngStyle]="{'flex-grow':'1'}" bindLabel="folder" [(ngModel)]="folder" [disabled]="addInProgress || downloads.loading"></ng-select>
</div>
</div>
</div>
diff --git a/ui/src/app/app.component.sass b/ui/src/app/app.component.sass
index d95fc0d..0f98556 100644
--- a/ui/src/app/app.component.sass
+++ b/ui/src/app/app.component.sass
@@ -18,6 +18,11 @@ button.add-url
.folder-dropdown-menu
width: 500px
+.folder-dropdown-menu .input-group
+ display: flex
+ padding-left: 5px
+ padding-right: 5px
+
$metube-section-color-bg: rgba(0,0,0,.07)
.metube-section-header
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 052e182..e716395 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -1,15 +1,13 @@
-import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
import { faRedoAlt, faSun, faMoon, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { CookieService } from 'ngx-cookie-service';
+import { map, Observable, of } from 'rxjs';
import { DownloadsService, Status } from './downloads.service';
import { MasterCheckboxComponent } from './master-checkbox.component';
import { Formats, Format, Quality } from './formats';
-// jQuery is loaded in angular.json for selectize
-declare var $: any;
-
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
@@ -22,9 +20,9 @@ export class AppComponent implements AfterViewInit {
quality: string;
format: string;
folder: string;
- customDirs: string[] = [];
addInProgress = false;
darkMode: boolean;
+ customDirs$: Observable<string[]>;
@ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
@ViewChild('queueDelSelected') queueDelSelected: ElementRef;
@@ -32,7 +30,6 @@ export class AppComponent implements AfterViewInit {
@ViewChild('doneDelSelected') doneDelSelected: ElementRef;
@ViewChild('doneClearCompleted') doneClearCompleted: ElementRef;
@ViewChild('doneClearFailed') doneClearFailed: ElementRef;
- @ViewChild('folderSelect') folderSelect: ElementRef;
faTrashAlt = faTrashAlt;
faCheckCircle = faCheckCircle;
@@ -50,14 +47,11 @@ export class AppComponent implements AfterViewInit {
this.setupTheme(cookieService)
}
- ngAfterViewInit() {
- // Trigger folderSelect to update
- this.downloads.customDirsChanged.subscribe((dirs: string[]) => {
- console.log("customDirsChanged:", dirs);
- $(this.folderSelect.nativeElement).selectize({options: dirs});
- this.customDirs = dirs;
- });
+ ngOnInit() {
+ this.customDirs$ = this.getMatchingCustomDir();
+ }
+ ngAfterViewInit() {
this.downloads.queueChanged.subscribe(() => {
this.queueMasterCheckbox.selectionChanged();
});
@@ -86,11 +80,24 @@ export class AppComponent implements AfterViewInit {
}
showAdvanced() {
- return this.downloads.configuration['CUSTOM_DIR'] == 'true';
+ return this.downloads.configuration['CUSTOM_DIRS'] == 'true';
}
- folderChanged() {
- console.log("folder changed", this.folder);
+ allowCustomDir() {
+ return this.downloads.configuration['CREATE_DIRS'] == 'true';
+ }
+
+ getMatchingCustomDir() : Observable<string[]> {
+ return this.downloads.customDirs.asObservable().pipe(map((output) => {
+ // Keep logic consistent with app/ytdl.py
+ if (this.quality != 'audio' && this.format != 'mp3') {
+ console.debug("download_dir", output["download_dir"])
+ return output["download_dir"];
+ } else {
+ console.debug("audio_download_dir", output["audio_download_dir"])
+ return output["audio_download_dir"];
+ }
+ }));
}
setupTheme(cookieService) {
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 6ad5978..8eddbca 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { AppComponent } from './app.component';
import { EtaPipe, SpeedPipe, EncodeURIComponent } from './downloads.pipe';
import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
import { MeTubeSocket } from './metube-socket';
+import { NgSelectModule } from '@ng-select/ng-select';
@NgModule({
declarations: [
@@ -25,7 +26,8 @@ import { MeTubeSocket } from './metube-socket';
FormsModule,
NgbModule,
HttpClientModule,
- FontAwesomeModule
+ FontAwesomeModule,
+ NgSelectModule
],
providers: [CookieService, MeTubeSocket],
bootstrap: [AppComponent]
diff --git a/ui/src/app/downloads.service.ts b/ui/src/app/downloads.service.ts
index 42ffe6d..1fd75e3 100644
--- a/ui/src/app/downloads.service.ts
+++ b/ui/src/app/downloads.service.ts
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { of, Subject } from 'rxjs';
+import { Observable, of, Subject } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { MeTubeSocket } from './metube-socket';
@@ -33,7 +33,7 @@ export class DownloadsService {
done = new Map<string, Download>();
queueChanged = new Subject();
doneChanged = new Subject();
- customDirsChanged = new Subject<string[]>();
+ customDirs = new Subject<Map<string, string[]>>();
configuration = {};
constructor(private http: HttpClient, private socket: MeTubeSocket) {
@@ -81,11 +81,10 @@ export class DownloadsService {
console.debug("got configuration:", data);
this.configuration = data;
});
- socket.fromEvent('custom_directories').subscribe((strdata: string) => {
+ socket.fromEvent('custom_dirs').subscribe((strdata: string) => {
let data = JSON.parse(strdata);
- console.debug("got custom_directories:", data);
- let customDirectories = data["directories"];
- this.customDirsChanged.next(customDirectories);
+ console.debug("got custom_dirs:", data);
+ this.customDirs.next(data);
});
}
diff --git a/ui/src/styles.sass b/ui/src/styles.sass
index 68bef4f..4ce00cc 100644
--- a/ui/src/styles.sass
+++ b/ui/src/styles.sass
@@ -1,4 +1,5 @@
/* You can add global styles to this file, and also import other style files */
/* Importing Bootstrap SCSS file. */
-@import '~bootstrap/scss/bootstrap' \ No newline at end of file
+@import '~bootstrap/scss/bootstrap'
+@import '~@ng-select/ng-select/themes/default.theme.css' \ No newline at end of file
bgstack15