Changes forEach loops in categorize() to regular for loops to facilitate early breaking

Bump axios from 0.21.0 to 0.21.1 in /backend

.github/workflows/build.yml

@@ -0,0 +1,95 @@
+name: continuous integration
+
+on:
+  push:
+    branches: [master, feat/*]
+    tags:
+      - v*
+  pull_request:
+      branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+      - name: setup node
+        uses: actions/setup-node@v1
+      - name: install dependencies
+        run: |
+          npm install
+          cd backend
+          npm install
+          sudo npm install -g @angular/cli
+      - name: build
+        run: ng build --prod
+      - name: prepare artifact upload
+        shell: pwsh
+        run: |
+          New-Item -Name build -ItemType Directory
+          New-Item -Path build -Name youtubedl-material -ItemType Directory
+          Copy-Item -Path ./backend/appdata -Recurse -Destination ./build/youtubedl-material
+          Copy-Item -Path ./backend/audio -Recurse -Destination ./build/youtubedl-material
+          Copy-Item -Path ./backend/authentication -Recurse -Destination ./build/youtubedl-material
+          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
+          New-Item -Path ./build/youtubedl-material -Name users
+          Copy-Item -Path ./backend/*.js -Destination ./build/youtubedl-material
+          Copy-Item -Path ./backend/*.json -Destination ./build/youtubedl-material
+      - name: upload build artifact
+        uses: actions/upload-artifact@v1
+        with:
+          name: youtubedl-material
+          path: build
+  release:
+    runs-on: ubuntu-latest
+    needs: build
+    if: contains(github.ref, '/tags/v')
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+      - name: create release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: YoutubeDL-Material ${{ github.ref }}
+          body: |
+            # New features
+            # Minor additions
+            # Bug fixes
+          draft: true
+          prerelease: false
+      - name: download build artifact
+        uses: actions/download-artifact@v1
+        with:
+          name: youtubedl-material
+          path: ${{runner.temp}}/youtubedl-material
+      - name: extract tag name
+        id: tag_name
+        run: echo ::set-output name=tag_name::${GITHUB_REF#refs/tags/}
+      - name: prepare release asset
+        shell: pwsh
+        run: Compress-Archive -Path ${{runner.temp}}/youtubedl-material -DestinationPath youtubedl-material-${{ steps.tag_name.outputs.tag_name }}.zip
+      - name: upload release asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./youtubedl-material-${{ steps.tag_name.outputs.tag_name }}.zip
+          asset_name: youtubedl-material-${{ steps.tag_name.outputs.tag_name }}.zip
+          asset_content_type: application/zip
+      - name: upload docker-compose asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./docker-compose.yml
+          asset_name: docker-compose.yml
+          asset_content_type: text/plain

.github/workflows/docker-release.yml

@@ -0,0 +1,32 @@
+name: docker-release
+
+on:
+  workflow_dispatch:
+    inputs:
+      tags:
+        description: 'Docker tags'
+        required: true
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+      - name: setup platform emulator
+        uses: docker/setup-qemu-action@v1
+      - name: setup multi-arch docker build
+        uses: docker/setup-buildx-action@v1
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: build & push images
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm,linux/arm64/v8
+          push: true
+          tags: ${{ github.event.inputs.tags }}

.github/workflows/docker.yml

@@ -0,0 +1,29 @@
+name: docker
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+      - name: setup platform emulator
+        uses: docker/setup-qemu-action@v1
+      - name: setup multi-arch docker build
+        uses: docker/setup-buildx-action@v1
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: build & push images
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm,linux/arm64/v8
+          push: true
+          tags: tzahi12345/youtubedl-material:nightly

Public API v1.yaml

@@ -261,12 +261,12 @@ paths:
                 $ref: '#/components/schemas/inline_response_200_10'
       security:
         - Auth query parameter: []
-  /api/getAllSubscriptions:
+  /api/getSubscriptions:
     post:
       tags:
         - subscriptions
       summary: Get all subscriptions
-      operationId: post-api-getAllSubscriptions
+      operationId: post-api-getSubscriptions
       requestBody:
         content:
           application/json:

README.md

@@ -1,12 +1,12 @@
 # YoutubeDL-Material
-[![](https://img.shields.io/docker/pulls/tzahi12345/youtubedl-material.svg)](https://hub.docker.com/r/tzahi12345/youtubedl-material)
-[![](https://img.shields.io/docker/image-size/tzahi12345/youtubedl-material?sort=date)](https://hub.docker.com/r/tzahi12345/youtubedl-material)
-[![](https://img.shields.io/badge/%E2%86%91_Deploy_to-Heroku-7056bf.svg)](https://heroku.com/deploy?template=https://github.com/Tzahi12345/YoutubeDL-Material)
-[![](https://img.shields.io/github/issues/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/issues)
-[![](https://img.shields.io/github/license/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/LICENSE.md)
 
+[![Docker pulls badge](https://img.shields.io/docker/pulls/tzahi12345/youtubedl-material.svg)](https://hub.docker.com/r/tzahi12345/youtubedl-material)
+[![Docker image size badge](https://img.shields.io/docker/image-size/tzahi12345/youtubedl-material?sort=date)](https://hub.docker.com/r/tzahi12345/youtubedl-material)
+[![Heroku deploy badge](https://img.shields.io/badge/%E2%86%91_Deploy_to-Heroku-7056bf.svg)](https://heroku.com/deploy?template=https://github.com/Tzahi12345/YoutubeDL-Material)
+[![GitHub issues badge](https://img.shields.io/github/issues/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/issues)
+[![License badge](https://img.shields.io/github/license/Tzahi12345/YoutubeDL-Material)](https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/LICENSE.md)
 
-YoutubeDL-Material is a Material Design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 9](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
+YoutubeDL-Material is a Material Design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 11](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
 
 Now with [Docker](#Docker) support!
 
@@ -16,27 +16,35 @@ Check out the prerequisites, and go to the installation section. Easy as pie!
 
 Here's an image of what it'll look like once you're done:
 
-![frontpage](https://i.imgur.com/w8iofbb.png)
-
-With optional file management enabled (default):
-
-![frontpage_with_files](https://i.imgur.com/FTATqBM.png)
+<img src="https://i.imgur.com/C6vFGbL.png" width="800">
 
 Dark mode:
 
-![dark_mode](https://i.imgur.com/r5ZtBqd.png)
+<img src="https://i.imgur.com/vOtvH5w.png" width="800">
 
 ### Prerequisites
 
 NOTE: If you would like to use Docker, you can skip down to the [Docker](#Docker) section for a setup guide.
 
-Make sure you have these dependencies installed on your system: nodejs and youtube-dl. If you don't, run this command:
+Debian/Ubuntu:
 
+```bash
+sudo apt-get install nodejs youtube-dl ffmpeg
 ```
-sudo apt-get install nodejs youtube-dl
+
+CentOS 7:
+
+```bash
+sudo yum install epel-release
+sudo yum localinstall --nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release-7.noarch.rpm
+sudo yum install centos-release-scl-rh
+sudo yum install rh-nodejs12
+scl enable rh-nodejs12 bash
+sudo yum install nodejs youtube-dl ffmpeg ffmpeg-devel
 ```
 
 Optional dependencies:
+
 * AtomicParsley (for embedding thumbnails, package name `atomicparsley`)
 
 ### Installing
@@ -75,14 +83,16 @@ If you are looking to setup YoutubeDL-Material with Docker, this section is for
 
 1. Run `curl -L https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest/download/docker-compose.yml -o docker-compose.yml` to download the latest Docker Compose, or go to the [releases](https://github.com/Tzahi12345/YoutubeDL-Material/releases/) page to grab the version you'd like.
 2. Run `docker-compose pull`. This will download the official YoutubeDL-Material docker image.
-3. Run `docker-compose up` to start it up. If successful, it should say "HTTP(S): Started on port 8998" or something similar.
-4. Make sure you can connect to the specified URL + port, and if so, you are done!
+3. Run `docker-compose up` to start it up. If successful, it should say "HTTP(S): Started on port 17443" or something similar. This tells you the *container-internal* port of the application. Please check your `docker-compose.yml` file for the *external* port. If you downloaded the file as described above, it defaults to **8998**.
+4. Make sure you can connect to the specified URL + *external* port, and if so, you are done!
+
+NOTE: It is currently recommended that you use the `nightly` tag on Docker. To do so, simply update the docker-compose.yml `image` field so that it points to `tzahi12345/youtubedl-material:nightly`.
 
 ### Custom UID/GID
 
 By default, the Docker container runs as non-root with UID=1000 and GID=1000. To set this to your own UID/GID, simply update the `environment` section in your `docker-compose.yml` like so:
 
-```
+```yml
 environment:
     UID: YOUR_UID
     GID: YOUR_GID
@@ -109,6 +119,7 @@ If you're interested in translating the app into a new language, check out the [
 * **Isaac Grynsztein** (me!) - *Initial work*
 
 Official translators:
+
 * Spanish - tzahi12345
 * German - UnlimitedCookies
 * Chinese - TyRoyal

angular.json

@@ -45,8 +45,6 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,

backend/appdata/default.json

@@ -7,6 +7,7 @@
     "Downloader": {
       "path-audio": "audio/",
       "path-video": "video/",
+      "default_file_output": "",
       "use_youtubedl_archive": false,
       "custom_args": "",
       "safe_download_override": false,
@@ -19,13 +20,17 @@
       "allow_quality_select": true,
       "download_only_mode": false,
       "allow_multi_download_mode": true,
-      "enable_downloads_manager": true
+      "enable_downloads_manager": true,
+      "allow_playlist_categorization": true
     },
     "API": {
       "use_API_key": false,
       "API_key": "",
       "use_youtube_API": false,
-      "youtube_API_key": ""
+      "youtube_API_key": "",
+      "use_twitch_API": false,
+      "twitch_API_key": "",
+      "twitch_auto_download_chat": false
     },
     "Themes": {
       "default_theme": "default",
@@ -34,7 +39,8 @@
     "Subscriptions": {
       "allow_subscriptions": true,
       "subscriptions_base_path": "subscriptions/",
-      "subscriptions_check_interval": "300"
+      "subscriptions_check_interval": "300",
+      "redownload_fresh_uploads": false
     },
     "Users": {
       "base_path": "users/",
@@ -49,6 +55,7 @@
       }
     },
     "Advanced": {
+      "default_downloader": "youtube-dl",
       "use_default_downloading_agent": true,
       "custom_downloading_agent": "",
       "multi_user_mode": false,

backend/authentication/auth.js

@@ -15,15 +15,16 @@ var JwtStrategy = require('passport-jwt').Strategy,
 
 // other required vars
 let logger = null;
-var users_db = null;
+let db =  null;
+let users_db = null;
 let SERVER_SECRET = null;
 let JWT_EXPIRATION = null;
 let opts = null;
 let saltRounds = null;
 
-exports.initialize = function(input_users_db, input_logger) {
+exports.initialize = function(input_db, input_users_db, input_logger) {
   setLogger(input_logger)
-  setDB(input_users_db);
+  setDB(input_db, input_users_db);
 
   /*************************
    * Authentication module
@@ -61,7 +62,8 @@ function setLogger(input_logger) {
   logger = input_logger;
 }
 
-function setDB(input_users_db) {
+function setDB(input_db, input_users_db) {
+  db = input_db;
   users_db = input_users_db;
 }
 
@@ -89,6 +91,12 @@ exports.registerUser = function(req, res) {
     return;
   }
 
+  if (plaintextPassword === "") {
+    res.sendStatus(400);
+    logger.error(`Registration failed for user ${userid}. A password must be provided.`);
+    return;
+  }
+
   bcrypt.hash(plaintextPassword, saltRounds)
     .then(function(hash) {
       let new_user = generateUserObject(userid, username, hash);
@@ -277,22 +285,11 @@ exports.adminExists = function() {
 
 exports.getUserVideos = function(user_uid, type) {
     const user = users_db.get('users').find({uid: user_uid}).value();
-    return user['files'][type];
+    return type ? user['files'].filter(file => file.isAudio === (type === 'audio')) : user['files'];
 }
 
-exports.getUserVideo = function(user_uid, file_uid, type, requireSharing = false) {
-  let file = null;
-  if (!type) {
-    file = users_db.get('users').find({uid: user_uid}).get(`files.audio`).find({uid: file_uid}).value();
-    if (!file) {
-        file = users_db.get('users').find({uid: user_uid}).get(`files.video`).find({uid: file_uid}).value();
-        if (file) type = 'video';
-    } else {
-        type = 'audio';
-    }
-  }
-
-  if (!file && type) file = users_db.get('users').find({uid: user_uid}).get(`files.${type}`).find({uid: file_uid}).value();
+exports.getUserVideo = function(user_uid, file_uid, requireSharing = false) {
+  let file = users_db.get('users').find({uid: user_uid}).get(`files`).find({uid: file_uid}).value();
 
   // prevent unauthorized users from accessing the file info
   if (file && !file['sharingEnabled'] && requireSharing) file = null;
@@ -300,38 +297,58 @@ exports.getUserVideo = function(user_uid, file_uid, type, requireSharing = false
   return file;
 }
 
-exports.addPlaylist = function(user_uid, new_playlist, type) {
-  users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).push(new_playlist).write();
+exports.addPlaylist = function(user_uid, new_playlist) {
+  users_db.get('users').find({uid: user_uid}).get(`playlists`).push(new_playlist).write();
   return true;
 }
 
-exports.updatePlaylistFiles = function(user_uid, playlistID, new_filenames, type) {
-  users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID}).assign({fileNames: new_filenames});
+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 = function(user_uid, playlistID, type) {
-  users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).remove({id: playlistID}).write();
+exports.removePlaylist = function(user_uid, playlistID) {
+  users_db.get('users').find({uid: user_uid}).get(`playlists`).remove({id: playlistID}).write();
   return true;
 }
 
-exports.getUserPlaylists = function(user_uid, type) {
+exports.getUserPlaylists = function(user_uid, user_files = null) {
   const user = users_db.get('users').find({uid: user_uid}).value();
-  return user['playlists'][type];
+  const playlists = JSON.parse(JSON.stringify(user['playlists']));
+  const categories = db.get('categories').value();
+  if (categories && user_files) {
+      categories.forEach(category => {
+          const audio_files = user_files && user_files.filter(file => file.category && file.category.uid === category.uid && file.isAudio);
+          const video_files = user_files && user_files.filter(file => file.category && file.category.uid === category.uid && !file.isAudio);
+          if (audio_files && audio_files.length > 0) {
+              playlists.push({
+                  name: category['name'],
+                  thumbnailURL: audio_files[0].thumbnailURL,
+                  thumbnailPath: audio_files[0].thumbnailPath,
+                  fileNames: audio_files.map(file => file.id),
+                  type: 'audio',
+                  uid: user_uid,
+                  auto: true
+              });
+          }
+          if (video_files && video_files.length > 0) {
+              playlists.push({
+                  name: category['name'],
+                  thumbnailURL: video_files[0].thumbnailURL,
+                  thumbnailPath: video_files[0].thumbnailPath,
+                  fileNames: video_files.map(file => file.id),
+                  type: 'video',
+                  uid: user_uid,
+                  auto: true
+              });
+          }
+      });
+  }
+  return playlists;
 }
 
-exports.getUserPlaylist = function(user_uid, playlistID, type, requireSharing = false) {
-  let playlist = null;
-  if (!type) {
-    playlist = users_db.get('users').find({uid: user_uid}).get(`playlists.audio`).find({id: playlistID}).value();
-    if (!playlist) {
-      playlist = users_db.get('users').find({uid: user_uid}).get(`playlists.video`).find({id: playlistID}).value();
-      if (playlist) type = 'video';
-    } else {
-        type = 'audio';
-    }
-  }
-  if (!playlist) playlist = users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID}).value();
+exports.getUserPlaylist = function(user_uid, playlistID, requireSharing = false) {
+  let playlist = users_db.get('users').find({uid: user_uid}).get(`playlists`).find({id: playlistID}).value();
 
   // prevent unauthorized users from accessing the file info
   if (requireSharing && !playlist['sharingEnabled']) playlist = null;
@@ -339,21 +356,22 @@ exports.getUserPlaylist = function(user_uid, playlistID, type, requireSharing =
   return playlist;
 }
 
-exports.registerUserFile = function(user_uid, file_object, type) {
-  users_db.get('users').find({uid: user_uid}).get(`files.${type}`)
+exports.registerUserFile = function(user_uid, file_object) {
+  users_db.get('users').find({uid: user_uid}).get(`files`)
     .remove({
         path: file_object['path']
     }).write();
 
-  users_db.get('users').find({uid: user_uid}).get(`files.${type}`)
+  users_db.get('users').find({uid: user_uid}).get(`files`)
       .push(file_object)
       .write();
 }
 
-exports.deleteUserFile = async function(user_uid, file_uid, type, blacklistMode = false) {
+exports.deleteUserFile = async function(user_uid, file_uid, blacklistMode = false) {
   let success = false;
-  const file_obj = users_db.get('users').find({uid: user_uid}).get(`files.${type}`).find({uid: file_uid}).value();
+  const file_obj = users_db.get('users').find({uid: user_uid}).get(`files`).find({uid: file_uid}).value();
   if (file_obj) {
+    const type = file_obj.isAudio ? 'audio' : 'video';
     const usersFileFolder = config_api.getConfigItem('ytdl_users_base_path');
     const ext = type === 'audio' ? '.mp3' : '.mp4';
 
@@ -369,7 +387,7 @@ exports.deleteUserFile = async function(user_uid, file_uid, type, blacklistMode
     }
 
     const full_path = path.join(usersFileFolder, user_uid, type, file_obj.id + ext);
-    users_db.get('users').find({uid: user_uid}).get(`files.${type}`)
+    users_db.get('users').find({uid: user_uid}).get(`files`)
       .remove({
           uid: file_uid
       }).write();
@@ -418,11 +436,11 @@ exports.deleteUserFile = async function(user_uid, file_uid, type, blacklistMode
   return success;
 }
 
-exports.changeSharingMode = function(user_uid, file_uid, type, is_playlist, enabled) {
+exports.changeSharingMode = function(user_uid, file_uid, is_playlist, enabled) {
   let success = false;
   const user_db_obj = users_db.get('users').find({uid: user_uid});
   if (user_db_obj.value()) {
-    const file_db_obj = is_playlist ? user_db_obj.get(`playlists.${type}`).find({id: file_uid}) : user_db_obj.get(`files.${type}`).find({uid: file_uid});
+    const file_db_obj = is_playlist ? user_db_obj.get(`playlists`).find({id: file_uid}) : user_db_obj.get(`files`).find({uid: file_uid});
     if (file_db_obj.value()) {
       success = true;
       file_db_obj.assign({sharingEnabled: enabled}).write();
@@ -518,14 +536,8 @@ function generateUserObject(userid, username, hash, auth_method = 'internal') {
     name: username,
     uid: userid,
     passhash: auth_method === 'internal' ? hash : null,
-    files: {
-      audio: [],
-      video: []
-    },
-    playlists: {
-      audio: [],
-      video: []
-    },
+    files: [],
+    playlists: [],
     subscriptions: [],
     created: Date.now(),
     role: userid === 'admin' && auth_method === 'internal' ? 'admin' : 'user',

backend/categories.js

@@ -33,27 +33,33 @@ Rules:
 
 */
 
-async function categorize(file_json) {
+async function categorize(file_jsons) {
+    // to make the logic easier, let's assume the file metadata is an array
+    if (!Array.isArray(file_jsons)) file_jsons = [file_jsons];
+
     let selected_category = null;
     const categories = getCategories();
     if (!categories) {
         logger.warn('Categories could not be found. Initializing categories...');
         db.assign({categories: []}).write();
         return null;
-        return;
     }
 
-    for (let i = 0; i < categories.length; i++) {
-        const category = categories[i];
-        const rules = category['rules'];
-
-        // if rules for current category apply, then that is the selected category
-        if (applyCategoryRules(file_json, rules, category['name'])) {
-            selected_category = category;
-            logger.verbose(`Selected category ${category['name']} for ${file_json['webpage_url']}`);
-            return selected_category;
+    for (let i = 0; i < file_jsons.length; i++) {
+        const file_json = file_jsons[i];
+        for (let j = 0; j < categories.length; j++) {
+            const category = categories[i];
+            const rules = category['rules'];
+    
+            // if rules for current category apply, then that is the selected category
+            if (applyCategoryRules(file_json, rules, category['name'])) {
+                selected_category = category;
+                logger.verbose(`Selected category ${category['name']} for ${file_json['webpage_url']}`);
+                return selected_category;
+            }
         }
     }
+    
     return selected_category;
 }
 

backend/config.js

@@ -184,6 +184,7 @@ DEFAULT_CONFIG = {
       "Downloader": {
         "path-audio": "audio/",
         "path-video": "video/",
+        "default_file_output": "",
         "use_youtubedl_archive": false,
         "custom_args": "",
         "safe_download_override": false,
@@ -196,13 +197,17 @@ DEFAULT_CONFIG = {
         "allow_quality_select": true,
         "download_only_mode": false,
         "allow_multi_download_mode": true,
-        "enable_downloads_manager": true
+        "enable_downloads_manager": true,
+        "allow_playlist_categorization": true
       },
       "API": {
         "use_API_key": false,
         "API_key": "",
         "use_youtube_API": false,
-        "youtube_API_key": ""
+        "youtube_API_key": "",
+        "use_twitch_API": false,
+        "twitch_API_key": "",
+        "twitch_auto_download_chat": false
       },
       "Themes": {
         "default_theme": "default",
@@ -211,7 +216,8 @@ DEFAULT_CONFIG = {
       "Subscriptions": {
         "allow_subscriptions": true,
         "subscriptions_base_path": "subscriptions/",
-        "subscriptions_check_interval": "300"
+        "subscriptions_check_interval": "300",
+        "redownload_fresh_uploads": false
       },
       "Users": {
         "base_path": "users/",
@@ -226,6 +232,7 @@ DEFAULT_CONFIG = {
         }
       },
       "Advanced": {
+        "default_downloader": "youtube-dl",
         "use_default_downloading_agent": true,
         "custom_downloading_agent": "",
         "multi_user_mode": false,

backend/consts.js

@@ -18,6 +18,10 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_video_folder_path',
         'path': 'YoutubeDLMaterial.Downloader.path-video'
     },
+    'ytdl_default_file_output': {
+        'key': 'ytdl_default_file_output',
+        'path': 'YoutubeDLMaterial.Downloader.default_file_output'
+    },
     'ytdl_use_youtubedl_archive': {
         'key': 'ytdl_use_youtubedl_archive',
         'path': 'YoutubeDLMaterial.Downloader.use_youtubedl_archive'
@@ -64,6 +68,10 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_enable_downloads_manager',
         'path': 'YoutubeDLMaterial.Extra.enable_downloads_manager'
     },
+    'ytdl_allow_playlist_categorization': {
+        'key': 'ytdl_allow_playlist_categorization',
+        'path': 'YoutubeDLMaterial.Extra.allow_playlist_categorization'
+    },
 
     // API
     'ytdl_use_api_key': {
@@ -82,6 +90,18 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_youtube_api_key',
         'path': 'YoutubeDLMaterial.API.youtube_API_key'
     },
+    'ytdl_use_twitch_api': {
+        'key': 'ytdl_use_twitch_api',
+        'path': 'YoutubeDLMaterial.API.use_twitch_API'
+    },
+    'ytdl_twitch_api_key': {
+        'key': 'ytdl_twitch_api_key',
+        'path': 'YoutubeDLMaterial.API.twitch_API_key'
+    },
+    'ytdl_twitch_auto_download_chat': {
+        'key': 'ytdl_twitch_auto_download_chat',
+        'path': 'YoutubeDLMaterial.API.twitch_auto_download_chat'
+    },
 
     // Themes
     'ytdl_default_theme': {
@@ -110,6 +130,10 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_subscriptions_check_interval',
         'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
     },
+    'ytdl_subscriptions_redownload_fresh_uploads': {
+        'key': 'ytdl_subscriptions_redownload_fresh_uploads',
+        'path': 'YoutubeDLMaterial.Subscriptions.redownload_fresh_uploads'
+    },
 
     // Users
     'ytdl_users_base_path': {
@@ -130,6 +154,10 @@ let CONFIG_ITEMS = {
     },
 
     // Advanced
+    'ytdl_default_downloader': {
+        'key': 'ytdl_default_downloader',
+        'path': 'YoutubeDLMaterial.Advanced.default_downloader'
+    },
     'ytdl_use_default_downloading_agent': {
         'key': 'ytdl_use_default_downloading_agent',
         'path': 'YoutubeDLMaterial.Advanced.use_default_downloading_agent'
@@ -172,5 +200,5 @@ AVAILABLE_PERMISSIONS = [
 module.exports = {
     CONFIG_ITEMS: CONFIG_ITEMS,
     AVAILABLE_PERMISSIONS: AVAILABLE_PERMISSIONS,
-    CURRENT_VERSION: 'v4.1'
+    CURRENT_VERSION: 'v4.2'
 }

backend/db.js

@@ -15,9 +15,9 @@ function initialize(input_db, input_users_db, input_logger) {
     setLogger(input_logger);
 }
 
-function registerFileDB(file_path, type, multiUserMode = null, sub = null, customPath = null) {
+function registerFileDB(file_path, type, multiUserMode = null, sub = null, customPath = null, category = null) {
     let db_path = null;
-    const file_id = file_path.substring(0, file_path.length-4);
+    const file_id = utils.removeFileExtension(file_path);
     const 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}`);
@@ -29,12 +29,15 @@ function registerFileDB(file_path, type, multiUserMode = null, sub = null, custo
     // 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']};
+
     if (!sub) {
         if (multiUserMode) {
             const user_uid = multiUserMode.user;
-            db_path = users_db.get('users').find({uid: user_uid}).get(`files.${type}`);
+            db_path = users_db.get('users').find({uid: user_uid}).get(`files`);
         } else {
-            db_path = db.get(`files.${type}`)
+            db_path = db.get(`files`);
         }
     } else {
         if (multiUserMode) {
@@ -94,18 +97,18 @@ function generateFileObject(id, type, customPath = null, sub = null) {
     var thumbnail = jsonobj.thumbnail;
     var duration = jsonobj.duration;
     var isaudio = type === 'audio';
-    var file_obj = new utils.File(id, title, thumbnail, isaudio, duration, url, uploader, size, file_path, upload_date);
+    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 updatePlaylist(playlist, user_uid) {
     let playlistID = playlist.id;
-    let type = playlist.type;
     let db_loc = null;
     if (user_uid) {
-        db_loc = users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID});
+        db_loc = users_db.get('users').find({uid: user_uid}).get(`playlists`).find({id: playlistID});
     } else {
-        db_loc = db.get(`playlists.${type}`).find({id: playlistID});
+        db_loc = db.get(`playlists`).find({id: playlistID});
     }
     db_loc.assign(playlist).write();
     return true;
@@ -115,7 +118,7 @@ function getAppendedBasePathSub(sub, base_path) {
     return path.join(base_path, (sub.isPlaylist ? 'playlists/' : 'channels/'), sub.name);
 }
 
-async function importUnregisteredFiles() {
+function getFileDirectoriesAndDBs() {
     let dirs_to_check = [];
     let subscriptions_to_check = [];
     const subscriptions_base_path = config_api.getConfigItem('ytdl_subscriptions_base_path'); // only for single-user mode
@@ -132,14 +135,14 @@ async function importUnregisteredFiles() {
             // add user's audio dir to check list
             dirs_to_check.push({
                 basePath: path.join(usersFileFolder, user.uid, 'audio'),
-                dbPath: users_db.get('users').find({uid: user.uid}).get('files.audio'),
+                dbPath: users_db.get('users').find({uid: user.uid}).get('files'),
                 type: 'audio'
             });
 
             // add user's video dir to check list
             dirs_to_check.push({
                 basePath: path.join(usersFileFolder, user.uid, 'video'),
-                dbPath: users_db.get('users').find({uid: user.uid}).get('files.video'),
+                dbPath: users_db.get('users').find({uid: user.uid}).get('files'),
                 type: 'video'
             });
         }
@@ -153,14 +156,14 @@ async function importUnregisteredFiles() {
         // add audio dir to check list
         dirs_to_check.push({
             basePath: audioFolderPath,
-            dbPath: db.get('files.audio'),
+            dbPath: db.get('files'),
             type: 'audio'
         });
 
         // add video dir to check list
         dirs_to_check.push({
             basePath: videoFolderPath,
-            dbPath: db.get('files.video'),
+            dbPath: db.get('files'),
             type: 'video'
         });
     }
@@ -181,6 +184,12 @@ async function importUnregisteredFiles() {
         });
     }
 
+    return dirs_to_check;
+}
+
+async function importUnregisteredFiles() {
+    const dirs_to_check = getFileDirectoriesAndDBs();
+
     // run through check list and check each file to see if it's missing from the db
     for (const dir_to_check of dirs_to_check) {
         // recursively get all files in dir's path
@@ -199,9 +208,28 @@ async function importUnregisteredFiles() {
 
 }
 
+async function getVideo(file_uid, uuid, sub_id) {
+    const base_db_path = uuid ? users_db.get('users').find({uid: uuid}) : db;
+    const sub_db_path = sub_id ? base_db_path.get('subscriptions').find({id: sub_id}).get('videos') : base_db_path.get('files');
+    return sub_db_path.find({uid: file_uid}).value();
+}
+
+async function setVideoProperty(file_uid, assignment_obj, uuid, sub_id) {
+    const base_db_path = uuid ? users_db.get('users').find({uid: uuid}) : db;
+    const sub_db_path = sub_id ? base_db_path.get('subscriptions').find({id: sub_id}).get('videos') : base_db_path.get('files');
+    const file_db_path = sub_db_path.find({uid: file_uid});
+    if (!(file_db_path.value())) {
+        logger.error(`Failed to find file with uid ${file_uid}`);
+    }
+    sub_db_path.find({uid: file_uid}).assign(assignment_obj).write();
+}
+
 module.exports = {
     initialize: initialize,
     registerFileDB: registerFileDB,
     updatePlaylist: updatePlaylist,
-    importUnregisteredFiles: importUnregisteredFiles
+    getFileDirectoriesAndDBs: getFileDirectoriesAndDBs,
+    importUnregisteredFiles: importUnregisteredFiles,
+    getVideo: getVideo,
+    setVideoProperty: setVideoProperty
 }

backend/package-lock.json

@@ -252,6 +252,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "backoff": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/backoff/-/backoff-2.5.0.tgz",
@@ -1072,6 +1080,11 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
+      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -1850,10 +1863,9 @@
       }
     },
     "moment": {
-      "version": "2.27.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
-      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==",
-      "optional": true
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
     "ms": {
       "version": "2.0.0",

backend/package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "archiver": "^3.1.1",
     "async": "^3.1.0",
+    "axios": "^0.21.1",
     "bcryptjs": "^2.4.0",
     "compression": "^1.7.4",
     "config": "^3.2.3",
@@ -42,6 +43,7 @@
     "lowdb": "^1.0.0",
     "md5": "^2.2.1",
     "merge-files": "^0.1.2",
+    "moment": "^2.29.1",
     "multer": "^1.4.2",
     "node-fetch": "^2.6.1",
     "node-id3": "^0.1.14",

backend/subscriptions.js

@@ -6,7 +6,8 @@ var path = require('path');
 
 var youtubedl = require('youtube-dl');
 const config_api = require('./config');
-var utils = require('./utils')
+const twitch_api = require('./twitch');
+var utils = require('./utils');
 
 const debugMode = process.env.YTDL_MODE === 'debug';
 
@@ -114,7 +115,11 @@ async function getSubscriptionInfo(sub, user_uid = null) {
                         continue;
                     }
                     if (!sub.name) {
-                        sub.name = sub.isPlaylist ? output_json.playlist_title : output_json.uploader;
+                        if (sub.isPlaylist) {
+                            sub.name = output_json.playlist_title ? output_json.playlist_title : output_json.playlist;
+                        } else {
+                            sub.name = output_json.uploader;
+                        }
                         // if it's now valid, update
                         if (sub.name) {
                             if (user_uid)
@@ -206,7 +211,7 @@ async function deleteSubscriptionFile(sub, file, deleteForever, file_uid = null,
     var jsonPath = path.join(__dirname,filePath,name+'.info.json');
     var videoFilePath = path.join(__dirname,filePath,name+ext);
     var imageFilePath = path.join(__dirname,filePath,name+'.jpg');
-    var altImageFilePath = path.join(__dirname,filePath,name+'.jpg');
+    var altImageFilePath = path.join(__dirname,filePath,name+'.webp');
 
     const [jsonExists, videoFileExists, imageFileExists, altImageFileExists] = await Promise.all([
         fs.pathExists(jsonPath),
@@ -250,10 +255,6 @@ async function deleteSubscriptionFile(sub, file, deleteForever, file_uid = null,
 }
 
 async function getVideosForSub(sub, user_uid = null) {
-    if (!subExists(sub.id, user_uid)) {
-        return false;
-    }
-
     // get sub_db
     let sub_db = null;
     if (user_uid)
@@ -261,6 +262,13 @@ async function getVideosForSub(sub, user_uid = null) {
     else
         sub_db = db.get('subscriptions').find({id: sub.id});
 
+    const latest_sub_obj = sub_db.value();
+    if (!latest_sub_obj || latest_sub_obj['downloading']) {
+        return false;
+    }
+
+    updateSubscriptionProperty(sub, {downloading: true}, user_uid);
+
     // get basePath
     let basePath = null;
     if (user_uid)
@@ -268,10 +276,7 @@ async function getVideosForSub(sub, user_uid = null) {
     else
         basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
 
-    const useArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
-
-    let appendedBasePath = null
-    appendedBasePath = getAppendedBasePath(sub, basePath);
+    let appendedBasePath = getAppendedBasePath(sub, basePath);
 
     let multiUserMode = null;
     if (user_uid) {
@@ -281,14 +286,94 @@ async function getVideosForSub(sub, user_uid = null) {
         }
     }
 
-    const ext = (sub.type && sub.type === 'audio') ? '.mp3' : '.mp4'
+    const downloadConfig = await generateArgsForSubscription(sub, user_uid);
+
+    // get videos
+    logger.verbose('Subscription: getting videos for subscription ' + sub.name);
+
+    return new Promise(resolve => {
+        youtubedl.exec(sub.url, downloadConfig, {}, async function(err, output) {
+            updateSubscriptionProperty(sub, {downloading: false}, user_uid);
+            logger.verbose('Subscription: finished check for ' + sub.name);
+            if (err && !output) {
+                logger.error(err.stderr ? err.stderr : err.message);
+                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]);
+                            handleOutputJSON(sub, sub_db, 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);
+                    }
+                }
+                resolve(false);
+            } else if (output) {
+                if (output.length === 0 || (output.length === 1 && output[0] === '')) {
+                    logger.verbose('No additional videos to download for ' + sub.name);
+                    resolve(true);
+                    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;
+                    }
+
+                    const reset_videos = i === 0;
+                    handleOutputJSON(sub, sub_db, output_json, multiUserMode, reset_videos);
+                }
+
+                if (config_api.getConfigItem('ytdl_subscriptions_redownload_fresh_uploads')) {
+                    await setFreshUploads(sub, user_uid);
+                    checkVideosForFreshUploads(sub, user_uid);
+                }
+
+                resolve(true);
+            }
+        });
+    }, err => {
+        logger.error(err);
+        updateSubscriptionProperty(sub, {downloading: false}, user_uid);
+    });
+}
+
+async function generateArgsForSubscription(sub, user_uid, redownload = false, desired_path = null) {
+    // get basePath
+    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');
+
+    const useArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
+
+    let appendedBasePath = getAppendedBasePath(sub, basePath);
 
     let fullOutput = `${appendedBasePath}/%(title)s.%(ext)s`;
-    if (sub.custom_output) {
+    if (desired_path) {
+        fullOutput = `${desired_path}.%(ext)s`;
+    } else if (sub.custom_output) {
         fullOutput = `${appendedBasePath}/${sub.custom_output}.%(ext)s`;
     }
 
-    let downloadConfig = ['-o', fullOutput, '-ciw', '--write-info-json', '--print-json'];
+    let downloadConfig = ['-o', fullOutput, !redownload ? '-ciw' : '-ci', '--write-info-json', '--print-json'];
 
     let qualityPath = null;
     if (sub.type && sub.type === 'audio') {
@@ -296,7 +381,8 @@ async function getVideosForSub(sub, user_uid = null) {
         qualityPath.push('-x');
         qualityPath.push('--audio-format', 'mp3');
     } else {
-        qualityPath = ['-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4']
+        if (!sub.maxQuality || sub.maxQuality === 'best') qualityPath = ['-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4'];
+        else qualityPath = ['-f', `bestvideo[height<=${sub.maxQuality}]+bestaudio/best[height<=${sub.maxQuality}]`, '--merge-output-format', 'mp4'];
     }
 
     downloadConfig.push(...qualityPath)
@@ -314,7 +400,7 @@ async function getVideosForSub(sub, user_uid = null) {
     let archive_dir = null;
     let archive_path = null;
 
-    if (useArchive) {
+    if (useArchive && !redownload) {
         if (sub.archive) {
             archive_dir = sub.archive;
             archive_path = path.join(archive_dir, 'archive.txt')
@@ -327,7 +413,7 @@ async function getVideosForSub(sub, user_uid = null) {
         downloadConfig = ['-f', 'best', '--dump-json'];
     }
 
-    if (sub.timerange) {
+    if (sub.timerange && !redownload) {
         downloadConfig.push('--dateafter', sub.timerange);
     }
 
@@ -344,60 +430,7 @@ async function getVideosForSub(sub, user_uid = null) {
         downloadConfig.push('--write-thumbnail');
     }
 
-    // get videos
-    logger.verbose('Subscription: getting videos for subscription ' + sub.name);
-
-    return new Promise(resolve => {
-        youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
-            logger.verbose('Subscription: finished check for ' + sub.name);
-            if (err && !output) {
-                logger.error(err.stderr);
-                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]);
-                            handleOutputJSON(sub, sub_db, 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
-                                fs.appendFileSync(archive_path, output['id']);
-                            }
-                        }
-                    } catch(e) {
-                        logger.error('Backup method failed. See error below:');
-                        logger.error(e);
-                    }
-                }
-                resolve(false);
-            } else if (output) {
-                if (output.length === 0 || (output.length === 1 && output[0] === '')) {
-                    logger.verbose('No additional videos to download for ' + sub.name);
-                    resolve(true);
-                }
-                for (let i = 0; i < output.length; i++) {
-                    let output_json = null;
-                    try {
-                        output_json = JSON.parse(output[i]);
-                    } catch(e) {
-                        output_json = null;
-                    }
-                    if (!output_json) {
-                        continue;
-                    }
-
-                    const reset_videos = i === 0;
-                    handleOutputJSON(sub, sub_db, output_json, multiUserMode, reset_videos);
-
-                    // TODO: Potentially store downloaded files in db?
-
-                }
-                resolve(true);
-            }
-        });
-    }, err => {
-        logger.error(err);
-    });
+    return downloadConfig;
 }
 
 function handleOutputJSON(sub, sub_db, output_json, multiUserMode = null, reset_videos = false) {
@@ -412,17 +445,49 @@ function handleOutputJSON(sub, sub_db, output_json, multiUserMode = null, reset_
         // add to db
         sub_db.get('videos').push(output_json).write();
     } else {
+        path_object = path.parse(output_json['_filename']);
+        const path_string = path.format(path_object);
+
+        if (sub_db.get('videos').find({path: path_string}).value()) {
+            // file already exists in DB, return early to avoid reseting the download date
+            return;
+        }
+
         db_api.registerFileDB(path.basename(output_json['_filename']), sub.type, multiUserMode, sub);
+        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);
+        }
     }
 }
 
-function getAllSubscriptions(user_uid = null) {
+function getSubscriptions(user_uid = null) {
     if (user_uid)
         return users_db.get('users').find({uid: user_uid}).get('subscriptions').value();
     else
         return db.get('subscriptions').value();
 }
 
+function getAllSubscriptions() {
+    let subscriptions = null;
+    const multiUserMode = config_api.getConfigItem('ytdl_multi_user_mode');
+    if (multiUserMode) {
+        subscriptions = [];
+        let users = users_db.get('users').value();
+        for (let i = 0; i < users.length; i++) {
+            if (users[i]['subscriptions']) subscriptions = subscriptions.concat(users[i]['subscriptions']);
+        }
+    } else {
+        subscriptions = getSubscriptions();
+    }
+    return subscriptions;
+}
+
 function getSubscription(subID, user_uid = null) {
     if (user_uid)
         return users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: subID}).value();
@@ -446,6 +511,21 @@ function updateSubscription(sub, user_uid = null) {
     return true;
 }
 
+function updateSubscriptionPropertyMultiple(subs, assignment_obj) {
+    subs.forEach(sub => {
+        updateSubscriptionProperty(sub, assignment_obj, sub.user_uid);
+    });
+}
+
+function updateSubscriptionProperty(sub, assignment_obj, user_uid = null) {
+    if (user_uid) {
+        users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id}).assign(assignment_obj).write();
+    } else {
+        db.get('subscriptions').find({id: sub.id}).assign(assignment_obj).write();
+    }
+    return true;
+}
+
 function subExists(subID, user_uid = null) {
     if (user_uid)
         return !!users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: subID}).value();
@@ -453,6 +533,52 @@ function subExists(subID, user_uid = null) {
         return !!db.get('subscriptions').find({id: subID}).value();
 }
 
+async function setFreshUploads(sub, user_uid) {
+    const current_date = new Date().toISOString().split('T')[0].replace(/-/g, '');
+    sub.videos.forEach(async video => {
+        if (current_date === video['upload_date'].replace(/-/g, '')) {
+            // set upload as fresh
+            const video_uid = video['uid'];
+            await db_api.setVideoProperty(video_uid, {'fresh_upload': true}, user_uid, sub['id']);
+        }
+    });
+}
+
+async function checkVideosForFreshUploads(sub, user_uid) {
+    const current_date = new Date().toISOString().split('T')[0].replace(/-/g, '');
+    sub.videos.forEach(async video => {
+        if (video['fresh_upload'] && current_date > video['upload_date'].replace(/-/g, '')) {
+            checkVideoIfBetterExists(video, sub, user_uid)
+        }
+    });
+}
+
+async function checkVideoIfBetterExists(file_obj, sub, user_uid) {
+    const new_path = file_obj['path'].substring(0, file_obj['path'].length - 4);
+    const downloadConfig = await generateArgsForSubscription(sub, user_uid, true, new_path);
+    logger.verbose(`Checking if a better version of the fresh upload ${file_obj['id']} exists.`);
+    // simulate a download to verify that a better version exists
+    youtubedl.getInfo(file_obj['url'], downloadConfig, (err, output) => {
+        if (err) {
+            // video is not available anymore for whatever reason
+        } else if (output) {
+            const metric_to_compare = sub.type === 'audio' ? 'abr' : 'height';
+            if (output[metric_to_compare] > file_obj[metric_to_compare]) {
+                // download new video as the simulated one is better
+                youtubedl.exec(file_obj['url'], downloadConfig, async (err, output) => {
+                    if (err) {
+                        logger.verbose(`Failed to download better version of video ${file_obj['id']}`);
+                    } else if (output) {
+                        logger.verbose(`Successfully upgraded video ${file_obj['id']}'s ${metric_to_compare} from ${file_obj[metric_to_compare]} to ${output[metric_to_compare]}`);
+                        await db_api.setVideoProperty(file_obj['uid'], {[metric_to_compare]: output[metric_to_compare]}, user_uid, sub['id']);
+                    }
+                });
+            } 
+        }
+    });
+    await db_api.setVideoProperty(file_obj['uid'], {'fresh_upload': false}, user_uid, sub['id']);
+}
+
 // helper functions
 
 function getAppendedBasePath(sub, base_path) {
@@ -490,6 +616,7 @@ async function removeIDFromArchive(archive_path, id) {
 module.exports = {
     getSubscription        : getSubscription,
     getSubscriptionByName  : getSubscriptionByName,
+    getSubscriptions       : getSubscriptions,
     getAllSubscriptions    : getAllSubscriptions,
     updateSubscription     : updateSubscription,
     subscribe              : subscribe,
@@ -498,5 +625,6 @@ module.exports = {
     getVideosForSub        : getVideosForSub,
     removeIDFromArchive    : removeIDFromArchive,
     setLogger              : setLogger,
-    initialize             : initialize
+    initialize             : initialize,
+    updateSubscriptionPropertyMultiple : updateSubscriptionPropertyMultiple
 }

backend/twitch.js

@@ -0,0 +1,128 @@
+var moment = require('moment');
+var Axios = require('axios');
+var fs = require('fs-extra')
+var path = require('path');
+const config_api = require('./config');
+
+async function getCommentsForVOD(clientID, vodId) {
+    let url = `https://api.twitch.tv/v5/videos/${vodId}/comments?content_offset_seconds=0`,
+        batch,
+        cursor;
+
+    let comments = null;
+
+    try {
+        do {
+            batch = (await Axios.get(url, {
+                headers: {
+                    'Client-ID': clientID,
+                    Accept: 'application/vnd.twitchtv.v5+json; charset=UTF-8',
+                    'Content-Type': 'application/json; charset=UTF-8',
+                }
+            })).data;
+
+            const str = batch.comments.map(c => {
+                let {
+                        created_at: msgCreated,
+                        content_offset_seconds: timestamp,
+                        commenter: {
+                            name,
+                            _id,
+                            created_at: acctCreated
+                        },
+                        message: {
+                            body: msg,
+                            user_color: user_color
+                        }
+                    } = c;
+
+                const timestamp_str = moment.duration(timestamp, 'seconds')
+                    .toISOString()
+                    .replace(/P.*?T(?:(\d+?)H)?(?:(\d+?)M)?(?:(\d+).*?S)?/,
+                        (_, ...ms) => {
+                            const seg = v => v ? v.padStart(2, '0') : '00';
+                            return `${seg(ms[0])}:${seg(ms[1])}:${seg(ms[2])}`;
+                        });
+
+                acctCreated = moment(acctCreated).utc();
+                msgCreated = moment(msgCreated).utc();
+
+                if (!comments) comments = [];
+
+                comments.push({
+                    timestamp: timestamp,
+                    timestamp_str: timestamp_str,
+                    name: name,
+                    message: msg,
+                    user_color: user_color
+                });
+                // let line = `${timestamp},${msgCreated.format(tsFormat)},${name},${_id},"${msg.replace(/"/g, '""')}",${acctCreated.format(tsFormat)}`;
+                // return line;
+            }).join('\n');
+
+            cursor = batch._next;
+            url = `https://api.twitch.tv/v5/videos/${vodId}/comments?cursor=${cursor}`;
+            await new Promise(res => setTimeout(res, 300));
+        } while (cursor);
+    } catch (err) {
+        console.error(err);
+    }
+
+    return comments;
+}
+
+async function getTwitchChatByFileID(id, type, user_uid, uuid, sub) {
+    let file_path = null;
+
+    if (user_uid) {
+        if (sub) {
+            file_path = path.join('users', user_uid, 'subscriptions', sub.isPlaylist ? 'playlists' : 'channels', sub.name, id + '.twitch_chat.json');
+        } else {
+            file_path = path.join('users', user_uid, type, id + '.twitch_chat.json');
+        }
+    } else {
+        if (sub) {
+            file_path = path.join('subscriptions', sub.isPlaylist ? 'playlists' : 'channels', sub.name, id + '.twitch_chat.json');
+        } else {
+            file_path = path.join(type, id + '.twitch_chat.json');
+        }
+    }
+
+    var chat_file = null;
+    if (fs.existsSync(file_path)) {
+        chat_file = fs.readJSONSync(file_path);
+    }
+
+    return chat_file;
+}
+
+async function downloadTwitchChatByVODID(vodId, id, type, user_uid, sub) {
+    const twitch_api_key = config_api.getConfigItem('ytdl_twitch_api_key');
+    const chat = await getCommentsForVOD(twitch_api_key, vodId);
+
+    // save file if needed params are included
+    let file_path = null;
+    if (user_uid) {
+        if (sub) {
+            file_path = path.join('users', user_uid, 'subscriptions', sub.isPlaylist ? 'playlists' : 'channels', sub.name, id + '.twitch_chat.json');
+        } else {
+            file_path = path.join('users', user_uid, type, id + '.twitch_chat.json');
+        }
+    } else {
+        if (sub) {
+            file_path = path.join('subscriptions', sub.isPlaylist ? 'playlists' : 'channels', sub.name, id + '.twitch_chat.json');
+        } else {
+            file_path = path.join(type, id + '.twitch_chat.json');
+        }
+    }
+
+    if (chat) fs.writeJSONSync(file_path, chat);
+
+    return chat;
+}
+
+module.exports = {
+    getCommentsForVOD: getCommentsForVOD,
+    getTwitchChatByFileID: getTwitchChatByFileID,
+    downloadTwitchChatByVODID: downloadTwitchChatByVODID
+}

backend/utils.js

@@ -20,7 +20,7 @@ function getTrueFileName(unfixed_path, type) {
     return fixed_path;
 }
 
-async function getDownloadedFilesByType(basePath, type) {
+async function getDownloadedFilesByType(basePath, type, full_metadata = false) {
     // return empty array if the path doesn't exist
     if (!(await fs.pathExists(basePath))) return [];
 
@@ -36,18 +36,17 @@ async function getDownloadedFilesByType(basePath, type) {
         var id = file_path.substring(0, file_path.length-4);
         var jsonobj = await getJSONByType(type, id, basePath);
         if (!jsonobj) continue;
-        var title = jsonobj.title;
-        var url = jsonobj.webpage_url;
-        var uploader = jsonobj.uploader;
+        if (full_metadata) {
+            jsonobj['id'] = id;
+            files.push(jsonobj);
+            continue;
+        }
         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)}` : null;
-        var thumbnail = jsonobj.thumbnail;
-        var duration = jsonobj.duration;
-
-        var size = stats.size;
 
         var isaudio = type === 'audio';
-        var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file, upload_date);
+        var file_obj = new File(id, jsonobj.title, jsonobj.thumbnail, isaudio, jsonobj.duration, jsonobj.webpage_url, jsonobj.uploader,
+                                stats.size, file, upload_date, jsonobj.description, jsonobj.view_count, jsonobj.height, jsonobj.abr);
         files.push(file_obj);
     }
     return files;
@@ -106,19 +105,26 @@ function getDownloadedThumbnail(name, type, customPath = null) {
         return null;
 }
 
-function getExpectedFileSize(info_json) {
-    if (info_json['filesize']) {
-        return info_json['filesize'];
-    }
+function getExpectedFileSize(input_info_jsons) {
+    // treat single videos as arrays to have the file sizes checked/added to. makes the code cleaner
+    const info_jsons = Array.isArray(input_info_jsons) ? input_info_jsons : [input_info_jsons];
 
-    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;
-            }
+    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 => {
+            info_json.formats.forEach(available_format => {
+                if (available_format.format_id === format_id && available_format.filesize) {
+                    individual_expected_filesize += available_format.filesize;
+                }
+            });
         });
+        expected_filesize += individual_expected_filesize;
     });
 
     return expected_filesize;
@@ -181,9 +187,15 @@ async function recFindByExt(base,ext,files,result)
     return result
 }
 
+function removeFileExtension(filename) {
+    const filename_parts = filename.split('.');
+    filename_parts.splice(filename_parts.length - 1);
+    return filename_parts.join('.');
+}
+
 // objects
 
-function File(id, title, thumbnailURL, isAudio, duration, url, uploader, size, path, upload_date) {
+function File(id, title, thumbnailURL, isAudio, duration, url, uploader, size, path, upload_date, description, view_count, height, abr) {
     this.id = id;
     this.title = title;
     this.thumbnailURL = thumbnailURL;
@@ -194,6 +206,10 @@ function File(id, title, thumbnailURL, isAudio, duration, url, uploader, size, p
     this.size = size;
     this.path = path;
     this.upload_date = upload_date;
+    this.description = description;
+    this.view_count = view_count;
+    this.height = height;
+    this.abr = abr;
 }
 
 module.exports = {
@@ -206,5 +222,6 @@ module.exports = {
     deleteJSONFile: deleteJSONFile,
     getDownloadedFilesByType: getDownloadedFilesByType,
     recFindByExt: recFindByExt,
+    removeFileExtension: removeFileExtension,
     File: File
 }

chrome-extension/background.js

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

chrome-extension/manifest.json

@@ -1,17 +1,17 @@
 {
     "manifest_version": 2,
     "name": "YoutubeDL-Material",
-    "version": "0.3",
+    "version": "0.4",
     "description": "The Official Firefox & Chrome Extension of YoutubeDL-Material, an open-source and self-hosted YouTube downloader.",
-    "background": {
-        "scripts": ["background.js"]
-    },
     "browser_action": {
-        "default_icon": "favicon.png"
+        "default_icon": "favicon.png",
+        "default_popup": "popup.html",
+        "default_title": "YoutubeDL-Material"
     },
     "permissions": [
         "tabs",
-        "storage"
+        "storage",
+        "contextMenus"
     ],
     "options_ui": {
         "page": "options.html",

chrome-extension/popup.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- Scripts -->
+    <script src="js/jquery-3.4.1.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    
+    <!-- Cascading Style Sheets -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+</head>
+<body>
+
+<div style="width: 400px; margin: 0 auto;">
+    <div style="margin: 10px;">
+        <div class="checkbox">
+            <label>
+                <input type="checkbox" id="audio_only">
+                Audio only
+            </label>
+        </div>
+
+        <div class="input-group mb-3">
+            <input id="url_input" type="text" class="form-control" placeholder="URL" aria-label="URL" aria-describedby="basic-addon2">
+            <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" id="download">Download</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="popup.js"></script>
+
+</body>
+</html>

chrome-extension/popup.js

@@ -0,0 +1,50 @@
+function audioOnlyClicked() {
+    console.log('audio only clicked');
+    var audio_only = document.getElementById("audio_only").checked;
+
+    // save state
+
+    chrome.storage.sync.set({
+        audio_only: audio_only
+    }, function() {});
+}
+
+function downloadVideo() {
+    var input_url = document.getElementById("url_input").value
+    // get the frontend_url
+    chrome.storage.sync.get({
+        frontend_url: 'http://localhost',
+        audio_only: false
+    }, function(items) {
+        var download_url = items.frontend_url + '/#/home;url=' + encodeURIComponent(input_url) + ';audioOnly=' + items.audio_only;
+        chrome.tabs.create({ url: download_url });
+    });
+}
+
+function loadInputs() {
+    // load audio-only input
+    chrome.storage.sync.get({
+        frontend_url: 'http://localhost',
+        audio_only: false
+    }, function(items) {
+        document.getElementById("audio_only").checked = items.audio_only;
+    });
+    
+    // load url input
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+        var activeTab = tabs[0];
+        var current_url = activeTab.url;
+        console.log(current_url);
+        if (current_url && current_url.includes('youtube.com')) {
+            document.getElementById("url_input").value = current_url;
+        }
+    });
+}
+
+document.getElementById('download').addEventListener('click',
+      downloadVideo);
+
+document.getElementById('audio_only').addEventListener('click',
+      audioOnlyClicked);
+
+document.addEventListener('DOMContentLoaded', loadInputs);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youtube-dl-material",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -18,19 +18,20 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^9.0.6",
-    "@angular/animations": "^9.1.0",
-    "@angular/cdk": "^9.2.0",
-    "@angular/common": "^9.1.0",
-    "@angular/compiler": "^9.1.0",
-    "@angular/core": "^9.0.7",
-    "@angular/forms": "^9.1.0",
-    "@angular/localize": "^9.1.0",
-    "@angular/material": "^9.2.0",
-    "@angular/platform-browser": "^9.1.0",
-    "@angular/platform-browser-dynamic": "^9.1.0",
-    "@angular/router": "^9.1.0",
+    "@angular-devkit/core": "^11.0.4",
+    "@angular/animations": "^11.0.4",
+    "@angular/cdk": "^11.0.2",
+    "@angular/common": "^11.0.4",
+    "@angular/compiler": "^11.0.4",
+    "@angular/core": "^11.0.4",
+    "@angular/forms": "^11.0.4",
+    "@angular/localize": "^11.0.4",
+    "@angular/material": "^11.0.2",
+    "@angular/platform-browser": "^11.0.4",
+    "@angular/platform-browser-dynamic": "^11.0.4",
+    "@angular/router": "^11.0.4",
     "@ngneat/content-loader": "^5.0.0",
+    "@videogular/ngx-videogular": "^2.1.0",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
     "filesize": "^6.1.0",
@@ -39,35 +40,34 @@
     "ng-lazyload-image": "^7.0.1",
     "ngx-avatar": "^4.0.0",
     "ngx-file-drop": "^9.0.1",
-    "ngx-videogular": "^9.0.1",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.6.3",
     "rxjs-compat": "^6.0.0-rc.0",
-    "tslib": "^1.10.0",
-    "typescript": "~3.7.5",
+    "tslib": "^2.0.0",
+    "typescript": "~4.0.5",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.0",
-    "@angular/cli": "^9.0.7",
-    "@angular/compiler-cli": "^9.0.7",
-    "@angular/language-service": "^9.0.7",
+    "@angular-devkit/build-angular": "^0.1100.4",
+    "@angular/cli": "^11.0.4",
+    "@angular/compiler-cli": "^11.0.4",
+    "@angular/language-service": "^11.0.4",
     "@types/core-js": "^2.5.2",
     "@types/file-saver": "^2.0.1",
-    "@types/jasmine": "2.5.45",
+    "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
+    "codelyzer": "^6.0.0",
     "electron": "^8.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "~3.0.4",
-    "tslint": "~5.3.2"
+    "tslint": "~6.1.0"
   }
 }

src/app/app-routing.module.ts

@@ -19,7 +19,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.spec.ts

@@ -1,9 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
@@ -11,19 +11,19 @@ describe('AppComponent', () => {
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'app'`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('app');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a h1 tag', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

src/app/app.module.ts

@@ -32,14 +32,17 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
 import { FileCardComponent } from './file-card/file-card.component';
 import { RouterModule } from '@angular/router';
 import { AppRoutingModule } from './app-routing.module';
 import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
-import { VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule } from 'ngx-videogular';
+import { VgControlsModule } from '@videogular/ngx-videogular/controls';
+import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
+import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
+import { VgCoreModule } from '@videogular/ngx-videogular/core';
 import { InputDialogComponent } from './input-dialog/input-dialog.component';
 import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image';
 import { audioFilesMouseHovering, videoFilesMouseHovering, audioFilesOpened, videoFilesOpened } from './main/main.component';
@@ -80,6 +83,9 @@ import { RecentVideosComponent } from './components/recent-videos/recent-videos.
 import { EditSubscriptionDialogComponent } from './dialogs/edit-subscription-dialog/edit-subscription-dialog.component';
 import { CustomPlaylistsComponent } from './components/custom-playlists/custom-playlists.component';
 import { EditCategoryDialogComponent } from './dialogs/edit-category-dialog/edit-category-dialog.component';
+import { TwitchChatComponent } from './components/twitch-chat/twitch-chat.component';
+import { LinkifyPipe, SeeMoreComponent } from './components/see-more/see-more.component';
+import { H401Interceptor } from './http.interceptor';
 
 registerLocaleData(es, 'es');
 
@@ -106,6 +112,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     VideoInfoDialogComponent,
     ArgModifierDialogComponent,
     HighlightPipe,
+    LinkifyPipe,
     UpdaterComponent,
     UpdateProgressDialogComponent,
     ShareMediaDialogComponent,
@@ -125,7 +132,9 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     RecentVideosComponent,
     EditSubscriptionDialogComponent,
     CustomPlaylistsComponent,
-    EditCategoryDialogComponent
+    EditCategoryDialogComponent,
+    TwitchChatComponent,
+    SeeMoreComponent
   ],
   imports: [
     CommonModule,
@@ -183,10 +192,12 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     SettingsComponent
   ],
   providers: [
-    PostsService
+    PostsService,
+    { provide: HTTP_INTERCEPTORS, useClass: H401Interceptor, multi: true }
   ],
   exports: [
-    HighlightPipe
+    HighlightPipe,
+    LinkifyPipe
   ],
   bootstrap: [AppComponent]
 })

src/app/components/custom-playlists/custom-playlists.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { CustomPlaylistsComponent } from './custom-playlists.component';
 
@@ -6,7 +6,7 @@ describe('CustomPlaylistsComponent', () => {
   let component: CustomPlaylistsComponent;
   let fixture: ComponentFixture<CustomPlaylistsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ CustomPlaylistsComponent ]
     })

src/app/components/custom-playlists/custom-playlists.component.ts

@@ -62,7 +62,7 @@ export class CustomPlaylistsComponent implements OnInit {
       } else {
         localStorage.setItem('player_navigator', this.router.url);
         const fileNames = playlist.fileNames;
-        this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID, uid: playlistID}]);
+        this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID, uid: playlistID, auto: playlist.auto}]);
       }
     } else {
       // playlist not found

src/app/components/downloads/downloads.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DownloadsComponent } from './downloads.component';
 
