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/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: '0 12 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file. 
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.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

.gitignore

@@ -43,18 +43,26 @@ Thumbs.db
 
 node_modules/*
 backend/node_modules/*
-backend/public/*
 YoutubeDL-Material/node_modules/*
-backend/video/*
-backend/audio/*
-backend/public/*
 backend/subscriptions/archives/*
 backend/subscriptions/playlists/*
 backend/subscriptions/channels/*
 backend/db.json
+backend/public/assets/i18n/*.xlf
+backend/public/assets/default.json
 backend/subscriptions/channels/*
 backend/subscriptions/playlists/*
 backend/subscriptions/archives/*
+backend/*.exe
 src/assets/default.json
-package-lock.json
-backend/package-lock.json
+backend/appdata/db.json
+backend/appdata/archives/archive_audio.txt
+backend/appdata/archives/archive_video.txt
+backend/appdata/archives/blacklist_audio.txt
+backend/appdata/archives/blacklist_video.txt
+backend/appdata/logs/combined.log
+backend/appdata/logs/error.log
+backend/appdata/users.json
+backend/users/*
+backend/appdata/cookies.txt
+backend/public

Dockerfile

@@ -1,21 +1,43 @@
-FROM alpine:3.11
+FROM alpine:3.12 as frontend
 
-RUN apk add --update npm python ffmpeg
+RUN apk add --no-cache \
+  npm
 
-# Change directory so that our commands run inside this new directory
-WORKDIR /app
+RUN npm install -g @angular/cli
 
-# Copy dependency definitions
-COPY ./ /app/
-
-# Change directory to backend
-WORKDIR /app
-
-# Install dependencies on backend
+WORKDIR /build
+COPY [ "package.json", "package-lock.json", "/build/" ]
 RUN npm install
 
-# Expose the port the app runs in
-EXPOSE 17442
+COPY [ "angular.json", "tsconfig.json", "/build/" ]
+COPY [ "src/", "/build/src/" ]
+RUN ng build --prod
 
-# Run the specified command within the container.
-CMD [ "node", "app.js" ]
+#--------------#
+
+FROM alpine:3.12
+
+ENV UID=1000 \
+  GID=1000 \
+  USER=youtube
+
+RUN addgroup -S $USER -g $GID && adduser -D -S $USER -G $USER -u $UID
+
+RUN apk add --no-cache \
+  ffmpeg \
+  npm \
+  python2 \
+  su-exec \
+  && apk add --no-cache --repository http://dl-cdn.alpinelinux.org/alpine/edge/testing/ \
+    atomicparsley
+
+WORKDIR /app
+COPY --chown=$UID:$GID [ "backend/package.json", "backend/package-lock.json", "/app/" ]
+RUN npm install && chown -R $UID:$GID ./
+
+COPY --chown=$UID:$GID --from=frontend [ "/build/backend/public/", "/app/public/" ]
+COPY --chown=$UID:$GID [ "/backend/", "/app/" ]
+
+EXPOSE 17442
+ENTRYPOINT [ "/app/entrypoint.sh" ]
+CMD [ "node", "app.js" ]

Procfile

@@ -1 +1 @@
-web: cd backend && node app.js
+web: npm start --prefix backend

README.md

@@ -1,6 +1,12 @@
 # YoutubeDL-Material
 
-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.
+[![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 11](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
 
 Now with [Docker](#Docker) support!
 
@@ -10,102 +16,114 @@ 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
 
 1. First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
 
-2. Drag the `youtubedl-material` directory to an easily accessible directory. Navigate to the `appdata` folder and edit the `default.json` file. If you're using SSL encryption, look at the `encrypted.json` file for a template.
+2. Drag the `youtubedl-material` directory to an easily accessible directory. Navigate to the `appdata` folder and edit the `default.json` file.
 
-NOTE: If you are intending to use a reverse proxy, this next step is not necessary
+NOTE: If you are intending to use a [reverse proxy](https://github.com/Tzahi12345/YoutubeDL-Material/wiki/Reverse-Proxy-Setup), this next step is not necessary
 
 3. Port forward the port listed in `default.json`, which defaults to `17442`.
 
-4. Once the configuration is done, run `npm install` to install all the backend dependencies. Once that is finished, type `nodejs app.js`. This will run the backend server, which serves the frontend as well. On your browser, navigate to to the server (url with the specified port). Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
+4. Once the configuration is done, run `npm install` to install all the backend dependencies. Once that is finished, type `npm start`. This will run the backend server, which serves the frontend as well. On your browser, navigate to to the server (url with the specified port). Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
 
 If you experience problems, know that it's usually caused by a configuration problem. The first thing you should do is check the console. To get there, right click anywhere on the page and click "Inspect element." Then on the menu that pops up, click console. Look at the error there, and try to investigate.
 
-### Configuration
-
-NOTE: If you are using YoutubeDL-Material v3.2 or lower, click [here](https://github.com/Tzahi12345/YoutubeDL-Material/blob/b87a9f1e2fd896b8e3b2f12429b7ffb15ea4521b/README.md#configuration) for the old README
-
-Here is an explanation for the configuration entries. Check out the [default config](https://github.com/Tzahi12345/YoutubeDL-Material/blob/master/backend/config/default.json) for more context.
-
-| Config item | Description | Default |
-| ------------- | ------------- | ------------- |
-| url  | URL to the server hosting YoutubeDL-Material | "http://example.com" |
-| port  | Desired port for YoutubeDL-Material | "17442" |
-| use-encryption | true if you intend to use SSL encryption (https) | false |
-| cert-file-path | Cert file path - required if using encryption | "/etc/letsencrypt/live/example.com/fullchain.pem" |
-| key-file-path | Private key file path - required if using encryption |  "/etc/letsencrypt/live/example.com/privkey.pem" |
-| path-audio | Path to audio folder for saved mp3s | "audio/" |
-| path-video | Path to video folder for saved mp4s | "video/" |
-| title_top | Title shown on the top toolbar | "Youtube Downloader" |
-| file_manager_enabled | true if you want to use the file manager | true |
-| allow_quality_select | true if you want to select a videos quality level before downloading | true |
-| download_only_mode | true if you want files to directly download to the client with no media player | false |
-| allow_multi_download_mode | true if you want the ability to download multiple videos at the same time | true |
-| use_youtube_API | true if you want to use the Youtube API which is used for YT searches | false |
-| youtube_API_key | Youtube API key. Required if use_youtube_API is enabled | "" |
-| default_theme | Default theme to use. Options are "default" and "dark" | "default" |
-| allow_theme_change | true if you want the icon in the top toolbar that toggles dark mode | true |
-| use_default_downloading_agent | true if you want to use youtube-dl's default downloader | true |
-| custom_downloading_agent | If not using the default downloader, this is the downloader you want to use | "" |
-| allow_advanced_download | true if you want to use the Advanced download options | false |
-
 ## Build it yourself
 
 If you'd like to install YoutubeDL-Material, go to the Installation section. If you want to build it yourself and/or develop the repository, then this section is for you.
 
 To deploy, simply clone the repository, and go into the `youtubedl-material` directory. Type `npm install` and all the dependencies will install. Then type `cd backend` and again type `npm install` to install the dependencies for the backend.
 
-Once you do that, you're almost up and running. All you need to do is edit the configuration in `youtubedl-material/appdata`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/dist` folder. Drag those files into the `public` directory in the `backend` folder.
+Once you do that, you're almost up and running. All you need to do is edit the configuration in `youtubedl-material/appdata`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/backend/public` folder.
 
-The frontend is now complete. The backend is much easier. Just go into the `backend` folder, and type `nodejs app.js`.
+The frontend is now complete. The backend is much easier. Just go into the `backend` folder, and type `npm start`.
 
-Finally, port forward the port specified in the config (defaults to `17442`) and point it to the server's IP address. Make sure the port is also allowed through the server's firewall.
+Finally, if you want your instance to be available from outside your network, you can set up a [reverse proxy](https://github.com/Tzahi12345/YoutubeDL-Material/wiki/Reverse-Proxy-Setup).
+
+Alternatively, you can port forward the port specified in the config (defaults to `17442`) and point it to the server's IP address. Make sure the port is also allowed through the server's firewall.
 
 ## Docker
 
+### Setup
+
 If you are looking to setup YoutubeDL-Material with Docker, this section is for you. And you're in luck! Docker setup is quite simple.
 
-1. Run `curl -L https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest/download/docker-compose.yml -o docker-compose.yml` to download the latest release of `docker-compose.yml`, or go to the [releases](https://github.com/Tzahi12345/YoutubeDL-Material/releases/) page to grab the version you'd like.
-2. Modify the config items in the `environment` section of `docker-compose.yml` to your liking. The default options will work, however, and point to `http://localhost:8998`. You can find an explanation of these configuration items in [Configuration](#Configuration) section. 
-3. Run `docker-compose pull`. This will download the official YoutubeDL-Material docker image.
-4. Run `docker-compose up` to start it up. If successful, it should say "HTTP(S): Started on port 8998" or something similar. 
-5. Make sure you can connect to the specified URL + port, and if so, you are done!
+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 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
+```
 
 ## API
 
-View how to use the backend API on the [API Wiki page](https://github.com/Tzahi12345/YoutubeDL-Material/wiki/API).
+[API Docs](https://youtubedl-material.stoplight.io/docs/youtubedl-material/Public%20API%20v1.yaml)
+
+To get started, go to the settings menu and enable the public API from the *Extra* tab. You can generate an API key if one is missing.
+
+Once you have enabled the API and have the key, you can start sending requests by adding the query param `apiKey=API_KEY`. Replace `API_KEY` with your actual API key, and you should be good to go! Nearly all of the backend should be at your disposal. View available endpoints in the link above.
 
 ## Contributing
 
-Feel free to submit a pull request! I have no guidelines as of yet, so no need to worry about that.
+If you're interested in contributing, first: awesome! Second, please refer to the guidelines/setup information located in the [Contributing](https://github.com/Tzahi12345/YoutubeDL-Material/wiki/Contributing) wiki page, it's a helpful way to get you on your feet and coding away.
+
+Pull requests are always appreciated! If you're a bit rusty with coding, that's no problem: we can always help you learn. And if that's too scary, that's OK too! You can create issues for features you'd like to see or bugs you encounter, it all helps this project grow.
+
+If you're interested in translating the app into a new language, check out the [Translate](https://github.com/Tzahi12345/YoutubeDL-Material/wiki/Translate) wiki page.
 
 ## Authors
 
 * **Isaac Grynsztein** (me!) - *Initial work*
 
+Official translators:
+
+* Spanish - tzahi12345
+* German - UnlimitedCookies
+* Chinese - TyRoyal
+
 See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
 
 ## License

angular.json

@@ -18,7 +18,7 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "aot": true,
-            "outputPath": "dist",
+            "outputPath": "backend/public",
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
@@ -45,8 +45,6 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,

app.json

@@ -0,0 +1,7 @@
+{
+    "name": "YoutubeDL-Material",
+    "description": "An open-source and self-hosted YouTube downloader based on Google's Material Design specifications.",
+    "repository": "https://github.com/Tzahi12345/YoutubeDL-Material",
+    "logo": "https://i.imgur.com/GPzvPiU.png",
+    "keywords": ["youtube-dl", "youtubedl-material", "nodejs"]
+  }

armhf.Dockerfile

@@ -0,0 +1,49 @@
+FROM alpine:3.12 as frontend
+
+RUN apk add --no-cache \
+  npm \
+  curl
+
+RUN npm install -g @angular/cli
+
+WORKDIR /build
+
+RUN curl -L https://github.com/balena-io/qemu/releases/download/v3.0.0%2Bresin/qemu-3.0.0+resin-arm.tar.gz | tar zxvf - -C . && mv qemu-3.0.0+resin-arm/qemu-arm-static .
+
+COPY [ "package.json", "package-lock.json", "/build/" ]
+RUN npm install
+
+COPY [ "angular.json", "tsconfig.json", "/build/" ]
+COPY [ "src/", "/build/src/" ]
+RUN ng build --prod
+
+#--------------#
+
+FROM arm32v7/alpine:3.12
+
+COPY --from=frontend /build/qemu-arm-static /usr/bin
+
+ENV UID=1000 \
+  GID=1000 \
+  USER=youtube
+
+RUN addgroup -S $USER -g $GID && adduser -D -S $USER -G $USER -u $UID
+
+RUN apk add --no-cache \
+  ffmpeg \
+  npm \
+  python2 \
+  su-exec \
+  && apk add --no-cache --repository http://dl-cdn.alpinelinux.org/alpine/edge/testing/ \
+    atomicparsley
+
+WORKDIR /app
+COPY --chown=$UID:$GID [ "backend/package.json", "backend/package-lock.json", "/app/" ]
+RUN npm install && chown -R $UID:$GID ./
+
+COPY --chown=$UID:$GID --from=frontend [ "/build/backend/public/", "/app/public/" ]
+COPY --chown=$UID:$GID [ "/backend/", "/app/" ]
+
+EXPOSE 17442
+ENTRYPOINT [ "/app/entrypoint.sh" ]
+CMD [ "node", "app.js" ]

backend/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+*.exe
+docker-compose.yml
+Dockerfile

backend/appdata/default.json

@@ -1,46 +1,68 @@
 {
-    "YoutubeDLMaterial": {
-        "Host": {
-            "url": "http://example.com",
-            "port": "17442"
-        },
-      "Encryption": {
-        "use-encryption": false,
-        "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
-        "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
-      },
-      "Downloader": {
-        "path-audio": "audio/",
-        "path-video": "video/",
-        "use_youtubedl_archive": false,
-        "custom_args": ""
-      },
-      "Extra": {
-        "title_top": "Youtube Downloader",
-        "file_manager_enabled": true,
-        "allow_quality_select": true,
-        "download_only_mode": false,
-        "allow_multi_download_mode": true,
-        "settings_pin_required": false
-      },
-      "API": {
-        "use_youtube_API": false,
-        "youtube_API_key": ""
-      },
-      "Themes": {
-        "default_theme": "default",
-        "allow_theme_change": true
-      },
-      "Subscriptions": {
-        "allow_subscriptions": true,
-        "subscriptions_base_path": "subscriptions/",
-        "subscriptions_check_interval": "300",
-        "subscriptions_use_youtubedl_archive": true
-      },
-      "Advanced": {
-        "use_default_downloading_agent": true,
-        "custom_downloading_agent": "",
-        "allow_advanced_download": false
+  "YoutubeDLMaterial": {
+    "Host": {
+      "url": "http://example.com",
+      "port": "17442"
+    },
+    "Downloader": {
+      "path-audio": "audio/",
+      "path-video": "video/",
+      "default_file_output": "",
+      "use_youtubedl_archive": false,
+      "custom_args": "",
+      "safe_download_override": false,
+      "include_thumbnail": true,
+      "include_metadata": true
+    },
+    "Extra": {
+      "title_top": "YoutubeDL-Material",
+      "file_manager_enabled": true,
+      "allow_quality_select": true,
+      "download_only_mode": false,
+      "allow_multi_download_mode": true,
+      "enable_downloads_manager": true,
+      "allow_playlist_categorization": true
+    },
+    "API": {
+      "use_API_key": false,
+      "API_key": "",
+      "use_youtube_API": false,
+      "youtube_API_key": "",
+      "use_twitch_API": false,
+      "twitch_API_key": "",
+      "twitch_auto_download_chat": false
+    },
+    "Themes": {
+      "default_theme": "default",
+      "allow_theme_change": true
+    },
+    "Subscriptions": {
+      "allow_subscriptions": true,
+      "subscriptions_base_path": "subscriptions/",
+      "subscriptions_check_interval": "300",
+      "redownload_fresh_uploads": false
+    },
+    "Users": {
+      "base_path": "users/",
+      "allow_registration": true,
+      "auth_method": "internal",
+      "ldap_config": {
+        "url": "ldap://localhost:389",
+        "bindDN": "cn=root",
+        "bindCredentials": "secret",
+        "searchBase": "ou=passport-ldapauth",
+        "searchFilter": "(uid={{username}})"
       }
+    },
+    "Advanced": {
+      "default_downloader": "youtube-dl",
+      "use_default_downloading_agent": true,
+      "custom_downloading_agent": "",
+      "multi_user_mode": false,
+      "allow_advanced_download": false,
+      "use_cookies": false,
+      "jwt_expiration": 86400, 
+      "logger_level": "info"
     }
   }
+}

backend/appdata/encrypted.json

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

backend/audio/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

backend/authentication/auth.js

@@ -0,0 +1,549 @@
+const path = require('path');
+const config_api = require('../config');
+const consts = require('../consts');
+var subscriptions_api = require('../subscriptions')
+const fs = require('fs-extra');
+var jwt = require('jsonwebtoken');
+const { uuid } = require('uuidv4');
+var bcrypt = require('bcryptjs');
+
+
+var LocalStrategy = require('passport-local').Strategy;
+var LdapStrategy = require('passport-ldapauth');
+var JwtStrategy = require('passport-jwt').Strategy,
+    ExtractJwt = require('passport-jwt').ExtractJwt;
+
+// other required vars
+let logger = 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_db, input_users_db, input_logger) {
+  setLogger(input_logger)
+  setDB(input_db, input_users_db);
+
+  /*************************
+   * Authentication module
+   ************************/
+  saltRounds = 10;
+
+  JWT_EXPIRATION = config_api.getConfigItem('ytdl_jwt_expiration');
+
+  SERVER_SECRET = null;
+  if (users_db.get('jwt_secret').value()) {
+    SERVER_SECRET = users_db.get('jwt_secret').value();
+  } else {
+    SERVER_SECRET = uuid();
+    users_db.set('jwt_secret', SERVER_SECRET).write();
+  }
+
+  opts = {}
+  opts.jwtFromRequest = ExtractJwt.fromUrlQueryParameter('jwt');
+  opts.secretOrKey = SERVER_SECRET;
+  /*opts.issuer = 'example.com';
+  opts.audience = 'example.com';*/
+
+  exports.passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
+    const user = users_db.get('users').find({uid: jwt_payload.user}).value();
+    if (user) {
+        return done(null, user);
+    } else {
+        return done(null, false);
+        // or you could create a new account
+    }
+  }));
+}
+
+function setLogger(input_logger) {
+  logger = input_logger;
+}
+
+function setDB(input_db, input_users_db) {
+  db = input_db;
+  users_db = input_users_db;
+}
+
+exports.passport = require('passport');
+
+exports.passport.serializeUser(function(user, done) {
+    done(null, user);
+});
+
+exports.passport.deserializeUser(function(user, done) {
+    done(null, user);
+});
+
+/***************************************
+ * Register user with hashed password
+ **************************************/
+exports.registerUser = function(req, res) {
+  var userid = req.body.userid;
+  var username = req.body.username;
+  var plaintextPassword = req.body.password;
+
+  if (userid !== 'admin' && !config_api.getConfigItem('ytdl_allow_registration') && !req.isAuthenticated() && (!req.user || !exports.userHasPermission(req.user.uid, 'settings'))) {
+    res.sendStatus(409);
+    logger.error(`Registration failed for user ${userid}. Registration is disabled.`);
+    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);
+      // check if user exists
+      if (users_db.get('users').find({uid: userid}).value()) {
+        // user id is taken!
+        logger.error('Registration failed: UID is already taken!');
+        res.status(409).send('UID is already taken!');
+      } else if (users_db.get('users').find({name: username}).value()) {
+          // user name is taken!
+          logger.error('Registration failed: User name is already taken!');
+          res.status(409).send('User name is already taken!');
+      } else {
+        // add to db
+        users_db.get('users').push(new_user).write();
+        logger.verbose(`New user created: ${new_user.name}`);
+        res.send({
+          user: new_user
+        });
+      }
+    })
+    .then(function(result) {
+
+    })
+    .catch(function(err) {
+      logger.error(err);
+      if( err.code == 'ER_DUP_ENTRY' ) {
+        res.status(409).send('UserId already taken');
+      } else {
+        res.sendStatus(409);
+      }
+    });
+}
+
+/***************************************
+ * Login methods
+ **************************************/
+
+/*************************************************
+ * This gets called when passport.authenticate()
+ * gets called.
+ *
+ * This checks that the credentials are valid.
+ * If so, passes the user info to the next middleware.
+ ************************************************/
+
+
+exports.passport.use(new LocalStrategy({
+    usernameField: 'username',
+    passwordField: 'password'},
+    async function(username, password, done) {
+        const user = users_db.get('users').find({name: username}).value();
+        if (!user) { logger.error(`User ${username} not found`); return done(null, false); }
+        if (user.auth_method && user.auth_method !== 'internal') { return done(null, false); }
+        if (user) {
+            return done(null, (await bcrypt.compare(password, user.passhash)) ? user : false);
+        }
+    }
+));
+
+var getLDAPConfiguration = function(req, callback) {
+  const ldap_config = config_api.getConfigItem('ytdl_ldap_config');
+  const opts = {server: ldap_config};
+  callback(null, opts);
+};
+
+exports.passport.use(new LdapStrategy(getLDAPConfiguration,
+  function(user, done) {
+    // check if ldap auth is enabled
+    const ldap_enabled = config_api.getConfigItem('ytdl_auth_method') === 'ldap';
+    if (!ldap_enabled) return done(null, false);
+
+    const user_uid = user.uid;
+    let db_user = users_db.get('users').find({uid: user_uid}).value();
+    if (!db_user) {
+      // generate DB user
+      let new_user = generateUserObject(user_uid, user_uid, null, 'ldap');
+      users_db.get('users').push(new_user).write();
+      db_user = new_user;
+      logger.verbose(`Generated new user ${user_uid} using LDAP`);
+    }
+    return done(null, db_user);
+  }
+));
+
+
+/**********************************
+ * Generating/Signing a JWT token
+ * And attaches the user info into
+ * the payload to be sent on every
+ * request.
+ *********************************/
+exports.generateJWT = function(req, res, next) {
+  var payload = {
+      exp: Math.floor(Date.now() / 1000) + JWT_EXPIRATION
+    , user: req.user.uid
+  };
+  req.token = jwt.sign(payload, SERVER_SECRET);
+  next();
+}
+
+exports.returnAuthResponse = function(req, res) {
+  res.status(200).json({
+    user: req.user,
+    token: req.token,
+    permissions: exports.userPermissions(req.user.uid),
+    available_permissions: consts['AVAILABLE_PERMISSIONS']
+  });
+}
+
+/***************************************
+ * Authorization: middleware that checks the
+ * JWT token for validity before allowing
+ * the user to access anything.
+ *
+ * It also passes the user object to the next
+ * middleware through res.locals
+ **************************************/
+exports.ensureAuthenticatedElseError = function(req, res, next) {
+  var token = getToken(req.query);
+  if( token ) {
+    try {
+      var payload = jwt.verify(token, SERVER_SECRET);
+      // console.log('payload: ' + JSON.stringify(payload));
+      // check if user still exists in database if you'd like
+      res.locals.user = payload.user;
+      next();
+    } catch(err) {
+      res.status(401).send('Invalid Authentication');
+    }
+  } else {
+    res.status(401).send('Missing Authorization header');
+  }
+}
+
+// change password
+exports.changeUserPassword = async function(user_uid, new_pass) {
+  try {
+    const hash = await bcrypt.hash(new_pass, saltRounds);
+    users_db.get('users').find({uid: user_uid}).assign({passhash: hash}).write();
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+// change user permissions
+exports.changeUserPermissions = function(user_uid, permission, new_value) {
+  try {
+    const user_db_obj = users_db.get('users').find({uid: user_uid});
+    user_db_obj.get('permissions').pull(permission).write();
+    user_db_obj.get('permission_overrides').pull(permission).write();
+    if (new_value === 'yes') {
+      user_db_obj.get('permissions').push(permission).write();
+      user_db_obj.get('permission_overrides').push(permission).write();
+    } else if (new_value === 'no') {
+      user_db_obj.get('permission_overrides').push(permission).write();
+    }
+    return true;
+  } catch (err) {
+    logger.error(err);
+    return false;
+  }
+}
+
+// change role permissions
+exports.changeRolePermissions = function(role, permission, new_value) {
+  try {
+    const role_db_obj = users_db.get('roles').get(role);
+    role_db_obj.get('permissions').pull(permission).write();
+    if (new_value === 'yes') {
+      role_db_obj.get('permissions').push(permission).write();
+    }
+    return true;
+  } catch (err) {
+    logger.error(err);
+    return false;
+  }
+}
+
+exports.adminExists = function() {
+  return !!users_db.get('users').find({uid: 'admin'}).value();
+}
+
+// video stuff
+
+exports.getUserVideos = function(user_uid, type) {
+    const user = users_db.get('users').find({uid: user_uid}).value();
+    return type ? user['files'].filter(file => file.isAudio === (type === 'audio')) : user['files'];
+}
+
+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;
+
+  return file;
+}
+
+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) {
+  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) {
+  users_db.get('users').find({uid: user_uid}).get(`playlists`).remove({id: playlistID}).write();
+  return true;
+}
+
+exports.getUserPlaylists = function(user_uid, user_files = null) {
+  const user = users_db.get('users').find({uid: user_uid}).value();
+  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, 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;
+
+  return playlist;
+}
+
+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`)
+      .push(file_object)
+      .write();
+}
+
+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`).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';
+
+    // close descriptors
+    if (config_api.descriptors[file_obj.id]) {
+      try {
+          for (let i = 0; i < config_api.descriptors[file_obj.id].length; i++) {
+            config_api.descriptors[file_obj.id][i].destroy();
+          }
+      } catch(e) {
+
+      }
+    }
+
+    const full_path = path.join(usersFileFolder, user_uid, type, file_obj.id + ext);
+    users_db.get('users').find({uid: user_uid}).get(`files`)
+      .remove({
+          uid: file_uid
+      }).write();
+    if (await fs.pathExists(full_path)) {
+      // remove json and file
+      const json_path = path.join(usersFileFolder, user_uid, type, file_obj.id + '.info.json');
+      const alternate_json_path = path.join(usersFileFolder, user_uid, type, file_obj.id + ext + '.info.json');
+      let youtube_id = null;
+      if (await fs.pathExists(json_path)) {
+        youtube_id = await fs.readJSON(json_path).id;
+        await fs.unlink(json_path);
+      } else if (await fs.pathExists(alternate_json_path)) {
+        youtube_id = await fs.readJSON(alternate_json_path).id;
+        await fs.unlink(alternate_json_path);
+      }
+
+      await fs.unlink(full_path);
+
+      // do archive stuff
+
+      let useYoutubeDLArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
+      if (useYoutubeDLArchive) {
+          const archive_path = path.join(usersFileFolder, user_uid, 'archives', `archive_${type}.txt`);
+
+          // use subscriptions API to remove video from the archive file, and write it to the blacklist
+          if (await fs.pathExists(archive_path)) {
+              const line = youtube_id ? await subscriptions_api.removeIDFromArchive(archive_path, youtube_id) : null;
+              if (blacklistMode && line) {
+                let blacklistPath = path.join(usersFileFolder, user_uid, 'archives', `blacklist_${type}.txt`);
+                // adds newline to the beginning of the line
+                line = '\n' + line;
+                await fs.appendFile(blacklistPath, line);
+              }
+          } else {
+              logger.info(`Could not find archive file for ${type} files. Creating...`);
+              await fs.ensureFile(archive_path);
+          }
+      }
+    }
+    success = true;
+  } else {
+    success = false;
+    logger.warn(`User file ${file_uid} does not exist!`);
+  }
+
+  return success;
+}
+
+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`).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();
+    }
+  }
+
+  return success;
+}
+
+exports.userHasPermission = function(user_uid, permission) {
+  const user_obj = users_db.get('users').find({uid: user_uid}).value();
+  const role = user_obj['role'];
+  if (!role) {
+    // role doesn't exist
+    logger.error('Invalid role ' + role);
+    return false;
+  }
+  const role_permissions = (users_db.get('roles').value())['permissions'];
+
+  const user_has_explicit_permission = user_obj['permissions'].includes(permission);
+  const permission_in_overrides = user_obj['permission_overrides'].includes(permission);
+
+  // check if user has a negative/positive override
+  if (user_has_explicit_permission && permission_in_overrides) {
+    // positive override
+    return true;
+  } else if (!user_has_explicit_permission && permission_in_overrides) {
+    // negative override
+    return false;
+  }
+
+  // no overrides, let's check if the role has the permission
+  if (role_permissions.includes(permission)) {
+    return true;
+  } else {
+    logger.verbose(`User ${user_uid} failed to get permission ${permission}`);
+    return false;
+  }
+}
+
+exports.userPermissions = function(user_uid) {
+  let user_permissions = [];
+  const user_obj = users_db.get('users').find({uid: user_uid}).value();
+  const role = user_obj['role'];
+  if (!role) {
+    // role doesn't exist
+    logger.error('Invalid role ' + role);
+    return null;
+  }
+  const role_permissions = users_db.get('roles').get(role).get('permissions').value()
+
+  for (let i = 0; i < consts['AVAILABLE_PERMISSIONS'].length; i++) {
+    let permission = consts['AVAILABLE_PERMISSIONS'][i];
+
+    const user_has_explicit_permission = user_obj['permissions'].includes(permission);
+    const permission_in_overrides = user_obj['permission_overrides'].includes(permission);
+
+    // check if user has a negative/positive override
+    if (user_has_explicit_permission && permission_in_overrides) {
+      // positive override
+      user_permissions.push(permission);
+    } else if (!user_has_explicit_permission && permission_in_overrides) {
+      // negative override
+      continue;
+    }
+
+    // no overrides, let's check if the role has the permission
+    if (role_permissions.includes(permission)) {
+      user_permissions.push(permission);
+    } else {
+      continue;
+    }
+  }
+
+  return user_permissions;
+}
+
+function getToken(queryParams) {
+  if (queryParams && queryParams.jwt) {
+    var parted = queryParams.jwt.split(' ');
+    if (parted.length === 2) {
+      return parted[1];
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+};
+
+function generateUserObject(userid, username, hash, auth_method = 'internal') {
+  let new_user = {
+    name: username,
+    uid: userid,
+    passhash: auth_method === 'internal' ? hash : null,
+    files: [],
+    playlists: [],
+    subscriptions: [],
+    created: Date.now(),
+    role: userid === 'admin' && auth_method === 'internal' ? 'admin' : 'user',
+    permissions: [],
+    permission_overrides: [],
+    auth_method: auth_method
+  };
+  return new_user;
+}

backend/categories.js

@@ -0,0 +1,129 @@
+const config_api = require('./config');
+
+var logger = null;
+var db = null;
+var users_db = null;
+var db_api = null;
+
+function setDB(input_db, input_users_db, input_db_api) { db = input_db; users_db = input_users_db; db_api = input_db_api }
+function setLogger(input_logger) { logger = input_logger; }
+
+function initialize(input_db, input_users_db, input_logger, input_db_api) {
+    setDB(input_db, input_users_db, input_db_api);
+    setLogger(input_logger);
+}
+
+/*
+
+Categories:
+
+    Categories are a way to organize videos based on dynamic rules set by the user. Categories are universal (so not per-user).
+    
+    Categories, besides rules, have an optional custom output. This custom output can help users create their
+        desired directory structure.
+
+Rules:
+    A category rule consists of a property, a comparison, and a value. For example, "uploader includes 'VEVO'"
+
+    Rules are stored as an object with the above fields. In addition to those fields, it also has a preceding_operator, which
+        is either OR or AND, and signifies whether the rule should be ANDed with the previous rules, or just ORed. For the first
+        rule, this field is null.
+
+    Ex. (title includes 'Rihanna' OR title includes 'Beyonce' AND uploader includes 'VEVO')
+
+*/
+
+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;
+    }
+
+    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;
+}
+
+function getCategories() {
+    const categories = db.get('categories').value();
+    return categories ? categories : null;
+}
+
+function applyCategoryRules(file_json, rules, category_name) {
+    let rules_apply = false;
+    for (let i = 0; i < rules.length; i++) {
+        const rule = rules[i];
+        let rule_applies = null;
+
+        let preceding_operator = rule['preceding_operator'];
+
+        switch (rule['comparator']) {
+            case 'includes':
+                rule_applies = file_json[rule['property']].includes(rule['value']);
+                break;
+            case 'not_includes':
+                rule_applies = !(file_json[rule['property']].includes(rule['value']));
+                break;
+            case 'equals':
+                rule_applies = file_json[rule['property']] === rule['value'];
+                break;
+            case 'not_equals':
+                rule_applies = file_json[rule['property']] !== rule['value'];
+                break;
+            default:
+                logger.warn(`Invalid comparison used for category ${category_name}`)
+                break;
+        }
+
+        // OR the first rule with rules_apply, which will be initially false
+        if (i === 0) preceding_operator = 'or';
+
+        // update rules_apply based on current rule
+        if (preceding_operator === 'or')
+            rules_apply = rules_apply || rule_applies;
+        else
+            rules_apply = rules_apply && rule_applies;
+    }
+
+    return rules_apply;
+}
+
+async function addTagToVideo(tag, video, user_uid) {
+    // TODO: Implement
+}
+
+async function removeTagFromVideo(tag, video, user_uid) {
+    // TODO: Implement
+}
+
+// adds tag to list of existing tags (used for tag suggestions)
+async function addTagToExistingTags(tag) {
+    const existing_tags = db.get('tags').value();
+    if (!existing_tags.includes(tag)) {
+        db.get('tags').push(tag).write();
+    }
+}
+
+module.exports = {
+    initialize: initialize,
+    categorize: categorize,
+}

backend/config.js

@@ -5,6 +5,30 @@ const debugMode = process.env.YTDL_MODE === 'debug';
 
 let configPath = debugMode ? '../src/assets/default.json' : 'appdata/default.json';
 
+var logger = null;
+function setLogger(input_logger) { logger = input_logger; }
+
+function initialize(input_logger) {
+    setLogger(input_logger);
+    ensureConfigFileExists();
+    ensureConfigItemsExist();
+}
+
+function ensureConfigItemsExist() {
+    const config_keys = Object.keys(CONFIG_ITEMS);
+    for (let i = 0; i < config_keys.length; i++) {
+        const config_key = config_keys[i];
+        getConfigItem(config_key);
+    }
+}
+
+function ensureConfigFileExists() {
+    if (!fs.existsSync(configPath)) {
+        logger.info('Cannot find config file. Creating one with default values...');
+        fs.writeFileSync(configPath, JSON.stringify(DEFAULT_CONFIG, null, 2));
+    }
+}
+
 // https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key
 Object.byString = function(o, s) {
     s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
@@ -32,16 +56,26 @@ function getElementNameInConfig(path) {
     return elements[elements.length - 1];
 }
 
+/**
+ * Check if config exists. If not, write default config to config path
+ */
+function configExistsCheck() {
+    let exists = fs.existsSync(configPath);
+    if (!exists) {
+        setConfigFile(DEFAULT_CONFIG);
+    }
+}
+
 /*
 * Gets config file and returns as a json
 */
 function getConfigFile() {
-    let raw_data = fs.readFileSync(configPath);
     try {
+        let raw_data = fs.readFileSync(configPath);
         let parsed_data = JSON.parse(raw_data);
         return parsed_data;
     } catch(e) {
-        console.log('ERROR: Failed to get config file');
+        logger.error('Failed to get config file');
         return null;
     }
 }
@@ -58,10 +92,16 @@ function setConfigFile(config) {
 function getConfigItem(key) {
     let config_json = getConfigFile();
     if (!CONFIG_ITEMS[key]) {
-        console.log('cannot find config with key ' + key);
+        logger.error(`Config item with key '${key}' is not recognized.`);
         return null;
     }
     let path = CONFIG_ITEMS[key]['path'];
+    const val = Object.byString(config_json, path);
+    if (val === undefined && Object.byString(DEFAULT_CONFIG, path)) {
+        logger.warn(`Cannot find config with key '${key}'. Creating one with the default value...`);
+        setConfigItem(key, Object.byString(DEFAULT_CONFIG, path));
+        return Object.byString(DEFAULT_CONFIG, path);
+    }
     return Object.byString(config_json, path);
 };
 
@@ -69,16 +109,23 @@ function setConfigItem(key, value) {
     let success = false;
     let config_json = getConfigFile();
     let path = CONFIG_ITEMS[key]['path'];
-    let parent_path = getParentPath(path);
     let element_name = getElementNameInConfig(path);
-    
+    let parent_path = getParentPath(path);
     let parent_object = Object.byString(config_json, parent_path);
+    if (!parent_object) {
+        let parent_parent_path = getParentPath(parent_path);
+        let parent_parent_object = Object.byString(config_json, parent_parent_path);
+        let parent_path_arr = parent_path.split('.');
+        let parent_parent_single_key = parent_path_arr[parent_path_arr.length-1];
+        parent_parent_object[parent_parent_single_key] = {};
+        parent_object = Object.byString(config_json, parent_path);
+    }
+
     if (value === 'false' || value === 'true') {
         parent_object[element_name] = (value === 'true');
     } else {
         parent_object[element_name] = value;
     }
-
     success = setConfigFile(config_json);
 
     return success;
@@ -99,7 +146,7 @@ function setConfigItems(items) {
         let item_path = CONFIG_ITEMS[key]['path'];
         let item_parent_path = getParentPath(item_path);
         let item_element_name = getElementNameInConfig(item_path);
-        
+
         let item_parent_object = Object.byString(config_json, item_parent_path);
         item_parent_object[item_element_name] = value;
     }
@@ -108,11 +155,91 @@ function setConfigItems(items) {
     return success;
 }
 
+function globalArgsRequiresSafeDownload() {
+    const globalArgs = getConfigItem('ytdl_custom_args').split(',,');
+    const argsThatRequireSafeDownload = ['--write-sub', '--write-srt', '--proxy'];
+    const failedArgs = globalArgs.filter(arg => argsThatRequireSafeDownload.includes(arg));
+    return failedArgs && failedArgs.length > 0;
+}
+
 module.exports = {
     getConfigItem: getConfigItem,
     setConfigItem: setConfigItem,
     setConfigItems: setConfigItems,
     getConfigFile: getConfigFile,
     setConfigFile: setConfigFile,
-    CONFIG_ITEMS: CONFIG_ITEMS
-}
+    configExistsCheck: configExistsCheck,
+    CONFIG_ITEMS: CONFIG_ITEMS,
+    initialize: initialize,
+    descriptors: {},
+    globalArgsRequiresSafeDownload: globalArgsRequiresSafeDownload
+}
+
+DEFAULT_CONFIG = {
+    "YoutubeDLMaterial": {
+      "Host": {
+        "url": "http://example.com",
+        "port": "17442"
+      },
+      "Downloader": {
+        "path-audio": "audio/",
+        "path-video": "video/",
+        "default_file_output": "",
+        "use_youtubedl_archive": false,
+        "custom_args": "",
+        "safe_download_override": false,
+        "include_thumbnail": true,
+        "include_metadata": true
+      },
+      "Extra": {
+        "title_top": "YoutubeDL-Material",
+        "file_manager_enabled": true,
+        "allow_quality_select": true,
+        "download_only_mode": false,
+        "allow_multi_download_mode": true,
+        "enable_downloads_manager": true,
+        "allow_playlist_categorization": true
+      },
+      "API": {
+        "use_API_key": false,
+        "API_key": "",
+        "use_youtube_API": false,
+        "youtube_API_key": "",
+        "use_twitch_API": false,
+        "twitch_API_key": "",
+        "twitch_auto_download_chat": false
+      },
+      "Themes": {
+        "default_theme": "default",
+        "allow_theme_change": true
+      },
+      "Subscriptions": {
+        "allow_subscriptions": true,
+        "subscriptions_base_path": "subscriptions/",
+        "subscriptions_check_interval": "300",
+        "redownload_fresh_uploads": false
+      },
+      "Users": {
+        "base_path": "users/",
+        "allow_registration": true,
+        "auth_method": "internal",
+        "ldap_config": {
+            "url": "ldap://localhost:389",
+            "bindDN": "cn=root",
+            "bindCredentials": "secret",
+            "searchBase": "ou=passport-ldapauth",
+            "searchFilter": "(uid={{username}})"
+        }
+      },
+      "Advanced": {
+        "default_downloader": "youtube-dl",
+        "use_default_downloading_agent": true,
+        "custom_downloading_agent": "",
+        "multi_user_mode": false,
+        "allow_advanced_download": false,
+        "use_cookies": false,
+        "jwt_expiration": 86400,
+        "logger_level": "info"
+      }
+    }
+  }

backend/consts.js

@@ -9,20 +9,6 @@ let CONFIG_ITEMS = {
         'path': 'YoutubeDLMaterial.Host.port'
     },
 
-    // Encryption
-    'ytdl_use_encryption': {
-        'key': 'ytdl_use_encryption',
-        'path': 'YoutubeDLMaterial.Encryption.use-encryption'
-    },
-    'ytdl_cert_file_path': {
-        'key': 'ytdl_cert_file_path',
-        'path': 'YoutubeDLMaterial.Encryption.cert-file-path'
-    },
-    'ytdl_key_file_path': {
-        'key': 'ytdl_key_file_path',
-        'path': 'YoutubeDLMaterial.Encryption.key-file-path'
-    },
-
     // Downloader
     'ytdl_audio_folder_path': {
         'key': 'ytdl_audio_folder_path',
@@ -32,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'
@@ -40,6 +30,18 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_custom_args',
         'path': 'YoutubeDLMaterial.Downloader.custom_args'
     },
+    'ytdl_safe_download_override': {
+        'key': 'ytdl_safe_download_override',
+        'path': 'YoutubeDLMaterial.Downloader.safe_download_override'
+    },
+    'ytdl_include_thumbnail': {
+        'key': 'ytdl_include_thumbnail',
+        'path': 'YoutubeDLMaterial.Downloader.include_thumbnail'
+    },
+    'ytdl_include_metadata': {
+        'key': 'ytdl_include_metadata',
+        'path': 'YoutubeDLMaterial.Downloader.include_metadata'
+    },
 
     // Extra
     'ytdl_title_top': {
@@ -62,12 +64,24 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_allow_multi_download_mode',
         'path': 'YoutubeDLMaterial.Extra.allow_multi_download_mode'
     },
-    'ytdl_settings_pin_required': {
-        'key': 'ytdl_settings_pin_required',
-        'path': 'YoutubeDLMaterial.Extra.settings_pin_required'
+    'ytdl_enable_downloads_manager': {
+        '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': {
+        'key': 'ytdl_use_api_key',
+        'path': 'YoutubeDLMaterial.API.use_API_key'
+    },
+    'ytdl_api_key': {
+        'key': 'ytdl_api_key',
+        'path': 'YoutubeDLMaterial.API.API_key'
+    },
     'ytdl_use_youtube_api': {
         'key': 'ytdl_use_youtube_api',
         'path': 'YoutubeDLMaterial.API.use_youtube_API'
@@ -76,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': {
@@ -104,12 +130,34 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_subscriptions_check_interval',
         'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
     },
-    'ytdl_subscriptions_use_youtubedl_archive': {
-        'key': 'ytdl_use_youtubedl_archive',
-        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_use_youtubedl_archive'
+    'ytdl_subscriptions_redownload_fresh_uploads': {
+        'key': 'ytdl_subscriptions_redownload_fresh_uploads',
+        'path': 'YoutubeDLMaterial.Subscriptions.redownload_fresh_uploads'
+    },
+
+    // Users
+    'ytdl_users_base_path': {
+        'key': 'ytdl_users_base_path',
+        'path': 'YoutubeDLMaterial.Users.base_path'
+    },
+    'ytdl_allow_registration': {
+        'key': 'ytdl_allow_registration',
+        'path': 'YoutubeDLMaterial.Users.allow_registration'
+    },
+    'ytdl_auth_method': {
+        'key': 'ytdl_auth_method',
+        'path': 'YoutubeDLMaterial.Users.auth_method'
+    },
+    'ytdl_ldap_config': {
+        'key': 'ytdl_ldap_config',
+        'path': 'YoutubeDLMaterial.Users.ldap_config'
     },
 
     // Advanced
+    'ytdl_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'
@@ -118,10 +166,39 @@ let CONFIG_ITEMS = {
         'key': 'ytdl_custom_downloading_agent',
         'path': 'YoutubeDLMaterial.Advanced.custom_downloading_agent'
     },
+    'ytdl_multi_user_mode': {
+        'key': 'ytdl_multi_user_mode',
+        'path': 'YoutubeDLMaterial.Advanced.multi_user_mode'
+    },
     'ytdl_allow_advanced_download': {
         'key': 'ytdl_allow_advanced_download',
         'path': 'YoutubeDLMaterial.Advanced.allow_advanced_download'
     },
+    'ytdl_use_cookies': {
+        'key': 'ytdl_use_cookies',
+        'path': 'YoutubeDLMaterial.Advanced.use_cookies'
+    },
+    'ytdl_jwt_expiration': {
+        'key': 'ytdl_jwt_expiration',
+        'path': 'YoutubeDLMaterial.Advanced.jwt_expiration'
+    },
+    'ytdl_logger_level': {
+        'key': 'ytdl_logger_level',
+        'path': 'YoutubeDLMaterial.Advanced.logger_level'
+    }
 };
 
-module.exports.CONFIG_ITEMS = CONFIG_ITEMS;
+AVAILABLE_PERMISSIONS = [
+    'filemanager',
+    'settings',
+    'subscriptions',
+    'sharing',
+    'advanced_download',
+    'downloads_manager'
+];
+
+module.exports = {
+    CONFIG_ITEMS: CONFIG_ITEMS,
+    AVAILABLE_PERMISSIONS: AVAILABLE_PERMISSIONS,
+    CURRENT_VERSION: 'v4.2'
+}

backend/db.js

@@ -0,0 +1,235 @@
+var fs = require('fs-extra')
+var path = require('path')
+var utils = require('./utils')
+const { uuid } = require('uuidv4');
+const config_api = require('./config');
+
+var logger = null;
+var db = null;
+var users_db = null;
+function setDB(input_db, input_users_db) { db = input_db; users_db = input_users_db }
+function setLogger(input_logger) { logger = input_logger; }
+
+function initialize(input_db, input_users_db, input_logger) {
+    setDB(input_db, input_users_db);
+    setLogger(input_logger);
+}
+
+function registerFileDB(file_path, type, multiUserMode = null, sub = null, customPath = null, category = null) {
+    let db_path = null;
+    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}`);
+        return false;
+    }
+
+    utils.fixVideoMetadataPerms(file_id, type, multiUserMode && multiUserMode.file_path);
+
+    // add thumbnail path
+    file_object['thumbnailPath'] = utils.getDownloadedThumbnail(file_id, type, customPath || multiUserMode && multiUserMode.file_path);
+
+    // if category exists, only include essential info
+    if (category) file_object['category'] = {name: category['name'], uid: category['uid']};
+
+    if (!sub) {
+        if (multiUserMode) {
+            const user_uid = multiUserMode.user;
+            db_path = users_db.get('users').find({uid: user_uid}).get(`files`);
+        } else {
+            db_path = db.get(`files`);
+        }
+    } else {
+        if (multiUserMode) {
+            const user_uid = multiUserMode.user;
+            db_path = users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id}).get('videos');
+        } else {
+            db_path = db.get('subscriptions').find({id: sub.id}).get('videos');
+        }
+    }
+
+    const file_uid = registerFileDBManual(db_path, file_object);
+
+    // remove metadata JSON if needed
+    if (!config_api.getConfigItem('ytdl_include_metadata')) {
+        utils.deleteJSONFile(file_id, type, multiUserMode && multiUserMode.file_path)
+    }
+
+    return file_uid;
+}
+
+function registerFileDBManual(db_path, file_object) {
+    // add additional info
+    file_object['uid'] = uuid();
+    file_object['registered'] = Date.now();
+    path_object = path.parse(file_object['path']);
+    file_object['path'] = path.format(path_object);
+
+    // remove duplicate(s)
+    db_path.remove({path: file_object['path']}).write();
+
+    // add new file to db
+    db_path.push(file_object).write();
+    return file_object['uid'];
+}
+
+function generateFileObject(id, type, customPath = null, sub = null) {
+    if (!customPath && sub) {
+        customPath = getAppendedBasePathSub(sub, config_api.getConfigItem('ytdl_subscriptions_base_path'));
+    }
+    var jsonobj = (type === 'audio') ? utils.getJSONMp3(id, customPath, true) : utils.getJSONMp4(id, customPath, true);
+    if (!jsonobj) {
+        return null;
+    }
+    const ext = (type === 'audio') ? '.mp3' : '.mp4'
+    const file_path = utils.getTrueFileName(jsonobj['_filename'], type); // path.join(type === 'audio' ? audioFolderPath : videoFolderPath, id + ext);
+    // console.
+    var stats = fs.statSync(path.join(__dirname, file_path));
+
+    var title = jsonobj.title;
+    var url = jsonobj.webpage_url;
+    var uploader = jsonobj.uploader;
+    var upload_date = jsonobj.upload_date;
+    upload_date = upload_date ? `${upload_date.substring(0, 4)}-${upload_date.substring(4, 6)}-${upload_date.substring(6, 8)}` : 'N/A';
+
+    var size = stats.size;
+
+    var thumbnail = jsonobj.thumbnail;
+    var duration = jsonobj.duration;
+    var isaudio = type === 'audio';
+    var description = jsonobj.description;
+    var file_obj = new utils.File(id, title, thumbnail, isaudio, duration, url, uploader, size, file_path, upload_date, description, jsonobj.view_count, jsonobj.height, jsonobj.abr);
+    return file_obj;
+}
+
+function updatePlaylist(playlist, user_uid) {
+    let playlistID = playlist.id;
+    let db_loc = null;
+    if (user_uid) {
+        db_loc = users_db.get('users').find({uid: user_uid}).get(`playlists`).find({id: playlistID});
+    } else {
+        db_loc = db.get(`playlists`).find({id: playlistID});
+    }
+    db_loc.assign(playlist).write();
+    return true;
+}
+
+function getAppendedBasePathSub(sub, base_path) {
+    return path.join(base_path, (sub.isPlaylist ? 'playlists/' : 'channels/'), sub.name);
+}
+
+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
+    const multi_user_mode = config_api.getConfigItem('ytdl_multi_user_mode');
+    const usersFileFolder = config_api.getConfigItem('ytdl_users_base_path');
+    const subscriptions_enabled = config_api.getConfigItem('ytdl_allow_subscriptions');
+    if (multi_user_mode) {
+        let users = users_db.get('users').value();
+        for (let i = 0; i < users.length; i++) {
+            const user = users[i];
+
+            if (subscriptions_enabled) subscriptions_to_check = subscriptions_to_check.concat(users[i]['subscriptions']);
+
+            // 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'),
+                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'),
+                type: 'video'
+            });
+        }
+    } else {
+        const audioFolderPath = config_api.getConfigItem('ytdl_audio_folder_path');
+        const videoFolderPath = config_api.getConfigItem('ytdl_video_folder_path');
+        const subscriptions = db.get('subscriptions').value();
+
+        if (subscriptions_enabled && subscriptions) subscriptions_to_check = subscriptions_to_check.concat(subscriptions);
+
+        // add audio dir to check list
+        dirs_to_check.push({
+            basePath: audioFolderPath,
+            dbPath: db.get('files'),
+            type: 'audio'
+        });
+
+        // add video dir to check list
+        dirs_to_check.push({
+            basePath: videoFolderPath,
+            dbPath: db.get('files'),
+            type: 'video'
+        });
+    }
+
+    // add subscriptions to check list
+    for (let i = 0; i < subscriptions_to_check.length; i++) {
+        let subscription_to_check = subscriptions_to_check[i];
+        if (!subscription_to_check.name) {
+            // TODO: Remove subscription as it'll never complete
+            continue;
+        }
+        dirs_to_check.push({
+            basePath: multi_user_mode ? path.join(usersFileFolder, subscription_to_check.user_uid, 'subscriptions', subscription_to_check.isPlaylist ? 'playlists/' : 'channels/', subscription_to_check.name)
+                                      : path.join(subscriptions_base_path, subscription_to_check.isPlaylist ? 'playlists/' : 'channels/', subscription_to_check.name),
+            dbPath: multi_user_mode ? users_db.get('users').find({uid: subscription_to_check.user_uid}).get('subscriptions').find({id: subscription_to_check.id}).get('videos')
+                                    : db.get('subscriptions').find({id: subscription_to_check.id}).get('videos'),
+            type: subscription_to_check.type
+        });
+    }
+
+    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
+        const files = await utils.getDownloadedFilesByType(dir_to_check.basePath, dir_to_check.type);
+
+        files.forEach(file => {
+            // check if file exists in db, if not add it
+            const file_is_registered = !!(dir_to_check.dbPath.find({id: file.id}).value())
+            if (!file_is_registered) {
+                // add additional info
+                registerFileDBManual(dir_to_check.dbPath, file);
+                logger.verbose(`Added discovered file to the database: ${file.id}`);
+            }
+        });
+    }
+
+}
+
+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,
+    getFileDirectoriesAndDBs: getFileDirectoriesAndDBs,
+    importUnregisteredFiles: importUnregisteredFiles,
+    getVideo: getVideo,
+    setVideoProperty: setVideoProperty
+}

