Bump shaka-player from 4.16.9 to 4.16.10 (#8345)

Bumps [shaka-player](https://github.com/shaka-project/shaka-player) from 4.16.9 to 4.16.10.
- [Release notes](https://github.com/shaka-project/shaka-player/releases)
- [Changelog](https://github.com/shaka-project/shaka-player/blob/v4.16.10/CHANGELOG.md)
- [Commits](https://github.com/shaka-project/shaka-player/compare/v4.16.9...v4.16.10)

---
updated-dependencies:
- dependency-name: shaka-player
  dependency-version: 4.16.10
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.babelrc

@@ -9,8 +9,5 @@
         }
       }
     ]
-  ],
-  "plugins": [
-    "@babel/plugin-transform-class-properties"
   ]
 }

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -23,6 +23,8 @@ body:
           required: true
         - label: This issue contains only one bug.
           required: true
+        - label: I have read and agree to follow the [rules](https://docs.freetubeapp.io/community/rules/).
+          required: true
   - type: textarea
     attributes:
       label: Describe the bug
@@ -82,7 +84,6 @@ body:
       label: Installation Method
       description: When you select an unofficial installation method, you must have verified that the bug is also present in one of the official installation methods. Please make sure you uninstall the unofficial installation before installing one of the official installations. If you can't reproduce this in one of the official installation methods, you should report the bug to the maintainer of the unofficial installation method you used.
       options:
-        - .apk (Alpine Linux Package)
         - .AppImage
         - .deb
         - .dmg
@@ -93,6 +94,7 @@ body:
         - .rpm
         - .zip / .7z
         - .apk (FreeTubeAndroid Unofficial)
+        - .apk (Alpine Linux Package Unofficial)
         - AUR (Unofficial)
         - Chocolatey (Unofficial)
         - Homebrew (Unofficial)

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -19,6 +19,8 @@ body:
             required: true
           - label: This issue contains only one feature request.
             required: true
+          - label: I have read and agree to follow the [rules](https://docs.freetubeapp.io/community/rules/).
+            required: true
   - type: textarea
     attributes:
       label: Problem Description

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,6 @@
-# Title
-
 <!-- Thanks for sending a pull request! Make sure to follow the contributing guidelines. -->
 <!-- Important note, we may remove your pull request if you do not use this provided PR template correctly. -->
+<!-- Do not create PR's with AI! (PRs created mainly with AI will be closed. They waste our team's time. We ban repeat offenders.) -->
 
 ## Pull Request Type
 <!-- Please select what type of pull request this is: [x] -->
@@ -21,10 +20,9 @@
 ## Screenshots <!-- If appropriate -->
 <!-- Please add before and after screenshots if there is a visible change. -->
 
-## Testing <!-- for code that is not small enough to be easily understandable -->
-<!-- Has this pull request been tested? -->
-<!-- Please describe shortly how you tested it. -->
-<!-- Are there any ramifications remaining? -->
+## Testing
+<!-- How can reviewers verify that the PR produces correct results? -->
+<!-- Please provide instructions so that others can ensure that your pull request would produce correct results. For examples see, https://github.com/FreeTubeApp/FreeTube/pull/5743, https://github.com/FreeTubeApp/FreeTube/pull/7349, https://github.com/FreeTubeApp/FreeTube/pull/5125, https://github.com/FreeTubeApp/FreeTube/pull/7338 -->
 
 ## Desktop
 <!-- Please complete the following information-->

.github/workflows/autoLabelDuplicate.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check Comment Author
-        uses: Amwam/issue-comment-action@v1.3.1
+        uses: Amwam/issue-comment-action@v1.5.0
         with:
           keywords: '["duplicate of #", "duplicate of https://github.com/FreeTubeApp/FreeTube/issues/", "duplicate of https://github.com/FreeTubeApp/FreeTube/pulls/"]'
           labels: '["U: duplicate"]'

.github/workflows/autoMerge.yml

@@ -3,6 +3,8 @@ on:
   pull_request_target:
     types: [opened, synchronize, reopened, auto_merge_disabled, ready_for_review]
 
+permissions: {}
+
 jobs:
   build:
     if: ${{ !github.event.pull_request.draft && (contains(github.event.pull_request.base.ref, 'development') || contains(github.event.pull_request.base.ref, 'RC')) }}
@@ -10,8 +12,6 @@ jobs:
 
     steps:
     - name: Auto Merge PR
-      run: |
-        echo ${{ secrets.PUSH_TOKEN }} >> auth.txt
-        gh auth login --with-token < auth.txt
-        rm auth.txt
-        gh pr merge https://github.com/FreeTubeApp/FreeTube/pull/${{ github.event.pull_request.number }} --auto --squash
+      env:
+        GH_TOKEN: ${{ secrets.PUSH_TOKEN }}
+      run: gh pr merge https://github.com/FreeTubeApp/FreeTube/pull/${{ github.event.pull_request.number }} --auto --squash

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [24.x]
         runtime:
           - linux-x64
           - linux-armv7l
@@ -46,13 +46,20 @@ jobs:
     runs-on: ${{ matrix.os }}
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v6
+
+    - name: 'Use faster D: drive for yarn cache on Windows'
+      if: startsWith(matrix.os, 'windows')
+      run: yarn config set cache-folder D:\ft_yarn_cache
+
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
         node-version: ${{ matrix.node-version }}
         cache: "yarn"
     - run: yarn run ci
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
     - run: yarn run lint
     - name: Get Version Number
       id: getPackageInfo
@@ -60,7 +67,7 @@ jobs:
 
     - name: Set Version Number Variable
       id: versionNumber
-      uses: actions/github-script@v7
+      uses: actions/github-script@v8
       env:
         IS_DEV: ${{ contains(github.ref, 'development') }}
         IS_RC: ${{ contains(github.ref, 'RC') }}
@@ -114,91 +121,91 @@ jobs:
         rm -rf ./squashfs-root ./appimagetool.AppImage
 
     - name: Upload Linux .zip x64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-linux-x64-portable.zip
         path: build/freetube-${{ steps.versionNumber.outputs.result }}.zip
 
     - name: Upload Linux .7z x64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-linux-x64-portable.7z
         path: build/freetube-${{ steps.versionNumber.outputs.result }}.7z
 
     - name: Upload Linux .zip ARMv7l Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-linux-armv7l-portable.zip
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-armv7l.zip
 
     - name: Upload Linux .7z ARMv7l Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-linux-armv7l-portable.7z
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-armv7l.7z
 
     - name: Upload Linux .zip ARM64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-linux-arm64-portable.zip
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64.zip
 
     - name: Upload Linux .7z ARM64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-linux-arm64-portable.7z
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64.7z
 
     - name: Upload .deb x64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       with:
         name: freetube_${{ steps.versionNumber.outputs.result }}_amd64.deb
         path: build/freetube_${{ steps.versionNumber.outputs.result }}_amd64.deb
 
     - name: Upload .deb ARMv7l Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
       with:
         name: freetube_${{ steps.versionNumber.outputs.result }}_armv7l.deb
         path: build/freetube_${{ steps.versionNumber.outputs.result }}_armv7l.deb
 
     - name: Upload .deb ARM64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
       with:
         name: freetube_${{ steps.versionNumber.outputs.result }}_arm64.deb
         path: build/freetube_${{ steps.versionNumber.outputs.result }}_arm64.deb
 
     - name: Upload AppImage x64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-amd64.AppImage
         path: build/FreeTube-${{ steps.versionNumber.outputs.result }}.AppImage
 
     - name: Upload AppImage ARMv7l Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-armv7l.AppImage
         path: build/FreeTube-${{ steps.versionNumber.outputs.result }}-armv7l.AppImage
 
     - name: Upload AppImage ARM64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-arm64.AppImage
         path: build/FreeTube-${{ steps.versionNumber.outputs.result }}-arm64.AppImage
 
     - name: Upload .rpm x64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}.amd64.rpm
@@ -207,140 +214,119 @@ jobs:
     # rpm are not built for armv7l
 
     - name: Upload .rpm ARM64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}.arm64.rpm
         path: build/freetube-${{ steps.versionNumber.outputs.result }}.aarch64.rpm
 
-    - name: Upload Alpine .apk x64 Artifact
-      uses: actions/upload-artifact@v4
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
-      with:
-        name: freetube-${{ steps.versionNumber.outputs.result }}-alpine-amd64.apk
-        path: build/freetube-${{ steps.versionNumber.outputs.result }}.apk
-
-    - name: Upload Alpine .apk ARMv7l Artifact
-      uses: actions/upload-artifact@v4
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
-      with:
-        name: freetube-${{ steps.versionNumber.outputs.result }}-alpine-armv7l.apk
-        path: build/freetube-${{ steps.versionNumber.outputs.result }}-armv7l.apk
-
-    - name: Upload Alpine .apk ARM64 Artifact
-      uses: actions/upload-artifact@v4
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
-      with:
-        name: freetube-${{ steps.versionNumber.outputs.result }}-alpine-arm64.apk
-        path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64.apk
-
     - name: Upload Pacman .pacman x64 Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-amd64.pacman
         path: build/freetube-${{ steps.versionNumber.outputs.result }}.pacman
 
     # - name: Upload Web Build
-      # uses: actions/upload-artifact@v4
+      # uses: actions/upload-artifact@v5
       # if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       # with:
         # name: freetube-${{ steps.versionNumber.outputs.result }}-static-web
         # path: dist/web
 
     - name: Upload Windows x64 .exe Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-setup-x64.exe
         path: build/freetube Setup ${{ steps.versionNumber.outputs.result }}.exe
 
     - name: Upload Windows x64 Portable Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-win-x64-portable.exe
         path: build/freetube ${{ steps.versionNumber.outputs.result }}.exe
 
     - name: Upload Windows x64 .zip Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-win-x64-portable.zip
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-win.zip
 
     - name: Upload Windows x64 .7z Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-win-x64-portable.7z
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-win.7z
 
     - name: Upload Windows arm64 .exe Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-setup-arm64.exe
         path: build/freetube Setup ${{ steps.versionNumber.outputs.result }}.exe
 
     - name: Upload Windows arm64 Portable Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-win-arm64-portable.exe
         path: build/freetube ${{ steps.versionNumber.outputs.result }}.exe
 
     - name: Upload Windows arm64 .zip Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-win-arm64-portable.zip
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64-win.zip
 
     - name: Upload Windows arm64 .7z Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'windows') && startsWith(matrix.runtime, 'win-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-win-arm64-portable.7z
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64-win.7z
 
     - name: Upload Mac x64 .dmg Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-x64.dmg
         path: build/freetube-${{ steps.versionNumber.outputs.result }}.dmg
 
     - name: Upload Mac x64 .zip Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-x64.zip
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-mac.zip
 
     - name: Upload Mac x64 .7z Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-x64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-x64.7z
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-mac.7z
 
     - name: Upload Mac arm64 .dmg Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.dmg
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64.dmg
 
     - name: Upload Mac arm64 .zip Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.zip
         path: build/freetube-${{ steps.versionNumber.outputs.result }}-arm64-mac.zip
 
     - name: Upload Mac arm64 .7z Artifact
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v5
       if: startsWith(matrix.os, 'macos') && startsWith(matrix.runtime, 'osx-arm64')
       with:
         name: freetube-${{ steps.versionNumber.outputs.result }}-mac-arm64.7z

.github/workflows/calibreapp-image-actions.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Compress Images
         id: calibre
         uses: calibreapp/image-actions@main

.github/workflows/codeql.yml

@@ -27,11 +27,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v4
+      uses: actions/checkout@v6
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
+      uses: github/codeql-action/init@v4
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -44,7 +44,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v3
+      uses: github/codeql-action/autobuild@v4
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -57,6 +57,6 @@ jobs:
     #   ./location_of_script_within_repo/buildscript.sh
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
+      uses: github/codeql-action/analyze@v4
       with:
         category: "/language:${{matrix.language}}"

.github/workflows/flatpak.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v6
       with:
         repository: flathub/io.freetubeapp.FreeTube
         token: ${{ secrets.FLATHUB_TOKEN }}
@@ -50,24 +50,24 @@ jobs:
       with:
         version: v${{ steps.sub.outputs.result }}-beta
         repository: FreeTubeApp/FreeTube
-        file: freetube-${{ steps.sub.outputs.result }}-linux-x64-portable.zip
+        file: freetube-${{ steps.sub.outputs.result }}-beta-linux-x64-portable.zip
     - name: Download ARM Release
       uses: fabriciobastian/download-release-asset-action@v1.0.6
       with:
         version: v${{ steps.sub.outputs.result }}-beta
         repository: FreeTubeApp/FreeTube
-        file: freetube-${{ steps.sub.outputs.result }}-linux-arm64-portable.zip
+        file: freetube-${{ steps.sub.outputs.result }}-beta-linux-arm64-portable.zip
     - name: Set x64 Hash Variable
       id: hash-x64
       run: |
         echo 'HASH_X64<<EOF' >> $GITHUB_ENV
-        sha256sum freetube-${{ steps.sub.outputs.result }}-linux-x64-portable.zip | awk '{print $1}' >> $GITHUB_ENV
+        sha256sum freetube-${{ steps.sub.outputs.result }}-beta-linux-x64-portable.zip | awk '{print $1}' >> $GITHUB_ENV
         echo 'EOF' >> $GITHUB_ENV
     - name: Set ARM Hash Variable
       id: hash-arm64
       run: |
         echo 'HASH_ARM64<<EOF' >> $GITHUB_ENV
-        sha256sum freetube-${{ steps.sub.outputs.result }}-linux-arm64-portable.zip | awk '{print $1}' >> $GITHUB_ENV
+        sha256sum freetube-${{ steps.sub.outputs.result }}-beta-linux-arm64-portable.zip | awk '{print $1}' >> $GITHUB_ENV
         echo 'EOF' >> $GITHUB_ENV
     - name: Set Date Variable
       id: current-date
@@ -76,22 +76,22 @@ jobs:
         date +"%Y-%m-%d" >> $GITHUB_ENV
         echo 'EOF' >> $GITHUB_ENV
     - name: Update x64 File Location in yml File
-      uses: mikefarah/yq@v4.45.1
+      uses: mikefarah/yq@v4.49.1
       with:
         # The Command which should be run
-        cmd: yq -i '.modules[0].sources[0].url = "https://github.com/FreeTubeApp/FreeTube/releases/download/v${{ steps.sub.outputs.result }}-beta/freetube-${{ steps.sub.outputs.result }}-linux-x64-portable.zip"' io.freetubeapp.FreeTube.yml
+        cmd: yq -i '.modules[0].sources[0].url = "https://github.com/FreeTubeApp/FreeTube/releases/download/v${{ steps.sub.outputs.result }}-beta/freetube-${{ steps.sub.outputs.result }}-beta-linux-x64-portable.zip"' io.freetubeapp.FreeTube.yml
     - name: Update x64 Hash in yml File
-      uses: mikefarah/yq@v4.45.1
+      uses: mikefarah/yq@v4.49.1
       with:
         # The Command which should be run
         cmd: yq -i '.modules[0].sources[0].sha256 = "${{ env.HASH_X64 }}"' io.freetubeapp.FreeTube.yml
     - name: Update ARM File Location in yml File
-      uses: mikefarah/yq@v4.45.1
+      uses: mikefarah/yq@v4.49.1
       with:
         # The Command which should be run
-        cmd: yq -i '.modules[0].sources[1].url = "https://github.com/FreeTubeApp/FreeTube/releases/download/v${{ steps.sub.outputs.result }}-beta/freetube-${{ steps.sub.outputs.result }}-linux-arm64-portable.zip"' io.freetubeapp.FreeTube.yml
+        cmd: yq -i '.modules[0].sources[1].url = "https://github.com/FreeTubeApp/FreeTube/releases/download/v${{ steps.sub.outputs.result }}-beta/freetube-${{ steps.sub.outputs.result }}-beta-linux-arm64-portable.zip"' io.freetubeapp.FreeTube.yml
     - name: Update ARM Hash in yml File
-      uses: mikefarah/yq@v4.45.1
+      uses: mikefarah/yq@v4.49.1
       with:
         # The Command which should be run
         cmd: yq -i '.modules[0].sources[1].sha256 = "${{ env.HASH_ARM64 }}"' io.freetubeapp.FreeTube.yml
@@ -99,10 +99,10 @@ jobs:
       run: xmlstarlet ed -L -i /component/releases/release[1] -t elem -n releaseTMP -v "" -i //releaseTMP -t attr -n version -v "${{ steps.sub.outputs.result }} Beta" -i //releaseTMP -t attr -n date -v "${{ env.CURRENT_DATE }}" -s //releaseTMP -t elem -n url -v "" -s //releaseTMP/url -t text -n "" -v "https://github.com/FreeTubeApp/FreeTube/releases/tag/v${{ steps.sub.outputs.result }}-beta" -r //releaseTMP -v "release" io.freetubeapp.FreeTube.metainfo.xml
     - name: Remove Release Files
       run: |
-        rm freetube-${{ steps.sub.outputs.result }}-linux-x64-portable.zip
-        rm freetube-${{ steps.sub.outputs.result }}-linux-arm64-portable.zip
+        rm freetube-${{ steps.sub.outputs.result }}-beta-linux-x64-portable.zip
+        rm freetube-${{ steps.sub.outputs.result }}-beta-linux-arm64-portable.zip
     - name: Commit Files
-      uses: stefanzweifel/git-auto-commit-action@v5
+      uses: stefanzweifel/git-auto-commit-action@v7
       with:
         # Optional but recommended
         # Defaults to "Apply automatic changes"

.github/workflows/label-pr.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ !github.event.pull_request.draft }}
     steps:
-    - uses: actions/labeler@v5
+    - uses: actions/labeler@v6
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         configuration-path: .github/pr-labeler.yml

.github/workflows/linter.yml

@@ -17,13 +17,15 @@ jobs:
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js 20.x
-      uses: actions/setup-node@v4
+    - uses: actions/checkout@v6
+    - name: Use Node.js 24.x
+      uses: actions/setup-node@v6
       with:
-        node-version: 20.x
+        node-version: 24.x
         cache: "yarn"
     - run: yarn run ci
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
     - run: yarn run lint
     # let's verify that webpack is able to package the project
     - run: yarn run pack

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [24.x]
         runtime:
           - linux-x64
           - linux-armv7l
@@ -51,13 +51,20 @@ jobs:
     runs-on: ${{ matrix.os }}
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v6
+
+    - name: 'Use faster D: drive for yarn cache on Windows'
+      if: startsWith(matrix.os, 'windows')
+      run: yarn config set cache-folder D:\ft_yarn_cache
+
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
         node-version: ${{ matrix.node-version }}
         cache: "yarn"
     - run: yarn run ci
+      env:
+        ELECTRON_SKIP_BINARY_DOWNLOAD: '1'
     - run: yarn run lint
 
     - name: Get Version Number
@@ -80,7 +87,7 @@ jobs:
       if: contains(matrix.runtime, 'arm64')
       run: yarn run build:arm64
 
-    - name: Convert X64 AppImage to static runtime
+    - name: Convert X64 AppImage to static runtime and add update information
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
       run: |
         sudo apt install desktop-file-utils
@@ -88,11 +95,42 @@ jobs:
         appimage="FreeTube-${{ steps.getPackageInfo.outputs.version }}.AppImage"
         wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
         chmod +x ./"$appimage" ./appimagetool.AppImage
+        update_information="gh-releases-zsync|FreeTubeApp|FreeTube|latest-all|freetube-*-amd64.AppImage.zsync"
         ./"$appimage" --appimage-extract && rm -f ./"$appimage"
         ./appimagetool.AppImage --comp zstd --mksquashfs-opt -Xcompression-level --mksquashfs-opt 20 \
-          -n ./squashfs-root ./"$appimage"
+          -u "$update_information" -n ./squashfs-root ./"$appimage"
         rm -rf ./squashfs-root ./appimagetool.AppImage
 
+    - name: Convert ARMv7l AppImage to static runtime and add update information
+      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
+      run: |
+        sudo apt install desktop-file-utils
+        cd build
+        appimage="FreeTube-${{ steps.getPackageInfo.outputs.version }}.AppImage"
+        wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
+        wget "https://github.com/AppImage/type2-runtime/releases/download/continuous/runtime-x86_64" -O runtime
+        chmod +x ./"$appimage" ./appimagetool.AppImage ./runtime
+        update_information="gh-releases-zsync|FreeTubeApp|FreeTube|latest-all|freetube-*-armv7l.AppImage.zsync"
+        TARGET_APPIMAGE=$appimage" ./runtime --appimage-extract && rm -f ./"$appimage"
+        ARCH=armhf ./appimagetool.AppImage --comp zstd --mksquashfs-opt -Xcompression-level --mksquashfs-opt 20 \
+          -u "$update_information" -n ./squashfs-root ./"$appimage"
+        rm -rf ./squashfs-root ./appimagetool.AppImage ./runtime
+
+    - name: Convert ARM64 AppImage to static runtime and add update information
+      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
+      run: |
+        sudo apt install desktop-file-utils
+        cd build
+        appimage="FreeTube-${{ steps.getPackageInfo.outputs.version }}.AppImage"
+        wget "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-x86_64.AppImage" -O ./appimagetool.AppImage
+        wget "https://github.com/AppImage/type2-runtime/releases/download/continuous/runtime-x86_64" -O runtime
+        chmod +x ./"$appimage" ./appimagetool.AppImage ./runtime
+        update_information="gh-releases-zsync|FreeTubeApp|FreeTube|latest-all|freetube-*-arm64.AppImage.zsync"
+        TARGET_APPIMAGE=$appimage" ./runtime --appimage-extract && rm -f ./"$appimage"
+        ARCH=aarch64 ./appimagetool.AppImage --comp zstd --mksquashfs-opt -Xcompression-level --mksquashfs-opt 20 \
+          -u "$update_information" -n ./squashfs-root ./"$appimage"
+        rm -rf ./squashfs-root ./appimagetool.AppImage ./runtime
+
     - name: Upload Linux .zip x64 Release
       uses: actions/upload-release-asset@v1
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
@@ -100,7 +138,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-linux-x64-portable.zip
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-linux-x64-portable.zip
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}.zip
         asset_content_type: application/zip
 
@@ -111,7 +149,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-linux-x64-portable.7z
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-linux-x64-portable.7z
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}.7z
         asset_content_type: application/x-7z-compressed
 
@@ -122,7 +160,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-linux-armv7l-portable.zip
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-linux-armv7l-portable.zip
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-armv7l.zip
         asset_content_type: application/zip
 
@@ -133,7 +171,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-linux-armv7l-portable.7z
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-linux-armv7l-portable.7z
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-armv7l.7z
         asset_content_type: application/x-7z-compressed
 
@@ -144,7 +182,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-linux-arm64-portable.zip
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-linux-arm64-portable.zip
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64.zip
         asset_content_type: application/zip
 
@@ -155,7 +193,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-linux-arm64-portable.7z
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-linux-arm64-portable.7z
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64.7z
         asset_content_type: application/x-7z-compressed
 
@@ -166,7 +204,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube_${{ steps.getPackageInfo.outputs.version }}_amd64.deb
+        asset_name: freetube_${{ steps.getPackageInfo.outputs.version }}_beta_amd64.deb
         asset_path: build/freetube_${{ steps.getPackageInfo.outputs.version }}_amd64.deb
         asset_content_type: application/vnd.debian.binary-package
 
@@ -177,7 +215,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube_${{ steps.getPackageInfo.outputs.version }}_armv7l.deb
+        asset_name: freetube_${{ steps.getPackageInfo.outputs.version }}_beta_armv7l.deb
         asset_path: build/freetube_${{ steps.getPackageInfo.outputs.version }}_armv7l.deb
         asset_content_type: application/vnd.debian.binary-package
 
@@ -188,7 +226,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube_${{ steps.getPackageInfo.outputs.version }}_arm64.deb
+        asset_name: freetube_${{ steps.getPackageInfo.outputs.version }}_beta_arm64.deb
         asset_path: build/freetube_${{ steps.getPackageInfo.outputs.version }}_arm64.deb
         asset_content_type: application/vnd.debian.binary-package
 
@@ -199,10 +237,21 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-amd64.AppImage
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-amd64.AppImage
         asset_path: build/FreeTube-${{ steps.getPackageInfo.outputs.version }}.AppImage
         asset_content_type: application/vnd.appimage
 
+    - name: Upload AppImage .zsync x64 Release
+      uses: actions/upload-release-asset@v1
+      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
+      env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-amd64.AppImage.zsync
+        asset_path: build/FreeTube-${{ steps.getPackageInfo.outputs.version }}.AppImage.zsync
+        asset_content_type: application/x-zsync
+
     - name: Upload AppImage ARMv7l Release
       uses: actions/upload-release-asset@v1
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
@@ -210,10 +259,21 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-armv7l.AppImage
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-armv7l.AppImage
         asset_path: build/FreeTube-${{ steps.getPackageInfo.outputs.version }}-armv7l.AppImage
         asset_content_type: application/vnd.appimage
 
+    - name: Upload AppImage .zsync ARMv7l Release
+      uses: actions/upload-release-asset@v1
+      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
+      env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-armv7l.AppImage.zsync
+        asset_path: build/FreeTube-${{ steps.getPackageInfo.outputs.version }}-armv7l.AppImage.zsync
+        asset_content_type: application/x-zsync
+
     - name: Upload AppImage ARM64 Release
       uses: actions/upload-release-asset@v1
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
@@ -221,10 +281,21 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-arm64.AppImage
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-arm64.AppImage
         asset_path: build/FreeTube-${{ steps.getPackageInfo.outputs.version }}-arm64.AppImage
         asset_content_type: application/vnd.appimage
 
+    - name: Upload AppImage .zsync ARM64 Release
+      uses: actions/upload-release-asset@v1
+      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
+      env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-arm64.AppImage.zsync
+        asset_path: build/FreeTube-${{ steps.getPackageInfo.outputs.version }}-arm64.AppImage.zsync
+        asset_content_type: application/x-zsync
+
     - name: Upload Linux .rpm x64 Release
       uses: actions/upload-release-asset@v1
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
@@ -232,7 +303,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}.amd64.rpm
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta.amd64.rpm
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}.x86_64.rpm
         asset_content_type: application/x-rpm
 
@@ -245,43 +316,10 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}.arm64.rpm
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta.arm64.rpm
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}.aarch64.rpm
         asset_content_type: application/x-rpm
 
-    - name: Upload Alpine .apk x64 Release
-      uses: actions/upload-release-asset@v1
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-alpine-amd64.apk
-        asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}.apk
-        asset_content_type: application/octet-stream
-
-    - name: Upload Alpine .apk ARMv7l Release
-      uses: actions/upload-release-asset@v1
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-armv7l')
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-alpine-armv7l.apk
-        asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-armv7l.apk
-        asset_content_type: application/octet-stream
-
-    - name: Upload Alpine .apk ARM64 Release
-      uses: actions/upload-release-asset@v1
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-arm64')
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-alpine-arm64.apk
-        asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64.apk
-        asset_content_type: application/octet-stream
-
     - name: Upload Pacman .pacman x64 Release
       uses: actions/upload-release-asset@v1
       if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
@@ -289,7 +327,7 @@ jobs:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-amd64.pacman
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-amd64.pacman
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}.pacman
         asset_content_type: application/x-zstd-compressed-tar
 
@@ -300,7 +338,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-setup-x64.exe
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-setup-x64.exe
         asset_path: build/freetube Setup ${{ steps.getPackageInfo.outputs.version }}.exe
         asset_content_type: application/x-ms-dos-executable
 
@@ -311,7 +349,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-win-x64-portable.exe
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-win-x64-portable.exe
         asset_path: build/FreeTube ${{ steps.getPackageInfo.outputs.version }}.exe
         asset_content_type: application/x-ms-dos-executable
 
@@ -322,7 +360,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-win-x64-portable.zip
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-win-x64-portable.zip
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-win.zip
         asset_content_type: application/zip
 
@@ -333,7 +371,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-win-x64-portable.7z
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-win-x64-portable.7z
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-win.7z
         asset_content_type: application/x-7z-compressed
 
@@ -344,7 +382,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-setup-arm64.exe
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-setup-arm64.exe
         asset_path: build/freetube Setup ${{ steps.getPackageInfo.outputs.version }}.exe
         asset_content_type: application/x-ms-dos-executable
 
@@ -355,7 +393,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-win-arm64-portable.exe
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-win-arm64-portable.exe
         asset_path: build/FreeTube ${{ steps.getPackageInfo.outputs.version }}.exe
         asset_content_type: application/x-ms-dos-executable
 
@@ -366,7 +404,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-win-arm64-portable.zip
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-win-arm64-portable.zip
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64-win.zip
         asset_content_type: application/zip
 
@@ -377,7 +415,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-win-arm64-portable.7z
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-win-arm64-portable.7z
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64-win.7z
         asset_content_type: application/x-7z-compressed
 
@@ -388,7 +426,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-mac-x64.dmg
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-mac-x64.dmg
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}.dmg
         asset_content_type: application/x-apple-diskimage
 
@@ -399,7 +437,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-mac-x64.zip
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-mac-x64.zip
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-mac.zip
         asset_content_type: application/zip
 
@@ -410,7 +448,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-mac-x64.7z
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-mac-x64.7z
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-mac.7z
         asset_content_type: application/x-7z-compressed
 
@@ -421,7 +459,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-mac-arm64.dmg
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-mac-arm64.dmg
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64.dmg
         asset_content_type: application/x-apple-diskimage
 
@@ -432,7 +470,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-mac-arm64.zip
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-mac-arm64.zip
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64-mac.zip
         asset_content_type: application/x-apple-diskimage
 