@@ -6,7 +6,7 @@ describe('DownloadsComponent', () => {
   let component: DownloadsComponent;
   let fixture: ComponentFixture<DownloadsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ DownloadsComponent ]
     })

src/app/components/login/login.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { LoginComponent } from './login.component';
 
@@ -6,7 +6,7 @@ describe('LoginComponent', () => {
   let component: LoginComponent;
   let fixture: ComponentFixture<LoginComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ LoginComponent ]
     })

src/app/components/login/login.component.ts

@@ -27,7 +27,7 @@ export class LoginComponent implements OnInit {
   constructor(private postsService: PostsService, private snackBar: MatSnackBar, private router: Router) { }
 
   ngOnInit(): void {
-    if (this.postsService.isLoggedIn) {
+    if (this.postsService.isLoggedIn && localStorage.getItem('jwt_token') !== 'null') {
       this.router.navigate(['/home']);
     }
     this.postsService.service_initialized.subscribe(init => {

src/app/components/logs-viewer/logs-viewer.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { LogsViewerComponent } from './logs-viewer.component';
 
@@ -6,7 +6,7 @@ describe('LogsViewerComponent', () => {
   let component: LogsViewerComponent;
   let fixture: ComponentFixture<LogsViewerComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ LogsViewerComponent ]
     })

src/app/components/manage-role/manage-role.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ManageRoleComponent } from './manage-role.component';
 
@@ -6,7 +6,7 @@ describe('ManageRoleComponent', () => {
   let component: ManageRoleComponent;
   let fixture: ComponentFixture<ManageRoleComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ManageRoleComponent ]
     })

src/app/components/manage-user/manage-user.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ManageUserComponent } from './manage-user.component';
 
@@ -6,7 +6,7 @@ describe('ManageUserComponent', () => {
   let component: ManageUserComponent;
   let fixture: ComponentFixture<ManageUserComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ManageUserComponent ]
     })

