Added v1 of chat sidebar for Twitch VODs

Cleanup & clarify README.md

.github/workflows/build.yml

@@ -0,0 +1,92 @@
+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: prepare release asset
+        shell: pwsh
+        run: Compress-Archive -Path ${{runner.temp}}/youtubedl-material -DestinationPath youtubedl-material-${{ github.ref }}.zip
+      - name: upload build 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-${{ github.ref }}.zip
+          asset_name: youtubedl-material-${{ github.ref }}.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.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

@@ -44,5 +44,25 @@ Thumbs.db
 node_modules/*
 backend/node_modules/*
 YoutubeDL-Material/node_modules/*
-backend/video/*
-backend/audio/*
+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
+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

.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "attach",
+            "name": "Attach",
+            "port": 9229
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

Dockerfile

@@ -0,0 +1,43 @@
+FROM alpine:3.12 as frontend
+
+RUN apk add --no-cache \
+  npm
+
+RUN npm install -g @angular/cli
+
+WORKDIR /build
+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 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

@@ -0,0 +1 @@
+web: npm start --prefix backend

README.md

@@ -1,6 +1,14 @@
 # YoutubeDL-Material
 
-YoutubeDL-Material is a material design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 5](https://angular.io/) for the frontend, and [Nodejs](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 9](https://angular.io/) for the frontend, and [Node.js](https://nodejs.org/) on the backend.
+
+Now with [Docker](#Docker) support!
 
 ## Getting Started
 
@@ -8,52 +16,118 @@ 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/m3xozES.png)
+![frontpage](https://i.imgur.com/w8iofbb.png)
 
 With optional file management enabled (default):
 
-![frontpage_with_files](https://i.imgur.com/z9vME2O.png)
+![frontpage_with_files](https://i.imgur.com/FTATqBM.png)
+
+Dark mode:
+
+![dark_mode](https://i.imgur.com/r5ZtBqd.png)
 
 ### Prerequisites
 
-You need to have a functioning web server for this to work. Also make sure you have these dependencies installed on your system: ffmpeg, nodejs, python. If you don't, run this command:
+NOTE: If you would like to use Docker, you can skip down to the [Docker](#Docker) section for a setup guide.
 
+Debian/Ubuntu:
+
+```bash
+sudo apt-get install nodejs youtube-dl ffmpeg
 ```
-sudo apt-get install ffmpeg nodejs python
+
+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
 
-First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
+1. First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
 
-Drag all the files in `youtubedl-material` to a location accessible to a web server. It works best if it's the root (usually right inside `public_html`. Once that's done, navigate to `backend` 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.
 
-Port forward `17442` if you're going to access YoutubeDL-Material from out of your network. This is an important step. Make sure the configuration reflects this appropriately.
+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
 
-Once the configuration is done, type `sudo nodejs app.js`. This will run the backend server. On your browser, navigate to your installation folder. Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
+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 `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.
 
-## Deployment
+## 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/backend/config`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/dist` folder. Drag those files into a web server, and drag the `backend` directory into the same folder. This folder should have `index.html` in it as well. If it does **not**, you're in the wrong directory.
+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 `youtubedl-material/backend` folder, and type `sudo 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 `17442` and point it to the server's IP address. Make sure the port is also allowed through the 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 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
+
+[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

@@ -7,11 +7,18 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "es": "src/locale/messages.es.xlf"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist",
+            "aot": true,
+            "outputPath": "backend/public",
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
@@ -24,7 +31,87 @@
               "src/backend"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            },
+            "es": {
+              "localize": ["es"]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "youtube-dl-material:build:production"
+            },
+            "es": {
+              "browserTarget": "youtube-dl-material:build:es"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          }
+        },
+        "serve-electron": {
+          "builder": "@angular-guru/electron-builder:dev-server",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "youtube-dl-material:build:production"
+            }
+          }
+        },
+        "electron": {
+          "builder": "@angular-guru/electron-builder:build",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "main.js",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/backend/audio",
+              "src/backend/video",
+              "src/backend"
+            ],
+            "styles": [
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -48,23 +135,6 @@
             }
           }
         },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "youtube-dl-material:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "youtube-dl-material:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "youtube-dl-material:build"
-          }
-        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
@@ -74,7 +144,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "assets": [
               "src/assets",
@@ -125,7 +195,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "css"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

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

@@ -0,0 +1,66 @@
+{
+  "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
+    },
+    "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"
+    },
+    "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/audio/.gitignore

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

backend/authentication/auth.js

@@ -0,0 +1,537 @@
+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;
+var users_db = null;
+let SERVER_SECRET = null;
+let JWT_EXPIRATION = null;
+let opts = null;
+let saltRounds = null;
+
+exports.initialize = function(input_users_db, input_logger) {
+  setLogger(input_logger)
+  setDB(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_users_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;
+  }
+
+  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 user['files'][type];
+}
+
+exports.getUserVideo = function(user_uid, file_uid, type, requireSharing = false) {
+  let file = null;
+  if (!type) {
+    file = users_db.get('users').find({uid: user_uid}).get(`files.audio`).find({uid: file_uid}).value();
+    if (!file) {
+        file = users_db.get('users').find({uid: user_uid}).get(`files.video`).find({uid: file_uid}).value();
+        if (file) type = 'video';
+    } else {
+        type = 'audio';
+    }
+  }
+
+  if (!file && type) file = users_db.get('users').find({uid: user_uid}).get(`files.${type}`).find({uid: file_uid}).value();
+
+  // prevent unauthorized users from accessing the file info
+  if (file && !file['sharingEnabled'] && requireSharing) file = null;
+
+  return file;
+}
+
+exports.addPlaylist = function(user_uid, new_playlist, type) {
+  users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).push(new_playlist).write();
+  return true;
+}
+
+exports.updatePlaylistFiles = function(user_uid, playlistID, new_filenames, type) {
+  users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID}).assign({fileNames: new_filenames});
+  return true;
+}
+
+exports.removePlaylist = function(user_uid, playlistID, type) {
+  users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).remove({id: playlistID}).write();
+  return true;
+}
+
+exports.getUserPlaylists = function(user_uid, type) {
+  const user = users_db.get('users').find({uid: user_uid}).value();
+  return user['playlists'][type];
+}
+
+exports.getUserPlaylist = function(user_uid, playlistID, type, requireSharing = false) {
+  let playlist = null;
+  if (!type) {
+    playlist = users_db.get('users').find({uid: user_uid}).get(`playlists.audio`).find({id: playlistID}).value();
+    if (!playlist) {
+      playlist = users_db.get('users').find({uid: user_uid}).get(`playlists.video`).find({id: playlistID}).value();
+      if (playlist) type = 'video';
+    } else {
+        type = 'audio';
+    }
+  }
+  if (!playlist) playlist = users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID}).value();
+
+  // prevent unauthorized users from accessing the file info
+  if (requireSharing && !playlist['sharingEnabled']) playlist = null;
+
+  return playlist;
+}
+
+exports.registerUserFile = function(user_uid, file_object, type) {
+  users_db.get('users').find({uid: user_uid}).get(`files.${type}`)
+    .remove({
+        path: file_object['path']
+    }).write();
+
+  users_db.get('users').find({uid: user_uid}).get(`files.${type}`)
+      .push(file_object)
+      .write();
+}
+
+exports.deleteUserFile = async function(user_uid, file_uid, type, blacklistMode = false) {
+  let success = false;
+  const file_obj = users_db.get('users').find({uid: user_uid}).get(`files.${type}`).find({uid: file_uid}).value();
+  if (file_obj) {
+    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.${type}`)
+      .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, type, is_playlist, enabled) {
+  let success = false;
+  const user_db_obj = users_db.get('users').find({uid: user_uid});
+  if (user_db_obj.value()) {
+    const file_db_obj = is_playlist ? user_db_obj.get(`playlists.${type}`).find({id: file_uid}) : user_db_obj.get(`files.${type}`).find({uid: file_uid});
+    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: {
+      audio: [],
+      video: []
+    },
+    playlists: {
+      audio: [],
+      video: []
+    },
+    subscriptions: [],
+    created: Date.now(),
+    role: userid === 'admin' && auth_method === 'internal' ? 'admin' : 'user',
+    permissions: [],
+    permission_overrides: [],
+    auth_method: auth_method
+  };
+  return new_user;
+}

backend/categories.js

@@ -0,0 +1,123 @@
+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_json) {
+    let selected_category = null;
+    const categories = getCategories();
+    if (!categories) {
+        logger.warn('Categories could not be found. Initializing categories...');
+        db.assign({categories: []}).write();
+        return null;
+        return;
+    }
+
+    for (let i = 0; i < categories.length; i++) {
+        const category = categories[i];
+        const rules = category['rules'];
+
+        // if rules for current category apply, then that is the selected category
+        if (applyCategoryRules(file_json, rules, category['name'])) {
+            selected_category = category;
+            logger.verbose(`Selected category ${category['name']} for ${file_json['webpage_url']}`);
+            return selected_category;
+        }
+    }
+    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

@@ -0,0 +1,243 @@
+const fs = require('fs');
+
+let CONFIG_ITEMS = require('./consts.js')['CONFIG_ITEMS'];
+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
+    s = s.replace(/^\./, '');           // strip a leading dot
+    var a = s.split('.');
+    for (var i = 0, n = a.length; i < n; ++i) {
+        var k = a[i];
+        if (k in o) {
+            o = o[k];
+        } else {
+            return;
+        }
+    }
+    return o;
+}
+
+function getParentPath(path) {
+    let elements = path.split('.');
+    elements.splice(elements.length - 1, 1);
+    return elements.join('.');
+}
+
+function getElementNameInConfig(path) {
+    let elements = path.split('.');
+    return elements[elements.length - 1];
+}
+
+/**
+ * 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() {
+    try {
+        let raw_data = fs.readFileSync(configPath);
+        let parsed_data = JSON.parse(raw_data);
+        return parsed_data;
+    } catch(e) {
+        logger.error('Failed to get config file');
+        return null;
+    }
+}
+
+function setConfigFile(config) {
+    try {
+        fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+        return true;
+    } catch(e) {
+        return false;
+    }
+}
+
+function getConfigItem(key) {
+    let config_json = getConfigFile();
+    if (!CONFIG_ITEMS[key]) {
+        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);
+};
+
+function setConfigItem(key, value) {
+    let success = false;
+    let config_json = getConfigFile();
+    let path = CONFIG_ITEMS[key]['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;
+};
+
+function setConfigItems(items) {
+    let success = false;
+    let config_json = getConfigFile();
+    for (let i = 0; i < items.length; i++) {
+        let key = items[i].key;
+        let value = items[i].value;
+
+        // if boolean strings, set to booleans again
+        if (value === 'false' || value === 'true') {
+            value = (value === 'true');
+        }
+
+        let item_path = CONFIG_ITEMS[key]['path'];
+        let item_parent_path = getParentPath(item_path);
+        let item_element_name = getElementNameInConfig(item_path);
+
+        let item_parent_object = Object.byString(config_json, item_parent_path);
+        item_parent_object[item_element_name] = value;
+    }
+
+    success = setConfigFile(config_json);
+    return success;
+}
+
+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,
+    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
+      },
+      "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"
+      },
+      "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/config/default.json

@@ -1,23 +0,0 @@
-{
-    "YoutubeDLMaterial": {
-        "Host": {
-            "frontendurl": "http://example.com",
-            "backendurl": "http://example.com: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-base": "http://example.com:17442/",
-        "path-audio": "audio/",
-        "path-video": "video/"
-      },
-      "Extra": {
-        "title_top": "Youtube Downloader",
-        "download_only_mode": false,
-		    "file_manager_enabled": true
-      }
-    }
-  }

backend/config/encrypted.json

@@ -1,22 +0,0 @@
-{
-    "YoutubeDLMaterial": {
-        "Host": {
-            "frontendurl": "https://example.com",
-            "backendurl": "https://example.com: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-base": "https://example.com:17442/",
-        "path-audio": "audio/",
-        "path-video": "video/"
-      },
-      "Extra": {
-        "title_top": "Youtube Downloader",
-		"file_manager_enabled": true
-      }
-    }
-  }

backend/consts.js

@@ -0,0 +1,196 @@
+let CONFIG_ITEMS = {
+    // Host
+    'ytdl_url': {
+        'key': 'ytdl_url',
+        'path': 'YoutubeDLMaterial.Host.url'
+    },
+    'ytdl_port': {
+        'key': 'ytdl_port',
+        'path': 'YoutubeDLMaterial.Host.port'
+    },
+
+    // Downloader
+    'ytdl_audio_folder_path': {
+        'key': 'ytdl_audio_folder_path',
+        'path': 'YoutubeDLMaterial.Downloader.path-audio'
+    },
+    'ytdl_video_folder_path': {
+        'key': 'ytdl_video_folder_path',
+        'path': 'YoutubeDLMaterial.Downloader.path-video'
+    },
+    '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'
+    },
+    'ytdl_custom_args': {
+        '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': {
+        'key': 'ytdl_title_top',
+        'path': 'YoutubeDLMaterial.Extra.title_top'
+    },
+    'ytdl_file_manager_enabled': {
+        'key': 'ytdl_file_manager_enabled',
+        'path': 'YoutubeDLMaterial.Extra.file_manager_enabled'
+    },
+    'ytdl_allow_quality_select': {
+        'key': 'ytdl_allow_quality_select',
+        'path': 'YoutubeDLMaterial.Extra.allow_quality_select'
+    },
+    'ytdl_download_only_mode': {
+        'key': 'ytdl_download_only_mode',
+        'path': 'YoutubeDLMaterial.Extra.download_only_mode'
+    },
+    'ytdl_allow_multi_download_mode': {
+        'key': 'ytdl_allow_multi_download_mode',
+        'path': 'YoutubeDLMaterial.Extra.allow_multi_download_mode'
+    },
+    'ytdl_enable_downloads_manager': {
+        'key': 'ytdl_enable_downloads_manager',
+        'path': 'YoutubeDLMaterial.Extra.enable_downloads_manager'
+    },
+
+    // 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'
+    },
+    'ytdl_youtube_api_key': {
+        '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': {
+        'key': 'ytdl_default_theme',
+        'path': 'YoutubeDLMaterial.Themes.default_theme'
+    },
+    'ytdl_allow_theme_change': {
+        'key': 'ytdl_allow_theme_change',
+        'path': 'YoutubeDLMaterial.Themes.allow_theme_change'
+    },
+
+    // Subscriptions
+    'ytdl_allow_subscriptions': {
+        'key': 'ytdl_allow_subscriptions',
+        'path': 'YoutubeDLMaterial.Subscriptions.allow_subscriptions'
+    },
+    'ytdl_subscriptions_base_path': {
+        'key': 'ytdl_subscriptions_base_path',
+        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_base_path'
+    },
+    'ytdl_subscriptions_check_interval': {
+        'key': 'ytdl_subscriptions_check_interval',
+        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
+    },
+    'ytdl_subscriptions_check_interval': {
+        'key': 'ytdl_subscriptions_check_interval',
+        'path': 'YoutubeDLMaterial.Subscriptions.subscriptions_check_interval'
+    },
+
+    // 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'
+    },
+    'ytdl_custom_downloading_agent': {
+        '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'
+    }
+};
+
+AVAILABLE_PERMISSIONS = [
+    'filemanager',
+    'settings',
+    'subscriptions',
+    'sharing',
+    'advanced_download',
+    'downloads_manager'
+];
+
+module.exports = {
+    CONFIG_ITEMS: CONFIG_ITEMS,
+    AVAILABLE_PERMISSIONS: AVAILABLE_PERMISSIONS,
+    CURRENT_VERSION: 'v4.1'
+}

backend/db.js

@@ -0,0 +1,207 @@
+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) {
+    let db_path = null;
+    const file_id = file_path.substring(0, file_path.length-4);
+    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 (!sub) {
+        if (multiUserMode) {
+            const user_uid = multiUserMode.user;
+            db_path = users_db.get('users').find({uid: user_uid}).get(`files.${type}`);
+        } else {
+            db_path = db.get(`files.${type}`)
+        }
+    } 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 file_obj = new utils.File(id, title, thumbnail, isaudio, duration, url, uploader, size, file_path, upload_date);
+    return file_obj;
+}
+
+function updatePlaylist(playlist, user_uid) {
+    let playlistID = playlist.id;
+    let type = playlist.type;
+    let db_loc = null;
+    if (user_uid) {
+        db_loc = users_db.get('users').find({uid: user_uid}).get(`playlists.${type}`).find({id: playlistID});
+    } else {
+        db_loc = db.get(`playlists.${type}`).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);
+}
+
+async function importUnregisteredFiles() {
+    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.audio'),
+                type: 'audio'
+            });
+
+            // add user's video dir to check list
+            dirs_to_check.push({
+                basePath: path.join(usersFileFolder, user.uid, 'video'),
+                dbPath: users_db.get('users').find({uid: user.uid}).get('files.video'),
+                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.audio'),
+            type: 'audio'
+        });
+
+        // add video dir to check list
+        dirs_to_check.push({
+            basePath: videoFolderPath,
+            dbPath: db.get('files.video'),
+            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
+        });
+    }
+
+    // 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}`);
+            }
+        });
+    }
+
+}
+
+module.exports = {
+    initialize: initialize,
+    registerFileDB: registerFileDB,
+    updatePlaylist: updatePlaylist,
+    importUnregisteredFiles: importUnregisteredFiles
+}

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

@@ -1,26 +1,63 @@
 {
   "name": "backend",
   "version": "1.0.0",
-  "description": "backend for hda",
+  "description": "backend for YoutubeDL-Material",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "nodemon -q app.js"
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "*.js",
+      "appdata/*",
+      "public/*"
+    ],
+    "watch": [
+      "restart.json"
+    ]
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Tzahi12345/hda-backend.git"
+    "url": ""
   },
   "author": "Isaac Grynsztein",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/Tzahi12345/hda-backend/issues"
+    "url": ""
   },
-  "homepage": "https://github.com/Tzahi12345/hda-backend#readme",
+  "homepage": "",
   "dependencies": {
+    "archiver": "^3.1.1",
     "async": "^3.1.0",
+    "bcryptjs": "^2.4.0",
+    "compression": "^1.7.4",
     "config": "^3.2.3",
     "exe": "^1.0.2",
     "express": "^4.17.1",
-    "youtube-dl": "^2.0.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",
+    "merge-files": "^0.1.2",
+    "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

@@ -0,0 +1,507 @@
+const FileSync = require('lowdb/adapters/FileSync')
+
+var fs = require('fs-extra');
+const { uuid } = require('uuidv4');
+var path = require('path');
+
+var youtubedl = require('youtube-dl');
+const config_api = require('./config');
+var utils = require('./utils')
+
+const debugMode = process.env.YTDL_MODE === 'debug';
+
+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: ''
+    };
+    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 = [];
+
+        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
+        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.')
+        };
+
+        result_obj.success = success;
+        result_obj.sub = sub;
+        resolve(result_obj);
+    });
+
+}
+
+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 => {
+        youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
+            if (debugMode) {
+                logger.info('Subscribe: got info for subscription ' + sub.id);
+            }
+            if (err) {
+                logger.error(err.stderr);
+                resolve(false);
+            } else if (output) {
+                if (output.length === 0 || (output.length === 1 && output[0] === '')) {
+                    logger.verbose('Could not get info for ' + sub.id);
+                    resolve(false);
+                }
+                for (let i = 0; i < output.length; i++) {
+                    let output_json = null;
+                    try {
+                        output_json = JSON.parse(output[i]);
+                    } catch(e) {
+                        output_json = null;
+                    }
+                    if (!output_json) {
+                        continue;
+                    }
+                    if (!sub.name) {
+                        if (sub.isPlaylist) {
+                            sub.name = output_json.playlist_title ? output_json.playlist_title : output_json.playlist;
+                        } else {
+                            sub.name = output_json.uploader;
+                        }
+                        // if it's now valid, update
+                        if (sub.name) {
+                            if (user_uid)
+                                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();
+                        }
+                    }
+
+                    const useArchive = config_api.getConfigItem('ytdl_use_youtubedl_archive');
+                    if (useArchive && !sub.archive) {
+                        // must create the archive
+                        const archive_dir = path.join(__dirname, basePath, 'archives', sub.name);
+                        const archive_path = path.join(archive_dir, 'archive.txt');
+
+                        // creates archive directory and text file if it doesn't exist
+                        fs.ensureDirSync(archive_dir);
+                        fs.ensureFileSync(archive_path);
+
+                        // updates subscription
+                        sub.archive = archive_dir;
+                        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
+
+                    resolve(true);
+                }
+                resolve(false);
+            }
+        });
+    });
+}
+
+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;
+    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();
+
+    // 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, 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;
+    sub_db.get('videos').remove({uid: file_uid}).write();
+
+    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+'.jpg');
+
+    const [jsonExists, videoFileExists, imageFileExists, altImageFileExists] = await Promise.all([
+        fs.pathExists(jsonPath),
+        fs.pathExists(videoFilePath),
+        fs.pathExists(imageFilePath),
+        fs.pathExists(altImageFilePath),
+    ]);
+
+    if (jsonExists) {
+        retrievedID = JSON.parse(await fs.readFile(jsonPath, 'utf8'))['id'];
+        await fs.unlink(jsonPath);
+    }
+
+    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 {
+            // 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, user_uid = null) {
+    if (!subExists(sub.id, user_uid)) {
+        return false;
+    }
+
+    // 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});
+
+    // 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 = null
+    appendedBasePath = getAppendedBasePath(sub, basePath);
+
+    let multiUserMode = null;
+    if (user_uid) {
+        multiUserMode = {
+            user: user_uid,
+            file_path: appendedBasePath
+        }
+    }
+
+    const ext = (sub.type && sub.type === 'audio') ? '.mp3' : '.mp4'
+
+    let fullOutput = `${appendedBasePath}/%(title)s.%(ext)s`;
+    if (sub.custom_output) {
+        fullOutput = `${appendedBasePath}/${sub.custom_output}.%(ext)s`;
+    }
+
+    let downloadConfig = ['-o', fullOutput, '-ciw', '--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) {
+        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) {
+        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');
+    }
+
+    // get videos
+    logger.verbose('Subscription: getting videos for subscription ' + sub.name);
+
+    return new Promise(resolve => {
+        youtubedl.exec(sub.url, downloadConfig, {}, function(err, output) {
+            logger.verbose('Subscription: finished check for ' + sub.name);
+            if (err && !output) {
+                logger.error(err.stderr ? 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
+                                fs.appendFileSync(archive_path, output['id']);
+                            }
+                        }
+                    } catch(e) {
+                        logger.error('Backup method failed. See error below:');
+                        logger.error(e);
+                    }
+                }
+                resolve(false);
+            } else if (output) {
+                if (output.length === 0 || (output.length === 1 && output[0] === '')) {
+                    logger.verbose('No additional videos to download for ' + sub.name);
+                    resolve(true);
+                }
+                for (let i = 0; i < output.length; i++) {
+                    let output_json = null;
+                    try {
+                        output_json = JSON.parse(output[i]);
+                    } catch(e) {
+                        output_json = null;
+                    }
+                    if (!output_json) {
+                        continue;
+                    }
+
+                    const reset_videos = i === 0;
+                    handleOutputJSON(sub, sub_db, output_json, multiUserMode, reset_videos);
+
+                    // TODO: Potentially store downloaded files in db?
+
+                }
+                resolve(true);
+            }
+        });
+    }, err => {
+        logger.error(err);
+    });
+}
+
+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 {
+        db_api.registerFileDB(path.basename(output_json['_filename']), sub.type, multiUserMode, sub);
+    }
+}
+
+function getAllSubscriptions(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 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 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 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();
+}
+
+// helper functions
+
+function getAppendedBasePath(sub, base_path) {
+
+    return path.join(base_path, (sub.isPlaylist ? 'playlists/' : 'channels/'), sub.name);
+}
+
+async function removeIDFromArchive(archive_path, id) {
+    let data = await fs.readFile(archive_path, {encoding: 'utf-8'});
+    if (!data) {
+        logger.error('Archive could not be found.');
+        return;
+    }
+
+    let dataArray = data.split('\n'); // convert file data in an array
+    const searchKeyword = id; // we are looking for a line, contains, key word id in the file
+    let lastIndex = -1; // let say, we have not found the keyword
+
+    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;
+        }
+    }
+
+    const line = dataArray.splice(lastIndex, 1); // remove the keyword id from the data Array
+
+    // UPDATE FILE WITH NEW DATA
+    const updatedData = dataArray.join('\n');
+    await fs.writeFile(archive_path, updatedData);
+    if (line) return line;
+    if (err) throw err;
+}
+
+module.exports = {
+    getSubscription        : getSubscription,
+    getSubscriptionByName  : getSubscriptionByName,
+    getAllSubscriptions    : getAllSubscriptions,
+    updateSubscription     : updateSubscription,
+    subscribe              : subscribe,
+    unsubscribe            : unsubscribe,
+    deleteSubscriptionFile : deleteSubscriptionFile,
+    getVideosForSub        : getVideosForSub,
+    removeIDFromArchive    : removeIDFromArchive,
+    setLogger              : setLogger,
+    initialize             : initialize
+}

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,71 @@
+var moment = require('moment');
+var Axios = require('axios');
+
+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
+                        }
+                    } = 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
+                });
+                // 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;
+}
+
+module.exports = {
+    getCommentsForVOD: getCommentsForVOD
+}

backend/utils.js

@@ -0,0 +1,211 @@
+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) {
+    // 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;
+        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)}` : null;
+        var thumbnail = jsonobj.thumbnail;
+        var duration = jsonobj.duration;
+
+        var size = stats.size;
+
+        var isaudio = type === 'audio';
+        var file_obj = new File(id, title, thumbnail, isaudio, duration, url, uploader, size, file, upload_date);
+        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(info_json) {
+    if (info_json['filesize']) {
+        return info_json['filesize'];
+    }
+
+    const formats = info_json['format_id'].split('+');
+    let expected_filesize = 0;
+    formats.forEach(format_id => {
+        if (!info_json.formats) return expected_filesize;
+        info_json.formats.forEach(available_format => {
+            if (available_format.format_id === format_id && available_format.filesize) {
+                expected_filesize += available_format.filesize;
+            }
+        });
+    });
+
+    return expected_filesize;
+}
+
+function fixVideoMetadataPerms(name, type, customPath = null) {
+    if (is_windows) return;
+    if (!customPath) customPath = type === 'audio' ? config_api.getConfigItem('ytdl_audio_folder_path')
+                                                   : 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
+}
+
+// objects
+
+function File(id, title, thumbnailURL, isAudio, duration, url, uploader, size, path, upload_date) {
+    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;
+}
+
+module.exports = {
+    getJSONMp3: getJSONMp3,
+    getJSONMp4: getJSONMp4,
+    getTrueFileName: getTrueFileName,
+    getDownloadedThumbnail: getDownloadedThumbnail,
+    getExpectedFileSize: getExpectedFileSize,
+    fixVideoMetadataPerms: fixVideoMetadataPerms,
+    deleteJSONFile: deleteJSONFile,
+    getDownloadedFilesByType: getDownloadedFilesByType,
+    recFindByExt: recFindByExt,
+    File: File
+}

backend/video/.gitignore

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

chrome-extension.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDMX9Wk5SM5cIfY
+6ReKX3ybY1rsbNbOzG8ceN7yyeXB0mor8pVsX1MOna2HewOyBuaaYNJRO4tJBxic
+7a8zQErfgHL/i/QrVvVCpfJ7xKvq6zij5NYoqd/FBUwawqjeH5/voIcAp9z5Vmsr
+kL0sxJUKy6b4IWNp3noU7Nvq2RwxnXQbKDhz8FrX6oQAnDC6gsG5a2OSPsaE4oqw
+6nmonORJypmpP5hqyHY8ffXBT2lAxjHT7OnYbaCBe2TQP8+rH6rDBOhjVNtUJ089
+ocTQL6LtQEPkcF4yKJmtcOwHl8OPGZs5l9i8xb4j9RuSPkm2lbzZX8sOsdGGoqJZ
+q68nYhsHAgMBAAECggEAXmtKEzfPObq88B/kAcgSk+FngMHZzcmR7bgD3GwdSxnQ
+dkRI9zvk7eQ35tcUwntAr4Lat6/ILjFqlBmVLxrdXHuF5Xz9jcZLYgKzz61xdYM9
+dC6FKF0u5eGIIvbauGAo7jaeGFX1F3Zu5b4lP9kEOGwU1B7sxF0FzsQM5+dtCJgv
+We/hWQeF+9gtoVnkCSS/Mq2p0UomXXHW0Bz4+HuHlTR9aiYbviYnotABiLUhZyzt
+v5yUaktb9qniBfdLpRlq8cp06xYlTEA9gJpa4Pnok8OWUsbAiW6EiXUSaZ/cchVa
+AnO8WWYvVOnnt6WHI3+QdFTnqVjE5TBX4N/7bVhHGQKBgQD0dtbFqp7vZK/jVYvE
+z0WPdySOg2ZDmoSfk5ZlR1+Y9zWToHv0qu8zqoOjL8Ubxrh9fGlOow+cCVdkEuaa
+jWC2AWetuRvW0Z5A3XMXr0/N/1fgOkTqtp3WNrUPjVJahEg3lN+90opgFoT8swSi
+s1oxW0oLcVIlrjhGBXAPCfsAuQKBgQDWBLRhHsRAvGcK5wGuVnxVApTIyBOermsW
+3bJt+7+UI+4sYrBAwkWdQG93IG0cQtn48TEPBgmR2fjRF5IFT9M4/u+QOeeByT7I
+we7nVtHgSY5ByC9N0mjWbcmSg8fktz/LonjldNC4kWdOFb75fxGf8kOGS5rUaMA4
+zHucfB6ZvwKBgQCPHJrysMXGY21MaqIeHzEboaX3ABl37hdBzAa5V6UxSVdGCydF
+vmO2HVZey/JaJmWOoKyNaowSzq0oWqBBTg6VvhDR9JHFmoVId9uOvAS+FYN+Mt5x
+gWK5KuGoLxVNBC+6yh6JY526TrSfsrU+Aj0Es+qO9FIg2PL8muZVB4S3kQKBgH/5
+CDMaxpc/EQ5/2413wZjDllwI51J3USm3Hz6Mzp2ybnSz/lh60k2Zfg1polTH1Lb6
+4i7tmUNRZ2sAARyUAuWN64n+VeRRhe1dqZFDZPQMh7fmEAMk0fOGaoXlrt2ghdEq
+Mchi9Xun1nHmpu9hgBR4NNBU3RwuFuLfwvprbZDZAoGAWa62QJChE86xQGP1MrL2
+SbIzw3cfeP5xdQ3MKldJiy5IkbMR7Z13WZ7FwvPTy0g/onLHD1rqlm1kUMsGRHpD
+5vH06PNpKXQ6x8BYaRGtE6P39jLycO/X+WK/lYTrWo1bR+mGCebDh4B5XrwT3gI6
+x4Gvz134pZCTyQCf5JCwbQs=
+-----END PRIVATE KEY-----

chrome-extension/background.js

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

chrome-extension/manifest.json

@@ -0,0 +1,26 @@
+{
+    "manifest_version": 2,
+    "name": "YoutubeDL-Material",
+    "version": "0.3",
+    "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"
+    },
+    "permissions": [
+        "tabs",
+        "storage"
+    ],
+    "options_ui": {
+        "page": "options.html",
+        "open_in_tab": false
+    },
+    "browser_specific_settings": {
+        "gecko": {
+          "id": "IsaacMGrynsztein@gmail.com",
+          "strict_min_version": "57.0"
+        }
+    }
+}

chrome-extension/options.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>YoutubeDL-Material Extension Options</title>
+    <!-- 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>
+
+<h2>Settings</h2>
+
+<div style="width: 95%; margin: 0 auto;">
+    <div class="form-group">
+    <label for="frontend_url">Frontend URL:</label>
+    <input class="form-control" type="text" id="frontend_url">
+    </div>
+
+    <div class="checkbox">
+        <label>
+            <input type="checkbox" id="audio_only">
+            Audio only
+        </label>
+    </div>
+
+    <div id="status"></div>
+    <button style="margin-bottom: 10px;" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" id="save">Save</button>
+
+    <div class="collapse" id="collapseExample">
+        <div class="card card-body">
+        Settings successfully saved!
+        </div>
+    </div>
+</div>
+
+<script src="options.js"></script>
+</body>
+</html>

chrome-extension/options.js

@@ -0,0 +1,30 @@
+// Saves options to chrome.storage
+function save_options() {
+    var frontend_url = document.getElementById('frontend_url').value;
+    var audio_only = document.getElementById('audio_only').checked;
+    chrome.storage.sync.set({
+        frontend_url: frontend_url,
+        audio_only: audio_only
+    }, function() {
+      // Update status to let user know options were saved.
+      $('#collapseExample').collapse('show');
+      setTimeout(function() {
+        $('#collapseExample').collapse('hide');
+      }, 2000);
+    });
+  }
+  
+  // Restores select box and checkbox state using the preferences
+  // stored in chrome.storage.
+  function restore_options() {
+    chrome.storage.sync.get({
+        frontend_url: 'http://localhost',
+        audio_only: false
+    }, function(items) {
+      document.getElementById('frontend_url').value = items.frontend_url;
+      document.getElementById('audio_only').checked = items.audio_only;
+    });
+  }
+  document.addEventListener('DOMContentLoaded', restore_options);
+  document.getElementById('save').addEventListener('click',
+      save_options);

docker-compose.yml

@@ -0,0 +1,15 @@
+version: "2"
+services:
+    ytdl_material:
+        environment: 
+            ALLOW_CONFIG_MUTATIONS: 'true'
+        restart: always
+        volumes:
+            - ./appdata:/app/appdata
+            - ./audio:/app/audio
+            - ./video:/app/video
+            - ./subscriptions:/app/subscriptions
+            - ./users:/app/users
+        ports:
+            - "8998:17442"
+        image: tzahi12345/youtubedl-material:latest

main.js

@@ -0,0 +1,41 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const url = require('url');
+
+let win;
+
+function createWindow() {
+  win = new BrowserWindow({ width: 800, height: 600 });
+
+  // load the dist folder from Angular
+  win.loadURL(
+    url.format({
+      pathname: path.join(__dirname, `/dist/index.html`),
+      protocol: 'file:',
+      slashes: true
+    })
+  );
+
+  // The following is optional and will open the DevTools:
+  // win.webContents.openDevTools()
+
+  win.on('closed', () => {
+    win = null;
+  });
+}
+
+app.on('ready', createWindow);
+
+// on macOS, closing the window doesn't quit the app
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+// initialize the app's main window
+app.on('activate', () => {
+  if (win === null) {
+    createWindow();
+  }
+});

package.json

@@ -1,46 +1,63 @@
 {
   "name": "youtube-dl-material",
-  "version": "0.0.0",
+  "version": "4.1.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"
+    "e2e": "ng e2e",
+    "electron": "ng build --base-href ./ && electron ."
+  },
+  "engines": {
+    "node": "12.3.1",
+    "npm": "6.10.3"
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^8.3.12",
-    "@angular/animations": "^8.2.11",
-    "@angular/cdk": "^8.2.3",
-    "@angular/common": "^8.2.11",
-    "@angular/compiler": "^8.2.11",
-    "@angular/core": "^8.2.11",
-    "@angular/forms": "^8.2.11",
-    "@angular/http": "^7.2.15",
-    "@angular/material": "^8.2.3",
-    "@angular/platform-browser": "^8.2.11",
-    "@angular/platform-browser-dynamic": "^8.2.11",
-    "@angular/router": "^8.2.11",
+    "@angular-devkit/core": "^9.0.6",
+    "@angular/animations": "^9.1.0",
+    "@angular/cdk": "^9.2.0",
+    "@angular/common": "^9.1.0",
+    "@angular/compiler": "^9.1.0",
+    "@angular/core": "^9.0.7",
+    "@angular/forms": "^9.1.0",
+    "@angular/localize": "^9.1.0",
+    "@angular/material": "^9.2.0",
+    "@angular/platform-browser": "^9.1.0",
+    "@angular/platform-browser-dynamic": "^9.1.0",
+    "@angular/router": "^9.1.0",
+    "@ngneat/content-loader": "^5.0.0",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
-    "ng4-configure": "^0.1.7",
+    "filesize": "^6.1.0",
+    "fingerprintjs2": "^2.1.0",
+    "nan": "^2.14.1",
+    "ng-lazyload-image": "^7.0.1",
+    "ngx-avatar": "^4.0.0",
+    "ngx-file-drop": "^9.0.1",
+    "ngx-videogular": "^9.0.1",
     "rxjs": "^6.5.3",
     "rxjs-compat": "^6.0.0-rc.0",
     "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
+    "typescript": "~3.7.5",
+    "web-animations-js": "^2.3.2",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.24",
-    "@angular/cli": "^8.3.12",
-    "@angular/compiler-cli": "^8.2.11",
-    "@angular/language-service": "^8.2.11",
+    "@angular-devkit/build-angular": "^0.901.0",
+    "@angular/cli": "^9.0.7",
+    "@angular/compiler-cli": "^9.0.7",
+    "@angular/language-service": "^9.0.7",
+    "@types/core-js": "^2.5.2",
     "@types/file-saver": "^2.0.1",
     "@types/jasmine": "2.5.45",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^5.0.1",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
+    "electron": "^8.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -51,7 +68,6 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~3.5.3"
+    "tslint": "~5.3.2"
   }
 }

src/_palette.scss

@@ -0,0 +1,15 @@
+/* Coolors Exported Palette - coolors.co/e8aeb7-b8e1ff-a9fff7-94fbab-82aba1 */
+
+/* HSL */
+$color1: hsla(351%, 56%, 80%, 1);
+$softblue: hsla(205%, 100%, 86%, 1);
+$color3: hsla(174%, 100%, 83%, 1);
+$color4: hsla(133%, 93%, 78%, 1);
+$color5: hsla(165%, 20%, 59%, 1);
+
+/* RGB */
+$color1: rgba(232, 174, 183, 1);
+$softblue: rgba(184, 225, 255, 1);
+$color3: rgba(169, 255, 247, 1);
+$color4: rgba(148, 251, 171, 1);
+$color5: rgba(130, 171, 161, 1);

