Merge pull request #12 from Tzahi12345/serve-nodejs

Serve frontend app through nodejs
fixed margins on advanced mode UI and temporarily disabled youtube auth until youtube-dl fixes it
2026-03-07 20:10:03 +03:00 · 2020-03-01 00:50:20 -05:00 · 2020-03-01 00:48:22 -05:00 · 2020-03-01 00:46:42 -05:00 · 2020-02-29 04:31:23 -05:00 · 2020-02-29 04:31:06 -05:00
78 changed files with 18724 additions and 586 deletions
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -1,61 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "youtube-dl-material"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico",
-        "backend/audio",
-        "backend/video",
-        "backend",
-        { "glob": "default.json", "input": "./", "output": "../backend/config/", "allowOutsideOutDir": true }
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json"
-    },
-    {
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}
--- a/.gitignore
+++ b/.gitignore
@@ -43,6 +43,10 @@ Thumbs.db

 node_modules/*
 backend/node_modules/*
+backend/public/*
 YoutubeDL-Material/node_modules/*
 backend/video/*
-backend/audio/*
+backend/audio/*
+backend/public/*
+backend/db.json
+src/assets/default.json
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "attach",
+            "name": "Attach",
+            "port": 9229
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
--- a/21
+++ b/21
@@ -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" ]
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright 2018 Isaac Grynsztein
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/1
+++ b/1
@@ -0,0 +1 @@
+web: cd backend && node app.js
--- a/README.md
+++ b/README.md
@@ -1,28 +1,113 @@
-# YoutubeDLMaterial
+# YoutubeDL-Material

-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.2.
+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 [Node.js](https://nodejs.org/) on the backend.

-## Development server
+Now with [Docker](#Docker) support!

-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Getting Started

-## Code scaffolding
+Check out the prerequisites, and go to the installation section. Easy as pie!

-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+Here's an image of what it'll look like once you're done:

-## Build
+![frontpage](https://i.imgur.com/rOxWIys.png)

-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+With optional file management enabled (default):

-## Running unit tests
+![frontpage_with_files](https://i.imgur.com/UTUROLl.png)

-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Dark mode:

-## Running end-to-end tests
+![dark_mode](https://i.imgur.com/9TMkHF6.png?1)

-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+### Prerequisites

-## Further help
+NOTE: If you would like to use Docker, you can skip down to the [Docker](#Docker) section for a setup guide.

-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+You need to have a functioning web server for this to work. Also 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 nodejs youtube-dl
+```
+
+### Installing
+
+1. First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
+
+2. Drag all the files in `youtubedl-material` to an easily accessible directory. Navigate to the `config` folder and edit the `default.json` file. If you're using SSL encryption, look at the `encrypted.json` file for a template.
+
+NOTE: If you are intending to use a reverse proxy, this next step is not necessary
+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 |
+| ------------- | ------------- | ------------- |
+| 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-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 - NOT FULLY IMPLEMENTED | false |
+
+## Deployment
+
+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 the `public` directory in the `backend` folder.
+
+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 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!
+
+## Contributing
+
+Feel free to submit a pull request! I have no guidelines as of yet, so no need to worry about that.
+
+## Authors
+
+* **Isaac Grynsztein** (me!) - *Initial work*
+
+See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+
+## Acknowledgments
+
+* youtube-dl
+* [AllTube](https://github.com/Rudloff/alltube) (for the inspiration)
--- a/angular.json
+++ b/angular.json
@@ -0,0 +1,185 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "youtube-dl-material": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/backend/audio",
+              "src/backend/video",
+              "src/backend"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "youtube-dl-material:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          }
+        },
+        "serve-electron": {
+          "builder": "@angular-guru/electron-builder:dev-server",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "youtube-dl-material:build:production"
+            }
+          }
+        },
+        "electron": {
+          "builder": "@angular-guru/electron-builder:build",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "main.js",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/backend/audio",
+              "src/backend/video",
+              "src/backend"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/backend/audio",
+              "src/backend/video",
+              "src/backend"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "youtube-dl-material-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "youtube-dl-material:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "youtube-dl-material",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
--- a/backend/app.js
+++ b/backend/app.js
--- a/backend/aria2c.exe
+++ b/backend/aria2c.exe
--- a/backend/config.js
+++ b/backend/config.js
@@ -0,0 +1,113 @@
+const fs = require('fs');
+
+let CONFIG_ITEMS = require('./consts.js')['CONFIG_ITEMS'];
+
+let configPath = 'config/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);
+    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,
+    CONFIG_ITEMS: CONFIG_ITEMS
+}
--- a/backend/config/default.default
+++ b/backend/config/default.default
@@ -1,19 +0,0 @@
-{
-    "YoutubeDL-Material": {
-        "Host": {
-            "frontend-url": "http://localhost:4200",
-            "backend-url": "youtubedl.grynsztein.com",
-            "backend-port": "8088"
-        },
-      "Encryption": {
-        "use-encryption": false,
-        "cert-file-path": "fullchain.pem",
-        "key-file-path": "privkey.pem"
-      },
-      "Downloader": {
-        "path-base": "http://localhost:8088/",
-        "path-audio": "audio/",
-        "path-video": "video/"
-      }
-    }
-  }
--- a/backend/config/default.json
+++ b/backend/config/default.json
@@ -1,21 +1,37 @@
 {
    "YoutubeDLMaterial": {
        "Host": {
-            "frontendurl": "http://localhost:4200",
-            "backendurl": "https://youtubedl.grynsztein.com/"
+            "url": "http://example.com",
+            "port": "17442"
        },
      "Encryption": {
        "use-encryption": false,
-        "cert-file-path": "cert.pem",
-        "key-file-path": "privkey.pem"
+        "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:8088/",
        "path-audio": "audio/",
        "path-video": "video/"
      },
      "Extra": {
-        "title_top": "Youtube Downloader"
+        "title_top": "Youtube Downloader",
+        "file_manager_enabled": true,
+        "allow_quality_select": true,
+        "download_only_mode": false,
+        "allow_multi_download_mode": true
+      },
+      "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": "",
+        "allow_advanced_download": false
      }
    }
-  }
+  }
--- a/backend/config/encrypted.json
+++ b/backend/config/encrypted.json
@@ -0,0 +1,37 @@
+{
+    "YoutubeDLMaterial": {
+      "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-audio": "audio/",
+        "path-video": "video/"
+      },
+      "Extra": {
+        "title_top": "Youtube Downloader",
+        "file_manager_enabled": true,
+        "allow_quality_select": true,
+        "download_only_mode": false,
+        "allow_multi_download_mode": true
+      },
+      "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": "",
+        "allow_advanced_download": false
+      }
+    }
+  }
--- a/backend/consts.js
+++ b/backend/consts.js
@@ -0,0 +1,96 @@
+var config = require('config');
+
+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'
+    },
+
+    // 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'
+    },
+    
+
+    // 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'
+    },
+
+    // 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;
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,23 +1,31 @@
 {
  "name": "backend",
  "version": "1.0.0",
-  "description": "backend for hda",
+  "description": "backend for YoutubeDL-Material",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node app.js"
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/Tzahi12345/hda-backend.git"
+    "url": ""
  },
  "author": "Isaac Grynsztein",
  "license": "MIT",
  "bugs": {
-    "url": "https://github.com/Tzahi12345/hda-backend/issues"
+    "url": ""
  },
-  "homepage": "https://github.com/Tzahi12345/hda-backend#readme",
+  "homepage": "",
  "dependencies": {
+    "archiver": "^3.1.1",
+    "async": "^3.1.0",
+    "compression": "^1.7.4",
+    "config": "^3.2.3",
    "exe": "^1.0.2",
-    "youtube-dl": "1.11.1"
+    "express": "^4.17.1",
+    "lowdb": "^1.0.0",
+    "shortid": "^2.2.15",
+    "youtube-dl": "^3.0.2"
  }
 }
--- a/backend/youtube-dl.exe
+++ b/backend/youtube-dl.exe
--- a/12
+++ b/12
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/chrome-extension.crx
+++ b/chrome-extension.crx
--- a/chrome-extension.pem
+++ b/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-----
--- a/chrome-extension/background.js
+++ b/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 });
+            }
+        });
+    });
+    
+});
--- a/chrome-extension/favicon.png
+++ b/chrome-extension/favicon.png
--- a/chrome-extension/manifest.json
+++ b/chrome-extension/manifest.json
@@ -0,0 +1,20 @@
+{
+    "manifest_version": 2,
+    "name": "YoutubeDL-Material",
+    "version": "0.1",
+    "description": "The official 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
+    }
+}
--- a/chrome-extension/options.html
+++ b/chrome-extension/options.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head><title>YoutubeDL-Material Extension Options</title></head>
+<body>
+
+<h2>Settings</h2>
+
+<div>
+    <h4>Frontend URL</h4>
+  <input placeholder="Frontend URL" type="text" id="frontend_url">
+</div>
+
+<br/>
+
+<div>
+    <label>
+        <input type="checkbox" id="audio_only">
+        Audio only
+    </label>
+</div>
+
+<br/>
+
+<div id="status"></div>
+<button id="save">Save</button>
+
+<script src="options.js"></script>
+</body>
+</html>
--- a/chrome-extension/options.js
+++ b/chrome-extension/options.js
@@ -0,0 +1,31 @@
+// 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.
+      var status = document.getElementById('status');
+      status.textContent = 'Options saved.';
+      setTimeout(function() {
+        status.textContent = '';
+      }, 750);
+    });
+  }
+  
+  // 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);
--- a/db.json
+++ b/db.json
@@ -0,0 +1,6 @@
+{
+  "playlists": {
+    "audio": [],
+    "video": []
+  }
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,33 @@
+
+version: "2"
+services:
+    ytdl_material:
+        build: .
+        environment: 
+            # config items
+            ytdl_url: http://localhost:8998
+            ytdl_port: '17442'
+            ytdl_use_encryption: 'false'
+            ytdl_cert_file_path: /etc/letsencrypt/live/example.com/fullchain.pem
+            ytdl_key_file_path: /etc/letsencrypt/live/example.com/privkey.pem
+            ytdl_audio_folder_path: audio/
+            ytdl_video_folder_path: video/
+            ytdl_title_top: Youtube Downloader
+            ytdl_file_manager_enabled: 'true'
+            ytdl_allow_quality_select: 'true'
+            ytdl_download_only_mode: 'false'
+            ytdl_allow_multi_download_mode: 'true'
+            ytdl_use_youtube_api: 'false'
+            ytdl_youtube_api_key: 'false'
+            ytdl_default_theme: default
+            ytdl_allow_theme_change: 'true'
+            ytdl_use_default_downloading_agent: 'true'
+            ytdl_custom_downloading_agent: 'false'
+            ytdl_allow_advanced_download: 'false'
+            # do not touch this
+            write_ytdl_config: 'true'
+            ALLOW_CONFIG_MUTATIONS: 'true'
+        restart: always
+        ports:
+            - "8998:17442"
+        image: tzahi12345/youtubedl-material:3.3
--- a/docker_wrapper.sh
+++ b/docker_wrapper.sh
@@ -0,0 +1,39 @@
+#!/bin/bash
+
+cd backend
+
+# Start the first process
+node app.js &
+status=$?
+if [ $status -ne 0 ]; then
+  echo "Failed to start my_first_process: $status"
+  exit $status
+fi
+
+# Start the second process
+apachectl -DFOREGROUND
+status=$?
+if [ $status -ne 0 ]; then
+  echo "Failed to start my_second_process: $status"
+  exit $status
+fi
+
+# Naive check runs checks once a minute to see if either of the processes exited.
+# This illustrates part of the heavy lifting you need to do if you want to run
+# more than one service in a container. The container will exit with an error
+# if it detects that either of the processes has exited.
+# Otherwise it will loop forever, waking up every 60 seconds
+
+while /bin/true; do
+  ps aux |grep node\ app.js # |grep -q -v grep
+  PROCESS_1_STATUS=$?
+  ps aux |grep apache2 # |grep -q -v grep
+  PROCESS_2_STATUS=$?
+  # If the greps above find anything, they will exit with 0 status
+  # If they are not both 0, then something is wrong
+  if [ $PROCESS_1_STATUS -ne 0 -o $PROCESS_2_STATUS -ne 0 ]; then
+    echo "One of the processes has already exited."
+    exit -1
+  fi
+  sleep 60
+done
--- a/installer.py
+++ b/installer.py
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -4,24 +4,22 @@
 module.exports = function (config) {
  config.set({
    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
-    angularCli: {
-      environment: 'dev'
-    },
+    
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
--- a/main.js
+++ b/main.js
@@ -0,0 +1,41 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const url = require('url');
+
+let win;
+
+function createWindow() {
+  win = new BrowserWindow({ width: 800, height: 600 });
+
+  // load the dist folder from Angular
+  win.loadURL(
+    url.format({
+      pathname: path.join(__dirname, `/dist/index.html`),
+      protocol: 'file:',
+      slashes: true
+    })
+  );
+
+  // The following is optional and will open the DevTools:
+  // win.webContents.openDevTools()
+
+  win.on('closed', () => {
+    win = null;
+  });
+}
+
+app.on('ready', createWindow);
+
+// on macOS, closing the window doesn't quit the app
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+// initialize the app's main window
+app.on('activate', () => {
+  if (win === null) {
+    createWindow();
+  }
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,44 +8,62 @@
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "electron": "ng build --base-href ./ && electron ."
+  },
+  "engines": {
+    "node": "12.3.1",
+    "npm": "6.10.3"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^5.2.0",
-    "@angular/cdk": "^5.0.4",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/material": "^5.0.4",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
+    "@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/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",
    "core-js": "^2.4.1",
+    "file-saver": "^2.0.2",
+    "ng-lazyload-image": "^7.0.1",
    "ng4-configure": "^0.1.7",
-    "rxjs": "^5.5.3",
-    "zone.js": "^0.8.4"
+    "ngx-content-loading": "^0.1.3",
+    "rxjs": "^6.5.3",
+    "rxjs-compat": "^6.0.0-rc.0",
+    "tslib": "^1.10.0",
+    "videogular2": "^7.0.1",
+    "web-animations-js": "^2.3.2",
+    "zone.js": "~0.9.1",
+    "typescript": "~3.5.3"
  },
  "devDependencies": {
-    "@angular/cli": "1.5.5",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^4.0.0",
+    "@angular-devkit/build-angular": "^0.803.24",
+    "@angular/cli": "^8.3.12",
+    "@angular/compiler-cli": "^8.2.11",
+    "@angular/language-service": "^8.2.11",
+    "@types/core-js": "^2.5.2",
+    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
-    "codelyzer": "~3.0.1",
+    "codelyzer": "^5.0.1",
+    "electron": "^8.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
-    "typescript": "~2.5.3"
+    "typescript": "~3.5.3"
  }
 }
--- a/src/_palette.scss
+++ b/src/_palette.scss
@@ -0,0 +1,15 @@
+/* Coolors Exported Palette - coolors.co/e8aeb7-b8e1ff-a9fff7-94fbab-82aba1 */
+
+/* HSL */
+$color1: hsla(351%, 56%, 80%, 1);
+$softblue: hsla(205%, 100%, 86%, 1);
+$color3: hsla(174%, 100%, 83%, 1);
+$color4: hsla(133%, 93%, 78%, 1);
+$color5: hsla(165%, 20%, 59%, 1);
+
+/* RGB */
+$color1: rgba(232, 174, 183, 1);
+$softblue: rgba(184, 225, 255, 1);
+$color3: rgba(169, 255, 247, 1);
+$color4: rgba(148, 251, 171, 1);
+$color5: rgba(130, 171, 161, 1);
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MainComponent } from './main/main.component';
+import { PlayerComponent } from './player/player.component';
+const routes: Routes = [
+  { path: 'home', component: MainComponent },
+  { path: 'player', component: PlayerComponent},
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,41 +1,13 @@
-.demo-card {
-    margin: 16px;
-}
-
-.demo-basic {
-    padding: 0;
-}
-
-.demo-basic .mat-card-content {
-    padding: 16px;
-}
-
-mat-toolbar.top {
-    height: 60px;
-    width: 100%;
-    text-align: center;
-}
-
-/*::ng-deep .mat-form-field-placeholder{
-
-    transform: scale(.75) translateY(20px) !important;
-  }*/
-
-.big {
-    width: 60%;
-    margin: 0 auto;
-}
-
-.centered {
-    margin: 0 auto;
-    top: 50%;
-    left: 50%;
-}
-
-.example-full-width {
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
    width: 100%;
 }
-
-mat-form-field.mat-form-field {
-    font-size: 24px;
-  }
+  
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1;
+}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,45 +1,17 @@
-<mat-toolbar color="primary" class="top">
-        <table width="100%" height="100%">
-            <td class="topbar" style="text-align: left; left:0px; font-size: 15px">
-            </td>
-            <td class="topbar" style="text-align: center">
-                <div style="margin-top: 14px">{{topBarTitle}}</div>
-            </td>
-            <td class="topbar" style="text-align: right">
-    
-            </td>
-        </table>
-</mat-toolbar>
-
-<br/>
-
-<mat-card id="card" class="big demo-basic">
-    <mat-card-title>
-        <mat-toolbar color="primary">Youtube Downloader</mat-toolbar>
-    </mat-card-title>
-    <div style="width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; position: relative">
-        <mat-card-content>
-            <form class="example-form">
-                <mat-form-field class="example-full-width">
-                    <input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required>
-                    <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
-                </mat-form-field>
-            </form>
-            <br/>
-            <mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
-            <button style="float: right; margin-top: -16px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-raised-button color="primary">Download</button>
-        </mat-card-content>
-    </div>
-</mat-card>
-<br/>
-<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
-        <div *ngIf="determinateProgress;else indeterminateprogress">
-                <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
+<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>
+            <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>
-        <ng-template #indeterminateprogress>
-                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </ng-template>
-</div>
-<ng-template #nofile>
+    </mat-toolbar>

