Merge pull request #420 from Tzahi12345/download-manager

Download manager
2026-03-28 23:50:59 +03:00 · 2021-09-16 15:34:41 -04:00
parent d014c6facb 7ee34d21eb
commit 5fd9d93007
40 changed files with 2426 additions and 1421 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,20 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -38,7 +38,7 @@ jobs:
          Copy-Item -Path ./backend/public -Recurse -Destination ./build/youtubedl-material
          Copy-Item -Path ./backend/subscriptions -Recurse -Destination ./build/youtubedl-material
          Copy-Item -Path ./backend/video -Recurse -Destination ./build/youtubedl-material
-          Copy-Item -Path ./backend/users -Recurse -Destination ./build/youtubedl-material
+          New-Item -Path ./build/youtubedl-material -Name users -ItemType Directory
          Copy-Item -Path ./backend/*.js -Destination ./build/youtubedl-material
          Copy-Item -Path ./backend/*.json -Destination ./build/youtubedl-material
      - name: upload build artifact
--- a/backend/.eslintrc.json
+++ b/backend/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+    "env": {
+        "node": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended"
+    ],
+    "parser": "esprima",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [],
+    "rules": {
+    },
+    "root": true
+}
--- a/backend/app.js
+++ b/backend/app.js
--- a/backend/appdata/default.json
+++ b/backend/appdata/default.json
@@ -13,6 +13,7 @@
      "safe_download_override": false,
      "include_thumbnail": true,
      "include_metadata": true,
+      "max_concurrent_downloads": 5,
      "download_rate_limit": ""
    },
    "Extra": {
@@ -20,7 +21,7 @@
      "file_manager_enabled": true,
      "allow_quality_select": true,
      "download_only_mode": false,
-      "allow_multi_download_mode": true,
+      "allow_autoplay": true,
      "enable_downloads_manager": true,
      "allow_playlist_categorization": true
    },
@@ -42,8 +43,7 @@
      "allow_subscriptions": true,
      "subscriptions_base_path": "subscriptions/",
      "subscriptions_check_interval": "300",
-      "redownload_fresh_uploads": false,
-      "download_delay": ""
+      "redownload_fresh_uploads": false
    },
    "Users": {
      "base_path": "users/",
@@ -68,8 +68,8 @@
      "multi_user_mode": false,
      "allow_advanced_download": false,
      "use_cookies": false,
-      "jwt_expiration": 86400, 
+      "jwt_expiration": 86400,
      "logger_level": "info"
    }
  }
-}
+}
--- a/backend/authentication/auth.js
+++ b/backend/authentication/auth.js
@@ -1,7 +1,7 @@
-const path = require('path');
 const config_api = require('../config');
 const consts = require('../consts');
-const fs = require('fs-extra');
+const logger = require('../logger');
+
 const jwt = require('jsonwebtoken');
 const { uuid } = require('uuidv4');
 const bcrypt = require('bcryptjs');
@@ -12,15 +12,13 @@ var JwtStrategy = require('passport-jwt').Strategy,
    ExtractJwt = require('passport-jwt').ExtractJwt;

 // other required vars
-let logger = null;
 let db_api = null;
 let SERVER_SECRET = null;
 let JWT_EXPIRATION = null;
 let opts = null;
 let saltRounds = null;

-exports.initialize = function(db_api, input_logger) {
-  setLogger(input_logger)
+exports.initialize = function(db_api) {
  setDB(db_api);

  /*************************
@@ -53,10 +51,6 @@ exports.initialize = function(db_api, input_logger) {
  }));
 }

-function setLogger(input_logger) {
-  logger = input_logger;
-}
-
 function setDB(input_db_api) {
  db_api = input_db_api;
 }
@@ -291,17 +285,12 @@ exports.getUserVideo = async function(user_uid, file_uid, requireSharing = false
  return file;
 }

-exports.updatePlaylistFiles = function(user_uid, playlistID, new_filenames) {
-  users_db.get('users').find({uid: user_uid}).get(`playlists`).find({id: playlistID}).assign({fileNames: new_filenames});
-  return true;
-}
-
 exports.removePlaylist = async function(user_uid, playlistID) {
  await db_api.removeRecord('playlist', {playlistID: playlistID});
  return true;
 }

-exports.getUserPlaylists = async function(user_uid, user_files = null) {
+exports.getUserPlaylists = async function(user_uid) {
  return await db_api.getRecords('playlists', {user_uid: user_uid});
 }

--- a/backend/categories.js
+++ b/backend/categories.js
@@ -1,17 +1,12 @@
-const config_api = require('./config');
 const utils = require('./utils');
+const logger = require('./logger');

-var logger = null;
-var db = null;
-var users_db = null;
 var db_api = null;

-function setDB(input_db, input_users_db, input_db_api) { db = input_db; users_db = input_users_db; db_api = input_db_api }
-function setLogger(input_logger) { logger = input_logger; }
+function setDB(input_db_api) { db_api = input_db_api }

-function initialize(input_db, input_users_db, input_logger, input_db_api) {
-    setDB(input_db, input_users_db, input_db_api);
-    setLogger(input_logger);
+function initialize(input_db_api) {
+    setDB(input_db_api);
 }

 /*
@@ -72,7 +67,7 @@ async function getCategoriesAsPlaylists(files = null) {
    const categories_as_playlists = [];
    const available_categories = await getCategories();
    if (available_categories && files) {
-        for (category of available_categories) {
+        for (let category of available_categories) {
            const files_that_match = utils.addUIDsToCategory(category, files);
            if (files_that_match && files_that_match.length > 0) {
                category['thumbnailURL'] = files_that_match[0].thumbnailURL;
@@ -125,21 +120,21 @@ function applyCategoryRules(file_json, rules, category_name) {
    return rules_apply;
 }

-async function addTagToVideo(tag, video, user_uid) {
-    // TODO: Implement
-}
+// async function addTagToVideo(tag, video, user_uid) {
+//     // TODO: Implement
+// }

-async function removeTagFromVideo(tag, video, user_uid) {
-    // TODO: Implement
-}
+// async function removeTagFromVideo(tag, video, user_uid) {
+//     // TODO: Implement
+// }

-// adds tag to list of existing tags (used for tag suggestions)
-async function addTagToExistingTags(tag) {
-    const existing_tags = db.get('tags').value();
-    if (!existing_tags.includes(tag)) {
-        db.get('tags').push(tag).write();
-    }
-}
+// // adds tag to list of existing tags (used for tag suggestions)
+// async function addTagToExistingTags(tag) {
+//     const existing_tags = db.get('tags').value();
+//     if (!existing_tags.includes(tag)) {
+//         db.get('tags').push(tag).write();
+//     }
+// }

 module.exports = {
    initialize: initialize,
--- a/backend/config.js
+++ b/backend/config.js
@@ -1,3 +1,5 @@
+const logger = require('./logger');
+
 const fs = require('fs');

 let CONFIG_ITEMS = require('./consts.js')['CONFIG_ITEMS'];
@@ -5,11 +7,7 @@ const debugMode = process.env.YTDL_MODE === 'debug';

 let configPath = debugMode ? '../src/assets/default.json' : 'appdata/default.json';

-var logger = null;
-function setLogger(input_logger) { logger = input_logger; }
-
-function initialize(input_logger) {
-    setLogger(input_logger);
+function initialize() {
    ensureConfigFileExists();
    ensureConfigItemsExist();
 }
@@ -175,7 +173,7 @@ module.exports = {
    globalArgsRequiresSafeDownload: globalArgsRequiresSafeDownload
 }

-DEFAULT_CONFIG = {
+const DEFAULT_CONFIG = {
    "YoutubeDLMaterial": {
      "Host": {
        "url": "http://example.com",
@@ -190,6 +188,7 @@ DEFAULT_CONFIG = {
        "safe_download_override": false,
        "include_thumbnail": true,
        "include_metadata": true,
+        "max_concurrent_downloads": 5,
        "download_rate_limit": ""
      },
      "Extra": {
@@ -197,7 +196,7 @@ DEFAULT_CONFIG = {
        "file_manager_enabled": true,
        "allow_quality_select": true,
        "download_only_mode": false,
-        "allow_multi_download_mode": true,
+        "allow_autoplay": true,
        "enable_downloads_manager": true,
        "allow_playlist_categorization": true
      },
@@ -219,8 +218,7 @@ DEFAULT_CONFIG = {
        "allow_subscriptions": true,
        "subscriptions_base_path": "subscriptions/",
        "subscriptions_check_interval": "86400",
-        "redownload_fresh_uploads": false,
-        "download_delay": ""
+        "redownload_fresh_uploads": false
      },
      "Users": {
        "base_path": "users/",
--- a/backend/consts.js
+++ b/backend/consts.js
@@ -1,4 +1,4 @@
-let CONFIG_ITEMS = {
+exports.CONFIG_ITEMS = {
    // Host
    'ytdl_url': {
        'key': 'ytdl_url',
@@ -42,6 +42,10 @@ let CONFIG_ITEMS = {
        'key': 'ytdl_include_metadata',
        'path': 'YoutubeDLMaterial.Downloader.include_metadata'
    },
+    'ytdl_max_concurrent_downloads': {
+        'key': 'ytdl_max_concurrent_downloads',
+        'path': 'YoutubeDLMaterial.Downloader.max_concurrent_downloads'
+    },
    'ytdl_download_rate_limit': {
        'key': 'ytdl_download_rate_limit',
        'path': 'YoutubeDLMaterial.Downloader.download_rate_limit'
@@ -64,9 +68,9 @@ let CONFIG_ITEMS = {
        'key': 'ytdl_download_only_mode',
        'path': 'YoutubeDLMaterial.Extra.download_only_mode'
    },
-    'ytdl_allow_multi_download_mode': {
-        'key': 'ytdl_allow_multi_download_mode',
-        'path': 'YoutubeDLMaterial.Extra.allow_multi_download_mode'
+    'ytdl_allow_autoplay': {
+        'key': 'ytdl_allow_autoplay',
+        'path': 'YoutubeDLMaterial.Extra.allow_autoplay'
    },
    'ytdl_enable_downloads_manager': {
        'key': 'ytdl_enable_downloads_manager',
@@ -134,14 +138,6 @@ let CONFIG_ITEMS = {
        'key': 'ytdl_subscriptions_check_interval',
        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
    },
-    'ytdl_subscriptions_check_interval': {
-        'key': 'ytdl_subscriptions_check_interval',
-        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
-    },
-    'ytdl_subscriptions_download_delay': {
-        'key': 'ytdl_subscriptions_download_delay',
-        'path': 'YoutubeDLMaterial.Subscriptions.download_delay'
-    },
    'ytdl_subscriptions_redownload_fresh_uploads': {
        'key': 'ytdl_subscriptions_redownload_fresh_uploads',
        'path': 'YoutubeDLMaterial.Subscriptions.redownload_fresh_uploads'
@@ -210,7 +206,7 @@ let CONFIG_ITEMS = {
    }
 };

-AVAILABLE_PERMISSIONS = [
+exports.AVAILABLE_PERMISSIONS = [
    'filemanager',
    'settings',
    'subscriptions',
@@ -219,11 +215,6 @@ AVAILABLE_PERMISSIONS = [
    'downloads_manager'
 ];

-const DETAILS_BIN_PATH = 'node_modules/youtube-dl/bin/details'
+exports.DETAILS_BIN_PATH = 'node_modules/youtube-dl/bin/details'

-module.exports = {
-    CONFIG_ITEMS: CONFIG_ITEMS,
-    AVAILABLE_PERMISSIONS: AVAILABLE_PERMISSIONS,
-    CURRENT_VERSION: 'v4.2',
-    DETAILS_BIN_PATH: DETAILS_BIN_PATH
-}
+exports.CURRENT_VERSION = 'v4.2';
--- a/backend/db.js
+++ b/backend/db.js
@@ -1,19 +1,21 @@
 var fs = require('fs-extra')
 var path = require('path')
-var utils = require('./utils')
-const { uuid } = require('uuidv4');
-const config_api = require('./config');
 const { MongoClient } = require("mongodb");
+const { uuid } = require('uuidv4');
+
+const config_api = require('./config');
+var utils = require('./utils')
+const logger = require('./logger');

 const low = require('lowdb')
 const FileSync = require('lowdb/adapters/FileSync');
+const { BehaviorSubject } = require('rxjs');
 const local_adapter = new FileSync('./appdata/local_db.json');
 const local_db = low(local_adapter);

-var logger = null;
-var db = null;
-var users_db = null;
-var database = null;
+let database = null;
+exports.database_initialized = false;
+exports.database_initialized_bs = new BehaviorSubject(false);

 const tables = {
    files: {
@@ -48,6 +50,10 @@ const tables = {
        name: 'roles',
        primary_key: 'key'
    },
+    download_queue: {
+        name: 'download_queue',
+        primary_key: 'uid'
+    },
    test: {
        name: 'test'
    }
@@ -67,13 +73,8 @@ function setDB(input_db, input_users_db) {
    exports.users_db = input_users_db
 }

-function setLogger(input_logger) {
-    logger = input_logger;
-}
-
-exports.initialize = (input_db, input_users_db, input_logger) => {
+exports.initialize = (input_db, input_users_db) => {
    setDB(input_db, input_users_db);
-    setLogger(input_logger);

    // must be done here to prevent getConfigItem from being called before init
    using_local_db = config_api.getConfigItem('ytdl_use_local_db');
@@ -154,51 +155,17 @@ exports._connectToDB = async (custom_connection_string = null) => {
    }
 }

-exports.registerFileDB = async (file_path, type, multiUserMode = null, sub = null, customPath = null, category = null, cropFileSettings = null, file_object = null) => {
-    let db_path = null;
-    const file_id = utils.removeFileExtension(file_path);
-    if (!file_object) file_object = generateFileObject(file_id, type, customPath || multiUserMode && multiUserMode.file_path, sub);
-    if (!file_object) {
-        logger.error(`Could not find associated JSON file for ${type} file ${file_id}`);
-        return false;
-    }
-
-    utils.fixVideoMetadataPerms(file_id, type, multiUserMode && multiUserMode.file_path);
-
-    // add thumbnail path
-    file_object['thumbnailPath'] = utils.getDownloadedThumbnail(file_id, type, customPath || multiUserMode && multiUserMode.file_path);
-
-    // if category exists, only include essential info
-    if (category) file_object['category'] = {name: category['name'], uid: category['uid']};
-
-    // modify duration
-    if (cropFileSettings) {
-        file_object['duration'] = (cropFileSettings.cropFileEnd || file_object.duration) - cropFileSettings.cropFileStart;
-    }
-
-    if (multiUserMode) file_object['user_uid'] = multiUserMode.user;
-
-    const file_obj = await registerFileDBManual(file_object);
-
-    // remove metadata JSON if needed
-    if (!config_api.getConfigItem('ytdl_include_metadata')) {
-        utils.deleteJSONFile(file_id, type, multiUserMode && multiUserMode.file_path)
-    }
-
-    return file_obj;
-}
-
-exports.registerFileDB2 = async (file_path, type, user_uid = null, category = null, sub_id = null, cropFileSettings = null, file_object = null) => {
-    if (!file_object) file_object = generateFileObject2(file_path, type);
+exports.registerFileDB = async (file_path, type, user_uid = null, category = null, sub_id = null, cropFileSettings = null, file_object = null) => {
+    if (!file_object) file_object = generateFileObject(file_path, type);
    if (!file_object) {
        logger.error(`Could not find associated JSON file for ${type} file ${file_path}`);
        return false;
    }

-    utils.fixVideoMetadataPerms2(file_path, type);
+    utils.fixVideoMetadataPerms(file_path, type);

    // add thumbnail path
-    file_object['thumbnailPath'] = utils.getDownloadedThumbnail2(file_path, type);
+    file_object['thumbnailPath'] = utils.getDownloadedThumbnail(file_path);

    // if category exists, only include essential info
    if (category) file_object['category'] = {name: category['name'], uid: category['uid']};
@@ -215,7 +182,7 @@ exports.registerFileDB2 = async (file_path, type, user_uid = null, category = nu

    // remove metadata JSON if needed
    if (!config_api.getConfigItem('ytdl_include_metadata')) {
-        utils.deleteJSONFile2(file_path, type)
+        utils.deleteJSONFile(file_path, type)
    }

    return file_obj;
@@ -233,36 +200,7 @@ async function registerFileDBManual(file_object) {
    return file_object;
 }

-function generateFileObject(id, type, customPath = null, sub = null) {
-    if (!customPath && sub) {
-        customPath = getAppendedBasePathSub(sub, config_api.getConfigItem('ytdl_subscriptions_base_path'));
-    }
-    var jsonobj = (type === 'audio') ? utils.getJSONMp3(id, customPath, true) : utils.getJSONMp4(id, customPath, true);
-    if (!jsonobj) {
-        return null;
-    }
-    const ext = (type === 'audio') ? '.mp3' : '.mp4'
-    const file_path = utils.getTrueFileName(jsonobj['_filename'], type); // path.join(type === 'audio' ? audioFolderPath : videoFolderPath, id + ext);
-    // console.
-    var stats = fs.statSync(path.join(__dirname, file_path));
-
-    var title = jsonobj.title;
-    var url = jsonobj.webpage_url;
-    var uploader = jsonobj.uploader;
-    var upload_date = jsonobj.upload_date;
-    upload_date = upload_date ? `${upload_date.substring(0, 4)}-${upload_date.substring(4, 6)}-${upload_date.substring(6, 8)}` : 'N/A';
-
-    var size = stats.size;
-
-    var thumbnail = jsonobj.thumbnail;
-    var duration = jsonobj.duration;
-    var isaudio = type === 'audio';
-    var description = jsonobj.description;
-    var file_obj = new utils.File(id, title, thumbnail, isaudio, duration, url, uploader, size, file_path, upload_date, description, jsonobj.view_count, jsonobj.height, jsonobj.abr);
-    return file_obj;
-}
-
-function generateFileObject2(file_path, type) {
+function generateFileObject(file_path, type) {
    var jsonobj = utils.getJSON(file_path, type);
    if (!jsonobj) {
        return null;
@@ -379,7 +317,7 @@ exports.importUnregisteredFiles = async () => {
            const file_is_registered = !!(files_with_same_url.find(file_with_same_url => path.resolve(file_with_same_url.path) === path.resolve(file.path)));
            if (!file_is_registered) {
                // add additional info
-                await exports.registerFileDB2(file['path'], dir_to_check.type, dir_to_check.user_uid, null, dir_to_check.sub_id, null);
+                await exports.registerFileDB(file['path'], dir_to_check.type, dir_to_check.user_uid, null, dir_to_check.sub_id, null);
                logger.verbose(`Added discovered file to the database: ${file.id}`);
            }
        }
@@ -387,24 +325,6 @@ exports.importUnregisteredFiles = async () => {

 }

-exports.preimportUnregisteredSubscriptionFile = async (sub, appendedBasePath) => {
-    const preimported_file_paths = [];
-
-    const files = await utils.getDownloadedFilesByType(appendedBasePath, sub.type);
-    for (let i = 0; i < files.length; i++) {
-        const file = files[i];
-        // check if file exists in db, if not add it
-        const file_is_registered = await exports.getRecord('files', {id: file.id, sub_id: sub.id});
-        if (!file_is_registered) {
-            // add additional info
-            await exports.registerFileDB2(file['path'], sub.type, sub.user_uid, null, sub.id, null, file);
-            preimported_file_paths.push(file['path']);
-            logger.verbose(`Preemptively added subscription file to the database: ${file.id}`);
-        }
-    }
-    return preimported_file_paths;
-}
-
 exports.addMetadataPropertyToDB = async (property_key) => {
    try {
        const dirs_to_check = await exports.getFileDirectoriesAndDBs();
--- a/backend/downloader.js
+++ b/backend/downloader.js
@@ -0,0 +1,606 @@
+const fs = require('fs-extra');
+const { uuid } = require('uuidv4');
+const path = require('path');
+const mergeFiles = require('merge-files');
+const NodeID3 = require('node-id3')
+const glob = require('glob')
+const Mutex = require('async-mutex').Mutex;
+
+const youtubedl = require('youtube-dl');
+
+const logger = require('./logger');
+const config_api = require('./config');
+const twitch_api = require('./twitch');
+const categories_api = require('./categories');
+const utils = require('./utils');
+
+let db_api = null;
+
+const mutex = new Mutex();
+let should_check_downloads = true;
+
+const archivePath = path.join(__dirname, 'appdata', 'archives');
+
+function setDB(input_db_api) { db_api = input_db_api }
+
+exports.initialize = (input_db_api) => {
+    setDB(input_db_api);
+    categories_api.initialize(db_api);
+    if (db_api.database_initialized) {
+        setupDownloads();
+    } else {
+        db_api.database_initialized_bs.subscribe(init => {
+            if (init) setupDownloads();
+        });
+    }
+}
+
+exports.createDownload = async (url, type, options, user_uid = null, sub_id = null, sub_name = null) => {
+    return await mutex.runExclusive(async () => {
+        const download = {
+            url: url,
+            type: type,
+            title: '',
+            user_uid: user_uid,
+            sub_id: sub_id,
+            sub_name: sub_name,
+            options: options,
+            uid: uuid(),
+            step_index: 0,
+            paused: false,
+            running: false,
+            finished_step: true,
+            error: null,
+            percent_complete: null,
+            finished: false,
+            timestamp_start: Date.now()
+        };
+        await db_api.insertRecordIntoTable('download_queue', download);
+    
+        should_check_downloads = true;
+        return download;
+    });
+}
+
+exports.pauseDownload = async (download_uid) => {
+    const download = await db_api.getRecord('download_queue', {uid: download_uid});
+    if (download['paused']) {
+        logger.warn(`Download ${download_uid} is already paused!`);
+        return false;
+    } else if (download['finished']) {
+        logger.info(`Download ${download_uid} could not be paused before completing.`);
+        return false;
+    }
+
+    return await db_api.updateRecord('download_queue', {uid: download_uid}, {paused: true, running: false});
+}
+
+exports.resumeDownload = async (download_uid) => {
+    return await mutex.runExclusive(async () => {
+        const download = await db_api.getRecord('download_queue', {uid: download_uid});
+        if (!download['paused']) {
+            logger.warn(`Download ${download_uid} is not paused!`);
+            return false;
+        }
+
+        const success = db_api.updateRecord('download_queue', {uid: download_uid}, {paused: false});
+        should_check_downloads = true;
+        return success;
+    })
+}
+
+exports.restartDownload = async (download_uid) => {
+    const download = await db_api.getRecord('download_queue', {uid: download_uid});
+    await exports.clearDownload(download_uid);
+    const success = !!(await exports.createDownload(download['url'], download['type'], download['options'], download['user_uid']));
+    
+    should_check_downloads = true;
+    return success;
+}
+
+exports.cancelDownload = async (download_uid) => {
+    const download = await db_api.getRecord('download_queue', {uid: download_uid});
+    if (download['cancelled']) {
+        logger.warn(`Download ${download_uid} is already cancelled!`);
+        return false;
+    } else if (download['finished']) {
+        logger.info(`Download ${download_uid} could not be cancelled before completing.`);
+        return false;
+    }
+    return await db_api.updateRecord('download_queue', {uid: download_uid}, {cancelled: true, running: false});
+}
+
+exports.clearDownload = async (download_uid) => {
+    return await db_api.removeRecord('download_queue', {uid: download_uid});
+}
+
+async function handleDownloadError(download_uid, error_message) {
+    await db_api.updateRecord('download_queue', {uid: download_uid}, {error: error_message, finished: true, running: false});
+}
+
+async function setupDownloads() {
+    await fixDownloadState();
+    setInterval(checkDownloads, 1000);
+}
+
+async function fixDownloadState() {
+    const downloads = await db_api.getRecords('download_queue');
+    downloads.sort((download1, download2) => download1.timestamp_start - download2.timestamp_start);
+    const running_downloads = downloads.filter(download => !download['finished'] && !download['error']);
+    for (let i = 0; i < running_downloads.length; i++) {
+        const running_download = running_downloads[i];
+        const update_obj = {finished_step: true, paused: true, running: false};
+        if (running_download['step_index'] > 0) {
+            update_obj['step_index'] = running_download['step_index'] - 1;
+        }
+        await db_api.updateRecord('download_queue', {uid: running_download['uid']}, update_obj);
+    }
+}
+
+async function checkDownloads() {
+    if (!should_check_downloads) return;
+
+    const downloads = await db_api.getRecords('download_queue');
+    downloads.sort((download1, download2) => download1.timestamp_start - download2.timestamp_start);
+
+    await mutex.runExclusive(async () => {
+        // avoid checking downloads unnecessarily, but double check that should_check_downloads is still true
+        const running_downloads = downloads.filter(download => !download['paused'] && !download['finished']);
+        if (running_downloads.length === 0) {
+            should_check_downloads = false;
+            logger.verbose('Disabling checking downloads as none are available.');
+        }
+        return;
+    });
+
+    let running_downloads_count = downloads.filter(download => download['running']).length;
+    const waiting_downloads = downloads.filter(download => !download['paused'] && download['finished_step'] && !download['finished']);
+    for (let i = 0; i < waiting_downloads.length; i++) {
+        const waiting_download = waiting_downloads[i];
+        const max_concurrent_downloads = config_api.getConfigItem('ytdl_max_concurrent_downloads');
+        if (max_concurrent_downloads < 0 || running_downloads_count >= max_concurrent_downloads) break;
+
+        if (waiting_download['finished_step'] && !waiting_download['finished']) {
+            // move to next step
+            running_downloads_count++;
+            if (waiting_download['step_index'] === 0) {
+                collectInfo(waiting_download['uid']);
+            } else if (waiting_download['step_index'] === 1) {
+                downloadQueuedFile(waiting_download['uid']);
+            }
+        }
+    }
+}
+
+async function collectInfo(download_uid) {
+    const download = await db_api.getRecord('download_queue', {uid: download_uid});
+    if (download['paused']) {
+        return;
+    }
+    logger.verbose(`Collecting info for download ${download_uid}`);
+    await db_api.updateRecord('download_queue', {uid: download_uid}, {step_index: 1, finished_step: false, running: true});
+
+    const url = download['url'];
+    const type = download['type'];
+    const options = download['options'];
+
+    if (download['user_uid'] && !options.customFileFolderPath) {
+        let usersFileFolder = config_api.getConfigItem('ytdl_users_base_path');
+        const user_path = path.join(usersFileFolder, download['user_uid'], type);
+        options.customFileFolderPath = user_path + path.sep;
+    }
+
+    let args = await generateArgs(url, type, options, download['user_uid']);
+
+    // get video info prior to download
+    let info = await getVideoInfoByURL(url, args, download_uid);
+
+    if (!info) {
+        // info failed, error presumably already recorded
+        return;
+    }
+
+    let category = null;
+
+    // check if it fits into a category. If so, then get info again using new args
+    if (!Array.isArray(info) || config_api.getConfigItem('ytdl_allow_playlist_categorization')) category = await categories_api.categorize(info);
+
+    // set custom output if the category has one and re-retrieve info so the download manager has the right file name
+    if (category && category['custom_output']) {
+        options.customOutput = category['custom_output'];
+        options.noRelativePath = true;
+        args = await generateArgs(url, type, options, download['user_uid']);
+        info = await getVideoInfoByURL(url, args, download_uid);
+    }
+
+    // setup info required to calculate download progress
+
+    const expected_file_size = utils.getExpectedFileSize(info);
+
+    const files_to_check_for_progress = [];
+
+    // store info in download for future use
+    if (Array.isArray(info)) {
+        for (let info_obj of info) files_to_check_for_progress.push(utils.removeFileExtension(info_obj['_filename']));
+    } else {
+        files_to_check_for_progress.push(utils.removeFileExtension(info['_filename']));
+    }
+
+    const playlist_title = Array.isArray(info) ? info[0]['playlist_title'] || info[0]['playlist'] : null;
+    await db_api.updateRecord('download_queue', {uid: download_uid}, {args: args,
+                                                                    finished_step: true,
+                                                                    running: false,
+                                                                    options: options,
+                                                                    files_to_check_for_progress: files_to_check_for_progress,
+                                                                    expected_file_size: expected_file_size,
+                                                                    title: playlist_title ? playlist_title : info['title']
+                                                                });
+}
+
+async function downloadQueuedFile(download_uid) {
+    const download = await db_api.getRecord('download_queue', {uid: download_uid});
+    if (download['paused']) {
+        return;
+    }
+    logger.verbose(`Downloading ${download_uid}`);
+    return new Promise(async resolve => {
+        const audioFolderPath = config_api.getConfigItem('ytdl_audio_folder_path');
+        const videoFolderPath = config_api.getConfigItem('ytdl_video_folder_path');
+        await db_api.updateRecord('download_queue', {uid: download_uid}, {step_index: 2, finished_step: false, running: true});
+
+        const url = download['url'];
+        const type = download['type'];
+        const options = download['options'];
+        const args = download['args'];
+        const category = download['category'];
+        let fileFolderPath = type === 'audio' ? audioFolderPath : videoFolderPath; // TODO: fix
+        if (options.customFileFolderPath) {
+            fileFolderPath = options.customFileFolderPath;
+        }
+        fs.ensureDirSync(fileFolderPath);
+
+        const start_time = Date.now();
+
+        const download_checker = setInterval(() => checkDownloadPercent(download['uid']), 1000);
+
+        // download file
+        youtubedl.exec(url, args, {maxBuffer: Infinity}, async function(err, output) {
+            const file_objs = [];
+            let end_time = Date.now();
+            let difference = (end_time - start_time)/1000;
+            logger.debug(`${type === 'audio' ? 'Audio' : 'Video'} download delay: ${difference} seconds.`);
+            clearInterval(download_checker);
+            if (err) {
+                logger.error(err.stderr);
+                await handleDownloadError(download_uid, err.stderr);
+                resolve(false);
+                return;
+            } else if (output) {
+                if (output.length === 0 || output[0].length === 0) {
+                    // ERROR!
+                    logger.warn(`No output received for video download, check if it exists in your archive.`)
+                    resolve(false);
+                    return;
+                }
+
+                for (let i = 0; i < output.length; i++) {
+                    let output_json = null;
+                    try {
+                        output_json = JSON.parse(output[i]);
+                    } catch(e) {
+                        output_json = null;
+                    }
+
+                    if (!output_json) {
+                        continue;
+                    }
+
+                    // get filepath with no extension
+                    const filepath_no_extension = utils.removeFileExtension(output_json['_filename']);
+
+                    const ext = type === 'audio' ? '.mp3' : '.mp4';
+                    var full_file_path = filepath_no_extension + ext;
+                    var file_name = filepath_no_extension.substring(fileFolderPath.length, filepath_no_extension.length);
+
+                    if (type === 'video' && url.includes('twitch.tv/videos/') && url.split('twitch.tv/videos/').length > 1
+                        && config_api.getConfigItem('ytdl_use_twitch_api') && config_api.getConfigItem('ytdl_twitch_auto_download_chat')) {
+                            let vodId = url.split('twitch.tv/videos/')[1];
+                            vodId = vodId.split('?')[0];
+                            twitch_api.downloadTwitchChatByVODID(vodId, file_name, type, download['user_uid']);
+                    }
+
+                    // renames file if necessary due to bug
+                    if (!fs.existsSync(output_json['_filename']) && fs.existsSync(output_json['_filename'] + '.webm')) {
+                        try {
+                            fs.renameSync(output_json['_filename'] + '.webm', output_json['_filename']);
+                            logger.info('Renamed ' + file_name + '.webm to ' + file_name);
+                        } catch(e) {
+                            logger.error(`Failed to rename file ${output_json['_filename']} to its appropriate extension.`);
+                        }
+                    }
+
+                    if (type === 'audio') {
+                        let tags = {
+                            title: output_json['title'],
+                            artist: output_json['artist'] ? output_json['artist'] : output_json['uploader']
+                        }
+                        let success = NodeID3.write(tags, utils.removeFileExtension(output_json['_filename']) + '.mp3');
+                        if (!success) logger.error('Failed to apply ID3 tag to audio file ' + output_json['_filename']);
+                    }
+
+                    if (options.cropFileSettings) {
+                        await utils.cropFile(full_file_path, options.cropFileSettings.cropFileStart, options.cropFileSettings.cropFileEnd, ext);
+                    }
+
+                    // registers file in DB
+                    const file_obj = await db_api.registerFileDB(full_file_path, type, download['user_uid'], category, download['sub_id'] ? download['sub_id'] : null, options.cropFileSettings);
+
+                    file_objs.push(file_obj);
+                }
+
+                if (options.merged_string !== null && options.merged_string !== undefined) {
+                    let current_merged_archive = fs.readFileSync(path.join(fileFolderPath, `merged_${type}.txt`), 'utf8');
+                    let diff = current_merged_archive.replace(options.merged_string, '');
+                    const archive_path = download['user_uid'] ? path.join(fileFolderPath, 'archives', `archive_${type}.txt`) : path.join(archivePath, `archive_${type}.txt`);
+                    fs.appendFileSync(archive_path, diff);
+                }
+
+                let container = null;
+
+                if (file_objs.length > 1) {
+                    // create playlist
+                    const playlist_name = file_objs.map(file_obj => file_obj.title).join(', ');
+                    container = await db_api.createPlaylist(playlist_name, file_objs.map(file_obj => file_obj.uid), type, download['user_uid']);
+                } else if (file_objs.length === 1) {
+                    container = file_objs[0];
+                } else {
+                    const error_message = 'Downloaded file failed to result in metadata object.';
+                    logger.error(error_message);
+                    await handleDownloadError(download_uid, error_message);
+                }
+
+                const file_uids = file_objs.map(file_obj => file_obj.uid);
+                await db_api.updateRecord('download_queue', {uid: download_uid}, {finished_step: true, finished: true, running: false, step_index: 3, percent_complete: 100, file_uids: file_uids, container: container});
+                resolve();
+            }
+        });
+    });
+}
+
+// helper functions
+
+async function generateArgs(url, type, options, user_uid = null) {
+    const audioFolderPath = config_api.getConfigItem('ytdl_audio_folder_path');
+    const videoFolderPath = config_api.getConfigItem('ytdl_video_folder_path');
+
+    const videopath = config_api.getConfigItem('ytdl_default_file_output') ? config_api.getConfigItem('ytdl_default_file_output') : '%(title)s';
+    const globalArgs = config_api.getConfigItem('ytdl_custom_args');
+    const useCookies = config_api.getConfigItem('ytdl_use_cookies');
+    const is_audio = type === 'audio';
+
+    let fileFolderPath = is_audio ? audioFolderPath : videoFolderPath;
+
+    if (options.customFileFolderPath) fileFolderPath = options.customFileFolderPath;
+
+    const customArgs = options.customArgs;
+    let customOutput = options.customOutput;
+    const customQualityConfiguration = options.customQualityConfiguration;
+
+    // video-specific args
+    const selectedHeight = options.selectedHeight;
+
+    // audio-specific args
+    const maxBitrate = options.maxBitrate;
+
+    const youtubeUsername = options.youtubeUsername;
+    const youtubePassword = options.youtubePassword;
+
+    let downloadConfig = null;
+    let qualityPath = (is_audio && !options.skip_audio_args) ? ['-f', 'bestaudio'] : ['-f', 'bestvideo+bestaudio', '--merge-output-format', 'mp4'];
+    const is_youtube = url.includes('youtu');
+    if (!is_audio && !is_youtube) {
+        // tiktok videos fail when using the default format
+        qualityPath = null;
+    } else if (!is_audio && !is_youtube && (url.includes('reddit') || url.includes('pornhub'))) {
+        qualityPath = ['-f', 'bestvideo+bestaudio']
+    }
+
+    if (customArgs) {
+        downloadConfig = customArgs.split(',,');
+    } else {
+        if (customQualityConfiguration) {
+            qualityPath = ['-f', customQualityConfiguration];
+        } else if (selectedHeight && selectedHeight !== '' && !is_audio) {
+            qualityPath = ['-f', `'(mp4)[height=${selectedHeight}'`];
+        } else if (is_audio) {
+            qualityPath = ['--audio-quality', maxBitrate ? maxBitrate : '0']
+        }
+
+        if (customOutput) {
+            customOutput = options.noRelativePath ? customOutput : path.join(fileFolderPath, customOutput);
+            downloadConfig = ['-o', `${customOutput}.%(ext)s`, '--write-info-json', '--print-json'];
+        } else {
+            downloadConfig = ['-o', path.join(fileFolderPath, videopath + (is_audio ? '.%(ext)s' : '.mp4')), '--write-info-json', '--print-json'];
+        }
+
+        if (qualityPath) downloadConfig.push(...qualityPath);
+
+        if (is_audio && !options.skip_audio_args) {
+            downloadConfig.push('-x');
+            downloadConfig.push('--audio-format', 'mp3');
+        }
+
+        if (youtubeUsername && youtubePassword) {
+            downloadConfig.push('--username', youtubeUsername, '--password', youtubePassword);
+        }
+
+        if (useCookies) {
+            if (await fs.pathExists(path.join(__dirname, 'appdata', 'cookies.txt'))) {
+                downloadConfig.push('--cookies', path.join('appdata', 'cookies.txt'));
+            } else {
+                logger.warn('Cookies file could not be found. You can either upload one, or disable \'use cookies\' in the Advanced tab in the settings.');
+            }
+        }
+
+        const useDefaultDownloadingAgent = config_api.getConfigItem('ytdl_use_default_downloading_agent');
+        const customDownloadingAgent = config_api.getConfigItem('ytdl_custom_downloading_agent');
+        if (!useDefaultDownloadingAgent && customDownloadingAgent) {
+            downloadConfig.splice(0, 0, '--external-downloader', customDownloadingAgent);
+        }
+
+        let useYoutubeDLArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
+        if (useYoutubeDLArchive) {
+            let archive_folder = null;
+            if (options.customArchivePath) {
+                archive_folder = path.join(options.customArchivePath);
+            } else if (user_uid) {
+                archive_folder = path.join(fileFolderPath, 'archives');
+            } else {
+                archive_folder = path.join(archivePath);
+            }
+            const archive_path = path.join(archive_folder, `archive_${type}.txt`);
+
+            await fs.ensureDir(archive_folder);
+            await fs.ensureFile(archive_path);
+
+            let blacklist_path = path.join(archive_folder, `blacklist_${type}.txt`);
+            await fs.ensureFile(blacklist_path);
+
+            let merged_path = path.join(fileFolderPath, `merged_${type}.txt`);
+            await fs.ensureFile(merged_path);
+            // merges blacklist and regular archive
+            let inputPathList = [archive_path, blacklist_path];
+            await mergeFiles(inputPathList, merged_path);
+
+            options.merged_string = await fs.readFile(merged_path, "utf8");
+
+            downloadConfig.push('--download-archive', merged_path);
+        }
+
+        if (config_api.getConfigItem('ytdl_include_thumbnail')) {
+            downloadConfig.push('--write-thumbnail');
+        }
+
+        if (globalArgs && globalArgs !== '') {
+            // adds global args
+            if (downloadConfig.indexOf('-o') !== -1 && globalArgs.split(',,').indexOf('-o') !== -1) {
+                // if global args has an output, replce the original output with that of global args
+                const original_output_index = downloadConfig.indexOf('-o');
+                downloadConfig.splice(original_output_index, 2);
+            }
+            downloadConfig = downloadConfig.concat(globalArgs.split(',,'));
+        }
+
+        if (options.additionalArgs && options.additionalArgs !== '') {
+            downloadConfig = downloadConfig.concat(options.additionalArgs.split(',,'));
+        }
+
+        const rate_limit = config_api.getConfigItem('ytdl_download_rate_limit');
+        if (rate_limit && downloadConfig.indexOf('-r') === -1 && downloadConfig.indexOf('--limit-rate') === -1) {
+            downloadConfig.push('-r', rate_limit);
+        }
+        
+        const default_downloader = utils.getCurrentDownloader() || config_api.getConfigItem('ytdl_default_downloader');
+        if (default_downloader === 'yt-dlp') {
+            downloadConfig.push('--no-clean-infojson');
+        }
+
+    }
+
+    // filter out incompatible args
+    downloadConfig = filterArgs(downloadConfig, is_audio);
+
+    logger.verbose(`youtube-dl args being used: ${downloadConfig.join(',')}`);
+    return downloadConfig;
+}
+
+async function getVideoInfoByURL(url, args = [], download_uid = null) {
+    return new Promise(resolve => {
+        // remove bad args
+        const new_args = [...args];
+
+        const archiveArgIndex = new_args.indexOf('--download-archive');
+        if (archiveArgIndex !== -1) {
+            new_args.splice(archiveArgIndex, 2);
+        }
+
+        new_args.push('--dump-json');
+
+        youtubedl.exec(url, new_args, {maxBuffer: Infinity}, async (err, output) => {
+            if (output) {
+                let outputs = [];
+                try {
+                    for (let i = 0; i < output.length; i++) {
+                        let output_json = null;
+                        try {
+                            output_json = JSON.parse(output[i]);
+                        } catch(e) {
+                            output_json = null;
+                        }
+    
+                        if (!output_json) {
+                            continue;
+                        }
+
+                        outputs.push(output_json);
+                    }
+                    resolve(outputs.length === 1 ? outputs[0] : outputs);
+                } catch(e) {
+                    const error = `Error while retrieving info on video with URL ${url} with the following message: output JSON could not be parsed. Output JSON: ${output}`;
+                    logger.error(error);
+                    if (download_uid) {
+                        await handleDownloadError(download_uid, error);
+                    }
+                    resolve(null);
+                }
+            } else {
+                let error_message = `Error while retrieving info on video with URL ${url} with the following message: ${err}`;
+                if (err.stderr) error_message += `\n\n${err.stderr}`;
+                logger.error(error_message);
+                if (download_uid) {
+                    await handleDownloadError(download_uid, error_message);
+                }
+                resolve(null);
+            }
+        });
+    });
+}
+
+function filterArgs(args, isAudio) {
+    const video_only_args = ['--add-metadata', '--embed-subs', '--xattrs'];
+    const audio_only_args = ['-x', '--extract-audio', '--embed-thumbnail'];
+    const args_to_remove = isAudio ? video_only_args : audio_only_args;
+    return args.filter(x => !args_to_remove.includes(x));
+}
+
+async function checkDownloadPercent(download_uid) {
+    /*
+    This is more of an art than a science, we're just selecting files that start with the file name,
+    thus capturing the parts being downloaded in files named like so: '<video title>.<format>.<ext>.part'.
+
+    Any file that starts with <video title> will be counted as part of the "bytes downloaded", which will
+    be divided by the "total expected bytes."
+    */
+
+    const download = await db_api.getRecord('download_queue', {uid: download_uid});
+    const files_to_check_for_progress = download['files_to_check_for_progress'];
+    const resulting_file_size = download['expected_file_size'];
+
+    if (!resulting_file_size) return;
+
+    let sum_size = 0;
+    glob(`{${files_to_check_for_progress.join(',')}, }*`, async (err, files) => {
+        files.forEach(async file => {
+            try {
+                const file_stats = fs.statSync(file);
+                if (file_stats && file_stats.size) {
+                    sum_size += file_stats.size;
+                }
+            } catch (e) {
+
+            }
+        });
+        const percent_complete = (sum_size/resulting_file_size * 100).toFixed(2);
+        await db_api.updateRecord('download_queue', {uid: download_uid}, {percent_complete: percent_complete});
+    });
+}
--- a/backend/logger.js
+++ b/backend/logger.js
@@ -0,0 +1,23 @@
+const winston = require('winston');
+
+let debugMode = process.env.YTDL_MODE === 'debug';
+
+const defaultFormat = winston.format.printf(({ level, message, label, timestamp }) => {
+    return `${timestamp} ${level.toUpperCase()}: ${message}`;
+});
+const logger = winston.createLogger({
+    level: 'info',
+    format: winston.format.combine(winston.format.timestamp(), defaultFormat),
+    defaultMeta: {},
+    transports: [
+      //
+      // - Write to all logs with level `info` and below to `combined.log`
+      // - Write all logs error (and below) to `error.log`.
+      //
+      new winston.transports.File({ filename: 'appdata/logs/error.log', level: 'error' }),
+      new winston.transports.File({ filename: 'appdata/logs/combined.log' }),
+      new winston.transports.Console({level: !debugMode ? 'info' : 'debug', name: 'console'})
+    ]
+});
+
+module.exports = logger;
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -287,6 +287,14 @@
      "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
      "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw=="
    },
