image urls hotfix

Removed erroneous log

.gitignore

@@ -43,8 +43,18 @@ Thumbs.db
 
 node_modules/*
 backend/node_modules/*
+backend/public/*
 YoutubeDL-Material/node_modules/*
 backend/video/*
 backend/audio/*
+backend/public/*
+backend/subscriptions/archives/*
+backend/subscriptions/playlists/*
+backend/subscriptions/channels/*
 backend/db.json
+backend/subscriptions/channels/*
+backend/subscriptions/playlists/*
+backend/subscriptions/archives/*
 src/assets/default.json
+package-lock.json
+backend/package-lock.json

Dockerfile

@@ -0,0 +1,21 @@
+FROM alpine:3.11
+
+RUN apk add --update npm python ffmpeg
+
+# Change directory so that our commands run inside this new directory
+WORKDIR /app
+
+# Copy dependency definitions
+COPY ./ /app/
+
+# Change directory to backend
+WORKDIR /app
+
+# Install dependencies on backend
+RUN npm install
+
+# Expose the port the app runs in
+EXPOSE 17442
+
+# Run the specified command within the container.
+CMD [ "node", "app.js" ]

Procfile

@@ -0,0 +1 @@
+web: cd backend && node app.js

README.md

@@ -1,6 +1,8 @@
 # YoutubeDL-Material
 
-YoutubeDL-Material is a material design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 8](https://angular.io/) for the frontend, and [Nodejs](https://nodejs.org/) on the backend.
+YoutubeDL-Material is a Material Design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 9](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
+
+Now with [Docker](#Docker) support!
 
 ## Getting Started
 
@@ -8,70 +10,93 @@ Check out the prerequisites, and go to the installation section. Easy as pie!
 
 Here's an image of what it'll look like once you're done:
 
-![frontpage](https://i.imgur.com/rOxWIys.png)
+![frontpage](https://i.imgur.com/w8iofbb.png)
 
 With optional file management enabled (default):
 
-![frontpage_with_files](https://i.imgur.com/UTUROLl.png)
+![frontpage_with_files](https://i.imgur.com/FTATqBM.png)
 
 Dark mode:
 
-![dark_mode](https://i.imgur.com/9TMkHF6.png?1)
+![dark_mode](https://i.imgur.com/r5ZtBqd.png)
 
 ### Prerequisites
 
-You need to have a functioning web server for this to work. Also make sure you have these dependencies installed on your system: ffmpeg, nodejs, python. If you don't, run this command:
+NOTE: If you would like to use Docker, you can skip down to the [Docker](#Docker) section for a setup guide.
+
+Make sure you have these dependencies installed on your system: nodejs and youtube-dl. If you don't, run this command:
 
 ```
-sudo apt-get install ffmpeg nodejs python
+sudo apt-get install nodejs youtube-dl
 ```
 
 ### Installing
 
-First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
+1. First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
 
-Drag all the files in `youtubedl-material` to a location accessible to a web server. It works best if it's the root (usually right inside `public_html`. Once that's done, navigate to `backend` and edit the `default.json` file. If you're using SSL encryption, look at the `encrypted.json` file for a template. 
+2. Drag the `youtubedl-material` directory to an easily accessible directory. Navigate to the `appdata` folder and edit the `default.json` file. If you're using SSL encryption, look at the `encrypted.json` file for a template.
 
-Port forward `17442` if you're going to access YoutubeDL-Material from out of your network. This is an important step. Make sure the configuration reflects this appropriately.
+NOTE: If you are intending to use a reverse proxy, this next step is not necessary
 
-Once the configuration is done, type `sudo nodejs app.js`. This will run the backend server. On your browser, navigate to your installation folder. Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
+3. Port forward the port listed in `default.json`, which defaults to `17442`.
+
+4. Once the configuration is done, run `npm install` to install all the backend dependencies. Once that is finished, type `nodejs app.js`. This will run the backend server, which serves the frontend as well. On your browser, navigate to to the server (url with the specified port). Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
 
 If you experience problems, know that it's usually caused by a configuration problem. The first thing you should do is check the console. To get there, right click anywhere on the page and click "Inspect element." Then on the menu that pops up, click console. Look at the error there, and try to investigate.
 
 ### Configuration
 
+NOTE: If you are using YoutubeDL-Material v3.2 or lower, click [here](https://github.com/Tzahi12345/YoutubeDL-Material/blob/b87a9f1e2fd896b8e3b2f12429b7ffb15ea4521b/README.md#configuration) for the old README
+
 Here is an explanation for the configuration entries. Check out the [default config](https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/backend/config/default.json) for more context.
 
 | Config item | Description | Default |
 | ------------- | ------------- | ------------- |
-| frontendurl  | URL to the webserver hosting YTDL-Material | "http://example.com" |
-| backendurl  | URL to the YTDL-Material's backend, should include port 17442 | "http://example.com:17442/" |
+| url  | URL to the server hosting YoutubeDL-Material | "http://example.com" |
+| port  | Desired port for YoutubeDL-Material | "17442" |
 | use-encryption | true if you intend to use SSL encryption (https) | false |
 | cert-file-path | Cert file path - required if using encryption | "/etc/letsencrypt/live/example.com/fullchain.pem" |
 | key-file-path | Private key file path - required if using encryption |  "/etc/letsencrypt/live/example.com/privkey.pem" |
-| path-base | Audio/video stream URL. Usually the same as backendurl | "http://example.com:17442/" |
 | path-audio | Path to audio folder for saved mp3s | "audio/" |
 | path-video | Path to video folder for saved mp4s | "video/" |
 | title_top | Title shown on the top toolbar | "Youtube Downloader" |
 | file_manager_enabled | true if you want to use the file manager | true |
 | allow_quality_select | true if you want to select a videos quality level before downloading | true |
 | download_only_mode | true if you want files to directly download to the client with no media player | false |
+| allow_multi_download_mode | true if you want the ability to download multiple videos at the same time | true |
 | use_youtube_API | true if you want to use the Youtube API which is used for YT searches | false |
 | youtube_API_key | Youtube API key. Required if use_youtube_API is enabled | "" |
 | default_theme | Default theme to use. Options are "default" and "dark" | "default" |
 | allow_theme_change | true if you want the icon in the top toolbar that toggles dark mode | true |
+| use_default_downloading_agent | true if you want to use youtube-dl's default downloader | true |
+| custom_downloading_agent | If not using the default downloader, this is the downloader you want to use | "" |
+| allow_advanced_download | true if you want to use the Advanced download options | false |
 
-## Deployment
+## Build it yourself
 
 If you'd like to install YoutubeDL-Material, go to the Installation section. If you want to build it yourself and/or develop the repository, then this section is for you.
 
 To deploy, simply clone the repository, and go into the `youtubedl-material` directory. Type `npm install` and all the dependencies will install. Then type `cd backend` and again type `npm install` to install the dependencies for the backend.
 
-Once you do that, you're almost up and running. All you need to do is edit the configuration in `youtubedl-material/backend/config`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/dist` folder. Drag those files into a web server, and drag the `backend` directory into the same folder. This folder should have `index.html` in it as well. If it does **not**, you're in the wrong directory.
+Once you do that, you're almost up and running. All you need to do is edit the configuration in `youtubedl-material/appdata`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/dist` folder. Drag those files into the `public` directory in the `backend` folder.
 
-The frontend is now complete. The backend is much easier. Just go into the `youtubedl-material/backend` folder, and type `sudo nodejs app.js`.
+The frontend is now complete. The backend is much easier. Just go into the `backend` folder, and type `nodejs app.js`.
 
-Finally, port forward the port `17442` and point it to the server's IP address. Make sure the port is also allowed through the firewall.
+Finally, port forward the port specified in the config (defaults to `17442`) and point it to the server's IP address. Make sure the port is also allowed through the server's firewall.
+
+## Docker
+
+If you are looking to setup YoutubeDL-Material with Docker, this section is for you. And you're in luck! Docker setup is quite simple.
+
+1. Run `curl -L https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest/download/docker-compose.yml -o docker-compose.yml` to download the latest release of `docker-compose.yml`, or go to the [releases](https://github.com/Tzahi12345/YoutubeDL-Material/releases/) page to grab the version you'd like.
+2. Modify the config items in the `environment` section of `docker-compose.yml` to your liking. The default options will work, however, and point to `http://localhost:8998`. You can find an explanation of these configuration items in [Configuration](#Configuration) section. 
+3. Run `docker-compose pull`. This will download the official YoutubeDL-Material docker image.
+4. Run `docker-compose up` to start it up. If successful, it should say "HTTP(S): Started on port 8998" or something similar. 
+5. Make sure you can connect to the specified URL + port, and if so, you are done!
+
+## API
+
+View how to use the backend API on the [API Wiki page](https://github.com/Tzahi12345/YoutubeDL-Material/wiki/API).
 
 ## Contributing
 

angular.json

@@ -7,10 +7,17 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "es": "src/locale/messages.es.xlf"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -30,6 +37,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -45,6 +58,9 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "es": {
+              "localize": ["es"]
             }
           }
         },
@@ -56,6 +72,9 @@
           "configurations": {
             "production": {
               "browserTarget": "youtube-dl-material:build:production"
+            },
+            "es": {
+              "browserTarget": "youtube-dl-material:build:es"
             }
           }
         },
@@ -176,7 +195,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

backend/appdata/default.json

@@ -1,8 +1,8 @@
 {
     "YoutubeDLMaterial": {
         "Host": {
-            "frontendurl": "http://example.com",
-            "backendurl": "http://example.com:17442/"
+            "url": "http://example.com",
+            "port": "17442"
         },
       "Encryption": {
         "use-encryption": false,
@@ -10,15 +10,18 @@
         "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
       },
       "Downloader": {
-        "path-base": "http://example.com:17442/",
         "path-audio": "audio/",
-        "path-video": "video/"
+        "path-video": "video/",
+        "use_youtubedl_archive": false,
+        "custom_args": ""
       },
       "Extra": {
         "title_top": "Youtube Downloader",
         "file_manager_enabled": true,
         "allow_quality_select": true,
-        "download_only_mode": false
+        "download_only_mode": false,
+        "allow_multi_download_mode": true,
+        "settings_pin_required": false
       },
       "API": {
         "use_youtube_API": false,
@@ -28,9 +31,16 @@
         "default_theme": "default",
         "allow_theme_change": true
       },
+      "Subscriptions": {
+        "allow_subscriptions": true,
+        "subscriptions_base_path": "subscriptions/",
+        "subscriptions_check_interval": "300",
+        "subscriptions_use_youtubedl_archive": true
+      },
       "Advanced": {
         "use_default_downloading_agent": true,
-        "custom_downloading_agent": ""
+        "custom_downloading_agent": "",
+        "allow_advanced_download": false
       }
     }
   }

backend/appdata/encrypted.json

@@ -1,24 +1,27 @@
 {
     "YoutubeDLMaterial": {
-        "Host": {
-            "frontendurl": "https://example.com",
-            "backendurl": "https://example.com:17442/"
-        },
+      "Host": {
+        "url": "https://example.com",
+        "port": "17442"
+      },
       "Encryption": {
         "use-encryption": true,
         "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
         "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
       },
       "Downloader": {
-        "path-base": "https://example.com:17442/",
         "path-audio": "audio/",
-        "path-video": "video/"
+        "path-video": "video/",
+        "use_youtubedl_archive": false,
+        "custom_args": ""
       },
       "Extra": {
         "title_top": "Youtube Downloader",
         "file_manager_enabled": true,
         "allow_quality_select": true,
-        "download_only_mode": false
+        "download_only_mode": false,
+        "allow_multi_download_mode": true,
+        "settings_pin_required": false
       },
       "API": {
         "use_youtube_API": false,
@@ -28,9 +31,16 @@
         "default_theme": "default",
         "allow_theme_change": true
       },
+      "Subscriptions": {
+        "allow_subscriptions": true,
+        "subscriptions_base_path": "subscriptions/",
+        "subscriptions_check_interval": "300",
+        "subscriptions_use_youtubedl_archive": true
+      },
       "Advanced": {
         "use_default_downloading_agent": true,
-        "custom_downloading_agent": ""
+        "custom_downloading_agent": "",
+        "allow_advanced_download": false
       }
     }
   }

backend/config.js

@@ -0,0 +1,118 @@
+const fs = require('fs');
+
+let CONFIG_ITEMS = require('./consts.js')['CONFIG_ITEMS'];
+const debugMode = process.env.YTDL_MODE === 'debug';
+
+let configPath = debugMode ? '../src/assets/default.json' : 'appdata/default.json';
+
+// https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key
+Object.byString = function(o, s) {
+    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
+    s = s.replace(/^\./, '');           // strip a leading dot
+    var a = s.split('.');
+    for (var i = 0, n = a.length; i < n; ++i) {
+        var k = a[i];
+        if (k in o) {
+            o = o[k];
+        } else {
+            return;
+        }
+    }
+    return o;
+}
+
+function getParentPath(path) {
+    let elements = path.split('.');
+    elements.splice(elements.length - 1, 1);
+    return elements.join('.');
+}
+
+function getElementNameInConfig(path) {
+    let elements = path.split('.');
+    return elements[elements.length - 1];
+}
+
+/*
+* Gets config file and returns as a json
+*/
+function getConfigFile() {
+    let raw_data = fs.readFileSync(configPath);
+    try {
+        let parsed_data = JSON.parse(raw_data);
+        return parsed_data;
+    } catch(e) {
+        console.log('ERROR: Failed to get config file');
+        return null;
+    }
+}
+
+function setConfigFile(config) {
+    try {
+        fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+        return true;
+    } catch(e) {
+        return false;
+    }
+}
+
+function getConfigItem(key) {
+    let config_json = getConfigFile();
+    if (!CONFIG_ITEMS[key]) {
+        console.log('cannot find config with key ' + key);
+        return null;
+    }
+    let path = CONFIG_ITEMS[key]['path'];
+    return Object.byString(config_json, path);
+};
+
+function setConfigItem(key, value) {
+    let success = false;
+    let config_json = getConfigFile();
+    let path = CONFIG_ITEMS[key]['path'];
+    let parent_path = getParentPath(path);
+    let element_name = getElementNameInConfig(path);
+    
+    let parent_object = Object.byString(config_json, parent_path);
+    if (value === 'false' || value === 'true') {
+        parent_object[element_name] = (value === 'true');
+    } else {
+        parent_object[element_name] = value;
+    }
+
+    success = setConfigFile(config_json);
+
+    return success;
+};
+
+function setConfigItems(items) {
+    let success = false;
+    let config_json = getConfigFile();
+    for (let i = 0; i < items.length; i++) {
+        let key = items[i].key;
+        let value = items[i].value;
+
+        // if boolean strings, set to booleans again
+        if (value === 'false' || value === 'true') {
+            value = (value === 'true');
+        }
+
+        let item_path = CONFIG_ITEMS[key]['path'];
+        let item_parent_path = getParentPath(item_path);
+        let item_element_name = getElementNameInConfig(item_path);
+        
+        let item_parent_object = Object.byString(config_json, item_parent_path);
+        item_parent_object[item_element_name] = value;
+    }
+
+    success = setConfigFile(config_json);
+    return success;
+}
+
+module.exports = {
+    getConfigItem: getConfigItem,
+    setConfigItem: setConfigItem,
+    setConfigItems: setConfigItems,
+    getConfigFile: getConfigFile,
+    setConfigFile: setConfigFile,
+    CONFIG_ITEMS: CONFIG_ITEMS
+}

backend/consts.js

@@ -0,0 +1,127 @@
+let CONFIG_ITEMS = {
+    // Host
+    'ytdl_url': {
+        'key': 'ytdl_url',
+        'path': 'YoutubeDLMaterial.Host.url'
+    },
+    'ytdl_port': {
+        'key': 'ytdl_port',
+        'path': 'YoutubeDLMaterial.Host.port'
+    },
+
+    // Encryption
+    'ytdl_use_encryption': {
+        'key': 'ytdl_use_encryption',
+        'path': 'YoutubeDLMaterial.Encryption.use-encryption'
+    },
+    'ytdl_cert_file_path': {
+        'key': 'ytdl_cert_file_path',
+        'path': 'YoutubeDLMaterial.Encryption.cert-file-path'
+    },
+    'ytdl_key_file_path': {
+        'key': 'ytdl_key_file_path',
+        'path': 'YoutubeDLMaterial.Encryption.key-file-path'
+    },
+
+    // Downloader
+    'ytdl_audio_folder_path': {
+        'key': 'ytdl_audio_folder_path',
+        'path': 'YoutubeDLMaterial.Downloader.path-audio'
+    },
+    'ytdl_video_folder_path': {
+        'key': 'ytdl_video_folder_path',
+        'path': 'YoutubeDLMaterial.Downloader.path-video'
+    },
+    'ytdl_use_youtubedl_archive': {
+        'key': 'ytdl_use_youtubedl_archive',
+        'path': 'YoutubeDLMaterial.Downloader.use_youtubedl_archive'
+    },
+    'ytdl_custom_args': {
+        'key': 'ytdl_custom_args',
+        'path': 'YoutubeDLMaterial.Downloader.custom_args'
+    },
+
+    // Extra
+    'ytdl_title_top': {
+        'key': 'ytdl_title_top',
+        'path': 'YoutubeDLMaterial.Extra.title_top'
+    },
+    'ytdl_file_manager_enabled': {
+        'key': 'ytdl_file_manager_enabled',
+        'path': 'YoutubeDLMaterial.Extra.file_manager_enabled'
+    },
+    'ytdl_allow_quality_select': {
+        'key': 'ytdl_allow_quality_select',
+        'path': 'YoutubeDLMaterial.Extra.allow_quality_select'
+    },
+    'ytdl_download_only_mode': {
+        'key': 'ytdl_download_only_mode',
+        'path': 'YoutubeDLMaterial.Extra.download_only_mode'
+    },
+    'ytdl_allow_multi_download_mode': {
+        'key': 'ytdl_allow_multi_download_mode',
+        'path': 'YoutubeDLMaterial.Extra.allow_multi_download_mode'
+    },
+    'ytdl_settings_pin_required': {
+        'key': 'ytdl_settings_pin_required',
+        'path': 'YoutubeDLMaterial.Extra.settings_pin_required'
+    },
+
+    // API
+    'ytdl_use_youtube_api': {
+        'key': 'ytdl_use_youtube_api',
+        'path': 'YoutubeDLMaterial.API.use_youtube_API'
+    },
+    'ytdl_youtube_api_key': {
+        'key': 'ytdl_youtube_api_key',
+        'path': 'YoutubeDLMaterial.API.youtube_API_key'
+    },
+
+    // Themes
+    'ytdl_default_theme': {
+        'key': 'ytdl_default_theme',
+        'path': 'YoutubeDLMaterial.Themes.default_theme'
+    },
+    'ytdl_allow_theme_change': {
+        'key': 'ytdl_allow_theme_change',
+        'path': 'YoutubeDLMaterial.Themes.allow_theme_change'
+    },
+
+    // Subscriptions
+    'ytdl_allow_subscriptions': {
+        'key': 'ytdl_allow_subscriptions',
+        'path': 'YoutubeDLMaterial.Subscriptions.allow_subscriptions'
+    },
+    'ytdl_subscriptions_base_path': {
+        'key': 'ytdl_subscriptions_base_path',
+        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_base_path'
+    },
+    'ytdl_subscriptions_check_interval': {
+        'key': 'ytdl_subscriptions_check_interval',
+        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
+    },
+    'ytdl_subscriptions_check_interval': {
+        'key': 'ytdl_subscriptions_check_interval',
+        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
+    },
+    'ytdl_subscriptions_use_youtubedl_archive': {
+        'key': 'ytdl_use_youtubedl_archive',
+        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_use_youtubedl_archive'
+    },
+
+    // Advanced
+    'ytdl_use_default_downloading_agent': {
+        'key': 'ytdl_use_default_downloading_agent',
+        'path': 'YoutubeDLMaterial.Advanced.use_default_downloading_agent'
+    },
+    'ytdl_custom_downloading_agent': {
+        'key': 'ytdl_custom_downloading_agent',
+        'path': 'YoutubeDLMaterial.Advanced.custom_downloading_agent'
+    },
+    'ytdl_allow_advanced_download': {
+        'key': 'ytdl_allow_advanced_download',
+        'path': 'YoutubeDLMaterial.Advanced.allow_advanced_download'
+    },
+};
+
+module.exports.CONFIG_ITEMS = CONFIG_ITEMS;

backend/package.json

@@ -4,7 +4,8 @@
   "description": "backend for YoutubeDL-Material",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node app.js"
   },
   "repository": {
     "type": "git",
@@ -19,11 +20,17 @@
   "dependencies": {
     "archiver": "^3.1.1",
     "async": "^3.1.0",
+    "compression": "^1.7.4",
     "config": "^3.2.3",
     "exe": "^1.0.2",
     "express": "^4.17.1",
     "lowdb": "^1.0.0",
+    "md5": "^2.2.1",
+    "node-id3": "^0.1.14",
+    "merge-files": "^0.1.2",
+    "node-fetch": "^2.6.0",
     "shortid": "^2.2.15",
-    "youtube-dl": "^2.3.0"
+    "uuidv4": "^6.0.6",
+    "youtube-dl": "^3.0.2"
   }
 }

backend/subscriptions.js

@@ -0,0 +1,316 @@
+const low = require('lowdb')
+const FileSync = require('lowdb/adapters/FileSync')
+
+var fs = require('fs');
+const { uuid } = require('uuidv4');
+var path = require('path');
+
+var youtubedl = require('youtube-dl');
+const config_api = require('./config');
+
+const adapter = new FileSync('./appdata/db.json');
+const db = low(adapter)
+
+const debugMode = process.env.YTDL_MODE === 'debug';
+
+async function subscribe(sub) {
+    const result_obj = {
+        success: false,
+        error: ''
+    };
+    return new Promise(async resolve => {
+        // sub should just have url and name. here we will get isPlaylist and path
+        sub.isPlaylist = sub.url.includes('playlist');
+
+        if (db.get('subscriptions').find({url: sub.url}).value()) {
+            console.log('Sub already exists');
+            result_obj.error = 'Subcription with URL ' + sub.url + ' already exists!';
+            resolve(result_obj);
+            return;
+        }
+
+        // add sub to db
+        db.get('subscriptions').push(sub).write();
+
+        let success = await getSubscriptionInfo(sub);
+        result_obj.success = success;
+        result_obj.sub = sub;
+        getVideosForSub(sub);
+        resolve(result_obj);
+    });
+    
+}
+
+async function getSubscriptionInfo(sub) {
+    const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+    return new Promise(resolve => {
+        // get videos 
+        let downloadConfig = ['--dump-json', '--playlist-end', '1']
+        youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
+            if (debugMode) {
+                console.log('Subscribe: got info for subscription ' + sub.id);
+            }
+            if (err) {
+                console.log(err.stderr);
+                resolve(false);
+            } else if (output) {
+                if (output.length === 0 || (output.length === 1 && output[0] === '')) {
+                    if (debugMode) console.log('Could not get info for ' + sub.id);
+                    resolve(false);
+                }
+                for (let i = 0; i < output.length; i++) {
+                    let output_json = null;
+                    try {
+                        output_json = JSON.parse(output[i]);
+                    } catch(e) {
+                        output_json = null;
+                    }
+                    if (!output_json) {
+                        continue;
+                    }
+
+                    if (!sub.name) {
+                        sub.name = sub.isPlaylist ? output_json.playlist_title : output_json.uploader;
+                        // if it's now valid, update
+                        if (sub.name) {
+                            db.get('subscriptions').find({id: sub.id}).assign({name: sub.name}).write();
+                        }
+                    }
+
+                    if (!sub.archive) {
+                        // must create the archive
+                        const archive_dir = basePath + 'archives/' + sub.name;
+                        const archive_path = path.join(archive_dir, 'archive.txt');
+
+                        // creates archive directory and text file if it doesn't exist
+                        if (!fs.existsSync(archive_dir)) {
+                            fs.mkdirSync(archive_dir);
+                            fs.closeSync(fs.openSync(archive_path, 'w'));
+                        } else if (!fs.existsSync(archive_path)) {
+                            fs.closeSync(fs.openSync(archive_path, 'w'));
+                        }
+
+                        // updates subscription
+                        sub.archive = archive_dir;
+                        db.get('subscriptions').find({id: sub.id}).assign({archive: archive_dir}).write();
+                    }
+
+                    // TODO: get even more info
+
+                    resolve(true);
+                }
+                resolve(false);
+            }
+        });
+    });
+}
+
+async function unsubscribe(sub, deleteMode) {
+    return new Promise(async resolve => {
+        const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+        let result_obj = { success: false, error: '' };
+
+        let id = sub.id;
+        db.get('subscriptions').remove({id: id}).write();
+
+        const appendedBasePath = getAppendedBasePath(sub, basePath);
+        if (deleteMode && fs.existsSync(appendedBasePath)) {
+            if (sub.archive && fs.existsSync(sub.archive)) {
+                const archive_file_path = path.join(sub.archive, 'archive.txt');
+                // deletes archive if it exists
+                if (fs.existsSync(archive_file_path)) {
+                    fs.unlinkSync(archive_file_path);
+                }
+                fs.rmdirSync(sub.archive);
+            }
+            deleteFolderRecursive(appendedBasePath);
+        }
+    });
+
+}
+
+async function deleteSubscriptionFile(sub, file, deleteForever) {
+    const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+    const useArchive = config_api.getConfigItem('ytdl_subscriptions_use_youtubedl_archive');
+    const appendedBasePath = getAppendedBasePath(sub, basePath);
+    const name = file;
+    let retrievedID = null;
+    return new Promise(resolve => {
+        let filePath = appendedBasePath;
+        var jsonPath = path.join(__dirname,filePath,name+'.info.json');
+        var videoFilePath = path.join(__dirname,filePath,name+'.mp4');
+        var imageFilePath = path.join(__dirname,filePath,name+'.jpg');
+
+        jsonExists = fs.existsSync(jsonPath);
+        videoFileExists = fs.existsSync(videoFilePath);
+        imageFileExists = fs.existsSync(imageFilePath);
+
+        if (jsonExists) {
+            retrievedID = JSON.parse(fs.readFileSync(jsonPath, 'utf8'))['id'];
+            fs.unlinkSync(jsonPath);
+        }
+
+        if (imageFileExists) {
+            fs.unlinkSync(imageFilePath);
+        }
+
+        if (videoFileExists) {
+            fs.unlink(videoFilePath, function(err) {
+                if (fs.existsSync(jsonPath) || fs.existsSync(videoFilePath)) {
+                    resolve(false);
+                } else {
+                    // check if the user wants the video to be redownloaded (deleteForever === false)
+                    if (!deleteForever && useArchive && sub.archive && retrievedID) {
+                        const archive_path = path.join(sub.archive, 'archive.txt')
+                        // if archive exists, remove line with video ID
+                        if (fs.existsSync(archive_path)) {
+                            removeIDFromArchive(archive_path, retrievedID);
+                        }
+                    }
+                    resolve(true);
+                }
+            });
+        } else {
+            // TODO: tell user that the file didn't exist
+            resolve(true);
+        }
+        
+    });
+}
+
+async function getVideosForSub(sub) {
+    return new Promise(resolve => {
+        if (!subExists(sub.id)) {
+            resolve(false);
+            return;
+        }
+        const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+        const useArchive = config_api.getConfigItem('ytdl_subscriptions_use_youtubedl_archive');
+
+        let appendedBasePath = null
+        if (sub.name) {
+            appendedBasePath = getAppendedBasePath(sub, basePath);
+        } else {
+            appendedBasePath = basePath + (sub.isPlaylist ? 'playlists/%(playlist_title)s' : 'channels/%(uploader)s');
+        }
+
+        let downloadConfig = ['-o', appendedBasePath + '/%(title)s.mp4', '-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4', '-ciw', '--write-annotations', '--write-thumbnail', '--write-info-json', '--print-json'];
+
+        if (sub.timerange) {
+            downloadConfig.push('--dateafter', sub.timerange);
+        }
+
+        let archive_dir = null;
+        let archive_path = null;
+
+        if (useArchive) {
+            if (sub.archive) {
+                archive_dir = sub.archive;
+                archive_path = path.join(archive_dir, 'archive.txt')
+            }
+            downloadConfig.push('--download-archive', archive_path);
+        }
+
+        // get videos 
+        youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
+            if (debugMode) {
+                console.log('Subscribe: got videos for subscription ' + sub.name);
+            }
+            if (err) {
+                console.log(err.stderr);
+                resolve(false);
+            } else if (output) {
+                if (output.length === 0 || (output.length === 1 && output[0] === '')) {
+                    if (debugMode) console.log('No additional videos to download for ' + sub.name);
+                    resolve(true);
+                }
+                for (let i = 0; i < output.length; i++) {
+                    let output_json = null;
+                    try {
+                        output_json = JSON.parse(output[i]);
+                    } catch(e) {
+                        output_json = null;
+                    }
+                    if (!output_json) {
+                        continue;
+                    }
+
+                    // TODO: Potentially store downloaded files in db?
+        
+                }
+                resolve(true);
+            }
+        });
+    });
+}
+
+function getAllSubscriptions() {
+    const subscriptions = db.get('subscriptions').value();
+    return subscriptions;
+}
+
+function getSubscription(subID) {
+    return db.get('subscriptions').find({id: subID}).value();
+}
+
+function subExists(subID) {
+    return !!db.get('subscriptions').find({id: subID}).value();
+}
+
+// helper functions
+
+function getAppendedBasePath(sub, base_path) {
+    return base_path + (sub.isPlaylist ? 'playlists/' : 'channels/') + sub.name;
+}
+
+// https://stackoverflow.com/a/32197381/8088021
+const deleteFolderRecursive = function(folder_to_delete) {
+    if (fs.existsSync(folder_to_delete)) {
+      fs.readdirSync(folder_to_delete).forEach((file, index) => {
+        const curPath = path.join(folder_to_delete, file);
+        if (fs.lstatSync(curPath).isDirectory()) { // recurse
+          deleteFolderRecursive(curPath);
+        } else { // delete file
+          fs.unlinkSync(curPath);
+        }
+      });
+      fs.rmdirSync(folder_to_delete);
+    }
+  };
+
+function removeIDFromArchive(archive_path, id) {
+    let data = fs.readFileSync(archive_path, {encoding: 'utf-8'});
+    if (!data) {
+        console.log('Archive could not be found.');
+        return;
+    }
+
+    let dataArray = data.split('\n'); // convert file data in an array
+    const searchKeyword = id; // we are looking for a line, contains, key word id in the file
+    let lastIndex = -1; // let say, we have not found the keyword
+
+    for (let index=0; index<dataArray.length; index++) {
+        if (dataArray[index].includes(searchKeyword)) { // check if a line contains the id keyword
+            lastIndex = index; // found a line includes a id keyword
+            break; 
+        }
+    }
+
+    const line = dataArray.splice(lastIndex, 1); // remove the keyword id from the data Array
+
+    // UPDATE FILE WITH NEW DATA
+    const updatedData = dataArray.join('\n');
+    fs.writeFileSync(archive_path, updatedData);
+    if (line) return line;
+    if (err) throw err;
+}
+
+module.exports = {
+    getSubscription        : getSubscription,
+    getAllSubscriptions    : getAllSubscriptions,
+    subscribe              : subscribe,
+    unsubscribe            : unsubscribe,
+    deleteSubscriptionFile : deleteSubscriptionFile,
+    getVideosForSub        : getVideosForSub,
+    removeIDFromArchive    : removeIDFromArchive
+}