src/app/app-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+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, 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 })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.css

@@ -1,56 +1,28 @@
-.demo-card {
-    margin: 16px;
-}
-
-.demo-basic {
-    padding: 0;
-}
-
-.demo-basic .mat-card-content {
-    padding: 16px;
-}
-
-mat-toolbar.top {
-    height: 60px;
-    width: 100%;
-    text-align: center;
-}
-
-/*::ng-deep .mat-form-field-placeholder{
-
-    transform: scale(.75) translateY(20px) !important;
-  }*/
-
-.big {
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.centered {
-    margin: 0 auto;
-    top: 50%;
-    left: 50%;
-}
-
-.example-full-width {
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     width: 100%;
 }
-
-mat-form-field.mat-form-field {
-    font-size: 24px;
-  }
-
-.spinner {
-    position: absolute;
-    display: inline-block;
-    margin-left: -28px;
-    margin-top: -10px;
+  
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1;
 }
 
-.make-room-for-spinner {
-    padding-right: 40px;
+.theme-slide-toggle {
+    top: 2px;
+    left: 10px;
+    position: relative;
+    pointer-events: none;
 }
 
-.equal-sizes {
-    padding-right: 20px;
+.sidenav-container {
+    z-index: -1 !important;
+}
+
+.top-toolbar {
+    height: 64px;
 }

src/app/app.component.html

@@ -1,105 +1,58 @@
-<mat-toolbar color="primary" class="top">
-    <table width="100%" height="100%">
-        <td class="topbar" style="text-align: left; left:0px; font-size: 15px">
-        </td>
-        <td class="topbar" style="text-align: center">
-            <div style="margin-top: 14px">{{topBarTitle}}</div>
-        </td>
-        <td class="topbar" style="text-align: right">
-
-        </td>
-    </table>
-</mat-toolbar>
-
-<br/>
-
-<div class="big demo-basic">
-    <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
-        <mat-card-title>
-            Youtube Downloader
-        </mat-card-title>
-        <mat-card-content>
-            <div style="position: relative;">
-                <form class="example-form">
-                    <mat-form-field class="example-full-width">
-                        <input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required>
-                        <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
-                    </mat-form-field>
-                </form>
-                <br/>
-                <mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
-                
+<div [style.background]="postsService.theme ? postsService.theme.background_color : null" style="width: 100%; height: 100%;">
+    <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'" 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 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 *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>
+                        <button (click)="openAboutDialog()" mat-menu-item>
+                            <mat-icon>info</mat-icon>
+                            <span i18n="About menu label">About</span>
+                        </button>
+                    </mat-menu>
+                </div>
             </div>
-        </mat-card-content>
-        <mat-card-actions>
-            <button style="margin-left: 8px; margin-bottom: 8px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-stroked-button
-                color="primary">Download</button>
-        </mat-card-actions>
-    </mat-card>
-</div>
-<br/>
-<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
-    <div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
-        <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
-        <br/>
+        </mat-toolbar>
     </div>
-    <div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
-        <mat-spinner [diameter]="25"></mat-spinner>
+    <div class="sidenav-container" style="height: calc(100% - 64px)">
+        <mat-sidenav-container style="height: 100%">
+            <mat-sidenav [opened]="postsService.sidepanel_mode === 'side' && !window.location.href.includes('/player')" [mode]="postsService.sidepanel_mode" #sidenav>
+                <mat-nav-list>
+                    <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">
+                <router-outlet></router-outlet>
+            </mat-sidenav-content>
+        </mat-sidenav-container>
     </div>
-    <ng-template #indeterminateprogress>
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    </ng-template>
-    <br/>
-</div>
-<ng-template #nofile>
-
-</ng-template>
-<div style="margin: 20px" *ngIf="fileManagerEnabled">
-    <mat-accordion>
-        <mat-expansion-panel class="big">
-            <mat-expansion-panel-header>
-                <mat-panel-title>
-                    Audio
-                </mat-panel-title>
-                <mat-panel-description>
-                    Your audio files are here
-                </mat-panel-description>
-            </mat-expansion-panel-header>
-            <div *ngIf="mp3s.length > 0;else nomp3s">
-                <mat-grid-list cols="4" rowHeight="150px">
-                    <mat-grid-tile *ngFor="let file of mp3s; index as i;">
-                        <app-file-card (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
-                            [length]="file.duration" [isAudio]="true"></app-file-card>
-                    </mat-grid-tile>
-                </mat-grid-list>
-            </div>
-
-        </mat-expansion-panel>
-        <mat-expansion-panel class="big">
-            <mat-expansion-panel-header>
-                <mat-panel-title>
-                    Video
-                </mat-panel-title>
-                <mat-panel-description>
-                    Your video files are here
-                </mat-panel-description>
-            </mat-expansion-panel-header>
-            <div *ngIf="mp4s.length > 0;else nomp4s">
-                <mat-grid-list cols="4" rowHeight="150px">
-                    <mat-grid-tile *ngFor="let file of mp4s; index as i;">
-                        <app-file-card (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
-                            [length]="file.duration" [isAudio]="false"></app-file-card>
-                    </mat-grid-tile>
-                </mat-grid-list>
-            </div>
-        </mat-expansion-panel>
-    </mat-accordion>
-</div>
-
-<ng-template #nomp3s>
-
-</ng-template>
-
-<ng-template #nomp4s>
-
-</ng-template>
+</div>

src/app/app.component.ts

@@ -1,227 +1,208 @@
-import { Component, OnInit } 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';
 import {FormControl, Validators} from '@angular/forms';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSnackBar} from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSidenav } from '@angular/material/sidenav';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { saveAs } from 'file-saver';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/mapTo';
 import 'rxjs/add/operator/toPromise';
+import 'rxjs/add/observable/fromEvent'
+import 'rxjs/add/operator/filter'
+import 'rxjs/add/operator/debounceTime'
+import 'rxjs/add/operator/do'
+import 'rxjs/add/operator/switch'
+import { YoutubeSearchService, Result } from './youtube-search.service';
+import { Router, NavigationStart, NavigationEnd } from '@angular/router';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { THEMES_CONFIG } from '../themes';
+import { SettingsComponent } from './settings/settings.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 {
-  iOS = false;
+export class AppComponent implements OnInit, AfterViewInit {
 
-  determinateProgress = false;
-  downloadingfile = false;
-  audioOnly: boolean;
-  urlError = false;
-  path = '';
-  url = '';
-  exists = '';
+  @HostBinding('class') componentCssClass;
+  THEMES_CONFIG = THEMES_CONFIG;
+
+  window = window;
+
+  // config items
   topBarTitle = 'Youtube Downloader';
-  percentDownloaded: number;
-  fileManagerEnabled = false;
-  downloadOnlyMode = false;
+  defaultTheme = null;
+  allowThemeChange = null;
+  allowSubscriptions = false;
+  enableDownloadsManager = false;
 
-  mp3s: any[] = [];
-  mp4s: any[] = [];
+  @ViewChild('sidenav') sidenav: MatSidenav;
+  @ViewChild('hamburgerMenu', { read: ElementRef }) hamburgerMenuButton: ElementRef;
+  navigator: string = null;
 
-  urlForm = new FormControl('', [Validators.required]);
+  constructor(public postsService: PostsService, public snackBar: MatSnackBar, private dialog: MatDialog,
+    public router: Router, public overlayContainer: OverlayContainer, private elementRef: ElementRef) {
 
-  constructor(private postsService: PostsService, public snackBar: MatSnackBar) {
-    this.audioOnly = false;
-
-
-    // loading config
-    this.postsService.loadNavItems().subscribe(result => { // loads settings
-      const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
-      this.topBarTitle = result['YoutubeDLMaterial']['Extra']['title_top'];
-      this.fileManagerEnabled = result['YoutubeDLMaterial']['Extra']['file_manager_enabled'];
-      this.downloadOnlyMode = result['YoutubeDLMaterial']['Extra']['download_only_mode'];
-
-      this.postsService.path = backendUrl;
-      this.postsService.startPath = backendUrl;
-      this.postsService.startPathSSL = backendUrl;
-
-      if (this.fileManagerEnabled) {
-        this.getMp3s();
-        this.getMp4s();
+    this.navigator = localStorage.getItem('player_navigator');
+    // runs on navigate, captures the route that navigated to the player (if needed)
+    this.router.events.subscribe((e) => { if (e instanceof NavigationStart) {
+      this.navigator = localStorage.getItem('player_navigator');
+    } else if (e instanceof NavigationEnd) {
+      // blurs hamburger menu if it exists, as the sidenav likes to focus on it after closing
+      if (this.hamburgerMenuButton && this.hamburgerMenuButton.nativeElement) {
+        this.hamburgerMenuButton.nativeElement.blur();
+      }
+    }
+    });
+
+    this.postsService.config_reloaded.subscribe(changed => {
+      if (changed) {
+        this.loadConfig();
       }
-    }, error => {
-      console.log(error);
     });
 
   }
 
-  // file manager stuff
-
-  getMp3s() {
-    this.postsService.getMp3s().subscribe(result => {
-      const mp3s = result['mp3s'];
-      this.mp3s = mp3s;
-    }, error => {
-      console.log(error);
-    });
-  }
-
-  getMp4s() {
-    this.postsService.getMp4s().subscribe(result => {
-      const mp4s = result['mp4s'];
-      this.mp4s = mp4s;
-    },
-    error => {
-      console.log(error);
-    });
-  }
-
-  public goToFile(name, isAudio) {
-    if (isAudio) {
-      this.downloadHelperMp3(name, true);
-    } else {
-      this.downloadHelperMp4(name, true);
-    }
-  }
-
-  public removeFromMp3(name: string) {
-    for (let i = 0; i < this.mp3s.length; i++) {
-      if (this.mp3s[i].id === name) {
-        this.mp3s.splice(i, 1);
-      }
-    }
-  }
-
-  public removeFromMp4(name: string) {
-    // console.log(name);
-    // console.log(this.mp4s);
-    for (let i = 0; i < this.mp4s.length; i++) {
-      if (this.mp4s[i].id === name) {
-        this.mp4s.splice(i, 1);
-      }
-    }
-  }
-
-  // app initialization.
   ngOnInit() {
-    this.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
-  }
-
-  // download helpers
-
-  downloadHelperMp3(name: string, forceView = false) {
-    this.postsService.getFileStatusMp3(name).subscribe(fileExists => {
-      const exists = fileExists;
-      this.exists = exists[0];
-      if (exists[0] === 'failed') {
-        const percent = exists[2];
-        // console.log(percent);
-        if (percent > 0.30) {
-          this.determinateProgress = true;
-          this.percentDownloaded = percent * 100;
-        }
-        setTimeout(() => this.downloadHelperMp3(name), 500);
-      } else {
-        // if download only mode, just download the file. no redirect
-        if (forceView === false && this.downloadOnlyMode && !this.iOS) {
-          this.postsService.downloadFileFromServer(name, 'audio').subscribe(res => {
-            const blob: Blob = res;
-            saveAs(blob, name + '.mp3');
-            this.downloadingfile = false;
-          });
-        } else {
-          window.location.href = this.exists;
-        }
-
-        // reloads mp3s
-        this.getMp3s();
-      }
-    });
-
-  }
-
-  downloadHelperMp4(name: string, forceView = false) {
-    this.postsService.getFileStatusMp4(name).subscribe(fileExists => {
-      const exists = fileExists;
-      this.exists = exists[0];
-      if (exists[0] === 'failed') {
-        const percent = exists[2];
-        if (percent > 0.30) {
-          this.determinateProgress = true;
-          this.percentDownloaded = percent * 100;
-        }
-        setTimeout(() => this.downloadHelperMp4(name), 500);
-      } else {
-        // if download only mode, just download the file. no redirect
-        if (forceView === false && this.downloadOnlyMode) {
-          this.postsService.downloadFileFromServer(name, 'video').subscribe(res => {
-            const blob: Blob = res;
-            saveAs(blob, name + '.mp4');
-            this.downloadingfile = false;
-          });
-        } else {
-          window.location.href = this.exists;
-        }
-
-        // reloads mp4s
-        this.getMp4s();
-      }
-    });
-
-  }
-
-  // download click handler
-  downloadClicked() {
-    if (this.ValidURL(this.url)) {
-      this.urlError = false;
-      this.path = '';
-
-      if (this.audioOnly) {
-        this.downloadingfile = true;
-        this.postsService.makeMP3(this.url).subscribe(posts => {
-          this.path = posts['audiopathEncoded'];
-          if (this.path !== '-1') {
-            this.downloadHelperMp3(this.path);
+    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.');
           }
-        }, error => { // can't access server
-          this.downloadingfile = false;
-          this.openSnackBar('Download failed!', 'OK.');
         });
-      } else {
-        this.downloadingfile = true;
-        this.postsService.makeMP4(this.url).subscribe(posts => {
-          this.path = posts['videopathEncoded'];
-          if (this.path !== '-1') {
-            this.downloadHelperMp4(this.path);
-          }
-        }, error => { // can't access server
-          this.downloadingfile = false;
-          this.openSnackBar('Download failed!', 'OK.');
-      });
       }
+    });
+  }
+
+  ngAfterViewInit() {
+    this.postsService.sidenav = this.sidenav;
+  }
+
+  toggleSidenav() {
+    this.sidenav.toggle();
+  }
+
+  loadConfig() {
+    // loading config
+    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');
+    }
+
+    // gets the subscriptions
+    if (this.allowSubscriptions) {
+      this.postsService.reloadSubscriptions();
+    }
+
+    this.postsService.reloadCategories();
+  }
+
+  // theme stuff
+
+  setTheme(theme) {
+    // theme is registered, so set it to the stored cookie variable
+    let old_theme = null;
+    if (this.THEMES_CONFIG[theme]) {
+        if (localStorage.getItem('theme')) {
+          old_theme = localStorage.getItem('theme');
+          if (!this.THEMES_CONFIG[old_theme]) {
+            console.log('bad theme found, setting to default');
+            if (this.defaultTheme === null) {
+              // means it hasn't loaded yet
+              console.error('No default theme detected');
+            } else {
+              localStorage.setItem('theme', this.defaultTheme);
+              old_theme = localStorage.getItem('theme'); // updates old_theme
+            }
+          }
+        }
+        localStorage.setItem('theme', theme);
+        this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = this.THEMES_CONFIG[theme]['background_color'];
     } else {
-      this.urlError = true;
+        console.error('Invalid theme: ' + theme);
+        return;
+    }
+
+    this.postsService.setTheme(theme);
+
+    this.onSetTheme(this.THEMES_CONFIG[theme]['css_label'], old_theme ? this.THEMES_CONFIG[old_theme]['css_label'] : old_theme);
+  }
+
+  onSetTheme(theme, old_theme) {
+    if (old_theme) {
+      document.body.classList.remove(old_theme);
+      this.overlayContainer.getContainerElement().classList.remove(old_theme);
+    }
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
+  }
+
+  flipTheme() {
+    if (this.postsService.theme.key === 'default') {
+      this.setTheme('dark');
+    } else if (this.postsService.theme.key === 'dark') {
+      this.setTheme('default');
     }
   }
 
-  // checks if url is a valid URL
-  ValidURL(str) {
-    // tslint:disable-next-line: max-line-length
-    const strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
-    const re = new RegExp(strRegex);
-    return re.test(str);
+  themeMenuItemClicked(event) {
+    this.flipTheme();
+    event.stopPropagation();
   }
 
-  // snackbar helper
-  public openSnackBar(message: string, action: string) {
-    this.snackBar.open(message, action, {
-      duration: 2000,
+  getSubscriptions() {
+
+  }
+
+
+  goBack() {
+    if (!this.navigator) {
+      this.router.navigate(['/home']);
+    } else {
+      this.router.navigateByUrl(this.navigator);
+    }
+  }
+
+  openSettingsDialog() {
+    const dialogRef = this.dialog.open(SettingsComponent, {
+      width: '80vw'
     });
   }
+
+  openAboutDialog() {
+    const dialogRef = this.dialog.open(AboutDialogComponent, {
+      width: '80vw'
+    });
+  }
+
+  openProfileDialog() {
+    const dialogRef = this.dialog.open(UserProfileDialogComponent, {
+      width: '60vw'
+    });
+  }
+
 }
 

src/app/app.module.ts

@@ -1,26 +1,136 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
-  MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule, MatGridListModule,
-  MatProgressBarModule, MatExpansionModule,
-  MatGridList,
-  MatProgressSpinnerModule} from '@angular/material';
-  import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule, LOCALE_ID } from '@angular/core';
+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';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+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 { 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 {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { HttpModule } from '@angular/http';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
-import {APP_BASE_HREF} from '@angular/common';
 import { FileCardComponent } from './file-card/file-card.component';
-import {RouterModule} from '@angular/router';
+import { 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 { InputDialogComponent } from './input-dialog/input-dialog.component';
+import { LazyLoadImageModule, IsVisibleProps } from 'ng-lazyload-image';
+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';
+import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
+import { SubscribeDialogComponent } from './dialogs/subscribe-dialog/subscribe-dialog.component';
+import { SubscriptionComponent } from './subscription//subscription/subscription.component';
+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 { 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';
+
+registerLocaleData(es, 'es');
+
+export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
+  return (element.id === 'video' ? videoFilesMouseHovering || videoFilesOpened : audioFilesMouseHovering || audioFilesOpened);
+}
 
 @NgModule({
   declarations: [
     AppComponent,
-    FileCardComponent
+    FileCardComponent,
+    MainComponent,
+    PlayerComponent,
+    InputDialogComponent,
+    CreatePlaylistComponent,
+    DownloadItemComponent,
+    SubscriptionsComponent,
+    SubscribeDialogComponent,
+    SubscriptionComponent,
+    SubscriptionFileCardComponent,
+    SubscriptionInfoDialogComponent,
+    SettingsComponent,
+    AboutDialogComponent,
+    VideoInfoDialogComponent,
+    ArgModifierDialogComponent,
+    HighlightPipe,
+    UpdaterComponent,
+    UpdateProgressDialogComponent,
+    ShareMediaDialogComponent,
+    LoginComponent,
+    DownloadsComponent,
+    UserProfileDialogComponent,
+    SetDefaultAdminDialogComponent,
+    ModifyUsersComponent,
+    AddUserDialogComponent,
+    ManageUserComponent,
+    ManageRoleComponent,
+    CookiesUploaderDialogComponent,
+    LogsViewerComponent,
+    ModifyPlaylistComponent,
+    ConfirmDialogComponent,
+    UnifiedFileCardComponent,
+    RecentVideosComponent,
+    EditSubscriptionDialogComponent,
+    CustomPlaylistsComponent,
+    EditCategoryDialogComponent,
+    TwitchChatComponent
   ],
   imports: [
+    CommonModule,
     BrowserModule,
     BrowserAnimationsModule,
     MatNativeDateModule,
@@ -29,7 +139,6 @@ import {RouterModule} from '@angular/router';
     MatInputModule,
     MatSelectModule,
     ReactiveFormsModule,
-    HttpModule,
     HttpClientModule,
     MatToolbarModule,
     MatCardModule,
@@ -43,9 +152,45 @@ import {RouterModule} from '@angular/router';
     MatExpansionModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
-    RouterModule
+    MatButtonToggleModule,
+    MatRippleModule,
+    MatMenuModule,
+    MatDialogModule,
+    MatSlideToggleModule,
+    MatAutocompleteModule,
+    MatTabsModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatChipsModule,
+    DragDropModule,
+    ClipboardModule,
+    NgxFileDropModule,
+    AvatarModule,
+    ContentLoaderModule,
+    VgCoreModule,
+    VgControlsModule,
+    VgOverlayPlayModule,
+    VgBufferingModule,
+    LazyLoadImageModule.forRoot({ isVisible }),
+    RouterModule,
+    AppRoutingModule,
+  ],
+  entryComponents: [
+    InputDialogComponent,
+    CreatePlaylistComponent,
+    SubscribeDialogComponent,
+    SubscriptionInfoDialogComponent,
+    SettingsComponent
+  ],
+  providers: [
+    PostsService
+  ],
+  exports: [
+    HighlightPipe
   ],
-  providers: [PostsService],
   bootstrap: [AppComponent]
 })
+
 export class AppModule { }

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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomPlaylistsComponent } from './custom-playlists.component';
+
+describe('CustomPlaylistsComponent', () => {
+  let component: CustomPlaylistsComponent;
+  let fixture: ComponentFixture<CustomPlaylistsComponent>;
+
+  beforeEach(async(() => {
+    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}]);
+      }
+    } 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadsComponent } from './downloads.component';
+
+describe('DownloadsComponent', () => {
+  let component: DownloadsComponent;
+  let fixture: ComponentFixture<DownloadsComponent>;
+
+  beforeEach(async(() => {
+    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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    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) {
+      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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogsViewerComponent } from './logs-viewer.component';
+
+describe('LogsViewerComponent', () => {
+  let component: LogsViewerComponent;
+  let fixture: ComponentFixture<LogsViewerComponent>;
+
+  beforeEach(async(() => {
+    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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageRoleComponent } from './manage-role.component';
+
+describe('ManageRoleComponent', () => {
+  let component: ManageRoleComponent;
+  let fixture: ComponentFixture<ManageRoleComponent>;
+
+  beforeEach(async(() => {
+    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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageUserComponent } from './manage-user.component';
+
+describe('ManageUserComponent', () => {
+  let component: ManageUserComponent;
+  let fixture: ComponentFixture<ManageUserComponent>;
+
+  beforeEach(async(() => {
+    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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModifyUsersComponent } from './modify-users.component';
+
+describe('ModifyUsersComponent', () => {
+  let component: ModifyUsersComponent;
+  let fixture: ComponentFixture<ModifyUsersComponent>;
+
+  beforeEach(async(() => {
+    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,45 @@
+<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">
+                <div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
+                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? '?jwt=' + this.postsService.token : ''"></app-unified-file-card>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
+                <div *ngFor="let file of loading_files; let i = index" class="mb-2 mt-2 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>
+</div>

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

@@ -0,0 +1,60 @@
+.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;
+}
+
+.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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecentVideosComponent } from './recent-videos.component';
+
+describe('RecentVideosComponent', () => {
+  let component: RecentVideosComponent;
+  let fixture: ComponentFixture<RecentVideosComponent>;
+
+  beforeEach(async(() => {
+    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,288 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { Router } from '@angular/router';
+
+@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'];
+
+  constructor(public postsService: PostsService, private router: Router) {
+    // get cached file count
+    if (localStorage.getItem('cached_file_count')) {
+      this.cached_file_count = +localStorage.getItem('cached_file_count');
+      this.loading_files = Array(this.cached_file_count).fill(0);
+    }
+  }
+
+  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));
+  }
+
+  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));
+    }
+  }
+
+  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.forEach(file => {
+        file.duration = typeof file.duration !== 'string' ? file.duration : this.durationStringToNumber(file.duration);
+      });
+      this.files.sort(this.sortFiles);
+      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;
+    });
+  }
+
+  // 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, index, blacklistMode);
+    } else {
+      this.deleteNormalFile(file, index, blacklistMode);
+    }
+  }
+
+  deleteNormalFile(file, index, blacklistMode = false) {
+    this.postsService.deleteFile(file.uid, file.isAudio ? 'audio' : 'video', blacklistMode).subscribe(result => {
+      if (result) {
+        this.postsService.openSnackBar('Delete success!', 'OK.');
+        this.files.splice(index, 1);
+      } else {
+        this.postsService.openSnackBar('Delete failed!', 'OK.');
+      }
+    }, err => {
+      this.postsService.openSnackBar('Delete failed!', 'OK.');
+    });
+  }
+
+  deleteSubscriptionFile(file, index, blacklistMode = false) {
+    if (blacklistMode) {
+      this.deleteForever(file, index);
+    } else {
+      this.deleteAndRedownload(file, index);
+    }
+  }
+
+  deleteAndRedownload(file, index) {
+    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    this.postsService.deleteSubscriptionFile(sub, file.id, false, file.uid).subscribe(res => {
+      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
+      this.files.splice(index, 1);
+    });
+  }
+
+  deleteForever(file, index) {
+    const sub = this.postsService.getSubscriptionByID(file.sub_id);
+    this.postsService.deleteSubscriptionFile(sub, file.id, true, file.uid).subscribe(res => {
+      this.postsService.openSnackBar(`Successfully deleted file: '${file.id}'`);
+      this.files.splice(index, 1);
+    });
+  }
+
+  // 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;
+  }
+}

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

@@ -0,0 +1,11 @@
+<div class="chat-container" #scrollContainer *ngIf="visible_chat">
+    <div style="width: 250px; text-align: center;"><strong>Twitch Chat</strong></div>
+    <div style="max-width: 250px" *ngFor="let chat of visible_chat">
+        {{chat.timestamp_str}} - <strong>{{chat.name}}</strong>: {{chat.message}}
+    </div>
+</div>
+
+<ng-container *ngIf="chat_response_received && !full_chat">
+    <button (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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TwitchChatComponent } from './twitch-chat.component';
+
+describe('TwitchChatComponent', () => {
+  let component: TwitchChatComponent;
+  let fixture: ComponentFixture<TwitchChatComponent>;
+
+  beforeEach(async(() => {
+    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,135 @@
+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() current_timestamp = null;
+
+  @ViewChild('scrollContainer') scrollRef: ElementRef;
+
+  constructor(private postsService: PostsService) { }
+
+  ngOnInit(): void {
+    this.getFullChat();
+  }
+
+  ngAfterViewInit() {
+  }
+
+  private isUserNearBottom(): boolean {
+    const threshold = 300;
+    const position = this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight;
+    const height = this.scrollContainer.scrollHeight;
+    return position > height - threshold;
+  }
+
+  scrollToBottom = () => {
+    this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight;
+  }
+
+  addNewChatMessages() {
+    if (!this.scrollContainer) {
+      this.scrollContainer = this.scrollRef.nativeElement;
+    }
+    if (this.current_chat_index === null) {
+      this.current_chat_index = this.getIndexOfNextChat();
+    }
+
+    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;
+        if (this.isUserNearBottom()) {
+          this.scrollToBottom();
+        }
+      } 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).subscribe(res => {
+      this.chat_response_received = true;
+      if (res['chat']) {
+        this.initializeChatCheck(res['chat']);
+      }
+    });
+  }
+
+  renewChat() {
+    this.visible_chat = [];
+    this.current_chat_index = this.getIndexOfNextChat();
+  }
+
+  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).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,60 @@
+<div (mouseover)="elevated=true" (mouseout)="elevated=false" (contextmenu)="onRightClick($event)" style="position: relative; width: fit-content;">
+    <div *ngIf="!loading" class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate' : undefined : locale.ngID}}</div>
+    <div *ngIf="loading" class="download-time" 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 [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,137 @@
+.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: 99999;
+}
+
+.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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UnifiedFileCardComponent } from './unified-file-card.component';
+
+describe('UnifiedFileCardComponent', () => {
+  let component: UnifiedFileCardComponent;
+  let fixture: ComponentFixture<UnifiedFileCardComponent>;
+
+  beforeEach(async(() => {
+    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;
+  }
+}