-</ng-template>
+    <router-outlet></router-outlet>
+</div>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,176 +1,121 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, HostBinding } from '@angular/core';
 import {PostsService} from './posts.services';
+import {FileCardComponent} from './file-card/file-card.component';
 import { Observable } from 'rxjs/Observable';
 import {FormControl, Validators} from '@angular/forms';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatSnackBar} from '@angular/material';
+import { saveAs } from 'file-saver';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/mapTo';
 import 'rxjs/add/operator/toPromise';
+import 'rxjs/add/observable/fromEvent'
+import 'rxjs/add/operator/filter'
+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 { OverlayContainer } from '@angular/cdk/overlay';
+import { THEMES_CONFIG } from '../themes';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  determinateProgress: boolean = false;
-  downloadingfile: boolean = false;
-  audioOnly: boolean;
-  urlError: boolean = false;
-  path: string = '';
-  url: string = '';
-  exists: string = "";
-  topBarTitle: string = "Youtube Downloader";
-  percentDownloaded: number;
-  constructor(private postsService: PostsService, public snackBar: MatSnackBar) { 
-    this.audioOnly = true;
+export class AppComponent implements OnInit {

-    
+  @HostBinding('class') componentCssClass;
+  THEMES_CONFIG = THEMES_CONFIG;

-    this.postsService.loadNavItems().subscribe(result => { // loads settings
-      var backendUrl = result.YoutubeDLMaterial.Host.backendurl;
-      this.topBarTitle = result.YoutubeDLMaterial.Extra.title_top;
+  // config items
+  topBarTitle = 'Youtube Downloader';
+  defaultTheme = null;
+  allowThemeChange = null;

-      this.postsService.path = backendUrl;
-      this.postsService.startPath = backendUrl;
-      this.postsService.startPathSSL = backendUrl;
-    },
-    error => {
+  @ViewChild('urlinput', { read: ElementRef, static: false }) urlInput: ElementRef;
+
+  constructor(public postsService: PostsService, public snackBar: MatSnackBar,
+    public router: Router, public overlayContainer: OverlayContainer, private elementRef: ElementRef) {
+
+    // loading config
+    this.postsService.loadNavItems().subscribe(res => { // loads settings
+      const result = !this.postsService.debugMode ? res['config_file'] : res;
+      this.topBarTitle = result['YoutubeDLMaterial']['Extra']['title_top'];
+      const themingExists = result['YoutubeDLMaterial']['Themes'];
+      this.defaultTheme = themingExists ? result['YoutubeDLMaterial']['Themes']['default_theme'] : 'default';
+      this.allowThemeChange = themingExists ? result['YoutubeDLMaterial']['Themes']['allow_theme_change'] : true;
+
+      // sets theme to config default if it doesn't exist
+      if (!localStorage.getItem('theme')) {
+        this.setTheme(themingExists ? this.defaultTheme : 'default');
+      }
+    }, error => {
      console.log(error);
    });
+
  }

-  urlForm = new FormControl('', [Validators.required]);
+  // theme stuff

-  doHandshake(url: string) {
-    this.postsService.startHandshake(url).subscribe(theurl => {
-      this.postsService.path = theurl;
-      this.postsService.handShakeComplete = true;
-      console.log("Handshake complete!");
-    },
-    error => {
-      console.log("Initial handshake failed on http.");
-      this.doHandshakeSSL(url);
-    });
+  setTheme(theme) {
+    // theme is registered, so set it to the stored cookie variable
+    let old_theme = null;
+    if (this.THEMES_CONFIG[theme]) {
+        if (localStorage.getItem('theme')) {
+          old_theme = localStorage.getItem('theme');
+          if (!this.THEMES_CONFIG[old_theme]) {
+            console.log('bad theme found, setting to default');
+            if (this.defaultTheme === null) {
+              // means it hasn't loaded yet
+              console.error('No default theme detected');
+            } else {
+              localStorage.setItem('theme', this.defaultTheme);
+              old_theme = localStorage.getItem('theme'); // updates old_theme
+            }
+          }
+        }
+        localStorage.setItem('theme', theme);
+        this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = this.THEMES_CONFIG[theme]['background_color'];
+    } else {
+        console.error('Invalid theme: ' + theme);
+        return;
+    }
+
+    this.postsService.setTheme(theme);
+
+    this.onSetTheme(this.THEMES_CONFIG[theme]['css_label'], old_theme ? this.THEMES_CONFIG[old_theme]['css_label'] : old_theme);
+}
+
+onSetTheme(theme, old_theme) {
+    if (old_theme) {
+      document.body.classList.remove(old_theme);
+      this.overlayContainer.getContainerElement().classList.remove(old_theme);
+    }
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
  }

-  doHandshakeSSL(url: string) {
-    this.postsService.startHandshakeSSL(url).subscribe(theurl => {
-      this.postsService.path = theurl;
-      this.postsService.handShakeComplete = true;
-      console.log("Handshake complete!");
-    },
-    error => {
-      console.log("Initial handshake failed on https too! Make sure port 17442 is open.");
-      this.postsService.handShakeComplete = false;
-    });
+  flipTheme() {
+    if (this.postsService.theme.key === 'default') {
+      this.setTheme('dark');
+    } else if (this.postsService.theme.key === 'dark') {
+      this.setTheme('default');
+    }
  }

  ngOnInit() {
-  }
-
-  downloadHelperMp3(name: string)
-  {
-    this.postsService.getFileStatusMp3(name).subscribe(fileExists => {
-      var exists = fileExists;
-      this.exists = exists[0];
-      if (exists[0] == "failed")
-      {
-        var percent = exists[2];
-        console.log(percent);
-        if (percent > 0.30)
-        {
-          this.determinateProgress = true;
-          this.percentDownloaded = percent*100;
-        }
-        setTimeout(() => this.downloadHelperMp3(name), 500);
-      }
-      else
-      {
-        window.location.href = this.exists;
-      }
-    });
-    
-  }
-
-  downloadHelperMp4(name: string)
-  {
-    this.postsService.getFileStatusMp4(name).subscribe(fileExists => {
-      var exists = fileExists;
-      this.exists = exists[0];
-      if (exists[0] == "failed")
-      {
-        var percent = exists[2];
-        if (percent > 0.30)
-        {
-          this.determinateProgress = true;
-          this.percentDownloaded = percent*100;
-        }
-        setTimeout(() => this.downloadHelperMp4(name), 500);
-      }
-      else
-      {
-        window.location.href = this.exists;
-      }
-    });
-    
-  }
-
-  downloadClicked()
-  {
-    if (this.ValidURL(this.url))
-    {
-      this.urlError = false;
-      this.path = "";
-      
-      if (this.audioOnly)
-      {
-        this.downloadingfile = true;
-        this.postsService.makeMP3(this.url).subscribe(posts => {
-          this.path = posts;
-          if (this.path != "-1")
-          {
-            this.downloadHelperMp3(this.path);
-          }
-        },
-        error => { // can't access server
-          this.downloadingfile = false;
-          this.openSnackBar("Download failed!", "OK.");
-        });
-      }
-      else
-      {
-        this.downloadingfile = true;
-        this.postsService.makeMP4(this.url).subscribe(posts => {
-          this.path = posts;
-          if (this.path != "-1")
-          {
-            this.downloadHelperMp4(this.path);
-          }
-        },
-        error => { // can't access server
-          this.downloadingfile = false;
-          this.openSnackBar("Download failed!", "OK.");
-      });
-      }
-    }
-    else
-    {
-      this.urlError = true;
+    if (localStorage.getItem('theme')) {
+      this.setTheme(localStorage.getItem('theme'));
+    } else {
+    //
    }
  }

-  ValidURL(str) {
-    var strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
-    var re=new RegExp(strRegex);
-    return re.test(str);
-  }

-  openSnackBar(message: string, action: string) {
-    this.snackBar.open(message, action, {
-      duration: 2000,
-    });
+  goBack() {
+    this.router.navigate(['/home']);
  }
 }

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,19 +1,47 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
-  MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule,
-  MatProgressBarModule  } from '@angular/material';
+  MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule, MatGridListModule,
+  MatProgressBarModule, MatExpansionModule,
+  MatProgressSpinnerModule,
+  MatButtonToggleModule,
+  MatDialogModule} from '@angular/material';
+  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 } from '@angular/common/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
-import {APP_BASE_HREF} from '@angular/common';
+import { FileCardComponent } from './file-card/file-card.component';
+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 { InputDialogComponent } from './input-dialog/input-dialog.component';
+import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image';
+import { NgxContentLoadingModule } from 'ngx-content-loading';
+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';
+
+export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
+  return (element.id === 'video' ? videoFilesMouseHovering || videoFilesOpened : audioFilesMouseHovering || audioFilesOpened);
+}

@NgModule({
  declarations: [
-    AppComponent
+    AppComponent,
+    FileCardComponent,
+    MainComponent,
+    PlayerComponent,
+    InputDialogComponent,
+    CreatePlaylistComponent,
+    DownloadItemComponent
  ],
  imports: [
    BrowserModule,
@@ -34,7 +62,25 @@ import {APP_BASE_HREF} from '@angular/common';
    MatSidenavModule,
    MatIconModule,
    MatListModule,
-    MatProgressBarModule
+    MatGridListModule,
+    MatExpansionModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatButtonToggleModule,
+    MatDialogModule,
+    DragDropModule,
+    VgCoreModule,
+    VgControlsModule,
+    VgOverlayPlayModule,
+    VgBufferingModule,
+    LazyLoadImageModule.forRoot({ isVisible }),
+    NgxContentLoadingModule,
+    RouterModule,
+    AppRoutingModule,
+  ],
+  entryComponents: [
+    InputDialogComponent,
+    CreatePlaylistComponent
  ],
  providers: [PostsService],
  bootstrap: [AppComponent]
--- a/src/app/create-playlist/create-playlist.component.html
+++ b/src/app/create-playlist/create-playlist.component.html
@@ -0,0 +1,19 @@
+<h4 mat-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}">
+        </mat-form-field>
+    </div>
+    <div>
+        <mat-form-field color="accent">
+            <mat-label>{{(type === 'audio') ? 'Audio files' : 'Videos'}}</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>
+        </mat-form-field>
+    </div>
+</form>
+
+<div *ngIf="create_in_progress" style="float: left"><mat-spinner [diameter]="25"></mat-spinner></div>
+<button (click)="createPlaylist()" [disabled]="!name || !filesSelect.value || filesSelect.value.length === 0" color="primary" style="float: right" mat-flat-button>Create</button>
--- a/src/app/create-playlist/create-playlist.component.scss
+++ b/src/app/create-playlist/create-playlist.component.scss
--- a/src/app/create-playlist/create-playlist.component.spec.ts
+++ b/src/app/create-playlist/create-playlist.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreatePlaylistComponent } from './create-playlist.component';
+
+describe('CreatePlaylistComponent', () => {
+  let component: CreatePlaylistComponent;
+  let fixture: ComponentFixture<CreatePlaylistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreatePlaylistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreatePlaylistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/create-playlist/create-playlist.component.ts
+++ b/src/app/create-playlist/create-playlist.component.ts
@@ -0,0 +1,58 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { FormControl } from '@angular/forms';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-create-playlist',
+  templateUrl: './create-playlist.component.html',
+  styleUrls: ['./create-playlist.component.scss']
+})
+export class CreatePlaylistComponent implements OnInit {
+  // really "createPlaylistDialogComponent"
+
+  filesToSelectFrom = null;
+  type = null;
+  filesSelect = new FormControl();
+  name = '';
+
+  create_in_progress = false;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
+              private postsService: PostsService,
+              public dialogRef: MatDialogRef<CreatePlaylistComponent>) { }
+
+
+  ngOnInit() {
+    if (this.data) {
+      this.filesToSelectFrom = this.data.filesToSelectFrom;
+      this.type = this.data.type;
+    }
+  }
+
+  createPlaylist() {
+    const thumbnailURL = this.getThumbnailURL();
+    this.create_in_progress = true;
+    this.postsService.createPlaylist(this.name, this.filesSelect.value, this.type, thumbnailURL).subscribe(res => {
+      this.create_in_progress = false;
+      if (res['success']) {
+        this.dialogRef.close(true);
+      } else {
+        this.dialogRef.close(false);
+      }
+    });
+  }
+
+  getThumbnailURL() {
+    for (let i = 0; i < this.filesToSelectFrom.length; i++) {
+      const file = this.filesToSelectFrom[i];
+      if (file.id === this.filesSelect.value[0]) {
+        // different services store the thumbnail in different places
+        if (file.thumbnailURL) { return file.thumbnailURL };
+        if (file.thumbnail) { return file.thumbnail };
+      }
+    }
+    return null;
+  }
+
+}
--- a/src/app/download-item/download-item.component.html
+++ b/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;">ID: {{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>
--- a/src/app/download-item/download-item.component.scss
+++ b/src/app/download-item/download-item.component.scss
--- a/src/app/download-item/download-item.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/download-item/download-item.component.ts
+++ b/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);
+  }
+
+}
--- a/src/app/file-card/file-card.component.css
+++ b/src/app/file-card/file-card.component.css
@@ -0,0 +1,59 @@
+.example-card {
+  width: 150px;
+  height: 125px;
+  padding: 0px;
+}
+
+.deleteButton {
+  top:-5px;
+  right:-5px;
+  position:absolute;
+}
+
+/* Coerce the <span> icon container away from display:inline */
+.mat-icon-button .mat-button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.image {
+  max-width:100%;
+  max-height:100%;
+}
+
+.example-full-width-height {
+  width: 100%;
+  height: 100%
+}
+
+.centered {
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+}
+
+.img-div {
+  max-height: 80px;
+  padding: 0px;
+  margin: 0px 0px 0px -5px;
+  width: calc(100% + 5px + 5px);
+}
+
+.max-two-lines {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 2.4em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+@media (max-width: 576px){
+ 
+  .example-card {
+    width: 125px !important;
+  }
+   
+}
--- a/src/app/file-card/file-card.component.html
+++ b/src/app/file-card/file-card.component.html
@@ -0,0 +1,17 @@
+<mat-card class="example-card mat-elevation-z6">
+  <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 *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">
+        <ngx-content-loading [width]="500" [height]="360">
+          <svg:g ngx-rect width="500" height="360" y="0" x="0" rx="4" ry="4"></svg:g>
+        </ngx-content-loading>
+      </span>
+    </div>
+  </div>
+  <button (click)="deleteFile()" class="deleteButton" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+</mat-card>
--- a/src/app/file-card/file-card.component.spec.ts
+++ b/src/app/file-card/file-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileCardComponent } from './file-card.component';
+
+describe('FileCardComponent', () => {
+  let component: FileCardComponent;
+  let fixture: ComponentFixture<FileCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FileCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/file-card/file-card.component.ts
+++ b/src/app/file-card/file-card.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, Input, Output } from '@angular/core';
+import {PostsService} from '../posts.services';
+import {MatSnackBar} from '@angular/material';
+import {EventEmitter} from '@angular/core';
+import { MainComponent } from 'app/main/main.component';
+import { Subject, Observable } from 'rxjs';
+import 'rxjs/add/observable/merge';
+
+@Component({
+  selector: 'app-file-card',
+  templateUrl: './file-card.component.html',
+  styleUrls: ['./file-card.component.css']
+})
+export class FileCardComponent implements OnInit {
+
+  @Input() title: string;
+  @Input() length: string;
+  @Input() name: string;
+  @Input() thumbnailURL: string;
+  @Input() isAudio = true;
+  @Output() removeFile: EventEmitter<string> = new EventEmitter<string>();
+  @Input() isPlaylist = false;
+  @Input() count = null;
+  type;
+  image_loaded = false;
+  image_errored = false;
+
+  scrollSubject;
+  scrollAndLoad;
+
+  constructor(private postsService: PostsService, public snackBar: MatSnackBar, public mainComponent: MainComponent) {
+    this.scrollSubject = new Subject();
+    this.scrollAndLoad = Observable.merge(
+      Observable.fromEvent(window, 'scroll'),
+      this.scrollSubject
+    );
+  }
+
+  ngOnInit() {
+    this.type = this.isAudio ? 'audio' : 'video';
+  }
+
+  deleteFile() {
+    if (!this.isPlaylist) {
+      this.postsService.deleteFile(this.name, this.isAudio).subscribe(result => {
+        if (result === true) {
+          this.openSnackBar('Delete success!', 'OK.');
+          this.removeFile.emit(this.name);
+        } else {
+          this.openSnackBar('Delete failed!', 'OK.');
+        }
+      });
+    } else {
+      this.removeFile.emit(this.name);
+    }
+
+  }
+
+  onImgError(event) {
+    this.image_errored = true;
+  }
+
+  onHoverResponse() {
+    this.scrollSubject.next();
+  }
+
+  imageLoaded(loaded) {
+    this.image_loaded = true;
+  }
+
+  public openSnackBar(message: string, action: string) {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}
--- a/src/app/input-dialog/input-dialog.component.css
+++ b/src/app/input-dialog/input-dialog.component.css
@@ -0,0 +1,3 @@
+.mat-spinner {
+    margin-left: 5%;
+  }
--- a/src/app/input-dialog/input-dialog.component.html
+++ b/src/app/input-dialog/input-dialog.component.html
@@ -0,0 +1,16 @@
+<h4 mat-dialog-title>{{inputTitle}}</h4>
+<mat-dialog-content>
+  <div>
+    <mat-form-field color="accent">
+      <input matInput (keyup.enter)="enterPressed()" [(ngModel)]="inputText" [placeholder]="inputPlaceholder">
+    </mat-form-field>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Cancel</button>
+  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
+  <button mat-button [disabled]="!inputText" type="submit" (click)="enterPressed()">{{submitText}}</button>
+  <div class="mat-spinner" *ngIf="inputSubmitted">
+    <mat-spinner [diameter]="25"></mat-spinner>
+  </div>
+</mat-dialog-actions>
--- a/src/app/input-dialog/input-dialog.component.spec.ts
+++ b/src/app/input-dialog/input-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputDialogComponent } from './input-dialog.component';
+
+describe('InputDialogComponent', () => {
+  let component: InputDialogComponent;
+  let fixture: ComponentFixture<InputDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/input-dialog/input-dialog.component.ts
+++ b/src/app/input-dialog/input-dialog.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit, Input, Inject, EventEmitter } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-input-dialog',
+  templateUrl: './input-dialog.component.html',
+  styleUrls: ['./input-dialog.component.css']
+})
+export class InputDialogComponent implements OnInit {
+
+  inputTitle: string;
+  inputPlaceholder: string;
+  submitText: string;
+
+  inputText = '';
+
+  inputSubmitted = false;
+
+  doneEmitter: EventEmitter<any> = null;
+  onlyEmitOnDone = false;
+
+  constructor(public dialogRef: MatDialogRef<InputDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  ngOnInit() {
+    this.inputTitle = this.data.inputTitle;
+    this.inputPlaceholder = this.data.inputPlaceholder;
+    this.submitText = this.data.submitText;
+
+    // checks if emitter exists, if so don't autoclose as it should be handled by caller
+    if (this.data.doneEmitter) {
+      this.doneEmitter = this.data.doneEmitter;
+      this.onlyEmitOnDone = true;
+    }
+  }
+
+  enterPressed() {
+    // validates input -- TODO: add custom validator
+    if (this.inputText) {
+      // only emit if emitter is passed
+      if (this.onlyEmitOnDone) {
+        this.doneEmitter.emit(this.inputText);
+        this.inputSubmitted = true;
+      } else {
+        this.dialogRef.close(this.inputText);
+      }
+    }
+  }
+
+}
--- a/src/app/main/main.component.css
+++ b/src/app/main/main.component.css
@@ -0,0 +1,122 @@
+.demo-card {
+    margin: 16px;
+}
+
+.demo-basic {
+    padding: 0;
+}
+
+.demo-basic .mat-card-content {
+    padding: 16px;
+}
+
+mat-toolbar.top {
+    height: 60px;
+    width: 100%;
+    text-align: center;
+}
+
+/*::ng-deep .mat-form-field-placeholder{
+
+    transform: scale(.75) translateY(20px) !important;
+  }*/
+
+.big {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.centered {
+    margin: 0 auto;
+    top: 50%;
+    left: 50%;
+}
+
+.example-full-width {
+    width: 100%;
+}
+
+.example-80-width {
+    width: 80%
+}
+
+mat-form-field.mat-form-field {
+    font-size: 24px;
+  }
+
+.spinner {
+    position: absolute;
+    display: inline-block;
+    margin-left: -28px;
+    margin-top: -10px;
+}
+
+.make-room-for-spinner {
+    padding-right: 40px;
+}
+
+.equal-sizes {
+    padding-right: 20px;
+}
+
+.search-card-title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.input-clear-button {
+    position: absolute;
+    right: -10px;
+    top: 5px;
+}
+
+.spinner-div {
+    display: inline-block;
+    position: absolute;
+    top: 15px;
+    right: -40px;
+}
+
+.margined {
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.results-div {
+    position: relative;
+    top: -15px;
+}
+
+.first-result-card {
+    border-radius: 4px 4px 0px 0px !important;
+}
+
+.last-result-card {
+    border-radius: 0px 0px 4px 4px !important;
+}
+
+.only-result-card {
+    border-radius: 4px !important;
+}
+
+.result-card {
+    height: 120px;
+    border-radius: 0px;
+    padding-bottom: 5px;
+}
+
+.download-progress-bar {
+    z-index: 999;
+    position: absolute;
+    bottom: 0px;
+    width: 150px;
+}
+
+.add-playlist-button {
+    float: right;
+}
+
+.advanced-input {
+    width: 100%;
+}
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -0,0 +1,218 @@
+<br/>
+<div class="big demo-basic">
+    <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
+        <mat-card-title>
+            Youtube Downloader
+        </mat-card-title>
+        <mat-card-content>
+            <div style="position: relative;">
+                <form class="example-form">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <div [ngClass]="allowQualitySelect ? 'col-sm-9' : null" class="col-12">
+                                <mat-form-field color="accent" class="example-full-width">
+                                    <input style="padding-right: 25px;" matInput  (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" [formControl]="urlForm" required #urlinput>
+                                    <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
+                                    <button class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
+                                </mat-form-field>
+                            </div>
+                            <div *ngIf="allowQualitySelect" class="col-7 col-sm-3">
+                                <mat-form-field color="accent" style="display: inline-block; width: inherit; min-width: 120px;">
+                                    <mat-label>Quality</mat-label>
+                                    <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedQuality">
+                                      <ng-container *ngFor="let option of qualityOptions[(audioOnly) ? 'audio' : 'video']">
+                                        <mat-option *ngIf="option.value === '' || url && cachedAvailableFormats[url] && cachedAvailableFormats[url]['formats'] && cachedAvailableFormats[url]['formats'][(audioOnly) ? 'audio' : 'video'][option.value]" [value]="option.value">
+                                            {{option.label}}
+                                        </mat-option>
+                                      </ng-container>
+                                    </mat-select>
+                                    <div class="spinner-div" *ngIf="url !== '' && cachedAvailableFormats[url] && cachedAvailableFormats[url]['formats_loading']">
+                                        <mat-spinner [diameter]="25"></mat-spinner>
+                                    </div>
+                                </mat-form-field>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="results-div" *ngIf="results_showing">
+                        <span *ngFor="let result of results; let i = index">
+                            <mat-card class="result-card mat-elevation-z7" [ngClass]="[(i === 0 && results.length > 1) ? 'first-result-card' : '', ((i === results.length-1) && results.length > 1) ? 'last-result-card' : '', (results.length === 1) ? 'only-result-card' : '']">
+                                <div class="search-card-title">
+                                    {{result.title}}
+                                </div>
+                                <div style="font-size: 12px; 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>
+                            </mat-card>
+                        </span>
+                    </div>
+                </form>
+                <br/>
+                <mat-checkbox [disabled]="current_download" (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
+                <mat-checkbox *ngIf="allowMultiDownloadMode" [disabled]="current_download" (change)="multiDownloadModeChanged($event)" [(ngModel)]="multiDownloadMode" style="float: right; margin-top: -12px">Multi-download mode</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 (click)="cancelDownload()" style="float: right" *ngIf="!!current_download" mat-stroked-button color="warn">Cancel</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>
+                    Advanced
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            <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}">Use custom args</mat-checkbox>
+                        <mat-form-field color="accent" style="margin-bottom: 42px;" class="advanced-input">
+                            <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args">
+                            <mat-hint>No need to include URL, just everything after.</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}">Use custom output</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">
+                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">Documentation</a>. Path is relative to the config download path. Don't include extension.</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}">Use authentication</mat-checkbox>
+                        <mat-form-field color="accent" class="advanced-input">
+                            <input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username">
+                        </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">
+                        </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="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>
+            <br/>
+        </div>
+        <div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
+            <mat-spinner [diameter]="25"></mat-spinner>
+        </div>
+        <ng-template #indeterminateprogress>
+            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        </ng-template>
+    </div>
+    <br/>
+</div>
+<ng-template #nofile>
+
+</ng-template>
+<div style="margin: 20px" *ngIf="fileManagerEnabled">
+    <mat-accordion>
+        <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
+                </mat-panel-title>
+                <mat-panel-description>
+                    Your audio files are here
+                </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>
+                        <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>
+                </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>
+                        <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.
+                </div>
+            </div>
+
+        </mat-expansion-panel>
+        <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
+                </mat-panel-title>
+                <mat-panel-description>
+                    Your video files are here
+                </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>
+                        <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>
+                </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>
+                        <mat-progress-bar *ngIf="downloading_content['video'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
+                    </mat-grid-tile>
+                </mat-grid-list>
+        
+                <!-- 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.
+                </div>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+</div>
+
+<ng-template #nomp3s>
+
+</ng-template>
+
+<ng-template #nomp4s>
+
+</ng-template>
--- a/src/app/main/main.component.spec.ts
+++ b/src/app/main/main.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -0,0 +1,965 @@
+import { Component, OnInit, ElementRef, ViewChild, ViewChildren, QueryList, isDevMode } from '@angular/core';
+import {PostsService} from '../posts.services';
+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 { saveAs } from 'file-saver';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/mapTo';
+import 'rxjs/add/operator/toPromise';
+import 'rxjs/add/observable/fromEvent'
+import 'rxjs/add/operator/filter'
+import 'rxjs/add/operator/debounceTime'
+import 'rxjs/add/operator/do'
+import 'rxjs/add/operator/switch'
+import { YoutubeSearchService, Result } from '../youtube-search.service';
+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';
+
+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',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.css']
+})
+export class MainComponent implements OnInit {
+  youtubeAuthDisabledOverride = true;
+
+  iOS = false;
+
+  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
+  fileManagerEnabled = false;
+  allowQualitySelect = false;
+  downloadOnlyMode = false;
+  allowMultiDownloadMode = false;
+  audioFolderPath;
+  videoFolderPath;
+  allowAdvancedDownload = false;
+
+  cachedAvailableFormats = {};
+
+  // youtube api
+  youtubeSearchEnabled = false;
+  youtubeAPIKey = null;
+  results_loading = false;
+  results_showing = true;
+  results = [];
+
+  mp3s: any[] = [];
+  mp4s: any[] = [];
+  files_cols = null;
+  playlists = {'audio': [], 'video': []};
+  playlist_thumbnails = {};
+  downloading_content = {'audio': {}, 'video': {}};
+  downloads: Download[] = [];
+  current_download: Download = null;
+
+  urlForm = new FormControl('', [Validators.required]);
+
+  qualityOptions = {
+    'video': [
+      {
+        'resolution': null,
+        'value': '',
+        'label': 'Max'
+      },
+      {
+        'resolution': '3840x2160',
+        'value': '2160',
+        'label': '2160p (4K)'
+      },
+      {
+        'resolution': '2560x1440',
+        'value': '1440',
+        'label': '1440p'
+      },
+      {
+        'resolution': '1920x1080',
+        'value': '1080',
+        'label': '1080p'
+      },
+      {
+        'resolution': '1280x720',
+        'value': '720',
+        'label': '720p'
+      },
+      {
+        'resolution': '720x480',
+        'value': '480',
+        'label': '480p'
+      },
+      {
+        'resolution': '480x360',
+        'value': '360',
+        'label': '360p'
+      },
+      {
+        'resolution': '360x240',
+        'value': '240',
+        'label': '240p'
+      },
+      {
+        'resolution': '256x144',
+        'value': '144',
+        'label': '144p'
+      }
+    ],
+    'audio': [
+      {
+        'kbitrate': null,
+        'value': '',
+        'label': 'Max'
+      },
+      {
+        'kbitrate': '256',
+        'value': '256K',
+        'label': '256 Kbps'
+      },
+      {
+        'kbitrate': '160',
+        'value': '160K',
+        'label': '160 Kbps'
+      },
+      {
+        'kbitrate': '128',
+        'value': '128K',
+        'label': '128 Kbps'
+      },
+      {
+        'kbitrate': '96',
+        'value': '96K',
+        'label': '96 Kbps'
+      },
+      {
+        'kbitrate': '70',
+        'value': '70K',
+        'label': '70 Kbps'
+      },
+      {
+        'kbitrate': '50',
+        'value': '50K',
+        'label': '50 Kbps'
+      },
+      {
+        'kbitrate': '32',
+        'value': '32K',
+        'label': '32 Kbps'
+      }
+    ]
+  }
+
+  selectedQuality = '';
+  formats_loading = false;
+
+  @ViewChild('urlinput', { read: ElementRef, static: false }) 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
+  };
+
+  constructor(private postsService: PostsService, private youtubeSearch: YoutubeSearchService, public snackBar: MatSnackBar,
+    private router: Router, public dialog: MatDialog, private platform: Platform, private route: ActivatedRoute) {
+    this.audioOnly = false;
+
+    // loading config
+    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.allowMultiDownloadMode = result['YoutubeDLMaterial']['Extra']['allow_multi_download_mode'];
+      this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
+      this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
+      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'];
+
+
+      if (this.fileManagerEnabled) {
+        this.getMp3s();
+        this.getMp4s();
+      }
+
+      if (this.youtubeSearchEnabled && this.youtubeAPIKey) {
+        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 };
+      }
+
+      if (this.autoStartDownload) {
+        this.downloadClicked();
+      }
+
+    }, error => {
+      console.log(error);
+    });
+
+  }
+
+  // app initialization.
+  ngOnInit() {
+    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
+
+  getMp3s() {
+    this.postsService.getMp3s().subscribe(result => {
+      const mp3s = result['mp3s'];
+      const playlists = result['playlists'];
+      // if they are different
+      if (JSON.stringify(this.mp3s) !== JSON.stringify(mp3s)) { this.mp3s = mp3s };
+      this.playlists.audio = playlists;
+
+      // get thumbnail url by using first video. this is a temporary hack
+      for (let i = 0; i < this.playlists.audio.length; i++) {
+        const playlist = this.playlists.audio[i];
+        let videoToExtractThumbnail = null;
+        for (let j = 0; j < this.mp3s.length; j++) {
+          if (this.mp3s[j].id === playlist.fileNames[0]) {
+            // found the corresponding file
+            videoToExtractThumbnail = this.mp3s[j];
+          }
+        }
+
+        if (videoToExtractThumbnail) { this.playlist_thumbnails[playlist.id] = videoToExtractThumbnail.thumbnailURL; }
+      }
+    }, error => {
+      console.log(error);
+    });
+  }
+
+  getMp4s() {
+    this.postsService.getMp4s().subscribe(result => {
+      const mp4s = result['mp4s'];
+      const playlists = result['playlists'];
+      // if they are different
+      if (JSON.stringify(this.mp4s) !== JSON.stringify(mp4s)) { this.mp4s = mp4s };
+      this.playlists.video = playlists;
+
+      // get thumbnail url by using first video. this is a temporary hack
+      for (let i = 0; i < this.playlists.video.length; i++) {
+        const playlist = this.playlists.video[i];
+        let videoToExtractThumbnail = null;
+        for (let j = 0; j < this.mp4s.length; j++) {
+          if (this.mp4s[j].id === playlist.fileNames[0]) {
+            // found the corresponding file
+            videoToExtractThumbnail = this.mp4s[j];
+          }
+        }
+
+        if (videoToExtractThumbnail) { this.playlist_thumbnails[playlist.id] = videoToExtractThumbnail.thumbnailURL; }
+      }
+    },
+    error => {
+      console.log(error);
+    });
+  }
+
+  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);
+    } else {
+      this.downloadHelperMp4(name, false, false);
+    }
+  }
+
+  public goToPlaylist(playlistID, type) {
+    const playlist = this.getPlaylistObjectByID(playlistID, type);
+    if (playlist) {
+      if (this.downloadOnlyMode) {
+        this.downloading_content[type][playlistID] = true;
+        this.downloadPlaylist(playlist.fileNames, type, playlist.name, playlistID);
+      } else {
+        const fileNames = playlist.fileNames;
+        this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID}]);
+      }
+    } else {
+      // playlist not found
+      console.error(`Playlist with ID ${playlistID} not found!`);
+    }
+  }
+
+  getPlaylistObjectByID(playlistID, type) {
+    for (let i = 0; i < this.playlists[type].length; i++) {
+      const playlist = this.playlists[type][i];
+      if (playlist.id === playlistID) {
+        return playlist;
+      }
+    }
+    return null;
+  }
+
+  public removeFromMp3(name: string) {
+    for (let i = 0; i < this.mp3s.length; i++) {
+      if (this.mp3s[i].id === name) {
+        this.mp3s.splice(i, 1);
+      }
+    }
+  }
+
+  public removePlaylistMp3(playlistID, index) {
+    this.postsService.removePlaylist(playlistID, 'audio').subscribe(res => {
+      if (res['success']) {
+        this.playlists.audio.splice(index, 1);
+        this.openSnackBar('Playlist successfully removed.', '');
+      }
+      this.getMp3s();
+    });
+  }
+
+  public removeFromMp4(name: string) {
+    for (let i = 0; i < this.mp4s.length; i++) {
+      if (this.mp4s[i].id === name) {
+        this.mp4s.splice(i, 1);
+      }
+    }
+  }
+
+  public removePlaylistMp4(playlistID, index) {
+    this.postsService.removePlaylist(playlistID, 'video').subscribe(res => {
+      if (res['success']) {
+        this.playlists.video.splice(index, 1);
+        this.openSnackBar('Playlist successfully removed.', '');
+      }
+      this.getMp4s();
+    });
+  }
+
+  // download helpers
+
+  downloadHelperMp3(name, is_playlist = false, forceView = false, new_download = null) {
+    this.downloadingfile = false;
+
+    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 {
+        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, new_download = null) {
+    this.downloadingfile = false;
+
+    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 {
+        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);
+    }
+  }
+
+  // download click handler
+  downloadClicked() {
+    if (this.ValidURL(this.url)) {
+      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'];
+          }
+        }
+
+        this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
+          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, false, new_download);
+          }
+        }, error => { // can't access server
+          this.downloadingfile = false;
+          this.openSnackBar('Download failed!', 'OK.');
+        });
+      } else {
+        // 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;
+
+        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'];
+          }
+        }
+
+        this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
+          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, false, new_download);
+          }
+        }, error => { // can't access server
+          this.downloadingfile = 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;
+  }
+
+  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 => {
+      this.downloading_content['audio'][name] = false;
+      const blob: Blob = res;
+      saveAs(blob, name + '.mp3');
+
+      if (!this.fileManagerEnabled) {
+        // tell server to delete the file once downloaded
+        this.postsService.deleteFile(name, true).subscribe(delRes => {
+          // reload mp3s
+          this.getMp3s();
+        });
+      }
+    });
+  }
+
+  downloadVideoFile(name) {
+    this.downloading_content['video'][name] = true;
+    this.postsService.downloadFileFromServer(name, 'video').subscribe(res => {
+      this.downloading_content['video'][name] = false;
+      const blob: Blob = res;
+      saveAs(blob, name + '.mp4');
+
+      if (!this.fileManagerEnabled) {
+        // tell server to delete the file once downloaded
+        this.postsService.deleteFile(name, false).subscribe(delRes => {
+          // reload mp4s
+          this.getMp4s();
+        });
+      }
+    });
+  }
+
+  downloadPlaylist(fileNames, type, zipName = null, playlistID = null) {
+    this.postsService.downloadFileFromServer(fileNames, type, zipName).subscribe(res => {
+      if (playlistID) { this.downloading_content[type][playlistID] = false };
+      const blob: Blob = res;
+      saveAs(blob, zipName + '.zip');
+    });
+
+  }
+
+  clearInput() {
+    this.url = '';
+    this.results_showing = false;
+  }
+
+  onInputBlur() {
+    this.results_showing = false;
+  }
+
+  visitURL(url) {
+    window.open(url);
+  }
+
+  useURL(url) {
+    this.results_showing = false;
+    this.url = url;
+  }
+
+  inputChanged(new_val) {
+    if (new_val === '' || !new_val) {
+      this.results_showing = false;
+    } else {
+      if (this.ValidURL(new_val)) {
+        this.results_showing = false;
+      }
+    }
+  }
+
+  // checks if url is a valid URL
+  ValidURL(str) {
+    // tslint:disable-next-line: max-line-length
+    const strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+    const re = new RegExp(strRegex);
+    const valid = re.test(str);
+
+    if (!valid) { return false; }
+
+    // tslint:disable-next-line: max-line-length
+    const youtubeStrRegex = /(?:http(?:s)?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&\"'<> #]+)/;
+    const reYT = new RegExp(youtubeStrRegex);
+    const ytValid = true || reYT.test(str);
+    if (valid && ytValid && Date.now() - this.last_url_check > 1000) {
+      if (str !== this.last_valid_url && this.allowQualitySelect) {
+        // get info
+        this.getURLInfo(str);
+      }
+      this.last_valid_url = str;
+    }
+    return valid;
+  }
+
+  // snackbar helper
+  public openSnackBar(message: string, action: string) {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+  getURLInfo(url) {
+    if (!this.cachedAvailableFormats[url]) {
+      this.cachedAvailableFormats[url] = {};
+    }
+    if (!(this.cachedAvailableFormats[url] && this.cachedAvailableFormats[url]['formats'])) {
+      this.cachedAvailableFormats[url]['formats_loading'] = true;
+      this.postsService.getFileInfo([url], 'irrelevant', true).subscribe(res => {
+        this.cachedAvailableFormats[url]['formats_loading'] = false;
+        const infos = res['result'];
+        if (!infos || !infos.formats) {
+          this.errorFormats(url);
+          return;
+        }
+        const parsed_infos = this.getAudioAndVideoFormats(infos.formats);
+        const available_formats = {audio: parsed_infos[0], video: parsed_infos[1]};
+        this.cachedAvailableFormats[url]['formats'] = available_formats;
+      }, err => {
+        this.errorFormats(url);
+      });
+    }
+  }
+
+  errorFormats(url) {
+    this.cachedAvailableFormats[url]['formats_loading'] = false;
+    console.error('Could not load formats for url ' + url);
+  }
+
+  attachToInput() {
+    Observable.fromEvent(this.urlInput.nativeElement, 'keyup')
+      .map((e: any) => e.target.value)           // extract the value of input
+      .filter((text: string) => text.length > 1) // filter out if empty
+      .debounceTime(250)                         // only once every 250ms
+      .do(() => this.results_loading = true)         // enable loading
+      .map((query: string) => this.youtubeSearch.search(query))
+      .switch()                                  // act on the return of the search
+      .subscribe(
+        (results: Result[]) => {
+          this.results_loading = false;
+          if (this.url !== '' && results && results.length > 0) {
+            this.results = results;
+            this.results_showing = true;
+          } else {
+            this.results_showing = false;
+          }
+        },
+        (err: any) => {
+          console.log(err)
+          this.results_loading = false;
+          this.results_showing = false;
+        },
+        () => { // on completion
+          this.results_loading = false;
+        }
+      );
+  }
+
+  onResize(event) {
+    this.setCols();
+  }
+
+  videoModeChanged(new_val) {
+    this.selectedQuality = '';
+    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 = {};
+
+    for (let i = 0; i < formats.length; i++) {
+      const format_obj = {type: null};
+
+      const format = formats[i];
+      const format_type = (format.vcodec === 'none') ? 'audio' : 'video';
+
+      format_obj.type = format_type;
+      if (format_obj.type === 'audio' && format.abr) {
+        const key = format.abr.toString() + 'K';
+        format_obj['bitrate'] = format.abr;
+        format_obj['format_id'] = format.format_id;
+        format_obj['ext'] = format.ext;
+        // don't overwrite if not m4a
+        if (audio_formats[key]) {
+          if (format.ext === 'm4a') {
+            audio_formats[key] = format_obj;
+          }
+        } else {
+          audio_formats[key] = format_obj;
+        }
+      } else if (format_obj.type === 'video') {
+        // check if video format is mp4
+        const key = format.height.toString();
+        if (format.ext === 'mp4') {
+          format_obj['height'] = format.height;
+          format_obj['acodec'] = format.acodec;
+          format_obj['format_id'] = format.format_id;
+
+          // no acodec means no overwrite
+          if (!(video_formats[key]) || format_obj['acodec'] !== 'none') {
+            video_formats[key] = format_obj;
+          }
+        }
+      }
+    }
+
+    video_formats['best_audio_format'] = this.getBestAudioFormatForMp4(audio_formats);
+
+    return [audio_formats, video_formats]
+  }
+
+  getBestAudioFormatForMp4(audio_formats) {
+    let best_audio_format_for_mp4 = null;
+    let best_audio_format_bitrate = 0;
+    const available_audio_format_keys = Object.keys(audio_formats);
+    for (let i = 0; i < available_audio_format_keys.length; i++) {
+      const audio_format_key = available_audio_format_keys[i];
+      const audio_format = audio_formats[audio_format_key];
+      const is_m4a = audio_format.ext === 'm4a';
+      if (is_m4a && audio_format.bitrate > best_audio_format_bitrate) {
+        best_audio_format_for_mp4 = audio_format.format_id;
+        best_audio_format_bitrate = audio_format.bitrate;
+      }
+    }
+    return best_audio_format_for_mp4;
+  }
+
+  accordionEntered(type) {
+    if (type === 'audio') {
+      audioFilesMouseHovering = true;
+      this.audioFileCards.forEach(filecard => {
+        filecard.onHoverResponse();
+      });
+    } else if (type === 'video') {
+      videoFilesMouseHovering = true;
+      this.videoFileCards.forEach(filecard => {
+        filecard.onHoverResponse();
+      });
+    }
+  }
+
+  accordionLeft(type) {
+    if (type === 'audio') {
+      audioFilesMouseHovering = false;
+    } else if (type === 'video') {
+      videoFilesMouseHovering = false;
+    }
+  }
+
+  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, {
+      data: {
+        filesToSelectFrom: (type === 'audio') ? this.mp3s : this.mp4s,
+        type: type
+      }
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        if (type === 'audio') { this.getMp3s() };
+        if (type === 'video') { this.getMp4s() };
+        this.openSnackBar('Successfully created playlist!', '');
+      } else if (result === false) {
+        this.openSnackBar('ERROR: failed to create playlist!', '');
+      }
+    });
+  }
+}
--- a/src/app/player/player.component.css
+++ b/src/app/player/player.component.css
@@ -0,0 +1,79 @@
+.video-player {
+    margin: 0 auto;
+}
+
+.video-player:focus {
+    outline: none;
+}
+
+.audio-styles {
+    height: 50px;
+    background-color: transparent;
+    width: 100%;
+}
+
+.video-styles {
+    width: 80%;
+}
+
+::ng-deep .mat-button-toggle-label-content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.container-video {
+    max-width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.progress-bar {
+    position: absolute;
+    left: 0px;
+    bottom: -1px;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    bottom: 3px;
+    left: 3px;
+    position: absolute;
+}
+
+.save-button {
+    right: 25px;
+    position: absolute;
+    bottom: 25px;
+}
+
+.favorite-button {
+    left: 25px;
+    position: absolute;
+    bottom: 25px;
+}
+
+.video-col {
+    padding-right: 0px;
+    padding-left: 0.01px;
+}
+
+.save-icon {
+    bottom: 1px;
+    position: relative;
+}
+
+.update-playlist-button-div {
+    float: right;
+    margin-right: 30px;
+    margin-top: 25px;
+    margin-bottom: 15px;
+}
+
+.spinner-div {
+    position: relative;
+    display: inline-block;
+    margin-right: 12px;
+    top: 8px;
+}
--- a/src/app/player/player.component.html
+++ b/src/app/player/player.component.html
@@ -0,0 +1,33 @@
+<div *ngIf="playlist.length > 0">
+    <div [ngClass]="(type === 'audio') ? null : 'container-video'" class="container">
+        <div style="max-width: 100%; margin-left: 0px;" class="row">
+            <div [ngClass]="(type === 'audio') ? 'my-2 px-1' : 'video-col'" class="col">
+                <vg-player (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
+                    <video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
+                    </video>
+                </vg-player>
+            </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">{{playlist_item.label}}</mat-button-toggle>
+                </mat-button-toggle-group>
+            </div>
+        </div>
+    </div>
+
+    <div class="update-playlist-button-div" *ngIf="id && playlistChanged()">
+        <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>
+        
+    </div>
+
+    <div *ngIf="playlist.length > 1">
+        <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
+        <button *ngIf="!id" color="accent" class="favorite-button" color="primary" (click)="namePlaylistDialog()" mat-fab><mat-icon class="save-icon">favorite</mat-icon></button>
+    </div>
+    <div *ngIf="playlist.length === 1">
+        <button class="save-button" color="primary" (click)="downloadFile()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
+    </div>
+</div>
--- a/src/app/player/player.component.spec.ts
+++ b/src/app/player/player.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerComponent } from './player.component';
+
+describe('PlayerComponent', () => {
+  let component: PlayerComponent;
+  let fixture: ComponentFixture<PlayerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/player/player.component.ts
+++ b/src/app/player/player.component.ts
@@ -0,0 +1,264 @@
+import { Component, OnInit, HostListener, EventEmitter } from '@angular/core';
+import { VgAPI } from 'videogular2/compiled/core';
+import { PostsService } from 'app/posts.services';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog, MatSnackBar } from '@angular/material';
+import { InputDialogComponent } from 'app/input-dialog/input-dialog.component';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+export interface IMedia {
+  title: string;
+  src: string;
+  type: string;
+  label: string;
+}
+
+@Component({
+  selector: 'app-player',
+  templateUrl: './player.component.html',
+  styleUrls: ['./player.component.css']
+})
+export class PlayerComponent implements OnInit {
+
+  playlist: Array<IMedia> = [];
+  original_playlist: string = null;
+  playlist_updating = false;
+
+  currentIndex = 0;
+  currentItem: IMedia = null;
+  api: VgAPI;
+
+  // params
+  fileNames: string[];
+  type: string;
+
+  baseStreamPath = null;
+  audioFolderPath = null;
+  videoFolderPath = null;
+  innerWidth: number;
+
+  downloading = false;
+
+  id = null;
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.innerWidth = window.innerWidth;
+  }
+
+  ngOnInit(): void {
+    this.innerWidth = window.innerWidth;
+
+    this.fileNames = this.route.snapshot.paramMap.get('fileNames').split('|nvr|');
+    this.type = this.route.snapshot.paramMap.get('type');
+    this.id = this.route.snapshot.paramMap.get('id');
+
+    // loading config
+    this.postsService.loadNavItems().subscribe(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'];
+
+
+      let fileType = null;
+      if (this.type === 'audio') {
+        fileType = 'audio/mp3';
+      } else if (this.type === 'video') {
+        fileType = 'video/mp4';
+      } else {
+        // error
+        console.error('Must have valid file type! Use \'audio\' or \video\'');
+      }
+
+      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 + encodeURI(fileName); // + (this.type === 'audio' ? '.mp3' : '.mp4');
+        // 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,
+          label: label
+        }
+        this.playlist.push(mediaObject);
+      }
+      this.currentItem = this.playlist[this.currentIndex];
+      this.original_playlist = JSON.stringify(this.playlist);
+    });
+
+    // this.getFileInfos();
+
+  }
+
+  constructor(private postsService: PostsService, private route: ActivatedRoute, private dialog: MatDialog, private router: Router,
+              public snackBar: MatSnackBar) {
+
+  }
+
+  onPlayerReady(api: VgAPI) {
+      this.api = api;
+
+      this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.playVideo.bind(this));
+      this.api.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
+  }
+
+  nextVideo() {
+      if (this.currentIndex === this.playlist.length - 1) {
+        // dont continue playing
+          // this.currentIndex = 0;
+          return;
+      }
+
+      this.currentIndex++;
+      this.currentItem = this.playlist[ this.currentIndex ];
+  }
+
+  playVideo() {
+      this.api.play();
+  }
+
+  onClickPlaylistItem(item: IMedia, index: number) {
+      // console.log('new current item is ' + item.title + ' at index ' + index);
+      this.currentIndex = index;
+      this.currentItem = item;
+  }
+
+  getFileInfos() {
+    const fileNames = this.getFileNames();
+    this.postsService.getFileInfo(fileNames, this.type, false).subscribe(res => {
+
+    });
+  }
+
+  getFileNames() {
+    const fileNames = [];
+    for (let i = 0; i < this.playlist.length; i++) {
+      fileNames.push(this.playlist[i].title);
+    }
+    return fileNames;
+  }
+
+  decodeURI(string) {
+    return decodeURI(string);
+  }
+
+  downloadContent() {
+    const fileNames = [];
+    for (let i = 0; i < this.playlist.length; i++) {
+      fileNames.push(this.playlist[i].title);
+    }
+
+    const zipName = fileNames[0].split(' ')[0] + fileNames[1].split(' ')[0];
+    this.downloading = true;
+    this.postsService.downloadFileFromServer(fileNames, this.type, zipName).subscribe(res => {
+      this.downloading = false;
+      const blob: Blob = res;
+      saveAs(blob, zipName + '.zip');
+    }, err => {
+      console.log(err);
+      this.downloading = false;
+    });
+  }
+
+  downloadFile() {
+    const ext = (this.type === 'audio') ? '.mp3' : '.mp4';
+    const filename = this.playlist[0].title;
+    this.downloading = true;
+    this.postsService.downloadFileFromServer(filename, this.type).subscribe(res => {
+      this.downloading = false;
+      const blob: Blob = res;
+      saveAs(blob, filename + ext);
+    }, err => {
+      console.log(err);
+      this.downloading = false;
+    });
+  }
+
+  namePlaylistDialog() {
+    const done = new EventEmitter<any>();
+      const dialogRef = this.dialog.open(InputDialogComponent, {
+        width: '300px',
+        data: {
+          inputTitle: 'Name the playlist',
+          inputPlaceholder: 'Name',
+          submitText: 'Favorite',
+          doneEmitter: done
+        }
+      });
+
+      done.subscribe(name => {
+
+        // Eventually do additional checks on name
+        if (name) {
+          const fileNames = this.getFileNames();
+          this.postsService.createPlaylist(name, fileNames, this.type, null).subscribe(res => {
+            if (res['success']) {
+              dialogRef.close();
+              const new_playlist = res['new_playlist'];
+              this.openSnackBar('Playlist \'' + name + '\' successfully created!', '')
+              this.playlistPostCreationHandler(new_playlist.id);
+            }
+          });
+        }
+      });
+  }
+
+  /*
+  createPlaylist(name) {
+    this.postsService.createPlaylist(name, this.fileNames, this.type, null).subscribe(res => {
+      if (res['success']) {
+        console.log('Success!');
+      }
+    });
+  }
+  */
+
+  playlistPostCreationHandler(playlistID) {
+    // changes the route without moving from the current view or
+    // triggering a navigation event
+    this.id = playlistID;
+    this.router.navigateByUrl(this.router.url + ';id=' + playlistID);
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.playlist, event.previousIndex, event.currentIndex);
+  }
+
+   playlistChanged() {
+    return JSON.stringify(this.playlist) !== this.original_playlist;
+  }
+
+  updatePlaylist() {
+    const fileNames = this.getFileNames();
+    this.playlist_updating = true;
+    this.postsService.updatePlaylist(this.id, fileNames, this.type).subscribe(res => {
+    this.playlist_updating = false;
+      if (res['success']) {
+        const fileNamesEncoded = fileNames.join('|nvr|');
+        this.router.navigate(['/player', {fileNames: fileNamesEncoded, type: 'video', id: this.id}]);
+        this.openSnackBar('Successfully updated playlist.', '');
+        this.original_playlist = JSON.stringify(this.playlist);
+      } else {
+        this.openSnackBar('ERROR: Failed to update playlist.', '');
+      }
+    })
+  }
+
+  // snackbar helper
+  public openSnackBar(message: string, action: string) {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}
--- a/src/app/posts.services.ts
+++ b/src/app/posts.services.ts
@@ -1,74 +1,140 @@
-import {Injectable} from '@angular/core';
-import {Http} from '@angular/http';
+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';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
+import { THEMES_CONFIG } from '../themes';
+import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';