src/app/components/modify-users/modify-users.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ModifyUsersComponent } from './modify-users.component';
 
@@ -6,7 +6,7 @@ describe('ModifyUsersComponent', () => {
   let component: ModifyUsersComponent;
   let fixture: ComponentFixture<ModifyUsersComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ModifyUsersComponent ]
     })

src/app/components/recent-videos/recent-videos.component.html

@@ -30,9 +30,12 @@
 <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 d-flex justify-content-center" [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" [locale]="postsService.locale" (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>
+            <ng-container *ngIf="normal_files_received && paged_data">
+                <div *ngFor="let file of paged_data; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [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" [locale]="postsService.locale" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? '?jwt=' + this.postsService.token : ''"></app-unified-file-card>
+                </div>
+                <div *ngIf="filtered_files.length === 0">
+                    <ng-container i18n="No videos found">No videos found.</ng-container>
                 </div>
             </ng-container>
             <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
@@ -42,4 +45,9 @@
             </ng-container>
         </div>
     </div>
+
+    <mat-paginator class="paginator" #paginator *ngIf="filtered_files && filtered_files.length > 0" (page)="pageChangeEvent($event)" [length]="filtered_files.length"
+              [pageSize]="pageSize"
+              [pageSizeOptions]="[5, 10, 25, 100, this.paged_data && this.paged_data.length > 100 ? this.paged_data.length : 250]">
+    </mat-paginator>
 </div>

src/app/components/recent-videos/recent-videos.component.scss

@@ -47,6 +47,10 @@
     top: 10px;
 }
 
