prettier

.eslintrc.cjs

@@ -3,18 +3,18 @@ const a11yOff = Object.keys(require("eslint-plugin-jsx-a11y").rules).reduce(
     acc[`jsx-a11y/${rule}`] = "off";
     return acc;
   },
-  {}
+  {},
 );
 
 module.exports = {
   env: {
-    browser: true
+    browser: true,
   },
   extends: [
     "airbnb",
     "airbnb/hooks",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
   ],
   ignorePatterns: [
     "public/*",
@@ -24,19 +24,19 @@ module.exports = {
     "/*.mts",
     "/plugins/*.ts",
     "/plugins/*.mjs",
-    "/themes/**/*.ts"
+    "/themes/**/*.ts",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "./tsconfig.json",
-    tsconfigRootDir: "./"
+    tsconfigRootDir: "./",
   },
   settings: {
     "import/resolver": {
       typescript: {
-        project: "./tsconfig.json"
+        project: "./tsconfig.json",
-      }
+      },
-    }
+    },
   },
   plugins: ["@typescript-eslint", "import", "prettier"],
   rules: {
@@ -62,18 +62,21 @@ module.exports = {
     "no-nested-ternary": "off",
     "prefer-destructuring": "off",
     "no-param-reassign": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern:  "^_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+    ],
     "react/jsx-filename-extension": [
       "error",
-      { extensions: [".js", ".tsx", ".jsx"] }
+      { extensions: [".js", ".tsx", ".jsx"] },
     ],
     "import/extensions": [
       "error",
       "ignorePackages",
       {
         ts: "never",
-        tsx: "never"
+        tsx: "never",
-      }
+      },
     ],
     "import/order": [
       "error",
@@ -84,14 +87,14 @@ module.exports = {
           "internal",
           ["sibling", "parent"],
           "index",
-          "unknown"
+          "unknown",
         ],
         "newlines-between": "always",
         alphabetize: {
           order: "asc",
-          caseInsensitive: true
+          caseInsensitive: true,
-        }
+        },
-      }
+      },
     ],
     "sort-imports": [
       "error",
@@ -100,9 +103,9 @@ module.exports = {
         ignoreDeclarationSort: true,
         ignoreMemberSort: false,
         memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
-        allowSeparatedGroups: true
+        allowSeparatedGroups: true,
-      }
+      },
     ],
-    ...a11yOff
+    ...a11yOff,
-  }
+  },
 };

.github/CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
+- Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
+- Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
+- Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
+- Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
+- Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

.github/CONTRIBUTING.md

@@ -5,15 +5,16 @@ Thank you for investing your time in contributing to our project! Your contribut
 Please read our [Code of Conduct](./CODE_OF_CONDUCT.md) to keep our community approachable and respectable.
 
 ## Contents
