Merge pull request #4 from n8detar/master

Added re-scan subs and start download functionality to downloads page

.devcontainer/Dockerfile

@@ -0,0 +1,28 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.224.3/containers/python-3/.devcontainer/base.Dockerfile
+
+# [Choice] Python version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.10, 3.9, 3.8, 3.7, 3.6, 3-bullseye, 3.10-bullseye, 3.9-bullseye, 3.8-bullseye, 3.7-bullseye, 3.6-bullseye, 3-buster, 3.10-buster, 3.9-buster, 3.8-buster, 3.7-buster, 3.6-buster
+ARG VARIANT="3.10-bullseye"
+FROM mcr.microsoft.com/vscode/devcontainers/python:0-${VARIANT}
+
+# [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
+ARG NODE_VERSION="none"
+RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
+
+RUN sed -i 's/required/sufficient/g' /etc/pam.d/chsh
+
+# [Optional] If your pip requirements rarely change, uncomment this section to add them to the image.
+COPY tubearchivist/requirements.txt /tmp/pip-tmp/
+RUN pip3 --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
+  && rm -rf /tmp/pip-tmp
+
+# [Optional] Uncomment this section to install additional OS packages.
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+  && apt-get -y install --no-install-recommends fish 
+
+ENV SHELL /usr/bin/fish
+
+USER vscode
+RUN fish -c "curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher"
+
+# [Optional] Uncomment this line to install global node packages.
+# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1

.devcontainer/devcontainer.json

@@ -0,0 +1,64 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.224.3/containers/python-3
+{
+  "name": "Python 3",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": "..",
+    "args": {
+      // Update 'VARIANT' to pick a Python version: 3, 3.10, 3.9, 3.8, 3.7, 3.6
+      // Append -bullseye or -buster to pin to an OS version.
+      // Use -bullseye variants on local on arm64/Apple Silicon.
+      "VARIANT": "3.10-bullseye",
+      // Options
+      "NODE_VERSION": "16"
+    }
+  },
+
+  // Set *default* container specific settings.json values on container create.
+  "settings": {
+    "python.defaultInterpreterPath": "/usr/local/bin/python",
+    "python.linting.enabled": true,
+    "python.linting.pylintEnabled": true,
+    "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
+    "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
+    "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
+    "python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
+    "python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
+    "python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
+    "python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
+    "python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
+    "python.linting.pylintPath": "/usr/local/py-utils/bin/pylint",
+    "typescript.tsdk": "tubearchivist/www/node_modules/typescript/lib",
+    "terminal.integrated.defaultProfile.linux": "fish"
+  },
+
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": [
+    "ms-python.python",
+    "ms-python.vscode-pylance",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "batisteo.vscode-django",
+    "christian-kohler.path-intellisense",
+    "quicktype.quicktype"
+  ],
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [3000, 8000],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "chsh -s /usr/bin/fish && fish -c 'fisher install matchai/spacefish'",
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "vscode",
+  "features": {
+    // "fish": "latest",
+    "github-cli": "latest",
+    "docker-in-docker": {
+      "version": "latest",
+      "moby": true
+    },
+    "git": "os-provided"
+  }
+}

.dockerignore

@@ -17,5 +17,8 @@ venv/
 # Unneeded graphics
 assets/*
 
+# Unneeded docs
+docs/*
+
 # for local testing only
 testing.sh

.env.local.example

@@ -0,0 +1,8 @@
+# https://next-auth.js.org/configuration/options#nextauth_secret Used to encrypt JWT
+NEXTAUTH_SECRET=
+
+# https://next-auth.js.org/configuration/options#nextauth_url When deploying to production, set the NEXTAUTH_URL environment variable to the canonical URL of your site.
+NEXTAUTH_URL=
+
+# URL of the Tubearchivist server without a trailing /
+NEXT_PUBLIC_TUBEARCHIVIST_URL=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn lint

.github/workflows/lint_python.yml

@@ -1,23 +0,0 @@
-name: lint_python
-on: [pull_request, push]
-jobs:
-  lint_python:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-python@v2
-      - run: pip install --upgrade pip wheel
-      - run: pip install bandit black codespell flake8 flake8-bugbear
-                         flake8-comprehensions isort
-      - run: bandit --recursive  --skip B105,B108,B404,B603,B607 .
-      - run: black --check --diff --line-length 79 .
-      - run: codespell
-      - run: flake8 . --count --max-complexity=12 --max-line-length=79
-                      --show-source --statistics
-      - run: isort --check-only --line-length 79 --profile black .
-      # - run: pip install -r tubearchivist/requirements.txt
-      # - run: mkdir --parents --verbose .mypy_cache
-      # - run: mypy --ignore-missing-imports --install-types --non-interactive .
-      # - run: python3 tubearchivist/manage.py test || true
-      # - run: shopt -s globstar && pyupgrade --py36-plus **/*.py || true
-      # - run: safety check

.gitignore

@@ -1,8 +1,35 @@
-# python testing cache
-__pycache__
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# django testing db
-db.sqlite3
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# frontend fonts
-*ttf.woff
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "python.linting.pylintEnabled": true,
-    "python.linting.pycodestyleEnabled": false,
-    "python.linting.enabled": true
-}

CONTRIBUTING.md

@@ -5,8 +5,38 @@ If you haven't already, the best place to start is the README. This will give yo
 
 ## Report a bug
 