+.paginator {
+    margin-top: 5px;
+}
+
 .my-videos-title {
     text-align: center;
     position: relative;

src/app/components/recent-videos/recent-videos.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { RecentVideosComponent } from './recent-videos.component';
 
@@ -6,7 +6,7 @@ describe('RecentVideosComponent', () => {
   let component: RecentVideosComponent;
   let fixture: ComponentFixture<RecentVideosComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ RecentVideosComponent ]
     })

src/app/components/recent-videos/recent-videos.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { Router } from '@angular/router';
+import { MatPaginator } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-recent-videos',
@@ -50,10 +51,16 @@ export class RecentVideosComponent implements OnInit {
   };
   filterProperty = this.filterProperties['upload_date'];
 
+  pageSize = 10;
+  paged_data = null;
+
+  @ViewChild('paginator') paginator: MatPaginator
+
   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.cached_file_count = +localStorage.getItem('cached_file_count') <= 10 ? +localStorage.getItem('cached_file_count') : 10;
+      
       this.loading_files = Array(this.cached_file_count).fill(0);
     }
   }
@@ -91,7 +98,8 @@ export class RecentVideosComponent implements OnInit {
 
   private filterFiles(value: string) {
     const filterValue = value.toLowerCase();
-    this.filtered_files = this.files.filter(option => option.id.toLowerCase().includes(filterValue));
+    this.filtered_files = this.files.filter(option => option.id.toLowerCase().includes(filterValue) || option.category?.name?.toLowerCase().includes(filterValue));
+    this.pageChangeEvent({pageSize: this.pageSize, pageIndex: this.paginator.pageIndex});
   }
 
   filterByProperty(prop) {
@@ -100,6 +108,7 @@ export class RecentVideosComponent implements OnInit {
     } else {
       this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? 1 : -1));
     }
