From bbfde99aeb84d226a0de3ea15a439d18766d7ee4 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Mon, 29 Aug 2022 19:02:00 -0400 Subject: Use angular primitives to toggle --- ui/src/app/app.component.ts | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index a9b46a3..f9e5a41 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -19,6 +19,7 @@ export class AppComponent implements AfterViewInit { quality: string; format: string; addInProgress = false; + showFolderDropdown = false; darkMode: boolean; @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent; @@ -114,6 +115,10 @@ export class AppComponent implements AfterViewInit { this.quality = exists ? this.quality : 'best' } + clickFolderDropdown() { + this.showFolderDropdown = !this.showFolderDropdown; + } + addDownload(url?: string, quality?: string, format?: string) { url = url ?? this.addUrl quality = quality ?? this.quality -- cgit From 4a9f55adda55a35c67c5e6699aa71fa56295c9b4 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Mon, 29 Aug 2022 20:27:34 -0400 Subject: Propagate configuration on load via downloads socket --- ui/src/app/app.component.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index f9e5a41..f48b934 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -18,8 +18,8 @@ export class AppComponent implements AfterViewInit { qualities: Quality[]; quality: string; format: string; + folder: string; addInProgress = false; - showFolderDropdown = false; darkMode: boolean; @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent; @@ -73,6 +73,14 @@ export class AppComponent implements AfterViewInit { this.cookieService.set('metube_quality', this.quality, { expires: 3650 }); } + showAdvanced() { + return this.downloads.configuration['CUSTOM_DIR'] == 'true'; + } + + folderChanged() { + console.log("folder changed", this.folder); + } + setupTheme(cookieService) { if (cookieService.check('metube_dark')) { this.darkMode = cookieService.get('metube_dark') === "true" @@ -115,10 +123,6 @@ export class AppComponent implements AfterViewInit { this.quality = exists ? this.quality : 'best' } - clickFolderDropdown() { - this.showFolderDropdown = !this.showFolderDropdown; - } - addDownload(url?: string, quality?: string, format?: string) { url = url ?? this.addUrl quality = quality ?? this.quality -- cgit From 8abacc2a3610701e6258d9c79ee0c577ad2b2376 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Mon, 29 Aug 2022 21:52:54 -0400 Subject: almost functional with selectize --- ui/src/app/app.component.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index f48b934..052e182 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; +import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } 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'; @@ -7,10 +7,13 @@ 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', - styleUrls: ['./app.component.sass'] + styleUrls: ['./app.component.sass'], }) export class AppComponent implements AfterViewInit { addUrl: string; @@ -19,6 +22,7 @@ export class AppComponent implements AfterViewInit { quality: string; format: string; folder: string; + customDirs: string[] = []; addInProgress = false; darkMode: boolean; @@ -28,6 +32,7 @@ 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; @@ -46,6 +51,13 @@ export class AppComponent implements AfterViewInit { } ngAfterViewInit() { + // Trigger folderSelect to update + this.downloads.customDirsChanged.subscribe((dirs: string[]) => { + console.log("customDirsChanged:", dirs); + $(this.folderSelect.nativeElement).selectize({options: dirs}); + this.customDirs = dirs; + }); + this.downloads.queueChanged.subscribe(() => { this.queueMasterCheckbox.selectionChanged(); }); -- cgit From ba712fc071398e615ead822c8bd81aad42a90c8f Mon Sep 17 00:00:00 2001 From: James Woglom Date: Tue, 30 Aug 2022 00:55:16 -0400 Subject: Fill in download_dir or audio_download_dir on launch --- ui/src/app/app.component.ts | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) (limited to 'ui/src/app/app.component.ts') 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; @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 { + 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) { -- cgit From 52e3307d99b6f809c6a7a281b2a33bbc67c0e006 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Tue, 30 Aug 2022 00:58:19 -0400 Subject: switch between audio and default custom directories on change --- ui/src/app/app.component.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index e716395..cdcd8f6 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -77,6 +77,8 @@ export class AppComponent implements AfterViewInit { qualityChanged() { this.cookieService.set('metube_quality', this.quality, { expires: 3650 }); + // Re-trigger custom directory change + this.downloads.customDirsChanged.next(this.downloads.customDirs); } showAdvanced() { @@ -88,13 +90,13 @@ export class AppComponent implements AfterViewInit { } getMatchingCustomDir() : Observable { - return this.downloads.customDirs.asObservable().pipe(map((output) => { + return this.downloads.customDirsChanged.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"]) + console.debug("Showing default download directories"); return output["download_dir"]; } else { - console.debug("audio_download_dir", output["audio_download_dir"]) + console.debug("Showing audio-specific download directories"); return output["audio_download_dir"]; } })); @@ -125,6 +127,8 @@ export class AppComponent implements AfterViewInit { this.cookieService.set('metube_format', this.format, { expires: 3650 }); // Updates to use qualities available this.setQualities() + // Re-trigger custom directory change + this.downloads.customDirsChanged.next(this.downloads.customDirs); } queueSelectionChanged(checked: number) { -- cgit From 63baa1fc25a7ee02832b043bb38470fe611cfb01 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Tue, 30 Aug 2022 01:22:24 -0400 Subject: Link to audio files and those with custom folders properly --- ui/src/app/app.component.ts | 36 +++++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 9 deletions(-) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index cdcd8f6..97ff020 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -4,7 +4,7 @@ import { faRedoAlt, faSun, faMoon, faExternalLinkAlt } from '@fortawesome/free-s import { CookieService } from 'ngx-cookie-service'; import { map, Observable, of } from 'rxjs'; -import { DownloadsService, Status } from './downloads.service'; +import { Download, DownloadsService, Status } from './downloads.service'; import { MasterCheckboxComponent } from './master-checkbox.component'; import { Formats, Format, Quality } from './formats'; @@ -89,15 +89,19 @@ export class AppComponent implements AfterViewInit { return this.downloads.configuration['CREATE_DIRS'] == 'true'; } + isAudioType() { + return this.quality == 'audio' || this.format == 'mp3'; + } + getMatchingCustomDir() : Observable { return this.downloads.customDirsChanged.asObservable().pipe(map((output) => { // Keep logic consistent with app/ytdl.py - if (this.quality != 'audio' && this.format != 'mp3') { - console.debug("Showing default download directories"); - return output["download_dir"]; - } else { + if (this.isAudioType()) { console.debug("Showing audio-specific download directories"); return output["audio_download_dir"]; + } else { + console.debug("Showing default download directories"); + return output["download_dir"]; } })); } @@ -146,13 +150,14 @@ export class AppComponent implements AfterViewInit { this.quality = exists ? this.quality : 'best' } - addDownload(url?: string, quality?: string, format?: string) { + addDownload(url?: string, quality?: string, format?: string, folder?: string) { url = url ?? this.addUrl quality = quality ?? this.quality format = format ?? this.format + folder = folder ?? this.folder this.addInProgress = true; - this.downloads.add(url, quality, format).subscribe((status: Status) => { + this.downloads.add(url, quality, format, folder).subscribe((status: Status) => { if (status.status === 'error') { alert(`Error adding URL: ${status.msg}`); } else { @@ -162,8 +167,8 @@ export class AppComponent implements AfterViewInit { }); } - retryDownload(key: string, url: string, quality: string, format: string) { - this.addDownload(url, quality, format); + retryDownload(key: string, url: string, quality: string, format: string, folder: string) { + this.addDownload(url, quality, format, folder); this.downloads.delById('done', [key]).subscribe(); } @@ -182,4 +187,17 @@ export class AppComponent implements AfterViewInit { clearFailedDownloads() { this.downloads.delByFilter('done', dl => dl.status === 'error').subscribe(); } + + buildDownloadLink(download: Download) { + let baseDir = 'download/'; + if (download.quality == 'audio' || download.filename.endsWith('.mp3')) { + baseDir = 'audio_download/'; + } + + if (download.folder) { + baseDir += download.folder + '/'; + } + + return baseDir + encodeURIComponent(download.filename); + } } -- cgit From 202813b9edf26ee269ef808f86f1bc646782d7a9 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Mon, 19 Sep 2022 15:00:26 -0400 Subject: CREATE_DIRS -> CREATE_CUSTOM_DIRS --- ui/src/app/app.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 97ff020..eae1ba9 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -86,7 +86,7 @@ export class AppComponent implements AfterViewInit { } allowCustomDir() { - return this.downloads.configuration['CREATE_DIRS'] == 'true'; + return this.downloads.configuration['CREATE_CUSTOM_DIRS'] == 'true'; } isAudioType() { -- cgit From a07e1ed06c65bb473219ba4bf0372aabd35afee4 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Mon, 19 Sep 2022 15:31:46 -0400 Subject: bugfix: resolve full base directory before startswith check --- ui/src/app/app.component.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index eae1ba9..20db8b8 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -156,6 +156,7 @@ export class AppComponent implements AfterViewInit { format = format ?? this.format folder = folder ?? this.folder + console.debug('Downloading: url='+url+' quality='+quality+' format='+format+' folder='+folder); this.addInProgress = true; this.downloads.add(url, quality, format, folder).subscribe((status: Status) => { if (status.status === 'error') { -- cgit From a36323677c99ee5696934843b720081553a2b1d2 Mon Sep 17 00:00:00 2001 From: James Woglom Date: Mon, 19 Sep 2022 16:15:24 -0400 Subject: attempt to fix issue where folder is sent by frontend as {folder: "foo"} instead of string --- ui/src/app/app.component.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 20db8b8..7ef7da4 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -85,8 +85,11 @@ export class AppComponent implements AfterViewInit { return this.downloads.configuration['CUSTOM_DIRS'] == 'true'; } - allowCustomDir() { - return this.downloads.configuration['CREATE_CUSTOM_DIRS'] == 'true'; + allowCustomDir(tag: string) { + if (this.downloads.configuration['CREATE_CUSTOM_DIRS'] == 'true') { + return tag; + } + return false; } isAudioType() { -- cgit From ea7a7b07113362718687dfbc778ae35323498e01 Mon Sep 17 00:00:00 2001 From: Alex Shnitman Date: Sat, 4 Feb 2023 11:09:36 +0200 Subject: Fix boolean env variables (closes #213) --- ui/src/app/app.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/src/app/app.component.ts') diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 7ef7da4..d4a1270 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -82,11 +82,11 @@ export class AppComponent implements AfterViewInit { } showAdvanced() { - return this.downloads.configuration['CUSTOM_DIRS'] == 'true'; + return this.downloads.configuration['CUSTOM_DIRS']; } allowCustomDir(tag: string) { - if (this.downloads.configuration['CREATE_CUSTOM_DIRS'] == 'true') { + if (this.downloads.configuration['CREATE_CUSTOM_DIRS']) { return tag; } return false; -- cgit