add check video id for android client too

See:
 - https://github.com/crystal-lang/crystal/pull/12310
 - https://github.com/kemalcr/kemal/pull/644

.ameba.yml

@@ -0,0 +1,88 @@
+#
+# Lint
+#
+
+# Exclude assigns for ECR files
+Lint/UselessAssign:
+  Excluded:
+  - src/invidious.cr
+  - src/invidious/helpers/errors.cr
+  - src/invidious/routes/**/*.cr
+
+# Ignore false negative (if !db.query_one?...)
+Lint/UnreachableCode:
+  Excluded:
+  - src/invidious/database/base.cr
+
+# Ignore shadowed variable `key` (it works for now, and that's
+# a sensitive part of the code)
+Lint/ShadowingOuterLocalVar:
+  Excluded:
+  - src/invidious/helpers/tokens.cr
+
+
+#
+# Style
+#
+
+Style/RedundantBegin:
+  Enabled: false
+
+Style/RedundantReturn:
+  Enabled: false
+
+
+#
+# Metrics
+#
+
+# Ignore function complexity (number of if/else & case/when branches)
+# For some functions that can hardly be simplified for now
+Metrics/CyclomaticComplexity:
+  Excluded:
+  # get_about_info(ucid, locale) => [17/10]
+  - src/invidious/channels/about.cr
+
+  # fetch_channel_community(ucid, continuation, ...) => [34/10]
+  - src/invidious/channels/community.cr
+
+  # create_notification_stream(env, topics, connection_channel) => [14/10]
+  - src/invidious/helpers/helpers.cr:84:5
+
+  # get_index(plural_form, count) => [25/10]
+  - src/invidious/helpers/i18next.cr
+
+  # call(context) => [18/10]
+  - src/invidious/helpers/static_file_handler.cr
+
+  # show(env) => [38/10]
+  - src/invidious/routes/embed.cr
+
+  # get_video_playback(env) => [45/10]
+  - src/invidious/routes/video_playback.cr
+
+  # handle(env) => [40/10]
+  - src/invidious/routes/watch.cr
+
+  # playlist_ajax(env) => [24/10]
+  - src/invidious/routes/playlists.cr
+
+  # fetch_youtube_comments(id, cursor, ....) => [40/10]
+  # template_youtube_comments(comments, locale, ...) => [16/10]
+  # content_to_comment_html(content) => [14/10]
+  - src/invidious/comments.cr
+
+  # to_json(locale, json) => [21/10]
+  # extract_video_info(video_id, ...) => [44/10]
+  # process_video_params(query, preferences) => [20/10]
+  - src/invidious/videos.cr
+
+
+
+#src/invidious/playlists.cr:327:5
+#[C] Metrics/CyclomaticComplexity: Cyclomatic complexity too high [19/10]
+# fetch_playlist(plid : String)
+
+#src/invidious/playlists.cr:436:5
+#[C] Metrics/CyclomaticComplexity: Cyclomatic complexity too high [11/10]
+# extract_playlist_videos(initial_data : Hash(String, JSON::Any))

.gitattributes

@@ -0,0 +1,3 @@
+# https://github.community/t/how-to-change-the-category/2261/3
+videojs-*.js linguist-detectable=false
+video.min.js linguist-detectable=false

.github/CODEOWNERS

@@ -0,0 +1,18 @@
+# Default and lowest precedence. If none of the below matches, @iv-org/developers would be requested for review.
+* @iv-org/developers
+
+docker-compose.yml @unixfox
+docker/ @unixfox
+kubernetes/ @unixfox
+
+README.md @thefrenchghosty
+config/config.example.yml @thefrenchghosty @SamantazFox @unixfox
+
+scripts/ @syeopite
+shards.lock @syeopite
+shards.yml @syeopite
+
+locales/ @SamantazFox
+src/invidious/helpers/i18n.cr @SamantazFox
+
+src/invidious/helpers/youtube_api.cr @SamantazFox

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://invidious.io/donate/

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,42 @@
+---
+name: Bug report
+about: Create a bug report to help us improve Invidious
+title: '[Bug] '
+labels: bug
+assignees: ''
+
+---
+
+<!--
+  BEFORE TRYING TO REPORT A BUG:
+ 
+  * Read the FAQ!
+  * Use the search function to check if there is already an issue open for your problem!
+
+  If you want to suggest a new feature please use "Feature request" instead
+  If you want to suggest an enhancement to an existing feature please use "Enhancement" instead
+-->
+
+
+**Describe the bug**
+<!-- A clear and concise description of what the bug is. -->
+
+**Steps to Reproduce**
+<!-- Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+-->
+
+**Logs**
+<!-- If applicable, copy the log that appear in the browser page where the error is reported. -->
+
+**Screenshots**
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Additional context**
+<!-- Add any other context about the problem here.
+ - Browser (if applicable):
+ - OS (if applicable):
+-->

.github/ISSUE_TEMPLATE/enhancement.md

@@ -0,0 +1,24 @@
+---
+name: Enhancement
+about: Suggest an enhancement for an existing feature
+title: '[Enhancement] '
+labels: enhancement
+assignees: ''
+
+---
+
+<!-- Please use the search function to check if the desired function has already been requested by someone else -->
+ <!-- If you want to suggest a new feature please use "Feature request" instead --> 
+<!-- If you want to report a bug, please use "Bug report" instead -->
+
+**Is your enhancement request related to a problem? Please describe.**
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+**Describe the solution you'd like**
+<!-- A clear and concise description of what you want to happen. -->
+
+**Describe alternatives you've considered**
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context**
+<!-- Add any other context or screenshots about the enhancement here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: '[Feature request] '
+labels: feature-request
+assignees: ''
+
+---
+
+<!-- Please use the search function to check if the desired function has already been requested by someone else -->
+<!-- If you want to suggest an enhancement to an existing feature please use "Enhancement" instead -->
+<!-- If you want to report a bug, please use "Bug report" instead -->
+
+**Is your feature request related to a problem? Please describe.**
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+**Describe the solution you'd like**
+<!-- A clear and concise description of what you want to happen. -->
+
+**Describe alternatives you've considered**
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context**
+<!-- Add any other context or screenshots about the feature request here. -->

.github/workflows/ci.yml

@@ -0,0 +1,127 @@
+name: Invidious CI
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # Every day at 00:00
+  push:
+    branches:
+      - "master"
+      - "api-only"
+  pull_request:
+    branches: "*"
+    paths-ignore:
+      - "*.md"
+      - LICENCE
+      - TRANSLATION
+      - invidious.service
+      - .git*
+      - .editorconfig
+
+      - screenshots/*
+      - assets/**
+      - locales/*
+      - config/**
+      - .github/ISSUE_TEMPLATE/*
+      - kubernetes/**
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    name: "build - crystal: ${{ matrix.crystal }}, stable: ${{ matrix.stable }}"
+
+    continue-on-error: ${{ !matrix.stable }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        stable: [true]
+        crystal:
+          - 1.2.2
+          - 1.3.2
+          - 1.4.0
+          - 1.5.0
+        include:
+          - crystal: nightly
+            stable: false
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+
+      - name: Install Crystal
+        uses: crystal-lang/install-crystal@v1.6.0
+        with:
+          crystal: ${{ matrix.crystal }}
+
+      - name: Cache Shards
+        uses: actions/cache@v3
+        with:
+          path: ./lib
+          key: shards-${{ hashFiles('shard.lock') }}
+
+      - name: Install Shards
+        run: |
+          if ! shards check; then
+            shards install
+          fi
+
+      - name: Run tests
+        run: crystal spec
+
+      - name: Run lint
+        run: |
+          if ! crystal tool format --check; then
+            crystal tool format
+            git diff
+            exit 1
+          fi
+
+      - name: Build
+        run: crystal build --warnings all --error-on-warnings --error-trace src/invidious.cr
+
+  build-docker:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Build Docker
+        run: docker-compose build --build-arg release=0
+
+      - name: Run Docker
+        run: docker-compose up -d
+
+      - name: Test Docker
+        run: while curl -Isf http://localhost:3000; do sleep 1; done
+
+  build-docker-arm64:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+        with:
+          platforms: arm64
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build Docker ARM64 image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          file: docker/Dockerfile.arm64
+          platforms: linux/arm64/v8
+          build-args: release=0
+
+      - name: Test Docker
+        run: while curl -Isf http://localhost:3000; do sleep 1; done
+
+

.github/workflows/container-release.yml

@@ -0,0 +1,77 @@
+name: Build and release container
+
+on:
+  push:
+    branches:
+      - "master"
+    paths-ignore:
+      - "*.md"
+      - LICENCE
+      - TRANSLATION
+      - invidious.service
+      - .git*
+      - .editorconfig
+
+      - screenshots/*
+      - .github/ISSUE_TEMPLATE/*
+      - kubernetes/**
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Crystal
+        uses: crystal-lang/install-crystal@v1.6.0
+        with:
+          crystal: 1.5.0
+
+      - name: Run lint
+        run: |
+          if ! crystal tool format --check; then
+            crystal tool format
+            git diff
+            exit 1
+          fi
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+        with:
+          platforms: arm64
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to registry
+        uses: docker/login-action@v2
+        with:
+          registry: quay.io
+          username: ${{ secrets.QUAY_USERNAME }}
+          password: ${{ secrets.QUAY_PASSWORD }}
+
+      - name: Build and push Docker AMD64 image for Push Event
+        if: github.ref == 'refs/heads/master'
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          file: docker/Dockerfile
+          platforms: linux/amd64
+          labels: quay.expires-after=12w
+          push: true
+          tags: quay.io/invidious/invidious:${{ github.sha }},quay.io/invidious/invidious:latest
+          build-args: release=1
+
+      - name: Build and push Docker ARM64 image for Push Event
+        if: github.ref == 'refs/heads/master'
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          file: docker/Dockerfile.arm64
+          platforms: linux/arm64/v8
+          labels: quay.expires-after=12w
+          push: true
+          tags: quay.io/invidious/invidious:${{ github.sha }}-arm64,quay.io/invidious/invidious:latest-arm64
+          build-args: release=1

.github/workflows/stale.yml

@@ -0,0 +1,24 @@
+# Documentation: https://github.com/marketplace/actions/close-stale-issues
+
+name: "Stale issue handler"
+on:
+  workflow_dispatch:
+  schedule:
+  - cron: "0 */12 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/stale@v5
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        days-before-stale: 365
+        days-before-pr-stale: 45 # PRs should be active. Anything that hasn't had activity in more than 45 days should be considered abandoned.
+        days-before-close: 30
+        exempt-pr-labels: blocked
+        stale-issue-message: 'This issue has been automatically marked as stale and will be closed in 30 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, you just have to post a comment and it will be unmarked.'
+        stale-pr-message: 'This pull request has been automatically marked as stale and will be closed in 30 days because it has not had recent activity and is much likely abandoned or outdated. If you think this pull request is still relevant and applicable, you just have to post a comment and it will be unmarked.'
+        stale-issue-label: "stale"
+        stale-pr-label: "stale"
+        ascending: true

.gitignore

@@ -6,4 +6,4 @@
 /.vscode/
 /invidious
 /sentry
-shard.lock
+/config/config.yml

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "mocks"]
+	path = mocks
+	url = ../mocks

CHANGELOG.md