+    if (this.paginator) { this.pageChangeEvent({pageSize: this.pageSize, pageIndex: this.paginator.pageIndex}) };
   }
 
   filterOptionChanged(value) {
@@ -118,10 +127,11 @@ export class RecentVideosComponent implements OnInit {
     this.normal_files_received = false;
     this.postsService.getAllFiles().subscribe(res => {
       this.files = res['files'];
-      this.files.forEach(file => {
-        file.duration = typeof file.duration !== 'string' ? file.duration : this.durationStringToNumber(file.duration);
-      });
       this.files.sort(this.sortFiles);
+      for (let i = 0; i < this.files.length; i++) {
+        const file = this.files[i];
+        file.duration = typeof file.duration !== 'string' ? file.duration : this.durationStringToNumber(file.duration);
+      }
       if (this.search_mode) {
         this.filterFiles(this.search_text);
       } else {
@@ -133,6 +143,8 @@ export class RecentVideosComponent implements OnInit {
       localStorage.setItem('cached_file_count', '' + this.files.length);
 
       this.normal_files_received = true;
+
+      this.paged_data = this.filtered_files.slice(0, 10);
     });
   }
 
@@ -226,17 +238,17 @@ export class RecentVideosComponent implements OnInit {
     const blacklistMode = args.blacklistMode;
 
     if (file.sub_id) {
-      this.deleteSubscriptionFile(file, index, blacklistMode);
+      this.deleteSubscriptionFile(file, blacklistMode);
     } else {
-      this.deleteNormalFile(file, index, blacklistMode);
+      this.deleteNormalFile(file, blacklistMode);
     }
   }
 
-  deleteNormalFile(file, index, blacklistMode = false) {
+  deleteNormalFile(file, blacklistMode = false) {
     this.postsService.deleteFile(file.uid, file.isAudio ? 'audio' : 'video', blacklistMode).subscribe(result => {
       if (result) {
         this.postsService.openSnackBar('Delete success!', 'OK.');
-        this.files.splice(index, 1);
+        this.removeFileCard(file);
       } else {
         this.postsService.openSnackBar('Delete failed!', 'OK.');
       }
@@ -245,30 +257,39 @@ export class RecentVideosComponent implements OnInit {
     });
   }
 
-  deleteSubscriptionFile(file, index, blacklistMode = false) {
+  deleteSubscriptionFile(file, blacklistMode = false) {
     if (blacklistMode) {
-      this.deleteForever(file, index);
+      this.deleteForever(file);
     } else {
-      this.deleteAndRedownload(file, index);
+      this.deleteAndRedownload(file);
     }
   }
 
-  deleteAndRedownload(file, index) {
+  deleteAndRedownload(file) {
     const sub = this.postsService.getSubscriptionByID(file.sub_id);
     this.postsService.deleteSubscriptionFile(sub, file.id, false, file.uid).subscribe(res => {
       this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
-      this.files.splice(index, 1);
+      this.removeFileCard(file);
     });
   }
 
-  deleteForever(file, index) {
+  deleteForever(file) {
     const sub = this.postsService.getSubscriptionByID(file.sub_id);
     this.postsService.deleteSubscriptionFile(sub, file.id, true, file.uid).subscribe(res => {
       this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
-      this.files.splice(index, 1);
+      this.removeFileCard(file);
     });
   }
 
+  removeFileCard(file_to_remove) {
+    const index = this.files.map(e => e.uid).indexOf(file_to_remove.uid);
+    this.files.splice(index, 1);
+    if (this.search_mode) {
+      this.filterFiles(this.search_text);
+    }
+    this.filterByProperty(this.filterProperty['property']);
+  }
+
   // sorting and filtering
 
   sortFiles(a, b) {
@@ -276,13 +297,18 @@ export class RecentVideosComponent implements OnInit {
     const result = b.registered - a.registered;
     return result;
   }
-  
+
   durationStringToNumber(dur_str) {
     let num_sum = 0;
     const dur_str_parts = dur_str.split(':');
-    for (let i = dur_str_parts.length-1; i >= 0; i--) {
-      num_sum += parseInt(dur_str_parts[i])*(60**(dur_str_parts.length-1-i));
+    for (let i = dur_str_parts.length - 1; i >= 0; i--) {
+      num_sum += parseInt(dur_str_parts[i]) * (60 ** (dur_str_parts.length - 1 - i));
     }
     return num_sum;
   }
+
+  pageChangeEvent(event) {
+    const offset = ((event.pageIndex + 1) - 1) * event.pageSize;
+    this.paged_data = this.filtered_files.slice(offset).slice(0, event.pageSize);
+  }
 }

src/app/components/see-more/see-more.component.html

@@ -0,0 +1,11 @@
+<span class="text" [ngStyle]="{'-webkit-line-clamp': !see_more_active ? line_limit : null}" [innerHTML]="text | linkify"></span>
+<span>
+    <a [routerLink]="" (click)="toggleSeeMore()">
+        <ng-container *ngIf="!see_more_active" i18n="See more">
+            See more.
+        </ng-container>
+        <ng-container *ngIf="see_more_active" i18n="See less">
+            See less.
+        </ng-container>
+    </a>
+</span>

src/app/components/see-more/see-more.component.scss

@@ -0,0 +1,7 @@
+.text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    word-wrap: break-word;
+ }

src/app/components/see-more/see-more.component.spec.ts

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

src/app/components/see-more/see-more.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit, Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'linkify' })
+export class LinkifyPipe implements PipeTransform {
+
+  constructor(private _domSanitizer: DomSanitizer) {}
+
+  transform(value: any, args?: any): any {
+    return this._domSanitizer.bypassSecurityTrustHtml(this.stylize(value));
+  }
+
+  // Modify this method according to your custom logic
+  private stylize(text: string): string {
+    let stylizedText: string = '';
+    if (text && text.length > 0) {
+      for (let line of text.split("\n")) {
+        for (let t of line.split(" ")) {
+          if (t.startsWith("http") && t.length>7) {  
+            stylizedText += `<a target="_blank" href="${t}">${t}</a> `;
+          }
+          else
+            stylizedText += t + " ";
+        }
+        stylizedText += '<br>';
+      }
+      return stylizedText;
+    }
+    else return text;
+  }
+
+}
+
+@Component({
+  selector: 'app-see-more',
+  templateUrl: './see-more.component.html',
+  providers: [LinkifyPipe],
+  styleUrls: ['./see-more.component.scss']
+})
+export class SeeMoreComponent implements OnInit {
+
+  see_more_active = false;
+
+  @Input() text = '';
+  @Input() line_limit = 2;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  toggleSeeMore() {
+    this.see_more_active = !this.see_more_active;
+  }
+
+  parseText() {
+    return this.text.replace(/(http.*?\s)/, "<a href=\"$1\">$1</a>")
+  }
+
+}

src/app/components/twitch-chat/twitch-chat.component.html

@@ -0,0 +1,12 @@
+<div class="chat-container" #scrollContainer *ngIf="visible_chat">
+    <div style="width: 250px; text-align: center;"><strong>Twitch Chat</strong></div>
+    <div #chat style="max-width: 250px" *ngFor="let chat of visible_chat; let last = last">
+        {{chat.timestamp_str}} - <strong [style.color]="chat.user_color ? chat.user_color : null">{{chat.name}}</strong>: {{chat.message}}
+        {{last ? scrollToBottom() : ''}}
+    </div>
+</div>
+
+<ng-container *ngIf="chat_response_received && !full_chat">
+    <button [disabled]="downloading_chat" (click)="downloadTwitchChat()" class="download-button" mat-raised-button color="accent"><ng-container i18n="Download Twitch Chat button">Download Twitch Chat</ng-container></button>
+    <mat-spinner *ngIf="downloading_chat" class="downloading-spinner" [diameter]="30"></mat-spinner>
+</ng-container>

src/app/components/twitch-chat/twitch-chat.component.scss

@@ -0,0 +1,13 @@
+.chat-container {
+    height: 100%;
+    overflow-y: scroll;
+}
+
+.download-button {
+    margin: 10px;
+}
+
+.downloading-spinner {
+    top: 50%;
+    left: 80px;
+}

src/app/components/twitch-chat/twitch-chat.component.spec.ts

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

src/app/components/twitch-chat/twitch-chat.component.ts

@@ -0,0 +1,138 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-twitch-chat',
+  templateUrl: './twitch-chat.component.html',
+  styleUrls: ['./twitch-chat.component.scss']
+})
+export class TwitchChatComponent implements OnInit, AfterViewInit {
+
+  full_chat = null;
+  visible_chat = null;
+  chat_response_received = false;
+  downloading_chat = false;
+
+  current_chat_index = null;
+
+  CHAT_CHECK_INTERVAL_MS = 200;
+  chat_check_interval_obj = null;
+
+  scrollContainer = null;
+
+  @Input() db_file = null;
+  @Input() sub = null;
+  @Input() current_timestamp = null;
+
+  @ViewChild('scrollContainer') scrollRef: ElementRef;
+  @ViewChildren('chat') chat: QueryList<any>;
+
+  constructor(private postsService: PostsService) { }
+
+  ngOnInit(): void {
+    this.getFullChat();
+  }
+
+  ngAfterViewInit() {
+  }
+
+  private isUserNearBottom(): boolean {
+    const threshold = 150;
+    const position = this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight;
+    const height = this.scrollContainer.scrollHeight;
+    return position > height - threshold;
+  }
+
+  scrollToBottom = (force_scroll) => {
+    if (force_scroll || this.isUserNearBottom()) {
+      this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight;
+    }
+  }
+
+  addNewChatMessages() {
+    const next_chat_index = this.getIndexOfNextChat();
+    if (!this.scrollContainer) {
+      this.scrollContainer = this.scrollRef.nativeElement;
+    }
+    if (this.current_chat_index === null) {
+      this.current_chat_index = next_chat_index;
+    }
+
+    if (Math.abs(next_chat_index - this.current_chat_index) > 25) {
+      this.visible_chat = [];
+      this.current_chat_index = next_chat_index - 25;
+      setTimeout(() => this.scrollToBottom(true), 100);
+    }
+
+    const latest_chat_timestamp = this.visible_chat.length ? this.visible_chat[this.visible_chat.length - 1]['timestamp'] : 0;
+
+    for (let i = this.current_chat_index + 1; i < this.full_chat.length; i++) {
+      if (this.full_chat[i]['timestamp'] >= latest_chat_timestamp && this.full_chat[i]['timestamp'] <= this.current_timestamp) {
+        this.visible_chat.push(this.full_chat[i]);
+        this.current_chat_index = i;
+      } else if (this.full_chat[i]['timestamp'] > this.current_timestamp) {
+        break;
+      }
+    }
+  }
+
+  getIndexOfNextChat() {
+    const index = binarySearch(this.full_chat, 'timestamp', this.current_timestamp);
+    return index;
+  }
+
+  getFullChat() {
+    this.postsService.getFullTwitchChat(this.db_file.id, this.db_file.isAudio ? 'audio' : 'video', null, this.sub).subscribe(res => {
+      this.chat_response_received = true;
+      if (res['chat']) {
+        this.initializeChatCheck(res['chat']);
+      }
+    });
+  }
+
+  downloadTwitchChat() {
+    this.downloading_chat = true;
+    let vodId = this.db_file.url.split('videos/').length > 1 && this.db_file.url.split('videos/')[1];
+    vodId = vodId.split('?')[0];
+    if (!vodId) {
+      this.postsService.openSnackBar('VOD url for this video is not supported. VOD ID must be after "twitch.tv/videos/"');
+    }
+    this.postsService.downloadTwitchChat(this.db_file.id, this.db_file.isAudio ? 'audio' : 'video', vodId, null, this.sub).subscribe(res => {
+      if (res['chat']) {
+        this.initializeChatCheck(res['chat']);
+      } else {
+        this.downloading_chat = false;
+        this.postsService.openSnackBar('Download failed.')
+      }
+    }, err => {
+      this.downloading_chat = false;
+      this.postsService.openSnackBar('Chat could not be downloaded.')
+    });
+  }
+
+  initializeChatCheck(full_chat) {
+    this.full_chat = full_chat;
+    this.visible_chat = [];
+    this.chat_check_interval_obj = setInterval(() => this.addNewChatMessages(), this.CHAT_CHECK_INTERVAL_MS);
+  }
+
+}
+
+function binarySearch(arr, key, n) {
+  let min = 0;
+  let max = arr.length - 1;
+  let mid;
+  while (min <= max) {
+    // tslint:disable-next-line: no-bitwise
+    mid = (min + max) >>> 1;
+    if (arr[mid][key] === n) {
+      return mid;
+    } else if (arr[mid][key] < n) {
+      min = mid + 1;
+    } else {
+      max = mid - 1;
+    }
+  }
+
+  return min;
+}

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

@@ -1,5 +1,10 @@
 <div (mouseover)="elevated=true" (mouseout)="elevated=false" (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;{{file_obj.registered | date:'shortDate' : undefined : locale.ngID}}</div>
+    <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;
+        <ng-container i18n="Auto-generated label" *ngIf="file_obj.auto">Auto-generated</ng-container>
+        <ng-container *ngIf="!file_obj.auto">{{file_obj.registered | date:'shortDate' : undefined : locale.ngID}}</ng-container>
+    </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>
     <!-- The context menu trigger must be kept above the "more info" menu -->
     <div style="visibility: hidden; position: fixed"
@@ -7,7 +12,7 @@
         [style.top]="contextMenuPosition.y"
         [matMenuTriggerFor]="context_menu">
     </div>
-    <button [disabled]="loading" [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
+    <button *ngIf="!file_obj || !file_obj.auto" [disabled]="loading" [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
     <mat-menu #context_menu>
         <ng-container *ngIf="!loading">
             <button (click)="navigateToFile($event)" mat-menu-item><mat-icon>open_in_browser</mat-icon><ng-container i18n="Open file button">Open file</ng-container></button>
@@ -41,7 +46,7 @@
         <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.thumbnailBlob ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                    <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 class="duration-time">
                         {{file_length}}
                     </div>

src/app/components/unified-file-card/unified-file-card.component.scss

@@ -110,7 +110,12 @@
   position: absolute;
   top: 1px;
   left: 5px;
-  z-index: 99999;
+  z-index: 999;
+  width: calc(100% - 8px);
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
 }
 
 .audio-video-icon {

src/app/components/unified-file-card/unified-file-card.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UnifiedFileCardComponent } from './unified-file-card.component';
 
@@ -6,7 +6,7 @@ describe('UnifiedFileCardComponent', () => {
   let component: UnifiedFileCardComponent;
   let fixture: ComponentFixture<UnifiedFileCardComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ UnifiedFileCardComponent ]
     })

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

@@ -44,11 +44,13 @@ export class UnifiedFileCardComponent implements OnInit {
   @Input() is_playlist = false;
   @Input() index: number;
   @Input() locale = null;
+  @Input() baseStreamPath = null;
+  @Input() jwtString = null;
   @Output() goToFile = new EventEmitter<any>();
   @Output() goToSubscription = new EventEmitter<any>();
   @Output() deleteFile = new EventEmitter<any>();
   @Output() editPlaylist = new EventEmitter<any>();
-  
+
 
   @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
   contextMenuPosition = { x: '0px', y: '0px' };
@@ -67,11 +69,12 @@ export class UnifiedFileCardComponent implements OnInit {
       this.file_length = fancyTimeFormat(this.file_obj.duration);
     }
 
-    if (this.file_obj && this.file_obj.thumbnailBlob) {
-      const mime = getMimeByFilename(this.file_obj.thumbnailPath);
+    if (this.file_obj && this.file_obj.thumbnailPath) {
+      this.thumbnailBlobURL = `${this.baseStreamPath}thumbnail/${encodeURIComponent(this.file_obj.thumbnailPath)}${this.jwtString}`;
+      /*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.thumbnailBlobURL = this.sanitizer.bypassSecurityTrustUrl(bloburl);*/
     }
   }
 

src/app/consts.ts

@@ -1 +1 @@
-export const CURRENT_VERSION = 'v4.1';
+export const CURRENT_VERSION = 'v4.2';

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { CreatePlaylistComponent } from './create-playlist.component';
 
@@ -6,7 +6,7 @@ describe('CreatePlaylistComponent', () => {
   let component: CreatePlaylistComponent;
   let fixture: ComponentFixture<CreatePlaylistComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ CreatePlaylistComponent ]
     })

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AboutDialogComponent } from './about-dialog.component';
 
@@ -6,7 +6,7 @@ describe('AboutDialogComponent', () => {
   let component: AboutDialogComponent;
   let fixture: ComponentFixture<AboutDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ AboutDialogComponent ]
     })

src/app/dialogs/add-user-dialog/add-user-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AddUserDialogComponent } from './add-user-dialog.component';
 
@@ -6,7 +6,7 @@ describe('AddUserDialogComponent', () => {
   let component: AddUserDialogComponent;
   let fixture: ComponentFixture<AddUserDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ AddUserDialogComponent ]
     })

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ArgModifierDialogComponent } from './arg-modifier-dialog.component';
 
@@ -6,7 +6,7 @@ describe('ArgModifierDialogComponent', () => {
   let component: ArgModifierDialogComponent;
   let fixture: ComponentFixture<ArgModifierDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ArgModifierDialogComponent ]
     })

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ConfirmDialogComponent } from './confirm-dialog.component';
 
@@ -6,7 +6,7 @@ describe('ConfirmDialogComponent', () => {
   let component: ConfirmDialogComponent;
   let fixture: ComponentFixture<ConfirmDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ConfirmDialogComponent ]
     })

src/app/dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { CookiesUploaderDialogComponent } from './cookies-uploader-dialog.component';
 
@@ -6,7 +6,7 @@ describe('CookiesUploaderDialogComponent', () => {
   let component: CookiesUploaderDialogComponent;
   let fixture: ComponentFixture<CookiesUploaderDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ CookiesUploaderDialogComponent ]
     })

src/app/dialogs/edit-category-dialog/edit-category-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { EditCategoryDialogComponent } from './edit-category-dialog.component';
 
@@ -6,7 +6,7 @@ describe('EditCategoryDialogComponent', () => {
   let component: EditCategoryDialogComponent;
   let fixture: ComponentFixture<EditCategoryDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ EditCategoryDialogComponent ]
     })

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

@@ -1,8 +1,11 @@
-<h4 mat-dialog-title i18n="Edit subscription dialog title prefix">Editing</h4>&nbsp;{{sub.name}}
+<h4 mat-dialog-title><ng-container i18n="Edit subscription dialog title prefix">Editing</ng-container>&nbsp;{{sub.name}}&nbsp;<ng-container *ngIf="sub.paused" i18n="Paused suffix">(Paused)</ng-container></h4>
 
 <mat-dialog-content>
     <div class="container-fluid">
         <div class="row">