@@ -443,6 +481,6 @@ jobs:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         upload_url: https://uploads.github.com/repos/FreeTubeApp/FreeTube/releases/${{ inputs.releaseId }}/assets{?name,label}
-        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-mac-arm64.7z
+        asset_name: freetube-${{ steps.getPackageInfo.outputs.version }}-beta-mac-arm64.7z
         asset_path: build/freetube-${{ steps.getPackageInfo.outputs.version }}-arm64-mac.7z
         asset_content_type: application/x-7z-compressed

.github/workflows/stale.yml

@@ -11,7 +11,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         with:
           stale-issue-message: 'This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
           stale-pr-message: 'This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.'

.github/workflows/updateSite.yml

@@ -0,0 +1,68 @@
+# This is a basic workflow that is manually triggered
+
+name: Update Site Version Number
+
+# Controls when the action will run. Workflow runs when manually triggered using the UI
+# or API.
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v6
+      with:
+        repository: FreeTubeApp/FreeTubeApp.io
+        token: ${{ secrets.FLATHUB_TOKEN }}
+    - name: Get Repo Release List
+      uses: moustacheful/github-api-exec-action@v0
+      id: list_results
+      with:
+        # Command to execute, (e.g: `pulls.create`), see https://octokit.github.io/rest.js/ for available commands
+        command: repos.listReleases
+        payload: >
+            {
+              "owner": "FreeTubeApp",
+              "repo": "FreeTube"
+            }
+      env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - name: Create Current Version Variable
+      uses: bluwy/substitute-string-action@v3
+      id: current
+      with:
+        _input-text: ${{ fromJson(steps.list_results.outputs.result)[0].tag_name }}
+        -beta: ''
+        v: ''
+    - name: Create Previous Version Variable
+      uses: bluwy/substitute-string-action@v3
+      id: previous
+      with:
+        _input-text: ${{ fromJson(steps.list_results.outputs.result)[1].tag_name }}
+        -beta: ''
+        v: ''
+    - name: Set Master Branch
+    # Currently the default branch is master, but if that changes later, then this acts as a failsafe.
+      run: |
+        git checkout master
+    - name: Update index.php
+      run: |
+        sed -i 's/${{ steps.previous.outputs.result  }}/${{ steps.current.outputs.result }}/g' src/index.php
+    - name: Commit Files
+      uses: stefanzweifel/git-auto-commit-action@v7
+      with:
+        # Optional but recommended
+        # Defaults to "Apply automatic changes"
+        commit_message: Update version number to v${{ steps.current.outputs.result }}
+
+        # Optional options appended to `git-commit`
+        # See https://git-scm.com/docs/git-commit for a list of available options
+        commit_options: '--no-verify --signoff'
+
+        # Optional: Disable dirty check and always try to create a commit and push
+        skip_dirty_check: true

.gitignore

@@ -28,3 +28,5 @@ debug/
 
 # Lefthook
 lefthook-local.yml
+
+locale-errors.json

CONTRIBUTING.md

@@ -14,11 +14,11 @@ Please follow these guidelines before sending your pull request and making contr
 * Make sure your pull request is set up to merge your branch to FreeTube's development branch.
 * Make sure your branch is up to date with the development branch before submitting your pull request.
 * Stick to a similar style of code already in the project.  Please look at current code to get an idea on how to do this.