@@ -1,3 +1,140 @@
+# Note: This is no longer updated and links to omarroths repo, which doesn't exist anymore.
+
+# 0.20.0 (2019-011-06)
+
+# Version 0.20.0: Custom Playlists
+
+It's been quite a while since the last release! There've been [198 commits](https://github.com/omarroth/invidious/compare/0.19.0..0.20.0) from 27 contributors.
+
+A couple smaller features have since been added. Channel pages and playlists in particular have received a bit of a face-lift, with both now displaying their descriptions as expected, and playlists providing video count and published information. Channels will also now provide video descriptions in their RSS feed.
+
+Turkish (tr), Chinese (zh-TW, in addition to zh-CN), and Japanese (jp) are all now supported languages. Thank you as always to the hard work done by translators that makes this possible.
+
+The feed menu and default home page are both now configurable for registered and unregistered users, and is quite a bit of an improvement for users looking to reduce distractions for their daily use.
+
+## For Administrators
+
+`feed_menu` and `default_home` are now configurable by the user, and have therefore been moved into `default_user_preferences`:
+
+```yaml
+feed_menu: ["Popular", "Top"]
+default_home: Top
+
+# becomes:
+
+default_user_preferences:
+  feed_menu: ["Popular", "Top"]
+  default_home: Top
+```
+
+Several new options have also been added, including the ability to set a support email for the instance using `admin_email: EMAIL`, and forcing the use of a specific connection in the case of rate-limiting using `force_resolve` (see below).
+
+## For Developers
+
+Authenticated endpoints are now [properly documented](https://github.com/omarroth/invidious/wiki/Authenticated-Endpoints), as well how to generate and use API tokens. My hope is that this makes some of the more [interesting](https://github.com/omarroth/invidious/wiki/Authenticated-Endpoints#get-apiv1authnotifications) endpoints more accessible for developers to use in their own applications.
+
+API endpoints for interacting with custom playlists have also been added with documentation available [here](https://github.com/omarroth/invidious/wiki/Authenticated-Endpoints#get-apiv1authplaylists).
+
+## Custom playlists
+
+This is probably the feature that has been the longest in the pipe and that I'm quite pleased is now implemented. It is now possible to create custom playlists, which can be played and edited through Invidious. API endpoints have also been added (documentation [here](https://github.com/omarroth/invidious/wiki/Authenticated-Endpoints#get-apiv1authplaylists)).
+
+Overall I'm quite pleased with how smoothly it has been rolled out and with the experience so far, and I'm exctited for how it can be extended and improved in future.
+
+## [instances.invidio.us](https://instances.invidio.us)
+
+It is now possible to view a list of public instances (as provided in the [wiki](https://github.com/omarroth/invidious/wiki/Invidious-Instances)) through an API or a pretty new interface [here](https://instances.invidio.us). It combines uptime information, statistics from each instance and basic information already provided in the wiki. I expect it should be much more user-friendly than compiling the information yourself, and is already used by [Invidition](https://codeberg.org/Booteille/Invidition) to provide a list of instances for users to choose from.
+
+The site itself is licensed under the AGPLv3 and the source is available [here](https://github.com/omarroth/instances.invidio.us).
+
+## Video unavailable [#811](https://github.com/omarroth/invidious/issues/811)
+
+Many users have likely noticed this error message if using Invidious directly or through another service, such as FreeTube. This issue is caused by rate-limiting by Google, and is not a new issuee for projects like Invidious (notably [youtube-dl](https://github.com/ytdl-org/youtube-dl#http-error-429-too-many-requests-or-402-payment-required)) and appears to be affecting smaller, private instances as well.
+
+There is not a permanent fix for administrators currently, however there is some information available [here](https://github.com/omarroth/invidious/issues/811#issuecomment-540017772) that may provide a temporary solution. Unfortanately, in most cases the best option is to wait for the instance to be unbanned or to move the instance to a different IP. A more informative error message is also now provided, which should help an administrator more quickly diagnose the problem.
+
+For those interested, I would recommend following [#811](https://github.com/omarroth/invidious/issues/811) for any future progress on the issue.
+
+## BAT verified publisher
+
+I'm quite late to this announcement, however I'm pleased to mention that Invidious is now a BAT verified publisher! I would recommend looking [here](https://basicattentiontoken.org/about/) or [here](https://www.reddit.com/r/BATProject/comments/7cr7yc/new_to_bat_read_this_introduction_to_basic/) for learning more about what it is and how it works. Overall I think it makes an interesting substitute for services like Liberapay, and a (hopefully) much less-intrusive alternative to direct advertising.
+
+BAT is combined under other cryptocurrencies below. Currently there's a fairly significant delay in payout, which is the reason for the large fluctuation in crypto donations between September and October (and also the reason for the late announcement).
+
+## Release schedule
+
+Currently I'm quite pleased with the current state of the project. There's plenty of things I'd still like to add, however at this point I expect the rate of most new additions will slow down a bit, with more focus on stabililty and any long-standing bugs.
+
+Because of this, I'm planning on releasing a new version quarterly, with any necessary hotfixes being pushed as a new patch release as necessary. As always it will be possible to run Invidious directly from [master](https://github.com/omarroth/invidious/wiki/Updating) if you'd still like to have the lastest version.
+
+I'll plan on providing finances each release, with a similar monthly breakdown as below.
+
+## Finances for September 2019
+
+### Donations
+
+- [Patreon](https://www.patreon.com/omarroth) : \$64.37
+- [Liberapay](https://liberapay.com/omarroth) : \$76.04
+- Crypto : ~\$99.89 (converted from BAT, BCH, BTC)
+- Total : \$240.30
+
+### Expenses
+
+- invidious-lb1 (nyc1) : \$10.00 (load balancer)
+- invidious-update1 (s-1vcpu-1gb) : \$5.00 (updates feeds)
+- invidious-node1 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node2 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node3 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node4 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node5 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node6 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node7 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node8 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node9 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node10 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node11 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node12 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node13 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node14 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node15 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node16 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-db1 (s-4vcpu-8gb) : \$40.00 (database)
+- Total : \$135.00
+
+## Finances for October 2019
+
+- [Liberapay](https://liberapay.com/omarroth) : \$134.40
+- Crypto : ~\$8.29 (converted from BAT, BCH, BTC)
+- Total : \$142.69
+
+### Expenses
+
+- invidious-lb1 (nyc1) : \$5.00 (load balancer)
+- invidious-lb2 (nyc1) : \$5.00 (load balancer)
+- invidious-lb3 (nyc1) : \$5.00 (load balancer)
+- invidious-lb4 (nyc1) : \$5.00 (load balancer)
+- invidious-update1 (s-1vcpu-1gb) : \$5.00 (updates feeds)
+- invidious-node1 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node2 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node3 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node4 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node5 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node6 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node7 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node8 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node9 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node10 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node11 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node12 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node13 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node14 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node15 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node16 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node17 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-node18 (s-1vcpu-1gb) : \$5.00 (web server)
+- invidious-db1 (s-4vcpu-8gb) : \$40.00 (database)
+- Total : \$155.00
+
 # 0.19.0 (2019-07-13)
 
 # Version 0.19.0: Communities
@@ -265,7 +402,7 @@ An `/api/v1/stats` endpoint has been added with [#356](https://github.com/omarro
 
 ## For Developers
 
-`/api/v1/channels/:ucid` now provides an `autoGenerated` tag, which returns true for [topic channels](https://www.youtube.com/channel/UCE80FOXpJydkkMo-BYoJdEg), and larger [genre channels](https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ) generated by YouTube. These channels don't have any videos of their own, so `latestVideos` will be empty. It is recommended instead to display a list of playlists generated by YouTube.
+`/api/v1/channels/:ucid` now provides an `autoGenerated` tag, which returns true for topic channels, and larger genre channels generated by YouTube. These channels don't have any videos of their own, so `latestVideos` will be empty. It is recommended instead to display a list of playlists generated by YouTube.
 
 You can now pull a list of playlists from a channel with `/api/v1/channels/playlists/:ucid`. Supported options are documented in the [wiki](https://github.com/omarroth/invidious/wiki/API#get-apiv1channelsplaylistsucid-apiv1channelsucidplaylists). Pagination is handled with a `continuation` token, which is generated on each call. Of note is that auto-generated channels currently have one page of results, and subsequent calls will be empty.
 

Makefile

@@ -0,0 +1,119 @@
+# -----------------------
+#  Compilation options
+# -----------------------
+
+RELEASE  := 1
+STATIC   := 0
+
+DISABLE_QUIC := 0
+NO_DBG_SYMBOLS := 0
+
+
+FLAGS ?=
+
+
+ifeq ($(RELEASE), 1)
+  FLAGS += --release
+endif
+
+ifeq ($(STATIC), 1)
+  FLAGS += --static
+endif
+
+
+ifeq ($(NO_DBG_SYMBOLS), 1)
+  FLAGS += --no-debug
+else
+  FLAGS += --debug
+endif
+
+ifeq ($(DISABLE_QUIC), 1)
+  FLAGS += -Ddisable_quic
+endif
+
+
+# -----------------------
+#  Main
+# -----------------------
+
+all: invidious
+
+get-libs:
+	shards install --production
+
+# TODO: add support for ARM64 via cross-compilation
+invidious: get-libs
+	crystal build src/invidious.cr $(FLAGS) --progress --stats --error-trace
+
+
+run: invidious
+	./invidious
+
+
+# -----------------------
+#  Development
+# -----------------------
+
+
+format:
+	crystal tool format
+
+test:
+	crystal spec
+
+verify:
+	crystal build src/invidious.cr -Dskip_videojs_download \
+	  --no-codegen --progress --stats --error-trace
+
+
+# -----------------------
+#  (Un)Install
+# -----------------------
+
+# TODO
+
+
+# -----------------------
+#  Cleaning
+# -----------------------
+
+clean:
+	rm invidious
+
+distclean: clean
+	rm -rf libs
+
+
+# -----------------------
+#  Help page
+# -----------------------
+
+help:
+	@echo "Targets available in this Makefile:"
+	@echo ""
+	@echo "  get-libs         Fetch Crystal libraries"
+	@echo "  invidious        Build Invidious"
+	@echo "  run              Launch Invidious"
+	@echo ""
+	@echo "  format           Run the Crystal formatter"
+	@echo "  test             Run tests"
+	@echo "  verify           Just make sure that the code compiles, but without"
+	@echo "                   generating any binaries. Useful to search for errors"
+	@echo ""
+	@echo "  clean            Remove build artifacts"
+	@echo "  distclean        Remove build artifacts and libraries"
+	@echo ""
+	@echo ""
+	@echo "Build options available for this Makefile:"
+	@echo ""
+	@echo "  RELEASE          Make a release build      (Default: 1)"
+	@echo "  STATIC           Link libraries statically (Default: 0)"
+	@echo ""
+	@echo "  DISABLE_QUIC     Disable support for QUIC  (Default: 0)"
+	@echo "  NO_DBG_SYMBOLS   Strip debug symbols       (Default: 0)"
+
+
+
+# No targets generates an output named after themselves
+.PHONY: all get-libs build amd64 run
+.PHONY: format test verify clean distclean help

README.md

@@ -1,234 +1,179 @@
-# Invidious
+<div align="center">
+  <img src="assets/invidious-colored-vector.svg" width="192" height="192" alt="Invidious logo">
+  <h1>Invidious</h1>
 
-## Invidious is an alternative front-end to YouTube
+  <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">
+    <img alt="License: AGPLv3" src="https://shields.io/badge/License-AGPL%20v3-blue.svg">
+  </a>
+  <a href="https://github.com/iv-org/invidious/actions">
+    <img alt="Build Status" src="https://github.com/iv-org/invidious/workflows/Invidious%20CI/badge.svg">
+  </a>
+  <a href="https://github.com/iv-org/invidious/commits/master">
+    <img alt="GitHub commits" src="https://img.shields.io/github/commit-activity/y/iv-org/invidious?color=red&label=commits">
+  </a>
+  <a href="https://github.com/iv-org/invidious/issues">
+    <img alt="GitHub issues" src="https://img.shields.io/github/issues/iv-org/invidious?color=important">
+  </a>
+  <a href="https://github.com/iv-org/invidious/pulls">
+    <img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/iv-org/invidious?color=blueviolet">
+  </a>
+  <a href="https://hosted.weblate.org/engage/invidious/">
+    <img alt="Translation Status" src="https://hosted.weblate.org/widgets/invidious/-/translations/svg-badge.svg">
+  </a>
 
-- Audio-only mode (and no need to keep window open on mobile)
-- [Free software](https://github.com/omarroth/invidious) (AGPLv3 licensed)
-- No ads
-- No need to create a Google account to save subscriptions
-- Lightweight (homepage is ~4 KB compressed)
-- Tools for managing subscriptions:
-  - Only show unseen videos
-  - Only show latest (or latest unseen) video from each channel
-  - Delivers notifications from all subscribed channels
-  - Automatically redirect homepage to feed
-  - Import subscriptions from YouTube
-- Dark mode
-- Embed support
-- Set default player options (speed, quality, autoplay, loop)
-- Does not require JS to play videos
-- Support for Reddit comments in place of YT comments
-- Import/Export subscriptions, watch history, preferences
-- Does not use any of the official YouTube APIs
-- Developer [API](https://github.com/omarroth/invidious/wiki/API)
+  <a href="https://github.com/humanetech-community/awesome-humane-tech">
+    <img alt="Awesome Humane Tech" src="https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true">
+  </a>
 
-Liberapay: https://liberapay.com/omarroth  
-Patreon: https://patreon.com/omarroth  
-BTC: 356DpZyMXu6rYd55Yqzjs29n79kGKWcYrY  
-BCH: qq4ptclkzej5eza6a50et5ggc58hxsq5aylqut2npk
+  <h3>An open source alternative front-end to YouTube</h3>
 
-## Invidious Instances
+  <a href="https://invidious.io/">Website</a>
+  &nbsp;•&nbsp;
+  <a href="https://instances.invidious.io/">Instances list</a>
+  &nbsp;•&nbsp;
+  <a href="https://docs.invidious.io/faq/">FAQ</a>
+  &nbsp;•&nbsp;
+  <a href="https://docs.invidious.io/">Documentation</a>
+  &nbsp;•&nbsp;
+  <a href="#contribute">Contribute</a>
+  &nbsp;•&nbsp;
+  <a href="https://invidious.io/donate/">Donate</a>
 
-See [Invidious Instances](https://github.com/omarroth/invidious/wiki/Invidious-Instances) for a full list of publicly available instances.
+  <h5>Chat with us:</h5>
+  <a href="https://matrix.to/#/#invidious:matrix.org">
+    <img alt="Matrix" src="https://img.shields.io/matrix/invidious:matrix.org?label=Matrix&color=darkgreen">
+  </a>
+  <a href="https://web.libera.chat/?channel=#invidious">
+    <img alt="Libera.chat (IRC)" src="https://img.shields.io/badge/IRC%20%28Libera.chat%29-%23invidious-darkgreen">
+  </a>
+  <br>
+  <a rel="me" href="https://social.tchncs.de/@invidious">
+  <img alt="Fediverse: @invidious@social.tchncs.de" src="https://img.shields.io/badge/Fediverse-%40invidious%40social.tchncs.de-darkgreen">
+  </a>
+  <br>
+  <a href="https://invidious.io/contact/">
+  <img alt="E-mail" src="https://img.shields.io/badge/E%2d%2dmail-darkgreen">
+  </a>
+</div>
 
-### Official Instances
-
-- [invidio.us](https://invidio.us) 🇺🇸  
-  Issuer: Let's Encrypt, [SSLLabs Verification](https://www.ssllabs.com/ssltest/analyze.html?d=invidio.us)
-- [kgg2m7yk5aybusll.onion](http://kgg2m7yk5aybusll.onion)
-- [axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion](http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion)
 
 ## Screenshots
 
-| Player                                                                                                                  | Preferences                                                                                                             | Subscriptions                                                                                                               |
-| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| [<img src="screenshots/01_player.png?raw=true" height="140" width="280">](screenshots/01_player.png?raw=true)           | [<img src="screenshots/02_preferences.png?raw=true" height="140" width="280">](screenshots/02_preferences.png?raw=true) | [<img src="screenshots/03_subscriptions.png?raw=true" height="140" width="280">](screenshots/03_subscriptions.png?raw=true) |
-| [<img src="screenshots/04_description.png?raw=true" height="140" width="280">](screenshots/04_description.png?raw=true) | [<img src="screenshots/05_preferences.png?raw=true" height="140" width="280">](screenshots/05_preferences.png?raw=true) | [<img src="screenshots/06_subscriptions.png?raw=true" height="140" width="280">](screenshots/06_subscriptions.png?raw=true) |
+| Player                              | Preferences                         | Subscriptions                         |
+|-------------------------------------|-------------------------------------|---------------------------------------|
+| ![](screenshots/01_player.png)      | ![](screenshots/02_preferences.png) | ![](screenshots/03_subscriptions.png) |
+| ![](screenshots/04_description.png) | ![](screenshots/05_preferences.png) | ![](screenshots/06_subscriptions.png) |
 
-## Installation
 
-See [Invidious-Updater](https://github.com/tmiland/Invidious-Updater) for a self-contained script that can automatically install and update Invidious.
+## Features
 
-### Docker:
+**User features**
+- Lightweight
+- No ads
+- No tracking
+- No JavaScript required
+- Light/Dark themes
+- Customizable homepage
+- Subscriptions independent from Google
+- Notifications for all subscribed channels
+- Audio-only mode (with background play on mobile)
+- Support for Reddit comments
+- [Available in many languages](locales/), thanks to [our translators](#contribute)
 
-#### Build and start cluster:
+**Data import/export**
+- Import subscriptions from YouTube, NewPipe and Freetube
+- Import watch history from NewPipe
+- Export subscriptions to NewPipe and Freetube
+- Import/Export Invidious user data
 
-```bash
-$ docker-compose up
-```
+**Technical features**
+- Embedded video support
+- [Developer API](https://docs.invidious.io/api/)
+- Does not use official YouTube APIs
+- No Contributor License Agreement (CLA)
 
-And visit `localhost:3000` in your browser.
 
-#### Rebuild cluster:
+## Quick start
 
-```bash
-$ docker-compose build
-```
+**Using invidious:**
 
-#### Delete data and rebuild:
+- [Select a public instance from the list](https://instances.invidious.io) and start watching videos right now!
 
-```bash
-$ docker volume rm invidious_postgresdata
-$ docker-compose build
-```
+**Hosting invidious:**
 
-### Linux:
+- [Follow the installation instructions](https://docs.invidious.io/installation/)
 
-#### Install dependencies
-
-```bash
-# Arch Linux
-$ sudo pacman -S shards crystal imagemagick librsvg postgresql
-
-# Ubuntu or Debian
-# First you have to add the repository to your APT configuration. For easy setup just run in your command line:
-$ curl -sSL https://dist.crystal-lang.org/apt/setup.sh | sudo bash
-# That will add the signing key and the repository configuration. If you prefer to do it manually, execute the following commands:
-$ curl -sL "https://keybase.io/crystal/pgp_keys.asc" | sudo apt-key add -
-$ echo "deb https://dist.crystal-lang.org/apt crystal main" | sudo tee /etc/apt/sources.list.d/crystal.list
-$ sudo apt-get update
-$ sudo apt install crystal libssl-dev libxml2-dev libyaml-dev libgmp-dev libreadline-dev librsvg2-dev postgresql imagemagick libsqlite3-dev
-```
-
-#### Add invidious user and clone repository
-
-```bash
-$ useradd -m invidious
-$ sudo -i -u invidious
-$ git clone https://github.com/omarroth/invidious
-$ exit
-```
-
-#### Setup PostgresSQL
-
-```bash
-$ sudo systemctl enable postgresql
-$ sudo systemctl start postgresql
-$ sudo -i -u postgres
-$ psql -c "CREATE USER kemal WITH PASSWORD 'kemal';" # Change 'kemal' here to a stronger password, and update `password` in config/config.yml
-$ createdb -O kemal invidious
-$ psql invidious kemal < /home/invidious/invidious/config/sql/channels.sql
-$ psql invidious kemal < /home/invidious/invidious/config/sql/videos.sql
-$ psql invidious kemal < /home/invidious/invidious/config/sql/channel_videos.sql
-$ psql invidious kemal < /home/invidious/invidious/config/sql/users.sql
-$ psql invidious kemal < /home/invidious/invidious/config/sql/session_ids.sql
-$ psql invidious kemal < /home/invidious/invidious/config/sql/nonces.sql
-$ psql invidious kemal < /home/invidious/invidious/config/sql/annotations.sql
-$ exit
-```
-
-#### Setup Invidious
-
-```bash
-$ sudo -i -u invidious
-$ cd invidious
-$ shards update && shards install
-$ crystal build src/invidious.cr --release
-# test compiled binary
-$ ./invidious # stop with ctrl c
-$ exit
-```
-
-#### systemd service
-
-```bash
-$ sudo cp /home/invidious/invidious/invidious.service /etc/systemd/system/invidious.service
-$ sudo systemctl enable invidious.service
-$ sudo systemctl start invidious.service
-```
-
-### OSX:
-
-```bash
-# Install dependencies
-$ brew update
-$ brew install shards crystal-lang postgres imagemagick librsvg
-
-# Clone repository and setup postgres database
-$ git clone https://github.com/omarroth/invidious
-$ cd invidious
-$ brew services start postgresql
-$ psql -c "CREATE ROLE kemal WITH PASSWORD 'kemal';" # Change 'kemal' here to a stronger password, and update `password` in config/config.yml
-$ createdb -O kemal invidious
-$ psql invidious kemal < config/sql/channels.sql
-$ psql invidious kemal < config/sql/videos.sql
-$ psql invidious kemal < config/sql/channel_videos.sql
-$ psql invidious kemal < config/sql/users.sql
-$ psql invidious kemal < config/sql/session_ids.sql
-$ psql invidious kemal < config/sql/nonces.sql
-$ psql invidious kemal < config/sql/annotations.sql
-
-# Setup Invidious
-$ shards update && shards install
-$ crystal build src/invidious.cr --release
-```
-
-## Update Invidious
-
-You can see how to update Invidious [here](https://github.com/omarroth/invidious/wiki/Updating).
-
-## Usage:
-
-```bash
-$ ./invidious -h
-Usage: invidious [arguments]
-    -b HOST, --bind HOST             Host to bind (defaults to 0.0.0.0)
-    -p PORT, --port PORT             Port to listen for connections (defaults to 3000)
-    -s, --ssl                        Enables SSL
-    --ssl-key-file FILE              SSL key file
-    --ssl-cert-file FILE             SSL certificate file
-    -h, --help                       Shows this help
-    -c THREADS, --channel-threads=THREADS
-                                     Number of threads for refreshing channels (default: 1)
-    -f THREADS, --feed-threads=THREADS
-                                     Number of threads for refreshing feeds (default: 1)
-    -o OUTPUT, --output=OUTPUT       Redirect output (default: STDOUT)
-    -v, --version                    Print version
-```
-
-Or for development:
-
-```bash
-$ curl -fsSLo- https://raw.githubusercontent.com/samueleaton/sentry/master/install.cr | crystal eval
-$ ./sentry
-🤖  Your SentryBot is vigilant. beep-boop...
-```
 
 ## Documentation
 
-[Documentation](https://github.com/omarroth/invidious/wiki) can be found in the wiki.
+The full documentation can be accessed online at https://docs.invidious.io/
 
-## Extensions
+The documentation's source code is available in this repository:
+https://github.com/iv-org/documentation
 
-[Extensions](https://github.com/omarroth/invidious/wiki/Extensions) can be found in the wiki, as well as documentation for integrating it into other projects.
+### Extensions
 
-## Made with Invidious
+We highly recommend the use of [Privacy Redirect](https://github.com/SimonBrazell/privacy-redirect#get),
+a browser extension that automatically redirects Youtube URLs to any Invidious instance and replaces
+embedded youtube videos on other websites with invidious.
 
-- [FreeTube](https://github.com/FreeTubeApp/FreeTube): An Open Source YouTube app for privacy.
-- [CloudTube](https://cadence.moe/cloudtube/subscriptions): A JS-rich alternate YouTube player
-- [PeerTubeify](https://gitlab.com/Ealhad/peertubeify): On YouTube, displays a link to the same video on PeerTube, if it exists.
-- [MusicPiped](https://github.com/deep-gaurav/MusicPiped): A materialistic music player that streams music from YouTube.
+The documentation contains a list of browser extensions that we recommended to use along with Invidious.
 
-## Contributing
+You can read more here: https://docs.invidious.io/applications/
 
-1.  Fork it ( https://github.com/omarroth/invidious/fork )
-2.  Create your feature branch (git checkout -b my-new-feature)
-3.  Commit your changes (git commit -am 'Add some feature')
-4.  Push to the branch (git push origin my-new-feature)
-5.  Create a new Pull Request
 
-## Contact
+## Contribute
 
-Feel free to send an email to omarroth@protonmail.com or join our [Matrix Server](https://riot.im/app/#/room/#invidious:matrix.org), or #invidious on Freenode.
+### Code
 
-You can also view release notes on the [releases](https://github.com/omarroth/invidious/releases) page or in the CHANGELOG.md included in the repository.
+1.  Fork it ( https://github.com/iv-org/invidious/fork ).
+1.  Create your feature branch (`git checkout -b my-new-feature`).
+1.  Stage your files (`git add .`).
+1.  Commit your changes (`git commit -am 'Add some feature'`).
+1.  Push to the branch (`git push origin my-new-feature`).
+1.  Create a new pull request ( https://github.com/iv-org/invidious/compare ).
 
-## License
+### Translations
 
-[![GNU AGPLv3 Image](https://www.gnu.org/graphics/agplv3-155x51.png)](http://www.gnu.org/licenses/agpl-3.0.en.html)
+We use [Weblate](https://weblate.org) to manage Invidious translations.
 
-Invidious is Free Software: You can use, study share and improve it at your
-will. Specifically you can redistribute and/or modify it under the terms of the
-[GNU Affero General Public License](https://www.gnu.org/licenses/agpl.html) as
-published by the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
+You can suggest new translations and/or correction here: https://hosted.weblate.org/engage/invidious/.
+
+Creating an account is not required, but recommended, especially if you want to contribute regularly.
+Weblate also allows you to log-in with major SSO providers like Github, Gitlab, BitBucket, Google, ...
+
+
+## Projects using Invidious
+
+- [FreeTube](https://github.com/FreeTubeApp/FreeTube): A libre software YouTube app for privacy.
+- [CloudTube](https://sr.ht/~cadence/tube/): A JavaScript-rich alternate YouTube player.
+- [PeerTubeify](https://gitlab.com/Cha_deL/peertubeify): On YouTube, displays a link to the same video on PeerTube, if it exists.
+- [MusicPiped](https://github.com/deep-gaurav/MusicPiped): A material design music player that streams music from YouTube.
+- [HoloPlay](https://github.com/stephane-r/HoloPlay): Funny Android application connecting on Invidious API's with search, playlists and favorites.
+- [WatchTube](https://github.com/WatchTubeTeam/WatchTube): Powerful YouTube client for Apple Watch.
+- [Yattee](https://github.com/yattee/yattee): Alternative YouTube frontend for iPhone, iPad, Mac and Apple TV.
+- [TubiTui](https://codeberg.org/777/TubiTui): A lightweight, libre, TUI-based YouTube client.
+- [Ytfzf](https://github.com/pystardust/ytfzf): A posix script to find and watch youtube videos from the terminal. (Without API)
+
+
+## Liability
+
+We take no responsibility for the use of our tool, or external instances
+provided by third parties. We strongly recommend you abide by the valid
+official regulations in your country. Furthermore, we refuse liability
+for any inappropriate use of Invidious, such as illegal downloading.
+This tool is provided to you in the spirit of free, open software.
+
+You may view the LICENSE in which this software is provided to you [here](./LICENSE).
+
+>   16. Limitation of Liability.
+>
+> IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.

TRANSLATION

@@ -0,0 +1 @@
+https://hosted.weblate.org/projects/invidious/

assets/css/darktheme.css

@@ -1,38 +0,0 @@
-a:hover,
-a:active {
-  color: rgb(0, 182, 240);
-}
-
-a {
-  color: #a0a0a0;
-  text-decoration: none;
-}
-
-body {
-  background-color: rgba(35, 35, 35, 1);
-  color: #f0f0f0;
-}
-
-.pure-form legend {
-  color: #f0f0f0;
-}
-
-.pure-menu-heading {
-  color: #f0f0f0;
-}
-
-.pure-form > fieldset > input,
-.pure-control-group > input,
-.pure-form > fieldset > select,
-.pure-control-group > select {
-  color: rgba(35, 35, 35, 1);
-}
-
-.pure-form input[type="file"] {
-  color: #f0f0f0;
-}
-
-.navbar > .searchbar input {
-  background-color: inherit;
-  color: inherit;
-}

assets/css/default.css

@@ -1,11 +1,30 @@
+html,
+body {
+  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica,
+    Arial, sans-serif;
+}
+
+#contents {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .deleted {
   background-color: rgb(255, 0, 0, 0.5);
 }
 
+.underlined {
+  border-bottom: 1px solid;
+  margin-bottom: 20px;
+}
+
 .channel-profile > * {
   font-size: 1.17em;
   font-weight: bold;
   vertical-align: middle;
+  border-radius: 50%;
 }
 
 .channel-profile > img {
@@ -13,7 +32,7 @@
   height: auto;
 }
 
-.channel-owner {
+body a.channel-owner {
   background-color: #008bec;
   color: #fff;
   border-radius: 9px;
@@ -53,6 +72,22 @@
   color: rgb(255, 0, 0);
 }
 
+.feed-menu {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.feed-menu-item {
+  text-align: center;
+}
+
+@media screen and (max-width: 640px) {
+  .feed-menu-item {
+    flex: 0 0 40%;
+  }
+}
+
 .h-box {
   padding-left: 1em;
   padding-right: 1em;
@@ -78,15 +113,19 @@ div {
   padding-right: 10px;
 }
 
+body a.pure-button {
+  color: rgba(0,0,0,.8);
+}
+
 button.pure-button-primary,
-a.pure-button-primary,
+body a.pure-button-primary,
 .channel-owner:hover {
   background-color: #a0a0a0;
   color: rgba(35, 35, 35, 1);
 }
 
 button.pure-button-primary:hover,
-a.pure-button-primary:hover {
+body a.pure-button-primary:hover {
   background-color: rgba(0, 182, 240, 1);
   color: #fff;
 }
@@ -103,6 +142,7 @@ img.thumbnail {
   height: 100%;
   left: 0;
   top: 0;
+  object-fit: cover;
 }
 
 .length {
@@ -113,7 +153,6 @@ img.thumbnail {
   border-radius: 2px;
   padding: 2px;
   font-size: 16px;
-  font-family: sans-serif;
   right: 0.25em;
   bottom: -0.75em;
 }
@@ -126,7 +165,6 @@ img.thumbnail {
   border-radius: 2px;
   padding: 4px 8px 4px 8px;
   font-size: 16px;
-  font-family: sans-serif;
   left: 0.2em;
   top: -0.7em;
 }
@@ -146,7 +184,7 @@ img.thumbnail {
   flex: 1;
 }
 
-.navbar > .searchbar {
+.searchbar {
   flex-grow: 2; /* take double the space of the other items */
 }
 
@@ -156,21 +194,29 @@ img.thumbnail {
 
 .navbar .index-link {
   font-weight: bold;
+  display: inline;
 }
 
-.navbar > .searchbar .pure-form input[type="search"] {
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 1px solid #ccc;
-  border-radius: 0;
+.searchbar .pure-form fieldset { padding: 0; }
 
-  padding: initial 0;
+.searchbar input[type="search"] {
+	width: 100%;
+	margin: 1px;
 
-  box-shadow: none;
+	border: 1px solid;
+	border-color: rgba(0,0,0,0);
+	border-bottom-color: #CCC;
+	border-radius: 0;
 
-  transition: 0.1s border-bottom;
-  -webkit-appearance: none;
+	box-shadow: none;
+	-webkit-appearance: none;
+}
+
+.searchbar input[type="search"]:focus {
+	margin: 0 0 0.5px 0;
+	border: 2px solid;
+	border-color: rgba(0,0,0,0);
+	border-bottom-color: #FED;
 }
 
 /* https://stackoverflow.com/a/55170420 */
@@ -182,15 +228,6 @@ input[type="search"]::-webkit-search-cancel-button {
   background-size: 14px;
 }
 
-.navbar > .searchbar .pure-form fieldset {
-  padding: 0;
-}
-
-/* attract focus to the searchbar by adding a subtle transition */
-.navbar > .searchbar .pure-form input[type="search"]:focus {
-  border-bottom: 2px solid #aaa;
-}
-
 .user-field {
   display: flex;
   flex-direction: row;
@@ -199,7 +236,7 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .user-field div {
-  width: initial;
+  width: auto;
 }
 
 .user-field div:not(:last-child) {
@@ -247,21 +284,43 @@ input[type="search"]::-webkit-search-cancel-button {
   }
 }
 
+
+/*
+ * Video "cards" (results/playlist/channel videos)
+ */
+
+.video-card-row { margin: 15px 0; }
+
+.flexible { display: flex; }
+.flex-left  { flex: 1 1 100%; flex-wrap: wrap;   }
+.flex-right { flex: 1 0 auto; flex-wrap: nowrap; }
+
+p.channel-name { margin: 0; }
+p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
+
+
 /*
  * Footer
  */
 
-.footer {
-  color: #666666;
-  margin: 2em 0;
+footer {
+  color: #919191;
+  margin-top: auto;
+  padding: 1.5em 0;
   text-align: center;
+  max-height: 30vh;
 }
 
-.footer a {
-  color: inherit;
+footer a {
+  color: #919191 !important;
   text-decoration: underline;
 }
 
+footer span {
+  margin: 4px 0;
+  display: block;
+}
+
 /* keyframes */
 
 @keyframes spin {
@@ -273,157 +332,206 @@ input[type="search"]::-webkit-search-cancel-button {
   }
 }
 
-/* Control Bar */
-@media screen and (max-width: 480px) {
-  .video-js .vjs-control-bar,
-  .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
-    overflow: -webkit-paged-x;
-  }
-}
-
-.vjs-user-inactive {
-  cursor: none;
-}
-
-.video-js .vjs-text-track-display > div > div > div {
-  background-color: rgba(0, 0, 0, 0.75) !important;
-  border-radius: 9px !important;
-  padding: 5px !important;
-}
-
-.vjs-play-control,
-.vjs-volume-panel,
-.vjs-current-time,
-.vjs-time-control,
-.vjs-duration,
-.vjs-progress-control,
-.vjs-remaining-time {
-  order: 1;
-}
-
-.vjs-captions-button {
-  order: 2;
-}
-
-.vjs-quality-selector,
-.video-js .vjs-http-source-selector {
-  order: 3;
-}
-
-.vjs-playback-rate {
-  order: 4;
-}
-
-.vjs-share-control {
-  order: 5;
-}
-
-.vjs-fullscreen-control {
-  order: 6;
-}
-
-.vjs-control-bar {
-  display: flex;
-  flex-direction: row;
-}
-
-.video-js .vjs-icon-cog {
-  font-size: 18px;
-}
-
-.video-js .vjs-control-bar,
-.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
-  background-color: rgba(35, 35, 35, 0.75);
-}
-
-.vjs-menu li.vjs-menu-item:focus,
-.vjs-menu li.vjs-menu-item:hover {
-  background-color: rgba(255, 255, 255, 0.75);
-  color: rgba(49, 49, 51, 0.75);
-}
-
-.vjs-menu li.vjs-selected,
-.vjs-menu li.vjs-selected:focus,
-.vjs-menu li.vjs-selected:hover {
-  background-color: rgba(0, 182, 240, 0.75);
-}
-
-/* Progress Bar */
-.video-js .vjs-slider {
-  background-color: rgba(15, 15, 15, 0.5);
-}
-
 fieldset > select,
 span > select {
   color: rgba(49, 49, 51, 1);
 }
 
-.video-js .vjs-load-progress,
-.video-js .vjs-load-progress div {
-  background: rgba(87, 87, 88, 1);
-}
-
-.video-js .vjs-slider:hover,
-.video-js button:hover {
-  color: rgba(0, 182, 240, 1);
-}
-
-.video-js .vjs-play-progress {
-  background-color: rgba(0, 182, 240, 1);
-}
-
-/* Overlay */
-.video-js .vjs-overlay {
-  background-color: rgba(35, 35, 35, 0.75);
-  color: rgba(255, 255, 255, 1);
-}
-
-/* ProgressBar marker */
-.vjs-marker {
-  background-color: rgba(255, 255, 255, 1);
-}
-
-/* Big "Play" Button */
-.video-js .vjs-big-play-button {
-  background-color: rgba(35, 35, 35, 0.5);
-}
-
-.video-js:hover .vjs-big-play-button {
-  background-color: rgba(35, 35, 35, 0.75);
-}
-
-.video-js .vjs-current-time,
-.video-js .vjs-time-divider,
-.video-js .vjs-duration {
-  display: block;
-}
-
-.video-js .vjs-time-divider {
-  min-width: 0px;
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
-.video-js .vjs-poster {
-  background-size: cover;
-  object-fit: cover;
-}
-
-.player-dimensions.vjs-fluid {
-  padding-top: 82vh;
-}
-
-video.video-js {
-  position: absolute;
-  height: 100%;
-}
-
-#player-container {
-  position: relative;
-  padding-bottom: 82vh;
-  height: 0;
-}
-
 .pure-control-group label {
   word-wrap: normal;
 }
+
+/*
+ * Light theme
+ */
+
+.light-theme a:hover,
+.light-theme a:active,
+.light-theme summary:hover {
+  color: #075A9E !important;
+}
+
+.light-theme a.pure-button-primary:hover {
+  color: #fff !important;
+}
+
+.light-theme a {
+  color: #335d7a;
+  text-decoration: none;
+}
+
+/* All links that do not fit with the default color goes here */
+.light-theme a:not([data-id]) > .icon,
+.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
+.light-theme .playlist-restricted > ol > li > a {
+  color: #303030;
+}
+
+.light-theme .pure-menu-heading {
+  color: #565d64;
+}
+
+@media (prefers-color-scheme: light) {
+  .no-theme a:hover,
+  .no-theme a:active,
+  .no-theme summary:hover  {
+    color: #075A9E !important;
+  }
+
+  .no-theme a.pure-button-primary:hover {
+    color: #fff !important;
+  }
+
+  .no-theme a {
+    color: #335d7a;
+    text-decoration: none;
+  }
+
+  /* All links that do not fit with the default color goes here */
+  .no-theme a:not([data-id]) > .icon,
+  .no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
+  .no-theme .playlist-restricted > ol > li > a {
+    color: #303030;
+  }
+
+  .light-theme .pure-menu-heading {
+    color: #565d64;
+  }
+}
+
+/*
+ * Dark theme
+ */
+
+.dark-theme a:hover,
+.dark-theme a:active,
+.dark-theme summary:hover {
+  color: rgb(0, 182, 240);
+}
+
+.dark-theme a {
+  color: #a0a0a0;
+  text-decoration: none;
+}
+
+body.dark-theme {
+  background-color: rgba(35, 35, 35, 1);
+  color: #f0f0f0;
+}
+
+.dark-theme .pure-form legend {
+  color: #f0f0f0;
+}
+
+.dark-theme .pure-menu-heading {
+  color: #f0f0f0;
+}
+
+.dark-theme input,
+.dark-theme select,
+.dark-theme textarea {
+  color: rgba(35, 35, 35, 1);
+}
+
+.dark-theme .pure-form input[type="file"] {
+  color: #f0f0f0;
+}
+
+.dark-theme .searchbar input {
+  background-color: inherit;
+  color: inherit;
+}
+
+@media (prefers-color-scheme: dark) {
+  .no-theme a:hover,
+  .no-theme a:active {
+    color: rgb(0, 182, 240);
+  }
+
+  .no-theme a {
+    color: #a0a0a0;
+    text-decoration: none;
+  }
+
+  body.no-theme {
+    background-color: rgba(35, 35, 35, 1);
+    color: #f0f0f0;
+  }
+
+  .no-theme .pure-form legend {
+    color: #f0f0f0;
+  }
+
+  .no-theme .pure-menu-heading {
+    color: #f0f0f0;
+  }
+
+  .no-theme input,
+  .no-theme select,
+  .no-theme textarea {
+    color: rgba(35, 35, 35, 1);
+  }
+
+  .no-theme .pure-form input[type="file"] {
+    color: #f0f0f0;
+  }
+
+  .no-theme .searchbar input {
+    background-color: inherit;
+    color: inherit;
+  }
+}
+
+/*With commit d9528f5 all contents of the page is now within a flexbox. However,
+the hr element is rendered improperly within one.
+See https://stackoverflow.com/a/34372979 for more info */
+hr {
+  margin: 10px 0 10px 0;
+}
+
+/* Description Expansion Styling*/
+#descexpansionbutton {
+  display: none
+}
+
+#descexpansionbutton ~ div {
+  overflow: hidden;
+  height: 8.3em;
+}
+
+#descexpansionbutton:checked ~ div {
+  overflow: unset;
+  height: 100%;
+}
+
+#descexpansionbutton ~ label {
+  order: 1;
+  margin-top: 20px;
+}
+
+/* Bidi (bidirectional text) support */
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+#descriptionWrapper,
+#description-box {
+	unicode-bidi: plaintext;
+	text-align: start;
+}
+
+#descriptionWrapper {
+	max-width: 600px;
+	white-space: pre-wrap;
+}
+
+/* Center the "invidious" logo on the search page */
+#logo > h1 { text-align: center; }
+
+/* IE11 fixes */
+:-ms-input-placeholder { color: #888; }
+
+/* Wider settings name to less word wrap */
+.pure-form-aligned .pure-control-group label { width: 19em; }

assets/css/embed.css

@@ -0,0 +1,26 @@
+#player {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  z-index: -100;
+}
+
+.watch-on-invidious {
+  font-size: 1.3em !important;
+  font-weight: bold;
+  white-space: nowrap;
+  margin: 0 1em 0 1em !important;
+  order: 3;
+}
+
+.watch-on-invidious > a {
+  color: white;
+}
+
+.watch-on-invidious > a:hover {
+  color: rgba(0, 182, 240, 1);;
+}

assets/css/empty.css

@@ -0,0 +1,16 @@
+#search-widget {
+    text-align: center;
+    margin: 20vh 0 50px 0;
+}
+
+#logo > h1 {
+    font-size: 3.5em;
+    margin: 0;
+    padding: 0;
+}
+
+@media screen and (max-width: 1500px) and (max-height: 1000px) {
+    #logo > h1 {
+      font-size: 10vmin;
+    }
+}

assets/css/lighttheme.css

@@ -1,16 +0,0 @@
-a:hover,
-a:active {
-  color: #167ac6 !important;
-}
-
-a {
-  color: #61809b;
-  text-decoration: none;
-}
-
-/* All links that do not fit with the default color goes here */
-a:not([data-id]) > .icon,
-.pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
-.playlist-restricted > ol > li > a {
-  color: #303030;
-}

assets/css/player.css

@@ -0,0 +1,261 @@
+/* Youtube player style */
+.video-js.player-style-youtube .vjs-progress-control {
+  height: 0;
+}
+
+.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {
+  position: absolute;
+  right: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+}
+
+.video-js.player-style-youtube .vjs-control-bar {
+  background: linear-gradient(rgba(0,0,0,0.1), rgba(0, 0, 0,0.5));
+}
+
+.video-js.player-style-youtube .vjs-slider {
+  background-color: rgba(255,255,255,0.2);
+}
+
+.video-js.player-style-youtube .vjs-load-progress > div {
+  background-color: rgba(255,255,255,0.5);
+}
+
+.video-js.player-style-youtube .vjs-play-progress {
+  background-color: red;
+}
+
+.video-js.player-style-youtube .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: 15px;
+}
+
+.video-js.player-style-youtube .vjs-control-bar > .vjs-spacer {
+  flex: 1;
+  order: 2;
+} 
+
+.video-js.player-style-youtube .vjs-play-progress .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js.player-style-youtube .vjs-play-progress::before {
+  color: red;
+  font-size: 0.85em;
+  display: none;
+}
+
+.video-js.player-style-youtube .vjs-progress-holder:hover .vjs-play-progress::before {
+  display: unset;
+}
+
+.video-js.player-style-youtube .vjs-control-bar {
+  display: flex;
+  flex-direction: row;
+}
+
+.video-js.player-style-youtube .vjs-big-play-button {
+  /*
+    Styles copied from video-js.min.css, definition of
+    .vjs-big-play-centered .vjs-big-play-button
+  */
+  top: 50%;
+  left: 50%;
+  margin-top: -0.81666em;
+  margin-left: -1.5em;
+}
+
+.video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu {
+  margin-bottom: 2em;
+}
+
+.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {height: 5px;
+margin-bottom: 10px;}
+
+ul.vjs-menu-content::-webkit-scrollbar {
+  display: none;
+}
+
+.vjs-user-inactive {
+  cursor: none;
+}
+
+.video-js .vjs-text-track-display > div > div > div {
+  background-color: rgba(0, 0, 0, 0.75) !important;
+  border-radius: 9px !important;
+  padding: 5px !important;
+}
+
+.vjs-play-control,
+.vjs-volume-panel,
+.vjs-current-time,
+.vjs-time-control,
+.vjs-duration,
+.vjs-progress-control,
+.vjs-remaining-time {
+  order: 1;
+}
+
+.vjs-captions-button {
+  order: 2;
+}
+
+.vjs-audio-button {
+  order: 3;
+}
+
+.vjs-quality-selector,
+.video-js .vjs-http-source-selector {
+  order: 4;
+}
+
+.vjs-playback-rate {
+  order: 5;
+}
+
+.vjs-share-control {
+  order: 6;
+}
+
+.vjs-fullscreen-control {
+  order: 7;
+}
+
+.vjs-playback-rate > .vjs-menu {
+  width: 50px;
+}
+
+.vjs-control-bar {
+  display: flex;
+  flex-direction: row;
+  scrollbar-width: none;
+}
+
+.vjs-control-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.video-js .vjs-icon-cog {
+  font-size: 18px;
+}
+
+.video-js .vjs-control-bar,
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background-color: rgba(35, 35, 35, 0.75);
+}
+
+.vjs-menu li.vjs-menu-item:focus,
+.vjs-menu li.vjs-menu-item:hover {
+  background-color: rgba(255, 255, 255, 0.75);
+  color: rgba(49, 49, 51, 0.75);
+}
+
+.vjs-menu li.vjs-selected,
+.vjs-menu li.vjs-selected:focus,
+.vjs-menu li.vjs-selected:hover {
+  background-color: rgba(0, 182, 240, 0.75);
+}
+
+/* Progress Bar */
+.video-js .vjs-slider {
+  background-color: rgba(15, 15, 15, 0.5);
+}
+
+.video-js .vjs-load-progress,
+.video-js .vjs-load-progress div {
+  background: rgba(87, 87, 88, 1);
+}
+
+.video-js .vjs-slider:hover,
+.video-js button:hover {
+  color: rgba(0, 182, 240, 1);
+}
+
+.video-js.player-style-invidious .vjs-play-progress {
+  background-color: rgba(0, 182, 240, 1);
+}
+vjs-menu-content
+/* Overlay */
+.video-js .vjs-overlay {
+  background-color: rgba(35, 35, 35, 0.75);
+  color: rgba(255, 255, 255, 1);
+}
+
+/* ProgressBar marker */
+.vjs-marker {
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 0;
+}
+
+/* Big "Play" Button */
+.video-js .vjs-big-play-button {
+  background-color: rgba(35, 35, 35, 0.5);
+}
+
+.video-js:hover .vjs-big-play-button {
+  background-color: rgba(35, 35, 35, 0.75);
+}
+
+.video-js .vjs-current-time,
+.video-js .vjs-time-divider,
+.video-js .vjs-duration {
+  display: block;
+}
+
+.video-js .vjs-time-divider {
+  min-width: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.video-js .vjs-poster {
+  background-size: cover;
+  object-fit: cover;
+}
+
+.player-dimensions.vjs-fluid {
+  padding-top: 82vh;
+}
+
+video.video-js {
+  position: absolute;
+  height: 100%;
+}
+
+#player-container {
+  position: relative;
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: 1em;
+  margin-right: 1em;
+  padding-bottom: 82vh;
+  height: 0;
+}
+
+.mobile-operations-bar {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 1px !important;
+  left: initial !important;
+  width: initial !important;
+}
+
+.mobile-operations-bar ul {
+  position: absolute !important;
+  bottom: unset !important;
+  top: 1.5em;
+}
+
+@media screen and (max-width: 700px) {
+  .video-js .vjs-share {
+    justify-content: unset;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  .vjs-modal-dialog-content {
+    overflow-x: hidden;
+  }
+}

assets/css/search.css

@@ -0,0 +1,121 @@
+summary {
+	/* This should hide the marker */
+	display: block;
+
+	font-size: 1.17em;
+	font-weight: bold;
+	margin: 0 auto 10px auto;
+	cursor: pointer;
+}
+
+summary::-webkit-details-marker,
+summary::marker { display: none; }
+
+summary:before {
+	border-radius: 5px;
+	content: "[ + ]";
+	margin: -2px 10px 0 10px;
+	padding: 1px 0 3px 0;
+	text-align: center;
+	width: 40px;
+}
+
+details[open] > summary:before { content: "[ − ]"; }
+
+
+#filters-box {
+	padding: 10px 20px 20px 10px;
+	margin: 10px 15px;
+}
+#filters-flex {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	align-items: flex-start;
+	align-content: flex-start;
+	justify-content: flex-start;
+}
+
+
+fieldset, legend {
+	display: contents !important;
+	border: none !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+
+.filter-column {
+	display: inline-block;
+	display: inline-flex;
+	width: max-content;
+	min-width: max-content;
+	max-width: 16em;
+	margin: 15px;
+	flex-grow: 2;
+	flex-basis: auto;
+	flex-direction: column;
+}
+.filter-name, .filter-options {
+	display: block;
+	padding: 5px 10px;
+	margin: 0;
+	text-align: start;
+}
+
+.filter-options div { margin: 6px 0; }
+.filter-options div * { vertical-align: middle; }
+.filter-options label { margin: 0 10px; }
+
+
+#filters-apply {
+	text-align: right; /* IE11 only */
+	text-align: end;   /* Override for compatible browsers */
+}
+
+/* Error message */
+
+.no-results-error {
+	text-align: center;
+	line-height: 180%;
+	font-size: 110%;
+	padding: 15px 15px 125px 15px;
+}
+
+/* Responsive rules */
+
+@media only screen and (max-width: 800px) {
+	summary { font-size: 1.30em; }
+	#filters-box {
+		margin: 10px 0 0 0;
+		padding: 0;
+	}
+	#filters-apply {
+		text-align: center;
+		padding: 15px;
+	}
+}
+
+/* Light theme */
+
+.light-theme #filters-box {
+	background: #dfdfdf;
+}
+
+@media (prefers-color-scheme: light) {
+	.no-theme #filters-box {
+		background: #dfdfdf;
+	}
+}
+
+/* Dark theme */
+
+.dark-theme #filters-box {
+	background: #373737;
+}
+
+@media (prefers-color-scheme: dark) {
+	.no-theme #filters-box {
+		background: #373737;
+	}
+}

assets/css/videojs-http-source-selector.css

@@ -1,7 +0,0 @@
-/**
- * videojs-http-source-selector
- * @version 1.1.5
- * @copyright 2019 Justin Fujita <Justin@pivotshare.com>
- * @license MIT
- */
-.video-js.vjs-http-source-selector{display:block}

assets/css/videojs-overlay.css

@@ -1 +0,0 @@
-.video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px}

assets/css/videojs-share.css

@@ -1,7 +0,0 @@
-/**
- * videojs-share
- * @version 3.0.0
- * @copyright 2019 Mikhail Khazov <mkhazov.work@gmail.com>
- * @license MIT
- */
-.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-modal-dialog-content{display:flex;align-items:center;padding:0;background-image:linear-gradient(to bottom, rgba(0,0,0,0.77), rgba(0,0,0,0.75))}.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button{position:absolute;right:0;top:5px;width:30px;height:30px;color:#fff;cursor:pointer;opacity:0.9;transition:opacity 0.25s ease-out}.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button:before{content:'×';font-size:20px;line-height:15px}.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button:hover{opacity:1}.video-js .vjs-share{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:100%;height:100%;max-height:400px}.video-js .vjs-share__top,.video-js .vjs-share__middle,.video-js .vjs-share__bottom{display:flex}.video-js .vjs-share__top,.video-js .vjs-share__middle{flex-direction:column;justify-content:space-between}.video-js .vjs-share__middle{padding:0 25px}.video-js .vjs-share__title{align-self:center;font-size:22px;color:#fff}.video-js .vjs-share__subtitle{width:100%;margin:0 auto 12px;font-size:16px;color:#fff;opacity:0.7}.video-js .vjs-share__short-link-wrapper{position:relative;display:block;width:100%;height:40px;margin:0 auto;margin-bottom:15px;border:0;color:rgba(255,255,255,0.65);background-color:#363636;outline:none;overflow:hidden;flex-shrink:0}.video-js .vjs-share__short-link{display:block;width:100%;height:100%;padding:0 40px 0 15px;border:0;color:rgba(255,255,255,0.65);background-color:#363636;outline:none}.video-js .vjs-share__btn{position:absolute;right:0;bottom:0;height:40px;width:40px;display:flex;align-items:center;padding:0 11px;border:0;color:#fff;background-color:#2e2e2e;background-size:18px 19px;background-position:center;background-repeat:no-repeat;cursor:pointer;outline:none;transition:width 0.3s ease-out, padding 0.3s ease-out}.video-js .vjs-share__btn svg{flex-shrink:0}.video-js .vjs-share__btn span{position:relative;padding-left:10px;opacity:0;transition:opacity 0.3s ease-out}.video-js .vjs-share__btn:hover{justify-content:center;width:100%;padding:0 40px;background-image:none}.video-js .vjs-share__btn:hover span{opacity:1}.video-js .vjs-share__socials{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;transition:width 0.3s ease-out, height 0.3s ease-out}.video-js .vjs-share__social{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:32px;height:32px;margin-right:6px;margin-bottom:6px;cursor:pointer;font-size:8px;transition:transform 0.3s ease-out, filter 0.2s ease-out;border:none;outline:none}.video-js .vjs-share__social:hover{filter:brightness(115%)}.video-js .vjs-share__social svg{overflow:visible;max-height:24px}.video-js .vjs-share__social_vk{background-color:#5d7294}.video-js .vjs-share__social_ok{background-color:#ed7c20}.video-js .vjs-share__social_mail,.video-js .vjs-share__social_email{background-color:#134785}.video-js .vjs-share__social_tw{background-color:#76aaeb}.video-js .vjs-share__social_reddit{background-color:#ff4500}.video-js .vjs-share__social_fbFeed{background-color:#475995}.video-js .vjs-share__social_messenger{background-color:#0084ff}.video-js .vjs-share__social_gp{background-color:#d53f35}.video-js .vjs-share__social_linkedin{background-color:#0077b5}.video-js .vjs-share__social_viber{background-color:#766db5}.video-js .vjs-share__social_telegram{background-color:#4bb0e2}.video-js .vjs-share__social_whatsapp{background-color:#78c870}.video-js .vjs-share__bottom{justify-content:center}@media (max-height: 220px){.video-js .vjs-share .hidden-xs{display:none}}@media (max-height: 350px){.video-js .vjs-share .hidden-sm{display:none}}@media (min-height: 400px){.video-js .vjs-share__title{margin-bottom:15px}.video-js .vjs-share__short-link-wrapper{margin-bottom:30px}}@media (min-width: 320px){.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button{right:5px;top:10px}}@media (min-width: 660px){.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button{right:20px;top:20px}.video-js .vjs-share__social{width:40px;height:40px}}

assets/css/videojs-vtt-thumbnails.css

@@ -1,7 +0,0 @@
-/**
- * videojs-vtt-thumbnails
- * @version 0.0.13
- * @copyright 2019 Chris Boustead <chris@forgemotion.com>
- * @license MIT
- */
-.video-js.vjs-vtt-thumbnails{display:block}.video-js .vjs-vtt-thumbnail-display{position:absolute;bottom:85%;pointer-events:none;box-shadow:0 0 7px rgba(0,0,0,0.6)}

assets/css/videojs.markers.min.css

@@ -1 +0,0 @@
-.vjs-marker{position:absolute;left:0;bottom:0;opacity:1;height:100%;transition:opacity .2s ease;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;z-index:100}.vjs-marker:hover{cursor:pointer;-webkit-transform:scale(1.3,1.3);-moz-transform:scale(1.3,1.3);-o-transform:scale(1.3,1.3);-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.vjs-tip{visibility:hidden;display:block;opacity:.8;padding:5px;font-size:10px;position:absolute;bottom:14px;z-index:100000}.vjs-tip .vjs-tip-arrow{background:url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left;bottom:0;left:50%;margin-left:-4px;background-position:bottom left;position:absolute;width:9px;height:5px}.vjs-tip .vjs-tip-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px 8px;background-color:#000;color:#fff;max-width:200px;text-align:center}.vjs-break-overlay{visibility:hidden;position:absolute;z-index:100000;top:0}.vjs-break-overlay .vjs-break-overlay-text{padding:9px;text-align:center}

assets/fonts/ionicons.svg

@@ -1,13 +1,13 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!--
-2018-6-14: Created with FontForge (http://fontforge.org)
+2019-5-24: Created with FontForge (http://fontforge.org)
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20160407 at Thu Jun 14 08:50:34 2018
+Created by FontForge 20160407 at Fri May 24 15:45:40 2019
  By Adam Bradley
-Copyright (c) 2018, Adam Bradley
+Copyright (c) 2019, Adam Bradley
 </metadata>
 <defs>
 <font id="Ionicons" horiz-adv-x="416" >

assets/invidious-colored-vector.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512pt" height="512pt" version="1.0" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><rect x="-.0072516" y=".00056299" width="512.01" height="512.02" fill="#575757" stroke-width=".063019"/><path d="m247.17 455.95c-19.792-0.78921-38.719-4.2564-57.154-10.47-60.968-20.55-108.68-68.579-127-127.86-7.8955-25.538-10.062-53.943-6.2586-82.067 3.7105-27.439 13.603-53.515 29.342-77.344 12.069-18.273 29.138-36.277 47.228-49.816 36.891-27.61 85.944-42.49 132.38-40.157 25.88 1.3001 49.939 6.765 73.106 16.606 8.1948 3.481 20.024 9.6845 27.696 14.525 14.15 8.9272 22.367 15.498 34.482 27.573 13.254 13.211 22.128 24.276 30.398 37.906 7.2081 11.879 14.099 27.15 18.229 40.397 1.5996 5.1305 4.442 16.456 5.6852 22.653 2.3908 11.917 2.6998 15.722 2.7049 33.312 6e-3 18.515-0.46256 24.413-2.9166 36.758-9.3274 46.92-35.58 88.167-74.872 117.64-22.814 17.112-50.027 29.535-78.547 35.858-16.714 3.7059-35.421 5.2453-54.498 4.4846zm-35.1-78.786c-5.3e-4 -0.52647-0.0741-2.0564-0.16311-3.3999l-0.16178-2.4427-4.7018-0.26271c-4.0477-0.22614-4.7968-0.33363-5.3847-0.77253-2.0235-1.5108-1.4679-6.0695 2.2494-18.457 0.8637-2.8781 3.3371-11.321 5.4966-18.762 2.1594-7.4409 5.2002-17.836 6.7573-23.101 1.5571-5.2648 4.1948-14.282 5.8615-20.038 1.6667-5.7562 3.6145-12.4 4.3284-14.764 0.71391-2.3641 3.2583-11.037 5.6542-19.272 4.9475-17.007 8.1626-27.723 8.9438-29.811 0.51852-1.3858 0.54785-1.4139 0.99761-0.95317 0.25486 0.26106 3.8462 7.3667 7.9807 15.79 4.1345 8.4236 13.089 26.573 19.898 40.331 17.188 34.73 37.849 76.578 43.261 87.622l4.5356 9.257 11.359-0.0895c6.2475-0.0492 11.615-0.19623 11.929-0.32672 0.5614-0.23385 0.54167-0.2959-1.3723-4.3176-1.068-2.2442-8.1436-16.601-15.724-31.904-48.687-98.293-61.22-123.86-67.889-138.48-4.7022-10.309-6.9031-14.807-7.7139-15.762-0.82931-0.97742-1.6319-1.0638-2.3704-0.25525-1.1993 1.313-4.1046 10.063-9.3869 28.27-2.0569 7.0899-6.5372 22.425-9.9562 34.077-6.6396 22.629-8.5182 29.037-14.33 48.883-2.0354 6.9495-4.7977 16.369-6.1385 20.931-1.3408 4.5628-4.033 13.81-5.9826 20.549-4.304 14.877-6.136 20.889-7.3886 24.25-2.1371 5.7334-2.5723 6.3292-4.9216 6.7384-0.88855 0.15472-2.4102 0.28196-3.3815 0.28275-2.1993 3e-3 -3.5494 0.36339-4.0558 1.0863-0.42176 0.60215-0.56421 4.8802-0.18251 5.4812 0.20573 0.32388 2.4672 0.37414 23.34 0.51873l8.6151 0.0597-7e-4 -0.95723zm36.751-205.59c4.3282-0.92335 8.4607-4.943 9.4374-9.1796 0.36569-1.5862 0.32543-4.9758-0.077-6.4799-0.85108-3.1813-3.2688-6.291-6.039-7.7675-3.8111-2.0313-9.456-2.0295-13.272 5e-3 -5.9828 3.1888-8.1556 11.089-4.7878 17.408 2.6995 5.0648 8.3611 7.3754 14.738 6.015z" fill="#f0f0f0" stroke-width=".025526"/></g><g transform="matrix(.069892 0 0 -.069892 44.236 474.48)"><path d="m2787 4669c-124-65-123-255 3-319 86-44 196-16 247 62 58 87 26 211-67 258-51 26-132 26-183-1z" fill="#00b6f0" stroke="#00b6f0" stroke-width="4.25"/><path d="m2882 4108c-12-16-63-166-102-303-30-104-101-350-165-565-20-69-58-199-85-290-26-91-64-221-85-290-20-69-58-199-85-290-26-91-64-221-85-290-20-69-57-195-81-280-59-207-93-299-115-310-10-6-35-10-56-10-73 0-84-8-81-54l3-41 228-3 228-2-3 47-3 48-73 3c-66 3-74 5-84 27-13 28 0 104 37 225 13 41 47 156 75 255s66 230 85 290c18 61 56 191 85 290 28 99 66 230 85 290 18 61 56 191 85 290 85 297 123 419 131 429 5 5 17-11 28-35 10-24 192-393 403-819s447-902 523-1058l139-282h168c92 0 168 4 168 8s-75 158-166 342c-588 1183-969 1958-1033 2100-29 63-69 151-89 195-44 95-58 110-80 83z" fill="#575757"/></g></svg>

assets/js/_helpers.js

@@ -0,0 +1,249 @@
+'use strict';
+// Contains only auxiliary methods
+// May be included and executed unlimited number of times without any consequences
+
+// Polyfills for IE11
+Array.prototype.find = Array.prototype.find || function (condition) {
+    return this.filter(condition)[0];
+};
+Array.from = Array.from || function (source) {
+    return Array.prototype.slice.call(source);
+};
+NodeList.prototype.forEach = NodeList.prototype.forEach || function (callback) {
+    Array.from(this).forEach(callback);
+};
+String.prototype.includes = String.prototype.includes || function (searchString) {
+    return this.indexOf(searchString) >= 0;
+};
+String.prototype.startsWith = String.prototype.startsWith || function (prefix) {
+    return this.substr(0, prefix.length) === prefix;
+};
+Math.sign = Math.sign || function(x) {
+    x = +x;
+    if (!x) return x; // 0 and NaN
+    return x > 0 ? 1 : -1;
+};
+if (!window.hasOwnProperty('HTMLDetailsElement') && !window.hasOwnProperty('mockHTMLDetailsElement')) {
+    window.mockHTMLDetailsElement = true;
+    const style = 'details:not([open]) > :not(summary) {display: none}';
+    document.head.appendChild(document.createElement('style')).textContent = style;
+
+    addEventListener('click', function (e) {
+        if (e.target.nodeName !== 'SUMMARY') return;
+        const details = e.target.parentElement;
+        if (details.hasAttribute('open'))
+            details.removeAttribute('open');
+        else
+            details.setAttribute('open', '');
+    });
+}
+
+// Monstrous global variable for handy code
+// Includes: clamp, xhr, storage.{get,set,remove}
+window.helpers = window.helpers || {
+    /**
+     * https://en.wikipedia.org/wiki/Clamping_(graphics)
+     * @param {Number} num Source number
+     * @param {Number} min Low border
+     * @param {Number} max High border
+     * @returns {Number} Clamped value
+     */
+    clamp: function (num, min, max) {
+        if (max < min) {
+            var t = max; max = min; min = t; // swap max and min
+        }
+
+        if (max < num)
+            return max;
+        if (min > num)
+            return min;
+        return num;
+    },
+
+    /** @private */
+    _xhr: function (method, url, options, callbacks) {
+        const xhr = new XMLHttpRequest();
+        xhr.open(method, url);
+
+        // Default options
+        xhr.responseType = 'json';
+        xhr.timeout = 10000;
+        // Default options redefining
+        if (options.responseType)
+            xhr.responseType = options.responseType;
+        if (options.timeout)
+            xhr.timeout = options.timeout;
+
+        if (method === 'POST')
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+        // better than onreadystatechange because of 404 codes https://stackoverflow.com/a/36182963
+        xhr.onloadend = function () {
+            if (xhr.status === 200) {
+                if (callbacks.on200) {
+                    // fix for IE11. It doesn't convert response to JSON
+                    if (xhr.responseType === '' && typeof(xhr.response) === 'string')
+                        callbacks.on200(JSON.parse(xhr.response));
+                    else
+                        callbacks.on200(xhr.response);
+                }
+            } else {
+                // handled by onerror
+                if (xhr.status === 0) return;
+
+                if (callbacks.onNon200)
+                    callbacks.onNon200(xhr);
+            }
+        };
+
+        xhr.ontimeout = function () {
+            if (callbacks.onTimeout)
+                callbacks.onTimeout(xhr);
+        };
+
+        xhr.onerror = function () {
+            if (callbacks.onError)
+                callbacks.onError(xhr);
+        };
+
+        if (options.payload)
+            xhr.send(options.payload);
+        else
+            xhr.send();
+    },
+    /** @private */
+    _xhrRetry: function(method, url, options, callbacks) {
+        if (options.retries <= 0) {
+            console.warn('Failed to pull', options.entity_name);
+            if (callbacks.onTotalFail)
+                callbacks.onTotalFail();
+            return;
+        }
+        helpers._xhr(method, url, options, callbacks);
+    },
+    /**
+     * @callback callbackXhrOn200
+     * @param {Object} response - xhr.response
+     */
+    /**
+     * @callback callbackXhrError
+     * @param {XMLHttpRequest} xhr
+     */
+    /**
+     * @param {'GET'|'POST'} method - 'GET' or 'POST'
+     * @param {String} url - URL to send request to
+     * @param {Object} options - other XHR options
+     * @param {XMLHttpRequestBodyInit} [options.payload=null] - payload for POST-requests
+     * @param {'arraybuffer'|'blob'|'document'|'json'|'text'} [options.responseType=json]
+     * @param {Number} [options.timeout=10000]
+     * @param {Number} [options.retries=1]
+     * @param {String} [options.entity_name='unknown'] - string to log
+     * @param {Number} [options.retry_timeout=1000]
+     * @param {Object} callbacks - functions to execute on events fired
+     * @param {callbackXhrOn200} [callbacks.on200]
+     * @param {callbackXhrError} [callbacks.onNon200]
+     * @param {callbackXhrError} [callbacks.onTimeout]
+     * @param {callbackXhrError} [callbacks.onError]
+     * @param {callbackXhrError} [callbacks.onTotalFail] - if failed after all retries
+     */
+     xhr: function(method, url, options, callbacks) {
+        if (!options.retries || options.retries <= 1) {
+            helpers._xhr(method, url, options, callbacks);
+            return;
+        }
+
+        if (!options.entity_name) options.entity_name = 'unknown';
+        if (!options.retry_timeout) options.retry_timeout = 1000;
+        const retries_total = options.retries;
+        let currentTry = 1;
+
+        const retry = function () {
+            console.warn('Pulling ' + options.entity_name + ' failed... ' + (currentTry++) + '/' + retries_total);
+            setTimeout(function () {
+                options.retries--;
+                helpers._xhrRetry(method, url, options, callbacks);
+            }, options.retry_timeout);
+        };
+
+        // Pack retry() call into error handlers
+        callbacks._onError = callbacks.onError;
+        callbacks.onError = function (xhr) {
+            if (callbacks._onError)
+                callbacks._onError(xhr);
+            retry();
+        };
+        callbacks._onTimeout = callbacks.onTimeout;
+        callbacks.onTimeout = function (xhr) {
+            if (callbacks._onTimeout)
+                callbacks._onTimeout(xhr);
+            retry();
+        };
+
+        helpers._xhrRetry(method, url, options, callbacks);
+    },
+
+    /**
+     * @typedef {Object} invidiousStorage
+     * @property {(key:String) => Object} get
+     * @property {(key:String, value:Object)} set
+     * @property {(key:String)} remove
+     */
+
+    /**
+     * Universal storage, stores and returns JS objects. Uses inside localStorage or cookies
+     * @type {invidiousStorage}
+     */
+    storage: (function () {
+        // access to localStorage throws exception in Tor Browser, so try is needed
+        let localStorageIsUsable = false;
+        try{localStorageIsUsable = !!localStorage.setItem;}catch(e){}
+
+        if (localStorageIsUsable) {
+            return {
+                get: function (key) {
+                    if (!localStorage[key]) return;
+                    try {
+                        return JSON.parse(decodeURIComponent(localStorage[key]));
+                    } catch(e) {
+                        // Erase non parsable value
+                        helpers.storage.remove(key);
+                    }
+                },
+                set: function (key, value) { localStorage[key] = encodeURIComponent(JSON.stringify(value)); },
+                remove: function (key) { localStorage.removeItem(key); }
+            };
+        }
+
+        // TODO: fire 'storage' event for cookies
+        console.info('Storage: localStorage is disabled or unaccessible. Cookies used as fallback');
+        return {
+            get: function (key) {
+                const cookiePrefix = key + '=';
+                function findCallback(cookie) {return cookie.startsWith(cookiePrefix);}
+                const matchedCookie = document.cookie.split('; ').find(findCallback);
+                if (matchedCookie) {
+                    const cookieBody = matchedCookie.replace(cookiePrefix, '');
+                    if (cookieBody.length === 0) return;
+                    try {
+                        return JSON.parse(decodeURIComponent(cookieBody));
+                    } catch(e) {
+                        // Erase non parsable value
+                        helpers.storage.remove(key);
+                    }
+                }
+            },
+            set: function (key, value) {
+                const cookie_data = encodeURIComponent(JSON.stringify(value));
+
+                // Set expiration in 2 year
+                const date = new Date();
+                date.setFullYear(date.getFullYear()+2);
+
+                document.cookie = key + '=' + cookie_data + '; expires=' + date.toGMTString();
+            },
+            remove: function (key) {
+                document.cookie = key + '=; Max-Age=0';
+            }
+        };
+    })()
+};

assets/js/community.js

@@ -1,17 +1,13 @@
-String.prototype.supplant = function (o) {
-    return this.replace(/{([^{}]*)}/g, function (a, b) {
-        var r = o[b];
-        return typeof r === 'string' || typeof r === 'number' ? r : a;
-    });
-}
+'use strict';
+var community_data = JSON.parse(document.getElementById('community_data').textContent);
 
 function hide_youtube_replies(event) {
     var target = event.target;
 
-    sub_text = target.getAttribute('data-inner-text');
-    inner_text = target.getAttribute('data-sub-text');
+    var sub_text = target.getAttribute('data-inner-text');
+    var inner_text = target.getAttribute('data-sub-text');
 
-    body = target.parentNode.parentNode.children[1];
+    var body = target.parentNode.parentNode.children[1];
     body.style.display = 'none';
 
     target.innerHTML = sub_text;
@@ -23,10 +19,10 @@ function hide_youtube_replies(event) {
 function show_youtube_replies(event) {
     var target = event.target;
 
-    sub_text = target.getAttribute('data-inner-text');
-    inner_text = target.getAttribute('data-sub-text');
+    var sub_text = target.getAttribute('data-inner-text');
+    var inner_text = target.getAttribute('data-sub-text');
 
-    body = target.parentNode.parentNode.children[1];
+    var body = target.parentNode.parentNode.children[1];
     body.style.display = '';
 
     target.innerHTML = sub_text;
@@ -35,13 +31,6 @@ function show_youtube_replies(event) {
     target.setAttribute('data-sub-text', sub_text);
 }
 
-function number_with_separator(val) {
-    while (/(\d+)(\d{3})/.test(val.toString())) {
-        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
-    }
-    return val;
-}
-
 function get_youtube_replies(target, load_more) {
     var continuation = target.getAttribute('data-continuation');
 
@@ -55,47 +44,39 @@ function get_youtube_replies(target, load_more) {
         '&hl=' + community_data.preferences.locale +
         '&thin_mode=' + community_data.preferences.thin_mode +
         '&continuation=' + continuation;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                if (load_more) {
-                    body = body.parentNode.parentNode;
-                    body.removeChild(body.lastElementChild);
-                    body.innerHTML += xhr.response.contentHtml;
-                } else {
-                    body.removeChild(body.lastElementChild);
-
-                    var p = document.createElement('p');
-                    var a = document.createElement('a');
-                    p.appendChild(a);
-
-                    a.href = 'javascript:void(0)';
-                    a.onclick = hide_youtube_replies;
-                    a.setAttribute('data-sub-text', community_data.hide_replies_text);
-                    a.setAttribute('data-inner-text', community_data.show_replies_text);
-                    a.innerText = community_data.hide_replies_text;
-
-                    var div = document.createElement('div');
-                    div.innerHTML = xhr.response.contentHtml;
-
-                    body.appendChild(p);
-                    body.appendChild(div);
-                }
+    helpers.xhr('GET', url, {}, {
+        on200: function (response) {
+            if (load_more) {
+                body = body.parentNode.parentNode;
+                body.removeChild(body.lastElementChild);
+                body.innerHTML += response.contentHtml;
             } else {
-                body.innerHTML = fallback;
+                body.removeChild(body.lastElementChild);
+
+                var p = document.createElement('p');
+                var a = document.createElement('a');
+                p.appendChild(a);
+
+                a.href = 'javascript:void(0)';
+                a.onclick = hide_youtube_replies;
+                a.setAttribute('data-sub-text', community_data.hide_replies_text);
+                a.setAttribute('data-inner-text', community_data.show_replies_text);
+                a.textContent = community_data.hide_replies_text;
+
+                var div = document.createElement('div');
+                div.innerHTML = response.contentHtml;
+
+                body.appendChild(p);
+                body.appendChild(div);
             }
+        },
+        onNon200: function (xhr) {
+            body.innerHTML = fallback;
+        },
+        onTimeout: function (xhr) {
+            console.warn('Pulling comments failed');
+            body.innerHTML = fallback;
         }
-    }
-
-    xhr.ontimeout = function () {
-        console.log('Pulling comments failed.');
-        body.innerHTML = fallback;
-    }
-
-    xhr.send();
+    });
 }

assets/js/embed.js

@@ -1,94 +1,64 @@
-function get_playlist(plid, retries = 5) {
-    if (retries <= 0) {
-        console.log('Failed to pull playlist');
-        return;
-    }
+'use strict';
+var video_data = JSON.parse(document.getElementById('video_data').textContent);
 
+function get_playlist(plid) {
+    var plid_url;
     if (plid.startsWith('RD')) {
-        var plid_url = '/api/v1/mixes/' + plid +
+        plid_url = '/api/v1/mixes/' + plid +
             '?continuation=' + video_data.id +
             '&format=html&hl=' + video_data.preferences.locale;
     } else {
-        var plid_url = '/api/v1/playlists/' + plid +
-            '?continuation=' + video_data.id +
+        plid_url = '/api/v1/playlists/' + plid +
+            '?index=' + video_data.index +
+            '&continuation' + video_data.id +
             '&format=html&hl=' + video_data.preferences.locale;
     }
 
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', plid_url, true);
+    helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
+        on200: function (response) {
+            if (!response.nextVideo)
+                return;
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                if (xhr.response.nextVideo) {
-                    player.on('ended', function () {
-                        var url = new URL('https://example.com/embed/' + xhr.response.nextVideo);
+            player.on('ended', function () {
+                var url = new URL('https://example.com/embed/' + response.nextVideo);
 
-                        if (video_data.params.autoplay || video_data.params.continue_autoplay) {
-                            url.searchParams.set('autoplay', '1');
-                        }
+                url.searchParams.set('list', plid);
+                if (!plid.startsWith('RD'))
+                    url.searchParams.set('index', response.index);
+                if (video_data.params.autoplay || video_data.params.continue_autoplay)
+                    url.searchParams.set('autoplay', '1');
+                if (video_data.params.listen !== video_data.preferences.listen)
+                    url.searchParams.set('listen', video_data.params.listen);
+                if (video_data.params.speed !== video_data.preferences.speed)
+                    url.searchParams.set('speed', video_data.params.speed);
+                if (video_data.params.local !== video_data.preferences.local)
+                    url.searchParams.set('local', video_data.params.local);
 
-                        if (video_data.params.listen !== video_data.preferences.listen) {
-                            url.searchParams.set('listen', video_data.params.listen);
-                        }
-
-                        if (video_data.params.speed !== video_data.preferences.speed) {
-                            url.searchParams.set('speed', video_data.params.speed);
-                        }
-
-                        if (video_data.params.local !== video_data.preferences.local) {
-                            url.searchParams.set('local', video_data.params.local);
-                        }
-
-                        url.searchParams.set('list', plid);
-                        location.assign(url.pathname + url.search);
-                    });
-                }
-            }
+                location.assign(url.pathname + url.search);
+            });
         }
-    }
-
-    xhr.onerror = function () {
-        console.log('Pulling playlist failed... ' + retries + '/5');
-        setTimeout(function () { get_playlist(plid, retries - 1) }, 1000);
-    }
-
-    xhr.ontimeout = function () {
-        console.log('Pulling playlist failed... ' + retries + '/5');
-        get_playlist(plid, retries - 1);
-    }
-
-    xhr.send();
-}
-
-if (video_data.plid) {
-    get_playlist(video_data.plid);
-} else if (video_data.video_series) {
-    player.on('ended', function () {
-        var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
-
-        if (video_data.params.autoplay || video_data.params.continue_autoplay) {
-            url.searchParams.set('autoplay', '1');
-        }
-
-        if (video_data.params.listen !== video_data.preferences.listen) {
-            url.searchParams.set('listen', video_data.params.listen);
-        }
-
-        if (video_data.params.speed !== video_data.preferences.speed) {
-            url.searchParams.set('speed', video_data.params.speed);
-        }
-
-        if (video_data.params.local !== video_data.preferences.local) {
-            url.searchParams.set('local', video_data.params.local);
-        }
-
-        if (video_data.video_series.length !== 0) {
-            url.searchParams.set('playlist', video_data.video_series.join(','))
-        }
-
-        location.assign(url.pathname + url.search);
     });
 }
+
+addEventListener('load', function (e) {
+    if (video_data.plid) {
+        get_playlist(video_data.plid);
+    } else if (video_data.video_series) {
+        player.on('ended', function () {
+            var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
+
+            if (video_data.params.autoplay || video_data.params.continue_autoplay)
+                url.searchParams.set('autoplay', '1');
+            if (video_data.params.listen !== video_data.preferences.listen)
+                url.searchParams.set('listen', video_data.params.listen);
+            if (video_data.params.speed !== video_data.preferences.speed)
+                url.searchParams.set('speed', video_data.params.speed);
+            if (video_data.params.local !== video_data.preferences.local)
+                url.searchParams.set('local', video_data.params.local);
+            if (video_data.video_series.length !== 0)
+                url.searchParams.set('playlist', video_data.video_series.join(','));
+
+            location.assign(url.pathname + url.search);
+        });
+    }
+});

assets/js/handlers.js

@@ -0,0 +1,149 @@
+'use strict';
+
+(function () {
+    var video_player = document.getElementById('player_html5_api');
+    if (video_player) {
+        video_player.onmouseenter = function () { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
+        video_player.onmouseleave = function () { video_player['title'] = video_player['data-title']; video_player['data-title'] = ''; };
+        video_player.oncontextmenu = function () { video_player['title'] = video_player['data-title']; };
+    }
+
+    // For dynamically inserted elements
+    addEventListener('click', function (e) {
+        if (!e || !e.target) return;
+
+        var t = e.target;
+        var handler_name = t.getAttribute('data-onclick');
+
+        switch (handler_name) {
+            case 'jump_to_time':
+                e.preventDefault();
+                var time = t.getAttribute('data-jump-time');
+                player.currentTime(time);
+                break;
+            case 'get_youtube_replies':
+                var load_more = t.getAttribute('data-load-more') !== null;
+                var load_replies = t.getAttribute('data-load-replies') !== null;
+                get_youtube_replies(t, load_more, load_replies);
+                break;
+            case 'toggle_parent':
+                e.preventDefault();
+                toggle_parent(t);
+                break;
+            default:
+                break;
+        }
+    });
+
+    document.querySelectorAll('[data-mouse="switch_classes"]').forEach(function (el) {
+        var classes = el.getAttribute('data-switch-classes').split(',');
+        var classOnEnter = classes[0];
+        var classOnLeave = classes[1];
+        function toggle_classes(toAdd, toRemove) {
+            el.classList.add(toAdd);
+            el.classList.remove(toRemove);
+        }
+        el.onmouseenter = function () { toggle_classes(classOnEnter, classOnLeave); };
+        el.onmouseleave = function () { toggle_classes(classOnLeave, classOnEnter); };
+    });
+
+    document.querySelectorAll('[data-onsubmit="return_false"]').forEach(function (el) {
+        el.onsubmit = function () { return false; };
+    });
+
+    document.querySelectorAll('[data-onclick="mark_watched"]').forEach(function (el) {
+        el.onclick = function () { mark_watched(el); };
+    });
+    document.querySelectorAll('[data-onclick="mark_unwatched"]').forEach(function (el) {
+        el.onclick = function () { mark_unwatched(el); };
+    });
+    document.querySelectorAll('[data-onclick="add_playlist_video"]').forEach(function (el) {
+        el.onclick = function () { add_playlist_video(el); };
+    });
+    document.querySelectorAll('[data-onclick="add_playlist_item"]').forEach(function (el) {
+        el.onclick = function () { add_playlist_item(el); };
+    });
+    document.querySelectorAll('[data-onclick="remove_playlist_item"]').forEach(function (el) {
+        el.onclick = function () { remove_playlist_item(el); };
+    });
+    document.querySelectorAll('[data-onclick="revoke_token"]').forEach(function (el) {
+        el.onclick = function () { revoke_token(el); };
+    });
+    document.querySelectorAll('[data-onclick="remove_subscription"]').forEach(function (el) {
+        el.onclick = function () { remove_subscription(el); };
+    });
+    document.querySelectorAll('[data-onclick="notification_requestPermission"]').forEach(function (el) {
+        el.onclick = function () { Notification.requestPermission(); };
+    });
+
+    document.querySelectorAll('[data-onrange="update_volume_value"]').forEach(function (el) {
+        function update_volume_value() {
+            document.getElementById('volume-value').textContent = el.value;
+        }
+        el.oninput = update_volume_value;
+        el.onchange = update_volume_value;
+    });
+
+
+    function revoke_token(target) {
+        var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+        row.style.display = 'none';
+        var count = document.getElementById('count');
+        count.textContent--;
+
+        var url = '/token_ajax?action_revoke_token=1&redirect=false' +
+            '&referer=' + encodeURIComponent(location.href) +
+            '&session=' + target.getAttribute('data-session');
+
+        var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
+
+        helpers.xhr('POST', url, {payload: payload}, {
+            onNon200: function (xhr) {
+                count.textContent++;
+                row.style.display = '';
+            }
+        });
+    }
+
+    function remove_subscription(target) {
+        var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+        row.style.display = 'none';
+        var count = document.getElementById('count');
+        count.textContent--;
+
+        var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
+            '&referer=' + encodeURIComponent(location.href) +
+            '&c=' + target.getAttribute('data-ucid');
+
+        var payload = 'csrf_token=' + target.parentNode.querySelector('input[name="csrf_token"]').value;
+
+        helpers.xhr('POST', url, {payload: payload}, {
+            onNon200: function (xhr) {
+                count.textContent++;
+                row.style.display = '';
+            }
+        });
+    }
+
+    // Handle keypresses
+    addEventListener('keydown', function (event) {
+        // Ignore modifier keys
+        if (event.ctrlKey || event.metaKey) return;
+
+        // Ignore shortcuts if any text input is focused
+        let focused_tag = document.activeElement.tagName.toLowerCase();
+        const allowed = /^(button|checkbox|file|radio|submit)$/;
+
+        if (focused_tag === 'textarea') return;
+        if (focused_tag === 'input') {
+            let focused_type = document.activeElement.type.toLowerCase();
+            if (!focused_type.match(allowed)) return;
+        }
+
+        // Focus search bar on '/'
+        if (event.key === '/') {
+            document.getElementById('searchbox').focus();
+            event.preventDefault();
+        }
+    });
+})();

assets/js/notifications.js

@@ -1,42 +1,30 @@
+'use strict';
+var notification_data = JSON.parse(document.getElementById('notification_data').textContent);
+
+/** Boolean meaning 'some tab have stream' */
+const STORAGE_KEY_STREAM = 'stream';
+/** Number of notifications. May be increased or reset */
+const STORAGE_KEY_NOTIF_COUNT = 'notification_count';
+
 var notifications, delivered;
+var notifications_mock = { close: function () { } };
 
-function get_subscriptions(callback, retries = 5) {
-    if (retries <= 0) {
-        return;
-    }
-
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', '/api/v1/auth/subscriptions?fields=authorId', true);
-
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                subscriptions = xhr.response;
-                callback(subscriptions);
-            }
-        }
-    }
-
-    xhr.onerror = function () {
-        console.log('Pulling subscriptions failed... ' + retries + '/5');
-        setTimeout(function () { get_subscriptions(callback, retries - 1) }, 1000);
-    }
-
-    xhr.ontimeout = function () {
-        console.log('Pulling subscriptions failed... ' + retries + '/5');
-        get_subscriptions(callback, retries - 1);
-    }
-
-    xhr.send();
+function get_subscriptions() {
+    helpers.xhr('GET', '/api/v1/auth/subscriptions?fields=authorId', {
+        retries: 5,
+        entity_name: 'subscriptions'
+    }, {
+        on200: create_notification_stream
+    });
 }
 
 function create_notification_stream(subscriptions) {
+    // sse.js can't be replaced to EventSource in place as it lack support of payload and headers
+    // see https://developer.mozilla.org/en-US/docs/Web/API/EventSource/EventSource
     notifications = new SSE(
         '/api/v1/auth/notifications?fields=videoId,title,author,authorId,publishedText,published,authorThumbnails,liveNow', {
             withCredentials: true,
-            payload: 'topics=' + subscriptions.map(function (subscription) { return subscription.authorId }).join(','),
+            payload: 'topics=' + subscriptions.map(function (subscription) { return subscription.authorId; }).join(','),
             headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
         });
     delivered = [];
@@ -44,96 +32,100 @@ function create_notification_stream(subscriptions) {
     var start_time = Math.round(new Date() / 1000);
 
     notifications.onmessage = function (event) {
-        if (!event.id) {
-            return;
-        }
+        if (!event.id) return;
 
         var notification = JSON.parse(event.data);
-        console.log('Got notification:', notification);
+        console.info('Got notification:', notification);
 
-        if (start_time < notification.published && !delivered.includes(notification.videoId)) {
-            if (Notification.permission === 'granted') {
-                var system_notification =
-                    new Notification((notification.liveNow ? notification_data.live_now_text : notification_data.upload_text).replace('`x`', notification.author), {
-                        body: notification.title,
-                        icon: '/ggpht' + new URL(notification.authorThumbnails[2].url).pathname,
-                        img: '/ggpht' + new URL(notification.authorThumbnails[4].url).pathname,
-                        tag: notification.videoId
-                    });
+        // Ignore not actual and delivered notifications
+        if (start_time > notification.published || delivered.includes(notification.videoId)) return;
 
-                system_notification.onclick = function (event) {
-                    window.open('/watch?v=' + event.currentTarget.tag, '_blank');
-                }
-            }
+        delivered.push(notification.videoId);
 
-            delivered.push(notification.videoId);
-            localStorage.setItem('notification_count', parseInt(localStorage.getItem('notification_count') || '0') + 1);
-            var notification_ticker = document.getElementById('notification_ticker');
+        let notification_count = helpers.storage.get(STORAGE_KEY_NOTIF_COUNT) || 0;
+        notification_count++;
+        helpers.storage.set(STORAGE_KEY_NOTIF_COUNT, notification_count);
 
-            if (parseInt(localStorage.getItem('notification_count')) > 0) {
-                notification_ticker.innerHTML =
-                    '<span id="notification_count">' + localStorage.getItem('notification_count') + '</span> <i class="icon ion-ios-notifications"></i>';
-            } else {
-                notification_ticker.innerHTML =
-                    '<i class="icon ion-ios-notifications-outline"></i>';
-            }
+        update_ticker_count();
+
+        // permission for notifications handled on settings page. JS handler is in handlers.js
+        if (window.Notification && Notification.permission === 'granted') {
+            var notification_text = notification.liveNow ? notification_data.live_now_text : notification_data.upload_text;
+            notification_text = notification_text.replace('`x`', notification.author);
+
+            var system_notification = new Notification(notification_text, {
+                body: notification.title,
+                icon: '/ggpht' + new URL(notification.authorThumbnails[2].url).pathname,
+                img: '/ggpht' + new URL(notification.authorThumbnails[4].url).pathname
+            });
+
+            system_notification.onclick = function (e) {
+                open('/watch?v=' + notification.videoId, '_blank');
+            };
         }
-    }
+    };
+
+    notifications.addEventListener('error', function (e) {
+        console.warn('Something went wrong with notifications, trying to reconnect...');
+        notifications = notifications_mock;
+        setTimeout(get_subscriptions, 1000);
+    });
 
-    notifications.addEventListener('error', handle_notification_error);
     notifications.stream();
 }
 
-function handle_notification_error(event) {
-    console.log('Something went wrong with notifications, trying to reconnect...');
-    notifications = { close: function () { } };
-    setTimeout(function () { get_subscriptions(create_notification_stream) }, 1000);
+function update_ticker_count() {
+    var notification_ticker = document.getElementById('notification_ticker');
+
+    const notification_count = helpers.storage.get(STORAGE_KEY_STREAM);
+    if (notification_count > 0) {
+        notification_ticker.innerHTML =
+            '<span id="notification_count">' + notification_count + '</span> <i class="icon ion-ios-notifications"></i>';
+    } else {
+        notification_ticker.innerHTML =
+            '<i class="icon ion-ios-notifications-outline"></i>';
+    }
 }
 
-window.addEventListener('load', function (e) {
-    localStorage.setItem('notification_count', document.getElementById('notification_count') ? document.getElementById('notification_count').innerText : '0');
-
-    if (localStorage.getItem('stream')) {
-        localStorage.removeItem('stream');
-    } else {
-        setTimeout(function () {
-            if (!localStorage.getItem('stream')) {
-                notifications = { close: function () { } };
-                localStorage.setItem('stream', true);
-                get_subscriptions(create_notification_stream);
-            }
-        }, Math.random() * 1000 + 50);
-    }
-
-    window.addEventListener('storage', function (e) {
-        if (e.key === 'stream' && !e.newValue) {
-            if (notifications) {
-                localStorage.setItem('stream', true);
-            } else {
-                setTimeout(function () {
-                    if (!localStorage.getItem('stream')) {
-                        notifications = { close: function () { } };
-                        localStorage.setItem('stream', true);
-                        get_subscriptions(create_notification_stream);
-                    }
-                }, Math.random() * 1000 + 50);
-            }
-        } else if (e.key === 'notification_count') {
-            var notification_ticker = document.getElementById('notification_ticker');
-
-            if (parseInt(e.newValue) > 0) {
-                notification_ticker.innerHTML =
-                    '<span id="notification_count">' + e.newValue + '</span> <i class="icon ion-ios-notifications"></i>';
-            } else {
-                notification_ticker.innerHTML =
-                    '<i class="icon ion-ios-notifications-outline"></i>';
-            }
+function start_stream_if_needed() {
+    // random wait for other tabs set 'stream' flag
+    setTimeout(function () {
+        if (!helpers.storage.get(STORAGE_KEY_STREAM)) {
+            // if no one set 'stream', set it by yourself and start stream
+            helpers.storage.set(STORAGE_KEY_STREAM, true);
+            notifications = notifications_mock;
+            get_subscriptions();
         }
-    });
-});
+    }, Math.random() * 1000 + 50); // [0.050 .. 1.050) second
+}
 
-window.addEventListener('unload', function (e) {
-    if (notifications) {
-        localStorage.removeItem('stream');
+
+addEventListener('storage', function (e) {
+    if (e.key === STORAGE_KEY_NOTIF_COUNT)
+        update_ticker_count();
+
+    // if 'stream' key was removed
+    if (e.key === STORAGE_KEY_STREAM && !helpers.storage.get(STORAGE_KEY_STREAM)) {
+        if (notifications) {
+            // restore it if we have active stream
+            helpers.storage.set(STORAGE_KEY_STREAM, true);
+        } else {
+            start_stream_if_needed();
+        }
     }
 });
+
+addEventListener('load', function () {
+    var notification_count_el = document.getElementById('notification_count');
+    var notification_count = notification_count_el ? parseInt(notification_count_el.textContent) : 0;
+    helpers.storage.set(STORAGE_KEY_NOTIF_COUNT, notification_count);
+
+    if (helpers.storage.get(STORAGE_KEY_STREAM))
+        helpers.storage.remove(STORAGE_KEY_STREAM);
+    start_stream_if_needed();
+});
+
+addEventListener('unload', function () {
+    // let chance to other tabs to be a streamer via firing 'storage' event
+    if (notifications) helpers.storage.remove(STORAGE_KEY_STREAM);
+});

assets/js/player.js

@@ -1,7 +1,11 @@
+'use strict';
+var player_data = JSON.parse(document.getElementById('player_data').textContent);
+var video_data = JSON.parse(document.getElementById('video_data').textContent);
+
 var options = {
     preload: 'auto',
     liveui: true,
-    playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
+    playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
     controlBar: {
         children: [
             'playToggle',
@@ -11,13 +15,21 @@ var options = {
             'durationDisplay',
             'progressControl',
             'remainingTimeDisplay',
+            'Spacer',
             'captionsButton',
+            'audioTrackButton',
             'qualitySelector',
             'playbackRateMenuButton',
             'fullscreenToggle'
         ]
+    },
+    html5: {
+        preloadTextTracks: false,
+        vhs: {
+            overrideNative: true
+        }
     }
-}
+};
 
 if (player_data.aspect_ratio) {
     options.aspectRatio = player_data.aspect_ratio;
@@ -25,124 +37,166 @@ if (player_data.aspect_ratio) {
 
 var embed_url = new URL(location);
 embed_url.searchParams.delete('v');
-short_url = location.origin + '/' + video_data.id + embed_url.search;
+var short_url = location.origin + '/' + video_data.id + embed_url.search;
 embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
 
-var shareOptions = {
-    socials: ['fbFeed', 'tw', 'reddit', 'email'],
+var save_player_pos_key = 'save_player_pos';
 
-    url: short_url,
-    title: player_data.title,
-    description: player_data.description,
-    image: player_data.thumbnail,
-    embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' src='" + embed_url + "' frameborder='0'></iframe>"
-}
+videojs.Vhs.xhr.beforeRequest = function(options) {
+    // set local if requested not videoplayback
+    if (!options.uri.includes('videoplayback')) {
+        if (!options.uri.includes('local=true'))
+            options.uri += '?local=true';
+    }
+    return options;
+};
 
-var player = videojs('player', options, function () {
-    this.hotkeys({
-        volumeStep: 0.1,
-        seekStep: 5,
-        enableModifiersForNumbers: false,
-        enableHoverScroll: true,
-        customKeys: {
-            // Toggle play with K Key
-            play: {
-                key: function (e) {
-                    return e.which === 75;
-                },
-                handler: function (player, options, e) {
-                    if (player.paused()) {
-                        player.play();
-                    } else {
-                        player.pause();
-                    }
-                }
-            },
-            // Go backward 10 seconds
-            backward: {
-                key: function (e) {
-                    return e.which === 74;
-                },
-                handler: function (player, options, e) {
-                    player.currentTime(player.currentTime() - 10);
-                }
-            },
-            // Go forward 10 seconds
-            forward: {
-                key: function (e) {
-                    return e.which === 76;
-                },
-                handler: function (player, options, e) {
-                    player.currentTime(player.currentTime() + 10);
-                }
-            },
-            // Increase speed
-            increase_speed: {
-                key: function (e) {
-                    return (e.which === 190 && e.shiftKey);
-                },
-                handler: function (player, _, e) {
-                    size = options.playbackRates.length;
-                    index = options.playbackRates.indexOf(player.playbackRate());
-                    player.playbackRate(options.playbackRates[(index + 1) % size]);
-                }
-            },
-            // Decrease speed
-            decrease_speed: {
-                key: function (e) {
-                    return (e.which === 188 && e.shiftKey);
-                },
-                handler: function (player, _, e) {
-                    size = options.playbackRates.length;
-                    index = options.playbackRates.indexOf(player.playbackRate());
-                    player.playbackRate(options.playbackRates[(size + index - 1) % size]);
-                }
-            }
-        }
-    });
-});
+var player = videojs('player', options);
 
-if (location.pathname.startsWith('/embed/')) {
-    player.overlay({
-        overlays: [{
-            start: 'loadstart',
-            content: '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
-            end: 'playing',
-            align: 'top'
-        }, {
-            start: 'pause',
-            content: '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
-            end: 'playing',
-            align: 'top'
-        }]
-    });
-}
+player.on('error', function () {
+    if (video_data.params.quality === 'dash') return;
 
-player.on('error', function (event) {
-    if (player.error().code === 2 || player.error().code === 4) {
-        setInterval(setTimeout(function (event) {
-            console.log('An error occured in the player, reloading...');
+    var localNotDisabled = (
+        !player.currentSrc().includes('local=true') && !video_data.local_disabled
+    );
+    var reloadMakesSense = (
+        player.error().code === MediaError.MEDIA_ERR_NETWORK ||
+        player.error().code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+    );
 
+    if (localNotDisabled) {
+        // add local=true to all current sources
+        player.src(player.currentSources().map(function (source) {
+            source.src += '&local=true';
+            return source;
+        }));
+    } else if (reloadMakesSense) {
+        setTimeout(function () {
+            console.warn('An error occurred in the player, reloading...');
+
+            // After load() all parameters are reset. Save them
             var currentTime = player.currentTime();
             var playbackRate = player.playbackRate();
             var paused = player.paused();
 
             player.load();
 
-            if (currentTime > 0.5) {
-                currentTime -= 0.5;
-            }
+            if (currentTime > 0.5) currentTime -= 0.5;
 
             player.currentTime(currentTime);
             player.playbackRate(playbackRate);
-
-            if (!paused) {
-                player.play();
-            }
-        }, 5000), 5000);
+            if (!paused) player.play();
+        }, 5000);
     }
 });
 
+if (video_data.params.quality === 'dash') {
+    player.reloadSourceOnError({
+        errorInterval: 10
+    });
+}
+
+/**
+ * Function for add time argument to url
+ * @param {String} url
+ * @returns {URL} urlWithTimeArg
+ */
+function addCurrentTimeToURL(url) {
+    var urlUsed = new URL(url);
+    urlUsed.searchParams.delete('start');
+    var currentTime = Math.ceil(player.currentTime());
+    if (currentTime > 0)
+        urlUsed.searchParams.set('t', currentTime);
+    else if (urlUsed.searchParams.has('t'))
+        urlUsed.searchParams.delete('t');
+    return urlUsed;
+}
+
+var shareOptions = {
+    socials: ['fbFeed', 'tw', 'reddit', 'email'],
+
+    get url() {
+        return addCurrentTimeToURL(short_url);
+    },
+    title: player_data.title,
+    description: player_data.description,
+    image: player_data.thumbnail,
+    get embedCode() {
+        // Single quotes inside here required. HTML inserted as is into value attribute of input
+        return "<iframe id='ivplayer' width='640' height='360' src='" +
+            addCurrentTimeToURL(embed_url) + "' style='border:none;'></iframe>";
+    }
+};
+
+if (location.pathname.startsWith('/embed/')) {
+    var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>';
+    player.overlay({
+        overlays: [
+            { start: 'loadstart', content: overlay_content, end: 'playing', align: 'top'},
+            { start: 'pause',     content: overlay_content, end: 'playing', align: 'top'}
+        ]
+    });
+}
+
+// Detect mobile users and initialize mobileUi for better UX
+// Detection code taken from https://stackoverflow.com/a/20293441
+
+function isMobile() {
+  try{ document.createEvent('TouchEvent'); return true; }
+  catch(e){ return false; }
+}
+
+if (isMobile()) {
+    player.mobileUi({ touchControls: { seekSeconds: 5 * player.playbackRate() } });
+
+    var buttons = ['playToggle', 'volumePanel', 'captionsButton'];
+
+    if (!video_data.params.listen && video_data.params.quality === 'dash') buttons.push('audioTrackButton');
+    if (video_data.params.listen || video_data.params.quality !== 'dash') buttons.push('qualitySelector');
+
+    // Create new control bar object for operation buttons
+    const ControlBar = videojs.getComponent('controlBar');
+    let operations_bar = new ControlBar(player, {
+      children: [],
+      playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0]
+    });
+    buttons.slice(1).forEach(function (child) {operations_bar.addChild(child);});
+
+    // Remove operation buttons from primary control bar
+    var primary_control_bar = player.getChild('controlBar');
+    buttons.forEach(function (child) {primary_control_bar.removeChild(child);});
+
+    var operations_bar_element = operations_bar.el();
+    operations_bar_element.classList.add('mobile-operations-bar');
+    player.addChild(operations_bar);
+
+    // Playback menu doesn't work when it's initialized outside of the primary control bar
+    var playback_element = document.getElementsByClassName('vjs-playback-rate')[0];
+    operations_bar_element.append(playback_element);
+
+    // The share and http source selector element can't be fetched till the players ready.
+    player.one('playing', function () {
+        var share_element = document.getElementsByClassName('vjs-share-control')[0];
+        operations_bar_element.append(share_element);
+
+        if (!video_data.params.listen && video_data.params.quality === 'dash') {
+            var http_source_selector = document.getElementsByClassName('vjs-http-source-selector vjs-menu-button')[0];
+            operations_bar_element.append(http_source_selector);
+        }
+    });
+}
+
+// Enable VR video support
+if (!video_data.params.listen && video_data.vr && video_data.params.vr_mode) {
+    player.crossOrigin('anonymous');
+    switch (video_data.projection_type) {
+        case 'EQUIRECTANGULAR':
+            player.vr({projection: 'equirectangular'});
+        default: // Should only be 'MESH' but we'll use this as a fallback.
+            player.vr({projection: 'EAC'});
+    }
+}
+
 // Add markers
 if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
     var markers = [{ time: video_data.params.video_start, text: 'Start' }];
@@ -155,13 +209,8 @@ if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
 
     player.markers({
         onMarkerReached: function (marker) {
-            if (marker.text === 'End') {
-                if (player.loop()) {
-                    player.markers.prev('Start');
-                } else {
-                    player.pause();
-                }
-            }
+            if (marker.text === 'End')
+                player.loop() ? player.markers.prev('Start') : player.pause();
         },
         markers: markers
     });
@@ -172,9 +221,76 @@ if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
 player.volume(video_data.params.volume / 100);
 player.playbackRate(video_data.params.speed);
 
+/**
+ * Method for getting the contents of a cookie
+ *
+ * @param {String} name Name of cookie
+ * @returns {String|null} cookieValue
+ */
+function getCookieValue(name) {
+    var cookiePrefix = name + '=';
+    var matchedCookie = document.cookie.split(';').find(function (item) {return item.includes(cookiePrefix);});
+    if (matchedCookie)
+        return matchedCookie.replace(cookiePrefix, '');
+    return null;
+}
+
+/**
+ * Method for updating the 'PREFS' cookie (or creating it if missing)
+ *
+ * @param {number} newVolume New volume defined (null if unchanged)
+ * @param {number} newSpeed New speed defined (null if unchanged)
+ */
+function updateCookie(newVolume, newSpeed) {
+    var volumeValue = newVolume !== null ? newVolume : video_data.params.volume;
+    var speedValue = newSpeed !== null ? newSpeed : video_data.params.speed;
+
+    var cookieValue = getCookieValue('PREFS');
+    var cookieData;
+
+    if (cookieValue !== null) {
+        var cookieJson = JSON.parse(decodeURIComponent(cookieValue));
+        cookieJson.volume = volumeValue;
+        cookieJson.speed = speedValue;
+        cookieData = encodeURIComponent(JSON.stringify(cookieJson));
+    } else {
+        cookieData = encodeURIComponent(JSON.stringify({ 'volume': volumeValue, 'speed': speedValue }));
+    }
+
+    // Set expiration in 2 year
+    var date = new Date();
+    date.setFullYear(date.getFullYear() + 2);
+
+    var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/;
+    var domainUsed = location.hostname;
+
+    // Fix for a bug in FF where the leading dot in the FQDN is not ignored
+    if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost')
+        domainUsed = '.' + location.hostname;
+
+    var secure = location.protocol.startsWith("https") ? " Secure;" : "";
+
+    document.cookie = 'PREFS=' + cookieData + '; SameSite=Lax; path=/; domain=' +
+        domainUsed + '; expires=' + date.toGMTString() + ';' + secure;
+
+    video_data.params.volume = volumeValue;
+    video_data.params.speed = speedValue;
+}
+
+player.on('ratechange', function () {
+    updateCookie(null, player.playbackRate());
+    if (isMobile()) {
+        player.mobileUi({ touchControls: { seekSeconds: 5 * player.playbackRate() } });
+    }
+});
+
+player.on('volumechange', function () {
+    updateCookie(Math.ceil(player.volume() * 100), null);
+});
+
 player.on('waiting', function () {
     if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) {
-        console.log('Player has caught up to source, resetting playbackRate.')
+        console.info('Player has caught up to source, resetting playbackRate');
         player.playbackRate(1);
     }
 });
@@ -183,19 +299,39 @@ if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.
     player.getChild('bigPlayButton').hide();
 }
 
+if (video_data.params.save_player_pos) {
+    const url = new URL(location);
+    const hasTimeParam = url.searchParams.has('t');
+    const rememberedTime = get_video_time();
+    let lastUpdated = 0;
+
+    if(!hasTimeParam) set_seconds_after_start(rememberedTime);
+
+    player.on('timeupdate', function () {
+        const raw = player.currentTime();
+        const time = Math.floor(raw);
+
+        if(lastUpdated !== time && raw <= video_data.length_seconds - 15) {
+            save_video_time(time);
+            lastUpdated = time;
+        }
+    });
+}
+else remove_all_video_times();
+
 if (video_data.params.autoplay) {
     var bpb = player.getChild('bigPlayButton');
     bpb.hide();
 
     player.ready(function () {
         new Promise(function (resolve, reject) {
-            setTimeout(() => resolve(1), 1);
+            setTimeout(function () {resolve(1);}, 1);
         }).then(function (result) {
             var promise = player.play();
 
             if (promise !== undefined) {
-                promise.then(_ => {
-                }).catch(error => {
+                promise.then(function () {
+                }).catch(function (error) {
                     bpb.show();
                 });
             }
@@ -205,54 +341,387 @@ if (video_data.params.autoplay) {
 
 if (!video_data.params.listen && video_data.params.quality === 'dash') {
     player.httpSourceSelector();
+
+    if (video_data.params.quality_dash !== 'auto') {
+        player.ready(function () {
+            player.on('loadedmetadata', function () {
+                const qualityLevels = Array.from(player.qualityLevels()).sort(function (a, b) {return a.height - b.height;});
+                let targetQualityLevel;
+                switch (video_data.params.quality_dash) {
+                    case 'best':
+                        targetQualityLevel = qualityLevels.length - 1;
+                        break;
+                    case 'worst':
+                        targetQualityLevel = 0;
+                        break;
+                    default:
+                        const targetHeight = parseInt(video_data.params.quality_dash);
+                        for (let i = 0; i < qualityLevels.length; i++) {
+                            if (qualityLevels[i].height <= targetHeight)
+                                targetQualityLevel = i;
+                            else
+                                break;
+                        }
+                }
+                qualityLevels.forEach(function (level, index) {
+                    level.enabled = (index === targetQualityLevel);
+                });
+            });
+        });
+    }
 }
 
 player.vttThumbnails({
-    src: location.origin + '/api/v1/storyboards/' + video_data.id + '?height=90'
+    src: '/api/v1/storyboards/' + video_data.id + '?height=90',
+    showTimestamp: true
 });
 
 // Enable annotations
 if (!video_data.params.listen && video_data.params.annotations) {
-    var video_container = document.getElementById('player');
-    let xhr = new XMLHttpRequest();
-    xhr.responseType = 'text';
-    xhr.timeout = 60000;
-    xhr.open('GET', '/api/v1/annotations/' + video_data.id, true);
+    addEventListener('load', function (e) {
+        addEventListener('__ar_annotation_click', function (e) {
+            const url = e.detail.url,
+                  target = e.detail.target,
+                  seconds = e.detail.seconds;
+            var path = new URL(url);
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
+            if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
+                path.search += '&t=' + seconds;
+            }
+
+            path = path.pathname + path.search;
+
+            if (target === 'current') {
+                location.href = path;
+            } else if (target === 'new') {
+                open(path, '_blank');
+            }
+        });
+
+        helpers.xhr('GET', '/api/v1/annotations/' + video_data.id, {
+            responseType: 'text',
+            timeout: 60000
+        }, {
+            on200: function (response) {
+                var video_container = document.getElementById('player');
                 videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
-                if (!player.paused()) {
-                    player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
-                } else {
+                if (player.paused()) {
                     player.one('play', function (event) {
-                        player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container });
+                        player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
                     });
+                } else {
+                    player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
                 }
             }
-        }
-    }
+        });
 
-    window.addEventListener('__ar_annotation_click', e => {
-        const { url, target, seconds } = e.detail;
-        var path = new URL(url);
-
-        if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
-            path.search += '&t=' + seconds;
-        }
-
-        path = path.pathname + path.search;
-
-        if (target === 'current') {
-            window.location.href = path;
-        } else if (target === 'new') {
-            window.open(path, '_blank');
-        }
     });
-
-    xhr.send();
 }
 
+function change_volume(delta) {
+    const curVolume = player.volume();
+    let newVolume = curVolume + delta;
+    newVolume = helpers.clamp(newVolume, 0, 1);
+    player.volume(newVolume);
+}
+
+function toggle_muted() {
+    player.muted(!player.muted());
+}
+
+function skip_seconds(delta) {
+    const duration = player.duration();
+    const curTime = player.currentTime();
+    let newTime = curTime + delta;
+    newTime = helpers.clamp(newTime, 0, duration);
+    player.currentTime(newTime);
+}
+
+function set_seconds_after_start(delta) {
+    const start = video_data.params.video_start;
+    player.currentTime(start + delta);
+}
+
+function save_video_time(seconds) {
+    const all_video_times = get_all_video_times();
+    all_video_times[video_data.id] = seconds;
+    helpers.storage.set(save_player_pos_key, all_video_times);
+}
+
+function get_video_time() {
+    return get_all_video_times()[video_data.id] || 0;
+}
+
+function get_all_video_times() {
+    return helpers.storage.get(save_player_pos_key) || {};
+}
+
+function remove_all_video_times() {
+    helpers.storage.remove(save_player_pos_key);
+}
+
+function set_time_percent(percent) {
+    const duration = player.duration();
+    const newTime = duration * (percent / 100);
+    player.currentTime(newTime);
+}
+
+function play()  { player.play(); }
+function pause() { player.pause(); }
+function stop()  { player.pause(); player.currentTime(0); }
+function toggle_play() { player.paused() ? play() : pause(); }
+
+const toggle_captions = (function () {
+    let toggledTrack = null;
+
+    function bindChange(onOrOff) {
+        player.textTracks()[onOrOff]('change', function (e) {
+            toggledTrack = null;
+        });
+    }
+
+    // Wrapper function to ignore our own emitted events and only listen
+    // to events emitted by Video.js on click on the captions menu items.
+    function setMode(track, mode) {
+        bindChange('off');
+        track.mode = mode;
+        setTimeout(function () {
+            bindChange('on');
+        }, 0);
+    }
+
+    bindChange('on');
+    return function () {
+        if (toggledTrack !== null) {
+            if (toggledTrack.mode !== 'showing') {
+                setMode(toggledTrack, 'showing');
+            } else {
+                setMode(toggledTrack, 'disabled');
+            }
+            toggledTrack = null;
+            return;
+        }
+
+        // Used as a fallback if no captions are currently active.
+        // TODO: Make this more intelligent by e.g. relying on browser language.
+        let fallbackCaptionsTrack = null;
+
+        const tracks = player.textTracks();
+        for (let i = 0; i < tracks.length; i++) {
+            const track = tracks[i];
+            if (track.kind !== 'captions') continue;
+
+            if (fallbackCaptionsTrack === null) {
+                fallbackCaptionsTrack = track;
+            }
+            if (track.mode === 'showing') {
+                setMode(track, 'disabled');
+                toggledTrack = track;
+                return;
+            }
+        }
+
+        // Fallback if no captions are currently active.
+        if (fallbackCaptionsTrack !== null) {
+            setMode(fallbackCaptionsTrack, 'showing');
+            toggledTrack = fallbackCaptionsTrack;
+        }
+    };
+})();
+
+function toggle_fullscreen() {
+    player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen();
+}
+
+function increase_playback_rate(steps) {
+    const maxIndex = options.playbackRates.length - 1;
+    const curIndex = options.playbackRates.indexOf(player.playbackRate());
+    let newIndex = curIndex + steps;
+    newIndex = helpers.clamp(newIndex, 0, maxIndex);
+    player.playbackRate(options.playbackRates[newIndex]);
+}
+
+addEventListener('keydown', function (e) {
+    if (e.target.tagName.toLowerCase() === 'input') {
+        // Ignore input when focus is on certain elements, e.g. form fields.
+        return;
+    }
+    // See https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L310-L313
+    const isPlayerFocused = false
+        || e.target === document.querySelector('.video-js')
+        || e.target === document.querySelector('.vjs-tech')
+        || e.target === document.querySelector('.iframeblocker')
+        || e.target === document.querySelector('.vjs-control-bar')
+        ;
+    let action = null;
+
+    const code = e.keyCode;
+    const decoratedKey =
+        e.key
+        + (e.altKey ? '+alt' : '')
+        + (e.ctrlKey ? '+ctrl' : '')
+        + (e.metaKey ? '+meta' : '')
+        ;
+    switch (decoratedKey) {
+        case ' ':
+        case 'k':
+        case 'MediaPlayPause':
+            action = toggle_play;
+            break;
+
+        case 'MediaPlay':  action = play; break;
+        case 'MediaPause': action = pause; break;
+        case 'MediaStop':  action = stop; break;
+
+        case 'ArrowUp':
+            if (isPlayerFocused) action = change_volume.bind(this, 0.1);
+            break;
+        case 'ArrowDown':
+            if (isPlayerFocused) action = change_volume.bind(this, -0.1);
+            break;
+
+        case 'm':
+            action = toggle_muted;
+            break;
+
+        case 'ArrowRight':
+        case 'MediaFastForward':
+            action = skip_seconds.bind(this, 5 * player.playbackRate());
+            break;
+        case 'ArrowLeft':
+        case 'MediaTrackPrevious':
+            action = skip_seconds.bind(this, -5 * player.playbackRate());
+            break;
+        case 'l':
+            action = skip_seconds.bind(this, 10 * player.playbackRate());
+            break;
+        case 'j':
+            action = skip_seconds.bind(this, -10 * player.playbackRate());
+            break;
+
+        case '0':
+        case '1':
+        case '2':
+        case '3':
+        case '4':
+        case '5':
+        case '6':
+        case '7':
+        case '8':
+        case '9':
+            // Ignore numpad numbers
+            if (code > 57) break;
+
+            const percent = (code - 48) * 10;
+            action = set_time_percent.bind(this, percent);
+            break;
+
+        case 'c': action = toggle_captions; break;
+        case 'f': action = toggle_fullscreen; break;
+
+        case 'N':
+        case 'MediaTrackNext':
+            action = next_video;
+            break;
+        case 'P':
+        case 'MediaTrackPrevious':
+            // TODO: Add support to play back previous video.
+            break;
+
+        // TODO: More precise step. Now FPS is taken equal to 29.97
+        // Common FPS: https://forum.videohelp.com/threads/81868#post323588
+        // Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/
+        case ',': action = function () { pause(); skip_seconds(-1/29.97); }; break;
+        case '.': action = function () { pause(); skip_seconds( 1/29.97); }; break;
+
+        case '>': action = increase_playback_rate.bind(this, 1); break;
+        case '<': action = increase_playback_rate.bind(this, -1); break;
+
+        default:
+            console.info('Unhandled key down event: %s:', decoratedKey, e);
+            break;
+    }
+
+    if (action) {
+        e.preventDefault();
+        action();
+    }
+}, false);
+
+// Add support for controlling the player volume by scrolling over it. Adapted from
+// https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L292-L328
+(function () {
+    const pEl = document.getElementById('player');
+
+    var volumeHover = false;
+    var volumeSelector = pEl.querySelector('.vjs-volume-menu-button') || pEl.querySelector('.vjs-volume-panel');
+    if (volumeSelector !== null) {
+        volumeSelector.onmouseover = function () { volumeHover = true; };
+        volumeSelector.onmouseout = function () { volumeHover = false; };
+    }
+
+    function mouseScroll(event) {
+        // When controls are disabled, hotkeys will be disabled as well
+        if (!player.controls() || !volumeHover) return;
+
+        event.preventDefault();
+        var wheelMove = event.wheelDelta || -event.detail;
+        var volumeSign = Math.sign(wheelMove);
+
+        change_volume(volumeSign * 0.05); // decrease/increase by 5%
+    }
+
+    player.on('mousewheel', mouseScroll);
+    player.on('DOMMouseScroll', mouseScroll);
+}());
+
 // Since videojs-share can sometimes be blocked, we defer it until last
-player.share(shareOptions);
+if (player.share) player.share(shareOptions);
+
+// show the preferred caption by default
+if (player_data.preferred_caption_found) {
+    player.ready(function () {
+        if (!video_data.params.listen && video_data.params.quality === 'dash') {
+            // play.textTracks()[0] on DASH mode is showing some debug messages
+            player.textTracks()[1].mode = 'showing';
+        } else {
+            player.textTracks()[0].mode = 'showing';
+        }
+    });
+}
+
+// Safari audio double duration fix
+if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) {
+    player.on('loadedmetadata', function () {
+        player.on('timeupdate', function () {
+            if (player.remainingTime() < player.duration() / 2 && player.remainingTime() >= 2) {
+                player.currentTime(player.duration() - 1);
+            }
+        });
+    });
+}
+
+// Watch on Invidious link
+if (location.pathname.startsWith('/embed/')) {
+    const Button = videojs.getComponent('Button');
+    let watch_on_invidious_button = new Button(player);
+
+    // Create hyperlink for current instance
+    var redirect_element = document.createElement('a');
+    redirect_element.setAttribute('href', location.pathname.replace('/embed/', '/watch?v='));
+    redirect_element.appendChild(document.createTextNode('Invidious'));
+
+    watch_on_invidious_button.el().appendChild(redirect_element);
+    watch_on_invidious_button.addClass('watch-on-invidious');
+
+    var cb = player.getChild('ControlBar');
+    cb.addChild(watch_on_invidious_button);
+}
+
+addEventListener('DOMContentLoaded', function () {
+    // Save time during redirection on another instance
+    const changeInstanceLink = document.querySelector('#watch-on-another-invidious-instance > a');
+    if (changeInstanceLink) changeInstanceLink.addEventListener('click', function () {
+        changeInstanceLink.href = addCurrentTimeToURL(changeInstanceLink.href);
+    });
+});

assets/js/playlist_widget.js

@@ -0,0 +1,48 @@
+'use strict';
+var playlist_data = JSON.parse(document.getElementById('playlist_data').textContent);
+var payload = 'csrf_token=' + playlist_data.csrf_token;
+
+function add_playlist_video(target) {
+    var select = target.parentNode.children[0].children[1];
+    var option = select.children[select.selectedIndex];
+
+    var url = '/playlist_ajax?action_add_video=1&redirect=false' +
+        '&video_id=' + target.getAttribute('data-id') +
+        '&playlist_id=' + option.getAttribute('data-plid');
+
+    helpers.xhr('POST', url, {payload: payload}, {
+        on200: function (response) {
+            option.textContent = '✓' + option.textContent;
+        }
+    });
+}
+
+function add_playlist_item(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = 'none';
+
+    var url = '/playlist_ajax?action_add_video=1&redirect=false' +
+        '&video_id=' + target.getAttribute('data-id') +
+        '&playlist_id=' + target.getAttribute('data-plid');
+
+    helpers.xhr('POST', url, {payload: payload}, {
+        onNon200: function (xhr) {
+            tile.style.display = '';
+        }
+    });
+}
+
+function remove_playlist_item(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = 'none';
+
+    var url = '/playlist_ajax?action_remove_video=1&redirect=false' +
+        '&set_video_id=' + target.getAttribute('data-index') +
+        '&playlist_id=' + target.getAttribute('data-plid');
+
+    helpers.xhr('POST', url, {payload: payload}, {
+        onNon200: function (xhr) {
+            tile.style.display = '';
+        }
+    });
+}

assets/js/subscribe_widget.js

@@ -1,5 +1,9 @@
+'use strict';
+var subscribe_data = JSON.parse(document.getElementById('subscribe_data').textContent);
+var payload = 'csrf_token=' + subscribe_data.csrf_token;
+
 var subscribe_button = document.getElementById('subscribe');
-subscribe_button.parentNode['action'] = 'javascript:void(0)';
+subscribe_button.parentNode.action = 'javascript:void(0)';
 
 if (subscribe_button.getAttribute('data-type') === 'subscribe') {
     subscribe_button.onclick = subscribe;
@@ -7,82 +11,34 @@ if (subscribe_button.getAttribute('data-type') === 'subscribe') {
     subscribe_button.onclick = unsubscribe;
 }
 
-function subscribe(retries = 5) {
-    if (retries <= 0) {
-        console.log('Failed to subscribe.');
-        return;
-    }
-
-    var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
-        '&c=' + subscribe_data.ucid;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
+function subscribe() {
     var fallback = subscribe_button.innerHTML;
     subscribe_button.onclick = unsubscribe;
     subscribe_button.innerHTML = '<b>' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                subscribe_button.onclick = subscribe;
-                subscribe_button.innerHTML = fallback;
-            }
+    var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
+        '&c=' + subscribe_data.ucid;
+
+    helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'subscribe request'}, {
+        onNon200: function (xhr) {
+            subscribe_button.onclick = subscribe;
+            subscribe_button.innerHTML = fallback;
         }
-    }
-
-    xhr.onerror = function () {
-        console.log('Subscribing failed... ' + retries + '/5');
-        setTimeout(function () { subscribe(retries - 1) }, 1000);
-    }
-
-    xhr.ontimeout = function () {
-        console.log('Subscribing failed... ' + retries + '/5');
-        subscribe(retries - 1);
-    }
-
-    xhr.send('csrf_token=' + subscribe_data.csrf_token);
+    });
 }
 
-function unsubscribe(retries = 5) {
-    if (retries <= 0) {
-        console.log('Failed to subscribe');
-        return;
-    }
-
-    var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
-        '&c=' + subscribe_data.ucid;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
+function unsubscribe() {
     var fallback = subscribe_button.innerHTML;
     subscribe_button.onclick = subscribe;
     subscribe_button.innerHTML = '<b>' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                subscribe_button.onclick = unsubscribe;
-                subscribe_button.innerHTML = fallback;
-            }
+    var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
+        '&c=' + subscribe_data.ucid;
+
+    helpers.xhr('POST', url, {payload: payload, retries: 5, entity_name: 'unsubscribe request'}, {
+        onNon200: function (xhr) {
+            subscribe_button.onclick = unsubscribe;
+            subscribe_button.innerHTML = fallback;
         }
-    }
-
-    xhr.onerror = function () {
-        console.log('Unsubscribing failed... ' + retries + '/5');
-        setTimeout(function () { unsubscribe(retries - 1) }, 1000);
-    }
-
-    xhr.ontimeout = function () {
-        console.log('Unsubscribing failed... ' + retries + '/5');
-        unsubscribe(retries - 1);
-    }
-
-    xhr.send('csrf_token=' + subscribe_data.csrf_token);
+    });
 }

assets/js/themes.js

@@ -1,35 +1,44 @@
-var toggle_theme = document.getElementById('toggle_theme')
-toggle_theme.href = 'javascript:void(0);';
+'use strict';
+var toggle_theme = document.getElementById('toggle_theme');
+toggle_theme.href = 'javascript:void(0)';
 
+const STORAGE_KEY_THEME = 'dark_mode';
+const THEME_DARK = 'dark';
+const THEME_LIGHT = 'light';
+
+// TODO: theme state controlled by system
 toggle_theme.addEventListener('click', function () {
-    var dark_mode = document.getElementById('dark_theme').media == 'none';
-
-    var url = '/toggle_theme?redirect=false';
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
-
-    set_mode(dark_mode);
-    localStorage.setItem('dark_mode', dark_mode);
-
-    xhr.send();
+    const isDarkTheme = helpers.storage.get(STORAGE_KEY_THEME) === THEME_DARK;
+    const newTheme = isDarkTheme ? THEME_LIGHT : THEME_DARK;
+    setTheme(newTheme);
+    helpers.storage.set(STORAGE_KEY_THEME, newTheme);
+    helpers.xhr('GET', '/toggle_theme?redirect=false', {}, {});
 });
 
-window.addEventListener('storage', function (e) {
-    if (e.key == 'dark_mode') {
-        var dark_mode = e.newValue === 'true';
-        set_mode(dark_mode);
-    }
-});
-
-function set_mode(bool) {
-    document.getElementById('dark_theme').media = !bool ? 'none' : '';
-    document.getElementById('light_theme').media = bool ? 'none' : '';
-
-    if (bool) {
-        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
+/** @param {THEME_DARK|THEME_LIGHT} theme */
+function setTheme(theme) {
+    // By default body element has .no-theme class that uses OS theme via CSS @media rules
+    // It rewrites using hard className below
+    if (theme === THEME_DARK) {
+        toggle_theme.children[0].className = 'icon ion-ios-sunny';
+        document.body.className = 'dark-theme';
     } else {
-        toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
+        toggle_theme.children[0].className = 'icon ion-ios-moon';
+        document.body.className = 'light-theme';
     }
 }
+
+// Handles theme change event caused by other tab
+addEventListener('storage', function (e) {
+    if (e.key === STORAGE_KEY_THEME)
+        setTheme(helpers.storage.get(STORAGE_KEY_THEME));
+});
+
+// Set theme from preferences on page load
+addEventListener('DOMContentLoaded', function () {
+    const prefTheme = document.getElementById('dark_mode_pref').textContent;
+    if (prefTheme) {
+        setTheme(prefTheme);
+        helpers.storage.set(STORAGE_KEY_THEME, prefTheme);
+    }
+});

assets/js/videojs-contrib-quality-levels.min.js

@@ -1,2 +0,0 @@
-/*! @name videojs-contrib-quality-levels @version 2.0.9 @license Apache-2.0 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/document")):"function"==typeof define&&define.amd?define(["video.js","global/document"],t):e.videojsContribQualityLevels=t(e.videojs,e.document)}(this,function(e,t){"use strict";function n(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var r=function(r){var i,l;function o(){var i,l=n(n(i=r.call(this)||this));if(e.browser.IS_IE8)for(var s in l=t.createElement("custom"),o.prototype)"constructor"!==s&&(l[s]=o.prototype[s]);return l.levels_=[],l.selectedIndex_=-1,Object.defineProperty(l,"selectedIndex",{get:function(){return l.selectedIndex_}}),Object.defineProperty(l,"length",{get:function(){return l.levels_.length}}),l||n(i)}l=r,(i=o).prototype=Object.create(l.prototype),i.prototype.constructor=i,i.__proto__=l;var s=o.prototype;return s.addQualityLevel=function(n){var r=this.getQualityLevelById(n.id);if(r)return r;var i=this.levels_.length;return r=new function n(r){var i=this;if(e.browser.IS_IE8)for(var l in i=t.createElement("custom"),n.prototype)"constructor"!==l&&(i[l]=n.prototype[l]);return i.id=r.id,i.label=i.id,i.width=r.width,i.height=r.height,i.bitrate=r.bandwidth,i.enabled_=r.enabled,Object.defineProperty(i,"enabled",{get:function(){return i.enabled_()},set:function(e){i.enabled_(e)}}),i}(n),""+i in this||Object.defineProperty(this,i,{get:function(){return this.levels_[i]}}),this.levels_.push(r),this.trigger({qualityLevel:r,type:"addqualitylevel"}),r},s.removeQualityLevel=function(e){for(var t=null,n=0,r=this.length;n<r;n++)if(this[n]===e){t=this.levels_.splice(n,1)[0],this.selectedIndex_===n?this.selectedIndex_=-1:this.selectedIndex_>n&&this.selectedIndex_--;break}return t&&this.trigger({qualityLevel:e,type:"removequalitylevel"}),t},s.getQualityLevelById=function(e){for(var t=0,n=this.length;t<n;t++){var r=this[t];if(r.id===e)return r}return null},s.dispose=function(){this.selectedIndex_=-1,this.levels_.length=0},o}(e.EventTarget);for(var i in r.prototype.allowedEvents_={change:"change",addqualitylevel:"addqualitylevel",removequalitylevel:"removequalitylevel"},r.prototype.allowedEvents_)r.prototype["on"+i]=null;var l=function(t){return n=this,e.mergeOptions({},t),i=n.qualityLevels,l=new r,n.on("dispose",function e(){l.dispose(),n.qualityLevels=i,n.off("dispose",e)}),n.qualityLevels=function(){return l},n.qualityLevels.VERSION="2.0.9",l;var n,i,l};return(e.registerPlugin||e.plugin)("qualityLevels",l),l.VERSION="2.0.9",l});

assets/js/videojs-http-source-selector.min.js

@@ -1,7 +0,0 @@
-/**
- * videojs-http-source-selector
- * @version 1.1.5
- * @copyright 2019 Justin Fujita <Justin@pivotshare.com>
- * @license MIT
- */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e=e||self)["videojs-http-source-selector"]=t(e.videojs)}(this,function(i){"use strict";function o(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}var a=function(n){function e(e,t){var o;return o=n.call(this,e,t)||this,t.selectable=!0,o}o(e,n);var t=e.prototype;return t.handleClick=function(){var e=this.options_;console.log("Changing quality to:",e.label),this.selected_=!0,this.selected(!0);for(var t=this.player().qualityLevels(),o=0;o<t.length;o++)e.index==t.length?t[o].enabled=!0:e.index==o?t[o].enabled=!0:t[o].enabled=!1},t.update=function(){var e=this.player().qualityLevels().selectedIndex;this.selected(this.options_.index==e),this.selected_=this.options_.index===e},e}((i=i&&i.hasOwnProperty("default")?i.default:i).getComponent("MenuItem")),r=i.getComponent("MenuButton"),n=function(l){function e(e,t){var o;o=l.call(this,e,t)||this,r.apply(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(o),arguments);var n=o.player().qualityLevels();if(t&&t.default)if("low"==t.default)for(var i=0;i<n.length;i++)n[i].enabled=0==i;else if(t.default="high")for(i=0;i<n.length;i++)n[i].enabled=i==n.length-1;return o}o(e,l);var t=e.prototype;return t.createEl=function(){return i.dom.createEl("div",{className:"vjs-http-source-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"})},t.buildCSSClass=function(){return r.prototype.buildCSSClass.call(this)+" vjs-icon-cog"},t.update=function(){return r.prototype.update.call(this)},t.createItems=function(){for(var e=[],t=this.player().qualityLevels(),o=[],n=0;n<t.length;n++){var i=t.length-(n+1),l=i===t.selectedIndex,r=""+i,s=i;t[i].height?(r=t[i].height+"p",s=parseInt(t[i].height,10)):t[i].bitrate&&(r=Math.floor(t[i].bitrate/1e3)+" kbps",s=parseInt(t[i].bitrate,10)),0<=o.indexOf(r)||(o.push(r),e.push(new a(this.player_,{label:r,index:i,selected:l,sortVal:s})))}return 1<t.length&&e.push(new a(this.player_,{label:"Auto",index:t.length,selected:!1,sortVal:99999})),e.sort(function(e,t){return e.options_.sortVal<t.options_.sortVal?1:e.options_.sortVal>t.options_.sortVal?-1:0}),e},e}(r),l={},e=i.registerPlugin||i.plugin,t=function(e){var t=this;this.ready(function(){!function(n,e){if(n.addClass("vjs-http-source-selector"),console.log("videojs-http-source-selector initialized!"),console.log("player.techName_:"+n.techName_),"Html5"!=n.techName_)return;n.on(["loadedmetadata"],function(e){if(n.qualityLevels(),i.log("loadmetadata event"),"undefined"==n.videojs_http_source_selector_initialized||1==n.videojs_http_source_selector_initialized)console.log("player.videojs_http_source_selector_initialized == true");else{console.log("player.videojs_http_source_selector_initialized == false"),n.videojs_http_source_selector_initialized=!0;var t=n.controlBar,o=t.getChild("fullscreenToggle").el();t.el().insertBefore(t.addChild("SourceMenuButton").el(),o)}})}(t,i.mergeOptions(l,e))}),i.registerComponent("SourceMenuButton",n),i.registerComponent("SourceMenuItem",a)};return e("httpSourceSelector",t),t.VERSION="1.1.5",t});

assets/js/videojs-overlay.min.js

@@ -1,2 +0,0 @@
-/*! @name videojs-overlay @version 2.1.4 @license Apache-2.0 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("video.js"),require("global/window")):"function"==typeof define&&define.amd?define(["video.js","global/window"],e):t.videojsOverlay=e(t.videojs,t.window)}(this,function(t,e){"use strict";function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var r={align:"top-left",class:"",content:"This overlay will show up while the video is playing",debug:!1,showBackground:!0,attachToControlBar:!1,overlays:[{start:"playing",end:"paused"}]},i=t.getComponent("Component"),o=t.dom||t,s=t.registerPlugin||t.plugin,a=function(t){return"number"==typeof t&&t==t},h=function(t){return"string"==typeof t&&/^\S+$/.test(t)},d=function(r){var i,s;function d(t,e){var i;return i=r.call(this,t,e)||this,["start","end"].forEach(function(t){var e=i.options_[t];if(a(e))i[t+"Event_"]="timeupdate";else if(h(e))i[t+"Event_"]=e;else if("start"===t)throw new Error('invalid "start" option; expected number or string')}),["endListener_","rewindListener_","startListener_"].forEach(function(t){i[t]=function(e){return d.prototype[t].call(n(n(i)),e)}}),"timeupdate"===i.startEvent_&&i.on(t,"timeupdate",i.rewindListener_),i.debug('created, listening to "'+i.startEvent_+'" for "start" and "'+(i.endEvent_||"nothing")+'" for "end"'),i.hide(),i}s=r,(i=d).prototype=Object.create(s.prototype),i.prototype.constructor=i,i.__proto__=s;var l=d.prototype;return l.createEl=function(){var t=this.options_,n=t.content,r=t.showBackground?"vjs-overlay-background":"vjs-overlay-no-background",i=o.createEl("div",{className:"\n        vjs-overlay\n        vjs-overlay-"+t.align+"\n        "+t.class+"\n        "+r+"\n        vjs-hidden\n      "});return"string"==typeof n?i.innerHTML=n:n instanceof e.DocumentFragment?i.appendChild(n):o.appendContent(i,n),i},l.debug=function(){if(this.options_.debug){for(var e=t.log,n=e,r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];e.hasOwnProperty(i[0])&&"function"==typeof e[i[0]]&&(n=e[i.shift()]),n.apply(void 0,["overlay#"+this.id()+": "].concat(i))}},l.hide=function(){return r.prototype.hide.call(this),this.debug("hidden"),this.debug('bound `startListener_` to "'+this.startEvent_+'"'),this.endEvent_&&(this.debug('unbound `endListener_` from "'+this.endEvent_+'"'),this.off(this.player(),this.endEvent_,this.endListener_)),this.on(this.player(),this.startEvent_,this.startListener_),this},l.shouldHide_=function(t,e){var n=this.options_.end;return a(n)?t>=n:n===e},l.show=function(){return r.prototype.show.call(this),this.off(this.player(),this.startEvent_,this.startListener_),this.debug("shown"),this.debug('unbound `startListener_` from "'+this.startEvent_+'"'),this.endEvent_&&(this.debug('bound `endListener_` to "'+this.endEvent_+'"'),this.on(this.player(),this.endEvent_,this.endListener_)),this},l.shouldShow_=function(t,e){var n=this.options_.start,r=this.options_.end;return a(n)?a(r)?t>=n&&t<r:this.hasShownSinceSeek_?Math.floor(t)===n:(this.hasShownSinceSeek_=!0,t>=n):n===e},l.startListener_=function(t){var e=this.player().currentTime();this.shouldShow_(e,t.type)&&this.show()},l.endListener_=function(t){var e=this.player().currentTime();this.shouldHide_(e,t.type)&&this.hide()},l.rewindListener_=function(t){var e=this.player().currentTime(),n=this.previousTime_,r=this.options_.start,i=this.options_.end;e<n&&(this.debug("rewind detected"),a(i)&&!this.shouldShow_(e)?(this.debug("hiding; "+i+" is an integer and overlay should not show at this time"),this.hasShownSinceSeek_=!1,this.hide()):h(i)&&e<r&&(this.debug("hiding; show point ("+r+") is before now ("+e+") and end point ("+i+") is an event"),this.hasShownSinceSeek_=!1,this.hide())),this.previousTime_=e},d}(i);t.registerComponent("Overlay",d);var l=function(e){var n=this,i=t.mergeOptions(r,e);Array.isArray(this.overlays_)&&this.overlays_.forEach(function(t){n.removeChild(t),n.controlBar&&n.controlBar.removeChild(t),t.dispose()});var o=i.overlays;delete i.overlays,this.overlays_=o.map(function(e){var r=t.mergeOptions(i,e),o="string"==typeof r.attachToControlBar||!0===r.attachToControlBar;if(!n.controls()||!n.controlBar)return n.addChild("overlay",r);if(o&&-1!==r.align.indexOf("bottom")){var s=n.controlBar.children()[0];if(void 0!==n.controlBar.getChild(r.attachToControlBar)&&(s=n.controlBar.getChild(r.attachToControlBar)),s){var a=n.controlBar.addChild("overlay",r);return n.controlBar.el().insertBefore(a.el(),s.el()),a}}var h=n.addChild("overlay",r);return n.el().insertBefore(h.el(),n.controlBar.el()),h})};return l.VERSION="2.1.4",s("overlay",l),l});

assets/js/videojs.hotkeys.min.js

@@ -1,2 +0,0 @@
-/* videojs-hotkeys v0.2.25 - https://github.com/ctd1500/videojs-hotkeys */
-!function(e,n){"undefined"!=typeof window&&window.videojs?n(window.videojs):"function"==typeof define&&define.amd?define("videojs-hotkeys",["video.js"],function(e){return n(e.default||e)}):"undefined"!=typeof module&&module.exports&&(module.exports=n(require("video.js")))}(0,function(e){"use strict";"undefined"!=typeof window&&(window.videojs_hotkeys={version:"0.2.25"});(e.registerPlugin||e.plugin)("hotkeys",function(n){function t(e){return"function"==typeof s?s(e):s}function r(e){null!=e&&"function"==typeof e.then&&e.then(null,function(e){})}var o=this,u=o.el(),l=document,i={volumeStep:.1,seekStep:5,enableMute:!0,enableVolumeScroll:!0,enableHoverScroll:!1,enableFullscreen:!0,enableNumbers:!0,enableJogStyle:!1,alwaysCaptureHotkeys:!1,enableModifiersForNumbers:!0,enableInactiveFocus:!0,skipInitialFocus:!1,playPauseKey:function(e){return 32===e.which||179===e.which},rewindKey:function(e){return 37===e.which||177===e.which},forwardKey:function(e){return 39===e.which||176===e.which},volumeUpKey:function(e){return 38===e.which},volumeDownKey:function(e){return 40===e.which},muteKey:function(e){return 77===e.which},fullscreenKey:function(e){return 70===e.which},customKeys:{}},c=e.mergeOptions||e.util.mergeOptions,a=(n=c(i,n||{})).volumeStep,s=n.seekStep,m=n.enableMute,f=n.enableVolumeScroll,y=n.enableHoverScroll,v=n.enableFullscreen,d=n.enableNumbers,p=n.enableJogStyle,b=n.alwaysCaptureHotkeys,h=n.enableModifiersForNumbers,w=n.enableInactiveFocus,k=n.skipInitialFocus,S=e.VERSION;u.hasAttribute("tabIndex")||u.setAttribute("tabIndex","-1"),u.style.outline="none",!b&&o.autoplay()||k||o.one("play",function(){u.focus()}),w&&o.on("userinactive",function(){var e=function(){clearTimeout(n)},n=setTimeout(function(){o.off("useractive",e);var n=l.activeElement,t=u.querySelector(".vjs-control-bar");n&&n.parentElement==t&&u.focus()},10);o.one("useractive",e)}),o.on("play",function(){var e=u.querySelector(".iframeblocker");e&&""===e.style.display&&(e.style.display="block",e.style.bottom="39px")});var K=!1,q=u.querySelector(".vjs-volume-menu-button")||u.querySelector(".vjs-volume-panel");null!=q&&(q.onmouseover=function(){K=!0},q.onmouseout=function(){K=!1});var j=function(e){if(y)n=0;else var n=l.activeElement;if(o.controls()&&(b||n==u||n==u.querySelector(".vjs-tech")||n==u.querySelector(".iframeblocker")||n==u.querySelector(".vjs-control-bar")||K)&&f){e=window.event||e;var t=Math.max(-1,Math.min(1,e.wheelDelta||-e.detail));e.preventDefault(),1==t?o.volume(o.volume()+a):-1==t&&o.volume(o.volume()-a)}},F=function(e,t){return n.playPauseKey(e,t)?1:n.rewindKey(e,t)?2:n.forwardKey(e,t)?3:n.volumeUpKey(e,t)?4:n.volumeDownKey(e,t)?5:n.muteKey(e,t)?6:n.fullscreenKey(e,t)?7:void 0};return o.on("keydown",function(e){var i,c,s=e.which,f=e.preventDefault,y=o.duration();if(o.controls()){var w=l.activeElement;if(b||w==u||w==u.querySelector(".vjs-tech")||w==u.querySelector(".vjs-control-bar")||w==u.querySelector(".iframeblocker"))switch(F(e,o)){case 1:f(),b&&e.stopPropagation(),o.paused()?r(o.play()):o.pause();break;case 2:i=!o.paused(),f(),i&&o.pause(),(c=o.currentTime()-t(e))<=0&&(c=0),o.currentTime(c),i&&r(o.play());break;case 3:i=!o.paused(),f(),i&&o.pause(),(c=o.currentTime()+t(e))>=y&&(c=i?y-.001:y),o.currentTime(c),i&&r(o.play());break;case 5:f(),p?(c=o.currentTime()-1,o.currentTime()<=1&&(c=0),o.currentTime(c)):o.volume(o.volume()-a);break;case 4:f(),p?((c=o.currentTime()+1)>=y&&(c=y),o.currentTime(c)):o.volume(o.volume()+a);break;case 6:m&&o.muted(!o.muted());break;case 7:v&&(o.isFullscreen()?o.exitFullscreen():o.requestFullscreen());break;default:if((s>47&&s<59||s>95&&s<106)&&(h||!(e.metaKey||e.ctrlKey||e.altKey))&&d){var k=48;s>95&&(k=96);var S=s-k;f(),o.currentTime(o.duration()*S*.1)}for(var K in n.customKeys){var q=n.customKeys[K];q&&q.key&&q.handler&&q.key(e)&&(f(),q.handler(o,n,e))}}}}),o.on("dblclick",function(e){if(null!=S&&S<="7.1.0"&&o.controls()){var n=e.relatedTarget||e.toElement||l.activeElement;n!=u&&n!=u.querySelector(".vjs-tech")&&n!=u.querySelector(".iframeblocker")||v&&(o.isFullscreen()?o.exitFullscreen():o.requestFullscreen())}}),o.on("mousewheel",j),o.on("DOMMouseScroll",j),this})});

assets/js/watch.js

@@ -1,30 +1,35 @@
+'use strict';
+var video_data = JSON.parse(document.getElementById('video_data').textContent);
+var spinnerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+var spinnerHTMLwithHR = spinnerHTML + '<hr>';
+
 String.prototype.supplant = function (o) {
     return this.replace(/{([^{}]*)}/g, function (a, b) {
         var r = o[b];
         return typeof r === 'string' || typeof r === 'number' ? r : a;
     });
-}
+};
 
 function toggle_parent(target) {
-    body = target.parentNode.parentNode.children[1];
-    if (body.style.display === null || body.style.display === '') {
-        target.innerHTML = '[ + ]';
-        body.style.display = 'none';
-    } else {
-        target.innerHTML = '[ - ]';
+    var body = target.parentNode.parentNode.children[1];
+    if (body.style.display === 'none') {
+        target.textContent = '[ − ]';
         body.style.display = '';
+    } else {
+        target.textContent = '[ + ]';
+        body.style.display = 'none';
     }
 }
 
 function toggle_comments(event) {
     var target = event.target;
-    body = target.parentNode.parentNode.parentNode.children[1];
-    if (body.style.display === null || body.style.display === '') {
-        target.innerHTML = '[ + ]';
-        body.style.display = 'none';
-    } else {
-        target.innerHTML = '[ - ]';
+    var body = target.parentNode.parentNode.parentNode.children[1];
+    if (body.style.display === 'none') {
+        target.textContent = '[ − ]';
         body.style.display = '';
+    } else {
+        target.textContent = '[ + ]';
+        body.style.display = 'none';
     }
 }
 
@@ -41,13 +46,13 @@ function swap_comments(event) {
 function hide_youtube_replies(event) {
     var target = event.target;
 
-    sub_text = target.getAttribute('data-inner-text');
-    inner_text = target.getAttribute('data-sub-text');
+    var sub_text = target.getAttribute('data-inner-text');
+    var inner_text = target.getAttribute('data-sub-text');
 
-    body = target.parentNode.parentNode.children[1];
+    var body = target.parentNode.parentNode.children[1];
     body.style.display = 'none';
 
-    target.innerHTML = sub_text;
+    target.textContent = sub_text;
     target.onclick = show_youtube_replies;
     target.setAttribute('data-inner-text', inner_text);
     target.setAttribute('data-sub-text', sub_text);
@@ -56,13 +61,13 @@ function hide_youtube_replies(event) {
 function show_youtube_replies(event) {
     var target = event.target;
 
-    sub_text = target.getAttribute('data-inner-text');
-    inner_text = target.getAttribute('data-sub-text');
+    var sub_text = target.getAttribute('data-inner-text');
+    var inner_text = target.getAttribute('data-sub-text');
 
-    body = target.parentNode.parentNode.children[1];
+    var body = target.parentNode.parentNode.children[1];
     body.style.display = '';
 
-    target.innerHTML = sub_text;
+    target.textContent = sub_text;
     target.onclick = hide_youtube_replies;
     target.setAttribute('data-inner-text', inner_text);
     target.setAttribute('data-sub-text', sub_text);
@@ -73,374 +78,273 @@ if (continue_button) {
     continue_button.onclick = continue_autoplay;
 }
 
+function next_video() {
+    var url = new URL('https://example.com/watch?v=' + video_data.next_video);
+
+    if (video_data.params.autoplay || video_data.params.continue_autoplay)
+        url.searchParams.set('autoplay', '1');
+    if (video_data.params.listen !== video_data.preferences.listen)
+        url.searchParams.set('listen', video_data.params.listen);
+    if (video_data.params.speed !== video_data.preferences.speed)
+        url.searchParams.set('speed', video_data.params.speed);
+    if (video_data.params.local !== video_data.preferences.local)
+        url.searchParams.set('local', video_data.params.local);
+    url.searchParams.set('continue', '1');
+
+    location.assign(url.pathname + url.search);
+}
+
 function continue_autoplay(event) {
     if (event.target.checked) {
-        player.on('ended', function () {
-            var url = new URL('https://example.com/watch?v=' + video_data.next_video);
-
-            if (video_data.params.autoplay || video_data.params.continue_autoplay) {
-                url.searchParams.set('autoplay', '1');
-            }
-
-            if (video_data.params.listen !== video_data.preferences.listen) {
-                url.searchParams.set('listen', video_data.params.listen);
-            }
-
-            if (video_data.params.speed !== video_data.preferences.speed) {
-                url.searchParams.set('speed', video_data.params.speed);
-            }
-
-            if (video_data.params.local !== video_data.preferences.local) {
-                url.searchParams.set('local', video_data.params.local);
-            }
-
-            url.searchParams.set('continue', '1');
-            location.assign(url.pathname + url.search);
-        });
+        player.on('ended', next_video);
     } else {
         player.off('ended');
     }
 }
 
-function number_with_separator(val) {
-    while (/(\d+)(\d{3})/.test(val.toString())) {
-        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
-    }
-    return val;
-}
+function get_playlist(plid) {
+    var playlist = document.getElementById('playlist');
 
-function get_playlist(plid, retries = 5) {
-    playlist = document.getElementById('playlist');
-
-    if (retries <= 0) {
-        console.log('Failed to pull playlist');
-        playlist.innerHTML = '';
-        return;
-    }
-
-    playlist.innerHTML = ' \
-        <h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
-        <hr>'
+    playlist.innerHTML = spinnerHTMLwithHR;
 
+    var plid_url;
     if (plid.startsWith('RD')) {
-        var plid_url = '/api/v1/mixes/' + plid +
+        plid_url = '/api/v1/mixes/' + plid +
             '?continuation=' + video_data.id +
             '&format=html&hl=' + video_data.preferences.locale;
     } else {
-        var plid_url = '/api/v1/playlists/' + plid +
-            '?continuation=' + video_data.id +
+        plid_url = '/api/v1/playlists/' + plid +
+            '?index=' + video_data.index +
+            '&continuation=' + video_data.id +
             '&format=html&hl=' + video_data.preferences.locale;
     }
 
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', plid_url, true);
+    helpers.xhr('GET', plid_url, {retries: 5, entity_name: 'playlist'}, {
+        on200: function (response) {
+            playlist.innerHTML = response.playlistHtml;
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                playlist.innerHTML = xhr.response.playlistHtml;
+            if (!response.nextVideo) return;
 
-                if (xhr.response.nextVideo) {
-                    player.on('ended', function () {
-                        var url = new URL('https://example.com/watch?v=' + xhr.response.nextVideo);
+            var nextVideo = document.getElementById(response.nextVideo);
+            nextVideo.parentNode.parentNode.scrollTop = nextVideo.offsetTop;
 
-                        if (video_data.params.autoplay || video_data.params.continue_autoplay) {
-                            url.searchParams.set('autoplay', '1');
-                        }
+            player.on('ended', function () {
+                var url = new URL('https://example.com/watch?v=' + response.nextVideo);
 
-                        if (video_data.params.listen !== video_data.preferences.listen) {
-                            url.searchParams.set('listen', video_data.params.listen);
-                        }
+                url.searchParams.set('list', plid);
+                if (!plid.startsWith('RD'))
+                    url.searchParams.set('index', response.index);
+                if (video_data.params.autoplay || video_data.params.continue_autoplay)
+                    url.searchParams.set('autoplay', '1');
+                if (video_data.params.listen !== video_data.preferences.listen)
+                    url.searchParams.set('listen', video_data.params.listen);
+                if (video_data.params.speed !== video_data.preferences.speed)
+                    url.searchParams.set('speed', video_data.params.speed);
+                if (video_data.params.local !== video_data.preferences.local)
+                    url.searchParams.set('local', video_data.params.local);
 
-                        if (video_data.params.speed !== video_data.preferences.speed) {
-                            url.searchParams.set('speed', video_data.params.speed);
-                        }
-
-                        if (video_data.params.local !== video_data.preferences.local) {
-                            url.searchParams.set('local', video_data.params.local);
-                        }
-
-                        url.searchParams.set('list', plid);
-                        location.assign(url.pathname + url.search);
-                    });
-                }
-            } else {
-                playlist.innerHTML = '';
-                document.getElementById('continue').style.display = '';
-            }
+                location.assign(url.pathname + url.search);
+            });
+        },
+        onNon200: function (xhr) {
+            playlist.innerHTML = '';
+            document.getElementById('continue').style.display = '';
+        },
+        onError: function (xhr) {
+            playlist.innerHTML = spinnerHTMLwithHR;
+        },
+        onTimeout: function (xhr) {
+            playlist.innerHTML = spinnerHTMLwithHR;
         }
-    }
-
-    xhr.onerror = function () {
-        playlist = document.getElementById('playlist');
-        playlist.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
-
-        console.log('Pulling playlist timed out... ' + retries + '/5');
-        setTimeout(function () { get_playlist(plid, retries - 1) }, 1000);
-    }
-
-    xhr.ontimeout = function () {
-        playlist = document.getElementById('playlist');
-        playlist.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
-
-        console.log('Pulling playlist timed out... ' + retries + '/5');
-        get_playlist(plid, retries - 1);
-    }
-
-    xhr.send();
+    });
 }
 
-function get_reddit_comments(retries = 5) {
-    comments = document.getElementById('comments');
-
-    if (retries <= 0) {
-        console.log('Failed to pull comments');
-        comments.innerHTML = '';
-        return;
-    }
+function get_reddit_comments() {
+    var comments = document.getElementById('comments');
 
     var fallback = comments.innerHTML;
-    comments.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+    comments.innerHTML = spinnerHTML;
 
     var url = '/api/v1/comments/' + video_data.id +
         '?source=reddit&format=html' +
         '&hl=' + video_data.preferences.locale;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                comments.innerHTML = ' \
-                <div> \
-                    <h3> \
-                        <a href="javascript:void(0)">[ - ]</a> \
-                        {title} \
-                    </h3> \
-                    <p> \
-                        <b> \
-                            <a href="javascript:void(0)" data-comments="youtube"> \
-                                {youtubeCommentsText} \
-                            </a> \
-                        </b> \
-                    </p> \
+    var onNon200 = function (xhr) { comments.innerHTML = fallback; };
+    if (video_data.params.comments[1] === 'youtube')
+        onNon200 = function (xhr) {};
+
+    helpers.xhr('GET', url, {retries: 5, entity_name: ''}, {
+        on200: function (response) {
+            comments.innerHTML = ' \
+            <div> \
+                <h3> \
+                    <a href="javascript:void(0)">[ − ]</a> \
+                    {title} \
+                </h3> \
+                <p> \
                     <b> \
-                        <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">{redditPermalinkText}</a> \
+                        <a href="javascript:void(0)" data-comments="youtube"> \
+                            {youtubeCommentsText} \
+                        </a> \
                     </b> \
-                </div> \
-                <div>{contentHtml}</div> \
-                <hr>'.supplant({
-                    title: xhr.response.title,
-                    youtubeCommentsText: video_data.youtube_comments_text,
-                    redditPermalinkText: video_data.reddit_permalink_text,
-                    permalink: xhr.response.permalink,
-                    contentHtml: xhr.response.contentHtml
-                });
+                </p> \
+                <b> \
+                    <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">{redditPermalinkText}</a> \
+                </b> \
+            </div> \
+            <div>{contentHtml}</div> \
+            <hr>'.supplant({
+                title: response.title,
+                youtubeCommentsText: video_data.youtube_comments_text,
+                redditPermalinkText: video_data.reddit_permalink_text,
+                permalink: response.permalink,
+                contentHtml: response.contentHtml
+            });
 
-                comments.children[0].children[0].children[0].onclick = toggle_comments;
-                comments.children[0].children[1].children[0].onclick = swap_comments;
-            } else {
-                if (video_data.params.comments[1] === 'youtube') {
-                    console.log('Pulling comments failed... ' + retries + '/5');
-                    setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
-                } else {
-                    comments.innerHTML = fallback;
-                }
-            }
-        }
-    }
-
-    xhr.onerror = function () {
-        console.log('Pulling comments failed... ' + retries + '/5');
-        setInterval(function () { get_reddit_comments(retries - 1) }, 1000);
-    }
-
-    xhr.ontimeout = function () {
-        console.log('Pulling comments failed... ' + retries + '/5');
-        get_reddit_comments(retries - 1);
-    }
-
-    xhr.send();
+            comments.children[0].children[0].children[0].onclick = toggle_comments;
+            comments.children[0].children[1].children[0].onclick = swap_comments;
+        },
+        onNon200: onNon200, // declared above
+    });
 }
 
-function get_youtube_comments(retries = 5) {
-    comments = document.getElementById('comments');
-
-    if (retries <= 0) {
-        console.log('Failed to pull comments');
-        comments.innerHTML = '';
-        return;
-    }
+function get_youtube_comments() {
+    var comments = document.getElementById('comments');
 
     var fallback = comments.innerHTML;
-    comments.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+    comments.innerHTML = spinnerHTML;
 
     var url = '/api/v1/comments/' + video_data.id +
         '?format=html' +
         '&hl=' + video_data.preferences.locale +
         '&thin_mode=' + video_data.preferences.thin_mode;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                comments.innerHTML = ' \
-                <div> \
-                    <h3> \
-                        <a href="javascript:void(0)">[ - ]</a> \
-                        {commentsText}  \
-                    </h3> \
-                    <b> \
-                        <a href="javascript:void(0)" data-comments="reddit"> \
-                            {redditComments} \
-                        </a> \
-                    </b> \
-                </div> \
-                <div>{contentHtml}</div> \
-                <hr>'.supplant({
-                    contentHtml: xhr.response.contentHtml,
-                    redditComments: video_data.reddit_comments_text,
-                    commentsText: video_data.comments_text.supplant(
-                        { commentCount: number_with_separator(xhr.response.commentCount) }
-                    )
-                });
+    var onNon200 = function (xhr) { comments.innerHTML = fallback; };
+    if (video_data.params.comments[1] === 'youtube')
+        onNon200 = function (xhr) {};
 
-                comments.children[0].children[0].children[0].onclick = toggle_comments;
-                comments.children[0].children[1].children[0].onclick = swap_comments;
-            } else {
-                if (video_data.params.comments[1] === 'youtube') {
-                    setTimeout(function () { get_youtube_comments(retries - 1) }, 1000);
-                } else {
-                    comments.innerHTML = '';
-                }
-            }
+    helpers.xhr('GET', url, {retries: 5, entity_name: 'comments'}, {
+        on200: function (response) {
+            comments.innerHTML = ' \
+            <div> \
+                <h3> \
+                    <a href="javascript:void(0)">[ − ]</a> \
+                    {commentsText}  \
+                </h3> \
+                <b> \
+                    <a href="javascript:void(0)" data-comments="reddit"> \
+                        {redditComments} \
+                    </a> \
+                </b> \
+            </div> \
+            <div>{contentHtml}</div> \
+            <hr>'.supplant({
+                contentHtml: response.contentHtml,
+                redditComments: video_data.reddit_comments_text,
+                commentsText: video_data.comments_text.supplant({
+                    // toLocaleString correctly splits number with local thousands separator. e.g.:
+                    // '1,234,567.89' for user with English locale
+                    // '1 234 567,89' for user with Russian locale
+                    // '1.234.567,89' for user with Portuguese locale
+                    commentCount: response.commentCount.toLocaleString()
+                })
+            });
+
+            comments.children[0].children[0].children[0].onclick = toggle_comments;
+            comments.children[0].children[1].children[0].onclick = swap_comments;
+        },
+        onNon200: onNon200, // declared above
+        onError: function (xhr) {
+            comments.innerHTML = spinnerHTML;
+        },
+        onTimeout: function (xhr) {
+            comments.innerHTML = spinnerHTML;
         }
-    }
-
-    xhr.onerror = function () {
-        comments.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-        console.log('Pulling comments failed... ' + retries + '/5');
-        setInterval(function () { get_youtube_comments(retries - 1) }, 1000);
-    }
-
-    xhr.ontimeout = function () {
-        comments.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-        console.log('Pulling comments failed... ' + retries + '/5');
-        get_youtube_comments(retries - 1);
-    }
-
-    xhr.send();
+    });
 }
 
-function get_youtube_replies(target, load_more) {
+function get_youtube_replies(target, load_more, load_replies) {
     var continuation = target.getAttribute('data-continuation');
 
     var body = target.parentNode.parentNode;
     var fallback = body.innerHTML;
-    body.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+    body.innerHTML = spinnerHTML;
 
     var url = '/api/v1/comments/' + video_data.id +
         '?format=html' +
         '&hl=' + video_data.preferences.locale +
         '&thin_mode=' + video_data.preferences.thin_mode +
         '&continuation=' + continuation;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
+    if (load_replies) url += '&action=action_get_comment_replies';
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                if (load_more) {
-                    body = body.parentNode.parentNode;
-                    body.removeChild(body.lastElementChild);
-                    body.innerHTML += xhr.response.contentHtml;
-                } else {
-                    body.removeChild(body.lastElementChild);
-
-                    var p = document.createElement('p');
-                    var a = document.createElement('a');
-                    p.appendChild(a);
-
-                    a.href = 'javascript:void(0)';
-                    a.onclick = hide_youtube_replies;
-                    a.setAttribute('data-sub-text', video_data.hide_replies_text);
-                    a.setAttribute('data-inner-text', video_data.show_replies_text);
-                    a.innerText = video_data.hide_replies_text;
-
-                    var div = document.createElement('div');
-                    div.innerHTML = xhr.response.contentHtml;
-
-                    body.appendChild(p);
-                    body.appendChild(div);
-                }
+    helpers.xhr('GET', url, {}, {
+        on200: function (response) {
+            if (load_more) {
+                body = body.parentNode.parentNode;
+                body.removeChild(body.lastElementChild);
+                body.innerHTML += response.contentHtml;
             } else {
-                body.innerHTML = fallback;
+                body.removeChild(body.lastElementChild);
+
+                var p = document.createElement('p');
+                var a = document.createElement('a');
+                p.appendChild(a);
+
+                a.href = 'javascript:void(0)';
+                a.onclick = hide_youtube_replies;
+                a.setAttribute('data-sub-text', video_data.hide_replies_text);
+                a.setAttribute('data-inner-text', video_data.show_replies_text);
+                a.textContent = video_data.hide_replies_text;
+
+                var div = document.createElement('div');
+                div.innerHTML = response.contentHtml;
+
+                body.appendChild(p);
+                body.appendChild(div);
             }
+        },
+        onNon200: function (xhr) {
+            body.innerHTML = fallback;
+        },
+        onTimeout: function (xhr) {
+            console.warn('Pulling comments failed');
+            body.innerHTML = fallback;
         }
-    }
-
-    xhr.ontimeout = function () {
-        console.log('Pulling comments failed.');
-        body.innerHTML = fallback;
-    }
-
-    xhr.send();
+    });
 }
 
 if (video_data.play_next) {
     player.on('ended', function () {
         var url = new URL('https://example.com/watch?v=' + video_data.next_video);
 
-        if (video_data.params.autoplay || video_data.params.continue_autoplay) {
+        if (video_data.params.autoplay || video_data.params.continue_autoplay)
             url.searchParams.set('autoplay', '1');
-        }
-
-        if (video_data.params.listen !== video_data.preferences.listen) {
+        if (video_data.params.listen !== video_data.preferences.listen)
             url.searchParams.set('listen', video_data.params.listen);
-        }
-
-        if (video_data.params.speed !== video_data.preferences.speed) {
+        if (video_data.params.speed !== video_data.preferences.speed)
             url.searchParams.set('speed', video_data.params.speed);
-        }
-
-        if (video_data.params.local !== video_data.preferences.local) {
+        if (video_data.params.local !== video_data.preferences.local)
             url.searchParams.set('local', video_data.params.local);
-        }
-
         url.searchParams.set('continue', '1');
+
         location.assign(url.pathname + url.search);
     });
 }
 
-if (video_data.plid) {
-    get_playlist(video_data.plid);
-}
+addEventListener('load', function (e) {
+    if (video_data.plid)
+        get_playlist(video_data.plid);
 
-if (video_data.params.comments[0] === 'youtube') {
-    get_youtube_comments();
-} else if (video_data.params.comments[0] === 'reddit') {
-    get_reddit_comments();
-} else if (video_data.params.comments[1] === 'youtube') {
-    get_youtube_comments();
-} else if (video_data.params.comments[1] === 'reddit') {
-    get_reddit_comments();
-} else {
-    comments = document.getElementById('comments');
-    comments.innerHTML = '';
-}
+    if (video_data.params.comments[0] === 'youtube') {
+        get_youtube_comments();
+    } else if (video_data.params.comments[0] === 'reddit') {
+        get_reddit_comments();
+    } else if (video_data.params.comments[1] === 'youtube') {
+        get_youtube_comments();
+    } else if (video_data.params.comments[1] === 'reddit') {
+        get_reddit_comments();
+    } else {
+        var comments = document.getElementById('comments');
+        comments.innerHTML = '';
+    }
+});

assets/js/watched_widget.js

@@ -1,48 +1,34 @@
+'use strict';
+var watched_data = JSON.parse(document.getElementById('watched_data').textContent);
+var payload = 'csrf_token=' + watched_data.csrf_token;
+
 function mark_watched(target) {
     var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
     tile.style.display = 'none';
 
     var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
         '&id=' + target.getAttribute('data-id');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                tile.style.display = '';
-            }
+    helpers.xhr('POST', url, {payload: payload}, {
+        onNon200: function (xhr) {
+            tile.style.display = '';
         }
-    }
-
-    xhr.send('csrf_token=' + watched_data.csrf_token);
+    });
 }
 
 function mark_unwatched(target) {
     var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
     tile.style.display = 'none';
-    var count = document.getElementById('count')
-    count.innerText = count.innerText - 1;
+    var count = document.getElementById('count');
+    count.textContent--;
 
     var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
         '&id=' + target.getAttribute('data-id');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                count.innerText = count.innerText - 1 + 2;
-                tile.style.display = '';
-            }
+    helpers.xhr('POST', url, {payload: payload}, {
+        onNon200: function (xhr) {
+            count.textContent++;
+            tile.style.display = '';
         }
-    }
-
-    xhr.send('csrf_token=' + watched_data.csrf_token);
-}
+    });
+}

assets/robots.txt

@@ -1,3 +1,2 @@
 User-agent: *
-Disallow: /search
-Disallow: /login
+Disallow: /

assets/videojs/.gitignore

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

config/config.example.yml

@@ -0,0 +1,871 @@
+#########################################
+#
+#  Database configuration
+#
+#########################################
+
+##
+## Database configuration with separate parameters.
+## This setting is MANDATORY, unless 'database_url' is used.
+##
+db:
+  user: kemal
+  password: kemal
+  host: localhost
+  port: 5432
+  dbname: invidious
+
+##
+## Database configuration using a single URI. This is an
+## alternative to the 'db' parameter above. If both forms
+## are used, then only database_url is used.
+## This setting is MANDATORY, unless 'db' is used.
+##
+## Note: The 'database_url' setting allows the use of UNIX
+## sockets. To do so, remove the IP address (or FQDN) and port
+## and append the 'host' parameter. E.g:
+##   postgres://kemal:kemal@/invidious?host=/var/run/postgresql
+##
+## Accepted values: a postgres:// URI
+## Default: postgres://kemal:kemal@localhost:5432/invidious
+##
+#database_url: postgres://kemal:kemal@localhost:5432/invidious
+
+##
+## Enable automatic table integrity check. This will create
+## the required tables and columns if anything is missing.
+##
+## Accepted values: true, false
+## Default: false
+##
+#check_tables: false
+
+
+
+#########################################
+#
+#  Server config
+#
+#########################################
+
+# -----------------------------
+#  Network (inbound)
+# -----------------------------
+
+##
+## Port to listen on for incoming connections.
+##
+## Note: Ports lower than 1024 requires either root privileges
+## (not recommended) or the "CAP_NET_BIND_SERVICE" capability
+## (See https://stackoverflow.com/a/414258 and `man capabilities`)
+##
+## Accepted values: 1-65535
+## Default: 3000
+##
+#port: 3000
+
+##
+## When the invidious instance is behind a proxy, and the proxy
+## listens on a different port than the instance does, this lets
+## invidious know about it. This is used to craft absolute URLs
+## to the instance (e.g in the API).
+##
+## Note: This setting is MANDATORY if invidious is behind a
+## reverse proxy.
+##
+## Accepted values: 1-65535
+## Default: <none>
+##
+#external_port:
+
+##
+## Interface address to listen on for incoming connections.
+##
+## Accepted values: a valid IPv4 or IPv6 address.
+## default: 0.0.0.0  (listen on all interfaces)
+##
+#host_binding: 0.0.0.0
+
+##
+## Domain name under which this instance is hosted. This is
+## used to craft absolute URLs to the instance (e.g in the API).
+## The domain MUST be defined if your instance is accessed from
+## a domain name (like 'example.com').
+##
+## Accepted values: a fully qualified domain name (FQDN)
+## Default: <none>
+##
+domain:
+
+##
+## Tell Invidious that it is behind a proxy that provides only
+## HTTPS, so all links must use the https:// scheme. This
+## setting MUST be set to true if invidious is behind a
+## reverse proxy serving HTTPs.
+##
+## Accepted values: true, false
+## Default: false
+##
+https_only: false
+
+##
+## Enable/Disable 'Strict-Transport-Security'. Make sure that
+## the domain specified under 'domain' is served securely.
+##
+## Accepted values: true, false
+## Default: true
+##
+#hsts: true
+
+
+# -----------------------------
+#  Network (outbound)
+# -----------------------------
+
+##
+## Disable proxying server-wide. Can be disable as a whole, or
+## only for a single function.
+##
+## Accepted values: true, false, dash, livestreams, downloads, local
+## Default: false
+##
+#disable_proxy: false
+
+##
+## Size of the HTTP pool used to connect to youtube. Each
+## domain ('youtube.com', 'ytimg.com', ...) has its own pool.
+##
+## Accepted values: a positive integer
+## Default: 100
+##
+#pool_size: 100
+
+##
+## Enable/Disable the use of QUIC (HTTP/3) when connecting
+## to the youtube API and websites ('youtube.com', 'ytimg.com').
+## QUIC's main advantages are its lower latency and lower bandwidth
+## use, compared to its predecessors. However, the current version
+## of QUIC used in invidious is still based on the IETF draft 31,
+## meaning that the underlying library may still not be fully
+## optimized. You can read more about QUIC at the link below:
+## https://datatracker.ietf.org/doc/html/draft-ietf-quic-transport-31
+##
+## Note: you should try both options and see what is the best for your
+## instance. In general QUIC is recommended for public instances. Your
+## mileage may vary.
+##
+## Note 2: Using QUIC prevents some captcha challenges from appearing.
+## See: https://github.com/iv-org/invidious/issues/957#issuecomment-576424042
+##
+## Accepted values: true, false
+## Default: false
+##
+#use_quic: false
+
+##
+## Additional cookies to be sent when requesting the youtube API.
+##
+## Accepted values: a string in the format "name1=value1; name2=value2..."
+## Default: <none>
+##
+#cookies:
+
+##
+## Force connection to youtube over a specific IP family.
+##
+## Note: This may sometimes resolve issues involving rate-limiting.
+## See https://github.com/ytdl-org/youtube-dl/issues/21729.
+##
+## Accepted values: ipv4, ipv6
+## Default: <none>
+##
+#force_resolve:
+
+
+# -----------------------------
+#  Logging
+# -----------------------------
+
+##
+## Path to log file. Can be absolute or relative to the invidious
+## binary. This is overridden if "-o OUTPUT" or "--output=OUTPUT"
+## are passed on the command line.
+##
+## Accepted values: a filesystem path or 'STDOUT'
+## Default: STDOUT
+##
+#output: STDOUT
+
+##
+## Logging Verbosity. This is overridden if "-l LEVEL" or
+## "--log-level=LEVEL" are passed on the command line.
+##
+## Accepted values: All, Trace, Debug, Info, Warn, Error, Fatal, Off
+## Default: Info
+##
+#log_level: Info
+
+
+# -----------------------------
+#  Features
+# -----------------------------
+
+##
+## Enable/Disable the "Popular" tab on the main page.
+##
+## Accepted values: true, false
+## Default: true
+##
+#popular_enabled: true
+
+##
+## Enable/Disable statstics (available at /api/v1/stats).
+## The following data is available:
+##   - Software name ("invidious") and version+branch (same data as
+##     displayed in the footer, e.g: "2021.05.13-75e5b49" / "master")
+##   - The value of the 'registration_enabled' config (true/false)
+##   - Number of currently registered users
+##   - Number of registered users who connected in the last month
+##   - Number of registered users who connected in the last 6 months
+##   - Timestamp of the last server restart
+##   - Timestamp of the last "Channel Refresh" job execution
+##
+## Warning: This setting MUST be set to true if you plan to run
+## a public instance. It is used by api.invidious.io to refresh
+## your instance's status.
+##
+## Accepted values: true, false
+## Default: false
+##
+#statistics_enabled: false
+
+
+# -----------------------------
+#  Users and accounts
+# -----------------------------
+
+##
+## Allow/Forbid Invidious (local) account creation. Invidious
+## accounts allow users to subscribe to channels and to create
+## playlists without a Google account.
+##
+## Accepted values: true, false
+## Default: true
+##
+#registration_enabled: true
+
+##
+## Allow/Forbid users to log-in. This setting affects the ability
+## to connect with BOTH Google and Invidious (local) accounts.
+##
+## Accepted values: true, false
+## Default: true
+##
+#login_enabled: true
+
+##
+## Enable/Disable the captcha challenge on the login page.
+##
+## Note: this is a basic captcha challenge that doesn't
+## depend on any third parties.
+##
+## Accepted values: true, false
+## Default: true
+##
+#captcha_enabled: true
+
+##
+## List of usernames that will be granted administrator rights.
+## A user with administrator rights will be able to change the
+## server configuration options listed below in /preferences,
+## in addition to the usual user preferences.
+##
+## Server-wide settings:
+##   - popular_enabled
+##   - captcha_enabled
+##   - login_enabled
+##   - registration_enabled
+##   - statistics_enabled
+## Default user preferences:
+##   - default_home
+##   - feed_menu
+##
+## Accepted values: an array of strings
+## Default: [""]
+##
+#admins: [""]
+
+
+# -----------------------------
+#  Background jobs
+# -----------------------------
+
+##
+## Number of threads to use when crawling channel videos (during
+## subscriptions update).
+##
+## Notes:
+##  - Setting this to 0 will disable the channel videos crawl job.
+##  - This setting is overridden if "-c THREADS" or
+##    "--channel-threads=THREADS" are passed on the command line.
+##
+## Accepted values: a positive integer
+## Default: 1
+##
+channel_threads: 1
+
+##
+## Time interval between two executions of the job that crawls
+## channel videos (subscriptions update).
+##
+## Accepted values: a valid time interval (like 1h30m or 90m)
+## Default: 30m
+##
+#channel_refresh_interval: 30m
+
+##
+## Forcefully dump and re-download the entire list of uploaded
+## videos when crawling channel (during subscriptions update).
+##
+## Accepted values: true, false
+## Default: false
+##
+full_refresh: false
+
+##
+## Number of threads to use when updating RSS feeds.
+##
+## Notes:
+##  - Setting this to 0 will disable the channel videos crawl job.
+##  - This setting is overridden if "-f THREADS" or
+##    "--feed-threads=THREADS" are passed on the command line.
+##
+## Accepted values: a positive integer
+## Default: 1
+##
+feed_threads: 1
+
+##
+## Enable/Disable the polling job that keeps the decryption
+## function (for "secured" videos) up to date.
+##
+## Note: This part of the code generate a small amount of data every minute.
+## This may not be desired if you have bandwidth limits set by your ISP.
+##
+## Note 2: This part of the code is currently broken, so changing
+## this setting has no impact.
+##
+## Accepted values: true, false
+## Default: false
+##
+#decrypt_polling: false
+
+
+# -----------------------------
+#  Captcha API
+# -----------------------------
+
+##
+## URL of the captcha solving service.
+##
+## Accepted values: any URL
+## Default: https://api.anti-captcha.com
+##
+#captcha_api_url: https://api.anti-captcha.com
+
+##
+## API key for the captcha solving service.
+##
+## Accepted values: a string
+## Default: <none>
+##
+#captcha_key:
+
+
+# -----------------------------
+#  Miscellaneous
+# -----------------------------
+
+##
+## custom banner displayed at the top of every page. This can
+## used for instance announcements, e.g.
+##
+## Accepted values: any string. HTML is accepted.
+## Default: <none>
+##
+#banner:
+
+##
+## Subscribe to channels using PubSubHub (Google PubSubHubbub service).
+## PubSubHub allows Invidious to be instantly notified when a new video
+## is published on any subscribed channels. When PubSubHub is not used,
+## Invidious will check for new videos every minute.
+##
+## Note: This setting is recommended for public instances.
+##
+## Note 2:
+##  - Requires a public instance (it uses /feed/webhook/v1)
+##  - Requires 'domain' and 'hmac_key' to be set.
+##  - Setting this parameter to any number greater than zero will
+##    enable channel subscriptions via PubSubHub, but will limit the
+##    amount of concurrent subscriptions.
+##
+## Accepted values: true, false, a positive integer
+## Default: false
+##
+#use_pubsub_feeds: false
+
+##
+## HMAC signing key used for CSRF tokens and pubsub
+## subscriptions verification.
+##
+## Accepted values: a string
+## Default: <none>
+##
+#hmac_key:
+
+##
+## List of video IDs where the "download" widget must be
+## disabled, in order to comply with DMCA requests.
+##
+## Accepted values: an array of string
+## Default: <none>
+##
+#dmca_content:
+
+##
+## Cache video annotations in the database.
+##
+## Warning: empty annotations or annotations that only contain
+## cards won't be cached.
+##
+## Accepted values: true, false
+## Default: false
+##
+#cache_annotations: false
+
+##
+## Source code URL. If your instance is running a modified source
+## code, you MUST publish it somewhere and set this option.
+##
+## Accepted values: a string
+## Default: <none>
+##
+#modified_source_code_url: ""
+
+
+
+#########################################
+#
+#  Default user preferences
+#
+#########################################
+
+##
+## NOTE: All the settings below define the default user
+## preferences. They will apply to ALL users connecting
+## without a preferences cookie (so either on the first
+## connection to the instance or after clearing the
+## browser's cookies).
+##
+
+default_user_preferences:
+
+  # -----------------------------
+  #  Internationalization
+  # -----------------------------
+
+  ##
+  ## Default user interface language (locale).
+  ##
+  ## Note: When hosting a public instance, overriding the
+  ## default (english) is not recommended, as it may
+  ## people using other languages.
+  ##
+  ## Accepted values:
+  ##   ar      (Arabic)
+  ##   da      (Danish)
+  ##   de      (German)
+  ##   en-US   (english, US)
+  ##   el      (Greek)
+  ##   eo      (Esperanto)
+  ##   es      (Spanish)
+  ##   fa      (Persian)
+  ##   fi      (Finnish)
+  ##   fr      (French)
+  ##   he      (Hebrew)
+  ##   hr      (Hungarian)
+  ##   id      (Indonesian)
+  ##   is      (Icelandic)
+  ##   it      (Italian)
+  ##   ja      (Japanese)
+  ##   nb-NO   (Norwegian, Bokmål)
+  ##   nl      (Dutch)
+  ##   pl      (Polish)
+  ##   pt-BR   (Portuguese, Brazil)
+  ##   pt-PT   (Portuguese, Portugal)
+  ##   ro      (Romanian)
+  ##   ru      (Russian)
+  ##   sv      (Swedish)
+  ##   tr      (Turkish)
+  ##   uk      (Ukrainian)
+  ##   zh-CN   (Chinese, China)  (a.k.a "Simplified Chinese")
+  ##   zh-TW   (Chinese, Taiwan) (a.k.a "Traditional Chinese")
+  ##
+  ## Default: en-US
+  ##
+  #locale: en-US
+
+  ##
+  ## Default geographical location for content.
+  ##
+  ## Accepted values:
+  ##   AE, AR, AT, AU, AZ, BA, BD, BE, BG, BH, BO, BR, BY, CA, CH, CL, CO, CR,
+  ##   CY, CZ, DE, DK, DO, DZ, EC, EE, EG, ES, FI, FR, GB, GE, GH, GR, GT, HK,
+  ##   HN, HR, HU, ID, IE, IL, IN, IQ, IS, IT, JM, JO, JP, KE, KR, KW, KZ, LB,
+  ##   LI, LK, LT, LU, LV, LY, MA, ME, MK, MT, MX, MY, NG, NI, NL, NO, NP, NZ,
+  ##   OM, PA, PE, PG, PH, PK, PL, PR, PT, PY, QA, RO, RS, RU, SA, SE, SG, SI,
+  ##   SK, SN, SV, TH, TN, TR, TW, TZ, UA, UG, US, UY, VE, VN, YE, ZA, ZW
+  ##
+  ## Default: US
+  ##
+  #region: US
+
+  ##
+  ## Top 3 preferred languages for video captions.
+  ##
+  ## Note: overriding the default (no preferred
+  ## caption language) is not recommended, in order
+  ## to not penalize people using other languages.
+  ##
+  ## Accepted values: a three-entries array.
+  ## Each entry can be one of:
+  ##   "English", "English (auto-generated)",
+  ##   "Afrikaans", "Albanian", "Amharic", "Arabic",
+  ##   "Armenian", "Azerbaijani", "Bangla", "Basque",
+  ##   "Belarusian", "Bosnian", "Bulgarian", "Burmese",
+  ##   "Catalan", "Cebuano", "Chinese (Simplified)",
+  ##   "Chinese (Traditional)", "Corsican", "Croatian",
+  ##   "Czech", "Danish", "Dutch", "Esperanto", "Estonian",
+  ##   "Filipino", "Finnish", "French", "Galician", "Georgian",
+  ##   "German", "Greek", "Gujarati", "Haitian Creole", "Hausa",
+  ##   "Hawaiian", "Hebrew", "Hindi", "Hmong", "Hungarian",
+  ##   "Icelandic", "Igbo", "Indonesian", "Irish", "Italian",
+  ##   "Japanese", "Javanese", "Kannada", "Kazakh", "Khmer",
+  ##   "Korean", "Kurdish", "Kyrgyz", "Lao", "Latin", "Latvian",
+  ##   "Lithuanian", "Luxembourgish", "Macedonian",
+  ##   "Malagasy", "Malay", "Malayalam", "Maltese", "Maori",
+  ##   "Marathi", "Mongolian", "Nepali", "Norwegian Bokmål",
+  ##   "Nyanja", "Pashto", "Persian", "Polish", "Portuguese",
+  ##   "Punjabi", "Romanian", "Russian", "Samoan",
+  ##   "Scottish Gaelic", "Serbian", "Shona", "Sindhi",
+  ##   "Sinhala", "Slovak", "Slovenian", "Somali",
+  ##   "Southern Sotho", "Spanish", "Spanish (Latin America)",
+  ##   "Sundanese",  "Swahili", "Swedish", "Tajik", "Tamil",
+  ##   "Telugu", "Thai", "Turkish", "Ukrainian", "Urdu",
+  ##   "Uzbek", "Vietnamese", "Welsh", "Western Frisian",
+  ##   "Xhosa", "Yiddish", "Yoruba", "Zulu"
+  ##
+  ## Default: ["", "", ""]
+  ##
+  #captions: ["", "", ""]
+
+
+  # -----------------------------
+  #  Interface
+  # -----------------------------
+
+  ##
+  ## Enable/Disable dark mode.
+  ##
+  ## Accepted values: true, false
+  ## Default: <none>
+  ##
+  #dark_mode:
+
+  ##
+  ## Enable/Disable thin mode (no video thumbnails).
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #thin_mode: false
+
+  ##
+  ## List of feeds available on the home page.
+  ##
+  ## Note: "Subscriptions" and "Playlists" are only visible
+  ## when the user is logged in.
+  ##
+  ## Accepted values: A list of strings
+  ## Each entry can be one of: "Popular", "Trending",
+  ##    "Subscriptions", "Playlists"
+  ##
+  ## Default: ["Popular", "Trending", "Subscriptions", "Playlists"]  (show all feeds)
+  ##
+  #feed_menu: ["Popular", "Trending", "Subscriptions", "Playlists"]
+
+  ##
+  ## Default feed to display on the home page.
+  ##
+  ## Note: setting this option to "Popular" has no
+  ## effect when 'popular_enabled' is set to false.
+  ##
+  ## Accepted values: Popular, Trending, Subscriptions, Playlists, <none>
+  ## Default: Popular
+  ##
+  #default_home: Popular
+
+  ##
+  ## Default number of results to display per page.
+  ##
+  ## Note: this affects invidious-generated pages only, such
+  ## as watch history and subscription feeds. Playlists, search
+  ## results and channel videos depend on the data returned by
+  ## the Youtube API.
+  ##
+  ## Accepted values: any positive integer
+  ## Default: 40
+  ##
+  #max_results: 40
+
+  ##
+  ## Show/hide annotations.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #annotations: false
+
+  ##
+  ## Show/hide annotation.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #annotations_subscribed: false
+
+  ##
+  ## Type of comments to display below video.
+  ##
+  ## Accepted values: a two-entries array.
+  ## Each entry can be one of: "youtube", "reddit", ""
+  ##
+  ## Default: ["youtube", ""]
+  ##
+  #comments: ["youtube", ""]
+
+  ##
+  ## Default player style.
+  ##
+  ## Accepted values: invidious, youtube
+  ## Default: invidious
+  ##
+  #player_style: invidious
+
+  ##
+  ## Show/Hide the "related videos" sidebar when
+  ## watching a video.
+  ##
+  ## Accepted values: true, false
+  ## Default: true
+  ##
+  #related_videos: true
+
+
+  # -----------------------------
+  #  Video player behavior
+  # -----------------------------
+
+  ##
+  ## Automatically play videos on page load.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #autoplay: false
+
+  ##
+  ## Automatically load the "next" video (either next in
+  ## playlist or proposed) when the current video ends.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #continue: false
+
+  ##
+  ## Autoplay next video by default.
+  ##
+  ## Note: Only effective if 'continue' is set to true.
+  ##
+  ## Accepted values: true, false
+  ## Default: true
+  ##
+  #continue_autoplay: true
+
+  ##
+  ## Play videos in Audio-only mode by default.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #listen: false
+
+  ##
+  ## Loop videos automatically.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #video_loop: false
+
+
+  # -----------------------------
+  #  Video playback settings
+  # -----------------------------
+
+  ##
+  ## Default video quality.
+  ##
+  ## Accepted values: dash, hd720, medium, small
+  ## Default: hd720
+  ##
+  #quality: hd720
+
+  ##
+  ## Default dash video quality.
+  ##
+  ## Note: this setting only takes effet if the
+  ## 'quality' parameter is set to "dash".
+  ##
+  ## Accepted values:
+  ##    auto, best, 4320p, 2160p, 1440p, 1080p,
+  ##    720p, 480p, 360p, 240p, 144p, worst
+  ## Default: auto
+  ##
+  #quality_dash: auto
+
+  ##
+  ## Default video playback speed.
+  ##
+  ## Accepted values: 0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0
+  ## Default: 1.0
+  ##
+  #speed: 1.0
+
+  ##
+  ## Default volume.
+  ##
+  ## Accepted values: 0-100
+  ## Default: 100
+  ##
+  #volume: 100
+
+  ##
+  ## Allow 360° videos to be played.
+  ##
+  ## Note: This feature requires a WebGL-enabled browser.
+  ##
+  ## Accepted values: true, false
+  ## Default: true
+  ##
+  #vr_mode: true
+
+  # -----------------------------
+  #  Subscription feed
+  # -----------------------------
+
+  ##
+  ## In the "Subscription" feed, only show the latest video
+  ## of each channel the user is subscribed to.
+  ##
+  ## Note: when combined with 'unseen_only', the latest unseen
+  ## video of each channel will be displayed instead of the
+  ## latest by date.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #latest_only: false
+
+  ##
+  ## Enable/Disable user subscriptions desktop notifications.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #notifications_only: false
+
+  ##
+  ## In the "Subscription" feed, Only show the videos that the
+  ## user haven't watched yet (i.e which are not in their watch
+  ## history).
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #unseen_only: false
+
+  ##
+  ## Default sorting parameter for subscription feeds.
+  ##
+  ## Accepted values:
+  ##   'alphabetically'
+  ##   'alphabetically - reverse'
+  ##   'channel name'
+  ##   'channel name - reverse'
+  ##   'published'
+  ##   'published - reverse'
+  ##
+  ## Default: published
+  ##
+  #sort: published
+
+
+  # -----------------------------
+  #  Miscellaneous
+  # -----------------------------
+
+  ##
+  ## Proxy videos through instance by default.
+  ##
+  ## Warning: As most users won't change this setting in their
+  ## preferences, defaulting  to true will significantly
+  ## increase the instance's network usage, so make sure that
+  ## your server's connection can handle it.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #local: false
+
+  ##
+  ## Show the connected user's nick at the top right.
+  ##
+  ## Accepted values: true, false
+  ## Default: true
+  ##
+  #show_nick: true
+
+  ##
+  ## Automatically redirect to a random instance when the user uses
+  ## any "switch invidious instance" link (For videos, it's the plane
+  ## icon, next to "watch on youtube" and "listen"). When set to false,
+  ## the user is sent to https://redirect.invidious.io instead, where
+  ## they can manually select an instance.
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #automatic_instance_redirect: false
+  
+  ##
+  ## Show the entire video description by default (when set to 'false',
+  ## only the first few lines of the description are shown and a
+  ## "show more" button allows to expand it).
+  ##
+  ## Accepted values: true, false
+  ## Default: false
+  ##
+  #extend_desc: false

config/config.yml

@@ -1,11 +0,0 @@
-channel_threads: 1
-feed_threads: 1
-db:
-  user: kemal
-  password: kemal
-  host: localhost
-  port: 5432
-  dbname: invidious
-full_refresh: false
-https_only: false
-domain:

config/migrate-scripts/migrate-db-17cf077.sh

@@ -1,4 +1,7 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE channels ADD COLUMN subscribed bool;"
-psql invidious kemal -c "UPDATE channels SET subscribed = false;"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channels ADD COLUMN subscribed bool;"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "UPDATE channels SET subscribed = false;"

config/migrate-scripts/migrate-db-1c8075c.sh

@@ -1,7 +1,10 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE channel_videos DROP COLUMN live_now CASCADE"
-psql invidious kemal -c "ALTER TABLE channel_videos DROP COLUMN premiere_timestamp CASCADE"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
 
-psql invidious kemal -c "ALTER TABLE channel_videos ADD COLUMN live_now bool"
-psql invidious kemal -c "ALTER TABLE channel_videos ADD COLUMN premiere_timestamp timestamptz"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channel_videos DROP COLUMN live_now CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channel_videos DROP COLUMN premiere_timestamp CASCADE"
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channel_videos ADD COLUMN live_now bool"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channel_videos ADD COLUMN premiere_timestamp timestamptz"

config/migrate-scripts/migrate-db-1eca969.sh

@@ -0,0 +1,22 @@
+#!/bin/sh
+
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN title CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN views CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN likes CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN dislikes CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN wilson_score CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN published CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN description CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN language CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN author CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN ucid CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN allowed_regions CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN is_family_friendly CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN genre CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN genre_url CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN license CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN sub_count_text CASCADE"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE videos DROP COLUMN author_thumbnail CASCADE"

config/migrate-scripts/migrate-db-30e6d29.sh

@@ -1,4 +1,7 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE channels ADD COLUMN deleted bool;"
-psql invidious kemal -c "UPDATE channels SET deleted = false;"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channels ADD COLUMN deleted bool;"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "UPDATE channels SET deleted = false;"

config/migrate-scripts/migrate-db-3646395.sh

@@ -1,5 +1,8 @@
 #!/bin/sh
 
-psql invidious < config/sql/session_ids.sql
-psql invidious kemal -c "INSERT INTO session_ids (SELECT unnest(id), email, CURRENT_TIMESTAMP FROM users) ON CONFLICT (id) DO NOTHING"
-psql invidious kemal -c "ALTER TABLE users DROP COLUMN id"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" < config/sql/session_ids.sql
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "INSERT INTO session_ids (SELECT unnest(id), email, CURRENT_TIMESTAMP FROM users) ON CONFLICT (id) DO NOTHING"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE users DROP COLUMN id"

config/migrate-scripts/migrate-db-3bcb98e.sh

@@ -1,3 +1,6 @@
 #!/bin/sh
 
-psql invidious kemal < config/sql/annotations.sql
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" < config/sql/annotations.sql

config/migrate-scripts/migrate-db-52cb239.sh

@@ -1,3 +1,6 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE channel_videos ADD COLUMN views bigint;"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channel_videos ADD COLUMN views bigint;"

config/migrate-scripts/migrate-db-6e51189.sh

@@ -1,4 +1,7 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE channel_videos ADD COLUMN live_now bool;"
-psql invidious kemal -c "UPDATE channel_videos SET live_now = false;"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channel_videos ADD COLUMN live_now bool;"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "UPDATE channel_videos SET live_now = false;"

config/migrate-scripts/migrate-db-701b5ea.sh

@@ -1,3 +1,6 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE users ADD COLUMN feed_needs_update boolean"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE users ADD COLUMN feed_needs_update boolean"

config/migrate-scripts/migrate-db-88b7097.sh

@@ -1,3 +1,6 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE channel_videos ADD COLUMN premiere_timestamp timestamptz;"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channel_videos ADD COLUMN premiere_timestamp timestamptz;"

config/migrate-scripts/migrate-db-8e884fe.sh

@@ -1,5 +1,8 @@
 #!/bin/sh
 
-psql invidious kemal -c "ALTER TABLE channels DROP COLUMN subscribed"
-psql invidious kemal -c "ALTER TABLE channels ADD COLUMN subscribed timestamptz"
-psql invidious kemal -c "UPDATE channels SET subscribed = '2019-01-01 00:00:00+00'"
+[ -z "$POSTGRES_USER" ] && POSTGRES_USER=kemal
+[ -z "$POSTGRES_DB" ] && POSTGRES_DB=invidious
+
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channels DROP COLUMN subscribed"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "ALTER TABLE channels ADD COLUMN subscribed timestamptz"
+psql "$POSTGRES_DB" "$POSTGRES_USER" -c "UPDATE channels SET subscribed = '2019-01-01 00:00:00+00'"

config/sql/annotations.sql

@@ -2,11 +2,11 @@
 
 -- DROP TABLE public.annotations;
 
-CREATE TABLE public.annotations
+CREATE TABLE IF NOT EXISTS public.annotations
 (
   id text NOT NULL,
   annotations xml,
   CONSTRAINT annotations_id_key UNIQUE (id)
 );
 
-GRANT ALL ON TABLE public.annotations TO kemal;
+GRANT ALL ON TABLE public.annotations TO current_user;

config/sql/channel_videos.sql

@@ -2,7 +2,7 @@
 
 -- DROP TABLE public.channel_videos;
 
-CREATE TABLE public.channel_videos
+CREATE TABLE IF NOT EXISTS public.channel_videos
 (
   id text NOT NULL,
   title text,
@@ -17,13 +17,13 @@ CREATE TABLE public.channel_videos
   CONSTRAINT channel_videos_id_key UNIQUE (id)
 );
 
-GRANT ALL ON TABLE public.channel_videos TO kemal;
+GRANT ALL ON TABLE public.channel_videos TO current_user;
 
 -- Index: public.channel_videos_ucid_idx
 
 -- DROP INDEX public.channel_videos_ucid_idx;
 
-CREATE INDEX channel_videos_ucid_idx
+CREATE INDEX IF NOT EXISTS channel_videos_ucid_idx
   ON public.channel_videos
   USING btree
   (ucid COLLATE pg_catalog."default");

config/sql/channels.sql

@@ -2,7 +2,7 @@
 
 -- DROP TABLE public.channels;
 
-CREATE TABLE public.channels
+CREATE TABLE IF NOT EXISTS public.channels
 (
   id text NOT NULL,
   author text,
@@ -12,13 +12,13 @@ CREATE TABLE public.channels
   CONSTRAINT channels_id_key UNIQUE (id)
 );
 
-GRANT ALL ON TABLE public.channels TO kemal;
+GRANT ALL ON TABLE public.channels TO current_user;
 
 -- Index: public.channels_id_idx
 
 -- DROP INDEX public.channels_id_idx;
 
-CREATE INDEX channels_id_idx
+CREATE INDEX IF NOT EXISTS channels_id_idx
   ON public.channels
   USING btree
   (id COLLATE pg_catalog."default");

config/sql/nonces.sql

@@ -2,20 +2,20 @@
 
 -- DROP TABLE public.nonces;
 
-CREATE TABLE public.nonces
+CREATE TABLE IF NOT EXISTS public.nonces
 (
   nonce text,
   expire timestamp with time zone,
   CONSTRAINT nonces_id_key UNIQUE (nonce)
 );
 
-GRANT ALL ON TABLE public.nonces TO kemal;
+GRANT ALL ON TABLE public.nonces TO current_user;
 
 -- Index: public.nonces_nonce_idx
 
 -- DROP INDEX public.nonces_nonce_idx;
 
-CREATE INDEX nonces_nonce_idx
+CREATE INDEX IF NOT EXISTS nonces_nonce_idx
   ON public.nonces
   USING btree
   (nonce COLLATE pg_catalog."default");

config/sql/playlist_videos.sql

@@ -0,0 +1,19 @@
+-- Table: public.playlist_videos
+
+-- DROP TABLE public.playlist_videos;
+
+CREATE TABLE IF NOT EXISTS public.playlist_videos
+(
+    title text,
+    id text,
+    author text,
+    ucid text,
+    length_seconds integer,
+    published timestamptz,
+    plid text references playlists(id),
+    index int8,
+    live_now boolean,
+    PRIMARY KEY (index,plid)
+);
+
+GRANT ALL ON TABLE public.playlist_videos TO current_user;

config/sql/playlists.sql

@@ -0,0 +1,29 @@
+-- Type: public.privacy
+
+-- DROP TYPE public.privacy;
+
+CREATE TYPE public.privacy AS ENUM
+(
+    'Public',
+    'Unlisted',
+    'Private'
+);
+
+-- Table: public.playlists
+
+-- DROP TABLE public.playlists;
+
+CREATE TABLE IF NOT EXISTS public.playlists
+(
+    title text,
+    id text primary key,
+    author text,
+    description text,
+    video_count integer,
+    created timestamptz,
+    updated timestamptz,
+    privacy privacy,
+    index int8[]
+);
+
+GRANT ALL ON public.playlists TO current_user;

config/sql/session_ids.sql

@@ -2,7 +2,7 @@
 
 -- DROP TABLE public.session_ids;
 
-CREATE TABLE public.session_ids
+CREATE TABLE IF NOT EXISTS public.session_ids
 (
   id text NOT NULL,
   email text,
@@ -10,13 +10,13 @@ CREATE TABLE public.session_ids
   CONSTRAINT session_ids_pkey PRIMARY KEY (id)
 );
 
-GRANT ALL ON TABLE public.session_ids TO kemal;
+GRANT ALL ON TABLE public.session_ids TO current_user;
 
 -- Index: public.session_ids_id_idx
 
 -- DROP INDEX public.session_ids_id_idx;
 
-CREATE INDEX session_ids_id_idx
+CREATE INDEX IF NOT EXISTS session_ids_id_idx
   ON public.session_ids
   USING btree
   (id COLLATE pg_catalog."default");

config/sql/users.sql

@@ -2,7 +2,7 @@
 
 -- DROP TABLE public.users;
 
-CREATE TABLE public.users
+CREATE TABLE IF NOT EXISTS public.users
 (
   updated timestamp with time zone,
   notifications text[],
@@ -16,13 +16,13 @@ CREATE TABLE public.users
   CONSTRAINT users_email_key UNIQUE (email)
 );
 
-GRANT ALL ON TABLE public.users TO kemal;
+GRANT ALL ON TABLE public.users TO current_user;
 
 -- Index: public.email_unique_idx
 
 -- DROP INDEX public.email_unique_idx;
 
-CREATE UNIQUE INDEX email_unique_idx
+CREATE UNIQUE INDEX IF NOT EXISTS email_unique_idx
   ON public.users
   USING btree
   (lower(email) COLLATE pg_catalog."default");

config/sql/videos.sql

@@ -2,38 +2,21 @@
 
 -- DROP TABLE public.videos;
 
-CREATE TABLE public.videos
+CREATE UNLOGGED TABLE IF NOT EXISTS public.videos
 (
   id text NOT NULL,
   info text,
   updated timestamp with time zone,
-  title text,
-  views bigint,
-  likes integer,
-  dislikes integer,
-  wilson_score double precision,
-  published timestamp with time zone,
-  description text,
-  language text,
-  author text,
-  ucid text,
-  allowed_regions text[],
-  is_family_friendly boolean,
-  genre text,
-  genre_url text,
-  license text,
-  sub_count_text text,
-  author_thumbnail text,
   CONSTRAINT videos_pkey PRIMARY KEY (id)
 );
 
-GRANT ALL ON TABLE public.videos TO kemal;
+GRANT ALL ON TABLE public.videos TO current_user;
 
 -- Index: public.id_idx
 
 -- DROP INDEX public.id_idx;
 
-CREATE UNIQUE INDEX id_idx
+CREATE UNIQUE INDEX IF NOT EXISTS id_idx
   ON public.videos
   USING btree
   (id COLLATE pg_catalog."default");

docker-compose.yml

@@ -1,12 +1,12 @@
-version: '3'
+# Warning: This docker-compose file is made for development purposes.
+# Using it will build an image from the locally cloned repository.
+#
+# If you want to use Invidious in production, see the docker-compose.yml file provided
+# in the installation documentation: https://docs.invidious.io/installation/
+
+version: "3"
 services:
-  postgres:
-    build:
-      context: .
-      dockerfile: docker/Dockerfile.postgres
-    restart: unless-stopped
-    volumes:
-      - postgresdata:/var/lib/postgresql/data
+
   invidious:
     build:
       context: .
@@ -14,8 +14,43 @@ services:
     restart: unless-stopped
     ports:
       - "127.0.0.1:3000:3000"
+    environment:
+      # Please read the following file for a comprehensive list of all available
+      # configuration options and their associated syntax:
+      # https://github.com/iv-org/invidious/blob/master/config/config.example.yml
+      INVIDIOUS_CONFIG: |
+        db:
+          dbname: invidious
+          user: kemal
+          password: kemal
+          host: invidious-db
+          port: 5432
+        check_tables: true
+        # external_port:
+        # domain:
+        # https_only: false
+        # statistics_enabled: false
+    healthcheck:
+      test: wget -nv --tries=1 --spider http://127.0.0.1:3000/api/v1/comments/jNQXAC9IVRw || exit 1
+      interval: 30s
+      timeout: 5s
+      retries: 2
     depends_on:
-      - postgres
+      - invidious-db
+
+  invidious-db:
+    image: docker.io/library/postgres:13
+    restart: unless-stopped
+    volumes:
+      - postgresdata:/var/lib/postgresql/data
+      - ./config/sql:/config/sql
+      - ./docker/init-invidious-db.sh:/docker-entrypoint-initdb.d/init-invidious-db.sh
+    environment:
+      POSTGRES_DB: invidious
+      POSTGRES_USER: kemal
+      POSTGRES_PASSWORD: kemal
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB"]
 
 volumes:
   postgresdata:

docker/Dockerfile

@@ -1,15 +1,54 @@
-FROM archlinux/base
+FROM crystallang/crystal:1.4.1-alpine AS builder
+RUN apk add --no-cache sqlite-static yaml-static
 
-RUN pacman -Sy --noconfirm shards crystal imagemagick librsvg \
-    which pkgconf gcc ttf-liberation glibc
-# base-devel contains many other basic packages, that are normally assumed to already exist on a clean arch system
-
-ADD . /invidious
+ARG release
 
 WORKDIR /invidious
+COPY ./shard.yml ./shard.yml
+COPY ./shard.lock ./shard.lock
+RUN shards install --production
 
-RUN sed -i 's/host: localhost/host: postgres/' config/config.yml && \
-    shards update && shards install && \
-    crystal build src/invidious.cr
+COPY --from=quay.io/invidious/lsquic-compiled /root/liblsquic.a ./lib/lsquic/src/lsquic/ext/liblsquic.a
 
+COPY ./src/ ./src/
+# TODO: .git folder is required for building – this is destructive.
+# See definition of CURRENT_BRANCH, CURRENT_COMMIT and CURRENT_VERSION.
+COPY ./.git/ ./.git/
+
+# Required for fetching player dependencies
+COPY ./scripts/ ./scripts/
+COPY ./assets/ ./assets/
+COPY ./videojs-dependencies.yml ./videojs-dependencies.yml
+
+RUN crystal spec --warnings all \
+    --link-flags "-lxml2 -llzma"
+
+RUN if [ "${release}" == 1 ] ; then \
+        crystal build ./src/invidious.cr \
+        --release \
+        --static --warnings all \
+        --link-flags "-lxml2 -llzma"; \
+    else \
+        crystal build ./src/invidious.cr \
+        --static --warnings all \
+        --link-flags "-lxml2 -llzma"; \
+    fi
+
+
+FROM alpine:latest
+RUN apk add --no-cache librsvg ttf-opensans
+WORKDIR /invidious
+RUN addgroup -g 1000 -S invidious && \
+    adduser -u 1000 -S invidious -G invidious
+COPY --chown=invidious ./config/config.* ./config/
+RUN mv -n config/config.example.yml config/config.yml
+RUN sed -i 's/host: \(127.0.0.1\|localhost\)/host: invidious-db/' config/config.yml
+COPY ./config/sql/ ./config/sql/
+COPY ./locales/ ./locales/
+COPY --from=builder /invidious/assets ./assets/
+COPY --from=builder /invidious/invidious .
+RUN chmod o+rX -R ./assets ./config ./locales
+
+EXPOSE 3000
+USER invidious
 CMD [ "/invidious/invidious" ]

docker/Dockerfile.arm64

@@ -0,0 +1,53 @@
+FROM alpine:3.16 AS builder
+RUN apk add --no-cache 'crystal=1.4.1-r0' shards sqlite-static yaml-static yaml-dev libxml2-dev zlib-static openssl-libs-static openssl-dev musl-dev
+
+ARG release
+
+WORKDIR /invidious
+COPY ./shard.yml ./shard.yml
+COPY ./shard.lock ./shard.lock
+RUN shards install --production
+
+COPY --from=quay.io/invidious/lsquic-compiled /root/liblsquic.a ./lib/lsquic/src/lsquic/ext/liblsquic.a
+
+COPY ./src/ ./src/
+# TODO: .git folder is required for building – this is destructive.
+# See definition of CURRENT_BRANCH, CURRENT_COMMIT and CURRENT_VERSION.
+COPY ./.git/ ./.git/
+
+# Required for fetching player dependencies
+COPY ./scripts/ ./scripts/
+COPY ./assets/ ./assets/
+COPY ./videojs-dependencies.yml ./videojs-dependencies.yml
+
+RUN crystal spec --warnings all \
+    --link-flags "-lxml2 -llzma"
+
+RUN if [ ${release} == 1 ] ; then \
+        crystal build ./src/invidious.cr \
+        --release \
+        --static --warnings all \
+        --link-flags "-lxml2 -llzma"; \
+    else \
+        crystal build ./src/invidious.cr \
+        --static --warnings all \
+        --link-flags "-lxml2 -llzma"; \
+    fi
+
+FROM alpine:3.16
+RUN apk add --no-cache librsvg ttf-opensans
+WORKDIR /invidious
+RUN addgroup -g 1000 -S invidious && \
+    adduser -u 1000 -S invidious -G invidious
+COPY --chown=invidious ./config/config.* ./config/
+RUN mv -n config/config.example.yml config/config.yml
+RUN sed -i 's/host: \(127.0.0.1\|localhost\)/host: invidious-db/' config/config.yml
+COPY ./config/sql/ ./config/sql/
+COPY ./locales/ ./locales/
+COPY --from=builder /invidious/assets ./assets/
+COPY --from=builder /invidious/invidious .
+RUN chmod o+rX -R ./assets ./config ./locales
+
+EXPOSE 3000
+USER invidious
+CMD [ "/invidious/invidious" ]

docker/Dockerfile.postgres

@@ -1,9 +0,0 @@
-FROM postgres:10
-
-ENV POSTGRES_USER postgres
-
-ADD ./config/sql /config/sql
-ADD ./docker/entrypoint.postgres.sh /entrypoint.sh
-
-ENTRYPOINT [ "/entrypoint.sh" ]
-CMD [ "postgres" ]

docker/entrypoint.postgres.sh

@@ -1,28 +0,0 @@
-#!/usr/bin/env bash
-
-CMD="$@"
-if [ ! -f /var/lib/postgresql/data/setupFinished ]; then
-    echo "### first run - setting up invidious database"
-    /usr/local/bin/docker-entrypoint.sh postgres &
-    sleep 10
-    until runuser -l postgres -c 'pg_isready' 2>/dev/null; do
-        >&2 echo "### Postgres is unavailable - waiting"
-        sleep 5
-    done
-    >&2 echo "### importing table schemas"
-    su postgres -c 'createdb invidious'
-    su postgres -c 'psql -c "CREATE USER kemal WITH PASSWORD '"'kemal'"'"'
-    su postgres -c 'psql invidious kemal < config/sql/channels.sql'
-    su postgres -c 'psql invidious kemal < config/sql/videos.sql'
-    su postgres -c 'psql invidious kemal < config/sql/channel_videos.sql'
-    su postgres -c 'psql invidious kemal < config/sql/users.sql'
-    su postgres -c 'psql invidious kemal < config/sql/session_ids.sql'
-    su postgres -c 'psql invidious kemal < config/sql/nonces.sql'
-    su postgres -c 'psql invidious kemal < config/sql/annotations.sql'
-    touch /var/lib/postgresql/data/setupFinished
-    echo "### invidious database setup finished"
-    exit
-fi
-
-echo "running postgres /usr/local/bin/docker-entrypoint.sh $CMD"
-exec /usr/local/bin/docker-entrypoint.sh $CMD

docker/init-invidious-db.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+set -eou pipefail
+
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/channels.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/videos.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/channel_videos.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/users.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/session_ids.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/nonces.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/annotations.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/playlists.sql
+psql --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" < config/sql/playlist_videos.sql

kubernetes/.gitignore

@@ -0,0 +1 @@
+/charts/*.tgz

kubernetes/Chart.lock

@@ -0,0 +1,6 @@
+dependencies:
+- name: postgresql
+  repository: https://charts.bitnami.com/bitnami/
+  version: 11.1.3
+digest: sha256:79061645472b6fb342d45e8e5b3aacd018ef5067193e46a060bccdc99fe7f6e1
+generated: "2022-03-02T05:57:20.081432389+13:00"

kubernetes/Chart.yaml

@@ -0,0 +1,22 @@
+apiVersion: v2
+name: invidious
+description: Invidious is an alternative front-end to YouTube
+version: 1.1.1
+appVersion: 0.20.1
+keywords:
+- youtube
+- proxy
+- video
+- privacy
+home: https://invidio.us/
+icon: https://raw.githubusercontent.com/iv-org/invidious/05988c1c49851b7d0094fca16aeaf6382a7f64ab/assets/favicon-32x32.png
+sources:
+- https://github.com/iv-org/invidious
+maintainers:
+- name: Leon Klingele
+  email: mail@leonklingele.de
+dependencies:
+- name: postgresql
+  version: ~11.1.3
+  repository: "https://charts.bitnami.com/bitnami/"
+engine: gotpl

kubernetes/README.md

@@ -0,0 +1,41 @@
+# Invidious Helm chart
+
+Easily deploy Invidious to Kubernetes.
+
+## Installing Helm chart
+
+```sh
+# Build Helm dependencies
+$ helm dep build
+
+# Add PostgreSQL init scripts
+$ kubectl create configmap invidious-postgresql-init \
+  --from-file=../config/sql/channels.sql \
+  --from-file=../config/sql/videos.sql \
+  --from-file=../config/sql/channel_videos.sql \
+  --from-file=../config/sql/users.sql \
+  --from-file=../config/sql/session_ids.sql \
+  --from-file=../config/sql/nonces.sql \
+  --from-file=../config/sql/annotations.sql \
+  --from-file=../config/sql/playlists.sql \
+  --from-file=../config/sql/playlist_videos.sql
+
+# Install Helm app to your Kubernetes cluster
+$ helm install invidious ./
+```
+
+## Upgrading
+
+```sh
+# Upgrading is easy, too!
+$ helm upgrade invidious ./
+```
+
+## Uninstall
+
+```sh
+# Get rid of everything (except database)
+$ helm delete invidious
+
+# To also delete the database, remove all invidious-postgresql PVCs
+```

kubernetes/templates/_helpers.tpl

@@ -0,0 +1,16 @@
+{{/* vim: set filetype=mustache: */}}
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "invidious.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" -}}
+{{- end -}}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+*/}}
+{{- define "invidious.fullname" -}}
+{{- $name := default .Chart.Name .Values.nameOverride -}}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" -}}
+{{- end -}}

kubernetes/templates/configmap.yaml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: {{ template "invidious.fullname" . }}
+  labels:
+    app: {{ template "invidious.name" . }}
+    chart: "{{ .Chart.Name }}-{{ .Chart.Version }}"
+    release: {{ .Release.Name }}
+data:
+  INVIDIOUS_CONFIG: |
+{{ toYaml .Values.config | indent 4 }}

kubernetes/templates/deployment.yaml

@@ -0,0 +1,61 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ template "invidious.fullname" . }}
+  labels:
+    app: {{ template "invidious.name" . }}
+    chart: "{{ .Chart.Name }}-{{ .Chart.Version }}"
+    release: {{ .Release.Name }}
+spec:
+  replicas: {{ .Values.replicaCount }}
+  selector:
+    matchLabels:
+      app: {{ template "invidious.name" . }}
+      release: {{ .Release.Name }}
+  template:
+    metadata:
+      labels:
+        app: {{ template "invidious.name" . }}
+        chart: "{{ .Chart.Name }}-{{ .Chart.Version }}"
+        release: {{ .Release.Name }}
+    spec:
+      securityContext:
+        runAsUser: {{ .Values.securityContext.runAsUser }}
+        runAsGroup: {{ .Values.securityContext.runAsGroup }}
+        fsGroup: {{ .Values.securityContext.fsGroup }}
+      initContainers:
+        - name: wait-for-postgresql
+          image: postgres
+          args:
+          - /bin/sh
+          - -c
+          - until pg_isready -h {{ .Values.config.db.host }} -p {{ .Values.config.db.port }} -U {{ .Values.config.db.user }}; do echo waiting for database; sleep 2; done;
+      containers:
+      - name: {{ .Chart.Name }}
+        image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
+        imagePullPolicy: {{ .Values.image.pullPolicy }}
+        ports:
+        - containerPort: 3000
+        env:
+        - name: INVIDIOUS_CONFIG
+          valueFrom:
+            configMapKeyRef:
+              key: INVIDIOUS_CONFIG
+              name: {{ template "invidious.fullname" . }}
+        securityContext:
+          allowPrivilegeEscalation: {{ .Values.securityContext.allowPrivilegeEscalation }}
+          capabilities:
+            drop:
+            - ALL
+        resources:
+{{ toYaml .Values.resources | indent 10 }}
+        readinessProbe:
+          httpGet:
+            port: 3000
+            path: /
+        livenessProbe:
+          httpGet:
+            port: 3000
+            path: /
+          initialDelaySeconds: 15
+      restartPolicy: Always

kubernetes/templates/hpa.yaml

@@ -0,0 +1,18 @@
+{{- if .Values.autoscaling.enabled }}
+apiVersion: autoscaling/v1
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ template "invidious.fullname" . }}
+  labels:
+    app: {{ template "invidious.name" . }}
+    chart: "{{ .Chart.Name }}-{{ .Chart.Version }}"
+    release: {{ .Release.Name }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ template "invidious.fullname" . }}
+  minReplicas: {{ .Values.autoscaling.minReplicas }}
+  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
+  targetCPUUtilizationPercentage: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
+{{- end }}

kubernetes/templates/service.yaml

@@ -0,0 +1,20 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ template "invidious.fullname" . }}
+  labels:
+    app: {{ template "invidious.name" . }}
+    chart: {{ .Chart.Name }}
+    release: {{ .Release.Name }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+  - name: http
+    port: {{ .Values.service.port }}
+    targetPort: 3000
+  selector:
+    app: {{ template "invidious.name" . }}
+    release: {{ .Release.Name }}
+{{- if .Values.service.loadBalancerIP }}
+  loadBalancerIP: {{ .Values.service.loadBalancerIP }}
+{{- end }}

kubernetes/values.yaml

@@ -0,0 +1,61 @@
+name: invidious
+
+image:
+  repository: quay.io/invidious/invidious
+  tag: latest
+  pullPolicy: Always
+
+replicaCount: 1
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 16
+  targetCPUUtilizationPercentage: 50
+
+service:
+  type: ClusterIP
+  port: 3000
+  #loadBalancerIP:
+
+resources: {}
+  #requests:
+  #  cpu: 100m
+  #  memory: 64Mi
+  #limits:
+  #  cpu: 800m
+  #  memory: 512Mi
+
+securityContext:
+  allowPrivilegeEscalation: false
+  runAsUser: 1000
+  runAsGroup: 1000
+  fsGroup: 1000
+
+# See https://github.com/bitnami/charts/tree/master/bitnami/postgresql
+postgresql:
+  image:
+    registry: quay.io
+  auth:
+    username: kemal
+    password: kemal
+    database: invidious
+  primary:
+    initdb:
+      username: kemal
+      password: kemal
+      scriptsConfigMap: invidious-postgresql-init
+
+# Adapted from ../config/config.yml
+config:
+  channel_threads: 1
+  feed_threads: 1
+  db:
+    user: kemal
+    password: kemal
+    host: invidious-postgresql
+    port: 5432
+    dbname: invidious
+  full_refresh: false
+  https_only: false
+  domain:

locales/ar.json

@@ -1,195 +1,212 @@
 {
-    "`x` subscribers": "`x` المشتركين",
-    "`x` videos": "`x` الفيديوهات",
-    "LIVE": "مباشر",
-    "Shared `x` ago": "تم رفع الفيديو منذ `x`",
-    "Unsubscribe": "إلغاء الإشتراك",
-    "Subscribe": "إشتراك",
+    "LIVE": "مُباشِر",
+    "Shared `x` ago": "تمَّ رفع المقطع المرئيّ مُنذ `x`",
+    "Unsubscribe": "إلغاء الاشتراك",
+    "Subscribe": "الإشتراك",
     "View channel on YouTube": "زيارة القناة على موقع يوتيوب",
     "View playlist on YouTube": "عرض قائمة التشغيل على اليوتيوب",
     "newest": "الأجدد",
     "oldest": "الأقدم",
-    "popular": "الاكثر شعبية",
-    "last": "اخر قوائم التشغيل المعدلة",
-    "Next page": "الصفحة الثانية",
+    "popular": "الأكثر شعبية",
+    "last": "الأخيرة",
+    "Next page": "الصفحة التالية",
     "Previous page": "الصفحة السابقة",
-    "Clear watch history?": "مسح السجل ؟",
-    "New password": "الرقم السرى الجديد",
-    "New passwords must match": "الأرقام السرية يجب ان تكون متطابقة",
-    "Cannot change password for Google accounts": "لا يستطيع تغيير الرقم السرى لحساب جوجل",
-    "Authorize token?": "رمز الإذن ؟",
-    "Authorize token for `x`?": "رمز الإذن لـ `x` ?",
+    "Clear watch history?": "هل تريد محو سجل المشاهدة؟",
+    "New password": "كلمة مرور جديدة",
+    "New passwords must match": "يَجبُ أن تكون كلمتا المرور متطابقتين",
+    "Cannot change password for Google accounts": "لا يُمكن تغيير كلمة المرور لِحسابات جوجل",
+    "Authorize token?": "رمز التفويض؟",
+    "Authorize token for `x`?": "السماح بالرمز المميز ل 'x'؟",
     "Yes": "نعم",
     "No": "لا",
-    "Import and Export Data": "استخراج و إضافة البيانات",
-    "Import": "إضافة",
-    "Import Invidious data": "إضافة بيانات Invidious",
-    "Import YouTube subscriptions": "إضافةالإشتراكات من موقع يوتيوب",
-    "Import FreeTube subscriptions (.db)": "إضافةالمشتركين من FreeTube (.db)",
-    "Import NewPipe subscriptions (.json)": "إضافة المشتركين من NewPipe (.json)",
-    "Import NewPipe data (.zip)": "إضافة بيانات NewPipe (.zip)",
-    "Export": "استخراج",
-    "Export subscriptions as OPML": "استخراج المشتركين كـ OPML",
-    "Export subscriptions as OPML (for NewPipe & FreeTube)": "استخراج المشتركين كـ OPML (لـ NewPipe و FreeTube)",
-    "Export data as JSON": "استخراج البيانات كـ JSON",
-    "Delete account?": "حذف الحساب ؟",
-    "History": "السجل",
-    "An alternative front-end to YouTube": "البديل الكامل لموقع يوتيوب",
-    "JavaScript license information": "معلومات ترخيص JavaScript",
+    "Import and Export Data": "اِستيراد البيانات وتصديرها",
+    "Import": "استيراد",
+    "Import Invidious data": "استيراد بيانات JSON Invidious",
+    "Import YouTube subscriptions": "استيراد اشتراكات YouTube/OPML",
+    "Import FreeTube subscriptions (.db)": "استيراد اشتراكات فريتيوب (.db)",
+    "Import NewPipe subscriptions (.json)": "استيراد اشتراكات نيو بايب (.json)",
+    "Import NewPipe data (.zip)": "استيراد بيانات نيو بايب (.zip)",
+    "Export": "تصدير",
+    "Export subscriptions as OPML": "تصدير الاشتراكات كـOPML",
+    "Export subscriptions as OPML (for NewPipe & FreeTube)": "تصدير الاشتراكات كـOPML (لِنيو بايب و فريتيوب)",
+    "Export data as JSON": "تصدير بيانات Invidious كـ JSON",
+    "Delete account?": "حذف الحساب؟",
+    "History": "السِّجل",
+    "An alternative front-end to YouTube": "واجهة أمامية بديلة لموقع يوتيوب",
+    "JavaScript license information": "معلومات ترخيص جافا سكربت",
     "source": "المصدر",
     "Log in": "تسجيل الدخول",
-    "Log in/register": "تسجيل الدخول\\إنشاء حساب",
-    "Log in with Google": "تسجيل الدخول بإستخدام جوجل",
-    "User ID": "إسم المستخدم",
-    "Password": "الرقم السرى",
-    "Time (h:mm:ss):": "(يجب ان يكتب مثل هذا التنسيق) الوقت (h(ساعات):mm(دقائق):ss(ثوانى)):",
-    "Text CAPTCHA": "CAPTCHA كلامية",
-    "Image CAPTCHA": "CAPTCHA صورية",
+    "Log in/register": "تسجيل الدخول \\ إنشاء حساب",
+    "Log in with Google": "تسجيل الدخول باستخدام جوجل",
+    "User ID": "مُعرِّف المُستخدم",
+    "Password": "كلمة المرور",
+    "Time (h:mm:ss):": "الوقت (h:mm:ss):",
+    "Text CAPTCHA": "نص الكابتشا",
+    "Image CAPTCHA": "صورة الكابتشا",
     "Sign In": "تسجيل الدخول",
-    "Register": "انشاء الحساب",
-    "E-mail": "الإيميل",
+    "Register": "التسجيل",
+    "E-mail": "البريد الإلكتروني",
     "Google verification code": "رمز تحقق جوجل",
-    "Preferences": "التفضيلات",
-    "Player preferences": "التفضيلات المشغل",
-    "Always loop: ": "كرر الفيديو دائما: ",
-    "Autoplay: ": "تشغيل تلقائى: ",
-    "Play next by default: ": "شغل الفيديو التالى تلقائيا",
-    "Autoplay next video: ": " شغل الفيديو التالى تلقائيا (فى قوائم التشغيل)",
-    "Listen by default: ": "تشغيل النسخة السمعية تلقائى: ",
-    "Proxy videos? ": "عرض الفيديوهات عن طريق الوكيل(proxy) ؟",
-    "Default speed: ": "السرعة الإفتراضية: ",
-    "Preferred video quality: ": "الجودة المفضلة للفيديوهات: ",
-    "Player volume: ": "صوت المشغل: ",
-    "Default comments: ": "إضهار التعليقات الإفتراضية لـ: ",
+    "Preferences": "الإعدادات",
+    "preferences_category_player": "إعدادات المُشغِّل",
+    "preferences_video_loop_label": "كرر المقطع المرئيّ دائما: ",
+    "preferences_autoplay_label": "تشغيل تلقائي: ",
+    "preferences_continue_label": "شغل المقطع التالي تلقائيًا: ",
+    "preferences_continue_autoplay_label": "شغل المقطع التالي تلقائيًا: ",
+    "preferences_listen_label": "تشغيل النسخة السمعية تلقائيًا: ",
+    "preferences_local_label": "بروكسي المقاطع المرئيّة؟ ",
+    "preferences_speed_label": "السرعة الافتراضية: ",
+    "preferences_quality_label": "الجودة المفضلة للمقاطع: ",
+    "preferences_volume_label": "صوت المشغل: ",
+    "preferences_comments_label": "التعليقات الافتراضية: ",
     "youtube": "يوتيوب",
-    "reddit": "Reddit",
-    "Default captions: ": "الترجمات الإفتراضية: ",
-    "Fallback captions: ": "الترجمات المصاحبة: ",
-    "Show related videos? ": "عرض مقاطع الفيديو ذات الصلة؟",
-    "Show annotations by default? ": "عرض الملاحظات فى الفيديو تلقائيا ؟",
-    "Visual preferences": "التفضيلات المرئية",
-    "Dark mode: ": "الوضع الليلى: ",
-    "Thin mode: ": "الوضع الخفيف: ",
-    "Subscription preferences": "تفضيلات الإشتراك",
-    "Show annotations by default for subscribed channels? ": "عرض الملاحظات فى الفيديوهات تلقائيا فى القنوات المشترك بها فقط ؟",
+    "reddit": "ريديت",
+    "preferences_captions_label": "التسميات التوضيحية الإفتراضية: ",
+    "Fallback captions: ": "التسميات التوضيحية الاحتياطيَّة: ",
+    "preferences_related_videos_label": "اعرض الفيديوهات ذات الصلة: ",
+    "preferences_annotations_label": "اعرض الملاحظات في الفيديو تلقائيا: ",
+    "preferences_extend_desc_label": "توسيع وصف الفيديو تلقائيا: ",
+    "preferences_vr_mode_label": "مقاطع فيديو تفاعلية بزاوية 360 درجة (تتطلب WebGL): ",
+    "preferences_category_visual": "التفضيلات المرئية",
+    "preferences_player_style_label": "شكل مشغل الفيديوهات: ",
+    "Dark mode: ": "الوضع الليلي: ",
+    "preferences_dark_mode_label": "المظهر: ",
+    "dark": "غامق (اسود)",
+    "light": "فاتح (ابيض)",
+    "preferences_thin_mode_label": "الوضع الخفيف: ",
+    "preferences_category_misc": "تفضيلات متنوعة",
+    "preferences_automatic_instance_redirect_label": "إعادة توجيه المثيل التلقائي (إعادة التوجيه إلى redirect.invidious.io): ",
+    "preferences_category_subscription": "تفضيلات الاشتراك",
+    "preferences_annotations_subscribed_label": "عرض الملاحظات في الفيديوهات تلقائيا في القنوات المشترك بها فقط: ",
     "Redirect homepage to feed: ": "إعادة التوجية من الصفحة الرئيسية لصفحة المشتركين (لرؤية اخر فيديوهات المشتركين): ",
-    "Number of videos shown in feed: ": "عدد الفيديوهات التى ستظهر فى صفحة المشتركين: ",
-    "Sort videos by: ": "ترتيب الفيديو بـ: ",
-    "published": "احدث فيديو",
-    "published - reverse": "احدث فيديو - عكسى",
-    "alphabetically": "ترتيب ابجدى",
-    "alphabetically - reverse": "ابجدى - عكسى",
-    "channel name": "بإسم القناة",
-    "channel name - reverse": "بإسم القناة - عكسى",
-    "Only show latest video from channel: ": "فقط إظهر اخر فيديو من القناة: ",
-    "Only show latest unwatched video from channel: ": "فقط اظهر اخر فيديو لم يتم رؤيتة من القناة: ",
-    "Only show unwatched: ": "فقط اظهر الذى لم يتم رؤيتة: ",
-    "Only show notifications (if there are any): ": "إظهار الإشعارات فقط (إذا كان هناك أي): ",
+    "preferences_max_results_label": "عدد الفيديوهات التى ستظهر فى صفحة المشتركين: ",
+    "preferences_sort_label": "ترتيب الفيديوهات بـ: ",
+    "published": "أحدث فيديو",
+    "published - reverse": "أحدث فيديو - عكسي",
+    "alphabetically": "ترتيب أبجدي",
+    "alphabetically - reverse": "أبجدي - عكسي",
+    "channel name": "باسم القناة",
+    "channel name - reverse": "باسم القناة - عكسى",
+    "Only show latest video from channel: ": "فقط أظهر آخر فيديو من القناة: ",
+    "Only show latest unwatched video from channel: ": "فقط أظهر آخر فيديو لم يتم رؤيته من القناة: ",
+    "preferences_unseen_only_label": "فقط أظهر الذي لم يتم رؤيته: ",
+    "preferences_notifications_only_label": "إظهار الإشعارات فقط (إذا كان هناك أي): ",
     "Enable web notifications": "تفعيل إشعارات المتصفح",
     "`x` uploaded a video": "`x` رفع فيديو",
-    "`x` is live": "`x` فى بث مباشر",
-    "Data preferences": "إعدادات التفضيلات",
+    "`x` is live": "`x` في بث مباشر",
+    "preferences_category_data": "إعدادات التفضيلات",
     "Clear watch history": "حذف سجل المشاهدة",
-    "Import/export data": "إضافة\\إستخراج البيانات",
-    "Change password": "غير الرقم السرى",
-    "Manage subscriptions": "إدارة المشتركين",
+    "Import/export data": "إضافة\\استخراج البيانات",
+    "Change password": "غير كلمة السر",
+    "Manage subscriptions": "إدارة الاشتراكات",
     "Manage tokens": "إدارة الرموز",
     "Watch history": "سجل المشاهدة",
     "Delete account": "حذف الحساب",
-    "Administrator preferences": "إعدادات المدير",
-    "Default homepage: ": "الصفحة الرئيسية الافتراضية ",
-    "Feed menu: ": "قائمة التغذية",
-    "Top enabled? ": "تفعيل 'الأفضل' ؟ ",
-    "CAPTCHA enabled? ": "تفعيل الكابتشا ؟",
-    "Login enabled? ": "تفعيل تسجيل الدخول ؟",
-    "Registration enabled? ": "تفعيل التسجيل ؟",
-    "Report statistics? ": "إبلاغ الإحصائيات",
-    "Save preferences": "حفظ التفضيلات",
-    "Subscription manager": "مدير الإشتراكات",
+    "preferences_category_admin": "إعدادات المدير",
+    "preferences_default_home_label": "الصفحة الرئيسية الافتراضية: ",
+    "preferences_feed_menu_label": "قائمة التدفقات: ",
+    "preferences_show_nick_label": "إظهار اللقب في الأعلى: ",
+    "Top enabled: ": "تفعيل 'الأفضل' ؟ ",
+    "CAPTCHA enabled: ": "تفعيل الكابتشا: ",
+    "Login enabled: ": "تمكين تسجيل الدخول: ",
+    "Registration enabled: ": "تفعيل التسجيل: ",
+    "Report statistics: ": "تقرير الإحصائيات: ",
+    "Save preferences": "حفظ الإعدادات",
+    "Subscription manager": "مدير الاشتراكات",
     "Token manager": "إداره الرمز",
     "Token": "الرمز",
-    "`x` subscriptions": "`x` مشتركين",
-    "`x` tokens": "`x` رموز",
-    "Import/export": "إضافة\\إستخراج",
-    "unsubscribe": "إلغاء الإشتراك",
+    "Import/export": "استيراد/تصدير",
+    "unsubscribe": "إلغاء الاشتراك",
     "revoke": "مسح",
-    "Subscriptions": "الإشتراكات",
-    "`x` unseen notifications": "`x` إشعارات لم تشاهدها بعد ",
+    "Subscriptions": "الاشتراكات",
     "search": "بحث",
     "Log out": "تسجيل الخروج",
-    "Released under the AGPLv3 by Omar Roth.": "تم الإنشاء تحت AGPLv3 بواسطة عمر روث.",
+    "Released under the AGPLv3 on Github.": "صدر تحت AGPLv3 على GitHub.",
     "Source available here.": "الأكواد متوفرة هنا.",
     "View JavaScript license information.": "مشاهدة معلومات حول تراخيص الجافاسكريبت.",
-    "View privacy policy.": "عرض سياسة الخصوصية",
+    "View privacy policy.": "عرض سياسة الخصوصية.",
     "Trending": "الشائع",
+    "Public": "عام",
     "Unlisted": "غير مصنف",
+    "Private": "خاص",
+    "View all playlists": "عرض جميع قوائم التشغيل",
+    "Updated `x` ago": "تم تحديثه منذ `x`",
+    "Delete playlist `x`?": "حذف قائمة التشغيل `x`؟",
+    "Delete playlist": "حذف قائمة التغشيل",
+    "Create playlist": "إنشاء قائمة تشغيل",
+    "Title": "العنوان",
+    "Playlist privacy": "إعدادات الخصوصية",
+    "Editing playlist `x`": "تعديل قائمة التشغيل `x`",
+    "Show more": "إظهار المزيد",
+    "Show less": "عرض اقل",
     "Watch on YouTube": "مشاهدة الفيديو على اليوتيوب",
-    "Hide annotations": "إخفاء الملاحظات فى الفيديو",
-    "Show annotations": "عرض الملاحظات فى الفيديو",
+    "Switch Invidious Instance": "تبديل المثيل Invidious",
+    "Hide annotations": "إخفاء الملاحظات في الفيديو",
+    "Show annotations": "عرض الملاحظات في الفيديو",
     "Genre: ": "النوع: ",
     "License: ": "التراخيص: ",
-    "Family friendly? ": "محتوى عائلى? ",
+    "Family friendly? ": "محتوى عائلي؟ ",
     "Wilson score: ": "درجة ويلسون: ",
-    "Engagement: ": "نسبة المشاركة (عدد المشاهدات\\عدد الإعجابات): ",
+    "Engagement: ": "نسبة المشاركة: ",
     "Whitelisted regions: ": "الدول المسموح فيها هذا الفيديو: ",
-    "Blacklisted regions: ": "الدول الحظور فيها هذا الفيديو: ",
+    "Blacklisted regions: ": "الدول المحظور فيها هذا الفيديو: ",
     "Shared `x`": "شارك منذ `x`",
-    "`x` views": "`x` مشاهدون",
     "Premieres in `x`": "يعرض فى `x`",
-    "Premieres `x`": "",
-    "Hi! Looks like you have JavaScript turned off. Click here to view comments, keep in mind they may take a bit longer to load.": "اهلا! يبدو ان الجافاسكريبت معطلة. اضغط هنا لعرض التعليقات, ضع فى إعتبارك انها ستأخذ وقت اطول للعرض.",
+    "Premieres `x`": "يعرض `x`",
+    "Hi! Looks like you have JavaScript turned off. Click here to view comments, keep in mind they may take a bit longer to load.": "أهلًا! يبدو أن جافاسكريبت معطلٌ لديك. اضغط هنا لعرض التعليقات، وَضَع في اعتبارك أنها ستأخذ وقتًا أطول للتحميل.",
     "View YouTube comments": "عرض تعليقات اليوتيوب",
     "View more comments on Reddit": "عرض المزيد من التعليقات على\\من موقع Reddit",
-    "View `x` comments": "عرض `x` تعليقات",
+    "View `x` comments": {
+        "([^.,0-9]|^)1([^.,0-9]|$)": "عرض `x` تعليقات",
+        "": "عرض `x` تعليقات"
+    },
     "View Reddit comments": "عرض تعليقات ريدإت Reddit",
     "Hide replies": "إخفاء الردود",
     "Show replies": "عرض الردود",
-    "Incorrect password": "الرقم السرى غير صحيح",
-    "Quota exceeded, try again in a few hours": "تم تجاوز عدد المرات المسموح بها, حاول مرة اخرى بعد عدة ساعات",
-    "Unable to log in, make sure two-factor authentication (Authenticator or SMS) is turned on.": "غير قادر على تسجيل الدخول, تأكد من تشغيل المصادقة الثنائية 2FA.",
+    "Incorrect password": "كلمة السر غير صحيحة",
+    "Quota exceeded, try again in a few hours": "تم تجاوز عدد المرات المسموح بها، حاول مجددًا بعد بضع ساعات",
+    "Unable to log in, make sure two-factor authentication (Authenticator or SMS) is turned on.": "غير قادر على تسجيل الدخول، تأكد من تشغيل المصادقة الثنائية 2FA.",
     "Invalid TFA code": "كود مصادقة ثنائية 2FA غير صحيح",
-    "Login failed. This may be because two-factor authentication is not turned on for your account.": "لم يتم تسجيل الدخول. هذا ربما بسبب ان المصادقة الثنائية 2FA معطلة فى حسابك.",
+    "Login failed. This may be because two-factor authentication is not turned on for your account.": "فشل تسجيل الدخول. قد يكون هذا بسبب أن المصادقة الثنائية 2FA معطلة في حسابك.",
     "Wrong answer": "إجابة خاطئة",
     "Erroneous CAPTCHA": "الكابتشا CAPTCHA غير صاحلة",
     "CAPTCHA is a required field": "مكان الكابتشا CAPTCHA مطلوب",
-    "User ID is a required field": "مكان إسم المستخدم مطلوب",
-    "Password is a required field": "مكان الرقم السرى مطلوب",
-    "Wrong username or password": "إسم المستخدم او الرقم السرى غير صحيح",
-    "Please sign in using 'Log in with Google'": "الرجاء تسجيل الدخول 'تسجيل الدخول بواسطة جوجل'",
-    "Password cannot be empty": "الرقم السرى لايمكن ان يكون فارغ",
-    "Password cannot be longer than 55 characters": "الرقم السرى لا يتعدى 55 حرف",
+    "User ID is a required field": "مكان اسم المستخدم مطلوب",
+    "Password is a required field": "مكان كلمة السر مطلوب",
+    "Wrong username or password": "اسم المستخدم او كلمة السر غير صحيح",
+    "Please sign in using 'Log in with Google'": "الرجاء تسجيل الدخول باستخدام \"تسجيل الدخول باستخدام Google\"",
+    "Password cannot be empty": "لا يمكن أن تكون كلمة السر فارغة",
+    "Password cannot be longer than 55 characters": "يجب أن لا تتعدى كلمة السر 55 حرفًا",
     "Please log in": "الرجاء تسجيل الدخول",
-    "Invidious Private Feed for `x`": "صفحة Invidious للمشتركين الخاصة\\مخفية لـ `x`",
+    "Invidious Private Feed for `x`": "تغذية Invidious خاصة ل 'x'",
     "channel:`x`": "قناة:`x`",
     "Deleted or invalid channel": "قناة ممسوحة او غير صالحة",
-    "This channel does not exist.": "القناة غير موجودة.",
+    "This channel does not exist.": "هذه القناة غير موجودة.",
     "Could not get channel info.": "لم يستطع الحصول على معلومات القناة.",
     "Could not fetch comments": "لم يتمكن من إحضار التعليقات",
-    "View `x` replies": "عرض `x` ردود",
     "`x` ago": "`x` منذ",
     "Load more": "عرض المزيد",
-    "`x` points": "`x` نقاط",
-    "Could not create mix.": "لم يستطع عمل خلط.",
+    "Could not create mix.": "تعذر إنشاء مزيج.",
     "Empty playlist": "قائمة التشغيل فارغة",
     "Not a playlist.": "قائمة التشغيل غير صالحة.",
     "Playlist does not exist.": "قائمة التشغيل غير موجودة.",
     "Could not pull trending pages.": "لم يستطع عرض الصفحات الراجئة.",
-    "Hidden field \"challenge\" is a required field": "مكان مخفى \"تحدى\" مكان مطلوب",
-    "Hidden field \"token\" is a required field": "مكان مخفى \"رمز\" مكان مطلوب",
-    "Erroneous challenge": "تحدى غير صالح",
-    "Erroneous token": "روز غير صالح",
+    "Hidden field \"challenge\" is a required field": "مكان مخفي \"تحدي\" مكان مطلوب",
+    "Hidden field \"token\" is a required field": "مكان مخفي \"رمز\" مكان مطلوب",
+    "Erroneous challenge": "تحدي غير صالح",
+    "Erroneous token": "رمز مميز خاطئ",
     "No such user": "مستخدم غير صالح",
-    "Token is expired, please try again": "الرمز منتهى الصلاحية , الرجاء المحاولة مرة اخرى",
-    "English": "إنجليزى",
-    "English (auto-generated)": "إنجليزى (تم إنشائة تلقائى)",
+    "Token is expired, please try again": "الرمز منتهى الصلاحية، الرجاء المحاولة مرة اخرى",
+    "English": "إنجليزي",
+    "English (auto-generated)": "إنجليزي (تم إنشائه تلقائيًا)",
     "Afrikaans": "الأفريكانية",
     "Albanian": "الألبانية",
     "Amharic": "الأمهرية",
     "Arabic": "العربية",
-    "Armenian": "الأرميني",
-    "Azerbaijani": "أذربيجان",
+    "Armenian": "الأرمينية",
+    "Azerbaijani": "أذربيجانية",
     "Bangla": "البنغالية",
-    "Basque": "الباسكي",
+    "Basque": "الباسكية",
     "Belarusian": "البيلاروسية",
     "Bosnian": "البوسنية",
     "Bulgarian": "البلغارية",
@@ -286,36 +303,237 @@
     "Yiddish": "اليديشية",
     "Yoruba": "اليوروبا",
     "Zulu": "الزولو",
-    "`x` years": "`x` سنوات",
-    "`x` months": "`x` شهور",
-    "`x` weeks": "`x` اسابيع",
-    "`x` days": "`x` ايام",
-    "`x` hours": "`x` ساعات",
-    "`x` minutes": "`x` دقائق",
-    "`x` seconds": "`x` ثوانى",
-    "Fallback comments: ": "التعليقات المصاحبة",
-    "Popular": "لاكثر شعبية",
+    "Fallback comments: ": "التعليقات البديلة: ",
+    "Popular": "الأكثر شعبية",
+    "Search": "بحث",
     "Top": "الأفضل",
     "About": "حول",
-    "Rating: ": "التقييم",
-    "Language: ": "اللغة",
+    "Rating: ": "التقييم: ",
+    "preferences_locale_label": "اللغة: ",
     "View as playlist": "عرض كا قائمة التشغيل",
     "Default": "الكل",
     "Music": "الاغانى",
     "Gaming": "الألعاب",
     "News": "الأخبار",
     "Movies": "الأفلام",
-    "Download": "تحميل كـ",
-    "Download as: ": "تحميل",
-    "%A %B %-d, %Y": "",
-    "(edited)": "(تم تعديلة)",
+    "Download": "نزّل",
+    "Download as: ": "نزله كـ: ",
+    "%A %B %-d, %Y": "%A %-d %B %Y",
+    "(edited)": "(معدّل)",
     "YouTube comment permalink": "رابط التعليق على اليوتيوب",
-    "permalink": "",
-    "`x` marked it with a ❤": "`x` اعجب بهذا",
-    "Audio mode": "الوضع الصوتى",
+    "permalink": "الرابط",
+    "`x` marked it with a ❤": "`x` أعجب بهذا",
+    "Audio mode": "الوضع الصوتي",
     "Video mode": "وضع الفيديو",
     "Videos": "الفيديوهات",
     "Playlists": "قوائم التشغيل",
-    "Community": "",
-    "Current version: ": "الإصدار الحالى"
-}
+    "Community": "المجتمع",
+    "search_filters_sort_option_relevance": "ملاؤم",
+    "search_filters_sort_option_rating": "تقييم",
+    "search_filters_sort_option_date": "التاريخ",
+    "search_filters_sort_option_views": "مشاهدات",
+    "search_filters_type_label": "نوع المحتوى",
+    "search_filters_duration_label": "المدة الزمنية",
+    "search_filters_features_label": "الميزات",
+    "search_filters_sort_label": "فرز",
+    "search_filters_date_option_hour": "آخر ساعة",
+    "search_filters_date_option_today": "اليوم",
+    "search_filters_date_option_week": "هذا الأسبوع",
+    "search_filters_date_option_month": "هذا الشهر",
+    "search_filters_date_option_year": "هذه السنة",
+    "search_filters_type_option_video": "فيديو",
+    "search_filters_type_option_channel": "قناة",
+    "search_filters_type_option_playlist": "قائمة التشغيل",
+    "search_filters_type_option_movie": "فيلم",
+    "search_filters_type_option_show": "عرض",
+    "search_filters_features_option_hd": "عالية الدقة",
+    "search_filters_features_option_subtitles": "ترجمات",
+    "search_filters_features_option_c_commons": "المشاع الإبداعي",
+    "search_filters_features_option_three_d": "ثلاثي الأبعاد",
+    "search_filters_features_option_live": "مباشر",
+    "search_filters_features_option_four_k": "4k",
+    "search_filters_features_option_location": "الأماكن",
+    "search_filters_features_option_hdr": "وضع التباين العالي",
+    "Current version: ": "الإصدار الحالي: ",
+    "next_steps_error_message": "بعد ذلك يجب أن تحاول: ",
+    "next_steps_error_message_refresh": "تحديث",
+    "next_steps_error_message_go_to_youtube": "انتقل إلى يوتيوب",
+    "search_filters_duration_option_short": "قصير (< 4 دقائق)",
+    "search_filters_duration_option_long": "طويل (> 20 دقيقة)",
+    "footer_source_code": "شفرة المصدر",
+    "footer_original_source_code": "كود المصدر الأصلي",
+    "footer_modfied_source_code": "شفرة المصدر المعدلة",
+    "adminprefs_modified_source_code_url_label": "URL إلى مستودع التعليمات البرمجية المصدرية المعدلة",
+    "footer_documentation": "التوثيق",
+    "footer_donate_page": "تبرّع",
+    "preferences_region_label": "بلد المحتوى: ",
+    "preferences_quality_dash_label": "جودة فيديو DASH المفضلة: ",
+    "preferences_quality_option_dash": "DASH (الجودة التلقائية)",
+    "preferences_quality_option_hd720": "HD720",
+    "preferences_quality_option_medium": "متوسطة",
+    "preferences_quality_option_small": "صغيرة",
+    "preferences_quality_dash_option_auto": "تلقائي",
+    "preferences_quality_dash_option_best": "الأفضل",
+    "preferences_quality_dash_option_worst": "أسوأ",
+    "preferences_quality_dash_option_4320p": "4320p",
+    "preferences_quality_dash_option_2160p": "2160p",
+    "preferences_quality_dash_option_1440p": "1440p",
+    "preferences_quality_dash_option_1080p": "1080p",
+    "preferences_quality_dash_option_720p": "720p",
+    "preferences_quality_dash_option_480p": "480p",
+    "preferences_quality_dash_option_360p": "360p",
+    "preferences_quality_dash_option_240p": "240p",
+    "preferences_quality_dash_option_144p": "144p",
+    "search_filters_features_option_purchased": "تم شراؤها",
+    "none": "لاشيء",
+    "videoinfo_started_streaming_x_ago": "بدأ البث منذ `x`",
+    "videoinfo_watch_on_youTube": "مشاهدة على يوتيوب",
+    "videoinfo_youTube_embed_link": "مضمن",
+    "videoinfo_invidious_embed_link": "رابط مضمن",
+    "user_created_playlists": "'x' إنشاء قوائم التشغيل",
+    "user_saved_playlists": "قوائم التشغيل المحفوظة 'x'",
+    "Video unavailable": "الفيديو غير متوفر",
+    "search_filters_features_option_three_sixty": "360°",
+    "download_subtitles": "ترجمات - 'x' (.vtt)",
+    "invidious": "الخيالي",
+    "preferences_save_player_pos_label": "حفظ موضع التشغيل: ",
+    "crash_page_you_found_a_bug": "يبدو أنك قد وجدت خطأً برمجيًّا في Invidious!",
+    "generic_videos_count_0": "لا فيديوهات",
+    "generic_videos_count_1": "فيديو واحد",
+    "generic_videos_count_2": "فيديوهين",
+    "generic_videos_count_3": "{{count}} فيديوهات",
+    "generic_videos_count_4": "{{count}} فيديو",
+    "generic_videos_count_5": "{{count}} فيديو",
+    "generic_subscribers_count_0": "لا مشتركين",
+    "generic_subscribers_count_1": "مشترك واحد",
+    "generic_subscribers_count_2": "مشتركان",
+    "generic_subscribers_count_3": "{{count}} مشتركين",
+    "generic_subscribers_count_4": "{{count}} مشترك",
+    "generic_subscribers_count_5": "{{count}} مشترك",
+    "generic_views_count_0": "لا مشاهدات",
+    "generic_views_count_1": "مشاهدة واحدة",
+    "generic_views_count_2": "مشاهدتان",
+    "generic_views_count_3": "{{count}} مشاهدات",
+    "generic_views_count_4": "{{count}} مشاهدة",
+    "generic_views_count_5": "{{count}} مشاهدة",
+    "generic_subscriptions_count_0": "لا اشتراكات",
+    "generic_subscriptions_count_1": "اشتراك واحد",
+    "generic_subscriptions_count_2": "اشتراكان",
+    "generic_subscriptions_count_3": "{{count}} اشتراكات",
+    "generic_subscriptions_count_4": "{{count}} اشتراك",
+    "generic_subscriptions_count_5": "{{count}} اشتراك",
+    "generic_playlists_count_0": "لا قوائم تشغيل",
+    "generic_playlists_count_1": "قائمة تشغيل واحدة",
+    "generic_playlists_count_2": "قائمتا تشغيل",
+    "generic_playlists_count_3": "{{count}} قوائم تشغيل",
+    "generic_playlists_count_4": "{{count}} قائمة تشغيل",
+    "generic_playlists_count_5": "{{count}} قائمة تشغيل",
+    "English (United States)": "الإنجليزية (الولايات المتحدة)",
+    "Indonesian (auto-generated)": "إندونيسي (مُنشأ تلقائيًا)",
+    "Interlingue": "إنترلينغوي",
+    "Italian (auto-generated)": "الإيطالية (مُنشأة تلقائيًا)",
+    "Spanish (auto-generated)": "الأسبانية (تم إنشاؤه تلقائيًا)",
+    "crash_page_before_reporting": "قبل الإبلاغ عن خطأ، تأكد من وجود:",
+    "French (auto-generated)": "الفرنسية (مُنشأة تلقائيًا)",
+    "Portuguese (auto-generated)": "البرتغالية (تم إنشاؤه تلقائيًا)",
+    "Turkish (auto-generated)": "التركية (تم إنشاؤها تلقائيًا)",
+    "crash_page_refresh": "حاول <a href=\"`x`\"> تحديث الصفحة </a>",
+    "crash_page_switch_instance": "حاول <a href=\"`x`\"> استخدام مثيل آخر </a>",
+    "Korean (auto-generated)": "كوري (تم إنشاؤه تلقائيًا)",
+    "Spanish (Mexico)": "الإسبانية (المكسيك)",
+    "Vietnamese (auto-generated)": "فيتنامي (تم إنشاؤه تلقائيًا)",
+    "crash_page_report_issue": "إذا لم يساعد أي مما سبق، يرجى فتح <a href=\"`x`\"> مشكلة جديدة على GitHub </a> (ويفضل أن يكون باللغة الإنجليزية) وتضمين النص التالي في رسالتك (لا تترجم هذا النص):",
+    "crash_page_read_the_faq": "قراءة <a href=\"`x`\"> الأسئلة المتكررة (الأسئلة الشائعة) </a>",
+    "preferences_watch_history_label": "تمكين سجل المشاهدة: ",
+    "English (United Kingdom)": "الإنجليزية (المملكة المتحدة)",
+    "Cantonese (Hong Kong)": "الكانتونية (هونغ كونغ)",
+    "Chinese": "الصينية",
+    "Chinese (China)": "الصينية (الصين)",
+    "Chinese (Hong Kong)": "الصينية (هونج كونج)",
+    "Chinese (Taiwan)": "الصينية (تايوان)",
+    "Dutch (auto-generated)": "هولندي (تم إنشاؤه تلقائيًا)",
+    "German (auto-generated)": "ألماني (تم إنشاؤه تلقائيًا)",
+    "Japanese (auto-generated)": "اليابانية (مُنشأة تلقائيًا)",
+    "Portuguese (Brazil)": "البرتغالية (البرازيل)",
+    "Russian (auto-generated)": "الروسية (منشأة تلقائيا)",
+    "Spanish (Spain)": "الإسبانية (إسبانيا)",
+    "crash_page_search_issue": "بحثت عن <a href=\"`x`\"> المشكلات الموجودة على GitHub </a>",
+    "search_filters_title": "معامل الفرز",
+    "search_message_no_results": "لا توجد نتائج.",
+    "search_message_change_filters_or_query": "حاول توسيع استعلام البحث و / أو تغيير عوامل التصفية.",
+    "search_filters_date_label": "تاريخ الرفع",
+    "generic_count_weeks_0": "{{count}} أسبوع",
+    "generic_count_weeks_1": "{{count}} أسبوع",
+    "generic_count_weeks_2": "{{count}} أسبوع",
+    "generic_count_weeks_3": "{{count}} أسبوع",
+    "generic_count_weeks_4": "{{count}} أسابيع",
+    "generic_count_weeks_5": "{{count}} أسبوع",
+    "Popular enabled: ": "تم تمكين الشعبية: ",
+    "search_filters_duration_option_medium": "متوسط (4-20 دقيقة)",
+    "search_filters_date_option_none": "أي تاريخ",
+    "search_filters_type_option_all": "أي نوع",
+    "search_filters_features_option_vr180": "VR180",
+    "generic_count_minutes_0": "{{count}} دقيقة",
+    "generic_count_minutes_1": "{{count}} دقيقة",
+    "generic_count_minutes_2": "{{count}} دقيقة",
+    "generic_count_minutes_3": "{{count}} دقيقة",
+    "generic_count_minutes_4": "{{count}} دقائق",
+    "generic_count_minutes_5": "{{count}} دقيقة",
+    "generic_count_hours_0": "{{count}} ساعة",
+    "generic_count_hours_1": "{{count}} ساعة",
+    "generic_count_hours_2": "{{count}} ساعة",
+    "generic_count_hours_3": "{{count}} ساعة",
+    "generic_count_hours_4": "{{count}} ساعات",
+    "generic_count_hours_5": "{{count}} ساعة",
+    "comments_view_x_replies_0": "عرض رد {{count}}",
+    "comments_view_x_replies_1": "عرض رد {{count}}",
+    "comments_view_x_replies_2": "عرض رد {{count}}",
+    "comments_view_x_replies_3": "عرض رد {{count}}",
+    "comments_view_x_replies_4": "عرض الردود {{count}}",
+    "comments_view_x_replies_5": "عرض رد {{count}}",
+    "search_message_use_another_instance": " يمكنك أيضًا البحث عن <a href=\"`x`\"> في مثيل آخر </a>.",
+    "comments_points_count_0": "{{count}} نقطة",
+    "comments_points_count_1": "{{count}} نقطة",
+    "comments_points_count_2": "{{count}} نقطة",
+    "comments_points_count_3": "{{count}} نقطة",
+    "comments_points_count_4": "{{count}} نقاط",
+    "comments_points_count_5": "{{count}} نقطة",
+    "generic_count_years_0": "{{count}} السنة",
+    "generic_count_years_1": "{{count}} السنة",
+    "generic_count_years_2": "{{count}} السنة",
+    "generic_count_years_3": "{{count}} السنة",
+    "generic_count_years_4": "{{count}} سنوات",
+    "generic_count_years_5": "{{count}} السنة",
+    "tokens_count_0": "الرمز المميز {{count}}",
+    "tokens_count_1": "الرمز المميز {{count}}",
+    "tokens_count_2": "الرمز المميز {{count}}",
+    "tokens_count_3": "الرمز المميز {{count}}",
+    "tokens_count_4": "الرموز المميزة {{count}}",
+    "tokens_count_5": "الرمز المميز {{count}}",
+    "search_filters_apply_button": "تطبيق الفلاتر المحددة",
+    "search_filters_duration_option_none": "أي مدة",
+    "subscriptions_unseen_notifs_count_0": "{{count}} إشعار غير مرئي",
+    "subscriptions_unseen_notifs_count_1": "{{count}} إشعار غير مرئي",
+    "subscriptions_unseen_notifs_count_2": "{{count}} إشعار غير مرئي",
+    "subscriptions_unseen_notifs_count_3": "{{count}} إشعار غير مرئي",
+    "subscriptions_unseen_notifs_count_4": "{{count}} إشعارات غير مرئية",
+    "subscriptions_unseen_notifs_count_5": "{{count}} إشعار غير مرئي",
+    "generic_count_days_0": "{{count}} يوم",
+    "generic_count_days_1": "{{count}} يوم",
+    "generic_count_days_2": "{{count}} يوم",
+    "generic_count_days_3": "{{count}} يوم",
+    "generic_count_days_4": "{{count}} أيام",
+    "generic_count_days_5": "{{count}} يوم",
+    "generic_count_months_0": "{{count}} شهر",
+    "generic_count_months_1": "{{count}} شهر",
+    "generic_count_months_2": "{{count}} شهر",
+    "generic_count_months_3": "{{count}} شهر",
+    "generic_count_months_4": "{{count}} شهور",
+    "generic_count_months_5": "{{count}} شهر",
+    "generic_count_seconds_0": "{{count}} ثانية",
+    "generic_count_seconds_1": "{{count}} ثانية",
+    "generic_count_seconds_2": "{{count}} ثانية",
+    "generic_count_seconds_3": "{{count}} ثانية",
+    "generic_count_seconds_4": "{{count}} ثوانٍ",
+    "generic_count_seconds_5": "{{count}} ثانية"
+}

locales/bn.json

@@ -0,0 +1,97 @@
+{
+    "Subscribe": "সাবস্ক্রাইব",
+    "View channel on YouTube": "ইউটিউবে চ্যানেল দেখুন",
+    "View playlist on YouTube": "ইউটিউবে প্লেলিস্ট দেখুন",
+    "newest": "সর্ব-নতুন",
+    "oldest": "পুরানতম",
+    "popular": "জনপ্রিয়",
+    "last": "শেষটা",
+    "Next page": "পরের পৃষ্ঠা",
+    "Previous page": "আগের পৃষ্ঠা",
+    "Clear watch history?": "দেখার ইতিহাস সাফ করবেন?",
+    "New password": "নতুন পাসওয়ার্ড",
+    "New passwords must match": "নতুন পাসওয়ার্ড অবশ্যই মিলতে হবে",
+    "Cannot change password for Google accounts": "গুগল অ্যাকাউন্টগুলোর জন্য পাসওয়ার্ড পরিবর্তন করা যায় না",
+    "Authorize token?": "টোকেন অনুমোদন করবেন?",
+    "Authorize token for `x`?": "`x` -এর জন্য টোকেন অনুমোদন?",
+    "Yes": "হ্যাঁ",
+    "No": "না",
+    "Import and Export Data": "তথ্য আমদানি ও রপ্তানি",
+    "Import": "আমদানি",
+    "Import Invidious data": "ইনভিডিয়াস তথ্য আমদানি",
+    "Import YouTube subscriptions": "ইউটিউব সাবস্ক্রিপশন আনুন",
+    "Import FreeTube subscriptions (.db)": "ফ্রিটিউব সাবস্ক্রিপশন (.db) আনুন",
+    "Import NewPipe subscriptions (.json)": "নতুন পাইপ সাবস্ক্রিপশন আনুন (.json)",
+    "Import NewPipe data (.zip)": "নিউপাইপ তথ্য আনুন (.zip)",
+    "Export": "তথ্য বের করুন",
+    "Export subscriptions as OPML": "সাবস্ক্রিপশন OPML হিসাবে আনুন",
+    "Export subscriptions as OPML (for NewPipe & FreeTube)": "OPML-এ সাবস্ক্রিপশন বের করুন(নিউ পাইপ এবং ফ্রিউটিউব এর জন্য)",
+    "Export data as JSON": "JSON হিসাবে তথ্য বের করুন",
+    "Delete account?": "অ্যাকাউন্ট মুছে ফেলবেন?",
+    "History": "ইতিহাস",
+    "An alternative front-end to YouTube": "ইউটিউবের একটি বিকল্পস্বরূপ সম্মুখ-প্রান্ত",
+    "JavaScript license information": "জাভাস্ক্রিপ্ট লাইসেন্সের তথ্য",
+    "source": "সূত্র",
+    "Log in": "লগ ইন",
+    "Log in/register": "লগ ইন/রেজিস্টার",
+    "Log in with Google": "গুগল দিয়ে লগ ইন করুন",
+    "User ID": "ইউজার আইডি",
+    "Password": "পাসওয়ার্ড",
+    "Time (h:mm:ss):": "সময় (ঘণ্টা:মিনিট:সেকেন্ড):",
+    "Text CAPTCHA": "টেক্সট ক্যাপচা",
+    "Image CAPTCHA": "চিত্র ক্যাপচা",
+    "Sign In": "সাইন ইন",
+    "Register": "নিবন্ধন",
+    "E-mail": "ই-মেইল",
+    "Google verification code": "গুগল যাচাইকরণ কোড",
+    "Preferences": "পছন্দসমূহ",
+    "preferences_category_player": "প্লেয়ারের পছন্দসমূহ",
+    "preferences_video_loop_label": "সর্বদা লুপ: ",
+    "preferences_autoplay_label": "স্বয়ংক্রিয় চালু: ",
+    "preferences_continue_label": "ডিফল্টভাবে পরবর্তী চালাও: ",
+    "preferences_continue_autoplay_label": "পরবর্তী ভিডিও স্বয়ংক্রিয়ভাবে চালাও: ",
+    "preferences_listen_label": "সহজাতভাবে শোনো: ",
+    "preferences_local_label": "ভিডিও প্রক্সি করো: ",
+    "preferences_speed_label": "সহজাত গতি: ",
+    "preferences_quality_label": "পছন্দের ভিডিও মান: ",
+    "preferences_volume_label": "প্লেয়ার শব্দের মাত্রা: ",
+    "LIVE": "লাইভ",
+    "Shared `x` ago": "`x` আগে শেয়ার করা হয়েছে",
+    "Unsubscribe": "আনসাবস্ক্রাইব",
+    "generic_views_count": "{{count}}জন দেখেছে",
+    "generic_views_count_plural": "{{count}}জন দেখেছে",
+    "generic_videos_count": "{{count}}টি ভিডিও",
+    "generic_videos_count_plural": "{{count}}টি ভিডিও",
+    "generic_subscribers_count": "{{count}}জন অনুসরণকারী",
+    "generic_subscribers_count_plural": "{{count}}জন অনুসরণকারী",
+    "preferences_watch_history_label": "দেখার ইতিহাস চালু করো: ",
+    "preferences_quality_option_dash": "ড্যাশ (সময়োপযোগী মান)",
+    "preferences_quality_dash_option_auto": "স্বয়ংক্রিয়",
+    "preferences_quality_dash_option_best": "সেরা",
+    "preferences_quality_dash_option_worst": "মন্দতম",
+    "preferences_quality_dash_option_4320p": "৪৩২০পি",
+    "preferences_quality_dash_option_2160p": "২১৬০পি",
+    "preferences_quality_dash_option_1440p": "১৪৪০পি",
+    "preferences_quality_dash_option_480p": "৪৮০পি",
+    "preferences_quality_dash_option_360p": "৩৬০পি",
+    "preferences_quality_dash_option_240p": "২৪০পি",
+    "preferences_quality_dash_option_144p": "১৪৪পি",
+    "preferences_comments_label": "সহজাত মন্তব্য: ",
+    "youtube": "ইউটিউব",
+    "Fallback captions: ": "বিকল্প উপাখ্যান: ",
+    "preferences_related_videos_label": "সম্পর্কিত ভিডিও দেখাও: ",
+    "preferences_annotations_label": "সহজাতভাবে টীকা দেখাও ",
+    "preferences_quality_option_hd720": "উচ্চ৭২০",
+    "preferences_quality_dash_label": "পছন্দের ড্যাশ ভিডিও মান: ",
+    "preferences_captions_label": "সহজাত উপাখ্যান: ",
+    "generic_playlists_count": "{{count}}টি চালুতালিকা",
+    "generic_playlists_count_plural": "{{count}}টি চালুতালিকা",
+    "reddit": "রেডিট",
+    "invidious": "ইনভিডিয়াস",
+    "generic_subscriptions_count": "{{count}}টি অনুসরণ",
+    "generic_subscriptions_count_plural": "{{count}}টি অনুসরণ",
+    "preferences_quality_option_medium": "মধ্যম",
+    "preferences_quality_option_small": "ছোট",
+    "preferences_quality_dash_option_1080p": "১০৮০পি",
+    "preferences_quality_dash_option_720p": "৭২০পি"
+}