+            <div class="col-12 mt-3">
+                <mat-checkbox [(ngModel)]="new_sub.paused"><ng-container i18n="Paused subscription setting">Paused</ng-container></mat-checkbox>
+            </div>
             <div class="col-12 mt-3">
                 <mat-checkbox (change)="downloadAllToggled()" [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
             </div>
@@ -24,7 +27,14 @@
                     <mat-checkbox [disabled]="true" [(ngModel)]="audioOnlyMode"><ng-container i18n="Streaming-only mode">Audio-only mode</ng-container></mat-checkbox>
                 </div>
             </div>
-            <div class="col-12">
+            <div class="col-12 mt-2">
+                <mat-form-field>
+                    <mat-select placeholder="Max quality" i18n-placeholder="Max quality placeholder" [disabled]="new_sub.type === 'audio'" [(ngModel)]="new_sub.maxQuality">
+                        <mat-option *ngFor="let available_quality of available_qualities" [value]="available_quality['value']">{{available_quality['label']}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+            <div class="col-12 mt-1">
                 <div>
                     <mat-checkbox [disabled]="new_sub.type === 'audio'" [(ngModel)]="new_sub.streamingOnly"><ng-container i18n="Streaming-only mode">Streaming-only mode</ng-container></mat-checkbox>
                 </div>

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { EditSubscriptionDialogComponent } from './edit-subscription-dialog.component';
 
@@ -6,7 +6,7 @@ describe('EditSubscriptionDialogComponent', () => {
   let component: EditSubscriptionDialogComponent;
   let fixture: ComponentFixture<EditSubscriptionDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ EditSubscriptionDialogComponent ]
     })

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

@@ -22,6 +22,36 @@ export class EditSubscriptionDialogComponent implements OnInit {
   audioOnlyMode = null;
   download_all = null;
 
+  available_qualities = [
+    {
+      'label': 'Best',
+      'value': 'best'
+    },
+    {
+      'label': '4K',
+      'value': '2160'
+    },
+    {
+      'label': '1440p',
+      'value': '1440'
+    },
+    {
+      'label': '1080p',
+      'value': '1080'
+    },
+    {
+      'label': '720p',
+      'value': '720'
+    },
+    {
+      'label': '480p',
+      'value': '480'
+    },
+    {
+      'label': '360p',
+      'value': '360'
+    }
+  ];
 
   time_units = [
     'day',
@@ -31,24 +61,24 @@ export class EditSubscriptionDialogComponent implements OnInit {
   ];
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialog: MatDialog, private postsService: PostsService) {
-    this.sub = this.data.sub;
+    this.sub = JSON.parse(JSON.stringify(this.data.sub));
     this.new_sub = JSON.parse(JSON.stringify(this.sub));
 
+    // ignore videos to keep requests small
+    delete this.sub['videos'];
+    delete this.new_sub['videos'];
+
     this.audioOnlyMode = this.sub.type === 'audio';
     this.download_all = !this.sub.timerange;
 
     if (this.sub.timerange) {
       const timerange_str = this.sub.timerange.split('-')[1];
-      console.log(timerange_str);
       const number = timerange_str.replace(/\D/g,'');
       let units = timerange_str.replace(/[0-9]/g, '');
 
-      console.log(units);
-
-      // // remove plural on units
-      // if (units[units.length-1] === 's') {
-      //   units = units.substring(0, units.length-1);
-      // }
+      if (+number === 1) {
+        units = units.replace('s', '');
+      }
 
       this.timerange_amount = parseInt(number);
       this.timerange_unit = units;
@@ -71,9 +101,10 @@ export class EditSubscriptionDialogComponent implements OnInit {
   }
 
   saveSubscription() {
-    this.postsService.updateSubscription(this.sub).subscribe(res => {
+    this.postsService.updateSubscription(this.new_sub).subscribe(res => {
       this.sub = this.new_sub;
       this.new_sub = JSON.parse(JSON.stringify(this.sub));
+      this.postsService.reloadSubscriptions();
     })
   }
 
@@ -85,12 +116,16 @@ export class EditSubscriptionDialogComponent implements OnInit {
   }
 
   timerangeChanged(value, select_changed) {
-    console.log(this.timerange_amount);
-    console.log(this.timerange_unit);
+    if (+this.timerange_amount === 1) {
+      this.timerange_unit = this.timerange_unit.replace('s', '');
+    } else {
+      if (!this.timerange_unit.includes('s')) {
+        this.timerange_unit += 's';
+      }
+    }
 
     if (this.timerange_amount && this.timerange_unit && !this.download_all) {
       this.new_sub.timerange = 'now-' + this.timerange_amount.toString() + this.timerange_unit;
-      console.log(this.new_sub.timerange);
     } else {
       this.new_sub.timerange = null;
     }

src/app/dialogs/modify-playlist/modify-playlist.component.html

@@ -8,14 +8,24 @@
         </mat-form-field>
     </div>
 
+    <div style="margin-bottom: 10px; height: 40px;">
+        <div style="float: left">
+            <span *ngIf="reverse_order === false" i18n="Normal order">Normal order&nbsp;</span>
+            <span *ngIf="reverse_order === true" i18n="Reverse order">Reverse order&nbsp;</span>
+            <button (click)="togglePlaylistOrder()" mat-icon-button><mat-icon>{{!reverse_order ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+        </div>
+
+        <div style="float: right">
+            <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu"><ng-container i18n="Add content">Add content</ng-container></button>
+        </div>
+    </div>
+
     <!-- Playlist order -->
     <mat-button-toggle-group class="media-list" cdkDropList (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-        <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of playlist.fileNames; let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
+        <!-- The following for loop can be optimized but it requires a pipe https://stackoverflow.com/a/35703364/8088021 -->
+        <mat-button-toggle class="media-box" cdkDrag *ngFor="let playlist_item of (reverse_order ? playlist.fileNames.slice().reverse() : playlist.fileNames); let i = index" [checked]="false"><div><div class="playlist-item-text">{{playlist_item}}</div> <button (click)="removeContent(i)" class="remove-item-button" mat-icon-button><mat-icon>cancel</mat-icon></button></div></mat-button-toggle>
     </mat-button-toggle-group>
-
-    <div class="add-content-button">
-        <button [disabled]="available_files.length === 0" mat-stroked-button [matMenuTriggerFor]="menu"><ng-container i18n="Add more content">Add more content</ng-container></button>
-    </div>
+    
     <mat-menu #menu="matMenu">
         <button *ngFor="let file of available_files" (click)="addContent(file)" mat-menu-item>{{file}}</button>
     </mat-menu>

src/app/dialogs/modify-playlist/modify-playlist.component.scss

@@ -30,11 +30,6 @@ border: none;
 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.add-content-button {
-margin-top: 15px;
-margin-bottom: 10px;
-}
-
 .remove-item-button {
     right: 10px;
     position: absolute;

src/app/dialogs/modify-playlist/modify-playlist.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ModifyPlaylistComponent } from './modify-playlist.component';
 
@@ -6,7 +6,7 @@ describe('ModifyPlaylistComponent', () => {
   let component: ModifyPlaylistComponent;
   let fixture: ComponentFixture<ModifyPlaylistComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ModifyPlaylistComponent ]
     })

src/app/dialogs/modify-playlist/modify-playlist.component.ts

@@ -15,6 +15,7 @@ export class ModifyPlaylistComponent implements OnInit {
   available_files = [];
   all_files = [];
   playlist_updated = false;
+  reverse_order = false;
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: any,
               private postsService: PostsService,
@@ -26,6 +27,8 @@ export class ModifyPlaylistComponent implements OnInit {
       this.original_playlist = JSON.parse(JSON.stringify(this.data.playlist));
       this.getFiles();
     }
+
+    this.reverse_order = localStorage.getItem('default_playlist_order_reversed') === 'true';
   }
 
   getFiles() {
@@ -72,11 +75,23 @@ export class ModifyPlaylistComponent implements OnInit {
   }
 
   removeContent(index) {
+    if (this.reverse_order) {
+      index = this.playlist.fileNames.length - 1 - index;
+    }
     this.playlist.fileNames.splice(index, 1);
     this.processFiles();
   }
 
+  togglePlaylistOrder() {
+    this.reverse_order = !this.reverse_order;
+    localStorage.setItem('default_playlist_order_reversed', '' + this.reverse_order);
+  }
+
   drop(event: CdkDragDrop<string[]>) {
+    if (this.reverse_order) {
+      event.previousIndex = this.playlist.fileNames.length - 1 - event.previousIndex;
+      event.currentIndex = this.playlist.fileNames.length - 1 - event.currentIndex;
+    }
     moveItemInArray(this.playlist.fileNames, event.previousIndex, event.currentIndex);
   }
 

src/app/dialogs/set-default-admin-dialog/set-default-admin-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SetDefaultAdminDialogComponent } from './set-default-admin-dialog.component';
 
@@ -6,7 +6,7 @@ describe('SetDefaultAdminDialogComponent', () => {
   let component: SetDefaultAdminDialogComponent;
   let fixture: ComponentFixture<SetDefaultAdminDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SetDefaultAdminDialogComponent ]
     })

src/app/dialogs/share-media-dialog/share-media-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ShareMediaDialogComponent } from './share-media-dialog.component';
 
@@ -6,7 +6,7 @@ describe('ShareMediaDialogComponent', () => {
   let component: ShareMediaDialogComponent;
   let fixture: ComponentFixture<ShareMediaDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ShareMediaDialogComponent ]
     })

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

@@ -35,6 +35,13 @@
                     </mat-select>
                 </mat-form-field>
             </div>
+            <div class="col-12 mt-2">
+                <mat-form-field>
+                    <mat-select placeholder="Max quality" i18n-placeholder="Max quality placeholder" [disabled]="audioOnlyMode" [(ngModel)]="maxQuality">
+                        <mat-option *ngFor="let available_quality of available_qualities" [value]="available_quality['value']">{{available_quality['label']}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
             <div class="col-12">
                 <div>
                     <mat-checkbox [(ngModel)]="audioOnlyMode"><ng-container i18n="Streaming-only mode">Audio-only mode</ng-container></mat-checkbox>

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SubscribeDialogComponent } from './subscribe-dialog.component';
 
@@ -6,7 +6,7 @@ describe('SubscribeDialogComponent', () => {
   let component: SubscribeDialogComponent;
   let fixture: ComponentFixture<SubscribeDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SubscribeDialogComponent ]
     })

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

@@ -17,6 +17,8 @@ export class SubscribeDialogComponent implements OnInit {
   url = null;
   name = null;
 
+  maxQuality = 'best';
+
   // state
   subscribing = false;
 
@@ -29,12 +31,43 @@ export class SubscribeDialogComponent implements OnInit {
   customFileOutput = '';
   customArgs = '';
 
+  available_qualities = [
+    {
+      'label': 'Best',
+      'value': 'best'
+    },
+    {
+      'label': '4K',
+      'value': '2160'
+    },
+    {
+      'label': '1440p',
+      'value': '1440'
+    },
+    {
+      'label': '1080p',
+      'value': '1080'
+    },
+    {
+      'label': '720p',
+      'value': '720'
+    },
+    {
+      'label': '480p',
+      'value': '480'
+    },
+    {
+      'label': '360p',
+      'value': '360'
+    }
+  ];
+
   time_units = [
     'day',
     'week',
     'month',
     'year'
-  ]
+  ];
 
   constructor(private postsService: PostsService,
               private snackBar: MatSnackBar,
@@ -57,7 +90,7 @@ export class SubscribeDialogComponent implements OnInit {
       if (!this.download_all) {
         timerange = 'now-' + this.timerange_amount.toString() + this.timerange_unit;
       }
-      this.postsService.createSubscription(this.url, this.name, timerange, this.streamingOnlyMode,
+      this.postsService.createSubscription(this.url, this.name, timerange, this.streamingOnlyMode, this.maxQuality,
                                           this.audioOnlyMode, this.customArgs, this.customFileOutput).subscribe(res => {
         this.subscribing = false;
         if (res['new_sub']) {

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

@@ -1,4 +1,4 @@
-<h4 mat-dialog-title>{{sub.name}}</h4>
+<h4 mat-dialog-title>{{sub.name}}&nbsp;<ng-container *ngIf="sub.paused" i18n="Paused suffix">(Paused)</ng-container></h4>
 
 <mat-dialog-content>
     <div class="info-item">

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SubscriptionInfoDialogComponent } from './subscription-info-dialog.component';
 
@@ -6,7 +6,7 @@ describe('SubscriptionInfoDialogComponent', () => {
   let component: SubscriptionInfoDialogComponent;
   let fixture: ComponentFixture<SubscriptionInfoDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SubscriptionInfoDialogComponent ]
     })

src/app/dialogs/update-progress-dialog/update-progress-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UpdateProgressDialogComponent } from './update-progress-dialog.component';
 
@@ -6,7 +6,7 @@ describe('UpdateProgressDialogComponent', () => {
   let component: UpdateProgressDialogComponent;
   let fixture: ComponentFixture<UpdateProgressDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ UpdateProgressDialogComponent ]
     })

src/app/dialogs/user-profile-dialog/user-profile-dialog.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UserProfileDialogComponent } from './user-profile-dialog.component';
 
@@ -6,7 +6,7 @@ describe('UserProfileDialogComponent', () => {
   let component: UserProfileDialogComponent;
   let fixture: ComponentFixture<UserProfileDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ UserProfileDialogComponent ]
     })

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

@@ -25,6 +25,10 @@
         <div class="info-item-label"><strong><ng-container i18n="Video upload date property">Upload Date:</ng-container>&nbsp;</strong></div>
         <div class="info-item-value">{{file.upload_date ? file.upload_date : 'N/A'}}</div>
     </div>
+    <div class="info-item">
+        <div class="info-item-label"><strong><ng-container i18n="Category property">Category:</ng-container>&nbsp;</strong></div>
+        <div class="info-item-value"><ng-container *ngIf="file.category"><mat-chip-list><mat-chip>{{file.category.name}}</mat-chip></mat-chip-list></ng-container><ng-container *ngIf="!file.category">N/A</ng-container></div>
+    </div>
 </mat-dialog-content>
 
 <mat-dialog-actions>

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { VideoInfoDialogComponent } from './video-info-dialog.component';
 
@@ -6,7 +6,7 @@ describe('VideoInfoDialogComponent', () => {
   let component: VideoInfoDialogComponent;
   let fixture: ComponentFixture<VideoInfoDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ VideoInfoDialogComponent ]
     })

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DownloadItemComponent } from './download-item.component';
 
@@ -6,7 +6,7 @@ describe('DownloadItemComponent', () => {
   let component: DownloadItemComponent;
   let fixture: ComponentFixture<DownloadItemComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ DownloadItemComponent ]
     })

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FileCardComponent } from './file-card.component';
 
@@ -6,7 +6,7 @@ describe('FileCardComponent', () => {
   let component: FileCardComponent;
   let fixture: ComponentFixture<FileCardComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ FileCardComponent ]
     })

src/app/http.interceptor.ts

@@ -0,0 +1,34 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+@Injectable()
+export class H401Interceptor implements HttpInterceptor {
+
+    constructor(private router: Router, private snackBar: MatSnackBar) { }
+
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        return next.handle(request).pipe(catchError(err => {
+            if (err.status === 401) {
+                localStorage.setItem('jwt_token', null);
+                if (this.router.url !== '/login') {
+                    this.router.navigate(['/login']).then(() => {
+                        this.openSnackBar('Login expired, please login again.');
+                    });
+                }
+            }
+
+            const error = err.error.message || err.statusText;
+            return throwError(error);
+        }));
+    }
+
+    public openSnackBar(message: string, action: string = '') {
+        this.snackBar.open(message, action, {
+          duration: 2000,
+        });
+      }
+}

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { InputDialogComponent } from './input-dialog.component';
 
@@ -6,7 +6,7 @@ describe('InputDialogComponent', () => {
   let component: InputDialogComponent;
   let fixture: ComponentFixture<InputDialogComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ InputDialogComponent ]
     })

src/app/main/main.component.html

@@ -182,97 +182,8 @@
 </ng-template>
 
 <ng-container *ngIf="cachedFileManagerEnabled || fileManagerEnabled">
-    <app-recent-videos></app-recent-videos>
+    <app-recent-videos #recentVideos></app-recent-videos>
     <br/>
     <h4 style="text-align: center">Custom playlists</h4>
     <app-custom-playlists></app-custom-playlists>
 </ng-container>
-
-<!--<div style="margin: 20px" *ngIf="fileManagerEnabled && (!postsService.isLoggedIn || postsService.permissions.includes('filemanager'))">
-    <mat-accordion>
-        <mat-expansion-panel (opened)="accordionOpened('audio')" (closed)="accordionClosed('audio')" (mouseleave)="accordionLeft('audio')" (mouseenter)="accordionEntered('audio')" class="big">
-            <mat-expansion-panel-header>
-                <mat-panel-title>
-                    <ng-container i18n="Audio files title">
-                        Audio
-                    </ng-container>
-                </mat-panel-title>
-                <mat-panel-description>
-                    <ng-container i18n="Audio files description">
-                        Your audio files are here
-                    </ng-container>
-                </mat-panel-description>
-            </mat-expansion-panel-header>
-            <div *ngIf="mp3s.length > 0;else nomp3s">
-                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
-                    <mat-grid-tile *ngFor="let file of mp3s; index as i;">
-                        <app-file-card #audiofilecard (removeFile)="removeFromMp3($event)" [file]="file" [title]="file.title" [name]="file.id" [uid]="file.uid" [thumbnailURL]="file.thumbnailURL"
-                                [length]="file.duration" [isAudio]="true" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
-                        <mat-progress-bar *ngIf="downloading_content['audio'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
-                    </mat-grid-tile>
-                </mat-grid-list>
-                <mat-divider></mat-divider>
-                <div style="width: 100%; text-align: center; margin-top: 10px;">
-                    <h6 i18n="Playlists title">Playlists</h6>
-                </div>
-                <mat-grid-list *ngIf="playlists.audio.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
-                    <mat-grid-tile *ngFor="let playlist of playlists.audio; let i = index;">
-                        <app-file-card #audiofilecard (removeFile)="removePlaylistMp3(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
-                            [length]="null" [isAudio]="true" [playlist]="playlist" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
-                        <mat-progress-bar *ngIf="downloading_content['audio'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
-                    </mat-grid-tile>
-                </mat-grid-list>
-                <div class="add-playlist-button"><button (click)="openCreatePlaylistDialog('audio')" mat-fab><mat-icon>add</mat-icon></button></div>
-                <div *ngIf="playlists.audio.length === 0">
-                    <ng-container i18n="No video playlists available text">
-                        No playlists available. Create one from your downloading audio files by clicking the blue plus button.
-                    </ng-container>
-                </div>
-            </div>
-
-        </mat-expansion-panel>
-        <mat-expansion-panel (opened)="accordionOpened('video')" (closed)="accordionClosed('video')" (mouseleave)="accordionLeft('video')" (mouseenter)="accordionEntered('video')" class="big">
-            <mat-expansion-panel-header>
-                <mat-panel-title>
-                    <ng-container i18n="Video files title">
-                        Video
-                    </ng-container>
-                </mat-panel-title>
-                <mat-panel-description>
-                    <ng-container i18n="Video files description">
-                        Your video files are here
-                    </ng-container>
-                </mat-panel-description>
-            </mat-expansion-panel-header>
-            <div *ngIf="mp4s.length > 0;else nomp4s">
-                <mat-grid-list style="margin-bottom: 15px;" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
-                    <mat-grid-tile *ngFor="let file of mp4s; index as i;">
-                        <app-file-card #videofilecard (removeFile)="removeFromMp4($event)" [file]="file" [title]="file.title" [name]="file.id" [uid]="file.uid" [thumbnailURL]="file.thumbnailURL"
-                            [length]="file.duration" [isAudio]="false" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
-                        <mat-progress-bar *ngIf="downloading_content['video'][file.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
-                    </mat-grid-tile>
-                </mat-grid-list>
-                <mat-divider></mat-divider>
-
-                <div style="width: 100%; text-align: center; margin-top: 10px;">
-                    <h6 i18n="Playlists title">Playlists</h6>
-                </div>
-                <mat-grid-list *ngIf="playlists.video.length > 0" (window:resize)="onResize($event)" [cols]="files_cols" rowHeight="150px">
-                    <mat-grid-tile *ngFor="let playlist of playlists.video; let i = index;">
-                        <app-file-card #videofilecard (removeFile)="removePlaylistMp4(playlist.id, i)" [title]="playlist.name" [name]="playlist.id" [thumbnailURL]="playlist_thumbnails[playlist.id]"
-                            [length]="null" [isAudio]="false" [playlist]="playlist" [count]="playlist.fileNames.length" [use_youtubedl_archive]="use_youtubedl_archive"></app-file-card>
-                        <mat-progress-bar *ngIf="downloading_content['video'][playlist.id]" class="download-progress-bar" mode="indeterminate"></mat-progress-bar>
-                    </mat-grid-tile>
-                </mat-grid-list>
-        
-                <!-- Add video playlist button --<
-                <div class="add-playlist-button"><button (click)="openCreatePlaylistDialog('video')" mat-fab><mat-icon>add</mat-icon></button></div>
-                <div *ngIf="playlists.video.length === 0">
-                    <ng-container i18n="No video playlists available text">
-                        No playlists available. Create one from your downloading video files by clicking the blue plus button.
-                    </ng-container>
-                </div>
-            </div>
-        </mat-expansion-panel>
-    </mat-accordion>
-</div>-->

