Updated arm dockerfile and moved hooks to the right place

2026-03-11 23:30:58 +03:00 · 2020-08-20 02:52:45 -04:00
33 changed files with 162 additions and 781 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -65,4 +65,3 @@ backend/appdata/logs/error.log
 backend/appdata/users.json
 backend/users/*
 backend/appdata/cookies.txt
-backend/public
--- a/armhf.Dockerfile
+++ b/armhf.Dockerfile
@@ -1,15 +1,11 @@
-FROM alpine:3.12 as frontend
+FROM arm32v7/alpine:3.12 as frontend

 RUN apk add --no-cache \
-  npm \
-  curl
+  npm

 RUN npm install -g @angular/cli

 WORKDIR /build
-
-RUN curl -L https://github.com/balena-io/qemu/releases/download/v3.0.0%2Bresin/qemu-3.0.0+resin-arm.tar.gz | tar zxvf - -C . && mv qemu-3.0.0+resin-arm/qemu-arm-static .
-
 COPY [ "package.json", "package-lock.json", "/build/" ]
 RUN npm install

@@ -21,7 +17,7 @@ RUN ng build --prod

 FROM arm32v7/alpine:3.12

-COPY --from=frontend /build/qemu-arm-static /usr/bin
+COPY qemu-arm-static /usr/bin

 ENV UID=1000 \
  GID=1000 \
--- a/backend/app.js
+++ b/backend/app.js
@@ -7,7 +7,7 @@ var path = require('path');
 var youtubedl = require('youtube-dl');
 var ffmpeg = require('fluent-ffmpeg');
 var compression = require('compression');
-var glob = require("glob")
+var https = require('https');
 var multer  = require('multer');
 var express = require("express");
 var bodyParser = require("body-parser");
@@ -1146,29 +1146,12 @@ async function downloadFileByURL_exec(url, type, options, sessionID = null) {
            type: type,
            percent_complete: 0,
            is_playlist: url.includes('playlist'),
-            timestamp_start: Date.now(),
-            filesize: null
+            timestamp_start: Date.now()
        };
        const download = downloads[session][download_uid];
        updateDownloads();

-        // get video info prior to download
-        const info = await getVideoInfoByURL(url, downloadConfig, download);
-        if (!info) {
-            resolve(false);
-            return;
-        } else {
-            // store info in download for future use
-            download['_filename'] = info['_filename'];
-            download['filesize'] = utils.getExpectedFileSize(info);
-        }
-
-        const download_checker = setInterval(() => checkDownloadPercent(download), 1000);
-
-        // download file
        youtubedl.exec(url, downloadConfig, {}, function(err, output) {
-            clearInterval(download_checker); // stops the download checker from running as the download finished (or errored)
-
            download['downloading'] = false;
            download['timestamp_end'] = Date.now();
            var file_uid = null;
@@ -1181,7 +1164,7 @@ async function downloadFileByURL_exec(url, type, options, sessionID = null) {
                download['error'] = err.stderr;
                updateDownloads();
                resolve(false);
-                return;
+                throw err;
            } else if (output) {
                if (output.length === 0 || output[0].length === 0) {
                    download['error'] = 'No output. Check if video already exists in your archive.';
@@ -1424,7 +1407,7 @@ async function generateArgs(url, type, options) {
        var youtubePassword = options.youtubePassword;

        let downloadConfig = null;
-        let qualityPath = (is_audio && !options.skip_audio_args) ? ['-f', 'bestaudio'] : ['-f', 'bestvideo+bestaudio', '--merge-output-format', 'mp4'];
+        let qualityPath = (is_audio && !options.skip_audio_args) ? ['-f', 'bestaudio'] : ['-f', 'best[ext=mp4]'];
        const is_youtube = url.includes('youtu');
        if (!is_audio && !is_youtube) {
            // tiktok videos fail when using the default format
@@ -1502,10 +1485,6 @@ async function generateArgs(url, type, options) {
                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) {
@@ -1518,36 +1497,11 @@ async function generateArgs(url, type, options) {

        }
        logger.verbose(`youtube-dl args being used: ${downloadConfig.join(',')}`);
+        // downloadConfig.map((arg) => `"${arg}"`);
        resolve(downloadConfig);
    });
 }

-async function getVideoInfoByURL(url, args = [], download = 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);
-        }
-
-        // actually get info
-        youtubedl.getInfo(url, new_args, (err, output) => {
-            if (output) {
-                resolve(output);
-            } else {
-                logger.error(`Error while retrieving info on video with URL ${url} with the following message: ${err}`);
-                if (download) {
-                    download['error'] = `Failed pre-check for video info: ${err}`;
-                    updateDownloads();
-                }
-                resolve(null);
-            }
-        });
-    });
-}
-
 // currently only works for single urls
 async function getUrlInfos(urls) {
    let startDate = Date.now();
@@ -1605,33 +1559,47 @@ function updateDownloads() {
    db.assign({downloads: downloads}).write();
 }

-function checkDownloadPercent(download) {
-    /*
-    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 file_id = download['file_id'];
-    const filename = path.format(path.parse(download['_filename'].substring(0, download['_filename'].length-4)));
-    const resulting_file_size = download['filesize'];
-
-    glob(`${filename}*`, (err, files) => {
-        let sum_size = 0;
-        files.forEach(file => {
-            try {
-                const file_stats = fs.statSync(file);
-                if (file_stats && file_stats.size) {
-                    sum_size += file_stats.size;
-                }
-            } catch (e) {
-
+/*
+function checkDownloads() {
+    for (let [session_id, session_downloads] of Object.entries(downloads)) {
+        for (let [download_uid, download_obj] of Object.entries(session_downloads)) {
+            if (download_obj && !download_obj['complete'] && !download_obj['error']
+                             && download_obj.timestamp_start > timestamp_server_start) {
+                // download is still running (presumably)
+                download_obj.percent_complete = getDownloadPercent(download_obj);
            }
-        });
-        download['percent_complete'] = (sum_size/resulting_file_size * 100).toFixed(2);
-        updateDownloads();
-    });
+        }
+    }
+}
+*/
+
+function getDownloadPercent(download_obj) {
+    if (!download_obj.final_size) {
+        if (fs.existsSync(download_obj.expected_json_path)) {
+            const file_json = JSON.parse(fs.readFileSync(download_obj.expected_json_path, 'utf8'));
+            let calculated_filesize = null;
+            if (file_json['format_id']) {
+                calculated_filesize = 0;
+                const formats_used = file_json['format_id'].split('+');
+                for (let i = 0; i < file_json['formats'].length; i++) {
+                    if (formats_used.includes(file_json['formats'][i]['format_id'])) {
+                        calculated_filesize += file_json['formats'][i]['filesize'];
+                    }
+                }
+            }
+            download_obj.final_size = calculated_filesize;
+        } else {
+            console.log('could not find json file');
+        }
+    }
+    if (fs.existsSync(download_obj.expected_path)) {
+        const stats = fs.statSync(download_obj.expected_path);
+        const size = stats.size;
+        return (size / download_obj.final_size)*100;
+    } else {
+        console.log('could not find file');
+        return 0;
+    }
 }

 // youtube-dl functions
