From 6f3e94cf24eb75aed0e0fd7c3b201c515c7051a7 Mon Sep 17 00:00:00 2001
From: Isaac Grynsztein <IsaacMGrynsztein@gmail.com>
Date: Sun, 8 Mar 2020 22:23:50 -0400
Subject: [PATCH] hamburger menu button now avoids focus and has no outline

theme change behavior slightly modified to improve accessibility

added hammerjs

settings menu now has minimum width, updated colors, and additional hints
---
 backend/subscriptions.js                 |  2 +-
 package.json                             |  5 +-
 src/app/app.component.html               |  6 +-
 src/app/app.component.ts                 | 21 ++++++-
 src/app/settings/settings.component.html | 80 ++++++++++++------------
 src/main.ts                              |  1 +
 6 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/backend/subscriptions.js b/backend/subscriptions.js
index d185365..2dadbe7 100644
--- a/backend/subscriptions.js
+++ b/backend/subscriptions.js
@@ -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 = {
diff --git a/package.json b/package.json
index e3f6719..73966f1 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 057f745..f96e0d0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f41f809..e6612e2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -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'
+    });
   }
+
 }
 
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 5444f07..17ea080 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -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>
diff --git a/src/main.ts b/src/main.ts
index a9ca1ca..6898b91 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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';