src/app/main/main.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { MainComponent } from './main.component';
 
@@ -6,7 +6,7 @@ describe('MainComponent', () => {
   let component: MainComponent;
   let fixture: ComponentFixture<MainComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ MainComponent ]
     })

src/app/main/main.component.ts

@@ -1,25 +1,17 @@
 import { Component, OnInit, ElementRef, ViewChild, ViewChildren, QueryList } from '@angular/core';
 import {PostsService} from '../posts.services';
 import {FileCardComponent} from '../file-card/file-card.component';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import {FormControl, Validators} from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { saveAs } from 'file-saver';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/mapTo';
-import 'rxjs/add/operator/toPromise';
-import 'rxjs/add/observable/fromEvent'
-import 'rxjs/add/operator/filter'
-import 'rxjs/add/operator/debounceTime'
-import 'rxjs/add/operator/do'
-import 'rxjs/add/operator/switch'
 import { YoutubeSearchService, Result } from '../youtube-search.service';
 import { Router, ActivatedRoute } from '@angular/router';
-import { CreatePlaylistComponent } from 'app/create-playlist/create-playlist.component';
 import { Platform } from '@angular/cdk/platform';
 import { v4 as uuid } from 'uuid';
 import { ArgModifierDialogComponent } from 'app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
+import { RecentVideosComponent } from 'app/components/recent-videos/recent-videos.component';
 
 export let audioFilesMouseHovering = false;
 export let videoFilesMouseHovering = false;