chrome-extension.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDMX9Wk5SM5cIfY
+6ReKX3ybY1rsbNbOzG8ceN7yyeXB0mor8pVsX1MOna2HewOyBuaaYNJRO4tJBxic
+7a8zQErfgHL/i/QrVvVCpfJ7xKvq6zij5NYoqd/FBUwawqjeH5/voIcAp9z5Vmsr
+kL0sxJUKy6b4IWNp3noU7Nvq2RwxnXQbKDhz8FrX6oQAnDC6gsG5a2OSPsaE4oqw
+6nmonORJypmpP5hqyHY8ffXBT2lAxjHT7OnYbaCBe2TQP8+rH6rDBOhjVNtUJ089
+ocTQL6LtQEPkcF4yKJmtcOwHl8OPGZs5l9i8xb4j9RuSPkm2lbzZX8sOsdGGoqJZ
+q68nYhsHAgMBAAECggEAXmtKEzfPObq88B/kAcgSk+FngMHZzcmR7bgD3GwdSxnQ
+dkRI9zvk7eQ35tcUwntAr4Lat6/ILjFqlBmVLxrdXHuF5Xz9jcZLYgKzz61xdYM9
+dC6FKF0u5eGIIvbauGAo7jaeGFX1F3Zu5b4lP9kEOGwU1B7sxF0FzsQM5+dtCJgv
+We/hWQeF+9gtoVnkCSS/Mq2p0UomXXHW0Bz4+HuHlTR9aiYbviYnotABiLUhZyzt
+v5yUaktb9qniBfdLpRlq8cp06xYlTEA9gJpa4Pnok8OWUsbAiW6EiXUSaZ/cchVa
+AnO8WWYvVOnnt6WHI3+QdFTnqVjE5TBX4N/7bVhHGQKBgQD0dtbFqp7vZK/jVYvE
+z0WPdySOg2ZDmoSfk5ZlR1+Y9zWToHv0qu8zqoOjL8Ubxrh9fGlOow+cCVdkEuaa
+jWC2AWetuRvW0Z5A3XMXr0/N/1fgOkTqtp3WNrUPjVJahEg3lN+90opgFoT8swSi
+s1oxW0oLcVIlrjhGBXAPCfsAuQKBgQDWBLRhHsRAvGcK5wGuVnxVApTIyBOermsW
+3bJt+7+UI+4sYrBAwkWdQG93IG0cQtn48TEPBgmR2fjRF5IFT9M4/u+QOeeByT7I
+we7nVtHgSY5ByC9N0mjWbcmSg8fktz/LonjldNC4kWdOFb75fxGf8kOGS5rUaMA4
+zHucfB6ZvwKBgQCPHJrysMXGY21MaqIeHzEboaX3ABl37hdBzAa5V6UxSVdGCydF
+vmO2HVZey/JaJmWOoKyNaowSzq0oWqBBTg6VvhDR9JHFmoVId9uOvAS+FYN+Mt5x
+gWK5KuGoLxVNBC+6yh6JY526TrSfsrU+Aj0Es+qO9FIg2PL8muZVB4S3kQKBgH/5
+CDMaxpc/EQ5/2413wZjDllwI51J3USm3Hz6Mzp2ybnSz/lh60k2Zfg1polTH1Lb6
+4i7tmUNRZ2sAARyUAuWN64n+VeRRhe1dqZFDZPQMh7fmEAMk0fOGaoXlrt2ghdEq
+Mchi9Xun1nHmpu9hgBR4NNBU3RwuFuLfwvprbZDZAoGAWa62QJChE86xQGP1MrL2
+SbIzw3cfeP5xdQ3MKldJiy5IkbMR7Z13WZ7FwvPTy0g/onLHD1rqlm1kUMsGRHpD
+5vH06PNpKXQ6x8BYaRGtE6P39jLycO/X+WK/lYTrWo1bR+mGCebDh4B5XrwT3gI6
+x4Gvz134pZCTyQCf5JCwbQs=
+-----END PRIVATE KEY-----

chrome-extension/background.js

@@ -0,0 +1,20 @@
+// background.js
+
+// Called when the user clicks on the browser action.
+chrome.browserAction.onClicked.addListener(function(tab) {
+    // get the frontend_url
+    chrome.storage.sync.get({
+        frontend_url: 'http://localhost',
+        audio_only: false
+    }, function(items) {
+        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+            var activeTab = tabs[0];
+            var url = activeTab.url;
+            if (url.includes('youtube.com')) {
+                var new_url = items.frontend_url + '/#/home;url=' + encodeURIComponent(url) + ';audioOnly=' + items.audio_only;
+              chrome.tabs.create({ url: new_url });
+            }
+        });
+    });
+    
+});

chrome-extension/manifest.json

@@ -0,0 +1,26 @@
+{
+    "manifest_version": 2,
+    "name": "YoutubeDL-Material",
+    "version": "0.3",
+    "description": "The Official Firefox & Chrome Extension of YoutubeDL-Material, an open-source and self-hosted YouTube downloader.",
+    "background": {
+        "scripts": ["background.js"]
+    },
+    "browser_action": {
+        "default_icon": "favicon.png"
+    },
+    "permissions": [
+        "tabs",
+        "storage"
+    ],
+    "options_ui": {
+        "page": "options.html",
+        "open_in_tab": false
+    },
+    "browser_specific_settings": {
+        "gecko": {
+          "id": "IsaacMGrynsztein@gmail.com",
+          "strict_min_version": "57.0"
+        }
+    }
+}

chrome-extension/options.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>YoutubeDL-Material Extension Options</title>
+    <!-- Scripts -->
+    <script src="js/jquery-3.4.1.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    
+    <!-- Cascading Style Sheets -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+</head>
+<body>
+
+<h2>Settings</h2>
+
+<div style="width: 95%; margin: 0 auto;">
+    <div class="form-group">
+    <label for="frontend_url">Frontend URL:</label>
+    <input class="form-control" type="text" id="frontend_url">
+    </div>
+
+    <div class="checkbox">
+        <label>
+            <input type="checkbox" id="audio_only">
+            Audio only
+        </label>
+    </div>
+
+    <div id="status"></div>
+    <button style="margin-bottom: 10px;" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" id="save">Save</button>
+
+    <div class="collapse" id="collapseExample">
+        <div class="card card-body">
+        Settings successfully saved!
+        </div>
+    </div>
+</div>
+
+<script src="options.js"></script>
+</body>
+</html>

chrome-extension/options.js

@@ -0,0 +1,30 @@
+// Saves options to chrome.storage
+function save_options() {
+    var frontend_url = document.getElementById('frontend_url').value;
+    var audio_only = document.getElementById('audio_only').checked;
+    chrome.storage.sync.set({
+        frontend_url: frontend_url,
+        audio_only: audio_only
+    }, function() {
+      // Update status to let user know options were saved.
+      $('#collapseExample').collapse('show');
+      setTimeout(function() {
+        $('#collapseExample').collapse('hide');
+      }, 2000);
+    });
+  }
+  
+  // Restores select box and checkbox state using the preferences
+  // stored in chrome.storage.
+  function restore_options() {
+    chrome.storage.sync.get({
+        frontend_url: 'http://localhost',
+        audio_only: false
+    }, function(items) {
+      document.getElementById('frontend_url').value = items.frontend_url;
+      document.getElementById('audio_only').checked = items.audio_only;
+    });
+  }
+  document.addEventListener('DOMContentLoaded', restore_options);
+  document.getElementById('save').addEventListener('click',
+      save_options);

db.json

@@ -0,0 +1,6 @@
+{
+  "playlists": {
+    "audio": [],
+    "video": []
+  }
+}

docker-compose.yml

@@ -0,0 +1,17 @@
+
+version: "2"
+services:
+    ytdl_material:
+        build: .
+        environment: 
+            write_ytdl_config: 'true'
+            ALLOW_CONFIG_MUTATIONS: 'true'
+        restart: always
+        volumes:
+            - ./appdata:/app/appdata
+            - ./audio:/app/audio
+            - ./video:/app/video
+            - ./subscriptions:/app/subscriptions
+        ports:
+            - "8998:17442"
+        image: tzahi12345/youtubedl-material:experimental

package.json

@@ -11,42 +11,51 @@
     "e2e": "ng e2e",
     "electron": "ng build --base-href ./ && electron ."
   },
+  "engines": {
+    "node": "12.3.1",
+    "npm": "6.10.3"
+  },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^8.3.12",
-    "@angular/animations": "^8.2.11",
-    "@angular/cdk": "^8.2.3",
-    "@angular/common": "^8.2.11",
-    "@angular/compiler": "^8.2.11",
-    "@angular/core": "^8.2.11",
-    "@angular/forms": "^8.2.11",
+    "@angular-devkit/core": "^9.0.6",
+    "@angular/animations": "^9.0.6",
+    "@angular/cdk": "^9.1.2",
+    "@angular/common": "^9.0.6",
+    "@angular/compiler": "^9.0.6",
+    "@angular/core": "^9.0.6",
+    "@angular/forms": "^9.0.6",
     "@angular/http": "^7.2.15",
-    "@angular/material": "^8.2.3",
-    "@angular/platform-browser": "^8.2.11",
-    "@angular/platform-browser-dynamic": "^8.2.11",
-    "@angular/router": "^8.2.11",
+    "@angular/localize": "^9.0.6",
+    "@angular/material": "^9.1.2",
+    "@angular/platform-browser": "^9.0.6",
+    "@angular/platform-browser-dynamic": "^9.0.6",
+    "@angular/router": "^9.0.6",
+    "@locl/core": "0.0.1-beta.2",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
+    "filesize": "^6.1.0",
     "ng-lazyload-image": "^7.0.1",
     "ng4-configure": "^0.1.7",
     "ngx-content-loading": "^0.1.3",
+    "ngx-videogular": "^9.0.1",
     "rxjs": "^6.5.3",
     "rxjs-compat": "^6.0.0-rc.0",
     "tslib": "^1.10.0",
-    "videogular2": "^7.0.1",
+    "typescript": "~3.7.5",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.24",
-    "@angular/cli": "^8.3.12",
-    "@angular/compiler-cli": "^8.2.11",
-    "@angular/language-service": "^8.2.11",
+    "@angular-devkit/build-angular": "~0.900.6",
+    "@angular/cli": "^9.0.6",
+    "@angular/compiler-cli": "^9.0.6",
+    "@angular/language-service": "^9.0.6",
+    "@locl/cli": "0.0.1-beta.6",
     "@types/core-js": "^2.5.2",
     "@types/file-saver": "^2.0.1",
     "@types/jasmine": "2.5.45",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^5.0.1",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
     "electron": "^8.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
@@ -58,7 +67,6 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~3.5.3"
+    "tslint": "~5.3.2"
   }
 }

src/app/app-routing.module.ts

@@ -2,9 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
+import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
+import { SubscriptionComponent } from './subscription/subscription/subscription.component';
 const routes: Routes = [
   { path: 'home', component: MainComponent },
   { path: 'player', component: PlayerComponent},
+  { path: 'subscriptions', component: SubscriptionsComponent },
+  { path: 'subscription', component: SubscriptionComponent },
   { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
 

src/app/app.component.css

@@ -10,4 +10,10 @@
     flex-direction: column;
     flex-basis: 100%;
     flex: 1;
+}
+
+.theme-slide-toggle {
+    top: 2px;
+    left: 10px;
+    position: relative;
 }

src/app/app.component.html

@@ -1,17 +1,46 @@
-<div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; min-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 [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
+    <div>
+        <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 #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player' && allowSubscriptions" 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;">
+                    <div>{{topBarTitle}}</div>
+                </div>
+                <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)="themeMenuItemClicked($event)" *ngIf="allowThemeChange" mat-menu-item>
+                          <mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon>
+                          <span i18n="Dark mode toggle label">Dark</span>
+                          <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>
+                          <span i18n="Settings menu label">Settings</span>
+                        </button>
+                        <button (click)="openAboutDialog()" mat-menu-item>
+                            <mat-icon>info</mat-icon>
+                            <span i18n="About menu label">About</span>
+                        </button>
+                    </mat-menu>
+                </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; 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>
-    </mat-toolbar>
-
-    <router-outlet></router-outlet>
+        </mat-toolbar>
+    </div>
+    <div style="height: calc(100% - 64px)">
+        <mat-sidenav-container style="height: 100%">
+            <mat-sidenav #sidenav>
+                <mat-nav-list>
+                    <a mat-list-item (click)="sidenav.close()" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
+                    <a mat-list-item (click)="sidenav.close()" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
+                </mat-nav-list>
+            </mat-sidenav>
+            <mat-sidenav-content [style.background]="postsService.theme ? postsService.theme.background_color : null">
+                <router-outlet></router-outlet>
+            </mat-sidenav-content>
+        </mat-sidenav-container>
+    </div>
 </div>

src/app/app.component.ts

@@ -4,7 +4,9 @@ import {FileCardComponent} from './file-card/file-card.component';
 import { Observable } from 'rxjs/Observable';
 import {FormControl, Validators} from '@angular/forms';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSnackBar} from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSidenav } from '@angular/material/sidenav';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { saveAs } from 'file-saver';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/mapTo';
@@ -15,9 +17,12 @@ import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/switch'
 import { YoutubeSearchService, Result } from './youtube-search.service';
-import { Router } 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';
+import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
+import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
 
 @Component({
   selector: 'app-root',
@@ -33,18 +38,52 @@ export class AppComponent implements OnInit {
   topBarTitle = 'Youtube Downloader';
   defaultTheme = null;
   allowThemeChange = null;
+  allowSubscriptions = false;
+  // defaults to true to prevent attack
+  settingsPinRequired = true;
 
-  @ViewChild('urlinput', { read: ElementRef, static: false }) urlInput: ElementRef;
+  @ViewChild('sidenav') sidenav: MatSidenav;
+  @ViewChild('hamburgerMenu', { read: ElementRef }) hamburgerMenuButton: ElementRef;
+  navigator: string = null;
 
-  constructor(public postsService: PostsService, public snackBar: MatSnackBar,
+  constructor(public postsService: PostsService, public snackBar: MatSnackBar, private dialog: MatDialog,
     public router: Router, public overlayContainer: OverlayContainer, private elementRef: ElementRef) {
 
+    this.navigator = localStorage.getItem('player_navigator');
+    // 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();
+      }
+    }
+    });
+
+    this.loadConfig();
+    this.postsService.settings_changed.subscribe(changed => {
+      if (changed) {
+        this.loadConfig();
+      }
+    });
+
+  }
+
+  toggleSidenav() {
+    this.sidenav.toggle();
+  }
+
+  loadConfig() {
     // loading config
-    this.postsService.loadNavItems().subscribe(result => { // loads settings
+    this.postsService.loadNavItems().subscribe(res => { // loads settings
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
       this.topBarTitle = result['YoutubeDLMaterial']['Extra']['title_top'];
+      this.settingsPinRequired = result['YoutubeDLMaterial']['Extra']['settings_pin_required'];
       const themingExists = result['YoutubeDLMaterial']['Themes'];
       this.defaultTheme = themingExists ? result['YoutubeDLMaterial']['Themes']['default_theme'] : 'default';
       this.allowThemeChange = themingExists ? result['YoutubeDLMaterial']['Themes']['allow_theme_change'] : true;
+      this.allowSubscriptions = result['YoutubeDLMaterial']['Subscriptions']['allow_subscriptions'];
 
       // sets theme to config default if it doesn't exist
       if (!localStorage.getItem('theme')) {
@@ -53,7 +92,6 @@ export class AppComponent implements OnInit {
     }, error => {
       console.log(error);
     });
-
   }
 
   // theme stuff
@@ -104,6 +142,11 @@ onSetTheme(theme, old_theme) {
     }
   }
 
+  themeMenuItemClicked(event) {
+    this.flipTheme();
+    event.stopPropagation();
+  }
+
   ngOnInit() {
     if (localStorage.getItem('theme')) {
       this.setTheme(localStorage.getItem('theme'));
@@ -114,7 +157,44 @@ onSetTheme(theme, old_theme) {
 
 
   goBack() {
-    this.router.navigate(['/home']);
+    if (!this.navigator) {
+      this.router.navigate(['/home']);
+    } else {
+      this.router.navigateByUrl(this.navigator);
+    }
   }
+
+  openSettingsDialog() {
+    if (this.settingsPinRequired) {
+      this.openPinDialog();
+    } else {
+      this.actuallyOpenSettingsDialog();
+    }
+  }
+
+  actuallyOpenSettingsDialog() {
+    const dialogRef = this.dialog.open(SettingsComponent, {
+      width: '80vw'
+    });
+  }
+
+  openPinDialog() {
+    const dialogRef = this.dialog.open(CheckOrSetPinDialogComponent, {
+    });
+
+    dialogRef.afterClosed().subscribe(res => {
+      if (res) {
+        this.actuallyOpenSettingsDialog();
+      }
+    });
+
+  }
+
+  openAboutDialog() {
+    const dialogRef = this.dialog.open(AboutDialogComponent, {
+      width: '80vw'
+    });
+  }
+
 }
 

src/app/app.module.ts

@@ -1,15 +1,32 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
-  MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule, MatGridListModule,
-  MatProgressBarModule, MatExpansionModule,
-  MatProgressSpinnerModule,
-  MatButtonToggleModule,
-  MatDialogModule} from '@angular/material';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { NgModule, LOCALE_ID } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
   import {DragDropModule} from '@angular/cdk/drag-drop';
   import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppComponent } from './app.component';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { HttpModule } from '@angular/http';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
@@ -18,18 +35,29 @@ import {RouterModule} from '@angular/router';
 import { AppRoutingModule } from './app-routing.module';
 import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
-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 {VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule} from 'ngx-videogular';
 import { InputDialogComponent } from './input-dialog/input-dialog.component';
 import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image';
 import { NgxContentLoadingModule } from 'ngx-content-loading';
-import { audioFilesMouseHovering, videoFilesMouseHovering } from './main/main.component';
+import { audioFilesMouseHovering, videoFilesMouseHovering, audioFilesOpened, videoFilesOpened } from './main/main.component';
 import { CreatePlaylistComponent } from './create-playlist/create-playlist.component';
+import { DownloadItemComponent } from './download-item/download-item.component';
+import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
+import { SubscribeDialogComponent } from './dialogs/subscribe-dialog/subscribe-dialog.component';
+import { SubscriptionComponent } from './subscription//subscription/subscription.component';
+import { SubscriptionFileCardComponent } from './subscription/subscription-file-card/subscription-file-card.component';
+import { SubscriptionInfoDialogComponent } from './dialogs/subscription-info-dialog/subscription-info-dialog.component';
+import { SettingsComponent } from './settings/settings.component';
+import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
+
+import es from '@angular/common/locales/es';
+import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
+import { VideoInfoDialogComponent } from './dialogs/video-info-dialog/video-info-dialog.component';
+import { ArgModifierDialogComponent, HighlightPipe } from './dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
+registerLocaleData(es, 'es');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
-  return (element.id === 'video' ? videoFilesMouseHovering : audioFilesMouseHovering);
+  return (element.id === 'video' ? videoFilesMouseHovering || videoFilesOpened : audioFilesMouseHovering || audioFilesOpened);
 }
 
 @NgModule({
@@ -39,7 +67,19 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MainComponent,
     PlayerComponent,
     InputDialogComponent,
-    CreatePlaylistComponent
+    CreatePlaylistComponent,
+    DownloadItemComponent,
+    SubscriptionsComponent,
+    SubscribeDialogComponent,
+    SubscriptionComponent,
+    SubscriptionFileCardComponent,
+    SubscriptionInfoDialogComponent,
+    SettingsComponent,
+    CheckOrSetPinDialogComponent,
+    AboutDialogComponent,
+    VideoInfoDialogComponent,
+    ArgModifierDialogComponent,
+    HighlightPipe
   ],
   imports: [
     BrowserModule,
@@ -65,7 +105,13 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatButtonToggleModule,
+    MatRippleModule,
+    MatMenuModule,
     MatDialogModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatAutocompleteModule,
+    MatTooltipModule,
     DragDropModule,
     VgCoreModule,
     VgControlsModule,
@@ -78,9 +124,19 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
   ],
   entryComponents: [
     InputDialogComponent,
-    CreatePlaylistComponent
+    CreatePlaylistComponent,
+    SubscribeDialogComponent,
+    SubscriptionInfoDialogComponent,
+    SettingsComponent,
+    CheckOrSetPinDialogComponent
+  ],
+  providers: [
+    PostsService
+  ],
+  exports: [
+    HighlightPipe
   ],
-  providers: [PostsService],
   bootstrap: [AppComponent]
 })
+
 export class AppModule { }

src/app/create-playlist/create-playlist.component.html

@@ -1,13 +1,14 @@
-<h4 mat-dialog-title>Create a playlist</h4>
+<h4 mat-dialog-title i18n="Create a playlist dialog title">Create a playlist</h4>
 <form>
     <div>
         <mat-form-field color="accent">
-            <input [(ngModel)]="name" matInput placeholder="Name" type="text" required aria-required [ngModelOptions]="{standalone: true}">
+            <input [(ngModel)]="name" matInput placeholder="Name" i18n-placeholder="Playlist name placeholder" type="text" required aria-required [ngModelOptions]="{standalone: true}">
         </mat-form-field>
     </div>
     <div>
         <mat-form-field color="accent">
-            <mat-label>{{(type === 'audio') ? 'Audio files' : 'Videos'}}</mat-label>
+            <mat-label *ngIf="type === 'audio'"><ng-container i18n="Audio files title">Audio files</ng-container></mat-label>
+            <mat-label *ngIf="type === 'video'"><ng-container i18n="Videos title">Videos</ng-container></mat-label>
             <mat-select [formControl]="filesSelect" multiple required aria-required>
             <mat-option *ngFor="let file of filesToSelectFrom" [value]="file.id">{{file.id}}</mat-option>
             </mat-select>

src/app/create-playlist/create-playlist.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormControl } from '@angular/forms';
 import { PostsService } from 'app/posts.services';
 

src/app/dialogs/about-dialog/about-dialog.component.html

@@ -0,0 +1,23 @@
+<h4 mat-dialog-title i18n="About dialog title">About YoutubeDL-Material</h4>
+
+<mat-dialog-content>
+    <div style="margin-bottom: 5px;">
+        <p>
+            <i>YoutubeDL-Material</i>&nbsp;<ng-container i18n="About first paragraph">is an open-source YouTube downloader built under Google's Material Design specifications. You can seamlessly download your favorite videos as video or audio files, and even subscribe to your favorite channels and playlists to keep updated with their new videos.</ng-container>
+        </p>
+        <p>
+            <i>YoutubeDL-Material</i>&nbsp;<ng-container i18n="About second paragraph">has some awesome features included! An extensive API, Docker support, and localization (translation) support. Read up on all the supported features by clicking on the GitHub icon below.</ng-container>
+        </p>
+        <p>
+            <ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container>
+        </p>
+        <a [href]="projectLink" target="_blank">
+            <img style="width: 32px; margin-bottom: 10px;" src="assets/images/GitHub-64px.png">
+        </a>
+        <p><ng-container i18n="Version label">Installed version:</ng-container>&nbsp;{{version}} - <a [href]="latestUpdateLink" target="_blank"><ng-container i18n="View latest update">View latest update</ng-container></a></p>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>

