added skeleton code for future electron.js support

added font swap to google font call

simplified polyfills

updated backend package.json info

angular.json

@@ -24,8 +24,7 @@
               "src/backend"
             ],
             "styles": [
-              "src/styles.css",
-              "../node_modules/videogular2/fonts/videogular.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -66,6 +65,57 @@
             "browserTarget": "youtube-dl-material:build"
           }
         },
+        "serve-electron": {
+          "builder": "@angular-guru/electron-builder:dev-server",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "youtube-dl-material:build:production"
+            }
+          }
+        },
+        "electron": {
+          "builder": "@angular-guru/electron-builder:build",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "main.js",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/backend/audio",
+              "src/backend/video",
+              "src/backend"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
@@ -75,8 +125,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "src/styles.css",
-              "../node_modules/videogular2/fonts/videogular.css"
+              "src/styles.scss"
             ],
             "assets": [
               "src/assets",
@@ -127,7 +176,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "css"
+      "styleext": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

backend/app.js

@@ -6,9 +6,23 @@ var config = require('config');
 var https = require('https');
 var express = require("express");
 var bodyParser = require("body-parser");
+var archiver = require('archiver');
+const low = require('lowdb')
+var URL = require('url').URL;
+const shortid = require('shortid')
+
 var app = express();
 
-var URL = require('url').URL;
+const FileSync = require('lowdb/adapters/FileSync')
+const adapter = new FileSync('db.json');
+const db = low(adapter)
+
+// Set some defaults
+db.defaults({ playlists: {
+    audio: [],
+    video: []
+}}).write();
+
 
 // check if debug mode
 let debugMode = process.env.YTDL_MODE === 'debug';
@@ -180,6 +194,44 @@ function getVideoFormatID(name)
     }
 }
 