@@ -200,6 +192,7 @@ export class MainComponent implements OnInit {
   formats_loading = false;
 
   @ViewChild('urlinput', { read: ElementRef }) urlInput: ElementRef;
+  @ViewChild('recentVideos') recentVideos: RecentVideosComponent;
   @ViewChildren('audiofilecard') audioFileCards: QueryList<FileCardComponent>;
   @ViewChildren('videofilecard') videoFileCards: QueryList<FileCardComponent>;
   last_valid_url = '';
@@ -250,13 +243,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.fileManagerEnabled) {
-      this.getMp3s();
-      this.getMp4s();
-    }
-
     if (this.youtubeSearchEnabled && this.youtubeAPIKey) {
       this.youtubeSearch.initializeAPI(this.youtubeAPIKey);
       this.attachToInput();
@@ -341,61 +327,6 @@ export class MainComponent implements OnInit {
     this.setCols();
   }
 
-  // file manager stuff
-
-  getMp3s() {
-    this.postsService.getMp3s().subscribe(result => {
-      const mp3s = result['mp3s'];
-      const playlists = result['playlists'];
-      // if they are different
-      if (JSON.stringify(this.mp3s) !== JSON.stringify(mp3s)) { this.mp3s = mp3s };
-      this.playlists.audio = playlists;
-
-      // get thumbnail url by using first video. this is a temporary hack
-      for (let i = 0; i < this.playlists.audio.length; i++) {
-        const playlist = this.playlists.audio[i];
-        let videoToExtractThumbnail = null;
-        for (let j = 0; j < this.mp3s.length; j++) {
-          if (this.mp3s[j].id === playlist.fileNames[0]) {
-            // found the corresponding file
-            videoToExtractThumbnail = this.mp3s[j];
-          }
-        }
-
-        if (videoToExtractThumbnail) { this.playlist_thumbnails[playlist.id] = videoToExtractThumbnail.thumbnailURL; }
-      }
-    }, error => {
-      console.log(error);
-    });
-  }
-
-  getMp4s() {
-    this.postsService.getMp4s().subscribe(result => {
-      const mp4s = result['mp4s'];
-      const playlists = result['playlists'];
-      // if they are different
-      if (JSON.stringify(this.mp4s) !== JSON.stringify(mp4s)) { this.mp4s = mp4s };
-      this.playlists.video = playlists;
-
-      // get thumbnail url by using first video. this is a temporary hack
-      for (let i = 0; i < this.playlists.video.length; i++) {
-        const playlist = this.playlists.video[i];
-        let videoToExtractThumbnail = null;
-        for (let j = 0; j < this.mp4s.length; j++) {
-          if (this.mp4s[j].id === playlist.fileNames[0]) {
-            // found the corresponding file
-            videoToExtractThumbnail = this.mp4s[j];
-          }
-        }
-
-        if (videoToExtractThumbnail) { this.playlist_thumbnails[playlist.id] = videoToExtractThumbnail.thumbnailURL; }
-      }
-    },
-    error => {
-      console.log(error);
-    });
-  }
-
   public setCols() {
     if (window.innerWidth <= 350) {
       this.files_cols = 1;
@@ -443,50 +374,13 @@ export class MainComponent implements OnInit {
     return null;
   }
 
-  public removeFromMp3(name: string) {
-    for (let i = 0; i < this.mp3s.length; i++) {
-      if (this.mp3s[i].id === name || this.mp3s[i].id + '.mp3' === name) {
-        this.mp3s.splice(i, 1);
-      }
-    }
-    this.getMp3s();
-  }
-
-  public removePlaylistMp3(playlistID, index) {
-    this.postsService.removePlaylist(playlistID, 'audio').subscribe(res => {
-      if (res['success']) {
-        this.playlists.audio.splice(index, 1);
-        this.openSnackBar('Playlist successfully removed.', '');
-      }
-      this.getMp3s();
-    });
-  }
-
-  public removeFromMp4(name: string) {
-    for (let i = 0; i < this.mp4s.length; i++) {
-      if (this.mp4s[i].id === name || this.mp4s[i].id + '.mp4' === name) {
-        this.mp4s.splice(i, 1);
-      }
-    }
-    this.getMp4s();
-  }
-
-  public removePlaylistMp4(playlistID, index) {
-    this.postsService.removePlaylist(playlistID, 'video').subscribe(res => {
-      if (res['success']) {
-        this.playlists.video.splice(index, 1);
-        this.openSnackBar('Playlist successfully removed.', '');
-      }
-      this.getMp4s();
-    });
-  }
-
   // download helpers
 
   downloadHelperMp3(name, uid, is_playlist = false, forceView = false, new_download = null, navigate_mode = false) {
     this.downloadingfile = false;
     if (this.multiDownloadMode && !this.downloadOnlyMode && !navigate_mode) {
       // do nothing
+      this.reloadRecentVideos();
     } else {
       // if download only mode, just download the file. no redirect
       if (forceView === false && this.downloadOnlyMode && !this.iOS) {
@@ -496,6 +390,7 @@ export class MainComponent implements OnInit {
         } else {
           this.downloadAudioFile(decodeURI(name));
         }
+        this.reloadRecentVideos();
       } else {
         localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
         if (is_playlist) {
@@ -508,22 +403,13 @@ export class MainComponent implements OnInit {
 
     // remove download from current downloads
     this.removeDownloadFromCurrentDownloads(new_download);
-
-    // reloads mp3s
-    if (this.fileManagerEnabled) {
-      this.getMp3s();
-      setTimeout(() => {
-        this.audioFileCards.forEach(filecard => {
-          filecard.onHoverResponse();
-        });
-      }, 200);
-    }
   }
 
   downloadHelperMp4(name, uid, is_playlist = false, forceView = false, new_download = null, navigate_mode = false) {
     this.downloadingfile = false;
     if (this.multiDownloadMode && !this.downloadOnlyMode && !navigate_mode) {
       // do nothing
+      this.reloadRecentVideos();
     } else {
       // if download only mode, just download the file. no redirect
       if (forceView === false && this.downloadOnlyMode) {
@@ -533,6 +419,7 @@ export class MainComponent implements OnInit {
         } else {
           this.downloadVideoFile(decodeURI(name));
         }
+        this.reloadRecentVideos();
       } else {
         localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
         if (is_playlist) {
@@ -545,16 +432,6 @@ export class MainComponent implements OnInit {
 
     // remove download from current downloads
     this.removeDownloadFromCurrentDownloads(new_download);
-
-    // reloads mp4s
-    if (this.fileManagerEnabled) {
-      this.getMp4s();
-      setTimeout(() => {
-        this.videoFileCards.forEach(filecard => {
-          filecard.onHoverResponse();
-        });
-      }, 200);
-    }
   }
 
   // download click handler
@@ -747,8 +624,6 @@ export class MainComponent implements OnInit {
       if (!this.fileManagerEnabled) {
         // tell server to delete the file once downloaded
         this.postsService.deleteFile(name, 'video').subscribe(delRes => {
-          // reload mp3s
-          this.getMp3s();
         });
       }
     });
@@ -764,8 +639,6 @@ export class MainComponent implements OnInit {
       if (!this.fileManagerEnabled) {
         // tell server to delete the file once downloaded
         this.postsService.deleteFile(name, 'audio').subscribe(delRes => {
-          // reload mp4s
-          this.getMp4s();
         });
       }
     });
@@ -1112,25 +985,6 @@ export class MainComponent implements OnInit {
     }
   }
 
-  // creating a playlist
-  openCreatePlaylistDialog(type) {
-    const dialogRef = this.dialog.open(CreatePlaylistComponent, {
-      data: {
-        filesToSelectFrom: (type === 'audio') ? this.mp3s : this.mp4s,
-        type: type
-      }
-    });
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        if (type === 'audio') { this.getMp3s() };
-        if (type === 'video') { this.getMp4s() };
-        this.openSnackBar('Successfully created playlist!', '');
-      } else if (result === false) {
-        this.openSnackBar('ERROR: failed to create playlist!', '');
-      }
-    });
-  }
-
   // modify custom args
   openArgsModifierDialog() {
     const dialogRef = this.dialog.open(ArgModifierDialogComponent, {
@@ -1161,4 +1015,10 @@ export class MainComponent implements OnInit {
       }
     });
   }
+
+  reloadRecentVideos() {
+    if (this.recentVideos) {
+      this.recentVideos.getAllFiles();
+    }
+  }
 }

src/app/player/player.component.css

@@ -37,10 +37,8 @@
 }
 
 .spinner {
-    width: 50px;
-    height: 50px;
-    bottom: 3px;
-    left: 3px;
+    bottom: 1px;
+    left: 2px;
     position: absolute;
 }
 

src/app/player/player.component.html

@@ -1,35 +1,65 @@
-<div *ngIf="playlist.length > 0 && show_player">
-    <div [ngClass]="(type === 'audio') ? null : 'container-video'">
-        <div style="max-width: 100%; margin-left: 0px; height: 70vh">
-            <div style="height: fit-content" [ngClass]="(type === 'audio') ? 'audio-col' : 'video-col'">
-                <vg-player style="height: fit-content; max-height: 75vh" (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
-                    <video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
-                    </video>
-                </vg-player>
-            </div>
-            <div style="height: fit-content; width: 100%; margin-top: 10px;">
-                <mat-button-toggle-group cdkDropList [cdkDropListSortingDisabled]="!id" (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-                    <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{playlist_item.label}}</mat-button-toggle>
-                </mat-button-toggle-group>
-            </div>
-        </div>
-    </div>
+<div style="height: 100%" *ngIf="playlist.length > 0 && show_player">
+    <div style="height: 100%" [ngClass]="(type === 'audio') ? null : 'container-video'">
+            <div style="max-width: 100%; margin-left: 0px; height: 100%">
+                <mat-drawer-container style="height: 100%" class="example-container" autosize>
+                    <div style="height: fit-content" [ngClass]="(type === 'audio') ? 'audio-col' : 'video-col'">
+                        <vg-player style="height: fit-content; max-height: 75vh" (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
+                            <video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
+                            </video>
+                        </vg-player>
+                    </div>
+                    <div *ngIf="db_file" style="height: fit-content; width: 100%; margin-top: 10px;">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-2 col-lg-1">
+                                    <ng-container *ngIf="db_file">{{db_file['local_view_count'] ? db_file['local_view_count']+1 : 1}}&nbsp;<ng-container i18n="View count label">views</ng-container></ng-container>
+                                </div>
+                                <div style="white-space: pre-line;" class="col-8 col-lg-9">
+                                    <ng-container *ngIf="db_file && db_file['description']">
+                                        <p>
+                                            <app-see-more [text]="db_file['description']"></app-see-more>
+                                        </p>
+                                    </ng-container>
+                                    <ng-container *ngIf="!db_file || !db_file['description']">
+                                        <p style="text-align: center;">
+                                            No description available.
+                                        </p>
+                                    </ng-container>
+                                </div>
+                                <div class="col-2">
+                                    <ng-container *ngIf="playlist.length > 1">
+                                        <button (click)="downloadContent()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner></button>
+                                        <button *ngIf="!id" color="accent" (click)="namePlaylistDialog()" mat-icon-button><mat-icon>favorite</mat-icon></button>
+                                        <button *ngIf="!is_shared && id && (!postsService.isLoggedIn || postsService.permissions.includes('sharing'))" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
+                                    </ng-container>
+                                    <ng-container *ngIf="playlist.length === 1">
+                                        <button (click)="downloadFile()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner></button>
+                                        <button *ngIf="!is_shared && uid && uid !== 'false' && type !== 'subscription' && (!postsService.isLoggedIn || postsService.permissions.includes('sharing'))" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
+                                    </ng-container>
+                                    <button *ngIf="db_file && db_file.url.includes('twitch.tv/videos/') && postsService['config']['API']['use_twitch_API']" (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div style="height: fit-content; width: 100%; margin-top: 10px;">
+                        <mat-button-toggle-group cdkDropList [cdkDropListSortingDisabled]="!id" (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
+                            <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{playlist_item.label}}</mat-button-toggle>
+                        </mat-button-toggle-group>
+                    </div>
+                    <mat-drawer #drawer class="example-sidenav" mode="side" position="end" [opened]="db_file && db_file['chat_exists'] && postsService['config']['API']['use_twitch_API']">
+                        <ng-container *ngIf="api_ready && db_file && db_file.url.includes('twitch.tv/videos/')">
+                            <app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime" [sub]="subscription"></app-twitch-chat>
+                        </ng-container>
+                    </mat-drawer>
 
-    <div class="update-playlist-button-div" *ngIf="id && playlistChanged()">
-        <div class="spinner-div">
-            <mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
-        </div>
-        <button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button><ng-container i18n="Playlist save changes button">Save changes</ng-container>&nbsp;<mat-icon>update</mat-icon></button>
-        
-    </div>
-
-    <div *ngIf="playlist.length > 1">
-        <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
-        <button *ngIf="!id" color="accent" class="favorite-button" color="primary" (click)="namePlaylistDialog()" mat-fab><mat-icon class="save-icon">favorite</mat-icon></button>
-        <button *ngIf="!is_shared && id && (!postsService.isLoggedIn || postsService.permissions.includes('sharing'))" class="share-button" color="primary" (click)="openShareDialog()" mat-fab><mat-icon class="save-icon">share</mat-icon></button>
-    </div>
-    <div *ngIf="playlist.length === 1">
-        <button class="save-button" color="primary" (click)="downloadFile()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
-        <button *ngIf="!is_shared && uid && uid !== 'false' && type !== 'subscription' && (!postsService.isLoggedIn || postsService.permissions.includes('sharing'))" class="share-button" color="primary" (click)="openShareDialog()" mat-fab><mat-icon class="save-icon">share</mat-icon></button>
+                    <div class="update-playlist-button-div" *ngIf="id && playlistChanged()">
+                        <div class="spinner-div">
+                            <mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
+                        </div>
+                        <button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button><ng-container i18n="Playlist save changes button">Save changes</ng-container>&nbsp;<mat-icon>update</mat-icon></button>
+                        
+                    </div>
+                </mat-drawer-container>
+            </div>
     </div>
 </div>

src/app/player/player.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PlayerComponent } from './player.component';
 
@@ -6,7 +6,7 @@ describe('PlayerComponent', () => {
   let component: PlayerComponent;
   let fixture: ComponentFixture<PlayerComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ PlayerComponent ]
     })

src/app/player/player.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, HostListener, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core';
-import { VgAPI } from 'ngx-videogular';
+import { Component, OnInit, HostListener, EventEmitter, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
+import { VgApiService } from '@videogular/ngx-videogular/core';
 import { PostsService } from 'app/posts.services';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -7,6 +7,7 @@ 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';
 
 export interface IMedia {
   title: string;
@@ -30,13 +31,15 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
 
   currentIndex = 0;
   currentItem: IMedia = null;
-  api: VgAPI;
+  api: VgApiService;
+  api_ready = false;
 
   // params
   fileNames: string[];
   type: string;
   id = null; // used for playlists (not subscription)
   uid = null; // used for non-subscription files (audio, video, playlist)
+  subscription = null;
   subscriptionName = null;
   subPlaylist = null;
   uuid = null; // used for sharing in multi-user mode, uuid is the user that downloaded the video
@@ -65,6 +68,8 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
   save_volume_timer = null;
   original_volume = null;
 
+  @ViewChild('twitchchat') twitchChat: TwitchChatComponent;
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.innerWidth = window.innerWidth;
@@ -155,6 +160,10 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
         this.openSnackBar('Failed to get file information from the server.', 'Dismiss');
         return;
       }
+      this.postsService.incrementViewCount(this.db_file['uid'], null, this.uuid).subscribe(res => {}, err => {
+        console.error('Failed to increment view count');
+        console.error(err);
+      });
       this.sharingEnabled = this.db_file.sharingEnabled;
       if (!this.fileNames) {
         // means it's a shared video
@@ -176,10 +185,15 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
   getSubscription() {
     this.postsService.getSubscription(null, this.subscriptionName).subscribe(res => {
       const subscription = res['subscription'];
+      this.subscription = subscription;
       if (this.fileNames) {
         subscription.videos.forEach(video => {
           if (video['id'] === this.fileNames[0]) {
             this.db_file = video;
+            this.postsService.incrementViewCount(this.db_file['uid'], this.subscription['id'], this.uuid).subscribe(res => {}, err => {
+              console.error('Failed to increment view count');
+              console.error(err);
+            });
             this.show_player = true;
             this.parseFileNames();
           }
@@ -193,6 +207,10 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   getPlaylistFiles() {
+    if (this.route.snapshot.paramMap.get('auto') === 'true') {
+      this.show_player = true;
+      return;
+    }
     this.postsService.getPlaylist(this.id, null, this.uuid).subscribe(res => {
       if (res['playlist']) {
         this.db_playlist = res['playlist'];
@@ -268,8 +286,9 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
     this.original_playlist = JSON.stringify(this.playlist);
   }
 
-  onPlayerReady(api: VgAPI) {
+  onPlayerReady(api: VgApiService) {
       this.api = api;
+      this.api_ready = true;
 
       // checks if volume has been previously set. if so, use that as default
       if (localStorage.getItem('player_volume')) {

src/app/posts.services.ts

@@ -12,6 +12,7 @@ import { v4 as uuid } from 'uuid';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as Fingerprint2 from 'fingerprintjs2';
 import { isoLangs } from './settings/locales_list';
+import { Title } from '@angular/platform-browser';
 
 @Injectable()
 export class PostsService implements CanActivate {
@@ -58,7 +59,7 @@ export class PostsService implements CanActivate {
     locale = isoLangs['en'];
 
     constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document,
-                public snackBar: MatSnackBar) {
+                public snackBar: MatSnackBar, private titleService: Title) {
         console.log('PostsService Initialized...');
         this.path = this.document.location.origin + '/api/';
 
@@ -88,6 +89,7 @@ export class PostsService implements CanActivate {
             const result = !this.debugMode ? res['config_file'] : res;
             if (result) {
                 this.config = result['YoutubeDLMaterial'];
+                this.titleService.setTitle(this.config['Extra']['title_top']);
                 if (this.config['Advanced']['multi_user_mode']) {
                     this.checkAdminCreationStatus();
                     // login stuff
@@ -232,6 +234,14 @@ export class PostsService implements CanActivate {
         return this.http.post(this.path + 'getAllFiles', {}, this.httpOptions);
     }
 
+    getFullTwitchChat(id, type, uuid = null, sub = null) {
+        return this.http.post(this.path + 'getFullTwitchChat', {id: id, type: type, uuid: uuid, sub: sub}, this.httpOptions);
+    }
+
+    downloadTwitchChat(id, type, vodId, uuid = null, sub = null) {
+        return this.http.post(this.path + 'downloadTwitchChatByVODID', {id: id, type: type, vodId: vodId, uuid: uuid, sub: sub}, this.httpOptions);
+    }
+
     downloadFileFromServer(fileName, type, outputName = null, fullPathProvided = null, subscriptionName = null, subPlaylist = null,
                             uid = null, uuid = null, id = null) {
         return this.http.post(this.path + 'downloadFile', {fileNames: fileName,
@@ -276,6 +286,10 @@ export class PostsService implements CanActivate {
         return this.http.post(this.path + 'enableSharing', {uid: uid, type: type, is_playlist: is_playlist}, this.httpOptions);
     }
 
+    incrementViewCount(file_uid, sub_id, uuid) {
+        return this.http.post(this.path + 'incrementViewCount', {file_uid: file_uid, sub_id: sub_id, uuid: uuid}, this.httpOptions);
+    }
+
     disableSharing(uid, type, is_playlist) {
         return this.http.post(this.path + 'disableSharing', {uid: uid, type: type, is_playlist: is_playlist}, this.httpOptions);
     }
@@ -335,9 +349,11 @@ export class PostsService implements CanActivate {
         });
     }
 
-    createSubscription(url, name, timerange = null, streamingOnly = false, audioOnly = false, customArgs = null, customFileOutput = null) {
-        return this.http.post(this.path + 'subscribe', {url: url, name: name, timerange: timerange, streamingOnly: streamingOnly,
-                                audioOnly: audioOnly, customArgs: customArgs, customFileOutput: customFileOutput}, this.httpOptions);
+    createSubscription(url, name, timerange = null, streamingOnly = false, maxQuality = 'best', audioOnly = false,
+                       customArgs = null, customFileOutput = null) {
+        return this.http.post(this.path + 'subscribe', {url: url, name: name, timerange: timerange, maxQuality: maxQuality,
+                                streamingOnly: streamingOnly, audioOnly: audioOnly, customArgs: customArgs,
+                                customFileOutput: customFileOutput}, this.httpOptions);
     }
 
     updateSubscription(subscription) {
@@ -349,6 +365,7 @@ export class PostsService implements CanActivate {
     }
 
     deleteSubscriptionFile(sub, file, deleteForever, file_uid) {
+        delete sub['videos'];
         return this.http.post(this.path + 'deleteSubscriptionFile', {sub: sub, file: file, deleteForever: deleteForever,
                                                                     file_uid: file_uid}, this.httpOptions)
     }
@@ -358,7 +375,7 @@ export class PostsService implements CanActivate {
     }
 
     getAllSubscriptions() {
-        return this.http.post(this.path + 'getAllSubscriptions', {}, this.httpOptions);
+        return this.http.post(this.path + 'getSubscriptions', {}, this.httpOptions);
     }
 
     // current downloads

src/app/settings/settings.component.html

@@ -53,12 +53,15 @@
                             <mat-hint><ng-container i18n="Subscriptions base path setting input hint">Base path for videos from your subscribed channels and playlists. It is relative to YTDL-Material's root folder.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
-                    <div class="col-12 mt-5 mb-3">
+                    <div class="col-12 mt-4">
                         <mat-form-field class="text-field" color="accent">
                             <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_check_interval']" matInput placeholder="Check interval" i18n-placeholder="Check interval input setting placeholder">
                             <mat-hint><ng-container i18n="Check interval setting input hint">Unit is seconds, only include numbers.</ng-container></mat-hint>
                         </mat-form-field>
                     </div>
+                    <div class="col-12 mt-2 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>
                 </div>
             </div>
             <mat-divider></mat-divider>
@@ -115,9 +118,19 @@
                         </mat-form-field>
                     </div>
 
+                    <div class="col-12 mt-4">
+                        <mat-form-field class="text-field" color="accent">
+                            <input matInput [(ngModel)]="new_config['Downloader']['default_file_output']" matInput placeholder="Default file output" i18n-placeholder="Default file output placeholder">
+                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
+                                <ng-container i18n="Youtube-dl output template documentation link">Documentation</ng-container></a>.
+                                <ng-container i18n="Custom Output input hint">Path is relative to the above download paths. Don't include extension.</ng-container>
+                            </mat-hint>
+                        </mat-form-field>
+                    </div>
+
                     <div class="col-12 mt-4 mb-5">
                         <mat-form-field class="text-field" style="margin-right: 12px;" color="accent">
-                            <textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Custom args" i18n-placeholder="Custom args input placeholder"></textarea>
+                            <textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Global custom args" i18n-placeholder="Custom args input placeholder"></textarea>
                             <mat-hint><ng-container i18n="Custom args setting input hint">Global custom args for downloads on the home page. Args are delimited using two commas like so: ,,</ng-container></mat-hint>
                             <button class="args-edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
                         </mat-form-field>
@@ -127,7 +140,7 @@
             <mat-divider></mat-divider>
             <div *ngIf="new_config" class="container-fluid">
                 <div class="row">
-                    <div class="col-12 mt-3 mb-2">
+                    <div class="col-12 mt-3">
                         <h6 i18n="Categories">Categories</h6>
                         <div cdkDropList class="category-list" (cdkDropListDropped)="dropCategory($event)">
                             <div class="category-box" *ngFor="let category of postsService.categories" cdkDrag>
@@ -141,6 +154,9 @@
                         </div>
                         <button style="margin-top: 10px;" mat-mini-fab (click)="openAddCategoryDialog()"><mat-icon>add</mat-icon></button>
                     </div>
+                    <div class="col-12 mt-2 mb-2">
+                        <mat-checkbox [(ngModel)]="new_config['Extra']['allow_playlist_categorization']" matTooltip="With this setting enabled, if a single video matches a category, the entire playlist will receive that category." i18n-matTooltip="Allow playlist categorization setting tooltip"><ng-container i18n="Allow playlist categorization setting label">Allow playlist categorization</ng-container></mat-checkbox>
+                    </div>
                 </div>
             </div>
             <mat-divider></mat-divider>
@@ -218,12 +234,24 @@
                     <div class="col-12 mt-3">
                         <mat-checkbox color="accent" [(ngModel)]="new_config['API']['use_youtube_API']"><ng-container i18n="Use YouTube API setting">Use YouTube API</ng-container></mat-checkbox>
                     </div>
-                    <div class="col-12 mb-3">
+                    <div class="col-12 mb-2">
                         <mat-form-field class="text-field" color="accent">
                             <input [disabled]="!new_config['API']['use_youtube_API']" [(ngModel)]="new_config['API']['youtube_API_key']" matInput placeholder="Youtube API Key" i18n-placeholder="Youtube API Key setting placeholder" required>
                             <mat-hint><a target="_blank" href="https://developers.google.com/youtube/v3/getting-started"><ng-container i18n="Youtube API Key setting hint">Generating a key is easy!</ng-container></a></mat-hint>
                         </mat-form-field>
                     </div>
+                    <div class="col-12 mt-3">
+                        <mat-checkbox color="accent" [(ngModel)]="new_config['API']['use_twitch_API']"><ng-container i18n="Use Twitch API setting">Use Twitch API</ng-container></mat-checkbox>
+                    </div>
+                    <div *ngIf="new_config['API']['use_twitch_API']" class="col-12 mt-1">
+                        <mat-checkbox color="accent" [(ngModel)]="new_config['API']['twitch_auto_download_chat']"><ng-container i18n="Auto download Twitch Chat setting">Auto-download Twitch Chat</ng-container></mat-checkbox>
+                    </div>
+                    <div class="col-12 mb-5">
+                        <mat-form-field class="text-field" color="accent">
+                            <input [disabled]="!new_config['API']['use_twitch_API']" [(ngModel)]="new_config['API']['twitch_API_key']" matInput placeholder="Twitch API Key" i18n-placeholder="Twitch API Key setting placeholder" required>
+                            <mat-hint><ng-container i18n="Twitch API Key setting hint AKA preamble">Also known as a Client ID.</ng-container>&nbsp;<a target="_blank" href="https://dev.twitch.tv/docs/api/"><ng-container i18n="Twitch API Key setting hint">Generating a key is easy!</ng-container></a></mat-hint>
+                        </mat-form-field>
+                    </div>
                 </div>
             </div>
             <mat-divider></mat-divider>
@@ -258,11 +286,20 @@
             <div *ngIf="new_config" class="container-fluid">
                 <div class="row">
                     <div class="col-12 mt-3">
+                        <mat-form-field>
+                            <mat-label><ng-container i18n="Default downloader select label">Select a downloader</ng-container></mat-label>
+                            <mat-select color="accent" [(ngModel)]="new_config['Advanced']['default_downloader']">
+                                <mat-option value="youtube-dlc">youtube-dlc</mat-option>
+                                <mat-option value="youtube-dl">youtube-dl</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                    <div class="col-12 mt-1">
                         <mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['use_default_downloading_agent']"><ng-container i18n="Use default downloading agent setting">Use default downloading agent</ng-container></mat-checkbox>
                     </div>
                     <div class="col-12">
                         <mat-form-field>
-                            <mat-label><ng-container i18n="Custom downloader select label">Select a downloader</ng-container></mat-label>
+                            <mat-label><ng-container i18n="Custom downloader select label">Select a download agent</ng-container></mat-label>
                             <mat-select [disabled]="new_config['Advanced']['use_default_downloading_agent']" color="accent" [(ngModel)]="new_config['Advanced']['custom_downloading_agent']">
                                 <mat-option value="aria2c">aria2c</mat-option>
                                 <mat-option value="avconv">avconv</mat-option>
@@ -274,7 +311,7 @@
                             </mat-select>
                         </mat-form-field>
                     </div>
-                    <div class="col-12 mt-2 mb-1">
+                    <div class="col-12 mt-2">
                         <mat-form-field>
                             <mat-label><ng-container i18n="Log Level label">Log Level</ng-container></mat-label>
                             <mat-select color="accent" [(ngModel)]="new_config['Advanced']['logger_level']">
@@ -286,7 +323,7 @@
                             </mat-select>
                         </mat-form-field>
                     </div>
-                    <div class="col-12 mt-2 mb-1">
+                    <div class="col-12 mb-1">
                         <mat-form-field>
                             <mat-label><ng-container i18n="Login expiration select label">Login expiration</ng-container></mat-label>
                             <mat-select color="accent" [(ngModel)]="new_config['Advanced']['jwt_expiration']">

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SettingsComponent } from './settings.component';
 
@@ -6,7 +6,7 @@ describe('SettingsComponent', () => {
   let component: SettingsComponent;
   let fixture: ComponentFixture<SettingsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SettingsComponent ]
     })

src/app/settings/settings.component.ts

@@ -20,7 +20,7 @@ import { EditCategoryDialogComponent } from 'app/dialogs/edit-category-dialog/ed
 })
 export class SettingsComponent implements OnInit {
   all_locales = isoLangs;
-  supported_locales = ['en', 'es', 'de', 'fr', 'zh', 'nb', 'en-GB'];
+  supported_locales = ['en', 'es', 'de', 'fr', 'zh', 'nb', 'it', 'en-GB'];
   initialLocale = localStorage.getItem('locale');
 
   initial_config = null;

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SubscriptionFileCardComponent } from './subscription-file-card.component';
 
@@ -6,7 +6,7 @@ describe('SubscriptionFileCardComponent', () => {
   let component: SubscriptionFileCardComponent;
   let fixture: ComponentFixture<SubscriptionFileCardComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SubscriptionFileCardComponent ]
     })

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

@@ -15,9 +15,6 @@ export class SubscriptionFileCardComponent implements OnInit {
   image_errored = false;
   image_loaded = false;
 
-  scrollSubject;
-  scrollAndLoad;
-
   formattedDuration = null;
 
   @Input() file;
@@ -27,13 +24,7 @@ export class SubscriptionFileCardComponent implements OnInit {
   @Output() goToFileEmit = new EventEmitter<any>();
   @Output() reloadSubscription = new EventEmitter<boolean>();
 
-  constructor(private snackBar: MatSnackBar, private postsService: PostsService, private dialog: MatDialog) {
-    this.scrollSubject = new Subject();
-    this.scrollAndLoad = Observable.merge(
-      Observable.fromEvent(window, 'scroll'),
-      this.scrollSubject
-    );
-  }
+  constructor(private snackBar: MatSnackBar, private postsService: PostsService, private dialog: MatDialog) {}
 
   ngOnInit() {
     if (this.file.duration) {
@@ -45,10 +36,6 @@ export class SubscriptionFileCardComponent implements OnInit {
     this.image_errored = true;
   }
 
-  onHoverResponse() {
-    this.scrollSubject.next();
-  }
-
   imageLoaded(loaded) {
     this.image_loaded = true;
   }

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

@@ -2,8 +2,9 @@
     <button class="back-button" (click)="goBack()" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
     <div style="margin-bottom: 15px;">
         <h2 style="text-align: center;" *ngIf="subscription">
-            {{subscription.name}}
+            {{subscription.name}}&nbsp;<ng-container *ngIf="subscription.paused" i18n="Paused suffix">(Paused)</ng-container>
         </h2>
+        <mat-progress-bar style="width: 80%; margin: 0 auto; margin-top: 15px;" *ngIf="subscription && subscription.downloading" mode="indeterminate"></mat-progress-bar>
     </div>
     <mat-divider style="width: 80%; margin: 0 auto"></mat-divider>
     <br/>

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SubscriptionComponent } from './subscription.component';
 
@@ -6,7 +6,7 @@ describe('SubscriptionComponent', () => {
   let component: SubscriptionComponent;
   let fixture: ComponentFixture<SubscriptionComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SubscriptionComponent ]
     })