src/app/dialogs/about-dialog/about-dialog.component.scss

@@ -0,0 +1,3 @@
+i {
+    margin-right: 1px;
+}

src/app/dialogs/about-dialog/about-dialog.component.spec.ts

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

src/app/dialogs/about-dialog/about-dialog.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about-dialog',
+  templateUrl: './about-dialog.component.html',
+  styleUrls: ['./about-dialog.component.scss']
+})
+export class AboutDialogComponent implements OnInit {
+
+  projectLink = 'https://github.com/Tzahi12345/YoutubeDL-Material';
+  issuesLink = 'https://github.com/Tzahi12345/YoutubeDL-Material/issues';
+  latestUpdateLink = 'https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest'
+
+  version = 'v3.5';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html

@@ -0,0 +1,68 @@
+<h4 i18n="Modify args title" mat-dialog-title>Modify youtube-dl args</h4>
+
+<mat-dialog-content>
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <mat-card class="mat-elevation-z6">
+                    <h6 i18n="Simulated args title">Simulated new args</h6>
+                    <mat-form-field style="width: 100%" color="accent">
+                        <textarea [disabled]="true" matInput>{{modified_args}}</textarea>
+                    </mat-form-field>
+                </mat-card>
+            </div>
+            <div class="col-12">
+                <mat-card class="mat-elevation-z6 my-2">
+                    <h6 i18n="Add arg card title">Add an arg</h6>
+                    <form >
+                        <div>
+                            <mat-form-field style="width: 75%" color="accent">
+                                <input matInput placeholder="Arg" [matAutocomplete]="auto" [formControl]="stateCtrl">
+                            </mat-form-field>
+                            <mat-autocomplete #auto="matAutocomplete">
+                                <mat-option *ngFor="let arg of filteredOptions | async" [value]="arg.key">
+                                    <span [innerHTML]="arg.key | highlight : stateCtrl.value"></span>
+                                    <button style="float: right" [matTooltip]="arg.description" mat-icon-button><mat-icon>info</mat-icon></button>
+                                </mat-option>
+                            </mat-autocomplete>
+
+                            <div>
+                                <mat-menu #argsByCategoryMenu="matMenu">
+                                    <ng-container *ngFor="let argsInCategory of argsByCategory | keyvalue">
+                                        <button mat-menu-item [matMenuTriggerFor]="subMenu">{{argsInfo[argsInCategory.key].label}}</button>
+                                        <mat-menu #subMenu="matMenu">
+                                            <button mat-menu-item *ngFor="let arg of argsInCategory.value" (click)="setFirstArg(arg.key)"><div style="display: inline-block;">{{arg.key}}</div>&nbsp;&nbsp;<div class="info-menu-icon"><mat-icon [matTooltip]="arg.description">info</mat-icon></div></button>
+                                        </mat-menu>
+                                    </ng-container>
+                                    
+                                </mat-menu>
+                                  
+                                
+                                  
+                                <button style="margin-bottom: 15px" mat-stroked-button [matMenuTriggerFor]="argsByCategoryMenu"><ng-container i18n="Search args by category button">Search by category</ng-container></button>
+                            </div>
+                        </div>
+                        <div>
+                            <mat-checkbox color="accent" [ngModelOptions]="{standalone: true}" [(ngModel)]="secondArgEnabled"><ng-container i18n="Use arg value checkbox">Use arg value</ng-container></mat-checkbox>
+                        </div>
+                        <div *ngIf="secondArgEnabled">
+                            <mat-form-field style="width: 75%" color="accent">
+                                <input [ngModelOptions]="{standalone: true}" matInput [disabled]="!secondArgEnabled" placeholder="Arg value" i18n-placeholder="Arg value placeholder" [(ngModel)]="secondArg">
+                            </mat-form-field>
+                        </div>
+                    </form>
+                    <div>
+                        <button (click)="addArg()" [disabled]="!canAddArg()" mat-stroked-button color="accent"><ng-container i18n="Search args by category button">Add arg</ng-container></button>
+                    </div>
+                </mat-card>
+            </div>
+        </div>
+    </div>
+    
+
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close><ng-container i18n="Arg modifier cancel button">Cancel</ng-container></button>
+    <button mat-button color="accent" [mat-dialog-close]="modified_args"><ng-container i18n="Arg modifier modify button">Modify</ng-container></button>
+</mat-dialog-actions>

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.scss

@@ -0,0 +1,3 @@
+.info-menu-icon {
+    float: right;
+}

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.spec.ts

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

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts

@@ -0,0 +1,117 @@
+import { Component, OnInit, Inject, Pipe, PipeTransform, NgModule } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { FormControl } from '@angular/forms';
+import { args, args_info } from './youtubedl_args';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators/map';
+import { startWith } from 'rxjs/operators/startWith';
+
+@Pipe({ name: 'highlight' })
+export class HighlightPipe implements PipeTransform {
+  transform(text: string, search): string {
+    const pattern = search ? search
+      .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')
+      .split(' ')
+      .filter(t => t.length > 0)
+      .join('|') : undefined;
+    const regex = new RegExp(pattern, 'gi');
+
+    return search ? text.replace(regex, match => `<b>${match}</b>`) : text;
+  }
+};
+
+@Component({
+  selector: 'app-arg-modifier-dialog',
+  templateUrl: './arg-modifier-dialog.component.html',
+  providers: [HighlightPipe],
+  styleUrls: ['./arg-modifier-dialog.component.scss'],
+})
+export class ArgModifierDialogComponent implements OnInit {
+  myGroup = new FormControl();
+  firstArg = '';
+  secondArg = '';
+  secondArgEnabled = false;
+  modified_args = '';
+  stateCtrl = new FormControl();
+  availableArgs = null;
+  argsByCategory = null;
+  argsInfo = null;
+  filteredOptions: Observable<any>;
+
+  static forRoot() {
+    return {
+        ngModule: ArgModifierDialogComponent,
+        providers: [],
+    };
+ }
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<ArgModifierDialogComponent>,
+    private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    if (this.data) {
+      this.modified_args = this.data.initial_args;
+    }
+
+    this.getAllPossibleArgs();
+
+    // autocomplete setup
+    this.filteredOptions = this.stateCtrl.valueChanges
+      .pipe(
+        startWith(''),
+        map(val => this.filter(val))
+      );
+  }
+
+  // autocomplete filter
+  filter(val) {
+    if (this.availableArgs) {
+      return this.availableArgs.filter(option =>
+      option.key.toLowerCase().includes(val.toLowerCase()));
+   }
+  }
+
+  addArg() {
+    // adds space
+    if (this.modified_args !== '') {
+      this.modified_args += ' ';
+    }
+
+    this.modified_args += this.stateCtrl.value + ' ' + (this.secondArgEnabled ? this.secondArg : '');
+  }
+
+  canAddArg() {
+    return this.stateCtrl.value && this.stateCtrl.value !== '' && (!this.secondArgEnabled || (this.secondArg && this.secondArg !== ''));
+  }
+
+  getFirstArg() {
+    return new Promise(resolve => {
+      resolve(this.stateCtrl.value);
+    });
+  }
+
+  getValueAsync(val) {
+    return new Promise(resolve => {
+      resolve(val);
+    });
+  }
+
+  getAllPossibleArgs() {
+    const all_args = args;
+    const arg_arrays = Object.keys(all_args).map(function(key) {
+      return all_args[key];
+    });
+
+    // converts array of arrays to one array
+    const singular_arg_array = [].concat.apply([], arg_arrays);
+
+    this.availableArgs = singular_arg_array;
+    this.argsByCategory = all_args;
+    this.argsInfo = args_info;
+  }
+
+  setFirstArg(arg_key) {
+    this.stateCtrl.setValue(arg_key);
+  }
+
+}

src/app/dialogs/arg-modifier-dialog/youtubedl_args.ts

@@ -0,0 +1,230 @@
+const uncategorized = [
+    {'key': '-h', 'alt': '--help', 'description': 'Print this help text and exit'},
+    {'key': '--version', 'description': 'Print program version and exit'},
+    {'key': '-U', 'alt': '--update', 'description': 'Update this program to latest version. Make sure that you have sufficient permissions (run with sudo if needed)'},
+    {'key': '-i', 'alt': '--ignore-errors', 'description': 'Continue on download errors, for example to skip unavailable videos in a playlist'},
+    {'key': '--abort-on-error', 'description': 'Abort downloading of further videos (in the playlist or the command line) if an error occurs'},
+    {'key': '--dump-user-agent', 'description': 'Display the current browser identification'},
+    {'key': '--list-extractors', 'description': 'List all supported extractors'},
+    {'key': '--extractor-descriptions', 'description': 'Output descriptions of all supported extractors'},
+    {'key': '--force-generic-extractor', 'description': 'Force extraction to use the generic extractor'},
+    {'key': '--default-search', 'description': 'Use this prefix for unqualified URLs. For example "gvsearch2:" downloads two videos from google videos for youtube-dl "large apple". Use the value "auto" to let youtube-dl guess ("auto_warning" to emit awarning when guessing). "error" just throws an error. The default value "fixup_error" repairs broken URLs, but emits an error if this is not possible instead of searching.'},
+    {'key': '--ignore-config', 'description': 'Do not read configuration files. When given in the global configuration file /etc/youtube-dl.conf: Do not read the user configuration in ~/.config/youtube-dl/config (%APPDATA%/youtube-dl/config.txt on Windows)'},
+    {'key': '--config-location', 'description': 'Location of the configuration file; either the path to the config or its containing directory.'},
+    {'key': '--flat-playlist', 'description': 'Do not extract the videos of a playlist, only list them.'},
+    {'key': '--mark-watched', 'description': 'Mark videos watched (YouTube only)'},
+    {'key': '--no-mark-watched', 'description': 'Do not mark videos watched (YouTube only)'},
+    {'key': '--no-color', 'description': 'Do not emit color codes in output'}
+];
+
+const network = [
+    {'key': '--proxy', 'description': 'Use the specified HTTP/HTTPS/SOCKS proxy.To enable SOCKS proxy, specify a proper scheme. For example socks5://127.0.0.1:1080/. Pass in an empty string (--proxy "") for direct connection.'},
+    {'key': '--socket-timeout', 'description': 'Time to wait before giving up, in seconds'},
+    {'key': '--source-address', 'description': 'Client-side IP address to bind to'},
+    {'key': '-4', 'alt': '--force-ipv4', 'description': 'Make all connections via IPv4'},
+    {'key': '-6', 'alt': '--force-ipv6', 'description': 'Make all connections via IPv6'}
+];
+
+const geo_restriction = [
+    {'key': '--geo-verification-proxy', 'description': 'Use this proxy to verify the IP address for some geo-restricted sites. The default proxy specified by --proxy\', if the option is not present) is used for the actual downloading.'},
+    {'key': '--geo-bypass', 'description': 'Bypass geographic restriction via faking X-Forwarded-For HTTP header'},
+    {'key': '--no-geo-bypass', 'description': 'Do not bypass geographic restriction via faking X-Forwarded-For HTTP header'},
+    {'key': '--geo-bypass-country', 'description': 'Force bypass geographic restriction with explicitly provided two-letter ISO 3166-2 country code'},
+    {'key': '--geo-bypass-ip-block', 'description': 'Force bypass geographic restriction with explicitly provided IP block in CIDR notation'}
+];
+
+const video_selection = [
+    {'key': '--playlist-start', 'description': 'Playlist video to start at (default is 1)'},
+    {'key': '--playlist-end', 'description': 'Playlist video to end at (default is last)'},
+    {'key': '--playlist-items', 'description': 'Playlist video items to download. Specify indices of the videos in the playlist separated by commas like: "--playlist-items 1,2,5,8" if you want to download videos indexed 1, 2, 5, 8 in the playlist. You can specify range: "--playlist-items 1-3,7,10-13", it will download the videos at index 1, 2, 3, 7, 10, 11, 12 and 13.'},
+    {'key': '--match-title', 'description': 'Download only matching titles (regex orcaseless sub-string)'},
+    {'key': '--reject-title', 'description': 'Skip download for matching titles (regex orcaseless sub-string)'},
+    {'key': '--max-downloads', 'description': 'Abort after downloading NUMBER files'},
+    {'key': '--min-filesize', 'description': 'Do not download any videos smaller than SIZE (e.g. 50k or 44.6m)'},
+    {'key': '--max-filesize', 'description': 'Do not download any videos larger than SIZE (e.g. 50k or 44.6m)'},
+    {'key': '--date', 'description': 'Download only videos uploaded in this date'},
+    {'key': '--datebefore', 'description': 'Download only videos uploaded on or before this date (i.e. inclusive)'},
+    {'key': '--dateafter', 'description': 'Download only videos uploaded on or after this date (i.e. inclusive)'},
+    {'key': '--min-views', 'description': 'Do not download any videos with less than COUNT views'},
+    {'key': '--max-views', 'description': 'Do not download any videos with more than COUNT views'},
+    {'key': '--match-filter', 'description': 'Generic video filter. Specify any key (seethe "OUTPUT TEMPLATE" for a list of available keys) to match if the key is present, !key to check if the key is not present, key > NUMBER (like "comment_count > 12", also works with >=, <, <=, !=, =) to compare against a number, key = \'LITERAL\' (like "uploader = \'Mike Smith\'", also works with !=) to match against a string literal and & to require multiple matches. Values which are not known are excluded unless you put a question mark (?) after the operator. For example, to only match videos that have been liked more than 100 times and disliked less than 50 times (or the dislike functionality is not available at the given service), but who also have a description, use --match-filter'},
+    {'key': '--no-playlist', 'description': 'Download only the video, if the URL refers to a video and a playlist.'},
+    {'key': '--yes-playlist', 'description': 'Download the playlist, if the URL refers to a video and a playlist.'},
+    {'key': '--age-limit', 'description': 'Download only videos suitable for the given age'},
+    {'key': '--download-archive', 'description': 'Download only videos not listed in the archive file. Record the IDs of all downloaded videos in it.'},
+    {'key': '--include-ads', 'description': 'Download advertisements as well (experimental)'}
+];
+
+const download = [
+    {'key': '-r', 'alt': '--limit-rate', 'description': 'Maximum download rate in bytes per second(e.g. 50K or 4.2M)'},
+    {'key': '-R', 'alt': '--retries', 'description': 'Number of retries (default is 10), or "infinite".'},
+    {'key': '--fragment-retries', 'description': 'Number of retries for a fragment (default is 10), or "infinite" (DASH, hlsnative and ISM)'},
+    {'key': '--skip-unavailable-fragments', 'description': 'Skip unavailable fragments (DASH, hlsnative and ISM)'},
+    {'key': '--abort-on-unavailable-fragment', 'description': 'Abort downloading when some fragment is not available'},
+    {'key': '--keep-fragments', 'description': 'Keep downloaded fragments on disk after downloading is finished; fragments are erased by default'},
+    {'key': '--buffer-size', 'description': 'Size of download buffer (e.g. 1024 or 16K) (default is 1024)'},
+    {'key': '--no-resize-buffer', 'description': 'Do not automatically adjust the buffer size. By default, the buffer size is automatically resized from an initial value of SIZE.'},
+    {'key': '--http-chunk-size', 'description': 'Size of a chunk for chunk-based HTTP downloading (e.g. 10485760 or 10M) (default is disabled). May be useful for bypassing bandwidth throttling imposed by a webserver (experimental)'},
+    {'key': '--playlist-reverse', 'description': 'Download playlist videos in reverse order'},
+    {'key': '--playlist-random', 'description': 'Download playlist videos in random order'},
+    {'key': '--xattr-set-filesize', 'description': 'Set file xattribute ytdl.filesize with expected file size'},
+    {'key': '--hls-prefer-native', 'description': 'Use the native HLS downloader instead of ffmpeg'},
+    {'key': '--hls-prefer-ffmpeg', 'description': 'Use ffmpeg instead of the native HLS downloader'},
+    {'key': '--hls-use-mpegts', 'description': 'Use the mpegts container for HLS videos, allowing to play the video while downloading (some players may not be able to play it)'},
+    {'key': '--external-downloader', 'description': 'Use the specified external downloader. Currently supports aria2c,avconv,axel,curl,ffmpeg,httpie,wget'},
+    {'key': '--external-downloader-args'}
+];
+
+const filesystem = [
+    {'key': '-a', 'alt': '--batch-file', 'description': 'File containing URLs to download (\'-\' for stdin), one URL per line. Lines starting with \'#\', \';\' or \']\' are considered as comments and ignored.'},
+    {'key': '--id', 'description': 'Use only video ID in file name'},
+    {'key': '-o', 'alt': '--output', 'description': 'Output filename template, see the "OUTPUT TEMPLATE" for all the info'},
+    {'key': '--autonumber-start', 'description': 'Specify the start value for %(autonumber)s (default is 1)'},
+    {'key': '--restrict-filenames', 'description': 'Restrict filenames to only ASCII characters, and avoid "&" and spaces in filenames'},
+    {'key': '-w', 'alt': '--no-overwrites', 'description': 'Do not overwrite files'},
+    {'key': '-c', 'alt': '--continue', 'description': 'Force resume of partially downloaded files. By default, youtube-dl will resume downloads if possible.'},
+    {'key': '--no-continue', 'description': 'Do not resume partially downloaded files (restart from beginning)'},
+    {'key': '--no-part', 'description': 'Do not use .part files - write directlyinto output file'},
+    {'key': '--no-mtime', 'description': 'Do not use the Last-modified header to set the file modification time'},
+    {'key': '--write-description', 'description': 'Write video description to a .description file'},
+    {'key': '--write-info-json', 'description': 'Write video metadata to a .info.json file'},
+    {'key': '--write-annotations', 'description': 'Write video annotations to a.annotations.xml file'},
+    {'key': '--load-info-json', 'description': 'JSON file containing the video information (created with the "--write-info-json" option)'},
+    {'key': '--cookies', 'description': 'File to read cookies from and dump cookie jar in'},
+    {'key': '--cache-dir', 'description': 'Location in the file system where youtube-dl can store some downloaded information permanently. By default $XDG_CACHE_HOME/youtube-dl or ~/.cache/youtube-dl . At the moment, only YouTube player files (for videos with obfuscated signatures) are cached, but that may change.'},
+    {'key': '--no-cache-dir', 'description': 'Disable filesystem caching'},
+    {'key': '--rm-cache-dir', 'description': 'Delete all filesystem cache files'}
+];
+
+const thumbnail = [
+    {'key': '--write-thumbnail', 'description': 'Write thumbnail image to disk'},
+    {'key': '--write-all-thumbnails', 'description': 'Write all thumbnail image formats to disk'},
+    {'key': '--list-thumbnails', 'description': 'Simulate and list all available thumbnail formats'}
+];
+
+const verbosity = [
+    {'key': '-q', 'alt': '--quiet', 'description': 'Activate quiet mode'},
+    {'key': '--no-warnings', 'description': 'Ignore warnings'},
+    {'key': '-s', 'alt': '--simulate', 'description': 'Do not download the video and do not writeanything to disk'},
+    {'key': '--skip-download', 'description': 'Do not download the video'},
+    {'key': '-g', 'alt': '--get-url', 'description': 'Simulate, quiet but print URL'},
+    {'key': '-e', 'alt': '--get-title', 'description': 'Simulate, quiet but print title'},
+    {'key': '--get-id', 'description': 'Simulate, quiet but print id'},
+    {'key': '--get-thumbnail', 'description': 'Simulate, quiet but print thumbnail URL'},
+    {'key': '--get-description', 'description': 'Simulate, quiet but print video description'},
+    {'key': '--get-duration', 'description': 'Simulate, quiet but print video length'},
+    {'key': '--get-filename', 'description': 'Simulate, quiet but print output filename'},
+    {'key': '--get-format', 'description': 'Simulate, quiet but print output format'},
+    {'key': '-j', 'alt': '--dump-json', 'description': 'Simulate, quiet but print JSON information. See the "OUTPUT TEMPLATE" for a description of available keys.'},
+    {'key': '-J', 'alt': '--dump-single-json', 'description': 'Simulate, quiet but print JSON information for each command-line argument. If the URL refers to a playlist, dump the whole playlist information in a single line.'},
+    {'key': '--print-json', 'description': 'Be quiet and print the video information as JSON (video is still being downloaded).'},
+    {'key': '--newline', 'description': 'Output progress bar as new lines'},
+    {'key': '--no-progress', 'description': 'Do not print progress bar'},
+    {'key': '--console-title', 'description': 'Display progress in console title bar'},
+    {'key': '-v', 'alt': '--verbose', 'description': 'Print various debugging information'},
+    {'key': '--dump-pages', 'description': 'Print downloaded pages encoded using base64 to debug problems (very verbose)'},
+    {'key': '--write-pages', 'description': 'Write downloaded intermediary pages to files in the current directory to debug problems'},
+    {'key': '--print-traffic', 'description': 'Display sent and read HTTP traffic'},
+    {'key': '-C', 'alt': '--call-home', 'description': 'Contact the youtube-dl server for debugging'},
+    {'key': '--no-call-home', 'description': 'Do NOT contact the youtube-dl server for debugging'}
+];
+
+const workarounds = [
+    {'key': '--encoding', 'description': 'Force the specified encoding (experimental)'},
+    {'key': '--no-check-certificate', 'description': 'Suppress HTTPS certificate validation'},
+    {'key': '--prefer-insecure', 'description': 'Use an unencrypted connection to retrieve information about the video. (Currently supported only for YouTube)'},
+    {'key': '--user-agent', 'description': 'Specify a custom user agent'},
+    {'key': '--referer', 'description': 'Specify a custom referer, use if the video access is restricted to one domain'},
+    {'key': '--add-header', 'description': 'Specify a custom HTTP header and its value, separated by a colon \':\'. You can use this option multiple times'},
+    {'key': '--bidi-workaround', 'description': 'Work around terminals that lack bidirectional text support. Requires bidiv or fribidi executable in PATH'},
+    {'key': '--sleep-interval', 'description': 'Number of seconds to sleep before each download when used alone or a lower boundof a range for randomized sleep before each download (minimum possible number of seconds to sleep) when used along with --max-sleep-interval'},
+    {'key': '--max-sleep-interval', 'description': 'Upper bound of a range for randomized sleep before each download (maximum possible number of seconds to sleep). Must only beused along with --min-sleep-interval'}
+]
+
+const video_format = [
+    {'key': '-f', 'alt': '--format', 'description': 'Video format code, see the "FORMAT SELECTION" for all the info'},
+    {'key': '--all-formats', 'description': 'Download all available video formats'},
+    {'key': '--prefer-free-formats', 'description': 'Prefer free video formats unless a specific one is requested'},
+    {'key': '-F', 'alt': '--list-formats', 'description': 'List all available formats of requested videos'},
+    {'key': '--youtube-skip-dash-manifest', 'description': 'Do not download the DASH manifests and related data on YouTube videos'},
+    {'key': '--merge-output-format', 'description': 'If a merge is required (e.g. bestvideo+bestaudio), output to given container format. One of mkv, mp4, ogg, webm, flv. Ignored if no merge is required'}
+];
+
+const subtitle = [
+    {'key': '--write-sub', 'description': 'Write subtitle file'},
+    {'key': '--write-auto-sub', 'description': 'Write automatically generated subtitle file (YouTube only)'},
+    {'key': '--all-subs', 'description': 'Download all the available subtitles of the video'},
+    {'key': '--list-subs', 'description': 'List all available subtitles for the video'},
+    {'key': '--sub-format', 'description': 'Subtitle format, accepts formats preference, for example: "srt" or "ass/srt/best"'},
+    {'key': '--sub-lang', 'description': 'Languages of the subtitles to download (optional) separated by commas, use --list-subs'}
+];
+
+const authentication = [
+    {'key': '-u', 'alt': '--username', 'description': 'Login with this account ID'},
+    {'key': '-p', 'alt': '--password', 'description': 'Account password. If this option is left out, youtube-dl will ask interactively.'},
+    {'key': '-2', 'alt': '--twofactor', 'description': 'Two-factor authentication code'},
+    {'key': '-n', 'alt': '--netrc', 'description': 'Use .netrc authentication data'},
+    {'key': '--video-password', 'description': 'Video password (vimeo, smotri, youku)'}
+];
+
+const adobe_pass = [
+    {'key': '--ap-mso', 'description': 'Adobe Pass multiple-system operator (TV provider) identifier, use --ap-list-mso'},
+    {'key': '--ap-username', 'description': 'Multiple-system operator account login'},
+    {'key': '--ap-password', 'description': 'Multiple-system operator account password. If this option is left out, youtube-dl will ask interactively.'},
+    {'key': '--ap-list-mso', 'description': 'List all supported multiple-system operators'}
+];
+
+const post_processing = [
+    {'key': '-x', 'alt': '--extract-audio', 'description': 'Convert video files to audio-only files (requires ffmpeg or avconv and ffprobe or avprobe)'},
+    {'key': '--audio-format', 'description': 'Specify audio format: "best", "aac", "flac", "mp3", "m4a", "opus", "vorbis", or "wav"; "best" by default; No effect without -x'},
+    {'key': '--audio-quality', 'description': 'Specify ffmpeg/avconv audio quality, insert a value between 0 (better) and 9 (worse)for VBR or a specific bitrate like 128K (default 5)'},
+    {'key': '--recode-video', 'description': 'Encode the video to another format if necessary (currently supported:mp4|flv|ogg|webm|mkv|avi)'},
+    {'key': '--postprocessor-args', 'description': 'Give these arguments to the postprocessor'},
+    {'key': '-k', 'alt': '--keep-video', 'description': 'Keep the video file on disk after the post-processing; the video is erased by default'},
+    {'key': '--no-post-overwrites', 'description': 'Do not overwrite post-processed files; the post-processed files are overwritten by default'},
+    {'key': '--embed-subs', 'description': 'Embed subtitles in the video (only for mp4,webm and mkv videos)'},
+    {'key': '--embed-thumbnail', 'description': 'Embed thumbnail in the audio as cover art'},
+    {'key': '--add-metadata', 'description': 'Write metadata to the video file'},
+    {'key': '--metadata-from-title', 'description': 'Parse additional metadata like song title/artist from the video title. The format syntax is the same as --output'},
+    {'key': '--xattrs', 'description': 'Write metadata to the video file\'s xattrs (using dublin core and xdg standards)'},
+    {'key': '--fixup', 'description': 'Automatically correct known faults of the file. One of never (do nothing), warn (only emit a warning), detect_or_warn (the default; fix file if we can, warn otherwise)'},
+    {'key': '--prefer-avconv', 'description': 'Prefer avconv over ffmpeg for running the postprocessors'},
+    {'key': '--prefer-ffmpeg', 'description': 'Prefer ffmpeg over avconv for running the postprocessors (default)'},
+    {'key': '--ffmpeg-location', 'description': 'Location of the ffmpeg/avconv binary; either the path to the binary or its containing directory.'},
+    {'key': '--exec', 'description': 'Execute a command on the file after downloading, similar to find\'s -exec syntax. Example: --exec'},
+    {'key': '--convert-subs', 'description': 'Convert the subtitles to other format (currently supported: srt|ass|vtt|lrc)'}
+];
+
+export const args_info = {
+    'uncategorized'  : {'label': 'Main'},
+    'network'        : {'label': 'Network'},
+    'geo_restriction': {'label': 'Geo Restriction'},
+    'video_selection': {'label': 'Video Selection'},
+    'download'       : {'label': 'Download'},
+    'filesystem'     : {'label': 'Filesystem'},
+    'thumbnail'      : {'label': 'Thumbnail'},
+    'verbosity'      : {'label': 'Verbosity'},
+    'workarounds'    : {'label': 'Workarounds'},
+    'video_format'   : {'label': 'Video Format'},
+    'subtitle'       : {'label': 'Subtitle'},
+    'authentication' : {'label': 'Authentication'},
+    'adobe_pass'     : {'label': 'Adobe Pass'},
+    'post_processing': {'label': 'Post Processing'},
+};
+
+export const args = {
+    'uncategorized'  : uncategorized,
+    'network'        : network,
+    'geo_restriction': geo_restriction,
+    'video_selection': video_selection,
+    'download'       : download,
+    'filesystem'     : filesystem,
+    'thumbnail'      : thumbnail,
+    'verbosity'      : verbosity,
+    'workarounds'    : workarounds,
+    'video_format'   : video_format,
+    'subtitle'       : subtitle,
+    'authentication' : authentication,
+    'adobe_pass'     : adobe_pass,
+    'post_processing': post_processing
+}