backend/entrypoint.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+set -eu
+
+CMD="node app.js"
+
+# if the first arg starts with "-" pass it to program
+if [ "${1#-}" != "$1" ]; then
+  set -- "$CMD" "$@"
+fi
+
+# chown current working directory to current user
+if [ "$*" = "$CMD" ] && [ "$(id -u)" = "0" ]; then
+  find . \! -user "$UID" -exec chown "$UID:$GID" -R '{}' + || echo "WARNING! Could not change directory ownership. If you manage permissions externally this is fine, otherwise you may experience issues when downloading or deleting videos."
+  exec su-exec "$UID:$GID" "$0" "$@"
+fi
+
+exec "$@"

backend/package.json

@@ -5,7 +5,17 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node app.js"
+    "start": "nodemon -q app.js"
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "*.js",
+      "appdata/*",
+      "public/*"
+    ],
+    "watch": [
+      "restart.json"
+    ]
   },
   "repository": {
     "type": "git",
@@ -20,17 +30,36 @@
   "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",
     "exe": "^1.0.2",
     "express": "^4.17.1",
+    "fluent-ffmpeg": "^2.1.2",
+    "fs-extra": "^9.0.0",
+    "glob": "^7.1.6",
+    "jsonwebtoken": "^8.5.1",
     "lowdb": "^1.0.0",
     "md5": "^2.2.1",
-    "node-id3": "^0.1.14",
     "merge-files": "^0.1.2",
-    "node-fetch": "^2.6.0",
+    "moment": "^2.29.1",
+    "multer": "^1.4.2",
+    "node-fetch": "^2.6.1",
+    "node-id3": "^0.1.14",
+    "nodemon": "^2.0.2",
+    "passport": "^0.4.1",
+    "passport-http": "^0.3.0",
+    "passport-jwt": "^4.0.0",
+    "passport-ldapauth": "^2.1.4",
+    "passport-local": "^1.0.0",
+    "progress": "^2.0.3",
+    "ps-node": "^0.1.6",
+    "read-last-lines": "^1.7.2",
     "shortid": "^2.2.15",
+    "unzipper": "^0.10.10",
     "uuidv4": "^6.0.6",
+    "winston": "^3.2.1",
     "youtube-dl": "^3.0.2"
   }
 }