+async function createPlaylistZipFile(fileNames, type, outputName) {
+    return new Promise(async resolve => {
+        let zipFolderPath = path.join(__dirname, (type === 'audio') ? audioFolderPath : videoFolderPath);
+        // let name = fileNames[0].split(' ')[0] + fileNames[1].split(' ')[0];
+        let ext = (type === 'audio') ? '.mp3' : '.mp4';
+
+        let output = fs.createWriteStream(path.join(zipFolderPath, outputName + '.zip'));
+
+        var archive = archiver('zip', {
+            gzip: true,
+            zlib: { level: 9 } // Sets the compression level.
+        });
+        
+        archive.on('error', function(err) {
+            console.log(err);
+            throw err;
+        });
+        
+        // pipe archive data to the output file
+        archive.pipe(output);
+
+        for (let i = 0; i < fileNames.length; i++) {
+            let fileName = fileNames[i];
+            archive.file(zipFolderPath + fileName + ext, {name: fileName + ext})
+        }
+
+        await archive.finalize();
+
+        // wait a tiny bit for the zip to reload in fs
+        setTimeout(function() {
+            resolve(path.join(zipFolderPath,outputName + '.zip'));
+        }, 100);
+        
+    });
+    
+
+}
+
 function deleteAudioFile(name) {
     return new Promise(resolve => {
         // TODO: split descriptors into audio and video descriptors, as deleting an audio file will close all video file streams
@@ -196,7 +248,7 @@ function deleteAudioFile(name) {
                 for (let i = 0; i < descriptors[name].length; i++) {
                     descriptors[name][i].destroy();
                 }
-            } catch {
+            } catch(e) {
 
             }
         } 
@@ -235,7 +287,7 @@ async function deleteVideoFile(name) {
                 for (let i = 0; i < descriptors[name].length; i++) {
                     descriptors[name][i].destroy();
                 }
-            } catch {
+            } catch(e) {
 
             }
         } 
@@ -268,7 +320,7 @@ function getAudioInfos(fileNames) {
             let data = fs.readFileSync(fileLocation);
             try {
                 result.push(JSON.parse(data));
-            } catch {
+            } catch(e) {
                 console.log(`ERROR: Could not find info for file ${fileName}.mp3`);
             }
         }
@@ -285,7 +337,7 @@ function getVideoInfos(fileNames) {
             let data = fs.readFileSync(fileLocation);
             try {
                 result.push(JSON.parse(data));
-            } catch {
+            } catch(e) {
                 console.log(`ERROR: Could not find info for file ${fileName}.mp4`);
             }
         }
@@ -306,8 +358,7 @@ async function getUrlInfos(urls) {
             try {
                 try_putput = JSON.parse(output);
                 result = try_putput;
-            }
-            catch {
+            } catch(e) {
                 // probably multiple urls
                 console.log('failed to parse');
                 console.log(output);
@@ -356,17 +407,15 @@ app.post('/tomp3', function(req, res) {
                 let output_json = null;
                 try {
                     output_json = JSON.parse(output[i]);
-                } catch {
+                } catch(e) {
                     output_json = null;
                 }
                 if (!output_json) {
                     // only run on first go
                     return;
                 }
-                var modified_file_name = output_json ? output_json['title'] : null;
-                var file_path = output_json['_filename'].split('\\');
-                var alternate_file_name = file_path[file_path.length - 1];
-                alternate_file_name = alternate_file_name.substring(0, alternate_file_name.length-4);
+                var file_name = output_json['_filename'].replace(/^.*[\\\/]/, '');
+                var alternate_file_name = file_name.substring(0, file_name.length-4);
                 if (alternate_file_name) file_names.push(alternate_file_name);
             }
 
@@ -391,8 +440,6 @@ app.post('/tomp4', function(req, res) {
     var selectedHeight = req.body.selectedHeight;
     var customQualityConfiguration = req.body.customQualityConfiguration;
 
-    // console.log(selectedHeight);
-
     let qualityPath = 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4';
 
     if (customQualityConfiguration) {
@@ -417,29 +464,24 @@ app.post('/tomp4', function(req, res) {
                 let output_json = null;
                 try {
                     output_json = JSON.parse(output[i]);
-                } catch {
+                } catch(e) {
                     output_json = null;
                 }
                 var modified_file_name = output_json ? output_json['title'] : null;
                 if (!output_json) {
-                    // only get the first result
-                    // console.log(output_json);
-                    // console.log(output);
                     continue;
-                    res.sendStatus(500);
                 } 
-                var file_path = output_json['_filename'].split('\\');
+                var file_name = output_json['_filename'].replace(/^.*[\\\/]/, '');
 
                 // renames file if necessary due to bug
                 if (!fs.existsSync(output_json['_filename'] && fs.existsSync(output_json['_filename'] + '.webm'))) {
                     try {
                         fs.renameSync(output_json['_filename'] + '.webm', output_json['_filename']);
-                        console.log('Renamed ' + file_path + '.webm to ' + file_path);
-                    } catch {
+                        console.log('Renamed ' + file_name + '.webm to ' + file_name);
+                    } catch(e) {
                     }
                 }
-                var alternate_file_name = file_path[file_path.length - 1];
-                alternate_file_name = alternate_file_name.substring(0, alternate_file_name.length-4);
+                var alternate_file_name = file_name.substring(0, file_name.length-4);
                 if (alternate_file_name) file_names.push(alternate_file_name);
             }
 
@@ -501,6 +543,7 @@ app.post('/fileStatusMp4', function(req, res) {
 // gets all download mp3s
 app.post('/getMp3s', function(req, res) {
     var mp3s = [];
+    var playlists = db.get('playlists.audio').value();
     var fullpath = audioFolderPath;
     var files = fs.readdirSync(audioFolderPath);
     
@@ -529,7 +572,8 @@ app.post('/getMp3s', function(req, res) {
     }
 
     res.send({
-        mp3s: mp3s
+        mp3s: mp3s,
+        playlists: playlists
     });
     res.end("yes");
 });
@@ -537,6 +581,7 @@ app.post('/getMp3s', function(req, res) {
 // gets all download mp4s
 app.post('/getMp4s', function(req, res) {
     var mp4s = [];
+    var playlists = db.get('playlists.video').value();
     var fullpath = videoFolderPath;
     var files = fs.readdirSync(videoFolderPath);
     
@@ -565,11 +610,56 @@ app.post('/getMp4s', function(req, res) {
     }
 
     res.send({
-        mp4s: mp4s
+        mp4s: mp4s,
+        playlists: playlists
     });
     res.end("yes");
 });
 
+app.post('/createPlaylist', async (req, res) => {
+    let playlistName = req.body.playlistName;
+    let fileNames = req.body.fileNames;
+    let type = req.body.type;
+    let thumbnailURL = req.body.thumbnailURL;
+
+    let new_playlist = {
+        'name': playlistName,
+        fileNames: fileNames,
+        id: shortid.generate(),
+        thumbnailURL: thumbnailURL
+    };
+
+    db.get(`playlists.${type}`)
+      .push(new_playlist)
+      .write();
+    
+    res.send({
+        new_playlist: new_playlist,
+        success: !!new_playlist // always going to be true
+    })
+});
+
+app.post('/deletePlaylist', async (req, res) => {
+    let playlistID = req.body.playlistID;
+    let type = req.body.type;
+
+    let success = null;
+    try {
+        // removes playlist from playlists
+        db.get(`playlists.${type}`)
+            .remove({id: playlistID})
+            .write();
+
+        success = true;
+    } catch(e) {
+        success = false;
+    }
+
+    res.send({
+        success: success
+    })
+});
+
 // deletes mp3 file
 app.post('/deleteMp3', async (req, res) => {
     var name = req.body.name;
@@ -610,15 +700,20 @@ app.post('/deleteMp4', async (req, res) => {
     }
 });
 
-app.post('/downloadFile', function(req, res) {
-    let fileName = req.body.fileName;
+app.post('/downloadFile', async (req, res) => {
+    let fileNames = req.body.fileNames;
     let is_playlist = req.body.is_playlist;
     let type = req.body.type;
+    let outputName = req.body.outputName;
     let file = null;
-    if (type === 'audio') {
-        file = __dirname + '/' + 'audio/' + fileName + '.mp3';
-    } else if (type === 'video') {
-        file = __dirname + '/' + 'video/' + fileName + '.mp4';
+    if (!is_playlist) {
+        if (type === 'audio') {
+            file = __dirname + '/' + 'audio/' + fileNames + '.mp3';
+        } else if (type === 'video') {
+            file = __dirname + '/' + 'video/' + fileNames + '.mp4';
+        }
+    } else {
+        file = await createPlaylistZipFile(fileNames, type, outputName);
     }
 
     res.sendFile(file);
@@ -654,7 +749,7 @@ app.get('/video/:id', function(req , res){
     file.on('close', function() {
         let index = descriptors[req.params.id].indexOf(file);
         descriptors[req.params.id].splice(index, 1);
-        console.log('Successfully closed stream and removed file reference.');
+        if (debugMode) console.log('Successfully closed stream and removed file reference.');
     });
     head = {
       'Content-Range': `bytes ${start}-${end}/${fileSize}`,
@@ -694,7 +789,7 @@ app.get('/audio/:id', function(req , res){
     file.on('close', function() {
         let index = descriptors[req.params.id].indexOf(file);
         descriptors[req.params.id].splice(index, 1);
-        console.log('Successfully closed stream and removed file reference.');
+        if (debugMode) console.log('Successfully closed stream and removed file reference.');
     });
     head = {
       'Content-Range': `bytes ${start}-${end}/${fileSize}`,
@@ -720,7 +815,6 @@ app.get('/audio/:id', function(req , res){
     let urlMode = !!req.body.urlMode;
     let type = req.body.type;
     let result = null;
-    // console.log(urlMode);
     if (!urlMode) {
         if (type === 'audio') {
             result = getAudioInfos(fileNames)

backend/config/default.json

@@ -16,12 +16,17 @@
       },
       "Extra": {
         "title_top": "Youtube Downloader",
-        "download_only_mode": false,
-        "file_manager_enabled": true
+        "file_manager_enabled": true,
+        "allow_quality_select": true,
+        "download_only_mode": false
       },
       "API": {
         "use_youtube_API": false,
         "youtube_API_key": ""
+      },
+      "Themes": {
+        "default_theme": "default",
+        "allow_theme_change": true
       }
     }
   }

backend/config/encrypted.json

@@ -16,12 +16,17 @@
       },
       "Extra": {
         "title_top": "Youtube Downloader",
-        "download_only_mode": false,
-		    "file_manager_enabled": true
+        "file_manager_enabled": true,
+        "allow_quality_select": true,
+        "download_only_mode": false
       },
       "API": {
         "use_youtube_API": false,
         "youtube_API_key": ""
+      },
+      "Themes": {
+        "default_theme": "default",
+        "allow_theme_change": true
       }
     }
   }

backend/package.json

@@ -1,26 +1,29 @@
 {
   "name": "backend",
   "version": "1.0.0",
-  "description": "backend for hda",
+  "description": "backend for YoutubeDL-Material",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Tzahi12345/hda-backend.git"
+    "url": ""
   },
   "author": "Isaac Grynsztein",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/Tzahi12345/hda-backend/issues"
+    "url": ""
   },
-  "homepage": "https://github.com/Tzahi12345/hda-backend#readme",
+  "homepage": "",
   "dependencies": {
+    "archiver": "^3.1.1",
     "async": "^3.1.0",
     "config": "^3.2.3",
     "exe": "^1.0.2",
     "express": "^4.17.1",
+    "lowdb": "^1.0.0",
+    "shortid": "^2.2.15",
     "youtube-dl": "^2.3.0"
   }
 }

main.js

@@ -0,0 +1,41 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const url = require('url');
+
+let win;
+
+function createWindow() {
+  win = new BrowserWindow({ width: 800, height: 600 });
+
+  // load the dist folder from Angular
+  win.loadURL(
+    url.format({
+      pathname: path.join(__dirname, `/dist/index.html`),
+      protocol: 'file:',
+      slashes: true
+    })
+  );
+
+  // The following is optional and will open the DevTools:
+  // win.webContents.openDevTools()
+
+  win.on('closed', () => {
+    win = null;
+  });
+}
+
+app.on('ready', createWindow);
+
+// on macOS, closing the window doesn't quit the app
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+// initialize the app's main window
+app.on('activate', () => {
+  if (win === null) {
+    createWindow();
+  }
+});

package.json

@@ -8,7 +8,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "electron": "ng build --base-href ./ && electron ."
   },
   "private": true,
   "dependencies": {
@@ -26,11 +27,14 @@
     "@angular/router": "^8.2.11",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
+    "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",
     "videogular2": "^7.0.1",
+    "web-animations-js": "^2.3.2",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
@@ -43,6 +47,7 @@
     "@types/jasmine": "2.5.45",
     "@types/node": "~6.0.60",
     "codelyzer": "^5.0.1",
+    "electron": "^8.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",

src/_palette.scss

@@ -0,0 +1,15 @@
+/* Coolors Exported Palette - coolors.co/e8aeb7-b8e1ff-a9fff7-94fbab-82aba1 */
+
+/* HSL */
+$color1: hsla(351%, 56%, 80%, 1);
+$softblue: hsla(205%, 100%, 86%, 1);
+$color3: hsla(174%, 100%, 83%, 1);
+$color4: hsla(133%, 93%, 78%, 1);
+$color5: hsla(165%, 20%, 59%, 1);
+
+/* RGB */
+$color1: rgba(232, 174, 183, 1);
+$softblue: rgba(184, 225, 255, 1);
+$color3: rgba(169, 255, 247, 1);
+$color4: rgba(148, 251, 171, 1);
+$color5: rgba(130, 171, 161, 1);

src/app/app.component.html

@@ -1,15 +1,17 @@
-<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 (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
+<div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
+    <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 (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;">
+                <div>{{topBarTitle}}</div>
+            </div>
+            <div class="flex-column" style="text-align: right; align-items: flex-end;">
+                <button *ngIf="allowThemeChange" mat-icon-button (click)="flipTheme()"><mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon></button>
+            </div>
         </div>
-        <div class="flex-column" style="text-align: center; margin-top: 5px;">
-            <div>{{topBarTitle}}</div>
-        </div>
-        <div class="flex-column" style="text-align: right">
+    </mat-toolbar>
 
-        </div>
-    </div>
-</mat-toolbar>
-
-<router-outlet></router-outlet>
+    <router-outlet></router-outlet>
+</div>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, HostBinding } from '@angular/core';
 import {PostsService} from './posts.services';
 import {FileCardComponent} from './file-card/file-card.component';
 import { Observable } from 'rxjs/Observable';
@@ -16,6 +16,8 @@ import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/switch'
 import { YoutubeSearchService, Result } from './youtube-search.service';
 import { Router } from '@angular/router';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { THEMES_CONFIG } from '../themes';
 
 @Component({
   selector: 'app-root',
@@ -23,56 +25,93 @@ import { Router } from '@angular/router';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  iOS = false;
 
-  determinateProgress = false;
-  downloadingfile = false;
-  audioOnly: boolean;
-  urlError = false;
-  path = '';
-  url = '';
-  exists = '';
+  @HostBinding('class') componentCssClass;
+  THEMES_CONFIG = THEMES_CONFIG;
+
+  // config items
   topBarTitle = 'Youtube Downloader';
-  percentDownloaded: number;
-  fileManagerEnabled = false;
-  downloadOnlyMode = false;
-  baseStreamPath;
-  audioFolderPath;
-  videoFolderPath;
-
-  // youtube api
-  youtubeSearchEnabled = false;
-  youtubeAPIKey = null;
-  results_loading = false;
-  results_showing = true;
-  results = [];
-
-  mp3s: any[] = [];
-  mp4s: any[] = [];
-  files_cols = (window.innerWidth <= 450) ? 2 : 4;
-
-  urlForm = new FormControl('', [Validators.required]);
+  defaultTheme = null;
+  allowThemeChange = null;
 
   @ViewChild('urlinput', { read: ElementRef, static: false }) urlInput: ElementRef;
 
-  constructor(private postsService: PostsService, private youtubeSearch: YoutubeSearchService, public snackBar: MatSnackBar,
-    public router: Router) {
-    this.audioOnly = false;
-
+  constructor(public postsService: PostsService, public snackBar: MatSnackBar,
+    public router: Router, public overlayContainer: OverlayContainer) {
 
     // loading config
     this.postsService.loadNavItems().subscribe(result => { // loads settings
       this.topBarTitle = result['YoutubeDLMaterial']['Extra']['title_top'];
+      const themingExists = result['YoutubeDLMaterial']['Themes'];
+      this.defaultTheme = themingExists ? result['YoutubeDLMaterial']['Themes']['default_theme'] : 'default';
+      this.allowThemeChange = themingExists ? result['YoutubeDLMaterial']['Themes']['allow_theme_change'] : true;
+
+      // sets theme to config default if it doesn't exist
+      if (!localStorage.getItem('theme')) {
+        this.setTheme(themingExists ? this.defaultTheme : 'default');
+      }
     }, error => {
       console.log(error);
     });
 
   }
 
-  ngOnInit() {
-    
+  // theme stuff
+
+  setTheme(theme) {
+    // theme is registered, so set it to the stored cookie variable
+    let old_theme = null;
+    if (this.THEMES_CONFIG[theme]) {
+        if (localStorage.getItem('theme')) {
+          old_theme = localStorage.getItem('theme');
+          if (!this.THEMES_CONFIG[old_theme]) {
+            console.log('bad theme found, setting to default');
+            if (this.defaultTheme === null) {
+              // means it hasn't loaded yet
+              console.error('No default theme detected');
+            } else {
+              localStorage.setItem('theme', this.defaultTheme);
+              old_theme = localStorage.getItem('theme'); // updates old_theme
+            }
+          }
+        }
+        localStorage.setItem('theme', theme);
+    } else {
+        console.error('Invalid theme: ' + theme);
+        return;
+    }
+
+    this.postsService.setTheme(theme);
+
+    this.onSetTheme(this.THEMES_CONFIG[theme]['css_label'], old_theme ? this.THEMES_CONFIG[old_theme]['css_label'] : old_theme);
+}
+
+onSetTheme(theme, old_theme) {
+    if (old_theme) {
+      document.body.classList.remove(old_theme);
+      this.overlayContainer.getContainerElement().classList.remove(old_theme);
+    }
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
   }
 
+  flipTheme() {
+    if (this.postsService.theme.key === 'default') {
+      this.setTheme('dark');
+    } else if (this.postsService.theme.key === 'dark') {
+      this.setTheme('default');
+    }
+  }
+
+  ngOnInit() {
+    if (localStorage.getItem('theme')) {
+      this.setTheme(localStorage.getItem('theme'));
+    } else {
+    //
+    }
+  }
+
+
   goBack() {
     this.router.navigate(['/home']);
   }

src/app/app.module.ts

@@ -5,7 +5,8 @@ import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, Ma
   MatProgressBarModule, MatExpansionModule,
   MatGridList,
   MatProgressSpinnerModule,
-  MatButtonToggleModule} from '@angular/material';
+  MatButtonToggleModule,
+  MatDialogModule} from '@angular/material';
   import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppComponent } from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -22,13 +23,17 @@ import {VgCoreModule} from 'videogular2/compiled/core';
 import {VgControlsModule} from 'videogular2/compiled/controls';
 import {VgOverlayPlayModule} from 'videogular2/compiled/overlay-play';
 import {VgBufferingModule} from 'videogular2/compiled/buffering';
+import { InputDialogComponent } from './input-dialog/input-dialog.component';
+import { LazyLoadImageModule } from 'ng-lazyload-image';
+import { NgxContentLoadingModule } from 'ngx-content-loading';
 
 @NgModule({
   declarations: [
     AppComponent,
     FileCardComponent,
     MainComponent,
-    PlayerComponent
+    PlayerComponent,
+    InputDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -54,12 +59,18 @@ import {VgBufferingModule} from 'videogular2/compiled/buffering';
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatButtonToggleModule,
+    MatDialogModule,
     VgCoreModule,
     VgControlsModule,
     VgOverlayPlayModule,
     VgBufferingModule,
+    LazyLoadImageModule,
+    NgxContentLoadingModule,
     RouterModule,
-    AppRoutingModule
+    AppRoutingModule,
+  ],
+  entryComponents: [
+    InputDialogComponent
   ],
   providers: [PostsService],
   bootstrap: [AppComponent]

src/app/file-card/file-card.component.css

@@ -30,4 +30,30 @@
   margin: 0 auto;
   top: 50%;
   left: 50%;
+}
+
+.img-div {
+  max-height: 80px;
+  padding: 0px;
+  margin: 0px 0px 0px -5px;
+  width: calc(100% + 5px + 5px);
+}
+
+.max-two-lines {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 2.4em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+@media (max-width: 576px){
+ 
+  .example-card {
+    width: 125px !important;
+  }
+   
 }

src/app/file-card/file-card.component.html

@@ -1,13 +1,21 @@
-<mat-card class="example-card">
+<mat-card class="example-card mat-elevation-z6">
   <button (click)="deleteFile()" class="deleteButton" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
   <div style="padding:5px">
-    <b><a href="javascript:void(0)" (click)="mainComponent.goToFile(name, isAudio)">{{title}}</a></b>
+    <b><a href="javascript:void(0)" (click)="!isPlaylist ? mainComponent.goToFile(name, isAudio) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
     <br/>
-    ID: {{name}}
+    <span class="max-two-lines">ID: {{name}}</span>
+    <div *ngIf="isPlaylist">Count: {{count}}</div>
+    <div class="img-div">
+      <img class="image" [lazyLoad]="thumbnailURL" (onLoad)="imageLoaded($event)" alt="Thumbnail">
+      <span *ngIf="!image_loaded">
+        <ngx-content-loading [width]="500" [height]="360">
+          <svg:g ngx-rect width="500" height="360" y="0" x="0" rx="4" ry="4"></svg:g>
+        </ngx-content-loading>
+      </span>
+    </div>
 </div>
     
 
   
-  <div class="centered example-full-width-height"><img class="image" src="{{thumbnailURL}}" alt="Thumbnail"></div>
 
 </mat-card>

src/app/file-card/file-card.component.ts

@@ -17,21 +17,35 @@ export class FileCardComponent implements OnInit {
   @Input() thumbnailURL: string;
   @Input() isAudio = true;
   @Output() removeFile: EventEmitter<string> = new EventEmitter<string>();
+  @Input() isPlaylist = false;
+  @Input() count = null;
+  type;
+  image_loaded = false;
 
   constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent) { }
 
   ngOnInit() {
+    this.type = this.isAudio ? 'audio' : 'video';
   }
 
   deleteFile() {
-    this.postsService.deleteFile(this.name, this.isAudio).subscribe(result => {
-      if (result === true) {
-        this.openSnackBar('Delete success!', 'OK.');
-        this.removeFile.emit(this.name);
-      } else {
-        this.openSnackBar('Delete failed!', 'OK.');
-      }
-    });
+    if (!this.isPlaylist) {
+      this.postsService.deleteFile(this.name, this.isAudio).subscribe(result => {
+        if (result === true) {
+          this.openSnackBar('Delete success!', 'OK.');
+          this.removeFile.emit(this.name);
+        } else {
+          this.openSnackBar('Delete failed!', 'OK.');
+        }
+      });
+    } else {
+      this.removeFile.emit(this.name);
+    }
+
+  }
+
+  imageLoaded(loaded) {
+    this.image_loaded = true;
   }
 
   public openSnackBar(message: string, action: string) {

src/app/input-dialog/input-dialog.component.css

@@ -0,0 +1,3 @@
+.mat-spinner {
+    margin-left: 5%;
+  }

src/app/input-dialog/input-dialog.component.html

@@ -0,0 +1,16 @@
+<h4 mat-dialog-title>{{inputTitle}}</h4>
+<mat-dialog-content>
+  <div>
+    <mat-form-field color="accent">
+      <input matInput (keyup.enter)="enterPressed()" [(ngModel)]="inputText" [placeholder]="inputPlaceholder">
+    </mat-form-field>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Cancel</button>
+  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
+  <button mat-button [disabled]="!inputText" type="submit" (click)="enterPressed()">{{submitText}}</button>
+  <div class="mat-spinner" *ngIf="inputSubmitted">
+    <mat-spinner [diameter]="25"></mat-spinner>
+  </div>
+</mat-dialog-actions>

src/app/input-dialog/input-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputDialogComponent } from './input-dialog.component';
+
+describe('InputDialogComponent', () => {
+  let component: InputDialogComponent;
+  let fixture: ComponentFixture<InputDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/input-dialog/input-dialog.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit, Input, Inject, EventEmitter } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-input-dialog',
+  templateUrl: './input-dialog.component.html',
+  styleUrls: ['./input-dialog.component.css']
+})
+export class InputDialogComponent implements OnInit {
+
+  inputTitle: string;
+  inputPlaceholder: string;
+  submitText: string;
+
+  inputText = '';
+
+  inputSubmitted = false;
+
+  doneEmitter: EventEmitter<any> = null;
+  onlyEmitOnDone = false;
+
+  constructor(public dialogRef: MatDialogRef<InputDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  ngOnInit() {
+    this.inputTitle = this.data.inputTitle;
+    this.inputPlaceholder = this.data.inputPlaceholder;
+    this.submitText = this.data.submitText;
+
+    // checks if emitter exists, if so don't autoclose as it should be handled by caller
+    if (this.data.doneEmitter) {
+      this.doneEmitter = this.data.doneEmitter;
+      this.onlyEmitOnDone = true;
+    }
+  }
+
+  enterPressed() {
+    // validates input -- TODO: add custom validator
+    if (this.inputText) {
+      // only emit if emitter is passed
+      if (this.onlyEmitOnDone) {
+        this.doneEmitter.emit(this.inputText);
+        this.inputSubmitted = true;
+      } else {
+        this.dialogRef.close(this.inputText);
+      }
+    }
+  }
+
+}

src/app/main/main.component.css

@@ -81,4 +81,34 @@ mat-form-field.mat-form-field {
 .margined {
     margin-left: 20px;
     margin-right: 20px;
+}
+
+.results-div {
+    position: relative;
+    top: -15px;
+}
+
+.first-result-card {
+    border-radius: 4px 4px 0px 0px !important;
+}
+
+.last-result-card {
+    border-radius: 0px 0px 4px 4px !important;
+}
+
+.only-result-card {
+    border-radius: 4px !important;
+}
+
+.result-card {
+    height: 120px;
+    border-radius: 0px;
+    padding-bottom: 5px;
+}
+
+.download-progress-bar {
+    z-index: 999;
+    position: absolute;
+    bottom: 0px;
+    width: 150px;
 }

src/app/main/main.component.html

@@ -9,15 +9,15 @@
                 <form class="example-form">
                     <div class="container-fluid">
                         <div class="row">
-                            <div class="col-12 col-sm-9">
-                                <mat-form-field class="example-full-width">
+                            <div [ngClass]="allowQualitySelect ? 'col-sm-9' : null" class="col-12">
+                                <mat-form-field color="accent" class="example-full-width">
                                     <input style="padding-right: 25px;" matInput (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" [formControl]="urlForm" required #urlinput>
                                     <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
                                     <button class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
                                 </mat-form-field>
                             </div>
-                            <div class="col-7 col-sm-3">
-                                <mat-form-field style="display: inline-block; width: inherit; min-width: 120px;">
+                            <div *ngIf="allowQualitySelect" class="col-7 col-sm-3">
+                                <mat-form-field color="accent" style="display: inline-block; width: inherit; min-width: 120px;">
                                     <mat-label>Quality</mat-label>
                                     <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedQuality">
                                       <ng-container *ngFor="let option of qualityOptions[(audioOnly) ? 'audio' : 'video']">
@@ -33,21 +33,20 @@
                             </div>
                         </div>
                     </div>
-                    <span *ngIf="results_showing">
-                        <span *ngFor="let result of results">
-                            <mat-card style="height: 120px; border-radius: 0px">
+                    <div class="results-div" *ngIf="results_showing">
+                        <span *ngFor="let result of results; let i = index">
+                            <mat-card class="result-card mat-elevation-z7" [ngClass]="[(i === 0 && results.length > 1) ? 'first-result-card' : '', ((i === results.length-1) && results.length > 1) ? 'last-result-card' : '', (results.length === 1) ? 'only-result-card' : '']">
                                 <div class="search-card-title">
                                     {{result.title}}
                                 </div>
-                                <div style="font-size: 12px">
+                                <div style="font-size: 12px; margin-bottom: 10px;">
                                     {{result.uploaded}}
                                 </div>
-                                <br/>
                                 <button mat-flat-button color="primary" style="float: left;" (click)="useURL(result.videoUrl)">Use URL</button>
                                 <button mat-stroked-button color="primary" (click)="visitURL(result.videoUrl)" style="float: right">View</button>
                             </mat-card>
                         </span>
-                    </span>
+                    </div>
                 </form>
                 <br/>
                 <mat-checkbox (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
@@ -56,7 +55,7 @@
         </mat-card-content>
         <mat-card-actions>
             <button style="margin-left: 8px; margin-bottom: 8px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-stroked-button
-                color="primary">Download</button>
+                color="accent">Download</button>
         </mat-card-actions>
     </mat-card>
 </div>
@@ -91,10 +90,22 @@
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <div *ngIf="mp3s.length > 0;else nomp3s">
-                <mat-grid-list (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
+                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                     <mat-grid-tile *ngFor="let file of mp3s; index as i;">
                         <app-file-card (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
                                 [length]="file.duration" [isAudio]="true"></app-file-card>
+                        <mat-progress-bar *ngIf="downloading_content['audio'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
+                    </mat-grid-tile>
+                </mat-grid-list>
+                <mat-divider *ngIf="playlists.audio.length > 0"></mat-divider>
+                <div style="width: 100%; text-align: center; margin-top: 10px;" *ngIf="playlists.audio.length > 0">
+                    <h6>Playlists</h6>
+                </div>
+                <mat-grid-list *ngIf="playlists.audio.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
+                    <mat-grid-tile *ngFor="let playlist of playlists.audio; let i = index;">
+                        <app-file-card (removeFile)="removePlaylistMp3(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
+                            [length]="null" [isAudio]="true" [isPlaylist]="true" [count]="playlist.fileNames.length"></app-file-card>
+                        <mat-progress-bar *ngIf="downloading_content['audio'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
                     </mat-grid-tile>
                 </mat-grid-list>
             </div>
@@ -110,10 +121,23 @@
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <div *ngIf="mp4s.length > 0;else nomp4s">
-                <mat-grid-list (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
+                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
                     <mat-grid-tile *ngFor="let file of mp4s; index as i;">
                         <app-file-card (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
                             [length]="file.duration" [isAudio]="false"></app-file-card>
+                        <mat-progress-bar *ngIf="downloading_content['video'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
+                    </mat-grid-tile>
+                </mat-grid-list>
+                <mat-divider *ngIf="playlists.video.length > 0"></mat-divider>
+
+                <div style="width: 100%; text-align: center; margin-top: 10px;" *ngIf="playlists.video.length > 0">
+                    <h6>Playlists</h6>
+                </div>
+                <mat-grid-list *ngIf="playlists.video.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
+                    <mat-grid-tile *ngFor="let playlist of playlists.video; let i = index;">
+                        <app-file-card (removeFile)="removePlaylistMp4(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
+                            [length]="null" [isAudio]="false" [isPlaylist]="true" [count]="playlist.fileNames.length"></app-file-card>
+                        <mat-progress-bar *ngIf="downloading_content['video'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
                     </mat-grid-tile>
                 </mat-grid-list>
             </div>

src/app/main/main.component.ts

@@ -33,7 +33,10 @@ export class MainComponent implements OnInit {
   url = '';
   exists = '';
   percentDownloaded: number;
+
+  // settings
   fileManagerEnabled = false;
+  allowQualitySelect = false;
   downloadOnlyMode = false;
   baseStreamPath;
   audioFolderPath;
@@ -51,6 +54,9 @@ export class MainComponent implements OnInit {
   mp3s: any[] = [];
   mp4s: any[] = [];
   files_cols = (window.innerWidth <= 450) ? 2 : 4;
+  playlists = {'audio': [], 'video': []};
+  playlist_thumbnails = {};
+  downloading_content = {'audio': {}, 'video': {}};
 
   urlForm = new FormControl('', [Validators.required]);
 
@@ -169,6 +175,7 @@ export class MainComponent implements OnInit {
       this.youtubeSearchEnabled = result['YoutubeDLMaterial']['API'] && result['YoutubeDLMaterial']['API']['use_youtube_API'] &&
           result['YoutubeDLMaterial']['API']['youtube_API_key'];
       this.youtubeAPIKey = this.youtubeSearchEnabled ? result['YoutubeDLMaterial']['API']['youtube_API_key'] : null;
+      this.allowQualitySelect = result['YoutubeDLMaterial']['Extra']['allow_quality_select'];
 
       this.postsService.path = backendUrl;
       this.postsService.startPath = backendUrl;
@@ -194,7 +201,23 @@ export class MainComponent implements OnInit {
   getMp3s() {
     this.postsService.getMp3s().subscribe(result => {
       const mp3s = result['mp3s'];
+      const playlists = result['playlists'];
       this.mp3s = mp3s;
+      this.playlists.audio = playlists;
+
+      // get thumbnail url by using first video. this is a temporary hack
+      for (let i = 0; i < this.playlists.audio.length; i++) {
+        const playlist = this.playlists.audio[i];
+        let videoToExtractThumbnail = null;
+        for (let j = 0; j < this.mp3s.length; j++) {
+          if (this.mp3s[j].id === playlist.fileNames[0]) {
+            // found the corresponding file
+            videoToExtractThumbnail = this.mp3s[j];
+          }
+        }
+
+        this.playlist_thumbnails[playlist.id] = videoToExtractThumbnail.thumbnailURL;
+      }
     }, error => {
       console.log(error);
     });
@@ -203,7 +226,23 @@ export class MainComponent implements OnInit {
   getMp4s() {
     this.postsService.getMp4s().subscribe(result => {
       const mp4s = result['mp4s'];
+      const playlists = result['playlists'];
       this.mp4s = mp4s;
+      this.playlists.video = playlists;
+
+      // get thumbnail url by using first video. this is a temporary hack
+      for (let i = 0; i < this.playlists.video.length; i++) {
+        const playlist = this.playlists.video[i];
+        let videoToExtractThumbnail = null;
+        for (let j = 0; j < this.mp4s.length; j++) {
+          if (this.mp4s[j].id === playlist.fileNames[0]) {
+            // found the corresponding file
+            videoToExtractThumbnail = this.mp4s[j];
+          }
+        }
+
+        this.playlist_thumbnails[playlist.id] = videoToExtractThumbnail.thumbnailURL;
+      }
     },
     error => {
       console.log(error);
@@ -212,12 +251,38 @@ export class MainComponent implements OnInit {
 
   public goToFile(name, isAudio) {
     if (isAudio) {
-      this.downloadHelperMp3(name, false, true);
+      this.downloadHelperMp3(name, false, false);
     } else {
-      this.downloadHelperMp4(name, false, true);
+      this.downloadHelperMp4(name, false, false);
     }
   }
 
+  public goToPlaylist(playlistID, type) {
+    const playlist = this.getPlaylistObjectByID(playlistID, type);
+    if (playlist) {
+      if (this.downloadOnlyMode) {
+        this.downloading_content[type][playlistID] = true;
+        this.downloadPlaylist(playlist.fileNames, type, playlist.name, playlistID);
+      } else {
+        const fileNames = playlist.fileNames;
+        this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID}]);
+      }
+    } else {
+      // playlist not found
+      console.error(`Playlist with ID ${playlistID} not found!`);
+    }
+  }
+
+  getPlaylistObjectByID(playlistID, type) {
+    for (let i = 0; i < this.playlists[type].length; i++) {
+      const playlist = this.playlists[type][i];
+      if (playlist.id === playlistID) {
+        return playlist;
+      }
+    }
+    return null;
+  }
+
   public removeFromMp3(name: string) {
     for (let i = 0; i < this.mp3s.length; i++) {
       if (this.mp3s[i].id === name) {
@@ -226,9 +291,17 @@ export class MainComponent implements OnInit {
     }
   }
 
+  public removePlaylistMp3(playlistID, index) {
+    this.postsService.removePlaylist(playlistID, 'audio').subscribe(res => {
+      if (res['success']) {
+        this.playlists.audio.splice(index, 1);
+        this.openSnackBar('Playlist successfully removed.', '');
+      }
+      this.getMp3s();
+    });
+  }
+
   public removeFromMp4(name: string) {
-    // console.log(name);
-    // console.log(this.mp4s);
     for (let i = 0; i < this.mp4s.length; i++) {
       if (this.mp4s[i].id === name) {
         this.mp4s.splice(i, 1);
@@ -236,9 +309,24 @@ export class MainComponent implements OnInit {
     }
   }
 
+  public removePlaylistMp4(playlistID, index) {
+    this.postsService.removePlaylist(playlistID, 'video').subscribe(res => {
+      if (res['success']) {
+        this.playlists.video.splice(index, 1);
+        this.openSnackBar('Playlist successfully removed.', '');
+      }
+      this.getMp4s();
+    });
+  }
+
+
   // app initialization.
   ngOnInit() {
     this.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
+
+    if (localStorage.getItem('audioOnly') !== null) {
+      this.audioOnly = localStorage.getItem('audioOnly') === 'true';
+    }
   }
 
   // download helpers
@@ -249,9 +337,8 @@ export class MainComponent implements OnInit {
     // if download only mode, just download the file. no redirect
     if (forceView === false && this.downloadOnlyMode && !this.iOS) {
       if (is_playlist) {
-        for (let i = 0; i < name.length; i++) {
-          this.downloadAudioFile(decodeURI(name[i]));
-        }
+        const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
+        this.downloadPlaylist(name, 'audio', zipName);
       } else {
         this.downloadAudioFile(decodeURI(name));
       }
@@ -277,9 +364,8 @@ export class MainComponent implements OnInit {
     // if download only mode, just download the file. no redirect
     if (forceView === false && this.downloadOnlyMode) {
       if (is_playlist) {
-        for (let i = 0; i < name.length; i++) {
-          this.downloadVideoFile(decodeURI(name[i]));
-        }
+        const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
+        this.downloadPlaylist(name, 'video', zipName);
       } else {
         this.downloadVideoFile(decodeURI(name));
       }
@@ -332,9 +418,7 @@ export class MainComponent implements OnInit {
         const cachedFormatsExists = this.cachedAvailableFormats[this.url];
         if (cachedFormatsExists) {
           const video_formats = this.cachedAvailableFormats[this.url]['video'];
-          if (video_formats['best_audio_format'] && this.selectedQuality !== ''/* &&
-              video_formats[this.selectedQuality]['acodec'] === 'none'*/) {
-                console.log(this.selectedQuality);
+          if (video_formats['best_audio_format'] && this.selectedQuality !== '') {
               customQualityConfiguration = video_formats[this.selectedQuality]['format_id'] + '+' + video_formats['best_audio_format'];
           }
         }
@@ -358,7 +442,9 @@ export class MainComponent implements OnInit {
   }
 
   downloadAudioFile(name) {
+    this.downloading_content['audio'][name] = true;
     this.postsService.downloadFileFromServer(name, 'audio').subscribe(res => {
+      this.downloading_content['audio'][name] = false;
       const blob: Blob = res;
       saveAs(blob, name + '.mp3');
 
@@ -373,7 +459,9 @@ export class MainComponent implements OnInit {
   }
 
   downloadVideoFile(name) {
+    this.downloading_content['video'][name] = true;
     this.postsService.downloadFileFromServer(name, 'video').subscribe(res => {
+      this.downloading_content['video'][name] = false;
       const blob: Blob = res;
       saveAs(blob, name + '.mp4');
 
@@ -387,6 +475,15 @@ export class MainComponent implements OnInit {
     });
   }
 
+  downloadPlaylist(fileNames, type, zipName = null, playlistID = null) {
+    this.postsService.downloadFileFromServer(fileNames, type, zipName).subscribe(res => {
+      if (playlistID) { this.downloading_content[type][playlistID] = false };
+      const blob: Blob = res;
+      saveAs(blob, zipName + '.zip');
+    });
+
+  }
+
   clearInput() {
     this.url = '';
     this.results_showing = false;
@@ -406,7 +503,7 @@ export class MainComponent implements OnInit {
   }
 
   inputChanged(new_val) {
-    if (new_val === '') {
+    if (new_val === '' || !new_val) {
       this.results_showing = false;
     } else {
       if (this.ValidURL(new_val)) {
@@ -429,7 +526,7 @@ export class MainComponent implements OnInit {
     const reYT = new RegExp(youtubeStrRegex);
     const ytValid = reYT.test(str);
     if (valid && ytValid && Date.now() - this.last_url_check > 1000) {
-      if (str !== this.last_valid_url) {
+      if (str !== this.last_valid_url && this.allowQualitySelect) {
         // get info
         this.getURLInfo(str);
       }
@@ -446,15 +543,12 @@ export class MainComponent implements OnInit {
   }
 
   getURLInfo(url) {
-    console.log(this.cachedAvailableFormats[url]);
     if (!(this.cachedAvailableFormats[url])) {
       this.formats_loading = true;
-      console.log('has no cached formats available');
       this.postsService.getFileInfo([url], 'irrelevant', true).subscribe(res => {
         if (url === this.url) { this.formats_loading = false; }
         const infos = res['result'];
         const parsed_infos = this.getAudioAndVideoFormats(infos.formats);
-        console.log('got formats for ' + url);
         const available_formats = {audio: parsed_infos[0], video: parsed_infos[1]};
         this.cachedAvailableFormats[url] = available_formats;
       });
@@ -471,9 +565,8 @@ export class MainComponent implements OnInit {
       .switch()                                  // act on the return of the search
       .subscribe(
         (results: Result[]) => {
-          // console.log(results);
           this.results_loading = false;
-          if (results && results.length > 0) {
+          if (this.url !== '' && results && results.length > 0) {
             this.results = results;
             this.results_showing = true;
           } else {
@@ -497,6 +590,7 @@ export class MainComponent implements OnInit {
 
   videoModeChanged(new_val) {
     this.selectedQuality = '';
+    localStorage.setItem('audioOnly', new_val.checked.toString());
   }
 
   getAudioAndVideoFormats(formats): any[] {
@@ -510,7 +604,6 @@ export class MainComponent implements OnInit {
       const format_type = (format.vcodec === 'none') ? 'audio' : 'video';
 
       format_obj.type = format_type;
-      // console.log(format);
       if (format_obj.type === 'audio' && format.abr) {
         const key = format.abr.toString() + 'K';
         format_obj['bitrate'] = format.abr;

src/app/player/player.component.css

@@ -22,4 +22,40 @@
     max-width: 100%;
     padding-left: 0px;
     padding-right: 0px;
+}
+
+.progress-bar {
+    position: absolute;
+    left: 0px;
+    bottom: -1px;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    bottom: 3px;
+    left: 3px;
+    position: absolute;
+}
+
+.save-button {
+    right: 25px;
+    position: absolute;
+    bottom: 25px;
+}
+
+.favorite-button {
+    left: 25px;
+    position: absolute;
+    bottom: 25px;
+}
+
+.video-col {
+    padding-right: 0px;
+    padding-left: 0.01px;
+}
+
+.save-icon {
+    bottom: 1px;
+    position: relative;
 }

src/app/player/player.component.html

@@ -1,7 +1,7 @@
-<div *ngIf="playlist.length > 0; else loading">
+<div *ngIf="playlist.length > 0">
     <div [ngClass]="(type === 'audio') ? null : 'container-video'" class="container">
-        <div class="row">
-            <div [ngClass]="(type === 'audio') ? 'my-2 px-1' : null" class="col px-1">
+        <div style="max-width: 100%; margin-left: 0px;" class="row">
+            <div [ngClass]="(type === 'audio') ? 'my-2 px-1' : 'video-col'" class="col">
                 <vg-player (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
                     <video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
                     </video>
@@ -14,4 +14,12 @@
             </div>
         </div>
     </div>
+
+    <div *ngIf="playlist.length > 1">
+        <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
+        <button *ngIf="!id" color="accent" class="favorite-button" color="primary" (click)="namePlaylistDialog()" mat-fab><mat-icon class="save-icon">favorite</mat-icon></button>
+    </div>
+    <div *ngIf="playlist.length === 1">
+        <button class="save-button" color="primary" (click)="downloadFile()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
+    </div>
 </div>

src/app/player/player.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit, HostListener } from '@angular/core';
+import { Component, OnInit, HostListener, EventEmitter } from '@angular/core';
 import { VgAPI } from 'videogular2/compiled/core';
 import { PostsService } from 'app/posts.services';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog, MatSnackBar } from '@angular/material';
+import { InputDialogComponent } from 'app/input-dialog/input-dialog.component';
 
 export interface IMedia {
   title: string;
@@ -31,6 +33,10 @@ export class PlayerComponent implements OnInit {
   videoFolderPath = null;
   innerWidth: number;
 
+  downloading = false;
+
+  id = null;
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.innerWidth = window.innerWidth;
@@ -41,12 +47,19 @@ export class PlayerComponent implements OnInit {
 
     this.fileNames = this.route.snapshot.paramMap.get('fileNames').split('|nvr|');
     this.type = this.route.snapshot.paramMap.get('type');
+    this.id = this.route.snapshot.paramMap.get('id');
 
     // loading config
     this.postsService.loadNavItems().subscribe(result => { // loads settings
       this.baseStreamPath = result['YoutubeDLMaterial']['Downloader']['path-base'];
       this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
       this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
+      const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
+
+      this.postsService.path = backendUrl;
+      this.postsService.startPath = backendUrl;
+      this.postsService.startPathSSL = backendUrl;
+
       let fileType = null;
       if (this.type === 'audio') {
         fileType = 'audio/mp3';
@@ -66,7 +79,6 @@ export class PlayerComponent implements OnInit {
           src: fullLocation,
           type: fileType
         }
-        console.log(mediaObject);
         this.playlist.push(mediaObject);
       }
       this.currentItem = this.playlist[this.currentIndex];
@@ -76,7 +88,8 @@ export class PlayerComponent implements OnInit {
 
   }
 
-  constructor(private postsService: PostsService, private route: ActivatedRoute) {
+  constructor(private postsService: PostsService, private route: ActivatedRoute, private dialog: MatDialog, private router: Router,
+              public snackBar: MatSnackBar) {
 
   }
 
@@ -103,7 +116,7 @@ export class PlayerComponent implements OnInit {
   }
 
   onClickPlaylistItem(item: IMedia, index: number) {
-    console.log('new current item is ' + item.title + ' at index ' + index);
+      // console.log('new current item is ' + item.title + ' at index ' + index);
       this.currentIndex = index;
       this.currentItem = item;
   }
@@ -118,4 +131,88 @@ export class PlayerComponent implements OnInit {
     return decodeURI(string);
   }
 
+  downloadContent() {
+    const fileNames = [];
+    for (let i = 0; i < this.playlist.length; i++) {
+      fileNames.push(this.playlist[i].title);
+    }
+
+    const zipName = fileNames[0].split(' ')[0] + fileNames[1].split(' ')[0];
+    this.downloading = true;
+    this.postsService.downloadFileFromServer(fileNames, this.type, zipName).subscribe(res => {
+      this.downloading = false;
+      const blob: Blob = res;
+      saveAs(blob, zipName + '.zip');
+    }, err => {
+      console.log(err);
+      this.downloading = false;
+    });
+  }
+
+  downloadFile() {
+    const ext = (this.type === 'audio') ? '.mp3' : '.mp4';
+    const filename = this.playlist[0].title;
+    this.downloading = true;
+    this.postsService.downloadFileFromServer(filename, this.type).subscribe(res => {
+      this.downloading = false;
+      const blob: Blob = res;
+      saveAs(blob, filename + ext);
+    }, err => {
+      console.log(err);
+      this.downloading = false;
+    });
+  }
+
+  namePlaylistDialog() {
+    const done = new EventEmitter<any>();
+      const dialogRef = this.dialog.open(InputDialogComponent, {
+        width: '300px',
+        data: {
+          inputTitle: 'Name the playlist',
+          inputPlaceholder: 'Name',
+          submitText: 'Favorite',
+          doneEmitter: done
+        }
+      });
+
+      done.subscribe(name => {
+
+        // Eventually do additional checks on name
+        if (name) {
+          this.postsService.createPlaylist(name, this.fileNames, this.type, null).subscribe(res => {
+            if (res['success']) {
+              dialogRef.close();
+              const new_playlist = res['new_playlist'];
+              this.openSnackBar('Playlist \'' + name + '\' successfully created!', '')
+              this.playlistPostCreationHandler(new_playlist.id);
+            }
+          });
+        }
+      });
+  }
+
+  /*
+  createPlaylist(name) {
+    this.postsService.createPlaylist(name, this.fileNames, this.type, null).subscribe(res => {
+      if (res['success']) {
+        console.log('Success!');
+      }
+    });
+  }
+  */
+
+  playlistPostCreationHandler(playlistID) {
+    // changes the route without moving from the current view or
+    // triggering a navigation event
+    this.id = playlistID;
+    this.router.navigateByUrl(this.router.url + ';id=' + playlistID);
+  }
+
+  // snackbar helper
+  public openSnackBar(message: string, action: string) {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
 }

src/app/posts.services.ts

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
+import { THEMES_CONFIG } from '../themes';
 
 @Injectable()
 export class PostsService {
@@ -15,11 +16,17 @@ export class PostsService {
     startPath = 'http://localhost:17442/';
     startPathSSL = 'https://localhost:17442/'
     handShakeComplete = false;
+    THEMES_CONFIG = THEMES_CONFIG;
+    theme;
 
     constructor(private http: HttpClient) {
         console.log('PostsService Initialized...');
     }
 
+    setTheme(theme) {
+        this.theme = this.THEMES_CONFIG[theme];
+    }
+
     startHandshake(url: string) {
         return this.http.get(url + 'geturl');
     }
@@ -60,8 +67,9 @@ export class PostsService {
         if (isDevMode()) {
             return this.http.get('./assets/default.json');
         }
-        console.log('Config location: ' + window.location.href + 'backend/config/default.json');
-        return this.http.get(window.location.href + 'backend/config/default.json');
+        const locations = window.location.href.split('#');
+        const current_location = locations[0];
+        return this.http.get(current_location + 'backend/config/default.json');
     }
 
     deleteFile(name: string, isAudio: boolean) {
@@ -80,13 +88,28 @@ export class PostsService {
         return this.http.post(this.path + 'getMp4s', {});
     }
 
-    downloadFileFromServer(fileName, type) {
-        return this.http.post(this.path + 'downloadFile', {fileName: fileName, type: type}, {responseType: 'blob'});
+    downloadFileFromServer(fileName, type, outputName = null) {
+        return this.http.post(this.path + 'downloadFile', {fileNames: fileName,
+                                                            type: type,
+                                                            is_playlist: Array.isArray(fileName),
+                                                            outputName: outputName},
+                                                          {responseType: 'blob'});
     }
 
     getFileInfo(fileNames, type, urlMode) {
         return this.http.post(this.path + 'getVideoInfos', {fileNames: fileNames, type: type, urlMode: urlMode});
     }
+
+    createPlaylist(playlistName, fileNames, type, thumbnailURL) {
+        return this.http.post(this.path + 'createPlaylist', {playlistName: playlistName,
+                                                            fileNames: fileNames,
+                                                            type: type,
+                                                            thumbnailURL: thumbnailURL});
+    }
+
+    removePlaylist(playlistID, type) {
+        return this.http.post(this.path + 'deletePlaylist', {playlistID: playlistID, type: type});
+    }
 }
 
 

src/assets/default.json

@@ -17,11 +17,16 @@
       "Extra": {
         "title_top": "Youtube Downloader",
         "file_manager_enabled": true,
+        "allow_quality_select": true,
         "download_only_mode": false
       },
       "API": {
         "use_youtube_API": false,
         "youtube_API_key": ""
+      },
+      "Themes": {
+        "default_theme": "default",
+        "allow_theme_change": true
       }
     }
   }

src/index.html

@@ -7,10 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   
-  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-  <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">    <script src="systemjs.config.js"></script>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>

src/polyfills.ts

@@ -42,11 +42,11 @@
 
 
 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
+// import 'core-js/es6/reflect';
 
 
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
 

src/styles.css

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

src/styles.scss

@@ -0,0 +1,70 @@
+/* You can add global styles to this file, and also import other style files */
+
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
+
+//@import './app-theme';
+/* You can add global styles to this file, and also import other style files */
+// @import "../node_modules/@angular/material/prebuilt-themes/purple-green.css";
+@import "palette.scss";
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+/*// Typography
+$custom-typography: mat-typography-config(
+  $font-family: Raleway,
+  $headline: mat-typography-level(24px, 48px, 400),
+  $body-1: mat-typography-level(16px, 24px, 400)
+);
+@include angular-material-typography($custom-typography);
+*/
+// Default colors
+$my-app-primary: mat-palette($mat-light-blue, 700, 100, 800);
+$my-app-accent:  mat-palette($mat-blue, 700, 100, 800);
+$my-app-warn: mat-palette($mat-red, 700, 100, 800);
+
+$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
+@include angular-material-theme($my-app-theme);
+
+// Dark theme
+$dark-primary: mat-palette($mat-indigo);
+$dark-accent:  mat-palette($mat-blue);
+$dark-warn:    mat-palette($mat-deep-orange);
+
+$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+.dark-theme {
+  @include angular-material-theme($dark-theme);
+}
+
+// Light theme
+$light-primary: mat-palette($mat-grey, 200, 500, 300);
+$light-accent: mat-palette($mat-brown, 200);
+$light-warn: mat-palette($mat-deep-orange, 200);
+
+$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
+
+.light-theme {
+  @include angular-material-theme($light-theme)
+}
+
+.no-outline {
+  outline: none;
+}
+
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// @import '../node_modules/@angular/material/theming';
+
+.centered {
+    margin: 0 auto;
+    left: 50%;
+    top: 50%;
+}

src/themes.ts

@@ -0,0 +1,22 @@
+const THEMES_CONFIG = {
+    'default': {
+        'key': 'default',
+        'background_color': 'ghostwhite',
+        'css_label': 'default-theme',
+        'social_theme': 'material-light'
+    },
+    'dark': {
+        'key': 'dark',
+        'background_color': '#757575',
+        'css_label': 'dark-theme',
+        'social_theme': 'material-dark'
+    },
+    'light': {
+        'key': 'light',
+        'background_color': 'white',
+        'css_label': 'light-theme',
+        'social_theme': 'material-light'
+    }
+};
+
+export {THEMES_CONFIG};