-* Follow [ES6](http://es6-features.org/) standards in your code. Ex: Use `let` and `const` instead of `var`. Do not use `function(response){//code}` for callbacks, use `(response) => {//code}`.
+* Follow [ES6](https://rse.github.io/es6-features/) standards in your code. Ex: Use `let` and `const` instead of `var`. Do not use `function(response){//code}` for callbacks, use `(response) => {//code}`.
 * Comment your code when necessary.  Follow the [JavaScript Documentation and Comments Standard](https://www.drupal.org/docs/develop/standards/javascript/javascript-api-documentation-and-comment-standards) for functions.
-* Please follow proper Vue structure when creating new code / components.  Use existing code as well as the [Vue.js Guide](https://vuejs.org/v2/guide/) for reference.
+* Please follow proper Vue structure when creating new code / components.  Use existing code as well as the [Vue.js Guide](https://vuejs.org/guide/introduction.html) for reference.
 * Please test your code.  Make sure new features work as well as existing core features such as watching videos or loading subscriptions.  New features need to work with both the Local API as well as the Invidious API
-* Please make sure your code does not violate any standards set by our linter.  It's up to you to make fixes whenever necessary.  You can run `npm run lint` to check locally and `npm run lint-fix` to automatically fix smaller issues.
+* Please make sure your code does not violate any standards set by our linter.  It's up to you to make fixes whenever necessary.  You can run `yarn run lint` to check locally and `yarn run lint-fix` to automatically fix smaller issues.
 * Please limit the amount of Node Modules that you introduce into the project.  Only include them when **absolutely necessary** for your code to work (Ex: Using nedb for databases) or if a module provides similar functionality to what you are trying to achieve (Ex: Using autolinker to create links to outside URLs instead of writing the functionality myself).
 * Please try to stay involved with the community and maintain your code.  We are only a handful of developers working on FreeTube in our spare time.  We do not have time to work on everything, and it would be nice if you can maintain your code when necessary.
 

README.md

@@ -4,7 +4,7 @@
 
 FreeTube is an open source desktop YouTube player built with privacy in mind.
 Use YouTube without advertisements and prevent Google from tracking you with their cookies and JavaScript.
-Available for Windows (10 and later), Mac (macOS 11 and later) & Linux thanks to Electron.
+Available for Windows (10 and later), Mac (macOS 12 and later) & Linux thanks to Electron.
 
 <p align="center"><a href="https://github.com/FreeTubeApp/FreeTube/releases">Download FreeTube</a></p>
 <p align="center">
@@ -27,11 +27,21 @@ Available for Windows (10 and later), Mac (macOS 11 and later) & Linux thanks to
 > If you have an idea or if you found a bug, please submit a [GitHub issue](https://github.com/FreeTubeApp/FreeTube/issues/new/choose) so that we can track it.  Please [search the existing issues](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+sort%3Arelevance-desc) before submitting to prevent duplicates!
 
 ## Screenshots
-<img src="https://i.imgur.com/zFgZUUV.png" width=300> <img src="https://i.imgur.com/9evYHgN.png" width=300> <img src="https://i.imgur.com/yT2UzPa.png" width=300> <img src="https://i.imgur.com/47zIEt4.png" width=300> <img src="https://i.imgur.com/hFB2fKC.png" width=300>
+| The main FreeTube window                                                                         |
+|--------------------------------------------------------------------------------------------------|
+| ![](https://raw.githubusercontent.com/FreeTubeApp/FreeTubeApp.io/master/src/images/FreeTube1.png)|
+
+| Watching a video                                                                                 |
+|--------------------------------------------------------------------------------------------------|
+| ![](https://raw.githubusercontent.com/FreeTubeApp/FreeTubeApp.io/master/src/images/FreeTube2.png)|
+
+| Settings                                                                                         |
+|--------------------------------------------------------------------------------------------------|
+| ![](https://raw.githubusercontent.com/FreeTubeApp/FreeTubeApp.io/master/src/images/FreeTube3.png)|
 
 ## How does it work?
 FreeTube uses a built in extractor to grab and serve data / videos. The [Invidious API](https://github.com/iv-org/invidious) can also optionally be used. FreeTube does not use any official APIs to obtain data. While YouTube can still see your video requests, it can no
-longer track you using cookies or JavaScript. Your subscriptions and history are stored locally on your computer and never sent out.
+longer track you using cookies or JavaScript. Your subscriptions, playlists and history are stored locally on your computer and never sent out.
 
 > [!IMPORTANT]  
 > Using a VPN or Tor is highly recommended to hide your IP while using FreeTube.
@@ -42,13 +52,14 @@ longer track you using cookies or JavaScript. Your subscriptions and history are
 * Two extractor APIs to choose from (Built in or Invidious)
 * Subscribe to channels without an account
 * Connect to an externally setup proxy such as Tor
-* View and search your local subscriptions, history, and saved videos
+* View and search your local subscriptions, playlists and history
 * Organize your subscriptions into "Profiles" to create a more focused feed
 * Export & import subscriptions
 * Youtube Trending
 * Youtube Chapters
 * Most popular videos page based on the set Invidious instance
-* SponsorBlock 
+* SponsorBlock
+* DeArrow
 * Open videos from your browser directly into FreeTube (with extension)
 * Watch videos using an external player
 * Full Theme support
@@ -58,7 +69,7 @@ longer track you using cookies or JavaScript. Your subscriptions and history are
 * Keyboard shortcuts
 * Option to show only family friendly content
 * Show/hide functionality or elements within the app using the distraction free settings
-* View channel community posts
+* View channel posts
 
 ### Browser Extensions
 The following extensions open YouTube links directly in FreeTube:
@@ -85,7 +96,7 @@ RedirectTube, doesn’t automatically open YouTube links in FreeTube. Instead, i
 ### Official Downloads
 
 > [!CAUTION]
-> FreeTube is only supported on Windows 10 and later, macOS 11 and above, and various Linux distributions. Installing it on unsupported systems may result in unexpected issues.
+> FreeTube is only supported on Windows 10 and later, macOS 12 and above, and various Linux distributions. Installing it on unsupported systems may result in unexpected issues.
 
 * [GitHub Releases](https://github.com/FreeTubeApp/FreeTube/releases)
 
@@ -114,7 +125,7 @@ The first build with a green check mark is the latest build.
 
 * FreeTubeAndroid (FreeTube port for Android and PWA): [Download](https://github.com/MarmadileManteater/FreeTubeAndroid/releases) and [Source Code](https://github.com/MarmadileManteater/FreeTubeAndroid)
 
-* Homebrew Formulae (Mac only): [Download](https://formulae.brew.sh/cask/freetube)
+* Homebrew Formulae (Mac only): [Download for Apple Silicon](https://github.com/PikachuEXE/homebrew-FreeTube)
 
 * makedeb Package Repository (MPR): [Download](https://mpr.makedeb.org/packages/freetube-bin)
 
@@ -149,7 +160,7 @@ We are actively looking for translations!  We use [Weblate](https://hosted.webla
 For the Linux Flatpak, the desktop entry comment string can be translated at our [Flatpak repository](https://github.com/flathub/io.freetubeapp.FreeTube/blob/master/io.freetubeapp.FreeTube.desktop).
 
 ## Contact
-If you ever have any questions, feel free to ask it on our [Discussions](https://github.com/FreeTubeApp/FreeTube/discussions) page.  Alternatively, you can email us at FreeTubeApp@protonmail.com or you can join our [Matrix Community](https://matrix.to/#/#freetube:matrix.org).  
+If you ever have any questions, feel free to ask it on our [Discussions](https://github.com/FreeTubeApp/FreeTube/discussions) page.  Alternatively, you can email us at FreeTubeApp@protonmail.com or you can join our [Matrix Room](https://matrix.to/#/#freetube:matrix.org).  
 
 > [!IMPORTANT]
 > Don't forget to check out the [rules](https://docs.freetubeapp.io/community/matrix/) before joining.

_icons/iconBlack.svg

@@ -1 +0,0 @@
-<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M49.027 0C58.401 0 66 7.599 66 16.973V250H42.701A42.7 42.7 0 0 1 0 207.299V16.973C0 7.599 7.599 0 16.973 0h32.054zm130.331 122.23a6.44 6.44 0 0 1 0 11.54l-92.732 45.959A6.667 6.667 0 0 1 77 173.756V82.244a6.667 6.667 0 0 1 9.626-5.973l92.732 45.959zM250 0v20.217A45.783 45.783 0 0 1 204.217 66H93.805C84.524 66 77 58.476 77 49.195v-32.39C77 7.524 84.524 0 93.805 0H250z"/></svg>

_icons/iconCatppuccinLatteDarkSmall.svg

@@ -0,0 +1 @@
+<svg width="25" height="25" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M4.903 0C5.84 0 6.6.76 6.6 1.697V25H4.27A4.268 4.268 0 0 1 0 20.73V1.697C0 .76.76 0 1.697 0h3.206zM25 0v2.022A4.577 4.577 0 0 1 20.422 6.6H9.38A1.68 1.68 0 0 1 7.7 4.92V1.68C7.7.752 8.452 0 9.38 0H25zm-7.064 12.223a.645.645 0 0 1 0 1.154l-9.273 4.596a.668.668 0 0 1-.963-.597V8.224a.667.667 0 0 1 .963-.597l9.273 4.596z" style="fill:#4c4f69"/></svg>

_icons/iconCatppuccinLatteLightSmall.svg

@@ -0,0 +1 @@
+<svg width="25" height="25" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M4.903 0C5.84 0 6.6.76 6.6 1.697V25H4.27A4.268 4.268 0 0 1 0 20.73V1.697C0 .76.76 0 1.697 0h3.206zM25 0v2.022A4.577 4.577 0 0 1 20.422 6.6H9.38A1.68 1.68 0 0 1 7.7 4.92V1.68C7.7.752 8.452 0 9.38 0H25zm-7.064 12.223a.645.645 0 0 1 0 1.154l-9.273 4.596a.668.668 0 0 1-.963-.597V8.224a.667.667 0 0 1 .963-.597l9.273 4.596z" style="fill:#eff1f5"/></svg>

_icons/iconColor.svg

@@ -1 +0,0 @@
-<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M49.027 0C58.401 0 66 7.599 66 16.973V250H42.701A42.7 42.7 0 0 1 0 207.299V16.973C0 7.599 7.599 0 16.973 0h32.054zM250 0v20.217A45.783 45.783 0 0 1 204.217 66H93.805C84.524 66 77 58.476 77 49.195v-32.39C77 7.524 84.524 0 93.805 0H250z" style="fill:#f33"/><path d="M179.358 122.23a6.44 6.44 0 0 1 0 11.54l-92.732 45.959A6.667 6.667 0 0 1 77 173.756V82.244a6.667 6.667 0 0 1 9.626-5.973l92.732 45.959z" style="fill:#29abe1"/></svg>

_icons/iconWhite.svg

@@ -1 +0,0 @@
-<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M49.027 0C58.401 0 66 7.599 66 16.973V250H42.701A42.7 42.7 0 0 1 0 207.299V16.973C0 7.599 7.599 0 16.973 0h32.054zm130.331 122.23a6.44 6.44 0 0 1 0 11.54l-92.732 45.959A6.667 6.667 0 0 1 77 173.756V82.244a6.667 6.667 0 0 1 9.626-5.973l92.732 45.959zM250 0v20.217A45.783 45.783 0 0 1 204.217 66H93.805C84.524 66 77 58.476 77 49.195v-32.39C77 7.524 84.524 0 93.805 0H250z" style="fill:#fff"/></svg>

_icons/mejs-controls.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="120"><style>.st0{fill:#fff;width:16px;height:16px}.st1{stroke-linecap:round;fill:none;stroke:#fff;stroke-width:1.5}</style><path d="M16.5 8.5c.3.1.4.5.2.8-.1.1-.1.2-.2.2l-11.4 7c-.5.3-.8.1-.8-.5V2c0-.5.4-.8.8-.5l11.4 7zM24 1h2.2c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1H24c-.6 0-1-.4-1-1V2c0-.5.4-1 1-1zm9.8 0H36c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1h-2.2c-.6 0-1-.4-1-1V2c0-.5.4-1 1-1zM81 1.4c0-.6.4-1 1-1h5.4c.6 0 .7.3.3.7l-6 6c-.4.4-.7.3-.7-.3V1.4zm0 15.8c0 .6.4 1 1 1h5.4c.6 0 .7-.3.3-.7l-6-6c-.4-.4-.7-.3-.7.3v5.4zM98.8 1.4c0-.6-.4-1-1-1h-5.4c-.6 0-.7.3-.3.7l6 6c.4.4.7.3.7-.3V1.4zm0 15.8c0 .6-.4 1-1 1h-5.4c-.6 0-.7-.3-.3-.7l6-6c.4-.4.7-.3.7.3v5.4zM112.7 5c0 .6.4 1 1 1h4.1c.6 0 .7-.3.3-.7L113.4.6c-.4-.4-.7-.3-.7.3V5zm-7.1 1c.6 0 1-.4 1-1V.9c0-.6-.3-.7-.7-.3l-4.7 4.7c-.4.4-.3.7.3.7h4.1zm1 7.1c0-.6-.4-1-1-1h-4.1c-.6 0-.7.3-.3.7l4.7 4.7c.4.4.7.3.7-.3v-4.1zm7.1-1c-.6 0-1 .4-1 1v4.1c0 .5.3.7.7.3l4.7-4.7c.4-.4.3-.7-.3-.7h-4.1zM67 5.8c-.5.4-1.2.6-1.8.6H62c-.6 0-1 .4-1 1v5.7c0 .6.4 1 1 1h4.2c.3.2.5.4.8.6l3.5 2.6c.4.3.8.1.8-.4V3.5c0-.5-.4-.7-.8-.4L67 5.8z" class="st0"/><path d="M73.9 2.5s3.9-.8 3.9 7.7-3.9 7.8-3.9 7.8" class="st1"/><path d="M72.6 6.4s2.6-.4 2.6 3.8-2.6 3.9-2.6 3.9" class="st1"/><path d="M47 5.8c-.5.4-1.2.6-1.8.6H42c-.6 0-1 .4-1 1v5.7c0 .6.4 1 1 1h4.2c.3.2.5.4.8.6l3.5 2.6c.4.3.8.1.8-.4V3.5c0-.5-.4-.7-.8-.4L47 5.8z" class="st0"/><path d="m52.8 7 5.4 5.4m-5.4 0L58.2 7" style="fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round"/><path d="M128.7 8.6c-6.2-4.2-6.5 7.8 0 3.9m6.5-3.9c-6.2-4.2-6.5 7.8 0 3.9" style="fill:none;stroke:#fff"/><path d="M122.2 3.4h15.7v13.1h-15.7V3.4zM120.8 2v15.7h18.3V2h-18.3zM143.2 3h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2h-14c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2z" class="st0"/><path d="M146.4 13.8c-.8 0-1.6-.4-2.1-1-1.1-1.4-1-3.4.1-4.8.5-.6 2-1.7 4.6.2l-.6.8c-1.4-1-2.6-1.1-3.3-.3-.8 1-.8 2.4-.1 3.5.7.9 1.9.8 3.4-.1l.5.9c-.7.5-1.6.7-2.5.8zm7.5 0c-.8 0-1.6-.4-2.1-1-1.1-1.4-1-3.4.1-4.8.5-.6 2-1.7 4.6.2l-.5.8c-1.4-1-2.6-1.1-3.3-.3-.8 1-.8 2.4-.1 3.5.7.9 1.9.8 3.4-.1l.5.9c-.8.5-1.7.7-2.6.8z" style="fill:#231f20"/><path d="M60.3 77c.6.2.8.8.6 1.4-.1.3-.3.5-.6.6L30 96.5c-1 .6-1.7.1-1.7-1v-35c0-1.1.8-1.5 1.7-1L60.3 77z" class="st0"/><path d="M2.5 79c0-20.7 16.8-37.5 37.5-37.5S77.5 58.3 77.5 79 60.7 116.5 40 116.5 2.5 99.7 2.5 79z" style="fill:none;stroke:#fff;stroke-width:5;opacity:.75;enable-background:new"/><path d="M140.3 77c.6.2.8.8.6 1.4-.1.3-.3.5-.6.6L110 96.5c-1 .6-1.7.1-1.7-1v-35c0-1.1.8-1.5 1.7-1L140.3 77z" class="st0"/><path d="M82.5 79c0-20.7 16.8-37.5 37.5-37.5s37.5 16.8 37.5 37.5-16.8 37.5-37.5 37.5S82.5 99.7 82.5 79z" style="fill:none;stroke:#fff;stroke-width:5"/><circle cx="201.9" cy="47.1" r="8.1" class="st0"/><circle cx="233.9" cy="79" r="5" style="fill:#fff;enable-background:new;opacity:.4"/><circle cx="201.9" cy="110.9" r="6" style="opacity:.6;fill:#fff;enable-background:new"/><circle cx="170.1" cy="79" r="7" style="opacity:.8;fill:#fff;enable-background:new"/><circle cx="178.2" cy="56.3" r="7.5" style="opacity:.9;fill:#fff;enable-background:new"/><circle cx="226.3" cy="56.1" r="4.5" style="opacity:.3;fill:#fff;enable-background:new"/><circle cx="225.8" cy="102.8" r="5.5" style="opacity:.5;fill:#fff;enable-background:new"/><circle cx="178.2" cy="102.8" r="6.5" style="opacity:.7;fill:#fff;enable-background:new"/><path d="M178 9.4c0 .4-.4.7-.9.7-.1 0-.2 0-.2-.1L172 8.2c-.5-.2-.6-.6-.1-.8l6.2-3.6c.5-.3.8-.1.7.5l-.8 5.1z" class="st0"/><path d="M169.4 15.9c-1 0-2-.2-2.9-.7-2-1-3.2-3-3.2-5.2.1-3.4 2.9-6 6.3-6 2.5.1 4.8 1.7 5.6 4.1l.1-.1 2.1 1.1c-.6-4.4-4.7-7.5-9.1-6.9-3.9.6-6.9 3.9-7 7.9 0 2.9 1.7 5.6 4.3 7 1.2.6 2.5.9 3.8 1 2.6 0 5-1.2 6.6-3.3l-1.8-.9c-1.2 1.2-3 2-4.8 2zM183.4 3.2c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5c0-.9.7-1.5 1.5-1.5zm5.1 0h8.5c.9 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-8.5c-.9 0-1.5-.7-1.5-1.5-.1-.9.6-1.5 1.5-1.5zm-5.1 5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5c0-.9.7-1.5 1.5-1.5zm5.1 0h8.5c.9 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-8.5c-.9 0-1.5-.7-1.5-1.5-.1-.9.6-1.5 1.5-1.5zm-5.1 5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5c0-.9.7-1.5 1.5-1.5zm5.1 0h8.5c.9 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-8.5c-.9 0-1.5-.7-1.5-1.5-.1-.9.6-1.5 1.5-1.5z" class="st0"/></svg>

_icons/textCatppuccinLatteDarkSmall.svg

@@ -0,0 +1 @@
+<svg width="100" height="49" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M3.029 33.471c-.452 0-.815-.141-1.088-.422-.272-.282-.409-.65-.409-1.104V18.21c0-.454.129-.806.386-1.057.257-.25.612-.376 1.064-.376h8.204c.951 0 1.426.407 1.426 1.221 0 .799-.475 1.198-1.426 1.198H4.501v4.508h6.218c.95 0 1.425.407 1.425 1.221 0 .798-.475 1.197-1.425 1.197H4.501v5.823c0 .454-.132.822-.397 1.104-.265.281-.624.422-1.075.422zm16.403-11.857c.367-.031.656.055.868.258.211.204.317.509.317.916 0 .423-.092.736-.275.939-.183.204-.515.337-.994.399l-.635.071c-.832.094-1.441.407-1.829.939-.388.532-.582 1.197-.582 1.996v4.93c0 .454-.127.803-.381 1.045-.253.243-.571.364-.951.364-.381 0-.695-.121-.941-.364-.247-.242-.37-.591-.37-1.045v-9.086c0-.438.123-.775.37-1.01.246-.234.553-.352.92-.352.366 0 .662.114.888.34.226.228.338.552.338.975v.939c.268-.689.667-1.221 1.195-1.597a3.419 3.419 0 0 1 1.766-.633l.296-.024zm12.444 8.57c.277 0 .501.102.672.305.171.204.257.478.257.822 0 .485-.302.892-.905 1.221a8.382 8.382 0 0 1-1.882.716 8.06 8.06 0 0 1-2.004.27c-1.923 0-3.447-.532-4.571-1.596-1.125-1.065-1.687-2.521-1.687-4.368 0-1.174.244-2.215.734-3.122a5.2 5.2 0 0 1 2.065-2.113c.888-.502 1.894-.752 3.019-.752 1.075 0 2.012.227 2.811.681a4.7 4.7 0 0 1 1.857 1.925c.44.83.66 1.808.66 2.935 0 .673-.309 1.01-.928 1.01h-7.211c.097 1.08.415 1.874.953 2.383.538.509 1.32.763 2.347.763.521 0 .981-.063 1.381-.188.399-.125.851-.297 1.356-.516.489-.251.848-.376 1.076-.376zm-4.229-6.551c-.831 0-1.495.251-1.992.752-.497.501-.795 1.22-.892 2.16h5.524c-.033-.955-.277-1.679-.733-2.172-.457-.493-1.092-.74-1.907-.74zm17.487 6.551c.277 0 .501.102.672.305.171.204.257.478.257.822 0 .485-.302.892-.905 1.221a8.382 8.382 0 0 1-1.882.716c-.7.18-1.369.27-2.004.27-1.923 0-3.447-.532-4.571-1.596-1.125-1.065-1.687-2.521-1.687-4.368 0-1.174.245-2.215.734-3.122a5.2 5.2 0 0 1 2.065-2.113c.888-.502 1.894-.752 3.019-.752 1.075 0 2.012.227 2.811.681a4.7 4.7 0 0 1 1.857 1.925c.44.83.66 1.808.66 2.935 0 .673-.309 1.01-.928 1.01h-7.211c.098 1.08.415 1.874.953 2.383.538.509 1.32.763 2.347.763.521 0 .981-.063 1.381-.188.399-.125.851-.297 1.356-.516.489-.251.848-.376 1.076-.376zm-4.229-6.551c-.831 0-1.495.251-1.992.752-.497.501-.794 1.22-.892 2.16h5.524c-.033-.955-.277-1.679-.733-2.172-.456-.493-1.092-.74-1.907-.74zm13.402 9.838c-.521 0-1.186-.164-1.506-.494-.32-.329-.48-.768-.48-1.316V19.763h-3.374c-1.102 0-1.652-.501-1.652-1.504 0-.988.55-1.482 1.652-1.482h10.719c1.102 0 1.653.494 1.653 1.482 0 1.003-.551 1.504-1.653 1.504h-3.374v11.898c0 .548-.156.987-.468 1.316-.313.33-.981.494-1.517.494zM69.693 21.69c.545 0 .978.148 1.297.446.32.297.479.704.479 1.221v8.616c0 .486-.167.877-.502 1.175-.335.297-.768.446-1.297.446-.499 0-.896-.141-1.192-.423-.297-.282-.445-.658-.445-1.127v-.235a3.63 3.63 0 0 1-1.414 1.362c-.584.313-1.242.469-1.975.469-1.449 0-2.528-.403-3.237-1.209-.709-.806-1.064-2.023-1.064-3.651v-5.423c0-.517.16-.924.479-1.221.32-.298.752-.446 1.298-.446.545 0 .974.148 1.285.446.312.297.468.704.468 1.221v5.494c0 .688.144 1.197.432 1.526.288.329.729.493 1.321.493.685 0 1.243-.235 1.671-.704.429-.47.643-1.088.643-1.855v-4.954c0-.517.156-.924.467-1.221.312-.298.741-.446 1.286-.446zm11.736-.047c1.017 0 1.915.242 2.694.727.779.486 1.387 1.178 1.824 2.079.437.899.655 1.944.655 3.134s-.218 2.242-.655 3.158c-.437.915-1.049 1.628-1.836 2.137-.787.508-1.681.762-2.682.762-.811 0-1.542-.168-2.194-.504a3.633 3.633 0 0 1-1.502-1.397v.187c0 .501-.159.904-.477 1.21-.317.305-.747.458-1.287.458-.54 0-.974-.153-1.299-.458-.326-.306-.489-.709-.489-1.21V18.402c0-.485.171-.876.512-1.173.342-.298.791-.447 1.347-.447.525 0 .946.141 1.264.423.318.282.477.657.477 1.127v5.142a3.534 3.534 0 0 1 1.49-1.35c.644-.321 1.363-.481 2.158-.481zm-1.049 9.298c.842 0 1.494-.294 1.955-.881.461-.587.691-1.412.691-2.477 0-1.049-.23-1.851-.691-2.407-.461-.555-1.113-.833-1.955-.833-.843 0-1.494.286-1.955.857-.461.571-.692 1.381-.692 2.43 0 1.064.231 1.882.692 2.454.461.571 1.112.857 1.955.857zm18.404-.916c.337 0 .612.125.823.375.211.251.317.572.317.963 0 .266-.084.513-.254.74a2.005 2.005 0 0 1-.709.575 9.445 9.445 0 0 1-2.002.692c-.76.181-1.461.27-2.103.27-1.351 0-2.53-.242-3.535-.727-1.005-.486-1.778-1.178-2.318-2.078-.541-.9-.811-1.961-.811-3.182 0-1.174.262-2.214.786-3.122a5.526 5.526 0 0 1 2.179-2.125c.929-.509 1.984-.763 3.167-.763 1.132 0 2.124.231 2.977.692a4.895 4.895 0 0 1 1.989 1.973c.473.853.71 1.85.71 2.993 0 .345-.089.607-.266.787-.177.18-.427.27-.748.27h-7.095c.119.923.423 1.593.913 2.007.49.415 1.191.622 2.103.622.49 0 .929-.054 1.317-.164.389-.11.82-.258 1.293-.446.236-.094.464-.176.684-.247.219-.07.414-.105.583-.105zm-4.359-5.941c-.726 0-1.309.216-1.748.646-.439.431-.701 1.053-.786 1.867h4.891c-.051-.83-.275-1.456-.672-1.878-.397-.423-.958-.635-1.685-.635z" style="fill-rule:nonzero;fill:#4c4f69"/></svg>

_icons/textCatppuccinLatteLightSmall.svg

@@ -0,0 +1 @@
+<svg width="100" height="49" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M3.029 33.471c-.452 0-.815-.141-1.088-.422-.272-.282-.409-.65-.409-1.104V18.21c0-.454.129-.806.386-1.057.257-.25.612-.376 1.064-.376h8.204c.951 0 1.426.407 1.426 1.221 0 .799-.475 1.198-1.426 1.198H4.501v4.508h6.218c.95 0 1.425.407 1.425 1.221 0 .798-.475 1.197-1.425 1.197H4.501v5.823c0 .454-.132.822-.397 1.104-.265.281-.624.422-1.075.422zm16.403-11.857c.367-.031.656.055.868.258.211.204.317.509.317.916 0 .423-.092.736-.275.939-.183.204-.515.337-.994.399l-.635.071c-.832.094-1.441.407-1.829.939-.388.532-.582 1.197-.582 1.996v4.93c0 .454-.127.803-.381 1.045-.253.243-.571.364-.951.364-.381 0-.695-.121-.941-.364-.247-.242-.37-.591-.37-1.045v-9.086c0-.438.123-.775.37-1.01.246-.234.553-.352.92-.352.366 0 .662.114.888.34.226.228.338.552.338.975v.939c.268-.689.667-1.221 1.195-1.597a3.419 3.419 0 0 1 1.766-.633l.296-.024zm12.444 8.57c.277 0 .501.102.672.305.171.204.257.478.257.822 0 .485-.302.892-.905 1.221a8.382 8.382 0 0 1-1.882.716 8.06 8.06 0 0 1-2.004.27c-1.923 0-3.447-.532-4.571-1.596-1.125-1.065-1.687-2.521-1.687-4.368 0-1.174.244-2.215.734-3.122a5.2 5.2 0 0 1 2.065-2.113c.888-.502 1.894-.752 3.019-.752 1.075 0 2.012.227 2.811.681a4.7 4.7 0 0 1 1.857 1.925c.44.83.66 1.808.66 2.935 0 .673-.309 1.01-.928 1.01h-7.211c.097 1.08.415 1.874.953 2.383.538.509 1.32.763 2.347.763.521 0 .981-.063 1.381-.188.399-.125.851-.297 1.356-.516.489-.251.848-.376 1.076-.376zm-4.229-6.551c-.831 0-1.495.251-1.992.752-.497.501-.795 1.22-.892 2.16h5.524c-.033-.955-.277-1.679-.733-2.172-.457-.493-1.092-.74-1.907-.74zm17.487 6.551c.277 0 .501.102.672.305.171.204.257.478.257.822 0 .485-.302.892-.905 1.221a8.382 8.382 0 0 1-1.882.716c-.7.18-1.369.27-2.004.27-1.923 0-3.447-.532-4.571-1.596-1.125-1.065-1.687-2.521-1.687-4.368 0-1.174.245-2.215.734-3.122a5.2 5.2 0 0 1 2.065-2.113c.888-.502 1.894-.752 3.019-.752 1.075 0 2.012.227 2.811.681a4.7 4.7 0 0 1 1.857 1.925c.44.83.66 1.808.66 2.935 0 .673-.309 1.01-.928 1.01h-7.211c.098 1.08.415 1.874.953 2.383.538.509 1.32.763 2.347.763.521 0 .981-.063 1.381-.188.399-.125.851-.297 1.356-.516.489-.251.848-.376 1.076-.376zm-4.229-6.551c-.831 0-1.495.251-1.992.752-.497.501-.794 1.22-.892 2.16h5.524c-.033-.955-.277-1.679-.733-2.172-.456-.493-1.092-.74-1.907-.74zm13.402 9.838c-.521 0-1.186-.164-1.506-.494-.32-.329-.48-.768-.48-1.316V19.763h-3.374c-1.102 0-1.652-.501-1.652-1.504 0-.988.55-1.482 1.652-1.482h10.719c1.102 0 1.653.494 1.653 1.482 0 1.003-.551 1.504-1.653 1.504h-3.374v11.898c0 .548-.156.987-.468 1.316-.313.33-.981.494-1.517.494zM69.693 21.69c.545 0 .978.148 1.297.446.32.297.479.704.479 1.221v8.616c0 .486-.167.877-.502 1.175-.335.297-.768.446-1.297.446-.499 0-.896-.141-1.192-.423-.297-.282-.445-.658-.445-1.127v-.235a3.63 3.63 0 0 1-1.414 1.362c-.584.313-1.242.469-1.975.469-1.449 0-2.528-.403-3.237-1.209-.709-.806-1.064-2.023-1.064-3.651v-5.423c0-.517.16-.924.479-1.221.32-.298.752-.446 1.298-.446.545 0 .974.148 1.285.446.312.297.468.704.468 1.221v5.494c0 .688.144 1.197.432 1.526.288.329.729.493 1.321.493.685 0 1.243-.235 1.671-.704.429-.47.643-1.088.643-1.855v-4.954c0-.517.156-.924.467-1.221.312-.298.741-.446 1.286-.446zm11.736-.047c1.017 0 1.915.242 2.694.727.779.486 1.387 1.178 1.824 2.079.437.899.655 1.944.655 3.134s-.218 2.242-.655 3.158c-.437.915-1.049 1.628-1.836 2.137-.787.508-1.681.762-2.682.762-.811 0-1.542-.168-2.194-.504a3.633 3.633 0 0 1-1.502-1.397v.187c0 .501-.159.904-.477 1.21-.317.305-.747.458-1.287.458-.54 0-.974-.153-1.299-.458-.326-.306-.489-.709-.489-1.21V18.402c0-.485.171-.876.512-1.173.342-.298.791-.447 1.347-.447.525 0 .946.141 1.264.423.318.282.477.657.477 1.127v5.142a3.534 3.534 0 0 1 1.49-1.35c.644-.321 1.363-.481 2.158-.481zm-1.049 9.298c.842 0 1.494-.294 1.955-.881.461-.587.691-1.412.691-2.477 0-1.049-.23-1.851-.691-2.407-.461-.555-1.113-.833-1.955-.833-.843 0-1.494.286-1.955.857-.461.571-.692 1.381-.692 2.43 0 1.064.231 1.882.692 2.454.461.571 1.112.857 1.955.857zm18.404-.916c.337 0 .612.125.823.375.211.251.317.572.317.963 0 .266-.084.513-.254.74a2.005 2.005 0 0 1-.709.575 9.445 9.445 0 0 1-2.002.692c-.76.181-1.461.27-2.103.27-1.351 0-2.53-.242-3.535-.727-1.005-.486-1.778-1.178-2.318-2.078-.541-.9-.811-1.961-.811-3.182 0-1.174.262-2.214.786-3.122a5.526 5.526 0 0 1 2.179-2.125c.929-.509 1.984-.763 3.167-.763 1.132 0 2.124.231 2.977.692a4.895 4.895 0 0 1 1.989 1.973c.473.853.71 1.85.71 2.993 0 .345-.089.607-.266.787-.177.18-.427.27-.748.27h-7.095c.119.923.423 1.593.913 2.007.49.415 1.191.622 2.103.622.49 0 .929-.054 1.317-.164.389-.11.82-.258 1.293-.446.236-.094.464-.176.684-.247.219-.07.414-.105.583-.105zm-4.359-5.941c-.726 0-1.309.216-1.748.646-.439.431-.701 1.053-.786 1.867h4.891c-.051-.83-.275-1.456-.672-1.878-.397-.423-.958-.635-1.685-.635z" style="fill-rule:nonzero;fill:#eff1f5"/></svg>

_scripts/build.mjs

@@ -1,14 +1,11 @@
-const os = require('os')
-const builder = require('electron-builder')
-const config = require('./ebuilder.config.js')
+import { Arch, build, Platform } from 'electron-builder'
+import config from './ebuilder.config.mjs'
 
-const Platform = builder.Platform
-const Arch = builder.Arch
 const args = process.argv
 
 /** @type {Map<import('electron-builder').Platform, Map<import('electron-builder').Arch, Array<string>>>} */
 let targets
-const platform = os.platform()
+const platform = process.platform
 
 if (platform === 'darwin') {
   let arch = Arch.x64
@@ -37,18 +34,12 @@ if (platform === 'darwin') {
     arch = Arch.armv7l
   }
 
-  targets = Platform.LINUX.createTarget(['deb', 'zip', '7z', 'apk', 'rpm', 'AppImage', 'pacman'], arch)
+  targets = Platform.LINUX.createTarget(['deb', 'zip', '7z', 'rpm', 'AppImage', 'pacman'], arch)
 }
 
-builder
-  .build({
-    targets,
-    config,
-    publish: 'never'
-  })
-  .then(m => {
-    console.log(m)
-  })
-  .catch(e => {
-    console.error(e)
-  })
+try {
+  const output = await build({ targets, config, publish: 'never' })
+  console.log(output)
+} catch (error) {
+  console.error(error)
+}

_scripts/dev-runner.js

@@ -18,6 +18,7 @@ const web = process.argv.indexOf('--web') !== -1
 
 let mainConfig
 let rendererConfig
+let preloadConfig
 let botGuardScriptConfig
 let webConfig
 let SHAKA_LOCALES_TO_BE_BUNDLED
@@ -25,6 +26,7 @@ let SHAKA_LOCALES_TO_BE_BUNDLED
 if (!web) {
   mainConfig = require('./webpack.main.config')
   rendererConfig = require('./webpack.renderer.config')
+  preloadConfig = require('./webpack.preload.config.js')
   botGuardScriptConfig = require('./webpack.botGuardScript.config')
 
   SHAKA_LOCALES_TO_BE_BUNDLED = rendererConfig.SHAKA_LOCALES_TO_BE_BUNDLED
@@ -132,6 +134,36 @@ function startMain() {
   })
 }
 
+function startPreload() {
+  const compiler = webpack(preloadConfig)
+  const { name } = compiler
+
+  let firstTime = true
+
+  compiler.hooks.afterEmit.tap('afterEmit', async () => {
+    console.log(`\nCompiled ${name} script!`)
+
+    if (firstTime) {
+      firstTime = false
+    } else {
+      manualRestart = true
+      await restartElectron()
+      setTimeout(() => {
+        manualRestart = false
+      }, 2500)
+    }
+
+    console.log(`\nWatching file changes for ${name} script...`)
+  })
+
+  compiler.watch({
+    aggregateTimeout: 500,
+  },
+  err => {
+    if (err) console.error(err)
+  })
+}
+
 function startRenderer(callback) {
   const compiler = webpack(rendererConfig)
   const { name } = compiler
@@ -142,6 +174,11 @@ function startRenderer(callback) {
   })
 
   const server = new WebpackDevServer({
+    client: {
+      overlay: {
+        runtimeErrors: false
+      }
+    },
     static: [
       {
         directory: path.resolve(__dirname, '..', 'static'),
@@ -208,6 +245,7 @@ function startWeb () {
 if (!web) {
   startRenderer(() => {
     startBotGuardScript()
+    startPreload()
     startMain()
   })
 } else {

_scripts/ebuilder.config.mjs

@@ -1,12 +1,12 @@
-const { name, productName } = require('../package.json')
+import packageDetails from '../package.json' with { type: 'json' }
 
 /** @type {import('electron-builder').Configuration} */
-const config = {
-  appId: `io.freetubeapp.${name}`,
+export default {
+  appId: `io.freetubeapp.${packageDetails.name}`,
   copyright: 'Copyleft © 2020-2025 freetubeapp@protonmail.com',
   // asar: false,
   // compression: 'store',
-  productName,
+  productName: packageDetails.productName,
   directories: {
     output: './build/',
   },
@@ -52,7 +52,7 @@ const config = {
   linux: {
     category: 'Network',
     icon: '_icons/icon.svg',
-    target: ['deb', 'zip', '7z', 'apk', 'rpm', 'AppImage', 'pacman'],
+    target: ['deb', 'zip', '7z', 'rpm', 'AppImage', 'pacman'],
   },
   // See the following issues for more information
   // https://github.com/jordansissel/fpm/issues/1503
@@ -96,5 +96,3 @@ const config = {
     oneClick: false,
   },
 }
-
-module.exports = config

_scripts/findMissingTemplates.mjs

@@ -0,0 +1,86 @@
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { load as loadYaml } from 'js-yaml'
+
+const localesPath = join(import.meta.dirname, '..', 'static', 'locales')
+const defaultLocale = 'en-US.yaml'
+
+const errors = [
+
+]
+
+const defaultData = loadYaml(readFileSync(`${localesPath}/${defaultLocale}`, { encoding: 'utf-8' }))
+const defaultKeys = Object.keys(defaultData)
+
+const filesInLocaleDir = readdirSync(localesPath)
+
+for (const file of filesInLocaleDir) {
+  if (file !== defaultLocale && file.endsWith('.yaml')) {
+    const fileData = loadYaml(readFileSync(`${localesPath}/${file}`, { encoding: 'utf-8' }))
+    const fileDataKeys = Object.keys(fileData)
+    addErrors(defaultData, fileData, defaultKeys, fileDataKeys, file)
+  }
+}
+
+writeFileSync('locale-errors.json', JSON.stringify(errors, null, 2))
+
+if (errors.length > 0) {
+  console.error(errors)
+} else {
+  console.log('no issues found')
+}
+
+/**
+ * @param {unknown} originalData - data from en-US converted to a JavaScript object
+ * @param {unknown} newData - data from the file we are analyzing converted to a JavaScript object
+ * @param {string[]} originalKeys - keys from en-US file
+ * @param {string[]} newKeys - keys from the file we are currently analyzing
+ * @param {string} file - the file we are currently analyzing
+ */
+function addErrors(originalData, newData, originalKeys, newKeys, file) {
+  newKeys.forEach(newKey => {
+    if (originalKeys.includes(newKey)) {
+      if (typeof originalData[newKey] === 'object') {
+        addErrors(originalData[newKey], newData[newKey], Object.keys(originalData[newKey]), Object.keys(newData[newKey]), file)
+      } else if (isMissingInterpolation(originalData[newKey], newData[newKey], file)) {
+        errors.push({ fileName: file, error: 'value is missing a template or has an extra template', key: newKey, defaultValue: originalData[newKey], value: newData[newKey] })
+      }
+    } else {
+      // The key doesn't exist in the en-US file but exists in current yaml file.
+      // We should go through this eventually but it's not as important as invalid templates
+
+      // errors.push({ fileName: file, error: 'extra key found', key: fdk })
+    }
+  })
+}
+
+/**
+ *
+ * @param {String} defaultValue
+ * @param {String} otherValue
+ */
+function isMissingInterpolation(defaultValue, otherValue, filename) {
+  if (otherValue === '') {
+    // not translated yet, we don't care
+    return false
+  }
+  const defaultMatches = Array.from(new Set(defaultValue.match(/{[^}]*}/g)))
+  const otherMatches = Array.from(new Set(otherValue.match(/{[^}]*}/g)))
+
+  if (defaultMatches) {
+    if (!otherMatches) {
+      // no templates found.
+      return true
+    }
+    defaultMatches.sort()
+    otherMatches.sort()
+
+    const defaultMatchesStringified = JSON.stringify(defaultMatches)
+    const otherMatchesStringified = JSON.stringify(otherMatches)
+    // check if templates match.
+    return defaultMatchesStringified !== otherMatchesStringified
+  } else if (otherMatches) {
+    // extra template found
+    return true
+  }
+}

_scripts/getRegions.mjs

@@ -119,6 +119,9 @@ for (const { youTube, freeTube } of languagesToScrape) {
   processGeolocations(freeTube, youTube, response)
 }
 
+/**
+ * @param {string} youTubeLanguageCode
+ */
 async function scrapeLanguage(youTubeLanguageCode) {
   const session = await Innertube.create({
     retrieve_player: false,
@@ -129,7 +132,13 @@ async function scrapeLanguage(youTubeLanguageCode) {
   return await session.actions.execute('/account/account_menu')
 }
 
+/**
+ * @param {string} freeTubeLanguage
+ * @param {string} youTubeLanguage
+ * @param {import('youtubei.js').ApiResponse} response
+ */
 function processGeolocations(freeTubeLanguage, youTubeLanguage, response) {
+  /** @type {{ name: string, code: string }[]} */
   const geolocations = response.data.actions[0].openPopupAction.popup.multiPageMenuRenderer.sections[0].multiPageMenuSectionRenderer.items[4].compactLinkRenderer.serviceEndpoint.signalServiceEndpoint.actions[0].getMultiPageMenuAction.menu.multiPageMenuRenderer.sections[0].multiPageMenuSectionRenderer.items
     .map(({ compactLinkRenderer }) => {
       return {
@@ -158,5 +167,10 @@ function processGeolocations(freeTubeLanguage, youTubeLanguage, response) {
     geolocations.sort((a, b) => collator.compare(a.name, b.name))
   }
 
-  writeFileSync(`${STATIC_DIRECTORY}/geolocations/${freeTubeLanguage}.json`, JSON.stringify(geolocations))
+  const output = {
+    names: geolocations.map(entry => entry.name),
+    codes: geolocations.map(entry => entry.code)
+  }
+
+  writeFileSync(`${STATIC_DIRECTORY}/geolocations/${freeTubeLanguage}.json`, JSON.stringify(output))
 }

_scripts/getShakaLocales.js

@@ -1,7 +1,8 @@
 const { readFileSync, readdirSync } = require('fs')
+const { join } = require('path')
 
 function getPreloadedLocales() {
-  const localesFile = readFileSync(`${__dirname}/../node_modules/shaka-player/dist/locales.js`, 'utf-8')
+  const localesFile = readFileSync(join(__dirname, '../node_modules/shaka-player/dist/locales.js'), 'utf-8')
 
   const localesLine = localesFile.match(/^\/\/ LOCALES: ([\w ,-]+)$/m)
 
@@ -13,7 +14,7 @@ function getPreloadedLocales() {
 }
 
 function getAllLocales() {
-  const filenames = readdirSync(`${__dirname}/../node_modules/shaka-player/ui/locales`)
+  const filenames = readdirSync(join(__dirname, '../node_modules/shaka-player/ui/locales'))
 
   return new Set(filenames
     .filter(filename => filename !== 'source.json' && filename.endsWith('.json'))
@@ -85,7 +86,7 @@ function getShakaLocales() {
   const shakaLocales = getAllLocales()
 
   /** @type {string[]} */
-  const freeTubeLocales = JSON.parse(readFileSync(`${__dirname}/../static/locales/activeLocales.json`, 'utf-8'))
+  const freeTubeLocales = JSON.parse(readFileSync(join(__dirname, '../static/locales/activeLocales.json'), 'utf-8'))
 
   const mappings = getMappings(shakaLocales, freeTubeLocales)
 

_scripts/injectAllowedPaths.mjs

@@ -21,6 +21,8 @@ const paths = readdirSync(distDirectory, {
       // disallow the renderer process/browser windows to read the main.js file
       dirent.name !== 'main.js' &&
       dirent.name !== 'main.js.LICENSE.txt' &&
+      // disallow the renderer process/browser windows to read the preload.js file
+      dirent.name !== 'preload.js' &&
       // disallow the renderer process/browser windows to read the botGuardScript.js file
       dirent.name !== 'botGuardScript.js' &&
       // filter out any web build files, in case the dist directory contains a web build

_scripts/patchShaka.mjs

@@ -1,61 +1,13 @@
-// This script fixes shaka not exporting its type definitions and referencing remote google fonts in its CSS
-// by adding an export line to the type definitions and downloading the fonts and updating the CSS to point to the local files
+// This script fixes shaka-player referencing the Roboto font on google fonts in its CSS
+// by updating the CSS to point to the local Roboto font
 // this script only makes changes if they are needed, so running it multiple times doesn't cause any problems
 
-import { appendFileSync, closeSync, ftruncateSync, openSync, readFileSync, writeFileSync, writeSync } from 'fs'
+import { closeSync, ftruncateSync, openSync, readFileSync, writeSync } from 'fs'
 import { resolve } from 'path'
 
 const SHAKA_DIST_DIR = resolve(import.meta.dirname, '../node_modules/shaka-player/dist')
 
-function fixTypes() {
-  let fixedTypes = false
-
-  let fileHandleNormal
-  try {
-    fileHandleNormal = openSync(`${SHAKA_DIST_DIR}/shaka-player.ui.d.ts`, 'a+')
-
-    const contents = readFileSync(fileHandleNormal, 'utf-8')
-
-    // This script is run after every `yarn install`, even if shaka-player wasn't updated
-    // So we want to check first, if we actually need to make any changes
-    // or if the ones from the previous run are still intact
-    if (!contents.includes('export default shaka')) {
-      appendFileSync(fileHandleNormal, 'export default shaka;\n')
-
-      fixedTypes = true
-    }
-  } finally {
-    if (typeof fileHandleNormal !== 'undefined') {
-      closeSync(fileHandleNormal)
-    }
-  }
-
-  let fileHandleDebug
-  try {
-    fileHandleDebug = openSync(`${SHAKA_DIST_DIR}/shaka-player.ui.debug.d.ts`, 'a+')
-
-    const contents = readFileSync(fileHandleDebug, 'utf-8')
-
-    // This script is run after every `yarn install`, even if shaka-player wasn't updated
-    // So we want to check first, if we actually need to make any changes
-    // or if the ones from the previous run are still intact
-    if (!contents.includes('export default shaka')) {
-      appendFileSync(fileHandleDebug, 'export default shaka;\n')
-
-      fixedTypes = true
-    }
-  } finally {
-    if (typeof fileHandleDebug !== 'undefined') {
-      closeSync(fileHandleDebug)
-    }
-  }
-
-  if (fixedTypes) {
-    console.log('Fixed shaka-player types')
-  }
-}
-
-async function removeRobotoFont() {
+function removeRobotoFont() {
   let cssFileHandle
   try {
     cssFileHandle = openSync(`${SHAKA_DIST_DIR}/controls.css`, 'r+')
@@ -72,63 +24,10 @@ async function removeRobotoFont() {
       console.log('Removed shaka-player Roboto font, so it uses ours')
     }
   } finally {
-    if (typeof cssFileHandle !== 'undefined') {
+    if (cssFileHandle !== undefined) {
       closeSync(cssFileHandle)
     }
   }
 }
 
-async function replaceAndDownloadMaterialIconsFont() {
-  let cssFileHandle
-  try {
-    cssFileHandle = openSync(`${SHAKA_DIST_DIR}/controls.css`, 'r+')
-
-    let cssContents = readFileSync(cssFileHandle, 'utf-8')
-
-    const fontFaceRegex = /@font-face{font-family:'Material Icons Round'[^}]+format\('opentype'\)}/
-
-    if (fontFaceRegex.test(cssContents)) {
-      const cssResponse = await fetch('https://fonts.googleapis.com/icon?family=Material+Icons+Round', {
-        headers: {
-          // Without the user-agent it returns the otf file instead of the woff2 one
-          'user-agent': 'Firefox/125.0'
-        }
-      })
-
-      const text = await cssResponse.text()
-
-      let newFontCSS = text.match(/(@font-face\s*{[^}]+})/)[1].replaceAll('\n', '')
-
-      const urlMatch = newFontCSS.match(/https:\/\/fonts\.gstatic\.com\/s\/materialiconsround\/(?<version>[^/]+)\/[^.]+\.(?<extension>\w+)/)
-
-      const url = urlMatch[0]
-      const { version, extension } = urlMatch.groups
-
-      const fontResponse = await fetch(url)
-      const fontContent = new Uint8Array(await fontResponse.arrayBuffer())
-
-      const filename = `shaka-materialiconsround-${version}.${extension}`
-      writeFileSync(`${SHAKA_DIST_DIR}/${filename}`, fontContent)
-
-      newFontCSS = newFontCSS.replace(url, `./${filename}`)
-
-      cssContents = cssContents.replace(fontFaceRegex, newFontCSS)
-
-      ftruncateSync(cssFileHandle)
-      writeSync(cssFileHandle, cssContents, 0, 'utf-8')
-
-      console.log('Changed shaka-player Material Icons Rounded font to use the smaller woff2 format instead of otf')
-      console.log('Downloaded shaka-player Material Icons Rounded font')
-    }
-  } catch (e) {
-    console.error(e)
-  } finally {
-    if (typeof cssFileHandle !== 'undefined') {
-      closeSync(cssFileHandle)
-    }
-  }
-}
-
-fixTypes()
-await removeRobotoFont()
-await replaceAndDownloadMaterialIconsFont()
+removeRobotoFont()

_scripts/sigFrameConfig.js

@@ -0,0 +1,13 @@
+const { hash } = require('crypto')
+const { join } = require('path')
+const { readFileSync } = require('fs')
+
+const path = join(__dirname, '../src/renderer/sigFrameScript.js')
+const rawScript = readFileSync(path, 'utf8')
+
+const script = require('terser').minify_sync({ [path]: rawScript }).code
+
+module.exports.sigFrameTemplateParameters = {
+  sigFrameSrc: `data:text/html,${encodeURIComponent(`<!doctype html><script>${script}</script>`)}`,
+  sigFrameCspHash: `sha512-${hash('sha512', script, 'base64')}`
+}

_scripts/webpack.main.config.js

@@ -25,6 +25,11 @@ const config = {
         use: path.join(__dirname, 'mime-db-shrinking-loader.js')
       }
     ],
+    generator: {
+      json: {
+        JSONParse: false
+      }
+    }
   },
   // webpack defaults to only optimising the production builds, so having this here is fine
   optimization: {

_scripts/webpack.preload.config.js

@@ -0,0 +1,34 @@
+const path = require('path')
+
+const isDevMode = process.env.NODE_ENV === 'development'
+
+/** @type {import('webpack').Configuration} */
+const config = {
+  name: 'preload',
+  mode: process.env.NODE_ENV,
+  devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
+  entry: {
+    preload: path.join(__dirname, '../src/preload/main.js'),
+  },
+  infrastructureLogging: {
+    // Only warnings and errors
+    // level: 'none' disable logging
+    // Please read https://webpack.js.org/configuration/other-options/#infrastructurelogginglevel
+    level: isDevMode ? 'info' : 'none'
+  },
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: '[name].js'
+  },
+  externals: [
+    'electron/renderer'
+  ],
+  externalsType: 'commonjs',
+  node: {
+    __dirname: false,
+    __filename: false
+  },
+  target: 'electron-preload',
+}
+
+module.exports = config

_scripts/webpack.renderer.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const { readFileSync, readdirSync } = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
@@ -12,6 +12,7 @@ const {
   SHAKA_LOCALES_PREBUNDLED,
   SHAKA_LOCALES_TO_BE_BUNDLED
 } = require('./getShakaLocales')
+const { sigFrameTemplateParameters } = require('./sigFrameConfig')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
@@ -39,7 +40,7 @@ const config = {
     level: isDevMode ? 'info' : 'none'
   },
   output: {
-    libraryTarget: 'commonjs2',
+    scriptType: 'text/javascript',
     path: path.join(__dirname, '../dist'),
     filename: '[name].js',
   },
@@ -55,7 +56,7 @@ const config = {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
-            whitespace: 'condense',
+            isCustomElement: (tag) => tag === 'swiper-container' || tag === 'swiper-slide'
           }
         }
       },
@@ -108,6 +109,11 @@ const config = {
         }
       },
     ],
+    generator: {
+      json: {
+        JSONParse: false
+      }
+    }
   },
   // webpack defaults to only optimising the production builds, so having this here is fine
   optimization: {
@@ -127,6 +133,12 @@ const config = {
       'process.env.IS_ELECTRON': true,
       'process.env.IS_ELECTRON_MAIN': false,
       'process.env.SUPPORTS_LOCAL_API': true,
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+      __VUE_I18N_LEGACY_API__: 'true',
+      __VUE_I18N_FULL_INSTALL__: 'false',
+      __INTLIFY_PROD_DEVTOOLS__: 'false',
       'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames),
       'process.env.GEOLOCATION_NAMES': JSON.stringify(readdirSync(path.join(__dirname, '..', 'static', 'geolocations')).map(filename => filename.replace('.json', ''))),
       'process.env.SWIPER_VERSION': `'${swiperVersion}'`,
@@ -134,9 +146,9 @@ const config = {
       'process.env.SHAKA_LOCALES_PREBUNDLED': JSON.stringify(SHAKA_LOCALES_PREBUNDLED)
     }),
     new HtmlWebpackPlugin({
-      excludeChunks: ['processTaskWorker'],
       filename: 'index.html',
-      template: path.resolve(__dirname, '../src/index.ejs')
+      template: path.resolve(__dirname, '../src/index.ejs'),
+      templateParameters: sigFrameTemplateParameters
     }),
     new VueLoaderPlugin(),
     new MiniCssExtractPlugin({
@@ -174,9 +186,6 @@ const config = {
   ],
   resolve: {
     alias: {
-      vue$: 'vue/dist/vue.runtime.esm.js',
-      'portal-vue$': 'portal-vue/dist/portal-vue.esm.js',
-
       DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$: path.resolve(__dirname, '../src/datastores/handlers/electron.js'),
 
       'youtubei.js$': 'youtubei.js/web',
@@ -186,7 +195,7 @@ const config = {
     },
     extensions: ['.js', '.vue']
   },
-  target: 'electron-renderer',
+  target: 'web',
 }
 
 if (isDevMode) {

_scripts/webpack.web.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin')
@@ -45,7 +45,7 @@ const config = {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
-            whitespace: 'condense',
+            isCustomElement: (tag) => tag === 'swiper-container' || tag === 'swiper-slide',
           }
         }
       },
@@ -102,6 +102,11 @@ const config = {
         }
       },
     ],
+    generator: {
+      json: {
+        JSONParse: false
+      }
+    }
   },
   // webpack defaults to only optimising the production builds, so having this here is fine
   optimization: {
@@ -123,6 +128,12 @@ const config = {
       'process.env.IS_ELECTRON': false,
       'process.env.IS_ELECTRON_MAIN': false,
       'process.env.SUPPORTS_LOCAL_API': false,
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+      __VUE_I18N_LEGACY_API__: 'true',
+      __VUE_I18N_FULL_INSTALL__: 'false',
+      __INTLIFY_PROD_DEVTOOLS__: 'false',
       'process.env.SWIPER_VERSION': `'${swiperVersion}'`
     }),
     new webpack.ProvidePlugin({
@@ -153,18 +164,11 @@ const config = {
   ],
   resolve: {
     alias: {
-      vue$: 'vue/dist/vue.runtime.esm.js',
-      'portal-vue$': 'portal-vue/dist/portal-vue.esm.js',
-
       DB_HANDLERS_ELECTRON_RENDERER_OR_WEB$: path.resolve(__dirname, '../src/datastores/handlers/web.js'),
 
       // change to "shaka-player.ui.debug.js" to get debug logs (update jsconfig to get updated types)
       'shaka-player$': 'shaka-player/dist/shaka-player.ui.js',
     },
-    fallback: {
-      'fs/promises': path.resolve(__dirname, '_empty.js'),
-      path: require.resolve('path-browserify'),
-    },
     extensions: ['.js', '.vue']
   },
   target: 'web',

eslint.config.mjs

@@ -33,9 +33,9 @@ export default [
     ts: false,
   }),
   js.configs.recommended,
-  ...eslintPluginVue.configs['flat/vue2-recommended'],
+  ...eslintPluginVue.configs['flat/recommended'],
   ...vuejsAccessibility.configs["flat/recommended"],
-  ...intlifyVueI18N.configs['flat/recommended'],
+  ...intlifyVueI18N.configs['recommended'],
   {
     files: [
       '**/*.{js,vue}',
@@ -63,7 +63,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
 
@@ -79,7 +79,6 @@ export default [
       'no-unused-vars': 'warn',
       'no-undef': 'warn',
       'object-shorthand': 'off',
-      'vue/no-template-key': 'warn',
       'vue/multi-word-component-names': 'off',
 
       'vuejs-accessibility/label-has-for': ['error', {
@@ -89,10 +88,8 @@ export default [
       }],
 
       'vuejs-accessibility/no-static-element-interactions': 'off',
-      'n/no-callback-literal': 'warn',
-      'n/no-path-concat': 'warn',
       'unicorn/better-regex': 'error',
-      'unicorn/no-array-push-push': 'error',
+      'unicorn/prefer-single-call': 'error',
       'unicorn/prefer-keyboard-event-key': 'error',
       'unicorn/prefer-regexp-test': 'error',
       'unicorn/prefer-string-replace-all': 'error',
@@ -121,9 +118,8 @@ export default [
         ignoreText: ['-', '•', '/', 'YouTube', 'Invidious', 'FreeTube'],
       }],
 
-      '@intlify/vue-i18n/no-deprecated-tc': 'off',
-      'vue/require-explicit-emits': 'error',
       'vue/no-unused-emit-declarations': 'error',
+      'vue/prefer-use-template-ref': 'error',
 
       'jsdoc/check-alignment': 'error',
       'jsdoc/check-property-names': 'error',
@@ -138,6 +134,15 @@ export default [
     },
   },
 
+  {
+    files: ['src/main/index.js'],
+    languageOptions: {
+      globals: {
+        __FREETUBE_ALLOWED_PATHS__: 'readable'
+      }
+    }
+  },
+
   ...eslintPluginJsonc.configs['flat/base'],
   {
     files: ['**/*.json'],
@@ -159,7 +164,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
   },
@@ -184,7 +189,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
   },
@@ -203,7 +208,7 @@ export default [
     settings: {
       'vue-i18n': {
         localeDir: `./static/locales/{${activeLocales.join(',')}}.yaml`,
-        messageSyntaxVersion: '^8.0.0',
+        messageSyntaxVersion: '^11.0.0',
       },
     },
   },
@@ -223,7 +228,6 @@ export default [
       '@stylistic/space-before-function-paren': 'off',
       '@stylistic/comma-dangle': ['error', 'only-multiline'],
       'no-console': 'off',
-      'n/no-path-concat': 'off',
       'unicorn/better-regex': 'error',
       'unicorn/prefer-optional-catch-binding': 'error',
       'unicorn/prefer-date-now': 'error',
@@ -246,7 +250,6 @@ export default [
       'no-console': 'off',
       '@stylistic/space-before-function-paren': 'off',
       '@stylistic/comma-dangle': ['error', 'only-multiline'],
-      'n/no-path-concat': 'off',
       'unicorn/better-regex': 'error',
       'unicorn/prefer-optional-catch-binding': 'error',
       'unicorn/prefer-date-now': 'error',

jsconfig.json

@@ -1,6 +1,6 @@
 {
   "vueCompilerOptions": {
-    "target": 2.7
+    "target": 3.5
   },
   "compilerOptions": {
     "strictNullChecks": true,

package.json

@@ -2,12 +2,12 @@
   "name": "freetube",
   "productName": "FreeTube",
   "description": "A private YouTube client",
-  "version": "0.23.3",
+  "version": "0.23.12",
   "license": "AGPL-3.0-or-later",
   "main": "./dist/main.js",
   "private": true,
   "author": {
-    "name": "PrestonN",
+    "name": "FreeTube Team",
     "email": "FreeTubeApp@protonmail.com",
     "url": "https://github.com/FreeTubeApp/FreeTube"
   },
@@ -22,9 +22,9 @@
     "build": "run-s patch-shaka pack build-release",
     "build:arm64": "run-s patch-shaka pack build-release:arm64",
     "build:arm32": "run-s patch-shaka pack build-release:arm32",
-    "build-release": "node _scripts/build.js",
-    "build-release:arm64": "node _scripts/build.js arm64",
-    "build-release:arm32": "node _scripts/build.js arm32",
+    "build-release": "node _scripts/build.mjs",
+    "build-release:arm64": "node _scripts/build.mjs arm64",
+    "build-release:arm32": "node _scripts/build.mjs arm32",
     "clean": "node _scripts/clean.mjs",
     "debug": "run-s patch-shaka debug-runner",
     "debug-runner": "node _scripts/dev-runner.js --remote-debug",
@@ -43,13 +43,14 @@
     "lint-style": "stylelint \"src/**/*.{css,scss}\"",
     "lint-style-fix": "stylelint --fix \"src/**/*.{css,scss}\"",
     "lint-yml": "eslint --config eslint.config.mjs \"**/*.yml\" \"**/*.yaml\"",
-    "pack": "run-p pack:main pack:renderer pack:botGuardScript && node _scripts/injectAllowedPaths.mjs",
+    "pack": "run-p pack:main pack:renderer pack:preload pack:botGuardScript && node _scripts/injectAllowedPaths.mjs",
     "pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js",
     "pack:renderer": "webpack --mode=production --node-env=production --config _scripts/webpack.renderer.config.js",
+    "pack:preload": "webpack --mode=production --node-env=production --config _scripts/webpack.preload.config.js",
     "pack:web": "webpack --mode=production --node-env=production --config _scripts/webpack.web.config.js",
     "pack:botGuardScript": "webpack --config _scripts/webpack.botGuardScript.config.js",
-    "postinstall": "run-s --silent patch-shaka",
-    "release": "run-s test build",
+    "postinstall": "yarn run --silent patch-shaka",
+    "checkforbadtemplates": "node _scripts/findMissingTemplates.mjs",
     "ci": "yarn install --silent --frozen-lockfile --network-concurrency 1"
   },
   "dependencies": {
@@ -57,68 +58,64 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/vue-fontawesome": "^2.0.10",
-    "@seald-io/nedb": "^4.1.1",
-    "autolinker": "^4.1.0",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@seald-io/nedb": "^4.1.2",
+    "autolinker": "^4.1.5",
     "bgutils-js": "^3.2.0",
-    "electron-context-menu": "^4.0.5",
-    "marked": "^15.0.7",
-    "path-browserify": "^1.0.1",
-    "portal-vue": "^2.1.7",
+    "electron-context-menu": "^4.1.1",
+    "marked": "^17.0.1",
     "process": "^0.11.10",
-    "shaka-player": "^4.14.3",
-    "swiper": "^11.2.6",
-    "vue": "^2.7.16",
-    "vue-i18n": "^8.28.2",
-    "vue-observe-visibility": "^1.0.0",
-    "vue-router": "^3.6.5",
-    "vuex": "^3.6.2",
-    "youtubei.js": "^13.3.0"
+    "shaka-player": "^4.16.10",
+    "swiper": "^12.0.3",
+    "vue": "^3.5.25",
+    "vue-i18n": "^11.1.12",
+    "vue-observe-visibility": "^2.0.0-alpha.1",
+    "vue-router": "^4.6.3",
+    "vuex": "^4.1.0",
+    "youtubei.js": "^16.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-transform-class-properties": "^7.25.9",
-    "@babel/preset-env": "^7.26.9",
-    "@double-great/stylelint-a11y": "^3.0.4",
-    "@eslint/js": "^9.23.0",
-    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@double-great/stylelint-a11y": "^3.4.1",
+    "@eslint/js": "^9.39.1",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
     "babel-loader": "^10.0.0",
-    "copy-webpack-plugin": "^13.0.0",
+    "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
-    "electron": "^35.0.3",
-    "electron-builder": "^26.0.12",
-    "eslint": "^9.23.0",
-    "eslint-plugin-jsdoc": "^50.6.9",
-    "eslint-plugin-jsonc": "^2.20.0",
-    "eslint-plugin-unicorn": "^58.0.0",
-    "eslint-plugin-vue": "^10.0.0",
+    "electron": "^39.2.3",
+    "electron-builder": "^26.3.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-jsdoc": "^61.4.1",
+    "eslint-plugin-jsonc": "^2.21.0",
+    "eslint-plugin-unicorn": "^62.0.0",
+    "eslint-plugin-vue": "^10.6.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "eslint-plugin-yml": "^1.17.0",
-    "globals": "^16.0.0",
-    "html-webpack-plugin": "^5.6.3",
-    "js-yaml": "^4.1.0",
-    "json-minimizer-webpack-plugin": "^5.0.0",
-    "lefthook": "^1.11.4",
-    "mini-css-extract-plugin": "^2.9.2",
-    "neostandard": "^0.12.1",
-    "npm-run-all2": "^7.0.2",
-    "postcss": "^8.5.3",
+    "eslint-plugin-yml": "^1.19.0",
+    "globals": "^16.5.0",
+    "html-webpack-plugin": "^5.6.5",
+    "js-yaml": "^4.1.1",
+    "json-minimizer-webpack-plugin": "^5.0.1",
+    "lefthook": "^2.0.4",
+    "mini-css-extract-plugin": "^2.9.4",
+    "neostandard": "^0.12.2",
+    "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.6",
     "postcss-scss": "^4.0.9",
-    "sass": "^1.86.0",
-    "sass-loader": "^16.0.5",
-    "stylelint": "^16.16.0",
+    "sass": "^1.94.2",
+    "sass-loader": "^16.0.6",
+    "stylelint": "^16.26.0",
     "stylelint-config-sass-guidelines": "^12.1.0",
-    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-high-performance-animation": "^1.11.0",
     "stylelint-use-logical-spec": "^5.0.1",
     "tree-kill": "1.2.2",
-    "vue-devtools": "^5.1.4",
-    "vue-eslint-parser": "^10.1.1",
-    "vue-loader": "^15.10.0",
-    "webpack": "^5.98.0",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-loader": "^17.4.2",
+    "webpack": "^5.103.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0",
+    "webpack-dev-server": "^5.2.2",
     "yaml-eslint-parser": "^1.3.0"
   }
 }

src/botGuardScript.js

@@ -6,10 +6,9 @@ import { BG, buildURL, GOOG_API_KEY } from 'bgutils-js'
 /**
  * Based on: https://github.com/LuanRT/BgUtils/blob/main/examples/node/innertube-challenge-fetcher-example.ts
  * @param {string} videoId
- * @param {string} visitorData
  * @param {import('youtubei.js').Session['context']} context
  */
-export default async function (videoId, visitorData, context) {
+export default async function (videoId, context) {
   const requestKey = 'O43z0dpjhgX20SCx4KAo'
 
   const challengeResponse = await fetch(
@@ -19,7 +18,7 @@ export default async function (videoId, visitorData, context) {
       headers: {
         Accept: '*/*',
         'Content-Type': 'application/json',
-        'X-Goog-Visitor-Id': visitorData,
+        'X-Goog-Visitor-Id': context.client.visitorData,
         'X-Youtube-Client-Version': context.client.clientVersion,
         'X-Youtube-Client-Name': '1'
       },
@@ -63,7 +62,7 @@ export default async function (videoId, visitorData, context) {
   })
 
   const webPoSignalOutput = []
-  const botGuardResponse = await botGuard.snapshot({ webPoSignalOutput })
+  const botGuardResponse = await botGuard.snapshot({ webPoSignalOutput }, 10_000)
 
   const integrityTokenResponse = await fetch(buildURL('GenerateIT', true), {
     method: 'POST',
@@ -83,8 +82,5 @@ export default async function (videoId, visitorData, context) {
 
   const integrityTokenBasedMinter = await BG.WebPoMinter.create({ integrityToken: response[0] }, webPoSignalOutput)
 
-  const contentPoToken = await integrityTokenBasedMinter.mintAsWebsafeString(videoId)
-  const sessionPoToken = await integrityTokenBasedMinter.mintAsWebsafeString(visitorData)
-
-  return { contentPoToken, sessionPoToken }
+  return await integrityTokenBasedMinter.mintAsWebsafeString(videoId)
 }

src/constants.js

@@ -2,10 +2,8 @@
 const IpcChannels = {
   ENABLE_PROXY: 'enable-proxy',
   DISABLE_PROXY: 'disable-proxy',
-  OPEN_EXTERNAL_LINK: 'open-external-link',
   GET_SYSTEM_LOCALE: 'get-system-locale',
   GET_NAVIGATION_HISTORY: 'get-navigation-history',
-  SHOW_SAVE_DIALOG: 'show-save-dialog',
   STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',
   START_POWER_SAVE_BLOCKER: 'start-power-save-blocker',
   CREATE_NEW_WINDOW: 'create-new-window',
@@ -14,9 +12,6 @@ const IpcChannels = {
   APP_READY: 'app-ready',
   RELAUNCH_REQUEST: 'relaunch-request',
 
-  REQUEST_FULLSCREEN: 'request-fullscreen',
-  REQUEST_PIP: 'request-pip',
-
   SEARCH_INPUT_HANDLING_READY: 'search-input-handling-ready',
   UPDATE_SEARCH_INPUT_TEXT: 'update-search-input-text',
 
@@ -45,11 +40,11 @@ const IpcChannels = {
 
   SET_INVIDIOUS_AUTHORIZATION: 'set-invidious-authorization',
 
-  GENERATE_PO_TOKENS: 'generate-po-tokens',
+  GENERATE_PO_TOKEN: 'generate-po-token',
 
   GET_SCREENSHOT_FALLBACK_FOLDER: 'get-screenshot-fallback-folder',
   CHOOSE_DEFAULT_FOLDER: 'choose-default-folder',
-  WRITE_SCREENSHOT: 'write-screenshot',
+  WRITE_TO_DEFAULT_FOLDER: 'write-to-default-folder',
 }
 
 const DBActions = {
@@ -62,13 +57,13 @@ const DBActions = {
     UPSERT: 2,
     DELETE: 3,
     DELETE_MULTIPLE: 4,
-    DELETE_ALL: 5
+    DELETE_ALL: 5,
+    OVERWRITE: 6
   },
 
   HISTORY: {
-    OVERWRITE: 20,
-    UPDATE_WATCH_PROGRESS: 21,
-    UPDATE_PLAYLIST: 22,
+    UPDATE_WATCH_PROGRESS: 20,
+    UPDATE_PLAYLIST: 21,
   },
 
   PROFILES: {
@@ -102,13 +97,13 @@ const SyncEvents = {
     UPSERT: 1,
     DELETE: 2,
     DELETE_MULTIPLE: 3,
-    DELETE_ALL: 4
+    DELETE_ALL: 4,
+    OVERWRITE: 5,
   },
 
   HISTORY: {
-    OVERWRITE: 20,
-    UPDATE_WATCH_PROGRESS: 21,
-    UPDATE_PLAYLIST: 22,
+    UPDATE_WATCH_PROGRESS: 20,
+    UPDATE_PLAYLIST: 21,
   },
 
   PROFILES: {
@@ -157,8 +152,6 @@ const KeyboardShortcuts = {
       NEW_WINDOW: 'ctrl+N',
       MINIMIZE_WINDOW: 'ctrl+M',
       CLOSE_WINDOW: 'ctrl+W',
-      RESTART_WINDOW: 'ctrl+R',
-      FORCE_RESTART_WINDOW: 'ctrl+shift+R',
       TOGGLE_DEVTOOLS: 'ctrl+shift+I',
       FOCUS_SEARCH: 'alt+D',
       SEARCH_IN_NEW_WINDOW: 'shift+enter',
@@ -192,16 +185,46 @@ const KeyboardShortcuts = {
       SMALL_REWIND: 'arrowleft',
       SMALL_FAST_FORWARD: 'arrowright',
       DECREASE_VIDEO_SPEED: 'o',
+      DECREASE_VIDEO_SPEED_ALT: '<',
       INCREASE_VIDEO_SPEED: 'p',
+      INCREASE_VIDEO_SPEED_ALT: '>',
       SKIP_N_TENTHS: '0..9',
       LAST_CHAPTER: 'ctrl+arrowleft',
       NEXT_CHAPTER: 'ctrl+arrowright',
       LAST_FRAME: ',',
       NEXT_FRAME: '.',
+      HOME: 'home',
+      END: 'end',
+      SKIP_TO_NEXT: 'shift+n',
+      SKIP_TO_PREV: 'shift+p'
     }
   },
 }
 
+/**
+ * Material Design Symbols used by FreeTube's custom player components
+ *
+ * This only has the value of the `d` attribute from the `<path>` element, the rest of the SVG is generated at runtime.
+ *
+ * Fetched with
+ * https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<icon>/default/24px.svg
+ * https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<icon>/fill1/24px.svg
+ */
+const PlayerIcons = {
+  CLOSE_FULLSCREEN_FILLED: 'M400-344 164-108q-11 11-28 11t-28-11q-11-11-11-28t11-28l236-236H200q-17 0-28.5-11.5T160-440q0-17 11.5-28.5T200-480h240q17 0 28.5 11.5T480-440v240q0 17-11.5 28.5T440-160q-17 0-28.5-11.5T400-200v-144Zm216-216h144q17 0 28.5 11.5T800-520q0 17-11.5 28.5T760-480H520q-17 0-28.5-11.5T480-520v-240q0-17 11.5-28.5T520-800q17 0 28.5 11.5T560-760v144l236-236q11-11 28-11t28 11q11 11 11 28t-11 28L616-560Z',
+  DONE_FILLED: 'm382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z',
+  INSERT_CHART_DEFAULT: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Zm120 200q-17 0-28.5 11.5T280-520v200q0 17 11.5 28.5T320-280q17 0 28.5-11.5T360-320v-200q0-17-11.5-28.5T320-560Zm160-120q-17 0-28.5 11.5T440-640v320q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-320q0-17-11.5-28.5T480-680Zm160 240q-17 0-28.5 11.5T600-400v80q0 17 11.5 28.5T640-280q17 0 28.5-11.5T680-320v-80q0-17-11.5-28.5T640-440Z',
+  INSERT_CHART_FILLED: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-440q-17 0-28.5 11.5T280-520v200q0 17 11.5 28.5T320-280q17 0 28.5-11.5T360-320v-200q0-17-11.5-28.5T320-560Zm160-120q-17 0-28.5 11.5T440-640v320q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-320q0-17-11.5-28.5T480-680Zm160 240q-17 0-28.5 11.5T600-400v80q0 17 11.5 28.5T640-280q17 0 28.5-11.5T680-320v-80q0-17-11.5-28.5T640-440Z',
+  VARIABLES_DEFAULT: 'M120-320v-320q0-17 11.5-28.5T160-680h640q17 0 28.5 11.5T840-640v320q0 17-11.5 28.5T800-280H160q-17 0-28.5-11.5T120-320Zm80-40h560v-240H200v240Zm0 0v-240 240Z',
+  OPEN_IN_FULL_FILLED: 'M160-120q-17 0-28.5-11.5T120-160v-240q0-17 11.5-28.5T160-440q17 0 28.5 11.5T200-400v144l504-504H560q-17 0-28.5-11.5T520-800q0-17 11.5-28.5T560-840h240q17 0 28.5 11.5T840-800v240q0 17-11.5 28.5T800-520q-17 0-28.5-11.5T760-560v-144L256-200h144q17 0 28.5 11.5T440-160q0 17-11.5 28.5T400-120H160Z',
+  PAUSE_CIRCLE_FILLED: 'M400-320q17 0 28.5-11.5T440-360v-240q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v240q0 17 11.5 28.5T400-320Zm160 0q17 0 28.5-11.5T600-360v-240q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v240q0 17 11.5 28.5T560-320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z',
+  PHOTO_CAMERA_FILLED: 'M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l50-54q11-12 26.5-19t32.5-7h170q17 0 32.5 7t26.5 19l50 54h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Z',
+  PLAY_CIRCLE_FILLED: 'm426-330 195-125q14-9 14-25t-14-25L426-630q-15-10-30.5-1.5T380-605v250q0 18 15.5 26.5T426-330Zm54 250q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z',
+  RECORD_VOICE_OVER_FILLED: 'M920-600q0 69-24.5 131.5T829-355q-12 14-30 15t-32-13q-13-13-12-31t12-33q30-38 46.5-85t16.5-98q0-51-16.5-97T767-781q-12-15-12.5-33t12.5-32q13-14 31.5-13.5T829-845q42 51 66.5 113.5T920-600Zm-182 0q0 32-10 61.5T700-484q-11 15-29.5 15.5T638-482q-13-13-13.5-31.5T633-549q6-11 9.5-24t3.5-27q0-14-3.5-27t-9.5-25q-9-17-8.5-35t13.5-31q14-14 32.5-13.5T700-716q18 25 28 54.5t10 61.5ZM360-440q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-200v-32q0-33 17-62t47-44q51-26 115-44t141-18q77 0 141 18t115 44q30 15 47 44t17 62v32q0 33-23.5 56.5T600-120H120q-33 0-56.5-23.5T40-200Z',
+  TUNE_FILLED: 'M480-120q-17 0-28.5-11.5T440-160v-160q0-17 11.5-28.5T480-360q17 0 28.5 11.5T520-320v40h280q17 0 28.5 11.5T840-240q0 17-11.5 28.5T800-200H520v40q0 17-11.5 28.5T480-120Zm-320-80q-17 0-28.5-11.5T120-240q0-17 11.5-28.5T160-280h160q17 0 28.5 11.5T360-240q0 17-11.5 28.5T320-200H160Zm160-160q-17 0-28.5-11.5T280-400v-40H160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h120v-40q0-17 11.5-28.5T320-600q17 0 28.5 11.5T360-560v160q0 17-11.5 28.5T320-360Zm160-80q-17 0-28.5-11.5T440-480q0-17 11.5-28.5T480-520h320q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H480Zm160-160q-17 0-28.5-11.5T600-640v-160q0-17 11.5-28.5T640-840q17 0 28.5 11.5T680-800v40h120q17 0 28.5 11.5T840-720q0 17-11.5 28.5T800-680H680v40q0 17-11.5 28.5T640-600Zm-480-80q-17 0-28.5-11.5T120-720q0-17 11.5-28.5T160-760h320q17 0 28.5 11.5T520-720q0 17-11.5 28.5T480-680H160Z',
+  RECTANGLE_DEFAULT: 'M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z'
+}
+
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
@@ -229,6 +252,7 @@ export {
   SyncEvents,
   DefaultFolderKind,
   KeyboardShortcuts,
+  PlayerIcons,
   MAIN_PROFILE_ID,
   MOBILE_WIDTH_THRESHOLD,
   PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,

src/datastores/handlers/base.js

@@ -59,13 +59,18 @@ class Settings {
   // Unique Electron main process handlers
   static _findAppReadyRelatedSettings() {
     return db.settings.findAsync({
-      $or: [
-        { _id: 'disableSmoothScrolling' },
-        { _id: 'useProxy' },
-        { _id: 'proxyProtocol' },
-        { _id: 'proxyHostname' },
-        { _id: 'proxyPort' }
-      ]
+      _id: {
+        $in: [
+          'disableSmoothScrolling',
+          'useProxy',
+          'proxyProtocol',
+          'proxyHostname',
+          'proxyPort',
+          'backendFallback',
+          'backendPreference',
+          'hideToTrayOnMinimize'
+        ]
+      }
     })
   }
 
@@ -77,8 +82,6 @@ class Settings {
     return {
       hideTrendingVideos: db.settings.findOneAsync({ _id: 'hideTrendingVideos' }),
       hidePopularVideos: db.settings.findOneAsync({ _id: 'hidePopularVideos' }),
-      backendFallback: db.settings.findOneAsync({ _id: 'backendFallback' }),
-      backendPreference: db.settings.findOneAsync({ _id: 'backendPreference' }),
       hidePlaylists: db.settings.findOneAsync({ _id: 'hidePlaylists' }),
     }
   }
@@ -182,18 +185,24 @@ class Playlists {
     return db.playlists.updateAsync({ _id: playlist._id }, { $set: playlist }, { upsert: true })
   }
 
-  static upsertVideoByPlaylistId(_id, videoData) {
+  static upsertVideoByPlaylistId(_id, lastUpdatedAt, videoData) {
     return db.playlists.updateAsync(
       { _id },
-      { $push: { videos: videoData } },
+      {
+        $push: { videos: videoData },
+        $set: { lastUpdatedAt }
+      },
       { upsert: true }
     )
   }
 
-  static upsertVideosByPlaylistId(_id, videos) {
+  static upsertVideosByPlaylistId(_id, lastUpdatedAt, videos) {
     return db.playlists.updateAsync(
       { _id },
-      { $push: { videos: { $each: videos } } },
+      {
+        $push: { videos: { $each: videos } },
+        $set: { lastUpdatedAt }
+      },
       { upsert: true }
     )
   }
@@ -202,17 +211,23 @@ class Playlists {
     return db.playlists.removeAsync({ _id, protected: { $ne: true } })
   }
 
-  static deleteVideoIdByPlaylistId(_id, videoId, playlistItemId) {
+  static deleteVideoIdByPlaylistId(_id, lastUpdatedAt, videoId, playlistItemId) {
     if (playlistItemId != null) {
       return db.playlists.updateAsync(
         { _id },
-        { $pull: { videos: { playlistItemId } } },
+        {
+          $pull: { videos: { playlistItemId } },
+          $set: { lastUpdatedAt }
+        },
         { upsert: true }
       )
     } else if (videoId != null) {
       return db.playlists.updateAsync(
         { _id },
-        { $pull: { videos: { videoId } } },
+        {
+          $pull: { videos: { videoId } },
+          $set: { lastUpdatedAt }
+        },
         { upsert: true }
       )
     } else {
@@ -220,10 +235,13 @@ class Playlists {
     }
   }
 
-  static deleteVideoIdsByPlaylistId(_id, playlistItemIds) {
+  static deleteVideoIdsByPlaylistId(_id, lastUpdatedAt, playlistItemIds) {
     return db.playlists.updateAsync(
       { _id },
-      { $pull: { videos: { playlistItemId: { $in: playlistItemIds } } } },
+      {
+        $pull: { videos: { playlistItemId: { $in: playlistItemIds } } },
+        $set: { lastUpdatedAt }
+      },
       { upsert: true }
     )
   }
@@ -254,6 +272,12 @@ class SearchHistory {
     return db.searchHistory.updateAsync({ _id: searchHistoryEntry._id }, searchHistoryEntry, { upsert: true })
   }
 
+  static async overwrite(records) {
+    await db.searchHistory.removeAsync({}, { multi: true })
+
+    await db.searchHistory.insertAsync(records)
+  }
+
   static delete(_id) {
     return db.searchHistory.removeAsync({ _id: _id })
   }
@@ -292,37 +316,40 @@ class SubscriptionCache {
     )
   }
 
-  static updateShortsWithChannelPageShortsByChannelId(channelId, entries) {
-    return db.subscriptionCache.findOneAsync({ _id: channelId }, { shorts: 1 }).then((doc) => {
-      if (doc == null) { return }
+  static async updateShortsWithChannelPageShortsByChannelId(channelId, entries) {
+    const doc = await db.subscriptionCache.findOneAsync({ _id: channelId }, { shorts: 1 })
 
-      const shorts = doc.shorts
-      const cacheShorts = Array.isArray(shorts) ? shorts : []
+    if (!Array.isArray(doc?.shorts)) {
+      return
+    }
 
-      cacheShorts.forEach(cachedVideo => {
-        const channelVideo = entries.find(short => cachedVideo.videoId === short.videoId)
-        if (!channelVideo) { return }
+    let hasUpdates = false
 
-        // authorId probably never changes, so we don't need to update that
-        cachedVideo.title = channelVideo.title
-        cachedVideo.author = channelVideo.author
+    doc.shorts.forEach(cachedVideo => {
+      const channelVideo = entries.find(short => cachedVideo.videoId === short.videoId)
+      if (!channelVideo) { return }
 
-        // as the channel shorts page only has compact view counts for numbers above 1000 e.g. 12k
-        // and the RSS feeds include an exact value, we only want to overwrite it when the number is larger than the cached value
-        // 12345 vs 12000 => 12345
-        // 12345 vs 15000 => 15000
+      hasUpdates = true
 
-        if (channelVideo.viewCount > cachedVideo.viewCount) {
-          cachedVideo.viewCount = channelVideo.viewCount
-        }
-      })
+      // authorId probably never changes, so we don't need to update that
+      cachedVideo.title = channelVideo.title
+      cachedVideo.author = channelVideo.author
 
-      return db.subscriptionCache.updateAsync(
-        { _id: channelId },
-        { $set: { shorts: cacheShorts } },
-        { upsert: true }
-      )
+      // as the channel shorts page only has compact view counts for numbers above 1000 e.g. 12k
+      // and the RSS feeds include an exact value, we only want to overwrite it when the number is larger than the cached value
+      // 12345 vs 12000 => 12345
+      // 12345 vs 15000 => 15000
+      if (channelVideo.viewCount > cachedVideo.viewCount) {
+        cachedVideo.viewCount = channelVideo.viewCount
+      }
     })
+
+    if (hasUpdates) {
+      await db.subscriptionCache.updateAsync(
+        { _id: channelId },
+        { $set: { shorts: doc.shorts } }
+      )
+    }
   }
 
   static updateCommunityPostsByChannelId(channelId, entries, timestamp) {

src/datastores/handlers/electron.js

@@ -1,323 +1,203 @@
-import { ipcRenderer } from 'electron'
-import { IpcChannels, DBActions } from '../../constants'
+import { DBActions } from '../../constants'
 
 class Settings {
   static find() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SETTINGS,
-      { action: DBActions.GENERAL.FIND }
-    )
+    return window.ftElectron.dbSettings(DBActions.GENERAL.FIND)
   }
 
   static upsert(_id, value) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SETTINGS,
-      { action: DBActions.GENERAL.UPSERT, data: { _id, value } }
-    )
+    return window.ftElectron.dbSettings(DBActions.GENERAL.UPSERT, { _id, value })
   }
 }
 
 class History {
   static find() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_HISTORY,
-      { action: DBActions.GENERAL.FIND }
-    )
+    return window.ftElectron.dbHistory(DBActions.GENERAL.FIND)
   }
 
   static upsert(record) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_HISTORY,
-      { action: DBActions.GENERAL.UPSERT, data: record }
-    )
+    return window.ftElectron.dbHistory(DBActions.GENERAL.UPSERT, record)
   }
 
   static overwrite(records) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_HISTORY,
-      { action: DBActions.HISTORY.OVERWRITE, data: records }
-    )
+    return window.ftElectron.dbHistory(DBActions.GENERAL.OVERWRITE, records)
   }
 
   static updateWatchProgress(videoId, watchProgress) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_HISTORY,
-      {
-        action: DBActions.HISTORY.UPDATE_WATCH_PROGRESS,
-        data: { videoId, watchProgress }
-      }
+    return window.ftElectron.dbHistory(
+      DBActions.HISTORY.UPDATE_WATCH_PROGRESS,
+      { videoId, watchProgress }
     )
   }
 
   static updateLastViewedPlaylist(videoId, lastViewedPlaylistId, lastViewedPlaylistType, lastViewedPlaylistItemId) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_HISTORY,
-      {
-        action: DBActions.HISTORY.UPDATE_PLAYLIST,
-        data: { videoId, lastViewedPlaylistId, lastViewedPlaylistType, lastViewedPlaylistItemId }
-      }
+    return window.ftElectron.dbHistory(
+      DBActions.HISTORY.UPDATE_PLAYLIST,
+      { videoId, lastViewedPlaylistId, lastViewedPlaylistType, lastViewedPlaylistItemId }
     )
   }
 
   static delete(videoId) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_HISTORY,
-      { action: DBActions.GENERAL.DELETE, data: videoId }
-    )
+    return window.ftElectron.dbHistory(DBActions.GENERAL.DELETE, videoId)
   }
 
   static deleteAll() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_HISTORY,
-      { action: DBActions.GENERAL.DELETE_ALL }
-    )
+    return window.ftElectron.dbHistory(DBActions.GENERAL.DELETE_ALL)
   }
 }
 
 class Profiles {
   static create(profile) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PROFILES,
-      { action: DBActions.GENERAL.CREATE, data: profile }
-    )
+    return window.ftElectron.dbProfiles(DBActions.GENERAL.CREATE, profile)
   }
 
   static find() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PROFILES,
-      { action: DBActions.GENERAL.FIND }
-    )
+    return window.ftElectron.dbProfiles(DBActions.GENERAL.FIND)
   }
 
   static upsert(profile) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PROFILES,
-      { action: DBActions.GENERAL.UPSERT, data: profile }
-    )
+    return window.ftElectron.dbProfiles(DBActions.GENERAL.UPSERT, profile)
   }
 
   static addChannelToProfiles(channel, profileIds) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PROFILES,
-      {
-        action: DBActions.PROFILES.ADD_CHANNEL,
-        data: { channel, profileIds }
-      }
-    )
+    return window.ftElectron.dbProfiles(DBActions.PROFILES.ADD_CHANNEL, { channel, profileIds })
   }
 
   static removeChannelFromProfiles(channelId, profileIds) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PROFILES,
-      {
-        action: DBActions.PROFILES.REMOVE_CHANNEL,
-        data: { channelId, profileIds }
-      }
-    )
+    return window.ftElectron.dbProfiles(DBActions.PROFILES.REMOVE_CHANNEL, { channelId, profileIds })
   }
 
   static delete(id) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PROFILES,
-      { action: DBActions.GENERAL.DELETE, data: id }
-    )
+    return window.ftElectron.dbProfiles(DBActions.GENERAL.DELETE, id)
   }
 }
 
 class Playlists {
   static create(playlists) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      { action: DBActions.GENERAL.CREATE, data: playlists }
-    )
+    return window.ftElectron.dbPlaylists(DBActions.GENERAL.CREATE, playlists)
   }
 
   static find() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      { action: DBActions.GENERAL.FIND }
-    )
+    return window.ftElectron.dbPlaylists(DBActions.GENERAL.FIND)
   }
 
   static upsert(playlist) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      { action: DBActions.GENERAL.UPSERT, data: playlist }
+    return window.ftElectron.dbPlaylists(DBActions.GENERAL.UPSERT, playlist)
+  }
+
+  static upsertVideoByPlaylistId(_id, lastUpdatedAt, videoData) {
+    return window.ftElectron.dbPlaylists(
+      DBActions.PLAYLISTS.UPSERT_VIDEO,
+      { _id, lastUpdatedAt, videoData }
     )
   }
 
-  static upsertVideoByPlaylistId(_id, videoData) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      {
-        action: DBActions.PLAYLISTS.UPSERT_VIDEO,
-        data: { _id, videoData }
-      }
-    )
-  }
-
-  static upsertVideosByPlaylistId(_id, videos) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      {
-        action: DBActions.PLAYLISTS.UPSERT_VIDEOS,
-        data: { _id, videos }
-      }
+  static upsertVideosByPlaylistId(_id, lastUpdatedAt, videos) {
+    return window.ftElectron.dbPlaylists(
+      DBActions.PLAYLISTS.UPSERT_VIDEOS,
+      { _id, lastUpdatedAt, videos }
     )
   }
 
   static delete(_id) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      { action: DBActions.GENERAL.DELETE, data: _id }
+    return window.ftElectron.dbPlaylists(DBActions.GENERAL.DELETE, _id)
+  }
+
+  static deleteVideoIdByPlaylistId(_id, lastUpdatedAt, videoId, playlistItemId) {
+    return window.ftElectron.dbPlaylists(
+      DBActions.PLAYLISTS.DELETE_VIDEO_ID,
+      { _id, lastUpdatedAt, videoId, playlistItemId }
     )
   }
 
-  static deleteVideoIdByPlaylistId(_id, videoId, playlistItemId) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      {
-        action: DBActions.PLAYLISTS.DELETE_VIDEO_ID,
-        data: { _id, videoId, playlistItemId }
-      }
-    )
-  }
-
-  static deleteVideoIdsByPlaylistId(_id, playlistItemIds) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      {
-        action: DBActions.PLAYLISTS.DELETE_VIDEO_IDS,
-        data: { _id, playlistItemIds }
-      }
+  static deleteVideoIdsByPlaylistId(_id, lastUpdatedAt, playlistItemIds) {
+    return window.ftElectron.dbPlaylists(
+      DBActions.PLAYLISTS.DELETE_VIDEO_IDS,
+      { _id, lastUpdatedAt, playlistItemIds }
     )
   }
 
   static deleteAllVideosByPlaylistId(_id) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      {
-        action: DBActions.PLAYLISTS.DELETE_ALL_VIDEOS,
-        data: _id
-      }
-    )
+    return window.ftElectron.dbPlaylists(DBActions.PLAYLISTS.DELETE_ALL_VIDEOS, _id)
   }
 
   static deleteMultiple(ids) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      { action: DBActions.GENERAL.DELETE_MULTIPLE, data: ids }
-    )
+    return window.ftElectron.dbPlaylists(DBActions.GENERAL.DELETE_MULTIPLE, ids)
   }
 
   static deleteAll() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_PLAYLISTS,
-      { action: DBActions.GENERAL.DELETE_ALL }
-    )
+    return window.ftElectron.dbPlaylists(DBActions.GENERAL.DELETE_ALL)
   }
 }
 
 class SearchHistory {
   static find() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SEARCH_HISTORY,
-      { action: DBActions.GENERAL.FIND }
-    )
+    return window.ftElectron.dbSearchHistory(DBActions.GENERAL.FIND)
   }
 
   static upsert(searchHistoryEntry) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SEARCH_HISTORY,
-      { action: DBActions.GENERAL.UPSERT, data: searchHistoryEntry }
-    )
+    return window.ftElectron.dbSearchHistory(DBActions.GENERAL.UPSERT, searchHistoryEntry)
+  }
+
+  static overwrite(records) {
+    return window.ftElectron.dbSearchHistory(DBActions.GENERAL.OVERWRITE, records)
   }
 
   static delete(_id) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SEARCH_HISTORY,
-      { action: DBActions.GENERAL.DELETE, data: _id }
-    )
+    return window.ftElectron.dbSearchHistory(DBActions.GENERAL.DELETE, _id)
   }
 
   static deleteAll() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SEARCH_HISTORY,
-      { action: DBActions.GENERAL.DELETE_ALL }
-    )
+    return window.ftElectron.dbSearchHistory(DBActions.GENERAL.DELETE_ALL)
   }
 }
 
 class SubscriptionCache {
   static find() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      { action: DBActions.GENERAL.FIND }
-    )
+    return window.ftElectron.dbSubscriptionCache(DBActions.GENERAL.FIND)
   }
 
   static updateVideosByChannelId(channelId, entries, timestamp) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      {
-        action: DBActions.SUBSCRIPTION_CACHE.UPDATE_VIDEOS_BY_CHANNEL,
-        data: { channelId, entries, timestamp },
-      }
+    return window.ftElectron.dbSubscriptionCache(
+      DBActions.SUBSCRIPTION_CACHE.UPDATE_VIDEOS_BY_CHANNEL,
+      { channelId, entries, timestamp }
     )
   }
 
   static updateLiveStreamsByChannelId(channelId, entries, timestamp) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      {
-        action: DBActions.SUBSCRIPTION_CACHE.UPDATE_LIVE_STREAMS_BY_CHANNEL,
-        data: { channelId, entries, timestamp },
-      }
+    return window.ftElectron.dbSubscriptionCache(
+      DBActions.SUBSCRIPTION_CACHE.UPDATE_LIVE_STREAMS_BY_CHANNEL,
+      { channelId, entries, timestamp }
     )
   }
 
   static updateShortsByChannelId(channelId, entries, timestamp) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      {
-        action: DBActions.SUBSCRIPTION_CACHE.UPDATE_SHORTS_BY_CHANNEL,
-        data: { channelId, entries, timestamp },
-      }
+    return window.ftElectron.dbSubscriptionCache(
+      DBActions.SUBSCRIPTION_CACHE.UPDATE_SHORTS_BY_CHANNEL,
+      { channelId, entries, timestamp }
     )
   }
 
   static updateShortsWithChannelPageShortsByChannelId(channelId, entries) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      {
-        action: DBActions.SUBSCRIPTION_CACHE.UPDATE_SHORTS_WITH_CHANNEL_PAGE_SHORTS_BY_CHANNEL,
-        data: { channelId, entries },
-      }
+    return window.ftElectron.dbSubscriptionCache(
+      DBActions.SUBSCRIPTION_CACHE.UPDATE_SHORTS_WITH_CHANNEL_PAGE_SHORTS_BY_CHANNEL,
+      { channelId, entries }
     )
   }
 
   static updateCommunityPostsByChannelId(channelId, entries, timestamp) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      {
-        action: DBActions.SUBSCRIPTION_CACHE.UPDATE_COMMUNITY_POSTS_BY_CHANNEL,
-        data: { channelId, entries, timestamp },
-      }
+    return window.ftElectron.dbSubscriptionCache(
+      DBActions.SUBSCRIPTION_CACHE.UPDATE_COMMUNITY_POSTS_BY_CHANNEL,
+      { channelId, entries, timestamp }
     )
   }
 
   static deleteMultipleChannels(channelIds) {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      { action: DBActions.GENERAL.DELETE_MULTIPLE, data: channelIds }
-    )
+    return window.ftElectron.dbSubscriptionCache(DBActions.GENERAL.DELETE_MULTIPLE, channelIds)
   }
 
   static deleteAll() {
-    return ipcRenderer.invoke(
-      IpcChannels.DB_SUBSCRIPTION_CACHE,
-      { action: DBActions.GENERAL.DELETE_ALL }
-    )
+    return window.ftElectron.dbSubscriptionCache(DBActions.GENERAL.DELETE_ALL)
   }
 }
 