backend/subscriptions.js

@@ -1,19 +1,30 @@
-const low = require('lowdb')
 const FileSync = require('lowdb/adapters/FileSync')
 
-var fs = require('fs');
+var fs = require('fs-extra');
 const { uuid } = require('uuidv4');
 var path = require('path');
 
 var youtubedl = require('youtube-dl');
 const config_api = require('./config');
-
-const adapter = new FileSync('./appdata/db.json');
-const db = low(adapter)
+const twitch_api = require('./twitch');
+var utils = require('./utils');
 
 const debugMode = process.env.YTDL_MODE === 'debug';
 
-async function subscribe(sub) {
+var logger = null;
+var db = null;
+var users_db = null;
+var db_api = null;
+
+function setDB(input_db, input_users_db, input_db_api) { db = input_db; users_db = input_users_db; db_api = input_db_api }
+function setLogger(input_logger) { logger = input_logger; }
+
+function initialize(input_db, input_users_db, input_logger, input_db_api) {
+    setDB(input_db, input_users_db, input_db_api);
+    setLogger(input_logger);
+}
+
+async function subscribe(sub, user_uid = null) {
     const result_obj = {
         success: false,
         error: ''
@@ -21,41 +32,76 @@ async function subscribe(sub) {
     return new Promise(async resolve => {
         // sub should just have url and name. here we will get isPlaylist and path
         sub.isPlaylist = sub.url.includes('playlist');
+        sub.videos = [];
 
-        if (db.get('subscriptions').find({url: sub.url}).value()) {
-            console.log('Sub already exists');
-            result_obj.error = 'Subcription with URL ' + sub.url + ' already exists!';
+        let url_exists = false;
+
+        if (user_uid)
+            url_exists = !!users_db.get('users').find({uid: user_uid}).get('subscriptions').find({url: sub.url}).value()
+        else
+            url_exists = !!db.get('subscriptions').find({url: sub.url}).value();
+
+        if (!sub.name && url_exists) {
+            logger.error(`Sub with the same URL "${sub.url}" already exists -- please provide a custom name for this new subscription.`);
+            result_obj.error = 'Subcription with URL ' + sub.url + ' already exists! Custom name is required.';
             resolve(result_obj);
             return;
         }
 
         // add sub to db
-        db.get('subscriptions').push(sub).write();
+        let sub_db = null;
+        if (user_uid) {
+            users_db.get('users').find({uid: user_uid}).get('subscriptions').push(sub).write();
+            sub_db = users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id});
+        } else {
+            db.get('subscriptions').push(sub).write();
+            sub_db = db.get('subscriptions').find({id: sub.id});
+        }
+        let success = await getSubscriptionInfo(sub, user_uid);
+
+        if (success) {
+            sub = sub_db.value();
+            getVideosForSub(sub, user_uid);
+        } else {
+            logger.error('Subscribe: Failed to get subscription info. Subscribe failed.')
+        };
 
-        let success = await getSubscriptionInfo(sub);
         result_obj.success = success;
         result_obj.sub = sub;
-        getVideosForSub(sub);
         resolve(result_obj);
     });
-    
+
 }
 
-async function getSubscriptionInfo(sub) {
-    const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+async function getSubscriptionInfo(sub, user_uid = null) {
+    let basePath = null;
+    if (user_uid)
+        basePath = path.join(config_api.getConfigItem('ytdl_users_base_path'), user_uid, 'subscriptions');
+    else
+        basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+
+    // get videos
+    let downloadConfig = ['--dump-json', '--playlist-end', '1'];
+    let useCookies = config_api.getConfigItem('ytdl_use_cookies');
+    if (useCookies) {
+        if (await fs.pathExists(path.join(__dirname, 'appdata', 'cookies.txt'))) {
+            downloadConfig.push('--cookies', path.join('appdata', 'cookies.txt'));
+        } else {
+            logger.warn('Cookies file could not be found. You can either upload one, or disable \'use cookies\' in the Advanced tab in the settings.');
+        }
+    }
+
     return new Promise(resolve => {
-        // get videos 
-        let downloadConfig = ['--dump-json', '--playlist-end', '1']
         youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
             if (debugMode) {
-                console.log('Subscribe: got info for subscription ' + sub.id);
+                logger.info('Subscribe: got info for subscription ' + sub.id);
             }
             if (err) {
-                console.log(err.stderr);
+                logger.error(err.stderr);
                 resolve(false);
             } else if (output) {
                 if (output.length === 0 || (output.length === 1 && output[0] === '')) {
-                    if (debugMode) console.log('Could not get info for ' + sub.id);
+                    logger.verbose('Could not get info for ' + sub.id);
                     resolve(false);
                 }
                 for (let i = 0; i < output.length; i++) {
@@ -68,31 +114,37 @@ async function getSubscriptionInfo(sub) {
                     if (!output_json) {
                         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) {
-                            db.get('subscriptions').find({id: sub.id}).assign({name: sub.name}).write();
+                            if (user_uid)
+                                users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id}).assign({name: sub.name}).write();
+                            else
+                                db.get('subscriptions').find({id: sub.id}).assign({name: sub.name}).write();
                         }
                     }
 
-                    if (!sub.archive) {
+                    const useArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
+                    if (useArchive && !sub.archive) {
                         // must create the archive
-                        const archive_dir = basePath + 'archives/' + sub.name;
+                        const archive_dir = path.join(__dirname, basePath, 'archives', sub.name);
                         const archive_path = path.join(archive_dir, 'archive.txt');
 
                         // creates archive directory and text file if it doesn't exist
-                        if (!fs.existsSync(archive_dir)) {
-                            fs.mkdirSync(archive_dir);
-                            fs.closeSync(fs.openSync(archive_path, 'w'));
-                        } else if (!fs.existsSync(archive_path)) {
-                            fs.closeSync(fs.openSync(archive_path, 'w'));
-                        }
+                        fs.ensureDirSync(archive_dir);
+                        fs.ensureFileSync(archive_path);
 
                         // updates subscription
                         sub.archive = archive_dir;
-                        db.get('subscriptions').find({id: sub.id}).assign({archive: archive_dir}).write();
+                        if (user_uid)
+                            users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id}).assign({archive: archive_dir}).write();
+                        else
+                            db.get('subscriptions').find({id: sub.id}).assign({archive: archive_dir}).write();
                     }
 
                     // TODO: get even more info
@@ -105,124 +157,173 @@ async function getSubscriptionInfo(sub) {
     });
 }
 
-async function unsubscribe(sub, deleteMode) {
-    return new Promise(async resolve => {
-        const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
-        let result_obj = { success: false, error: '' };
+async function unsubscribe(sub, deleteMode, user_uid = null) {
+    let basePath = null;
+    if (user_uid)
+        basePath = path.join(config_api.getConfigItem('ytdl_users_base_path'), user_uid, 'subscriptions');
+    else
+        basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+    let result_obj = { success: false, error: '' };
 
-        let id = sub.id;
+    let id = sub.id;
+    if (user_uid)
+        users_db.get('users').find({uid: user_uid}).get('subscriptions').remove({id: id}).write();
+    else
         db.get('subscriptions').remove({id: id}).write();
 
-        const appendedBasePath = getAppendedBasePath(sub, basePath);
-        if (deleteMode && fs.existsSync(appendedBasePath)) {
-            if (sub.archive && fs.existsSync(sub.archive)) {
-                const archive_file_path = path.join(sub.archive, 'archive.txt');
-                // deletes archive if it exists
-                if (fs.existsSync(archive_file_path)) {
-                    fs.unlinkSync(archive_file_path);
-                }
-                fs.rmdirSync(sub.archive);
-            }
-            deleteFolderRecursive(appendedBasePath);
-        }
-    });
+    // failed subs have no name, on unsubscribe they shouldn't error
+    if (!sub.name) {
+        return;
+    }
 
+    const appendedBasePath = getAppendedBasePath(sub, basePath);
+    if (deleteMode && (await fs.pathExists(appendedBasePath))) {
+        if (sub.archive && (await fs.pathExists(sub.archive))) {
+            const archive_file_path = path.join(sub.archive, 'archive.txt');
+            // deletes archive if it exists
+            if (await fs.pathExists(archive_file_path)) {
+                await fs.unlink(archive_file_path);
+            }
+            await fs.rmdir(sub.archive);
+        }
+        await fs.remove(appendedBasePath);
+    }
 }
 
-async function deleteSubscriptionFile(sub, file, deleteForever) {
-    const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
-    const useArchive = config_api.getConfigItem('ytdl_subscriptions_use_youtubedl_archive');
+async function deleteSubscriptionFile(sub, file, deleteForever, file_uid = null, user_uid = null) {
+    let basePath = null;
+    let sub_db = null;
+    if (user_uid) {
+        basePath = path.join(config_api.getConfigItem('ytdl_users_base_path'), user_uid, 'subscriptions');
+        sub_db = users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id});
+    } else {
+        basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+        sub_db = db.get('subscriptions').find({id: sub.id});
+    }
+    const useArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
     const appendedBasePath = getAppendedBasePath(sub, basePath);
     const name = file;
     let retrievedID = null;
-    return new Promise(resolve => {
-        let filePath = appendedBasePath;
-        var jsonPath = path.join(__dirname,filePath,name+'.info.json');
-        var videoFilePath = path.join(__dirname,filePath,name+'.mp4');
-        var imageFilePath = path.join(__dirname,filePath,name+'.jpg');
+    sub_db.get('videos').remove({uid: file_uid}).write();
 
-        jsonExists = fs.existsSync(jsonPath);
-        videoFileExists = fs.existsSync(videoFilePath);
-        imageFileExists = fs.existsSync(imageFilePath);
+    let filePath = appendedBasePath;
+    const ext = (sub.type && sub.type === 'audio') ? '.mp3' : '.mp4'
+    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+'.webp');
 
-        if (jsonExists) {
-            retrievedID = JSON.parse(fs.readFileSync(jsonPath, 'utf8'))['id'];
-            fs.unlinkSync(jsonPath);
-        }
+    const [jsonExists, videoFileExists, imageFileExists, altImageFileExists] = await Promise.all([
+        fs.pathExists(jsonPath),
+        fs.pathExists(videoFilePath),
+        fs.pathExists(imageFilePath),
+        fs.pathExists(altImageFilePath),
+    ]);
 
-        if (imageFileExists) {
-            fs.unlinkSync(imageFilePath);
-        }
+    if (jsonExists) {
+        retrievedID = JSON.parse(await fs.readFile(jsonPath, 'utf8'))['id'];
+        await fs.unlink(jsonPath);
+    }
 
-        if (videoFileExists) {
-            fs.unlink(videoFilePath, function(err) {
-                if (fs.existsSync(jsonPath) || fs.existsSync(videoFilePath)) {
-                    resolve(false);
-                } else {
-                    // check if the user wants the video to be redownloaded (deleteForever === false)
-                    if (!deleteForever && useArchive && sub.archive && retrievedID) {
-                        const archive_path = path.join(sub.archive, 'archive.txt')
-                        // if archive exists, remove line with video ID
-                        if (fs.existsSync(archive_path)) {
-                            removeIDFromArchive(archive_path, retrievedID);
-                        }
-                    }
-                    resolve(true);
-                }
-            });
+    if (imageFileExists) {
+        await fs.unlink(imageFilePath);
+    }
+
+    if (altImageFileExists) {
+        await fs.unlink(altImageFilePath);
+    }
+
+    if (videoFileExists) {
+        await fs.unlink(videoFilePath);
+        if ((await fs.pathExists(jsonPath)) || (await fs.pathExists(videoFilePath))) {
+            return false;
         } else {
-            // TODO: tell user that the file didn't exist
-            resolve(true);
+            // check if the user wants the video to be redownloaded (deleteForever === false)
+            if (!deleteForever && useArchive && sub.archive && retrievedID) {
+                const archive_path = path.join(sub.archive, 'archive.txt')
+                // if archive exists, remove line with video ID
+                if (await fs.pathExists(archive_path)) {
+                    await removeIDFromArchive(archive_path, retrievedID);
+                }
+            }
+            return true;
         }
-        
-    });
+    } else {
+        // TODO: tell user that the file didn't exist
+        return true;
+    }
 }
 
-async function getVideosForSub(sub) {
+async function getVideosForSub(sub, user_uid = null) {
+    // get sub_db
+    let sub_db = null;
+    if (user_uid)
+        sub_db = users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id});
+    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)
+        basePath = path.join(config_api.getConfigItem('ytdl_users_base_path'), user_uid, 'subscriptions');
+    else
+        basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
+
+    let appendedBasePath = getAppendedBasePath(sub, basePath);
+
+    let multiUserMode = null;
+    if (user_uid) {
+        multiUserMode = {
+            user: user_uid,
+            file_path: appendedBasePath
+        }
+    }
+
+    const downloadConfig = await generateArgsForSubscription(sub, user_uid);
+
+    // get videos
+    logger.verbose('Subscription: getting videos for subscription ' + sub.name);
+
     return new Promise(resolve => {
-        if (!subExists(sub.id)) {
-            resolve(false);
-            return;
-        }
-        const basePath = config_api.getConfigItem('ytdl_subscriptions_base_path');
-        const useArchive = config_api.getConfigItem('ytdl_subscriptions_use_youtubedl_archive');
-
-        let appendedBasePath = null
-        if (sub.name) {
-            appendedBasePath = getAppendedBasePath(sub, basePath);
-        } else {
-            appendedBasePath = basePath + (sub.isPlaylist ? 'playlists/%(playlist_title)s' : 'channels/%(uploader)s');
-        }
-
-        let downloadConfig = ['-o', appendedBasePath + '/%(title)s.mp4', '-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4', '-ciw', '--write-annotations', '--write-thumbnail', '--write-info-json', '--print-json'];
-
-        if (sub.timerange) {
-            downloadConfig.push('--dateafter', sub.timerange);
-        }
-
-        let archive_dir = null;
-        let archive_path = null;
-
-        if (useArchive) {
-            if (sub.archive) {
-                archive_dir = sub.archive;
-                archive_path = path.join(archive_dir, 'archive.txt')
-            }
-            downloadConfig.push('--download-archive', archive_path);
-        }
-
-        // get videos 
-        youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
-            if (debugMode) {
-                console.log('Subscribe: got videos for subscription ' + sub.name);
-            }
-            if (err) {
-                console.log(err.stderr);
+        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] === '')) {
-                    if (debugMode) console.log('No additional videos to download for ' + sub.name);
+                    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;
@@ -235,53 +336,260 @@ async function getVideosForSub(sub) {
                         continue;
                     }
 
-                    // TODO: Potentially store downloaded files in db?
-        
+                    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 (desired_path) {
+        fullOutput = `${desired_path}.%(ext)s`;
+    } else if (sub.custom_output) {
+        fullOutput = `${appendedBasePath}/${sub.custom_output}.%(ext)s`;
+    }
+
+    let downloadConfig = ['-o', fullOutput, !redownload ? '-ciw' : '-ci', '--write-info-json', '--print-json'];
+
+    let qualityPath = null;
+    if (sub.type && sub.type === 'audio') {
+        qualityPath = ['-f', 'bestaudio']
+        qualityPath.push('-x');
+        qualityPath.push('--audio-format', 'mp3');
+    } else {
+        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)
+
+    if (sub.custom_args) {
+        customArgsArray = sub.custom_args.split(',,');
+        if (customArgsArray.indexOf('-f') !== -1) {
+            // if custom args has a custom quality, replce the original quality with that of custom args
+            const original_output_index = downloadConfig.indexOf('-f');
+            downloadConfig.splice(original_output_index, 2);
+        }
+        downloadConfig.push(...customArgsArray);
+    }
+
+    let archive_dir = null;
+    let archive_path = null;
+
+    if (useArchive && !redownload) {
+        if (sub.archive) {
+            archive_dir = sub.archive;
+            archive_path = path.join(archive_dir, 'archive.txt')
+        }
+        downloadConfig.push('--download-archive', archive_path);
+    }
+
+    // if streaming only mode, just get the list of videos
+    if (sub.streamingOnly) {
+        downloadConfig = ['-f', 'best', '--dump-json'];
+    }
+
+    if (sub.timerange && !redownload) {
+        downloadConfig.push('--dateafter', sub.timerange);
+    }
+
+    let useCookies = config_api.getConfigItem('ytdl_use_cookies');
+    if (useCookies) {
+        if (await fs.pathExists(path.join(__dirname, 'appdata', 'cookies.txt'))) {
+            downloadConfig.push('--cookies', path.join('appdata', 'cookies.txt'));
+        } else {
+            logger.warn('Cookies file could not be found. You can either upload one, or disable \'use cookies\' in the Advanced tab in the settings.');
+        }
+    }
+
+    if (config_api.getConfigItem('ytdl_include_thumbnail')) {
+        downloadConfig.push('--write-thumbnail');
+    }
+
+    return downloadConfig;
+}
+
+function handleOutputJSON(sub, sub_db, output_json, multiUserMode = null, reset_videos = false) {
+    if (sub.streamingOnly) {
+        if (reset_videos) {
+            sub_db.assign({videos: []}).write();
+        }
+
+        // remove unnecessary info
+        output_json.formats = null;
+
+        // add to db
+        sub_db.get('videos').push(output_json).write();
+    } else {
+        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 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() {
-    const subscriptions = db.get('subscriptions').value();
+    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) {
-    return db.get('subscriptions').find({id: subID}).value();
+function getSubscription(subID, user_uid = null) {
+    if (user_uid)
+        return users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: subID}).value();
+    else
+        return db.get('subscriptions').find({id: subID}).value();
 }
 
-function subExists(subID) {
-    return !!db.get('subscriptions').find({id: subID}).value();
+function getSubscriptionByName(subName, user_uid = null) {
+    if (user_uid)
+        return users_db.get('users').find({uid: user_uid}).get('subscriptions').find({name: subName}).value();
+    else
+        return db.get('subscriptions').find({name: subName}).value();
+}
+
+function updateSubscription(sub, user_uid = null) {
+    if (user_uid) {
+        users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id}).assign(sub).write();
+    } else {
+        db.get('subscriptions').find({id: sub.id}).assign(sub).write();
+    }
+    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();
+    else
+        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) {
-    return base_path + (sub.isPlaylist ? 'playlists/' : 'channels/') + sub.name;
+
+    return path.join(base_path, (sub.isPlaylist ? 'playlists/' : 'channels/'), sub.name);
 }
 
-// https://stackoverflow.com/a/32197381/8088021
-const deleteFolderRecursive = function(folder_to_delete) {
-    if (fs.existsSync(folder_to_delete)) {
-      fs.readdirSync(folder_to_delete).forEach((file, index) => {
-        const curPath = path.join(folder_to_delete, file);
-        if (fs.lstatSync(curPath).isDirectory()) { // recurse
-          deleteFolderRecursive(curPath);
-        } else { // delete file
-          fs.unlinkSync(curPath);
-        }
-      });
-      fs.rmdirSync(folder_to_delete);
-    }
-  };
-
-function removeIDFromArchive(archive_path, id) {
-    let data = fs.readFileSync(archive_path, {encoding: 'utf-8'});
+async function removeIDFromArchive(archive_path, id) {
+    let data = await fs.readFile(archive_path, {encoding: 'utf-8'});
     if (!data) {
-        console.log('Archive could not be found.');
+        logger.error('Archive could not be found.');
         return;
     }
 
@@ -292,7 +600,7 @@ function removeIDFromArchive(archive_path, id) {
     for (let index=0; index<dataArray.length; index++) {
         if (dataArray[index].includes(searchKeyword)) { // check if a line contains the id keyword
             lastIndex = index; // found a line includes a id keyword
-            break; 
+            break;
         }
     }
 
@@ -300,17 +608,23 @@ function removeIDFromArchive(archive_path, id) {
 
     // UPDATE FILE WITH NEW DATA
     const updatedData = dataArray.join('\n');
-    fs.writeFileSync(archive_path, updatedData);
+    await fs.writeFile(archive_path, updatedData);
     if (line) return line;
     if (err) throw err;
 }
 
 module.exports = {
     getSubscription        : getSubscription,
+    getSubscriptionByName  : getSubscriptionByName,
+    getSubscriptions       : getSubscriptions,
     getAllSubscriptions    : getAllSubscriptions,
+    updateSubscription     : updateSubscription,
     subscribe              : subscribe,
     unsubscribe            : unsubscribe,
     deleteSubscriptionFile : deleteSubscriptionFile,
     getVideosForSub        : getVideosForSub,
-    removeIDFromArchive    : removeIDFromArchive
+    removeIDFromArchive    : removeIDFromArchive,
+    setLogger              : setLogger,
+    initialize             : initialize,
+    updateSubscriptionPropertyMultiple : updateSubscriptionPropertyMultiple
 }

backend/subscriptions/channels/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

backend/subscriptions/playlists/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

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

@@ -0,0 +1,227 @@
+var fs = require('fs-extra')
+var path = require('path')
+const config_api = require('./config');
+
+const is_windows = process.platform === 'win32';
+
+// replaces .webm with appropriate extension
+function getTrueFileName(unfixed_path, type) {
+    let fixed_path = unfixed_path;
+
+    const new_ext = (type === 'audio' ? 'mp3' : 'mp4');
+    let unfixed_parts = unfixed_path.split('.');
+    const old_ext = unfixed_parts[unfixed_parts.length-1];
+
+
+    if (old_ext !== new_ext) {
+        unfixed_parts[unfixed_parts.length-1] = new_ext;
+        fixed_path = unfixed_parts.join('.');
+    }
+    return fixed_path;
+}
+
+async function getDownloadedFilesByType(basePath, type, full_metadata = false) {
+    // return empty array if the path doesn't exist
+    if (!(await fs.pathExists(basePath))) return [];
+
+    let files = [];
+    const ext = type === 'audio' ? 'mp3' : 'mp4';
+    var located_files = await recFindByExt(basePath, ext);
+    for (let i = 0; i < located_files.length; i++) {
+        let file = located_files[i];
+        var file_path = file.substring(basePath.includes('\\') ? basePath.length+1 : basePath.length, file.length);
+
+        var stats = await fs.stat(file);
+
+        var id = file_path.substring(0, file_path.length-4);
+        var jsonobj = await getJSONByType(type, id, basePath);
+        if (!jsonobj) continue;
+        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 isaudio = type === 'audio';
+        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;
+}
+
+function getJSONMp4(name, customPath, openReadPerms = false) {
+    var obj = null; // output
+    if (!customPath) customPath = config_api.getConfigItem('ytdl_video_folder_path');
+    var jsonPath = path.join(customPath, name + ".info.json");
+    var alternateJsonPath = path.join(customPath, name + ".mp4.info.json");
+    if (fs.existsSync(jsonPath))
+    {
+        obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+    } else if (fs.existsSync(alternateJsonPath)) {
+        obj = JSON.parse(fs.readFileSync(alternateJsonPath, 'utf8'));
+    }
+    else obj = 0;
+    return obj;
+}
+
+function getJSONMp3(name, customPath, openReadPerms = false) {
+    var obj = null;
+    if (!customPath) customPath = config_api.getConfigItem('ytdl_audio_folder_path');
+    var jsonPath = path.join(customPath, name + ".info.json");
+    var alternateJsonPath = path.join(customPath, name + ".mp3.info.json");
+    if (fs.existsSync(jsonPath)) {
+        obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+    }
+    else if (fs.existsSync(alternateJsonPath)) {
+        obj = JSON.parse(fs.readFileSync(alternateJsonPath, 'utf8'));
+    }
+    else
+        obj = 0;
+
+    return obj;
+}
+
+function getJSONByType(type, name, customPath, openReadPerms = false) {
+    return type === 'audio' ? getJSONMp3(name, customPath, openReadPerms) : getJSONMp4(name, customPath, openReadPerms)
+}
+
+function getDownloadedThumbnail(name, type, customPath = null) {
+    if (!customPath) customPath = type === 'audio' ? config_api.getConfigItem('ytdl_audio_folder_path') : config_api.getConfigItem('ytdl_video_folder_path');
+
+    let jpgPath = path.join(customPath, name + '.jpg');
+    let webpPath = path.join(customPath, name + '.webp');
+    let pngPath = path.join(customPath, name + '.png');
+
+    if (fs.existsSync(jpgPath))
+        return jpgPath;
+    else if (fs.existsSync(webpPath))
+        return webpPath;
+    else if (fs.existsSync(pngPath))
+        return pngPath;
+    else
+        return null;
+}
+
+function getExpectedFileSize(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];
+
+    let expected_filesize = 0;
+    info_jsons.forEach(info_json => {
+        if (info_json['filesize']) {
+            expected_filesize += info_json['filesize'];
+            return;
+        }
+        const formats = info_json['format_id'].split('+');
+        let individual_expected_filesize = 0;
+        formats.forEach(format_id => {
+            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;
+}
+
+function fixVideoMetadataPerms(name, type, customPath = null) {
+    if (is_windows) return;
+    if (!customPath) customPath = type === 'audio' ? config_api.getConfigItem('ytdl_audio_folder_path')
+                                                   : config_api.getConfigItem('ytdl_video_folder_path');
+
+    const ext = type === 'audio' ? '.mp3' : '.mp4';
+
+    const files_to_fix = [
+        // JSONs
+        path.join(customPath, name + '.info.json'),
+        path.join(customPath, name + ext + '.info.json'),
+        // Thumbnails
+        path.join(customPath, name + '.webp'),
+        path.join(customPath, name + '.jpg')
+    ];
+
+    for (const file of files_to_fix) {
+        if (!fs.existsSync(file)) continue;
+        fs.chmodSync(file, 0o644);
+    }
+}
+
+function deleteJSONFile(name, type, customPath = null) {
+    if (!customPath) customPath = type === 'audio' ? config_api.getConfigItem('ytdl_audio_folder_path')
+                                                   : config_api.getConfigItem('ytdl_video_folder_path');
+
+    const ext = type === 'audio' ? '.mp3' : '.mp4';
+    let json_path = path.join(customPath, name + '.info.json');
+    let alternate_json_path = path.join(customPath, name + ext + '.info.json');
+
+    if (fs.existsSync(json_path)) fs.unlinkSync(json_path);
+    if (fs.existsSync(alternate_json_path)) fs.unlinkSync(alternate_json_path);
+}
+
+
+async function recFindByExt(base,ext,files,result)
+{
+    files = files || (await fs.readdir(base))
+    result = result || []
+
+    for (const file of files) {
+        var newbase = path.join(base,file)
+        if ( (await fs.stat(newbase)).isDirectory() )
+        {
+            result = await recFindByExt(newbase,ext,await fs.readdir(newbase),result)
+        }
+        else
+        {
+            if ( file.substr(-1*(ext.length+1)) == '.' + ext )
+            {
+                result.push(newbase)
+            }
+        }
+    }
+    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, description, view_count, height, abr) {
+    this.id = id;
+    this.title = title;
+    this.thumbnailURL = thumbnailURL;
+    this.isAudio = isAudio;
+    this.duration = duration;
+    this.url = url;
+    this.uploader = uploader;
+    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 = {
+    getJSONMp3: getJSONMp3,
+    getJSONMp4: getJSONMp4,
+    getTrueFileName: getTrueFileName,
+    getDownloadedThumbnail: getDownloadedThumbnail,
+    getExpectedFileSize: getExpectedFileSize,
+    fixVideoMetadataPerms: fixVideoMetadataPerms,
+    deleteJSONFile: deleteJSONFile,
+    getDownloadedFilesByType: getDownloadedFilesByType,
+    recFindByExt: recFindByExt,
+    removeFileExtension: removeFileExtension,
+    File: File
+}

backend/video/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

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);

db.json

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

docker-compose.yml

@@ -1,10 +1,7 @@
-
 version: "2"
 services:
     ytdl_material:
-        build: .
         environment: 
-            write_ytdl_config: 'true'
             ALLOW_CONFIG_MUTATIONS: 'true'
         restart: always
         volumes:
@@ -12,6 +9,7 @@ services:
             - ./audio:/app/audio
             - ./video:/app/video
             - ./subscriptions:/app/subscriptions
+            - ./users:/app/users
         ports:
             - "8998:17442"
-        image: tzahi12345/youtubedl-material:experimental
+        image: tzahi12345/youtubedl-material:latest

package.json

@@ -1,11 +1,12 @@
 {
   "name": "youtube-dl-material",
-  "version": "0.0.0",
+  "version": "4.2.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "heroku-postbuild": "npm install --prefix backend",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -17,56 +18,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^9.0.6",
-    "@angular/animations": "^9.0.6",
-    "@angular/cdk": "^9.1.2",
-    "@angular/common": "^9.0.6",
-    "@angular/compiler": "^9.0.6",
-    "@angular/core": "^9.0.6",
-    "@angular/forms": "^9.0.6",
-    "@angular/http": "^7.2.15",
-    "@angular/localize": "^9.0.6",
-    "@angular/material": "^9.1.2",
-    "@angular/platform-browser": "^9.0.6",
-    "@angular/platform-browser-dynamic": "^9.0.6",
-    "@angular/router": "^9.0.6",
-    "@locl/core": "0.0.1-beta.2",
+    "@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",
+    "fingerprintjs2": "^2.1.0",
+    "nan": "^2.14.1",
     "ng-lazyload-image": "^7.0.1",
-    "ng4-configure": "^0.1.7",
-    "ngx-content-loading": "^0.1.3",
-    "ngx-videogular": "^9.0.1",
-    "rxjs": "^6.5.3",
+    "ngx-avatar": "^4.0.0",
+    "ngx-file-drop": "^9.0.1",
+    "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.900.6",
-    "@angular/cli": "^9.0.6",
-    "@angular/compiler-cli": "^9.0.6",
-    "@angular/language-service": "^9.0.6",
-    "@locl/cli": "0.0.1-beta.6",
+    "@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

@@ -4,16 +4,22 @@ import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
 import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
 import { SubscriptionComponent } from './subscription/subscription/subscription.component';
+import { PostsService } from './posts.services';
+import { LoginComponent } from './components/login/login.component';
+import { DownloadsComponent } from './components/downloads/downloads.component';
+
 const routes: Routes = [
-  { path: 'home', component: MainComponent },
-  { path: 'player', component: PlayerComponent},
-  { path: 'subscriptions', component: SubscriptionsComponent },
-  { path: 'subscription', component: SubscriptionComponent },
-  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: MainComponent, canActivate: [PostsService] },
+  { path: 'player', component: PlayerComponent, canActivate: [PostsService]},
+  { path: 'subscriptions', component: SubscriptionsComponent, canActivate: [PostsService] },
+  { path: 'subscription', component: SubscriptionComponent, canActivate: [PostsService] },
+  { path: 'login', component: LoginComponent },
+  { path: 'downloads', component: DownloadsComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.css

@@ -16,4 +16,13 @@
     top: 2px;
     left: 10px;
     position: relative;
+    pointer-events: none;
+}
+
+.sidenav-container {
+    z-index: -1 !important;
+}
+
+.top-toolbar {
+    height: 64px;
 }

src/app/app.component.html

@@ -1,23 +1,29 @@
 <div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
-    <div>
-        <mat-toolbar color="primary" class="top">
+    <div class="mat-elevation-z3" style="position: relative; z-index: 10;">
+        <mat-toolbar color="primary" class="sticky-toolbar top-toolbar">
             <div class="flex-row" width="100%" height="100%">
                 <div class="flex-column" style="text-align: left; margin-top: 1px;">
-                    <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player' && allowSubscriptions" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
+                    <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
                     <button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
                 </div>
                 <div class="flex-column" style="text-align: center; margin-top: 5px;">
-                    <div>{{topBarTitle}}</div>
+                    <div style="font-size: 22px; text-shadow: #141414 0.25px 0.25px 1px;">
+                        {{topBarTitle}}
+                    </div>
                 </div>
                 <div class="flex-column" style="text-align: right; align-items: flex-end;">
                     <button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
                     <mat-menu #menuSettings="matMenu">
+                        <button (click)="openProfileDialog()" *ngIf="postsService.isLoggedIn" mat-menu-item>
+                            <mat-icon>person</mat-icon>
+                            <span i18n="Profile menu label">Profile</span>
+                        </button>
                         <button (click)="themeMenuItemClicked($event)" *ngIf="allowThemeChange" mat-menu-item>
                           <mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon>
                           <span i18n="Dark mode toggle label">Dark</span>
                           <mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'"></mat-slide-toggle>
                         </button>
-                        <button (click)="openSettingsDialog()" mat-menu-item>
+                        <button *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('settings')))" (click)="openSettingsDialog()" mat-menu-item>
                           <mat-icon>settings</mat-icon>
                           <span i18n="Settings menu label">Settings</span>
                         </button>
@@ -30,12 +36,18 @@
             </div>
         </mat-toolbar>
     </div>
-    <div style="height: calc(100% - 64px)">
+    <div class="sidenav-container" style="height: calc(100% - 64px)">
         <mat-sidenav-container style="height: 100%">
-            <mat-sidenav #sidenav>
+            <mat-sidenav [opened]="postsService.sidepanel_mode === 'side' && !window.location.href.includes('/player')" [mode]="postsService.sidepanel_mode" #sidenav>
                 <mat-nav-list>
-                    <a mat-list-item (click)="sidenav.close()" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
-                    <a mat-list-item (click)="sidenav.close()" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
+                    <a *ngIf="postsService.config && (!postsService.config.Advanced.multi_user_mode || postsService.isLoggedIn)" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
+                    <a *ngIf="postsService.config && postsService.config.Advanced.multi_user_mode && !postsService.isLoggedIn" mat-list-item (click)="sidenav.close()" routerLink='/login'><ng-container i18n="Navigation menu Login Page title">Login</ng-container></a>
+                    <a *ngIf="postsService.config && allowSubscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
+                    <a *ngIf="postsService.config && enableDownloadsManager && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('downloads_manager')))" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
+                    <ng-container *ngIf="postsService.config && allowSubscriptions && postsService.subscriptions && (!postsService.config.Advanced.multi_user_mode || (postsService.isLoggedIn && postsService.permissions.includes('subscriptions')))">
+                        <mat-divider></mat-divider>
+                        <a *ngFor="let subscription of postsService.subscriptions" mat-list-item (click)="postsService.sidepanel_mode === 'over' ? sidenav.close() : null" [routerLink]="['/subscription', { id: subscription.id }]"><ngx-avatar [style.margin-right]="'10px'" size="32" [name]="subscription.name"></ngx-avatar>{{subscription.name}}</a>
+                    </ng-container>
                 </mat-nav-list>
             </mat-sidenav>
             <mat-sidenav-content [style.background]="postsService.theme ? postsService.theme.background_color : null">

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.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild, HostBinding } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, HostBinding, AfterViewInit } from '@angular/core';
 import {PostsService} from './posts.services';
 import {FileCardComponent} from './file-card/file-card.component';
 import { Observable } from 'rxjs/Observable';
@@ -21,26 +21,28 @@ import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { THEMES_CONFIG } from '../themes';
 import { SettingsComponent } from './settings/settings.component';
-import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
+import { UserProfileDialogComponent } from './dialogs/user-profile-dialog/user-profile-dialog.component';
+import { SetDefaultAdminDialogComponent } from './dialogs/set-default-admin-dialog/set-default-admin-dialog.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
 
   @HostBinding('class') componentCssClass;
   THEMES_CONFIG = THEMES_CONFIG;
 
+  window = window;
+
   // config items
   topBarTitle = 'Youtube Downloader';
   defaultTheme = null;
   allowThemeChange = null;
   allowSubscriptions = false;
-  // defaults to true to prevent attack
-  settingsPinRequired = true;
+  enableDownloadsManager = false;
 
   @ViewChild('sidenav') sidenav: MatSidenav;
   @ViewChild('hamburgerMenu', { read: ElementRef }) hamburgerMenuButton: ElementRef;
@@ -61,8 +63,7 @@ export class AppComponent implements OnInit {
     }
     });
 
-    this.loadConfig();
-    this.postsService.settings_changed.subscribe(changed => {
+    this.postsService.config_reloaded.subscribe(changed => {
       if (changed) {
         this.loadConfig();
       }
@@ -70,28 +71,53 @@ export class AppComponent implements OnInit {
 
   }
 
+  ngOnInit() {
+    if (localStorage.getItem('theme')) {
+      this.setTheme(localStorage.getItem('theme'));
+    }
+    
+    this.postsService.open_create_default_admin_dialog.subscribe(open => {
+      if (open) {
+        const dialogRef = this.dialog.open(SetDefaultAdminDialogComponent);
+        dialogRef.afterClosed().subscribe(success => {
+          if (success) {
+            if (this.router.url !== '/login') { this.router.navigate(['/login']); }
+          } else {
+            console.error('Failed to create default admin account. See logs for details.');
+          }
+        });
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    this.postsService.sidenav = this.sidenav;
+  }
+
   toggleSidenav() {
     this.sidenav.toggle();
   }
 
   loadConfig() {
     // loading config
-    this.postsService.loadNavItems().subscribe(res => { // loads settings
-      const result = !this.postsService.debugMode ? res['config_file'] : res;
-      this.topBarTitle = result['YoutubeDLMaterial']['Extra']['title_top'];
-      this.settingsPinRequired = result['YoutubeDLMaterial']['Extra']['settings_pin_required'];
-      const themingExists = result['YoutubeDLMaterial']['Themes'];
-      this.defaultTheme = themingExists ? result['YoutubeDLMaterial']['Themes']['default_theme'] : 'default';
-      this.allowThemeChange = themingExists ? result['YoutubeDLMaterial']['Themes']['allow_theme_change'] : true;
-      this.allowSubscriptions = result['YoutubeDLMaterial']['Subscriptions']['allow_subscriptions'];
+    this.topBarTitle = this.postsService.config['Extra']['title_top'];
+    const themingExists = this.postsService.config['Themes'];
+    this.defaultTheme = themingExists ? this.postsService.config['Themes']['default_theme'] : 'default';
+    this.allowThemeChange = themingExists ? this.postsService.config['Themes']['allow_theme_change'] : true;
+    this.allowSubscriptions = this.postsService.config['Subscriptions']['allow_subscriptions'];
+    this.enableDownloadsManager = this.postsService.config['Extra']['enable_downloads_manager'];
 
-      // sets theme to config default if it doesn't exist
-      if (!localStorage.getItem('theme')) {
-        this.setTheme(themingExists ? this.defaultTheme : 'default');
-      }
-    }, error => {
-      console.log(error);
-    });
+    // sets theme to config default if it doesn't exist
+    if (!localStorage.getItem('theme')) {
+      this.setTheme(themingExists ? this.defaultTheme : 'default');
+    }
+
+    // gets the subscriptions
+    if (this.allowSubscriptions) {
+      this.postsService.reloadSubscriptions();
+    }
+
+    this.postsService.reloadCategories();
   }
 
   // theme stuff
@@ -123,9 +149,9 @@ export class AppComponent implements OnInit {
     this.postsService.setTheme(theme);
 
     this.onSetTheme(this.THEMES_CONFIG[theme]['css_label'], old_theme ? this.THEMES_CONFIG[old_theme]['css_label'] : old_theme);
-}
+  }
 
-onSetTheme(theme, old_theme) {
+  onSetTheme(theme, old_theme) {
     if (old_theme) {
       document.body.classList.remove(old_theme);
       this.overlayContainer.getContainerElement().classList.remove(old_theme);
@@ -147,12 +173,8 @@ onSetTheme(theme, old_theme) {
     event.stopPropagation();
   }
 
-  ngOnInit() {
-    if (localStorage.getItem('theme')) {
-      this.setTheme(localStorage.getItem('theme'));
-    } else {
-    //
-    }
+  getSubscriptions() {
+
   }
 
 
@@ -165,36 +187,22 @@ onSetTheme(theme, old_theme) {
   }
 
   openSettingsDialog() {
-    if (this.settingsPinRequired) {
-      this.openPinDialog();
-    } else {
-      this.actuallyOpenSettingsDialog();
-    }
-  }
-
-  actuallyOpenSettingsDialog() {
     const dialogRef = this.dialog.open(SettingsComponent, {
       width: '80vw'
     });
   }
 
-  openPinDialog() {
-    const dialogRef = this.dialog.open(CheckOrSetPinDialogComponent, {
-    });
-
-    dialogRef.afterClosed().subscribe(res => {
-      if (res) {
-        this.actuallyOpenSettingsDialog();
-      }
-    });
-
-  }
-
   openAboutDialog() {
     const dialogRef = this.dialog.open(AboutDialogComponent, {
       width: '80vw'
     });
   }
 
+  openProfileDialog() {
+    const dialogRef = this.dialog.open(UserProfileDialogComponent, {
+      width: '60vw'
+    });
+  }
+
 }
 

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, LOCALE_ID } from '@angular/core';
-import { registerLocaleData } from '@angular/common';
+import { registerLocaleData, CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
@@ -24,21 +24,27 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-  import {DragDropModule} from '@angular/cdk/drag-drop';
-  import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+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 { HttpModule } from '@angular/http';
-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 { 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 { NgxContentLoadingModule } from 'ngx-content-loading';
 import { audioFilesMouseHovering, videoFilesMouseHovering, audioFilesOpened, videoFilesOpened } from './main/main.component';
 import { CreatePlaylistComponent } from './create-playlist/create-playlist.component';
 import { DownloadItemComponent } from './download-item/download-item.component';
@@ -48,12 +54,39 @@ import { SubscriptionComponent } from './subscription//subscription/subscription
 import { SubscriptionFileCardComponent } from './subscription/subscription-file-card/subscription-file-card.component';
 import { SubscriptionInfoDialogComponent } from './dialogs/subscription-info-dialog/subscription-info-dialog.component';
 import { SettingsComponent } from './settings/settings.component';
-import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
+import { MatChipsModule } from '@angular/material/chips';
+import { NgxFileDropModule } from 'ngx-file-drop';
+import { AvatarModule } from 'ngx-avatar';
+import { ContentLoaderModule } from '@ngneat/content-loader';
 
 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
 import { VideoInfoDialogComponent } from './dialogs/video-info-dialog/video-info-dialog.component';
 import { ArgModifierDialogComponent, HighlightPipe } from './dialogs/arg-modifier-dialog/arg-modifier-dialog.component';
+import { UpdaterComponent } from './updater/updater.component';
+import { UpdateProgressDialogComponent } from './dialogs/update-progress-dialog/update-progress-dialog.component';
+import { ShareMediaDialogComponent } from './dialogs/share-media-dialog/share-media-dialog.component';
+import { LoginComponent } from './components/login/login.component';
+import { DownloadsComponent } from './components/downloads/downloads.component';
+import { UserProfileDialogComponent } from './dialogs/user-profile-dialog/user-profile-dialog.component';
+import { SetDefaultAdminDialogComponent } from './dialogs/set-default-admin-dialog/set-default-admin-dialog.component';
+import { ModifyUsersComponent } from './components/modify-users/modify-users.component';
+import { AddUserDialogComponent } from './dialogs/add-user-dialog/add-user-dialog.component';
+import { ManageUserComponent } from './components/manage-user/manage-user.component';
+import { ManageRoleComponent } from './components/manage-role/manage-role.component';
+import { CookiesUploaderDialogComponent } from './dialogs/cookies-uploader-dialog/cookies-uploader-dialog.component';
+import { LogsViewerComponent } from './components/logs-viewer/logs-viewer.component';
+import { ModifyPlaylistComponent } from './dialogs/modify-playlist/modify-playlist.component';
+import { ConfirmDialogComponent } from './dialogs/confirm-dialog/confirm-dialog.component';
+import { UnifiedFileCardComponent } from './components/unified-file-card/unified-file-card.component';
+import { RecentVideosComponent } from './components/recent-videos/recent-videos.component';
+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');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -75,13 +108,36 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     SubscriptionFileCardComponent,
     SubscriptionInfoDialogComponent,
     SettingsComponent,
-    CheckOrSetPinDialogComponent,
     AboutDialogComponent,
     VideoInfoDialogComponent,
     ArgModifierDialogComponent,
-    HighlightPipe
+    HighlightPipe,
+    LinkifyPipe,
+    UpdaterComponent,
+    UpdateProgressDialogComponent,
+    ShareMediaDialogComponent,
+    LoginComponent,
+    DownloadsComponent,
+    UserProfileDialogComponent,
+    SetDefaultAdminDialogComponent,
+    ModifyUsersComponent,
+    AddUserDialogComponent,
+    ManageUserComponent,
+    ManageRoleComponent,
+    CookiesUploaderDialogComponent,
+    LogsViewerComponent,
+    ModifyPlaylistComponent,
+    ConfirmDialogComponent,
+    UnifiedFileCardComponent,
+    RecentVideosComponent,
+    EditSubscriptionDialogComponent,
+    CustomPlaylistsComponent,
+    EditCategoryDialogComponent,
+    TwitchChatComponent,
+    SeeMoreComponent
   ],
   imports: [
+    CommonModule,
     BrowserModule,
     BrowserAnimationsModule,
     MatNativeDateModule,
@@ -90,7 +146,6 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatInputModule,
     MatSelectModule,
     ReactiveFormsModule,
-    HttpModule,
     HttpClientModule,
     MatToolbarModule,
     MatCardModule,
@@ -109,16 +164,23 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatMenuModule,
     MatDialogModule,
     MatSlideToggleModule,
-    MatMenuModule,
     MatAutocompleteModule,
+    MatTabsModule,
     MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatChipsModule,
     DragDropModule,
+    ClipboardModule,
+    NgxFileDropModule,
+    AvatarModule,
+    ContentLoaderModule,
     VgCoreModule,
     VgControlsModule,
     VgOverlayPlayModule,
     VgBufferingModule,
     LazyLoadImageModule.forRoot({ isVisible }),
-    NgxContentLoadingModule,
     RouterModule,
     AppRoutingModule,
   ],
@@ -127,14 +189,15 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     CreatePlaylistComponent,
     SubscribeDialogComponent,
     SubscriptionInfoDialogComponent,
-    SettingsComponent,
-    CheckOrSetPinDialogComponent
+    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.html

@@ -0,0 +1,13 @@
+<div *ngIf="playlists && playlists.length > 0">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div *ngFor="let playlist of playlists; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
+                <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToPlaylist($event)" [file_obj]="playlist" [is_playlist]="true" (editPlaylist)="editPlaylistDialog($event)" (deleteFile)="deletePlaylist($event)" [loading]="false"></app-unified-file-card>
+            </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="playlists && playlists.length === 0" style="text-align: center;">
+    No playlists available. Create one from your downloading files by clicking the blue plus button.
+</div>
+<div class="add-playlist-button"><button (click)="openCreatePlaylistDialog()" mat-fab><mat-icon>add</mat-icon></button></div>

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

@@ -0,0 +1,18 @@
+.add-playlist-button {
+    float: right;
+    position: relative;
+    bottom: 15px;
+    right: 15px;
+}
+
+.large-col {
+    max-width: 320px;
+}
+
+.medium-col {
+    max-width: 240px;
+}
+
+.small-col {
+    max-width: 240px;
+}

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

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

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

@@ -0,0 +1,113 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { CreatePlaylistComponent } from 'app/create-playlist/create-playlist.component';
+import { ModifyPlaylistComponent } from 'app/dialogs/modify-playlist/modify-playlist.component';
+
+@Component({
+  selector: 'app-custom-playlists',
+  templateUrl: './custom-playlists.component.html',
+  styleUrls: ['./custom-playlists.component.scss']
+})
+export class CustomPlaylistsComponent implements OnInit {
+
+  playlists = null;
+  playlists_received = false;
+  downloading_content = {'video': {}, 'audio': {}};
+
+  constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.postsService.service_initialized.subscribe(init => {
+      if (init) {
+        this.getAllPlaylists();
+      }
+    });
+  }
+
+  getAllPlaylists() {
+    this.playlists_received = false;
+    this.postsService.getAllFiles().subscribe(res => {
+      this.playlists = res['playlists'];
+      this.playlists_received = true;
+    });
+  }
+
+  // creating a playlist
+  openCreatePlaylistDialog() {
+    const dialogRef = this.dialog.open(CreatePlaylistComponent, {
+      data: {
+      }
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.getAllPlaylists();
+        this.postsService.openSnackBar('Successfully created playlist!', '');
+      } else if (result === false) {
+        this.postsService.openSnackBar('ERROR: failed to create playlist!', '');
+      }
+    });
+  }
+
+  goToPlaylist(info_obj) {
+    const playlist = info_obj.file;
+    const playlistID = playlist.id;
+    const type = playlist.type;
+
+    if (playlist) {
+      if (this.postsService.config['Extra']['download_only_mode']) {
+        this.downloading_content[type][playlistID] = true;
+        this.downloadPlaylist(playlist.fileNames, type, playlist.name, playlistID);
+      } else {
+        localStorage.setItem('player_navigator', this.router.url);
+        const fileNames = playlist.fileNames;
+        this.router.navigate(['/player', {fileNames: fileNames.join('|nvr|'), type: type, id: playlistID, uid: playlistID, auto: playlist.auto}]);
+      }
+    } else {
+      // playlist not found
+      console.error(`Playlist with ID ${playlistID} not found!`);
+    }
+  }
+
+  downloadPlaylist(fileNames, type, zipName = null, playlistID = null) {
+    this.postsService.downloadFileFromServer(fileNames, type, zipName).subscribe(res => {
+      if (playlistID) { this.downloading_content[type][playlistID] = false };
+      const blob: Blob = res;
+      saveAs(blob, zipName + '.zip');
+    });
+
+  }
+
+  deletePlaylist(args) {
+    const playlist = args.file;
+    const index = args.index;
+    const playlistID = playlist.id;
+    this.postsService.removePlaylist(playlistID, playlist.type).subscribe(res => {
+      if (res['success']) {
+        this.playlists.splice(index, 1);
+        this.postsService.openSnackBar('Playlist successfully removed.', '');
+      }
+      this.getAllPlaylists();
+    });
+  }
+  
+  editPlaylistDialog(args) {
+    const playlist = args.playlist;
+    const index = args.index;
+    const dialogRef = this.dialog.open(ModifyPlaylistComponent, {
+      data: {
+        playlist: playlist,
+        width: '65vw'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(res => {
+      // updates playlist in file manager if it changed
+      if (dialogRef.componentInstance.playlist_updated) {
+        this.playlists[index] = dialogRef.componentInstance.original_playlist;
+      }
+    });
+  }
+
+}

src/app/components/downloads/downloads.component.html

@@ -0,0 +1,27 @@
+<div style="padding: 20px;">
+    <div *ngFor="let session_downloads of downloads | keyvalue">
+        <ng-container *ngIf="keys(session_downloads.value).length > 0">
+            <mat-card style="padding-bottom: 30px; margin-bottom: 15px;">
+                <h4 style="text-align: center;"><ng-container i18n="Session ID">Session ID:</ng-container>&nbsp;{{session_downloads.key}}
+                    <span *ngIf="session_downloads.key === postsService.session_id">&nbsp;<ng-container i18n="Current session">(current)</ng-container></span>
+                </h4>
+                <div class="container">
+                    <div class="row">
+                        <div *ngFor="let download of session_downloads.value | keyvalue: sort_downloads; let i = index;" class="col-12 my-1">
+                            <mat-card *ngIf="download.value" class="mat-elevation-z3">
+                                <app-download-item [download]="download.value" [queueNumber]="i+1" (cancelDownload)="clearDownload(session_downloads.key, download.value.uid)"></app-download-item>
+                            </mat-card>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <button style="top: 15px;" (click)="clearDownloads(session_downloads.key)" mat-stroked-button color="warn"><ng-container i18n="clear all downloads action button">Clear all downloads</ng-container></button>
+                </div>
+            </mat-card>
+        </ng-container>
+    </div>
+
+    <div *ngIf="downloads && !downloadsValid()">
+        <h4 style="text-align: center;" i18n="No downloads label">No downloads available!</h4>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,171 @@
+import { Component, OnInit, ViewChildren, QueryList, ElementRef, OnDestroy } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-downloads',
+  templateUrl: './downloads.component.html',
+  styleUrls: ['./downloads.component.scss'],
+  animations: [
+    // nice stagger effect when showing existing elements
+    trigger('list', [
+      transition(':enter', [
+        // child animation selector + stagger
+        query('@items',
+          stagger(100, animateChild()), { optional: true }
+        )
+      ]),
+    ]),
+    trigger('items', [
+      // cubic-bezier for a tiny bouncing feel
+      transition(':enter', [
+        style({ transform: 'scale(0.5)', opacity: 0 }),
+        animate('500ms cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({ transform: 'scale(1)', opacity: 1 }))
+      ]),
+      transition(':leave', [
+        style({ transform: 'scale(1)', opacity: 1, height: '*' }),
+        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({ transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px' }))
+      ]),
+    ])
+  ],
+})
+export class DownloadsComponent implements OnInit, OnDestroy {
+
+  downloads_check_interval = 1000;
+  downloads = {};
+  interval_id = null;
+
+  keys = Object.keys;
+
+  valid_sessions_length = 0;
+
+  sort_downloads = (a, b) => {
+    const result = b.value.timestamp_start - a.value.timestamp_start;
+    return result;
+  }
+
+  constructor(public postsService: PostsService, private router: Router) { }
+
+  ngOnInit(): void {
+    this.getCurrentDownloads();
+    this.interval_id = setInterval(() => {
+      this.getCurrentDownloads();
+    }, this.downloads_check_interval);
+
+    this.postsService.service_initialized.subscribe(init => {
+      if (init) {
+        if (!this.postsService.config['Extra']['enable_downloads_manager']) {
+          this.router.navigate(['/home']);
+        }
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.interval_id) { clearInterval(this.interval_id) }
+  }
+
+  getCurrentDownloads() {
+    this.postsService.getCurrentDownloads().subscribe(res => {
+      if (res['downloads']) {
+        this.assignNewValues(res['downloads']);
+      } else {
+        // failed to get downloads
+      }
+    });
+  }
+
+  clearDownload(session_id, download_uid) {
+    this.postsService.clearDownloads(false, session_id, download_uid).subscribe(res => {
+      if (res['success']) {
+        // this.downloads = res['downloads'];
+      } else {
+      }
+    });
+  }
+
+  clearDownloads(session_id) {
+    this.postsService.clearDownloads(false, session_id).subscribe(res => {
+      if (res['success']) {
+        this.downloads = res['downloads'];
+      } else {
+      }
+    });
+  }
+
+  clearAllDownloads() {
+    this.postsService.clearDownloads(true).subscribe(res => {
+      if (res['success']) {
+        this.downloads = res['downloads'];
+      } else {
+      }
+    });
+  }
+
+  assignNewValues(new_downloads_by_session) {
+    const session_keys = Object.keys(new_downloads_by_session);
+
+    // remove missing session IDs
+    const current_session_ids = Object.keys(this.downloads);
+    const missing_session_ids = current_session_ids.filter(session => session_keys.indexOf(session) === -1)
+
+    for (const missing_session_id of missing_session_ids) {
+      delete this.downloads[missing_session_id];
+    }
+
+    // loop through sessions
+    for (let i = 0; i < session_keys.length; i++) {
+      const session_id = session_keys[i];
+      const session_downloads_by_id = new_downloads_by_session[session_id];
+      const session_download_ids = Object.keys(session_downloads_by_id);
+
+      if (this.downloads[session_id]) {
+        // remove missing download IDs
+        const current_download_ids = Object.keys(this.downloads[session_id]);
+        const missing_download_ids = current_download_ids.filter(download => session_download_ids.indexOf(download) === -1)
+
+        for (const missing_download_id of missing_download_ids) {
+          console.log('removing missing download id');
+          delete this.downloads[session_id][missing_download_id];
+        }
+      }
+
+      if (!this.downloads[session_id]) {
+        this.downloads[session_id] = session_downloads_by_id;
+      } else {
+        for (let j = 0; j < session_download_ids.length; j++) {
+          const download_id = session_download_ids[j];
+          const download = new_downloads_by_session[session_id][download_id]
+          if (!this.downloads[session_id][download_id]) {
+            this.downloads[session_id][download_id] = download;
+          } else {
+            const download_to_update = this.downloads[session_id][download_id];
+            download_to_update['percent_complete'] = download['percent_complete'];
+            download_to_update['complete'] = download['complete'];
+            download_to_update['timestamp_end'] = download['timestamp_end'];
+            download_to_update['downloading'] = download['downloading'];
+            download_to_update['error'] = download['error'];
+          }
+        }
+      }
+    }
+  }
+
+  downloadsValid() {
+    let valid = false;
+    const keys = this.keys(this.downloads);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const value = this.downloads[key];
+      if (this.keys(value).length > 0) {
+        valid = true;
+        break;
+      }
+    }
+    return valid;
+  }
+
+}

src/app/components/login/login.component.html

@@ -0,0 +1,39 @@
+<mat-card class="login-card">
+    <mat-tab-group [(selectedIndex)]="selectedTabIndex">
+        <mat-tab label="Login">
+            <div style="margin-top: 10px;">
+                <mat-form-field>
+                    <input [(ngModel)]="loginUsernameInput" matInput placeholder="User name">
+                </mat-form-field>
+            </div>
+            <div>
+                <mat-form-field>
+                    <input [(ngModel)]="loginPasswordInput" (keyup.enter)="login()" type="password" matInput placeholder="Password">
+                </mat-form-field>
+            </div>
+            <div style="margin-bottom: 10px; margin-top: 10px;">
+                <button [disabled]="loggingIn" color="primary" (click)="login()" mat-raised-button><ng-container i18n="Login">Login</ng-container></button>
+            </div>
+        </mat-tab>
+        <mat-tab *ngIf="registrationEnabled" label="Register">
+            <div style="margin-top: 10px;">
+                <mat-form-field>
+                    <input [(ngModel)]="registrationUsernameInput" matInput placeholder="User name">
+                </mat-form-field>
+            </div>
+            <div>
+                <mat-form-field>
+                    <input [(ngModel)]="registrationPasswordInput" type="password" matInput placeholder="Password">
+                </mat-form-field>
+            </div>
+            <div>
+                <mat-form-field>
+                    <input [(ngModel)]="registrationPasswordConfirmationInput" type="password" matInput placeholder="Confirm Password">
+                </mat-form-field>
+            </div>
+            <div style="margin-bottom: 10px; margin-top: 10px;">
+                <button [disabled]="registering" color="primary" (click)="register()" mat-raised-button><ng-container i18n="Register">Register</ng-container></button>
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+</mat-card>

src/app/components/login/login.component.scss

@@ -0,0 +1,6 @@
+.login-card {
+    max-width: 600px;
+    width: 80%;
+    margin: 0 auto;
+    margin-top: 20px;
+}

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

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

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

@@ -0,0 +1,115 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  selectedTabIndex = 0;
+
+  // login
+  loginUsernameInput = '';
+  loginPasswordInput = '';
+  loggingIn = false;
+
+  // registration
+  registrationEnabled = false;
+  registrationUsernameInput = '';
+  registrationPasswordInput = '';
+  registrationPasswordConfirmationInput = '';
+  registering = false;
+
+  constructor(private postsService: PostsService, private snackBar: MatSnackBar, private router: Router) { }
+
+  ngOnInit(): void {
+    if (this.postsService.isLoggedIn && localStorage.getItem('jwt_token') !== 'null') {
+      this.router.navigate(['/home']);
+    }
+    this.postsService.service_initialized.subscribe(init => {
+      if (init) {
+        if (!this.postsService.config['Advanced']['multi_user_mode']) {
+          this.router.navigate(['/home']);
+        }
+        this.registrationEnabled = this.postsService.config['Users'] && this.postsService.config['Users']['allow_registration'];
+      }
+    });
+  }
+
+  login() {
+    if (this.loginPasswordInput === '') {
+      return;
+    }
+    this.loggingIn = true;
+    this.postsService.login(this.loginUsernameInput, this.loginPasswordInput).subscribe(res => {
+      this.loggingIn = false;
+      if (res['token']) {
+        this.postsService.afterLogin(res['user'], res['token'], res['permissions'], res['available_permissions']);
+      } else {
+        this.openSnackBar('Login failed, unknown error.');
+      }
+    }, err => {
+      this.loggingIn = false;
+      const error_code = err.status;
+      if (error_code === 401) {
+        this.openSnackBar('User name or password is incorrect!');
+      } else if (error_code === 404) {
+        this.openSnackBar('Login failed, cannot connect to the server.');
+      } else {
+        this.openSnackBar('Login failed, unknown error.');
+      }
+    });
+  }
+
+  register() {
+    if (!this.registrationUsernameInput || this.registrationUsernameInput === '') {
+      this.openSnackBar('User name is required!');
+      return;
+    }
+
+    if (!this.registrationPasswordInput || this.registrationPasswordInput === '') {
+      this.openSnackBar('Password is required!');
+      return;
+    }
+
+    if (!this.registrationPasswordConfirmationInput || this.registrationPasswordConfirmationInput === '') {
+      this.openSnackBar('Password confirmation is required!');
+      return;
+    }
+
+    if (this.registrationPasswordInput !== this.registrationPasswordConfirmationInput) {
+      this.openSnackBar('Password confirmation is incorrect!');
+      return;
+    }
+
+    this.registering = true;
+    this.postsService.register(this.registrationUsernameInput, this.registrationPasswordInput).subscribe(res => {
+      this.registering = false;
+      if (res && res['user']) {
+        this.openSnackBar(`User ${res['user']['name']} successfully registered.`);
+        this.loginUsernameInput = res['user']['name'];
+        this.selectedTabIndex = 0;
+      } else {
+        this.openSnackBar('Failed to register user, unknown error.');
+      }
+    }, err => {
+      this.registering = false;
+      if (err && err.error && typeof err.error === 'string') {
+        this.openSnackBar(err.error);
+      } else {
+        console.log(err);
+      }
+    });
+  }
+
+  public openSnackBar(message: string, action: string = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}

src/app/components/logs-viewer/logs-viewer.component.html

@@ -0,0 +1,37 @@
+<div style="height: 275px;">
+    <div *ngIf="logs_loading" style="z-index: 999; position: absolute; top: 40%; left: 50%">
+        <mat-spinner [diameter]="32"></mat-spinner>
+    </div>
+    <!-- Virtual mode (fast, select text buggy) -->
+    <!--<cdk-virtual-scroll-viewport style="height: 274px;" itemSize="50" class="example-viewport">
+        <div *cdkVirtualFor="let log of logs; let i = index" class="example-item">
+            <span [ngStyle]="{'color':log.color}">{{log.text}}</span>
+        </div>
+    </cdk-virtual-scroll-viewport>-->
+
+    <!-- Non-virtual mode (slow, bug-free) -->
+    <div style="height: 274px; overflow-y: auto">
+        <div *ngFor="let log of logs; let i = index" class="example-item">
+            <span [ngStyle]="{'color':log.color}">{{log.text}}</span>
+        </div>
+    </div>
+
+    <div>
+        <button style="position: absolute; right: 0px; top: 12px;" [cdkCopyToClipboard]="logs_text" (click)="copiedLogsToClipboard()" mat-mini-fab color="primary"><mat-icon style="font-size: 22px !important;">content_copy</mat-icon></button>
+        <div style="display: inline-block;">
+            <ng-container i18n="Label for lines select in logger view">Lines:</ng-container>&nbsp;
+            <mat-form-field style="width: 75px;">
+                <mat-select (selectionChange)="getLogs()" [(ngModel)]="requested_lines">
+                    <mat-option [value]="10">10</mat-option>
+                    <mat-option [value]="25">25</mat-option>
+                    <mat-option [value]="50">50</mat-option>
+                    <mat-option [value]="100">100</mat-option>
+                    <mat-option [value]="0">All</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <span class="spacer"></span>
+        <button style="float: right; margin-top: 12px;" (click)="clearLogs()" mat-stroked-button color="warn"><ng-container i18n="Clear logs button">Clear logs</ng-container></button>
+    </div>
+    
+</div>

src/app/components/logs-viewer/logs-viewer.component.scss

@@ -0,0 +1 @@
+.spacer {flex: 1 1 auto;}

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

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

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

@@ -0,0 +1,86 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from '../../posts.services';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDialogComponent } from 'app/dialogs/confirm-dialog/confirm-dialog.component';
+
+@Component({
+  selector: 'app-logs-viewer',
+  templateUrl: './logs-viewer.component.html',
+  styleUrls: ['./logs-viewer.component.scss']
+})
+export class LogsViewerComponent implements OnInit {
+
+  logs: any = null;
+  logs_text: string = null;
+  requested_lines = 50;
+  logs_loading = false;
+  constructor(private postsService: PostsService, private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.getLogs();
+  }
+
+  getLogs() {
+  if (!this.logs) { this.logs_loading = true; } // only show loading spinner at the first load
+    this.postsService.getLogs(this.requested_lines !== 0 ? this.requested_lines : null).subscribe(res => {
+      this.logs_loading = false;
+      if (res['logs'] !== null || res['logs'] !== undefined) {
+        this.logs_text = res['logs'];
+        this.logs = [];
+        const logs_arr = res['logs'].split('\n');
+        logs_arr.forEach(log_line => {
+          let color = 'inherit'
+          if (log_line.includes('ERROR')) {
+            color = 'red';
+          } else if (log_line.includes('WARN')) {
+            color = 'yellow';
+          } else if (log_line.includes('VERBOSE')) {
+            color = 'gray';
+          }
+          this.logs.push({
+            text: log_line,
+            color: color
+          })
+        });
+      } else {
+        this.postsService.openSnackBar('Failed to retrieve logs!');
+      }
+    }, err => {
+      this.logs_loading = false;
+      console.error(err);
+      this.postsService.openSnackBar('Failed to retrieve logs!');
+    });
+  }
+
+  copiedLogsToClipboard() {
+    this.postsService.openSnackBar('Logs copied to clipboard!');
+  }
+
+  clearLogs() {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        dialogTitle: 'Clear logs',
+        dialogText: 'Would you like to clear your logs? This will delete all your current logs, permanently.',
+        submitText: 'Clear',
+        warnSubmitColor: true
+      }
+    });
+    dialogRef.afterClosed().subscribe(confirmed => {
+      if (confirmed) {
+        this.postsService.clearAllLogs().subscribe(res => {
+          if (res['success']) {
+            this.logs = [];
+            this.logs_text = '';
+            this.getLogs();
+            this.postsService.openSnackBar('Logs successfully cleared!');
+          } else {
+            this.postsService.openSnackBar('Failed to clear logs!');
+          }
+        }, err => {
+          this.postsService.openSnackBar('Failed to clear logs!');
+        });
+      }
+    });
+  }
+
+}

src/app/components/manage-role/manage-role.component.html

@@ -0,0 +1,19 @@
+<h4 *ngIf="role" mat-dialog-title><ng-container i18n="Manage role dialog title">Manage role</ng-container>&nbsp;-&nbsp;{{role.name}}</h4>
+
+<mat-dialog-content *ngIf="role">
+    <mat-list>
+        <mat-list-item role="listitem" *ngFor="let permission of available_permissions">
+            <h3 matLine>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</h3>
+            <span matLine>
+                <mat-radio-group [disabled]="permission === 'settings' && role.name === 'admin'" (change)="changeRolePermissions($event, permission, permissions[permission])" [(ngModel)]="permissions[permission]" [attr.aria-label]="'Give role permission for ' + permission">
+                    <mat-radio-button value="yes"><ng-container i18n="Yes">Yes</ng-container></mat-radio-button>
+                    <mat-radio-button value="no"><ng-container i18n="No">No</ng-container></mat-radio-button>
+                </mat-radio-group>
+            </span>
+        </mat-list-item>
+    </mat-list>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close><ng-container i18n="Close">Close</ng-container></button>
+</mat-dialog-actions>

src/app/components/manage-role/manage-role.component.scss

@@ -0,0 +1,4 @@
+.mat-radio-button {
+    margin-right: 10px;
+    margin-top: 5px;
+}

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

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

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

@@ -0,0 +1,61 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-manage-role',
+  templateUrl: './manage-role.component.html',
+  styleUrls: ['./manage-role.component.scss']
+})
+export class ManageRoleComponent implements OnInit {
+
+  role = null;
+  available_permissions = null;
+  permissions = null;
+
+  permissionToLabel = {
+    'filemanager': 'File manager',
+    'settings': 'Settings access',
+    'subscriptions': 'Subscriptions',
+    'sharing': 'Share files',
+    'advanced_download': 'Use advanced download mode',
+    'downloads_manager': 'Use downloads manager'
+  }
+
+  constructor(public postsService: PostsService, private dialogRef: MatDialogRef<ManageRoleComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+    if (this.data) {
+      this.role = this.data.role;
+      this.available_permissions = this.postsService.available_permissions;
+      this.parsePermissions();
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+  parsePermissions() {
+    this.permissions = {};
+    for (let i = 0; i < this.available_permissions.length; i++) {
+      const permission = this.available_permissions[i];
+      if (this.role.permissions.includes(permission)) {
+        this.permissions[permission] = 'yes';
+      } else {
+      this.permissions[permission] = 'no';
+      }
+    }
+  }
+
+  changeRolePermissions(change, permission) {
+    this.postsService.setRolePermission(this.role.name, permission, change.value).subscribe(res => {
+      if (res['success']) {
+
+      } else {
+        this.permissions[permission] = this.permissions[permission] === 'yes' ? 'no' : 'yes';
+      }
+    }, err => {
+      this.permissions[permission] = this.permissions[permission] === 'yes' ? 'no' : 'yes';
+    });
+  }
+
+}

src/app/components/manage-user/manage-user.component.html

@@ -0,0 +1,31 @@
+<h4 *ngIf="user" mat-dialog-title><ng-container i18n="Manage user dialog title">Manage user</ng-container>&nbsp;-&nbsp;{{user.name}}</h4>
+
+<mat-dialog-content *ngIf="user">
+    <p><ng-container i18n="User UID">User UID:</ng-container>&nbsp;{{user.uid}}</p>
+
+    <div>
+        <mat-form-field style="margin-right: 15px;">
+            <input matInput [(ngModel)]="newPasswordInput" type="password" placeholder="New password" i18n-placeholder="New password placeholder">
+        </mat-form-field>
+        <button mat-raised-button color="accent" (click)="setNewPassword()" [disabled]="newPasswordInput.length === 0"><ng-container i18n="Set new password">Set new password</ng-container></button>
+    </div>
+
+    <div>
+        <mat-list>
+            <mat-list-item role="listitem" *ngFor="let permission of available_permissions">
+                <h3 matLine>{{permissionToLabel[permission] ? permissionToLabel[permission] : permission}}</h3>
+                <span matLine>
+                    <mat-radio-group [disabled]="permission === 'settings' && postsService.user.uid === user.uid" (change)="changeUserPermissions($event, permission)" [(ngModel)]="permissions[permission]" [attr.aria-label]="'Give user permission for ' + permission">
+                        <mat-radio-button value="default"><ng-container i18n="Use role default">Use role default</ng-container></mat-radio-button>
+                        <mat-radio-button value="yes"><ng-container i18n="Yes">Yes</ng-container></mat-radio-button>
+                        <mat-radio-button value="no"><ng-container i18n="No">No</ng-container></mat-radio-button>
+                    </mat-radio-group>
+                </span>
+            </mat-list-item>
+        </mat-list>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button style="margin-bottom: 5px;" mat-stroked-button mat-dialog-close><ng-container i18n="Close">Close</ng-container></button>
+</mat-dialog-actions>

src/app/components/manage-user/manage-user.component.scss

@@ -0,0 +1,4 @@
+.mat-radio-button {
+    margin-right: 10px;
+    margin-top: 5px;
+}

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

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

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

@@ -0,0 +1,69 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-manage-user',
+  templateUrl: './manage-user.component.html',
+  styleUrls: ['./manage-user.component.scss']
+})
+export class ManageUserComponent implements OnInit {
+
+  user = null;
+  newPasswordInput = '';
+  available_permissions = null;
+  permissions = null;
+
+  permissionToLabel = {
+    'filemanager': 'File manager',
+    'settings': 'Settings access',
+    'subscriptions': 'Subscriptions',
+    'sharing': 'Share files',
+    'advanced_download': 'Use advanced download mode',
+    'downloads_manager': 'Use downloads manager'
+  }
+
+  settingNewPassword = false;
+
+  constructor(public postsService: PostsService, @Inject(MAT_DIALOG_DATA) public data: any) {
+    if (this.data) {
+      this.user = this.data.user;
+      this.available_permissions = this.postsService.available_permissions;
+      this.parsePermissions();
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+  parsePermissions() {
+    this.permissions = {};
+    for (let i = 0; i < this.available_permissions.length; i++) {
+      const permission = this.available_permissions[i];
+      if (this.user.permission_overrides.includes(permission)) {
+        if (this.user.permissions.includes(permission)) {
+          this.permissions[permission] = 'yes';
+        } else {
+        this.permissions[permission] = 'no';
+        }
+      } else {
+        this.permissions[permission] = 'default';
+      }
+    }
+  }
+
+  changeUserPermissions(change, permission) {
+    this.postsService.setUserPermission(this.user.uid, permission, change.value).subscribe(res => {
+      // console.log(res);
+    });
+  }
+
+  setNewPassword() {
+    this.settingNewPassword = true;
+    this.postsService.changeUserPassword(this.user.uid, this.newPasswordInput).subscribe(res => {
+      this.newPasswordInput = '';
+      this.settingNewPassword = false;
+    });
+  }
+
+}

src/app/components/modify-users/modify-users.component.html

@@ -0,0 +1,107 @@
+<div *ngIf="dataSource; else loading">
+    <div style="padding: 15px">
+    <div class="row">
+        <div class="table table-responsive px-5 pb-4 pt-2">
+        <div class="example-header">
+            <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" i18n-placeholder="search field description">
+            </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+            <mat-table #table [dataSource]="dataSource" matSort>
+        
+            <!-- Name Column -->
+            <ng-container matColumnDef="name">
+                <mat-header-cell *matHeaderCellDef mat-sort-header><ng-container i18n="Username users table header"> User name </ng-container></mat-header-cell>
+
+                <mat-cell *matCellDef="let row">
+                <span *ngIf="editObject && editObject.uid === row.uid; else noteditingname">
+                    <span style="width: 80%;">
+                    <mat-form-field>
+                        <input matInput [(ngModel)]="constructedObject['name']" type="text" style="font-size: 12px">
+                    </mat-form-field>
+                    </span>
+                </span>
+                <ng-template #noteditingname>
+                    {{row.name}} 
+                </ng-template>
+                </mat-cell>
+            </ng-container>
+        
+            <!-- Email Column -->
+            <ng-container matColumnDef="role">
+                <mat-header-cell *matHeaderCellDef mat-sort-header><ng-container i18n="Role users table header"> Role </ng-container></mat-header-cell>
+                <mat-cell *matCellDef="let row">
+                    <span *ngIf="editObject && editObject.uid === row.uid; else noteditingemail">
+                    <span style="width: 80%;">
+                        <mat-form-field>
+                            <mat-select [(ngModel)]="constructedObject['role']">
+                                <mat-option value="admin">Admin</mat-option>
+                                <mat-option value="user">User</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </span>
+                    </span>
+                    <ng-template #noteditingemail>
+                        {{row.role}}
+                    </ng-template>
+                </mat-cell>
+            </ng-container>
+
+            <!-- Actions Column -->
+            <ng-container matColumnDef="actions">
+                <mat-header-cell *matHeaderCellDef mat-sort-header><ng-container i18n="Actions users table header"> Actions </ng-container></mat-header-cell>
+                <mat-cell *matCellDef="let row">
+                <span *ngIf="editObject && editObject.uid === row.uid; else notediting">
+                    <button mat-icon-button color="primary" (click)="finishEditing(row.uid)" matTooltip="Save" i18n-matTooltip="save user edit action button tooltip">
+                    <mat-icon>done</mat-icon>
+                    </button>
+                    <button mat-icon-button (click)="disableEditMode()" matTooltip="Cancel" i18n-matTooltip="cancel user edit action button tooltip">
+                    <mat-icon>cancel</mat-icon>
+                    </button>
+                </span>
+                <ng-template #notediting>
+                    <button mat-icon-button (click)="enableEditMode(row.uid)" matTooltip="Edit user" i18n-matTooltip="edit user action button tooltip">
+                    <mat-icon>edit</mat-icon>
+                    </button>
+                </ng-template>
+                <button (click)="manageUser(row.uid)" mat-icon-button [disabled]="editObject && editObject.uid === row.uid" matTooltip="Manage user" i18n-matTooltip="manage user action button tooltip">
+                    <mat-icon>settings</mat-icon>
+                </button>
+                <button mat-icon-button [disabled]="editObject && editObject.uid === row.uid || row.uid === postsService.user.uid" (click)="removeUser(row.uid)" matTooltip="Delete user" i18n-matTooltip="delete user action button tooltip">
+                    <mat-icon>delete</mat-icon>
+                </button>
+                </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+            </mat-table>
+        
+            <mat-paginator #paginator [length]="length"
+                [pageSize]="pageSize"
+                [pageSizeOptions]="pageSizeOptions">
+            </mat-paginator>
+
+            <button color="primary" [disabled]="!this.users" mat-raised-button (click)="openAddUserDialog()" style="float: left; top: -45px; left: 15px">
+                <ng-container i18n="Add users button">Add Users</ng-container>
+            </button>
+        </div>
+        </div>
+    </div>
+    <button color="primary" [matMenuTriggerFor]="edit_roles_menu" class="edit-role" mat-raised-button><ng-container i18n="Edit role">Edit Role</ng-container></button>
+    <mat-menu #edit_roles_menu="matMenu">
+        <button (click)="openModifyRole(role)" mat-menu-item *ngFor="let role of roles">{{role.name}}</button>
+    </mat-menu>
+    </div>
+    
+  </div>
+    
+    <div style="position: absolute" class="centered">
+      <ng-template #loading>
+        <mat-spinner></mat-spinner>
+      </ng-template>
+    </div>

src/app/components/modify-users/modify-users.component.scss

@@ -0,0 +1,5 @@
+.edit-role {
+    position: relative;
+    top: -50px;
+    left: 35px;
+}

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

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

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

@@ -0,0 +1,219 @@
+import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { PostsService } from 'app/posts.services';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { AddUserDialogComponent } from 'app/dialogs/add-user-dialog/add-user-dialog.component';
+import { ManageUserComponent } from '../manage-user/manage-user.component';
+import { ManageRoleComponent } from '../manage-role/manage-role.component';
+
+@Component({
+  selector: 'app-modify-users',
+  templateUrl: './modify-users.component.html',
+  styleUrls: ['./modify-users.component.scss']
+})
+export class ModifyUsersComponent implements OnInit, AfterViewInit {
+
+  displayedColumns = ['name', 'role', 'actions'];
+  dataSource = new MatTableDataSource();
+
+  deleteDialogContentSubstring = 'Are you sure you want delete user ';
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  // MatPaginator Inputs
+  length = 100;
+  @Input() pageSize = 5;
+  pageSizeOptions: number[] = [5, 10, 25, 100];
+
+  // MatPaginator Output
+  pageEvent: PageEvent;
+  users: any;
+  editObject = null;
+  constructedObject = {};
+  roles = null;
+
+
+  constructor(public postsService: PostsService, public snackBar: MatSnackBar, public dialog: MatDialog,
+    private dialogRef: MatDialogRef<ModifyUsersComponent>) { }
+
+  ngOnInit() {
+    this.getArray();
+    this.getRoles();
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Set the paginator and sort after the view init since this component will
+   * be able to query its view for the initialized paginator and sort.
+   */
+  afterGetData() {
+    this.dataSource.sort = this.sort;
+  }
+
+  setPageSizeOptions(setPageSizeOptionsInput: string) {
+    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
+  }
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+  }
+
+  private getArray() {
+    this.postsService.getUsers().subscribe(res => {
+      this.users = res['users'];
+      this.createAndSortData();
+      this.afterGetData();
+    });
+  }
+
+  getRoles() {
+    this.postsService.getRoles().subscribe(res => {
+      this.roles = [];
+      const roles = res['roles'];
+      const role_names = Object.keys(roles);
+      for (let i = 0; i < role_names.length; i++) {
+        const role_name = role_names[i];
+        this.roles.push({
+          name: role_name,
+          permissions: roles[role_name]['permissions']
+        });
+      }
+    });
+  }
+
+  openAddUserDialog() {
+    const dialogRef = this.dialog.open(AddUserDialogComponent);
+    dialogRef.afterClosed().subscribe(user => {
+      if (user && !user.error) {
+        this.openSnackBar('Successfully added user ' + user.name);
+        this.getArray();
+      } else if (user && user.error) {
+        this.openSnackBar('Failed to add user');
+      }
+    });
+  }
+
+  finishEditing(user_uid) {
+    let has_finished = false;
+    if (this.constructedObject && this.constructedObject['name'] && this.constructedObject['role']) {
+      if (!isEmptyOrSpaces(this.constructedObject['name']) && !isEmptyOrSpaces(this.constructedObject['role'])) {
+        has_finished = true;
+        const index_of_object = this.indexOfUser(user_uid);
+        this.users[index_of_object] = this.constructedObject;
+        this.constructedObject = {};
+        this.editObject = null;
+        this.setUser(this.users[index_of_object]);
+        this.createAndSortData();
+      }
+    }
+  }
+
+  enableEditMode(user_uid) {
+    if (this.uidInUserList(user_uid) && this.indexOfUser(user_uid) > -1) {
+      const users_index = this.indexOfUser(user_uid);
+      this.editObject = this.users[users_index];
+      this.constructedObject['name'] = this.users[users_index].name;
+      this.constructedObject['uid'] = this.users[users_index].uid;
+      this.constructedObject['role'] = this.users[users_index].role;
+    }
+  }
+
+  disableEditMode() {
+    this.editObject = null;
+  }
+
+  // checks if user is in users array by name
+  uidInUserList(user_uid) {
+    for (let i = 0; i < this.users.length; i++) {
+      if (this.users[i].uid === user_uid) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // gets index of user in users array by name
+  indexOfUser(user_uid) {
+    for (let i = 0; i < this.users.length; i++) {
+      if (this.users[i].uid === user_uid) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  setUser(change_obj) {
+    this.postsService.changeUser(change_obj).subscribe(res => {
+      this.getArray();
+    });
+  }
+
+  manageUser(user_uid) {
+    const index_of_object = this.indexOfUser(user_uid);
+    const user_obj = this.users[index_of_object];
+    this.dialog.open(ManageUserComponent, {
+      data: {
+        user: user_obj
+      },
+      width: '65vw'
+    });
+  }
+
+  removeUser(user_uid) {
+    this.postsService.deleteUser(user_uid).subscribe(res => {
+      this.getArray();
+    }, err => {
+      this.getArray();
+    });
+  }
+
+  createAndSortData() {
+    // Sorts the data by last finished
+    this.users.sort((a, b) => b.name > a.name);
+
+    const filteredData = [];
+    for (let i = 0; i < this.users.length; i++) {
+      filteredData.push(JSON.parse(JSON.stringify(this.users[i])));
+    }
+
+    // Assign the data to the data source for the table to render
+    this.dataSource.data = filteredData;
+  }
+
+  openModifyRole(role) {
+    const dialogRef = this.dialog.open(ManageRoleComponent, {
+      data: {
+        role: role
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(success => {
+      this.getRoles();
+    });
+  }
+
+  closeDialog() {
+    this.dialogRef.close();
+  }
+
+  public openSnackBar(message: string, action: string = '') {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}
+
+function isEmptyOrSpaces(str){
+  return str === null || str.match(/^ *$/) !== null;
+}

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

@@ -0,0 +1,53 @@
+<div class="container-fluid" style="max-width: 941px;">
+    <div class="row">
+        <div class="col-12 order-2 col-sm-4 order-sm-1 d-flex justify-content-center">
+            <div>
+                <div style="display: inline-block;">
+                    <mat-form-field style="width: 132px;">
+                        <mat-select [(ngModel)]="this.filterProperty" (selectionChange)="filterOptionChanged($event.value)">
+                            <mat-option *ngFor="let filterOption of filterProperties | keyvalue" [value]="filterOption.value">
+                                {{filterOption['value']['label']}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+                <div class="sort-dir-div">
+                    <button (click)="toggleModeChange()" mat-icon-button><mat-icon>{{descendingMode ? 'arrow_downward' : 'arrow_upward'}}</mat-icon></button>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 order-1 col-sm-4 order-sm-2 d-flex justify-content-center">
+            <h4 class="my-videos-title" i18n="My videos title">My videos</h4>
+        </div>
+        <div class="col-12 order-3 col-sm-4 order-sm-3 d-flex justify-content-center">
+            <mat-form-field [ngClass]="searchIsFocused ? 'search-bar-focused' : 'search-bar-unfocused'" class="search-bar" color="accent">
+                <input (focus)="searchIsFocused = true" (blur)="searchIsFocused = false" class="search-input" type="text" placeholder="Search" i18n-placeholder="Files search placeholder" [(ngModel)]="search_text" (ngModelChange)="onSearchInputChanged($event)" matInput>
+                <mat-icon matSuffix>search</mat-icon>
+            </mat-form-field>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="container">
+        <div class="row justify-content-center">
+            <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">
+                <div *ngFor="let file of loading_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" [loading]="true" [theme]="postsService.theme"></app-unified-file-card>
+                </div>
+            </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

@@ -0,0 +1,64 @@
+.large-col {
+    max-width: 320px;
+}
+
+.medium-col {
+    max-width: 240px;
+}
+
+.small-col {
+    max-width: 240px;
+}
+
+.search-bar {
+    transition: all .5s ease;
+    position: relative;
+    float: right;
+}
+ 
+.search-bar-unfocused {
+    width: 132px;
+}
+
+.search-input {
+    transition: all .5s ease;
+}
+
+.search-bar-focused {
+    width: 200px;
+}
+
+.flex-grid {
+    width: 100%;
+    display: block;
+    position: relative;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.column {
+    width: 33%;
+    display: inline-block;
+}
+
+.sort-dir-div {
+    display: inline-block;
+    position: absolute;
+    top: 10px;
+}
+
+.paginator {
+    margin-top: 5px;
+}
+
+.my-videos-title {
+    text-align: center;
+    position: relative;
+    top: 12px;
+}
+
+@media (max-width: 576px) {
+    .my-videos-title {
+        top: 0px;
+    }
+}

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

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

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

@@ -0,0 +1,314 @@
+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',
+  templateUrl: './recent-videos.component.html',
+  styleUrls: ['./recent-videos.component.scss']
+})
+export class RecentVideosComponent implements OnInit {
+
+  cached_file_count = 0;
+  loading_files = null;
+
+  normal_files_received = false;
+  subscription_files_received = false;
+  files: any[] = null;
+  filtered_files: any[] = null;
+  downloading_content = {'video': {}, 'audio': {}};
+  search_mode = false;
+  search_text = '';
+  searchIsFocused = false;
+  descendingMode = true;
+  filterProperties = {
+    'registered': {
+      'key': 'registered',
+      'label': 'Download Date',
+      'property': 'registered'
+    },
+    'upload_date': {
+      'key': 'upload_date',
+      'label': 'Upload Date',
+      'property': 'upload_date'
+    },
+    'name': {
+      'key': 'name',
+      'label': 'Name',
+      'property': 'title'
+    },
+    'file_size': {
+      'key': 'file_size',
+      'label': 'File Size',
+      'property': 'size'
+    },
+    'duration': {
+      'key': 'duration',
+      'label': 'Duration',
+      'property': 'duration'
+    }
+  };
+  filterProperty = this.filterProperties['upload_date'];
+
+  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') <= 10 ? +localStorage.getItem('cached_file_count') : 10;
+      
+      this.loading_files = Array(this.cached_file_count).fill(0);
+    }
+  }
+
+  ngOnInit(): void {
+    if (this.postsService.initialized) {
+      this.getAllFiles();
+    }
+
+    this.postsService.service_initialized.subscribe(init => {
+      if (init) {
+        this.getAllFiles();
+      }
+    });
+
+
+    // set filter property to cached
+    const cached_filter_property = localStorage.getItem('filter_property');
+    if (cached_filter_property && this.filterProperties[cached_filter_property]) {
+      this.filterProperty = this.filterProperties[cached_filter_property];
+    }
+  }
+
+  // search
+
+  onSearchInputChanged(newvalue) {
+    if (newvalue.length > 0) {
+      this.search_mode = true;
+      this.filterFiles(newvalue);
+    } else {
+      this.search_mode = false;
+      this.filtered_files = this.files;
+    }
+  }
+
+  private filterFiles(value: string) {
+    const filterValue = value.toLowerCase();
+    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) {
+    if (this.descendingMode) {
+      this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? -1 : 1));
+    } else {
+      this.filtered_files = this.filtered_files.sort((a, b) => (a[prop] > b[prop] ? 1 : -1));
+    }
+    if (this.paginator) { this.pageChangeEvent({pageSize: this.pageSize, pageIndex: this.paginator.pageIndex}) };
+  }
+
+  filterOptionChanged(value) {
+    this.filterByProperty(value['property']);
+    localStorage.setItem('filter_property', value['key']);
+  }
+
+  toggleModeChange() {
+    this.descendingMode = !this.descendingMode;
+    this.filterByProperty(this.filterProperty['property']);
+  }
+
+  // get files
+
+  getAllFiles() {
+    this.normal_files_received = false;
+    this.postsService.getAllFiles().subscribe(res => {
+      this.files = res['files'];
+      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 {
+        this.filtered_files = this.files;
+      }
+      this.filterByProperty(this.filterProperty['property']);
+
+      // set cached file count for future use, note that we convert the amount of files to a string
+      localStorage.setItem('cached_file_count', '' + this.files.length);
+
+      this.normal_files_received = true;
+
+      this.paged_data = this.filtered_files.slice(0, 10);
+    });
+  }
+
+  // navigation
+
+  goToFile(info_obj) {
+    const file = info_obj['file'];
+    const event = info_obj['event'];
+    if (this.postsService.config['Extra']['download_only_mode']) {
+      this.downloadFile(file);
+    } else {
+      this.navigateToFile(file, event.ctrlKey);
+    }
+  }
+
+  navigateToFile(file, new_tab) {
+    localStorage.setItem('player_navigator', this.router.url);
+    if (file.sub_id) {
+      const sub = this.postsService.getSubscriptionByID(file.sub_id);
+      if (sub.streamingOnly) {
+        // streaming only mode subscriptions
+        !new_tab ? this.router.navigate(['/player', {name: file.id,
+                                          url: file.requested_formats ? file.requested_formats[0].url : file.url}])
+                : window.open(`/#/player;name=${file.id};url=${file.requested_formats ? file.requested_formats[0].url : file.url}`);
+      } else {
+        // normal subscriptions
+        !new_tab ? this.router.navigate(['/player', {fileNames: file.id,
+                                          type: file.isAudio ? 'audio' : 'video', subscriptionName: sub.name,
+                                          subPlaylist: sub.isPlaylist}]) 
+                 : window.open(`/#/player;fileNames=${file.id};type=${file.isAudio ? 'audio' : 'video'};subscriptionName=${sub.name};subPlaylist=${sub.isPlaylist}`);
+      }
+    } else {
+      // normal files
+      !new_tab ? this.router.navigate(['/player', {type: file.isAudio ? 'audio' : 'video', uid: file.uid}])
+               : window.open(`/#/player;type=${file.isAudio ? 'audio' : 'video'};uid=${file.uid}`);
+    }
+  }
+
+  goToSubscription(file) {
+    this.router.navigate(['/subscription', {id: file.sub_id}]);
+  }
+
+  // downloading
+
+  downloadFile(file) {
+    if (file.sub_id) {
+      this.downloadSubscriptionFile(file);
+    } else {
+      this.downloadNormalFile(file);
+    }
+  }
+
+  downloadSubscriptionFile(file) {
+    const type = file.isAudio ? 'audio' : 'video';
+    const ext = type === 'audio' ? '.mp3' : '.mp4'
+    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    this.postsService.downloadFileFromServer(file.id, type, null, null, sub.name, sub.isPlaylist,
+      this.postsService.user ? this.postsService.user.uid : null, null).subscribe(res => {
+          const blob: Blob = res;
+          saveAs(blob, file.id + ext);
+        }, err => {
+          console.log(err);
+      });
+  }
+
+  downloadNormalFile(file) {
+    const type = file.isAudio ? 'audio' : 'video';
+    const ext = type === 'audio' ? '.mp3' : '.mp4'
+    const name = file.id;
+    this.downloading_content[type][name] = true;
+    this.postsService.downloadFileFromServer(name, type).subscribe(res => {
+      this.downloading_content[type][name] = false;
+      const blob: Blob = res;
+      saveAs(blob, decodeURIComponent(name) + ext);
+
+      if (!this.postsService.config.Extra.file_manager_enabled) {
+        // tell server to delete the file once downloaded
+        this.postsService.deleteFile(name, type).subscribe(delRes => {
+          // reload mp4s
+          this.getAllFiles();
+        });
+      }
+    });
+  }
+
+  // deleting
+
+  deleteFile(args) {
+    const file = args.file;
+    const index = args.index;
+    const blacklistMode = args.blacklistMode;
+
+    if (file.sub_id) {
+      this.deleteSubscriptionFile(file, blacklistMode);
+    } else {
+      this.deleteNormalFile(file, blacklistMode);
+    }
+  }
+
+  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.removeFileCard(file);
+      } else {
+        this.postsService.openSnackBar('Delete failed!', 'OK.');
+      }
+    }, err => {
+      this.postsService.openSnackBar('Delete failed!', 'OK.');
+    });
+  }
+
+  deleteSubscriptionFile(file, blacklistMode = false) {
+    if (blacklistMode) {
+      this.deleteForever(file);
+    } else {
+      this.deleteAndRedownload(file);
+    }
+  }
+
+  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.removeFileCard(file);
+    });
+  }
+
+  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.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) {
+    // uses the 'registered' flag as the timestamp
+    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));
+    }
+    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

@@ -0,0 +1,65 @@
+<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;
+        <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"
+        [style.left]="contextMenuPosition.x"
+        [style.top]="contextMenuPosition.y"
+        [matMenuTriggerFor]="context_menu">
+    </div>
+    <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>
+            <button (click)="navigateToFile({ctrlKey: true})" mat-menu-item><mat-icon>open_in_new</mat-icon><ng-container i18n="Open file in new tab">Open file in new tab</ng-container></button>
+        </ng-container>
+    </mat-menu>
+    <mat-menu #action_menu="matMenu">
+        <ng-container *ngIf="!is_playlist && !loading">
+            <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
+            <button (click)="navigateToSubscription()" mat-menu-item *ngIf="file_obj.sub_id"><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
+            <mat-divider></mat-divider>
+            <button *ngIf="file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item>
+                <mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container>
+            </button>
+            <button *ngIf="file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item>
+                <mat-icon>delete_forever</mat-icon><ng-container i18n="Delete forever subscription video button">Delete forever</ng-container>
+            </button>
+            <button *ngIf="!file_obj.sub_id" (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
+            <button *ngIf="!file_obj.sub_id && use_youtubedl_archive" (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and blacklist video button">Delete and blacklist</ng-container></button>
+        </ng-container>
+        <ng-container *ngIf="is_playlist && !loading">
+            <button (click)="emitEditPlaylist()" mat-menu-item><mat-icon>edit</mat-icon><ng-container i18n="Playlist edit button">Edit</ng-container></button>
+            <mat-divider></mat-divider>
+            <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
+        </ng-container>
+        <ng-container *ngIf="loading">
+            <button mat-menu-item>Placeholder</button>
+        </ng-container>
+    </mat-menu>
+    <mat-card [matTooltip]="null" (click)="navigateToFile($event)" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'large-mat-card': card_size === 'large', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
+        <div style="padding:5px">
+            <div *ngIf="!loading && file_obj.thumbnailURL" class="img-div">
+                <div style="position: relative">
+                    <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
+                    <div class="duration-time">
+                        {{file_length}}
+                    </div>
+                </div>
+                
+            </div>
+
+            <div *ngIf="loading" class="img-div">
+                <content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="100" height="55"><svg:rect x="0" y="0" rx="0" ry="0" width="100" height="55" /></content-loader>
+            </div>
+
+            <span *ngIf="!loading" [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>
+            <span *ngIf="loading" class="title-loading"><content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></span>
+        </div>
+    </mat-card>
+</div>

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

@@ -0,0 +1,142 @@
+.large-mat-card {
+  width: 300px;
+  height: 250px;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.file-mat-card {
+    width: 200px;
+    height: 200px;
+    padding: 0px;
+    cursor: pointer;
+}
+
+.small-mat-card {
+  width: 150px;
+  height: 150px;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.menuButton {
+  right: 0px;
+  top: -1px;
+  position: absolute;
+  z-index: 999;
+  
+}
+
+/* Coerce the <span> icon container away from display:inline */
+.mat-icon-button .mat-button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.image-large {
+  width: 300px;
+  height: 167.5px;
+  object-fit: cover;
+}
+
+.image {
+  width: 200px;
+  height: 112.5px;
+  object-fit: cover;
+}
+
+.image-small {
+  width: 150px;
+  height: 84.5px;
+  object-fit: cover;
+}
+
+.example-full-width-height {
+  width: 100%;
+  height: 100%
+}
+
+.centered {
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+}
+
+.img-div {
+  max-height: 80px;
+  padding: 0px;
+  margin: 32px 0px 0px -5px;
+  width: calc(100% + 5px + 5px);
+}
+
+.max-two-lines {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 2.4em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  bottom: 5px;
+  position: absolute;
+}
+
+.max-one-line {
+  display: -webkit-box;
+  display: -moz-box;
+  max-height: 1.2em;
+  line-height: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  bottom: 5px;
+  position: absolute;
+}
+
+.duration-time {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  z-index: 99999;
+  background: rgba(255,255,255,0.6);
+  padding-left: 5px;
+  padding-right: 5px;
+  color: black;
+}
+
+.download-time {
+  position: absolute;
+  top: 1px;
+  left: 5px;
+  z-index: 999;
+  width: calc(100% - 8px);
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+}
+
+.audio-video-icon {
+  position: relative;
+  top: 6px;
+}
+
+.title-loading {
+  width: 93%;
+  position: absolute;
+  bottom: 1px;
+}
+
+@media (max-width: 576px){
+  
+  // .example-card {
+  //   width: 175px !important;
+  // }
+
+  // .image {
+  //     width: 175px;
+  // }
+    
+}

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

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

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

@@ -0,0 +1,156 @@
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { VideoInfoDialogComponent } from 'app/dialogs/video-info-dialog/video-info-dialog.component';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { registerLocaleData } from '@angular/common';
+import localeGB from '@angular/common/locales/en-GB';
+import localeFR from '@angular/common/locales/fr';
+import localeES from '@angular/common/locales/es';
+import localeDE from '@angular/common/locales/de';
+import localeZH from '@angular/common/locales/zh';
+import localeNB from '@angular/common/locales/nb';
+
+registerLocaleData(localeGB);
+registerLocaleData(localeFR);
+registerLocaleData(localeES);
+registerLocaleData(localeDE);
+registerLocaleData(localeZH);
+registerLocaleData(localeNB);
+
+@Component({
+  selector: 'app-unified-file-card',
+  templateUrl: './unified-file-card.component.html',
+  styleUrls: ['./unified-file-card.component.scss']
+})
+export class UnifiedFileCardComponent implements OnInit {
+
+  // required info
+  file_title = '';
+  file_length = '';
+  file_thumbnail = '';
+  type = null;
+  elevated = false;
+
+  // optional vars
+  thumbnailBlobURL = null;
+
+  // input/output
+  @Input() loading = true;
+  @Input() theme = null;
+  @Input() file_obj = null;
+  @Input() card_size = 'medium';
+  @Input() use_youtubedl_archive = false;
+  @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' };
+
+  /*
+    Planned sizes:
+    small: 150x175
+    medium: 200x200
+    big: 250x200
+  */
+
+  constructor(private dialog: MatDialog, private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+    if (!this.loading) {
+      this.file_length = fancyTimeFormat(this.file_obj.duration);
+    }
+
+    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);*/
+    }
+  }
+
+  emitDeleteFile(blacklistMode = false) {
+    this.deleteFile.emit({
+      file: this.file_obj,
+      index: this.index,
+      blacklistMode: blacklistMode
+    });
+  }
+
+  navigateToFile(event) {
+    this.goToFile.emit({file: this.file_obj, event: event});
+  }
+
+  navigateToSubscription() {
+    this.goToSubscription.emit(this.file_obj);
+  }
+
+  openFileInfoDialog() {
+    this.dialog.open(VideoInfoDialogComponent, {
+      data: {
+        file: this.file_obj,
+      },
+      minWidth: '50vw'
+    })
+  }
+
+  emitEditPlaylist() {
+    this.editPlaylist.emit({
+      playlist: this.file_obj,
+      index: this.index
+    });
+  }
+
+  onRightClick(event) {
+    event.preventDefault();
+    this.contextMenuPosition.x = event.clientX + 'px';
+    this.contextMenuPosition.y = event.clientY + 'px';
+    this.contextMenu.menuData = { 'item': {id: 1, name: 'hi'} };
+    this.contextMenu.menu.focusFirstItem('mouse');
+    this.contextMenu.openMenu();
+  }
+
+}
+
+function fancyTimeFormat(time) {
+  if (typeof time === 'string') {
+    return time;
+  }
+  // Hours, minutes and seconds
+  const hrs = ~~(time / 3600);
+  const mins = ~~((time % 3600) / 60);
+  const secs = ~~time % 60;
+
+  // Output like "1:01" or "4:03:59" or "123:03:59"
+  let ret = '';
+
+  if (hrs > 0) {
+      ret += '' + hrs + ':' + (mins < 10 ? '0' : '');
+  }
+
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '');
+  ret += '' + secs;
+  return ret;
+}
+
+function getMimeByFilename(name) {
+  switch (name.substring(name.length-4, name.length)) {
+    case '.jpg':
+      return 'image/jpeg';
+    case '.png':
+      return 'image/png';
+    case 'webp':
+      return 'image/webp';
+    default:
+      return null;
+  }
+}