+    "async-mutex": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.3.1.tgz",
+      "integrity": "sha512-vRfQwcqBnJTLzVQo72Sf7KIUbcSUP5hNchx6udI1U6LuPQpfePgdjJzlCe76yFZ8pxlLjn9lwcl/Ya0TSOv0Tw==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3214,6 +3222,11 @@
      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
      "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw=="
    },
+    "tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
    "tunnel-agent": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -32,6 +32,7 @@
  "dependencies": {
    "archiver": "^3.1.1",
    "async": "^3.1.0",
+    "async-mutex": "^0.3.1",
    "axios": "^0.21.1",
    "bcryptjs": "^2.4.0",
    "compression": "^1.7.4",
--- a/backend/subscriptions.js
+++ b/backend/subscriptions.js
@@ -1,27 +1,21 @@
-const FileSync = require('lowdb/adapters/FileSync')
+const fs = require('fs-extra');
+const path = require('path');
+const youtubedl = require('youtube-dl');

-var fs = require('fs-extra');
-const { uuid } = require('uuidv4');
-var path = require('path');
-
-var youtubedl = require('youtube-dl');
 const config_api = require('./config');
-const twitch_api = require('./twitch');
-var utils = require('./utils');
+const utils = require('./utils');
+const logger = require('./logger');

 const debugMode = process.env.YTDL_MODE === 'debug';

-var logger = null;
-var db = null;
-var users_db = null;
 let db_api = null;
+let downloader_api = null;

 function setDB(input_db_api) { db_api = input_db_api }
-function setLogger(input_logger) { logger = input_logger; }

-function initialize(input_db_api, input_logger) {
+function initialize(input_db_api, input_downloader_api) {
    setDB(input_db_api);
-    setLogger(input_logger);
+    downloader_api = input_downloader_api;
 }

 async function subscribe(sub, user_uid = null) {
@@ -46,13 +40,13 @@ async function subscribe(sub, user_uid = null) {
        sub['user_uid'] = user_uid ? user_uid : undefined;
        await db_api.insertRecordIntoTable('subscriptions', sub);

-        let success = await getSubscriptionInfo(sub, user_uid);
+        let success = await getSubscriptionInfo(sub);

        if (success) {
            getVideosForSub(sub, user_uid);
        } else {
            logger.error('Subscribe: Failed to get subscription info. Subscribe failed.')
-        };
+        }

        result_obj.success = success;
        result_obj.sub = sub;
@@ -61,13 +55,7 @@ async function subscribe(sub, user_uid = null) {

 }

-async function getSubscriptionInfo(sub, user_uid = null) {
-    let basePath = null;
-    if (user_uid)
-        basePath = path.join(config_api.getConfigItem('ytdl_users_base_path'), user_uid, 'subscriptions');
-    else
-        basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
-
+async function getSubscriptionInfo(sub) {
    // get videos
    let downloadConfig = ['--dump-json', '--playlist-end', '1'];
    let useCookies = config_api.getConfigItem('ytdl_use_cookies');
@@ -114,22 +102,6 @@ async function getSubscriptionInfo(sub, user_uid = null) {
                        }
                    }

-                    const useArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
-                    if (useArchive && !sub.archive) {
-                        // must create the archive
-                        const archive_dir = path.join(__dirname, basePath, 'archives', sub.name);
-                        const archive_path = path.join(archive_dir, 'archive.txt');
-
-                        // creates archive directory and text file if it doesn't exist
-                        fs.ensureDirSync(archive_dir);
-                        fs.ensureFileSync(archive_path);
-
-                        // updates subscription
-                        sub.archive = archive_dir;
-
-                        await db_api.updateRecord('subscriptions', {id: sub.id}, {archive: archive_dir});
-                    }
-
                    // TODO: get even more info

                    resolve(true);
@@ -146,7 +118,6 @@ async function unsubscribe(sub, deleteMode, user_uid = null) {
        basePath = path.join(config_api.getConfigItem('ytdl_users_base_path'), user_uid, 'subscriptions');
    else
        basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
-    let result_obj = { success: false, error: '' };

    let id = sub.id;

@@ -159,7 +130,7 @@ async function unsubscribe(sub, deleteMode, user_uid = null) {
                    config_api.descriptors[sub_file['uid']][i].destroy();
                }
            } catch(e) {
-    
+                continue;
            }
        }
    }
@@ -264,30 +235,15 @@ async function getVideosForSub(sub, user_uid = null) {
    let appendedBasePath = getAppendedBasePath(sub, basePath);
    fs.ensureDirSync(appendedBasePath);

-    let multiUserMode = null;
-    if (user_uid) {
-        multiUserMode = {
-            user: user_uid,
-            file_path: appendedBasePath
-        }
-    }
-
    const downloadConfig = await generateArgsForSubscription(sub, user_uid);

    // get videos
    logger.verbose(`Subscription: getting videos for subscription ${sub.name} with args: ${downloadConfig.join(',')}`);

    return new Promise(async resolve => {
-        const preimported_file_paths = [];
-        const PREIMPORT_INTERVAL = 5000;
-        const preregister_check = setInterval(async () => {
-            if (sub.streamingOnly) return;
-            await db_api.preimportUnregisteredSubscriptionFile(sub, appendedBasePath);
-        }, PREIMPORT_INTERVAL);
        youtubedl.exec(sub.url, downloadConfig, {maxBuffer: Infinity}, async function(err, output) {
            // cleanup
            updateSubscriptionProperty(sub, {downloading: false}, user_uid);
-            clearInterval(preregister_check);

            logger.verbose('Subscription: finished check for ' + sub.name);
            if (err && !output) {
@@ -295,19 +251,21 @@ async function getVideosForSub(sub, user_uid = null) {
                if (err.stderr.includes('This video is unavailable')) {
                    logger.info('An error was encountered with at least one video, backup method will be used.')
                    try {
-                        const outputs = err.stdout.split(/\r\n|\r|\n/);
-                        for (let i = 0; i < outputs.length; i++) {
-                            const output = JSON.parse(outputs[i]);
-                            await handleOutputJSON(sub, output, i === 0, multiUserMode)
-                            if (err.stderr.includes(output['id']) && archive_path) {
-                                // we found a video that errored! add it to the archive to prevent future errors
-                                if (sub.archive) {
-                                    archive_dir = sub.archive;
-                                    archive_path = path.join(archive_dir, 'archive.txt')
-                                    fs.appendFileSync(archive_path, output['id']);
-                                }
-                            }
-                        }
+                        // TODO: reimplement
+
+                        // const outputs = err.stdout.split(/\r\n|\r|\n/);
+                        // for (let i = 0; i < outputs.length; i++) {
+                        //     const output = JSON.parse(outputs[i]);
+                        //     await handleOutputJSON(sub, output, i === 0, multiUserMode)
+                        //     if (err.stderr.includes(output['id']) && archive_path) {
+                        //         // we found a video that errored! add it to the archive to prevent future errors
+                        //         if (sub.archive) {
+                        //             archive_dir = sub.archive;
+                        //             archive_path = path.join(archive_dir, 'archive.txt')
+                        //             fs.appendFileSync(archive_path, output['id']);
+                        //         }
+                        //     }
+                        // }
                    } catch(e) {
                        logger.error('Backup method failed. See error below:');
                        logger.error(e);
@@ -320,21 +278,30 @@ async function getVideosForSub(sub, user_uid = null) {
                    resolve(true);
                    return;
                }
+                const output_jsons = [];
                for (let i = 0; i < output.length; i++) {
                    let output_json = null;
                    try {
                        output_json = JSON.parse(output[i]);
+                        output_jsons.push(output_json);
                    } catch(e) {
                        output_json = null;
                    }
                    if (!output_json) {
                        continue;
                    }
-
-                    const reset_videos = i === 0;
-                    await handleOutputJSON(sub, output_json, multiUserMode, preimported_file_paths, reset_videos);
                }

+                const files_to_download = await getFilesToDownload(sub, output_jsons);
+                const base_download_options = generateOptionsForSubscriptionDownload(sub, user_uid);
+
+                for (let j = 0; j < files_to_download.length; j++) {
+                    const file_to_download = files_to_download[j];
+                    await downloader_api.createDownload(file_to_download['webpage_url'], sub.type || 'video', base_download_options, user_uid, sub.id, sub.name);
+                }
+
+                resolve(files_to_download);
+
                if (config_api.getConfigItem('ytdl_subscriptions_redownload_fresh_uploads')) {
                    await setFreshUploads(sub, user_uid);
                    checkVideosForFreshUploads(sub, user_uid);
@@ -346,10 +313,28 @@ async function getVideosForSub(sub, user_uid = null) {
    }, err => {
        logger.error(err);
        updateSubscriptionProperty(sub, {downloading: false}, user_uid);
-        clearInterval(preregister_check);
    });
 }

+function generateOptionsForSubscriptionDownload(sub, user_uid) {
+    let basePath = null;
+    if (user_uid)
+        basePath = path.join(config_api.getConfigItem('ytdl_users_base_path'), user_uid, 'subscriptions');
+    else
+        basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+
+    let default_output = config_api.getConfigItem('ytdl_default_file_output') ? config_api.getConfigItem('ytdl_default_file_output') : '%(title)s';
+
+    const base_download_options = {
+        selectedHeight: sub.maxQuality && sub.maxQuality !== 'best' ? sub.maxQuality : null,
+        customFileFolderPath: getAppendedBasePath(sub, basePath),
+        customOutput: sub.custom_output ? `${sub.custom_output}` : `${default_output}`,
+        customArchivePath: path.join(__dirname, basePath, 'archives', sub.name)
+    }
+
+    return base_download_options;
+}
+
 async function generateArgsForSubscription(sub, user_uid, redownload = false, desired_path = null) {
    // get basePath
    let basePath = null;
@@ -371,7 +356,7 @@ async function generateArgsForSubscription(sub, user_uid, redownload = false, de
        fullOutput = `${appendedBasePath}/${sub.custom_output}.%(ext)s`;
    }

-    let downloadConfig = ['-o', fullOutput, !redownload ? '-ciw' : '-ci', '--write-info-json', '--print-json'];
+    let downloadConfig = ['--dump-json', '-o', fullOutput, !redownload ? '-ciw' : '-ci', '--write-info-json', '--print-json'];

    let qualityPath = null;
    if (sub.type && sub.type === 'audio') {
@@ -386,7 +371,7 @@ async function generateArgsForSubscription(sub, user_uid, redownload = false, de
    downloadConfig.push(...qualityPath)

    if (sub.custom_args) {
-        customArgsArray = sub.custom_args.split(',,');
+        const customArgsArray = sub.custom_args.split(',,');
        if (customArgsArray.indexOf('-f') !== -1) {
            // if custom args has a custom quality, replce the original quality with that of custom args
            const original_output_index = downloadConfig.indexOf('-f');
@@ -428,15 +413,6 @@ async function generateArgsForSubscription(sub, user_uid, redownload = false, de
        downloadConfig.push('--write-thumbnail');
    }

-    const download_delay = config_api.getConfigItem('ytdl_subscriptions_download_delay');
-    if (download_delay && downloadConfig.indexOf('--sleep-interval') === -1) {
-        if (!(+download_delay)) {
-            logger.warn(`Invalid download delay of ${download_delay}, please remember to use non-zero numbers.`);
-        } else {
-            downloadConfig.push('--sleep-interval', +download_delay);
-        }
-    }
-
    const rate_limit = config_api.getConfigItem('ytdl_download_rate_limit');
    if (rate_limit && downloadConfig.indexOf('-r') === -1 && downloadConfig.indexOf('--limit-rate') === -1) {
        downloadConfig.push('-r', rate_limit);
@@ -450,41 +426,24 @@ async function generateArgsForSubscription(sub, user_uid, redownload = false, de
    return downloadConfig;
 }

-async function handleOutputJSON(sub, output_json, multiUserMode = null, reset_videos = false) {
-    // TODO: remove streaming only mode
-    if (false && sub.streamingOnly) {
-        if (reset_videos) {
-            sub_db.assign({videos: []}).write();
-        }
-
-        // remove unnecessary info
-        output_json.formats = null;
-
-        // add to db
-        sub_db.get('videos').push(output_json).write();
-    } else {
-        const file_url = output_json['webpage_url']
-
-        const file_exists = await db_api.getRecord('files', {url: file_url, sub_id: sub.id});
-        if (file_exists) {
-            // file already exists in DB, return early to avoid reseting the download date
-            return;
-        }
-
-        await db_api.registerFileDB2(output_json['_filename'], sub.type, sub.user_uid, null, sub.id);
-
-        const url = output_json['webpage_url'];
-        if (sub.type === 'video' && url.includes('twitch.tv/videos/') && url.split('twitch.tv/videos/').length > 1
-            && config_api.getConfigItem('ytdl_use_twitch_api') && config_api.getConfigItem('ytdl_twitch_auto_download_chat')) {
-                const file_name = path.basename(output_json['_filename']);
-                const id = file_name.substring(0, file_name.length-4);
-                let vodId = url.split('twitch.tv/videos/')[1];
-                vodId = vodId.split('?')[0];
-                twitch_api.downloadTwitchChatByVODID(vodId, id, sub.type, multiUserMode.user, sub);
+async function getFilesToDownload(sub, output_jsons) {
+    const files_to_download = [];
+    for (let i = 0; i < output_jsons.length; i++) {
+        const output_json = output_jsons[i];
+        const file_missing = !(await db_api.getRecord('files', {sub_id: sub.id, url: output_json['webpage_url']})) && !(await db_api.getRecord('download_queue', {sub_id: sub.id, url: output_json['webpage_url'], error: null}));
+        if (file_missing) {
+            const file_with_path_exists = await db_api.getRecord('files', {sub_id: sub.id, path: output_json['_filename']});
+            if (file_with_path_exists) {
+                // or maybe just overwrite???
+                logger.info(`Skipping adding file ${output_json['_filename']} for subscription ${sub.name} as a file with that path already exists.`)
+            }
+            files_to_download.push(output_json);
        }
    }
+    return files_to_download;
 }

+
 async function getSubscriptions(user_uid = null) {
    return await db_api.getRecords('subscriptions', {user_uid: user_uid});
 }
@@ -503,7 +462,7 @@ async function getSubscriptionByName(subName, user_uid = null) {
    return await db_api.getRecord('subscriptions', {name: subName, user_uid: user_uid});
 }

-async function updateSubscription(sub, user_uid = null) {
+async function updateSubscription(sub) {
    await db_api.updateRecord('subscriptions', {id: sub.id}, sub);
    return true;
 }
@@ -514,7 +473,7 @@ async function updateSubscriptionPropertyMultiple(subs, assignment_obj) {
    });
 }

-async function updateSubscriptionProperty(sub, assignment_obj, user_uid = null) {
+async function updateSubscriptionProperty(sub, assignment_obj) {
    // TODO: combine with updateSubscription
    await db_api.updateRecord('subscriptions', {id: sub.id}, assignment_obj);
    return true;
@@ -569,7 +528,6 @@ async function checkVideoIfBetterExists(file_obj, sub, user_uid) {
 // helper functions

 function getAppendedBasePath(sub, base_path) {
-
    return path.join(base_path, (sub.isPlaylist ? 'playlists/' : 'channels/'), sub.name);
 }

@@ -583,7 +541,6 @@ module.exports = {
    unsubscribe            : unsubscribe,
    deleteSubscriptionFile : deleteSubscriptionFile,
    getVideosForSub        : getVideosForSub,
-    setLogger              : setLogger,
    initialize             : initialize,
    updateSubscriptionPropertyMultiple : updateSubscriptionPropertyMultiple
 }
--- a/backend/test/tests.js
+++ b/backend/test/tests.js
@@ -40,7 +40,7 @@ const subscriptions_api = require('../subscriptions');
 const fs = require('fs-extra');
 const { uuid } = require('uuidv4');

-db_api.initialize(db, users_db, logger);
+db_api.initialize(db, users_db);


 describe('Database', async function() {
@@ -286,5 +286,43 @@ describe('Multi User', async function() {
    //         assert(video_obj);
    //     });
    // });
+
+});
    
-});
+describe('Downloader', function() {
+    const downloader_api = require('../downloader');
+    downloader_api.initialize(db_api);
+    const url = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+    const options = {
+        ui_uid: uuid(),
+        user: 'admin'
+    }
+
+    beforeEach(async function() {
+        await db_api.connectToDB();
+        await db_api.removeAllRecords('download_queue');
+    });
+
+    it('Get file info', async function() {
+
+    });
+
+    it('Download file', async function() {
+        this.timeout(300000); 
+        const returned_download = await downloader_api.createDownload(url, 'video', options);
+        console.log(returned_download);
+        await utils.wait(20000);
+
+    });
+
+    it('Queue file', async function() {
+        this.timeout(300000); 
+        const returned_download = await downloader_api.createDownload(url, 'video', options);
+        console.log(returned_download);
+        await utils.wait(20000);
+    });
+
+    it('Pause file', async function() {
+
+    });
+});
--- a/backend/utils.js
+++ b/backend/utils.js
@@ -1,6 +1,8 @@
 const fs = require('fs-extra')
 const path = require('path')
+const ffmpeg = require('fluent-ffmpeg');
 const config_api = require('./config');
+const logger = require('./logger');
 const CONSTS = require('./consts')
 const archiver = require('archiver');

@@ -142,24 +144,7 @@ function getJSONByType(type, name, customPath, openReadPerms = false) {
    return type === 'audio' ? getJSONMp3(name, customPath, openReadPerms) : getJSONMp4(name, customPath, openReadPerms)
 }

-function getDownloadedThumbnail(name, type, customPath = null) {
-    if (!customPath) customPath = type === 'audio' ? config_api.getConfigItem('ytdl_audio_folder_path') : config_api.getConfigItem('ytdl_video_folder_path');
-
-    let jpgPath = path.join(customPath, name + '.jpg');
-    let webpPath = path.join(customPath, name + '.webp');
-    let pngPath = path.join(customPath, name + '.png');
-
-    if (fs.existsSync(jpgPath))
-        return jpgPath;
-    else if (fs.existsSync(webpPath))
-        return webpPath;
-    else if (fs.existsSync(pngPath))
-        return pngPath;
-    else
-        return null;
-}
-
-function getDownloadedThumbnail2(file_path, type) {
+function getDownloadedThumbnail(file_path) {
    const file_path_no_extension = removeFileExtension(file_path);

    let jpgPath = file_path_no_extension + '.jpg';
@@ -182,10 +167,6 @@ function getExpectedFileSize(input_info_jsons) {

    let expected_filesize = 0;
    info_jsons.forEach(info_json => {
-        if (info_json['filesize']) {
-            expected_filesize += info_json['filesize'];
-            return;
-        }
        const formats = info_json['format_id'].split('+');
        let individual_expected_filesize = 0;
        formats.forEach(format_id => {
@@ -201,29 +182,7 @@ function getExpectedFileSize(input_info_jsons) {
    return expected_filesize;
 }

-function fixVideoMetadataPerms(name, type, customPath = null) {
-    if (is_windows) return;
-    if (!customPath) customPath = type === 'audio' ? config_api.getConfigItem('ytdl_audio_folder_path')
-                                                   : config_api.getConfigItem('ytdl_video_folder_path');
-
-    const ext = type === 'audio' ? '.mp3' : '.mp4';
-
-    const files_to_fix = [
-        // JSONs
-        path.join(customPath, name + '.info.json'),
-        path.join(customPath, name + ext + '.info.json'),
-        // Thumbnails
-        path.join(customPath, name + '.webp'),
-        path.join(customPath, name + '.jpg')
-    ];
-
-    for (const file of files_to_fix) {
-        if (!fs.existsSync(file)) continue;
-        fs.chmodSync(file, 0o644);
-    }
-}
-
-function fixVideoMetadataPerms2(file_path, type) {
+function fixVideoMetadataPerms(file_path, type) {
    if (is_windows) return;

    const ext = type === 'audio' ? '.mp3' : '.mp4';
@@ -245,19 +204,7 @@ function fixVideoMetadataPerms2(file_path, type) {
    }
 }

-function deleteJSONFile(name, type, customPath = null) {
-    if (!customPath) customPath = type === 'audio' ? config_api.getConfigItem('ytdl_audio_folder_path')
-                                                   : config_api.getConfigItem('ytdl_video_folder_path');
-
-    const ext = type === 'audio' ? '.mp3' : '.mp4';
-    let json_path = path.join(customPath, name + '.info.json');
-    let alternate_json_path = path.join(customPath, name + ext + '.info.json');
-
-    if (fs.existsSync(json_path)) fs.unlinkSync(json_path);
-    if (fs.existsSync(alternate_json_path)) fs.unlinkSync(alternate_json_path);
-}
-
-function deleteJSONFile2(file_path, type) {
+function deleteJSONFile(file_path, type) {
    const ext = type === 'audio' ? '.mp3' : '.mp4';

    const file_path_no_extension = removeFileExtension(file_path);
@@ -293,7 +240,6 @@ async function removeIDFromArchive(archive_path, id) {
    const updatedData = dataArray.join('\n');
    await fs.writeFile(archive_path, updatedData);
    if (line) return line;
-    if (err) throw err;
 }

 function durationStringToNumber(dur_str) {
@@ -364,11 +310,38 @@ function createEdgeNGrams(str) {
            }
            return ngrams
        }, []).join(" ")
-    } 
+    }
    
    return str
 }

+// ffmpeg helper functions
+
+async function cropFile(file_path, start, end, ext) {
+    return new Promise(resolve => {
+        const temp_file_path = `${file_path}.cropped${ext}`;
+        let base_ffmpeg_call = ffmpeg(file_path);
+        if (start) {
+            base_ffmpeg_call = base_ffmpeg_call.seekOutput(start);
+        }
+        if (end) {
+            base_ffmpeg_call = base_ffmpeg_call.duration(end - start);
+        }
+        base_ffmpeg_call
+            .on('end', () => {
+                logger.verbose(`Cropping for '${file_path}' complete.`);
+                fs.unlinkSync(file_path);
+                fs.moveSync(temp_file_path, file_path);
+                resolve(true);
+            })
+            .on('error', (err) => {
+                logger.error(`Failed to crop ${file_path}.`);
+                logger.error(err);
+                resolve(false);
+            }).save(temp_file_path);
+    });
+}
+
 /**
 * setTimeout, but its a promise.
 * @param {number} ms
@@ -404,13 +377,10 @@ module.exports = {
    getJSON: getJSON,
    getTrueFileName: getTrueFileName,
    getDownloadedThumbnail: getDownloadedThumbnail,
-    getDownloadedThumbnail2: getDownloadedThumbnail2,
    getExpectedFileSize: getExpectedFileSize,
    fixVideoMetadataPerms: fixVideoMetadataPerms,
-    fixVideoMetadataPerms2: fixVideoMetadataPerms2,
    deleteJSONFile: deleteJSONFile,
-    deleteJSONFile2: deleteJSONFile2,
-    removeIDFromArchive, removeIDFromArchive,
+    removeIDFromArchive: removeIDFromArchive,
    getDownloadedFilesByType: getDownloadedFilesByType,
    createContainerZipFile: createContainerZipFile,
    durationStringToNumber: durationStringToNumber,
@@ -419,6 +389,7 @@ module.exports = {
    getCurrentDownloader: getCurrentDownloader,
    recFindByExt: recFindByExt,
    removeFileExtension: removeFileExtension,
+    cropFile: cropFile,
    createEdgeNGrams: createEdgeNGrams,
    wait: wait,
    File: File
--- a/package-lock.json
+++ b/package-lock.json
@@ -1651,6 +1651,85 @@
        }
      }
    },
+    "@eslint/eslintrc": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
+      "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^13.9.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "globals": {
+          "version": "13.10.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+          "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+          "dev": true
+        }
+      }
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
+      "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.0",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
+      "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
+      "dev": true
+    },
    "@istanbuljs/schema": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -1884,6 +1963,201 @@
        }
      }
    },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.0.tgz",
+      "integrity": "sha512-eiREtqWRZ8aVJcNru7cT/AMVnYd9a2UHsfZT8MR1dW3UUEg6jDv9EQ9Cq4CUPZesyQ58YUpoAADGv71jY8RwgA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/experimental-utils": "4.29.0",
+        "@typescript-eslint/scope-manager": "4.29.0",
+        "debug": "^4.3.1",
+        "functional-red-black-tree": "^1.0.1",
+        "regexpp": "^3.1.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        },
+        "tsutils": {
+          "version": "3.21.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/experimental-utils": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.29.0.tgz",
+      "integrity": "sha512-FpNVKykfeaIxlArLUP/yQfv/5/3rhl1ov6RWgud4OgbqWLkEq7lqgQU9iiavZRzpzCRQV4XddyFz3wFXdkiX9w==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.7",
+        "@typescript-eslint/scope-manager": "4.29.0",
+        "@typescript-eslint/types": "4.29.0",
+        "@typescript-eslint/typescript-estree": "4.29.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "@types/json-schema": {
+          "version": "7.0.9",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
+          "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
+          "dev": true
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.29.0.tgz",
+      "integrity": "sha512-+92YRNHFdXgq+GhWQPT2bmjX09X7EH36JfgN2/4wmhtwV/HPxozpCNst8jrWcngLtEVd/4zAwA6BKojAlf+YqA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "4.29.0",
+        "@typescript-eslint/types": "4.29.0",
+        "@typescript-eslint/typescript-estree": "4.29.0",
+        "debug": "^4.3.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.0.tgz",
+      "integrity": "sha512-HPq7XAaDMM3DpmuijxLV9Io8/6pQnliiXMQUcAdjpJJSR+fdmbD/zHCd7hMkjJn04UQtCQBtshgxClzg6NIS2w==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.29.0",
+        "@typescript-eslint/visitor-keys": "4.29.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.0.tgz",
+      "integrity": "sha512-2YJM6XfWfi8pgU2HRhTp7WgRw78TCRO3dOmSpAvIQ8MOv4B46JD2chnhpNT7Jq8j0APlIbzO1Bach734xxUl4A==",
+      "dev": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.0.tgz",
+      "integrity": "sha512-8ZpNHDIOyqzzgZrQW9+xQ4k5hM62Xy2R4RPO3DQxMc5Rq5QkCdSpk/drka+DL9w6sXNzV5nrdlBmf8+x495QXQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.29.0",
+        "@typescript-eslint/visitor-keys": "4.29.0",
+        "debug": "^4.3.1",
+        "globby": "^11.0.3",
+        "is-glob": "^4.0.1",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "globby": {
+          "version": "11.0.4",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+          "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.1.1",
+            "ignore": "^5.1.4",
+            "merge2": "^1.3.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        },
+        "tsutils": {
+          "version": "3.21.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.0.tgz",
+      "integrity": "sha512-LoaofO1C/jAJYs0uEpYMXfHboGXzOJeV118X4OsZu9f7rG7Pr9B3+4HTU8+err81rADa4xfQmAxnRnPAI2jp+Q==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "4.29.0",
+        "eslint-visitor-keys": "^2.0.0"
+      }
+    },
    "@videogular/ngx-videogular": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/@videogular/ngx-videogular/-/ngx-videogular-2.1.0.tgz",
@@ -2117,6 +2391,12 @@
      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
      "dev": true
    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true
+    },
    "adjust-sourcemap-loader": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz",
@@ -2405,6 +2685,12 @@
      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
      "dev": true
    },
+    "astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true
+    },
    "async": {
      "version": "2.6.3",
      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -4144,6 +4430,12 @@
        "regexp.prototype.flags": "^1.2.0"
      }
    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
    "default-gateway": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -4402,6 +4694,15 @@
        "buffer-indexof": "^1.0.0"
      }
    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
    "dom-serialize": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
@@ -4684,6 +4985,15 @@
        }
      }
    },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      }
+    },
    "ent": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
@@ -4827,6 +5137,249 @@
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
+    "eslint": {
+      "version": "7.32.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
+      "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@eslint/eslintrc": "^0.4.3",
+        "@humanwhocodes/config-array": "^0.5.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.1.2",
+        "globals": "^13.6.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^6.0.9",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "eslint-utils": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+          "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+          "dev": true,
+          "requires": {
+            "eslint-visitor-keys": "^1.1.0"
+          },
+          "dependencies": {
+            "eslint-visitor-keys": {
+              "version": "1.3.0",
+              "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+              "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+              "dev": true
+            }
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "globals": {
+          "version": "13.10.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+          "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "dev": true
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
    "eslint-scope": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@@ -4837,12 +5390,69 @@
        "estraverse": "^4.1.1"
      }
    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true
+    },
+    "espree": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.4.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^1.3.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        }
+      }
+    },
    "esprima": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
      "dev": true
    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
    "esrecurse": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -5220,6 +5830,12 @@
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
    "fastparse": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -5268,6 +5884,15 @@
        "escape-string-regexp": "^1.0.5"
      }
    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
    "file-loader": {
      "version": "6.1.1",
      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.1.1.tgz",
@@ -5427,6 +6052,24 @@
      "resolved": "https://registry.npmjs.org/fingerprintjs2/-/fingerprintjs2-2.1.0.tgz",
      "integrity": "sha512-H1k/ESTD2rJ3liupyqWBPjZC+LKfCGixQzz/NDN4dkgbmG1bVFyMOh7luKSkVDoyfhgvRm62pviNMPI+eJTZcQ=="
    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "dependencies": {
+        "flatted": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz",
+          "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
+          "dev": true
+        }
+      }
+    },
    "flatted": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
@@ -5553,6 +6196,12 @@
      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
      "dev": true
    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
    "genfun": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
@@ -7008,6 +7657,12 @@
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
    "json-stringify-safe": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -7414,6 +8069,16 @@
        }
      }
    },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
    "license-webpack-plugin": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-2.3.1.tgz",
@@ -7489,12 +8154,30 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
    "lodash.memoize": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
      "dev": true
    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
    "lodash.uniq": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8158,6 +8841,12 @@
      "dev": true,
      "optional": true
    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -8674,6 +9363,20 @@
        }
      }
    },
+    "optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      }
+    },
    "ora": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/ora/-/ora-5.1.0.tgz",
@@ -9953,6 +10656,12 @@
      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
      "dev": true
    },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
    "process": {
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -10680,6 +11389,12 @@
        }
      }
    },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true
+    },
    "regjsgen": {
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz",
@@ -10762,6 +11477,12 @@
      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
    },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
    "require-main-filename": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
@@ -11517,6 +12238,43 @@
      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
      "dev": true
    },
+    "slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
    "smart-buffer": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.1.0.tgz",
@@ -12379,6 +13137,40 @@
      "integrity": "sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA==",
      "dev": true
    },
+    "table": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
+      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.6.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz",
+          "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        }
+      }
+    },
    "tapable": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
@@ -12815,6 +13607,15 @@
      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
      "dev": true
    },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
    "type-fest": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
@@ -13138,6 +13939,12 @@
      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
      "dev": true
    },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
    "v8flags": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
@@ -14386,6 +15193,12 @@
      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
      "dev": true
    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
    "worker-farm": {
      "version": "1.7.0",
      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
--- a/package.json
+++ b/package.json
@@ -58,8 +58,11 @@
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
+    "@typescript-eslint/eslint-plugin": "^4.29.0",
+    "@typescript-eslint/parser": "^4.29.0",
    "codelyzer": "^6.0.0",
    "electron": "^8.0.1",
+    "eslint": "^7.32.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -16,7 +16,7 @@ const routes: Routes = [
  { path: 'subscription', component: SubscriptionComponent, canActivate: [PostsService] },
  { path: 'settings', component: SettingsComponent, canActivate: [PostsService] },
  { path: 'login', component: LoginComponent },
-  { path: 'downloads', component: DownloadsComponent },
+  { path: 'downloads', component: DownloadsComponent, canActivate: [PostsService] },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
 ];

--- a/src/app/components/downloads/downloads.component.html
+++ b/src/app/components/downloads/downloads.component.html
@@ -1,27 +1,91 @@
-<div style="padding: 20px;">
-    <div *ngFor="let session_downloads of downloads">
-        <ng-container *ngIf="keys(session_downloads).length > 2">
-            <mat-card style="padding-bottom: 30px; margin-bottom: 15px;">
-                <h4 style="text-align: center;"><ng-container i18n="Session ID">Session ID:</ng-container>&nbsp;{{session_downloads['session_id']}}
-                    <span *ngIf="session_downloads['session_id'] === postsService.session_id">&nbsp;<ng-container i18n="Current session">(current)</ng-container></span>
-                </h4>
-                <div class="container">
-                    <div class="row">
-                        <div *ngFor="let download of session_downloads | keyvalue: sort_downloads; let i = index;" class="col-12 my-1">
-                            <mat-card *ngIf="download.key !== 'session_id' && download.key !== '_id' && download.value" class="mat-elevation-z3">
-                                <app-download-item [download]="download.value" [queueNumber]="i+1" (cancelDownload)="clearDownload(session_downloads['session_id'], download.value.uid)"></app-download-item>
-                            </mat-card>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <button style="top: 15px;" (click)="clearDownloads(session_downloads['session_id'])" mat-stroked-button color="warn"><ng-container i18n="clear all downloads action button">Clear all downloads</ng-container></button>
-                </div>
-            </mat-card>
-        </ng-container>
-    </div>
+<div [hidden]="!(downloads && downloads.length > 0)">
+    <div style="overflow: hidden;" [ngClass]="uids ? 'rounded mat-elevation-z2' : 'mat-elevation-z8'">
+        <mat-table style="overflow: hidden" [ngClass]="uids ? 'rounded-top' : null" matSort [dataSource]="dataSource">
+      
+          <!-- Date Column -->
+          <ng-container matColumnDef="date">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Date">Date</ng-container> </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.timestamp_start | date: 'short'}} </mat-cell>
+          </ng-container>
+      
+          <!-- Title Column -->
+          <ng-container matColumnDef="title">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Title">Title</ng-container> </mat-header-cell>
+            <mat-cell *matCellDef="let element">
+                <span class="one-line" [matTooltip]="element.title ? element.title : null">
+                    {{element.title}}
+                </span>
+            </mat-cell>
+          </ng-container>

-    <div *ngIf="downloads && !downloadsValid()">
-        <h4 style="text-align: center;" i18n="No downloads label">No downloads available!</h4>
-    </div>
+          <!-- Subscription Column -->
+          <ng-container matColumnDef="subscription">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Subscription">Subscription</ng-container> </mat-header-cell>
+            <mat-cell *matCellDef="let element">
+              <ng-container *ngIf="element.sub_name">
+                {{element.sub_name}}
+              </ng-container>
+              <ng-container *ngIf="!element.sub_name">
+                  N/A
+              </ng-container>
+            </mat-cell>
+          </ng-container>
+      
+          <!-- Stage Column -->
+          <ng-container matColumnDef="stage">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Stage">Stage</ng-container> </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{STEP_INDEX_TO_LABEL[element.step_index]}} </mat-cell>
+          </ng-container>
+      
+          <!-- Progress Column -->
+          <ng-container matColumnDef="progress">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Progress">Progress</ng-container> </mat-header-cell>
+            <mat-cell *matCellDef="let element">
+                <ng-container *ngIf="element.percent_complete">
+                    {{+(element.percent_complete) > 100 ? '100' : element.percent_complete}}%
+                </ng-container>
+                <ng-container *ngIf="!element.percent_complete">
+                    N/A
+                </ng-container>
+            </mat-cell>
+          </ng-container>
+
+          <!-- Actions Column -->
+          <ng-container matColumnDef="actions">
+            <mat-header-cell *matHeaderCellDef> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell>
+            <mat-cell *matCellDef="let element">
+                <div>
+                  <ng-container *ngIf="!element.finished">
+                    <button (click)="pauseDownload(element.uid)" *ngIf="!element.paused || !element.finished_step" [disabled]="element.paused && !element.finished_step" mat-icon-button matTooltip="Pause" i18n-matTooltip="Pause"><mat-spinner [diameter]="28" *ngIf="element.paused && !element.finished_step" class="icon-button-spinner"></mat-spinner><mat-icon>pause</mat-icon></button>
+                    <button (click)="resumeDownload(element.uid)" *ngIf="element.paused && element.finished_step" mat-icon-button matTooltip="Resume" i18n-matTooltip="Resume"><mat-icon>play_arrow</mat-icon></button>
+                    <button *ngIf="false && !element.paused" (click)="cancelDownload(element.uid)" mat-icon-button matTooltip="Cancel" i18n-matTooltip="Cancel"><mat-icon>cancel</mat-icon></button>
+                  </ng-container>
+                  <ng-container *ngIf="element.finished">
+                    <button *ngIf="!element.error" (click)="watchContent(element)" mat-icon-button matTooltip="Watch content" i18n-matTooltip="Watch content"><mat-icon>smart_display</mat-icon></button>
+                    <button *ngIf="element.error" (click)="showError(element)" mat-icon-button matTooltip="Show error" i18n-matTooltip="Show error"><mat-icon>warning</mat-icon></button>
+                    <button (click)="restartDownload(element.uid)" mat-icon-button matTooltip="Restart" i18n-matTooltip="Restart"><mat-icon>restart_alt</mat-icon></button>
+                  </ng-container>
+                  <button *ngIf="element.finished || element.paused" (click)="clearDownload(element.uid)" mat-icon-button matTooltip="Clear" i18n-matTooltip="Clear"><mat-icon>delete</mat-icon></button>
+                </div>
+            </mat-cell>
+          </ng-container>
+      
+            <mat-header-row [ngClass]="uids ? 'rounded-top' : null" *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+        </mat-table>
+      
+        <mat-paginator [ngClass]="uids ? 'rounded-bottom' : null" [pageSizeOptions]="[5, 10, 20]"
+                       showFirstLastButtons 
+                       aria-label="Select page of downloads">
+        </mat-paginator>
+      </div>
+      <div *ngIf="!uids" class="downloads-action-button-div">
+        <button [disabled]="!running_download_exists" mat-stroked-button (click)="pauseAllDownloads()"><ng-container i18n="Pause all downloads">Pause all downloads</ng-container></button>
+        <button style="margin-left: 10px;" [disabled]="!paused_download_exists" mat-stroked-button (click)="resumeAllDownloads()"><ng-container i18n="Resume all downloads">Resume all downloads</ng-container></button>
+        <button color="warn" style="margin-left: 10px;" mat-stroked-button (click)="clearFinishedDownloads()"><ng-container i18n="Clear finished downloads">Clear finished downloads</ng-container></button>
+      </div>
+</div>
+
+<div *ngIf="(!downloads || downloads.length === 0) && downloads_retrieved && !uids">
+  <h4 style="text-align: center; margin-top: 10px;" i18n="No downloads label">No downloads available!</h4>
 </div>
--- a/src/app/components/downloads/downloads.component.scss
+++ b/src/app/components/downloads/downloads.component.scss
@@ -0,0 +1,32 @@
+mat-header-cell, mat-cell {
+    justify-content: center;
+}
+
+.one-line {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.icon-button-spinner {
+    position: absolute;
+    top: 7px;
+    left: 6px;
+}
+
+.downloads-action-button-div {
+    margin-top: 10px;
+    margin-left: 5px;
+}
+
+.rounded-top {
+    border-radius: 16px 16px 0px 0px !important;
+}
+
+.rounded-bottom {
+    border-radius: 0px 0px 16px 16px !important;
+}
+
+.rounded {
+    border-radius: 16px 16px 16px 16px !important;
+}
--- a/src/app/components/downloads/downloads.component.ts
+++ b/src/app/components/downloads/downloads.component.ts
@@ -1,7 +1,13 @@
-import { Component, OnInit, ViewChildren, QueryList, ElementRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, Input, EventEmitter } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
 import { Router } from '@angular/router';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDialogComponent } from 'app/dialogs/confirm-dialog/confirm-dialog.component';
+import { MatSort } from '@angular/material/sort';
+import { Clipboard } from '@angular/cdk/clipboard';

@Component({
  selector: 'app-downloads',
@@ -34,138 +40,222 @@ import { Router } from '@angular/router';
 })
 export class DownloadsComponent implements OnInit, OnDestroy {

+  @Input() uids = null;
+
  downloads_check_interval = 1000;
  downloads = [];
+  finished_downloads = [];
  interval_id = null;

  keys = Object.keys;

  valid_sessions_length = 0;

+  paused_download_exists = false;
+  running_download_exists = false;
+
+  STEP_INDEX_TO_LABEL = {
+      0: $localize`Creating download`,
+      1: $localize`Getting info`,
+      2: $localize`Downloading file`,
+      3: $localize`Complete`
+  }
+
+  displayedColumns: string[] = ['date', 'title', 'stage', 'subscription', 'progress', 'actions'];
+  dataSource = null; // new MatTableDataSource<Download>();
+  downloads_retrieved = false;
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
  sort_downloads = (a, b) => {
-    const result = b.value.timestamp_start - a.value.timestamp_start;
+    const result = b.timestamp_start - a.timestamp_start;
    return result;
  }

-  constructor(public postsService: PostsService, private router: Router) { }
+  constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog, private clipboard: Clipboard) { }

  ngOnInit(): void {
+    if (this.postsService.initialized) {
+      this.getCurrentDownloadsRecurring();
+    } else {
+      this.postsService.service_initialized.subscribe(init => {
+        if (init) {
+          this.getCurrentDownloadsRecurring();
+        }
+      });
+    }
+  }
+
+  getCurrentDownloadsRecurring(): void {
+    if (!this.postsService.config['Extra']['enable_downloads_manager']) {
+      this.router.navigate(['/home']);
+      return;
+    }
    this.getCurrentDownloads();
    this.interval_id = setInterval(() => {
      this.getCurrentDownloads();
    }, this.downloads_check_interval);
-
-    this.postsService.service_initialized.subscribe(init => {
-      if (init) {
-        if (!this.postsService.config['Extra']['enable_downloads_manager']) {
-          this.router.navigate(['/home']);
-        }
-      }
-    });
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    if (this.interval_id) { clearInterval(this.interval_id) }
  }

-  getCurrentDownloads() {
-    this.postsService.getCurrentDownloads().subscribe(res => {
-      if (res['downloads']) {
-        this.assignNewValues(res['downloads']);
+  getCurrentDownloads(): void {
+    this.postsService.getCurrentDownloads(this.uids).subscribe(res => {
+      this.downloads_retrieved = true;
+      if (res['downloads'] !== null 
+        && res['downloads'] !== undefined
+        && JSON.stringify(this.downloads) !== JSON.stringify(res['downloads'])) {
+          this.downloads = this.combineDownloads(this.downloads, res['downloads']);
+          // this.downloads = res['downloads'];
+          this.downloads.sort(this.sort_downloads);
+          this.dataSource = new MatTableDataSource<Download>(this.downloads);
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          this.paused_download_exists = this.downloads.find(download => download['paused'] && !download['error']);
+          this.running_download_exists = this.downloads.find(download => !download['paused'] && !download['finished']);
      } else {
        // failed to get downloads
      }
    });
  }

-  clearDownload(session_id, download_uid) {
-    this.postsService.clearDownloads(false, session_id, download_uid).subscribe(res => {
-      if (res['success']) {
-        // this.downloads = res['downloads'];
-      } else {
+  clearFinishedDownloads(): void {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        dialogTitle: $localize`Clear finished downloads`,
+        dialogText: $localize`Would you like to clear your finished downloads?`,
+        submitText: $localize`Clear`,
+        warnSubmitColor: true
      }
    });
-  }
-
-  clearDownloads(session_id) {
-    this.postsService.clearDownloads(false, session_id).subscribe(res => {
-      if (res['success']) {
-        this.downloads = res['downloads'];
-      } else {
-      }
-    });
-  }
-
-  clearAllDownloads() {
-    this.postsService.clearDownloads(true).subscribe(res => {
-      if (res['success']) {
-        this.downloads = res['downloads'];
-      } else {
-      }
-    });
-  }
-
-  assignNewValues(new_downloads_by_session) {
-    const session_keys = Object.keys(new_downloads_by_session);
-
-    // remove missing session IDs
-    const current_session_ids = Object.keys(this.downloads);
-    const missing_session_ids = current_session_ids.filter(session => session_keys.indexOf(session) === -1)
-
-    for (const missing_session_id of missing_session_ids) {
-      delete this.downloads[missing_session_id];
-    }
-
-    // loop through sessions
-    for (let i = 0; i < session_keys.length; i++) {
-      const session_id = session_keys[i];
-      const session_downloads_by_id = new_downloads_by_session[session_id];
-      const session_download_ids = Object.keys(session_downloads_by_id);
-
-      if (this.downloads[session_id]) {
-        // remove missing download IDs
-        const current_download_ids = Object.keys(this.downloads[session_id]);
-        const missing_download_ids = current_download_ids.filter(download => session_download_ids.indexOf(download) === -1)
-
-        for (const missing_download_id of missing_download_ids) {
-          console.log('removing missing download id');
-          delete this.downloads[session_id][missing_download_id];
-        }
-      }
-
-      if (!this.downloads[session_id]) {
-        this.downloads[session_id] = session_downloads_by_id;
-      } else {
-        for (let j = 0; j < session_download_ids.length; j++) {
-          if (session_download_ids[j] === 'session_id' || session_download_ids[j] === '_id') continue;
-          const download_id = session_download_ids[j];
-          const download = new_downloads_by_session[session_id][download_id]
-          if (!this.downloads[session_id][download_id]) {
-            this.downloads[session_id][download_id] = download;
-          } else {
-            const download_to_update = this.downloads[session_id][download_id];
-            download_to_update['percent_complete'] = download['percent_complete'];
-            download_to_update['complete'] = download['complete'];
-            download_to_update['timestamp_end'] = download['timestamp_end'];
-            download_to_update['downloading'] = download['downloading'];
-            download_to_update['error'] = download['error'];
+    dialogRef.afterClosed().subscribe(confirmed => {
+      if (confirmed) {
+        this.postsService.clearFinishedDownloads().subscribe(res => {
+          if (!res['success']) {
+            this.postsService.openSnackBar('Failed to clear finished downloads!');
          }
-        }
+        });
      }
+    });
+  }
+
+  pauseDownload(download_uid: string): void {
+    this.postsService.pauseDownload(download_uid).subscribe(res => {
+      if (!res['success']) {
+        this.postsService.openSnackBar('Failed to pause download! See server logs for more info.');
+      }
+    });
+  }
+
+  pauseAllDownloads(): void {
+    this.postsService.pauseAllDownloads().subscribe(res => {
+      if (!res['success']) {
+        this.postsService.openSnackBar('Failed to pause all downloads! See server logs for more info.');
+      }
+    });
+  }
+
+  resumeDownload(download_uid: string): void {
+    this.postsService.resumeDownload(download_uid).subscribe(res => {
+      if (!res['success']) {
+        this.postsService.openSnackBar('Failed to resume download! See server logs for more info.');
+      }
+    });
+  }
+
+  resumeAllDownloads(): void {
+    this.postsService.resumeAllDownloads().subscribe(res => {
+      if (!res['success']) {
+        this.postsService.openSnackBar('Failed to resume all downloads! See server logs for more info.');
+      }
+    });
+  }
+
+  restartDownload(download_uid: string): void {
+    this.postsService.restartDownload(download_uid).subscribe(res => {
+      if (!res['success']) {
+        this.postsService.openSnackBar('Failed to restart download! See server logs for more info.');
+      }
+    });
+  }
+
+  cancelDownload(download_uid: string): void {
+    this.postsService.cancelDownload(download_uid).subscribe(res => {
+      if (!res['success']) {
+        this.postsService.openSnackBar('Failed to cancel download! See server logs for more info.');
+      }
+    });
+  }
+
+  clearDownload(download_uid: string): void {
+    this.postsService.clearDownload(download_uid).subscribe(res => {
+      if (!res['success']) {
+        this.postsService.openSnackBar('Failed to pause download! See server logs for more info.');
+      }
+    });
+  }
+
+  watchContent(download): void {
+    const container = download['container'];
+    localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
+    const is_playlist = container['uids']; // hacky, TODO: fix
+    if (is_playlist) {
+      this.router.navigate(['/player', {playlist_id: container['id'], type: download['type']}]);
+    } else {
+      this.router.navigate(['/player', {type: download['type'], uid: container['uid']}]);
    }
  }

-  downloadsValid() {
-    let valid = false;
-    for (let i = 0; i < this.downloads.length; i++) {
-      const session_downloads = this.downloads[i];
-      if (!session_downloads) continue;
-      if (this.keys(session_downloads).length > 2) {
-        valid = true;
-        break;
-      }
-    }
-    return valid;
+  combineDownloads(downloads_old, downloads_new) {
+    // only keeps downloads that exist in the new set
+    downloads_old = downloads_old.filter(download_old => downloads_new.some(download_new => download_new.uid === download_old.uid));
+
+    // add downloads from the new set that the old one doesn't have
+    const downloads_to_add = downloads_new.filter(download_new => !downloads_old.some(download_old => download_new.uid === download_old.uid));
+    downloads_old.push(...downloads_to_add);
+    downloads_old.forEach(download_old => {
+      const download_new = downloads_new.find(download_to_check => download_old.uid === download_to_check.uid);
+      Object.keys(download_new).forEach(key => {
+        download_old[key] = download_new[key];
+      });
+  
+      Object.keys(download_old).forEach(key => {
+        if (!download_new[key]) delete download_old[key];
+      });
+    });
+
+    return downloads_old;
  }

+  showError(download) {
+    const copyToClipboardEmitter = new EventEmitter<boolean>();
+    this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        dialogTitle: $localize`Error for ${download['url']}:url:`,
+        dialogText: download['error'],
+        submitText: $localize`Copy to clipboard`,
+        cancelText: $localize`Close`,
+        closeOnSubmit: false,
+        onlyEmitOnDone: true,
+        doneEmitter: copyToClipboardEmitter
+      }
+    });
+    copyToClipboardEmitter.subscribe(done => {
+      if (done) {
+        this.postsService.openSnackBar($localize`Copied to clipboard!`);
+        this.clipboard.copy(download['error']);
+      }
+    });
+  }
 }
+
+export interface Download {
+  timestamp_start: number;
+  title: string;
+  step_index: number;
+  progress: string;
+}
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -46,8 +46,20 @@
        </div>
    </div>

-    <mat-paginator class="paginator" #paginator *ngIf="paged_data && paged_data.length > 0" (page)="pageChangeEvent($event)" [length]="file_count"
-              [pageSize]="pageSize"
-              [pageSizeOptions]="[5, 10, 25, 100, this.paged_data && this.paged_data.length > 100 ? this.paged_data.length : 250]">
-    </mat-paginator>
+    <div>
+        <div style="position: absolute; margin-left: -8px; margin-top: 5px; scale: 0.8">
+            <mat-form-field>
+                <mat-label><ng-container i18n="File type">File type</ng-container></mat-label>
+                <mat-select color="accent" [(ngModel)]="fileTypeFilter" (selectionChange)="fileTypeFilterChanged($event.value)">
+                    <mat-option value="both"><ng-container i18n="Both">Both</ng-container></mat-option>
+                    <mat-option value="video_only"><ng-container i18n="Video only">Video only</ng-container></mat-option>
+                    <mat-option value="audio_only"><ng-container i18n="Audio only">Audio only</ng-container></mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <mat-paginator class="paginator" #paginator *ngIf="paged_data && paged_data.length > 0" (page)="pageChangeEvent($event)" [length]="file_count"
+                [pageSize]="pageSize"
+                [pageSizeOptions]="[5, 10, 25, 100, this.paged_data && this.paged_data.length > 100 ? this.paged_data.length : 250]">
+        </mat-paginator>
+    </div>
 </div>
--- a/src/app/components/recent-videos/recent-videos.component.ts
+++ b/src/app/components/recent-videos/recent-videos.component.ts
@@ -52,6 +52,7 @@ export class RecentVideosComponent implements OnInit {
    }
  };
  filterProperty = this.filterProperties['upload_date'];
+  fileTypeFilter = 'both';
  
  playlists = null;

@@ -94,12 +95,18 @@ export class RecentVideosComponent implements OnInit {
      }
    });

-    // set filter property to cached
+    // set filter property to cached value
    const cached_filter_property = localStorage.getItem('filter_property');
    if (cached_filter_property && this.filterProperties[cached_filter_property]) {
      this.filterProperty = this.filterProperties[cached_filter_property];
    }

+    // set file type filter to cached value
+    const cached_file_type_filter = localStorage.getItem('file_type_filter');
+    if (cached_file_type_filter) {
+      this.fileTypeFilter = cached_file_type_filter;
+    }
+
    this.searchChangedSubject
      .debounceTime(500)
      .pipe(distinctUntilChanged()
@@ -131,6 +138,11 @@ export class RecentVideosComponent implements OnInit {
    this.getAllFiles();
  }

+  fileTypeFilterChanged(value) {
+    localStorage.setItem('file_type_filter', value);
+    this.getAllFiles();
+  }
+
  toggleModeChange() {
    this.descendingMode = !this.descendingMode;
    this.getAllFiles();
@@ -143,7 +155,7 @@ export class RecentVideosComponent implements OnInit {
    const current_file_index = (this.paginator?.pageIndex ? this.paginator.pageIndex : 0)*this.pageSize;
    const sort = {by: this.filterProperty['property'], order: this.descendingMode ? -1 : 1};
    const range = [current_file_index, current_file_index + this.pageSize];
-    this.postsService.getAllFiles(sort, range, this.search_mode ? this.search_text : null).subscribe(res => {
+    this.postsService.getAllFiles(sort, range, this.search_mode ? this.search_text : null, this.fileTypeFilter).subscribe(res => {
      this.file_count = res['file_count'];
      this.paged_data = res['files'];
      for (let i = 0; i < this.paged_data.length; i++) {
@@ -184,7 +196,7 @@ export class RecentVideosComponent implements OnInit {
        // normal subscriptions
        !new_tab ? this.router.navigate(['/player', {uid: file.uid,
                                          type: file.isAudio ? 'audio' : 'video', sub_id: sub.id}]) 
-                 : window.open(`/#/player;uid=${file.uid};type=${file.isAudio ? 'audio' : 'video'};sub_id=${sub.id}`);
+                 : window.open(`/#/player;uid=${file.uid};type=${file.isAudio ? 'audio' : 'video'}`);
      }
    } else {
      // normal files
--- a/src/app/components/unified-file-card/unified-file-card.component.html
+++ b/src/app/components/unified-file-card/unified-file-card.component.html
@@ -1,4 +1,4 @@
-<div (mouseover)="elevated=true" (mouseout)="elevated=false" (contextmenu)="onRightClick($event)" style="position: relative; width: fit-content;">
+<div (mouseenter)="onMouseOver()" (mouseleave)="onMouseOut()" (contextmenu)="onRightClick($event)" style="position: relative; width: fit-content;">
    <div *ngIf="!loading" class="download-time">
        <mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>
        &nbsp;&nbsp;
@@ -51,8 +51,10 @@
    <mat-card [matTooltip]="null" (click)="navigateToFile($event)" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'large-mat-card': card_size === 'large', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
        <div style="padding:5px">
            <div *ngIf="!loading && file_obj.thumbnailURL" class="img-div">
-                <div style="position: relative">
-                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                <div [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" style="position: relative">
+                    <img *ngIf="!hide_image || is_playlist || (file_obj.type === 'audio' || file_obj.isAudio)" [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                    <video *ngIf="elevated && !is_playlist && !(file_obj.type === 'audio' || file_obj.isAudio)" autoplay loop muted [muted]="true" [ngClass]="{'video-small': card_size === 'small', 'video': card_size === 'medium', 'video-large': card_size === 'large'}" [src]="streamURL">
+                    </video>
                    <div class="duration-time">
                        {{file_length}}
                    </div>
--- a/src/app/components/unified-file-card/unified-file-card.component.scss
+++ b/src/app/components/unified-file-card/unified-file-card.component.scss
@@ -51,6 +51,30 @@
  object-fit: cover;
 }

+.video-large {
+  width: 300px;
+  height: 167.5px;
+  object-fit: cover;
+  position: absolute;
+  top: 0px;
+}
+
+.video {
+  width: 200px;
+  height: 112.5px;
+  object-fit: cover;
+  position: absolute;
+  top: 0px;
+}
+
+.video-small {
+  width: 150px;
+  height: 84.5px;
+  object-fit: cover;
+  position: absolute;
+  top: 0px;
+}
+
 .example-full-width-height {
  width: 100%;
  height: 100%
--- a/src/app/components/unified-file-card/unified-file-card.component.ts
+++ b/src/app/components/unified-file-card/unified-file-card.component.ts
@@ -35,6 +35,9 @@ export class UnifiedFileCardComponent implements OnInit {
  // optional vars
  thumbnailBlobURL = null;

+  streamURL = null;
+  hide_image = false;
+
  // input/output
  @Input() loading = true;
  @Input() theme = null;
@@ -78,6 +81,8 @@ export class UnifiedFileCardComponent implements OnInit {
      const bloburl = URL.createObjectURL(blob);
      this.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);*/
    }
+
+    if (this.file_obj) this.streamURL = this.generateStreamURL();
  }

  emitDeleteFile(blacklistMode = false) {
@@ -128,6 +133,33 @@ export class UnifiedFileCardComponent implements OnInit {
    this.contextMenu.openMenu();
  }

+  generateStreamURL() {
+    let baseLocation = 'stream/';
+    let fullLocation = this.baseStreamPath + baseLocation + `?test=test&uid=${this.file_obj['uid']}`;
+
+    if (this.jwtString) {
+      fullLocation += `&jwt=${this.jwtString}`;
+    }
+
+    fullLocation += '&t=,10';
+
+    return fullLocation;
+  }
+
+  onMouseOver() {
+    this.elevated = true;
+    setTimeout(() => {
+      if (this.elevated) {
+        this.hide_image = true;
+      }
+    }, 500);
+  }
+
+  onMouseOut() {
+    this.elevated = false;
+    this.hide_image = false;
+  }
+
 }

 function fancyTimeFormat(time) {
--- a/src/app/dialogs/confirm-dialog/confirm-dialog.component.html
+++ b/src/app/dialogs/confirm-dialog/confirm-dialog.component.html
@@ -11,5 +11,8 @@
    <mat-spinner [diameter]="25"></mat-spinner>
  </div>
  <span class="spacer"></span>
-  <button style="float: right;" mat-stroked-button mat-dialog-close>Cancel</button>
+  <button style="float: right;" mat-stroked-button mat-dialog-close>
+    <ng-container *ngIf="cancelText">{{cancelText}}</ng-container>
+    <ng-container *ngIf="!cancelText" i18n="Cancel">Cancel</ng-container>
+  </button>
 </mat-dialog-actions>
--- a/src/app/dialogs/confirm-dialog/confirm-dialog.component.ts
+++ b/src/app/dialogs/confirm-dialog/confirm-dialog.component.ts
@@ -11,18 +11,23 @@ export class ConfirmDialogComponent implements OnInit {
  dialogTitle = 'Confirm';
  dialogText = 'Would you like to confirm?';
  submitText = 'Yes'
+  cancelText = null;
  submitClicked = false;
+  closeOnSubmit = true;

-  doneEmitter: EventEmitter<any> = null;
+  doneEmitter: EventEmitter<boolean> = null;
  onlyEmitOnDone = false;

  warnSubmitColor = false;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<ConfirmDialogComponent>) {
-    if (this.data.dialogTitle) { this.dialogTitle = this.data.dialogTitle };
-    if (this.data.dialogText) { this.dialogText = this.data.dialogText };
-    if (this.data.submitText) { this.submitText = this.data.submitText };
-    if (this.data.warnSubmitColor) { this.warnSubmitColor = this.data.warnSubmitColor };
+    if (this.data.dialogTitle !== undefined) { this.dialogTitle = this.data.dialogTitle }
+    if (this.data.dialogText !== undefined) { this.dialogText = this.data.dialogText }
+    if (this.data.submitText !== undefined) { this.submitText = this.data.submitText }
+    if (this.data.cancelText !== undefined) { this.cancelText = this.data.cancelText }
+    if (this.data.warnSubmitColor !== undefined) { this.warnSubmitColor = this.data.warnSubmitColor }
+    if (this.data.warnSubmitColor !== undefined) { this.warnSubmitColor = this.data.warnSubmitColor }
+    if (this.data.closeOnSubmit !== undefined) { this.closeOnSubmit = this.data.closeOnSubmit }

    // checks if emitter exists, if so don't autoclose as it should be handled by caller
    if (this.data.doneEmitter) {
@@ -34,9 +39,9 @@ export class ConfirmDialogComponent implements OnInit {
  confirmClicked() {
    if (this.onlyEmitOnDone) {
      this.doneEmitter.emit(true);
-      this.submitClicked = true;
+      if (this.closeOnSubmit) this.submitClicked = true;
    } else {
-      this.dialogRef.close(true);
+      if (this.closeOnSubmit) this.dialogRef.close(true);
    }
  }

--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -65,9 +65,9 @@
                        Only Audio
                    </ng-container>
                </mat-checkbox>
-                <mat-checkbox *ngIf="allowMultiDownloadMode" [disabled]="current_download" (change)="multiDownloadModeChanged($event)" [(ngModel)]="multiDownloadMode" style="float: right; margin-top: -12px">
-                    <ng-container i18n="Multi-download Mode checkbox">
-                        Multi-download Mode
+                <mat-checkbox *ngIf="allowAutoplay" (change)="autoplayChanged($event)" [(ngModel)]="autoplay" style="float: right; margin-top: -12px">
+                    <ng-container i18n="Autoplay checkbox">
+                        Autoplay
                    </ng-container>
                </mat-checkbox>
                
@@ -169,20 +169,8 @@
        </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 && download['downloading']">
-                    <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="centered big" id="bar_div" *ngIf="current_download && autoplay">
    <div class="margined">
        <div [ngClass]="(+percentDownloaded > 99)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="current_download.percent_complete && current_download.percent_complete > 1;else indeterminateprogress">
            <mat-progress-bar style="border-radius: 5px;" mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
@@ -197,9 +185,10 @@
    </div>
    <br/>
 </div>
-<ng-template #nofile>

-</ng-template>
+<div style="display: flex; justify-content: center;" *ngIf="downloads && downloads.length > 0 && !autoplay">
+    <app-downloads style="width: 80%; margin-bottom: 10px" [uids]="download_uids"></app-downloads>
+</div>

 <ng-container *ngIf="cachedFileManagerEnabled || fileManagerEnabled">
    <app-recent-videos #recentVideos></app-recent-videos>
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -46,7 +46,7 @@ export class MainComponent implements OnInit {
  determinateProgress = false;
  downloadingfile = false;
  audioOnly: boolean;
-  multiDownloadMode = false;
+  autoplay = false;
  customArgsEnabled = false;
  customArgs = null;
  customOutputEnabled = false;
@@ -68,7 +68,7 @@ export class MainComponent implements OnInit {
  fileManagerEnabled = false;
  allowQualitySelect = false;
  downloadOnlyMode = false;
-  allowMultiDownloadMode = false;
+  allowAutoplay = false;
  audioFolderPath;
  videoFolderPath;
  use_youtubedl_archive = false;
@@ -95,6 +95,7 @@ export class MainComponent implements OnInit {
  playlist_thumbnails = {};
  downloading_content = {'audio': {}, 'video': {}};
  downloads: Download[] = [];
+  download_uids: string[] = [];
  current_download: Download = null;

  urlForm = new FormControl('', [Validators.required]);
@@ -232,7 +233,7 @@ export class MainComponent implements OnInit {
    this.fileManagerEnabled = this.postsService.config['Extra']['file_manager_enabled']
                              && this.postsService.hasPermission('filemanager');
    this.downloadOnlyMode = this.postsService.config['Extra']['download_only_mode'];
-    this.allowMultiDownloadMode = this.postsService.config['Extra']['allow_multi_download_mode'];
+    this.allowAutoplay = this.postsService.config['Extra']['allow_autoplay'];
    this.audioFolderPath = this.postsService.config['Downloader']['path-audio'];
    this.videoFolderPath = this.postsService.config['Downloader']['path-video'];
    this.use_youtubedl_archive = this.postsService.config['Downloader']['use_youtubedl_archive'];
@@ -246,11 +247,6 @@ export class MainComponent implements OnInit {
    this.useDefaultDownloadingAgent = this.postsService.config['Advanced']['use_default_downloading_agent'];
    this.customDownloadingAgent = this.postsService.config['Advanced']['custom_downloading_agent'];

-    if (this.youtubeSearchEnabled && this.youtubeAPIKey) {
-      this.youtubeSearch.initializeAPI(this.youtubeAPIKey);
-      this.attachToInput();
-    }
-
    // set final cache items

    localStorage.setItem('cached_filemanager_enabled', this.fileManagerEnabled.toString());
@@ -274,9 +270,9 @@ export class MainComponent implements OnInit {
      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 (customArgs && customArgs !== 'null') { this.customArgs = customArgs }
+      if (customOutput && customOutput !== 'null') { this.customOutput = customOutput }
+      if (youtubeUsername && youtubeUsername !== 'null') { this.youtubeUsername = youtubeUsername }
    }

    // get downloads routine
@@ -314,8 +310,8 @@ export class MainComponent implements OnInit {
      this.audioOnly = localStorage.getItem('audioOnly') === 'true';
    }

-    if (localStorage.getItem('multiDownloadMode') !== null) {
-      this.multiDownloadMode = localStorage.getItem('multiDownloadMode') === 'true';
+    if (localStorage.getItem('autoplay') !== null) {
+      this.autoplay = localStorage.getItem('autoplay') === 'true';
    }

    // check if params exist
@@ -330,6 +326,13 @@ export class MainComponent implements OnInit {
    this.setCols();
  }

+  ngAfterViewInit() {
+    if (this.youtubeSearchEnabled && this.youtubeAPIKey) {
+      this.youtubeSearch.initializeAPI(this.youtubeAPIKey);
+      this.attachToInput();
+    }
+  }
+
  public setCols() {
    if (window.innerWidth <= 350) {
      this.files_cols = 1;
@@ -343,7 +346,7 @@ export class MainComponent implements OnInit {
  }

  public goToFile(container, isAudio, uid) {
-    this.downloadHelper(container, isAudio ? 'audio' : 'video', false, false, null, true);
+    this.downloadHelper(container, isAudio ? 'audio' : 'video', false, false, true);
  }

  public goToPlaylist(playlistID, type) {
@@ -374,10 +377,9 @@ export class MainComponent implements OnInit {
  }

  // download helpers
-
-  downloadHelper(container, type, is_playlist = false, force_view = false, new_download = null, navigate_mode = false) {
+  downloadHelper(container, type, is_playlist = false, force_view = false, navigate_mode = false) {
    this.downloadingfile = false;
-    if (this.multiDownloadMode && !this.downloadOnlyMode && !navigate_mode) {
+    if (!this.autoplay && !this.downloadOnlyMode && !navigate_mode) {
      // do nothing
      this.reloadRecentVideos();
    } else {
@@ -398,9 +400,6 @@ export class MainComponent implements OnInit {
        }
      }
    }
-
-    // remove download from current downloads
-    this.removeDownloadFromCurrentDownloads(new_download);
  }

  // download click handler
@@ -432,21 +431,8 @@ export class MainComponent implements OnInit {
    }

    const type = this.audioOnly ? 'audio' : 'video';
-    // create download object
-    const new_download: Download = {
-      uid: uuid(),
-      type: type,
-      percent_complete: 0,
-      url: this.url,
-      downloading: true,
-      is_playlist: this.url.includes('playlist'),
-      error: false
-    };
-    this.downloads.push(new_download);
-    if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
-    this.downloadingfile = true;

-    let customQualityConfiguration = type === 'audio' ? this.getSelectedAudioFormat() : this.getSelectedVideoFormat();
+    const customQualityConfiguration = type === 'audio' ? this.getSelectedAudioFormat() : this.getSelectedVideoFormat();

    let cropFileSettings = null;

@@ -457,31 +443,21 @@ export class MainComponent implements OnInit {
      }
    }

+    this.downloadingfile = true;
    this.postsService.downloadFile(this.url, type, (this.selectedQuality === '' ? null : this.selectedQuality),
-      customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid, cropFileSettings).subscribe(res => {
-      // update download object
-      new_download.downloading = false;
-      new_download.percent_complete = 100;
-
-      const container = res['container'];
-      const is_playlist = res['file_uids'].length > 1;
-
-      this.current_download = null;
-
-      this.downloadHelper(container, type, is_playlist, false, new_download);
+      customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, cropFileSettings).subscribe(res => {
+        this.current_download = res['download'];
+        this.downloads.push(res['download']);
+        this.download_uids.push(res['download']['uid']);
    }, error => { // can't access server
      this.downloadingfile = false;
      this.current_download = null;
-      new_download['downloading'] = false;
-      // removes download from list of downloads
-      const downloads_index = this.downloads.indexOf(new_download);
-      if (downloads_index !== -1) {
-        this.downloads.splice(downloads_index)
-      }
      this.openSnackBar('Download failed!', 'OK.');
    });

-    if (this.multiDownloadMode) {
+    if (!this.autoplay) {
+        const download_queued_message = $localize`Download for ${this.url}:url: has been queued!`;
+        this.postsService.openSnackBar(download_queued_message);
        this.url = '';
        this.downloadingfile = false;
    }
@@ -640,7 +616,7 @@ export class MainComponent implements OnInit {
    }
    if (!(this.cachedAvailableFormats[url] && this.cachedAvailableFormats[url]['formats'])) {
      this.cachedAvailableFormats[url]['formats_loading'] = true;
-      this.postsService.getFileInfo([url], 'irrelevant', true).subscribe(res => {
+      this.postsService.getFileFormats([url]).subscribe(res => {
        this.cachedAvailableFormats[url]['formats_loading'] = false;
        const infos = res['result'];
        if (!infos || !infos.formats) {
@@ -772,8 +748,8 @@ export class MainComponent implements OnInit {
    localStorage.setItem('audioOnly', new_val.checked.toString());
  }

-  multiDownloadModeChanged(new_val) {
-    localStorage.setItem('multiDownloadMode', new_val.checked.toString());
+  autoplayChanged(new_val) {
+    localStorage.setItem('autoplay', new_val.checked.toString());
  }

  customArgsEnabledChanged(new_val) {
@@ -934,12 +910,20 @@ export class MainComponent implements OnInit {
    if (!this.current_download) {
      return;
    }
-    const ui_uid = this.current_download['ui_uid'] ? this.current_download['ui_uid'] : this.current_download['uid'];
-    this.postsService.getCurrentDownload(this.postsService.session_id, ui_uid).subscribe(res => {
+    this.postsService.getCurrentDownload(this.current_download['uid']).subscribe(res => {
      if (res['download']) {
-        if (ui_uid === res['download']['ui_uid']) {
-          this.current_download = res['download'];
-          this.percentDownloaded = this.current_download.percent_complete;
+        this.current_download = res['download'];
+        this.percentDownloaded = this.current_download.percent_complete;
+
+        if (this.current_download['finished'] && !this.current_download['error']) {
+          const container = this.current_download['container'];
+          const is_playlist = this.current_download['file_uids'].length > 1;    
+          this.downloadHelper(container, this.current_download['type'], is_playlist, false);
+          this.current_download = null;
+        } else if (this.current_download['finished'] && this.current_download['error']) {
+          this.downloadingfile = false;
+          this.current_download = null;
+          this.openSnackBar('Download failed!', 'OK.');
        }
      } else {
        // console.log('failed to get new download');
--- a/src/app/player/player.component.ts
+++ b/src/app/player/player.component.ts
@@ -4,7 +4,6 @@ import { PostsService } from 'app/posts.services';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { InputDialogComponent } from 'app/input-dialog/input-dialog.component';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ShareMediaDialogComponent } from '../dialogs/share-media-dialog/share-media-dialog.component';
 import { TwitchChatComponent } from 'app/components/twitch-chat/twitch-chat.component';
@@ -167,18 +166,8 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
      const subscription = res['subscription'];
      this.subscription = subscription;
      this.type === this.subscription.type;
-      subscription.videos.forEach(video => {
-        if (video['uid'] === this.uid) {
-          this.db_file = video;
-          this.postsService.incrementViewCount(this.db_file['uid'], this.sub_id, this.uuid).subscribe(res => {}, err => {
-            console.error('Failed to increment view count');
-            console.error(err);
-          });
-          this.uids = [this.db_file['uid']];
-          this.show_player = true;
-          this.parseFileNames();
-        }
-      });
+      this.uids = this.subscription.videos.map(video => video['uid']);
+      this.parseFileNames();
    }, err => {
      this.openSnackBar(`Failed to find subscription ${this.sub_id}`, 'Dismiss');
    });
@@ -204,9 +193,14 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
  parseFileNames() {    
    this.playlist = [];
    for (let i = 0; i < this.uids.length; i++) {
-      const uid = this.uids[i];
-
-      const file_obj = this.playlist_id ? this.db_playlist['file_objs'][i] : this.db_file;
+      let file_obj = null;
+      if (this.playlist_id) {
+        file_obj = this.db_playlist['file_objs'][i];
+      } else if (this.sub_id) {
+        file_obj = this.subscription['videos'][i];
+      } else {
+        file_obj = this.db_file;
+      }

      const mime_type = file_obj.isAudio ? 'audio/mp3' : 'video/mp4' 

@@ -346,22 +340,6 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
    return JSON.stringify(this.playlist) !== this.original_playlist;
  }

-  updatePlaylist() {
-    const fileNames = this.getFileNames();
-    this.playlist_updating = true;
-    this.postsService.updatePlaylistFiles(this.playlist_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: this.type, id: this.playlist_id}]);
-        this.openSnackBar('Successfully updated playlist.', '');
-        this.original_playlist = JSON.stringify(this.playlist);
-      } else {
-        this.openSnackBar('ERROR: Failed to update playlist.', '');
-      }
-    })
-  }
-
  openShareDialog() {
    const dialogRef = this.dialog.open(ShareMediaDialogComponent, {
      data: {
--- a/src/app/posts.services.ts
+++ b/src/app/posts.services.ts
@@ -174,7 +174,7 @@ export class PostsService implements CanActivate {
    }

    // tslint:disable-next-line: max-line-length
-    downloadFile(url: string, type: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null, cropFileSettings = null) {
+    downloadFile(url: string, type: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, cropFileSettings = null) {
        return this.http.post(this.path + 'downloadFile', {url: url,
                                                    selectedHeight: selectedQuality,
                                                    customQualityConfiguration: customQualityConfiguration,
@@ -182,7 +182,6 @@ export class PostsService implements CanActivate {
                                                    customOutput: customOutput,
                                                    youtubeUsername: youtubeUsername,
                                                    youtubePassword: youtubePassword,
-                                                    ui_uid: ui_uid,
                                                    type: type,
                                                    cropFileSettings: cropFileSettings}, this.httpOptions);
    }
@@ -239,8 +238,8 @@ export class PostsService implements CanActivate {
        return this.http.post(this.path + 'getFile', {uid: uid, type: type, uuid: uuid}, this.httpOptions);
    }

-    getAllFiles(sort, range, text_search) {
-        return this.http.post(this.path + 'getAllFiles', {sort: sort, range: range, text_search: text_search}, this.httpOptions);
+    getAllFiles(sort, range, text_search, file_type_filter) {
+        return this.http.post(this.path + 'getAllFiles', {sort: sort, range: range, text_search: text_search, file_type_filter: file_type_filter}, this.httpOptions);
    }

    getFullTwitchChat(id, type, uuid = null, sub = null) {
@@ -296,8 +295,8 @@ export class PostsService implements CanActivate {
        return this.http.post(this.path + 'downloadArchive', {sub: sub}, {responseType: 'blob', params: this.httpOptions.params});
    }

-    getFileInfo(fileNames, type, urlMode) {
-        return this.http.post(this.path + 'getVideoInfos', {fileNames: fileNames, type: type, urlMode: urlMode}, this.httpOptions);
+    getFileFormats(url) {
+        return this.http.post(this.path + 'getFileFormats', {url: url}, this.httpOptions);
    }

    getLogs(lines = 50) {
@@ -345,12 +344,6 @@ export class PostsService implements CanActivate {
        return this.http.post(this.path + 'updatePlaylist', {playlist: playlist}, this.httpOptions);
    }

-    updatePlaylistFiles(playlist_id, fileNames, type) {
-        return this.http.post(this.path + 'updatePlaylistFiles', {playlist_id: playlist_id,
-                                                            fileNames: fileNames,
-                                                            type: type}, this.httpOptions);
-    }
-
    addFileToPlaylist(playlist_id, file_uid) {
        return this.http.post(this.path + 'addFileToPlaylist', {playlist_id: playlist_id,
                                                                file_uid: file_uid},
@@ -420,24 +413,46 @@ export class PostsService implements CanActivate {
        return this.http.post(this.path + 'getSubscriptions', {}, this.httpOptions);
    }

-    // current downloads
-    getCurrentDownloads() {
-        return this.http.get(this.path + 'downloads', this.httpOptions);
+    getCurrentDownloads(uids = null) {
+        return this.http.post(this.path + 'downloads', {uids: uids}, this.httpOptions);
    }

-    // current download
-    getCurrentDownload(session_id, download_id) {
-        return this.http.post(this.path + 'download', {download_id: download_id, session_id: session_id}, this.httpOptions);
+    getCurrentDownload(download_uid) {
+        return this.http.post(this.path + 'download', {download_uid: download_uid}, this.httpOptions);
    }

-    // clear downloads. download_id is optional, if it exists only 1 download will be cleared
-    clearDownloads(delete_all = false, session_id = null, download_id = null) {
-        return this.http.post(this.path + 'clearDownloads', {delete_all: delete_all,
-                                                            download_id: download_id,
-                                                            session_id: session_id ? session_id : this.session_id}, this.httpOptions);
+    pauseDownload(download_uid) {
+        return this.http.post(this.path + 'pauseDownload', {download_uid: download_uid}, this.httpOptions);
+    }
+
+    pauseAllDownloads() {
+        return this.http.post(this.path + 'pauseAllDownloads', {}, this.httpOptions);
+    }
+
+    resumeDownload(download_uid) {
+        return this.http.post(this.path + 'resumeDownload', {download_uid: download_uid}, this.httpOptions);
+    }
+
+    resumeAllDownloads() {
+        return this.http.post(this.path + 'resumeAllDownloads', {}, this.httpOptions);
+    }
+
+    restartDownload(download_uid) {
+        return this.http.post(this.path + 'restartDownload', {download_uid: download_uid}, this.httpOptions);
+    }
+
+    cancelDownload(download_uid) {
+        return this.http.post(this.path + 'cancelDownload', {download_uid: download_uid}, this.httpOptions);
+    }
+
+    clearDownload(download_uid) {
+        return this.http.post(this.path + 'clearDownload', {download_uid: download_uid}, this.httpOptions);
+    }
+
+    clearFinishedDownloads() {
+        return this.http.post(this.path + 'clearFinishedDownloads', {}, this.httpOptions);
    }

-    // updates the server to the latest version
    updateServer(tag) {
        return this.http.post(this.path + 'updateServer', {tag: tag}, this.httpOptions);
    }
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -58,12 +58,6 @@
                            <mat-hint><ng-container i18n="Check interval setting input hint">Unit is seconds, only include numbers.</ng-container></mat-hint>
                        </mat-form-field>
                    </div>
-                    <div class="col-12 mt-2">
-                        <mat-form-field class="text-field" color="accent">
-                            <input [(ngModel)]="new_config['Subscriptions']['download_delay']" matInput placeholder="Download delay" i18n-placeholder="Download delay input placeholder">
-                            <mat-hint><ng-container i18n="Download delay input hint">Units is seconds, will force youtube-dl to sleep between videos in a subscription by the specified number of seconds. Only include numbers.</ng-container></mat-hint>
-                        </mat-form-field>
-                    </div>
                    <div class="col-12 mt-4 mb-3">
                        <mat-checkbox color="accent" [(ngModel)]="new_config['Subscriptions']['redownload_fresh_uploads']" matTooltip="Sometimes new videos are downloaded before being fully processed. This setting will mean new videos will be checked for a higher quality version the following day." i18n-matTooltip="Redownload fresh uploads tooltip"><ng-container i18n="Redownload fresh uploads">Redownload fresh uploads</ng-container></mat-checkbox>
                    </div>
@@ -184,6 +178,12 @@
            <div *ngIf="new_config" class="container-fluid">
                <div class="row">
                    <div class="col-12 mt-3 mb-4">
+                        <mat-form-field class="text-field" color="accent">
+                            <input type="number" [(ngModel)]="new_config['Downloader']['max_concurrent_downloads']" matInput placeholder="Max concurrent downloads" i18n-placeholder="Max concurrent downloads">
+                            <mat-hint><ng-container i18n="Max concurrent downloads input hint">Limits the amount of downloads that can be simultaneously downloaded. Use -1 for no limit.</ng-container></mat-hint>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12 mt-2 mb-4">
                        <mat-form-field class="text-field" color="accent">
                            <input [(ngModel)]="new_config['Downloader']['download_rate_limit']" matInput placeholder="Download rate limit" i18n-placeholder="Download rate limit input placeholder">
                            <mat-hint><ng-container i18n="Download rate limit input hint">Rate limits your downloads to the specified amount. Ex: 200K</ng-container></mat-hint>
@@ -225,7 +225,7 @@
                        <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['download_only_mode']"><ng-container i18n="Download only mode setting">Download only mode</ng-container></mat-checkbox>
                    </div>
                    <div class="col-12">
-                        <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_multi_download_mode']"><ng-container i18n="Allow multi-download mode setting">Allow multi-download mode</ng-container></mat-checkbox>
+                        <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_autoplay']"><ng-container i18n="Allow autoplay setting">Allow autoplay</ng-container></mat-checkbox>
                    </div>
                </div>
            </div>
--- a/src/app/subscription/subscription/subscription.component.html
+++ b/src/app/subscription/subscription/subscription.component.html
@@ -44,5 +44,6 @@
        </div>
    </div>
    <button class="edit-button" color="primary" (click)="editSubscription()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">edit</mat-icon></button>
+    <button class="watch-button" color="primary" (click)="watchSubscription()" mat-fab><mat-icon class="save-icon">video_library</mat-icon></button>
    <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
 </div>
--- a/src/app/subscription/subscription/subscription.component.scss
+++ b/src/app/subscription/subscription/subscription.component.scss
@@ -67,4 +67,10 @@
 .save-icon {
    bottom: 1px;
    position: relative;
+}
+
+.watch-button {
+    left: 90px;
+    position: fixed;
+    bottom: 25px;
 }
--- a/src/app/subscription/subscription/subscription.component.ts
+++ b/src/app/subscription/subscription/subscription.component.ts
@@ -109,8 +109,7 @@ export class SubscriptionComponent implements OnInit, OnDestroy {
    if (this.subscription.streamingOnly) {
      this.router.navigate(['/player', {uid: uid, url: url}]);
    } else {
-      this.router.navigate(['/player', {uid: uid,
-        sub_id: this.subscription.id}]);
+      this.router.navigate(['/player', {uid: uid}]);
    }
  }

@@ -171,4 +170,8 @@ export class SubscriptionComponent implements OnInit, OnDestroy {
    });
  }

+  watchSubscription() {
+    this.router.navigate(['/player', {sub_id: this.subscription.id}])
+  }
+
 }
--- a/src/app/subscriptions/subscriptions.component.html
+++ b/src/app/subscriptions/subscriptions.component.html
@@ -14,6 +14,9 @@
                <ng-container i18n="Subscription playlist not available text">Name not available. Channel retrieval in progress.</ng-container>
            </div>
        </a>
+        <button mat-icon-button (click)="editSubscription(sub)">
+            <mat-icon>edit</mat-icon>
+        </button>
        <button mat-icon-button (click)="showSubInfo(sub)">
            <mat-icon>info</mat-icon>
        </button>
--- a/src/app/subscriptions/subscriptions.component.ts
+++ b/src/app/subscriptions/subscriptions.component.ts
@@ -5,6 +5,7 @@ import { SubscribeDialogComponent } from 'app/dialogs/subscribe-dialog/subscribe
 import { PostsService } from 'app/posts.services';
 import { Router } from '@angular/router';
 import { SubscriptionInfoDialogComponent } from 'app/dialogs/subscription-info-dialog/subscription-info-dialog.component';
+import { EditSubscriptionDialogComponent } from 'app/dialogs/edit-subscription-dialog/edit-subscription-dialog.component';

@Component({
  selector: 'app-subscriptions',
@@ -32,8 +33,8 @@ export class SubscriptionsComponent implements OnInit {
    });
  }

-  getSubscriptions() {
-    this.subscriptions_loading = true;
+  getSubscriptions(show_loading = true) {
+    if (show_loading) this.subscriptions_loading = true;
    this.subscriptions = null;
    this.postsService.getAllSubscriptions().subscribe(res => {
      this.channel_subscriptions = [];
@@ -102,6 +103,17 @@ export class SubscriptionsComponent implements OnInit {
    })
  }

+  editSubscription(sub) {
+    const dialogRef = this.dialog.open(EditSubscriptionDialogComponent, {
+      data: {
+        sub: this.postsService.getSubscriptionByID(sub.id)
+      }
+    });
+    dialogRef.afterClosed().subscribe(() => {
+      this.getSubscriptions(false);
+    });
+  }
+
  // snackbar helper
  public openSnackBar(message: string, action = '') {
    this.snackBar.open(message, action, {