src/datastores/index.js

@@ -22,9 +22,21 @@ if (process.env.IS_ELECTRON_MAIN) {
   dbPath = (dbName) => `${dbName}.db`
 }
 
-export const settings = new Datastore({ filename: dbPath('settings'), autoload: !process.env.IS_ELECTRON_MAIN })
-export const profiles = new Datastore({ filename: dbPath('profiles'), autoload: !process.env.IS_ELECTRON_MAIN })
-export const playlists = new Datastore({ filename: dbPath('playlists'), autoload: !process.env.IS_ELECTRON_MAIN })
-export const history = new Datastore({ filename: dbPath('history'), autoload: !process.env.IS_ELECTRON_MAIN })
-export const searchHistory = new Datastore({ filename: dbPath('search-history'), autoload: !process.env.IS_ELECTRON_MAIN })
-export const subscriptionCache = new Datastore({ filename: dbPath('subscription-cache'), autoload: !process.env.IS_ELECTRON_MAIN })
+/**
+ * @param {string} name
+ */
+function createDatastore(name) {
+  return new Datastore({
+    filename: dbPath(name),
+    autoload: !process.env.IS_ELECTRON_MAIN,
+    // Automatically clean up corrupted data, instead of crashing
+    corruptAlertThreshold: 1
+  })
+}
+
+export const settings = createDatastore('settings')
+export const profiles = createDatastore('profiles')
+export const playlists = createDatastore('playlists')
+export const history = createDatastore('history')
+export const searchHistory = createDatastore('search-history')
+export const subscriptionCache = createDatastore('subscription-cache')