@Injectable()
 export class PostsService {
-    path: string = "";
-    audioFolder: string = "";
-    videoFolder: string = "";
-    startPath: string = "http://localhost:17442/";
-    startPathSSL: string = "https://localhost:17442/"
-    handShakeComplete: boolean = false;
+    path = '';
+    audioFolder = '';
+    videoFolder = '';
+    startPath = null; // 'http://localhost:17442/';
+    startPathSSL = null; // 'https://localhost:17442/'
+    handShakeComplete = false;
+    THEMES_CONFIG = THEMES_CONFIG;
+    theme;

-    constructor(private http: Http){
+    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/';
+        }
    }

-    startHandshake(url: string): Observable<string>
-    {
-        return this.http.get(url + "geturl")
-            .map(res => res.json());
+    setTheme(theme) {
+        this.theme = this.THEMES_CONFIG[theme];
    }

-    startHandshakeSSL(url: string): Observable<string>
-    {
-        return this.http.get(url + "geturl")
-            .map(res => res.json());
+    startHandshake(url: string) {
+        return this.http.get(url + 'geturl');
    }

-    getVideoFolder(): Observable<string>
-    {
-        return this.http.get(this.startPath + "videofolder")
-            .map(res => res.json());
+    startHandshakeSSL(url: string) {
+        return this.http.get(url + 'geturl');
    }

-    getAudioFolder(): Observable<string>
-    {
-        return this.http.get(this.startPath + "audiofolder")
-            .map(res => res.json());
+    getVideoFolder() {
+        return this.http.get(this.startPath + 'videofolder');
    }

-    makeMP3(url: string): Observable<string>
-    {
-        return this.http.post(this.path + "tomp3",{url: url})
-            .map(res => res.json());
+    getAudioFolder() {
+        return this.http.get(this.startPath + 'audiofolder');
    }

-    makeMP4(url: string): Observable<string>
-    {
-        return this.http.post(this.path + "tomp4",{url: url})
-            .map(res => res.json());
+    // 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,
+                                                    customArgs: customArgs,
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
    }

-    getFileStatusMp3(name: string): Observable<any> {
-        return this.http.post(this.path + "mp3fileexists",{name: name})
-            .map(res => res.json());
+    // 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,
+                                                    customArgs: customArgs,
+                                                    customOutput: customOutput,
+                                                    youtubeUsername: youtubeUsername,
+                                                    youtubePassword: youtubePassword});
    }

-    getFileStatusMp4(name: string): Observable<any> {
-        return this.http.post(this.path + "mp4fileexists",{name: name})
-            .map(res => res.json());
+    getFileStatusMp3(name: string) {
+        return this.http.post(this.path + 'fileStatusMp3', {name: name});
+    }
+
+    getFileStatusMp4(name: string) {
+        return this.http.post(this.path + 'fileStatusMp4', {name: name});
    }

    loadNavItems() {
-        console.log("Config location: " + window.location.href + "backend/config/default.json");
-        return this.http.get(window.location.href + "backend/config/default.json")
-                        .map(res => res.json());
+        if (isDevMode()) {
+            return this.http.get('./assets/default.json');
+        } else {
+            return this.http.get(this.path + 'config');
+        }
+    }
+
+    deleteFile(name: string, isAudio: boolean) {
+        if (isAudio) {
+            return this.http.post(this.path + 'deleteMp3', {name: name});
+        } else {
+            return this.http.post(this.path + 'deleteMp4', {name: name});
+        }
+    }
+
+    getMp3s() {
+        return this.http.post(this.path + 'getMp3s', {});
+    }
+
+    getMp4s() {
+        return this.http.post(this.path + 'getMp4s', {});
+    }
+
+    downloadFileFromServer(fileName, type, outputName = null) {
+        return this.http.post(this.path + 'downloadFile', {fileNames: fileName,
+                                                            type: type,
+                                                            is_playlist: Array.isArray(fileName),
+                                                            outputName: outputName},
+                                                          {responseType: 'blob'});
+    }
+
+    getFileInfo(fileNames, type, urlMode) {
+        return this.http.post(this.path + 'getVideoInfos', {fileNames: fileNames, type: type, urlMode: urlMode});
+    }
+
+    createPlaylist(playlistName, fileNames, type, thumbnailURL) {
+        return this.http.post(this.path + 'createPlaylist', {playlistName: playlistName,
+                                                            fileNames: fileNames,
+                                                            type: type,
+                                                            thumbnailURL: thumbnailURL});
+    }
+
+    updatePlaylist(playlistID, fileNames, type) {
+        return this.http.post(this.path + 'updatePlaylist', {playlistID: playlistID,
+                                                            fileNames: fileNames,
+                                                            type: type});
+    }
+
+    removePlaylist(playlistID, type) {
+        return this.http.post(this.path + 'deletePlaylist', {playlistID: playlistID, type: type});
    }
 }

--- a/src/app/youtube-search.service.spec.ts
+++ b/src/app/youtube-search.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { YoutubeSearchService } from './youtube-search.service';
+
+describe('YoutubeSearchService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: YoutubeSearchService = TestBed.get(YoutubeSearchService);
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/youtube-search.service.ts
+++ b/src/app/youtube-search.service.ts
@@ -0,0 +1,101 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export class Result {
+  id: string
+  title: string
+  desc: string
+  thumbnailUrl: string
+  videoUrl: string
+  uploaded: any;
+
+  constructor(obj?: any) {
+    this.id           = obj && obj.id           || null
+    this.title        = obj && obj.title        || null
+    this.desc         = obj && obj.desc         || null
+    this.thumbnailUrl = obj && obj.thumbnailUrl || null
+    this.uploaded = obj && obj.uploaded || null
+    this.videoUrl     = obj && obj.videoUrl     || `https://www.youtube.com/watch?v=${this.id}`
+
+    this.uploaded = formatDate(Date.parse(this.uploaded));
+  }
+
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class YoutubeSearchService {
+
+  url = 'https://www.googleapis.com/youtube/v3/search';
+  key = null;
+
+  constructor(private http: HttpClient) { }
+
+  initializeAPI(key) {
+    this.key = key;
+  }
+
+  search(query: string): Observable<Result[]> {
+    if (this.ValidURL(query)) {
+      return new Observable<Result[]>();
+    }
+    const params: string = [
+      `q=${query}`,
+      `key=${this.key}`,
+      `part=snippet`,
+      `type=video`,
+      `maxResults=5`
+    ].join('&')
+    const queryUrl = `${this.url}?${params}`
+    return this.http.get(queryUrl).map(response => {
+      return <any>response['items'].map(item => {
+        return new Result({
+          id: item.id.videoId,
+          title: item.snippet.title,
+          desc: item.snippet.description,
+          thumbnailUrl: item.snippet.thumbnails.high.url,
+          uploaded: item.snippet.publishedAt
+        })
+      })
+    })
+  }
+
+  // checks if url is a valid URL
+  ValidURL(str) {
+    // tslint:disable-next-line: max-line-length
+    const strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+    const re = new RegExp(strRegex);
+    return re.test(str);
+  }
+}
+
+function formatDate(dateVal) {
+  const newDate = new Date(dateVal);
+
+  const sMonth = padValue(newDate.getMonth() + 1);
+  const sDay = padValue(newDate.getDate());
+  const sYear = newDate.getFullYear();
+  let sHour: any;
+  sHour = newDate.getHours();
+  const sMinute = padValue(newDate.getMinutes());
+  let sAMPM = 'AM';
+
+  const iHourCheck = parseInt(sHour, 10);
+
+  if (iHourCheck > 12) {
+      sAMPM = 'PM';
+      sHour = iHourCheck - 12;
+  } else if (iHourCheck === 0) {
+      sHour = '12';
+  }
+
+  sHour = padValue(sHour);
+
+  return sMonth + '-' + sDay + '-' + sYear + ' ' + sHour + ':' + sMinute + ' ' + sAMPM;
+}
+
+function padValue(value) {
+  return (value < 10) ? '0' + value : value;
+}
--- a/src/assets/default.json
+++ b/src/assets/default.json
@@ -0,0 +1,37 @@
+{
+    "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/"
+      },
+      "Extra": {
+        "title_top": "Youtube Downloader",
+        "file_manager_enabled": true,
+        "allow_quality_select": true,
+        "download_only_mode": false,
+        "allow_multi_download_mode": true
+      },
+      "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": "",
+        "allow_advanced_download": true
+      }
+    }
+  }
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/index.html
+++ b/src/index.html
@@ -7,11 +7,10 @@

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


 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
+// import 'core-js/es6/reflect';


 /** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'web-animations-js';  // Run `npm install --save web-animations-js`.



--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -0,0 +1,70 @@
+/* You can add global styles to this file, and also import other style files */
+
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
+
+//@import './app-theme';
+/* You can add global styles to this file, and also import other style files */
+// @import "../node_modules/@angular/material/prebuilt-themes/purple-green.css";
+@import "palette.scss";
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+/*// Typography
+$custom-typography: mat-typography-config(
+  $font-family: Raleway,
+  $headline: mat-typography-level(24px, 48px, 400),
+  $body-1: mat-typography-level(16px, 24px, 400)
+);
+@include angular-material-typography($custom-typography);
+*/
+// Default colors
+$my-app-primary: mat-palette($mat-light-blue, 700, 100, 800);
+$my-app-accent:  mat-palette($mat-blue, 700, 100, 800);
+$my-app-warn: mat-palette($mat-red, 700, 100, 800);
+
+$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
+@include angular-material-theme($my-app-theme);
+
+// Dark theme
+$dark-primary: mat-palette($mat-indigo);
+$dark-accent:  mat-palette($mat-blue);
+$dark-warn:    mat-palette($mat-deep-orange);
+
+$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+.dark-theme {
+  @include angular-material-theme($dark-theme);
+}
+
+// Light theme
+$light-primary: mat-palette($mat-grey, 200, 500, 300);
+$light-accent: mat-palette($mat-brown, 200);
+$light-warn: mat-palette($mat-deep-orange, 200);
+
+$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
+
+.light-theme {
+  @include angular-material-theme($light-theme)
+}
+
+.no-outline {
+  outline: none;
+}
+
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// @import '../node_modules/@angular/material/theming';
+
+.centered {
+    margin: 0 auto;
+    left: 50%;
+    top: 50%;
+}
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -0,0 +1,22 @@
+const THEMES_CONFIG = {
+    'default': {
+        'key': 'default',
+        'background_color': 'ghostwhite',
+        'css_label': 'default-theme',
+        'social_theme': 'material-light'
+    },
+    'dark': {
+        'key': 'dark',
+        'background_color': '#757575',
+        'css_label': 'dark-theme',
+        'social_theme': 'material-dark'
+    },
+    'light': {
+        'key': 'light',
+        'background_color': 'white',
+        'css_label': 'light-theme',
+        'social_theme': 'material-light'
+    }
+};
+
+export {THEMES_CONFIG};
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -2,7 +2,6 @@
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
-    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
@@ -1,20 +1,19 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "module": "commonjs",
-    "target": "es5",
-    "baseUrl": "",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,8 @@
 {
  "compileOnSave": false,
  "compilerOptions": {
+    "downlevelIteration": true,
+    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
@@ -8,13 +10,16 @@
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
-    ]
+    ],
+    "module": "esnext"
  }
-}
+}
--- a/tslint.json
+++ b/tslint.json
@@ -14,8 +14,7 @@
    "eofline": true,
    "forin": true,
    "import-blacklist": [
-      true,
-      "rxjs"
+      true
    ],
    "import-spacing": true,
    "indent": [
@@ -119,12 +118,12 @@
      "app",
      "kebab-case"
    ],
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true,
Author	SHA1	Message	Date
Tzahi12345	a8d2e1d890	Merge pull request #12 from Tzahi12345/serve-nodejs Serve frontend app through nodejs	2020-03-01 00:50:20 -05:00
Isaac Grynsztein	0511996b26	fixed margins on advanced mode UI and temporarily disabled youtube auth until youtube-dl fixes it advanced mode inputs now get saved in cookies fixed bug in UI where delete button was missing by making it more mobile-friendly	2020-03-01 00:48:22 -05:00
Isaac Grynsztein	f29a29bf2f	fixed bug that prevented custom args from working	2020-03-01 00:46:42 -05:00
Isaac Grynsztein	24d4107311	Clarified old config in README	2020-02-29 04:31:23 -05:00
Isaac Grynsztein	a46f9c37c6	fixed bug where old config item was fetched	2020-02-29 04:31:06 -05:00
Isaac Grynsztein	2b1c68bad0	update docker-compose and dockerfile	2020-02-29 04:30:56 -05:00
Isaac Grynsztein	e2d23404ce	removed unused variable	2020-02-29 04:30:34 -05:00
Isaac Grynsztein	db208ed55e	Updated README to reflect changes in the config	2020-02-29 03:30:21 -05:00
Isaac Grynsztein	b87a9f1e2f	fixed bug where playlist titles included their relative path	2020-02-29 03:08:02 -05:00
Tzahi12345	a1ac1e450d	Merge pull request #11 from Tzahi12345/auth-params Add the ability to use youtube authentication	2020-02-28 22:12:29 -05:00
Tzahi12345	6764ea6c3b	Merge pull request #10 from Tzahi12345/url_params Add URL params home page	2020-02-28 22:07:53 -05:00
Isaac Grynsztein	8a52020186	resized favicon	2020-02-28 22:05:16 -05:00
Isaac Grynsztein	695b836852	added url params on home page to auto download content created chrome extension to facilitate this feature	2020-02-28 21:21:17 -05:00
Isaac Grynsztein	71d7c30032	updated backend to support youtube auth frontend now support youtube auth as well	2020-02-28 20:09:59 -05:00
Isaac Grynsztein	5ca4f036c7	fixed bug where if multi mode was enabled, click on file card URLs didn't work	2020-02-28 00:32:33 -05:00
Isaac Grynsztein	1ffe61f01f	removed path-base and updated docker-compose.yml & README	2020-02-28 00:20:08 -05:00
Isaac Grynsztein	5e331b9ffa	config settings now just have url and port fixed bug where multi download mode would not allow file card link clicking	2020-02-28 00:14:46 -05:00
Isaac Grynsztein	09bdae90e2	refactored code so node.js serves the angular app, and all the backend routes are prepended with /api/ nodejs now compressed requests	2020-02-27 22:52:50 -05:00
Isaac Grynsztein	37cc8f4fe1	fixed error in docker compose	2020-02-27 04:15:19 -05:00
Isaac Grynsztein	925e083b8d	added new config settings to README	2020-02-27 04:12:27 -05:00
Isaac Grynsztein	6dc42278c4	updated docker-compose to new youtubedl-material version number	2020-02-27 03:57:41 -05:00
Isaac Grynsztein	12c227badb	temporarily disabled advanced mode until further testing	2020-02-27 03:47:11 -05:00
Isaac Grynsztein	181a9f842c	fixed bug where downloading files failed if the name had to be encoded	2020-02-27 03:46:57 -05:00
Isaac Grynsztein	b79d801c0f	Added support for custom arguments and custom output patch	2020-02-27 03:27:57 -05:00
Isaac Grynsztein	fc3691336d	added allow multi download mode setting frontend implementation	2020-02-27 01:10:23 -05:00
Isaac Grynsztein	bcd879ebc8	added multiple download support lazy loaded images now reload after a new download	2020-02-27 01:06:32 -05:00
Isaac Grynsztein	b646db4828	Added the ability to cancel downloads Audio only checkbox now disabled when downloading Laid the groundwork for multiple simulataneous downloads	2020-02-26 19:04:02 -05:00
Isaac Grynsztein	426d52e359	fixed tabindex ordering of file cards (delete came before url)	2020-02-26 19:03:13 -05:00
Isaac Grynsztein	17199dd9c0	Updated readme	2020-02-26 18:11:37 -05:00
Isaac Grynsztein	c680c2827b	reworded docker steps	2020-02-26 03:18:19 -05:00
Isaac Grynsztein	2dbf8d31f7	Updated docker info in readme	2020-02-26 03:17:29 -05:00
Isaac Grynsztein	a3753e557c	Updated docker instructions	2020-02-26 03:16:42 -05:00
Isaac Grynsztein	ec80abdc8e	Updated readme.md to include docker steps	2020-02-26 03:07:22 -05:00
Isaac Grynsztein	1ef7d24c22	downgraded required docker-compose.yml to 2	2020-02-26 01:35:21 -05:00
Isaac Grynsztein	4b6f6996ae	fixed bug in docker during building	2020-02-26 01:28:46 -05:00
Isaac Grynsztein	c930ee94c5	added docker support reworked backend to allow for containerization. config items can now be overwritten by environment vars fixed bug during building updated youtube-dl version in backend	2020-02-26 00:34:13 -05:00
Isaac Grynsztein	e88edbef5a	Updated README to fix missing step	2020-02-24 16:22:54 -05:00
Isaac Grynsztein	ac13ed3359	updated package.json to remove bug during building	2020-02-24 16:18:09 -05:00
Isaac Grynsztein	faae0d44e6	make it better	2020-02-24 07:47:36 -05:00
Isaac Grynsztein	7d8ec04ad6	make it better	2020-02-24 07:39:00 -05:00
Isaac Grynsztein	8629e6ae9e	make it better	2020-02-24 07:28:11 -05:00
Isaac Grynsztein	6e311d46a6	make it better	2020-02-24 06:41:13 -05:00
Isaac Grynsztein	006e983c14	make it better	2020-02-24 06:13:56 -05:00
Isaac Grynsztein	5db3e06a81	make it better	2020-02-24 06:05:24 -05:00
Isaac Grynsztein	2ced7b7f91	researching heroku support	2020-02-24 05:58:25 -05:00
Isaac Grynsztein	042baa418b	updated .gitignore	2020-02-24 04:12:45 -05:00
Isaac Grynsztein	deb928da12	sorting and updating now only possible on favorited (saved) playlists fixed compilation bug in app.module	2020-02-24 04:11:22 -05:00
Isaac Grynsztein	a7f5cc01d3	update youtube-dl binary	2020-02-24 03:51:27 -05:00
Isaac Grynsztein	414b6a26d9	backend playlist updating endpoint implemented tomp3/tomp4 errors are now logged	2020-02-24 03:51:11 -05:00
Isaac Grynsztein	c069672e62	ngmodule drag and drop import commit	2020-02-24 03:50:29 -05:00
Isaac Grynsztein	167d9dafa2	added title to create playlist dialog	2020-02-24 03:50:10 -05:00
Isaac Grynsztein	9302084f60	playlists can now be rearranged and updated	2020-02-24 03:49:43 -05:00
Isaac Grynsztein	ac0199f596	iOS is now checked by the cdk platform component	2020-02-24 03:49:01 -05:00
Isaac Grynsztein	8e8ab7ac6c	added min-height to app component	2020-02-23 22:30:09 -05:00
Isaac Grynsztein	f06c9ba44a	fixed bug where non-themed white space that appeared when file manager was expanded	2020-02-23 22:29:42 -05:00
Isaac Grynsztein	6e593472d9	Merge branch 'master' of https://github.com/Tzahi12345/YoutubeDL-Material	2020-02-23 03:21:13 -05:00
Isaac Grynsztein	0bddbda36d	updated favicon	2020-02-23 03:20:24 -05:00
Isaac Grynsztein	23feb05fab	downloading agent is now the default of youtube-dl by default instead of aria2c. testing showed it performed better over multipled trials added a setting to use aria2c optionally added debug timing to getURLInfos	2020-02-23 03:20:07 -05:00
Isaac Grynsztein	a0eff4d96d	images on file cards now load when the accordion is hovered over to increase responsiveness. images are loading maybe a second before clicking so hopefully they're done by the time the expansion finishes added the ability to create playlists in the gui through a new dialog reloading mp3s/mp4s doesn't cause an image refresh anymore when the list is unchanged fixed loading spinner of available formats so it now only shows when it is loading the current url file card images now don't show when errored or thumbnailurl doesn't exist	2020-02-23 03:18:26 -05:00
Isaac Grynsztein	b87b49d77b	removed outline for video player	2020-02-23 03:13:09 -05:00
Tzahi12345	c05026aa15	Update README.md	2020-02-21 01:33:31 -05:00
Tzahi12345	883df63d2f	Update README.md	2020-02-20 21:22:53 -05:00
Tzahi12345	da1d49b541	Update README.md	2020-02-20 21:22:25 -05:00
Isaac Grynsztein	393ed5a210	added skeleton code for future electron.js support added font swap to google font call simplified polyfills updated backend package.json info	2020-02-20 18:35:09 -05:00
Isaac Grynsztein	54492b109a	thumbnails now lazy load. when it is loading, a content loading gradient is shown in front of it made file cards look better on mobile devices	2020-02-20 15:45:40 -05:00
Isaac Grynsztein	7eac88a31f	removed debug logging	2020-02-20 15:44:44 -05:00
Isaac Grynsztein	8fec9639eb	fixed bug where if no theme was selected, errors would fire	2020-02-20 14:30:05 -05:00
Isaac Grynsztein	a15e1f98fa	fixed compilation error and cleaned up code in app component	2020-02-20 14:29:29 -05:00
Isaac Grynsztein	6604484765	updated styles.css to styles.scss in angular.json	2020-02-20 10:45:59 -05:00
Isaac Grynsztein	c58f8a4058	added theming support with 3 themes (only 2 selectable for now) switched from css to scss default style system cleaned up unused code in app component upated youtube search results styling downloading video from home screen now shows local progress bar under that video	2020-02-20 10:45:37 -05:00
Isaac Grynsztein	8545016f1d	"audio only" checkbox is now remembered after page loads removed videogular icons as it caused compilation errors	2020-02-19 02:45:05 -05:00
Isaac Grynsztein	9b1e84821e	moved theme to internal file	2020-02-19 02:43:58 -05:00
Isaac Grynsztein	6505fad7bc	added save button to player component and updated download button	2020-02-19 02:29:36 -05:00
Isaac Grynsztein	d245904c0d	added the ability to save playlists added local db system (lowdb) playlists are now downloaded as a zip from the streaming menu	2020-02-19 02:29:10 -05:00
Isaac Grynsztein	0095ea1271	fixed bug where search results showed old results when search bar was empty	2020-02-18 18:00:39 -05:00
Isaac Grynsztein	b41d10f514	Added download button to player component	2020-02-18 17:29:34 -05:00
Isaac Grynsztein	8e3d6a0af6	Player compilation error fixed removed debug statements in player component	2020-02-17 17:42:50 -05:00
Isaac Grynsztein	1e4995c5ce	Fixed catch statements not having arguments on backend Fixed backend location url not working when not in root dir on web server	2020-02-17 17:42:21 -05:00
Isaac Grynsztein	710e3613a8	removed debug statements	2020-02-17 00:40:23 -05:00
Isaac Grynsztein	28331c1037	Updated debug-only default.json to reflect the new options added	2020-02-17 00:37:41 -05:00
Isaac Grynsztein	202c0718b7	Updated debug launch.json to include frontend debugging	2020-02-17 00:37:06 -05:00
Isaac Grynsztein	a985963661	Adding updated bootstrap to index.html	2020-02-17 00:36:33 -05:00
Isaac Grynsztein	f673b325fd	Added custom quality options to PostsService and the ability to do a URL info grab from the server Video and audio streams now save the stream object in a "descriptors" variable which will give the server the ability to close them when the file needs to be deleted. - without this, windows systems don't play nice with nodejs function fs.unlinkSync. A weird, but necessary workaround deleting files is now done asynchronously, and success is now determined by whether they exist afterwards or not Added backend function to get info for URLs Modified tomp3 and tomp4 endpoint to support custom quality settings.	2020-02-17 00:36:15 -05:00
Isaac Grynsztein	5f4a7a1e69	Added support for custom quality settings for video and audio files. Available formats are downloaded when a valid YT url is detected. These formats are then parsed and a best audio format is selected based on the results After downloading a file with no file manager, file is now deleted. After file deletion, mp3/mp4 reload occurs Updated view on main component to be more responsive, using bootstrap grid Updated progress bar UI-wise to be more in line with the rest of the page	2020-02-17 00:32:31 -05:00
Isaac Grynsztein	d54b2a73c8	Updated view of player to be more responsive. Window width is now recorded for eventual use for responsiveness optimization	2020-02-17 00:28:49 -05:00
Isaac Grynsztein	8e7bb4ba3b	added custom player added routing with two routes: home and player moved most of app component to main component. app component currently just manages the top toolbar	2020-02-15 02:13:21 -05:00
Isaac Grynsztein	d595de5786	added functions to get info on a downloaded (or downloading) file bug fixed where videos with quotations would not properly stream	2020-02-15 02:11:21 -05:00
Isaac Grynsztein	31394fa98c	updated mobile view for file cards to be more responsive streamed audio/video now include the extension in the download cleaned up unused code in app component	2020-02-14 00:17:51 -05:00
Isaac Grynsztein	af595d3df8	Added debug mode to server and relevant debug configurations simplified youtubedl download process to speed up the download queryurl not printed any longer by youtube search service	2020-02-14 00:15:55 -05:00
Isaac Grynsztein	81377a2b38	added youtube search functionality in frontend	2020-02-13 06:43:49 -05:00
Isaac Grynsztein	35bdd1deeb	fixed file name paths on backend. backend also now tells frontend when the url provided is a playlist frontend now does not get the file status and simply waits for the server to respond with the file added methods to download audio/video files to simplify downloadHelperMp3/Mp4	2020-02-13 05:10:27 -05:00
Isaac Grynsztein	a1ec53edb9	preparing config for youtube search feature	2020-02-13 05:08:14 -05:00
Isaac Grynsztein	aa130d3fc9	updated youtube-dl version for nodejs	2020-02-13 03:16:34 -05:00
Isaac Grynsztein	0f0bf3a401	updated youtube-dl.exe binary for windows	2020-02-13 03:13:20 -05:00
Isaac Grynsztein	73b9c61080	renamed variable in backend deleteaudiofile/deletevideofile functions now made for reusability downloaded videos now use the title as the file name. this requires longer download times as 2 calls are created created a deletefile http call in backend, however it is currently not being used	2020-02-13 03:13:10 -05:00
Isaac Grynsztein	501806909a	fixed bug where going back to the page after entering a stream didn't allow downloading of new files in download only mode, files are now auto deleted when saved	2020-02-13 03:10:52 -05:00
Isaac Grynsztein	77dd96b3b9	added download_only_mode to encryption configuration reloading of mp3s/mp4s only happens if file manager is enabled	2020-02-11 16:36:59 -05:00
Isaac Grynsztein	505b145bb3	commented out debug console messages	2020-02-11 16:28:14 -05:00
Isaac Grynsztein	ba5592015d	added download only mode that simply downloads files to the client when the server finishes the download added dependency on savefile library for download-only mode	2020-02-11 13:10:02 -05:00
Isaac Grynsztein	10c90a01f2	linted files	2020-02-09 23:35:01 -05:00
Isaac Grynsztein	abaa799628	quick dependency fix	2019-10-21 02:51:13 -04:00
Isaac Grynsztein	9e148d1464	more stylistic improvements	2019-10-21 02:46:22 -04:00
Isaac Grynsztein	9fa646132d	added stylistic spinner	2019-10-21 02:25:03 -04:00
Isaac Grynsztein	f98ba00551	fixed bug preventing app being used outside root url	2019-10-21 02:24:47 -04:00
Isaac Grynsztein	bc1e0ea542	minor change	2019-10-20 19:16:10 -04:00
Isaac Grynsztein	9ebb684d5c	Updated backend to reflect frontend changes	2019-10-20 19:15:26 -04:00
Isaac Grynsztein	91713f1140	Migrated to angular 8 Created dev configuration	2019-10-20 19:15:13 -04:00
Isaac Grynsztein	377676cda4	Stylistic improvements and moved away from @angular/http	2019-10-20 19:14:01 -04:00
Isaac Grynsztein	8e445bb80d	Made repository changes	2019-10-20 17:39:02 -04:00
Tzahi12345	f0bde1efc4	Update README.md	2018-01-23 00:38:20 -05:00
Isaac Grynsztein	4be6f341da	Updated configuration	2018-01-23 00:17:20 -05:00
Isaac Grynsztein	dd62f1a7b3	Added configuration option for file manager	2018-01-22 23:49:13 -05:00
Isaac Grynsztein	1cdd4d0e15	Added support for modifying downloaded files	2018-01-22 03:43:47 -05:00
Tzahi12345	e4e1e67855	Update README.md	2018-01-20 22:13:47 -05:00
Tzahi12345	867d2394de	Update README.md	2018-01-20 22:12:06 -05:00
Tzahi12345	eb54c2fda5	Create LICENSE.md	2018-01-20 20:26:37 -05:00
Tzahi12345	deacf5a49a	Update README.md	2018-01-20 20:23:39 -05:00
				`@@ -1 +0,0 @@`
				`/* You can add global styles to this file, and also import other style files */`