src/app/dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component.html

@@ -0,0 +1,18 @@
+<h4 *ngIf="pinSetChecked" mat-dialog-title>{{dialog_title}}</h4>
+
+<mat-dialog-content>
+    <div style="position: relative">
+        <div *ngIf="pinSetChecked">
+            <mat-form-field color="accent">
+                <input type="password" (keyup.enter)="doAction()" matInput [(ngModel)]="input" [placeholder]="input_placeholder">
+            </mat-form-field>
+        </div>
+        <div class="spinner-div" *ngIf="!pinSetChecked">
+            <mat-spinner [diameter]="25"></mat-spinner>
+        </div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button [disabled]="input.length === 0" color="accent" style="margin-bottom: 12px;" (click)="doAction()" mat-raised-button>{{button_label}}</button>
+</mat-dialog-actions>

src/app/dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component.scss

@@ -0,0 +1,6 @@
+.spinner-div {
+    position: absolute;
+    margin: 0 auto;
+    top: 30%;
+    left: 42%;
+}

src/app/dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component.spec.ts

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

src/app/dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-check-or-set-pin-dialog',
+  templateUrl: './check-or-set-pin-dialog.component.html',
+  styleUrls: ['./check-or-set-pin-dialog.component.scss']
+})
+export class CheckOrSetPinDialogComponent implements OnInit {
+
+  pinSetChecked = false;
+  pinSet = true;
+  resetMode = false;
+  dialog_title = '';
+  input_placeholder = null;
+  input = '';
+  button_label = '';
+
+  constructor(private postsService: PostsService, @Inject(MAT_DIALOG_DATA) public data: any,
+              public dialogRef: MatDialogRef<CheckOrSetPinDialogComponent>, private snackBar: MatSnackBar) { }
+
+  ngOnInit() {
+    if (this.data) {
+      this.resetMode = this.data.resetMode;
+    }
+
+    if (this.resetMode) {
+      this.pinSetChecked = true;
+      this.notSetLogic();
+    } else {
+      this.isPinSet();
+    }
+  }
+
+  isPinSet() {
+    this.postsService.isPinSet().subscribe(res => {
+      this.pinSetChecked = true;
+      if (res['is_set']) {
+        this.isSetLogic();
+      } else {
+        this.notSetLogic();
+      }
+    });
+  }
+
+  isSetLogic() {
+    this.pinSet = true;
+    this.dialog_title = 'Pin Required';
+    this.input_placeholder = 'Pin';
+    this.button_label = 'Submit'
+  }
+
+  notSetLogic() {
+    this.pinSet = false;
+    this.dialog_title = 'Set your pin';
+    this.input_placeholder = 'New pin';
+    this.button_label = 'Set Pin'
+  }
+
+  doAction() {
+    // pin set must have been checked, and input must not be empty
+    if (!this.pinSetChecked || this.input.length === 0) {
+      return;
+    }
+
+    if (this.pinSet) {
+      this.postsService.checkPin(this.input).subscribe(res => {
+        if (res['success']) {
+          this.dialogRef.close(true);
+        } else {
+          this.dialogRef.close(false);
+          this.openSnackBar('Pin is incorrect!');
+        }
+      });
+    } else {
+      this.postsService.setPin(this.input).subscribe(res => {
+        if (res['success']) {
+          this.dialogRef.close(true);
+          this.openSnackBar('Pin successfully set!');
+        } else {
+          this.dialogRef.close(false);
+          this.openSnackBar('Failed to set pin!');
+        }
+      });
+    }
+  }
+
+  public openSnackBar(message: string, action: string = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}

src/app/dialogs/subscribe-dialog/subscribe-dialog.component.html

@@ -0,0 +1,43 @@
+<h4 mat-dialog-title i18n="Subscribe dialog title">Subscribe to playlist or channel</h4>
+
+<mat-dialog-content>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input [(ngModel)]="url" matInput placeholder="URL" i18n-placeholder="Subscription URL input placeholder" required aria-required="true">
+                    <mat-hint><ng-container i18n="Subscription URL input hint">The playlist or channel URL</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input [(ngModel)]="name" matInput placeholder="Custom name" i18n-placeholder="Subscription custom name placeholder">
+                    <mat-hint><ng-container i18n="Custom name input hint">This is optional</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+            <div class="col-12 mt-3">
+                <mat-checkbox [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12" *ngIf="!download_all">
+                <ng-container i18n="Download time range prefix">Download videos uploaded in the last</ng-container>
+                <mat-form-field color="accent" style="width: 50px; text-align: center">
+                    <input type="number" matInput [(ngModel)]="timerange_amount">
+                </mat-form-field>
+                <mat-select color="accent" class="unit-select" [(ngModel)]="timerange_unit">
+                    <mat-option *ngFor="let time_unit of time_units" [value]="time_unit + (timerange_amount === 1 ? '' : 's')">
+                        {{time_unit + (timerange_amount === 1 ? '' : 's')}}
+                    </mat-option>
+                </mat-select>
+            </div>
+        </div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close><ng-container i18n="Subscribe cancel button">Cancel</ng-container></button>
+    <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
+    <button mat-button [disabled]="!url" type="submit" (click)="subscribeClicked()">Subscribe</button>
+    <div class="mat-spinner" *ngIf="subscribing">
+      <mat-spinner [diameter]="25"></mat-spinner>
+    </div>
+</mat-dialog-actions>

src/app/dialogs/subscribe-dialog/subscribe-dialog.component.scss

@@ -0,0 +1,8 @@
+.unit-select {
+    width: 75px;
+    margin-left: 20px;
+}
+
+.mat-spinner {
+    margin-left: 5%;
+}

src/app/dialogs/subscribe-dialog/subscribe-dialog.component.spec.ts

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

src/app/dialogs/subscribe-dialog/subscribe-dialog.component.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-subscribe-dialog',
+  templateUrl: './subscribe-dialog.component.html',
+  styleUrls: ['./subscribe-dialog.component.scss']
+})
+export class SubscribeDialogComponent implements OnInit {
+  // inputs
+  timerange_amount;
+  timerange_unit = 'days';
+  download_all = true;
+  url = null;
+  name = null;
+
+  // state
+  subscribing = false;
+
+  time_units = [
+    'day',
+    'week',
+    'month',
+    'year'
+  ]
+
+  constructor(private postsService: PostsService,
+              private snackBar: MatSnackBar,
+              public dialogRef: MatDialogRef<SubscribeDialogComponent>) { }
+
+  ngOnInit() {
+  }
+
+  subscribeClicked() {
+    if (this.url && this.url !== '') {
+      // timerange must be specified if download_all is false
+      if (!this.download_all && !this.timerange_amount) {
+        this.openSnackBar('You must specify an amount of time');
+        return;
+      }
+      this.subscribing = true;
+
+      let timerange = null;
+      if (!this.download_all) {
+        timerange = 'now-' + this.timerange_amount.toString() + this.timerange_unit;
+      }
+
+      this.postsService.createSubscription(this.url, this.name, timerange).subscribe(res => {
+        this.subscribing = false;
+        if (res['new_sub']) {
+          this.dialogRef.close(res['new_sub']);
+        } else {
+          if (res['error']) {
+            this.openSnackBar('ERROR: ' + res['error']);
+          }
+          this.dialogRef.close();
+        }
+      });
+    }
+  }
+
+  public openSnackBar(message: string, action = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}

src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.html

@@ -0,0 +1,27 @@
+<h4 mat-dialog-title>{{sub.name}}</h4>
+
+<mat-dialog-content>
+    <div class="info-item">
+        <strong><ng-container i18n="Subscription type property">Type:</ng-container>&nbsp;</strong>
+        <span class="info-item-value">{{(sub.isPlaylist ? 'Playlist' : 'Channel')}}</span>
+    </div>
+    <div class="info-item">
+        <strong><ng-container i18n="Subscription URL property">URL:</ng-container>&nbsp;</strong>
+        <span class="info-item-value">{{sub.url}}</span>
+    </div>
+    <div class="info-item">
+        <strong><ng-container i18n="Subscription ID property">ID:</ng-container>&nbsp;</strong>
+        <span class="info-item-value">{{sub.id}}</span>
+    </div>
+    <div class="info-item" *ngIf="sub.archive">
+        <strong><ng-container i18n="Subscription ID property">Archive:</ng-container>&nbsp;</strong>
+        <span class="info-item-value">{{sub.archive}}</span>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close><ng-container i18n="Close subscription info button">Close</ng-container></button>
+    <button mat-stroked-button (click)="downloadArchive()" color="accent"><ng-container i18n="Export Archive button">Export Archive</ng-container></button>
+    <span class="spacer"></span>
+    <button mat-button (click)="unsubscribe()" color="warn"><ng-container i18n="Unsubscribe button">Unsubscribe</ng-container></button>
+</mat-dialog-actions>

src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.scss

@@ -0,0 +1,9 @@
+.info-item {
+    margin-bottom: 12px;
+}
+
+.info-item-value {
+    font-size: 13px;
+}
+
+.spacer {flex: 1 1 auto;}

src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.spec.ts

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

src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-subscription-info-dialog',
+  templateUrl: './subscription-info-dialog.component.html',
+  styleUrls: ['./subscription-info-dialog.component.scss']
+})
+export class SubscriptionInfoDialogComponent implements OnInit {
+
+  sub = null;
+  unsubbedEmitter = null;
+
+  constructor(public dialogRef: MatDialogRef<SubscriptionInfoDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any, private postsService: PostsService) { }
+
+  ngOnInit() {
+    if (this.data) {
+      this.sub = this.data.sub;
+      this.unsubbedEmitter = this.data.unsubbedEmitter;
+    }
+  }
+
+  unsubscribe() {
+    this.postsService.unsubscribe(this.sub, true).subscribe(res => {
+      this.unsubbedEmitter.emit(true);
+      this.dialogRef.close();
+    });
+  }
+
+  downloadArchive() {
+    this.postsService.downloadArchive(this.sub).subscribe(res => {
+      const blob: Blob = res;
+      saveAs(blob, 'archive.txt');
+    });
+  }
+
+}

src/app/dialogs/video-info-dialog/video-info-dialog.component.html

@@ -0,0 +1,32 @@
+<h4 mat-dialog-title>{{file.title}}</h4>
+
+<mat-dialog-content>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Video name property">Name:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{file.title}}</div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Video URL property">URL:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value"><a target="_blank" [href]="file.url">{{file.url}}</a></div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Video ID property">Uploader:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{file.uploader ? file.uploader : 'N/A'}}</div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Video file size property">File size:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{filesize(file.size)}}</div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Video path property">Path:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{file.path}}</div>
+    </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Video upload date property">Upload Date:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value">{{file.upload_date}}</div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close><ng-container i18n="Close subscription info button">Close</ng-container></button>
+</mat-dialog-actions>

src/app/dialogs/video-info-dialog/video-info-dialog.component.scss

@@ -0,0 +1,18 @@
+.info-item {
+    margin-bottom: 12px;
+    width: 100%;
+}
+
+.info-item-value {
+    font-size: 13px;
+    display: inline-block;
+    width: 70%;
+}
+
+.spacer {flex: 1 1 auto;}
+
+.info-item-label {
+    display: inline-block;
+    width: 30%;
+    vertical-align: top;
+}

src/app/dialogs/video-info-dialog/video-info-dialog.component.spec.ts

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

src/app/dialogs/video-info-dialog/video-info-dialog.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import filesize from 'filesize';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-video-info-dialog',
+  templateUrl: './video-info-dialog.component.html',
+  styleUrls: ['./video-info-dialog.component.scss']
+})
+export class VideoInfoDialogComponent implements OnInit {
+  file: any;
+  filesize;
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  ngOnInit(): void {
+    this.filesize = filesize;
+    if (this.data) {
+      this.file = this.data.file;
+    }
+  }
+
+}

src/app/download-item/download-item.component.html

@@ -0,0 +1,16 @@
+<div>
+    <mat-grid-list [rowHeight]="50" [cols]="24">
+        <mat-grid-tile [colspan]="2">
+            <h5 style="display: inline-block; margin-right: 5px; position: relative; top: 5px;">{{queueNumber}}.</h5>
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="6">
+            <div style="display: inline-block; text-align: center;"><ng-container i18n="Download ID">ID:</ng-container>&nbsp;{{url_id}}</div>
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="13">
+                <mat-progress-bar style="width: 80%" [value]="download.percent_complete" [mode]="(download.percent_complete === 0) ? 'indeterminate' : 'determinate'"></mat-progress-bar>
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="3">
+            <button (click)="cancelTheDownload()" mat-icon-button color="warn"><mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
+        </mat-grid-tile>
+    </mat-grid-list>
+</div>

src/app/download-item/download-item.component.spec.ts

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

src/app/download-item/download-item.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { Download } from 'app/main/main.component';
+
+
+@Component({
+  selector: 'app-download-item',
+  templateUrl: './download-item.component.html',
+  styleUrls: ['./download-item.component.scss']
+})
+export class DownloadItemComponent implements OnInit {
+
+  @Input() download: Download = {
+    uid: null,
+    type: 'audio',
+    percent_complete: 0,
+    url: 'http://youtube.com/watch?v=17848rufj',
+    downloading: true,
+    is_playlist: false
+  };
+  @Output() cancelDownload = new EventEmitter<Download>();
+
+  @Input() queueNumber = null;
+
+  url_id = null;
+
+  constructor() { }
+
+  ngOnInit() {
+    if (this.download && this.download.url && this.download.url.includes('youtube')) {
+      const string_id = (this.download.is_playlist ? '?list=' : '?v=')
+      const index_offset = (this.download.is_playlist ? 6 : 3);
+      const end_index = this.download.url.indexOf(string_id) + index_offset;
+      this.url_id = this.download.url.substring(end_index, this.download.url.length);
+    }
+  }
+
+  cancelTheDownload() {
+    this.cancelDownload.emit(this.download);
+  }
+
+}

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

@@ -17,8 +17,7 @@
 }
 
 .image {
-  max-width:100%;
-  max-height:100%;
+  width: 100%;
 }
 
 .example-full-width-height {
@@ -33,10 +32,12 @@
 }
 
 .img-div {
-  max-height: 80px;
+  height: 60px;
   padding: 0px;
-  margin: 0px 0px 0px -5px;
+  margin: 8px 0px 0px -5px;
   width: calc(100% + 5px + 5px);
+  overflow: hidden;
+  border-radius: 0px 0px 4px 4px;
 }
 
 .max-two-lines {
@@ -50,6 +51,14 @@
   -webkit-line-clamp: 2;
 }
 
