aiden
/
YoutubeDL-Material
mirror of https://github.com/Tzahi12345/YoutubeDL-Material
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hamburger menu button now avoids focus and has no outline

Browse Source 
theme change behavior slightly modified to improve accessibility

added hammerjs

settings menu now has minimum width, updated colors, and additional hints
pull/29/head
Isaac Grynsztein 5 years ago
parent 3cbb517d64
commit 6f3e94cf24
6 changed files with 66 additions and 49 deletions
Show Stats Download Patch File Download Diff File

2
backend/subscriptions.js
Unescape Escape View File

@ -11,7 +11,7 @@ const config_api = require('./config');
const adapter = new FileSync('db.json');
const db = low(adapter)
let debugMode = process.env.YTDL_MODE === 'debug';
const debugMode = process.env.YTDL_MODE === 'debug';
async function subscribe(sub) {
const result_obj = {

5
package.json
Unescape Escape View File

@ -31,16 +31,17 @@
"@angular/router": "^8.2.11",
"core-js": "^2.4.1",
"file-saver": "^2.0.2",
"hammerjs": "^2.0.8",
"ng-lazyload-image": "^7.0.1",
"ng4-configure": "^0.1.7",
"ngx-content-loading": "^0.1.3",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.10.0",
"typescript": "~3.5.3",
"videogular2": "^7.0.1",
"web-animations-js": "^2.3.2",
"zone.js": "~0.9.1",
"typescript": "~3.5.3"
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.24",

6
src/app/app.component.html
Unescape Escape View File

@ -3,7 +3,7 @@
<mat-toolbar color="primary" class="top">
<div class="flex-row" width="100%" height="100%">
<div class="flex-column" style="text-align: left; margin-top: 1px;">
<button class="no-outline" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
<button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
<button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
</div>
<div class="flex-column" style="text-align: center; margin-top: 5px;">
@ -12,10 +12,10 @@
<div class="flex-column" style="text-align: right; align-items: flex-end;">
<button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
<mat-menu #menuSettings="matMenu">
<button (click)="$event.stopPropagation();" *ngIf="allowThemeChange" mat-menu-item>
<button (click)="themeMenuItemClicked($event)" *ngIf="allowThemeChange" mat-menu-item>
<mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon>
<span>Dark</span>
<mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'" (change)="flipTheme()"></mat-slide-toggle>
<mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'"></mat-slide-toggle>
</button>
<button (click)="openSettingsDialog()" mat-menu-item>
<mat-icon>settings</mat-icon>

21
src/app/app.component.ts
Unescape Escape View File

@ -15,7 +15,7 @@ import 'rxjs/add/operator/debounceTime'
import 'rxjs/add/operator/do'
import 'rxjs/add/operator/switch'
import { YoutubeSearchService, Result } from './youtube-search.service';
import { Router, NavigationStart } from '@angular/router';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { OverlayContainer } from '@angular/cdk/overlay';
import { THEMES_CONFIG } from '../themes';
import { SettingsComponent } from './settings/settings.component';
@ -36,6 +36,7 @@ export class AppComponent implements OnInit {
allowThemeChange = null;
@ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
@ViewChild('hamburgerMenu', {static: false, read: ElementRef}) hamburgerMenuButton: ElementRef;
navigator: string = null;
constructor(public postsService: PostsService, public snackBar: MatSnackBar, private dialog: MatDialog,
@ -45,7 +46,13 @@ export class AppComponent implements OnInit {
// runs on navigate, captures the route that navigated to the player (if needed)
this.router.events.subscribe((e) => { if (e instanceof NavigationStart) {
this.navigator = localStorage.getItem('player_navigator');
} });
} else if (e instanceof NavigationEnd) {
// blurs hamburger menu if it exists, as the sidenav likes to focus on it after closing
if (this.hamburgerMenuButton && this.hamburgerMenuButton.nativeElement) {
this.hamburgerMenuButton.nativeElement.blur();
}
}
});
// loading config
this.postsService.loadNavItems().subscribe(res => { // loads settings
@ -117,6 +124,11 @@ onSetTheme(theme, old_theme) {
}
}
themeMenuItemClicked(event) {
this.flipTheme();
event.stopPropagation();
}
ngOnInit() {
if (localStorage.getItem('theme')) {
this.setTheme(localStorage.getItem('theme'));
@ -135,7 +147,10 @@ onSetTheme(theme, old_theme) {
}
openSettingsDialog() {
const dialogRef = this.dialog.open(SettingsComponent);
const dialogRef = this.dialog.open(SettingsComponent, {
width: '80vw'
});
}
}

80
src/app/settings/settings.component.html
Unescape Escape View File

@ -11,15 +11,15 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input [(ngModel)]="new_config['Host']['url']" matInput placeholder="URL" required>
<mat-hint></mat-hint>
<mat-hint>Base URL this app will be accessed from, without the port.</mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field>
<div class="col-12 mt-4">
<mat-form-field color="accent">
<input [(ngModel)]="new_config['Host']['port']" matInput placeholder="Port" required>
<mat-hint></mat-hint>
<mat-hint>The desired port. Default is 17442.</mat-hint>
</mat-form-field>
</div>
@ -37,20 +37,18 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Encryption']['use-encryption']">Use encryption</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Encryption']['use-encryption']">Use encryption</mat-checkbox>
</div>
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['cert-file-path']" matInput placeholder="Cert file path">
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['key-file-path']" matInput placeholder="Key file path">
<mat-hint></mat-hint>
</mat-form-field>
</div>
</div>
@ -67,23 +65,23 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input matInput [(ngModel)]="new_config['Downloader']['path-audio']" placeholder="Audio folder path" required>
<mat-hint></mat-hint>
<mat-hint>Path for audio only downloads. It is relative to YTDL-Material's root folder.</mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field>
<div class="col-12 mt-4">
<mat-form-field color="accent">
<input matInput [(ngModel)]="new_config['Downloader']['path-video']" placeholder="Video folder path" required>
<mat-hint></mat-hint>
<mat-hint>Path for video downloads. It is relative to YTDL-Material's root folder.</mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field>
<textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Custom args" required></textarea>
<mat-hint></mat-hint>
<div class="col-12 mt-4">
<mat-form-field color="accent">
<textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Custom args"></textarea>
<mat-hint>Global custom args for downloads on the home page.</mat-hint>
</mat-form-field>
</div>
</div>
@ -100,22 +98,22 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input [(ngModel)]="new_config['Extra']['title_top']" matInput placeholder="Top title" required>
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Extra']['file_manager_enabled']">File manager enabled</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['file_manager_enabled']">File manager enabled</mat-checkbox>
</div>
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Extra']['allow_quality_select']">Allow quality select</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_quality_select']">Allow quality select</mat-checkbox>
</div>
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Extra']['download_only_mode']">Download only mode</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['download_only_mode']">Download only mode</mat-checkbox>
</div>
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Extra']['allow_multi_download_mode']">Allow multi-download mode</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_multi_download_mode']">Allow multi-download mode</mat-checkbox>
</div>
</div>
</div>
@ -131,12 +129,12 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['API']['use_youtube_api']">Use YouTube API</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['API']['use_youtube_api']">Use YouTube API</mat-checkbox>
</div>
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input [disabled]="!new_config['API']['use_youtube_api']" [(ngModel)]="new_config['API']['youtube_API_key']" matInput placeholder="Youtube API Key" required>
<mat-hint></mat-hint>
<mat-hint><a target="_blank" href="https://developers.google.com/youtube/v3/getting-started">Generating a key</a> is easy!</mat-hint>
</mat-form-field>
</div>
</div>
@ -153,14 +151,14 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-select style="width: 100px" [(ngModel)]="new_config['Themes']['default_theme']">
<mat-select color="accent" style="width: 100px" [(ngModel)]="new_config['Themes']['default_theme']">
<mat-option value="default">Default</mat-option>
<mat-option value="dark">Dark</mat-option>
</mat-select>
</div>
<div class="col-12 mt-4">
<mat-checkbox [(ngModel)]="new_config['Themes']['allow_theme_change']">Allow theme change</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Themes']['allow_theme_change']">Allow theme change</mat-checkbox>
</div>
</div>
</div>
@ -176,22 +174,24 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Subscriptions']['allow_subscriptions']">Allow subscriptions</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Subscriptions']['allow_subscriptions']">Allow subscriptions</mat-checkbox>
</div>
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_base_path']" matInput placeholder="Subscriptions base path">
<mat-hint></mat-hint>
<mat-hint>Base path for videos from your subscribed channels and playlists. It is relative to YTDL-Material's root folder.</mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field>
<div class="col-12 mt-5">
<mat-form-field color="accent">
<input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_check_interval']" matInput placeholder="Check interval">
<mat-hint></mat-hint>
<mat-hint>Unit is seconds, only include numbers.</mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-checkbox [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_use_youtubedl_archive']">Use youtube-dl archive</mat-checkbox>
<div class="col-12 mt-4">
<mat-checkbox color="accent" [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_use_youtubedl_archive']">Use youtube-dl archive</mat-checkbox>
<p>With youtube-dl's <a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#how-do-i-download-only-new-videos-from-a-playlist">archive</a> feature, downloaded videos from your subscriptions get recorded in a text file in the subscriptions <i>archive</i> sub-directory.</p>
<p>This enables the ability to permanently delete videos from your subscriptions without unsubscribing, and allows you to record which videos you downloaded in case of data loss.</p>
</div>
</div>
</div>
@ -207,16 +207,16 @@
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Advanced']['use_default_downloading_agent']">Use default downloading agent</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['use_default_downloading_agent']">Use default downloading agent</mat-checkbox>
</div>
<div class="col-12">
<mat-form-field>
<mat-form-field color="accent">
<input [disabled]="!new_config['Advanced']['use_default_downloading_agent']" [(ngModel)]="new_config['Advanced']['custom_downloading_agent']" matInput placeholder="Custom agent" required>
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div class="col-12">
<mat-checkbox [(ngModel)]="new_config['Advanced']['allow_advanced_download']">Allow advanced download</mat-checkbox>
<mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['allow_advanced_download']">Allow advanced download</mat-checkbox>
</div>
</div>
</div>

1
src/main.ts
Unescape Escape View File

@ -1,5 +1,6 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'hammerjs';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

Write Preview
Loading…
Cancel
Save