src/index.ejs

@@ -13,7 +13,18 @@
 
   <body>
     <div id="app"></div>
-    <% if (!process.env.IS_ELECTRON) { %>
+    <% if (process.env.IS_ELECTRON) { %>
+    <iframe
+      id="sigFrame"
+      src="<%= sigFrameSrc %>"
+      csp="default-src 'none'; script-src '<%= sigFrameCspHash %>' 'unsafe-eval'"
+      sandbox="allow-scripts"
+      height="1"
+      width="1"
+      style="display: none; pointer-events: none"
+      tabindex="-1"
+    ></iframe>
+    <% } else { %>
     <script>
     // This is the service worker with the Advanced caching
 

src/main/poTokenGenerator.js

@@ -3,19 +3,18 @@ import { readFile } from 'fs/promises'
 import { join } from 'path'
 
 /**
- * Generates a poToken (proof of origin token) using `bgutils-js`.
+ * Generates a content-bound poToken (proof of origin token) using `bgutils-js`.
  * The script to generate it is `src/botGuardScript.js`
  *
  * This is intentionally split out into it's own thing, with it's own temporary in-memory session,
  * as the BotGuard stuff accesses the global `document` and `window` objects and also requires making some requests.
  * So we definitely don't want it running in the same places as the rest of the FreeTube code with the user data.
  * @param {string} videoId
- * @param {string} visitorData
  * @param {string} context
  * @param {string|undefined} proxyUrl
- * @returns {Promise<{ contentPoToken: string, sessionPoToken: string }>}
+ * @returns {Promise<string>}
  */
-export async function generatePoToken(videoId, visitorData, context, proxyUrl) {
+export async function generatePoToken(videoId, context, proxyUrl) {
   const sessionUuid = crypto.randomUUID()
 
   const theSession = session.fromPartition(`potoken-${sessionUuid}`, { cache: false })
@@ -53,15 +52,32 @@ export async function generatePoToken(videoId, visitorData, context, proxyUrl) {
     callback({ requestHeaders })
   })
 
+  theSession.webRequest.onHeadersReceived({ urls: ['https://*/*'] }, ({ responseHeaders }, callback) => {
+    if (responseHeaders) {
+      callback({
+        responseHeaders: {
+          ...responseHeaders,
+          'Access-Control-Allow-Origin': ['*'],
+          'Access-Control-Allow-Methods': ['GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH']
+        }
+      })
+    }
+  })
+
+  theSession.webRequest.onBeforeRequest({ urls: ['<all_urls>'], types: ['cspReport', 'ping'] }, (details, callback) => {
+    callback({ cancel: true })
+  })
+
   const webContentsView = new WebContentsView({
     webPreferences: {
       backgroundThrottling: false,
       safeDialogs: true,
       sandbox: true,
+      contextIsolation: true,
       v8CacheOptions: 'none',
       session: theSession,
       offscreen: true,
-      webSecurity: false
+      disableBlinkFeatures: 'ElectronCSSCornerSmoothing'
     }
   })
 
@@ -96,7 +112,7 @@ export async function generatePoToken(videoId, visitorData, context, proxyUrl) {
     }
   })
 
-  const script = await getScript(videoId, visitorData, context)
+  const script = await getScript(videoId, context)
 
   const response = await webContentsView.webContents.executeJavaScript(script)
 
@@ -110,15 +126,13 @@ let cachedScript
 
 /**
  * @param {string} videoId
- * @param {string} visitorData
  * @param {string} context
  */
-async function getScript(videoId, visitorData, context) {
+async function getScript(videoId, context) {
   if (!cachedScript) {
     const pathToScript = process.env.NODE_ENV === 'development'
       ? join(__dirname, '../../dist/botGuardScript.js')
-      /* eslint-disable-next-line n/no-path-concat */
-      : `${__dirname}/botGuardScript.js`
+      : join(__dirname, 'botGuardScript.js')
 
     const content = await readFile(pathToScript, 'utf-8')
 
@@ -129,5 +143,5 @@ async function getScript(videoId, visitorData, context) {
     cachedScript = content.replace(match[0], `;${functionName}(FT_PARAMS)`)
   }
 
-  return cachedScript.replace('FT_PARAMS', `"${videoId}","${visitorData}",${context}`)
+  return cachedScript.replace('FT_PARAMS', `"${videoId}",${context}`)
 }

src/preload/interface.js

@@ -0,0 +1,301 @@
+import { ipcRenderer, webFrame } from 'electron/renderer'
+import { IpcChannels } from '../constants.js'
+
+/**
+ * Linux fix for dynamically updating theme preference, this works on
+ * all systems running the electron app.
+ */
+ipcRenderer.on(IpcChannels.NATIVE_THEME_UPDATE, (_, shouldUseDarkColors) => {
+  document.body.dataset.systemTheme = shouldUseDarkColors ? 'dark' : 'light'
+})
+
+let currentUpdateSearchInputTextListener
+
+export default {
+  /**
+   * @returns {Promise<string>}
+   */
+  getSystemLocale: () => {
+    return ipcRenderer.invoke(IpcChannels.GET_SYSTEM_LOCALE)
+  },
+
+  /**
+   * @param {string} path
+   * @param {Record<string, string> | null | undefined} query
+   * @param {string | null | undefined} searchQueryText
+   */
+  openInNewWindow: (path, query, searchQueryText) => {
+    ipcRenderer.send(IpcChannels.CREATE_NEW_WINDOW, path, query, searchQueryText)
+  },
+
+  /**
+   * @param {string} url
+   */
+  enableProxy: (url) => {
+    ipcRenderer.send(IpcChannels.ENABLE_PROXY, url)
+  },
+
+  disableProxy: () => {
+    ipcRenderer.send(IpcChannels.DISABLE_PROXY)
+  },
+
+  /**
+   * @param {string} authorization
+   * @param {string} url
+   */
+  setInvidiousAuthorization: (authorization, url) => {
+    ipcRenderer.send(IpcChannels.SET_INVIDIOUS_AUTHORIZATION, authorization, url)
+  },
+
+  clearInvidiousAuthorization: () => {
+    ipcRenderer.send(IpcChannels.SET_INVIDIOUS_AUTHORIZATION, null)
+  },
+
+  startPowerSaveBlocker: () => {
+    ipcRenderer.send(IpcChannels.START_POWER_SAVE_BLOCKER)
+  },
+
+  stopPowerSaveBlocker: () => {
+    ipcRenderer.send(IpcChannels.STOP_POWER_SAVE_BLOCKER)
+  },
+
+  /**
+   * @returns {Promise<boolean>}
+   */
+  getReplaceHttpCache: () => {
+    return ipcRenderer.invoke(IpcChannels.GET_REPLACE_HTTP_CACHE)
+  },
+
+  toggleReplaceHttpCache: () => {
+    ipcRenderer.send(IpcChannels.TOGGLE_REPLACE_HTTP_CACHE)
+  },
+
+  // Allows programmatic toggling of picture-in-picture mode without accompanying user interaction.
+  // See: https://developer.mozilla.org/en-US/docs/Web/Security/User_activation#transient_activation
+  requestPiP: () => {
+    webFrame.executeJavaScript('document.querySelector("video.player")?.ui.getControls().togglePiP()', true).catch()
+  },
+
+  // Allows programmatic toggling of fullscreen without accompanying user interaction.
+  // See: https://developer.mozilla.org/en-US/docs/Web/Security/User_activation#transient_activation
+  requestFullscreen: () => {
+    webFrame.executeJavaScript('document.querySelector("video.player")?.ui.getControls().toggleFullScreen()', true).catch()
+  },
+
+  /**
+   * @param {string} key
+   * @returns {Promise<ArrayBuffer>}
+   */
+  playerCacheGet: (key) => {
+    return ipcRenderer.invoke(IpcChannels.PLAYER_CACHE_GET, key)
+  },
+
+  /**
+   * @param {string} key
+   * @param {ArrayBuffer} value
+   */
+  playerCacheSet: async (key, value) => {
+    await ipcRenderer.invoke(IpcChannels.PLAYER_CACHE_SET, key, value)
+  },
+
+  /**
+   * @param {string} videoId
+   * @param {string} context
+   * @returns {Promise<string>}
+   */
+  generatePoToken: (videoId, context) => {
+    return ipcRenderer.invoke(IpcChannels.GENERATE_PO_TOKEN, videoId, context)
+  },
+
+  /**
+   * @param {0 | 1} kind
+   */
+  chooseDefaultFolder: (kind) => {
+    ipcRenderer.send(IpcChannels.CHOOSE_DEFAULT_FOLDER, kind)
+  },
+
+  /**
+   * @param {0 | 1} kind
+   * @param {string} filename
+   * @param {ArrayBuffer} contents
+   */
+  writeToDefaultFolder: async (kind, filename, contents) => {
+    await ipcRenderer.invoke(IpcChannels.WRITE_TO_DEFAULT_FOLDER, kind, filename, contents)
+  },
+
+  /**
+   * @returns {Promise<string>}
+   */
+  getScreenshotFallbackFolder: () => {
+    return ipcRenderer.invoke(IpcChannels.GET_SCREENSHOT_FALLBACK_FOLDER)
+  },
+
+  relaunch: () => {
+    ipcRenderer.send(IpcChannels.RELAUNCH_REQUEST)
+  },
+
+  /**
+   * @param {string} executable
+   * @param {string} args
+   */
+  openInExternalPlayer: (executable, args) => {
+    ipcRenderer.send(IpcChannels.OPEN_IN_EXTERNAL_PLAYER, executable, args)
+  },
+
+  /**
+   * @param {number} factor
+   */
+  setZoomFactor: (factor) => {
+    if (typeof factor === 'number' && factor > 0) {
+      webFrame.setZoomFactor(factor)
+    }
+  },
+
+  /**
+   * @returns {Promise<{ label: string, value: number, active: boolean }[]>}
+   */
+  getNavigationHistory: () => {
+    return ipcRenderer.invoke(IpcChannels.GET_NAVIGATION_HISTORY)
+  },
+
+  /**
+   * @param {number} action
+   * @param {any} [data]
+   */
+  dbSettings: (action, data) => {
+    return ipcRenderer.invoke(IpcChannels.DB_SETTINGS, data ? { action, data } : { action })
+  },
+
+  /**
+   * @param {number} action
+   * @param {any} [data]
+   */
+  dbHistory: (action, data) => {
+    return ipcRenderer.invoke(IpcChannels.DB_HISTORY, data ? { action, data } : { action })
+  },
+
+  /**
+   * @param {number} action
+   * @param {any} [data]
+   */
+  dbProfiles: (action, data) => {
+    return ipcRenderer.invoke(IpcChannels.DB_PROFILES, data ? { action, data } : { action })
+  },
+
+  /**
+   * @param {number} action
+   * @param {any} [data]
+   */
+  dbPlaylists: (action, data) => {
+    return ipcRenderer.invoke(IpcChannels.DB_PLAYLISTS, data ? { action, data } : { action })
+  },
+
+  /**
+   * @param {number} action
+   * @param {any} [data]
+   */
+  dbSearchHistory: (action, data) => {
+    return ipcRenderer.invoke(IpcChannels.DB_SEARCH_HISTORY, data ? { action, data } : { action })
+  },
+
+  /**
+   * @param {number} action
+   * @param {any} [data]
+   */
+  dbSubscriptionCache: (action, data) => {
+    return ipcRenderer.invoke(IpcChannels.DB_SUBSCRIPTION_CACHE, data ? { action, data } : { action })
+  },
+
+  /**
+   * @param {(route: string) => void} handler
+   */
+  handleChangeView: (handler) => {
+    ipcRenderer.on(IpcChannels.CHANGE_VIEW, (_, route) => {
+      handler(route)
+    })
+  },
+
+  /**
+   * @param {(url: string) => void} handler
+   */
+  handleOpenUrl: (handler) => {
+    ipcRenderer.on(IpcChannels.OPEN_URL, (_, url) => {
+      handler(url)
+    })
+    ipcRenderer.send(IpcChannels.APP_READY)
+  },
+
+  /**
+   * Pass `null` to clear the handler
+   * @param {(text: string) => void | null} handler
+   */
+  handleUpdateSearchInputText: (handler) => {
+    if (currentUpdateSearchInputTextListener) {
+      ipcRenderer.off(IpcChannels.UPDATE_SEARCH_INPUT_TEXT, currentUpdateSearchInputTextListener)
+      currentUpdateSearchInputTextListener = undefined
+    }
+
+    if (handler) {
+      currentUpdateSearchInputTextListener = (_, text) => {
+        handler(text)
+      }
+
+      ipcRenderer.on(IpcChannels.UPDATE_SEARCH_INPUT_TEXT, currentUpdateSearchInputTextListener)
+      ipcRenderer.send(IpcChannels.SEARCH_INPUT_HANDLING_READY)
+    }
+  },
+
+  /**
+   * @param {(event: number, data: any) => void} handler
+   */
+  handleSyncSettings: (handler) => {
+    ipcRenderer.on(IpcChannels.SYNC_SETTINGS, (_, { event, data }) => {
+      handler(event, data)
+    })
+  },
+
+  /**
+   * @param {(event: number, data: any) => void} handler
+   */
+  handleSyncHistory: (handler) => {
+    ipcRenderer.on(IpcChannels.SYNC_HISTORY, (_, { event, data }) => {
+      handler(event, data)
+    })
+  },
+
+  /**
+   * @param {(event: number, data: any) => void} handler
+   */
+  handleSyncSearchHistory: (handler) => {
+    ipcRenderer.on(IpcChannels.SYNC_SEARCH_HISTORY, (_, { event, data }) => {
+      handler(event, data)
+    })
+  },
+
+  /**
+   * @param {(event: number, data: any) => void} handler
+   */
+  handleSyncProfiles: (handler) => {
+    ipcRenderer.on(IpcChannels.SYNC_PROFILES, (_, { event, data }) => {
+      handler(event, data)
+    })
+  },
+
+  /**
+   * @param {(event: number, data: any) => void} handler
+   */
+  handleSyncPlaylists: (handler) => {
+    ipcRenderer.on(IpcChannels.SYNC_PLAYLISTS, (_, { event, data }) => {
+      handler(event, data)
+    })
+  },
+
+  /**
+   * @param {(event: number, data: any) => void} handler
+   */
+  handleSyncSubscriptionCache: (handler) => {
+    ipcRenderer.on(IpcChannels.SYNC_SUBSCRIPTION_CACHE, (_, { event, data }) => {
+      handler(event, data)
+    })
+  }
+}

src/preload/main.js

@@ -0,0 +1,4 @@
+import { contextBridge } from 'electron/renderer'
+import api from './interface.js'
+
+contextBridge.exposeInMainWorld('ftElectron', api)

src/preload/preload-interface.d.ts

@@ -0,0 +1,7 @@
+import api from './interface.js'
+
+declare global {
+  interface Window {
+    ftElectron: typeof api
+  }
+}

src/renderer/App.css

@@ -56,8 +56,8 @@
   transition: opacity 0.15s;
 }
 
-.fade-enter,
-.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 

src/renderer/App.js

@@ -1,25 +1,22 @@
 import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue'
-import TopNav from './components/top-nav/top-nav.vue'
+import TopNav from './components/TopNav/TopNav.vue'
 import SideNav from './components/SideNav/SideNav.vue'
-import FtNotificationBanner from './components/ft-notification-banner/ft-notification-banner.vue'
+import FtNotificationBanner from './components/FtNotificationBanner/FtNotificationBanner.vue'
 import FtPrompt from './components/FtPrompt/FtPrompt.vue'
-import FtButton from './components/ft-button/ft-button.vue'
-import FtToast from './components/ft-toast/ft-toast.vue'
+import FtButton from './components/FtButton/FtButton.vue'
+import FtToast from './components/FtToast/FtToast.vue'
 import FtProgressBar from './components/FtProgressBar/FtProgressBar.vue'
-import FtPlaylistAddVideoPrompt from './components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue'
-import FtCreatePlaylistPrompt from './components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue'
+import FtPlaylistAddVideoPrompt from './components/FtPlaylistAddVideoPrompt/FtPlaylistAddVideoPrompt.vue'
+import FtCreatePlaylistPrompt from './components/FtCreatePlaylistPrompt/FtCreatePlaylistPrompt.vue'
 import FtKeyboardShortcutPrompt from './components/FtKeyboardShortcutPrompt/FtKeyboardShortcutPrompt.vue'
 import FtSearchFilters from './components/FtSearchFilters/FtSearchFilters.vue'
 import { marked } from 'marked'
-import { IpcChannels } from '../constants'
 import packageDetails from '../../package.json'
 import { openExternalLink, openInternalPath, showToast } from './helpers/utils'
 import { translateWindowTitle } from './helpers/strings'
 
-let ipcRenderer = null
-
 export default defineComponent({
   name: 'App',
   components: {
@@ -47,7 +44,6 @@ export default defineComponent({
       latestBlogUrl: '',
       updateChangelog: '',
       changeLogTitle: '',
-      isPromptOpen: false,
       lastExternalLinkToBeOpened: '',
       showExternalLinkOpeningPrompt: false,
       externalLinkOpeningPromptValues: [
@@ -107,6 +103,10 @@ export default defineComponent({
       return this.$store.getters.getDefaultInvidiousInstance
     },
 
+    currentInvidiousInstanceUrl: function () {
+      return this.$store.getters.getCurrentInvidiousInstanceUrl
+    },
+
     baseTheme: function () {
       return this.$store.getters.getBaseTheme
     },
@@ -154,8 +154,8 @@ export default defineComponent({
       return this.$store.getters.getAppTitle
     },
 
-    openDeepLinksInNewWindow: function () {
-      return this.$store.getters.getOpenDeepLinksInNewWindow
+    isAnyPromptOpen: function () {
+      return this.$store.getters.isAnyPromptOpen
     }
   },
   watch: {
@@ -197,13 +197,10 @@ export default defineComponent({
         this.grabSearchHistoryEntries()
 
         if (process.env.IS_ELECTRON) {
-          ipcRenderer = require('electron').ipcRenderer
           this.setupListenersToSyncWindows()
           this.activateKeyboardShortcuts()
           this.openAllLinksExternally()
-          this.enableSetSearchQueryText()
           this.enableOpenUrl()
-          this.watchSystemTheme()
           await this.checkExternalPlayer()
         }
 
@@ -215,19 +212,21 @@ export default defineComponent({
         }, 500)
       })
 
-      this.$router.onReady(() => {
-        if (this.$router.currentRoute.path === '/') {
-          this.$router.replace({ path: this.landingPage })
-        }
+      if (this.$route.path === '/') {
+        this.$router.replace({ path: this.landingPage })
+      }
 
-        this.setWindowTitle()
-      })
+      this.setWindowTitle()
     })
+
+    document.addEventListener('dragstart', this.handleDragStart)
+  },
+  beforeUnmount: function () {
+    document.removeEventListener('dragstart', this.handleDragStart)
   },
   methods: {
     setDocumentTitle: function(value) {
       document.title = value
-      this.$nextTick(() => this.$refs.topNav?.setActiveNavigationHistoryEntryTitle(value))
     },
     checkThemeSettings: function () {
       const theme = {
@@ -334,10 +333,6 @@ export default defineComponent({
       this.showBlogBanner = false
     },
 
-    handlePromptPortalUpdate: function(newVal) {
-      this.isPromptOpen = newVal
-    },
-
     openDownloadsPage: function () {
       const url = 'https://freetubeapp.io#download'
       openExternalLink(url)
@@ -358,25 +353,8 @@ export default defineComponent({
         this.$store.commit('setIsKeyboardShortcutPromptShown', !this.isKeyboardShortcutPromptShown)
       }
 
-      if (event.altKey) {
-        switch (event.key) {
-          case 'D':
-          case 'd':
-            this.$refs.topNav.focusSearch()
-            break
-        }
-      }
-      switch (event.key) {
-        case 'Tab':
-          this.showOutlines()
-          break
-        case 'L':
-        case 'l':
-          if ((process.platform !== 'darwin' && event.ctrlKey) ||
-            (process.platform === 'darwin' && event.metaKey)) {
-            this.$refs.topNav.focusSearch()
-          }
-          break
+      if (event.key === 'Tab') {
+        this.showOutlines()
       }
     },
 
@@ -505,6 +483,16 @@ export default defineComponent({
             break
           }
 
+          case 'trending':
+          case 'subscriptions':
+          case 'history':
+          case 'userplaylists':
+            openInternalPath({
+              path: `/${result.urlType}`,
+              doCreateNewWindow
+            })
+            break
+
           case 'invalid_url': {
             // Do nothing
             break
@@ -518,34 +506,12 @@ export default defineComponent({
       })
     },
 
-    /**
-     * Linux fix for dynamically updating theme preference, this works on
-     * all systems running the electron app.
-     */
-    watchSystemTheme: function () {
-      ipcRenderer.on(IpcChannels.NATIVE_THEME_UPDATE, (event, shouldUseDarkColors) => {
-        document.body.dataset.systemTheme = shouldUseDarkColors ? 'dark' : 'light'
-      })
-    },
-
-    enableSetSearchQueryText: function () {
-      ipcRenderer.on(IpcChannels.UPDATE_SEARCH_INPUT_TEXT, (event, searchQueryText) => {
-        if (searchQueryText) {
-          this.$refs.topNav.updateSearchInputText(searchQueryText)
-        }
-      })
-
-      ipcRenderer.send(IpcChannels.SEARCH_INPUT_HANDLING_READY)
-    },
-
     enableOpenUrl: function () {
-      ipcRenderer.on(IpcChannels.OPEN_URL, (event, url, { isLaunchLink = false } = { }) => {
+      window.ftElectron.handleOpenUrl((url) => {
         if (url) {
-          this.handleYoutubeLink(url, { doCreateNewWindow: this.openDeepLinksInNewWindow && !isLaunchLink })
+          this.handleYoutubeLink(url)
         }
       })
-
-      ipcRenderer.send(IpcChannels.APP_READY)
     },
 
     handleExternalLinkOpeningPromptAnswer: function (option) {
@@ -567,7 +533,7 @@ export default defineComponent({
     },
 
     setLocale: function() {
-      document.documentElement.setAttribute('lang', this.locale)
+      document.documentElement.lang = this.locale
       if (this.isLocaleRightToLeft) {
         document.body.dir = 'rtl'
       } else {
@@ -575,6 +541,139 @@ export default defineComponent({
       }
     },
 
+    /**
+     * Transforms dragged in-app URLs into YouTube ones, so they they can be dragged into other applications.
+     * Cancels the drag operation if the URL is FreeTube specific and cannot be transformed e.g. user playlist URLs
+     * @param {DragEvent} event
+     */
+    handleDragStart: function (event) {
+      if (!event.dataTransfer.types.includes('text/uri-list')) {
+        return
+      }
+
+      const originalUrlString = event.dataTransfer.getData('text/uri-list')
+      const originalUrl = new URL(originalUrlString)
+
+      // Check if this is an in-app URL
+      if (originalUrl.origin !== window.location.origin || originalUrl.pathname !== window.location.pathname) {
+        return
+      }
+
+      const [path, query] = originalUrl.hash.slice(2).split('?')
+      const pathParts = path.split('/')
+      const params = new URLSearchParams(query)
+
+      let transformed = false
+      let transformedURL = new URL('https://www.youtube.com')
+
+      switch (pathParts[0]) {
+        case 'watch':
+          transformedURL.pathname = '/watch'
+          transformedURL.searchParams.set('v', pathParts[1])
+
+          if (params.has('timestamp')) {
+            transformedURL.searchParams.set('t', params.get('timestamp') + 's')
+          }
+
+          if (params.has('playlistId') && params.get('playlistType') !== 'user') {
+            transformedURL.searchParams.set('list', params.get('playlistId'))
+          }
+
+          transformed = true
+          break
+        case 'playlist':
+          if (params.get('playlistType') !== 'user') {
+            transformedURL.pathname = '/playlist'
+            transformedURL.searchParams.set('list', pathParts[1])
+
+            transformed = true
+          }
+          break
+        case 'channel':
+          transformedURL.pathname = `/channel/${pathParts[1]}`
+
+          if (pathParts[2]) {
+            switch (pathParts[2]) {
+              case 'community':
+                transformedURL.pathname += '/posts'
+                break
+              case 'search':
+                transformedURL.pathname += '/search'
+                if (params.has('searchQueryText')) {
+                  transformedURL.searchParams.set('query', params.get('searchQueryText'))
+                }
+                break
+              case 'videos':
+              case 'shorts':
+              case 'releases':
+              case 'podcasts':
+              case 'courses':
+              case 'playlists':
+              case 'about':
+                transformedURL.pathname += `/${pathParts[2]}`
+                break
+            }
+          }
+
+          transformed = true
+          break
+        case 'search':
+          transformedURL.pathname = '/results'
+          transformedURL.searchParams.set('search_query', decodeURIComponent(pathParts[1]))
+          transformed = true
+          break
+        case 'hashtag':
+        case 'post':
+          transformedURL.pathname = `/${pathParts[0]}/${pathParts[1]}`
+          transformed = true
+          break
+        case 'subscriptions':
+        case 'history':
+          transformedURL.pathname = `/feed/${pathParts[1]}`
+          transformed = true
+          break
+        case 'userplaylists':
+          transformedURL.pathname = '/feed/playlists'
+          transformed = true
+          break
+        case 'settings':
+          transformedURL.pathname = '/account'
+          transformed = true
+          break
+        case 'about':
+          transformedURL.pathname = '/about'
+          transformed = true
+          break
+        case 'popular':
+          transformedURL = new URL(`${this.currentInvidiousInstanceUrl}/feed/popular`)
+          transformed = true
+          break
+      }
+
+      if (transformed) {
+        const transformedURLString = transformedURL.toString()
+
+        event.dataTransfer.setData('text/uri-list', transformedURLString)
+
+        const plainText = event.dataTransfer.getData('text/plain')
+        if (plainText.length > 0) {
+          event.dataTransfer.setData('text/plain', plainText.replaceAll(originalUrlString, transformedURLString))
+        }
+
+        const html = event.dataTransfer.getData('text/html')
+        if (html.length > 0) {
+          const originalUrlStringEncoded = originalUrlString.replaceAll('&', '&')
+          const transformedURLStringEncoded = transformedURLString.replaceAll('&', '&')
+
+          event.dataTransfer.setData('text/html', html.replaceAll(originalUrlStringEncoded, transformedURLStringEncoded))
+        }
+      } else {
+        // Cancel the drag operation for FreeTube specific URLs that cannot be transformed such as user playlist URLs
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+
     ...mapActions([
       'grabUserSettings',
       'grabAllProfiles',

src/renderer/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     v-if="dataReady"
-    id="app"
     class="app"
     :class="{
       hideOutlines: outlinesHidden,
@@ -10,11 +9,6 @@
       hideLabelsSideBar: hideLabelsSideBar && !isSideNavOpen
     }"
   >
-    <portal-target
-      name="promptPortal"
-      multiple
-      @change="handlePromptPortalUpdate"
-    />
     <ft-prompt
       v-if="showReleaseNotes"
       theme="readable-width"
@@ -71,17 +65,16 @@
       v-if="showProgressBar"
     />
     <top-nav
-      ref="topNav"
-      :inert="isPromptOpen"
+      :inert="isAnyPromptOpen"
     />
     <side-nav
       ref="sideNav"
-      :inert="isPromptOpen"
+      :inert="isAnyPromptOpen"
     />
     <ft-flex-box
       class="flexBox routerView"
       role="main"
-      :inert="isPromptOpen"
+      :inert="isAnyPromptOpen"
     >
       <div
         v-if="showUpdatesBanner || showBlogBanner"
@@ -102,17 +95,18 @@
           @click="handleNewBlogBannerClick"
         />
       </div>
-      <transition
+      <RouterView
         v-if="dataReady"
-        mode="out-in"
-        name="fade"
+        v-slot="{ Component }"
+        class="routerView"
       >
-        <!-- <keep-alive> -->
-        <RouterView
-          class="routerView"
-        />
-        <!-- </keep-alive> -->
-      </transition>
+        <Transition
+          mode="out-in"
+          name="fade"
+        >
+          <component :is="Component" />
+        </Transition>
+      </RouterView>
     </ft-flex-box>
   </div>
 </template>

src/renderer/components/ChannelAbout/ChannelAbout.vue

@@ -113,7 +113,7 @@
 import { computed } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
-import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue'
+import FtChannelBubble from '../../components/FtChannelBubble/FtChannelBubble.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 
 import store from '../../store/index'
@@ -128,7 +128,7 @@ const props = defineProps({
     default: ''
   },
   joined: {
-    type: [Date, Number],
+    type: Number,
     default: 0
   },
   views: {

src/renderer/components/ChannelDetails/ChannelDetails.vue

@@ -42,7 +42,7 @@
               v-if="subCount !== null && !hideChannelSubscriptions"
               class="subCount"
             >
-              {{ $tc('Global.Counts.Subscriber Count', subCount, { count: formattedSubCount }) }}
+              {{ $t('Global.Counts.Subscriber Count', { count: formattedSubCount }, subCount) }}
             </p>
           </div>
         </div>
@@ -81,14 +81,14 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'home' }"
             role="tab"
-            :aria-selected="String(currentTab === 'home')"
+            :aria-selected="currentTab === 'home'"
             aria-controls="homePanel"
             :tabindex="(currentTab === 'home' || currentTab === 'search') ? 0 : -1"
             @click="changeTab('home')"
             @keydown.left.right="focusTab('home', $event)"
             @keydown.enter.space.prevent="changeTab('home')"
           >
-            {{ $t("Channel.Home.Home").toUpperCase() }}
+            {{ $t("Channel.Home.Home") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -97,14 +97,14 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'videos' }"
             role="tab"
-            :aria-selected="String(currentTab === 'videos')"
+            :aria-selected="currentTab === 'videos'"
             aria-controls="videoPanel"
             :tabindex="(currentTab === 'videos' || currentTab === 'search') ? 0 : -1"
             @click="changeTab('videos')"
             @keydown.left.right="focusTab('videos', $event)"
             @keydown.enter.space.prevent="changeTab('videos')"
           >
-            {{ $t("Channel.Videos.Videos").toUpperCase() }}
+            {{ $t("Channel.Videos.Videos") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -113,14 +113,14 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'shorts' }"
             role="tab"
-            :aria-selected="String(currentTab === 'shorts')"
+            :aria-selected="currentTab === 'shorts'"
             aria-controls="shortPanel"
             :tabindex="currentTab === 'shorts' ? 0 : -1"
             @click="changeTab('shorts')"
             @keydown.left.right="focusTab('shorts', $event)"
             @keydown.enter.space.prevent="changeTab('shorts')"
           >
-            {{ $t("Global.Shorts").toUpperCase() }}
+            {{ $t("Global.Shorts") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -129,14 +129,14 @@
             class="tab"
             :class="{ selectedTab: currentTab === 'live' }"
             role="tab"
-            :aria-selected="String(currentTab === 'live')"
+            :aria-selected="currentTab === 'live'"
             aria-controls="livePanel"
             :tabindex="currentTab === 'live' ? 0 : -1"
             @click="changeTab('live')"
             @keydown.left.right="focusTab('live', $event)"
             @keydown.enter.space.prevent="changeTab('live')"
           >
-            {{ $t("Channel.Live.Live").toUpperCase() }}
+            {{ $t("Channel.Live.Live") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -144,7 +144,7 @@
             id="releasesTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'releases')"
+            :aria-selected="currentTab === 'releases'"
             aria-controls="releasePanel"
             :tabindex="currentTab === 'releases' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'releases' }"
@@ -152,7 +152,7 @@
             @keydown.left.right="focusTab('releases', $event)"
             @keydown.enter.space.prevent="changeTab('releases')"
           >
-            {{ $t("Channel.Releases.Releases").toUpperCase() }}
+            {{ $t("Channel.Releases.Releases") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -160,7 +160,7 @@
             id="podcastsTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'podcasts')"
+            :aria-selected="currentTab === 'podcasts'"
             aria-controls="podcastPanel"
             :tabindex="currentTab === 'podcasts' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'podcasts' }"
@@ -168,7 +168,7 @@
             @keydown.left.right="focusTab('podcasts', $event)"
             @keydown.enter.space.prevent="changeTab('podcasts')"
           >
-            {{ $t("Channel.Podcasts.Podcasts").toUpperCase() }}
+            {{ $t("Channel.Podcasts.Podcasts") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -176,7 +176,7 @@
             id="coursesTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'courses')"
+            :aria-selected="currentTab === 'courses'"
             aria-controls="coursesPanel"
             :tabindex="currentTab === 'courses' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'courses' }"
@@ -184,7 +184,7 @@
             @keydown.left.right="focusTab('courses', $event)"
             @keydown.enter.space.prevent="changeTab('courses')"
           >
-            {{ $t("Channel.Courses.Courses").toUpperCase() }}
+            {{ $t("Channel.Courses.Courses") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -192,7 +192,7 @@
             id="playlistsTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'playlists')"
+            :aria-selected="currentTab === 'playlists'"
             aria-controls="playlistPanel"
             :tabindex="currentTab === 'playlists' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'playlists' }"
@@ -200,7 +200,7 @@
             @keydown.left.right="focusTab('playlists', $event)"
             @keydown.enter.space.prevent="changeTab('playlists')"
           >
-            {{ $t("Channel.Playlists.Playlists").toUpperCase() }}
+            {{ $t("Channel.Playlists.Playlists") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
@@ -208,7 +208,7 @@
             id="communityTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'community')"
+            :aria-selected="currentTab === 'community'"
             aria-controls="communityPanel"
             :tabindex="currentTab === 'community' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'community' }"
@@ -216,14 +216,14 @@
             @keydown.left.right="focusTab('community', $event)"
             @keydown.enter.space.prevent="changeTab('community')"
           >
-            {{ $t("Global.Community").toUpperCase() }}
+            {{ $t("Global.Posts") }}
           </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
             id="aboutTab"
             class="tab"
             role="tab"
-            :aria-selected="String(currentTab === 'about')"
+            :aria-selected="currentTab === 'about'"
             aria-controls="aboutPanel"
             :tabindex="currentTab === 'about' ? 0 : -1"
             :class="{ selectedTab: currentTab === 'about' }"
@@ -231,7 +231,7 @@
             @keydown.left.right="focusTab('about', $event)"
             @keydown.enter.space.prevent="changeTab('about')"
           >
-            {{ $t("Channel.About.About").toUpperCase() }}
+            {{ $t("Channel.About.About") }}
           </div>
         </div>
 
@@ -251,14 +251,14 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import FtCard from '../ft-card/ft-card.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtShareButton from '../FtShareButton/FtShareButton.vue'
 import FtSubscribeButton from '../FtSubscribeButton/FtSubscribeButton.vue'
-import FtInput from '../ft-input/ft-input.vue'
+import FtInput from '../FtInput/FtInput.vue'
 
 import store from '../../store/index'
 
@@ -381,7 +381,7 @@ function search(query) {
   emit('search', query)
 }
 
-const searchBar = ref(null)
+const searchBar = useTemplateRef('searchBar')
 
 /**
  * @param {KeyboardEvent} event

src/renderer/components/ChannelHome/ChannelHome.css

@@ -1,6 +1,14 @@
+.shelfContainer {
+  max-inline-size: 85vw;
+}
+
 .shelfTitle {
   font-size: 24px;
   cursor: pointer;
+
+  /* Prevents overflow for long values */
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
 }
 
 .shelfTitle::marker {
@@ -32,4 +40,8 @@
 .shelfSubtitle {
   font-style: italic;
   color: var(--tertiary-text-color);
+
+  /* Prevents overflow for long values */
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
 }

src/renderer/components/ChannelHome/ChannelHome.vue

@@ -3,6 +3,7 @@
     <div
       v-for="(shelf, index) in filteredShelves"
       :key="index"
+      class="shelfContainer"
     >
       <details
         open
@@ -47,7 +48,7 @@
 </template>
 
 <script setup>
-
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
 import FtElementList from '../FtElementList/FtElementList.vue'
 import store from '../../store/index'

src/renderer/components/CommentSection/CommentSection.css

@@ -65,7 +65,6 @@
   block-size: 60px;
   font-size: 20px;
   line-height: 1em;
-  text-transform: capitalize;
   color: rgb(0 0 0);
   background-color: rgb(235 160 172);
   border-radius: 50%;
@@ -76,7 +75,7 @@
   font-size: 14px;
   margin-inline-start: 68px;
   margin-block-start: 0;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .commentOwner {
@@ -96,7 +95,7 @@
   font-size: 14px;
   margin-block-start: -10px;
   margin-inline-start: 70px;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .commentPinned {

src/renderer/components/CommentSection/CommentSection.vue

@@ -160,13 +160,9 @@
             @keydown.space.prevent="toggleCommentReplies(index)"
             @keydown.enter.prevent="toggleCommentReplies(index)"
           >
-            <span v-if="!comment.showReplies">{{ $t("Comments.View") }}</span>
-            <span v-else>{{ $t("Comments.Hide") }}</span>
-            {{ comment.numReplies }}
-            <span v-if="comment.numReplies === 1">{{ $t("Comments.Reply").toLowerCase() }}</span>
-            <span v-else>{{ $t("Comments.Replies").toLowerCase() }}</span>
-            <span v-if="comment.hasOwnerReplied && !comment.showReplies"> {{ $t("Comments.From {channelName}", { channelName }) }}</span>
-            <span v-if="comment.numReplies > 1 && comment.hasOwnerReplied && !comment.showReplies"> {{ $t("Comments.And others") }}</span>
+            <span>
+              {{ toggleCommentRepliesLinkText(comment) }}
+            </span>
           </span>
         </p>
         <div
@@ -239,12 +235,32 @@
                 />
                 {{ reply.likes }}
               </template>
+              <span
+                v-if="reply.isHearted"
+                class="commentHeartBadge"
+              >
+                <img
+                  :src="channelThumbnail"
+                  :title="$t('Comments.Hearted')"
+                  :aria-label="$t('Comments.Hearted')"
+                  class="commentHeartBadgeImg"
+                  alt=""
+                >
+                <FontAwesomeIcon
+                  :icon="['fas', 'heart']"
+                  class="commentHeartBadgeWhite"
+                />
+                <FontAwesomeIcon
+                  :icon="['fas', 'heart']"
+                  class="commentHeartBadgeRed"
+                />
+              </span>
             </p>
             <p
               v-if="reply.numReplies > 0"
               class="commentMoreReplies"
             >
-              {{ $t('Comments.View {replyCount} replies', { replyCount: reply.numReplies }) }}
+              {{ $t('Comments.View {replyCount} replies', { replyCount: reply.numReplies }, reply.numReplies) }}
             </p>
           </div>
           <div
@@ -307,14 +323,14 @@ import { computed, ref, shallowRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
 import FtCard from '../ft-card/ft-card.vue'
-import FtLoader from '../ft-loader/ft-loader.vue'
-import FtSelect from '../ft-select/ft-select.vue'
+import FtLoader from '../FtLoader/FtLoader.vue'
+import FtSelect from '../FtSelect/FtSelect.vue'
 import FtTimestampCatcher from '../FtTimestampCatcher.vue'
 
 import store from '../../store/index'
 
 import { copyToClipboard, showToast } from '../../helpers/utils'
-import { getLocalComments, parseLocalComment } from '../../helpers/api/local'
+import { getLocalCommunityPostComments, getLocalComments, parseLocalComment } from '../../helpers/api/local'
 import {
   getInvidiousCommunityPostCommentReplies,
   getInvidiousCommunityPostComments,
@@ -476,7 +492,7 @@ function isSubscribedToChannel(channelId) {
 function getCommentData() {
   isLoading.value = true
 
-  if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious' || props.isPostComments) {
+  if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
     if (!props.isPostComments) {
       getCommentDataInvidious()
     } else {
@@ -491,7 +507,7 @@ function getMoreComments() {
   if (commentData.value.length === 0 || nextPageToken.value == null) {
     showToast(t('Comments.There are no more comments for this video'))
   } else {
-    if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious' || props.isPostComments) {
+    if (!process.env.SUPPORTS_LOCAL_API || backendPreference.value === 'invidious') {
       if (!props.isPostComments) {
         getCommentDataInvidious()
       } else {
@@ -503,6 +519,26 @@ function getMoreComments() {
   }
 }
 
+/** @typedef {import('../../helpers/api/local').LocalComment | import('../../helpers/api/invidious').InvidiousComment} Comment */
+/**
+ * @param {Comment} comment
+ */
+function toggleCommentRepliesLinkText(comment) {
+  if (comment.showReplies) {
+    return t('Comments.Hide {replyCount} replies', { replyCount: comment.numReplies }, comment.numReplies)
+  }
+
+  if (comment.hasOwnerReplied) {
+    if (comment.numReplies > 1) {
+      return t('Comments.View {replyCount} replies from {channelName} and others', { replyCount: comment.numReplies, channelName: props.channelName })
+    }
+
+    return t('Comments.View 1 reply from {channelName}', { channelName: props.channelName })
+  }
+
+  return t('Comments.View {replyCount} replies', { replyCount: comment.numReplies }, comment.numReplies)
+}
+
 /**
  * @param {number} index
  */
@@ -518,7 +554,7 @@ function toggleCommentReplies(index) {
  * @param {number} index
  */
 function getCommentReplies(index) {
-  if (!process.env.SUPPORTS_LOCAL_API || commentData.value[index].dataType === 'invidious' || props.isPostComments) {
+  if (!process.env.SUPPORTS_LOCAL_API || commentData.value[index].dataType === 'invidious') {
     if (!props.isPostComments) {
       getCommentRepliesInvidious(index)
     } else {
@@ -545,9 +581,15 @@ async function getCommentDataLocal(more = false) {
       comments = await localCommentsInstance.applySort(sortNewest.value ? 'NEWEST_FIRST' : 'TOP_COMMENTS')
       localCommentsInstance = comments
     } else {
-      comments = await getLocalComments(props.id)
-      sortNewest.value = comments.header?.sort_menu?.sub_menu_items?.[1].selected ?? false
-      localCommentsInstance = comments
+      if (props.isPostComments) {
+        comments = await getLocalCommunityPostComments(props.id, props.postAuthorId)
+        sortNewest.value = comments.header?.sort_menu?.sub_menu_items?.[1].selected ?? false
+        localCommentsInstance = comments
+      } else {
+        comments = await getLocalComments(props.id)
+        sortNewest.value = comments.header?.sort_menu?.sub_menu_items?.[1].selected ?? false
+        localCommentsInstance = comments
+      }
     }
 
     const parsedComments = comments.contents
@@ -596,7 +638,11 @@ async function getCommentDataLocal(more = false) {
     if (backendFallback.value && backendPreference.value === 'local') {
       localCommentsInstance = undefined
       showToast(t('Falling back to Invidious API'))
-      getCommentDataInvidious()
+      if (props.isPostComments) {
+        getPostCommentsInvidious()
+      } else {
+        getCommentDataInvidious()
+      }
     } else {
       isLoading.value = false
     }
@@ -763,7 +809,13 @@ function getPostCommentsInvidious() {
     showToast(`${errorMessage}: ${err}`, 10000, () => {
       copyToClipboard(err)
     })
-    isLoading.value = false
+
+    if (process.env.SUPPORTS_LOCAL_API && backendFallback.value && backendPreference.value === 'invidious') {
+      showToast(t('Falling back to Local API'))
+      getCommentDataLocal()
+    } else {
+      isLoading.value = false
+    }
   })
 }
 

src/renderer/components/DataSettings/DataSettings.css

@@ -0,0 +1,3 @@
+.box {
+  justify-content: center;
+}

src/renderer/components/DataSettings/DataSettings.vue

@@ -5,7 +5,7 @@
     <h4 class="groupTitle">
       {{ $t('Subscriptions.Subscriptions') }}
     </h4>
-    <FtFlexBox class="dataSettingsBox">
+    <FtFlexBox class="box">
       <FtButton
         :label="$t('Settings.Data Settings.Import Subscriptions')"
         @click="importSubscriptions"
@@ -29,37 +29,40 @@
     <h4 class="groupTitle">
       {{ $t('History.History') }}
     </h4>
-    <FtFlexBox class="dataSettingsBox">
+    <FtFlexBox class="box">
       <FtButton
         :label="$t('Settings.Data Settings.Import History')"
-        @click="importHistory"
+        @click="importWatchHistory"
       />
       <FtButton
         :label="$t('Settings.Data Settings.Export History')"
-        @click="exportHistory"
+        @click="showExportWatchHistoryPrompt = true"
       />
     </FtFlexBox>
     <h4 class="groupTitle">
       {{ $t('Playlists') }}
     </h4>
-    <FtFlexBox class="dataSettingsBox">
+    <FtFlexBox class="box">
       <FtButton
         :label="$t('Settings.Data Settings.Import Playlists')"
         @click="importPlaylists"
       />
       <FtButton
         :label="$t('Settings.Data Settings.Export Playlists')"
-        @click="exportPlaylistsForOlderVersionsSometimes"
+        @click="exportPlaylists"
       />
     </FtFlexBox>
-    <FtFlexBox>
-      <FtToggleSwitch
-        :label="$t('Settings.Data Settings.Export Playlists For Older FreeTube Versions.Label')"
-        :compact="true"
-        :default-value="shouldExportPlaylistForOlderVersions"
-        :tooltip="$t('Settings.Data Settings.Export Playlists For Older FreeTube Versions.Tooltip')"
-        :tooltip-allow-newlines="true"
-        @change="shouldExportPlaylistForOlderVersions = !shouldExportPlaylistForOlderVersions"
+    <h4 class="groupTitle">
+      {{ t('Settings.Data Settings.Search history') }}
+    </h4>
+    <FtFlexBox class="box">
+      <FtButton
+        :label="t('Settings.Data Settings.Import search history')"
+        @click="importSearchHistory"
+      />
+      <FtButton
+        :label="t('Settings.Data Settings.Export search history')"
+        @click="showExportSearchHistoryPrompt = true"
       />
     </FtFlexBox>
     <FtPrompt
@@ -69,24 +72,37 @@
       :option-values="SUBSCRIPTIONS_PROMPT_VALUES"
       @click="exportSubscriptions"
     />
+    <FtPrompt
+      v-if="showExportWatchHistoryPrompt"
+      :label="t('Settings.Data Settings.Select Export Type')"
+      :option-names="exportWatchSearchHistoryPromptNames"
+      :option-values="WATCH_SEARCH_HISTORY_PROMPT_VALUES"
+      @click="exportWatchHistory"
+    />
+    <FtPrompt
+      v-if="showExportSearchHistoryPrompt"
+      :label="t('Settings.Data Settings.Select Export Type')"
+      :option-names="exportWatchSearchHistoryPromptNames"
+      :option-values="WATCH_SEARCH_HISTORY_PROMPT_VALUES"
+      @click="exportSearchHistory"
+    />
   </FtSettingsSection>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue'
-import { useI18n } from '../composables/use-i18n-polyfill'
-import { useRouter } from 'vue-router/composables'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+import { useRouter } from 'vue-router'
 
-import FtButton from './ft-button/ft-button.vue'
-import FtFlexBox from './ft-flex-box/ft-flex-box.vue'
-import FtPrompt from './FtPrompt/FtPrompt.vue'
-import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
-import FtToggleSwitch from './ft-toggle-switch/ft-toggle-switch.vue'
+import FtButton from '../FtButton/FtButton.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtPrompt from '../FtPrompt/FtPrompt.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 
-import store from '../store/index'
+import store from '../../store/index'
 
-import { MAIN_PROFILE_ID } from '../../constants'
-import { calculateColorLuminance, getRandomColor } from '../helpers/colors'
+import { MAIN_PROFILE_ID } from '../../../constants'
+import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
 import {
   deepCopy,
   escapeHTML,
@@ -94,7 +110,8 @@ import {
   readFileWithPicker,
   showToast,
   writeFileWithPicker,
-} from '../helpers/utils'
+} from '../../helpers/utils'
+import { processToBeAddedPlaylistVideo } from '../../helpers/playlists'
 
 const IMPORT_DIRECTORY_ID = 'data-settings-import'
 const START_IN_DIRECTORY = 'downloads'
@@ -404,8 +421,6 @@ function importYouTubeSubscriptions(textDecode) {
   const subscriptions = []
   let count = 0
 
-  showToast(t('Settings.Data Settings.This might take a while, please wait'))
-
   store.commit('setShowProgressBar', true)
   store.commit('setProgressBarPercentage', 0)
 
@@ -742,7 +757,18 @@ async function exportNewPipeSubscriptions() {
 
 // #endregion subscriptions export
 
-// #region history
+const WATCH_SEARCH_HISTORY_PROMPT_VALUES = [
+  'freetube',
+  'youtube'
+]
+
+const exportWatchSearchHistoryPromptNames = computed(() => [
+  `${t('Settings.Data Settings.Export FreeTube')} (.db)`,
+  `${t('Settings.Data Settings.Export YouTube')} (.json)`,
+  t('Close')
+])
+
+// #region watch history
 
 const historyCacheById = computed(() => {
   return store.getters.getHistoryCacheById
@@ -752,7 +778,7 @@ const historyCacheSorted = computed(() => {
   return store.getters.getHistoryCacheSorted
 })
 
-async function importHistory() {
+async function importWatchHistory() {
   let response
   try {
     response = await readFileWithPicker(
@@ -777,16 +803,16 @@ async function importHistory() {
   const { filename, content } = response
 
   if (filename.endsWith('.db')) {
-    importFreeTubeHistory(content.split('\n'))
+    importFreeTubeWatchHistory(content.split('\n'))
   } else if (filename.endsWith('.json')) {
-    importYouTubeHistory(JSON.parse(content))
+    importYouTubeWatchHistory(JSON.parse(content))
   }
 }
 
 /**
  * @param {string[]} textDecode
  */
-async function importFreeTubeHistory(textDecode) {
+async function importFreeTubeWatchHistory(textDecode) {
   textDecode.pop()
 
   const requiredKeys = [
@@ -816,7 +842,8 @@ async function importFreeTubeHistory(textDecode) {
     'paid',
   ]
 
-  const historyItems = new Map(Object.entries(historyCacheById.value))
+  // deep copy so we don't get errors from Electron when we try to pass reactive objects through the IPC channels
+  const historyItems = new Map(deepCopy(Object.entries(historyCacheById.value)))
 
   textDecode.forEach((history) => {
     const historyData = JSON.parse(history)
@@ -853,7 +880,7 @@ async function importFreeTubeHistory(textDecode) {
 /**
  * @param {any[]} historyData
  */
-async function importYouTubeHistory(historyData) {
+async function importYouTubeWatchHistory(historyData) {
   const filterPredicate = item =>
     item.products.includes('YouTube') &&
     item.titleUrl != null && // removed video doesnt contain url...
@@ -901,7 +928,8 @@ async function importYouTubeHistory(historyData) {
     'activityControls',
   ].concat(Object.keys(keyMapping))
 
-  const historyItems = new Map(Object.entries(historyCacheById.value))
+  // deep copy so we don't get errors from Electron when we try to pass reactive objects through the IPC channels
+  const historyItems = new Map(deepCopy(Object.entries(historyCacheById.value)))
 
   filteredHistoryData.forEach(element => {
     const historyObject = {}
@@ -940,12 +968,30 @@ async function importYouTubeHistory(historyData) {
   showToast(t('Settings.Data Settings.All watched history has been successfully imported'))
 }
 
-async function exportHistory() {
+const showExportWatchHistoryPrompt = ref(false)
+
+/**
+ * @param {'freetube' | 'youtube' | null} option
+ */
+async function exportWatchHistory(option) {
+  showExportWatchHistoryPrompt.value = false
+
+  switch (option) {
+    case 'freetube':
+      exportFreeTubeWatchHistory()
+      break
+    case 'youtube':
+      exportYouTubeWatchHistory()
+      break
+  }
+}
+
+async function exportFreeTubeWatchHistory() {
   const historyDb = historyCacheSorted.value.map((historyEntry) => {
     return JSON.stringify(historyEntry)
   }).join('\n') + '\n'
   const dateStr = getTodayDateStrLocalTimezone()
-  const exportFileName = 'freetube-history-' + dateStr + '.db'
+  const exportFileName = 'freetube-watch-history-' + dateStr + '.db'
 
   await promptAndWriteToFile(
     exportFileName,
@@ -957,14 +1003,45 @@ async function exportHistory() {
   )
 }
 
-// #endregion history
+async function exportYouTubeWatchHistory() {
+  const historyData = historyCacheSorted.value.map((entry) => {
+    return {
+      header: 'YouTube',
+      title: `Watched ${entry.title}`,
+      titleUrl: `https://www.youtube.com/watch?v=${entry.videoId}`,
+      subtitles: [{
+        name: entry.author,
+        url: `https://www.youtube.com/channel/${entry.authorId}`
+      }],
+      time: new Date(entry.timeWatched).toISOString(),
+      products: [
+        'YouTube'
+      ],
+      activityControls: [
+        'YouTube watch history'
+      ]
+    }
+  })
+
+  const dateStr = getTodayDateStrLocalTimezone()
+  const exportFileName = 'youtube-watch-history-' + dateStr + '.json'
+
+  await promptAndWriteToFile(
+    exportFileName,
+    JSON.stringify(historyData),
+    t('Settings.Data Settings.History File'),
+    'application/json',
+    '.json',
+    t('Settings.Data Settings.All watched history has been successfully exported')
+  )
+}
+
+// #endregion watch history
 
 // #region playlists
 
 const allPlaylists = computed(() => store.getters.getAllPlaylists)
 
-const shouldExportPlaylistForOlderVersions = ref(false)
-
 async function importPlaylists() {
   let response
   try {
@@ -1032,18 +1109,24 @@ async function importPlaylists() {
     'videoCount',
   ]
 
+  const knownKeys = [...requiredKeys, ...optionalKeys, ...ignoredKeys]
+
   const requiredVideoKeys = [
     'videoId',
     'title',
-    'author',
-    'authorId',
     'lengthSeconds',
     'timeAdded',
 
+    // These two properties will be missing for shorts added to a playlist from anywhere but the watch page
+    // 'author',
+    // 'authorId',
+
     // `playlistItemId` should be optional for backward compatibility
     // 'playlistItemId',
   ]
 
+  const newPlaylists = []
+
   playlists.forEach((playlistData) => {
     // We would technically already be done by the time the data is parsed,
     // however we want to limit the possibility of malicious data being sent
@@ -1051,9 +1134,10 @@ async function importPlaylists() {
 
     const playlistObject = {}
     const videoIdToBeAddedSet = new Set()
+    let countRequiredKeysPresent = 0
 
     Object.keys(playlistData).forEach((key) => {
-      if ([requiredKeys, optionalKeys, ignoredKeys].every((ks) => !ks.includes(key))) {
+      if (!knownKeys.includes(key)) {
         const message = `${t('Settings.Data Settings.Unknown data key')}: ${key}`
         showToast(message)
       } else if (key === 'videos') {
@@ -1068,17 +1152,22 @@ async function importPlaylists() {
           }
         })
 
-        playlistObject[key] = videoArray
+        playlistObject.videos = videoArray
+
+        if (requiredKeys.includes(key)) {
+          countRequiredKeysPresent++
+        }
       } else if (!ignoredKeys.includes(key)) {
         // Do nothing for keys to be ignored
         playlistObject[key] = playlistData[key]
+
+        if (requiredKeys.includes(key)) {
+          countRequiredKeysPresent++
+        }
       }
     })
 
-    const playlistObjectKeys = Object.keys(playlistObject)
-    const playlistObjectHasAllRequiredKeys = requiredKeys.every((k) => playlistObjectKeys.includes(k))
-
-    if (!playlistObjectHasAllRequiredKeys) {
+    if (countRequiredKeysPresent !== requiredKeys.length) {
       const message = t('Settings.Data Settings.Playlist insufficient data', { playlist: playlistData.playlistName })
       showToast(message)
       return
@@ -1093,34 +1182,49 @@ async function importPlaylists() {
     })
 
     if (existingPlaylist === undefined) {
-      store.dispatch('addPlaylist', playlistObject)
+      newPlaylists.push(playlistObject)
       return
     }
 
-    const duplicateVideoPresentInToBeAdded = playlistObject.videos.length > videoIdToBeAddedSet.size
-    const existingVideoIdSet = existingPlaylist.videos.reduce((video) => videoIdToBeAddedSet.add(video.videoId), new Set())
-    const duplicateVideoPresentInExistingPlaylist = existingPlaylist.videos.length > existingVideoIdSet.size
-    const shouldAddDuplicateVideos = duplicateVideoPresentInToBeAdded || duplicateVideoPresentInExistingPlaylist
+    /** @type {Set<string> | undefined} */
+    let existingVideoIdSet
+
+    let shouldAddDuplicateVideos = playlistObject.videos.length > videoIdToBeAddedSet.size
+
+    if (!shouldAddDuplicateVideos) {
+      existingVideoIdSet = existingPlaylist.videos.reduce((set, video) => set.add(video.videoId), new Set())
+      shouldAddDuplicateVideos = existingPlaylist.videos.length > existingVideoIdSet.size
+    }
+
+    const playlistVideos = [...existingPlaylist.videos]
 
     playlistObject.videos.forEach((video) => {
       let videoExists = false
       if (shouldAddDuplicateVideos) {
         if (video.playlistItemId != null) {
           // Find by `playlistItemId` if present
-          videoExists = existingPlaylist.videos.some((x) => {
+          videoExists = playlistVideos.some((x) => {
             // Allow duplicate (by videoId) videos to be added
             return x.videoId === video.videoId && x.playlistItemId === video.playlistItemId
           })
         } else {
           // Older playlist exports have no `playlistItemId` but have `timeAdded`
           // Which might be duplicate for copied playlists with duplicate `videoId`
-          videoExists = existingPlaylist.videos.some((x) => {
+          videoExists = playlistVideos.some((x) => {
             // Allow duplicate (by videoId) videos to be added
             return x.videoId === video.videoId && x.timeAdded === video.timeAdded
           })
         }
+      } else if (existingVideoIdSet !== undefined) {
+        // Disallow duplicate (by videoId) videos to be added
+
+        if (existingVideoIdSet.has(video.videoId)) {
+          videoExists = true
+        } else {
+          existingVideoIdSet.add(video.videoId)
+        }
       } else {
-        videoExists = existingPlaylist.videos.some((x) => {
+        videoExists = playlistVideos.some((x) => {
           // Disallow duplicate (by videoId) videos to be added
           return x.videoId === video.videoId
         })
@@ -1128,12 +1232,8 @@ async function importPlaylists() {
 
       if (!videoExists) {
         // Keep original `timeAdded` value
-        const payload = {
-          _id: existingPlaylist._id,
-          videoData: video,
-        }
-
-        store.dispatch('addVideo', payload)
+        processToBeAddedPlaylistVideo(video)
+        playlistVideos.push(video)
       }
     })
     // Update playlist's `lastUpdatedAt` & other attributes
@@ -1142,9 +1242,14 @@ async function importPlaylists() {
       // Only these attributes would be updated (besides videos)
       playlistName: playlistObject.playlistName,
       description: playlistObject.description,
+      videos: playlistVideos
     })
   })
 
+  if (newPlaylists.length > 0) {
+    store.dispatch('addPlaylists', newPlaylists)
+  }
+
   showToast(t('Settings.Data Settings.All playlists has been successfully imported'))
 }
 
@@ -1166,51 +1271,193 @@ async function exportPlaylists() {
   )
 }
 
-function exportPlaylistsForOlderVersionsSometimes() {
-  if (shouldExportPlaylistForOlderVersions.value) {
-    exportPlaylistsForOlderVersions()
-  } else {
-    exportPlaylists()
+// #endregion playlists
+
+// #region search history
+
+/** @type {import('vue').ComputedRef<{ _id: string, lastUpdatedAt: number }[]>} */
+const searchHistoryEntries = computed(() => {
+  return store.getters.getSearchHistoryEntries
+})
+
+async function importSearchHistory() {
+  let response
+  try {
+    response = await readFileWithPicker(
+      t('Settings.Data Settings.Search history file'),
+      {
+        'application/x-freetube-db': '.db',
+        'application/json': '.json'
+      },
+      IMPORT_DIRECTORY_ID,
+      START_IN_DIRECTORY
+    )
+  } catch (err) {
+    const message = t('Settings.Data Settings.Unable to read file')
+    showToast(`${message}: ${err}`)
+    return
+  }
+
+  if (response === null) {
+    return
+  }
+
+  const { filename, content } = response
+
+  if (filename.endsWith('.db')) {
+    importFreeTubeSearchHistory(content.split('\n'))
+  } else if (filename.endsWith('.json')) {
+    importYouTubeSearchHistory(JSON.parse(content))
   }
 }
 
-async function exportPlaylistsForOlderVersions() {
-  const dateStr = getTodayDateStrLocalTimezone()
-  const exportFileName = 'freetube-playlists-as-single-favorites-playlist-' + dateStr + '.db'
+/**
+ * @param {string[]} textDecode
+ */
+async function importFreeTubeSearchHistory(textDecode) {
+  textDecode.pop()
 
-  const favoritesPlaylistData = {
-    playlistName: 'Favorites',
-    protected: true,
-    videos: [],
+  // deep copy so we don't get errors from Electron when we try to pass reactive objects through the IPC channels
+  const historyItems = new Map(deepCopy(searchHistoryEntries.value).map(entry => [entry._id, entry]))
+
+  textDecode.forEach((rawEntry) => {
+    const entry = JSON.parse(rawEntry)
+
+    if (typeof entry._id !== 'string' || typeof entry.lastUpdatedAt !== 'number') {
+      showToast(t('Settings.Data Settings.History object has insufficient data, skipping item'))
+      console.error('Missing keys:', entry)
+    } else {
+      const existingEntry = historyItems.get(entry._id)
+
+      if (existingEntry == null || entry.lastUpdatedAt > existingEntry.lastUpdatedAt) {
+        let newEntry
+
+        if (Object.keys(entry) === 2) {
+          newEntry = entry
+        } else {
+          newEntry = { _id: entry._id, lastUpdatedAt: entry.lastUpdatedAt }
+        }
+
+        historyItems.set(entry._id, newEntry)
+      }
+    }
+  })
+
+  const newSearchHistoryEntries = Array.from(historyItems.values())
+
+  await store.dispatch('overwriteSearchHistory', newSearchHistoryEntries)
+
+  showToast(t('Settings.Data Settings.All search history has been successfully imported'))
+}
+
+/**
+ * @param {any[]} historyData
+ */
+async function importYouTubeSearchHistory(historyData) {
+  // deep copy so we don't get errors from Electron when we try to pass reactive objects through the IPC channels
+  const historyItems = new Map(deepCopy(searchHistoryEntries.value).map(entry => [entry._id, entry]))
+
+  for (const entry of historyData) {
+    if (
+      entry.products?.includes('YouTube') &&
+      entry.titleUrl?.includes('youtube.com/results?search_query') &&
+      entry.details == null // dont import ads
+    ) {
+      try {
+        const url = new URL(entry.titleUrl)
+        const query = url.searchParams.get('search_query')
+
+        const lastUpdatedAt = Date.parse(entry.time)
+
+        if (!query || typeof query !== 'string' || query.length === 0 || isNaN(lastUpdatedAt)) {
+          showToast(t('Settings.Data Settings.History object has insufficient data, skipping item'))
+          console.error('Missing keys:', entry)
+        } else {
+          const existingEntry = historyItems.get(query)
+
+          if (existingEntry == null || lastUpdatedAt > existingEntry.lastUpdatedAt) {
+            historyItems.set(query, { _id: query, lastUpdatedAt })
+          }
+        }
+      } catch (error) {
+        console.error(error)
+        showToast(t('Settings.Data Settings.History object has insufficient data, skipping item'))
+      }
+    }
   }
 
-  allPlaylists.value.forEach((playlist) => {
-    playlist.videos.forEach((video) => {
-      const videoAlreadyAdded = favoritesPlaylistData.videos.some((v) => {
-        return v.videoId === video.videoId
-      })
-      if (videoAlreadyAdded) { return }
+  const newSearchHistoryEntries = Array.from(historyItems.values())
 
-      favoritesPlaylistData.videos.push(
-        Object.assign({
-          // The "required" keys during import (but actually unused) in older versions
-          isLive: false,
-          paid: false,
-          published: '',
-        }, video)
-      )
-    })
-  })
+  await store.dispatch('overwriteSearchHistory', newSearchHistoryEntries)
+
+  showToast(t('Settings.Data Settings.All search history has been successfully imported'))
+}
+
+const showExportSearchHistoryPrompt = ref(false)
+
+/**
+ * @param {'freetube' | 'youtube' | null} option
+ */
+async function exportSearchHistory(option) {
+  showExportSearchHistoryPrompt.value = false
+
+  switch (option) {
+    case 'freetube':
+      exportFreeTubeSearchHistory()
+      break
+    case 'youtube':
+      exportYouTubeSearchHistory()
+      break
+  }
+}
+
+async function exportFreeTubeSearchHistory() {
+  const historyDb = searchHistoryEntries.value.map((entry) => {
+    return JSON.stringify(entry)
+  }).join('\n') + '\n'
+  const dateStr = getTodayDateStrLocalTimezone()
+  const exportFileName = 'freetube-search-history-' + dateStr + '.db'
 
   await promptAndWriteToFile(
     exportFileName,
-    JSON.stringify([favoritesPlaylistData]),
-    t('Settings.Data Settings.Playlist File'),
+    historyDb,
+    t('Settings.Data Settings.Search history file'),
     'application/x-freetube-db',
     '.db',
-    t('Settings.Data Settings.All playlists has been successfully exported')
+    t('Settings.Data Settings.All search history has been successfully exported')
   )
 }
 
-// #endregion playlists
+async function exportYouTubeSearchHistory() {
+  const historyData = searchHistoryEntries.value.map((entry) => {
+    return {
+      header: 'YouTube',
+      title: `Searched for ${entry._id}`,
+      titleUrl: `https://www.youtube.com/results?search_query=${encodeURIComponent(entry._id)}`,
+      time: new Date(entry.lastUpdatedAt).toISOString(),
+      products: [
+        'YouTube'
+      ],
+      activityControls: [
+        'YouTube search history'
+      ]
+    }
+  })
+
+  const dateStr = getTodayDateStrLocalTimezone()
+  const exportFileName = 'youtube-search-history-' + dateStr + '.json'
+
+  await promptAndWriteToFile(
+    exportFileName,
+    JSON.stringify(historyData),
+    t('Settings.Data Settings.Search history file'),
+    'application/json',
+    '.json',
+    t('Settings.Data Settings.All search history has been successfully exported')
+  )
+}
+
+// #endregion search history
 </script>
+
+<style scoped src="./DataSettings.css" />

src/renderer/components/DistractionSettings/DistractionSettings.css

@@ -3,3 +3,7 @@
     display: none;
   }
 }
+
+.containingTextFlexBox {
+  margin-block-end: 2em;
+}

src/renderer/components/DistractionSettings/DistractionSettings.vue

@@ -0,0 +1,737 @@
+<template>
+  <FtSettingsSection
+    :title="t('Settings.Distraction Free Settings.Distraction Free Settings')"
+  >
+    <h4
+      class="groupTitle"
+    >
+      {{ t('Settings.Distraction Free Settings.Sections.General') }}
+    </h4>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Video Views')"
+          :compact="true"
+          :default-value="hideVideoViews"
+          @change="updateHideVideoViews"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Subscribers')"
+          :compact="true"
+          :default-value="hideChannelSubscriptions"
+          @change="updateHideChannelSubscriptions"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Sharing Actions')"
+          :compact="true"
+          :default-value="hideSharingActions"
+          @change="updateHideSharingActions"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Videos on Watch')"
+          :default-value="hideWatchedSubs"
+          :compact="true"
+          :tooltip="t('Tooltips.Distraction Free Settings.Hide Videos on Watch')"
+          @change="updateHideWatchedSubs"
+        />
+      </div>
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Live Streams')"
+          :compact="true"
+          :default-value="hideLiveStreams"
+          @change="updateHideLiveStreams"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Upcoming Premieres')"
+          :compact="true"
+          :default-value="hideUpcomingPremieres"
+          @change="updateHideUpcomingPremieres"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Display Titles Without Excessive Capitalisation')"
+          :compact="true"
+          :default-value="showDistractionFreeTitles"
+          @change="updateShowDistractionFreeTitles"
+        />
+      </div>
+    </div>
+    <br class="hide-on-mobile">
+    <FtFlexBox>
+      <FtInputTags
+        :disabled="channelHiderDisabled"
+        :disabled-msg="t('Settings.Distraction Free Settings.Hide Channels Disabled Message')"
+        :label="t('Settings.Distraction Free Settings.Hide Channels')"
+        :tag-name-placeholder="t('Settings.Distraction Free Settings.Hide Channels Placeholder')"
+        :tag-list="channelsHidden"
+        :tooltip="t('Tooltips.Distraction Free Settings.Hide Channels')"
+        :validate-tag-name="checkYoutubeChannelId"
+        :find-tag-info="findChannelTagInfoWrapper"
+        :are-channel-tags="true"
+        :show-tags="showAddedChannelsHidden"
+        @invalid-name="handleInvalidChannel"
+        @error-find-tag-info="handleChannelAPIError"
+        @change="handleChannelsHidden"
+        @already-exists="handleChannelsExists"
+        @toggle-show-tags="handleAddedChannelsHidden"
+      />
+    </FtFlexBox>
+    <FtFlexBox class="containingTextFlexBox">
+      <FtInputTags
+        :label="t('Settings.Distraction Free Settings.Hide Videos, Playlists and Channels Containing Text')"
+        :tag-name-placeholder="t('Settings.Distraction Free Settings.Hide Videos, Playlists and Channels Containing Text Placeholder')"
+        :show-tags="showAddedForbiddenTitles"
+        :tag-list="forbiddenTitles"
+        :min-input-length="1"
+        :tooltip="t('Tooltips.Distraction Free Settings.Hide Videos, Playlists and Channels Containing Text')"
+        @change="handleForbiddenTitles"
+        @toggle-show-tags="handleAddedForbiddenTitles"
+      />
+    </FtFlexBox>
+    <h4
+      class="groupTitle"
+    >
+      {{ t('Settings.Distraction Free Settings.Sections.Side Bar') }}
+    </h4>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <FtToggleSwitch
+          v-if="SUPPORTS_LOCAL_API"
+          :label="t('Settings.Distraction Free Settings.Hide Trending Videos')"
+          :compact="true"
+          :disabled="disableHideTrendingVideos"
+          :default-value="hideTrendingVideos"
+          @change="updateHideTrendingVideos"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Popular Videos')"
+          :compact="true"
+          :disabled="disableHidePopularVideos"
+          :default-value="disableHidePopularVideos || hidePopularVideos"
+          @change="updateHidePopularVideos"
+        />
+      </div>
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Playlists')"
+          :compact="true"
+          :default-value="hidePlaylists"
+          @change="updateHidePlaylists"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Active Subscriptions')"
+          :compact="true"
+          :default-value="hideActiveSubscriptions"
+          @change="updateHideActiveSubscriptions"
+        />
+      </div>
+    </div>
+    <h4
+      class="groupTitle"
+    >
+      {{ t('Settings.Distraction Free Settings.Sections.Subscriptions Page') }}
+    </h4>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Subscriptions Videos')"
+          :compact="true"
+          :default-value="hideSubscriptionsVideos"
+          @change="updateHideSubscriptionsVideos"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Subscriptions Shorts')"
+          :compact="true"
+          :default-value="hideSubscriptionsShorts"
+          @change="updateHideSubscriptionsShorts"
+        />
+      </div>
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Subscriptions Live')"
+          :compact="true"
+          :disabled="hideLiveStreams"
+          :default-value="hideLiveStreams || hideSubscriptionsLive"
+          :tooltip="hideLiveStreams ? hideSubscriptionsLiveTooltip : ''"
+          v-on="!hideLiveStreams ? { change: updateHideSubscriptionsLive } : {}"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Subscriptions Posts')"
+          :compact="true"
+          :default-value="hideSubscriptionsCommunity"
+          @change="updateHideSubscriptionsCommunity"
+        />
+      </div>
+    </div>
+    <h4
+      class="groupTitle"
+    >
+      {{ t('Settings.Distraction Free Settings.Sections.Channel Page') }}
+    </h4>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Home')"
+          :compact="true"
+          :default-value="hideChannelHome"
+          @change="updateHideChannelHome"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Shorts')"
+          :compact="true"
+          :default-value="hideChannelShorts"
+          @change="updateHideChannelShorts"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Playlists')"
+          :compact="true"
+          :default-value="hideChannelPlaylists"
+          @change="updateHideChannelPlaylists"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Podcasts')"
+          :compact="true"
+          :default-value="hideChannelPodcasts"
+          @change="updateHideChannelPodcasts"
+        />
+      </div>
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Posts')"
+          :compact="true"
+          :default-value="hideChannelCommunity"
+          @change="updateHideChannelCommunity"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Featured Channels')"
+          :compact="true"
+          :default-value="hideFeaturedChannels"
+          @change="updateHideFeaturedChannels"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Releases')"
+          :compact="true"
+          :default-value="hideChannelReleases"
+          @change="updateHideChannelReleases"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Channel Courses')"
+          :compact="true"
+          :default-value="hideChannelCourses"
+          @change="updateHideChannelCourses"
+        />
+      </div>
+    </div>
+    <h4
+      class="groupTitle"
+    >
+      {{ t('Settings.Distraction Free Settings.Sections.Watch Page') }}
+    </h4>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Video Likes And Dislikes')"
+          :compact="true"
+          :default-value="hideVideoLikesAndDislikes"
+          @change="updateHideVideoLikesAndDislikes"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Chapters')"
+          :compact="true"
+          :default-value="hideChapters"
+          @change="updateHideChapters"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Video Description')"
+          :compact="true"
+          :default-value="hideVideoDescription"
+          @change="updateHideVideoDescription"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Comment Likes')"
+          :compact="true"
+          :default-value="hideCommentLikes"
+          @change="updateHideCommentLikes"
+        />
+      </div>
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Live Chat')"
+          :compact="true"
+          :default-value="hideLiveChat"
+          @change="updateHideLiveChat"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Recommended Videos')"
+          :compact="true"
+          :default-value="hideRecommendedVideos"
+          @change="handleHideRecommendedVideos"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Comments')"
+          :compact="true"
+          :default-value="hideComments"
+          @change="updateHideComments"
+        />
+        <FtToggleSwitch
+          :label="t('Settings.Distraction Free Settings.Hide Profile Pictures in Comments')"
+          :compact="true"
+          :default-value="hideCommentPhotos"
+          @change="updateHideCommentPhotos"
+        />
+      </div>
+    </div>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
+import FtToggleSwitch from '../FtToggleSwitch/FtToggleSwitch.vue'
+import FtInputTags from '../FtInputTags/FtInputTags.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+
+import store from '../../store/index'
+
+import { showToast } from '../../helpers/utils'
+import { checkYoutubeChannelId, findChannelTagInfo } from '../../helpers/channels'
+
+const { t } = useI18n()
+
+const SUPPORTS_LOCAL_API = process.env.SUPPORTS_LOCAL_API
+
+const channelHiderDisabled = ref(false)
+
+/** @type {import('vue').ComputedRef<'local' | 'invidious'>} */
+const backendPreference = computed(() => store.getters.getBackendPreference)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const backendFallback = computed(() => store.getters.getBackendFallback)
+
+const backendOptions = computed(() => ({
+  preference: backendPreference.value,
+  fallback: backendFallback.value
+}))
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideVideoViews = computed(() => store.getters.getHideVideoViews)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideVideoViews(value) {
+  store.dispatch('updateHideVideoViews', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideVideoLikesAndDislikes = computed(() => store.getters.getHideVideoLikesAndDislikes)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideVideoLikesAndDislikes(value) {
+  store.dispatch('updateHideVideoLikesAndDislikes', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelSubscriptions = computed(() => store.getters.getHideChannelSubscriptions)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelSubscriptions(value) {
+  store.dispatch('updateHideChannelSubscriptions', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideCommentLikes = computed(() => store.getters.getHideCommentLikes)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideCommentLikes(value) {
+  store.dispatch('updateHideCommentLikes', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideRecommendedVideos = computed(() => store.getters.getHideRecommendedVideos)
+
+/**
+ * @param {boolean} value
+ */
+function handleHideRecommendedVideos(value) {
+  if (value) {
+    store.dispatch('updatePlayNextVideo', false)
+  }
+
+  store.dispatch('updateHideRecommendedVideos', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideTrendingVideos = computed(() => store.getters.getHideTrendingVideos)
+
+const disableHideTrendingVideos = computed(() => backendPreference.value !== 'local' && !backendFallback.value)
+/**
+ * @param {boolean} value
+ */
+function updateHideTrendingVideos(value) {
+  store.dispatch('updateHideTrendingVideos', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hidePopularVideos = computed(() => store.getters.getHidePopularVideos)
+
+const disableHidePopularVideos = computed(() => backendPreference.value !== 'invidious' && !backendFallback.value)
+
+/**
+ * @param {boolean} value
+ */
+function updateHidePopularVideos(value) {
+  store.dispatch('updateHidePopularVideos', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hidePlaylists = computed(() => store.getters.getHidePlaylists)
+
+/**
+ * @param {boolean} value
+ */
+function updateHidePlaylists(value) {
+  store.dispatch('updateHidePlaylists', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideLiveChat = computed(() => store.getters.getHideLiveChat)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideLiveChat(value) {
+  store.dispatch('updateHideLiveChat', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideActiveSubscriptions = computed(() => store.getters.getHideActiveSubscriptions)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideActiveSubscriptions(value) {
+  store.dispatch('updateHideActiveSubscriptions', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideVideoDescription = computed(() => store.getters.getHideVideoDescription)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideVideoDescription(value) {
+  store.dispatch('updateHideVideoDescription', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideComments = computed(() => store.getters.getHideComments)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideComments(value) {
+  store.dispatch('updateHideComments', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideCommentPhotos = computed(() => store.getters.getHideCommentPhotos)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideCommentPhotos(value) {
+  store.dispatch('updateHideCommentPhotos', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideLiveStreams = computed(() => store.getters.getHideLiveStreams)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideLiveStreams(value) {
+  store.dispatch('updateHideLiveStreams', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideUpcomingPremieres = computed(() => store.getters.getHideUpcomingPremieres)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideUpcomingPremieres(value) {
+  store.dispatch('updateHideUpcomingPremieres', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideSharingActions = computed(() => store.getters.getHideSharingActions)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideSharingActions(value) {
+  store.dispatch('updateHideSharingActions', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChapters = computed(() => store.getters.getHideChapters)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChapters(value) {
+  store.dispatch('updateHideChapters', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideFeaturedChannels = computed(() => store.getters.getHideFeaturedChannels)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideFeaturedChannels(value) {
+  store.dispatch('updateHideFeaturedChannels', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelShorts = computed(() => store.getters.getHideChannelShorts)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelShorts(value) {
+  store.dispatch('updateHideChannelShorts', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelPlaylists = computed(() => store.getters.getHideChannelPlaylists)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelPlaylists(value) {
+  store.dispatch('updateHideChannelPlaylists', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelPodcasts = computed(() => store.getters.getHideChannelPodcasts)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelPodcasts(value) {
+  store.dispatch('updateHideChannelPodcasts', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelReleases = computed(() => store.getters.getHideChannelReleases)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelReleases(value) {
+  store.dispatch('updateHideChannelReleases', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelCourses = computed(() => store.getters.getHideChannelCourses)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelCourses(value) {
+  store.dispatch('updateHideChannelCourses', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelCommunity = computed(() => store.getters.getHideChannelCommunity)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelCommunity(value) {
+  store.dispatch('updateHideChannelCommunity', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideChannelHome = computed(() => store.getters.getHideChannelHome)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideChannelHome(value) {
+  store.dispatch('updateHideChannelHome', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideSubscriptionsVideos = computed(() => store.getters.getHideSubscriptionsVideos)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideSubscriptionsVideos(value) {
+  store.dispatch('updateHideSubscriptionsVideos', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideSubscriptionsShorts = computed(() => store.getters.getHideSubscriptionsShorts)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideSubscriptionsShorts(value) {
+  store.dispatch('updateHideSubscriptionsShorts', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideSubscriptionsLive = computed(() => store.getters.getHideSubscriptionsLive)
+
+const hideSubscriptionsLiveTooltip = computed(() => {
+  return t('Tooltips.Distraction Free Settings.Hide Subscriptions Live', {
+    appWideSetting: t('Settings.Distraction Free Settings.Hide Live Streams'),
+    subsection: t('Settings.Distraction Free Settings.Sections.General'),
+    settingsSection: t('Settings.Distraction Free Settings.Distraction Free Settings')
+  })
+})
+
+/**
+ * @param {boolean} value
+ */
+function updateHideSubscriptionsLive(value) {
+  store.dispatch('updateHideSubscriptionsLive', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideSubscriptionsCommunity = computed(() => store.getters.getHideSubscriptionsCommunity)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideSubscriptionsCommunity(value) {
+  store.dispatch('updateHideSubscriptionsCommunity', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const showDistractionFreeTitles = computed(() => store.getters.getShowDistractionFreeTitles)
+
+/**
+ * @param {boolean} value
+ */
+function updateShowDistractionFreeTitles(value) {
+  store.dispatch('updateShowDistractionFreeTitles', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const showAddedChannelsHidden = computed(() => store.getters.getShowAddedChannelsHidden)
+
+function handleAddedChannelsHidden() {
+  store.dispatch('updateShowAddedChannelsHidden', !showAddedChannelsHidden.value)
+}
+
+/** @type {import('vue').ComputedRef<any[]>} */
+const channelsHidden = computed(() => {
+  return JSON.parse(store.getters.getChannelsHidden).map((ch) => {
+    // Legacy support
+    if (typeof ch === 'string') {
+      return { name: ch, preferredName: '', icon: '' }
+    }
+    return ch
+  })
+})
+
+/**
+ * @param {any[]} value
+ */
+function handleChannelsHidden(value) {
+  store.dispatch('updateChannelsHidden', JSON.stringify(value))
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const showAddedForbiddenTitles = computed(() => store.getters.getShowAddedForbiddenTitles)
+
+function handleAddedForbiddenTitles() {
+  store.dispatch('updateShowAddedForbiddenTitles', !showAddedForbiddenTitles.value)
+}
+
+/** @type {import('vue').ComputedRef<string[]>} */
+const forbiddenTitles = computed(() => JSON.parse(store.getters.getForbiddenTitles))
+
+/**
+ * @param {string[]} value
+ */
+function handleForbiddenTitles(value) {
+  store.dispatch('updateForbiddenTitles', JSON.stringify(value))
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const hideWatchedSubs = computed(() => store.getters.getHideWatchedSubs)
+
+/**
+ * @param {boolean} value
+ */
+function updateHideWatchedSubs(value) {
+  store.dispatch('updateHideWatchedSubs', value)
+}
+
+onMounted(() => {
+  verifyChannelsHidden()
+})
+
+function handleInvalidChannel() {
+  showToast(t('Settings.Distraction Free Settings.Hide Channels Invalid'))
+}
+
+function handleChannelAPIError() {
+  showToast(t('Settings.Distraction Free Settings.Hide Channels API Error'))
+}
+
+function handleChannelsExists() {
+  showToast(t('Settings.Distraction Free Settings.Hide Channels Already Exists'))
+}
+
+/**
+ * @param {string} text
+ */
+async function findChannelTagInfoWrapper(text) {
+  return await findChannelTagInfo(text, backendOptions.value)
+}
+
+async function verifyChannelsHidden() {
+  const channelsHiddenCpy = [...channelsHidden.value]
+
+  for (let i = 0; i < channelsHiddenCpy.length; i++) {
+    const tag = channelsHiddenCpy[i]
+
+    // if channel has been processed and confirmed as non existent, skip
+    if (tag.invalid) continue
+
+    // process if no preferred name and is possibly a YouTube ID
+    if ((tag.preferredName === '' || !tag.icon) && checkYoutubeChannelId(tag.name)) {
+      channelHiderDisabled.value = true
+
+      const { preferredName, icon, iconHref, invalidId } = await findChannelTagInfoWrapper(tag.name)
+      if (invalidId) {
+        channelsHiddenCpy[i] = { name: tag.name, invalid: invalidId }
+      } else {
+        channelsHiddenCpy[i] = { name: tag.name, preferredName, icon, iconHref }
+      }
+
+      // update on every tag in case it closes
+      handleChannelsHidden(channelsHiddenCpy)
+    }
+  }
+
+  channelHiderDisabled.value = false
+}
+</script>
+
+<style scoped src="./DistractionSettings.css" />

src/renderer/components/DownloadSettings/DownloadSettings.vue

@@ -0,0 +1,107 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Download Settings.Download Settings')"
+  >
+    <FtFlexBox>
+      <FtSelect
+        :placeholder="$t('Settings.Download Settings.Download Behavior')"
+        :value="downloadBehavior"
+        :select-names="downloadBehaviorNames"
+        :select-values="DOWNLOAD_BEHAVIOR_VALUES"
+        :icon="['fas', 'download']"
+        @change="updateDownloadBehavior"
+      />
+    </FtFlexBox>
+    <template
+      v-if="downloadBehavior === 'download'"
+    >
+      <FtFlexBox
+        class="settingsFlexStart500px"
+      >
+        <FtToggleSwitch
+          :label="$t('Settings.Download Settings.Ask Download Path')"
+          :default-value="downloadAskPath"
+          @change="updateDownloadAskPath"
+        />
+      </FtFlexBox>
+      <template
+        v-if="!downloadAskPath"
+      >
+        <FtFlexBox>
+          <FtInput
+            class="folderDisplay"
+            :placeholder="downloadFolderPath"
+            :show-action-button="false"
+            :show-label="false"
+            :disabled="true"
+          />
+        </FtFlexBox>
+        <FtFlexBox>
+          <FtButton
+            :label="$t('Settings.Download Settings.Choose Path')"
+            @click="chooseDownloadFolder"
+          />
+        </FtFlexBox>
+      </template>
+    </template>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import FtButton from '../FtButton/FtButton.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtInput from '../FtInput/FtInput.vue'
+import FtSelect from '../FtSelect/FtSelect.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
+import FtToggleSwitch from '../FtToggleSwitch/FtToggleSwitch.vue'
+
+import store from '../../store/index'
+
+import { DefaultFolderKind } from '../../../constants'
+
+const DOWNLOAD_BEHAVIOR_VALUES = [
+  'download',
+  'open'
+]
+
+const { t } = useI18n()
+
+const downloadBehaviorNames = computed(() => [
+  t('Settings.Download Settings.Download in app'),
+  t('Settings.Download Settings.Open in web browser')
+])
+
+/** @type {import('vue').ComputedRef<'download' | 'open'>} */
+const downloadBehavior = computed(() => store.getters.getDownloadBehavior)
+
+/**
+ * @param {'download' | 'open'}  value
+ */
+function updateDownloadBehavior(value) {
+  store.dispatch('updateDownloadBehavior', value)
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const downloadAskPath = computed(() => store.getters.getDownloadAskPath)
+
+/**
+ * @param {boolean}  value
+ */
+function updateDownloadAskPath(value) {
+  store.dispatch('updateDownloadAskPath', value)
+}
+
+/** @type {import('vue').ComputedRef<string>} */
+const downloadFolderPath = computed(() => store.getters.getDownloadFolderPath)
+
+function chooseDownloadFolder() {
+  if (process.env.IS_ELECTRON) {
+    window.ftElectron.chooseDefaultFolder(DefaultFolderKind.DOWNLOADS)
+  }
+}
+</script>
+
+<style scoped src="./DownloadSettings.css" />

src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue

@@ -31,19 +31,16 @@ import { onMounted, ref } from 'vue'
 
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtToggleSwitch from '../FtToggleSwitch/FtToggleSwitch.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
 
-import { IpcChannels } from '../../../constants'
-
 const replaceHttpCacheLoading = ref(true)
 const replaceHttpCache = ref(false)
 const showRestartPrompt = ref(false)
 
 onMounted(async () => {
   if (process.env.IS_ELECTRON) {
-    const { ipcRenderer } = require('electron')
-    replaceHttpCache.value = await ipcRenderer.invoke(IpcChannels.GET_REPLACE_HTTP_CACHE)
+    replaceHttpCache.value = await window.ftElectron.getReplaceHttpCache()
   }
 
   replaceHttpCacheLoading.value = false
@@ -69,8 +66,7 @@ function handleReplaceHttpCache(value) {
   }
 
   if (process.env.IS_ELECTRON) {
-    const { ipcRenderer } = require('electron')
-    ipcRenderer.send(IpcChannels.TOGGLE_REPLACE_HTTP_CACHE)
+    window.ftElectron.toggleReplaceHttpCache()
   }
 }
 </script>

src/renderer/components/ExternalPlayerSettings.vue

@@ -0,0 +1,162 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.External Player Settings.External Player Settings')"
+  >
+    <FtFlexBox>
+      <FtSelect
+        :placeholder="$t('Settings.External Player Settings.External Player')"
+        :value="externalPlayer"
+        :select-names="externalPlayerNames"
+        :select-values="externalPlayerValues"
+        :tooltip="$t('Tooltips.External Player Settings.External Player')"
+        :icon="['fas', 'external-link-alt']"
+        @change="updateExternalPlayer"
+      />
+    </FtFlexBox>
+    <FtFlexBox>
+      <FtToggleSwitch
+        :label="$t('Settings.External Player Settings.Ignore Unsupported Action Warnings')"
+        :default-value="externalPlayerIgnoreWarnings"
+        :disabled="externalPlayer === ''"
+        :compact="true"
+        :tooltip="$t('Tooltips.External Player Settings.Ignore Warnings')"
+        @change="updateExternalPlayerIgnoreWarnings"
+      />
+      <FtToggleSwitch
+        :label="$t('Settings.External Player Settings.Ignore Default Arguments')"
+        :default-value="externalPlayerIgnoreDefaultArgs"
+        :disabled="externalPlayer === ''"
+        :compact="true"
+        :tooltip="$t('Tooltips.External Player Settings.Ignore Default Arguments')"
+        @change="updateExternalPlayerIgnoreDefaultArgs"
+      />
+    </FtFlexBox>
+    <FtFlexBox
+      v-if="externalPlayer !== ''"
+      class="settingsFlexStart460px"
+    >
+      <FtInput
+        :placeholder="$t('Settings.External Player Settings.Custom External Player Executable')"
+        :show-action-button="false"
+        :show-label="true"
+        :value="externalPlayerExecutable"
+        :tooltip="$t('Tooltips.External Player Settings.Custom External Player Executable')"
+        @input="updateExternalPlayerExecutable"
+      />
+    </FtFlexBox>
+    <FtFlexBox
+      v-if="externalPlayer !== ''"
+    >
+      <FtInputTags
+        :label="$t('Settings.External Player Settings.Custom External Player Arguments')"
+        :tag-name-placeholder="$t('Settings.External Player Settings.Custom External Player Arguments')"
+        :tag-list="externalPlayerCustomArgs"
+        :tooltip="externalPlayerCustomArgsTooltip"
+        :show-tags="showAddedExternalPlayerCustomArgs"
+        @change="handleExternalPlayerCustomArgs"
+        @toggle-show-tags="handleAddedExternalPayerCustomArgs"
+      />
+    </FtFlexBox>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from '../composables/use-i18n-polyfill'
+
+import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
+import FtSelect from './FtSelect/FtSelect.vue'
+import FtInput from './FtInput/FtInput.vue'
+import FtToggleSwitch from './FtToggleSwitch/FtToggleSwitch.vue'
+import FtFlexBox from './ft-flex-box/ft-flex-box.vue'
+import FtInputTags from './FtInputTags/FtInputTags.vue'
+
+import store from '../store/index'
+
+const { t } = useI18n()
+
+/** @type {import('vue').ComputedRef<string>} */
+const externalPlayer = computed(() => store.getters.getExternalPlayer)
+
+/** @type {import('vue').ComputedRef<string[]>} */
+const externalPlayerNames = computed(() => {
+  return store.getters.getExternalPlayerNames.map((name) => {
+    return name === 'None'
+      ? t('Settings.External Player Settings.Players.None.Name')
+      : name
+  })
+})
+
+/** @type {import('vue').ComputedRef<string[]>} */
+const externalPlayerValues = computed(() => store.getters.getExternalPlayerValues)
+
+/** @type {import('vue').ComputedRef<string>} */
+const externalPlayerExecutable = computed(() => store.getters.getExternalPlayerExecutable)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const externalPlayerIgnoreWarnings = computed(() => store.getters.getExternalPlayerIgnoreWarnings)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const externalPlayerIgnoreDefaultArgs = computed(() => store.getters.getExternalPlayerIgnoreDefaultArgs)
+
+/** @type {import('vue').ComputedRef<string[]>} */
+const externalPlayerCustomArgs = computed(() => JSON.parse(store.getters.getExternalPlayerCustomArgs))
+
+const externalPlayerCustomArgsTooltip = computed(() => {
+  const tooltip = t('Tooltips.External Player Settings.Custom External Player Arguments')
+
+  const cmdArgs = store.getters.getExternalPlayerCmdArguments[externalPlayer.value]
+  if (cmdArgs && typeof cmdArgs.defaultCustomArguments === 'string' && cmdArgs.defaultCustomArguments !== '') {
+    const defaultArgs = t(
+      'Tooltips.External Player Settings.DefaultCustomArgumentsTemplate',
+      {
+        defaultCustomArguments: cmdArgs.defaultCustomArguments
+      })
+    return `${tooltip} ${defaultArgs}`
+  }
+
+  return tooltip
+})
+
+/**
+ * @param {string} value
+ */
+function updateExternalPlayer(value) {
+  store.dispatch('updateExternalPlayer', value)
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateExternalPlayerIgnoreWarnings(value) {
+  store.dispatch('updateExternalPlayerIgnoreWarnings', value)
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateExternalPlayerIgnoreDefaultArgs(value) {
+  store.dispatch('updateExternalPlayerIgnoreDefaultArgs', value)
+}
+
+/**
+ * @param {string} value
+ */
+function updateExternalPlayerExecutable(value) {
+  store.dispatch('updateExternalPlayerExecutable', value)
+}
+
+/**
+ * @param {string[]} args
+ */
+function handleExternalPlayerCustomArgs(args) {
+  store.dispatch('updateExternalPlayerCustomArgs', JSON.stringify(args))
+}
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const showAddedExternalPlayerCustomArgs = computed(() => store.getters.getShowAddedExternalPlayerCustomArgs)
+
+function handleAddedExternalPayerCustomArgs() {
+  store.dispatch('updateShowAddedExternalPlayerCustomArgs', !showAddedExternalPlayerCustomArgs.value)
+}
+</script>

src/renderer/components/FtAutoGrid/FtAutoGrid.css

@@ -1,11 +1,11 @@
 .grid {
   display: grid;
-  grid-gap: 8px;
+  gap: 8px;
   grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
   justify-content: space-evenly;
 }
 
 .list {
   display: grid;
-  grid-gap: 4px;
+  gap: 4px;
 }

src/renderer/components/FtAutoLoadNextPageWrapper.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="ft-auto-load-next-page-wrapper"
+  >
+    <div
+      v-observe-visibility="observeVisibilityOptions"
+    >
+      <!--
+        Dummy element to be observed by Intersection Observer
+      -->
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import store from '../store/index'
+
+const emit = defineEmits(['load-next-page'])
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const generalAutoLoadMorePaginatedItemsEnabled = computed(() => {
+  return store.getters.getGeneralAutoLoadMorePaginatedItemsEnabled
+})
+
+const observeVisibilityOptions = computed(() => {
+  if (generalAutoLoadMorePaginatedItemsEnabled.value) {
+    return {
+      callback: (isVisible, _entry) => {
+        // This is also fired when **hidden**
+        // No point doing anything if not visible
+        if (isVisible) {
+          emit('load-next-page')
+        }
+      },
+      intersection: {
+        // Only when it intersects with N% above bottom
+        rootMargin: '0% 0% 0% 0%',
+      },
+      // Callback responsible for loading multiple pages
+      once: false,
+    }
+  } else {
+    return false
+  }
+})
+</script>

src/renderer/components/FtButton/FtButton.css

@@ -20,6 +20,7 @@
   gap: 10px;
   margin: 5px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  border: 2px solid;
 }
 
 .btn:disabled {

src/renderer/components/FtButton/FtButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <button
+    class="btn ripple"
+    :style="{
+      color: textColor,
+      backgroundColor: backgroundColor,
+      borderColor: backgroundColor
+    }"
+    @click="click"
+  >
+    <slot>
+      <FontAwesomeIcon
+        v-if="icon"
+        :icon="icon"
+      />
+      {{ label }}
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  textColor: {
+    type: String,
+    default: 'var(--text-with-accent-color)'
+  },
+  backgroundColor: {
+    type: String,
+    default: 'var(--accent-color)'
+  },
+  icon: {
+    type: Array,
+    default: null
+  }
+})
+
+const emit = defineEmits(['click'])
+
+function click() {
+  emit('click')
+}
+</script>
+
+<style scoped src="./FtButton.css" />

src/renderer/components/FtChannelBubble/FtChannelBubble.vue

@@ -0,0 +1,96 @@
+<template>
+  <router-link
+    v-if="!selectable"
+    class="bubblePadding"
+    :aria-labelledby="id"
+    :to="`/channel/${channelId}`"
+  >
+    <img
+      v-if="channelThumbnail != null"
+      class="bubble"
+      :src="channelThumbnail"
+      alt=""
+    >
+    <FontAwesomeIcon
+      v-else
+      :icon="['fas', 'circle-user']"
+      class="bubble"
+      fixed-width
+    />
+    <div
+      :id="id"
+      class="channelName"
+    >
+      {{ channelName }}
+    </div>
+  </router-link>
+  <div
+    v-else
+    class="bubblePadding"
+    :aria-checked="selected"
+    role="checkbox"
+    tabindex="0"
+    :aria-labelledby="id"
+    @click="handleClick"
+    @keydown.space.enter.prevent="handleClick"
+  >
+    <img
+      class="bubble"
+      :src="channelThumbnail"
+      alt=""
+    >
+    <div
+      v-if="selected"
+      class="bubble selected"
+    >
+      <FontAwesomeIcon
+        :icon="['fas', 'check']"
+        class="icon"
+      />
+    </div>
+    <div
+      :id="id"
+      class="channelName"
+    >
+      {{ channelName }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { useId } from 'vue'
+
+const props = defineProps({
+  channelId: {
+    type: String,
+    required: true
+  },
+  channelName: {
+    type: String,
+    required: true
+  },
+  channelThumbnail: {
+    type: String,
+    default: null
+  },
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+  selected: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const id = useId()
+
+const emit = defineEmits(['change'])
+
+function handleClick() {
+  emit('change', !props.selected)
+}
+</script>
+
+<style scoped src="./FtChannelBubble.css" />

src/renderer/components/FtCheckboxList/FtCheckboxList.css

@@ -1,7 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 .pure-checkbox input[type='checkbox'] {
   border: 0;
-  clip: rect(0 0 0 0);
+  clip-path: circle(0);
   block-size: 1px;
   margin: -1px;
   overflow: hidden;

src/renderer/components/FtCheckboxList/FtCheckboxList.vue

@@ -5,10 +5,10 @@
     </h3>
     <template
       v-for="(label, index) in labels"
+      :key="values[index]"
     >
       <input
         :id="id + values[index]"
-        :key="index"
         v-model="modelValue"
         :name="id"
         :value="values[index]"
@@ -17,7 +17,6 @@
         type="checkbox"
       >
       <label
-        :key="label"
         :for="id + values[index]"
       >
         {{ label }}
@@ -27,12 +26,11 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import { useId } from '../../composables/use-id-polyfill'
+import { useId } from 'vue'
 
 const id = useId()
 
-const props = defineProps({
+defineProps({
   title: {
     type: String,
     required: true
@@ -49,39 +47,9 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-
-  // Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
-  // Do not rename or remove
-  // TODO: Replace with defineModel in Vue 3
-  value: {
-    type: Array,
-    required: true
-  }
 })
 
-// Required for v-model in the parent component (https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components)
-// Do not rename or remove
-// TODO: Replace with defineModel in Vue 3
-const emit = defineEmits(['input'])
-
-/** @type {import('vue').Ref<string[]>} */
-const modelValue = ref(props.value)
-
-watch(
-  modelValue,
-  (newValue) => {
-    emit('input', newValue)
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.value,
-  (newValue) => {
-    modelValue.value = newValue
-  },
-  { deep: true }
-)
+const modelValue = defineModel({ type: Array, required: true })
 </script>
 
 <style scoped src="./FtCheckboxList.css" />

src/renderer/components/FtCommunityPoll/FtCommunityPoll.vue

@@ -4,7 +4,7 @@
       class="vote-count"
     >
       <!-- Format the votes to be split by commas ie. 1000 -> 1,000 -->
-      {{ $t('Channel.Community.votes', {votes: formattedVotes}) }}
+      {{ $t('Channel.Posts.votes', {votes: formattedVotes}) }}
     </div>
     <div
       v-for="(choice, index) in data.content"
@@ -52,13 +52,13 @@
         v-if="!revealAnswer"
         class="option-text"
       >
-        <FontAwesomeIcon :icon="['fas', 'eye']" /> {{ $t('Channel.Community.Reveal Answers') }}
+        <FontAwesomeIcon :icon="['fas', 'eye']" /> {{ $t('Channel.Posts.Reveal Answers') }}
       </div>
       <div
         v-else
         class="option-text"
       >
-        <FontAwesomeIcon :icon="['fas', 'eye-slash']" /> {{ $t('Channel.Community.Hide Answers') }}
+        <FontAwesomeIcon :icon="['fas', 'eye-slash']" /> {{ $t('Channel.Posts.Hide Answers') }}
       </div>
     </div>
   </div>

src/renderer/components/FtCommunityPost/FtCommunityPost.scss

@@ -67,11 +67,11 @@
 
 .bottomSection {
   color: var(--tertiary-text-color);
-  display: block;
-  flex-direction: column;
+  display: flex;
+  align-items: center;
   font-size: 15px;
   margin-block-start: 4px;
-  max-inline-size: 210px;
+  max-inline-size: 100%;
   text-align: start;
 
   @media screen and (width <= 680px) {
@@ -88,6 +88,10 @@
   .likeCount {
     margin-inline: 5px 6px;
   }
+
+  .shareButton {
+    margin-inline-start: 10px;
+  }
 }
 
 .playlistWrapper {
@@ -110,7 +114,7 @@
   .playlistText {
     margin-inline-start: 10px;
     inline-size: 50%;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     .playlistAuthor {
       font-size: small;