+.file-link {
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
 @media (max-width: 576px){
  
   .example-card {

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

@@ -1,10 +1,12 @@
 <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)="!isPlaylist ? mainComponent.goToFile(name, isAudio) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
-    <br/>
-    <span class="max-two-lines">ID: {{name}}</span>
-    <div *ngIf="isPlaylist">Count: {{count}}</div>
+    <div style="height: 52px;">
+      <div>
+        <b><a class="file-link" href="javascript:void(0)" (click)="!isPlaylist ? mainComponent.goToFile(name, isAudio) : mainComponent.goToPlaylist(name, type)">{{title}}</a></b>
+      </div>
+      <span class="max-two-lines"><ng-container i18n="File or playlist ID">ID:</ng-container>&nbsp;{{name}}</span>
+      <div *ngIf="isPlaylist"><ng-container i18n="Playlist video count">Count:</ng-container>&nbsp;{{count}}</div>
+    </div>
     <div *ngIf="!image_errored && thumbnailURL" class="img-div">
       <img class="image" (error) ="onImgError($event)" [id]="type" [lazyLoad]="thumbnailURL" [customObservable]="scrollAndLoad" (onLoad)="imageLoaded($event)" alt="Thumbnail">
       <span *ngIf="!image_loaded">
@@ -13,9 +15,12 @@
         </ngx-content-loading>
       </span>
     </div>
-</div>
-    
-
-  
-
+  </div>
+  <button *ngIf="isPlaylist" (click)="deleteFile()" class="deleteButton" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+  <button [matMenuTriggerFor]="action_menu" *ngIf="!isPlaylist" class="deleteButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+  <mat-menu #action_menu="matMenu">
+    <button (click)="openVideoInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
+    <button (click)="deleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
+    <button *ngIf="use_youtubedl_archive" (click)="deleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
+  </mat-menu>
 </mat-card>

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

@@ -1,10 +1,12 @@
 import { Component, OnInit, Input, Output } from '@angular/core';
 import {PostsService} from '../posts.services';
-import {MatSnackBar} from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import {EventEmitter} from '@angular/core';
 import { MainComponent } from 'app/main/main.component';
 import { Subject, Observable } from 'rxjs';
 import 'rxjs/add/observable/merge';
+import { MatDialog } from '@angular/material/dialog';
+import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';
 
 @Component({
   selector: 'app-file-card',
@@ -12,7 +14,7 @@ import 'rxjs/add/observable/merge';
   styleUrls: ['./file-card.component.css']
 })
 export class FileCardComponent implements OnInit {
-
+  @Input() file: any;
   @Input() title: string;
   @Input() length: string;
   @Input() name: string;
@@ -21,6 +23,7 @@ export class FileCardComponent implements OnInit {
   @Output() removeFile: EventEmitter<string> = new EventEmitter<string>();
   @Input() isPlaylist = false;
   @Input() count = null;
+  @Input() use_youtubedl_archive = false;
   type;
   image_loaded = false;
   image_errored = false;
@@ -28,8 +31,10 @@ export class FileCardComponent implements OnInit {
   scrollSubject;
   scrollAndLoad;
 
-  constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent) {
-    this.scrollSubject = new Subject();
+  constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent, 
+    private dialog: MatDialog) {
+
+      this.scrollSubject = new Subject();
     this.scrollAndLoad = Observable.merge(
       Observable.fromEvent(window, 'scroll'),
       this.scrollSubject
@@ -40,9 +45,9 @@ export class FileCardComponent implements OnInit {
     this.type = this.isAudio ? 'audio' : 'video';
   }
 
-  deleteFile() {
+  deleteFile(blacklistMode = false) {
     if (!this.isPlaylist) {
-      this.postsService.deleteFile(this.name, this.isAudio).subscribe(result => {
+      this.postsService.deleteFile(this.name, this.isAudio, blacklistMode).subscribe(result => {
         if (result === true) {
           this.openSnackBar('Delete success!', 'OK.');
           this.removeFile.emit(this.name);
@@ -56,6 +61,15 @@ export class FileCardComponent implements OnInit {
 
   }
 
+  openVideoInfoDialog() {
+    const dialogRef = this.dialog.open(VideoInfoDialogComponent, {
+      data: {
+        file: this.file,
+      },
+      minWidth: '50vw'
+    });
+  }
+
   onImgError(event) {
     this.image_errored = true;
   }

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

@@ -7,6 +7,7 @@
   </div>
 </mat-dialog-content>
 <mat-dialog-actions>
+  <!-- TODO: Internationalize these buttons -->
   <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>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Inject, EventEmitter } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-input-dialog',

src/app/main/main.component.css

@@ -115,4 +115,13 @@ mat-form-field.mat-form-field {
 
 .add-playlist-button {
     float: right;
+}
+
+.advanced-input {
+    width: 100%;
+}
+
+.edit-button {
+    margin-left: 10px;
+    top: -5px;
 }

src/app/main/main.component.html

@@ -2,7 +2,7 @@
 <div class="big demo-basic">
     <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
         <mat-card-title>
-            Youtube Downloader
+            <ng-container i18n="Youtube downloader home page label">Youtube Downloader</ng-container>
         </mat-card-title>
         <mat-card-content>
             <div style="position: relative;">
@@ -12,13 +12,19 @@
                             <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>
+                                    <mat-error *ngIf="urlError || urlForm.invalid">
+                                        <ng-container i18n="Enter valid URL error">Please enter a valid URL!</ng-container>
+                                    </mat-error>
                                     <button class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
                                 </mat-form-field>
                             </div>
                             <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-label>
+                                        <ng-container i18n="Quality select label">
+                                            Quality
+                                        </ng-container>
+                                    </mat-label>
                                     <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedQuality">
                                       <ng-container *ngFor="let option of qualityOptions[(audioOnly) ? 'audio' : 'video']">
                                         <mat-option *ngIf="option.value === '' || url && cachedAvailableFormats[url] && cachedAvailableFormats[url]['formats'] && cachedAvailableFormats[url]['formats'][(audioOnly) ? 'audio' : 'video'][option.value]" [value]="option.value">
@@ -42,25 +48,127 @@
                                 <div style="font-size: 12px; margin-bottom: 10px;">
                                     {{result.uploaded}}
                                 </div>
-                                <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>
+                                <button mat-flat-button color="primary" style="float: left;" (click)="useURL(result.videoUrl)">
+                                    <ng-container i18n="YT search Use URL button for searched video">Use URL</ng-container>
+                                </button>
+                                <button mat-stroked-button color="primary" (click)="visitURL(result.videoUrl)" style="float: right">
+                                    <ng-container i18n="YT search View button for searched video">
+                                        View
+                                    </ng-container>
+                                </button>
                             </mat-card>
                         </span>
                     </div>
                 </form>
                 <br/>
-                <mat-checkbox (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
+                <mat-checkbox [disabled]="current_download" (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">
+                    <ng-container i18n="Only Audio checkbox">
+                        Only Audio
+                    </ng-container>
+                </mat-checkbox>
+                <mat-checkbox *ngIf="allowMultiDownloadMode" [disabled]="current_download" (change)="multiDownloadModeChanged($event)" [(ngModel)]="multiDownloadMode" style="float: right; margin-top: -12px">
+                    <ng-container i18n="Multi-download Mode checkbox">
+                        Multi-download Mode
+                    </ng-container>
+                </mat-checkbox>
                 
             </div>
         </mat-card-content>
         <mat-card-actions>
-            <button style="margin-left: 8px; margin-bottom: 8px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-stroked-button
-                color="accent">Download</button>
+            <button style="margin-left: 8px; margin-bottom: 8px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-stroked-button color="accent">
+                <ng-container i18n="Main download button">
+                    Download
+                </ng-container>
+            </button>
+            <button (click)="cancelDownload()" style="float: right" *ngIf="!!current_download" mat-stroked-button color="warn">
+                <ng-container i18n="Cancel download button">
+                    Cancel
+                </ng-container>
+            </button>
         </mat-card-actions>
     </mat-card>
 </div>
+<div *ngIf="allowAdvancedDownload" class="big demo-basic">
+    <form style="margin-left: 20px; margin-right: 20px;">
+        <mat-expansion-panel class="big">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <ng-container i18n="Advanced download mode panel">
+                        Advanced
+                    </ng-container>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            <p *ngIf="this.simulatedOutput">
+                <ng-container i18n="Simulated command label">
+                    Simulated command:
+                </ng-container>
+                &nbsp;<i>{{this.simulatedOutput}}</i></p>
+            <div class="container" style="padding-bottom: 20px;">
+                <div class="row">
+                    <div class="col-12 col-sm-6">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">
+                            <ng-container i18n="Use custom args checkbox">
+                                Use custom args
+                            </ng-container>
+                        </mat-checkbox>
+                        <button class="edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
+                        <mat-form-field color="accent" style="margin-bottom: 42px;" class="advanced-input">
+                            <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args" i18n-placeholder="Custom args placeholder">
+                            <mat-hint>
+                                <ng-container i18n="Custom Args input hint">
+                                    No need to include URL, just everything after.
+                                </ng-container>
+                            </mat-hint>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12 col-sm-6">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">
+                            <ng-container i18n="Use custom output checkbox">
+                                Use custom output
+                            </ng-container>
+                        </mat-checkbox>
+                        <mat-form-field style="margin-bottom: 42px;" color="accent" class="advanced-input">
+                            <input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput placeholder="Custom output" i18n-placeholder="Custom output placeholder">
+                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
+                                <ng-container i18n="Youtube-dl output template documentation link">Documentation</ng-container></a>.
+                                <ng-container i18n="Custom Output input hint">Path is relative to the config download path. Don't include extension.</ng-container>
+                            </mat-hint>
+                        </mat-form-field>
+                    </div>
+                    <div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">
+                            <ng-container i18n="Use authentication checkbox">
+                                Use authentication
+                            </ng-container>
+                        </mat-checkbox>
+                        <mat-form-field color="accent" class="advanced-input">
+                            <input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username" i18n-placeholder="YT Username placeholder">
+                        </mat-form-field>
+                    </div>
+                    <div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
+                        <mat-form-field style="margin-top: 31px;" color="accent" class="advanced-input">
+                            <input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Password" i18n-placeholder="YT Password placeholder">
+                        </mat-form-field>
+                    </div>
+                </div>
+            </div>
+        </mat-expansion-panel>
+    </form>
+</div>
+<div *ngIf="multiDownloadMode && downloads.length > 0 && !current_download" style="margin-top: 15px;" class="big demo-basic">
+    <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
+        <div class="container">
+            <div *ngFor="let download of downloads; let i = index;" class="row">
+                <ng-container *ngIf="current_download !== download">
+                    <app-download-item style="width: 100%" [download]="download" [queueNumber]="i+1" (cancelDownload)="cancelDownload($event)"></app-download-item>
+                    <mat-divider style="position: relative" *ngIf="i !== downloads.length - 1"></mat-divider>
+                </ng-container>
+            </div>
+        </div>
+    </mat-card>
+</div>
 <br/>
-<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
+<div class="centered big" id="bar_div" *ngIf="current_download && current_download.downloading; else nofile">
     <div class="margined">
         <div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
             <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
@@ -80,67 +188,77 @@
 </ng-template>
 <div style="margin: 20px" *ngIf="fileManagerEnabled">
     <mat-accordion>
-        <mat-expansion-panel (mouseleave)="accordionLeft('audio')" (mouseenter)="accordionEntered('audio')" class="big">
+        <mat-expansion-panel (opened)="accordionOpened('audio')" (closed)="accordionClosed('audio')" (mouseleave)="accordionLeft('audio')" (mouseenter)="accordionEntered('audio')" class="big">
             <mat-expansion-panel-header>
                 <mat-panel-title>
-                    Audio
+                    <ng-container i18n="Audio files title">
+                        Audio
+                    </ng-container>
                 </mat-panel-title>
                 <mat-panel-description>
-                    Your audio files are here
+                    <ng-container i18n="Audio files description">
+                        Your audio files are here
+                    </ng-container>
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <div *ngIf="mp3s.length > 0;else nomp3s">
                 <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 #audiofilecard (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
-                                [length]="file.duration" [isAudio]="true"></app-file-card>
+                        <app-file-card #audiofilecard (removeFile)="removeFromMp3($event)" [file]="file" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
+                                [length]="file.duration" [isAudio]="true" [use_youtubedl_archive]="use_youtubedl_archive"></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></mat-divider>
                 <div style="width: 100%; text-align: center; margin-top: 10px;">
-                    <h6>Playlists</h6>
+                    <h6 i18n="Playlists title">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 #audiofilecard (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>
+                            [length]="null" [isAudio]="true" [isPlaylist]="true" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></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 class="add-playlist-button"><button (click)="openCreatePlaylistDialog('audio')" mat-fab><mat-icon>add</mat-icon></button></div>
                 <div *ngIf="playlists.audio.length === 0">
-                    No playlists available. Create one from your downloading audio files by clicking the blue plus button.
+                    <ng-container i18n="No video playlists available text">
+                        No playlists available. Create one from your downloading audio files by clicking the blue plus button.
+                    </ng-container>
                 </div>
             </div>
 
         </mat-expansion-panel>
-        <mat-expansion-panel (mouseleave)="accordionLeft('video')" (mouseenter)="accordionEntered('video')" class="big">
+        <mat-expansion-panel (opened)="accordionOpened('video')" (closed)="accordionClosed('video')" (mouseleave)="accordionLeft('video')" (mouseenter)="accordionEntered('video')" class="big">
             <mat-expansion-panel-header>
                 <mat-panel-title>
-                    Video
+                    <ng-container i18n="Video files title">
+                        Video
+                    </ng-container>
                 </mat-panel-title>
                 <mat-panel-description>
-                    Your video files are here
+                    <ng-container i18n="Video files description">
+                        Your video files are here
+                    </ng-container>
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <div *ngIf="mp4s.length > 0;else nomp4s">
                 <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 #videofilecard (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
-                            [length]="file.duration" [isAudio]="false"></app-file-card>
+                        <app-file-card #videofilecard (removeFile)="removeFromMp4($event)" [file]="file" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
+                            [length]="file.duration" [isAudio]="false" [use_youtubedl_archive]="use_youtubedl_archive"></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></mat-divider>
 
                 <div style="width: 100%; text-align: center; margin-top: 10px;">
-                    <h6>Playlists</h6>
+                    <h6 i18n="Playlists title">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 #videofilecard (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>
+                            [length]="null" [isAudio]="false" [isPlaylist]="true" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></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>
@@ -148,7 +266,9 @@
                 <!-- Add video playlist button -->
                 <div class="add-playlist-button"><button (click)="openCreatePlaylistDialog('video')" mat-fab><mat-icon>add</mat-icon></button></div>
                 <div *ngIf="playlists.video.length === 0">
-                    No playlists available. Create one from your downloading video files by clicking the blue plus button.
+                    <ng-container i18n="No video playlists available text">
+                        No playlists available. Create one from your downloading video files by clicking the blue plus button.
+                    </ng-container>
                 </div>
             </div>
         </mat-expansion-panel>

src/app/main/main.component.ts

@@ -4,7 +4,8 @@ import {FileCardComponent} from '../file-card/file-card.component';
 import { Observable } from 'rxjs/Observable';
 import {FormControl, Validators} from '@angular/forms';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSnackBar, MatDialog} from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { saveAs } from 'file-saver';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/mapTo';
@@ -15,12 +16,26 @@ import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/switch'
 import { YoutubeSearchService, Result } from '../youtube-search.service';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { CreatePlaylistComponent } from 'app/create-playlist/create-playlist.component';
 import { Platform } from '@angular/cdk/platform';
+import { v4 as uuid } from 'uuid';
+import { ArgModifierDialogComponent } from 'app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
 
 export let audioFilesMouseHovering = false;
 export let videoFilesMouseHovering = false;
+export let audioFilesOpened = false;
+export let videoFilesOpened = false;
+
+export interface Download {
+  uid: string;
+  type: string;
+  url: string;
+  percent_complete: number;
+  downloading: boolean;
+  is_playlist: boolean;
+  fileNames?: string[];
+}
 
 @Component({
   selector: 'app-root',
@@ -28,25 +43,43 @@ export let videoFilesMouseHovering = false;
   styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
+  youtubeAuthDisabledOverride = false;
+
   iOS = false;
 
+  // local settings
   determinateProgress = false;
   downloadingfile = false;
   audioOnly: boolean;
+  multiDownloadMode = false;
+  customArgsEnabled = false;
+  customArgs = null;
+  customOutputEnabled = false;
+  customOutput = null;
+  youtubeAuthEnabled = false;
+  youtubeUsername = null;
+  youtubePassword = null;
   urlError = false;
   path = '';
   url = '';
   exists = '';
   percentDownloaded: number;
+  autoStartDownload = false;
 
-  // settings
+  // global settings
   fileManagerEnabled = false;
   allowQualitySelect = false;
   downloadOnlyMode = false;
-  baseStreamPath;
+  allowMultiDownloadMode = false;
   audioFolderPath;
   videoFolderPath;
+  use_youtubedl_archive = false;
+  globalCustomArgs = null;
+  allowAdvancedDownload = false;
+  useDefaultDownloadingAgent = true;
+  customDownloadingAgent = null;
 
+  // formats cache
   cachedAvailableFormats = {};
 
   // youtube api
@@ -58,10 +91,12 @@ export class MainComponent implements OnInit {
 
   mp3s: any[] = [];
   mp4s: any[] = [];
-  files_cols = (window.innerWidth <= 450) ? 2 : 4;
+  files_cols = null;
   playlists = {'audio': [], 'video': []};
   playlist_thumbnails = {};
   downloading_content = {'audio': {}, 'video': {}};
+  downloads: Download[] = [];
+  current_download: Download = null;
 
   urlForm = new FormControl('', [Validators.required]);
 
@@ -160,33 +195,57 @@ export class MainComponent implements OnInit {
   selectedQuality = '';
   formats_loading = false;
 
-  @ViewChild('urlinput', { read: ElementRef, static: false }) urlInput: ElementRef;
+  @ViewChild('urlinput', { read: ElementRef }) urlInput: ElementRef;
   @ViewChildren('audiofilecard') audioFileCards: QueryList<FileCardComponent>;
   @ViewChildren('videofilecard') videoFileCards: QueryList<FileCardComponent>;
   last_valid_url = '';
   last_url_check = 0;
 
+  test_download: Download = {
+    uid: null,
+    type: 'audio',
+    percent_complete: 0,
+    url: 'http://youtube.com/watch?v=17848rufj',
+    downloading: true,
+    is_playlist: false
+  };
+
+  simulatedOutput = '';
+
   constructor(private postsService: PostsService, private youtubeSearch: YoutubeSearchService, public snackBar: MatSnackBar,
-    private router: Router, public dialog: MatDialog, private platform: Platform) {
+    private router: Router, public dialog: MatDialog, private platform: Platform, private route: ActivatedRoute) {
     this.audioOnly = false;
+  }
 
+  async configLoad() {
+    await this.loadConfig();
+    if (this.autoStartDownload) {
+      this.downloadClicked();
+    }
 
+    setInterval(() => this.getSimulatedOutput(), 1000);
+  }
+
+  async loadConfig() {
     // loading config
-    this.postsService.loadNavItems().subscribe(result => { // loads settings
-      const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
+    this.postsService.loadNavItems().subscribe(res => { // loads settings
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
       this.fileManagerEnabled = result['YoutubeDLMaterial']['Extra']['file_manager_enabled'];
       this.downloadOnlyMode = result['YoutubeDLMaterial']['Extra']['download_only_mode'];
-      this.baseStreamPath = result['YoutubeDLMaterial']['Downloader']['path-base'];
+      this.allowMultiDownloadMode = result['YoutubeDLMaterial']['Extra']['allow_multi_download_mode'];
       this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
       this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
+      this.use_youtubedl_archive = result['YoutubeDLMaterial']['Downloader']['use_youtubedl_archive'];
+      this.globalCustomArgs = result['YoutubeDLMaterial']['Downloader']['custom_args'];
       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.allowAdvancedDownload = result['YoutubeDLMaterial']['Advanced']['allow_advanced_download'];
+      this.useDefaultDownloadingAgent = result['YoutubeDLMaterial']['Advanced']['use_default_downloading_agent'];
+      this.customDownloadingAgent = result['YoutubeDLMaterial']['Advanced']['custom_downloading_agent'];
+
 
-      this.postsService.path = backendUrl;
-      this.postsService.startPath = backendUrl;
-      this.postsService.startPathSSL = backendUrl;
 
       if (this.fileManagerEnabled) {
         this.getMp3s();
@@ -197,10 +256,71 @@ export class MainComponent implements OnInit {
         this.youtubeSearch.initializeAPI(this.youtubeAPIKey);
         this.attachToInput();
       }
+
+      // set final cache items
+      if (this.allowAdvancedDownload) {
+        if (localStorage.getItem('customArgsEnabled') !== null) {
+          this.customArgsEnabled = localStorage.getItem('customArgsEnabled') === 'true';
+        }
+
+        if (localStorage.getItem('customOutputEnabled') !== null) {
+          this.customOutputEnabled = localStorage.getItem('customOutputEnabled') === 'true';
+        }
+
+        if (localStorage.getItem('youtubeAuthEnabled') !== null) {
+          this.youtubeAuthEnabled = localStorage.getItem('youtubeAuthEnabled') === 'true';
+        }
+
+        // set advanced inputs
+        const customArgs = localStorage.getItem('customArgs');
+        const customOutput = localStorage.getItem('customOutput');
+        const youtubeUsername = localStorage.getItem('youtubeUsername');
+
+        if (customArgs && customArgs !== 'null') { this.customArgs = customArgs };
+        if (customOutput && customOutput !== 'null') { this.customOutput = customOutput };
+        if (youtubeUsername && youtubeUsername !== 'null') { this.youtubeUsername = youtubeUsername };
+      }
+
+      return true;
+
     }, error => {
       console.log(error);
+
+      return false;
+    });
+  }
+
+  // app initialization.
+  ngOnInit() {
+    this.configLoad();
+
+    this.postsService.settings_changed.subscribe(changed => {
+      if (changed) {
+        this.loadConfig();
+      }
     });
 
+    this.iOS = this.platform.IOS;
+
+    // get checkboxes
+    if (localStorage.getItem('audioOnly') !== null) {
+      this.audioOnly = localStorage.getItem('audioOnly') === 'true';
+    }
+
+    if (localStorage.getItem('multiDownloadMode') !== null) {
+      this.multiDownloadMode = localStorage.getItem('multiDownloadMode') === 'true';
+    }
+
+    // check if params exist
+    if (this.route.snapshot.paramMap.get('url')) {
+      this.url = decodeURIComponent(this.route.snapshot.paramMap.get('url'));
+      this.audioOnly = this.route.snapshot.paramMap.get('audioOnly') === 'true';
+
+      // set auto start flag to true
+      this.autoStartDownload = true;
+    }
+
+    this.setCols();
   }
 
   // file manager stuff
@@ -258,6 +378,18 @@ export class MainComponent implements OnInit {
     });
   }
 
+  public setCols() {
+    if (window.innerWidth <= 350) {
+      this.files_cols = 1;
+    } else if (window.innerWidth <= 500) {
+      this.files_cols = 2;
+    } else if (window.innerWidth <= 750) {
+      this.files_cols = 3
+    } else {
+      this.files_cols = 4;
+    }
+  }
+
   public goToFile(name, isAudio) {
     if (isAudio) {
       this.downloadHelperMp3(name, false, false);
@@ -273,6 +405,7 @@ export class MainComponent implements OnInit {
         this.downloading_content[type][playlistID] = true;
         this.downloadPlaylist(playlist.fileNames, type, playlist.name, playlistID);
       } else {
+        localStorage.setItem('player_navigator', this.router.url);
         const fileNames = playlist.fileNames;
         this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID}]);
       }
@@ -328,70 +461,81 @@ export class MainComponent implements OnInit {
     });
   }
 
-
-  // app initialization.
-  ngOnInit() {
-    // this.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
-    this.iOS = this.platform.IOS;
-
-    if (localStorage.getItem('audioOnly') !== null) {
-      this.audioOnly = localStorage.getItem('audioOnly') === 'true';
-    }
-  }
-
   // download helpers
 
-  downloadHelperMp3(name, is_playlist = false, forceView = false) {
+  downloadHelperMp3(name, is_playlist = false, forceView = false, new_download = null) {
     this.downloadingfile = false;
 
-    // if download only mode, just download the file. no redirect
-    if (forceView === false && this.downloadOnlyMode && !this.iOS) {
-      if (is_playlist) {
-        const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
-        this.downloadPlaylist(name, 'audio', zipName);
+    if (new_download && this.current_download !== new_download) {
+      // console.log('mismatched downloads');
+    } else if (!this.multiDownloadMode || !new_download) {
+      // if download only mode, just download the file. no redirect
+      if (forceView === false && this.downloadOnlyMode && !this.iOS) {
+        if (is_playlist) {
+          const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
+          this.downloadPlaylist(name, 'audio', zipName);
+        } else {
+          this.downloadAudioFile(decodeURI(name));
+        }
       } else {
-        this.downloadAudioFile(decodeURI(name));
-      }
-    } else {
-      if (is_playlist) {
-        this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'audio'}]);
-        // window.location.href = this.baseStreamPath + this.audioFolderPath + name[0] + '.mp3';
-      } else {
-        this.router.navigate(['/player', {fileNames: name, type: 'audio'}]);
-        // window.location.href = this.baseStreamPath + this.audioFolderPath + name + '.mp3';
+        localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
+        if (is_playlist) {
+          this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'audio'}]);
+        } else {
+          this.router.navigate(['/player', {fileNames: name, type: 'audio'}]);
+        }
       }
     }
 
+    // remove download from current downloads
+    this.removeDownloadFromCurrentDownloads(new_download);
+
     // reloads mp3s
     if (this.fileManagerEnabled) {
       this.getMp3s();
+      setTimeout(() => {
+        this.audioFileCards.forEach(filecard => {
+          filecard.onHoverResponse();
+        });
+      }, 200);
     }
   }
 
-  downloadHelperMp4(name, is_playlist = false, forceView = false) {
+  downloadHelperMp4(name, is_playlist = false, forceView = false, new_download = null) {
     this.downloadingfile = false;
 
-    // if download only mode, just download the file. no redirect
-    if (forceView === false && this.downloadOnlyMode) {
-      if (is_playlist) {
-        const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
-        this.downloadPlaylist(name, 'video', zipName);
+    if (new_download && this.current_download !== new_download) {
+      // console.log('mismatched downloads');
+    } else if (!this.multiDownloadMode || !new_download) {
+      // if download only mode, just download the file. no redirect
+      if (forceView === false && this.downloadOnlyMode) {
+        if (is_playlist) {
+          const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
+          this.downloadPlaylist(name, 'video', zipName);
+        } else {
+          this.downloadVideoFile(decodeURI(name));
+        }
       } else {
-        this.downloadVideoFile(decodeURI(name));
-      }
-    } else {
-      if (is_playlist) {
-        this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'video'}]);
-        // window.location.href = this.baseStreamPath + this.videoFolderPath + name[0] + '.mp4';
-      } else {
-        this.router.navigate(['/player', {fileNames: name, type: 'video'}]);
-        // window.location.href = this.baseStreamPath + this.videoFolderPath + name + '.mp4';
+        localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
+        if (is_playlist) {
+          this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'video'}]);
+        } else {
+          this.router.navigate(['/player', {fileNames: name, type: 'video'}]);
+        }
       }
     }
 
+    // remove download from current downloads
+    this.removeDownloadFromCurrentDownloads(new_download);
+
     // reloads mp4s
     if (this.fileManagerEnabled) {
       this.getMp4s();
+      setTimeout(() => {
+        this.videoFileCards.forEach(filecard => {
+          filecard.onHoverResponse();
+        });
+      }, 200);
     }
   }
 
@@ -401,56 +545,161 @@ export class MainComponent implements OnInit {
       this.urlError = false;
       this.path = '';
 
+      // get common args
+      const customArgs = (this.customArgsEnabled ? this.customArgs : null);
+      const customOutput = (this.customOutputEnabled ? this.customOutput : null);
+      const youtubeUsername = (this.youtubeAuthEnabled && this.youtubeUsername ? this.youtubeUsername : null);
+      const youtubePassword = (this.youtubeAuthEnabled && this.youtubePassword ? this.youtubePassword : null);
+
+      // set advanced inputs
+      if (this.allowAdvancedDownload) {
+        if (customArgs) {
+          localStorage.setItem('customArgs', customArgs);
+        }
+        if (customOutput) {
+          localStorage.setItem('customOutput', customOutput);
+        }
+        if (youtubeUsername) {
+          localStorage.setItem('youtubeUsername', youtubeUsername);
+        }
+      }
+
       if (this.audioOnly) {
+        // create download object
+        const new_download: Download = {
+          uid: uuid(),
+          type: 'audio',
+          percent_complete: 0,
+          url: this.url,
+          downloading: true,
+          is_playlist: this.url.includes('playlist')
+        };
+        this.downloads.push(new_download);
+        if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
         this.downloadingfile = true;
 
         let customQualityConfiguration = null;
         if (this.selectedQuality !== '') {
-          const cachedFormatsExists = this.cachedAvailableFormats[this.url] && this.cachedAvailableFormats[this.url]['formats'];
-          if (cachedFormatsExists) {
-            const audio_formats = this.cachedAvailableFormats[this.url]['formats']['audio'];
-            customQualityConfiguration = audio_formats[this.selectedQuality]['format_id'];
-          }
+          customQualityConfiguration = this.getSelectedAudioFormat();
         }
+
         this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
+          // update download object
+          new_download.downloading = false;
+          new_download.percent_complete = 100;
+
           const is_playlist = !!(posts['file_names']);
           this.path = is_playlist ? posts['file_names'] : posts['audiopathEncoded'];
+
           if (this.path !== '-1') {
-            this.downloadHelperMp3(this.path, is_playlist);
+            this.downloadHelperMp3(this.path, is_playlist, false, new_download);
           }
         }, error => { // can't access server
           this.downloadingfile = false;
+          this.current_download = null;
+          new_download['downloading'] = false;
           this.openSnackBar('Download failed!', 'OK.');
         });
       } else {
-        let customQualityConfiguration = null;
-        const cachedFormatsExists = this.cachedAvailableFormats[this.url] &&  this.cachedAvailableFormats[this.url]['formats'];
-        if (cachedFormatsExists) {
-          const video_formats = this.cachedAvailableFormats[this.url]['formats']['video'];
-          if (video_formats['best_audio_format'] && this.selectedQuality !== '') {
-              customQualityConfiguration = video_formats[this.selectedQuality]['format_id'] + '+' + video_formats['best_audio_format'];
-          }
-        }
-
+        // create download object
+        const new_download: Download = {
+          uid: uuid(),
+          type: 'video',
+          percent_complete: 0,
+          url: this.url,
+          downloading: true,
+          is_playlist: this.url.includes('playlist')
+        };
+        this.downloads.push(new_download);
+        if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
         this.downloadingfile = true;
+
+        const customQualityConfiguration = this.getSelectedVideoFormat();
+
         this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
+          // update download object
+          new_download.downloading = false;
+          new_download.percent_complete = 100;
+
           const is_playlist = !!(posts['file_names']);
           this.path = is_playlist ? posts['file_names'] : posts['videopathEncoded'];
+
           if (this.path !== '-1') {
-            this.downloadHelperMp4(this.path, is_playlist);
+            this.downloadHelperMp4(this.path, is_playlist, false, new_download);
           }
         }, error => { // can't access server
           this.downloadingfile = false;
+          this.current_download = null;
+          new_download['downloading'] = false;
           this.openSnackBar('Download failed!', 'OK.');
       });
       }
+
+      if (this.multiDownloadMode) {
+          this.url = '';
+          this.downloadingfile = false;
+      }
     } else {
       this.urlError = true;
     }
   }
 
+  // download canceled handler
+  cancelDownload(download_to_cancel = null) {
+    // if one is provided, cancel that one. otherwise, remove the current one
+    if (download_to_cancel) {
+      this.removeDownloadFromCurrentDownloads(download_to_cancel)
+      return;
+    }
+    this.downloadingfile = false;
+    this.current_download.downloading = false;
+    this.current_download = null;
+  }
+
+  getSelectedAudioFormat() {
+    if (this.selectedQuality === '') { return null };
+    const cachedFormatsExists = this.cachedAvailableFormats[this.url] && this.cachedAvailableFormats[this.url]['formats'];
+    if (cachedFormatsExists) {
+      const audio_formats = this.cachedAvailableFormats[this.url]['formats']['audio'];
+      return audio_formats[this.selectedQuality]['format_id'];
+    } else {
+      return null;
+    }
+  }
+
+  getSelectedVideoFormat() {
+    if (this.selectedQuality === '') { return null };
+    const cachedFormatsExists = this.cachedAvailableFormats[this.url] &&  this.cachedAvailableFormats[this.url]['formats'];
+    if (cachedFormatsExists) {
+      const video_formats = this.cachedAvailableFormats[this.url]['formats']['video'];
+      if (video_formats['best_audio_format'] && this.selectedQuality !== '') {
+          return video_formats[this.selectedQuality]['format_id'] + '+' + video_formats['best_audio_format'];
+      }
+    }
+    return null;
+  }
+
+  getDownloadByUID(uid) {
+    const index = this.downloads.findIndex(download => download.uid === uid);
+    if (index !== -1) {
+      return this.downloads[index];
+    } else {
+      return null;
+    }
+  }
+
+  removeDownloadFromCurrentDownloads(download_to_remove) {
+    const index = this.downloads.indexOf(download_to_remove);
+    if (index !== -1) {
+      this.downloads.splice(index, 1);
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   downloadAudioFile(name) {
     this.downloading_content['audio'][name] = true;
     this.postsService.downloadFileFromServer(name, 'audio').subscribe(res => {
@@ -574,6 +823,81 @@ export class MainComponent implements OnInit {
     }
   }
 
+  getSimulatedOutput() {
+    const customArgsExists = this.customArgsEnabled && this.customArgs;
+    const globalArgsExists = this.globalCustomArgs && this.globalCustomArgs !== '';
+
+    let full_string_array: string[] = [];
+    const base_string_array = ['youtube-dl', this.url];
+
+    if (customArgsExists) {
+      this.simulatedOutput = base_string_array.join(' ') + ' ' + this.customArgs;
+      return this.simulatedOutput;
+    }
+
+    full_string_array.push(...base_string_array);
+
+    const base_path = this.audioOnly ? this.audioFolderPath : this.videoFolderPath;
+    const ext = this.audioOnly ? '.mp3' : '.mp4';
+    // gets output
+    let output_string_array = ['-o', base_path + '%(title)s' + ext];
+    if (this.customOutputEnabled && this.customOutput) {
+      output_string_array = ['-o', this.customOutput + ext];
+    }
+    // before pushing output, should check if using an external downloader
+    if (!this.useDefaultDownloadingAgent && this.customDownloadingAgent === 'aria2c') {
+      full_string_array.push('--external-downloader', 'aria2c');
+    }
+    // pushes output
+    full_string_array.push(...output_string_array);
+
+    // logic splits into audio and video modes
+    if (this.audioOnly) {
+      // adds base audio string
+      const format_array = [];
+      const audio_format = this.getSelectedAudioFormat();
+      if (audio_format) {
+        format_array.push('-f', audio_format);
+      } else if (this.selectedQuality) {
+        format_array.push('--audio-quality', this.selectedQuality);
+      }
+
+      // pushes formats
+      full_string_array.splice(2, 0, ...format_array);
+
+      const additional_params = ['-x', '--audio-format', 'mp3', '--write-info-json', '--print-json'];
+
+      full_string_array.push(...additional_params);
+    } else {
+      // adds base video string
+      let format_array = ['-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4'];
+      const video_format = this.getSelectedVideoFormat();
+      if (video_format) {
+        format_array = ['-f', video_format];
+      } else if (this.selectedQuality) {
+        format_array = [`bestvideo[height=${this.selectedQuality}]+bestaudio/best[height=${this.selectedQuality}]`];
+      }
+
+      // pushes formats
+      full_string_array.splice(2, 0, ...format_array);
+
+      const additional_params = ['--write-info-json', '--print-json'];
+
+      full_string_array.push(...additional_params);
+    }
+
+    if (this.use_youtubedl_archive) {
+      full_string_array.push('--download-archive', 'archive.txt');
+    }
+
+    if (globalArgsExists) {
+      full_string_array = full_string_array.concat(this.globalCustomArgs.split(' '));
+    }
+
+    this.simulatedOutput = full_string_array.join(' ');
+    return this.simulatedOutput;
+  }
+
   errorFormats(url) {
     this.cachedAvailableFormats[url]['formats_loading'] = false;
     console.error('Could not load formats for url ' + url);
@@ -609,7 +933,7 @@ export class MainComponent implements OnInit {
   }
 
   onResize(event) {
-    this.files_cols = (event.target.innerWidth <= 450) ? 2 : 4;
+    this.setCols();
   }
 
   videoModeChanged(new_val) {
@@ -617,6 +941,37 @@ export class MainComponent implements OnInit {
     localStorage.setItem('audioOnly', new_val.checked.toString());
   }
 
+  multiDownloadModeChanged(new_val) {
+    localStorage.setItem('multiDownloadMode', new_val.checked.toString());
+  }
+
+  customArgsEnabledChanged(new_val) {
+    localStorage.setItem('customArgsEnabled', new_val.checked.toString());
+    if (new_val.checked === true && this.customOutputEnabled) {
+      this.customOutputEnabled = false;
+      localStorage.setItem('customOutputEnabled', 'false');
+
+      this.youtubeAuthEnabled = false;
+      localStorage.setItem('youtubeAuthEnabled', 'false');
+    }
+  }
+
+  customOutputEnabledChanged(new_val) {
+    localStorage.setItem('customOutputEnabled', new_val.checked.toString());
+    if (new_val.checked === true && this.customArgsEnabled) {
+      this.customArgsEnabled = false;
+      localStorage.setItem('customArgsEnabled', 'false');
+    }
+  }
+
+  youtubeAuthEnabledChanged(new_val) {
+    localStorage.setItem('youtubeAuthEnabled', new_val.checked.toString());
+    if (new_val.checked === true && this.customArgsEnabled) {
+      this.customArgsEnabled = false;
+      localStorage.setItem('customArgsEnabled', 'false');
+    }
+  }
+
   getAudioAndVideoFormats(formats): any[] {
     const audio_formats = {};
     const video_formats = {};
@@ -700,6 +1055,22 @@ export class MainComponent implements OnInit {
     }
   }
 
+  accordionOpened(type) {
+    if (type === 'audio') {
+      audioFilesOpened = true;
+    } else if (type === 'video') {
+      videoFilesOpened = true;
+    }
+  }
+
+  accordionClosed(type) {
+    if (type === 'audio') {
+      audioFilesOpened = false;
+    } else if (type === 'video') {
+      videoFilesOpened = false;
+    }
+  }
+
   // creating a playlist
   openCreatePlaylistDialog(type) {
     const dialogRef = this.dialog.open(CreatePlaylistComponent, {
@@ -718,4 +1089,18 @@ export class MainComponent implements OnInit {
       }
     });
   }
+
+  // modify custom args
+  openArgsModifierDialog() {
+    const dialogRef = this.dialog.open(ArgModifierDialogComponent, {
+      data: {
+       initial_args: this.customArgs
+      }
+    });
+    dialogRef.afterClosed().subscribe(new_args => {
+      if (new_args) {
+       this.customArgs = new_args;
+      }
+    });
+  }
 }

src/app/player/player.component.css

@@ -1,5 +1,6 @@
 .video-player {
     margin: 0 auto;
+    min-width: 300px;
 }
 
 .video-player:focus {

src/app/player/player.component.html

@@ -9,7 +9,7 @@
             </div>
             <div class="col-12 my-2">
                 <mat-button-toggle-group cdkDropList [cdkDropListSortingDisabled]="!id" (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-                    <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{decodeURI(playlist_item.title)}}</mat-button-toggle>
+                    <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{playlist_item.label}}</mat-button-toggle>
                 </mat-button-toggle-group>
             </div>
         </div>
@@ -19,7 +19,7 @@
         <div class="spinner-div">
             <mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
         </div>
-        <button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button>Save changes <mat-icon>update</mat-icon></button>
+        <button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button><ng-container i18n="Playlist save changes button">Save changes</ng-container>&nbsp;<mat-icon>update</mat-icon></button>
         
     </div>
 

src/app/player/player.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit, HostListener, EventEmitter } from '@angular/core';
-import { VgAPI } from 'videogular2/compiled/core';
+import { VgAPI } from 'ngx-videogular';
 import { PostsService } from 'app/posts.services';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog, MatSnackBar } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { InputDialogComponent } from 'app/input-dialog/input-dialog.component';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
@@ -10,6 +11,7 @@ export interface IMedia {
   title: string;
   src: string;
   type: string;
+  label: string;
 }
 
 @Component({
@@ -30,16 +32,19 @@ export class PlayerComponent implements OnInit {
   // params
   fileNames: string[];
   type: string;
+  id = null; // used for playlists (not subscription)
+  subscriptionName = null;
+  subPlaylist = null;
 
   baseStreamPath = null;
   audioFolderPath = null;
   videoFolderPath = null;
+  subscriptionFolderPath = null;
+
   innerWidth: number;
 
   downloading = false;
 
-  id = null;
-
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.innerWidth = window.innerWidth;
@@ -51,36 +56,58 @@ 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');
+    this.subscriptionName = this.route.snapshot.paramMap.get('subscriptionName');
+    this.subPlaylist = this.route.snapshot.paramMap.get('subPlaylist');
 
     // loading config
-    this.postsService.loadNavItems().subscribe(result => { // loads settings
-      this.baseStreamPath = result['YoutubeDLMaterial']['Downloader']['path-base'];
+    this.postsService.loadNavItems().subscribe(res => { // loads settings
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
+      this.baseStreamPath = this.postsService.path;
       this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
       this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
-      const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
+      this.subscriptionFolderPath = result['YoutubeDLMaterial']['Subscriptions']['subscriptions_base_path'];
 
-      this.postsService.path = backendUrl;
-      this.postsService.startPath = backendUrl;
-      this.postsService.startPathSSL = backendUrl;
 
       let fileType = null;
       if (this.type === 'audio') {
         fileType = 'audio/mp3';
       } else if (this.type === 'video') {
         fileType = 'video/mp4';
+      } else if (this.type === 'subscription') {
+        // only supports mp4 for now
+        fileType = 'video/mp4';
       } else {
         // error
-        console.error('Must have valid file type! Use \'audio\' or \video\'');
+        console.error('Must have valid file type! Use \'audio\', \'video\', or \'subscription\'.');
       }
 
       for (let i = 0; i < this.fileNames.length; i++) {
         const fileName = this.fileNames[i];
-        const baseLocation = (this.type === 'audio') ? this.audioFolderPath : this.videoFolderPath;
-        const fullLocation = this.baseStreamPath + baseLocation + fileName; // + (this.type === 'audio' ? '.mp3' : '.mp4');
+        let baseLocation = null;
+        let fullLocation = null;
+        if (!this.subscriptionName) {
+          baseLocation = this.type + '/';
+          fullLocation = this.baseStreamPath + baseLocation + encodeURIComponent(fileName);
+        } else {
+          // default to video but include subscription name param
+          baseLocation = 'video/';
+          fullLocation = this.baseStreamPath + baseLocation + encodeURIComponent(fileName) + '?subName=' + this.subscriptionName +
+                          '&subPlaylist=' + this.subPlaylist;
+        }
+        // if it has a slash (meaning it's in a directory), only get the file name for the label
+        let label = null;
+        const decodedName = decodeURIComponent(fileName);
+        const hasSlash = decodedName.includes('/') || decodedName.includes('\\');
+        if (hasSlash) {
+          label = decodedName.replace(/^.*[\\\/]/, '');
+        } else {
+          label = decodedName;
+        }
         const mediaObject: IMedia = {
           title: fileName,
           src: fullLocation,
-          type: fileType
+          type: fileType,
+          label: label
         }
         this.playlist.push(mediaObject);
       }

src/app/posts.services.ts

@@ -1,4 +1,4 @@
-import {Injectable, isDevMode} from '@angular/core';
+import {Injectable, isDevMode, Inject} from '@angular/core';
 import { HttpClient, HttpHeaders, HttpRequest, HttpResponseBase } from '@angular/common/http';
 import config from '../assets/default.json';
 import 'rxjs/add/operator/map';
@@ -7,20 +7,33 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
 import { THEMES_CONFIG } from '../themes';
+import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
 export class PostsService {
     path = '';
     audioFolder = '';
     videoFolder = '';
-    startPath = 'http://localhost:17442/';
-    startPathSSL = 'https://localhost:17442/'
+    startPath = null; // 'http://localhost:17442/';
+    startPathSSL = null; // 'https://localhost:17442/'
     handShakeComplete = false;
     THEMES_CONFIG = THEMES_CONFIG;
     theme;
+    settings_changed = new BehaviorSubject<boolean>(false);
 
-    constructor(private http: HttpClient) {
+    debugMode = false;
+    constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document) {
         console.log('PostsService Initialized...');
+        // this.startPath = window.location.href + '/api/';
+        // this.startPathSSL = window.location.href + '/api/';
+        this.path = this.document.location.origin + '/api/';
+
+        if (isDevMode()) {
+            this.debugMode = true;
+            this.path = 'http://localhost:17442/api/';
+        }
     }
 
     setTheme(theme) {
@@ -43,16 +56,26 @@ export class PostsService {
         return this.http.get(this.startPath + 'audiofolder');
     }
 
-    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string) {
+    // tslint:disable-next-line: max-line-length
+    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
         return this.http.post(this.path + 'tomp3', {url: url,
                                                     maxBitrate: selectedQuality,
-                                                    customQualityConfiguration: customQualityConfiguration});
+                                                    customQualityConfiguration: customQualityConfiguration,
+                                                    customArgs: customArgs,
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
     }
 
-    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string) {
+    // tslint:disable-next-line: max-line-length
+    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
         return this.http.post(this.path + 'tomp4', {url: url,
                                                     selectedHeight: selectedQuality,
-                                                    customQualityConfiguration: customQualityConfiguration});
+                                                    customQualityConfiguration: customQualityConfiguration,
+                                                    customArgs: customArgs,
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
     }
 
     getFileStatusMp3(name: string) {
@@ -66,17 +89,20 @@ export class PostsService {
     loadNavItems() {
         if (isDevMode()) {
             return this.http.get('./assets/default.json');
+        } else {
+            return this.http.get(this.path + 'config');
         }
-        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) {
+    setConfig(config) {
+        return this.http.post(this.path + 'setConfig', {new_config_file: config});
+    }
+
+    deleteFile(name: string, isAudio: boolean, blacklistMode = false) {
         if (isAudio) {
-            return this.http.post(this.path + 'deleteMp3', {name: name});
+            return this.http.post(this.path + 'deleteMp3', {name: name, blacklistMode: blacklistMode});
         } else {
-            return this.http.post(this.path + 'deleteMp4', {name: name});
+            return this.http.post(this.path + 'deleteMp4', {name: name, blacklistMode: blacklistMode});
         }
     }
 
@@ -88,18 +114,35 @@ export class PostsService {
         return this.http.post(this.path + 'getMp4s', {});
     }
 
-    downloadFileFromServer(fileName, type, outputName = null) {
+    downloadFileFromServer(fileName, type, outputName = null, fullPathProvided = null) {
         return this.http.post(this.path + 'downloadFile', {fileNames: fileName,
                                                             type: type,
-                                                            is_playlist: Array.isArray(fileName),
-                                                            outputName: outputName},
+                                                            zip_mode: Array.isArray(fileName),
+                                                            outputName: outputName,
+                                                            fullPathProvided: fullPathProvided},
                                                           {responseType: 'blob'});
     }
 
+    downloadArchive(sub) {
+        return this.http.post(this.path + 'downloadArchive', {sub: sub}, {responseType: 'blob'});
+    }
+
     getFileInfo(fileNames, type, urlMode) {
         return this.http.post(this.path + 'getVideoInfos', {fileNames: fileNames, type: type, urlMode: urlMode});
     }
 
+    isPinSet() {
+        return this.http.post(this.path + 'isPinSet', {});
+    }
+
+    setPin(unhashed_pin) {
+        return this.http.post(this.path + 'setPin', {pin: unhashed_pin});
+    }
+
+    checkPin(unhashed_pin) {
+        return this.http.post(this.path + 'checkPin', {input_pin: unhashed_pin});
+    }
+
     createPlaylist(playlistName, fileNames, type, thumbnailURL) {
         return this.http.post(this.path + 'createPlaylist', {playlistName: playlistName,
                                                             fileNames: fileNames,
@@ -116,6 +159,26 @@ export class PostsService {
     removePlaylist(playlistID, type) {
         return this.http.post(this.path + 'deletePlaylist', {playlistID: playlistID, type: type});
     }
+
+    createSubscription(url, name, timerange = null) {
+        return this.http.post(this.path + 'subscribe', {url: url, name: name, timerange: timerange})
+    }
+
+    unsubscribe(sub, deleteMode = false) {
+        return this.http.post(this.path + 'unsubscribe', {sub: sub, deleteMode: deleteMode})
+    }
+
+    deleteSubscriptionFile(sub, file, deleteForever) {
+        return this.http.post(this.path + 'deleteSubscriptionFile', {sub: sub, file: file, deleteForever: deleteForever})
+    }
+
+    getSubscription(id) {
+        return this.http.post(this.path + 'getSubscription', {id: id});
+    }
+
+    getAllSubscriptions() {
+        return this.http.post(this.path + 'getAllSubscriptions', {});
+    }
 }
 
 

src/app/settings/locales_list.ts

@@ -0,0 +1,735 @@
+/**
+* @author Phil Teare
+* using wikipedia data
+* Link: https://stackoverflow.com/a/4900304
+*/
+export const isoLangs = {
+   'ab': {
+       'name': 'Abkhaz',
+       'nativeName': 'аҧсуа'
+   },
+   'aa': {
+       'name': 'Afar',
+       'nativeName': 'Afaraf'
+   },
+   'af': {
+       'name': 'Afrikaans',
+       'nativeName': 'Afrikaans'
+   },
+   'ak': {
+       'name': 'Akan',
+       'nativeName': 'Akan'
+   },
+   'sq': {
+       'name': 'Albanian',
+       'nativeName': 'Shqip'
+   },
+   'am': {
+       'name': 'Amharic',
+       'nativeName': 'አማርኛ'
+   },
+   'ar': {
+       'name': 'Arabic',
+       'nativeName': 'العربية'
+   },
+   'an': {
+       'name': 'Aragonese',
+       'nativeName': 'Aragonés'
+   },
+   'hy': {
+       'name': 'Armenian',
+       'nativeName': 'Հայերեն'
+   },
+   'as': {
+       'name': 'Assamese',
+       'nativeName': 'অসমীয়া'
+   },
+   'av': {
+       'name': 'Avaric',
+       'nativeName': 'авар мацӀ, магӀарул мацӀ'
+   },
+   'ae': {
+       'name': 'Avestan',
+       'nativeName': 'avesta'
+   },
+   'ay': {
+       'name': 'Aymara',
+       'nativeName': 'aymar aru'
+   },
+   'az': {
+       'name': 'Azerbaijani',
+       'nativeName': 'azərbaycan dili'
+   },
+   'bm': {
+       'name': 'Bambara',
+       'nativeName': 'bamanankan'
+   },
+   'ba': {
+       'name': 'Bashkir',
+       'nativeName': 'башҡорт теле'
+   },
+   'eu': {
+       'name': 'Basque',
+       'nativeName': 'euskara, euskera'
+   },
+   'be': {
+       'name': 'Belarusian',
+       'nativeName': 'Беларуская'
+   },
+   'bn': {
+       'name': 'Bengali',
+       'nativeName': 'বাংলা'
+   },
+   'bh': {
+       'name': 'Bihari',
+       'nativeName': 'भोजपुरी'
+   },
+   'bi': {
+       'name': 'Bislama',
+       'nativeName': 'Bislama'
+   },
+   'bs': {
+       'name': 'Bosnian',
+       'nativeName': 'bosanski jezik'
+   },
+   'br': {
+       'name': 'Breton',
+       'nativeName': 'brezhoneg'
+   },
+   'bg': {
+       'name': 'Bulgarian',
+       'nativeName': 'български език'
+   },
+   'my': {
+       'name': 'Burmese',
+       'nativeName': 'ဗမာစာ'
+   },
+   'ca': {
+       'name': 'Catalan; Valencian',
+       'nativeName': 'Català'
+   },
+   'ch': {
+       'name': 'Chamorro',
+       'nativeName': 'Chamoru'
+   },
+   'ce': {
+       'name': 'Chechen',
+       'nativeName': 'нохчийн мотт'
+   },
+   'ny': {
+       'name': 'Chichewa; Chewa; Nyanja',
+       'nativeName': 'chiCheŵa, chinyanja'
+   },
+   'zh': {
+       'name': 'Chinese',
+       'nativeName': '中文 (Zhōngwén), 汉语, 漢語'
+   },
+   'cv': {
+       'name': 'Chuvash',
+       'nativeName': 'чӑваш чӗлхи'
+   },
+   'kw': {
+       'name': 'Cornish',
+       'nativeName': 'Kernewek'
+   },
+   'co': {
+       'name': 'Corsican',
+       'nativeName': 'corsu, lingua corsa'
+   },
+   'cr': {
+       'name': 'Cree',
+       'nativeName': 'ᓀᐦᐃᔭᐍᐏᐣ'
+   },
+   'hr': {
+       'name': 'Croatian',
+       'nativeName': 'hrvatski'
+   },
+   'cs': {
+       'name': 'Czech',
+       'nativeName': 'česky, čeština'
+   },
+   'da': {
+       'name': 'Danish',
+       'nativeName': 'dansk'
+   },
+   'dv': {
+       'name': 'Divehi; Dhivehi; Maldivian;',
+       'nativeName': 'ދިވެހި'
+   },
+   'nl': {
+       'name': 'Dutch',
+       'nativeName': 'Nederlands, Vlaams'
+   },
+   'en': {
+       'name': 'English',
+       'nativeName': 'English'
+   },
+   'eo': {
+       'name': 'Esperanto',
+       'nativeName': 'Esperanto'
+   },
+   'et': {
+       'name': 'Estonian',
+       'nativeName': 'eesti, eesti keel'
+   },
+   'ee': {
+       'name': 'Ewe',
+       'nativeName': 'Eʋegbe'
+   },
+   'fo': {
+       'name': 'Faroese',
+       'nativeName': 'føroyskt'
+   },
+   'fj': {
+       'name': 'Fijian',
+       'nativeName': 'vosa Vakaviti'
+   },
+   'fi': {
+       'name': 'Finnish',
+       'nativeName': 'suomi, suomen kieli'
+   },
+   'fr': {
+       'name': 'French',
+       'nativeName': 'français, langue française'
+   },
+   'ff': {
+       'name': 'Fula; Fulah; Pulaar; Pular',
+       'nativeName': 'Fulfulde, Pulaar, Pular'
+   },
+   'gl': {
+       'name': 'Galician',
+       'nativeName': 'Galego'
+   },
+   'ka': {
+       'name': 'Georgian',
+       'nativeName': 'ქართული'
+   },
+   'de': {
+       'name': 'German',
+       'nativeName': 'Deutsch'
+   },
+   'el': {
+       'name': 'Greek, Modern',
+       'nativeName': 'Ελληνικά'
+   },
+   'gn': {
+       'name': 'Guaraní',
+       'nativeName': 'Avañeẽ'
+   },
+   'gu': {
+       'name': 'Gujarati',
+       'nativeName': 'ગુજરાતી'
+   },
+   'ht': {
+       'name': 'Haitian; Haitian Creole',
+       'nativeName': 'Kreyòl ayisyen'
+   },
+   'ha': {
+       'name': 'Hausa',
+       'nativeName': 'Hausa, هَوُسَ'
+   },
+   'he': {
+       'name': 'Hebrew (modern)',
+       'nativeName': 'עברית'
+   },
+   'hz': {
+       'name': 'Herero',
+       'nativeName': 'Otjiherero'
+   },
+   'hi': {
+       'name': 'Hindi',
+       'nativeName': 'हिन्दी, हिंदी'
+   },
+   'ho': {
+       'name': 'Hiri Motu',
+       'nativeName': 'Hiri Motu'
+   },
+   'hu': {
+       'name': 'Hungarian',
+       'nativeName': 'Magyar'
+   },
+   'ia': {
+       'name': 'Interlingua',
+       'nativeName': 'Interlingua'
+   },
+   'id': {
+       'name': 'Indonesian',
+       'nativeName': 'Bahasa Indonesia'
+   },
+   'ie': {
+       'name': 'Interlingue',
+       'nativeName': 'Originally called Occidental; then Interlingue after WWII'
+   },
+   'ga': {
+       'name': 'Irish',
+       'nativeName': 'Gaeilge'
+   },
+   'ig': {
+       'name': 'Igbo',
+       'nativeName': 'Asụsụ Igbo'
+   },
+   'ik': {
+       'name': 'Inupiaq',
+       'nativeName': 'Iñupiaq, Iñupiatun'
+   },
+   'io': {
+       'name': 'Ido',
+       'nativeName': 'Ido'
+   },
+   'is': {
+       'name': 'Icelandic',
+       'nativeName': 'Íslenska'
+   },
+   'it': {
+       'name': 'Italian',
+       'nativeName': 'Italiano'
+   },
+   'iu': {
+       'name': 'Inuktitut',
+       'nativeName': 'ᐃᓄᒃᑎᑐᑦ'
+   },
+   'ja': {
+       'name': 'Japanese',
+       'nativeName': '日本語 (にほんご／にっぽんご)'
+   },
+   'jv': {
+       'name': 'Javanese',
+       'nativeName': 'basa Jawa'
+   },
+   'kl': {
+       'name': 'Kalaallisut, Greenlandic',
+       'nativeName': 'kalaallisut, kalaallit oqaasii'
+   },
+   'kn': {
+       'name': 'Kannada',
+       'nativeName': 'ಕನ್ನಡ'
+   },
+   'kr': {
+       'name': 'Kanuri',
+       'nativeName': 'Kanuri'
+   },
+   'ks': {
+       'name': 'Kashmiri',
+       'nativeName': 'कश्मीरी, كشميري‎'
+   },
+   'kk': {
+       'name': 'Kazakh',
+       'nativeName': 'Қазақ тілі'
+   },
+   'km': {
+       'name': 'Khmer',
+       'nativeName': 'ភាសាខ្មែរ'
+   },
+   'ki': {
+       'name': 'Kikuyu, Gikuyu',
+       'nativeName': 'Gĩkũyũ'
+   },
+   'rw': {
+       'name': 'Kinyarwanda',
+       'nativeName': 'Ikinyarwanda'
+   },
+   'ky': {
+       'name': 'Kirghiz, Kyrgyz',
+       'nativeName': 'кыргыз тили'
+   },
+   'kv': {
+       'name': 'Komi',
+       'nativeName': 'коми кыв'
+   },
+   'kg': {
+       'name': 'Kongo',
+       'nativeName': 'KiKongo'
+   },
+   'ko': {
+       'name': 'Korean',
+       'nativeName': '한국어 (韓國語), 조선말 (朝鮮語)'
+   },
+   'ku': {
+       'name': 'Kurdish',
+       'nativeName': 'Kurdî, كوردی‎'
+   },
+   'kj': {
+       'name': 'Kwanyama, Kuanyama',
+       'nativeName': 'Kuanyama'
+   },
+   'la': {
+       'name': 'Latin',
+       'nativeName': 'latine, lingua latina'
+   },
+   'lb': {
+       'name': 'Luxembourgish, Letzeburgesch',
+       'nativeName': 'Lëtzebuergesch'
+   },
+   'lg': {
+       'name': 'Luganda',
+       'nativeName': 'Luganda'
+   },
+   'li': {
+       'name': 'Limburgish, Limburgan, Limburger',
+       'nativeName': 'Limburgs'
+   },
+   'ln': {
+       'name': 'Lingala',
+       'nativeName': 'Lingála'
+   },
+   'lo': {
+       'name': 'Lao',
+       'nativeName': 'ພາສາລາວ'
+   },
+   'lt': {
+       'name': 'Lithuanian',
+       'nativeName': 'lietuvių kalba'
+   },
+   'lu': {
+       'name': 'Luba-Katanga',
+       'nativeName': ''
+   },
+   'lv': {
+       'name': 'Latvian',
+       'nativeName': 'latviešu valoda'
+   },
+   'gv': {
+       'name': 'Manx',
+       'nativeName': 'Gaelg, Gailck'
+   },
+   'mk': {
+       'name': 'Macedonian',
+       'nativeName': 'македонски јазик'
+   },
+   'mg': {
+       'name': 'Malagasy',
+       'nativeName': 'Malagasy fiteny'
+   },
+   'ms': {
+       'name': 'Malay',
+       'nativeName': 'bahasa Melayu, بهاس ملايو‎'
+   },
+   'ml': {
+       'name': 'Malayalam',
+       'nativeName': 'മലയാളം'
+   },
+   'mt': {
+       'name': 'Maltese',
+       'nativeName': 'Malti'
+   },
+   'mi': {
+       'name': 'Māori',
+       'nativeName': 'te reo Māori'
+   },
+   'mr': {
+       'name': 'Marathi (Marāṭhī)',
+       'nativeName': 'मराठी'
+   },
+   'mh': {
+       'name': 'Marshallese',
+       'nativeName': 'Kajin M̧ajeļ'
+   },
+   'mn': {
+       'name': 'Mongolian',
+       'nativeName': 'монгол'
+   },
+   'na': {
+       'name': 'Nauru',
+       'nativeName': 'Ekakairũ Naoero'
+   },
+   'nv': {
+       'name': 'Navajo, Navaho',
+       'nativeName': 'Diné bizaad, Dinékʼehǰí'
+   },
+   'nb': {
+       'name': 'Norwegian Bokmål',
+       'nativeName': 'Norsk bokmål'
+   },
+   'nd': {
+       'name': 'North Ndebele',
+       'nativeName': 'isiNdebele'
+   },
+   'ne': {
+       'name': 'Nepali',
+       'nativeName': 'नेपाली'
+   },
+   'ng': {
+       'name': 'Ndonga',
+       'nativeName': 'Owambo'
+   },
+   'nn': {
+       'name': 'Norwegian Nynorsk',
+       'nativeName': 'Norsk nynorsk'
+   },
+   'no': {
+       'name': 'Norwegian',
+       'nativeName': 'Norsk'
+   },
+   'ii': {
+       'name': 'Nuosu',
+       'nativeName': 'ꆈꌠ꒿ Nuosuhxop'
+   },
+   'nr': {
+       'name': 'South Ndebele',
+       'nativeName': 'isiNdebele'
+   },
+   'oc': {
+       'name': 'Occitan',
+       'nativeName': 'Occitan'
+   },
+   'oj': {
+       'name': 'Ojibwe, Ojibwa',
+       'nativeName': 'ᐊᓂᔑᓈᐯᒧᐎᓐ'
+   },
+   'cu': {
+       'name': 'Old Church Slavonic, Church Slavic, Church Slavonic, Old Bulgarian, Old Slavonic',
+       'nativeName': 'ѩзыкъ словѣньскъ'
+   },
+   'om': {
+       'name': 'Oromo',
+       'nativeName': 'Afaan Oromoo'
+   },
+   'or': {
+       'name': 'Oriya',
+       'nativeName': 'ଓଡ଼ିଆ'
+   },
+   'os': {
+       'name': 'Ossetian, Ossetic',
+       'nativeName': 'ирон æвзаг'
+   },
+   'pa': {
+       'name': 'Panjabi, Punjabi',
+       'nativeName': 'ਪੰਜਾਬੀ, پنجابی‎'
+   },
+   'pi': {
+       'name': 'Pāli',
+       'nativeName': 'पाऴि'
+   },
+   'fa': {
+       'name': 'Persian',
+       'nativeName': 'فارسی'
+   },
+   'pl': {
+       'name': 'Polish',
+       'nativeName': 'polski'
+   },
+   'ps': {
+       'name': 'Pashto, Pushto',
+       'nativeName': 'پښتو'
+   },
+   'pt': {
+       'name': 'Portuguese',
+       'nativeName': 'Português'
+   },
+   'qu': {
+       'name': 'Quechua',
+       'nativeName': 'Runa Simi, Kichwa'
+   },
+   'rm': {
+       'name': 'Romansh',
+       'nativeName': 'rumantsch grischun'
+   },
+   'rn': {
+       'name': 'Kirundi',
+       'nativeName': 'kiRundi'
+   },
+   'ro': {
+       'name': 'Romanian, Moldavian, Moldovan',
+       'nativeName': 'română'
+   },
+   'ru': {
+       'name': 'Russian',
+       'nativeName': 'русский язык'
+   },
+   'sa': {
+       'name': 'Sanskrit (Saṁskṛta)',
+       'nativeName': 'संस्कृतम्'
+   },
+   'sc': {
+       'name': 'Sardinian',
+       'nativeName': 'sardu'
+   },
+   'sd': {
+       'name': 'Sindhi',
+       'nativeName': 'सिन्धी, سنڌي، سندھی‎'
+   },
+   'se': {
+       'name': 'Northern Sami',
+       'nativeName': 'Davvisámegiella'
+   },
+   'sm': {
+       'name': 'Samoan',
+       'nativeName': 'gagana faa Samoa'
+   },
+   'sg': {
+       'name': 'Sango',
+       'nativeName': 'yângâ tî sängö'
+   },
+   'sr': {
+       'name': 'Serbian',
+       'nativeName': 'српски језик'
+   },
+   'gd': {
+       'name': 'Scottish Gaelic; Gaelic',
+       'nativeName': 'Gàidhlig'
+   },
+   'sn': {
+       'name': 'Shona',
+       'nativeName': 'chiShona'
+   },
+   'si': {
+       'name': 'Sinhala, Sinhalese',
+       'nativeName': 'සිංහල'
+   },
+   'sk': {
+       'name': 'Slovak',
+       'nativeName': 'slovenčina'
+   },
+   'sl': {
+       'name': 'Slovene',
+       'nativeName': 'slovenščina'
+   },
+   'so': {
+       'name': 'Somali',
+       'nativeName': 'Soomaaliga, af Soomaali'
+   },
+   'st': {
+       'name': 'Southern Sotho',
+       'nativeName': 'Sesotho'
+   },
+   'es': {
+       'name': 'Spanish; Castilian',
+       'nativeName': 'español'
+   },
+   'su': {
+       'name': 'Sundanese',
+       'nativeName': 'Basa Sunda'
+   },
+   'sw': {
+       'name': 'Swahili',
+       'nativeName': 'Kiswahili'
+   },
+   'ss': {
+       'name': 'Swati',
+       'nativeName': 'SiSwati'
+   },
+   'sv': {
+       'name': 'Swedish',
+       'nativeName': 'svenska'
+   },
+   'ta': {
+       'name': 'Tamil',
+       'nativeName': 'தமிழ்'
+   },
+   'te': {
+       'name': 'Telugu',
+       'nativeName': 'తెలుగు'
+   },
+   'tg': {
+       'name': 'Tajik',
+       'nativeName': 'тоҷикӣ, toğikī, تاجیکی‎'
+   },
+   'th': {
+       'name': 'Thai',
+       'nativeName': 'ไทย'
+   },
+   'ti': {
+       'name': 'Tigrinya',
+       'nativeName': 'ትግርኛ'
+   },
+   'bo': {
+       'name': 'Tibetan Standard, Tibetan, Central',
+       'nativeName': 'བོད་ཡིག'
+   },
+   'tk': {
+       'name': 'Turkmen',
+       'nativeName': 'Türkmen, Түркмен'
+   },
+   'tl': {
+       'name': 'Tagalog',
+       'nativeName': 'Wikang Tagalog, ᜏᜒᜃᜅ᜔ ᜆᜄᜎᜓᜄ᜔'
+   },
+   'tn': {
+       'name': 'Tswana',
+       'nativeName': 'Setswana'
+   },
+   'to': {
+       'name': 'Tonga (Tonga Islands)',
+       'nativeName': 'faka Tonga'
+   },
+   'tr': {
+       'name': 'Turkish',
+       'nativeName': 'Türkçe'
+   },
+   'ts': {
+       'name': 'Tsonga',
+       'nativeName': 'Xitsonga'
+   },
+   'tt': {
+       'name': 'Tatar',
+       'nativeName': 'татарча, tatarça, تاتارچا‎'
+   },
+   'tw': {
+       'name': 'Twi',
+       'nativeName': 'Twi'
+   },
+   'ty': {
+       'name': 'Tahitian',
+       'nativeName': 'Reo Tahiti'
+   },
+   'ug': {
+       'name': 'Uighur, Uyghur',
+       'nativeName': 'Uyƣurqə, ئۇيغۇرچە‎'
+   },
+   'uk': {
+       'name': 'Ukrainian',
+       'nativeName': 'українська'
+   },
+   'ur': {
+       'name': 'Urdu',
+       'nativeName': 'اردو'
+   },
+   'uz': {
+       'name': 'Uzbek',
+       'nativeName': 'zbek, Ўзбек, أۇزبېك‎'
+   },
+   've': {
+       'name': 'Venda',
+       'nativeName': 'Tshivenḓa'
+   },
+   'vi': {
+       'name': 'Vietnamese',
+       'nativeName': 'Tiếng Việt'
+   },
+   'vo': {
+       'name': 'Volapük',
+       'nativeName': 'Volapük'
+   },
+   'wa': {
+       'name': 'Walloon',
+       'nativeName': 'Walon'
+   },
+   'cy': {
+       'name': 'Welsh',
+       'nativeName': 'Cymraeg'
+   },
+   'wo': {
+       'name': 'Wolof',
+       'nativeName': 'Wollof'
+   },
+   'fy': {
+       'name': 'Western Frisian',
+       'nativeName': 'Frysk'
+   },
+   'xh': {
+       'name': 'Xhosa',
+       'nativeName': 'isiXhosa'
+   },
+   'yi': {
+       'name': 'Yiddish',
+       'nativeName': 'ייִדיש'
+   },
+   'yo': {
+       'name': 'Yoruba',
+       'nativeName': 'Yorùbá'
+   },
+   'za': {
+       'name': 'Zhuang, Chuang',
+       'nativeName': 'Saɯ cueŋƅ, Saw cuengh'
+   }
+};

src/app/settings/settings.component.html

@@ -0,0 +1,292 @@
+<h4 i18n="Settings title" mat-dialog-title>Settings</h4>
+<!-- <ng-container i18n="Allow subscriptions setting"></ng-container> -->
+<mat-dialog-content>
+<!-- Language -->
+<div>
+    Language:&nbsp;&nbsp;&nbsp;<mat-select class="locale-select" (selectionChange)="localeSelectChanged($event.value)" [(value)]="initialLocale">
+        <mat-option *ngFor="let locale of supported_locales" [value]="locale">
+            {{all_locales[locale]['nativeName']}}
+        </mat-option>
+    </mat-select>
+</div>
+
+<!-- Host -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Host settings title">Host</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input [(ngModel)]="new_config['Host']['url']" matInput placeholder="URL" i18n-placeholder="URL input placeholder" required>
+                    <mat-hint><ng-container i18n="URL setting input hint">URL this app will be accessed from, without the port.</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+            <div class="col-12 mt-4">
+                <mat-form-field color="accent">
+                    <input [(ngModel)]="new_config['Host']['port']" matInput placeholder="Port" i18n-placeholder="Port input placeholder" required>
+                    <mat-hint><ng-container i18n="Port setting input hint">The desired port. Default is 17442.</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+            
+        </div>
+    </div>
+</mat-expansion-panel>
+
+<!-- Encryption -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Encryption settings title">Encryption</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Encryption']['use-encryption']"><ng-container i18n="Use encryption setting">Use encryption</ng-container></mat-checkbox>
+            </div>
+            
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['cert-file-path']" matInput placeholder="Cert file path" i18n-placeholder="Cert file path input placeholder">
+                </mat-form-field>
+            </div>
+            
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['key-file-path']" matInput placeholder="Key file path" i18n-placeholder="Key file path input placeholder">
+                </mat-form-field>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+
+<!-- Downloader -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Downloader settings title">Downloader</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input matInput [(ngModel)]="new_config['Downloader']['path-audio']" placeholder="Audio folder path" i18n-placeholder="Audio folder path input placeholder" required>
+                    <mat-hint><ng-container i18n="Aduio path setting input hint">Path for audio only downloads. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+            
+            <div class="col-12 mt-4">
+                <mat-form-field color="accent">
+                    <input matInput [(ngModel)]="new_config['Downloader']['path-video']" placeholder="Video folder path" i18n-placeholder="Video folder path input placeholder" required>
+                    <mat-hint><ng-container i18n="Video path setting input hint">Path for video downloads. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+
+            <div class="col-12 mt-4">
+                <mat-form-field color="accent">
+                    <textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Custom args" i18n-placeholder="Custom args input placeholder"></textarea>
+                    <mat-hint><ng-container i18n="Custom args setting input hint">Global custom args for downloads on the home page.</ng-container></mat-hint>
+                </mat-form-field>
+                <button style="margin-left: 12px;" (click)="openArgsModifierDialog()" mat-stroked-button>Modify args</button>
+            </div>
+
+            <div class="col-12 mt-4">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Downloader']['use_youtubedl_archive']"><ng-container i18n="Use youtubedl archive setting">Use youtube-dl archive</ng-container></mat-checkbox>
+                <p>Note: This setting only applies to downloads on the Home page. If you would like to use youtube-dl archive functionality in subscriptions, head down to the Subscriptions section.</p>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+
+<!-- Extra -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Extra settings title">Extra</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input [(ngModel)]="new_config['Extra']['title_top']" matInput placeholder="Top title" i18n-placeholder="Top title input placeholder" required>
+                    <mat-hint></mat-hint>
+                </mat-form-field>
+            </div>
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['file_manager_enabled']"><ng-container i18n="File manager enabled setting">File manager enabled</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_quality_select']"><ng-container i18n="Allow quality seelct setting">Allow quality select</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['download_only_mode']"><ng-container i18n="Download only mode setting">Download only mode</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_multi_download_mode']"><ng-container i18n="Allow multi-downloade mode setting">Allow multi-download mode</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['settings_pin_required']"><ng-container i18n="Require pin for settings setting">Require pin for settings</ng-container></mat-checkbox>
+                <button style="margin-left: 15px;" mat-stroked-button (click)="setNewPin()" [disabled]="!new_config['Extra']['settings_pin_required']"><ng-container i18n="Set new pin button">Set New Pin</ng-container></button>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+
+<!-- API -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="API settings title">API</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['API']['use_youtube_API']"><ng-container i18n="Use YouTube API setting">Use YouTube API</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12">
+                <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" i18n-placeholder="Youtube API Key setting placeholder" required>
+                    <mat-hint><a target="_blank" href="https://developers.google.com/youtube/v3/getting-started"><ng-container i18n="Youtube API Key setting hint">Generating a key is easy!</ng-container></a></mat-hint>
+                </mat-form-field>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+
+<!-- Themes -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Themes settings title">Themes</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-select color="accent" style="width: 100px" [(ngModel)]="new_config['Themes']['default_theme']">
+                    <mat-option value="default"><ng-container i18n="Default theme label">Default</ng-container></mat-option>
+                    <mat-option value="dark"><ng-container i18n="Dark theme label">Dark</ng-container></mat-option>
+                </mat-select>
+            </div>
+            
+            <div class="col-12 mt-4">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Themes']['allow_theme_change']"><ng-container i18n="Allow theme change setting">Allow theme change</ng-container></mat-checkbox>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+
+<!-- Subscriptions -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Subscriptions settings title">Subscriptions</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Subscriptions']['allow_subscriptions']"><ng-container i18n="Allow subscriptions setting">Allow subscriptions</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12">
+                <mat-form-field color="accent">
+                    <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_base_path']" matInput placeholder="Subscriptions base path" i18n-placeholder="Subscriptions base path input setting placeholder">
+                    <mat-hint><ng-container i18n="Subscriptions base path setting input hint">Base path for videos from your subscribed channels and playlists. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+            <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" i18n-placeholder="Check interval input setting placeholder">
+                    <mat-hint><ng-container i18n="Check interval setting input hint">Unit is seconds, only include numbers.</ng-container></mat-hint>
+                </mat-form-field>
+            </div>
+            <div class="col-12 mt-4">
+                <mat-checkbox color="accent" [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_use_youtubedl_archive']"><ng-container i18n="Use youtube-dl archive setting">Use youtube-dl archive</ng-container></mat-checkbox>
+                <p><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"><ng-container i18n="youtube-dl archive explanation prefix link">With youtube-dl's archive</ng-container></a>&nbsp;<ng-container i18n="youtube-dl archive explanation middle">feature, downloaded videos from your subscriptions get recorded in a text file in the subscriptions archive sub-directory.</ng-container></p>
+                <p><ng-container i18n="youtube-dl archive explanation suffix">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.</ng-container></p>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+
+<!-- Extensions -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Extensions settings title">Extensions</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <h6>Chrome</h6>
+                <p><a href="https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/chrome-extension/youtubedl-material-chrome-extension.zip?raw=true"><ng-container i18n="Chrome ext click here">Click here</ng-container></a>&nbsp;<ng-container i18n="Chrome click here suffix">to download the official YoutubeDL-Material Chrome extension manually.</ng-container></p>
+                <p><ng-container i18n="Chrome setup suffix">You must manually load the extension and modify the extension's settings to set the frontend URL.</ng-container></p>
+                <mat-divider class="ext-divider"></mat-divider>
+            </div>
+            <div class="col-12">
+                <h6>Firefox</h6>
+                <p><a href="https://addons.mozilla.org/en-US/firefox/addon/youtubedl-material/" target="_blank"><ng-container i18n="Firefox ext click here">Click here</ng-container></a>&nbsp;<ng-container i18n="Firefox click here suffix">to install the official YoutubeDL-Material Firefox extension right off the Firefox extensions page.</ng-container></p>
+                <p><a href="https://github.com/Tzahi12345/YoutubeDL-Material/wiki/Firefox-Extension" target="_blank"><ng-container i18n="Firefox setup prefix link">Detailed setup instructions.</ng-container></a>&nbsp;<ng-container i18n="Firefox setup suffix">Not much is required other than changing the extension's settings to set the frontend URL.</ng-container></p>
+                <mat-divider class="ext-divider"></mat-divider>
+            </div>
+            <div class="col-12">
+                <h6>Bookmarklet</h6>
+                <p><ng-container i18n="Bookmarklet instructions">Drag the link below to your bookmarks, and you're good to go! Just navigate to the YouTube video you'd like to download, and click the bookmark.</ng-container></p>
+                <!--<button style="margin-bottom: 5px;" mat-stroked-button color="accent" (click)="generateBookmarklet()">Generate bookmarklet</button>-->
+                <p><a [href]="generated_bookmarklet_code" target="_blank">YTDL-Bookmarklet</a></p>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+
+
+<!-- Advanced -->
+<mat-expansion-panel class="settings-expansion-panel">
+    <mat-expansion-panel-header>
+        <mat-panel-title>
+            <ng-container i18n="Advanced settings title">Advanced</ng-container>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <div *ngIf="new_config" class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['use_default_downloading_agent']"><ng-container i18n="Use default downloading agent setting">Use default downloading agent</ng-container></mat-checkbox>
+            </div>
+            <div class="col-12 my-2">
+                <mat-select [disabled]="new_config['Advanced']['use_default_downloading_agent']" color="accent" style="width: 200px" [(ngModel)]="new_config['Advanced']['custom_downloading_agent']">
+                    <mat-option value="">Select a downloader</mat-option>
+                    <mat-option value="aria2c">aria2c</mat-option>
+                    <mat-option value="avconv">avconv</mat-option>
+                    <mat-option value="axel">axel</mat-option>
+                    <mat-option value="curl">curl</mat-option>
+                    <mat-option value="ffmpeg">ffmpeg</mat-option>
+                    <mat-option value="httpie">httpie</mat-option>
+                    <mat-option value="wget">wget</mat-option>
+                </mat-select>
+            </div>
+            <div class="col-12 mt-2">
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['allow_advanced_download']"><ng-container i18n="Allow advanced downloading setting">Allow advanced download</ng-container></mat-checkbox>
+            </div>
+        </div>
+    </div>
+</mat-expansion-panel>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <div style="margin-bottom: 10px;">
+        <button color="accent" (click)="saveSettings()" [disabled]="settingsSame()" mat-raised-button><mat-icon>done</mat-icon>&nbsp;&nbsp;
+            <ng-container i18n="Settings save button">Save</ng-container>
+        </button>
+        <button mat-flat-button [mat-dialog-close]="false"><mat-icon>cancel</mat-icon>&nbsp;&nbsp;
+            <ng-container i18n="Settings cancel button">Cancel</ng-container>
+        </button>
+    </div>
+</mat-dialog-actions>

src/app/settings/settings.component.scss

@@ -0,0 +1,12 @@
+.settings-expansion-panel {
+    margin-bottom: 20px;
+}
+
+.locale-select {
+    margin-bottom: 10px;
+    width: 130px;
+}
+
+.ext-divider {
+    margin-bottom: 14px;
+}

src/app/settings/settings.component.spec.ts

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

src/app/settings/settings.component.ts

@@ -0,0 +1,128 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { CheckOrSetPinDialogComponent } from 'app/dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
+import { isoLangs } from './locales_list';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import {DomSanitizer} from '@angular/platform-browser';
+import { MatDialog } from '@angular/material/dialog';
+import { ArgModifierDialogComponent } from 'app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+  all_locales = isoLangs;
+  supported_locales = ['en', 'es'];
+  initialLocale = localStorage.getItem('locale');
+
+  initial_config = null;
+  new_config = null
+  loading_config = false;
+  generated_bookmarklet_code = null;
+
+  constructor(private postsService: PostsService, private snackBar: MatSnackBar, private sanitizer: DomSanitizer,
+    private dialog: MatDialog) { }
+
+  ngOnInit() {
+    this.getConfig();
+
+    this.generated_bookmarklet_code = this.sanitizer.bypassSecurityTrustUrl(this.generateBookmarkletCode());
+  }
+
+  getConfig() {
+    this.loading_config = true;
+    this.postsService.loadNavItems().subscribe(res => {
+      this.loading_config = false;
+      // successfully loaded config
+
+      this.initial_config = !this.postsService.debugMode ? res['config_file']['YoutubeDLMaterial'] : res['YoutubeDLMaterial'];
+      this.new_config = JSON.parse(JSON.stringify(this.initial_config));
+    });
+  }
+
+  settingsSame() {
+    return JSON.stringify(this.new_config) === JSON.stringify(this.initial_config);
+  }
+
+  saveSettings() {
+    const settingsToSave = {'YoutubeDLMaterial': this.new_config};
+    this.postsService.setConfig(settingsToSave).subscribe(res => {
+      if (res['success']) {
+        // sets new config as old config
+        this.postsService.settings_changed.next(true);
+        this.initial_config = JSON.parse(JSON.stringify(this.new_config));
+      }
+    }, err => {
+      console.error('Failed to save config!');
+    })
+  }
+
+  setNewPin() {
+    const dialogRef = this.dialog.open(CheckOrSetPinDialogComponent, {
+      data: {
+        resetMode: true
+      }
+    });
+  }
+
+  localeSelectChanged(new_val) {
+    localStorage.setItem('locale', new_val);
+    this.openSnackBar('Language successfully changed! Reload to update the page.')
+  }
+
+  generateBookmarklet() {
+    this.bookmarksite('YTDL-Material', this.generated_bookmarklet_code);
+  }
+
+  generateBookmarkletCode() {
+    const currentURL = window.location.href.split('#')[0];
+    const homePageWithArgsURL = currentURL + '#/home;url=';
+    const bookmarkletCodeInside = `'${homePageWithArgsURL}' + window.location`
+    const bookmarkletCode = `javascript:(function()%7Bwindow.open('${homePageWithArgsURL}' + encodeURIComponent(window.location))%7D)()`;
+    return bookmarkletCode;
+  }
+
+  // not currently functioning on most platforms. hence not in use
+  bookmarksite(title, url) {
+    // Internet Explorer
+    if (document.all) {
+        window['external']['AddFavorite'](url, title);
+    } else if (window['chrome']) {
+        // Google Chrome
+       this.openSnackBar('Chrome users must drag the \'Alternate URL\' link to your bookmarks.');
+    } else if (window['sidebar']) {
+        // Firefox
+        window['sidebar'].addPanel(title, url, '');
+    } else if (window['opera'] && window.print) {
+        // Opera
+       const elem = document.createElement('a');
+       elem.setAttribute('href', url);
+       elem.setAttribute('title', title);
+       elem.setAttribute('rel', 'sidebar');
+       elem.click();
+    }
+ }
+
+ openArgsModifierDialog() {
+   const dialogRef = this.dialog.open(ArgModifierDialogComponent, {
+     data: {
+      initial_args: this.new_config['Downloader']['custom_args']
+     }
+   });
+   dialogRef.afterClosed().subscribe(new_args => {
+     if (new_args) {
+      this.new_config['Downloader']['custom_args'] = new_args;
+     }
+   });
+ }
+
+  // snackbar helper
+  public openSnackBar(message: string, action: string = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}

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

@@ -0,0 +1,20 @@
+<div style="position: relative; width: fit-content;">
+    <div class="duration-time">
+        <ng-container i18n="Video duration label">Length:</ng-container>&nbsp;{{formattedDuration}}
+    </div>
+    <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+    <mat-menu #action_menu="matMenu">
+        <button (click)="openSubscriptionInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Subscription video info button">Info</ng-container></button>
+        <button (click)="deleteAndRedownload()" mat-menu-item><mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container></button>
+        <button (click)="deleteForever()" mat-menu-item *ngIf="sub.archive && use_youtubedl_archive"><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container></button>
+    </mat-menu>
+    <mat-card (click)="goToFile()" matRipple class="example-card mat-elevation-z6">
+        <div style="padding:5px">
+            <div *ngIf="!image_errored && file.thumbnailURL" class="img-div">
+                <img class="image" (error)="onImgError($event)" [src]="file.thumbnailURL" alt="Thumbnail">
+            </div>
+
+            <span class="max-two-lines"><strong>{{file.title}}</strong></span>      
+        </div>
+    </mat-card>
+</div>

src/app/subscription/subscription-file-card/subscription-file-card.component.scss

@@ -0,0 +1,76 @@
+.example-card {
+    width: 200px;
+    height: 200px;
+    padding: 0px;
+    cursor: pointer;
+  }
+  
+  .menuButton {
+    right: 0px;
+    top: -1px;
+    position: absolute;
+    z-index: 999;
+    
+  }
+  
+  /* Coerce the <span> icon container away from display:inline */
+  .mat-icon-button .mat-button-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .image {
+    width: 200px;
+    height: 112.5px;
+    object-fit: cover;
+  }
+  
+  .example-full-width-height {
+    width: 100%;
+    height: 100%
+  }
+  
+  .centered {
+    margin: 0 auto;
+    top: 50%;
+    left: 50%;
+  }
+  
+  .img-div {
+    max-height: 80px;
+    padding: 0px;
+    margin: 32px 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;
+    bottom: 5px;
+    position: absolute;
+  }
+
+  .duration-time {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    z-index: 99999;
+  }
+  
+  @media (max-width: 576px){
+   
+    .example-card {
+      width: 175px !important;
+    }
+
+    .image {
+        width: 175px;
+    }
+     
+  }

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

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

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

@@ -0,0 +1,107 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { PostsService } from 'app/posts.services';
+import { MatDialog } from '@angular/material/dialog';
+import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';
+
+@Component({
+  selector: 'app-subscription-file-card',
+  templateUrl: './subscription-file-card.component.html',
+  styleUrls: ['./subscription-file-card.component.scss']
+})
+export class SubscriptionFileCardComponent implements OnInit {
+  image_errored = false;
+  image_loaded = false;
+
+  scrollSubject;
+  scrollAndLoad;
+
+  formattedDuration = null;
+
+  @Input() file;
+  @Input() sub;
+  @Input() use_youtubedl_archive = false;
+
+  @Output() goToFileEmit = new EventEmitter<any>();
+  @Output() reloadSubscription = new EventEmitter<boolean>();
+
+  constructor(private snackBar: MatSnackBar, private postsService: PostsService, private dialog: MatDialog) {
+    this.scrollSubject = new Subject();
+    this.scrollAndLoad = Observable.merge(
+      Observable.fromEvent(window, 'scroll'),
+      this.scrollSubject
+    );
+  }
+
+  ngOnInit() {
+    if (this.file.duration) {
+      this.formattedDuration = fancyTimeFormat(this.file.duration);
+    }
+  }
+
+  onImgError(event) {
+    this.image_errored = true;
+  }
+
+  onHoverResponse() {
+    this.scrollSubject.next();
+  }
+
+  imageLoaded(loaded) {
+    this.image_loaded = true;
+  }
+
+  goToFile() {
+    this.goToFileEmit.emit(this.file.id);
+  }
+
+  openSubscriptionInfoDialog() {
+    const dialogRef = this.dialog.open(VideoInfoDialogComponent, {
+      data: {
+        file: this.file,
+      },
+      minWidth: '50vw'
+    });
+  }
+
+  deleteAndRedownload() {
+    this.postsService.deleteSubscriptionFile(this.sub, this.file.id, false).subscribe(res => {
+      this.reloadSubscription.emit(true);
+      this.openSnackBar(`Successfully deleted file: '${this.file.id}'`, 'Dismiss.');
+    });
+  }
+
+  deleteForever() {
+    this.postsService.deleteSubscriptionFile(this.sub, this.file.id, true).subscribe(res => {
+      this.reloadSubscription.emit(true);
+      this.openSnackBar(`Successfully deleted file: '${this.file.id}'`, 'Dismiss.');
+    });
+  }
+
+  public openSnackBar(message: string, action: string) {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}
+
+function fancyTimeFormat(time) {
+    // Hours, minutes and seconds
+    const hrs = ~~(time / 3600);
+    const mins = ~~((time % 3600) / 60);
+    const secs = ~~time % 60;
+
+    // Output like "1:01" or "4:03:59" or "123:03:59"
+    let ret = '';
+
+    if (hrs > 0) {
+        ret += '' + hrs + ':' + (mins < 10 ? '0' : '');
+    }
+
+    ret += '' + mins + ':' + (secs < 10 ? '0' : '');
+    ret += '' + secs;
+    return ret;
+}

src/app/subscription/subscription/subscription.component.html

@@ -0,0 +1,46 @@
+<div style="margin-top: 14px;">
+    <button class="back-button" (click)="goBack()" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
+    <div style="margin-bottom: 15px;">
+        <h2 style="text-align: center;" *ngIf="subscription">
+            {{subscription.name}}
+        </h2>
+    </div>
+    <mat-divider style="width: 80%; margin: 0 auto"></mat-divider>
+    <br/>
+
+    <div *ngIf="subscription">
+        <div class="flex-grid">
+            <div class="filter-select-parent">
+                <div style="display: inline-block;">
+                    <mat-select style="width: 110px;" [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
+                        <mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
+                            {{filterOption['value']['label']}}
+                        </mat-option>
+                    </mat-select>
+                </div>
+                <div style="display: inline-block;">
+                    <button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+                </div>
+            </div>
+            <div class="col">
+            </div>
+            <div class="col">
+                <h4 i18n="Subscription videos title" style="text-align: center; margin-bottom: 20px;">Videos</h4>
+            </div>
+            <div style="top: -12px;" class="col">
+                <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
+                    <input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Subscription videos search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
+                    <mat-icon matSuffix>search</mat-icon>
+                </mat-form-field>
+            </div>
+        </div>
+        <div class="container">
+            <div class="row justify-content-center">
+                <div *ngFor="let file of filtered_files" class="col-6 col-lg-4 mb-2 mt-2 sub-file-col">
+                    <app-subscription-file-card (reloadSubscription)="getSubscription()" (goToFileEmit)="goToFile($event)" [file]="file" [sub]="subscription" [use_youtubedl_archive]="use_youtubedl_archive"></app-subscription-file-card>
+                </div>
+            </div>
+        </div>
+    </div>
+    <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>
+</div>

src/app/subscription/subscription/subscription.component.scss

@@ -0,0 +1,64 @@
+.sub-file-col {
+    max-width: 240px;
+}
+
+.back-button {
+    float: left;
+    position: absolute;
+    left: 15px;
+}
+
+.filter-select-parent {
+    position: absolute;
+    top: 0px;
+    left: 20px;
+    display: block;
+}
+
+.search-bar {
+    transition: all .5s ease;
+    position: relative;
+    float: right;
+}
+ 
+.search-bar-unfocused {
+    width: 100px;
+}
+
+.search-input {
+    transition: all .5s ease;
+}
+
+.search-bar-focused {
+    width: 100%;
+}
+
+.flex-grid {
+    width: 100%;
+    display: block;
+    position: relative;
+}
+
+.col {
+    width: 33%;
+    display: inline-block;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    bottom: 3px;
+    left: 3px;
+    position: absolute;
+}
+
+.save-button {
+    right: 25px;
+    position: absolute;
+    bottom: 25px;
+}
+
+.save-icon {
+    bottom: 1px;
+    position: relative;
+}

src/app/subscription/subscription/subscription.component.spec.ts

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

src/app/subscription/subscription/subscription.component.ts

@@ -0,0 +1,143 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-subscription',
+  templateUrl: './subscription.component.html',
+  styleUrls: ['./subscription.component.scss']
+})
+export class SubscriptionComponent implements OnInit {
+
+  id = null;
+  subscription = null;
+  files: any[] = null;
+  filtered_files: any[] = null;
+  use_youtubedl_archive = false;
+  search_mode = false;
+  search_text = '';
+  searchIsFocused = false;
+  descendingMode = true;
+  filterProperties = {
+    'upload_date': {
+      'key': 'upload_date',
+      'label': 'Upload Date',
+      'property': 'upload_date'
+    },
+    'name': {
+      'key': 'name',
+      'label': 'Name',
+      'property': 'title'
+    },
+    'file_size': {
+      'key': 'file_size',
+      'label': 'File Size',
+      'property': 'size'
+    },
+    'duration': {
+      'key': 'duration',
+      'label': 'Duration',
+      'property': 'duration'
+    }
+  };
+  filterProperty = this.filterProperties['upload_date'];
+  downloading = false;
+
+  constructor(private postsService: PostsService, private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit() {
+    if (this.route.snapshot.paramMap.get('id')) {
+      this.id = this.route.snapshot.paramMap.get('id');
+
+      this.getSubscription();
+      this.getConfig();
+    }
+
+    // set filter property to cached
+    const cached_filter_property = localStorage.getItem('filter_property');
+    if (cached_filter_property && this.filterProperties[cached_filter_property]) {
+      this.filterProperty = this.filterProperties[cached_filter_property];
+    }
+  }
+
+  goBack() {
+    this.router.navigate(['/subscriptions']);
+  }
+
+  getSubscription() {
+    this.postsService.getSubscription(this.id).subscribe(res => {
+      this.subscription = res['subscription'];
+      this.files = res['files'];
+      if (this.search_mode) {
+        this.filterFiles(this.search_text);
+      } else {
+        this.filtered_files = this.files;
+      }
+      this.filterByProperty(this.filterProperty['property']);
+    });
+  }
+
+  getConfig() {
+    this.postsService.loadNavItems().subscribe(res => {
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
+      this.use_youtubedl_archive = result['YoutubeDLMaterial']['Subscriptions']['subscriptions_use_youtubedl_archive'];
+    });
+  }
+
+  goToFile(name) {
+    localStorage.setItem('player_navigator', this.router.url);
+    this.router.navigate(['/player', {fileNames: name, type: 'subscription', subscriptionName: this.subscription.name,
+                                      subPlaylist: this.subscription.isPlaylist}]);
+  }
+
+  onSearchInputChanged(newvalue) {
+    if (newvalue.length > 0) {
+      this.search_mode = true;
+      this.filterFiles(newvalue);
+    } else {
+      this.search_mode = false;
+    }
+  }
+
+  private filterFiles(value: string) {
+    const filterValue = value.toLowerCase();
+    this.filtered_files = this.files.filter(option => option.id.toLowerCase().includes(filterValue));
+  }
+
+  filterByProperty(prop) {
+    if (this.descendingMode) {
+      this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? -1 : 1));
+    } else {
+      this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? 1 : -1));
+    }
+  }
+
+  filterOptionChanged(value) {
+    // this.filterProperty = value;
+    this.filterByProperty(value['property']);
+    localStorage.setItem('filter_property', value['key']);
+  }
+
+  toggleModeChange() {
+    this.descendingMode = !this.descendingMode;
+    this.filterByProperty(this.filterProperty['property']);
+  }
+
+  downloadContent() {
+    const fileNames = [];
+    for (let i = 0; i < this.files.length; i++) {
+      fileNames.push(this.files[i].path);
+    }
+
+    this.downloading = true;
+    this.postsService.downloadFileFromServer(fileNames, 'video', this.subscription.name, true).subscribe(res => {
+      this.downloading = false;
+      const blob: Blob = res;
+      saveAs(blob, this.subscription.name + '.zip');
+    }, err => {
+      console.log(err);
+      this.downloading = false;
+    });
+  }
+
+}

src/app/subscriptions/subscriptions.component.html

@@ -0,0 +1,50 @@
+<br/>
+
+<h2 i18n="Subscriptions title" style="text-align: center; margin-bottom: 15px;">Your subscriptions</h2>
+
+<mat-divider style="width: 80%; margin: 0 auto"></mat-divider>
+<br/>
+
+<h4 i18n="Subscriptions channels title" style="text-align: center;">Channels</h4>
+<mat-nav-list class="sub-nav-list">
+    <mat-list-item *ngFor="let sub of channel_subscriptions">
+        <a class="a-list-item" matLine (click)="goToSubscription(sub)" href="javascript:void(0)">
+            <strong *ngIf="sub.name">{{ sub.name }}</strong>
+            <div *ngIf="!sub.name">
+                <ng-container i18n="Subscription playlist not available text">Name not available. Channel retrieval in progress.</ng-container>
+            </div>
+        </a>
+        <button mat-icon-button (click)="showSubInfo(sub)">
+            <mat-icon>info</mat-icon>
+        </button>
+    </mat-list-item>
+ </mat-nav-list>
+
+<div style="width: 80%; margin: 0 auto; padding-left: 15px;" *ngIf="channel_subscriptions.length === 0 && subscriptions">
+    <p i18n="No channel subscriptions text">You have no channel subscriptions.</p>
+</div>
+
+<h4 i18n="Subscriptions playlists title" style="text-align: center; margin-top: 10px;">Playlists</h4>
+<mat-nav-list class="sub-nav-list">
+    <mat-list-item *ngFor="let sub of playlist_subscriptions">
+        <a class="a-list-item" matLine (click)="goToSubscription(sub)" href="javascript:void(0)">
+            <strong>{{ sub.name }}</strong>
+            <div class="content-loading-div" *ngIf="!sub.name">
+                <ng-container i18n="Subscription playlist not available text">Name not available. Playlist retrieval in progress.</ng-container>
+            </div>
+        </a>
+        <button mat-icon-button (click)="showSubInfo(sub)">
+            <mat-icon>info</mat-icon>
+        </button>
+    </mat-list-item>
+</mat-nav-list>
+
+<div style="width: 80%; margin: 0 auto; padding-left: 15px;" *ngIf="playlist_subscriptions.length === 0 && subscriptions">
+    <p i18n="No playlist subscriptions text">You have no playlist subscriptions.</p>
+</div>
+
+<div style="margin: 0 auto; width: 80%" *ngIf="subscriptions_loading">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+</div>
+
+<button class="add-subscription-button" (click)="openSubscribeDialog()" mat-fab><mat-icon>add</mat-icon></button>

src/app/subscriptions/subscriptions.component.scss

@@ -0,0 +1,27 @@
+.add-subscription-button {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+}
+
+.subscription-card {
+    height: 200px;
+    width: 300px;
+}
+
+.content-loading-div {
+    position: absolute;
+    width: 200px;
+    height: 50px;
+    bottom: -18px;
+}
+
+.a-list-item {
+    height: 48px;
+    padding-top: 12px !important;
+}
+
+.sub-nav-list {
+    margin: 0 auto;
+    width: 80%;
+}

src/app/subscriptions/subscriptions.component.spec.ts

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

src/app/subscriptions/subscriptions.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SubscribeDialogComponent } from 'app/dialogs/subscribe-dialog/subscribe-dialog.component';
+import { PostsService } from 'app/posts.services';
+import { Router } from '@angular/router';
+import { SubscriptionInfoDialogComponent } from 'app/dialogs/subscription-info-dialog/subscription-info-dialog.component';
+
+@Component({
+  selector: 'app-subscriptions',
+  templateUrl: './subscriptions.component.html',
+  styleUrls: ['./subscriptions.component.scss']
+})
+export class SubscriptionsComponent implements OnInit {
+
+  playlist_subscriptions = [];
+  channel_subscriptions = [];
+  subscriptions = null;
+
+  subscriptions_loading = false;
+
+  constructor(private dialog: MatDialog, public postsService: PostsService, private router: Router, private snackBar: MatSnackBar) { }
+
+  ngOnInit() {
+    this.getSubscriptions();
+  }
+
+  getSubscriptions() {
+    this.subscriptions_loading = true;
+    this.subscriptions = null;
+    this.channel_subscriptions = [];
+    this.playlist_subscriptions = [];
+    this.postsService.getAllSubscriptions().subscribe(res => {
+    this.subscriptions_loading = false;
+      this.subscriptions = res['subscriptions'];
+      if (!this.subscriptions) {
+        return;
+      }
+
+      for (let i = 0; i < this.subscriptions.length; i++) {
+        const sub = this.subscriptions[i];
+
+        // parse subscriptions into channels and playlists
+        if (sub.isPlaylist) {
+          this.playlist_subscriptions.push(sub);
+        } else {
+          this.channel_subscriptions.push(sub);
+        }
+      }
+    }, err => {
+      this.subscriptions_loading = false;
+      console.error('Failed to get subscriptions');
+      this.openSnackBar('ERROR: Failed to get subscriptions!', 'OK.');
+    });
+  }
+
+  goToSubscription(sub) {
+    this.router.navigate(['/subscription', {id: sub.id}]);
+  }
+
+  openSubscribeDialog() {
+    const dialogRef = this.dialog.open(SubscribeDialogComponent, {
+      maxWidth: 500,
+      width: '80vw'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        if (result.isPlaylist) {
+          this.playlist_subscriptions.push(result);
+        } else {
+          this.channel_subscriptions.push(result);
+        }
+      }
+    });
+  }
+
+  showSubInfo(sub) {
+    const unsubbedEmitter = new EventEmitter<any>();
+    const dialogRef = this.dialog.open(SubscriptionInfoDialogComponent, {
+      data: {
+        sub: sub,
+        unsubbedEmitter: unsubbedEmitter
+      }
+    });
+    unsubbedEmitter.subscribe(success => {
+      if (success) {
+        this.openSnackBar(`${sub.name} successfully deleted!`)
+        this.getSubscriptions();
+      }
+    })
+  }
+
+  // snackbar helper
+  public openSnackBar(message: string, action = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}

src/assets/default.json

@@ -1,36 +1,46 @@
 {
-    "YoutubeDLMaterial": {
-        "Host": {
-            "frontendurl": "http://localhost:4200",
-            "backendurl": "http://localhost:17442/"
-        },
-      "Encryption": {
-        "use-encryption": false,
-        "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
-        "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
-      },
-      "Downloader": {
-        "path-base": "http://localhost:17442/",
-        "path-audio": "audio/",
-        "path-video": "video/"
-      },
-      "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
-      },
-      "Advanced": {
-        "use_default_downloading_agent": true,
-        "custom_downloading_agent": ""
-      }
+  "YoutubeDLMaterial": {
+    "Host": {
+      "url": "http://localhost",
+      "port": "17442"
+    },
+    "Encryption": {
+      "use-encryption": false,
+      "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
+      "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
+    },
+    "Downloader": {
+      "path-audio": "audio/",
+      "path-video": "video/",
+      "use_youtubedl_archive": false,
+      "custom_args": ""
+    },
+    "Extra": {
+      "title_top": "Youtube Downloader",
+      "file_manager_enabled": true,
+      "allow_quality_select": true,
+      "download_only_mode": false,
+      "allow_multi_download_mode": true,
+      "settings_pin_required": false
+    },
+    "API": {
+      "use_youtube_API": false,
+      "youtube_API_key": ""
+    },
+    "Themes": {
+      "default_theme": "default",
+      "allow_theme_change": true
+    },
+    "Subscriptions": {
+      "allow_subscriptions": true,
+      "subscriptions_base_path": "subscriptions/",
+      "subscriptions_check_interval": "300",
+      "subscriptions_use_youtubedl_archive": true
+    },
+    "Advanced": {
+      "use_default_downloading_agent": true,
+      "custom_downloading_agent": "",
+      "allow_advanced_download": true
     }
   }
+}

src/assets/i18n/messages.es.json

@@ -0,0 +1,139 @@
+{
+  "17f0ea5d2d7a262b0e875acc70475f102aee84e6": "Crea una lista de reproducción",
+  "cff1428d10d59d14e45edec3c735a27b5482db59": "Nombre",
+  "f47e2d56dd8a145b2e9599da9730c049d52962a2": "Archivos de sonido",
+  "a52dae09be10ca3a65da918533ced3d3f4992238": "Archivos de video",
+  "d9e83ac17026e70ef6e9c0f3240a3b2450367f40": "Modificar args de youtube-dl",
+  "7fc1946abe2b40f60059c6cd19975d677095fd19": "Args nuevos simulados",
+  "0b71824ae71972f236039bed43f8d2323e8fd570": "Añadir un arg",
+  "c8b0e59eb491f2ac7505f0fbab747062e6b32b23": "Busqueda por categoria",
+  "9eeb91caef5a50256dd87e1c4b7b3e8216479377": "Usar valor de arg",
+  "25d8ad5eba2ec24e68295a27d6a4bb9b49e3dacd": "Valor de arg",
+  "7de2451ed3fb8d8b847979bd3f0c740b970f167b": "Añadir arg",
+  "d7b35c384aecd25a516200d6921836374613dfe7": "Cancelar",
+  "b2623aee44b70c9a4ba1fce16c8a593b0a4c7974": "Modificar",
+  "038ebcb2a89155d90c24fa1c17bfe83dbadc3c20": "Descargador de Youtube",
+  "6d2ec8898344c8955542b0542c942038ef28bb80": "Por favor entre una URL válida",
+  "a38ae1082fec79ba1f379978337385a539a28e73": "Calidad:",
+  "4be966a9dcfbc9b54dfcc604b831c0289f847fa4": "Usa URL",
+  "d3f02f845e62cebd75fde451ab8479d2a8ad784d": "Ver:",
+  "4a9889d36910edc8323d7bab60858ab3da6d91df": "Solo audio",
+  "96a01fafe135afc58b0f8071a4ab00234495ce18": "Descarga múltiple",
+  "6a21ba5fb0ac804a525bf9ab168038c3ee88e661": "Descarga",
+  "6a3777f913cf3f288664f0632b9f24794fdcc24e": "Cancelar",
+  "322ed150e02666fe2259c5b4614eac7066f4ffa0": "Avanzado",
+  "b7ffe7c6586d6f3f18a9246806a7c7d5538ab43e": "Commando simulado:",
+  "4e4c721129466be9c3862294dc40241b64045998": "Usar argumentos personalizados",
+  "ad2f8ac8b7de7945b80c8e424484da94e597125f": "Argumentos personalizados",
+  "ccc7e92cbdd35e901acf9ad80941abee07bd8f60": "No es necesario incluir URL, solo todo después ",
+  "3a92a3443c65a52f37ca7efb8f453b35dbefbf29": "Usar salida personalizada",
+  "d9c02face477f2f9cdaae318ccee5f89856851fb": "Salida personalizada",
+  "fcfd4675b4c90f08d18d3abede9a9a4dff4cfdc7": "Documentación",
+  "19d1ae64d94d28a29b2c57ae8671aace906b5401": "La ruta es relativa a la ruta de descarga de la config. No incluya el extensión.",
+  "8fad10737d3e3735a6699a4d89cbf6c20f6bb55f": "Usa autenticación",
+  "08c74dc9762957593b91f6eb5d65efdfc975bf48": "Nombre de usuario",
+  "c32ef07f8803a223a83ed17024b38e8d82292407": "Contraseña",
+  "4a0dada6e841a425de3e5006e6a04df26c644fa5": "Audio",
+  "9779715ac05308973d8f1c8658b29b986e92450f": "Tus archivos de audio están aquí",
+  "47546e45bbb476baaaad38244db444c427ddc502": "Listas de reproducción",
+  "78bd81adb4609b68cfa4c589222bdc233ba1faaa": "No hay listas de reproducción disponibles. Cree uno de tus archivos de audio haciendo clic en el botón azul más.",
+  "9d2b62bb0b91e2e17fb4177a7e3d6756a2e6ee33": "Vídeo",
+  "960582a8b9d7942716866ecfb7718309728f2916": "Tus archivos de video son aquí",
+  "0f59c46ca29e9725898093c9ea6b586730d0624e": "No hay listas de reproducción disponibles. Cree uno de tus archivos de video haciendo clic en el botón azul más.",
+  "616e206cb4f25bd5885fc35925365e43cf5fb929": "Nombre:",
+  "c52db455cca9109ee47e1a612c3f4117c09eb71b": "URL:",
+  "c6eb45d085384903e53ab001a3513d1de6a1dbac": "Cargador:",
+  "109c6f4a5e46efb933612ededfaf52a13178b7e0": "Tamaño del archivo:",
+  "bd630d8669b16e5f264ec4649d9b469fe03e5ff4": "Ruta:",
+  "a67e7d843cef735c79d5ef1c8ba4af3e758912bb": "Subido:",
+  "f4e529ae5ffd73001d1ff4bbdeeb0a72e342e5c8": "Cerca",
+  "ca3dbbc7f3e011bffe32a10a3ea45cc84f30ecf1": "ID:",
+  "e684046d73bcee88e82f7ff01e2852789a05fc32": "Cuenta:",
+  "321e4419a943044e674beb55b8039f42a9761ca5": "Información",
+  "826b25211922a1b46436589233cb6f1a163d89b7": "Eliminar",
+  "34504b488c24c27e68089be549f0eeae6ebaf30b": "Eliminar y pones en la lista negra",
+  "121cc5391cd2a5115bc2b3160379ee5b36cd7716": "Configuraciones",
+  "fe22ca53e651df951dac25b67c17894b0980f767": "Host",
+  "801b98c6f02fe3b32f6afa3ee854c99ed83474e6": "URL",
+  "54c512cca1923ab72faf1a0bd98d3d172469629a": "URL desde la que se accederá a esta aplicación, sin el puerto.",
+  "cb2741a46e3560f6bc6dfd99d385e86b08b26d72": "Puerto",
+  "22e8f1d0423a3b784fe40fab187b92c06541b577": "Puerto deseado. El valor predeterminado es 17442.",
+  "948758e1412bb2ecdb98e3a4f1cbb6d7458456f2": "Cifrado",
+  "cbe16a57be414e84b6a68309d08fad894df797d6": "Usa cifrado",
+  "0c1875a79b7ecc792cc1bebca3e063e40b5764f9": "Ruta del archivo de certificado",
+  "736551b93461d2de64b118cf4043eee1d1c2cb2c": "Ruta de archivo de clave",
+  "0ba25ad86a240576c4f20a2fada4722ebba77b1e": "Descargador",
+  "ab2756805742e84ad0cc0468f4be2d8aa9f855a5": "Ruta de la carpeta de audio",
+  "c2c89cdf45d46ea64d2ed2f9ac15dfa4d77e26ca": "Ruta para descargas de solo audio. Es relativo a la carpeta raíz de YTDL-Material.",
+  "46826331da1949bd6fb74624447057099c9d20cd": "Ruta de la carpeta de video",
+  "17c92e6d47a213fa95b5aa344b3f258147123f93": "Ruta de descarga de videos. Es relativo a la carpeta raíz de YTDL-Material.",
+  "f41145afc02fd47ef0576ac79acd2c47ebbf4901": "Argumentos personalizados globales para descargas en la página de inicio.",
+  "78e49b7339b4fa7184dd21bcaae107ce9b7076f6": "Usa el archivo de youtube-dl",
+  "d5f69691f9f05711633128b5a3db696783266b58": "Extra",
+  "61f8fd90b5f8cb20c70371feb2ee5e1fac5a9095": "Título superior",
+  "78d3531417c0d4ba4c90f0d4ae741edc261ec8df": "Administrador de archivos habilitado",
+  "c33bd5392b39dbed36b8e5a1145163a15d45835f": "Permitir selección de calidad",
+  "bda5508e24e0d77debb28bcd9194d8fefb1cfb92": "Modo de solo descarga",
+  "09d31c803a7252658694e1e3176b97f5655a3fe3": "Permitir el modo de descarga múltiple",
+  "d8b47221b5af9e9e4cd5cb434d76fc0c91611409": "Requiere pin para la configuración",
+  "f5ec7b2cdf87d41154f4fcbc86e856314409dcb9": "Establecer nuevo pin",
+  "e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4": "API",
+  "d5d7c61349f3b0859336066e6d453fc35d334fe5": "Utilizar la API de YouTube",
+  "ce10d31febb3d9d60c160750570310f303a22c22": "Clave API de YouTube",
+  "8602e313cdfa7c4cc475ccbe86459fce3c3fd986": "¡Generar una clave es fácil!",
+  "60c855c323706a04ccd2ff22d634bde9b6233bbf": "Temas",
+  "ff7cee38a2259526c519f878e71b964f41db4348": "Defecto",
+  "adb4562d2dbd3584370e44496969d58c511ecb63": "Oscura",
+  "7a6bacee4c31cb5c0ac2d24274fb4610d8858602": "Permitir cambio de tema",
+  "357064ca9d9ac859eb618e28e8126fa32be049e2": "Suscripciones",
+  "4e3120311801c4acd18de7146add2ee4a4417773": "Permitir suscripciones",
+  "4bee2a4bef2d26d37c9b353c278e24e5cd309ce3": "Ruta base de suscripciones",
+  "bc9892814ee2d119ae94378c905ea440a249b84a": "Ruta base para videos de sus canales y listas de reproducción suscritos. Es relativo a la carpeta raíz de YTDL-Material.",
+  "5bef4b25ba680da7fff06b86a91b1fc7e6a926e3": "Intervalo de comprobación",
+  "0f56a7449b77630c114615395bbda4cab398efd8": "La unidad es segundos, solo incluye números.",
+  "fa9fe4255231dd1cc6b29d3d254a25cb7c764f0f": "Con la función de archivo de youtube-dl,",
+  "09006404cccc24b7a8f8d1ce0b39f2761ab841d8": "los videos descargados de sus suscripciones se graban en un archivo de texto en el subdirectorio del archivo de suscripciones.",
+  "29ed79a98fc01e7f9537777598e31dbde3aa7981": "Esto permite eliminar videos de sus suscripciones de forma permanente sin darse de baja y le permite grabar los videos que descargó en caso de pérdida de datos.",
+  "0feab442129ba239106e55cf029069d3d4adeadc": "Extensiones",
+  "9b3cedfa83c6d7acb3210953289d1be4aab115c7": "¡Haga clic aquí",
+  "7f09776373995003161235c0c8d02b7f91dbc4df": "para descargar la extensión Chrome oficial de YoutubeDL-Material manualmente.",
+  "5b5296423906ab3371fdb2b5a5aaa83acaa2ee52": "Debe cargar manualmente la extensión y modificar la configuración de la extensión para establecer la URL de la interfaz.",
+  "9a2ec6da48771128384887525bdcac992632c863": "para instalar la extensión Firefox oficial de YoutubeDL-Material directamente desde la página de extensiones de Firefox.",
+  "eb81be6b49e195e5307811d1d08a19259d411f37": "Instrucciones detalladas de configuración.",
+  "cb17ff8fe3961cf90f44bee97c88a3f3347a7e55": "No se requiere mucho más que cambiar la configuración de la extensión para establecer la URL de la interfaz.",
+  "61b81b11aad0b9d970ece2fce18405f07eac69c2": "Arrastra el enlace de abajo a tus marcadores, ¡y listo! Simplemente navegue hasta el video de YouTube que desea descargar y haga clic en el marcador.",
+  "bc2e854e111ecf2bd7db170da5e3c2ed08181d88": "Avanzado",
+  "5fab47f146b0a4b809dcebf3db9da94df6299ea1": "Usar agente de descarga predeterminado",
+  "dc3d990391c944d1fbfc7cfb402f7b5e112fb3a8": "Permitir descarga avanzada",
+  "52c9a103b812f258bcddc3d90a6e3f46871d25fe": "Salvar",
+  "cec82c0a545f37420d55a9b6c45c20546e82f94e": "Sobre YoutubeDL-Material",
+  "199c17e5d6a419313af3c325f06dcbb9645ca618": "es un descargador de código abierto de YouTube creado bajo las especificaciones de \"Material Design\" de Google. Puede descargar sin problemas sus videos favoritos como archivos de video o audio, e incluso suscribirse a sus canales favoritos y listas de reproducción para mantenerse actualizado con sus nuevos videos.",
+  "c072eebcb5b1f1eef6fb2ee1756e839dd302f3de": "tiene algunas características increíbles incluidas! Una amplia API, soporte de Docker y soporte de localización (traducción). Lea todas las funciones admitidas haciendo clic en el icono de GitHub a continuación.",
+  "b33536f59b94ec935a16bd6869d836895dc5300c": "¿Encontró un error o tiene una sugerencia?",
+  "e1f398f38ff1534303d4bb80bd6cece245f24016": "para crear una cuestión!",
+  "a45e3b05f0529dc5246d70ef62304c94426d4c81": "Versión instalada:",
+  "effdc7dfbbc49c08d25ea1748fca00c38c918abd": "Ver la última actualización",
+  "004b222ff9ef9dd4771b777950ca1d0e4cd4348a": "Sobre",
+  "92eee6be6de0b11c924e3ab27db30257159c0a7c": "Inicio",
+  "5b3075e8dc3f3921ec316b0bd83b6d14a06c1a4f": "Guardar cambios",
+  "a9806cf78ce00eb2613eeca11354a97e033377b8": "Suscríbase a la lista de reproducción o al canal",
+  "93efc99ae087fc116de708ecd3ace86ca237cf30": "La lista de reproducción o la URL del canal",
+  "08f5d0ef937ae17feb1b04aff15ad88911e87baf": "Nombre personalizado",
+  "f3f62aa84d59f3a8b900cc9a7eec3ef279a7b4e7": "Esto es opcional",
+  "ea30873bd3f0d5e4fb2378eec3f0a1db77634a28": "Descargar todas las cargas",
+  "28a678e9cabf86e44c32594c43fa0e890135c20f": "Descargar videos subidos en el último",
+  "e78c0d60ac39787f62c9159646fe0b3c1ed55a1d": "Tipo:",
+  "a44d86aa1e6c20ced07aca3a7c081d8db9ded1c6": "Archivo:",
+  "8efc77bf327659c0fec1f518cf48a98cdcd9dddf": "Exportar el archivo",
+  "3042bd3ad8dffcfeca5fd1ae6159fd1047434e95": "Darse de baja",
+  "e2319dec5b4ccfb6ed9f55ccabd63650a8fdf547": "Sus suscripciones",
+  "807cf11e6ac1cde912496f764c176bdfdd6b7e19": "Canales",
+  "29b89f751593e1b347eef103891b7a1ff36ec03f": "Nombre no disponible. Recuperación de canales en progreso.",
+  "4636cd4a1379c50d471e98786098c4d39e1e82ad": "No tienes suscripciones de canal.",
+  "2e0a410652cb07d069f576b61eab32586a18320d": "Nombre no disponible. Recuperación de listas de reproducción en progreso.",
+  "587b57ced54965d8874c3fd0e9dfedb987e5df04": "No tienes suscripciones a listas de reproducción.",
+  "7e892ba15f2c6c17e83510e273b3e10fc32ea016": "Buscar",
+  "2054791b822475aeaea95c0119113de3200f5e1c": "Duración:",
+  "94e01842dcee90531caa52e4147f70679bac87fe": "Eliminar y volver a descargar",
+  "2031adb51e07a41844e8ba7704b054e98345c9c1": "Borrar para siempre"
+}