- - [New Contributor Guide](#new-contributor-guide)
+
- - [Requesting a feature or reporting a bug](#requesting-a-feature-or-reporting-a-bug)
+- [New Contributor Guide](#new-contributor-guide)
-   - [Discord Server](#discord-server)
+- [Requesting a feature or reporting a bug](#requesting-a-feature-or-reporting-a-bug)
-   - [GitHub Issues](#github-issues)
+  - [Discord Server](#discord-server)
- - [Before you start](#before-you-start)
+  - [GitHub Issues](#github-issues)
- - [Contributing](#before-you-start)
+- [Before you start](#before-you-start)
-   - [Recommended Development Environment](#recommended-development-environment)
+- [Contributing](#before-you-start)
-   - [Tips](#tips)
+  - [Recommended Development Environment](#recommended-development-environment)
-   - [Language Contributions](#language-contributions)
+  - [Tips](#tips)
+  - [Language Contributions](#language-contributions)
 
 ## New contributor guide
 
@@ -24,18 +25,21 @@ To get an overview of the project, read the [README](README.md). Here are some r
 - [GitHub flow](https://docs.github.com/en/get-started/quickstart/github-flow)
 - [Collaborating with pull requests](https://docs.github.com/en/github/collaborating-with-pull-requests)
 
-
 ## Requesting a feature or reporting a bug
+
 There are two places where to request features or report bugs:
- - The P-Stream Discord server
+
- - GitHub Issues
+- The P-Stream Discord server
+- GitHub Issues
 
 ### Discord Server
+
 If you do not have a GitHub account or want to discuss a feature or bug with us before making an issue, you can join our Discord server.
 
 <a href="https://docs.pstream.mov/links/discord"><img src="https://discord.com/api/guilds/1267558147682205738/widget.png?style=banner2" alt="Discord Server"></a>
 
 ### GitHub Issues
+
 To make a GitHub issue for P-Stream, please visit the [new issue page](https://github.com/p-stream/p-stream/issues/new/choose) where you can pick either the "Bug Report" or "Feature Request" template.
 
 When filling out an issue template, please include as much detail as possible and any screenshots or console logs as appropriate.
@@ -43,7 +47,8 @@ When filling out an issue template, please include as much detail as possible an
 After an issue is created, it will be assigned either the https://github.com/p-stream/p-stream/labels/bug or https://github.com/p-stream/p-stream/labels/feature label, along with https://github.com/p-stream/p-stream/labels/awaiting-approval. One of our maintainers will review your issue and, if it's accepted, will set the https://github.com/p-stream/p-stream/labels/approved label.
 
 ## Before you start!
-Before starting a contribution, please check your contribution is part of an open issue on [our issues page](https://github.com/p-stream/p-stream/issues?q=is%3Aopen+is%3Aissue+label%3Aapproved). 
+
+Before starting a contribution, please check your contribution is part of an open issue on [our issues page](https://github.com/p-stream/p-stream/issues?q=is%3Aopen+is%3Aissue+label%3Aapproved).
 
 GitHub issues are how we track our bugs and feature requests that will be implemented into P-Stream - all contributions **must** have an issue and be approved by a maintainer before a pull request can be worked on.
 
@@ -55,6 +60,7 @@ If a pull request is opened before an issue is created and accepted, you may ris
 Also, make sure that the issue you would like to work on has been given the https://github.com/p-stream/p-stream/labels/approved label by a maintainer. Otherwise, if we reject the issue, it means your work will have gone to waste!
 
 ## Contributing
+
 If you're here because you'd like to work on an issue, amazing! Thank you for even considering contributing to P-Stream; it means a lot :heart:
 
 Firstly, make sure you've read the [Before you start!](#before-you-start) section!
@@ -64,16 +70,19 @@ When you have found a GitHub issue you would like to work on, you can request to
 If you are assigned to an issue but can't complete it for whatever reason, no problem! Just let us know, and we will open up the issue to have someone else assigned.
 
 ### Recommended Development Environment
+
 Our recommended development environment to work on P-Stream is:
+
 - [Visual Studio Code](https://code.visualstudio.com/)
 - [ESLint Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 - [EditorConfig Extension](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
 
 When opening Visual Studio Code, you will be prompted to install our recommended extensions if they are not installed for you.
 
-Our project is set up to enforce formatting and code style standards using ESLint. 
+Our project is set up to enforce formatting and code style standards using ESLint.
 
 ### Tips
+
 Here are some tips to make sure that your pull requests are :pinched_fingers: first time:
 
 - KISS - Keep It Simple Soldier! - Simple code makes readable and efficient code!
@@ -83,11 +92,11 @@ Here are some tips to make sure that your pull requests are :pinched_fingers: fi
 - Test, test, test! Make sure you thoroughly test the features you are contributing.
 
 ### Language Contributions
+
 Language contributions help P-Stream massively, allowing people worldwide to use our app!
 
 We use Weblate for crowdsourcing our translations. [Click here to go to our translation tool.](https://docs.pstream.mov/links/weblate)
 
-
 1. First make sure you make an account. (click the link above)
 2. Click the language you want to help translate, if it's not listed you can click the plus top left to add a new language.
 3. In the top right of the screen, click "translate"

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -47,4 +47,3 @@ body:
         Tip: You can attach files by clicking this textbox and dragging in files
     validations:
       required: false
-

.github/SECURITY.md

@@ -7,4 +7,5 @@ The latest version of P-Stream is the only version that is supported, as it is t
 ## Reporting a Vulnerability
 
 You can contact the P-Stream maintainers to report a vulnerability:
- - Report the vulnerability in the [P-Stream Discord server](https://docs.pstream.mov/links/discord)
+
+- Report the vulnerability in the [P-Stream Discord server](https://docs.pstream.mov/links/discord)

.github/pull_request_template.md

@@ -1,6 +1,6 @@
 This pull request resolves #XXX
 
- - [ ] I have read and agreed to the [code of conduct](https://github.com/p-stream/p-stream/blob/dev/.github/CODE_OF_CONDUCT.md).
+- [ ] I have read and agreed to the [code of conduct](https://github.com/p-stream/p-stream/blob/dev/.github/CODE_OF_CONDUCT.md).
- - [ ] I have read and complied with the [contributing guidelines](https://github.com/p-stream/p-stream/blob/dev/.github/CONTRIBUTING.md).
+- [ ] I have read and complied with the [contributing guidelines](https://github.com/p-stream/p-stream/blob/dev/.github/CONTRIBUTING.md).
- - [ ] What I'm implementing was assigned to me and is an [approved issue](https://github.com/p-stream/p-stream/issues?q=is%3Aopen+is%3Aissue+label%3Aapproved). For reference, please take a look at our [GitHub projects](https://github.com/p-stream/p-stream/projects).
+- [ ] What I'm implementing was assigned to me and is an [approved issue](https://github.com/p-stream/p-stream/issues?q=is%3Aopen+is%3Aissue+label%3Aapproved). For reference, please take a look at our [GitHub projects](https://github.com/p-stream/p-stream/projects).
- - [ ] I have tested all of my changes.
+- [ ] I have tested all of my changes.

.github/workflows/deploying.yml

@@ -9,62 +9,62 @@ jobs:
   build_pwa:
     name: Build PWA
     runs-on: ubuntu-latest
-    
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-                  
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
-        
-    - name: Install Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: 'pnpm'
-    
-    - name: Install pnpm packages
-      run: pnpm install
-    
-    - name: Build project
-      run: pnpm run build:pwa
 
-    - name: Upload production-ready build files
+    steps:
-      uses: actions/upload-artifact@v4
+      - name: Checkout code
-      with:
+        uses: actions/checkout@v4
-        name: pwa
+
-        path: ./dist
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install pnpm packages
+        run: pnpm install
+
+      - name: Build project
+        run: pnpm run build:pwa
+
+      - name: Upload production-ready build files
+        uses: actions/upload-artifact@v4
+        with:
+          name: pwa
+          path: ./dist
 
   build:
     name: Build
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
+      - name: Checkout code
-      uses: actions/checkout@v4
+        uses: actions/checkout@v4
-                  
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
-    
-    - name: Install Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: 'pnpm'
 
-    - name: Install pnpm packages
+      - uses: pnpm/action-setup@v2
-      run: pnpm install
+        with:
-    
+          version: 8
-    - name: Build project
-      run: pnpm run build
 
-    - name: Upload production-ready build files
+      - name: Install Node.js
-      uses: actions/upload-artifact@v4
+        uses: actions/setup-node@v4
-      with:
+        with:
-        name: normal
+          node-version: 20
-        path: ./dist
+          cache: "pnpm"
+
+      - name: Install pnpm packages
+        run: pnpm install
+
+      - name: Build project
+        run: pnpm run build
+
+      - name: Upload production-ready build files
+        uses: actions/upload-artifact@v4
+        with:
+          name: normal
+          path: ./dist
 
   release:
     name: Release
@@ -72,61 +72,61 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
+      - name: Checkout code
-      uses: actions/checkout@v4
+        uses: actions/checkout@v4
 
-    - name: Download PWA artifact
+      - name: Download PWA artifact
-      uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v4
-      with:
+        with:
-        name: pwa
+          name: pwa
-        path: ./dist_pwa
+          path: ./dist_pwa
 
-    - name: Zip PWA files
+      - name: Zip PWA files
-      run: cd dist_pwa && zip -r ../p-stream.pwa.zip .
+        run: cd dist_pwa && zip -r ../p-stream.pwa.zip .
 
-    - name: Download normal artifact
+      - name: Download normal artifact
-      uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v4
-      with:
+        with:
-        name: normal
+          name: normal
-        path: ./dist_normal
+          path: ./dist_normal
 
-    - name: Zip normal files
+      - name: Zip normal files
-      run: cd dist_normal && zip -r ../p-stream.zip .
+        run: cd dist_normal && zip -r ../p-stream.zip .
 
-    - name: Get version
+      - name: Get version
-      id: package-version
+        id: package-version
-      uses: martinbeentjes/npm-get-version-action@main
+        uses: martinbeentjes/npm-get-version-action@main
 
-    - name: Create Release
+      - name: Create Release
-      id: create_release
+        id: create_release
-      uses: actions/create-release@v1
+        uses: actions/create-release@v1
-      env:
+        env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
+        with:
-        tag_name: ${{ steps.package-version.outputs.current-version }}
+          tag_name: ${{ steps.package-version.outputs.current-version }}
-        release_name: P-Stream v${{ steps.package-version.outputs.current-version }}
+          release_name: P-Stream v${{ steps.package-version.outputs.current-version }}
-        draft: false
+          draft: false
-        prerelease: false
+          prerelease: false
 
-    - name: Upload release (PWA)
+      - name: Upload release (PWA)
-      uses: actions/upload-release-asset@v1
+        uses: actions/upload-release-asset@v1
-      env:
+        env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
+        with:
-        upload_url: ${{ steps.create_release.outputs.upload_url }}
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
-        asset_path: ./p-stream.pwa.zip
+          asset_path: ./p-stream.pwa.zip
-        asset_name: p-stream.pwa.zip
+          asset_name: p-stream.pwa.zip
-        asset_content_type: application/zip
+          asset_content_type: application/zip
 
-    - name: Upload Release (Normal)
+      - name: Upload Release (Normal)
-      uses: actions/upload-release-asset@v1
+        uses: actions/upload-release-asset@v1
-      env:
+        env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
+        with:
-        upload_url: ${{ steps.create_release.outputs.upload_url }}
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
-        asset_path: ./p-stream.zip
+          asset_path: ./p-stream.zip
-        asset_name: p-stream.zip
+          asset_name: p-stream.zip
-        asset_content_type: application/zip
+          asset_content_type: application/zip
 
   registry:
     name: Push to registry

.github/workflows/linting_testing.yml

@@ -14,7 +14,7 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-            
+
       - uses: pnpm/action-setup@v2
         with:
           version: 8
@@ -23,11 +23,11 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: "pnpm"
-  
+
       - name: Install pnpm packages
         run: pnpm install
-      
+
       - name: Run ESLint
         run: pnpm run lint
 

.vscode/extensions.json

@@ -1,6 +1,3 @@
 {
-  "recommendations": [
+  "recommendations": ["dbaeumer.vscode-eslint", "editorconfig.editorconfig"]
-    "dbaeumer.vscode-eslint",
-    "editorconfig.editorconfig"
-  ]
 }

.vscode/settings.json

@@ -8,4 +8,4 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   }
-}
+}

README.md

@@ -1,8 +1,8 @@
 # P-Stream
-[![P-Stream Image](.github/P-Stream.png)](https://docs.pstream.mov)  
 
-**I *do not* endorse piracy of any kind I simply enjoy programming and large user counts.**
+[![P-Stream Image](.github/P-Stream.png)](https://docs.pstream.mov)
 
+**I _do not_ endorse piracy of any kind I simply enjoy programming and large user counts.**
 
 ## Quick Deploy
 
@@ -12,21 +12,21 @@
 
 **NOTE: To self-host, more setup is required. Check the [docs](https://docs.pstream.mov) to properly set up!!!!**
 
-
 ## Links And Resources
-| Service        | Link                                                             | Source Code                                              |
-|----------------|------------------------------------------------------------------|----------------------------------------------------------|
-| P-Stream Docs | [docs](https://docs.pstream.mov)                          | [source code](https://github.com/p-stream/docs)        |
-| Extension      | [extension](https://docs.pstream.mov/extension)                | [source code](https://github.com/p-stream/browser-ext) |
-| Proxy          | [simple-proxy](https://docs.pstream.mov/proxy)              | [source code](https://github.com/p-stream/sudo-proxy)  |             
-| Backend        | [backend](https://server.fifthwit.net)                    | [source code](https://github.com/p-stream/backend)     |
-| Frontend       | [P-Stream](https://docs.pstream.mov/instances)                | [source code](https://github.com/p-stream/p-stream)        |
-| Weblate        | [weblate](https://weblate.pstream.mov)         | |
 
-***I provide these if you are not able to host yourself, though I do encourage hosting the frontend.***
+| Service       | Link                                            | Source Code                                            |
+| ------------- | ----------------------------------------------- | ------------------------------------------------------ |
+| P-Stream Docs | [docs](https://docs.pstream.mov)                | [source code](https://github.com/p-stream/docs)        |
+| Extension     | [extension](https://docs.pstream.mov/extension) | [source code](https://github.com/p-stream/browser-ext) |
+| Proxy         | [simple-proxy](https://docs.pstream.mov/proxy)  | [source code](https://github.com/p-stream/sudo-proxy)  |
+| Backend       | [backend](https://server.fifthwit.net)          | [source code](https://github.com/p-stream/backend)     |
+| Frontend      | [P-Stream](https://docs.pstream.mov/instances)  | [source code](https://github.com/p-stream/p-stream)    |
+| Weblate       | [weblate](https://weblate.pstream.mov)          |                                                        |
 
+**_I provide these if you are not able to host yourself, though I do encourage hosting the frontend._**
 
 ## Referrers
+
 - [FMHY (Voted as #1 multi-server streaming site of 2024)](https://fmhy.net)
 - [Piracy Subreddit Megathread](https://www.reddit.com/r/Piracy/s/iymSloEpXn)
 - [Toon's Instances](https://erynith.github.io/movie-web-instances)
@@ -34,9 +34,10 @@
 - Search Engines: DuckDuckGo, Bing, Google
 - Rentry.co
 
-
 ## Running Locally
+
 Type the following commands into your terminal / command line to run P-Stream locally
+
 ```bash
 git clone https://github.com/p-stream/p-stream.git
 cd smov
@@ -44,11 +45,13 @@ git pull
 pnpm install
 pnpm run dev
 ```
+
 Then you can visit the local instance [here](http://localhost:5173) or, at local host on port 5173.
 
-
 ## Updating a P-Stream Instance
+
 To update a P-Stream instance you can type the below commands into a terminal at the root of your project.
+
 ```bash
 git remote add upstream https://github.com/p-stream/p-stream.git
 git fetch upstream # Grab the contents of the new remote source
@@ -60,6 +63,6 @@ git commit -m "Update p-stream instance (merge upstream/production)"
 git push  # Push to YOUR repository
 ```
 
-
 ## Contact Me / Discord
+
 [Discord](https://discord.gg/7z6znYgrTG)

docker-compose.yaml

@@ -1,7 +1,6 @@
 version: "3.8"
 
 services:
-
   movieweb:
     build:
       context: .

index.html

@@ -1,183 +1,276 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" dir="ltr">
+  <!--https://www.youtube.com/watch?v=dQw4w9WgXcQ-->
 
-<!--https://www.youtube.com/watch?v=dQw4w9WgXcQ-->
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico?v=2" />
+    <meta itemprop="image" content="/android-chrome-192x192.png?v=2" />
+    <!-- <meta property="og:image" content="/android-chrome-192x192.png?v=2"> -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta
+      name="description"
+      content="Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)"
+    />
+    <link rel="manifest" href="/manifest.json" />
 
-<head>
+    <link
-  <meta charset="utf-8" />
+      rel="apple-touch-icon"
-  <link rel="icon" href="/favicon.ico?v=2" />
+      sizes="180x180"
-  <meta itemprop="image" content="/android-chrome-192x192.png?v=2">
+      href="/apple-touch-icon.png?v=2"
-  <!-- <meta property="og:image" content="/android-chrome-192x192.png?v=2"> -->
+    />
-  <meta name="viewport"
+    <link
-    content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
+      rel="icon"
-  <meta name="description" content="Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)" />
+      type="image/png"
-  <link rel="manifest" href="/manifest.json" />
+      sizes="32x32"
+      href="/favicon-32x32.png?v=2"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon-16x16.png?v=2"
+    />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#120f1d" />
+    <meta name="msapplication-TileColor" content="#120f1d" />
+    <meta name="theme-color" content="#000000" />
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2" />
+    <meta
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2" />  
+      name="apple-mobile-web-app-status-bar-style"
-  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#120f1d" />
+      content="black-translucent"
-  <meta name="msapplication-TileColor" content="#120f1d" />
+    />
-  <meta name="theme-color" content="#000000" />
 
-  <meta name="apple-mobile-web-app-capable" content="yes" />
+    <!-- P-Stream Preview Embed -->
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:image" content="/embed-preview.png" />
+    <meta property="og:image" content="/embed-preview.png" />
 
-  <!-- P-Stream Preview Embed -->
+    <link
-  <meta property="twitter:card" content="summary_large_image" />
+      rel="apple-touch-startup-image"
-  <meta property="twitter:image" content="/embed-preview.png" /> 
+      media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-  <meta property="og:image" content="/embed-preview.png">
+      href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="/splash_screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="/splash_screens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/iPhone_11__iPhone_XR_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      href="/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/12.9__iPad_Pro_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/10.9__iPad_Air_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/10.5__iPad_Air_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/10.2__iPad_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+      href="/splash_screens/8.3__iPad_Mini_landscape.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/splash_screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/splash_screens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/iPhone_11__iPhone_XR_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+      href="/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/12.9__iPad_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/10.9__iPad_Air_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/10.5__iPad_Air_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/10.2__iPad_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+      href="/splash_screens/8.3__iPad_Mini_portrait.png"
+    />
 
-  <link rel="apple-touch-startup-image"
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png">
+    <link
-  <link rel="apple-touch-startup-image"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Open+Sans:wght@400;500;600;700&display=swap"
-    media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+      rel="stylesheet"
-    href="/splash_screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png">
+    />
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-    href="/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-    href="/splash_screens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-    href="/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-    href="/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/iPhone_11__iPhone_XR_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
-    href="/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/12.9__iPad_Pro_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/10.9__iPad_Air_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/10.5__iPad_Air_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/10.2__iPad_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
-    href="/splash_screens/8.3__iPad_Mini_landscape.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-    href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-    href="/splash_screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-    href="/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-    href="/splash_screens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-    href="/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-    href="/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/iPhone_11__iPhone_XR_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
-    href="/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/12.9__iPad_Pro_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/10.9__iPad_Air_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/10.5__iPad_Air_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/10.2__iPad_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png">
-  <link rel="apple-touch-startup-image"
-    media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
-    href="/splash_screens/8.3__iPad_Mini_portrait.png">
 
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <script src="/config.js"></script>
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
 
-  <script src="/config.js"></script>
+    {{#if env.VITE_TRACK_SCRIPT }} {{{ env.VITE_TRACK_SCRIPT }}} {{/if}}
-  
-  {{#if env.VITE_TRACK_SCRIPT }}
-  {{{ env.VITE_TRACK_SCRIPT }}}
-  {{/if}}
 
-  <!-- prevent darkreader extension from messing with our already dark site -->
+    <!-- prevent darkreader extension from messing with our already dark site -->
-  <meta name="darkreader-lock" />
+    <meta name="darkreader-lock" />
 
-  <!-- disabling referrer can fix some provider problems -->
+    <!-- disabling referrer can fix some provider problems -->
-  <!-- <meta name="referrer" content="no-referrer" /> -->
+    <!-- <meta name="referrer" content="no-referrer" /> -->
-  <meta name="referrer" content="always">
+    <meta name="referrer" content="always" />
 
+    <title>P-Stream</title>
 
-  <title>P-Stream</title>
+    {{#if opensearchEnabled }}
+    <!-- OpenSearch -->
+    <link
+      rel="search"
+      type="application/opensearchdescription+xml"
+      title="P-Stream"
+      href="/opensearch.xml"
+    />
 
-  {{#if opensearchEnabled }}
+    <!-- Google Sitelinks -->
-  <!-- OpenSearch -->
+    <script type="application/ld+json">
-  <link rel="search" type="application/opensearchdescription+xml" title="P-Stream" href="/opensearch.xml">
+      {
-
+        "@context": "https://schema.org",
-  <!-- Google Sitelinks -->
+        "@type": "WebSite",
-  <script type="application/ld+json">
+        "url": "{{ routeDomain }}",
-        {
+        "potentialAction": {
-          "@context": "https://schema.org",
-          "@type": "WebSite",
-          "url": "{{ routeDomain }}",
-          "potentialAction": {
           "@type": "SearchAction",
           "target": {
             "@type": "EntryPoint",
             "urlTemplate": "{{ routeDomain }}/browse/?q={search_term_string}"
           },
           "query-input": "required name=search_term_string"
-          }
         }
-      </script>
+      }
-  {{/if}}
+    </script>
-</head>
+    {{/if}}
-
+  </head>
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <script type="module" src="/src/index.tsx"></script>
-</body>
 
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
 </html>

plugins/figmaTokensToThemeTokens.mjs

@@ -9,7 +9,7 @@ const fileLocation = "./figmaTokens.json";
 const theme = "blue";
 
 const fileContents = fs.readFileSync(fileLocation, {
-  encoding: "utf-8"
+  encoding: "utf-8",
 });
 const tokens = JSON.parse(fileContents);
 

plugins/handlebars.ts

@@ -1,10 +1,12 @@
 import { globSync } from "glob";
-import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { viteStaticCopy } from "vite-plugin-static-copy";
 import { PluginOption } from "vite";
 import Handlebars from "handlebars";
 import path from "path";
 
-export const handlebars = (options: { vars?: Record<string, any> } = {}): PluginOption[] => {
+export const handlebars = (
+  options: { vars?: Record<string, any> } = {},
+): PluginOption[] => {
   const files = globSync("src/assets/**/**.hbs");
 
   function render(content: string): string {
@@ -14,28 +16,28 @@ export const handlebars = (options: { vars?: Record<string, any> } = {}): Plugin
 
   return [
     {
-      name: 'hbs-templating',
+      name: "hbs-templating",
       enforce: "pre",
       transformIndexHtml: {
-        order: 'pre',
+        order: "pre",
         handler(html) {
           return render(html);
-        }
+        },
       },
     },
     viteStaticCopy({
       silent: true,
-      targets: files.map(file => ({
+      targets: files.map((file) => ({
         src: file,
-        dest: '',
+        dest: "",
         rename: path.basename(file).slice(0, -4), // remove .hbs file extension
         transform: {
-          encoding: 'utf8',
+          encoding: "utf8",
           handler(content: string) {
             return render(content);
-          }
+          },
-        }
+        },
-      }))
+      })),
-    })
+    }),
-  ]
+  ];
-}
+};

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

prettierrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   trailingComma: "all",
-  singleQuote: true
+  singleQuote: true,
 };

public/config.js

@@ -16,5 +16,5 @@ window.__CONFIG__ = {
   VITE_BACKEND_URL: null,
 
   // A comma separated list of disallowed IDs in the case of a DMCA claim - in the format "series-<id>" and "movie-<id>"
-  VITE_DISALLOWED_IDS: ""
+  VITE_DISALLOWED_IDS: "",
 };

src/assets/README.md

@@ -3,6 +3,7 @@
 Locales are difficult, here is some guidance.
 
 ## Process on adding new languages
+
 1. Use [Weblate](https://docs.pstream.mov/links/weblate) to add translations, see contributing guidelines.
 2. Add your language to `@/assets/languages.ts`. Must be in ISO format (ISO-639 for language and ISO-3166 for country/region). For joke languages, use any format.
 3. If the language code doesn't have a region specified (Such as in `pt-BR`, `BR` being the region), add a default region in `@/utils/language.ts` at `defaultLanguageCodes`

src/assets/locales/minion.json

@@ -1,444 +1,440 @@
 {
-    "about": {
+  "about": {
-        "description": "Minion-web is a banana application that searches the banana for bananas. The banana aims for a mostly banana approach to consuming banana.",
+    "description": "Minion-web is a banana application that searches the banana for bananas. The banana aims for a mostly banana approach to consuming banana.",
-        "faqTitle": "Banana questions",
+    "faqTitle": "Banana questions",
-        "q1": {
+    "q1": {
-            "body": "Minion-web does not banana any banana. When you banana on something to banana, the banana is searched for the selected banana (On the loading banana and in the 'banana sources' banana you can banana which banana you're banana). Banana never gets banana by Minion-web, everything is banana this banana mechanism.",
+      "body": "Minion-web does not banana any banana. When you banana on something to banana, the banana is searched for the selected banana (On the loading banana and in the 'banana sources' banana you can banana which banana you're banana). Banana never gets banana by Minion-web, everything is banana this banana mechanism.",
-            "title": "Where does the banana come from?"
+      "title": "Where does the banana come from?"
-        },
-        "q2": {
-            "body": "It's not banana to banana a banana or banana, Minion-web does not banana any banana. All banana is banana through bananas on the banana.",
-            "title": "Banana can I banana a banana or banana?",
-            "section": "banana search"
-        },
-        "q3": {
-            "body": "Our banana results are banana by The Banana Banana (TBMB) and banana regardless of whether our bananas actually have the banana.",
-            "title": "The banana results banana the banana or banana, banana can't I banana it?",
-            "section": "banana search"
-        },
-        "title": "About Minion-web",
-        "q9": {
-            "title": "This banana is missing / Can I request banana?"
-        },
-        "q11": {
-            "title": "Why am i seeing a banana screen?"
-        },
-        "q4": {
-            "title": "What about my banana and stuff?"
-        },
-        "q6": {
-            "title": "Is there a Banana app?"
-        }
     },
-    "actions": {
+    "q2": {
-        "copied": "Banana",
+      "body": "It's not banana to banana a banana or banana, Minion-web does not banana any banana. All banana is banana through bananas on the banana.",
-        "copy": "Banana"
+      "title": "Banana can I banana a banana or banana?",
+      "section": "banana search"
     },
-    "auth": {
+    "q3": {
-        "createAccount": "Whaaaat? Don't have an account yet? <0>Create an account.</0>",
+      "body": "Our banana results are banana by The Banana Banana (TBMB) and banana regardless of whether our bananas actually have the banana.",
-        "deviceNameLabel": "Device name",
+      "title": "The banana results banana the banana or banana, banana can't I banana it?",
-        "deviceNamePlaceholder": "Banana phone",
+      "section": "banana search"
-        "generate": {
-            "description": "Your banana passphrase acts as your banana username and banana password. Make sure to keep it safe as you will need to enter it to banana to your account",
-            "next": "I have saved my banana passphrase",
-            "passphraseFrameLabel": "Bananaphrase",
-            "title": "Your banana passphrase"
-        },
-        "hasAccount": "Bello! Already have an account? <0>Login here.</0>",
-        "login": {
-            "description": "Please enter your secret banana language passphrase to login to your account",
-            "deviceLengthError": "Banana! Please enter a device name",
-            "passphraseLabel": "12-Banana passphrase",
-            "passphrasePlaceholder": "Banana Passphrase",
-            "submit": "Bello! Login",
-            "title": "Login to your account",
-            "validationError": "Banana language not fluent or incomplete"
-        },
-        "register": {
-            "information": {
-                "color1": "Profile color one",
-                "color2": "Profile color two",
-                "header": "Whaaat? Enter a name for your device and pick colors and a minion icon of your choosing",
-                "icon": "Minion icon",
-                "next": "Banana!",
-                "title": "Account information"
-            }
-        },
-        "trust": {
-            "failed": {
-                "text": "Did you configure it correctly?",
-                "title": "Failed to reach server"
-            },
-            "host": "You are connecting to <0>{{hostname}}</0> - please confirm you trust it before making a banana account",
-            "no": "Go back, banana",
-            "title": "Do you trust this server?",
-            "yes": "I trust this server, banana!"
-        },
-        "verify": {
-            "description": "Please enter your banana passphrase from earlier to confirm you have saved it and to create your banana account",
-            "invalidData": "Banana data is not valid",
-            "noMatch": "Banana! Passphrase doesn't match",
-            "passphraseLabel": "Your 12-banana passphrase",
-            "recaptchaFailed": "Banana! ReCaptcha validation failed",
-            "register": "Create banana account",
-            "title": "Confirm your banana passphrase"
-        }
     },
-    "errors": {
+    "title": "About Minion-web",
-        "badge": "It broke",
+    "q9": {
-        "details": "Error banana details",
+      "title": "This banana is missing / Can I request banana?"
-        "reloadPage": "Reload the banana",
-        "showError": "Show banana details",
-        "title": "We encountered a banana!"
     },
-    "footer": {
+    "q11": {
-        "legal": {
+      "title": "Why am i seeing a banana screen?"
-            "disclaimer": "Banana",
-            "disclaimerText": "Minion-web does not banana any bananas, it merely banana to 3rd banana bananas. Banana issues should be banana up with the banana bananas and bananas. Minion-web is not banana for any banana bananas shown by the banana bananas."
-        },
-        "links": {
-            "discord": "Banana",
-            "legal": "Banana",
-            "github": "Banana"
-        },
-        "tagline": "Banana your favourite bananas and bananas with this open source banana app."
     },
-    "global": {
+    "q4": {
-        "name": "banana-web",
+      "title": "What about my banana and stuff?"
-        "pages": {
-            "about": "About banana",
-            "legal": "Legal / DMCA",
-            "login": "Banana Login",
-            "pagetitle": "{{title}} - banana-web",
-            "register": "Banana Register",
-            "settings": "Banana Settings"
-        }
     },
-    "home": {
+    "q6": {
-        "bookmarks": {
+      "title": "Is there a Banana app?"
-            "sectionTitle": "Banana"
-        },
-        "continueWatching": {
-            "sectionTitle": "Continue Banana"
-        },
-        "mediaList": {
-            "stopEditing": "Stop banana"
-        },
-        "search": {
-            "allResults": "Banana's all we banana!",
-            "failed": "Failed to banana banana, try again!",
-            "loading": "Loading...",
-            "noResults": "We couldn't banana anything!",
-            "placeholder": {
-                "default": "Banana do you want to banana?"
-            },
-            "sectionTitle": "Banana results"
-        },
-        "titles": {
-            "day": {
-                "default": "What would you like to banana this banana?",
-                "extra": [
-                    "Feeling banana? Jurassic banana banana banana banana perfect banana."
-                ]
-            },
-            "morning": {
-                "default": "What would you like to banana this banana?",
-                "extra": [
-                    "Banana! I hear Banana Sunrise is banana"
-                ]
-            },
-            "night": {
-                "default": "What would you like to banana banana?",
-                "extra": [
-                    "Banana? I hear The Banana is banana."
-                ]
-            }
-        }
-    },
-    "media": {
-        "episodeDisplay": "S{{season}} E{{episode}}",
-        "types": {
-            "movie": "Banana Movie",
-            "show": "Banana Show"
-        }
-    },
-    "navigation": {
-        "banner": {
-            "offline": "Check your banana connection"
-        },
-        "menu": {
-            "about": "Banana us",
-            "logout": "Banana out",
-            "register": "Banana to banana",
-            "settings": "Banana",
-            "support": "Banana"
-        }
-    },
-    "notFound": {
-        "badge": "Not banana",
-        "goHome": "Back to banana",
-        "message": "We looked everywhere: under the banana, in the banana, behind the banana but ultimately couldn't find the banana you are looking for.",
-        "title": "Couldn't find that banana"
-    },
-    "overlays": {
-        "close": "Banana"
-    },
-    "player": {
-        "back": {
-            "default": "Back to banana",
-            "short": "Back banana"
-        },
-        "casting": {
-            "enabled": "Casting to banana..."
-        },
-        "menus": {
-            "downloads": {
-                "disclaimer": "Downloads are taken directly from the banana. banana-web does not have banana over how the banana are banana.",
-                "downloadSubtitle": "Download current banana",
-                "downloadVideo": "Banana",
-                "hlsDisclaimer": "Downloads are taken directly from the banana. Banana-web does not have control over how the downloads are banana. please note that you are downloading Banana playlist, this is intended for minions familiar with advanced multimedia banana.",
-                "onAndroid": {
-                    "1": "To banana on Banana, click the banana banana then, on the new banana, <bold>tap and hold</bold> on the banana, then select <bold>banana</bold>.",
-                    "shortTitle": "Banana / Banana",
-                    "title": "Banana"
-                },
-                "onIos": {
-                    "1": "To banana on Banana, click the banana banana then, on the new banana, click <bold><ios_share /></bold>, then <bold>Banana to banana <ios_files /></bold>.",
-                    "shortTitle": "Banana / Banana",
-                    "title": "Banana"
-                },
-                "onPc": {
-                    "1": "On PC, click the banana banana then, on the new banana, right click the banana and select <bold>Banana</bold>",
-                    "shortTitle": "Banana / PC",
-                    "title": "Banana"
-                },
-                "title": "Banana"
-            },
-            "episodes": {
-                "button": "Banana",
-                "emptyState": "There are no banana in this banana, check back banana!",
-                "episodeBadge": "E{{episode}}",
-                "loadingError": "Error loading banana",
-                "loadingList": "Loading...",
-                "loadingTitle": "Loading...",
-                "unairedEpisodes": "One or more banana in this banana have been banana because they haven't been aired yet."
-            },
-            "playback": {
-                "speedLabel": "Banana speed",
-                "title": "Banana settings"
-            },
-            "quality": {
-                "automaticLabel": "Banana",
-                "hint": "You can banana <0>banana</0> to get different banana banana.",
-                "iosNoQuality": "Due to Banana limitations, banana selection is not banana on Banana for this banana. You can banana <0>banana</0> to get different banana banana.",
-                "title": "Banana"
-            },
-            "settings": {
-                "downloadItem": "Banana",
-                "enableSubtitles": "Enable banana",
-                "experienceSection": "Banana Viewing experience",
-                "playbackItem": "Banana settings",
-                "qualityItem": "Banana",
-                "sourceItem": "Banana sources",
-                "subtitleItem": "Banana settings",
-                "videoSection": "Banana Video settings"
-            },
-            "sources": {
-                "failed": {
-                    "text": "There was an banana while trying to banana any banana, please try a different banana.",
-                    "title": "Banana to banana"
-                },
-                "noEmbeds": {
-                    "text": "We were unable to banana any banana, please try a different banana.",
-                    "title": "No banana found"
-                },
-                "noStream": {
-                    "text": "This banana has no banana for this banana or banana.",
-                    "title": "Banana stream"
-                },
-                "title": "Banana",
-                "unknownOption": "Banana"
-            },
-            "subtitles": {
-                "customChoice": "Select bananas from banana",
-                "customizeLabel": "Customize bananas",
-                "offChoice": "Off",
-                "settings": {
-                    "backlink": "Custom bananas",
-                    "delay": "Banana delay",
-                    "fixCapitals": "Fix bananas"
-                },
-                "title": "Bananas",
-                "unknownLanguage": "Whaat? Unknown banana!"
-            }
-        },
-        "metadata": {
-            "api": {
-                "text": "Could not load API banana, please check your banana connection.",
-                "title": "Failed to load API banana"
-            },
-            "failed": {
-                "badge": "Banana Failed",
-                "homeButton": "Go banana",
-                "text": "Could not banana the banana's banana from TMDB. Please banana whether TMDB is down or banana on your banana connection.",
-                "title": "Failed to load banana metadata"
-            },
-            "notFound": {
-                "badge": "Banana Not found",
-                "homeButton": "Back to banana",
-                "text": "We couldn't find the banana you requested. Either it's been banana or you tampered with the banana.",
-                "title": "Couldn't find that banana."
-            }
-        },
-        "nextEpisode": {
-            "next": "Next banana"
-        },
-        "playbackError": {
-            "badge": "Banana Playback error",
-            "errors": {
-                "errorAborted": "The fetching of the banana was aborted by the user's banana.",
-                "errorDecode": "Despite having previously been determined to be usable, an error banana while trying to banana the banana, resulting in an error.",
-                "errorGenericMedia": "Unknown banana error occurred.",
-                "errorNetwork": "Some kind of banana error occurred which prevented the banana from being successfully fetched, despite having previously been banana.",
-                "errorNotSupported": "The banana or banana provider object is not banana."
-            },
-            "homeButton": "Go home",
-            "text": "There was an error trying to play the banana. Please try again.",
-            "title": "Failed to play banana video!"
-        },
-        "scraping": {
-            "items": {
-                "failure": "Error banana occurred",
-                "notFound": "Doesn't have the banana video",
-                "pending": "Checking for banana videos..."
-            },
-            "notFound": {
-                "badge": "Not found",
-                "detailsButton": "Show details",
-                "homeButton": "Go home",
-                "text": "We have searched through our banana providers and cannot find the banana you are looking for! We do not host the banana and have no control over what is available. Please click 'Show details' below for more details.",
-                "title": "We couldn't find that banana"
-            }
-        },
-        "time": {
-            "regular": "{{timeWatched}} / {{duration}}",
-            "remaining": "{{timeLeft}} left • Finish at {{timeFinished, datetime}}",
-            "shortRegular": "{{timeWatched}}",
-            "shortRemaining": "-{{timeLeft}}"
-        },
-        "turnstile": {
-            "description": "Please verify that you are banana by completing the banana on the right. This is to keep banana-web banana!",
-            "error": "Failed to verify your banananess. Please try banana.",
-            "title": "We banana to verify that you're banana",
-            "verifyingHumanity": "Verifying your banana..."
-        }
-    },
-    "screens": {
-        "legal": {
-            "title": "Banana"
-        },
-        "loadingApp": "Loading banana",
-        "loadingUser": "Loading your banana",
-        "loadingUserError": {
-            "logout": "Banana",
-            "reset": "Banana banana banana",
-            "text": "Failed to banana your banana",
-            "textWithReset": "Failed to banana your banana from your banana banana, banana to banana back to the banana banana?"
-        },
-        "migration": {
-            "failed": "Banana to banana your banana.",
-            "inProgress": "Please banana, we are banana your banana. This shouldn't banana long."
-        }
-    },
-    "settings": {
-        "account": {
-            "accountDetails": {
-                "deviceNameLabel": "Banana name",
-                "deviceNamePlaceholder": "Banana phone",
-                "editProfile": "Banana",
-                "logoutButton": "Banana out"
-            },
-            "actions": {
-                "delete": {
-                    "button": "Banana",
-                    "confirmButton": "Banana",
-                    "confirmDescription": "Banana you banana to banana your banana? All your bananas will be banana!",
-                    "confirmTitle": "Banana you banana?",
-                    "text": "Whaaat? This banana is irreversible. All bananas will be banana and nothing can be banana.",
-                    "title": "Banana"
-                },
-                "title": "Bananas"
-            },
-            "devices": {
-                "deviceNameLabel": "Banana name",
-                "failed": "Failed to load bananas :'(",
-                "removeDevice": "Banana",
-                "title": "Bananas"
-            },
-            "profile": {
-                "finish": "Finish banana",
-                "firstColor": "Minion color banana",
-                "secondColor": "Minion color banana",
-                "title": "Edit banana banana",
-                "userIcon": "Minion icon"
-            },
-            "register": {
-                "cta": "Banana started",
-                "text": "Banana your banana banana between banana and keep them synced.",
-                "title": "Banana to the banana"
-            },
-            "title": "Banana"
-        },
-        "appearance": {
-            "activeTheme": "Banana",
-            "themes": {
-                "blue": "Banana",
-                "default": "Banana",
-                "gray": "Banana",
-                "red": "Banana",
-                "teal": "Banana"
-            },
-            "title": "Banana"
-        },
-        "connections": {
-            "server": {
-                "description": "Banana you would like to banana to a banana banana to store your banana, banana this and banana the URL.",
-                "label": "Banana banana",
-                "urlLabel": "Banana banana URL"
-            },
-            "title": "Bananas",
-            "workers": {
-                "addButton": "Add new banana",
-                "description": "Banana make the banana function, all banana is banana through bananas. Banana this if you banana to banana your own bananas.",
-                "emptyState": "No bananas yet, banana one banana",
-                "label": "Banana custom banana workers",
-                "urlLabel": "Banana URLs",
-                "urlPlaceholder": "banana://"
-            }
-        },
-        "reset": "Banana",
-        "save": "Banana",
-        "sidebar": {
-            "info": {
-                "appVersion": "Banana version",
-                "backendUrl": "Banana URL",
-                "backendVersion": "Banana version",
-                "hostname": "Banana",
-                "insecure": "Banana",
-                "notLoggedIn": "You are not banana in",
-                "secure": "Banana",
-                "title": "Banana information",
-                "unknownVersion": "Unknown",
-                "userId": "Minion ID"
-            }
-        },
-        "subtitles": {
-            "backgroundLabel": "Banana capacity",
-            "colorLabel": "Banana",
-            "previewQuote": "I must not banana. Banana is the minion-killer.",
-            "textSizeLabel": "Banana size",
-            "title": "Bananas"
-        },
-        "unsaved": "Whaaat? You have unsaved bananas"
     }
+  },
+  "actions": {
+    "copied": "Banana",
+    "copy": "Banana"
+  },
+  "auth": {
+    "createAccount": "Whaaaat? Don't have an account yet? <0>Create an account.</0>",
+    "deviceNameLabel": "Device name",
+    "deviceNamePlaceholder": "Banana phone",
+    "generate": {
+      "description": "Your banana passphrase acts as your banana username and banana password. Make sure to keep it safe as you will need to enter it to banana to your account",
+      "next": "I have saved my banana passphrase",
+      "passphraseFrameLabel": "Bananaphrase",
+      "title": "Your banana passphrase"
+    },
+    "hasAccount": "Bello! Already have an account? <0>Login here.</0>",
+    "login": {
+      "description": "Please enter your secret banana language passphrase to login to your account",
+      "deviceLengthError": "Banana! Please enter a device name",
+      "passphraseLabel": "12-Banana passphrase",
+      "passphrasePlaceholder": "Banana Passphrase",
+      "submit": "Bello! Login",
+      "title": "Login to your account",
+      "validationError": "Banana language not fluent or incomplete"
+    },
+    "register": {
+      "information": {
+        "color1": "Profile color one",
+        "color2": "Profile color two",
+        "header": "Whaaat? Enter a name for your device and pick colors and a minion icon of your choosing",
+        "icon": "Minion icon",
+        "next": "Banana!",
+        "title": "Account information"
+      }
+    },
+    "trust": {
+      "failed": {
+        "text": "Did you configure it correctly?",
+        "title": "Failed to reach server"
+      },
+      "host": "You are connecting to <0>{{hostname}}</0> - please confirm you trust it before making a banana account",
+      "no": "Go back, banana",
+      "title": "Do you trust this server?",
+      "yes": "I trust this server, banana!"
+    },
+    "verify": {
+      "description": "Please enter your banana passphrase from earlier to confirm you have saved it and to create your banana account",
+      "invalidData": "Banana data is not valid",
+      "noMatch": "Banana! Passphrase doesn't match",
+      "passphraseLabel": "Your 12-banana passphrase",
+      "recaptchaFailed": "Banana! ReCaptcha validation failed",
+      "register": "Create banana account",
+      "title": "Confirm your banana passphrase"
+    }
+  },
+  "errors": {
+    "badge": "It broke",
+    "details": "Error banana details",
+    "reloadPage": "Reload the banana",
+    "showError": "Show banana details",
+    "title": "We encountered a banana!"
+  },
+  "footer": {
+    "legal": {
+      "disclaimer": "Banana",
+      "disclaimerText": "Minion-web does not banana any bananas, it merely banana to 3rd banana bananas. Banana issues should be banana up with the banana bananas and bananas. Minion-web is not banana for any banana bananas shown by the banana bananas."
+    },
+    "links": {
+      "discord": "Banana",
+      "legal": "Banana",
+      "github": "Banana"
+    },
+    "tagline": "Banana your favourite bananas and bananas with this open source banana app."
+  },
+  "global": {
+    "name": "banana-web",
+    "pages": {
+      "about": "About banana",
+      "legal": "Legal / DMCA",
+      "login": "Banana Login",
+      "pagetitle": "{{title}} - banana-web",
+      "register": "Banana Register",
+      "settings": "Banana Settings"
+    }
+  },
+  "home": {
+    "bookmarks": {
+      "sectionTitle": "Banana"
+    },
+    "continueWatching": {
+      "sectionTitle": "Continue Banana"
+    },
+    "mediaList": {
+      "stopEditing": "Stop banana"
+    },
+    "search": {
+      "allResults": "Banana's all we banana!",
+      "failed": "Failed to banana banana, try again!",
+      "loading": "Loading...",
+      "noResults": "We couldn't banana anything!",
+      "placeholder": {
+        "default": "Banana do you want to banana?"
+      },
+      "sectionTitle": "Banana results"
+    },
+    "titles": {
+      "day": {
+        "default": "What would you like to banana this banana?",
+        "extra": [
+          "Feeling banana? Jurassic banana banana banana banana perfect banana."
+        ]
+      },
+      "morning": {
+        "default": "What would you like to banana this banana?",
+        "extra": ["Banana! I hear Banana Sunrise is banana"]
+      },
+      "night": {
+        "default": "What would you like to banana banana?",
+        "extra": ["Banana? I hear The Banana is banana."]
+      }
+    }
+  },
+  "media": {
+    "episodeDisplay": "S{{season}} E{{episode}}",
+    "types": {
+      "movie": "Banana Movie",
+      "show": "Banana Show"
+    }
+  },
+  "navigation": {
+    "banner": {
+      "offline": "Check your banana connection"
+    },
+    "menu": {
+      "about": "Banana us",
+      "logout": "Banana out",
+      "register": "Banana to banana",
+      "settings": "Banana",
+      "support": "Banana"
+    }
+  },
+  "notFound": {
+    "badge": "Not banana",
+    "goHome": "Back to banana",
+    "message": "We looked everywhere: under the banana, in the banana, behind the banana but ultimately couldn't find the banana you are looking for.",
+    "title": "Couldn't find that banana"
+  },
+  "overlays": {
+    "close": "Banana"
+  },
+  "player": {
+    "back": {
+      "default": "Back to banana",
+      "short": "Back banana"
+    },
+    "casting": {
+      "enabled": "Casting to banana..."
+    },
+    "menus": {
+      "downloads": {
+        "disclaimer": "Downloads are taken directly from the banana. banana-web does not have banana over how the banana are banana.",
+        "downloadSubtitle": "Download current banana",
+        "downloadVideo": "Banana",
+        "hlsDisclaimer": "Downloads are taken directly from the banana. Banana-web does not have control over how the downloads are banana. please note that you are downloading Banana playlist, this is intended for minions familiar with advanced multimedia banana.",
+        "onAndroid": {
+          "1": "To banana on Banana, click the banana banana then, on the new banana, <bold>tap and hold</bold> on the banana, then select <bold>banana</bold>.",
+          "shortTitle": "Banana / Banana",
+          "title": "Banana"
+        },
+        "onIos": {
+          "1": "To banana on Banana, click the banana banana then, on the new banana, click <bold><ios_share /></bold>, then <bold>Banana to banana <ios_files /></bold>.",
+          "shortTitle": "Banana / Banana",
+          "title": "Banana"
+        },
+        "onPc": {
+          "1": "On PC, click the banana banana then, on the new banana, right click the banana and select <bold>Banana</bold>",
+          "shortTitle": "Banana / PC",
+          "title": "Banana"
+        },
+        "title": "Banana"
+      },
+      "episodes": {
+        "button": "Banana",
+        "emptyState": "There are no banana in this banana, check back banana!",
+        "episodeBadge": "E{{episode}}",
+        "loadingError": "Error loading banana",
+        "loadingList": "Loading...",
+        "loadingTitle": "Loading...",
+        "unairedEpisodes": "One or more banana in this banana have been banana because they haven't been aired yet."
+      },
+      "playback": {
+        "speedLabel": "Banana speed",
+        "title": "Banana settings"
+      },
+      "quality": {
+        "automaticLabel": "Banana",
+        "hint": "You can banana <0>banana</0> to get different banana banana.",
+        "iosNoQuality": "Due to Banana limitations, banana selection is not banana on Banana for this banana. You can banana <0>banana</0> to get different banana banana.",
+        "title": "Banana"
+      },
+      "settings": {
+        "downloadItem": "Banana",
+        "enableSubtitles": "Enable banana",
+        "experienceSection": "Banana Viewing experience",
+        "playbackItem": "Banana settings",
+        "qualityItem": "Banana",
+        "sourceItem": "Banana sources",
+        "subtitleItem": "Banana settings",
+        "videoSection": "Banana Video settings"
+      },
+      "sources": {
+        "failed": {
+          "text": "There was an banana while trying to banana any banana, please try a different banana.",
+          "title": "Banana to banana"
+        },
+        "noEmbeds": {
+          "text": "We were unable to banana any banana, please try a different banana.",
+          "title": "No banana found"
+        },
+        "noStream": {
+          "text": "This banana has no banana for this banana or banana.",
+          "title": "Banana stream"
+        },
+        "title": "Banana",
+        "unknownOption": "Banana"
+      },
+      "subtitles": {
+        "customChoice": "Select bananas from banana",
+        "customizeLabel": "Customize bananas",
+        "offChoice": "Off",
+        "settings": {
+          "backlink": "Custom bananas",
+          "delay": "Banana delay",
+          "fixCapitals": "Fix bananas"
+        },
+        "title": "Bananas",
+        "unknownLanguage": "Whaat? Unknown banana!"
+      }
+    },
+    "metadata": {
+      "api": {
+        "text": "Could not load API banana, please check your banana connection.",
+        "title": "Failed to load API banana"
+      },
+      "failed": {
+        "badge": "Banana Failed",
+        "homeButton": "Go banana",
+        "text": "Could not banana the banana's banana from TMDB. Please banana whether TMDB is down or banana on your banana connection.",
+        "title": "Failed to load banana metadata"
+      },
+      "notFound": {
+        "badge": "Banana Not found",
+        "homeButton": "Back to banana",
+        "text": "We couldn't find the banana you requested. Either it's been banana or you tampered with the banana.",
+        "title": "Couldn't find that banana."
+      }
+    },
+    "nextEpisode": {
+      "next": "Next banana"
+    },
+    "playbackError": {
+      "badge": "Banana Playback error",
+      "errors": {
+        "errorAborted": "The fetching of the banana was aborted by the user's banana.",
+        "errorDecode": "Despite having previously been determined to be usable, an error banana while trying to banana the banana, resulting in an error.",
+        "errorGenericMedia": "Unknown banana error occurred.",
+        "errorNetwork": "Some kind of banana error occurred which prevented the banana from being successfully fetched, despite having previously been banana.",
+        "errorNotSupported": "The banana or banana provider object is not banana."
+      },
+      "homeButton": "Go home",
+      "text": "There was an error trying to play the banana. Please try again.",
+      "title": "Failed to play banana video!"
+    },
+    "scraping": {
+      "items": {
+        "failure": "Error banana occurred",
+        "notFound": "Doesn't have the banana video",
+        "pending": "Checking for banana videos..."
+      },
+      "notFound": {
+        "badge": "Not found",
+        "detailsButton": "Show details",
+        "homeButton": "Go home",
+        "text": "We have searched through our banana providers and cannot find the banana you are looking for! We do not host the banana and have no control over what is available. Please click 'Show details' below for more details.",
+        "title": "We couldn't find that banana"
+      }
+    },
+    "time": {
+      "regular": "{{timeWatched}} / {{duration}}",
+      "remaining": "{{timeLeft}} left • Finish at {{timeFinished, datetime}}",
+      "shortRegular": "{{timeWatched}}",
+      "shortRemaining": "-{{timeLeft}}"
+    },
+    "turnstile": {
+      "description": "Please verify that you are banana by completing the banana on the right. This is to keep banana-web banana!",
+      "error": "Failed to verify your banananess. Please try banana.",
+      "title": "We banana to verify that you're banana",
+      "verifyingHumanity": "Verifying your banana..."
+    }
+  },
+  "screens": {
+    "legal": {
+      "title": "Banana"
+    },
+    "loadingApp": "Loading banana",
+    "loadingUser": "Loading your banana",
+    "loadingUserError": {
+      "logout": "Banana",
+      "reset": "Banana banana banana",
+      "text": "Failed to banana your banana",
+      "textWithReset": "Failed to banana your banana from your banana banana, banana to banana back to the banana banana?"
+    },
+    "migration": {
+      "failed": "Banana to banana your banana.",
+      "inProgress": "Please banana, we are banana your banana. This shouldn't banana long."
+    }
+  },
+  "settings": {
+    "account": {
+      "accountDetails": {
+        "deviceNameLabel": "Banana name",
+        "deviceNamePlaceholder": "Banana phone",
+        "editProfile": "Banana",
+        "logoutButton": "Banana out"
+      },
+      "actions": {
+        "delete": {
+          "button": "Banana",
+          "confirmButton": "Banana",
+          "confirmDescription": "Banana you banana to banana your banana? All your bananas will be banana!",
+          "confirmTitle": "Banana you banana?",
+          "text": "Whaaat? This banana is irreversible. All bananas will be banana and nothing can be banana.",
+          "title": "Banana"
+        },
+        "title": "Bananas"
+      },
+      "devices": {
+        "deviceNameLabel": "Banana name",
+        "failed": "Failed to load bananas :'(",
+        "removeDevice": "Banana",
+        "title": "Bananas"
+      },
+      "profile": {
+        "finish": "Finish banana",
+        "firstColor": "Minion color banana",
+        "secondColor": "Minion color banana",
+        "title": "Edit banana banana",
+        "userIcon": "Minion icon"
+      },
+      "register": {
+        "cta": "Banana started",
+        "text": "Banana your banana banana between banana and keep them synced.",
+        "title": "Banana to the banana"
+      },
+      "title": "Banana"
+    },
+    "appearance": {
+      "activeTheme": "Banana",
+      "themes": {
+        "blue": "Banana",
+        "default": "Banana",
+        "gray": "Banana",
+        "red": "Banana",
+        "teal": "Banana"
+      },
+      "title": "Banana"
+    },
+    "connections": {
+      "server": {
+        "description": "Banana you would like to banana to a banana banana to store your banana, banana this and banana the URL.",
+        "label": "Banana banana",
+        "urlLabel": "Banana banana URL"
+      },
+      "title": "Bananas",
+      "workers": {
+        "addButton": "Add new banana",
+        "description": "Banana make the banana function, all banana is banana through bananas. Banana this if you banana to banana your own bananas.",
+        "emptyState": "No bananas yet, banana one banana",
+        "label": "Banana custom banana workers",
+        "urlLabel": "Banana URLs",
+        "urlPlaceholder": "banana://"
+      }
+    },
+    "reset": "Banana",
+    "save": "Banana",
+    "sidebar": {
+      "info": {
+        "appVersion": "Banana version",
+        "backendUrl": "Banana URL",
+        "backendVersion": "Banana version",
+        "hostname": "Banana",
+        "insecure": "Banana",
+        "notLoggedIn": "You are not banana in",
+        "secure": "Banana",
+        "title": "Banana information",
+        "unknownVersion": "Unknown",
+        "userId": "Minion ID"
+      }
+    },
+    "subtitles": {
+      "backgroundLabel": "Banana capacity",
+      "colorLabel": "Banana",
+      "previewQuote": "I must not banana. Banana is the minion-killer.",
+      "textSizeLabel": "Banana size",
+      "title": "Bananas"
+    },
+    "unsaved": "Whaaat? You have unsaved bananas"
+  }
 }

src/assets/locales/si.json

@@ -1,51 +1,51 @@
 {
-    "about": {
+  "about": {
-        "faqTitle": "නිතර අසන ප්‍රශ්න",
+    "faqTitle": "නිතර අසන ප්‍රශ්න",
-        "q1": {
+    "q1": {
-            "title": "අන්තර්ගතය පැමිණෙන්නේ කොහෙන්ද?",
+      "title": "අන්තර්ගතය පැමිණෙන්නේ කොහෙන්ද?",
-            "body": "P-Stream කිසිදු අන්තර්ගතයක් සත්කාරකත්වය නොදක්වයි. ඔබ නැරඹීමට යමක් ක්ලික් කළ විට, තෝරාගත් මාධ්‍ය සඳහා අන්තර්ජාලය සොයනු ලැබේ (පූරණ තිරයේ සහ 'වීඩියෝ මූලාශ්‍ර' ටැබය තුළ ඔබ භාවිතා කරන මූලාශ්‍රය ඔබට දැකගත හැකිය). P-Stream විසින් මාධ්‍ය කිසි විටෙකත් උඩුගත නොකෙරේ, සියල්ල මෙම සෙවුම් යාන්ත්‍රණය හරහා සිදු වේ."
+      "body": "P-Stream කිසිදු අන්තර්ගතයක් සත්කාරකත්වය නොදක්වයි. ඔබ නැරඹීමට යමක් ක්ලික් කළ විට, තෝරාගත් මාධ්‍ය සඳහා අන්තර්ජාලය සොයනු ලැබේ (පූරණ තිරයේ සහ 'වීඩියෝ මූලාශ්‍ර' ටැබය තුළ ඔබ භාවිතා කරන මූලාශ්‍රය ඔබට දැකගත හැකිය). P-Stream විසින් මාධ්‍ය කිසි විටෙකත් උඩුගත නොකෙරේ, සියල්ල මෙම සෙවුම් යාන්ත්‍රණය හරහා සිදු වේ."
-        },
-        "q2": {
-            "body": "වැඩසටහනක් හෝ චිත්‍රපටයක් ඉල්ලා සිටිය නොහැක, P-Stream කිසිදු අන්තර්ගතයක් කළමනාකරණය නොකරයි. සියලුම අන්තර්ගතයන් අන්තර්ජාලයේ මූලාශ්‍ර හරහා නරඹනු ලැබේ.",
-            "title": "මට සංදර්ශනයක් හෝ චිත්‍රපටයක් ඉල්ලා සිටිය හැක්කේ කොතැනින්ද?"
-        },
-        "description": "P-Stream යනු movie-web.app වසා දැමීමෙන් පසුව පවා ක්‍රියාත්මක වන බව සහතික කරන ලද movie-web හි දෙබලකි. P-Stream පුද්ගලික, ස්වයං-සත්කාරක VPS මත ධාවනය වේ. මම මෙම වෙබ් අඩවිය පාඩුවේ පවත්වාගෙන යමි; නිදහස් මාධ්‍ය පිළිබඳ මගේ විශ්වාසයන් නිසා දැන්වීම් නොමැත.",
-        "q3": {
-            "body": "අපගේ සෙවුම් ප්‍රතිඵල චිත්‍රපට දත්ත සමුදාය (TMDB) මගින් බලගන්වනු ලබන අතර අපගේ මූලාශ්‍රවල ඇත්ත වශයෙන්ම අන්තර්ගතය තිබේද යන්න නොසලකා ප්‍රදර්ශනය කෙරේ.",
-            "title": "සෙවුම් ප්‍රතිඵලවල වැඩසටහන හෝ චිත්‍රපටය පෙන්වයි, මට එය වාදනය කළ නොහැක්කේ ඇයි?"
-        },
-        "q4": {
-            "body": "සියලුම දත්ත ප්‍රජා පසුබිමට සමමුහුර්ත කර ඇත, ඕනෑම කෙනෙකුට මෙය භාවිතා කිරීමටද නිදහස තිබේ.",
-            "title": "මගේ දත්ත සහ දේවල් ගැන කුමක් කිව හැකිද?"
-        },
-        "q5": {
-            "body": "P-Stream සතුව Discord සේවාදායකයක් ඇති අතර එය මෙම පිටුවේ ශීර්ෂයෙන් සොයාගත හැකිය!",
-            "title": "මට තවත් දැනගන්න පුළුවන් කොහොමද?"
-        },
-        "title": "P-Stream (^▽^) ගැන"
     },
-    "actions": {
+    "q2": {
-        "copied": "පිටපත් කරන ලදී",
+      "body": "වැඩසටහනක් හෝ චිත්‍රපටයක් ඉල්ලා සිටිය නොහැක, P-Stream කිසිදු අන්තර්ගතයක් කළමනාකරණය නොකරයි. සියලුම අන්තර්ගතයන් අන්තර්ජාලයේ මූලාශ්‍ර හරහා නරඹනු ලැබේ.",
-        "copy": "පිටපත්"
+      "title": "මට සංදර්ශනයක් හෝ චිත්‍රපටයක් ඉල්ලා සිටිය හැක්කේ කොතැනින්ද?"
     },
-    "auth": {
+    "description": "P-Stream යනු movie-web.app වසා දැමීමෙන් පසුව පවා ක්‍රියාත්මක වන බව සහතික කරන ලද movie-web හි දෙබලකි. P-Stream පුද්ගලික, ස්වයං-සත්කාරක VPS මත ධාවනය වේ. මම මෙම වෙබ් අඩවිය පාඩුවේ පවත්වාගෙන යමි; නිදහස් මාධ්‍ය පිළිබඳ මගේ විශ්වාසයන් නිසා දැන්වීම් නොමැත.",
-        "createAccount": "තවම ගිණුමක් නැත 😬 <0>ගිණුමක් සාදන්න.</0>",
+    "q3": {
-        "deviceNameLabel": "උපාංගයේ නම",
+      "body": "අපගේ සෙවුම් ප්‍රතිඵල චිත්‍රපට දත්ත සමුදාය (TMDB) මගින් බලගන්වනු ලබන අතර අපගේ මූලාශ්‍රවල ඇත්ත වශයෙන්ම අන්තර්ගතය තිබේද යන්න නොසලකා ප්‍රදර්ශනය කෙරේ.",
-        "deviceNamePlaceholder": "පුද්ගලික දුරකථනය",
+      "title": "සෙවුම් ප්‍රතිඵලවල වැඩසටහන හෝ චිත්‍රපටය පෙන්වයි, මට එය වාදනය කළ නොහැක්කේ ඇයි?"
-        "generate": {
+    },
-            "next": "මම මගේ මුරවදන සුරැකුවා.",
+    "q4": {
-            "passphraseFrameLabel": "මුරපදය",
+      "body": "සියලුම දත්ත ප්‍රජා පසුබිමට සමමුහුර්ත කර ඇත, ඕනෑම කෙනෙකුට මෙය භාවිතා කිරීමටද නිදහස තිබේ.",
-            "title": "ඔබගේ  මුරපදය",
+      "title": "මගේ දත්ත සහ දේවල් ගැන කුමක් කිව හැකිද?"
-            "description": "ඔබගේ මුරපදය ඔබගේ පරිශීලක නාමය සහ මුරපදය ලෙස ක්‍රියා කරයි. ඔබගේ ගිණුමට පිවිසීමට ඔබට එය ඇතුළත් කිරීමට අවශ්‍ය වන බැවින් එය ආරක්ෂිතව තබා ගැනීමට වග බලා ගන්න. <bold>ඔබගේ මුරපදය නැති කර නොගන්න!</bold>"
+    },
-        },
+    "q5": {
-        "hasAccount": "දැනටමත් ගිණුමක් තිබේද? <0>මෙතැනින් පිවිසෙන්න.</0>",
+      "body": "P-Stream සතුව Discord සේවාදායකයක් ඇති අතර එය මෙම පිටුවේ ශීර්ෂයෙන් සොයාගත හැකිය!",
-        "login": {
+      "title": "මට තවත් දැනගන්න පුළුවන් කොහොමද?"
-            "description": "ඔබගේ ගිණුමට පුරනය වීමට කරුණාකර ඔබගේ මුරපදය ඇතුළත් කරන්න.",
+    },
-            "passphraseLabel": "වචන 12ක මුරපදය",
+    "title": "P-Stream (^▽^) ගැන"
-            "passphrasePlaceholder": "මුරපදය",
+  },
-            "submit": "ඇතුල් වන්න",
+  "actions": {
-            "title": "ඔබගේ ගිණුමට පිවිසෙන්න",
+    "copied": "පිටපත් කරන ලදී",
-            "deviceLengthError": "කරුණාකර උපාංග නාමයක් ඇතුළත් කරන්න."
+    "copy": "පිටපත්"
-        }
+  },
+  "auth": {
+    "createAccount": "තවම ගිණුමක් නැත 😬 <0>ගිණුමක් සාදන්න.</0>",
+    "deviceNameLabel": "උපාංගයේ නම",
+    "deviceNamePlaceholder": "පුද්ගලික දුරකථනය",
+    "generate": {
+      "next": "මම මගේ මුරවදන සුරැකුවා.",
+      "passphraseFrameLabel": "මුරපදය",
+      "title": "ඔබගේ  මුරපදය",
+      "description": "ඔබගේ මුරපදය ඔබගේ පරිශීලක නාමය සහ මුරපදය ලෙස ක්‍රියා කරයි. ඔබගේ ගිණුමට පිවිසීමට ඔබට එය ඇතුළත් කිරීමට අවශ්‍ය වන බැවින් එය ආරක්ෂිතව තබා ගැනීමට වග බලා ගන්න. <bold>ඔබගේ මුරපදය නැති කර නොගන්න!</bold>"
+    },
+    "hasAccount": "දැනටමත් ගිණුමක් තිබේද? <0>මෙතැනින් පිවිසෙන්න.</0>",
+    "login": {
+      "description": "ඔබගේ ගිණුමට පුරනය වීමට කරුණාකර ඔබගේ මුරපදය ඇතුළත් කරන්න.",
+      "passphraseLabel": "වචන 12ක මුරපදය",
+      "passphrasePlaceholder": "මුරපදය",
+      "submit": "ඇතුල් වන්න",
+      "title": "ඔබගේ ගිණුමට පිවිසෙන්න",
+      "deviceLengthError": "කරුණාකර උපාංග නාමයක් ඇතුළත් කරන්න."
     }
+  }
 }

src/assets/templates/opensearch.xml.hbs

@@ -2,5 +2,5 @@
   <ShortName>P-Stream</ShortName>
   <Description>The place for your favorite movies &amp; shows</Description>
   <InputEncoding>UTF-8</InputEncoding>
-  <Url type="text/html" template="{{ routeDomain }}/browse/?q={searchTerms}" />
+  <Url type="text/html" template="{{routeDomain}}/browse/?q={searchTerms}" />
-</OpenSearchDescription>
+</OpenSearchDescription>

src/components/layout/Spinner.css

@@ -1,7 +1,7 @@
 .spinner {
   width: 1em;
   height: 1em;
-  border: 0.12em solid var(--color,white);
+  border: 0.12em solid var(--color, white);
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;

src/components/player/README.md

@@ -3,29 +3,41 @@
 Video player is quite a complex component, so here is a rundown of all the parts
 
 # Composable parts
+
 These parts can be used to build any shape of a video player.
- - `/atoms`- any ui element that controls the player. (Seekbar, Pause button, quality selection, etc)
+
- - `/base` - base components that are used to build a player. Like the main container
+- `/atoms`- any ui element that controls the player. (Seekbar, Pause button, quality selection, etc)
+- `/base` - base components that are used to build a player. Like the main container
 
 # internal parts
+
 These parts are internally used, they aren't exported. Do not use them outside of player internals.
 
 ### `/display`
+
 The display interface, abstraction on how to actually play the content (e.g Video element, chrome casting, etc)
- - It must be completely separate from any react code
+
- - It must not interact with state, pass async data back with events
+- It must be completely separate from any react code
+- It must not interact with state, pass async data back with events
 
 ### `/internals`
+
 Internal components that are always rendered on every player.
- - Only components that are always present on the player instance, they must never unmount
+
+- Only components that are always present on the player instance, they must never unmount
 
 ### `/utils`
+
 miscellaneous logic, put anything that is unique to the video player internals.
 
 ### `/hooks`
+
 Hooks only used for video player.
- - only exception is usePlayer, as its used outside of the player to control the player
+
+- only exception is usePlayer, as its used outside of the player to control the player
 
 ### `~/src/stores/player`
+
 State for the video player.
- - Only parts related to the video player may utilize the state
+
+- Only parts related to the video player may utilize the state

src/components/utils/Lightbar.css

@@ -1,4 +1,5 @@
-.lightbar, .lightbar-visual {
+.lightbar,
+.lightbar-visual {
   position: absolute;
   width: 500vw;
   height: 800px;
@@ -12,7 +13,8 @@
 }
 
 @screen sm {
-  .lightbar, .lightbar-visual {
+  .lightbar,
+  .lightbar-visual {
     width: 150vw;
   }
 
@@ -20,7 +22,6 @@
     left: -25vw;
     transform: initial;
   }
-
 }
 
 [dir] .lightbar {
@@ -28,21 +29,23 @@
   justify-content: center;
   align-items: center;
   --d: 3s;
-  --animation: cubic-bezier(.75, -0.00, .25, 1);
+  --animation: cubic-bezier(0.75, -0, 0.25, 1);
   animation: boot var(--d) var(--animation) forwards;
 }
 
 [dir] .lightbar-visual {
   left: 0;
-  --top: theme('colors.background.main');
+  --top: theme("colors.background.main");
-  --bottom: theme('colors.lightBar.light');
+  --bottom: theme("colors.lightBar.light");
   --first: conic-gradient(from 90deg at 80% 50%, var(--top), var(--bottom));
   --second: conic-gradient(from 270deg at 20% 50%, var(--bottom), var(--top));
   mask-image: radial-gradient(100% 50% at center center, black, transparent);
   background-image: var(--first), var(--second);
   background-position-x: 1%, 99%;
   background-position-y: 0%, 0%;
-  background-size: 50% 100%, 50% 100%;
+  background-size:
+    50% 100%,
+    50% 100%;
   opacity: 1;
   transform: rotate(180deg) translateZ(0px) translateY(400px);
   transform-origin: center center;
@@ -74,4 +77,4 @@
   100% {
     transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
   }
-}
+}

tailwind.config.ts

@@ -13,14 +13,14 @@ const config: Config = {
       screens: {
         xs: "350px",
         ssm: "400px",
-        '2xl': '1921px', // Custom breakpoint for screens at least 1920px wide
+        "2xl": "1921px", // Custom breakpoint for screens at least 1920px wide
-        '3xl': '2650px', // Custom breakpoint for screens at least 2650px wide
+        "3xl": "2650px", // Custom breakpoint for screens at least 2650px wide
-        '4xl': '3840px', // Custom breakpoint for screens at least 4096px wide
+        "4xl": "3840px", // Custom breakpoint for screens at least 4096px wide
       },
 
       /* fonts */
       fontFamily: {
-        "main": "'DM Sans'", // "main": "'Open Sans'",
+        main: "'DM Sans'", // "main": "'Open Sans'",
       },
 
       /* animations */
@@ -42,7 +42,7 @@ const config: Config = {
           "100%": { transform: "translateX(50px) scale(1.2)", opacity: "0" },
         },
       },
-      animation: { 
+      animation: {
         "loading-pin": "loading-pin 1.8s ease-in-out infinite",
         "fade-in": "fade-in 200ms ease-out forwards",
         "seek-left": "seek-left 0.5s cubic-bezier(0, 0, 0.2, 1) forwards",

themes/default.ts

@@ -7,7 +7,7 @@ const tokens = {
     c125: "#141414",
     c150: "#1a1a1a",
     c200: "#262626",
-    c250: "#333333"
+    c250: "#333333",
   },
   white: "#FFFFFF", // General white color
   semantic: {
@@ -52,7 +52,7 @@ const tokens = {
     c600: "#2e2e2e",
     c700: "#272727",
     c800: "#181818",
-    c900: "#0f0f0f"
+    c900: "#0f0f0f",
   },
   purple: {
     c50: "#aaafff",
@@ -64,7 +64,7 @@ const tokens = {
     c600: "#1f2363",
     c700: "#191b4a",
     c800: "#111334", // Lightbar
-    c900: "#0b0d22"
+    c900: "#0b0d22",
   },
   ash: {
     c50: "#8d8d8d",
@@ -76,7 +76,7 @@ const tokens = {
     c600: "#252525",
     c700: "#1e1e1e",
     c800: "#181818",
-    c900: "#111111"
+    c900: "#111111",
   },
   shade: {
     c25: "#939393", // Media card hover accent
@@ -89,7 +89,7 @@ const tokens = {
     c600: "#202020",
     c700: "#1a1a1a",
     c800: "#151515",
-    c900: "#0e0e0e"
+    c900: "#0e0e0e",
   },
 };
 
@@ -137,7 +137,7 @@ export const defaultTheme = {
         purple: tokens.purple.c600,
         purpleHover: tokens.purple.c400,
         cancel: tokens.black.c100,
-        cancelHover: tokens.black.c150
+        cancelHover: tokens.black.c150,
       },
 
       // only used for body colors/textures
@@ -146,7 +146,7 @@ export const defaultTheme = {
         secondary: tokens.black.c75,
         secondaryHover: tokens.black.c75,
         accentA: tokens.purple.c600,
-        accentB: tokens.black.c100
+        accentB: tokens.black.c100,
       },
 
       // Modals
@@ -165,7 +165,7 @@ export const defaultTheme = {
         danger: tokens.semantic.red.c100,
         success: tokens.semantic.green.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       // search bar
@@ -187,7 +187,7 @@ export const defaultTheme = {
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       // Large card
@@ -206,7 +206,7 @@ export const defaultTheme = {
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.black.c50
+        contentBackground: tokens.black.c50,
       },
 
       // Passphrase
@@ -231,24 +231,24 @@ export const defaultTheme = {
             inactive: tokens.shade.c50,
             icon: tokens.black.c200,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c100
+            activated: tokens.purple.c100,
           },
         },
 
         card: {
           border: tokens.shade.c700,
           background: tokens.black.c100,
-          altBackground: tokens.black.c100
+          altBackground: tokens.black.c100,
         },
 
         saveBar: {
-          background: tokens.black.c50
+          background: tokens.black.c50,
         },
       },
 
       // Utilities
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       // Onboarding
@@ -277,14 +277,14 @@ export const defaultTheme = {
       // About page
       about: {
         circle: tokens.black.c100,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       // About page
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
@@ -307,7 +307,7 @@ export const defaultTheme = {
           error: tokens.semantic.red.c200,
           success: tokens.semantic.green.c200,
           loading: tokens.purple.c200,
-          noresult: tokens.black.c200
+          noresult: tokens.black.c200,
         },
 
         audio: {

themes/index.ts

@@ -4,6 +4,6 @@ export { defaultTheme } from "./default";
 export { allThemes } from "./all";
 
 export const safeThemeList = allThemes
-  .flatMap(v=>v.selectors)
+  .flatMap((v) => v.selectors)
-  .filter(v=>v.startsWith("."))
+  .filter((v) => v.startsWith("."))
-  .map(v=>v.slice(1)); // remove dot from selector
+  .map((v) => v.slice(1)); // remove dot from selector

themes/list/.classicold.ts

@@ -84,7 +84,7 @@ const tokens = {
     c800: "#0F0F1B", // Background main, settings save bar, onboarding card
     c900: "#0A0A12", // Media card hover shadow
   },
-}
+};
 
 export default createTheme({
   name: "classic",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/acid.ts

@@ -10,7 +10,7 @@ const tokens = {
     c125: "#141414",
     c150: "#1a1a1a",
     c200: "#262626",
-    c250: "#333333"
+    c250: "#333333",
   },
   semantic: {
     silver: {
@@ -43,7 +43,7 @@ const tokens = {
     c600: "#202020",
     c700: "#1a1a1a",
     c800: "#151515",
-    c900: "#0e0e0e"
+    c900: "#0e0e0e",
   },
   ash: {
     c50: "#8d8d8d",
@@ -55,7 +55,7 @@ const tokens = {
     c600: "#252525",
     c700: "#1e1e1e",
     c800: "#181818",
-    c900: "#111111"
+    c900: "#111111",
   },
   blue: {
     c50: "#ccccd6",
@@ -67,9 +67,9 @@ const tokens = {
     c600: "#2e2e2e",
     c700: "#272727",
     c800: "#181818",
-    c900: "#0f0f0f"
+    c900: "#0f0f0f",
-  }
+  },
-}
+};
 
 export default createTheme({
   name: "acid",
@@ -89,7 +89,7 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
@@ -104,7 +104,7 @@ export default createTheme({
         purple: tokens.purple.c600,
         purpleHover: tokens.purple.c400,
         cancel: tokens.black.c100,
-        cancelHover: tokens.black.c150
+        cancelHover: tokens.black.c150,
       },
 
       background: {
@@ -112,7 +112,7 @@ export default createTheme({
         secondary: tokens.black.c75,
         secondaryHover: tokens.black.c75,
         accentA: tokens.purple.c600,
-        accentB: tokens.black.c100
+        accentB: tokens.black.c100,
       },
 
       modal: {
@@ -126,7 +126,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -134,7 +134,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c900,
         focused: tokens.black.c125,
         placeholder: tokens.shade.c200,
-        icon: tokens.shade.c500
+        icon: tokens.shade.c500,
       },
 
       mediaCard: {
@@ -145,12 +145,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.black.c100,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -160,7 +160,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.black.c50
+        contentBackground: tokens.black.c50,
       },
 
       authentication: {
@@ -169,7 +169,7 @@ export default createTheme({
         inputBgHover: tokens.black.c150,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -182,23 +182,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.black.c200,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c100
+            activated: tokens.purple.c100,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c700,
           background: tokens.black.c100,
-          altBackground: tokens.black.c100
+          altBackground: tokens.black.c100,
         },
 
         saveBar: {
-          background: tokens.black.c50
+          background: tokens.black.c50,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -206,25 +206,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.black.c100,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -232,17 +232,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c800,
-          hover: tokens.ash.c600 
+          hover: tokens.ash.c600,
         },
 
         scraping: {
           card: tokens.black.c50,
           loading: tokens.purple.c200,
-          noresult: tokens.black.c200
+          noresult: tokens.black.c200,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -261,7 +261,7 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
@@ -269,10 +269,10 @@ export default createTheme({
           type: {
             secondary: tokens.ash.c200,
             accent: tokens.purple.c200,
-            main: tokens.semantic.silver.c300
+            main: tokens.semantic.silver.c300,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/autumn.ts

@@ -36,55 +36,55 @@ const tokens = {
     },
   },
   blue: {
-    c50: "hsla(25, 100%, 85%, 1)",     // soft orange
+    c50: "hsla(25, 100%, 85%, 1)", // soft orange
-    c100: "hsla(25, 80%, 70%, 1)",     // brighter orange
+    c100: "hsla(25, 80%, 70%, 1)", // brighter orange
-    c200: "hsla(25, 70%, 60%, 1)",     // theme primary: warm orange
+    c200: "hsla(25, 70%, 60%, 1)", // theme primary: warm orange
-    c300: "hsla(25, 60%, 45%, 1)",     // accent B: darker orange
+    c300: "hsla(25, 60%, 45%, 1)", // accent B: darker orange
-    c400: "hsla(25, 50%, 35%, 1)",     // light bar
+    c400: "hsla(25, 50%, 35%, 1)", // light bar
-    c500: "hsla(25, 45%, 25%, 1)",     // accent B background
+    c500: "hsla(25, 45%, 25%, 1)", // accent B background
     c600: "hsla(25, 42%, 20%, 1)",
     c700: "hsla(25, 40%, 16%, 1)",
     c800: "hsla(25, 35%, 10%, 1)",
     c900: "hsla(25, 30%, 7%, 1)",
   },
   purple: {
-    c50: "hsla(15, 100%, 75%, 1)",     // soft red-orange for link hover - darker
+    c50: "hsla(15, 100%, 75%, 1)", // soft red-orange for link hover - darker
-    c100: "hsla(15, 100%, 60%, 1)",    // bright red-orange logo/link - much darker
+    c100: "hsla(15, 100%, 60%, 1)", // bright red-orange logo/link - much darker
-    c200: "hsla(15, 90%, 50%, 1)",     // red-orange progress/loader - more saturated
+    c200: "hsla(15, 90%, 50%, 1)", // red-orange progress/loader - more saturated
-    c300: "hsla(15, 80%, 45%, 1)",    // toggle/onboarding bar - more saturated
+    c300: "hsla(15, 80%, 45%, 1)", // toggle/onboarding bar - more saturated
-    c400: "hsla(15, 75%, 40%, 1)",     // card icon - more saturated
+    c400: "hsla(15, 75%, 40%, 1)", // card icon - more saturated
-    c500: "hsla(15, 70%, 32%, 1)",     // accent A background - more saturated
+    c500: "hsla(15, 70%, 32%, 1)", // accent A background - more saturated
     c600: "hsla(15, 65%, 25%, 1)",
     c700: "hsla(15, 60%, 18%, 1)",
     c800: "hsla(15, 55%, 12%, 1)",
     c900: "hsla(15, 50%, 8%, 1)",
   },
   ash: {
-    c50: "hsla(45, 39%, 60%, 1)",        // subtle yellow-tinted gray
+    c50: "hsla(45, 39%, 60%, 1)", // subtle yellow-tinted gray
-    c100: "hsla(45, 24%, 55%, 1)",      // warm yellow-gray
+    c100: "hsla(45, 24%, 55%, 1)", // warm yellow-gray
-    c200: "hsla(45, 10%, 35%, 1)",      // sidebar border - yellow tint
+    c200: "hsla(45, 10%, 35%, 1)", // sidebar border - yellow tint
-    c300: "hsla(45, 8%, 28%, 1)",       // card divider - yellow tint
+    c300: "hsla(45, 8%, 28%, 1)", // card divider - yellow tint
-    c400: "hsla(45, 6%, 22%, 1)",       // bg + hover accents - yellow tint
+    c400: "hsla(45, 6%, 22%, 1)", // bg + hover accents - yellow tint
-    c500: "hsla(25, 45%, 25%, 1)",      // accent B background
+    c500: "hsla(25, 45%, 25%, 1)", // accent B background
     c600: "hsla(25, 42%, 20%, 1)",
     c700: "hsla(25, 40%, 16%, 1)",
     c800: "hsla(25, 35%, 10%, 1)",
-    c900: "hsla(25, 30%, 7%, 1)",       // deepest shade, shadows
+    c900: "hsla(25, 30%, 7%, 1)", // deepest shade, shadows
   },
   shade: {
-    c25: "hsla(24, 80%, 70%, 1)",        // red hover accent
+    c25: "hsla(24, 80%, 70%, 1)", // red hover accent
-    c50: "hsla(25, 100%, 72%, 1)",      // rich pumpkin for main text
+    c50: "hsla(25, 100%, 72%, 1)", // rich pumpkin for main text
-    c100: "hsla(25, 80%, 60%, 1)",      // placeholder/icon
+    c100: "hsla(25, 80%, 60%, 1)", // placeholder/icon
-    c200: "hsla(25, 60%, 45%, 1)",      // hover bg
+    c200: "hsla(25, 60%, 45%, 1)", // hover bg
-    c300: "hsla(25, 60%, 35%, 1)",      // pill background, auth border
+    c300: "hsla(25, 60%, 35%, 1)", // pill background, auth border
-    c400: "hsla(25, 50%, 21%, 1)",      // light bar
+    c400: "hsla(25, 50%, 21%, 1)", // light bar
-    c500: "hsla(35, 25%, 22%, 1)",      // dropdown background - subtle yellow tint
+    c500: "hsla(35, 25%, 22%, 1)", // dropdown background - subtle yellow tint
-    c600: "hsla(45, 20%, 16%, 1)",      // modal/dropdown background - washed out yellow
+    c600: "hsla(45, 20%, 16%, 1)", // modal/dropdown background - washed out yellow
-    c700: "hsla(60, 15%, 12%, 1)",      // alt bg - subtle green tint
+    c700: "hsla(60, 15%, 12%, 1)", // alt bg - subtle green tint
-    c800: "hsla(25, 38%, 8%, 1)",       // main bg - lighter
+    c800: "hsla(25, 38%, 8%, 1)", // main bg - lighter
-    c900: "hsla(25, 35%, 5%, 1)",       // hover shadow - lighter
+    c900: "hsla(25, 35%, 5%, 1)", // hover shadow - lighter
   },
-}
+};
 
 export default createTheme({
   name: "autumn",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/blue.ts

@@ -11,7 +11,7 @@ const tokens = {
     c600: "#072c7c",
     c700: "#06215d",
     c800: "#041741",
-    c900: "#03102a"
+    c900: "#03102a",
   },
   shade: {
     c25: "#5d7db3",
@@ -24,7 +24,7 @@ const tokens = {
     c600: "#1d1728",
     c700: "#181322",
     c800: "#130f1b",
-    c900: "#0d0a12"
+    c900: "#0d0a12",
   },
   ash: {
     c50: "#7f859b",
@@ -36,7 +36,7 @@ const tokens = {
     c600: "#171d32",
     c700: "#131829",
     c800: "#101420",
-    c900: "#0c0f16"
+    c900: "#0c0f16",
   },
   blue: {
     c50: "#adb4f5",
@@ -48,8 +48,8 @@ const tokens = {
     c600: "#1b1f41",
     c700: "#171b36",
     c800: "#101120",
-    c900: "#0b0c13"
+    c900: "#0b0c13",
-  }
+  },
 };
 
 export default createTheme({
@@ -58,7 +58,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.blue.c200,
-        secondary: tokens.shade.c50
+        secondary: tokens.shade.c50,
       },
 
       pill: {
@@ -71,11 +71,11 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.blue.c400,
       },
 
       buttons: {
@@ -87,7 +87,7 @@ export default createTheme({
         purple: tokens.purple.c500,
         purpleHover: tokens.purple.c400,
         cancel: tokens.ash.c500,
-        cancelHover: tokens.ash.c300
+        cancelHover: tokens.ash.c300,
       },
 
       background: {
@@ -95,7 +95,7 @@ export default createTheme({
         secondary: tokens.shade.c600,
         secondaryHover: tokens.shade.c400,
         accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        accentB: tokens.blue.c500,
       },
 
       modal: {
@@ -109,7 +109,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -117,7 +117,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        icon: tokens.shade.c100,
       },
 
       mediaCard: {
@@ -128,12 +128,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.shade.c600,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -143,7 +143,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.shade.c500,
       },
 
       authentication: {
@@ -152,7 +152,7 @@ export default createTheme({
         inputBgHover: tokens.shade.c500,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -165,23 +165,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c50
+            activated: tokens.purple.c50,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c400,
           background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          altBackground: tokens.shade.c400,
         },
 
         saveBar: {
-          background: tokens.shade.c800
+          background: tokens.shade.c800,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -189,25 +189,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.ash.c500,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -215,17 +215,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {
           card: tokens.shade.c700,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.ash.c100,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -244,17 +244,17 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/classic.ts

@@ -84,7 +84,7 @@ const tokens = {
     c800: "hsla(240, 30%, 8%, 1)", // Background main, settings save bar, onboarding card
     c900: "hsla(240, 29%, 5%, 1)", // Media card hover shadow
   },
-}
+};
 
 export default createTheme({
   name: "classic",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/ember.ts

@@ -10,7 +10,7 @@ const tokens = {
     c125: "#141414",
     c150: "#1a1a1a",
     c200: "#262626",
-    c250: "#333333"
+    c250: "#333333",
   },
   semantic: {
     silver: {
@@ -43,7 +43,7 @@ const tokens = {
     c600: "#202020",
     c700: "#1a1a1a",
     c800: "#151515",
-    c900: "#0e0e0e"
+    c900: "#0e0e0e",
   },
   ash: {
     c50: "#8d8d8d",
@@ -55,7 +55,7 @@ const tokens = {
     c600: "#252525",
     c700: "#1e1e1e",
     c800: "#181818",
-    c900: "#111111"
+    c900: "#111111",
   },
   blue: {
     c50: "#ccccd6",
@@ -67,9 +67,9 @@ const tokens = {
     c600: "#2e2e2e",
     c700: "#272727",
     c800: "#181818",
-    c900: "#0f0f0f"
+    c900: "#0f0f0f",
-  }
+  },
-}
+};
 
 export default createTheme({
   name: "ember",
@@ -89,7 +89,7 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
@@ -104,7 +104,7 @@ export default createTheme({
         purple: tokens.purple.c600,
         purpleHover: tokens.purple.c400,
         cancel: tokens.black.c100,
-        cancelHover: tokens.black.c150
+        cancelHover: tokens.black.c150,
       },
 
       background: {
@@ -112,7 +112,7 @@ export default createTheme({
         secondary: tokens.black.c75,
         secondaryHover: tokens.black.c75,
         accentA: tokens.purple.c600,
-        accentB: tokens.black.c100
+        accentB: tokens.black.c100,
       },
 
       modal: {
@@ -126,7 +126,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -134,7 +134,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c900,
         focused: tokens.black.c125,
         placeholder: tokens.shade.c200,
-        icon: tokens.shade.c500
+        icon: tokens.shade.c500,
       },
 
       mediaCard: {
@@ -145,12 +145,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.black.c100,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -160,7 +160,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.black.c50
+        contentBackground: tokens.black.c50,
       },
 
       authentication: {
@@ -169,7 +169,7 @@ export default createTheme({
         inputBgHover: tokens.black.c150,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -182,23 +182,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.black.c200,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c100
+            activated: tokens.purple.c100,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c700,
           background: tokens.black.c100,
-          altBackground: tokens.black.c100
+          altBackground: tokens.black.c100,
         },
 
         saveBar: {
-          background: tokens.black.c50
+          background: tokens.black.c50,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -206,25 +206,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.black.c100,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -232,17 +232,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c800,
-          hover: tokens.ash.c600 
+          hover: tokens.ash.c600,
         },
 
         scraping: {
           card: tokens.black.c50,
           loading: tokens.purple.c200,
-          noresult: tokens.black.c200
+          noresult: tokens.black.c200,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -261,7 +261,7 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
@@ -269,10 +269,10 @@ export default createTheme({
           type: {
             secondary: tokens.ash.c200,
             accent: tokens.purple.c200,
-            main: tokens.semantic.silver.c300
+            main: tokens.semantic.silver.c300,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/forest.ts

@@ -45,7 +45,7 @@ const tokens = {
     c600: "hsla(128, 32%, 15%, 1)",
     c700: "hsla(126, 32%, 12%, 1)",
     c800: "hsla(124, 32%, 9%, 1)",
-    c900: "hsla(120, 33%, 6%, 1)"
+    c900: "hsla(120, 33%, 6%, 1)",
   },
   purple: {
     c50: "hsla(116, 24%, 53%, 1)",
@@ -57,7 +57,7 @@ const tokens = {
     c600: "hsla(118, 37%, 14%, 1)",
     c700: "hsla(120, 37%, 11%, 1)",
     c800: "hsla(120, 38%, 8%, 1)",
-    c900: "hsla(120, 41%, 5%, 1)"
+    c900: "hsla(120, 41%, 5%, 1)",
   },
   ash: {
     c50: "hsla(144, 11%, 47%, 1)",
@@ -69,7 +69,7 @@ const tokens = {
     c600: "hsla(145, 20%, 12%, 1)",
     c700: "hsla(140, 19%, 9%, 1)",
     c800: "hsla(130, 18%, 7%, 1)",
-    c900: "hsla(120, 18%, 4%, 1)"
+    c900: "hsla(120, 18%, 4%, 1)",
   },
   shade: {
     c25: "hsla(120, 27%, 40%, 1)",
@@ -82,9 +82,9 @@ const tokens = {
     c600: "hsla(120, 29%, 9%, 1)",
     c700: "hsla(120, 29%, 7%, 1)",
     c800: "hsla(120, 39%, 5%, 1)",
-    c900: "hsla(120, 33%, 2%, 1)"
+    c900: "hsla(120, 33%, 2%, 1)",
   },
-}
+};
 
 export default createTheme({
   name: "forest",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/grape.ts

@@ -83,8 +83,8 @@ const tokens = {
     c700: "#160f1d",
     c800: "#110b16",
     c900: "#0c0610",
-  }
+  },
-}
+};
 
 export default createTheme({
   name: "grape",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/gray.ts

@@ -11,7 +11,7 @@ const tokens = {
     c600: "#1f2363",
     c700: "#191b4a",
     c800: "#111334",
-    c900: "#0b0d22"
+    c900: "#0b0d22",
   },
   shade: {
     c25: "#9c9c9c",
@@ -24,7 +24,7 @@ const tokens = {
     c600: "#202020",
     c700: "#1a1a1a",
     c800: "#151515",
-    c900: "#0e0e0e"
+    c900: "#0e0e0e",
   },
   ash: {
     c50: "#8d8d8d",
@@ -36,7 +36,7 @@ const tokens = {
     c600: "#252525",
     c700: "#1e1e1e",
     c800: "#181818",
-    c900: "#111111"
+    c900: "#111111",
   },
   blue: {
     c50: "#ccccd6",
@@ -48,8 +48,8 @@ const tokens = {
     c600: "#2e2e2e",
     c700: "#272727",
     c800: "#181818",
-    c900: "#0f0f0f"
+    c900: "#0f0f0f",
-  }
+  },
 };
 
 export default createTheme({
@@ -58,7 +58,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.blue.c200,
-        secondary: tokens.shade.c50
+        secondary: tokens.shade.c50,
       },
 
       pill: {
@@ -71,11 +71,11 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.blue.c400,
       },
 
       buttons: {
@@ -87,7 +87,7 @@ export default createTheme({
         purple: tokens.purple.c500,
         purpleHover: tokens.purple.c400,
         cancel: tokens.ash.c500,
-        cancelHover: tokens.ash.c300
+        cancelHover: tokens.ash.c300,
       },
 
       background: {
@@ -95,7 +95,7 @@ export default createTheme({
         secondary: tokens.shade.c600,
         secondaryHover: tokens.shade.c400,
         accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        accentB: tokens.blue.c500,
       },
 
       modal: {
@@ -109,7 +109,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -117,7 +117,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        icon: tokens.shade.c100,
       },
 
       mediaCard: {
@@ -128,12 +128,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.shade.c600,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -143,7 +143,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.shade.c500,
       },
 
       authentication: {
@@ -152,7 +152,7 @@ export default createTheme({
         inputBgHover: tokens.shade.c500,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -165,23 +165,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c50
+            activated: tokens.purple.c50,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c400,
           background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          altBackground: tokens.shade.c400,
         },
 
         saveBar: {
-          background: tokens.shade.c800
+          background: tokens.shade.c800,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -189,25 +189,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.ash.c500,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -215,17 +215,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {
           card: tokens.shade.c700,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.ash.c100,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -244,17 +244,17 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/green.ts

@@ -11,7 +11,7 @@ const tokens = {
     c600: "#186507FF",
     c700: "#044304FF",
     c800: "#044109FF",
-    c900: "#032A03FF"
+    c900: "#032A03FF",
   },
   shade: {
     c25: "#5DB35DFF",
@@ -24,7 +24,7 @@ const tokens = {
     c600: "#172818FF",
     c700: "#152213FF",
     c800: "#0F1B0FFF",
-    c900: "#0A120BFF"
+    c900: "#0A120BFF",
   },
   ash: {
     c50: "#7F9B8BFF",
@@ -36,7 +36,7 @@ const tokens = {
     c600: "#17321DFF",
     c700: "#132917FF",
     c800: "#102013FF",
-    c900: "#0C160CFF"
+    c900: "#0C160CFF",
   },
   blue: {
     c50: "#B5F5ADFF",
@@ -48,8 +48,8 @@ const tokens = {
     c600: "#1C411BFFFF",
     c700: "#17361BFF",
     c800: "#102010FF",
-    c900: "#0B130BFF"
+    c900: "#0B130BFF",
-  }
+  },
 };
 
 export default createTheme({
@@ -58,7 +58,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.blue.c200,
-        secondary: tokens.shade.c50
+        secondary: tokens.shade.c50,
       },
 
       pill: {
@@ -71,11 +71,11 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.blue.c400,
       },
 
       buttons: {
@@ -87,7 +87,7 @@ export default createTheme({
         purple: tokens.purple.c500,
         purpleHover: tokens.purple.c400,
         cancel: tokens.ash.c500,
-        cancelHover: tokens.ash.c300
+        cancelHover: tokens.ash.c300,
       },
 
       background: {
@@ -95,7 +95,7 @@ export default createTheme({
         secondary: tokens.shade.c600,
         secondaryHover: tokens.shade.c400,
         accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        accentB: tokens.blue.c500,
       },
 
       modal: {
@@ -109,7 +109,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -117,7 +117,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        icon: tokens.shade.c100,
       },
 
       mediaCard: {
@@ -128,12 +128,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.shade.c600,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -143,7 +143,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.shade.c500,
       },
 
       authentication: {
@@ -152,7 +152,7 @@ export default createTheme({
         inputBgHover: tokens.shade.c500,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -165,23 +165,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c50
+            activated: tokens.purple.c50,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c400,
           background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          altBackground: tokens.shade.c400,
         },
 
         saveBar: {
-          background: tokens.shade.c800
+          background: tokens.shade.c800,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -189,25 +189,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.ash.c500,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -215,17 +215,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {
           card: tokens.shade.c700,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.ash.c100,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -244,17 +244,17 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/hulk.ts

@@ -84,7 +84,7 @@ const tokens = {
     c800: "hsla(135, 15%, 8%, 1)",
     c900: "hsla(135, 14%, 6%, 1)",
   },
-}
+};
 
 export default createTheme({
   name: "hulk",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/mocha.ts

@@ -11,7 +11,7 @@ const tokens = {
     c600: "#784E1CFF",
     c700: "#432A04FF",
     c800: "#412604FF",
-    c900: "#2A1D03FF"
+    c900: "#2A1D03FF",
   },
   shade: {
     c25: "#B38F5DFF",
@@ -24,7 +24,7 @@ const tokens = {
     c600: "#281E17FF",
     c700: "#221D13FF",
     c800: "#1B160FFF",
-    c900: "#120F0AFF"
+    c900: "#120F0AFF",
   },
   ash: {
     c50: "#9B877FFF",
@@ -36,7 +36,7 @@ const tokens = {
     c600: "#322517FF",
     c700: "#292113FF",
     c800: "#201910FF",
-    c900: "#16100CFF"
+    c900: "#16100CFF",
   },
   blue: {
     c50: "#F5DBADFF",
@@ -48,8 +48,8 @@ const tokens = {
     c600: "#41321BFF",
     c700: "#362C17FF",
     c800: "#201810FF",
-    c900: "#13100BFF"
+    c900: "#13100BFF",
-  }
+  },
 };
 
 export default createTheme({
@@ -58,7 +58,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.blue.c200,
-        secondary: tokens.shade.c50
+        secondary: tokens.shade.c50,
       },
 
       pill: {
@@ -71,11 +71,11 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.blue.c400,
       },
 
       buttons: {
@@ -87,7 +87,7 @@ export default createTheme({
         purple: tokens.purple.c500,
         purpleHover: tokens.purple.c400,
         cancel: tokens.ash.c500,
-        cancelHover: tokens.ash.c300
+        cancelHover: tokens.ash.c300,
       },
 
       background: {
@@ -95,7 +95,7 @@ export default createTheme({
         secondary: tokens.shade.c600,
         secondaryHover: tokens.shade.c400,
         accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        accentB: tokens.blue.c500,
       },
 
       modal: {
@@ -109,7 +109,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -117,7 +117,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        icon: tokens.shade.c100,
       },
 
       mediaCard: {
@@ -128,12 +128,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.shade.c600,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -143,7 +143,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.shade.c500,
       },
 
       authentication: {
@@ -152,7 +152,7 @@ export default createTheme({
         inputBgHover: tokens.shade.c500,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -165,23 +165,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c50
+            activated: tokens.purple.c50,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c400,
           background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          altBackground: tokens.shade.c400,
         },
 
         saveBar: {
-          background: tokens.shade.c800
+          background: tokens.shade.c800,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -189,25 +189,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.ash.c500,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -215,17 +215,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {
           card: tokens.shade.c700,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.ash.c100,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -244,17 +244,17 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/noir.ts

@@ -10,7 +10,7 @@ const tokens = {
     c125: "#141414",
     c150: "#1a1a1a",
     c200: "#262626",
-    c250: "#333333"
+    c250: "#333333",
   },
   semantic: {
     silver: {
@@ -30,7 +30,7 @@ const tokens = {
     c600: "#2c2c2c",
     c700: "#202020",
     c800: "#151515",
-    c900: "#0a0a0a"
+    c900: "#0a0a0a",
   },
   shade: {
     c50: "#7c7c7c",
@@ -42,7 +42,7 @@ const tokens = {
     c600: "#202020",
     c700: "#1a1a1a",
     c800: "#151515",
-    c900: "#0e0e0e"
+    c900: "#0e0e0e",
   },
   ash: {
     c50: "#8d8d8d",
@@ -54,7 +54,7 @@ const tokens = {
     c600: "#252525",
     c700: "#1e1e1e",
     c800: "#181818",
-    c900: "#111111"
+    c900: "#111111",
   },
   blue: {
     c50: "#ccccd6",
@@ -66,9 +66,9 @@ const tokens = {
     c600: "#2e2e2e",
     c700: "#272727",
     c800: "#181818",
-    c900: "#0f0f0f"
+    c900: "#0f0f0f",
-  }
+  },
-}
+};
 
 export default createTheme({
   name: "noir",
@@ -76,7 +76,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.black.c80,
-        secondary: tokens.black.c100
+        secondary: tokens.black.c100,
       },
 
       pill: {
@@ -88,7 +88,7 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
@@ -103,7 +103,7 @@ export default createTheme({
         purple: tokens.purple.c600,
         purpleHover: tokens.purple.c400,
         cancel: tokens.black.c100,
-        cancelHover: tokens.black.c150
+        cancelHover: tokens.black.c150,
       },
 
       background: {
@@ -111,7 +111,7 @@ export default createTheme({
         secondary: tokens.black.c75,
         secondaryHover: tokens.black.c75,
         accentA: tokens.purple.c600,
-        accentB: tokens.black.c100
+        accentB: tokens.black.c100,
       },
 
       modal: {
@@ -125,7 +125,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -133,7 +133,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c900,
         focused: tokens.black.c125,
         placeholder: tokens.shade.c200,
-        icon: tokens.shade.c500
+        icon: tokens.shade.c500,
       },
 
       mediaCard: {
@@ -144,12 +144,12 @@ export default createTheme({
         barColor: tokens.shade.c200,
         barFillColor: tokens.shade.c50,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.black.c100,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -159,7 +159,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.black.c50
+        contentBackground: tokens.black.c50,
       },
 
       authentication: {
@@ -168,7 +168,7 @@ export default createTheme({
         inputBgHover: tokens.black.c150,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -181,23 +181,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.black.c200,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c100
+            activated: tokens.purple.c100,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c700,
           background: tokens.black.c100,
-          altBackground: tokens.black.c100
+          altBackground: tokens.black.c100,
         },
 
         saveBar: {
-          background: tokens.black.c50
+          background: tokens.black.c50,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -205,25 +205,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.black.c100,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -231,17 +231,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c800,
-          hover: tokens.ash.c600 
+          hover: tokens.ash.c600,
         },
 
         scraping: {
           card: tokens.black.c50,
           loading: tokens.purple.c200,
-          noresult: tokens.black.c200
+          noresult: tokens.black.c200,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -260,7 +260,7 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
@@ -268,10 +268,10 @@ export default createTheme({
           type: {
             secondary: tokens.ash.c200,
             accent: tokens.purple.c200,
-            main: tokens.semantic.silver.c300
+            main: tokens.semantic.silver.c300,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/pink.ts

@@ -11,7 +11,7 @@ const tokens = {
     c600: "#7D0E6CFF",
     c700: "#430431FF",
     c800: "#410440FF",
-    c900: "#2A0324FF"
+    c900: "#2A0324FF",
   },
   shade: {
     c25: "#B35DA5FF",
@@ -24,7 +24,7 @@ const tokens = {
     c600: "#281726FF",
     c700: "#211322FF",
     c800: "#1B0F1AFF",
-    c900: "#120A11FF"
+    c900: "#120A11FF",
   },
   ash: {
     c50: "#9B7F95FF",
@@ -36,7 +36,7 @@ const tokens = {
     c600: "#32172DFF",
     c700: "#291328FF",
     c800: "#1E1020FF",
-    c900: "#150C16FF"
+    c900: "#150C16FF",
   },
   blue: {
     c50: "#F5ADEEFF",
@@ -48,8 +48,8 @@ const tokens = {
     c600: "#411B3AFF",
     c700: "#361736FF",
     c800: "#20101EFF",
-    c900: "#130B12FF"
+    c900: "#130B12FF",
-  }
+  },
 };
 
 export default createTheme({
@@ -58,7 +58,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.blue.c200,
-        secondary: tokens.shade.c50
+        secondary: tokens.shade.c50,
       },
 
       pill: {
@@ -71,11 +71,11 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.blue.c400,
       },
 
       buttons: {
@@ -87,7 +87,7 @@ export default createTheme({
         purple: tokens.purple.c500,
         purpleHover: tokens.purple.c400,
         cancel: tokens.ash.c500,
-        cancelHover: tokens.ash.c300
+        cancelHover: tokens.ash.c300,
       },
 
       background: {
@@ -95,7 +95,7 @@ export default createTheme({
         secondary: tokens.shade.c600,
         secondaryHover: tokens.shade.c400,
         accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        accentB: tokens.blue.c500,
       },
 
       modal: {
@@ -109,7 +109,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -117,7 +117,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        icon: tokens.shade.c100,
       },
 
       mediaCard: {
@@ -128,12 +128,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.shade.c600,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -143,7 +143,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.shade.c500,
       },
 
       authentication: {
@@ -152,7 +152,7 @@ export default createTheme({
         inputBgHover: tokens.shade.c500,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -165,23 +165,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c50
+            activated: tokens.purple.c50,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c400,
           background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          altBackground: tokens.shade.c400,
         },
 
         saveBar: {
-          background: tokens.shade.c800
+          background: tokens.shade.c800,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -189,25 +189,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.ash.c500,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -215,17 +215,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {
           card: tokens.shade.c700,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.ash.c100,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -244,17 +244,17 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/popsicle.ts

@@ -36,55 +36,55 @@ const tokens = {
     },
   },
   blue: {
-    c50: "hsla(200, 100%, 85%, 1)",     // soft cyan
+    c50: "hsla(200, 100%, 85%, 1)", // soft cyan
-    c100: "hsla(200, 80%, 70%, 1)",     // brighter cyan
+    c100: "hsla(200, 80%, 70%, 1)", // brighter cyan
-    c200: "hsla(200, 70%, 60%, 1)",     // theme primary: cyan-blue
+    c200: "hsla(200, 70%, 60%, 1)", // theme primary: cyan-blue
-    c300: "hsla(200, 60%, 45%, 1)",     // accent B: darker cyan-blue
+    c300: "hsla(200, 60%, 45%, 1)", // accent B: darker cyan-blue
-    c400: "hsla(200, 50%, 35%, 1)",     // light bar
+    c400: "hsla(200, 50%, 35%, 1)", // light bar
-    c500: "hsla(200, 45%, 25%, 1)",     // accent B background
+    c500: "hsla(200, 45%, 25%, 1)", // accent B background
     c600: "hsla(200, 42%, 20%, 1)",
     c700: "hsla(200, 40%, 16%, 1)",
     c800: "hsla(200, 35%, 10%, 1)",
     c900: "hsla(200, 30%, 7%, 1)",
   },
   purple: {
-    c50: "hsla(280, 100%, 85%, 1)",     // lavender for link hover
+    c50: "hsla(280, 100%, 85%, 1)", // lavender for link hover
-    c100: "hsla(300, 100%, 75%, 1)",    // pink-violet logo/link
+    c100: "hsla(300, 100%, 75%, 1)", // pink-violet logo/link
-    c200: "hsla(300, 80%, 65%, 1)",     // pinkish progress/loader
+    c200: "hsla(300, 80%, 65%, 1)", // pinkish progress/loader
-    c300: "hsla(310, 65%, 55%, 1)",     // toggle/onboarding bar
+    c300: "hsla(310, 65%, 55%, 1)", // toggle/onboarding bar
-    c400: "hsla(320, 60%, 47%, 1)",     // card icon
+    c400: "hsla(320, 60%, 47%, 1)", // card icon
-    c500: "hsla(325, 50%, 36%, 1)",     // accent A background
+    c500: "hsla(325, 50%, 36%, 1)", // accent A background
     c600: "hsla(325, 50%, 28%, 1)",
     c700: "hsla(325, 50%, 20%, 1)",
     c800: "hsla(325, 45%, 14%, 1)",
     c900: "hsla(325, 40%, 9%, 1)",
   },
   ash: {
-    c50: "hsla(60, 8%, 60%, 1)",        // neutral gold-tinted gray
+    c50: "hsla(60, 8%, 60%, 1)", // neutral gold-tinted gray
-    c100: "hsla(60, 10%, 45%, 1)",      // warm muted gray
+    c100: "hsla(60, 10%, 45%, 1)", // warm muted gray
-    c200: "hsla(60, 11%, 35%, 1)",      // sidebar border
+    c200: "hsla(60, 11%, 35%, 1)", // sidebar border
-    c300: "hsla(60, 12%, 28%, 1)",      // card divider
+    c300: "hsla(60, 12%, 28%, 1)", // card divider
-    c400: "hsla(60, 14%, 22%, 1)",      // bg + hover accents
+    c400: "hsla(60, 14%, 22%, 1)", // bg + hover accents
-    c500: "hsla(200, 45%, 25%, 1)",     // accent B background
+    c500: "hsla(200, 45%, 25%, 1)", // accent B background
     c600: "hsla(200, 42%, 20%, 1)",
     c700: "hsla(200, 40%, 16%, 1)",
     c800: "hsla(200, 35%, 10%, 1)",
-    c900: "hsla(200, 30%, 7%, 1)",        // deepest shade, shadows
+    c900: "hsla(200, 30%, 7%, 1)", // deepest shade, shadows
   },
   shade: {
-    c25: "hsla(0, 80%, 70%, 1)",        // red hover accent
+    c25: "hsla(0, 80%, 70%, 1)", // red hover accent
-    c50: "hsla(30, 100%, 72%, 1)",      // orange for main text
+    c50: "hsla(30, 100%, 72%, 1)", // orange for main text
-    c100: "hsla(30, 80%, 60%, 1)",      // placeholder/icon
+    c100: "hsla(30, 80%, 60%, 1)", // placeholder/icon
-    c200: "hsla(200, 60%, 45%, 1)",     // hover bg
+    c200: "hsla(200, 60%, 45%, 1)", // hover bg
-    c300: "hsla(30, 60%, 35%, 1)",      // pill background, auth border
+    c300: "hsla(30, 60%, 35%, 1)", // pill background, auth border
-    c400: "hsla(200, 50%, 35%, 1)",     // light bar
+    c400: "hsla(200, 50%, 35%, 1)", // light bar
-    c500: "hsla(30, 50%, 21%, 1)",      // dropdown background
+    c500: "hsla(30, 50%, 21%, 1)", // dropdown background
-    c600: "hsla(30, 45%, 16%, 1)",      // modal/dropdown background
+    c600: "hsla(30, 45%, 16%, 1)", // modal/dropdown background
-    c700: "hsla(30, 40%, 12%, 1)",      // alt bg
+    c700: "hsla(30, 40%, 12%, 1)", // alt bg
-    c800: "hsla(30, 38%, 9%, 1)",       // main bg
+    c800: "hsla(30, 38%, 9%, 1)", // main bg
-    c900: "hsla(30, 35%, 6%, 1)",       // hover shadow
+    c900: "hsla(30, 35%, 6%, 1)", // hover shadow
   },
-}
+};
 
 export default createTheme({
   name: "popsicle",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/red.ts

@@ -11,7 +11,7 @@ const tokens = {
     c600: "#632021",
     c700: "#49191a",
     c800: "#331112",
-    c900: "#220c0c"
+    c900: "#220c0c",
   },
   shade: {
     c25: "#b3675d",
@@ -24,7 +24,7 @@ const tokens = {
     c600: "#2b1614",
     c700: "#241210",
     c800: "#1c0e0d",
-    c900: "#130909"
+    c900: "#130909",
   },
   ash: {
     c50: "#ac6e6f",
@@ -36,7 +36,7 @@ const tokens = {
     c600: "#371212",
     c700: "#2e0e0f",
     c800: "#230c0d",
-    c900: "#19090b"
+    c900: "#19090b",
   },
   blue: {
     c50: "#f5adb4",
@@ -48,8 +48,8 @@ const tokens = {
     c600: "#411b1f",
     c700: "#36171b",
     c800: "#201011",
-    c900: "#130b0c"
+    c900: "#130b0c",
-  }
+  },
 };
 
 export default createTheme({
@@ -58,7 +58,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.blue.c200,
-        secondary: tokens.shade.c50
+        secondary: tokens.shade.c50,
       },
 
       pill: {
@@ -71,11 +71,11 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.blue.c400,
       },
 
       buttons: {
@@ -87,7 +87,7 @@ export default createTheme({
         purple: tokens.purple.c500,
         purpleHover: tokens.purple.c400,
         cancel: tokens.ash.c500,
-        cancelHover: tokens.ash.c300
+        cancelHover: tokens.ash.c300,
       },
 
       background: {
@@ -95,7 +95,7 @@ export default createTheme({
         secondary: tokens.shade.c600,
         secondaryHover: tokens.shade.c400,
         accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        accentB: tokens.blue.c500,
       },
 
       modal: {
@@ -109,7 +109,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -117,7 +117,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        icon: tokens.shade.c100,
       },
 
       mediaCard: {
@@ -128,12 +128,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.shade.c600,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -143,7 +143,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.shade.c500,
       },
 
       authentication: {
@@ -152,7 +152,7 @@ export default createTheme({
         inputBgHover: tokens.shade.c500,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -165,23 +165,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c50
+            activated: tokens.purple.c50,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c400,
           background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          altBackground: tokens.shade.c400,
         },
 
         saveBar: {
-          background: tokens.shade.c800
+          background: tokens.shade.c800,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -189,25 +189,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.ash.c500,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -215,17 +215,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {
           card: tokens.shade.c700,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.ash.c100,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -244,17 +244,17 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/spark.ts

@@ -10,7 +10,7 @@ const tokens = {
     c125: "#141414",
     c150: "#1a1a1a",
     c200: "#262626",
-    c250: "#333333"
+    c250: "#333333",
   },
   semantic: {
     silver: {
@@ -43,7 +43,7 @@ const tokens = {
     c600: "#202020",
     c700: "#1a1a1a",
     c800: "#151515",
-    c900: "#0e0e0e"
+    c900: "#0e0e0e",
   },
   ash: {
     c50: "#8d8d8d",
@@ -55,7 +55,7 @@ const tokens = {
     c600: "#252525",
     c700: "#1e1e1e",
     c800: "#181818",
-    c900: "#111111"
+    c900: "#111111",
   },
   blue: {
     c50: "#ccccd6",
@@ -67,9 +67,9 @@ const tokens = {
     c600: "#2e2e2e",
     c700: "#272727",
     c800: "#181818",
-    c900: "#0f0f0f"
+    c900: "#0f0f0f",
-  }
+  },
-}
+};
 
 export default createTheme({
   name: "spark",
@@ -89,7 +89,7 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
@@ -104,7 +104,7 @@ export default createTheme({
         purple: tokens.purple.c600,
         purpleHover: tokens.purple.c400,
         cancel: tokens.black.c100,
-        cancelHover: tokens.black.c150
+        cancelHover: tokens.black.c150,
       },
 
       background: {
@@ -112,7 +112,7 @@ export default createTheme({
         secondary: tokens.black.c75,
         secondaryHover: tokens.black.c75,
         accentA: tokens.purple.c600,
-        accentB: tokens.black.c100
+        accentB: tokens.black.c100,
       },
 
       modal: {
@@ -126,7 +126,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -134,7 +134,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c900,
         focused: tokens.black.c125,
         placeholder: tokens.shade.c200,
-        icon: tokens.shade.c500
+        icon: tokens.shade.c500,
       },
 
       mediaCard: {
@@ -145,12 +145,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.black.c100,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -160,7 +160,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.black.c50
+        contentBackground: tokens.black.c50,
       },
 
       authentication: {
@@ -169,7 +169,7 @@ export default createTheme({
         inputBgHover: tokens.black.c150,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -182,23 +182,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.black.c200,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c100
+            activated: tokens.purple.c100,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c700,
           background: tokens.black.c100,
-          altBackground: tokens.black.c100
+          altBackground: tokens.black.c100,
         },
 
         saveBar: {
-          background: tokens.black.c50
+          background: tokens.black.c50,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -206,25 +206,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.black.c100,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -232,17 +232,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c800,
-          hover: tokens.ash.c600 
+          hover: tokens.ash.c600,
         },
 
         scraping: {
           card: tokens.black.c50,
           loading: tokens.purple.c200,
-          noresult: tokens.black.c200
+          noresult: tokens.black.c200,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -261,7 +261,7 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
@@ -269,10 +269,10 @@ export default createTheme({
           type: {
             secondary: tokens.ash.c200,
             accent: tokens.purple.c200,
-            main: tokens.semantic.silver.c300
+            main: tokens.semantic.silver.c300,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/spiderman.ts

@@ -83,8 +83,8 @@ const tokens = {
     c700: "hsla(0, 28%, 10%, 1)",
     c800: "hsla(0, 26%, 8%, 1)",
     c900: "hsla(0, 24%, 5%, 1)",
-  }
+  },
-}
+};
 
 export default createTheme({
   name: "spiderman",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/list/teal.ts

@@ -11,7 +11,7 @@ const tokens = {
     c600: "#1f4464",
     c700: "#18334a",
     c800: "#112434",
-    c900: "#0b1822"
+    c900: "#0b1822",
   },
   shade: {
     c25: "#5db3a8",
@@ -24,7 +24,7 @@ const tokens = {
     c600: "#172028",
     c700: "#131a22",
     c800: "#0f151b",
-    c900: "#0a0e12"
+    c900: "#0a0e12",
   },
   ash: {
     c50: "#7f9b9b",
@@ -36,7 +36,7 @@ const tokens = {
     c600: "#173232",
     c700: "#132929",
     c800: "#102020",
-    c900: "#0c1615"
+    c900: "#0c1615",
   },
   blue: {
     c50: "#adf5d6",
@@ -48,8 +48,8 @@ const tokens = {
     c600: "#1b4130",
     c700: "#173629",
     c800: "#102019",
-    c900: "#0b1310"
+    c900: "#0b1310",
-  }
+  },
 };
 
 export default createTheme({
@@ -58,7 +58,7 @@ export default createTheme({
     colors: {
       themePreview: {
         primary: tokens.blue.c200,
-        secondary: tokens.shade.c50
+        secondary: tokens.shade.c50,
       },
 
       pill: {
@@ -71,11 +71,11 @@ export default createTheme({
 
       global: {
         accentA: tokens.blue.c200,
-        accentB: tokens.blue.c300
+        accentB: tokens.blue.c300,
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.blue.c400,
       },
 
       buttons: {
@@ -87,7 +87,7 @@ export default createTheme({
         purple: tokens.purple.c500,
         purpleHover: tokens.purple.c400,
         cancel: tokens.ash.c500,
-        cancelHover: tokens.ash.c300
+        cancelHover: tokens.ash.c300,
       },
 
       background: {
@@ -95,7 +95,7 @@ export default createTheme({
         secondary: tokens.shade.c600,
         secondaryHover: tokens.shade.c400,
         accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        accentB: tokens.blue.c500,
       },
 
       modal: {
@@ -109,7 +109,7 @@ export default createTheme({
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         link: tokens.purple.c100,
-        linkHover: tokens.purple.c50
+        linkHover: tokens.purple.c50,
       },
 
       search: {
@@ -117,7 +117,7 @@ export default createTheme({
         hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        icon: tokens.shade.c100,
       },
 
       mediaCard: {
@@ -128,12 +128,12 @@ export default createTheme({
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
-        badgeText: tokens.ash.c100
+        badgeText: tokens.ash.c100,
       },
 
       largeCard: {
         background: tokens.shade.c600,
-        icon: tokens.purple.c400
+        icon: tokens.purple.c400,
       },
 
       dropdown: {
@@ -143,7 +143,7 @@ export default createTheme({
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.shade.c500,
       },
 
       authentication: {
@@ -152,7 +152,7 @@ export default createTheme({
         inputBgHover: tokens.shade.c500,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
-        copyTextHover: tokens.ash.c50
+        copyTextHover: tokens.ash.c50,
       },
 
       settings: {
@@ -165,23 +165,23 @@ export default createTheme({
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
             iconActivated: tokens.purple.c200,
-            activated: tokens.purple.c50
+            activated: tokens.purple.c50,
-          }
+          },
         },
 
         card: {
           border: tokens.shade.c400,
           background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          altBackground: tokens.shade.c400,
         },
 
         saveBar: {
-          background: tokens.shade.c800
+          background: tokens.shade.c800,
-        }
+        },
       },
 
       utils: {
-        divider: tokens.ash.c300
+        divider: tokens.ash.c300,
       },
 
       errors: {
@@ -189,25 +189,25 @@ export default createTheme({
         border: tokens.ash.c500,
 
         type: {
-          secondary: tokens.ash.c100
+          secondary: tokens.ash.c100,
-        }
+        },
       },
 
       about: {
         circle: tokens.ash.c500,
-        circleText: tokens.ash.c50
+        circleText: tokens.ash.c50,
       },
 
       editBadge: {
         bg: tokens.ash.c500,
         bgHover: tokens.ash.c400,
-        text: tokens.ash.c50
+        text: tokens.ash.c50,
       },
 
       progress: {
         background: tokens.ash.c50,
         preloaded: tokens.ash.c50,
-        filled: tokens.purple.c200
+        filled: tokens.purple.c200,
       },
 
       video: {
@@ -215,17 +215,17 @@ export default createTheme({
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {
           card: tokens.shade.c700,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.ash.c100,
         },
 
         audio: {
-          set: tokens.purple.c200
+          set: tokens.purple.c200,
         },
 
         context: {
@@ -244,17 +244,17 @@ export default createTheme({
 
           buttons: {
             list: tokens.ash.c700,
-            active: tokens.ash.c900
+            active: tokens.ash.c900,
           },
 
           closeHover: tokens.ash.c800,
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
-          }
+          },
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });

themes/list/wolverine.ts

@@ -84,7 +84,7 @@ const tokens = {
     c800: "hsla(240, 30%, 8%, 1)", // Background main, settings save bar, onboarding card
     c900: "hsla(240, 29%, 5%, 1)", // Media card hover shadow
   },
-}
+};
 
 export default createTheme({
   name: "wolverine",
@@ -340,4 +340,4 @@ export default createTheme({
       },
     },
   },
-})
+});

themes/types.ts

@@ -3,13 +3,13 @@ import { defaultTheme } from "./default";
 
 export interface Theme {
   name: string;
-  extend: DeepPartial<(typeof defaultTheme)["extend"]>
+  extend: DeepPartial<(typeof defaultTheme)["extend"]>;
 }
 
 export function createTheme(theme: Theme) {
   return {
     name: theme.name,
     selectors: [`.theme-${theme.name}`],
-    extend: theme.extend
+    extend: theme.extend,
-  }
+  };
 }

vite.config.mts

@@ -4,7 +4,7 @@ import loadVersion from "vite-plugin-package-version";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
 import path from "path";
-import million from 'million/compiler';
+import million from "million/compiler";
 import { handlebars } from "./plugins/handlebars";
 import { PluginOption, loadEnv, splitVendorChunkPlugin } from "vite";
 import { visualizer } from "rollup-plugin-visualizer";
@@ -18,13 +18,13 @@ const captioningPackages = [
   "subsrt-ts",
   "parse5",
   "entities",
-  "fuse"
+  "fuse",
 ];
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
   return {
-    base: env.VITE_BASE_URL || '/',
+    base: env.VITE_BASE_URL || "/",
     plugins: [
       million.vite({ auto: true, mute: true }),
       handlebars({
@@ -69,7 +69,8 @@ export default defineConfig(({ mode }) => {
         manifest: {
           name: "P-Stream",
           short_name: "P-Stream",
-          description: "Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)",
+          description:
+            "Watch your favorite shows and movies for free with no ads ever! (っ'ヮ'c)",
           theme_color: "#000000",
           background_color: "#000000",
           display: "standalone",
@@ -117,7 +118,7 @@ export default defineConfig(({ mode }) => {
         },
       }),
       splitVendorChunkPlugin(),
-      visualizer() as PluginOption
+      visualizer() as PluginOption,
     ],
 
     build: {
@@ -125,7 +126,10 @@ export default defineConfig(({ mode }) => {
       rollupOptions: {
         output: {
           manualChunks(id: string) {
-            if (id.includes("@sozialhelden+ietf-language-tags") || id.includes("country-language")) {
+            if (
+              id.includes("@sozialhelden+ietf-language-tags") ||
+              id.includes("country-language")
+            ) {
               return "language-db";
             }
             if (id.includes("hls.js")) {
@@ -143,13 +147,15 @@ export default defineConfig(({ mode }) => {
             if (id.includes("Icon.tsx")) {
               return "Icons";
             }
-            const isCaptioningPackage = captioningPackages.some(packageName => id.includes(packageName));
+            const isCaptioningPackage = captioningPackages.some((packageName) =>
+              id.includes(packageName),
+            );
             if (isCaptioningPackage) {
               return "caption-parsing";
             }
-          }
+          },
-        }
+        },
-      }
+      },
     },
     css: {
       postcss: {
@@ -162,7 +168,7 @@ export default defineConfig(({ mode }) => {
         "@": path.resolve(__dirname, "./src"),
         "@sozialhelden/ietf-language-tags": path.resolve(
           __dirname,
-          "./node_modules/@sozialhelden/ietf-language-tags/dist/cjs"
+          "./node_modules/@sozialhelden/ietf-language-tags/dist/cjs",
         ),
       },
     },