-If you notice something is not working as expected, check to see if it has been previously reported in the [open issues](https://github.com/bbilly1/tubearchivist/issues).
-If it has not yet been disclosed, go ahead and create an issue.
+If you notice something is not working as expected, check to see if it has been previously reported in the [open issues](https://github.com/tubearchivist/tubearchivist/issues).
+If it has not yet been disclosed, go ahead and create an issue.  
+If the issue doesn't move forward due to a lack of response, I assume it's solved and will close it after some time to keep the list fresh. 
+
+## Wiki
+
+The wiki is where all user functions are explained in detail. These pages are mirrored into the **docs** folder of the repo. This allows for pull requests and all other features like regular code. Make any changes there, and I'll sync them with the wiki tab.
+
+## Development Environment
+
+I have learned the hard way, that working on a dockerized application outside of docker is very error prone and in general not a good idea. So if you want to test your changes, it's best to run them in a docker testing environment.  
+
+This is my setup I have landed on, YMMV:
+- Clone the repo, work on it with your favorite code editor in your local filesystem. *testing* branch is the where all the changes are happening, might be unstable and is WIP.
+- Then I have a VM on KVM hypervisor running standard Ubuntu Server LTS with docker installed. The VM keeps my projects separate and offers convenient snapshot functionality. The VM also offers ways to simulate lowend environments by limiting CPU cores and memory. But you could also just run docker on your host system.
+- The `Dockerfile` is structured in a way that the actual application code is in the last layer so rebuilding the image with only code changes utilizes the build cache for everything else and will just take a few seconds.
+- Take a look at the `deploy.sh` file. I have my local DNS resolve `tubearchivist.local` to the IP of the VM for convenience. To deploy the latest changes and rebuild the application to the testing VM run:
+```bash
+./deploy.sh test
+```
+- The command above will call the docker build command with `--build-arg INSTALL_DEBUG=1` to install additional useful debug tools.
+- The `test` argument takes another optional argument to build for a specific architecture valid options are: `amd64`, `arm64` and `multi`, default is `amd64`.
+- This `deploy.sh` file is not meant to be universally usable for every possible environment but could serve as an idea on how to automatically rebuild containers to test changes - customize to your liking. 
+
+## Working with Elasticsearch
+Additionally to the required services as listed in the example docker-compose file, the **Dev Tools** of [Kibana](https://www.elastic.co/guide/en/kibana/current/docker.html) are invaluable for running and testing Elasticsearch queries.  
+
+If you want to run queries in on the Elasticsearch container directly from your host with for example `curl` or something like *postman*, you might want to **publish** the port 9200 instead of just **exposing** it.
+
+## Implementing a new feature
+
+Do you see anything on the roadmap that you would like to take a closer look at but you are not sure, what's the best way to tackle that? Or anything not on there yet you'd like to implement but are not sure how? Open up an issue and we try to find a solution together.
 
 ## Making changes
 
@@ -14,7 +44,12 @@ To fix a bug or implement a feature, fork the repository and make all changes to
 
 ## Releases
 
-Everything on the master branch is what's in the latest release and is what you get in your container when you `pull` either the *:latest* tag or the newest named version. If you want to test the newest changes and improvements, clone the repository and build the docker container with the Dockerfile from the testing branch.
+There are three different docker tags:
+- **latest**: As the name implies is the latest multiarch release for regular usage.
+- **unstable**: Intermediate amd64 builds for quick testing and improved collaboration. Don't mix with a *latest* installation, for your testing environment only. This is untested and WIP and will have breaking changes between commits that might require a reset to resolve. 
+- **semantic versioning**: There will be a handful named version tags that will also have a matching release and tag on github.
+
+If you want to see what's in your container, checkout the matching release tag. A merge to **master** usually means a *latest* or *unstable* release. If you want to preview changes in your testing environment, pull the *unstable* tag or clone the repository and build the docker container with the Dockerfile from the **testing** branch.
 
 ## Code formatting and linting
 

Dockerfile

@@ -1,32 +1,71 @@
-# build the tube archivist image from default python slim image
+# multi stage to build tube archivist
+# first stage to build python wheel, copy into final image
 
-FROM python:3.9.7-slim-bullseye
+
+# First stage to build python wheel
+FROM python:3.10.4-slim-bullseye AS builder
+ARG TARGETPLATFORM
+
+RUN apt-get update
+RUN apt-get install -y --no-install-recommends build-essential gcc curl
+
+# get newest patched ffmpeg and ffprobe builds for amd64 fall back to repo ffmpeg for arm64
+RUN if [ "$TARGETPLATFORM" = "linux/amd64" ] ; then \
+    curl -s https://api.github.com/repos/yt-dlp/FFmpeg-Builds/releases/latest \
+        | grep browser_download_url \
+        | grep ".*master.*linux64.*tar.xz" \
+        | cut -d '"' -f 4 \
+        | xargs curl -L --output ffmpeg.tar.xz && \
+        tar -xf ffmpeg.tar.xz --strip-components=2 --no-anchored -C /usr/bin/ "ffmpeg" && \
+        tar -xf ffmpeg.tar.xz --strip-components=2 --no-anchored -C /usr/bin/ "ffprobe" && \
+        rm ffmpeg.tar.xz \
+    ; elif [ "$TARGETPLATFORM" = "linux/arm64" ] ; then \
+        apt-get -y update && apt-get -y install --no-install-recommends ffmpeg && rm -rf /var/lib/apt/lists/* \
+    ; fi
+
+# install requirements
+COPY ./tubearchivist/requirements.txt /requirements.txt
+RUN pip install --user -r requirements.txt
+
+# build final image
+FROM python:3.10.4-slim-bullseye as tubearchivist
+
+ARG TARGETPLATFORM
+ARG INSTALL_DEBUG
 
 ENV PYTHONUNBUFFERED 1
 
+# copy build requirements
+COPY --from=builder /root/.local /root/.local
+COPY --from=builder /usr/bin/ffmpeg /usr/bin/ffmpeg
+COPY --from=builder /usr/bin/ffprobe /usr/bin/ffprobe
+ENV PATH=/root/.local/bin:$PATH
+
 # install distro packages needed
 RUN apt-get clean && apt-get -y update && apt-get -y install --no-install-recommends \
-    build-essential \
-    ffmpeg \
     nginx \
+    atomicparsley \
     curl && rm -rf /var/lib/apt/lists/*
 
-# copy config files
-COPY nginx.conf /etc/nginx/conf.d/
+# install debug tools for testing environment
+RUN if [ "$INSTALL_DEBUG" ] ; then \
+        apt-get -y update && apt-get -y install --no-install-recommends \
+        vim htop bmon net-tools iputils-ping procps \
+        && pip install --user ipython \
+    ; fi
 
 # make folders
 RUN mkdir /cache
 RUN mkdir /youtube
 RUN mkdir /app
 
-# install python dependencies
-COPY ./tubearchivist/requirements.txt /requirements.txt
-RUN pip install --no-cache-dir -r requirements.txt --src /usr/local/src
+# copy config files
+COPY docker_assets/nginx.conf /etc/nginx/sites-available/default
 
 # copy application into container
 COPY ./tubearchivist /app
-COPY ./run.sh /app
-COPY ./uwsgi.ini /app
+COPY ./docker_assets/run.sh /app
+COPY ./docker_assets/uwsgi.ini /app
 
 # volumes
 VOLUME /cache

README.md

@@ -1,138 +1,51 @@
-![Tube Archivist](assets/tube-archivist-banner.jpg?raw=true "Tube Archivist Banner")  
+# Tube Archivist Frontend
 
-<center><h1>Your self hosted YouTube media server</h1></center>
+This repo is WIP, recreation of [Tube Archivist](https://github.com/tubearchivist/tubearchivist) frontend in NextJS/React.
 
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Core functionality
-* Subscribe to your favorite YouTube channels
-* Download Videos using **yt-dlp**
-* Index and make videos searchable
-* Play videos
-* Keep track of viewed and unviewed videos
+## Setup your environment
+Copy *.env.local.example* to *.env.local* and set:
+- **NEXTAUTH_SECRET**: Some long random string
+- **NEXTAUTH_URL**: Your frontend, most likely `http://localhost:3000`
+- **NEXT_PUBLIC_TUBEARCHIVIST_URL**: Your Tube Archivist backend testing server, e.g. `http://localhost:8000`
 
-## Screenshots
-![home screenshot](assets/tube-archivist-screenshot-home.png?raw=true "Tube Archivist Home")  
-*Home Page*
-
-![channels screenshot](assets/tube-archivist-screenshot-channels.png?raw=true "Tube Archivist Channels")  
-*All Channels*
-
-![single channel screenshot](assets/tube-archivist-screenshot-single-channel.png?raw=true "Tube Archivist Single Channel")  
-*Single Channel*
-
-![video page screenshot](assets/tube-archivist-screenshot-video.png?raw=true "Tube Archivist Video Page")  
-*Video Page*
-
-![video page screenshot](assets/tube-archivist-screenshot-download.png?raw=true "Tube Archivist Video Page")  
-*Downloads Page*
-  
-## Problem Tube Archivist tries to solve
-Once your YouTube video collection grows, it becomes hard to search and find a specific video. That's where Tube Archivist comes in: By indexing your video collection with metadata from YouTube, you can organize, search and enjoy your archived YouTube videos without hassle offline through a convenient web interface.
-
-## Installation
-Take a look at the example `docker-compose.yml` file provided. Tube Archivist depends on three main components split up into separate docker containers:  
-
-### Tube Archivist
-The main Python application that displays and serves your video collection, built with Django.
-  - Serves the interface on port `8000`
-  - Needs a mandatory volume for the video archive at **/youtube**
-  - And another recommended volume to save the cache for thumbnails and artwork at **/cache**.
-  - The environment variables `ES_URL` and `REDIS_HOST` are needed to tell Tube Archivist where Elasticsearch and Redis respectively are located.
-  - The environment variables `HOST_UID` and `HOST_GID` allows Tube Archivist to `chown` the video files to the main host system user instead of the container user.
-
-### Elasticsearch
-Stores video meta data and makes everything searchable. Also keeps track of the download queue.
-  - Needs to be accessible over the default port `9200`
-  - Needs a volume at **/usr/share/elasticsearch/data** to store data
-
-Follow the [documentation](https://www.elastic.co/guide/en/elasticsearch/reference/current/docker.html) for additional installation details.
-
-### Redis JSON
-Functions as a cache and temporary link between the application and the file system. Used to store and display messages and configuration variables.
-  - Needs to be accessible over the default port `6379`
-  - Takes an optional volume at **/data** to make your configuration changes permanent.
+In general: Use the [unstable builds](https://github.com/tubearchivist/tubearchivist/blob/master/CONTRIBUTING.md#releases) from Tube Archivist or build the image yourself from *testing* branch. 
 
 ## Getting Started
-1. Go through the **settings** page and look at the available options. Particularly set *Download Format* to your desired video quality before downloading. **Tube Archivist** downloads the best available quality by default.
-2. Subscribe to some of your favorite YouTube channels on the **channels** page. 
-3. On the **downloads** page, click on *Rescan subscriptions* to add videos from the subscribed channels to your Download queue or click on *Add to download queue* to manually add Video IDs, links, channels or playlists.
-4. Click on *Download queue* and let Tube Archivist to it's thing. 
-5. Enjoy your archived collection!
-  
-## Import your existing library
-So far this depends on the video you are trying to import to be still available on YouTube to get the metadata. Add the files you like to import to the */cache/import* folder. Then start the process from the settings page *Manual media files import*. Make sure to follow one of the two methods below.
 
-### Method 1:
-Add a matching *.json* file with the media file. Both files need to have the same base name, for example:
-- For the media file: \<base-name>.mp4
-- For the JSON file: \<base-name>.info.json
-- Alternate JSON file: \<base-name>.json
+First, run the development server:
 
-**Tube Archivist** then looks for the 'id' key within the JSON file to identify the video.
-
-### Method 2:
-Detect the YouTube ID from filename, this accepts the default yt-dlp naming convention for file names like:
-- \<base-name>[\<youtube-id>].mp4
-- The YouTube ID in square brackets at the end of the filename is the crucial part.
-
-### Some notes:
-- This will **consume** the files you put into the import folder: Files will get converted to mp4 if needed (this might take a long time...) and moved to the archive, *.json* files will get deleted upon completion to avoid having duplicates on the next run.
-- Maybe start with a subset of your files to import to make sure everything goes well...
-- Follow the logs to monitor progress and errors: `docker-compose logs -f tubearchivist`.
-
-## Backup and restore
-From the settings page you can backup your metadata into a zip file. The file will get stored at *cache/backup* and will contain the necessary files to restore the Elasticsearch index formatted **nd-json** files as well a complete export of the index in a set of conventional **json** files.  
-
-The restore functionality will expect the same zip file in *cache/backup* and will recreate the index from the snapshot.  
-
-BE AWARE: This will **replace** your current index with the one from the backup file.
-
-## Potential pitfalls
-### vm.max_map_count
-**Elastic Search** in Docker requires the kernel setting of the host machine `vm.max_map_count` to be set to at least 262144.
-
-To temporary set the value run:  
+```bash
+npm run dev
+# or
+yarn dev
 ```
-sudo sysctl -w vm.max_map_count=262144
-```  
 
-To apply the change permanently depends on your host operating system:  
-- For example on Ubuntu Server add `vm.max_map_count = 262144` to the file */etc/sysctl.conf*.
-- On Arch based systems create a file */etc/sysctl.d/max_map_count.conf* with the content `vm.max_map_count = 262144`. 
-- On any other platform look up in the documentation on how to pass kernel parameters.
+### Errors:
+- *next command not found*: Install next with `npm install next`
+- *Error: Invalid src prop [...] hostname [...] is not configured under images in your `next.config.js`*: Add the *NEXT_PUBLIC_TUBEARCHIVIST_URL* to the list of *domains*.
+- *CORS errors in console*: Set the environment variable `DISABLE_CORS=True` to the Tube Archivist container to circumvent this protection. NEVER do that on network accessible installation.
 
-### Permissions for elasticsearch
-If you see a message similar to `AccessDeniedException[/usr/share/elasticsearch/data/nodes]` when initially starting elasticsearch, that means the container is not allowed to write files to the volume.  
-That's most likely the case when you run `docker-compose` as an unprivileged user. To fix that issue, shutdown the container and on your host machine run:
-```
-chown 1000:0 /path/to/mount/point
-```
-This will match the permissions with the **UID** and **GID** of elasticsearch within the container and should fix the issue.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## Roadmap
-This should be considered as a **minimal viable product**, there is an extensive list of future functions and improvements planned.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-### Functionality
-- [ ] Access control
-- [ ] User roles
-- [ ] Delete videos and channel
-- [ ] Create playlists
-- [ ] Podcast mode to serve channel as mp3
-- [ ] Implement [PyFilesystem](https://github.com/PyFilesystem/pyfilesystem2) for flexible video storage
-- [ ] Dynamic download queue
-- [ ] Un-ignore videos
-- [X] Backup and restore [2021-09-22]
-- [X] Scan your file system to index already downloaded videos [2021-09-14]
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
-### UI
-- [ ] Create a github wiki for user documentation
-- [ ] Show similar videos on video page
-- [ ] Multi language support
-- [ ] Grid and list view for both channel and video list pages
-- [ ] Show total video downloaded vs total videos available in channel
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+## Learn More
 
-## Known limitations
-- Video files created by Tube Archivist need to be **mp4** video files for best browser compatibility.
-- Every limitation of **yt-dlp** will also be present in Tube Archivist. If **yt-dlp** can't download or extract a video for any reason, Tube Archivist won't be able to either.
-- For now this is meant to be run in a trusted network environment.
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

deploy.sh

@@ -1,146 +0,0 @@
-#!/bin/bash
-
-# deploy all needed project files to different servers:
-# test for local vm for testing
-# blackhole for local production
-# docker to publish
-
-set -e
-
-function sync_blackhole {
-
-    # docker commands need sudo
-    host="blackhole.local"
-
-    read -sp 'Password: ' remote_pw
-    export PASS=$remote_pw
-    
-    rsync -a --progress --delete-after \
-        --exclude ".git" \
-        --exclude ".gitignore" \
-        --exclude "**/cache" \
-        --exclude "**/__pycache__/" \
-        --exclude "db.sqlite3" \
-        . -e ssh "$host":tubearchivist
-
-    echo "$PASS" | ssh "$host" 'sudo -S docker build -t bbilly1/tubearchivist:latest tubearchivist 2>/dev/null'
-    echo "$PASS" | ssh "$host" 'sudo -S docker-compose up -d 2>/dev/null'
-
-}
-
-function sync_test {
-
-    # docker commands don't need sudo in testing vm
-    host="tubearchivist.local"
-
-    rsync -a --progress --delete-after \
-        --exclude ".git" \
-        --exclude ".gitignore" \
-        --exclude "**/cache" \
-        --exclude "**/__pycache__/" \
-        --exclude "db.sqlite3" \
-        . -e ssh "$host":tubearchivist
-
-    rsync -r --progress --delete docker-compose.yml -e ssh "$host":docker
-
-    ssh "$host" 'docker build -t bbilly1/tubearchivist:latest tubearchivist'
-    ssh "$host" 'docker-compose -f docker/docker-compose.yml up -d'
-
-    ssh "$host" 'docker cp tubearchivist/tubearchivist/testing.sh tubearchivist:/app/testing.sh'
-    ssh "$host" 'docker exec tubearchivist chmod +x /app/testing.sh'
-
-}
-
-
-# run same tests and checks as with github action but locally
-# takes filename to validate as optional argument
-function validate {
-
-    if [[ $1 ]]; then
-        check_path="$1"
-    else
-        check_path="."
-    fi
-
-    echo "run validate on $check_path"
-    
-    echo "running bandit"
-    bandit --recursive --skip B105,B108,B404,B603,B607 "$check_path"
-    echo "running black"
-    black --diff --color --check -l 79 "$check_path"
-    echo "running codespell"
-    codespell --skip="./.git" "$check_path"
-    echo "running flake8"
-    flake8 "$check_path" --count --max-complexity=12 --max-line-length=79 \
-        --show-source --statistics
-    echo "running isort"
-    isort --check-only --diff --profile black -l 79 "$check_path"
-    printf "    \n> all validations passed\n"
-
-}
-
-
-function sync_docker {
-
-    # check things
-    if [[ $(git branch --show-current) != 'master' ]]; then
-        echo 'you are not on master, dummy!'
-        return
-    fi
-
-    if [[ $(systemctl is-active docker) != 'active' ]]; then
-        echo "starting docker"
-        sudo systemctl start docker
-    fi
-
-    echo "latest tags:"
-    git tag
-
-    echo "latest docker images:"
-    sudo docker image ls bbilly1/tubearchivist
-
-    printf "\ncreate new version:\n"
-    read -r VERSION
-
-    # start build
-    sudo docker build -t bbilly1/tubearchivist:latest -t bbilly1/tubearchivist:"$VERSION" .
-
-    printf "\nlatest images:\n"
-    sudo docker image ls bbilly1/tubearchivist
-
-    read -s "Push?"
-
-    # push to docker
-    echo "pushing latest:"
-    sudo docker push bbilly1/tubearchivist:latest
-    echo "pushing $VERSION"
-    sudo docker push bbilly1/tubearchivist:"$VERSION"
-
-    # create release tag
-    echo "commits since last version:"
-    git log "$(git describe --tags --abbrev=0)"..HEAD --oneline
-    git tag -a "$VERSION" -m "new release version $VERSION"
-    git push all "$VERSION"
-
-}
-
-
-# check package versions in requirements.txt for updates
-python version_check.py
-
-
-if [[ $1 == "blackhole" ]]; then
-    sync_blackhole
-elif [[ $1 == "test" ]]; then
-    sync_test
-elif [[ $1 == "validate" ]]; then
-    validate "$2"
-elif [[ $1 == "docker" ]]; then
-    sync_docker
-else
-    echo "valid options are: blackhole | test | validate | docker"
-fi
-
-
-##
-exit 0

docker-compose.yml

@@ -8,31 +8,37 @@ services:
     ports:
       - 8000:8000
     volumes:
-      - ./volumes/tubearchivist/media:/youtube
-      - ./volumes/tubearchivist/cache:/cache
+      - media:/youtube
+      - cache:/cache
     environment:
-      - ES_URL=http://archivist-es:9200
-      - REDIS_HOST=archivist-redis
+      - ES_URL=http://archivist-es:9200     # needs protocol e.g. http and port
+      - REDIS_HOST=archivist-redis          # don't add protocol
       - HOST_UID=1000
       - HOST_GID=1000
+      - TA_USERNAME=tubearchivist           # your initial TA credentials
+      - TA_PASSWORD=verysecret              # your initial TA credentials
+      - ELASTIC_PASSWORD=verysecret         # set password for Elasticsearch
+      - TZ=America/New_York                 # set your time zone
     depends_on:
       - archivist-es
       - archivist-redis
   archivist-redis:
-    image: redislabs/rejson:latest
+    image: redislabs/rejson:latest          # for arm64 use bbilly1/rejson
     container_name: archivist-redis
     restart: always
-    ports:
-      - 6379:6379
+    expose:
+      - "6379"
     volumes:
-      - ./volumes/tubearchivist/redis:/data
+      - redis:/data
     depends_on:
       - archivist-es
   archivist-es:
-    image: docker.elastic.co/elasticsearch/elasticsearch:7.14.1
+    image: bbilly1/tubearchivist-es         # only for amd64, or use official es 7.17.2
     container_name: archivist-es
     restart: always
     environment:
+      - "xpack.security.enabled=true"
+      - "ELASTIC_PASSWORD=verysecret"       # matching Elasticsearch password
       - "discovery.type=single-node"
       - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
     ulimits:
@@ -40,6 +46,12 @@ services:
         soft: -1
         hard: -1
     volumes:
-      - ./volumes/tubearchivist/es:/usr/share/elasticsearch/data
-    ports:
-      - 9200:9200
+      - es:/usr/share/elasticsearch/data    # check for permission error when using bind mount, see readme
+    expose:
+      - "9200"
+
+volumes:
+  media:
+  cache:
+  redis:
+  es:

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    domains: ["localhost", "tube.stiforr.tech"],
+  },
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

nginx.conf

@@ -1,18 +0,0 @@
-server {
-
-    listen 8000;
-
-    location /cache/ {
-        alias /cache/;
-    }
-
-    location /media/ {
-        alias /youtube/;
-    }
-
-    location / {
-        include uwsgi_params;
-        uwsgi_pass localhost:8080;
-    }
-
-}

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "tubearchivist-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "next": "12.1.1",
+    "next-auth": "4.7.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-player": "2.10.0",
+    "react-query": "3.39.1",
+    "sharp": "0.30.3"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.23",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "eslint": "8.12.0",
+    "eslint-config-next": "12.1.1",
+    "husky": "7.0.4",
+    "lint-staged": "12.4.0",
+    "prettier": "2.6.1",
+    "typescript": "4.5.5"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --cache --fix",
+    "*.{ts,tsx,css,md}": "prettier --write"
+  }
+}

public/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/favicon/mstile-150x150.png"/>
+            <TileColor>#01202e</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/favicon/safari-pinned-tab.svg

@@ -0,0 +1,100 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4521 9370 c-4 -3 -7 -31 -6 -63 1 -32 -3 -61 -9 -66 -6 -5 -36 -12
+-66 -16 -55 -7 -68 -9 -125 -19 -16 -3 -48 -8 -70 -12 -161 -24 -504 -118
+-709 -193 -208 -77 -507 -215 -636 -294 -19 -12 -47 -29 -62 -37 -14 -8 -41
+-24 -60 -34 -84 -48 -288 -189 -423 -293 -309 -239 -654 -606 -886 -943 -53
+-78 -169 -258 -169 -264 0 -3 -21 -40 -47 -83 -97 -164 -313 -646 -294 -658
+14 -8 670 -195 686 -195 8 0 15 9 15 19 0 11 5 23 10 26 6 3 10 13 10 21 0 8
+14 44 30 79 17 35 30 67 30 70 0 3 21 48 47 100 l47 95 148 0 c81 0 276 1 433
+1 157 0 310 -1 340 -1 l55 0 0 -615 0 -615 415 1 415 0 1 142 c0 78 0 355 1
+615 l1 472 46 0 c25 0 322 0 659 0 l612 1 0 32 c1 44 -1 538 -2 660 0 63 -5
+97 -12 98 -6 1 -581 1 -1278 0 -698 0 -1268 2 -1268 5 0 7 143 147 241 235 94
+85 232 193 329 260 36 24 67 47 68 52 2 4 7 7 12 7 4 0 52 28 106 62 126 79
+371 202 510 257 60 23 118 46 129 51 131 56 685 193 713 176 4 -2 7 -34 6 -70
+l0 -66 162 0 162 0 0 503 0 502 -155 0 c-85 0 -158 -2 -162 -5z"/>
+<path d="M5210 8905 l0 -365 48 -1 c26 0 54 -2 62 -4 8 -1 45 -5 82 -9 72 -6
+198 -23 232 -31 12 -3 32 -7 46 -9 284 -48 643 -169 935 -314 527 -262 984
+-651 1324 -1127 39 -55 75 -105 81 -112 5 -7 10 -17 10 -23 0 -5 4 -10 9 -10
+5 0 14 -12 20 -27 6 -16 24 -48 40 -73 31 -47 61 -101 117 -208 30 -57 32 -65
+16 -69 -75 -20 -117 -40 -113 -53 9 -35 83 -285 85 -287 1 -2 18 2 37 8 19 5
+41 12 49 14 49 12 856 241 876 249 11 4 10 14 -2 57 -9 29 -17 60 -19 68 -7
+32 -53 183 -57 186 -2 2 -22 -2 -43 -9 -93 -31 -88 -33 -126 46 -232 488 -557
+933 -950 1303 -285 269 -647 520 -1014 705 -533 268 -1067 412 -1682 455 l-63
+4 0 -364z"/>
+<path d="M6122 7336 c-4 -6 -14 -31 -23 -56 -17 -47 -238 -630 -288 -760 -16
+-41 -61 -160 -100 -265 -40 -104 -76 -199 -80 -210 -10 -23 -54 -138 -104
+-275 -20 -52 -41 -108 -48 -125 -7 -16 -13 -32 -13 -35 -1 -3 -7 -18 -13 -35
+-6 -16 -55 -145 -108 -285 -53 -140 -102 -271 -110 -290 -8 -19 -48 -125 -89
+-235 -41 -110 -90 -240 -109 -290 -19 -49 -76 -200 -127 -335 -133 -356 -151
+-402 -166 -437 -8 -17 -14 -34 -14 -37 0 -3 -15 -45 -34 -94 -19 -48 -61 -160
+-95 -248 -33 -89 -65 -174 -72 -190 -22 -55 -28 -70 -98 -258 -39 -103 -71
+-192 -71 -197 0 -5 182 -8 441 -7 l441 3 114 320 c63 176 126 352 140 390 14
+39 46 129 70 200 25 72 50 139 55 150 5 11 22 58 38 105 29 84 89 254 171 480
+23 63 47 133 54 155 12 36 70 199 131 365 13 36 60 169 105 295 44 127 85 239
+90 250 4 11 62 173 129 360 197 557 186 530 195 504 3 -8 18 -52 35 -99 16
+-47 54 -155 84 -240 30 -85 96 -272 146 -415 51 -143 96 -269 100 -280 5 -11
+27 -72 49 -135 120 -343 143 -407 152 -422 6 -10 10 -24 10 -33 0 -8 6 -29 14
+-47 8 -18 44 -116 80 -218 182 -521 327 -927 336 -942 6 -10 10 -23 10 -29 0
+-9 134 -393 176 -502 8 -21 28 -78 45 -128 l31 -90 -49 -56 c-26 -31 -78 -88
+-115 -127 -64 -68 -68 -70 -81 -51 -8 11 -28 37 -44 57 l-30 37 -124 -91 c-68
+-50 -123 -96 -123 -104 1 -9 281 -404 327 -459 4 -5 62 -84 128 -175 65 -91
+124 -166 129 -168 8 -3 73 39 90 58 3 3 42 32 88 64 l82 58 -40 56 -39 56 94
+96 c558 566 945 1258 1130 2025 18 77 38 167 44 200 6 33 13 69 15 80 6 33 19
+119 21 140 2 11 6 43 9 70 35 253 40 715 11 930 -2 17 -9 75 -15 129 -7 55
+-16 109 -20 122 -5 12 -7 24 -5 26 11 11 -85 428 -98 428 -11 0 -680 -190
+-685 -195 -2 -1 8 -47 21 -101 14 -55 28 -115 31 -134 3 -19 8 -46 11 -60 10
+-53 19 -109 29 -195 4 -33 9 -70 11 -82 8 -53 18 -259 18 -369 -1 -400 -74
+-812 -213 -1194 -23 -63 -44 -123 -47 -132 -9 -29 -20 -21 -35 25 -22 62 -198
+529 -208 552 -5 11 -69 178 -141 370 -72 193 -187 499 -256 680 -68 182 -164
+436 -213 565 -48 129 -93 246 -98 260 -6 14 -27 70 -47 125 -19 55 -40 109
+-45 120 -8 18 -191 503 -224 595 -15 42 -95 253 -139 366 l-31 80 -398 0
+c-270 0 -401 -3 -406 -10z"/>
+<path d="M720 6002 c-47 -160 -68 -237 -64 -243 2 -4 28 -13 56 -19 29 -7 56
+-14 59 -16 4 -2 3 -23 -1 -46 -5 -24 -11 -61 -14 -83 -4 -23 -8 -50 -10 -60
+-2 -11 -7 -47 -10 -80 -4 -33 -9 -73 -11 -90 -31 -231 -26 -701 11 -955 3 -25
+8 -61 10 -80 2 -19 5 -44 8 -55 3 -11 8 -42 12 -70 3 -27 8 -53 10 -56 2 -4 6
+-24 10 -45 20 -134 154 -594 209 -719 7 -16 27 -66 45 -110 59 -147 189 -400
+297 -579 89 -147 270 -400 359 -502 11 -12 39 -46 64 -75 74 -89 358 -369 465
+-459 55 -46 110 -92 121 -102 22 -19 22 -19 107 99 48 65 90 123 94 128 35 42
+243 336 242 342 0 5 -38 40 -85 78 -313 258 -611 618 -818 988 -63 114 -176
+341 -176 355 0 5 -9 26 -19 48 -54 113 -171 502 -200 669 -6 33 -13 69 -15 80
+-8 43 -21 134 -31 210 -19 156 -24 420 -12 605 8 119 13 166 33 295 5 28 7 53
+6 58 -2 8 24 3 99 -18 l45 -13 23 82 c12 44 29 106 38 136 30 104 34 95 -54
+118 -43 11 -109 29 -148 40 -38 11 -104 30 -145 41 -41 12 -79 23 -85 25 -5 1
+-28 8 -50 14 -22 7 -112 33 -200 58 -88 25 -181 52 -207 59 l-48 14 -20 -67z"/>
+<path d="M2693 5210 c-48 -11 -119 -56 -148 -95 -112 -146 -57 -352 115 -428
+43 -19 68 -20 560 -21 449 -1 521 1 563 15 65 22 114 64 151 129 27 48 31 64
+31 130 0 116 -49 200 -149 253 -41 22 -44 22 -566 23 -289 1 -539 -2 -557 -6z"/>
+<path d="M6425 5138 c-50 -19 -102 -55 -128 -90 -56 -73 -55 -54 -55 -901 -1
+-430 -1 -793 -2 -807 0 -21 -26 1 -169 148 -93 94 -173 172 -178 172 -4 0 -58
+-50 -118 -110 l-110 -110 25 -24 c14 -12 202 -204 419 -424 217 -221 397 -402
+401 -402 3 0 199 192 435 426 l429 425 -114 114 -115 114 -177 -178 -178 -178
+-1 381 c-2 1238 -2 1258 -24 1301 -26 52 -71 98 -126 126 -51 26 -166 35 -214
+17z"/>
+<path d="M2814 4501 c-2 -2 -4 -415 -4 -918 l0 -913 415 0 415 0 0 28 c4 223
+0 1795 -4 1799 -6 7 -816 10 -822 4z"/>
+<path d="M3181 2038 c-8 -13 -44 -63 -81 -113 -36 -49 -101 -137 -143 -195
+-42 -58 -80 -109 -84 -115 -16 -20 -88 -119 -103 -141 -8 -13 -48 -68 -89
+-124 -40 -55 -72 -103 -70 -105 2 -2 60 -44 129 -94 l125 -91 25 32 c62 79 35
+81 231 -15 382 -187 717 -298 1149 -382 8 -1 36 -5 61 -9 25 -4 57 -9 70 -11
+45 -7 183 -24 264 -32 105 -10 629 -10 725 0 116 13 131 14 195 22 58 7 70 9
+125 19 14 3 42 8 63 11 48 7 174 32 252 51 33 8 67 16 76 19 145 33 419 126
+599 202 122 52 413 195 418 206 2 4 8 7 12 7 11 0 193 108 273 162 53 36 57
+41 45 59 -107 155 -406 558 -415 558 -7 1 -44 -19 -82 -44 -236 -153 -537
+-295 -814 -386 -97 -31 -291 -85 -342 -94 -16 -2 -41 -7 -55 -10 -39 -9 -240
+-43 -288 -49 -212 -28 -609 -29 -822 -2 -14 2 -52 7 -85 11 -33 4 -69 9 -80
+12 -11 2 -33 6 -50 9 -211 34 -520 123 -735 211 -86 36 -291 130 -299 138 -2
+3 15 30 38 60 24 31 41 58 39 60 -11 11 -243 178 -252 181 -6 2 -17 -6 -25
+-18z"/>
+</g>
+</svg>

public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "TubeArchivist",
+    "short_name": "TubeArchivist",
+    "icons": [
+        {
+            "src": "/static/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#01202e",
+    "background_color": "#01202e",
+    "display": "standalone"
+}

public/img/icon-exit.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="210mm"
+   viewBox="0 0 210 210"
+   version="1.1"
+   id="svg1566"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_exit 05.svg">
+  <defs
+     id="defs1560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35355339"
+     inkscape:cx="963.7258"
+     inkscape:cy="291.01609"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-87)">
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.35654187;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="M 106.49932,87.901069 C 49.504302,87.900974 3.3006913,134.10459 3.3007713,191.0996 c 0,0.30098 0.003,0.60131 0.005,0.90167 v 0 c -0.003,0.29952 -0.006,0.59901 -0.006,0.89912 -8e-5,56.99502 46.2035307,103.19865 103.1985287,103.19854 23.01714,-0.0773 45.34783,-7.84709 63.44155,-22.07425 0,0 9.01874,-8.71006 2.40579,-16.41737 -6.61297,-7.70731 -19.11222,0.3185 -19.11222,0.3185 -13.60985,9.81394 -29.95596,15.11012 -46.73512,15.14236 -44.275428,0 -80.167758,-35.89234 -80.167758,-80.16778 0,-0.30097 0.003,-0.60148 0.006,-0.90166 h -5.2e-4 c -0.003,-0.29934 -0.006,-0.59901 -0.006,-0.89913 0,-44.27545 35.89234,-80.16777 80.167778,-80.16777 16.77916,0.0322 33.12527,5.32843 46.73512,15.14236 0,0 12.49925,8.02581 19.11222,0.3185 6.61295,-7.70732 -2.4058,-16.41739 -2.4058,-16.41739 C 151.84561,95.74815 129.51494,87.97828 106.4978,87.901069 Z m 54.30959,56.450221 -12.13663,11.69622 20.15864,20.93332 -93.932488,-1.4899 c -9.22763,-0.17349 -16.77655,6.07423 -16.92587,14.00904 l 0.002,0.002 c -0.0149,1.82673 -0.0235,3.40102 0,4.99598 l -0.002,0.002 c 0.14932,7.93483 7.69824,14.18254 16.92587,14.00905 l 93.932488,-1.48991 -20.15864,20.93333 12.13663,11.69622 34.0585,-35.35536 11.82982,-12.29208 h 0.003 l -9.9e-4,-0.002 9.9e-4,-9.9e-4 h -0.003 l -11.82982,-12.29208 z"
+       id="path1405"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccsccsccsccscccccccccccccccccccccc" />
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.39729571;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="m 506.57967,92.503023 c -57.98068,-1e-4 -104.98336,47.002567 -104.98326,104.983257 1.9e-4,57.98049 47.00276,104.98284 104.98326,104.98273 23.42489,-0.0758 46.15146,-7.98387 57.83458,-18.08923 11.68313,-10.10537 12.15613,-18.62993 7.38675,-23.04107 v -0.002 c -4.7711,-4.41269 -12.38099,-1.9587 -17.69245,2.25103 -13.83538,9.99805 -30.45915,15.40285 -47.52888,15.4528 -45.04116,0 -81.55421,-36.51305 -81.5542,-81.55419 0,-45.04114 36.51307,-81.5542 81.5542,-81.5542 17.06933,0.0328 33.21884,5.19482 43.16812,12.86758 9.94929,7.67275 17.33418,9.17607 22.1053,4.76338 v -0.002 c 4.77116,-4.41278 5.55882,-12.9887 -0.73482,-18.60197 -18.40654,-14.47308 -41.1234,-22.377337 -64.5386,-22.455877 z m 55.24881,57.426467 -12.34652,11.8985 20.50728,21.29534 -95.55697,-1.51567 c -9.38721,-0.17649 -17.06669,6.17929 -17.21858,14.25133 l 0.003,0.002 c -0.15192,8.07203 7.28245,14.71295 16.66978,14.88953 l 95.22519,1.50947 -21.06332,20.28455 12.04579,12.49846 36.06808,-34.74464 0.005,0.005 12.34654,-11.89954 -12.03701,-12.50724 z m 35.17874,98.71801 0.69918,0.67386 c 0.13539,-0.22412 0.26991,-0.44874 0.4036,-0.67386 z"
+       id="path1405-6"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccsczccccccccccccccccccccccc" />
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.39729571;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="m 740.89945,94.730897 c -57.98068,-9.6e-5 -104.98334,47.002563 -104.98325,104.983253 1.9e-4,57.98049 47.00276,104.98284 104.98325,104.98274 23.42488,-0.0758 46.15145,-7.98387 64.5635,-22.46581 l -17.03461,-16.41553 c -13.83537,9.99805 -30.45916,15.40285 -47.52889,15.4528 -45.04113,0 -81.55419,-36.51306 -81.55419,-81.5542 0,-45.04114 36.51306,-81.55419 81.55419,-81.55419 17.06934,0.0328 33.69814,5.42058 47.54336,15.40423 l 16.99534,-16.3773 c -18.40663,-14.4732 -41.12349,-22.377447 -64.5387,-22.455993 z m 55.24882,57.426473 -12.34653,11.8985 20.50728,21.29534 -95.55696,-1.51567 c -9.38721,-0.17649 -17.06668,6.17928 -17.21858,14.25132 l 0.002,0.002 c -0.1519,8.07203 7.28245,14.71295 16.66978,14.88953 l 95.22519,1.50947 -21.06332,20.28455 12.04578,12.49846 36.06808,-34.74465 0.005,0.005 12.34653,-11.89953 -12.03699,-12.50725 z m 35.17873,98.718 0.69919,0.67386 c 0.13538,-0.22412 0.26991,-0.44874 0.40359,-0.67386 z"
+       id="path1405-9"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccsccccccccccccccccccccccc" />
+  </g>
+</svg>

public/img/icon-eye.svg

@@ -15,7 +15,7 @@
    version="1.1"
    id="svg1303"
    inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
-   sodipodi:docname="Icons_thumbs.svg">
+   sodipodi:docname="Icons_seen.svg">
   <defs
      id="defs1297" />
   <sodipodi:namedview
@@ -25,9 +25,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.71458126"
-     inkscape:cx="-133.80736"
-     inkscape:cy="163.34297"
+     inkscape:zoom="1.0105705"
+     inkscape:cx="84.208758"
+     inkscape:cy="136.94831"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -55,9 +55,9 @@
      id="layer1"
      transform="translate(0,-164.70764)">
     <path
-       style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
-       d="m 74.762046,169.84647 c -0.757275,-0.0266 -1.556205,0.0266 -2.398918,0.17006 -17.977757,2.9811 5.863528,29.19697 -15.075776,44.15933 -17.503229,14.60104 -23.870308,10.01972 -24.044759,14.80451 v 47.00292 c 2.623747,6.94761 20.093043,14.05087 38.660635,15.56434 18.567588,1.51346 44.529822,-2.41107 44.816272,-10.49357 0.15245,-7.31882 -4.01785,-7.48655 -4.01785,-7.48655 0,0 9.14077,-0.56532 9.44575,-8.4939 0.15212,-7.77626 -8.85445,-8.88809 -8.85445,-8.88809 0,0 11.53636,-0.3275 11.53636,-8.34902 0,-8.20546 -8.87381,-8.85175 -11.6189,-8.99092 1.70324,-0.10363 8.42562,-2.42967 8.3861,-10.53741 -0.0399,-8.37053 -12.87508,-7.67987 -35.956784,-9.20144 2.66326,-15.52873 4.52035,-48.76031 -10.87768,-49.26032 z m -63.387663,53.22425 c -2.167221,0 -3.911718,1.45375 -3.911718,3.25977 v 53.07599 c 0,1.80609 1.744497,3.25983 3.911718,3.25983 h 14.602385 c 2.167228,0 3.911725,-1.45374 3.911725,-3.25983 v -53.07599 c 0,-1.80602 -1.744497,-3.25977 -3.911725,-3.25977 z"
-       id="rect1278"
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="M 66.145984,191.3255 A 71.797122,73.404487 0 0 0 2.5025987,230.88314 71.797122,73.404487 0 0 0 66.145984,270.38145 71.797122,73.404487 0 0 0 129.78937,230.82387 71.797122,73.404487 0 0 0 66.145984,191.3255 Z m -4.921549,7.22394 a 32.724755,32.724755 0 0 0 -13.334395,5.17759 12.828107,12.828107 0 0 1 2.180958,-0.18652 12.828107,12.828107 0 0 1 12.828141,12.82816 12.828107,12.828107 0 0 1 -12.828141,12.82822 12.828107,12.828107 0 0 1 -12.828192,-12.82822 12.828107,12.828107 0 0 1 0.04509,-0.91548 32.724755,32.724755 0 0 0 -3.86581,15.39964 32.724755,32.724755 0 0 0 27.161922,32.24981 A 59.09757,60.420619 0 0 1 13.7604,230.8774 59.09757,60.420619 0 0 1 61.224664,198.54948 Z m 10.482345,0.0563 a 59.09757,60.420619 0 0 1 46.82502,32.22523 59.09757,60.420619 0 0 1 -47.393377,32.32497 32.724755,32.724755 0 0 0 27.73169,-32.30187 32.724755,32.724755 0 0 0 -27.163333,-32.24833 z"
+       id="path1091"
        inkscape:connector-curvature="0" />
   </g>
 </svg>

public/img/icon-gridview.svg

@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="2000"
+   height="2000"
+   viewBox="0 0 529.16666 529.16735"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Gridview.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35729063"
+     inkscape:cx="901.7564"
+     inkscape:cy="1021.9111"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1">
+    <sodipodi:guide
+       position="247.25932,291.92959"
+       orientation="1,0"
+       id="guide853"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="337.22901,167.98535"
+       orientation="0,1"
+       id="guide855"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="266.76325,305.4565"
+       orientation="0,1"
+       id="guide857"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="257.79774,279.50371"
+       orientation="0,1"
+       id="guide861"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,232.16736)">
+    <g
+       id="g873"
+       transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)"
+       style="stroke:none">
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="-121.39048"
+         x="79.903137"
+         height="113.24854"
+         width="167.35619"
+         id="rect815"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600005, 0.56300002999999998;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="-121.7837"
+         x="273.05484"
+         height="113.24854"
+         width="167.35619"
+         id="rect815-4"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="17.882772"
+         x="79.903137"
+         height="113.24854"
+         width="167.35619"
+         id="rect815-2"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="17.453594"
+         x="273.05484"
+         height="113.24854"
+         width="167.35619"
+         id="rect815-7"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+    </g>
+  </g>
+</svg>

public/img/icon-listview.svg

@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="2000"
+   height="2000"
+   viewBox="0 0 529.16666 529.16735"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Listview.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.42053519"
+     inkscape:cx="851.82064"
+     inkscape:cy="1105.7974"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g873"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1">
+    <sodipodi:guide
+       position="247.25932,291.92959"
+       orientation="1,0"
+       id="guide853"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="337.22901,167.98535"
+       orientation="0,1"
+       id="guide855"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="266.76325,305.4565"
+       orientation="0,1"
+       id="guide857"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="257.79774,279.50371"
+       orientation="0,1"
+       id="guide861"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="22.413775,336.67894"
+       orientation="1,0"
+       id="guide926"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="503.71355,217.50031"
+       orientation="1,0"
+       id="guide928"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,232.16736)">
+    <g
+       id="g873"
+       transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)">
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="-121.34892"
+         x="79.944702"
+         height="70.107315"
+         width="358.24551"
+         id="rect815"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64810181;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29620369, 0.64810185;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.4450235"
+         rx="7.4450235"
+         y="-31.167784"
+         x="79.861153"
+         height="70.107315"
+         width="358.32907"
+         id="rect815-20"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64817739;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29635485, 0.64817743;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.4450235"
+         rx="7.4450231"
+         y="60.024326"
+         x="79.908524"
+         height="70.106117"
+         width="358.28171"
+         id="rect815-8"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64812905;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29625813, 0.64812907;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+    </g>
+  </g>
+</svg>

public/img/icon-sort.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_sort.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.6482696"
+     inkscape:cx="214.8721"
+     inkscape:cy="136.02434"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g855"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="957"
+     inkscape:window-height="893"
+     inkscape:window-x="941"
+     inkscape:window-y="13"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <g
+       id="g855"
+       transform="matrix(1.9016362,0,0,1.9016362,-197.93838,-58.9418)">
+      <path
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.55118108;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+         d="M 341.125 82.275391 L 315.50977 106.92773 L 241.84375 177.89258 L 266.21289 203.17969 L 309.82617 161.17969 L 306.72266 379.375 C 306.36114 398.60059 319.37807 414.32761 335.91016 414.63867 L 335.91406 414.63477 C 352.44586 414.94597 366.04647 399.71987 366.4082 380.49414 L 369.5 162.97852 L 411.04297 206.11719 L 436.64062 181.44727 L 365.48242 107.57812 L 365.49609 107.5625 L 341.125 82.275391 z M 175.93359 82.277344 L 175.92969 82.28125 C 159.39782 81.970041 145.79728 97.196144 145.43555 116.42188 L 142.34375 333.9375 L 100.80078 290.79883 L 75.203125 315.46875 L 146.36133 389.33789 L 146.3457 389.35156 L 170.7168 414.63867 L 196.33203 389.98633 L 270 319.02344 L 245.63086 293.73633 L 202.01758 335.73633 L 205.12109 117.54102 C 205.48261 98.315428 192.46568 82.588409 175.93359 82.277344 z "
+         transform="matrix(0.13913489,0,0,0.13913489,104.08846,117.60887)"
+         id="path814" />
+    </g>
+  </g>
+</svg>

public/img/icon-star-empty.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="icon-star-empty.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.4005076"
+     inkscape:cx="40.40812"
+     inkscape:cy="211.20533"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2112"
+     inkscape:window-x="0"
+     inkscape:window-y="48"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="0" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <path
+       id="path1255"
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       inkscape:transform-center-y="-6.4703827"
+       d="M 250 21.158203 L 189.78906 194.37891 L 6.4375 198.11523 L 152.57617 308.9082 L 99.470703 484.43945 L 250 379.69141 L 400.5293 484.43945 L 347.42383 308.9082 L 493.5625 198.11523 L 310.21094 194.37891 L 250 21.158203 z M 250 96.408203 L 291.69141 216.34766 L 418.64453 218.93555 L 317.45703 295.65039 L 354.22852 417.18945 L 250 344.66211 L 145.77148 417.18945 L 182.54297 295.65039 L 81.355469 218.93555 L 208.30859 216.34766 L 250 96.408203 z "
+       transform="matrix(0.26458394,0,0,0.26458394,0,164.70749)" />
+  </g>
+</svg>

public/img/icon-star-full.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_star.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0105705"
+     inkscape:cx="61.891881"
+     inkscape:cy="148.25167"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <path
+       sodipodi:type="star"
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       id="path1255"
+       sodipodi:sides="5"
+       sodipodi:cx="66.145981"
+       sodipodi:cy="237.32387"
+       sodipodi:r1="67.758904"
+       sodipodi:r2="27.103561"
+       sodipodi:arg1="-1.5707963"
+       sodipodi:arg2="-0.9424778"
+       inkscape:flatsided="false"
+       inkscape:rounded="-3.46945e-18"
+       inkscape:randomized="0"
+       d="m 66.145983,169.56496 15.931071,45.83167 48.511476,0.98859 L 91.923,245.69933 105.97366,292.14197 66.145981,264.42743 26.318295,292.14197 40.368962,245.69933 1.7034347,216.38521 50.214907,215.39663 Z"
+       inkscape:transform-center-y="-6.4703827" />
+  </g>
+</svg>

public/img/icon-star-half.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="icon-star-half.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0105705"
+     inkscape:cx="44.034533"
+     inkscape:cy="168.22181"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="3840"
+     inkscape:window-height="2078"
+     inkscape:window-x="0"
+     inkscape:window-y="82"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="0" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <path
+       id="path1255"
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       inkscape:transform-center-x="1.1220981e-06"
+       inkscape:transform-center-y="-6.4703827"
+       d="M 250 21.158203 L 189.78906 194.37891 L 6.4375 198.11523 L 152.57617 308.9082 L 99.470703 484.43945 L 250 379.69141 L 400.5293 484.43945 L 347.42383 308.9082 L 493.5625 198.11523 L 310.21094 194.37891 L 250 21.158203 z M 250 96.408203 L 291.69141 216.34766 L 418.64453 218.93555 L 317.45703 295.65039 L 354.22852 417.18945 L 250 344.66211 L 250 96.408203 z "
+       transform="matrix(0.26458394,0,0,0.26458394,0,164.70749)" />
+  </g>
+</svg>

public/img/icon-stop.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_stop.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0105705"
+     inkscape:cx="43.182711"
+     inkscape:cy="168.09972"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       id="rect836"
+       width="118.86465"
+       height="118.86465"
+       x="6.7136617"
+       y="171.42116"
+       rx="10.00003"
+       ry="10.00003" />
+  </g>
+</svg>

public/img/icon-thumb.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="icon_thumb.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.5046797"
+     inkscape:cx="35.718548"
+     inkscape:cy="203.39339"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="80.99058,65.965029"
+       orientation="0,1"
+       id="guide816"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="65.965178,49.107299"
+       orientation="1,0"
+       id="guide818"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="m 72.35681,178.12175 c -0.545876,-0.0192 -1.121779,0.0192 -1.729242,0.12259 -12.959134,2.14891 4.226681,21.04642 -10.867262,31.83193 -12.617074,10.52505 -17.206737,7.22264 -17.332488,10.67172 v 33.88171 c 1.891308,5.00813 14.483922,10.12847 27.868234,11.21944 13.384309,1.09096 32.098988,-1.73801 32.305468,-7.56421 0.10989,-5.27572 -2.896223,-5.39662 -2.896223,-5.39662 0,0 6.589043,-0.40752 6.808883,-6.12278 0.10966,-5.60545 -6.38265,-6.40691 -6.38265,-6.40691 0,0 8.31589,-0.23607 8.31589,-6.01832 0,-5.91485 -6.39662,-6.38072 -8.37539,-6.48104 1.22776,-0.0747 6.07353,-1.75141 6.04505,-7.59582 -0.0287,-6.03384 -9.280896,-5.53597 -25.919173,-6.63279 1.919791,-11.19377 3.258461,-35.14851 -7.841097,-35.50894 z m -45.69253,38.36631 c -1.562226,0 -2.819733,1.04793 -2.819733,2.34979 v 38.25943 c 0,1.30191 1.257507,2.34983 2.819733,2.34983 h 10.526021 c 1.562231,0 2.819739,-1.04792 2.819739,-2.34983 v -38.25943 c 0,-1.30186 -1.257508,-2.34979 -2.819739,-2.34979 z"
+       id="rect1278"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

public/js/cast-videos.js

@@ -0,0 +1,148 @@
+function initializeCastApi() {
+    cast.framework.CastContext.getInstance().setOptions({
+        receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID, // Use built in reciver app on cast device, see https://developers.google.com/cast/docs/styled_receiver if you want to be able to add a theme, splash screen or watermark. Has a $5 one time fee.
+        autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
+    });
+
+    var player = new cast.framework.RemotePlayer();
+    var playerController = new cast.framework.RemotePlayerController(player);
+
+    // Add event listerner to check if a connection to a cast device is initiated
+    playerController.addEventListener(
+        cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() { 
+            castConnectionChange(player) 
+        }
+    );
+    playerController.addEventListener(
+        cast.framework.RemotePlayerEventType.CURRENT_TIME_CHANGED, function() { 
+            castVideoProgress(player) 
+        }
+    );
+    playerController.addEventListener(
+        cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED, function() { 
+            castVideoPaused(player) 
+        }
+    );
+}
+
+
+function castConnectionChange(player) {
+    // If cast connection is initialized start cast
+    if (player.isConnected) {
+        // console.log("Cast Connected.");
+        castStart();
+    } else if (!player.isConnected) {
+        // console.log("Cast Disconnected.");
+    }
+}
+
+function castVideoProgress(player) {
+    var videoId = getVideoPlayerVideoId();
+    if (player.mediaInfo.contentId.includes(videoId)) {
+        var currentTime = player.currentTime;
+        var duration = player.duration;
+        if ((currentTime % 10) <= 1.0 && currentTime != 0 && duration != 0) { // Check progress every 10 seconds or else progress is checked a few times a second
+            postVideoProgress(videoId, currentTime);
+            setProgressBar(videoId, currentTime, duration);
+            if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
+                if (watchedThreshold(currentTime, duration)) {
+                    isWatched(videoId);
+                }
+            }
+        }
+    }
+}
+
+function castVideoPaused(player) {
+    var videoId = getVideoPlayerVideoId();
+    var currentTime = player.currentTime;
+    var duration = player.duration;
+    if (player.mediaInfo != null) {
+        if (player.mediaInfo.contentId.includes(videoId)) {
+            if (currentTime != 0 && duration != 0) {
+                postVideoProgress(videoId, currentTime);
+            }
+        }
+    }
+}
+
+function castStart() {
+    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
+    // Check if there is already media playing on the cast target to prevent recasting on page reload or switching to another video page
+    if (!castSession.getMediaSession()) { 
+        var videoId = getVideoPlayerVideoId();
+        var videoData = getVideoData(videoId);
+        var contentId = getURL() + videoData.data.media_url;
+        var contentTitle = videoData.data.title;
+        var contentImage = getURL() + videoData.data.vid_thumb_url;
+
+        contentType = 'video/mp4'; // Set content type, only videos right now so it is hard coded
+        contentCurrentTime = getVideoPlayerCurrentTime(); // Get video's current position
+        contentActiveSubtitle = [];
+        // Check if a subtitle is turned on.
+        for (var i = 0; i < getVideoPlayer().textTracks.length; i++) {
+            if (getVideoPlayer().textTracks[i].mode == "showing") {
+                contentActiveSubtitle =[i + 1];
+            }
+        }
+        contentSubtitles = [];
+        var videoSubtitles = videoData.data.subtitles; // Array of subtitles
+        if (typeof(videoSubtitles) != 'undefined' && videoData.config.downloads.subtitle) {
+            for (var i = 0; i < videoSubtitles.length; i++) {
+                subtitle = new chrome.cast.media.Track(i, chrome.cast.media.TrackType.TEXT);
+                subtitle.trackContentId = videoSubtitles[i].media_url;
+                subtitle.trackContentType = 'text/vtt';
+                subtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
+                subtitle.name = videoSubtitles[i].name;
+                subtitle.language = videoSubtitles[i].lang;
+                subtitle.customData = null;
+                contentSubtitles.push(subtitle);
+            }
+        }
+
+        mediaInfo = new chrome.cast.media.MediaInfo(contentId, contentType); // Create MediaInfo var that contains url and content type
+        // mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED; // Set type of stream, BUFFERED, LIVE, OTHER
+        mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata(); // Create metadata var and add it to MediaInfo
+        mediaInfo.metadata.title = contentTitle.replace("&amp;", "&"); // Set the video title
+        mediaInfo.metadata.images = [new chrome.cast.Image(contentImage)]; // Set the video thumbnail
+        // mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
+        mediaInfo.tracks = contentSubtitles;
+
+        var request = new chrome.cast.media.LoadRequest(mediaInfo); // Create request with the previously set MediaInfo. 
+        // request.queueData = new chrome.cast.media.QueueData(); // See https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.QueueData for playlist support.
+        request.currentTime = shiftCurrentTime(contentCurrentTime); // Set video start position based on the browser video position
+        request.activeTrackIds = contentActiveSubtitle; // Set active subtitle based on video player
+        // request.autoplay = false; // Set content to auto play, true by default
+        castSession.loadMedia(request).then(
+            function() { 
+                castSuccessful();
+            }, 
+            function() { 
+                castFailed(errorCode); 
+            }
+        ); // Send request to cast device
+    }   
+}
+
+function shiftCurrentTime(contentCurrentTime) { // Shift media back 3 seconds to prevent missing some of the content
+    if (contentCurrentTime > 5) {
+        return(contentCurrentTime - 3);
+    } else {
+        return(0);
+    }
+}
+
+function castSuccessful() {
+    // console.log('Cast Successful.');
+    getVideoPlayer().pause(); // Pause browser video on successful cast
+}
+
+function castFailed(errorCode) {
+    console.log('Error code: ' + errorCode);
+}
+
+window['__onGCastApiAvailable'] = function(isAvailable) {
+    if (isAvailable) {
+        initializeCastApi();
+    }
+}

public/js/progress.js

@@ -0,0 +1,106 @@
+/**
+ * Handle multi channel notifications
+ * 
+ */
+
+checkMessages()
+
+// page map to notification status
+const messageTypes = {
+    "download": ["message:download", "message:add", "message:rescan", "message:playlistscan"],
+    "channel": ["message:subchannel"],
+    "channel_id": ["message:playlistscan"],
+    "playlist": ["message:subplaylist"],
+    "setting": ["message:setting"]
+}
+
+// start to look for messages
+function checkMessages() {
+    var notifications = document.getElementById("notifications");
+    if (notifications) {
+        var dataOrigin = notifications.getAttribute("data");
+        getMessages(dataOrigin);
+    }
+}
+
+// get messages for page on timer
+function getMessages(dataOrigin) {
+    fetch('/progress/').then(response => {
+        return response.json();
+    }).then(responseData => {
+        var messages = buildMessage(responseData, dataOrigin);
+        if (messages.length > 0) {
+            // restart itself
+            setTimeout(function() {
+                getMessages(dataOrigin);
+            }, 3000);
+        };
+    });
+}
+
+// make div for all messages, return relevant
+function buildMessage(responseData, dataOrigin) {
+    // filter relevan messages
+    var allMessages = responseData["messages"];
+    var messages = allMessages.filter(function(value) {
+        return messageTypes[dataOrigin].includes(value["status"])
+    }, dataOrigin);
+    // build divs
+    var notificationDiv = document.getElementById("notifications");
+    var nots = notificationDiv.childElementCount;
+    notificationDiv.innerHTML = "";
+    for (let i = 0; i < messages.length; i++) {
+        var messageData = messages[i];
+        var messageStatus = messageData["status"];
+        var messageBox = document.createElement("div");
+        var title = document.createElement("h3");
+        title.innerHTML = messageData["title"];
+        var message = document.createElement("p");
+        message.innerHTML = messageData["message"];
+        messageBox.appendChild(title);
+        messageBox.appendChild(message);
+        messageBox.classList.add(messageData["level"], "notification");
+        notificationDiv.appendChild(messageBox);
+        if (messageStatus === "message:download") {
+            checkDownloadIcons();
+        };
+    };
+    // reload page when no more notifications
+    if (nots > 0 && messages.length === 0) {
+        location.reload();
+    };
+    return messages
+}
+
+// check if download icons are needed
+function checkDownloadIcons() {
+    var iconBox = document.getElementById("downloadControl");
+    if (iconBox.childElementCount === 0) {
+        var downloadIcons = buildDownloadIcons();
+        iconBox.appendChild(downloadIcons);
+    };
+}
+
+// add dl control icons
+function buildDownloadIcons() {
+    var downloadIcons = document.createElement('div');
+    downloadIcons.classList = 'dl-control-icons';
+    // stop icon
+    var stopIcon = document.createElement('img');
+    stopIcon.setAttribute('id', "stop-icon");
+    stopIcon.setAttribute('title', "Stop Download Queue");
+    stopIcon.setAttribute('src', "/static/img/icon-stop.svg");
+    stopIcon.setAttribute('alt', "stop icon");
+    stopIcon.setAttribute('onclick', 'stopQueue()');
+    // kill icon
+    var killIcon = document.createElement('img');
+    killIcon.setAttribute('id', "kill-icon");
+    killIcon.setAttribute('title', "Kill Download Queue");
+    killIcon.setAttribute('src', "/static/img/icon-close.svg");
+    killIcon.setAttribute('alt', "kill icon");
+    killIcon.setAttribute('onclick', 'killQueue()');
+    // stich together
+    downloadIcons.appendChild(stopIcon);
+    downloadIcons.appendChild(killIcon);
+    return downloadIcons
+}

public/js/script.js

@@ -0,0 +1,912 @@
+function sortChange(sortValue) {
+  var payload = JSON.stringify({ sort_order: sortValue });
+  sendPost(payload);
+  setTimeout(function () {
+    location.reload();
+    return false;
+  }, 500);
+}
+
+// Updates video watch status when passed a video id and it's current state (ex if the video was unwatched but you want to mark it as watched you will pass "unwatched")
+function updateVideoWatchStatus(input1, videoCurrentWatchStatus) {
+  if (videoCurrentWatchStatus) {
+    videoId = input1;
+  } else if (input1.getAttribute("data-id")) {
+    videoId = input1.getAttribute("data-id");
+    videoCurrentWatchStatus = input1.getAttribute("data-status");
+  }
+
+  postVideoProgress(videoId, 0); // Reset video progress on watched/unwatched;
+  removeProgressBar(videoId);
+
+  if (videoCurrentWatchStatus == "watched") {
+    var watchStatusIndicator = createWatchStatusIndicator(videoId, "unwatched");
+    var payload = JSON.stringify({ un_watched: videoId });
+    sendPost(payload);
+  } else if (videoCurrentWatchStatus == "unwatched") {
+    var watchStatusIndicator = createWatchStatusIndicator(videoId, "watched");
+    var payload = JSON.stringify({ watched: videoId });
+    sendPost(payload);
+  }
+
+  var watchButtons = document.getElementsByClassName("watch-button");
+  for (let i = 0; i < watchButtons.length; i++) {
+    if (watchButtons[i].getAttribute("data-id") == videoId) {
+      watchButtons[i].outerHTML = watchStatusIndicator;
+    }
+  }
+}
+
+// Creates a watch status indicator when passed a video id and the videos watch status
+function createWatchStatusIndicator(videoId, videoWatchStatus) {
+  if (videoWatchStatus == "watched") {
+    var seen = "seen";
+    var title = "Mark as unwatched";
+  } else if (videoWatchStatus == "unwatched") {
+    var seen = "unseen";
+    var title = "Mark as watched";
+  }
+  var watchStatusIndicator = `<img src="/static/img/icon-${seen}.svg" alt="${seen}-icon" data-id="${videoId}" data-status="${videoWatchStatus}" onclick="updateVideoWatchStatus(this)" class="watch-button" title="${title}">`;
+  return watchStatusIndicator;
+}
+
+// function isWatched(youtube_id) {
+//     var payload = JSON.stringify({'watched': youtube_id});
+//     sendPost(payload);
+//     var seenIcon = document.createElement('img');
+//     seenIcon.setAttribute('src', "/static/img/icon-seen.svg");
+//     seenIcon.setAttribute('alt', 'seen-icon');
+//     seenIcon.setAttribute('id', youtube_id);
+//     seenIcon.setAttribute('title', "Mark as unwatched");
+//     seenIcon.setAttribute('onclick', "isUnwatched(this.id)");
+//     seenIcon.classList = 'seen-icon';
+//     document.getElementById(youtube_id).replaceWith(seenIcon);
+// }
+
+// Removes the progress bar when passed a video id
+function removeProgressBar(videoId) {
+  setProgressBar(videoId, 0, 1);
+}
+
+function isWatchedButton(button) {
+  youtube_id = button.getAttribute("data-id");
+  var payload = JSON.stringify({ watched: youtube_id });
+  button.remove();
+  sendPost(payload);
+  setTimeout(function () {
+    location.reload();
+    return false;
+  }, 1000);
+}
+
+// function isUnwatched(youtube_id) {
+//     postVideoProgress(youtube_id, 0); // Reset video progress on unwatched;
+//     var payload = JSON.stringify({'un_watched': youtube_id});
+//     sendPost(payload);
+//     var unseenIcon = document.createElement('img');
+//     unseenIcon.setAttribute('src', "/static/img/icon-unseen.svg");
+//     unseenIcon.setAttribute('alt', 'unseen-icon');
+//     unseenIcon.setAttribute('id', youtube_id);
+//     unseenIcon.setAttribute('title', "Mark as watched");
+//     unseenIcon.setAttribute('onclick', "isWatched(this.id)");
+//     unseenIcon.classList = 'unseen-icon';
+//     document.getElementById(youtube_id).replaceWith(unseenIcon);
+// }
+
+function unsubscribe(id_unsub) {
+  var payload = JSON.stringify({ unsubscribe: id_unsub });
+  sendPost(payload);
+  var message = document.createElement("span");
+  message.innerText = "You are unsubscribed.";
+  document.getElementById(id_unsub).replaceWith(message);
+}
+
+function subscribe(id_sub) {
+  var payload = JSON.stringify({ subscribe: id_sub });
+  sendPost(payload);
+  var message = document.createElement("span");
+  message.innerText = "You are subscribed.";
+  document.getElementById(id_sub).replaceWith(message);
+}
+
+function changeView(image) {
+  var sourcePage = image.getAttribute("data-origin");
+  var newView = image.getAttribute("data-value");
+  var payload = JSON.stringify({ change_view: sourcePage + ":" + newView });
+  sendPost(payload);
+  setTimeout(function () {
+    location.reload();
+    return false;
+  }, 500);
+}
+
+function toggleCheckbox(checkbox) {
+  // pass checkbox id as key and checkbox.checked as value
+  var toggleId = checkbox.id;
+  var toggleVal = checkbox.checked;
+  var payloadDict = {};
+  payloadDict[toggleId] = toggleVal;
+  var payload = JSON.stringify(payloadDict);
+  sendPost(payload);
+  setTimeout(function () {
+    var currPage = window.location.pathname;
+    window.location.replace(currPage);
+    return false;
+  }, 500);
+}
+
+// download page buttons
+function rescanPending() {
+  var payload = JSON.stringify({ rescan_pending: true });
+  animate("rescan-icon", "rotate-img");
+  sendPost(payload);
+  setTimeout(function () {
+    checkMessages();
+  }, 500);
+}
+
+function dlPending() {
+  var payload = JSON.stringify({ dl_pending: true });
+  animate("download-icon", "bounce-img");
+  sendPost(payload);
+  setTimeout(function () {
+    checkMessages();
+  }, 500);
+}
+
+function toIgnore(button) {
+  var youtube_id = button.getAttribute("data-id");
+  var payload = JSON.stringify({ ignore: youtube_id });
+  sendPost(payload);
+  document.getElementById("dl-" + youtube_id).remove();
+}
+
+function downloadNow(button) {
+  var youtube_id = button.getAttribute("data-id");
+  var payload = JSON.stringify({ dlnow: youtube_id });
+  sendPost(payload);
+  document.getElementById(youtube_id).remove();
+  setTimeout(function () {
+    checkMessages();
+  }, 500);
+}
+
+function forgetIgnore(button) {
+  var youtube_id = button.getAttribute("data-id");
+  var payload = JSON.stringify({ forgetIgnore: youtube_id });
+  sendPost(payload);
+  document.getElementById("dl-" + youtube_id).remove();
+}
+
+function addSingle(button) {
+  var youtube_id = button.getAttribute("data-id");
+  var payload = JSON.stringify({ addSingle: youtube_id });
+  sendPost(payload);
+  document.getElementById("dl-" + youtube_id).remove();
+  setTimeout(function () {
+    checkMessages();
+  }, 500);
+}
+
+function deleteQueue(button) {
+  var to_delete = button.getAttribute("data-id");
+  var payload = JSON.stringify({ deleteQueue: to_delete });
+  sendPost(payload);
+  setTimeout(function () {
+    location.reload();
+    return false;
+  }, 1000);
+}
+
+function stopQueue() {
+  var payload = JSON.stringify({ queue: "stop" });
+  sendPost(payload);
+  document.getElementById("stop-icon").remove();
+}
+
+function killQueue() {
+  var payload = JSON.stringify({ queue: "kill" });
+  sendPost(payload);
+  document.getElementById("kill-icon").remove();
+}
+
+// settings page buttons
+function manualImport() {
+  var payload = JSON.stringify({ "manual-import": true });
+  sendPost(payload);
+  // clear button
+  var message = document.createElement("p");
+  message.innerText = "processing import";
+  var toReplace = document.getElementById("manual-import");
+  toReplace.innerHTML = "";
+  toReplace.appendChild(message);
+}
+
+function reEmbed() {
+  var payload = JSON.stringify({ "re-embed": true });
+  sendPost(payload);
+  // clear button
+  var message = document.createElement("p");
+  message.innerText = "processing thumbnails";
+  var toReplace = document.getElementById("re-embed");
+  toReplace.innerHTML = "";
+  toReplace.appendChild(message);
+}
+
+function dbBackup() {
+  var payload = JSON.stringify({ "db-backup": true });
+  sendPost(payload);
+  // clear button
+  var message = document.createElement("p");
+  message.innerText = "backing up archive";
+  var toReplace = document.getElementById("db-backup");
+  toReplace.innerHTML = "";
+  toReplace.appendChild(message);
+}
+
+function dbRestore(button) {
+  var fileName = button.getAttribute("data-id");
+  var payload = JSON.stringify({ "db-restore": fileName });
+  sendPost(payload);
+  // clear backup row
+  var message = document.createElement("p");
+  message.innerText = "restoring from backup";
+  var toReplace = document.getElementById(fileName);
+  toReplace.innerHTML = "";
+  toReplace.appendChild(message);
+}
+
+function fsRescan() {
+  var payload = JSON.stringify({ "fs-rescan": true });
+  sendPost(payload);
+  // clear button
+  var message = document.createElement("p");
+  message.innerText = "File system scan in progress";
+  var toReplace = document.getElementById("fs-rescan");
+  toReplace.innerHTML = "";
+  toReplace.appendChild(message);
+}
+
+function resetToken() {
+  var payload = JSON.stringify({ "reset-token": true });
+  sendPost(payload);
+  var message = document.createElement("p");
+  message.innerText = "Token revoked";
+  document.getElementById("text-reveal").replaceWith(message);
+}
+
+// delete from file system
+function deleteConfirm() {
+  to_show = document.getElementById("delete-button");
+  document.getElementById("delete-item").style.display = "none";
+  to_show.style.display = "block";
+}
+
+function deleteVideo(button) {
+  var to_delete = button.getAttribute("data-id");
+  var to_redirect = button.getAttribute("data-redirect");
+  var payload = JSON.stringify({ "delete-video": to_delete });
+  sendPost(payload);
+  setTimeout(function () {
+    var redirect = "/channel/" + to_redirect;
+    window.location.replace(redirect);
+    return false;
+  }, 1000);
+}
+
+function deleteChannel(button) {
+  var to_delete = button.getAttribute("data-id");
+  var payload = JSON.stringify({ "delete-channel": to_delete });
+  sendPost(payload);
+  setTimeout(function () {
+    window.location.replace("/channel/");
+    return false;
+  }, 1000);
+}
+
+function deletePlaylist(button) {
+  var playlist_id = button.getAttribute("data-id");
+  var playlist_action = button.getAttribute("data-action");
+  var payload = JSON.stringify({
+    "delete-playlist": {
+      "playlist-id": playlist_id,
+      "playlist-action": playlist_action,
+    },
+  });
+  sendPost(payload);
+  setTimeout(function () {
+    window.location.replace("/playlist/");
+    return false;
+  }, 1000);
+}
+
+function cancelDelete() {
+  document.getElementById("delete-button").style.display = "none";
+  document.getElementById("delete-item").style.display = "block";
+}
+
+// player
+function createPlayer(button) {
+  var videoId = button.getAttribute("data-id");
+  var videoData = getVideoData(videoId);
+  var videoProgress = getVideoProgress(videoId).position;
+  var videoName = videoData.data.title;
+
+  var videoTag = createVideoTag(videoData, videoProgress);
+
+  var playlist = "";
+  var videoPlaylists = videoData.data.playlist; // Array of playlists the video is in
+  if (typeof videoPlaylists != "undefined") {
+    var subbedPlaylists = getSubbedPlaylists(videoPlaylists); // Array of playlist the video is in that are subscribed
+    if (subbedPlaylists.length != 0) {
+      var playlistData = getPlaylistData(subbedPlaylists[0]); // Playlist data for first subscribed playlist
+      var playlistId = playlistData.playlist_id;
+      var playlistName = playlistData.playlist_name;
+      var playlist = `<h5><a href="/playlist/${playlistId}/">${playlistName}</a></h5>`;
+    }
+  }
+
+  var videoViews = formatNumbers(videoData.data.stats.view_count);
+
+  var channelId = videoData.data.channel.channel_id;
+  var channelName = videoData.data.channel.channel_name;
+
+  removePlayer();
+  // document.getElementById(videoId).outerHTML = ''; // Remove watch indicator from video info
+
+  // If cast integration is enabled create cast button
+  var castButton = "";
+  if (videoData.config.application.enable_cast) {
+    var castButton = `<google-cast-launcher id="castbutton"></google-cast-launcher>`;
+  }
+
+  // Watched indicator
+  if (videoData.data.player.watched) {
+    var watchStatusIndicator = createWatchStatusIndicator(videoId, "watched");
+  } else {
+    var watchStatusIndicator = createWatchStatusIndicator(videoId, "unwatched");
+  }
+
+  var playerStats = `<div class="thumb-icon player-stats"><img src="/static/img/icon-eye.svg" alt="views icon"><span>${videoViews}</span>`;
+  if (videoData.data.stats.like_count) {
+    var likes = formatNumbers(videoData.data.stats.like_count);
+    playerStats += `<span>|</span><img src="/static/img/icon-thumb.svg" alt="thumbs-up"><span>${likes}</span>`;
+  }
+  if (
+    videoData.data.stats.dislike_count &&
+    videoData.config.downloads.integrate_ryd
+  ) {
+    var dislikes = formatNumbers(videoData.data.stats.dislike_count);
+    playerStats += `<span>|</span><img class="dislike" src="/static/img/icon-thumb.svg" alt="thumbs-down"><span>${dislikes}</span>`;
+  }
+  playerStats += "</div>";
+
+  const markup = `
+    <div class="video-player" data-id="${videoId}">
+        ${videoTag}
+        <div class="player-title boxed-content">
+            <img class="close-button" src="/static/img/icon-close.svg" alt="close-icon" data="${videoId}" onclick="removePlayer()" title="Close player">
+            ${watchStatusIndicator}
+            ${castButton}
+            ${playerStats}
+            <div class="player-channel-playlist">
+                <h3><a href="/channel/${channelId}/">${channelName}</a></h3>
+                ${playlist}
+            </div>
+            <a href="/video/${videoId}/"><h2 id="video-title">${videoName}</h2></a>
+        </div>
+    </div>
+    `;
+  const divPlayer = document.getElementById("player");
+  divPlayer.innerHTML = markup;
+}
+
+// Add video tag to video page when passed a video id, function loaded on page load `video.html (115-117)`
+function insertVideoTag(videoData, videoProgress) {
+  var videoTag = createVideoTag(videoData, videoProgress);
+  var videoMain = document.getElementsByClassName("video-main");
+  videoMain[0].innerHTML = videoTag;
+}
+
+// Generates a video tag with subtitles when passed videoData and videoProgress.
+function createVideoTag(videoData, videoProgress) {
+  var videoId = videoData.data.youtube_id;
+  var videoUrl = videoData.data.media_url;
+  var videoThumbUrl = videoData.data.vid_thumb_url;
+  var subtitles = "";
+  var videoSubtitles = videoData.data.subtitles; // Array of subtitles
+  if (
+    typeof videoSubtitles != "undefined" &&
+    videoData.config.downloads.subtitle
+  ) {
+    for (var i = 0; i < videoSubtitles.length; i++) {
+      let label = videoSubtitles[i].name;
+      if (videoSubtitles[i].source == "auto") {
+        label += " - auto";
+      }
+      subtitles += `<track label="${label}" kind="subtitles" srclang="${videoSubtitles[i].lang}" src="${videoSubtitles[i].media_url}">`;
+    }
+  }
+
+  var videoTag = `
+    <video poster="${videoThumbUrl}" ontimeupdate="onVideoProgress()" onpause="onVideoPause()" onended="onVideoEnded()" controls autoplay width="100%" playsinline id="video-item">
+        <source src="${videoUrl}#t=${videoProgress}" type="video/mp4" id="video-source" videoid="${videoId}">
+        ${subtitles}
+    </video>
+    `;
+  return videoTag;
+}
+
+// Gets video tag
+function getVideoPlayer() {
+  var videoElement = document.getElementById("video-item");
+  return videoElement;
+}
+
+// Gets the video source tag
+function getVideoPlayerVideoSource() {
+  var videoPlayerVideoSource = document.getElementById("video-source");
+  return videoPlayerVideoSource;
+}
+
+// Gets the current progress of the video currently in the player
+function getVideoPlayerCurrentTime() {
+  var videoElement = getVideoPlayer();
+  if (videoElement != null) {
+    return videoElement.currentTime;
+  }
+}
+
+// Gets the video id of the video currently in the player
+function getVideoPlayerVideoId() {
+  var videoPlayerVideoSource = getVideoPlayerVideoSource();
+  if (videoPlayerVideoSource != null) {
+    return videoPlayerVideoSource.getAttribute("videoid");
+  }
+}
+
+// Gets the duration of the video currently in the player
+function getVideoPlayerDuration() {
+  var videoElement = getVideoPlayer();
+  if (videoElement != null) {
+    return videoElement.duration;
+  }
+}
+
+// Gets current watch status of video based on watch button
+function getVideoPlayerWatchStatus() {
+  var videoId = getVideoPlayerVideoId();
+  var watched = false;
+
+  var watchButtons = document.getElementsByClassName("watch-button");
+  for (let i = 0; i < watchButtons.length; i++) {
+    if (
+      watchButtons[i].getAttribute("data-id") == videoId &&
+      watchButtons[i].getAttribute("data-status") == "watched"
+    ) {
+      watched = true;
+    }
+  }
+  return watched;
+}
+
+// Runs on video playback, marks video as watched if video gets to 90% or higher, sends position to api
+function onVideoProgress() {
+  var videoId = getVideoPlayerVideoId();
+  var currentTime = getVideoPlayerCurrentTime();
+  var duration = getVideoPlayerDuration();
+  if ((currentTime % 10).toFixed(1) <= 0.2) {
+    // Check progress every 10 seconds or else progress is checked a few times a second
+    postVideoProgress(videoId, currentTime);
+    if (!getVideoPlayerWatchStatus()) {
+      // Check if video is already marked as watched
+      if (watchedThreshold(currentTime, duration)) {
+        updateVideoWatchStatus(videoId, "unwatched");
+      }
+    }
+  }
+}
+
+// Runs on video end, marks video as watched
+function onVideoEnded() {
+  var videoId = getVideoPlayerVideoId();
+  if (!getVideoPlayerWatchStatus()) {
+    // Check if video is already marked as watched
+    updateVideoWatchStatus(videoId, "unwatched");
+  }
+}
+
+function watchedThreshold(currentTime, duration) {
+  var watched = false;
+  if (duration <= 1800) {
+    // If video is less than 30 min
+    if (currentTime / duration >= 0.9) {
+      // Mark as watched at 90%
+      var watched = true;
+    }
+  } else {
+    // If video is more than 30 min
+    if (currentTime >= duration - 120) {
+      // Mark as watched if there is two minutes left
+      var watched = true;
+    }
+  }
+  return watched;
+}
+
+// Runs on video pause. Sends current position.
+function onVideoPause() {
+  var videoId = getVideoPlayerVideoId();
+  var currentTime = getVideoPlayerCurrentTime();
+  postVideoProgress(videoId, currentTime);
+}
+
+// Format numbers for frontend
+function formatNumbers(number) {
+  var numberUnformatted = parseFloat(number);
+  if (numberUnformatted > 999999999) {
+    var numberFormatted =
+      (numberUnformatted / 1000000000).toFixed(1).toString() + "B";
+  } else if (numberUnformatted > 999999) {
+    var numberFormatted =
+      (numberUnformatted / 1000000).toFixed(1).toString() + "M";
+  } else if (numberUnformatted > 999) {
+    var numberFormatted =
+      (numberUnformatted / 1000).toFixed(1).toString() + "K";
+  } else {
+    var numberFormatted = numberUnformatted;
+  }
+  return numberFormatted;
+}
+
+// Gets video data when passed video ID
+function getVideoData(videoId) {
+  var apiEndpoint = "/api/video/" + videoId + "/";
+  var videoData = apiRequest(apiEndpoint, "GET");
+  return videoData;
+}
+
+// Gets channel data when passed channel ID
+function getChannelData(channelId) {
+  var apiEndpoint = "/api/channel/" + channelId + "/";
+  var channelData = apiRequest(apiEndpoint, "GET");
+  return channelData.data;
+}
+
+// Gets playlist data when passed playlist ID
+function getPlaylistData(playlistId) {
+  var apiEndpoint = "/api/playlist/" + playlistId + "/";
+  var playlistData = apiRequest(apiEndpoint, "GET");
+  return playlistData.data;
+}
+
+// Get video progress data when passed video ID
+function getVideoProgress(videoId) {
+  var apiEndpoint = "/api/video/" + videoId + "/progress/";
+  var videoProgress = apiRequest(apiEndpoint, "GET");
+  return videoProgress;
+}
+
+// Given an array of playlist ids it returns an array of subbed playlist ids from that list
+function getSubbedPlaylists(videoPlaylists) {
+  var subbedPlaylists = [];
+  for (var i = 0; i < videoPlaylists.length; i++) {
+    if (getPlaylistData(videoPlaylists[i]).playlist_subscribed) {
+      subbedPlaylists.push(videoPlaylists[i]);
+    }
+  }
+  return subbedPlaylists;
+}
+
+// Send video position when given video id and progress in seconds
+function postVideoProgress(videoId, videoProgress) {
+  var apiEndpoint = "/api/video/" + videoId + "/progress/";
+  var duartion = getVideoPlayerDuration();
+  if (!isNaN(videoProgress) && duartion != "undefined") {
+    var data = {
+      position: videoProgress,
+    };
+    if (videoProgress == 0) {
+      apiRequest(apiEndpoint, "DELETE");
+      // console.log("Deleting Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
+    } else if (!getVideoPlayerWatchStatus()) {
+      apiRequest(apiEndpoint, "POST", data);
+      // console.log("Saving Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
+    }
+  }
+}
+
+// Makes api requests when passed an endpoint and method ("GET", "POST", "DELETE")
+function apiRequest(apiEndpoint, method, data) {
+  const xhttp = new XMLHttpRequest();
+  var sessionToken = getCookie("sessionid");
+  xhttp.open(method, apiEndpoint, false);
+  xhttp.setRequestHeader("X-CSRFToken", getCookie("csrftoken")); // Used for video progress POST requests
+  xhttp.setRequestHeader("Authorization", "Token " + sessionToken);
+  xhttp.setRequestHeader("Content-Type", "application/json");
+  xhttp.send(JSON.stringify(data));
+  return JSON.parse(xhttp.responseText);
+}
+
+// Gets origin URL
+function getURL() {
+  return window.location.origin;
+}
+
+function removePlayer() {
+  var currentTime = getVideoPlayerCurrentTime();
+  var duration = getVideoPlayerDuration();
+  var videoId = getVideoPlayerVideoId();
+  postVideoProgress(videoId, currentTime);
+  setProgressBar(videoId, currentTime, duration);
+  var playerElement = document.getElementById("player");
+  if (playerElement.hasChildNodes()) {
+    var youtubeId = playerElement.childNodes[1].getAttribute("data-id");
+    var playedStatus = document.createDocumentFragment();
+    var playedBox = document.getElementById(youtubeId);
+    if (playedBox) {
+      playedStatus.appendChild(playedBox);
+    }
+    playerElement.innerHTML = "";
+    // append played status
+    var videoInfo = document.getElementById("video-info-" + youtubeId);
+    videoInfo.insertBefore(playedStatus, videoInfo.firstChild);
+  }
+}
+
+// Sets the progress bar when passed a video id, video progress and video duration
+function setProgressBar(videoId, currentTime, duration) {
+  var progressBarWidth = (currentTime / duration) * 100 + "%";
+  var progressBars = document.getElementsByClassName("video-progress-bar");
+  for (let i = 0; i < progressBars.length; i++) {
+    if (progressBars[i].id == "progress-" + videoId) {
+      if (!getVideoPlayerWatchStatus()) {
+        progressBars[i].style.width = progressBarWidth;
+      } else {
+        progressBars[i].style.width = "0%";
+      }
+    }
+  }
+
+  // progressBar = document.getElementById("progress-" + videoId);
+}
+
+// multi search form
+function searchMulti(query) {
+  if (query.length > 1) {
+    var payload = JSON.stringify({ multi_search: query });
+    var http = new XMLHttpRequest();
+    http.onreadystatechange = function () {
+      if (http.readyState === 4) {
+        allResults = JSON.parse(http.response).results;
+        populateMultiSearchResults(allResults);
+      }
+    };
+    http.open("POST", "/process/", true);
+    http.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
+    http.setRequestHeader("Content-type", "application/json");
+    http.send(payload);
+  }
+}
+
+function getViewDefaults(view) {
+  var defaultView = document.getElementById("id_" + view).value;
+  return defaultView;
+}
+
+function populateMultiSearchResults(allResults) {
+  // videos
+  var defaultVideo = getViewDefaults("home");
+  var allVideos = allResults.video_results;
+  var videoBox = document.getElementById("video-results");
+  videoBox.innerHTML = "";
+  for (let index = 0; index < allVideos.length; index++) {
+    const video = allVideos[index].source;
+    const videoDiv = createVideo(video, defaultVideo);
+    videoBox.appendChild(videoDiv);
+  }
+  // channels
+  var defaultChannel = getViewDefaults("channel");
+  var allChannels = allResults.channel_results;
+  var channelBox = document.getElementById("channel-results");
+  channelBox.innerHTML = "";
+  for (let index = 0; index < allChannels.length; index++) {
+    const channel = allChannels[index].source;
+    const channelDiv = createChannel(channel, defaultChannel);
+    channelBox.appendChild(channelDiv);
+  }
+  // playlists
+  var defaultPlaylist = getViewDefaults("playlist");
+  var allPlaylists = allResults.playlist_results;
+  var playlistBox = document.getElementById("playlist-results");
+  playlistBox.innerHTML = "";
+  for (let index = 0; index < allPlaylists.length; index++) {
+    const playlist = allPlaylists[index].source;
+    const playlistDiv = createPlaylist(playlist, defaultPlaylist);
+    playlistBox.appendChild(playlistDiv);
+  }
+}
+
+function createVideo(video, viewStyle) {
+  // create video item div from template
+  const videoId = video.youtube_id;
+  const mediaUrl = video.media_url;
+  const thumbUrl = "/cache/" + video.vid_thumb_url;
+  const videoTitle = video.title;
+  const videoPublished = video.published;
+  const videoDuration = video.player.duration_str;
+  if (video.player.watched) {
+    var watchStatusIndicator = createWatchStatusIndicator(videoId, "watched");
+  } else {
+    var watchStatusIndicator = createWatchStatusIndicator(videoId, "unwatched");
+  }
+  const channelId = video.channel.channel_id;
+  const channelName = video.channel.channel_name;
+  // build markup
+  const markup = `
+    <a href="#player" data-src="/media/${mediaUrl}" data-thumb="${thumbUrl}" data-title="${videoTitle}" data-channel="${channelName}" data-channel-id="${channelId}" data-id="${videoId}" onclick="createPlayer(this)">
+        <div class="video-thumb-wrap ${viewStyle}">
+            <div class="video-thumb">
+                <img src="${thumbUrl}" alt="video-thumb">
+            </div>
+            <div class="video-play">
+                <img src="/static/img/icon-play.svg" alt="play-icon">
+            </div>
+        </div>
+    </a>
+    <div class="video-desc ${viewStyle}">
+        <div class="video-desc-player" id="video-info-${videoId}">
+                ${watchStatusIndicator}
+            <span>${videoPublished} | ${videoDuration}</span>
+        </div>
+        <div>
+            <a href="/channel/${channelId}/"><h3>${channelName}</h3></a>
+            <a class="video-more" href="/video/${videoId}/"><h2>${videoTitle}</h2></a>
+        </div>
+    </div>
+    `;
+  const videoDiv = document.createElement("div");
+  videoDiv.setAttribute("class", "video-item " + viewStyle);
+  videoDiv.innerHTML = markup;
+  return videoDiv;
+}
+
+function createChannel(channel, viewStyle) {
+  // create channel item div from template
+  const channelId = channel.channel_id;
+  const channelName = channel.channel_name;
+  const channelSubs = channel.channel_subs;
+  const channelLastRefresh = channel.channel_last_refresh;
+  if (channel.channel_subscribed) {
+    var button = `<button class="unsubscribe" type="button" id="${channelId}" onclick="unsubscribe(this.id)" title="Unsubscribe from ${channelName}">Unsubscribe</button>`;
+  } else {
+    var button = `<button type="button" id="${channelId}" onclick="subscribe(this.id)" title="Subscribe to ${channelName}">Subscribe</button>`;
+  }
+  // build markup
+  const markup = `
+    <div class="channel-banner ${viewStyle}">
+        <a href="/channel/${channelId}/">
+            <img src="/cache/channels/${channelId}_banner.jpg" alt="${channelId}-banner">
+        </a>
+    </div>
+    <div class="info-box info-box-2 ${viewStyle}">
+        <div class="info-box-item">
+            <div class="round-img">
+                <a href="/channel/${channelId}/">
+                    <img src="/cache/channels/${channelId}_thumb.jpg" alt="channel-thumb">
+                </a>
+            </div>
+            <div>
+                <h3><a href="/channel/${channelId}/">${channelName}</a></h3>
+                <p>Subscribers: ${channelSubs}</p>
+            </div>
+        </div>
+        <div class="info-box-item">
+            <div>
+                <p>Last refreshed: ${channelLastRefresh}</p>
+                ${button}
+            </div>
+        </div>
+    </div>
+    `;
+  const channelDiv = document.createElement("div");
+  channelDiv.setAttribute("class", "channel-item " + viewStyle);
+  channelDiv.innerHTML = markup;
+  return channelDiv;
+}
+
+function createPlaylist(playlist, viewStyle) {
+  // create playlist item div from template
+  const playlistId = playlist.playlist_id;
+  const playlistName = playlist.playlist_name;
+  const playlistChannelId = playlist.playlist_channel_id;
+  const playlistChannel = playlist.playlist_channel;
+  const playlistLastRefresh = playlist.playlist_last_refresh;
+  if (playlist.playlist_subscribed) {
+    var button = `<button class="unsubscribe" type="button" id="${playlistId}" onclick="unsubscribe(this.id)" title="Unsubscribe from ${playlistName}">Unsubscribe</button>`;
+  } else {
+    var button = `<button type="button" id="${playlistId}" onclick="subscribe(this.id)" title="Subscribe to ${playlistName}">Subscribe</button>`;
+  }
+  const markup = `
+    <div class="playlist-thumbnail">
+        <a href="/playlist/${playlistId}/">
+            <img src="/cache/playlists/${playlistId}.jpg" alt="${playlistId}-thumbnail">
+        </a>
+    </div>
+    <div class="playlist-desc ${viewStyle}">
+        <a href="/channel/${playlistChannelId}/"><h3>${playlistChannel}</h3></a>
+        <a href="/playlist/${playlistId}/"><h2>${playlistName}</h2></a>
+        <p>Last refreshed: ${playlistLastRefresh}</p>
+        ${button}
+    </div>
+    `;
+  const playlistDiv = document.createElement("div");
+  playlistDiv.setAttribute("class", "playlist-item " + viewStyle);
+  playlistDiv.innerHTML = markup;
+  return playlistDiv;
+}
+
+// generic
+function sendPost(payload) {
+  var http = new XMLHttpRequest();
+  http.open("POST", "/process/", true);
+  http.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
+  http.setRequestHeader("Content-type", "application/json");
+  http.send(payload);
+}
+
+function getCookie(c_name) {
+  if (document.cookie.length > 0) {
+    c_start = document.cookie.indexOf(c_name + "=");
+    if (c_start != -1) {
+      c_start = c_start + c_name.length + 1;
+      c_end = document.cookie.indexOf(";", c_start);
+      if (c_end == -1) c_end = document.cookie.length;
+      return unescape(document.cookie.substring(c_start, c_end));
+    }
+  }
+  return "";
+}
+
+// animations
+function textReveal() {
+  var textBox = document.getElementById("text-reveal");
+  var button = document.getElementById("text-reveal-button");
+  var textBoxHeight = textBox.style.height;
+  if (textBoxHeight === "unset") {
+    textBox.style.height = "0px";
+    button.innerText = "Show";
+  } else {
+    textBox.style.height = "unset";
+    button.innerText = "Hide";
+  }
+}
+
+function showForm() {
+  var formElement = document.getElementById("hidden-form");
+  var displayStyle = formElement.style.display;
+  if (displayStyle === "") {
+    formElement.style.display = "block";
+  } else {
+    formElement.style.display = "";
+  }
+  animate("animate-icon", "pulse-img");
+}
+
+function showOverwrite() {
+  var overwriteDiv = document.getElementById("overwrite-form");
+  if (overwriteDiv.classList.contains("hidden-overwrite")) {
+    overwriteDiv.classList.remove("hidden-overwrite");
+  } else {
+    overwriteDiv.classList.add("hidden-overwrite");
+  }
+}
+
+function animate(elementId, animationClass) {
+  var toAnimate = document.getElementById(elementId);
+  if (toAnimate.className !== animationClass) {
+    toAnimate.className = animationClass;
+  } else {
+    toAnimate.classList.remove(animationClass);
+  }
+}

public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

renovate.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["config:base"],
+  "dependencyDashboardApproval": true
+}

run.sh

@@ -1,20 +0,0 @@
-#!/bin/bash
-# startup script inside the container for tubearchivist
-
-counter=0
-until curl "$ES_URL" -fs; do
-    echo "waiting for elastic search to start"
-    counter=$((counter+1))
-    if [[ $counter -eq 12 ]]; then
-        # fail after 1 min
-        echo "failed to connect to elastic search, exiting..."
-        exit 1
-    fi
-    sleep 5
-done
-
-python manage.py migrate
-python manage.py collectstatic --noinput -c
-nginx &
-celery -A home.tasks worker --loglevel=INFO &
-uwsgi --ini uwsgi.ini

src/components/BoxedContent.tsx

@@ -0,0 +1,3 @@
+export const BoxedContent: React.FC = ({ children }) => (
+  <div className="boxed-content">{children}</div>
+);

src/components/CustomHead.tsx

@@ -0,0 +1,52 @@
+import Head from "next/head";
+
+/**
+ * TODO: Dynamically get the title
+ * TODO: NextJS recommended pattern for SEO
+ */
+export const CustomHead = ({ title }: { title?: string }) => {
+  return (
+    <Head>
+      <meta charSet="UTF-8" />
+      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/favicon/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/favicon/site.webmanifest" />
+      <link
+        rel="mask-icon"
+        href="/favicon/safari-pinned-tab.svg"
+        color="#01202e"
+      />
+      <link rel="shortcut icon" href="/favicon/favicon.ico" />
+      <meta name="apple-mobile-web-app-title" content="TubeArchivist" />
+      <meta name="application-name" content="TubeArchivist" />
+      <meta name="msapplication-TileColor" content="#01202e" />
+      <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+      <meta name="theme-color" content="#01202e" />
+
+      {title ? <title>TA | {title}</title> : <title>TubeArchivist</title>}
+
+      {/* {% if colors == "dark" %} */}
+      {/* <link rel="stylesheet" href="/css/dark.css" /> */}
+      {/* {% else %} */}
+      {/* <link rel="stylesheet" href="/css/light.css" /> */}
+      {/* {% endif %} */}
+    </Head>
+  );
+};

src/components/Footer.tsx

@@ -0,0 +1,34 @@
+export const Footer = () => (
+  <div className="footer">
+    <div className="boxed-content">
+      <span>© 2021 - {new Date().getFullYear()} TubeArchivist v0.1.3 </span>
+      <span>
+        <a href="{% url 'about' %}">About</a> |{" "}
+        <a
+          href="https://github.com/bbilly1/tubearchivist"
+          rel="noreferrer"
+          target="_blank"
+        >
+          GitHub
+        </a>{" "}
+        |{" "}
+        <a
+          href="https://hub.docker.com/r/bbilly1/tubearchivist"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Docker Hub
+        </a>{" "}
+        |{" "}
+        <a
+          href="https://discord.gg/AFwz8nE7BK"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Discord
+        </a>{" "}
+        | <a href="https://www.reddit.com/r/TubeArchivist/">Reddit</a>
+      </span>
+    </div>
+  </div>
+);

src/components/Header.tsx

@@ -0,0 +1,20 @@
+import dynamic from "next/dynamic";
+
+const Header = ({ authData }) => {
+  const { session, status } = authData;
+
+  return (
+    <>
+      <h1>Name: {session?.user?.name}</h1>
+      <h1>Status: {status}</h1>
+      <h1>Token: {session?.ta_token?.token}</h1>
+      <h1>User ID: {session?.ta_token?.user_id}</h1>
+    </>
+  );
+};
+
+export const DynamicHeader = dynamic(() => import("../components/Header"), {
+  suspense: true,
+});
+
+export default Header;

src/components/Layout.tsx

@@ -0,0 +1,14 @@
+import { Footer } from "./Footer";
+import { Nav } from "./Nav";
+
+export const Layout = ({ children }) => {
+  return (
+    <>
+      <div style={{ minHeight: "100vh" }} className="main-content">
+        <Nav />
+        {children}
+      </div>
+      <Footer />
+    </>
+  );
+};

src/components/Nav.tsx

@@ -0,0 +1,95 @@
+import NextImage from "next/image";
+import NextLink from "next/link";
+import BannerDark from "../images/banner-tube-archivist-dark.png";
+import IconSearch from "../images/icon-search.svg";
+import IconGear from "../images/icon-gear.svg";
+import IconExit from "../images/icon-exit.svg";
+import { signIn, signOut, useSession } from "next-auth/react";
+
+/** TODO: Fix these nav links */
+export const Nav = () => {
+  const { data: session } = useSession();
+
+  const handleSigninSignout = () => {
+    if (!session) {
+      signIn();
+    }
+    signOut();
+  };
+
+  return (
+    <div className="boxed-content">
+      <div className="top-banner">
+        <NextLink href="/">
+          <a>
+            {/* {% if colors == 'dark */}
+            <NextImage
+              width={700}
+              height={150}
+              src={BannerDark}
+              alt="tube-archivist-banner"
+            />
+            {/* {% endif %} */}
+            {/* {% if colors == 'light */}
+            {/* <img src="/img/banner-tube-archivist-light.png" alt="tube-archivist-banner"> */}
+            {/* {% endif %} */}
+          </a>
+        </NextLink>
+      </div>
+      <div className="top-nav">
+        <div className="nav-items">
+          <NextLink href="/">
+            <a>
+              <div className="nav-item">home</div>
+            </a>
+          </NextLink>
+          <NextLink href="/channel">
+            <a>
+              <div className="nav-item">channels</div>
+            </a>
+          </NextLink>
+          <NextLink href="/playlist">
+            <a>
+              <div className="nav-item">playlists</div>
+            </a>
+          </NextLink>
+          <NextLink href="/download">
+            <a>
+              <div className="nav-item">downloads</div>
+            </a>
+          </NextLink>
+        </div>
+        <div className="nav-icons">
+          <a href="/search">
+            <NextImage
+              width={50}
+              height={40}
+              src={IconSearch}
+              alt="search-icon"
+              title="Search"
+            />
+          </a>
+          <a href="/settings">
+            <NextImage
+              width={50}
+              height={40}
+              src={IconGear}
+              alt="gear-icon"
+              title="Settings"
+            />
+          </a>
+          <a style={{ cursor: "pointer" }} onClick={handleSigninSignout}>
+            <NextImage
+              width={50}
+              height={40}
+              className="alert-hover"
+              src={IconExit}
+              alt="exit-icon"
+              title="Logout"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/VideoList/VideoList.tsx

@@ -0,0 +1,223 @@
+import { useSession } from "next-auth/react";
+import NextImage from "next/image";
+import { useState } from "react";
+import { useQuery } from "react-query";
+import IconPlay from "../../images/icon-play.svg";
+import { getTAUrl } from "../../lib/constants";
+import { getVideos } from "../../lib/getVideos";
+import type { Data } from "../../types/video";
+import VideoPlayer from "../VideoPlayer";
+
+type ViewStyle = "grid" | "list";
+
+const TA_BASE_URL = getTAUrl();
+
+const VideoList = () => {
+  const [selectedVideoUrl, setSelectedVideoUrl] = useState<Data>();
+  const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
+  const { data: session } = useSession();
+  const { data, error, isLoading } = useQuery(
+    ["videos", session.ta_token.token],
+    () => getVideos(session.ta_token.token),
+    {
+      enabled: !!session?.ta_token?.token,
+    }
+  );
+
+  const handleSelectedVideo = (video: Data) => {
+    setSelectedVideoUrl(video);
+  };
+
+  const handleRemoveVideoPlayer = () => {
+    setSelectedVideoUrl(undefined);
+  };
+
+  const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
+    setViewStyle(selectedViewStyle);
+  };
+
+  if (!isLoading && !data?.data) {
+    return (
+      <div className="boxed-content">
+        <h2>No videos found...</h2>
+        <p>
+          If you&apos;ve already added a channel or playlist, try going to the{" "}
+          <a href="{% url 'downloads">downloads page</a> to start the scan and
+          download tasks.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <VideoPlayer
+        handleRemoveVideoPlayer={handleRemoveVideoPlayer}
+        selectedVideo={selectedVideoUrl}
+      />
+
+      <div className="boxed-content">
+        <div className="title-bar">
+          <h1>Recent Videos</h1>
+        </div>
+        <div className="view-controls">
+          <div className="toggle">
+            <span>Hide watched:</span>
+            <div className="toggleBox">
+              <input
+                id="hide_watched"
+                // onClick="toggleCheckbox(this)"
+                type="checkbox"
+              />
+              {/* {% if not hide_watched %} */}
+              <label htmlFor="" className="ofbtn">
+                Off
+              </label>
+              {/* {% else %} */}
+              <label htmlFor="" className="onbtn">
+                On
+              </label>
+              {/* {% endif %} */}
+            </div>
+          </div>
+          <div className="sort">
+            <div id="hidden-form">
+              <span>Sort by:</span>
+              <select
+                name="sort"
+                id="sort"
+                onChange={() => console.log("onChange sort")}
+              >
+                <option value="published">date published</option>
+                <option value="downloaded">date downloaded</option>
+                <option value="views">views</option>
+                <option value="likes">likes</option>
+              </select>
+              <select
+                name="sord-order"
+                id="sort-order"
+                onChange={() => console.log("onChange sort-order")}
+              >
+                <option value="asc">asc</option>
+                <option value="desc">desc</option>
+              </select>
+            </div>
+          </div>
+          <div className="view-icons">
+            <img
+              src="/img/icon-sort.svg"
+              alt="sort-icon"
+              onClick={() => console.log("showForm")}
+              id="animate-icon"
+            />
+            <img
+              src="/img/icon-gridview.svg"
+              onClick={() => handleSetViewstyle("grid")}
+              alt="grid view"
+            />
+            <img
+              src="/img/icon-listview.svg"
+              onClick={() => handleSetViewstyle("list")}
+              alt="list view"
+            />
+          </div>
+        </div>
+        <div className={`video-list ${viewStyle}`}>
+          {data &&
+            data?.data?.map((video) => {
+              return (
+                <div
+                  key={video.youtube_id}
+                  className={`video-item ${viewStyle}`}
+                >
+                  <a
+                    style={{ cursor: "pointer" }}
+                    onClick={() => handleSelectedVideo(video)}
+                  >
+                    <div className="video-thumb-wrap list">
+                      <div className="video-thumb">
+                        <NextImage
+                          src={`${TA_BASE_URL.client}${video.vid_thumb_url}`}
+                          alt="video-thumb"
+                          width={640}
+                          height={360}
+                          // blurDataURL={video.vid_thumb_base64}
+                          // placeholder="blur"
+                        />
+                        {/* {% if video.source.player.progress %} */}
+                        <div
+                          className="video-progress-bar"
+                          id={`progress-${video.youtube_id}`}
+                          // style={{ width: video.player.progress }} // TODO: /video/youtube_id/progress
+                        ></div>
+                        {/* {% else %} */}
+                        <div
+                          className="video-progress-bar"
+                          id={`progress-${video.youtube_id}`}
+                          style={{ width: "0%" }}
+                        ></div>
+                        {/* {% endif %} */}
+                      </div>
+                      <div className="video-play">
+                        <NextImage
+                          width={40}
+                          height={40}
+                          src={IconPlay}
+                          alt="play-icon"
+                        />
+                      </div>
+                    </div>
+                  </a>
+                  <div className="video-desc list">
+                    <div
+                      className="video-desc-player"
+                      id={`video-info-${video.youtube_id}`}
+                    >
+                      {video?.player?.watched ? (
+                        <img
+                          src="/img/icon-seen.svg"
+                          alt="seen-icon"
+                          data-id={video.youtube_id}
+                          data-status="watched"
+                          // onClick="updateVideoWatchStatus(this)"
+                          className="watch-button"
+                          title="Mark as unwatched"
+                        />
+                      ) : (
+                        <img
+                          src="/img/icon-unseen.svg"
+                          alt="unseen-icon"
+                          data-id={video.youtube_id}
+                          data-status="unwatched"
+                          // onClick="updateVideoWatchStatus(this)"
+                          className="watch-button"
+                          title="Mark as watched"
+                        />
+                      )}
+
+                      <span>
+                        {video.published} | {video.player.duration_str}
+                      </span>
+                    </div>
+                    <div>
+                      <a href={`/channel/${video.channel.channel_id}`}>
+                        <h3>{video.channel.channel_name}</h3>
+                      </a>
+                      <a
+                        className="video-more"
+                        href={`/video/${video.youtube_id}`}
+                      >
+                        <h2>{video.title}</h2>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default VideoList;

src/components/VideoList/index.ts

@@ -0,0 +1,4 @@
+import dynamic from "next/dynamic";
+
+const DynamicVideoList = dynamic(() => import("./VideoList"));
+export default DynamicVideoList;

src/components/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,126 @@
+import NextImage from "next/image";
+import NextLink from "next/link";
+import ReactPlayer from "react-player";
+import IconClose from "../../images/icon-close.svg";
+import { getTAUrl } from "../../lib/constants";
+import { formatNumbers } from "../../lib/utils";
+import { Data } from "../../types/video";
+
+const TA_BASE_URL = getTAUrl();
+
+type VideoPlayerProps = {
+  selectedVideo: Data;
+  handleRemoveVideoPlayer?: () => void;
+  isHome?: boolean;
+  showStats?: boolean;
+};
+
+const VideoPlayer = ({
+  selectedVideo,
+  handleRemoveVideoPlayer,
+  isHome = true,
+  showStats = true,
+}: VideoPlayerProps) => {
+  if (!selectedVideo) return;
+  return (
+    <>
+      {selectedVideo && (
+        <div className="player-wrapper">
+          <div className="video-player">
+            <ReactPlayer
+              controls={true}
+              width="100%"
+              height="100%"
+              light={false}
+              playing // TODO: Not currently working
+              playsinline
+              url={`${TA_BASE_URL.client}${selectedVideo?.media_url}`}
+            />
+            <SponsorBlock />
+            {showStats ? (
+              <div className="player-title boxed-content">
+                <NextImage
+                  className="close-button"
+                  src={IconClose}
+                  width={30}
+                  height={30}
+                  alt="close-icon"
+                  onClick={handleRemoveVideoPlayer}
+                  title="Close player"
+                />
+                <div className="thumb-icon player-stats">
+                  <img src="/img/icon-eye.svg" alt="views icon" />
+                  <span>
+                    {formatNumbers(selectedVideo.stats.view_count.toString())}
+                  </span>
+                  <span>|</span>
+                  <img src="/img/icon-thumb.svg" alt="thumbs-up" />
+                  <span>
+                    {formatNumbers(selectedVideo.stats.like_count.toString())}
+                  </span>
+                </div>
+                <div className="player-channel-playlist">
+                  <h3>
+                    <a href="/channel/${channelId}/">
+                      {selectedVideo.channel.channel_name}
+                    </a>
+                  </h3>
+                  {/* ${playlist} */}
+                </div>
+                <NextLink href={`/video/${selectedVideo.youtube_id}/`}>
+                  <a>
+                    <h2 id="video-title">{selectedVideo.title}</h2>
+                  </a>
+                </NextLink>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default VideoPlayer;
+
+function SponsorBlock() {
+  return (
+    <>
+      {/* <div className="notifications" id="notifications"></div> */}
+      <div className="sponsorblock" id="sponsorblock">
+        {/* {% if video.sponsorblock.is_enabled %} */}
+        {/* {% if video.sponsorblock.segments|length == 0 %} */}
+        <h4>
+          This video doesn&apos;t have any sponsor segments added. To add a
+          segment go to{" "}
+          <u>
+            <a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">
+              this video on YouTube
+            </a>
+          </u>{" "}
+          and add a segment using the{" "}
+          <u>
+            <a href="https://sponsor.ajay.app/">SponsorBlock</a>
+          </u>{" "}
+          extension.
+        </h4>
+        {/* {% elif video.sponsorblock.has_unlocked %} */}
+        <h4>
+          This video has unlocked sponsor segments. Go to{" "}
+          <u>
+            <a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">
+              this video on YouTube
+            </a>
+          </u>{" "}
+          and vote on the segments using the{" "}
+          <u>
+            <a href="https://sponsor.ajay.app/">SponsorBlock</a>
+          </u>{" "}
+          extension.
+        </h4>
+        {/* {% endif %} */}
+        {/* {% endif %} */}
+      </div>
+    </>
+  );
+}

src/components/VideoPlayer/index.tsx

@@ -0,0 +1,4 @@
+import dynamic from "next/dynamic";
+
+const DynamicVideoPlayer = dynamic(() => import("./VideoPlayer"));
+export default DynamicVideoPlayer;