@@ -1853,7 +1821,7 @@ app.post('/api/tomp3', optionalJwt, async function(req, res) {
    const is_playlist = url.includes('playlist');

    let result_obj = null;
-    if (true || safeDownloadOverride || is_playlist || options.customQualityConfiguration || options.customArgs || options.maxBitrate)
+    if (safeDownloadOverride || is_playlist || options.customQualityConfiguration || options.customArgs || options.maxBitrate)
        result_obj = await downloadFileByURL_exec(url, 'audio', options, req.query.sessionID);
    else
        result_obj = await downloadFileByURL_normal(url, 'audio', options, req.query.sessionID);
@@ -1865,7 +1833,6 @@ app.post('/api/tomp3', optionalJwt, async function(req, res) {
 });

 app.post('/api/tomp4', optionalJwt, async function(req, res) {
-    req.setTimeout(0); // remove timeout in case of long videos
    var url = req.body.url;
    var options = {
        customArgs: req.body.customArgs,
@@ -1883,7 +1850,7 @@ app.post('/api/tomp4', optionalJwt, async function(req, res) {
    const is_playlist = url.includes('playlist');

    let result_obj = null;
-    if (true || safeDownloadOverride || is_playlist || options.customQualityConfiguration || options.customArgs || options.selectedHeight || !url.includes('youtu'))
+    if (safeDownloadOverride || is_playlist || options.customQualityConfiguration || options.customArgs || options.selectedHeight || !url.includes('youtu'))
        result_obj = await downloadFileByURL_exec(url, 'video', options, req.query.sessionID);
    else
        result_obj = await downloadFileByURL_normal(url, 'video', options, req.query.sessionID);
@@ -1911,14 +1878,6 @@ app.get('/api/getMp3s', optionalJwt, function(req, res) {
        playlists = auth_api.getUserPlaylists(req.user.uid, 'audio');
    }

-    mp3s = JSON.parse(JSON.stringify(mp3s));
-
-    // add thumbnails if present
-    mp3s.forEach(mp3 => {
-        if (mp3['thumbnailPath'] && fs.existsSync(mp3['thumbnailPath']))
-            mp3['thumbnailBlob'] = fs.readFileSync(mp3['thumbnailPath']);
-    });
-
    res.send({
        mp3s: mp3s,
        playlists: playlists
@@ -1938,14 +1897,6 @@ app.get('/api/getMp4s', optionalJwt, function(req, res) {
        playlists = auth_api.getUserPlaylists(req.user.uid, 'video');
    }

-    mp4s = JSON.parse(JSON.stringify(mp4s));
-
-    // add thumbnails if present
-    mp4s.forEach(mp4 => {
-        if (mp4['thumbnailPath'] && fs.existsSync(mp4['thumbnailPath']))
-            mp4['thumbnailBlob'] = fs.readFileSync(mp4['thumbnailPath']);
-    });
-
    res.send({
        mp4s: mp4s,
        playlists: playlists
@@ -2030,14 +1981,6 @@ app.post('/api/getAllFiles', optionalJwt, function (req, res) {
        files = files.concat(sub.videos);
    }

-    files = JSON.parse(JSON.stringify(files));
-
-    // add thumbnails if present
-    files.forEach(file => {
-        if (file['thumbnailPath'] && fs.existsSync(file['thumbnailPath']))
-            file['thumbnailBlob'] = fs.readFileSync(file['thumbnailPath']);
-    });
-
    res.send({
        files: files,
        playlists: playlists
@@ -2878,7 +2821,8 @@ app.post('/api/auth/register'
        , optionalJwt
        , auth_api.registerUser);
 app.post('/api/auth/login'
-        , auth_api.passport.authenticate(['local', 'ldapauth'], {})
+        , auth_api.passport.authenticate('local', {})
+        , auth_api.passport.authorize('local')
        , auth_api.generateJWT
        , auth_api.returnAuthResponse
 );
--- a/backend/appdata/default.json
+++ b/backend/appdata/default.json
@@ -9,9 +9,7 @@
      "path-video": "video/",
      "use_youtubedl_archive": false,
      "custom_args": "",
-      "safe_download_override": false,
-      "include_thumbnail": true,
-      "include_metadata": true
+      "safe_download_override": false
    },
    "Extra": {
      "title_top": "YoutubeDL-Material",
@@ -38,15 +36,7 @@
    },
    "Users": {
      "base_path": "users/",
-      "allow_registration": true,
-      "auth_method": "internal",
-      "ldap_config": {
-        "url": "ldap://localhost:389",
-        "bindDN": "cn=root",
-        "bindCredentials": "secret",
-        "searchBase": "ou=passport-ldapauth",
-        "searchFilter": "(uid={{username}})"
-      }
+      "allow_registration": true
    },
    "Advanced": {
      "use_default_downloading_agent": true,
--- a/backend/authentication/auth.js
+++ b/backend/authentication/auth.js
@@ -9,7 +9,6 @@ var bcrypt = require('bcryptjs');


 var LocalStrategy = require('passport-local').Strategy;
-var LdapStrategy = require('passport-ldapauth');
 var JwtStrategy = require('passport-jwt').Strategy,
    ExtractJwt = require('passport-jwt').ExtractJwt;

@@ -91,7 +90,24 @@ exports.registerUser = function(req, res) {

  bcrypt.hash(plaintextPassword, saltRounds)
    .then(function(hash) {
-      let new_user = generateUserObject(userid, username, hash);
+      let new_user = {
+        name: username,
+        uid: userid,
+        passhash: hash,
+        files: {
+          audio: [],
+          video: []
+        },
+        playlists: {
+          audio: [],
+          video: []
+        },
+        subscriptions: [],
+        created: Date.now(),
+        role: userid === 'admin' ? 'admin' : 'user',
+        permissions: [],
+        permission_overrides: []
+      };
      // check if user exists
      if (users_db.get('users').find({uid: userid}).value()) {
        // user id is taken!
@@ -137,43 +153,52 @@ exports.registerUser = function(req, res) {


 exports.passport.use(new LocalStrategy({
-    usernameField: 'username',
+    usernameField: 'userid',
    passwordField: 'password'},
    function(username, password, done) {
        const user = users_db.get('users').find({name: username}).value();
        if (!user) { logger.error(`User ${username} not found`); return done(null, false); }
-        if (user.auth_method && user.auth_method !== 'internal') { return done(null, false); }
        if (user) {
            return done(null, bcrypt.compareSync(password, user.passhash) ? user : false);
        }
    }
 ));

-var getLDAPConfiguration = function(req, callback) {
-  const ldap_config = config_api.getConfigItem('ytdl_ldap_config');
-  const opts = {server: ldap_config};
-  callback(null, opts);
-};
-
-exports.passport.use(new LdapStrategy(getLDAPConfiguration,
-  function(user, done) {
-    // check if ldap auth is enabled
-    const ldap_enabled = config_api.getConfigItem('ytdl_auth_method') === 'ldap';
-    if (!ldap_enabled) return done(null, false);
-    
-    const user_uid = user.uid;
-    let db_user = users_db.get('users').find({uid: user_uid}).value();
-    if (!db_user) {
-      // generate DB user
-      let new_user = generateUserObject(user_uid, user_uid, null, 'ldap');
-      users_db.get('users').push(new_user).write();
-      db_user = new_user;
-      logger.verbose(`Generated new user ${user_uid} using LDAP`);
+/*passport.use(new BasicStrategy(
+  function(userid, plainTextPassword, done) {
+    const user = users_db.get('users').find({name: userid}).value();
+    if (user) {
+          var hashedPwd = user.passhash;
+          return bcrypt.compare(plainTextPassword, hashedPwd);
+    } else {
+          return false;
    }
-    return done(null, db_user);
  }
 ));
+*/

+/*************************************************************
+ * This is a wrapper for auth.passport.authenticate().
+ * We use this to change WWW-Authenticate header so
+ * the browser doesn't pop-up challenge dialog box by default.
+ * Browser's will pop-up up dialog when status is 401 and
+ * "WWW-Authenticate:Basic..."
+ *************************************************************/
+/*
+exports.authenticateViaPassport = function(req, res, next) {
+  exports.passport.authenticate('basic',{session:false},
+    function(err, user, info) {
+      if(!user){
+        res.set('WWW-Authenticate', 'x'+info); // change to xBasic
+        res.status(401).send('Invalid Authentication');
+      } else {
+        req.user = user;
+        next();
+      }
+    }
+  )(req, res, next);
+};
+*/

 /**********************************
 * Generating/Signing a JWT token
@@ -513,26 +538,3 @@ function getToken(queryParams) {
    return null;
  }
 };
-
-function generateUserObject(userid, username, hash, auth_method = 'internal') {
-  let new_user = {
-    name: username,
-    uid: userid,
-    passhash: auth_method === 'internal' ? hash : null,
-    files: {
-      audio: [],
-      video: []
-    },
-    playlists: {
-      audio: [],
-      video: []
-    },
-    subscriptions: [],
-    created: Date.now(),
-    role: userid === 'admin' && auth_method === 'internal' ? 'admin' : 'user',
-    permissions: [],
-    permission_overrides: [],
-    auth_method: auth_method 
-  };
-  return new_user;
-}
--- a/backend/config.js
+++ b/backend/config.js
@@ -157,7 +157,7 @@ function setConfigItems(items) {

 function globalArgsRequiresSafeDownload() {
    const globalArgs = getConfigItem('ytdl_custom_args').split(',,');
-    const argsThatRequireSafeDownload = ['--write-sub', '--write-srt', '--proxy'];
+    const argsThatRequireSafeDownload = ['--write-sub', '--write-srt'];
    const failedArgs = globalArgs.filter(arg => argsThatRequireSafeDownload.includes(arg));
    return failedArgs && failedArgs.length > 0;
 }
@@ -186,9 +186,7 @@ DEFAULT_CONFIG = {
        "path-video": "video/",
        "use_youtubedl_archive": false,
        "custom_args": "",
-        "safe_download_override": false,
-        "include_thumbnail": true,
-        "include_metadata": true
+        "safe_download_override": false
      },
      "Extra": {
        "title_top": "YoutubeDL-Material",
@@ -215,15 +213,7 @@ DEFAULT_CONFIG = {
      },
      "Users": {
        "base_path": "users/",
-        "allow_registration": true,
-        "auth_method": "internal",
-        "ldap_config": {
-            "url": "ldap://localhost:389",
-            "bindDN": "cn=root",
-            "bindCredentials": "secret",
-            "searchBase": "ou=passport-ldapauth",
-            "searchFilter": "(uid={{username}})"
-        }
+        "allow_registration": true
      },
      "Advanced": {
        "use_default_downloading_agent": true,
--- a/backend/consts.js
+++ b/backend/consts.js
@@ -30,14 +30,6 @@ let CONFIG_ITEMS = {
        'key': 'ytdl_safe_download_override',
        'path': 'YoutubeDLMaterial.Downloader.safe_download_override'
    },
-    'ytdl_include_thumbnail': {
-        'key': 'ytdl_include_thumbnail',
-        'path': 'YoutubeDLMaterial.Downloader.include_thumbnail'
-    },
-    'ytdl_include_metadata': {
-        'key': 'ytdl_include_metadata',
-        'path': 'YoutubeDLMaterial.Downloader.include_metadata'
-    },

    // Extra
    'ytdl_title_top': {
@@ -120,14 +112,6 @@ let CONFIG_ITEMS = {
        'key': 'ytdl_allow_registration',
        'path': 'YoutubeDLMaterial.Users.allow_registration'
    },
-    'ytdl_auth_method': {
-        'key': 'ytdl_auth_method',
-        'path': 'YoutubeDLMaterial.Users.auth_method'
-    },
-    'ytdl_ldap_config': {
-        'key': 'ytdl_ldap_config',
-        'path': 'YoutubeDLMaterial.Users.ldap_config'
-    },

    // Advanced
    'ytdl_use_default_downloading_agent': {
--- a/backend/db.js
+++ b/backend/db.js
@@ -26,8 +26,11 @@ function registerFileDB(file_path, type, multiUserMode = null, sub = null) {

    utils.fixVideoMetadataPerms(file_id, type, multiUserMode && multiUserMode.file_path);

-    // add thumbnail path
-    file_object['thumbnailPath'] = utils.getDownloadedThumbnail(file_id, type, multiUserMode && multiUserMode.file_path);
+    // add additional info
+    file_object['uid'] = uuid();
+    file_object['registered'] = Date.now();
+    path_object = path.parse(file_object['path']);
+    file_object['path'] = path.format(path_object);

    if (!sub) {
        if (multiUserMode) {
@@ -45,13 +48,7 @@ function registerFileDB(file_path, type, multiUserMode = null, sub = null) {
        }
    }

-    const file_uid = registerFileDBManual(db_path, file_object);
-
-    // remove metadata JSON if needed
-    if (!config_api.getConfigItem('ytdl_include_metadata')) {
-        utils.deleteJSONFile(file_id, type, multiUserMode && multiUserMode.file_path)
-    }
-
+    const file_uid = registerFileDBManual(db_path, file_object)
    return file_uid;
 }

@@ -168,10 +165,6 @@ async function importUnregisteredFiles() {
    // add subscriptions to check list
    for (let i = 0; i < subscriptions_to_check.length; i++) {
        let subscription_to_check = subscriptions_to_check[i];
-        if (!subscription_to_check.name) {
-            // TODO: Remove subscription as it'll never complete
-            continue;
-        }
        dirs_to_check.push({
            basePath: multi_user_mode ? path.join(usersFileFolder, subscription_to_check.user_uid, 'subscriptions', subscription_to_check.isPlaylist ? 'playlists/' : 'channels/', subscription_to_check.name)
                                      : path.join(subscriptions_base_path, subscription_to_check.isPlaylist ? 'playlists/' : 'channels/', subscription_to_check.name),
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -4,89 +4,6 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
-    "@types/body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
-      "requires": {
-        "@types/connect": "*",
-        "@types/node": "*"
-      }
-    },
-    "@types/connect": {
-      "version": "3.4.33",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
-      "integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/express": {
-      "version": "4.17.7",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.7.tgz",
-      "integrity": "sha512-dCOT5lcmV/uC2J9k0rPafATeeyz+99xTt54ReX11/LObZgfzJqZNcW27zGhYyX+9iSEGXGt5qLPwRSvBZcLvtQ==",
-      "requires": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "*",
-        "@types/qs": "*",
-        "@types/serve-static": "*"
-      }
-    },
-    "@types/express-serve-static-core": {
-      "version": "4.17.9",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.9.tgz",
-      "integrity": "sha512-DG0BYg6yO+ePW+XoDENYz8zhNGC3jDDEpComMYn7WJc4mY1Us8Rw9ax2YhJXxpyk2SF47PQAoQ0YyVT1a0bEkA==",
-      "requires": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*"
-      }
-    },
-    "@types/ldapjs": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/ldapjs/-/ldapjs-1.0.9.tgz",
-      "integrity": "sha512-3PvY7Drp1zoLbcGlothCAkoc5o6Jp9KvUPwHadlHyKp3yPvyeIh7w2zQc9UXMzgDRkoeGXUEODtbEs5XCh9ZyA==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/mime": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
-      "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q=="
-    },
-    "@types/node": {
-      "version": "14.6.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.6.0.tgz",
-      "integrity": "sha512-mikldZQitV94akrc4sCcSjtJfsTKt4p+e/s0AGscVA6XArQ9kFclP+ZiYUMnq987rc6QlYxXv/EivqlfSLxpKA=="
-    },
-    "@types/passport": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.4.tgz",
-      "integrity": "sha512-h5OfAbfBBYSzjeU0GTuuqYEk9McTgWeGQql9g3gUw2/NNCfD7VgExVRYJVVeU13Twn202Mvk9BT0bUrl30sEgA==",
-      "requires": {
-        "@types/express": "*"
-      }
-    },
-    "@types/qs": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.4.tgz",
-      "integrity": "sha512-+wYo+L6ZF6BMoEjtf8zB2esQsqdV6WsjRK/GP9WOgLPrq87PbNWgIxS76dS5uvl/QXtHGakZmwTznIfcPXcKlQ=="
-    },
-    "@types/range-parser": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
-      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
-    },
-    "@types/serve-static": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.5.tgz",
-      "integrity": "sha512-6M64P58N+OXjU432WoLLBQxbA0LRGBCRm7aAGQJ+SMC1IMl0dgRVi9EFfoDcS2a7Xogygk/eGN94CfwU9UF7UQ==",
-      "requires": {
-        "@types/express-serve-static-core": "*",
-        "@types/mime": "*"
-      }
-    },
    "abbrev": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -252,14 +169,6 @@
      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
      "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
    },
-    "backoff": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/backoff/-/backoff-2.5.0.tgz",
-      "integrity": "sha1-9hbtqdPktmuMp/ynn2lXIsX44m8=",
-      "requires": {
-        "precond": "0.2"
-      }
-    },
    "balanced-match": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -406,17 +315,6 @@
      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
      "integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s="
    },
-    "bunyan": {
-      "version": "1.8.14",
-      "resolved": "https://registry.npmjs.org/bunyan/-/bunyan-1.8.14.tgz",
-      "integrity": "sha512-LlahJUxXzZLuw/hetUQJmRgZ1LF6+cr5TPpRj6jf327AsiIq2jhYEH4oqUUkVKTor+9w2BT3oxVwhzE5lw9tcg==",
-      "requires": {
-        "dtrace-provider": "~0.8",
-        "moment": "^2.19.3",
-        "mv": "~2",
-        "safe-json-stringify": "~1"
-      }
-    },
    "busboy": {
      "version": "0.2.14",
      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
@@ -841,15 +739,6 @@
        "is-obj": "^1.0.0"
      }
    },
-    "dtrace-provider": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/dtrace-provider/-/dtrace-provider-0.8.8.tgz",
-      "integrity": "sha512-b7Z7cNtHPhH9EJhNNbbeqTcXB8LGFFZhq1PGgEvpeHlzd36bhbdTWoE/Ba/YguqpBSlAPKnARWhVlhunCMwfxg==",
-      "optional": true,
-      "requires": {
-        "nan": "^2.14.0"
-      }
-    },
    "duplexer2": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -1583,72 +1472,6 @@
        }
      }
    },
-    "ldap-filter": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/ldap-filter/-/ldap-filter-0.2.2.tgz",
-      "integrity": "sha1-8rhCvguG2jNSeYUFsx68rlkNd9A=",
-      "requires": {
-        "assert-plus": "0.1.5"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.1.5.tgz",
-          "integrity": "sha1-7nQAlBMALYTOxyGcasgRgS5yMWA="
-        }
-      }
-    },
-    "ldapauth-fork": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/ldapauth-fork/-/ldapauth-fork-4.3.3.tgz",
-      "integrity": "sha512-x76VpQ5ZqkwAJmqwcD6KIwDiNEbgIGIPGwC/eA17e1dxWhlTx36w0DlLOFwjTuZ2iuaLTsZsUprlVqvSlwc/1Q==",
-      "requires": {
-        "@types/ldapjs": "^1.0.0",
-        "@types/node": "*",
-        "bcryptjs": "^2.4.0",
-        "ldapjs": "^1.0.2",
-        "lru-cache": "^5.1.1"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
-        }
-      }
-    },
-    "ldapjs": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/ldapjs/-/ldapjs-1.0.2.tgz",
-      "integrity": "sha1-VE/3Ayt7g8aPBwEyjZKXqmlDQPk=",
-      "requires": {
-        "asn1": "0.2.3",
-        "assert-plus": "^1.0.0",
-        "backoff": "^2.5.0",
-        "bunyan": "^1.8.3",
-        "dashdash": "^1.14.0",
-        "dtrace-provider": "~0.8",
-        "ldap-filter": "0.2.2",
-        "once": "^1.4.0",
-        "vasync": "^1.6.4",
-        "verror": "^1.8.1"
-      },
-      "dependencies": {
-        "asn1": {
-          "version": "0.2.3",
-          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-          "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y="
-        }
-      }
-    },
    "listenercount": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
@@ -1849,12 +1672,6 @@
        "minimist": "^1.2.5"
      }
    },
-    "moment": {
-      "version": "2.27.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
-      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==",
-      "optional": true
-    },
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -1900,41 +1717,6 @@
        }
      }
    },
-    "mv": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
-      "integrity": "sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=",
-      "optional": true,
-      "requires": {
-        "mkdirp": "~0.5.1",
-        "ncp": "~2.0.0",
-        "rimraf": "~2.4.0"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
-          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
-          "optional": true,
-          "requires": {
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "2 || 3",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "rimraf": {
-          "version": "2.4.5",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.5.tgz",
-          "integrity": "sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=",
-          "optional": true,
-          "requires": {
-            "glob": "^6.0.1"
-          }
-        }
-      }
-    },
    "mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -1945,23 +1727,11 @@
        "thenify-all": "^1.0.0"
      }
    },
-    "nan": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-      "optional": true
-    },
    "nanoid": {
      "version": "2.1.11",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
    },
-    "ncp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
-      "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
-      "optional": true
-    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -2148,17 +1918,6 @@
        }
      }
    },
-    "passport-ldapauth": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/passport-ldapauth/-/passport-ldapauth-2.1.4.tgz",
-      "integrity": "sha512-VeVL69ZK+cpJe0DKMSGuwcf7k+V4dr0U0Y7ZhXL785pcRb5gRA6qYZfIH+XTsAzwqTK9l0Dn3Ds4weOZ1jKkLQ==",
-      "requires": {
-        "@types/node": "*",
-        "@types/passport": "^1.0.0",
-        "ldapauth-fork": "^4.3.2",
-        "passport-strategy": "^1.0.0"
-      }
-    },
    "passport-local": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/passport-local/-/passport-local-1.0.0.tgz",
@@ -2212,11 +1971,6 @@
      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
    },
-    "precond": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/precond/-/precond-0.2.3.tgz",
-      "integrity": "sha1-qpWRvKokkj8eD0hJ0kD0fvwQdaw="
-    },
    "prepend-http": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
@@ -2412,12 +2166,6 @@
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
-    "safe-json-stringify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz",
-      "integrity": "sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==",
-      "optional": true
-    },
    "safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -2934,29 +2682,6 @@
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
    },
-    "vasync": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/vasync/-/vasync-1.6.4.tgz",
-      "integrity": "sha1-3+k2Fq0OeugBszKp2Iv8XNyOHR8=",
-      "requires": {
-        "verror": "1.6.0"
-      },
-      "dependencies": {
-        "extsprintf": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.2.0.tgz",
-          "integrity": "sha1-WtlGwi9bMrp/jNdCZxHG6KP8JSk="
-        },
-        "verror": {
-          "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/verror/-/verror-1.6.0.tgz",
-          "integrity": "sha1-fROyex+swuLakEBetepuW90lLqU=",
-          "requires": {
-            "extsprintf": "1.2.0"
-          }
-        }
-      }
-    },
    "verror": {
      "version": "1.10.0",
      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -37,7 +37,6 @@
    "express": "^4.17.1",
    "fluent-ffmpeg": "^2.1.2",
    "fs-extra": "^9.0.0",
-    "glob": "^7.1.6",
    "jsonwebtoken": "^8.5.1",
    "lowdb": "^1.0.0",
    "md5": "^2.2.1",
@@ -49,7 +48,6 @@
    "passport": "^0.4.1",
    "passport-http": "^0.3.0",
    "passport-jwt": "^4.0.0",
-    "passport-ldapauth": "^2.1.4",
    "passport-local": "^1.0.0",
    "progress": "^2.0.3",
    "ps-node": "^0.1.6",
--- a/backend/subscriptions.js
+++ b/backend/subscriptions.js
@@ -345,10 +345,6 @@ async function getVideosForSub(sub, user_uid = null) {
            }
        }

-        if (config_api.getConfigItem('ytdl_include_thumbnail')) {
-            downloadConfig.push('--write-thumbnail');
-        }
-
        // get videos
        logger.verbose('Subscription: getting videos for subscription ' + sub.name);
        youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
--- a/backend/utils.js
+++ b/backend/utils.js
@@ -88,41 +88,6 @@ 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 getExpectedFileSize(info_json) {
-    if (info_json['filesize']) {
-        return info_json['filesize'];
-    }
-
-    const formats = info_json['format_id'].split('+');
-    let expected_filesize = 0;
-    formats.forEach(format_id => {
-        info_json.formats.forEach(available_format => {
-            if (available_format.format_id === format_id && available_format.filesize) {
-                expected_filesize += available_format.filesize;
-            }
-        });
-    });
-
-    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')
@@ -145,19 +110,6 @@ function fixVideoMetadataPerms(name, type, customPath = null) {
    }
 }

-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 recFindByExt(base,ext,files,result)
 {
    files = files || fs.readdirSync(base)
@@ -201,10 +153,7 @@ module.exports = {
    getJSONMp3: getJSONMp3,
    getJSONMp4: getJSONMp4,
    getTrueFileName: getTrueFileName,
-    getDownloadedThumbnail: getDownloadedThumbnail,
-    getExpectedFileSize: getExpectedFileSize,
    fixVideoMetadataPerms: fixVideoMetadataPerms,
-    deleteJSONFile: deleteJSONFile,
    getDownloadedFilesByType: getDownloadedFilesByType,
    recFindByExt: recFindByExt,
    File: File
--- a/hooks/post_checkout
+++ b/hooks/post_checkout
@@ -0,0 +1,3 @@
+#!/bin/bash
+# downloads a local copy of qemu on docker-hub build machines
+curl -L https://github.com/balena-io/qemu/releases/download/v3.0.0%2Bresin/qemu-3.0.0+resin-arm.tar.gz | tar zxvf - -C . && mv qemu-3.0.0+resin-arm/qemu-arm-static .
--- a/hooks/pre_build
+++ b/hooks/pre_build
@@ -0,0 +1,4 @@
+#!/bin/bash
+# Register qemu-*-static for all supported processors except the 
+# current one, but also remove all registered binfmt_misc before
+docker run --rm --privileged multiarch/qemu-user-static:register --reset
--- a/package-lock.json
+++ b/package-lock.json
@@ -1404,21 +1404,6 @@
        }
      }
    },
-    "@ngneat/content-loader": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@ngneat/content-loader/-/content-loader-5.0.0.tgz",
-      "integrity": "sha512-XrS53rsiJoQIOy2BwmOHkvgPv0a5cTzXbbM+/3IpgezPFdNqDunpZW+AciWQffVOfgbmL+7cYp1DVb6WM15LhQ==",
-      "requires": {
-        "tslib": "^2.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
-          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
-        }
-      }
-    },
    "@ngtools/webpack": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
    "@angular/platform-browser": "^9.1.0",
    "@angular/platform-browser-dynamic": "^9.1.0",
    "@angular/router": "^9.1.0",
-    "@ngneat/content-loader": "^5.0.0",
    "core-js": "^2.4.1",
    "file-saver": "^2.0.2",
    "filesize": "^6.1.0",
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -89,7 +89,9 @@ export class AppComponent implements OnInit {

    // gets the subscriptions
    if (this.allowSubscriptions) {
-      this.postsService.reloadSubscriptions();
+      this.postsService.getAllSubscriptions().subscribe(res => {
+        this.postsService.subscriptions = res['subscriptions'];
+      })
    }
  }

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -54,7 +54,6 @@ import { SettingsComponent } from './settings/settings.component';
 import { MatChipsModule } from '@angular/material/chips';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { AvatarModule } from 'ngx-avatar';
-import { ContentLoaderModule } from '@ngneat/content-loader';

 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
@@ -153,6 +152,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
    MatMenuModule,
    MatDialogModule,
    MatSlideToggleModule,
+    MatMenuModule,
    MatAutocompleteModule,
    MatTabsModule,
    MatTooltipModule,
@@ -164,7 +164,6 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
    ClipboardModule,
    NgxFileDropModule,
    AvatarModule,
-    ContentLoaderModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
--- a/src/app/components/custom-playlists/custom-playlists.component.html
+++ b/src/app/components/custom-playlists/custom-playlists.component.html
@@ -1,8 +1,8 @@
 <div *ngIf="playlists && playlists.length > 0">
    <div class="container">
        <div class="row justify-content-center">
-            <div *ngFor="let playlist of playlists; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)" [loading]="false"></app-unified-file-card>
+            <div *ngFor="let playlist of playlists; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)"></app-unified-file-card>
            </div>
        </div>
    </div>
--- a/src/app/components/custom-playlists/custom-playlists.component.scss
+++ b/src/app/components/custom-playlists/custom-playlists.component.scss
@@ -5,14 +5,6 @@
    right: 15px;
 }

-.large-col {
-    max-width: 320px;
-}
-
-.medium-col {
-    max-width: 240px;
-}
-
-.small-col {
+.file-col {
    max-width: 240px;
 }
--- a/src/app/components/recent-videos/recent-videos.component.html
+++ b/src/app/components/recent-videos/recent-videos.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid" style="max-width: 941px;">
+<div class="container-fluid">
    <div class="row">
        <div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
            <div>
@@ -17,7 +17,7 @@
            </div>
        </div>
        <div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
-            <h4 class="my-videos-title" i18n="My videos title">My videos</h4>
+            <h4 style="text-align: center">My videos</h4>
        </div>
        <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
            <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
@@ -30,16 +30,9 @@
 <div>
    <div class="container">
        <div class="row justify-content-center">
-            <ng-container *ngIf="normal_files_received">
-                <div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)"></app-unified-file-card>
-                </div>
-            </ng-container>
-            <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
-                <div *ngFor="let file of loading_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [loading]="true" [theme]="postsService.theme"></app-unified-file-card>
-                </div>
-            </ng-container>
+            <div *ngFor="let file of filtered_files; let i = index" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 mb-2 mt-2 file-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 mb-2 mt-2 file-col' : '' ]">
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" (deleteFile)="deleteFile($event)"></app-unified-file-card>
+            </div>
        </div>
    </div>
 </div>
--- a/src/app/components/recent-videos/recent-videos.component.scss
+++ b/src/app/components/recent-videos/recent-videos.component.scss
@@ -1,12 +1,4 @@
-.large-col {
-    max-width: 320px;
-}
-
-.medium-col {
-    max-width: 240px;
-}
-
-.small-col {
+.file-col {
    max-width: 240px;
 }

@@ -45,16 +37,4 @@
    display: inline-block;
    position: absolute;
    top: 10px;
-}
-
-.my-videos-title {
-    text-align: center;
-    position: relative;
-    top: 12px;
-}
-
-@media (max-width: 576px) {
-    .my-videos-title {
-        top: 0px;
-    }
 }
--- a/src/app/components/recent-videos/recent-videos.component.ts
+++ b/src/app/components/recent-videos/recent-videos.component.ts
@@ -9,9 +9,6 @@ import { Router } from '@angular/router';
 })
 export class RecentVideosComponent implements OnInit {

-  cached_file_count = 0;
-  loading_files = null;
-
  normal_files_received = false;
  subscription_files_received = false;
  files: any[] = null;
@@ -50,26 +47,15 @@ export class RecentVideosComponent implements OnInit {
  };
  filterProperty = this.filterProperties['upload_date'];

-  constructor(public postsService: PostsService, private router: Router) {
-    // get cached file count
-    if (localStorage.getItem('cached_file_count')) {
-      this.cached_file_count = +localStorage.getItem('cached_file_count');
-      this.loading_files = Array(this.cached_file_count).fill(0);
-    }
-  }
+  constructor(public postsService: PostsService, private router: Router) { }

  ngOnInit(): void {
-    if (this.postsService.initialized) {
-      this.getAllFiles();
-    }
-
    this.postsService.service_initialized.subscribe(init => {
      if (init) {
        this.getAllFiles();
      }
    });

-
    // set filter property to cached
    const cached_filter_property = localStorage.getItem('filter_property');
    if (cached_filter_property && this.filterProperties[cached_filter_property]) {
@@ -128,11 +114,6 @@ export class RecentVideosComponent implements OnInit {
        this.filtered_files = this.files;
      }
      this.filterByProperty(this.filterProperty['property']);
-
-      // set cached file count for future use, note that we convert the amount of files to a string
-      localStorage.setItem('cached_file_count', '' + this.files.length);
-
-      this.normal_files_received = true;
    });
  }

@@ -149,7 +130,7 @@ export class RecentVideosComponent implements OnInit {
  navigateToFile(file) {
    localStorage.setItem('player_navigator', this.router.url);
    if (file.sub_id) {
-      const sub = this.postsService.getSubscriptionByID(file.sub_id);
+      const sub = this.postsService.getSubscriptionByID(file.sub_id)
      if (sub.streamingOnly) {
        this.router.navigate(['/player', {name: file.id,
                                          url: file.requested_formats ? file.requested_formats[0].url : file.url}]);
@@ -181,6 +162,7 @@ export class RecentVideosComponent implements OnInit {
    const type = file.isAudio ? 'audio' : 'video';
    const ext = type === 'audio' ? '.mp3' : '.mp4'
    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    console.log(sub.isPlaylist)
    this.postsService.downloadFileFromServer(file.id, type, null, null, sub.name, sub.isPlaylist,
      this.postsService.user ? this.postsService.user.uid : null, null).subscribe(res => {
          const blob: Blob = res;
--- 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,9 +1,8 @@
 <div (mouseover)="elevated=true" (mouseout)="elevated=false" 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;{{file_obj.registered | date:'shortDate'}}</div>
-    <div *ngIf="loading" class="download-time" style="width: 75%; margin-top: 5px;"><content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></div>
-    <button [disabled]="loading" [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+    <div class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
+    <button [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
    <mat-menu #action_menu="matMenu">
-        <ng-container *ngIf="!is_playlist && !loading">
+        <ng-container *ngIf="!is_playlist">
            <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
            <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
            <mat-divider></mat-divider>
@@ -16,20 +15,17 @@
            <button *ngIf="!file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
            <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
        </ng-container>
-        <ng-container *ngIf="is_playlist && !loading">
+        <ng-container *ngIf="is_playlist">
            <button (click)="emitEditPlaylist()" mat-menu-item><mat-icon>edit</mat-icon><ng-container i18n="Playlist edit button">Edit</ng-container></button>
            <mat-divider></mat-divider>
            <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
        </ng-container>
-        <ng-container *ngIf="loading">
-            <button mat-menu-item>Placeholder</button>
-        </ng-container>
    </mat-menu>
-    <mat-card [matTooltip]="null" (click)="navigateToFile()" 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}">
+    <mat-card [matTooltip]="null" (click)="navigateToFile()" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
        <div style="padding:5px">
-            <div *ngIf="!loading && file_obj.thumbnailURL" class="img-div">
+            <div *ngIf="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.thumbnailBlob ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium'}" [src]="file_obj.thumbnailURL" alt="Thumbnail">
                    <div class="duration-time">
                        {{file_length}}
                    </div>
@@ -37,12 +33,7 @@
                
            </div>

-            <div *ngIf="loading" class="img-div">
-                <content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="100" height="55"><svg:rect x="0" y="0" rx="0" ry="0" width="100" height="55" /></content-loader>
-            </div>
-
-            <span *ngIf="!loading" [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>
-            <span *ngIf="loading" class="title-loading"><content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></span>
+            <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }"><strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>      
        </div>
    </mat-card>
 </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
@@ -1,10 +1,3 @@
-.large-mat-card {
-  width: 300px;
-  height: 250px;
-  padding: 0px;
-  cursor: pointer;
-}
-
 .file-mat-card {
    width: 200px;
    height: 200px;
@@ -33,12 +26,6 @@
  justify-content: center;
 }

-.image-large {
-  width: 300px;
-  height: 167.5px;
-  object-fit: cover;
-}
-
 .image {
  width: 200px;
  height: 112.5px;
@@ -103,7 +90,6 @@
  background: rgba(255,255,255,0.6);
  padding-left: 5px;
  padding-right: 5px;
-  color: black;
 }

 .download-time {
@@ -118,12 +104,6 @@
  top: 6px;
 }

-.title-loading {
-  width: 93%;
-  position: absolute;
-  bottom: 1px;
-}
-
@media (max-width: 576px){
  
  // .example-card {
--- a/src/app/components/unified-file-card/unified-file-card.component.ts
+++ b/src/app/components/unified-file-card/unified-file-card.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';
-import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-unified-file-card',
@@ -17,12 +16,6 @@ export class UnifiedFileCardComponent implements OnInit {
  type = null;
  elevated = false;

-  // optional vars
-  thumbnailBlobURL = null;
-
-  // input/output
-  @Input() loading = true;
-  @Input() theme = null;
  @Input() file_obj = null;
  @Input() card_size = 'medium';
  @Input() use_youtubedl_archive = false;
@@ -40,19 +33,10 @@ export class UnifiedFileCardComponent implements OnInit {
    big: 250x200
  */

-  constructor(private dialog: MatDialog, private sanitizer: DomSanitizer) { }
+  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {
-    if (!this.loading) {
-      this.file_length = fancyTimeFormat(this.file_obj.duration);
-    }
-
-    if (this.file_obj && this.file_obj.thumbnailBlob) {
-      const mime = getMimeByFilename(this.file_obj.thumbnailPath);
-      const blob = new Blob([new Uint8Array(this.file_obj.thumbnailBlob.data)], {type: mime});
-      const bloburl = URL.createObjectURL(blob);
-      this.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);
-    }
+    this.file_length = fancyTimeFormat(this.file_obj.duration);
  }

  emitDeleteFile(blacklistMode = false) {
@@ -109,16 +93,3 @@ function fancyTimeFormat(time) {
  ret += '' + secs;
  return ret;
 }
-
-function getMimeByFilename(name) {
-  switch (name.substring(name.length-4, name.length)) {
-    case '.jpg':
-      return 'image/jpeg';
-    case '.png':
-      return 'image/png';
-    case 'webp':
-      return 'image/webp';
-    default:
-      return null;
-  }
-}
--- a/src/app/dialogs/about-dialog/about-dialog.component.html
+++ b/src/app/dialogs/about-dialog/about-dialog.component.html
@@ -40,7 +40,7 @@
            <br/>
            <mat-form-field placeholder="Card size">
                <mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
-                    <mat-option value="large">
+                    <mat-option value="large" [disabled]="true">
                        Large
                    </mat-option>
                    <mat-option value="medium">
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -164,7 +164,7 @@
 <br/>
 <div class="centered big" id="bar_div" *ngIf="current_download && current_download.downloading; else nofile">
    <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">
+        <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 > 15;else indeterminateprogress">
            <mat-progress-bar style="border-radius: 5px;" mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
            <br/>
        </div>
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -1033,8 +1033,8 @@ export class MainComponent implements OnInit {
        }
      } else if (format_obj.type === 'video') {
        // check if video format is mp4
-        const key = format.format_note.replace('p', '');
-        if (format.ext === 'mp4' || format.ext === 'mkv' || format.ext === 'webm') {
+        const key = format.height.toString();
+        if (format.ext === 'mp4') {
          format_obj['height'] = format.height;
          format_obj['acodec'] = format.acodec;
          format_obj['format_id'] = format.format_id;
--- a/src/app/posts.services.ts
+++ b/src/app/posts.services.ts
@@ -384,7 +384,7 @@ export class PostsService implements CanActivate {

    // user methods
    login(username, password) {
-        const call = this.http.post(this.path + 'auth/login', {username: username, password: password}, this.httpOptions);
+        const call = this.http.post(this.path + 'auth/login', {userid: username, password: password}, this.httpOptions);
        return call;
    }

@@ -398,8 +398,6 @@ export class PostsService implements CanActivate {
        }, err => {
            if (err.status === 401) {
                this.sendToLogin();
-                this.token = null;
-                this.resetHttpParams();
            }
            console.log(err);
        });
@@ -416,7 +414,14 @@ export class PostsService implements CanActivate {
            this.router.navigate(['/login']);
        }

-        this.resetHttpParams();
+        // resets http params
+        this.http_params = `apiKey=${this.auth_token}&sessionID=${this.session_id}`
+
+        this.httpOptions = {
+            params: new HttpParams({
+              fromString: this.http_params
+            }),
+        };
    }

    // user methods
@@ -441,29 +446,12 @@ export class PostsService implements CanActivate {
        this.openSnackBar('You must log in to access this page!');
    }

-    resetHttpParams() {
-        // resets http params
-        this.http_params = `apiKey=${this.auth_token}&sessionID=${this.session_id}`
-
-        this.httpOptions = {
-            params: new HttpParams({
-              fromString: this.http_params
-            }),
-        };
-    }
-
    setInitialized() {
        this.service_initialized.next(true);
        this.initialized = true;
        this.config_reloaded.next(true);
    }

-    reloadSubscriptions() {
-        this.getAllSubscriptions().subscribe(res => {
-            this.subscriptions = res['subscriptions'];
-        });
-    }
-
    adminExists() {
        return this.http.post(this.path + 'auth/adminExists', {}, this.httpOptions);
    }
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -128,11 +128,7 @@
                    </div>

                    <div class="col-12 mt-2">
-                        <mat-checkbox color="accent" [(ngModel)]="new_config['Downloader']['include_thumbnail']"><ng-container i18n="Include thumbnail setting">Include thumbnail</ng-container></mat-checkbox>
-                    </div>
-
-                    <div class="col-12 mt-2">
-                        <mat-checkbox color="accent" [(ngModel)]="new_config['Downloader']['include_metadata']"><ng-container i18n="Include metadata setting">Include metadata</ng-container></mat-checkbox>
+                        <mat-checkbox color="accent" [(ngModel)]="new_config['Downloader']['safe_download_override']"><ng-container i18n="Safe download override setting">Safe download override</ng-container></mat-checkbox>
                    </div>

                    <div class="col-12 mt-2">
@@ -296,50 +292,8 @@
        </ng-template>
    </mat-tab>
    <mat-tab *ngIf="postsService.config && postsService.config.Advanced.multi_user_mode" label="Users" i18n-label="Users settings label">
-        
-        <div style="margin-left: 48px; margin-top: 24px; margin-bottom: -25px;">
-            <div>
-                <mat-checkbox color="accent" [(ngModel)]="new_config['Users']['allow_registration']"><ng-container i18n="Allow registration setting">Allow user registration</ng-container></mat-checkbox>
-            </div>
-            <mat-divider></mat-divider>
-            <mat-form-field style="margin-top: 15px;">
-                <mat-select [(ngModel)]="new_config['Users']['auth_method']" placeholder="Auth method" i18n-placeholder="Auth method select">
-                    <mat-option value="internal">
-                        <ng-container i18n="Internal auth method">Internal</ng-container>
-                    </mat-option>
-                    <mat-option value="ldap">
-                        <ng-container i18n="LDAP auth method">LDAP</ng-container>
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <div *ngIf="new_config['Users']['auth_method'] === 'ldap'">
-                <div>
-                    <mat-form-field>
-                        <input matInput i18n-placeholder="LDAP URL" placeholder="LDAP URL" [(ngModel)]="new_config['Users']['ldap_config']['url']">
-                    </mat-form-field>
-                </div>
-                <div>
-                    <mat-form-field>
-                        <input matInput i18n-placeholder="Bind DN" placeholder="Bind DN" [(ngModel)]="new_config['Users']['ldap_config']['bindDN']">
-                    </mat-form-field>
-                </div>
-                <div>
-                    <mat-form-field>
-                        <input matInput i18n-placeholder="Bind Credentials" placeholder="Bind Credentials" [(ngModel)]="new_config['Users']['ldap_config']['bindCredentials']">
-                    </mat-form-field>
-                </div>
-                <div>
-                    <mat-form-field>
-                        <input matInput i18n-placeholder="Search Base" placeholder="Search Base" [(ngModel)]="new_config['Users']['ldap_config']['searchBase']">
-                    </mat-form-field>
-                </div>
-                <div>
-                    <mat-form-field>
-                        <input matInput i18n-placeholder="Search Filter" placeholder="Search Filter" [(ngModel)]="new_config['Users']['ldap_config']['searchFilter']">
-                    </mat-form-field>
-                </div>
-            </div>
-            <mat-divider></mat-divider>
+        <div style="margin-left: 48px; margin-top: 24px;">
+            <mat-checkbox color="accent" [(ngModel)]="new_config['Users']['allow_registration']"><ng-container i18n="Allow registration setting">Allow user registration</ng-container></mat-checkbox>
        </div>
        <app-modify-users></app-modify-users>
    </mat-tab>
--- a/src/app/subscriptions/subscriptions.component.ts
+++ b/src/app/subscriptions/subscriptions.component.ts
@@ -80,7 +80,6 @@ export class SubscriptionsComponent implements OnInit {
        } else {
          this.channel_subscriptions.push(result);
        }
-        this.postsService.reloadSubscriptions();
      }
    });
  }
@@ -97,7 +96,6 @@ export class SubscriptionsComponent implements OnInit {
      if (success) {
        this.openSnackBar(`${sub.name} successfully deleted!`)
        this.getSubscriptions();
-        this.postsService.reloadSubscriptions();
      }
    })
  }
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -3,8 +3,6 @@ const THEMES_CONFIG = {
        'key': 'default',
        'background_color': 'ghostwhite',
        'alternate_color': 'gray',
-        'ghost_primary': '#f9f9f9',
-        'ghost_secondary': '#ecebeb',
        'css_label': 'default-theme',
        'social_theme': 'material-light'
    },
@@ -12,16 +10,12 @@ const THEMES_CONFIG = {
        'key': 'dark',
        'background_color': '#141414',
        'alternate_color': '#695959',
-        'ghost_primary': '#444444',
-        'ghost_secondary': '#141414',
        'css_label': 'dark-theme',
        'social_theme': 'material-dark'
    },
    'light': {
        'key': 'light',
        'background_color': 'white',
-        'ghost_primary': '#f9f9f9',
-        'ghost_secondary': '#ecebeb',
        'css_label': 'light-theme',
        'social_theme': 'material-light'
    }