Merge pull request #361 from movie-web/dev

v3.1.0

.eslintrc.js

@@ -8,27 +8,28 @@ const a11yOff = Object.keys(require("eslint-plugin-jsx-a11y").rules).reduce(
 
 module.exports = {
   env: {
-    browser: true
+    browser: true,
   },
   extends: [
     "airbnb",
     "airbnb/hooks",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
   ],
   ignorePatterns: ["public/*", "dist/*", "/*.js", "/*.ts"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "./tsconfig.json",
-    tsconfigRootDir: "./"
+    tsconfigRootDir: "./",
   },
   settings: {
     "import/resolver": {
-      typescript: {}
-    }
+      typescript: {
+        project: "./tsconfig.json",
+      },
+    },
   },
-  plugins: ["@typescript-eslint", "import"],
+  plugins: ["@typescript-eslint", "import", "prettier"],
   rules: {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
@@ -43,6 +44,7 @@ module.exports = {
     "no-shadow": "off",
     "@typescript-eslint/no-shadow": ["error"],
     "no-restricted-syntax": "off",
+    "import/no-unresolved": ["error", { ignore: ["^virtual:"] }],
     "react/jsx-props-no-spreading": "off",
     "consistent-return": "off",
     "no-continue": "off",
@@ -53,16 +55,44 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
     "react/jsx-filename-extension": [
       "error",
-      { extensions: [".js", ".tsx", ".jsx"] }
+      { extensions: [".js", ".tsx", ".jsx"] },
     ],
     "import/extensions": [
       "error",
       "ignorePackages",
       {
         ts: "never",
-        tsx: "never"
-      }
+        tsx: "never",
+      },
     ],
-    ...a11yOff
-  }
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          ["sibling", "parent"],
+          "index",
+          "unknown",
+        ],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+    "sort-imports": [
+      "error",
+      {
+        ignoreCase: false,
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
+        allowSeparatedGroups: true,
+      },
+    ],
+    ...a11yOff,
+  },
 };

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/deploying.yml

@@ -18,12 +18,13 @@ jobs:
       uses: actions/setup-node@v3
       with:
         node-version: 18
+        cache: 'yarn'
     
     - name: Install Yarn packages
       run: yarn install
     
     - name: Build project
-      run: npm run build
+      run: yarn build
 
     - name: Upload production-ready build files
       uses: actions/upload-artifact@v3

.github/workflows/linting_testing.yml

@@ -5,8 +5,7 @@ on:
     branches:
       - master
       - dev
-  pull_request_target:
-    types: [opened, reopened, synchronize]
+  pull_request:
 
 jobs:
   linting:
@@ -21,20 +20,30 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: 'yarn'
       
       - name: Install Yarn packages
         run: yarn install
       
-      - name: Run ESLint Report
-        run: yarn lint:report
-        # continue on error, so it still reports it in the next step
-        continue-on-error: true
+      - name: Run ESLint
+        run: yarn lint
 
-      - name: Annotate Code Linting Results
-        uses: ataylorme/eslint-annotate-action@v2
+  building:
+    name: Build project
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      
+      - name: Install Node.js
+        uses: actions/setup-node@v3
         with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          report-json: "eslint_report.json"
+          node-version: 18
+          cache: 'yarn'
+      
+      - name: Install Yarn packages
+        run: yarn install
 
       - name: Build Project
-        run: npm run build
+        run: yarn build

.gitignore

@@ -10,6 +10,7 @@ node_modules
 
 # production
 /dist
+dev-dist
 
 # misc
 .DS_Store

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-  "eslint.format.enable": true
+  "eslint.format.enable": true,
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

README.md

@@ -8,7 +8,7 @@
 <a href="https://discord.gg/vXsRvye8BS"><img src="https://discordapp.com/api/guilds/871713465100816424/widget.png?style=banner2" alt="Discord Server"></a>
 </p>
 
-movie-web is a web app for watching movies easily. Check it out at **[movie.squeezebox.dev](https://movie.squeezebox.dev)**.
+movie-web is a web app for watching movies easily. Check it out at **[movie-web.app](https://movie-web.app)**.
 
 This service works by displaying video files from third-party providers inside an intuitive and aesthetic user interface.
 
@@ -40,7 +40,7 @@ To run this project locally for contributing or testing, run the following comma
 git clone https://github.com/movie-web/movie-web
 cd movie-web
 yarn install
-yarn start
+yarn dev
 ```
 
 To build production files, simply run `yarn build`.

index.html

@@ -1,36 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-44YVXRL61C"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-44YVXRL61C");
-    </script>
-
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta
       name="description"
-      content="Because watching movies legally is boring"
+      content="The place for your favourite movies & shows"
     />
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#E880C5" />
-    <meta name="msapplication-TileColor" content="#E880C5" />
-    <meta name="theme-color" content="#E880C5" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#120f1d" />
+    <meta name="msapplication-TileColor" content="#120f1d" />
+    <meta name="theme-color" content="#120f1d" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -40,7 +24,13 @@
     />
 
     <script src="config.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@3744edbc5f64a77985b6421ea5040e688663634b/out.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@8b821f445b83d51ef1b8f42c99b7346f6b47dce5/out.js"></script>
+
+    <!-- prevent darkreader extension from messing with our already dark site -->
+    <meta name="darkreader-lock" />
+
+    <!-- disabling referrer can fix some provider problems -->
+    <meta name="referrer" content="no-referrer" />
 
     <title>movie-web</title>
   </head>

package.json

@@ -1,13 +1,18 @@
 {
   "name": "movie-web",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "private": true,
-  "homepage": "https://movie.squeezebox.dev",
+  "homepage": "https://movie-web.app",
   "dependencies": {
     "@formkit/auto-animate": "^1.0.0-beta.5",
     "@headlessui/react": "^1.5.0",
-    "@types/react-helmet": "^6.1.6",
+    "@react-spring/web": "^9.7.1",
+    "@sentry/integrations": "^7.49.0",
+    "@sentry/react": "^7.49.0",
+    "@use-gesture/react": "^10.2.24",
+    "core-js": "^3.29.1",
     "crypto-js": "^4.1.1",
+    "dompurify": "^3.0.1",
     "fscreen": "^1.2.0",
     "fuse.js": "^6.4.6",
     "hls.js": "^1.0.7",
@@ -20,17 +25,20 @@
     "pako": "^2.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-ga4": "^2.0.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^12.1.1",
     "react-router-dom": "^5.2.0",
     "react-stickynode": "^4.1.0",
     "react-transition-group": "^4.4.5",
-    "srt-webvtt": "^2.0.0",
+    "react-use": "^17.4.0",
+    "subsrt-ts": "^2.1.1",
     "unpacker": "^1.0.1"
   },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "test": "vitest run",
     "preview": "vite preview",
     "lint": "eslint --ext .tsx,.ts src",
     "lint:fix": "eslint --fix --ext .tsx,.ts src",
@@ -38,9 +46,8 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "defaults",
+      "chrome > 90"
     ],
     "development": [
       "last 1 chrome version",
@@ -49,32 +56,38 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.21.0",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@types/chromecast-caf-sender": "^1.0.5",
     "@types/crypto-js": "^4.1.1",
+    "@types/dompurify": "^2.4.0",
     "@types/fscreen": "^1.0.1",
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^17.0.15",
     "@types/pako": "^2.0.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "@types/react-router": "^5.1.18",
+    "@types/react-helmet": "^6.1.6",
+    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-stickynode": "^4.0.0",
     "@types/react-transition-group": "^4.4.5",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
-    "@vitejs/plugin-react-swc": "^3.0.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.10.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.3.0",
+    "jsdom": "^21.1.0",
     "postcss": "^8.4.20",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.7",
@@ -83,6 +96,10 @@
     "typescript": "^4.6.4",
     "vite": "^4.0.1",
     "vite-plugin-checker": "^0.5.6",
-    "vite-plugin-package-version": "^1.0.2"
+    "vite-plugin-package-version": "^1.0.2",
+    "vite-plugin-pwa": "^0.14.4",
+    "vitest": "^0.28.5",
+    "workbox-build": "^6.5.4",
+    "workbox-window": "^6.5.4"
   }
 }

public/_headers

@@ -0,0 +1,5 @@
+/*
+  X-Frame-Options: DENY
+  X-XSS-Protection: 1; mode=block
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: origin-when-cross-origin

public/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <TileColor>#120f1d</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/config.js

@@ -1,7 +1,6 @@
 window.__CONFIG__ = {
   // url must NOT end with a slash
   VITE_CORS_PROXY_URL: "",
-
   VITE_TMDB_API_KEY: "b030404650f279792a8d3287232358e3",
-  VITE_OMDB_API_KEY: "aa0937c0"
+  VITE_OMDB_API_KEY: "aa0937c0",
 };

public/ping.txt

@@ -0,0 +1 @@
+pong

public/site.webmanifest

@@ -1,20 +0,0 @@
-{
-    "name": "movie-web",
-    "short_name": "movie-web",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#E880C5",
-    "background_color": "#16171D",
-    "display": "standalone",
-    "start_url": "/"
-}

src/__tests__/providers/providers.test.ts

@@ -0,0 +1,52 @@
+import { describe, it } from "vitest";
+
+import "@/backend";
+import { testData } from "@/__tests__/providers/testdata";
+import { getProviders } from "@/backend/helpers/register";
+import { runProvider } from "@/backend/helpers/run";
+import { MWMediaType } from "@/backend/metadata/types/mw";
+
+describe("providers", () => {
+  const providers = getProviders();
+
+  it("have at least one provider", ({ expect }) => {
+    expect(providers.length).toBeGreaterThan(0);
+  });
+
+  for (const provider of providers) {
+    describe(provider.displayName, () => {
+      it("must have at least one type", async ({ expect }) => {
+        expect(provider.type.length).toBeGreaterThan(0);
+      });
+
+      if (provider.type.includes(MWMediaType.MOVIE)) {
+        it("must work with movies", async ({ expect }) => {
+          const movie = testData.find((v) => v.meta.type === MWMediaType.MOVIE);
+          if (!movie) throw new Error("no movie to test with");
+          const results = await runProvider(provider, {
+            media: movie,
+            progress() {},
+            type: movie.meta.type as any,
+          });
+          expect(results).toBeTruthy();
+        });
+      }
+
+      if (provider.type.includes(MWMediaType.SERIES)) {
+        it("must work with series", async ({ expect }) => {
+          const show = testData.find((v) => v.meta.type === MWMediaType.SERIES);
+          if (show?.meta.type !== MWMediaType.SERIES)
+            throw new Error("no show to test with");
+          const results = await runProvider(provider, {
+            media: show,
+            progress() {},
+            type: show.meta.type as MWMediaType.SERIES,
+            episode: show.meta.seasonData.episodes[0].id,
+            season: show.meta.seasons[0].id,
+          });
+          expect(results).toBeTruthy();
+        });
+      }
+    });
+  }
+});

src/__tests__/providers/testdata.ts

@@ -0,0 +1,45 @@
+import { DetailedMeta } from "@/backend/metadata/getmeta";
+import { MWMediaType } from "@/backend/metadata/types/mw";
+
+export const testData: DetailedMeta[] = [
+  {
+    imdbId: "tt10954562",
+    tmdbId: "572716",
+    meta: {
+      id: "439596",
+      title: "Hamilton",
+      type: MWMediaType.MOVIE,
+      year: "2020",
+      seasons: undefined,
+    },
+  },
+  {
+    imdbId: "tt11126994",
+    tmdbId: "94605",
+    meta: {
+      id: "222333",
+      title: "Arcane",
+      type: MWMediaType.SERIES,
+      year: "2021",
+      seasons: [
+        {
+          id: "230301",
+          number: 1,
+          title: "Season 1",
+        },
+      ],
+      seasonData: {
+        id: "230301",
+        number: 1,
+        title: "Season 1",
+        episodes: [
+          {
+            id: "4243445",
+            number: 1,
+            title: "Welcome to the Playground",
+          },
+        ],
+      },
+    },
+  },
+];

src/__tests__/subtitles/subtitles.test.ts

@@ -0,0 +1,152 @@
+import { describe, it } from "vitest";
+
+import {
+  getMWCaptionTypeFromUrl,
+  isSupportedSubtitle,
+  parseSubtitles,
+} from "@/backend/helpers/captions";
+import { MWCaptionType } from "@/backend/helpers/streams";
+
+import {
+  ass,
+  multilineSubtitlesTestVtt,
+  srt,
+  visibleSubtitlesTestVtt,
+  vtt,
+} from "./testdata";
+
+describe("subtitles", () => {
+  it("should return true if given url ends with a known subtitle type", ({
+    expect,
+  }) => {
+    expect(isSupportedSubtitle("https://example.com/test.srt")).toBe(true);
+    expect(isSupportedSubtitle("https://example.com/test.vtt")).toBe(true);
+    expect(isSupportedSubtitle("https://example.com/test.txt")).toBe(false);
+  });
+
+  it("should return corresponding MWCaptionType", ({ expect }) => {
+    expect(getMWCaptionTypeFromUrl("https://example.com/test.srt")).toBe(
+      MWCaptionType.SRT
+    );
+    expect(getMWCaptionTypeFromUrl("https://example.com/test.vtt")).toBe(
+      MWCaptionType.VTT
+    );
+    expect(getMWCaptionTypeFromUrl("https://example.com/test.txt")).toBe(
+      MWCaptionType.UNKNOWN
+    );
+  });
+
+  it("should throw when empty text is given", ({ expect }) => {
+    expect(() => parseSubtitles("")).toThrow("Given text is empty");
+  });
+
+  it("should parse srt", ({ expect }) => {
+    const parsed = parseSubtitles(srt);
+    const parsedSrt = [
+      {
+        type: "caption",
+        index: 1,
+        start: 0,
+        end: 0,
+        duration: 0,
+        content: "Test",
+        text: "Test",
+      },
+      {
+        type: "caption",
+        index: 2,
+        start: 0,
+        end: 0,
+        duration: 0,
+        content: "Test",
+        text: "Test",
+      },
+    ];
+    expect(parsed).toHaveLength(2);
+    expect(parsed).toEqual(parsedSrt);
+  });
+
+  it("should parse vtt", ({ expect }) => {
+    const parsed = parseSubtitles(vtt);
+    const parsedVtt = [
+      {
+        type: "caption",
+        index: 1,
+        start: 0,
+        end: 4000,
+        duration: 4000,
+        content: "Where did he go?",
+        text: "Where did he go?",
+      },
+      {
+        type: "caption",
+        index: 2,
+        start: 3000,
+        end: 6500,
+        duration: 3500,
+        content: "I think he went down this lane.",
+        text: "I think he went down this lane.",
+      },
+      {
+        type: "caption",
+        index: 3,
+        start: 4000,
+        end: 6500,
+        duration: 2500,
+        content: "What are you waiting for?",
+        text: "What are you waiting for?",
+      },
+    ];
+    expect(parsed).toHaveLength(3);
+    expect(parsed).toEqual(parsedVtt);
+  });
+
+  it("should parse ass", ({ expect }) => {
+    const parsed = parseSubtitles(ass);
+    expect(parsed).toHaveLength(3);
+  });
+
+  it("should delay subtitles when given a delay", ({ expect }) => {
+    const videoTime = 11;
+    let delayedSeconds = 0;
+    const parsed = parseSubtitles(visibleSubtitlesTestVtt);
+    const isVisible = (start: number, end: number, delay: number): boolean => {
+      const delayedStart = start / 1000 + delay;
+      const delayedEnd = end / 1000 + delay;
+      return (
+        Math.max(0, delayedStart) <= videoTime &&
+        Math.max(0, delayedEnd) >= videoTime
+      );
+    };
+    const visibleSubtitles = parsed.filter((c) =>
+      isVisible(c.start, c.end, delayedSeconds)
+    );
+    expect(visibleSubtitles).toHaveLength(1);
+
+    delayedSeconds = 10;
+    const delayedVisibleSubtitles = parsed.filter((c) =>
+      isVisible(c.start, c.end, delayedSeconds)
+    );
+    expect(delayedVisibleSubtitles).toHaveLength(1);
+
+    delayedSeconds = -10;
+    const delayedVisibleSubtitles2 = parsed.filter((c) =>
+      isVisible(c.start, c.end, delayedSeconds)
+    );
+    expect(delayedVisibleSubtitles2).toHaveLength(1);
+
+    delayedSeconds = -20;
+    const delayedVisibleSubtitles3 = parsed.filter((c) =>
+      isVisible(c.start, c.end, delayedSeconds)
+    );
+    expect(delayedVisibleSubtitles3).toHaveLength(1);
+  });
+
+  it("should parse multiline captions", ({ expect }) => {
+    const parsed = parseSubtitles(multilineSubtitlesTestVtt);
+
+    expect(parsed[0].text).toBe(`- Test 1\n- Test 2\n- Test 3`);
+    expect(parsed[1].text).toBe(`- Test 4`);
+    expect(parsed[2].text).toBe(`- Test 6`);
+  });
+});

src/__tests__/subtitles/testdata.ts

@@ -0,0 +1,68 @@
+const srt = `
+1
+00:00:00,000 --> 00:00:00,000
+Test
+
+2
+00:00:00,000 --> 00:00:00,000
+Test
+`;
+const vtt = `
+WEBVTT
+
+00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?
+`;
+const ass = `[Script Info]
+; Generated by Ebby.co
+Title: 
+Original Script: 
+ScriptType: v4.00+
+Collisions: Normal
+PlayResX: 384
+PlayResY: 288
+PlayDepth: 0
+Timer: 100.0
+WrapStyle: 0
+
+[v4+ Styles]
+Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
+Style: Default, Arial, 16, &H00FFFFFF, &H00000000, &H00000000, &H00000000, 0, 0, 0, 0, 100, 100, 0, 0, 1, 1, 0, 2, 15, 15, 15, 0
+
+[Events]
+Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
+Dialogue: 0,0:00:10.00,0:00:20.00,Default,,0000,0000,0000,,This is the first subtitle.
+Dialogue: 0,0:00:30.00,0:00:34.00,Default,,0000,0000,0000,,This is the second.
+Dialogue: 0,0:00:34.00,0:00:35.00,Default,,0000,0000,0000,,Third`;
+
+const visibleSubtitlesTestVtt = `WEBVTT
+
+00:00:00.000 --> 00:00:10.000 position:10%,line-left align:left size:35%
+Test 1
+
+00:00:10.000 --> 00:00:20.000 position:90% align:right size:35%
+Test 2
+
+00:00:20.000 --> 00:00:31.000 position:45%,line-right align:center size:35%
+Test 3
+`;
+
+const multilineSubtitlesTestVtt = `WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+- Test 1\n- Test 2\n- Test 3
+
+00:00:10.000 --> 00:00:20.000
+- Test 4
+
+00:00:20.000 --> 00:00:31.000
+- Test 6
+`;
+
+export { vtt, srt, ass, visibleSubtitlesTestVtt, multilineSubtitlesTestVtt };

src/backend/embeds/mp4upload.ts

@@ -0,0 +1,32 @@
+import { MWEmbedType } from "@/backend/helpers/embed";
+import { registerEmbedScraper } from "@/backend/helpers/register";
+import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
+
+import { proxiedFetch } from "../helpers/fetch";
+
+registerEmbedScraper({
+  id: "mp4upload",
+  displayName: "mp4upload",
+  for: MWEmbedType.MP4UPLOAD,
+  rank: 170,
+  async getStream({ url }) {
+    const embed = await proxiedFetch<any>(url);
+
+    const playerSrcRegex =
+      /(?<=player\.src\()\s*{\s*type:\s*"[^"]+",\s*src:\s*"([^"]+)"\s*}\s*(?=\);)/s;
+
+    const playerSrc = embed.match(playerSrcRegex);
+
+    const streamUrl = playerSrc[1];
+
+    if (!streamUrl) throw new Error("Stream url not found");
+
+    return {
+      embedId: MWEmbedType.MP4UPLOAD,
+      streamUrl,
+      quality: MWStreamQuality.Q1080P,
+      captions: [],
+      type: MWStreamType.MP4,
+    };
+  },
+});

src/backend/embeds/playm4u.ts

@@ -10,6 +10,7 @@ registerEmbedScraper({
   async getStream() {
     // throw new Error("Oh well 2")
     return {
+      embedId: "",
       streamUrl: "",
       quality: MWStreamQuality.Q1080P,
       captions: [],

src/backend/embeds/streamm4u.ts

@@ -1,11 +1,11 @@
 import { MWEmbedType } from "@/backend/helpers/embed";
+import { proxiedFetch } from "@/backend/helpers/fetch";
 import { registerEmbedScraper } from "@/backend/helpers/register";
 import {
+  MWEmbedStream,
   MWStreamQuality,
   MWStreamType,
-  MWStream,
 } from "@/backend/helpers/streams";
-import { proxiedFetch } from "@/backend/helpers/fetch";
 
 const HOST = "streamm4u.club";
 const URL_BASE = `https://${HOST}`;
@@ -13,7 +13,7 @@ const URL_API = `${URL_BASE}/api`;
 const URL_API_SOURCE = `${URL_API}/source`;
 
 async function scrape(embed: string) {
-  const sources: MWStream[] = [];
+  const sources: MWEmbedStream[] = [];
 
   const embedID = embed.split("/").pop();
 
@@ -28,6 +28,7 @@ async function scrape(embed: string) {
 
     for (const stream of streams) {
       sources.push({
+        embedId: "",
         streamUrl: stream.file as string,
         quality: stream.label as MWStreamQuality,
         type: stream.type as MWStreamType,

src/backend/embeds/streamsb.ts

@@ -0,0 +1,211 @@
+import Base64 from "crypto-js/enc-base64";
+import Utf8 from "crypto-js/enc-utf8";
+
+import { MWEmbedType } from "@/backend/helpers/embed";
+import { proxiedFetch } from "@/backend/helpers/fetch";
+import { registerEmbedScraper } from "@/backend/helpers/register";
+import {
+  MWCaptionType,
+  MWStreamQuality,
+  MWStreamType,
+} from "@/backend/helpers/streams";
+
+const qualityOrder = [
+  MWStreamQuality.Q1080P,
+  MWStreamQuality.Q720P,
+  MWStreamQuality.Q480P,
+  MWStreamQuality.Q360P,
+];
+
+async function fetchCaptchaToken(domain: string, recaptchaKey: string) {
+  const domainHash = Base64.stringify(Utf8.parse(domain)).replace(/=/g, ".");
+
+  const recaptchaRender = await proxiedFetch<any>(
+    `https://www.google.com/recaptcha/api.js?render=${recaptchaKey}`
+  );
+
+  const vToken = recaptchaRender.substring(
+    recaptchaRender.indexOf("/releases/") + 10,
+    recaptchaRender.indexOf("/recaptcha__en.js")
+  );
+
+  const recaptchaAnchor = await proxiedFetch<any>(
+    `https://www.google.com/recaptcha/api2/anchor?ar=1&hl=en&size=invisible&cb=flicklax&k=${recaptchaKey}&co=${domainHash}&v=${vToken}`
+  );
+
+  const cToken = new DOMParser()
+    .parseFromString(recaptchaAnchor, "text/html")
+    .getElementById("recaptcha-token")
+    ?.getAttribute("value");
+
+  if (!cToken) throw new Error("Unable to find cToken");
+
+  const payload = {
+    v: vToken,
+    reason: "q",
+    k: recaptchaKey,
+    c: cToken,
+    sa: "",
+    co: domain,
+  };
+
+  const tokenData = await proxiedFetch<string>(
+    `https://www.google.com/recaptcha/api2/reload?${new URLSearchParams(
+      payload
+    ).toString()}`,
+    {
+      headers: { referer: "https://www.google.com/recaptcha/api2/" },
+      method: "POST",
+    }
+  );
+
+  const token = tokenData.match('rresp","(.+?)"');
+  return token ? token[1] : null;
+}
+
+registerEmbedScraper({
+  id: "streamsb",
+  displayName: "StreamSB",
+  for: MWEmbedType.STREAMSB,
+  rank: 150,
+  async getStream({ url, progress }) {
+    /* Url variations
+    - domain.com/{id}?.html
+    - domain.com/{id}
+    - domain.com/embed-{id}
+    - domain.com/d/{id}
+    - domain.com/e/{id}
+    - domain.com/e/{id}-embed
+    */
+    const streamsbUrl = url
+      .replace(".html", "")
+      .replace("embed-", "")
+      .replace("e/", "")
+      .replace("d/", "");
+
+    const parsedUrl = new URL(streamsbUrl);
+    const base = await proxiedFetch<any>(
+      `${parsedUrl.origin}/d${parsedUrl.pathname}`
+    );
+
+    progress(20);
+
+    // Parse captions from url
+    const captionUrl = parsedUrl.searchParams.get("caption_1");
+    const captionLang = parsedUrl.searchParams.get("sub_1");
+
+    const basePage = new DOMParser().parseFromString(base, "text/html");
+
+    const downloadVideoFunctions = basePage.querySelectorAll(
+      "[onclick^=download_video]"
+    );
+
+    let dlDetails = [];
+    for (const func of downloadVideoFunctions) {
+      const funcContents = func.getAttribute("onclick");
+      const regExpFunc = /download_video\('(.+?)','(.+?)','(.+?)'\)/;
+      const matchesFunc = regExpFunc.exec(funcContents ?? "");
+      if (matchesFunc !== null) {
+        const quality = func.querySelector("span")?.textContent;
+        const regExpQuality = /(.+?) \((.+?)\)/;
+        const matchesQuality = regExpQuality.exec(quality ?? "");
+        if (matchesQuality !== null) {
+          dlDetails.push({
+            parameters: [matchesFunc[1], matchesFunc[2], matchesFunc[3]],
+            quality: {
+              label: matchesQuality[1].trim(),
+              size: matchesQuality[2],
+            },
+          });
+        }
+      }
+    }
+
+    dlDetails = dlDetails.sort((a, b) => {
+      const aQuality = qualityOrder.indexOf(a.quality.label as MWStreamQuality);
+      const bQuality = qualityOrder.indexOf(b.quality.label as MWStreamQuality);
+      return aQuality - bQuality;
+    });
+
+    progress(40);
+
+    let dls = await Promise.all(
+      dlDetails.map(async (dl) => {
+        const getDownload = await proxiedFetch<any>(
+          `/dl?op=download_orig&id=${dl.parameters[0]}&mode=${dl.parameters[1]}&hash=${dl.parameters[2]}`,
+          {
+            baseURL: parsedUrl.origin,
+          }
+        );
+
+        const downloadPage = new DOMParser().parseFromString(
+          getDownload,
+          "text/html"
+        );
+
+        const recaptchaKey = downloadPage
+          .querySelector(".g-recaptcha")
+          ?.getAttribute("data-sitekey");
+        if (!recaptchaKey) throw new Error("Unable to get captcha key");
+
+        const captchaToken = await fetchCaptchaToken(
+          parsedUrl.origin,
+          recaptchaKey
+        );
+        if (!captchaToken) throw new Error("Unable to get captcha token");
+
+        const dlForm = new FormData();
+        dlForm.append("op", "download_orig");
+        dlForm.append("id", dl.parameters[0]);
+        dlForm.append("mode", dl.parameters[1]);
+        dlForm.append("hash", dl.parameters[2]);
+        dlForm.append("g-recaptcha-response", captchaToken);
+
+        const download = await proxiedFetch<any>(
+          `/dl?op=download_orig&id=${dl.parameters[0]}&mode=${dl.parameters[1]}&hash=${dl.parameters[2]}`,
+          {
+            baseURL: parsedUrl.origin,
+            method: "POST",
+            body: dlForm,
+          }
+        );
+
+        const dlLink = new DOMParser()
+          .parseFromString(download, "text/html")
+          .querySelector(".btn.btn-light.btn-lg")
+          ?.getAttribute("href");
+
+        return {
+          quality: dl.quality.label as MWStreamQuality,
+          url: dlLink,
+          size: dl.quality.size,
+          captions:
+            captionUrl && captionLang
+              ? [
+                  {
+                    url: captionUrl,
+                    langIso: captionLang,
+                    type: MWCaptionType.VTT,
+                  },
+                ]
+              : [],
+        };
+      })
+    );
+    dls = dls.filter((d) => !!d.url);
+
+    progress(60);
+
+    // TODO: Quality selection for embed scrapers
+    const dl = dls[0];
+    if (!dl.url) throw new Error("No stream url found");
+
+    return {
+      embedId: MWEmbedType.STREAMSB,
+      streamUrl: dl.url,
+      quality: dl.quality,
+      captions: dl.captions,
+      type: MWStreamType.MP4,
+    };
+  },
+});

src/backend/embeds/upcloud.ts

@@ -0,0 +1,93 @@
+import { AES, enc } from "crypto-js";
+
+import { MWEmbedType } from "@/backend/helpers/embed";
+import { registerEmbedScraper } from "@/backend/helpers/register";
+import {
+  MWCaptionType,
+  MWStreamQuality,
+  MWStreamType,
+} from "@/backend/helpers/streams";
+
+import { proxiedFetch } from "../helpers/fetch";
+
+interface StreamRes {
+  server: number;
+  sources: string;
+  tracks: {
+    file: string;
+    kind: "captions" | "thumbnails";
+    label: string;
+  }[];
+}
+
+function isJSON(json: string) {
+  try {
+    JSON.parse(json);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+registerEmbedScraper({
+  id: "upcloud",
+  displayName: "UpCloud",
+  for: MWEmbedType.UPCLOUD,
+  rank: 200,
+  async getStream({ url }) {
+    // Example url: https://dokicloud.one/embed-4/{id}?z=
+    const parsedUrl = new URL(url.replace("embed-5", "embed-4"));
+
+    const dataPath = parsedUrl.pathname.split("/");
+    const dataId = dataPath[dataPath.length - 1];
+
+    const streamRes = await proxiedFetch<StreamRes>(
+      `${parsedUrl.origin}/ajax/embed-4/getSources?id=${dataId}`,
+      {
+        headers: {
+          Referer: parsedUrl.origin,
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      }
+    );
+
+    let sources:
+      | {
+          file: string;
+          type: string;
+        }
+      | string = streamRes.sources;
+
+    if (!isJSON(sources) || typeof sources === "string") {
+      const decryptionKey = await proxiedFetch<string>(
+        `https://raw.githubusercontent.com/enimax-anime/key/e4/key.txt`
+      );
+
+      const decryptedStream = AES.decrypt(sources, decryptionKey).toString(
+        enc.Utf8
+      );
+
+      const parsedStream = JSON.parse(decryptedStream)[0];
+      if (!parsedStream) throw new Error("No stream found");
+      sources = parsedStream as { file: string; type: string };
+    }
+
+    return {
+      embedId: MWEmbedType.UPCLOUD,
+      streamUrl: sources.file,
+      quality: MWStreamQuality.Q1080P,
+      type: MWStreamType.HLS,
+      captions: streamRes.tracks
+        .filter((sub) => sub.kind === "captions")
+        .map((sub) => {
+          return {
+            langIso: sub.label,
+            url: sub.file,
+            type: sub.file.endsWith("vtt")
+              ? MWCaptionType.VTT
+              : MWCaptionType.UNKNOWN,
+          };
+        }),
+    };
+  },
+});

src/backend/helpers/captions.ts

@@ -1,34 +1,62 @@
+import DOMPurify from "dompurify";
+import { convert, detect, list, parse } from "subsrt-ts";
+import { ContentCaption } from "subsrt-ts/dist/types/handler";
+
 import { mwFetch, proxiedFetch } from "@/backend/helpers/fetch";
 import { MWCaption, MWCaptionType } from "@/backend/helpers/streams";
-import toWebVTT from "srt-webvtt";
 
-export async function getCaptionUrl(caption: MWCaption): Promise<string> {
-  if (caption.type === MWCaptionType.SRT) {
-    let captionBlob: Blob;
-
-    if (caption.needsProxy) {
-      captionBlob = await proxiedFetch<Blob>(caption.url, {
-        responseType: "blob" as any,
-      });
-    } else {
-      captionBlob = await mwFetch<Blob>(caption.url, {
-        responseType: "blob" as any,
-      });
-    }
-
-    return toWebVTT(captionBlob);
-  }
-
-  if (caption.type === MWCaptionType.VTT) {
-    if (caption.needsProxy) {
-      const blob = await proxiedFetch<Blob>(caption.url, {
-        responseType: "blob" as any,
-      });
-      return URL.createObjectURL(blob);
-    }
-
-    return caption.url;
-  }
-
-  throw new Error("invalid type");
+export const customCaption = "external-custom";
+export function makeCaptionId(caption: MWCaption, isLinked: boolean): string {
+  return isLinked ? `linked-${caption.langIso}` : `external-${caption.langIso}`;
+}
+export const subtitleTypeList = list().map((type) => `.${type}`);
+export function isSupportedSubtitle(url: string): boolean {
+  return subtitleTypeList.some((type) => url.endsWith(type));
+}
+
+export function getMWCaptionTypeFromUrl(url: string): MWCaptionType {
+  if (!isSupportedSubtitle(url)) return MWCaptionType.UNKNOWN;
+  const type = subtitleTypeList.find((t) => url.endsWith(t));
+  if (!type) return MWCaptionType.UNKNOWN;
+  return type.slice(1) as MWCaptionType;
+}
+
+export const sanitize = DOMPurify.sanitize;
+export async function getCaptionUrl(caption: MWCaption): Promise<string> {
+  let captionBlob: Blob;
+  if (caption.url.startsWith("blob:")) {
+    // custom subtitle
+    captionBlob = await (await fetch(caption.url)).blob();
+  } else if (caption.needsProxy) {
+    captionBlob = await proxiedFetch<Blob>(caption.url, {
+      responseType: "blob" as any,
+    });
+  } else {
+    captionBlob = await mwFetch<Blob>(caption.url, {
+      responseType: "blob" as any,
+    });
+  }
+  // convert to vtt for track element source which will be used in PiP mode
+  const text = await captionBlob.text();
+  const vtt = convert(text, "vtt");
+  return URL.createObjectURL(new Blob([vtt], { type: "text/vtt" }));
+}
+
+export function revokeCaptionBlob(url: string | undefined) {
+  if (url && url.startsWith("blob:")) {
+    URL.revokeObjectURL(url);
+  }
+}
+
+export function parseSubtitles(text: string): ContentCaption[] {
+  const textTrimmed = text.trim();
+  if (textTrimmed === "") {
+    throw new Error("Given text is empty");
+  }
+  if (detect(textTrimmed) === "") {
+    throw new Error("Invalid subtitle format");
+  }
+  return parse(textTrimmed).filter(
+    (cue) => cue.type === "caption"
+  ) as ContentCaption[];
 }

src/backend/helpers/embed.ts

@@ -1,9 +1,12 @@
-import { MWStream } from "./streams";
+import { MWEmbedStream } from "./streams";
 
 export enum MWEmbedType {
   M4UFREE = "m4ufree",
   STREAMM4U = "streamm4u",
   PLAYM4U = "playm4u",
+  UPCLOUD = "upcloud",
+  STREAMSB = "streamsb",
+  MP4UPLOAD = "mp4upload",
 }
 
 export type MWEmbed = {
@@ -23,5 +26,5 @@ export type MWEmbedScraper = {
   rank: number;
   disabled?: boolean;
 
-  getStream(ctx: MWEmbedContext): Promise<MWStream>;
+  getStream(ctx: MWEmbedContext): Promise<MWEmbedStream>;
 };

src/backend/helpers/fetch.ts

@@ -1,5 +1,15 @@
+import { FetchOptions, FetchResponse, ofetch } from "ofetch";
+
 import { conf } from "@/setup/config";
-import { ofetch } from "ofetch";
+
+let proxyUrlIndex = Math.floor(Math.random() * conf().PROXY_URLS.length);
+
+// round robins all proxy urls
+function getProxyUrl(): string {
+  const url = conf().PROXY_URLS[proxyUrlIndex];
+  proxyUrlIndex = (proxyUrlIndex + 1) % conf().PROXY_URLS.length;
+  return url;
+}
 
 type P<T> = Parameters<typeof ofetch<T>>;
 type R<T> = ReturnType<typeof ofetch<T>>;
@@ -41,7 +51,40 @@ export function proxiedFetch<T>(url: string, ops: P<T>[1] = {}): R<T> {
     parsedUrl.searchParams.set(k, v);
   });
 
-  return baseFetch<T>(conf().BASE_PROXY_URL, {
+  return baseFetch<T>(getProxyUrl(), {
+    ...ops,
+    baseURL: undefined,
+    params: {
+      destination: parsedUrl.toString(),
+    },
+  });
+}
+
+export function rawProxiedFetch<T>(
+  url: string,
+  ops: FetchOptions = {}
+): Promise<FetchResponse<T>> {
+  let combinedUrl = ops?.baseURL ?? "";
+  if (
+    combinedUrl.length > 0 &&
+    combinedUrl.endsWith("/") &&
+    url.startsWith("/")
+  )
+    combinedUrl += url.slice(1);
+  else if (
+    combinedUrl.length > 0 &&
+    !combinedUrl.endsWith("/") &&
+    !url.startsWith("/")
+  )
+    combinedUrl += `/${url}`;
+  else combinedUrl += url;
+
+  const parsedUrl = new URL(combinedUrl);
+  Object.entries(ops?.params ?? {}).forEach(([k, v]) => {
+    parsedUrl.searchParams.set(k, v);
+  });
+
+  return baseFetch.raw(getProxyUrl(), {
     ...ops,
     baseURL: undefined,
     params: {

src/backend/helpers/provider.ts

@@ -1,7 +1,7 @@
-import { DetailedMeta } from "../metadata/getmeta";
-import { MWMediaType } from "../metadata/types";
 import { MWEmbed } from "./embed";
 import { MWStream } from "./streams";
+import { DetailedMeta } from "../metadata/getmeta";
+import { MWMediaType } from "../metadata/types/mw";
 
 export type MWProviderScrapeResult = {
   stream?: MWStream;

src/backend/helpers/scrape.ts

@@ -3,7 +3,7 @@ import { getEmbedScraperByType, getProviders } from "./register";
 import { runEmbedScraper, runProvider } from "./run";
 import { MWStream } from "./streams";
 import { DetailedMeta } from "../metadata/getmeta";
-import { MWMediaType } from "../metadata/types";
+import { MWMediaType } from "../metadata/types/mw";
 
 interface MWProgressData {
   type: "embed" | "provider";
@@ -43,7 +43,13 @@ async function findBestEmbedStream(
   providerId: string,
   ctx: MWProviderRunContext
 ): Promise<MWStream | null> {
-  if (result.stream) return result.stream;
+  if (result.stream) {
+    return {
+      ...result.stream,
+      providerId,
+      embedId: providerId,
+    };
+  }
 
   let embedNum = 0;
   for (const embed of result.embeds) {
@@ -89,6 +95,7 @@ async function findBestEmbedStream(
       type: "embed",
     });
 
+    stream.providerId = providerId;
     return stream;
   }
 

src/backend/helpers/streams.ts

@@ -3,13 +3,22 @@ export enum MWStreamType {
   HLS = "hls",
 }
 
+// subsrt-ts supported types
 export enum MWCaptionType {
   VTT = "vtt",
   SRT = "srt",
+  LRC = "lrc",
+  SBV = "sbv",
+  SUB = "sub",
+  SSA = "ssa",
+  ASS = "ass",
+  JSON = "json",
+  UNKNOWN = "unknown",
 }
 
 export enum MWStreamQuality {
   Q360P = "360p",
+  Q540P = "540p",
   Q480P = "480p",
   Q720P = "720p",
   Q1080P = "1080p",
@@ -27,5 +36,11 @@ export type MWStream = {
   streamUrl: string;
   type: MWStreamType;
   quality: MWStreamQuality;
+  providerId?: string;
+  embedId?: string;
   captions: MWCaption[];
 };
+
+export type MWEmbedStream = MWStream & {
+  embedId: string;
+};

src/backend/index.ts

@@ -1,14 +1,24 @@
 import { initializeScraperStore } from "./helpers/register";
 
 // providers
-import "./providers/gdriveplayer";
+// import "./providers/gdriveplayer";
 import "./providers/flixhq";
 import "./providers/superstream";
 import "./providers/netfilm";
 import "./providers/m4ufree";
+import "./providers/hdwatched";
+import "./providers/2embed";
+import "./providers/sflix";
+import "./providers/gomovies";
+import "./providers/kissasian";
+import "./providers/streamflix";
+import "./providers/remotestream";
 
 // embeds
 import "./embeds/streamm4u";
 import "./embeds/playm4u";
+import "./embeds/upcloud";
+import "./embeds/streamsb";
+import "./embeds/mp4upload";
 
 initializeScraperStore();

src/backend/metadata/getmeta.ts

@@ -1,13 +1,29 @@
 import { FetchError } from "ofetch";
-import { makeUrl, proxiedFetch } from "../helpers/fetch";
+
+import { formatJWMeta, mediaTypeToJW } from "./justwatch";
+import {
+  TMDBMediaToMediaType,
+  formatTMDBMeta,
+  getEpisodes,
+  getExternalIds,
+  getMediaDetails,
+  getMediaPoster,
+  getMovieFromExternalId,
+  mediaTypeToTMDB,
+} from "./tmdb";
 import {
-  formatJWMeta,
   JWMediaResult,
   JWSeasonMetaResult,
   JW_API_BASE,
-  mediaTypeToJW,
-} from "./justwatch";
-import { MWMediaMeta, MWMediaType } from "./types";
+} from "./types/justwatch";
+import { MWMediaMeta, MWMediaType } from "./types/mw";
+import {
+  TMDBMediaResult,
+  TMDBMovieData,
+  TMDBSeasonMetaResult,
+  TMDBShowData,
+} from "./types/tmdb";
+import { makeUrl, proxiedFetch } from "../helpers/fetch";
 
 type JWExternalIdType =
   | "eidr"
@@ -28,14 +44,96 @@ interface JWDetailedMeta extends JWMediaResult {
 
 export interface DetailedMeta {
   meta: MWMediaMeta;
-  tmdbId: string;
-  imdbId: string;
+  imdbId?: string;
+  tmdbId?: string;
+}
+
+export function formatTMDBMetaResult(
+  details: TMDBShowData | TMDBMovieData,
+  type: MWMediaType
+): TMDBMediaResult {
+  if (type === MWMediaType.MOVIE) {
+    const movie = details as TMDBMovieData;
+    return {
+      id: details.id,
+      title: movie.title,
+      object_type: mediaTypeToTMDB(type),
+      poster: getMediaPoster(movie.poster_path) ?? undefined,
+      original_release_year: new Date(movie.release_date).getFullYear(),
+    };
+  }
+  if (type === MWMediaType.SERIES) {
+    const show = details as TMDBShowData;
+    return {
+      id: details.id,
+      title: show.name,
+      object_type: mediaTypeToTMDB(type),
+      seasons: show.seasons.map((v) => ({
+        id: v.id,
+        season_number: v.season_number,
+        title: v.name,
+      })),
+      poster: (details as TMDBMovieData).poster_path ?? undefined,
+      original_release_year: new Date(show.first_air_date).getFullYear(),
+    };
+  }
+
+  throw new Error("unsupported type");
 }
 
 export async function getMetaFromId(
   type: MWMediaType,
   id: string,
   seasonId?: string
+): Promise<DetailedMeta | null> {
+  const details = await getMediaDetails(id, mediaTypeToTMDB(type));
+
+  if (!details) return null;
+
+  const externalIds = await getExternalIds(id, mediaTypeToTMDB(type));
+  const imdbId = externalIds.imdb_id ?? undefined;
+
+  let seasonData: TMDBSeasonMetaResult | undefined;
+
+  if (type === MWMediaType.SERIES) {
+    const seasons = (details as TMDBShowData).seasons;
+
+    let selectedSeason = seasons.find((v) => v.id.toString() === seasonId);
+    if (!selectedSeason) {
+      selectedSeason = seasons.find((v) => v.season_number === 1);
+    }
+
+    if (selectedSeason) {
+      const episodes = await getEpisodes(
+        details.id.toString(),
+        selectedSeason.season_number
+      );
+
+      seasonData = {
+        id: selectedSeason.id.toString(),
+        season_number: selectedSeason.season_number,
+        title: selectedSeason.name,
+        episodes,
+      };
+    }
+  }
+
+  const tmdbmeta = formatTMDBMetaResult(details, type);
+  if (!tmdbmeta) return null;
+  const meta = formatTMDBMeta(tmdbmeta, seasonData);
+  if (!meta) return null;
+
+  return {
+    meta,
+    imdbId,
+    tmdbId: id,
+  };
+}
+
+export async function getLegacyMetaFromId(
+  type: MWMediaType,
+  id: string,
+  seasonId?: string
 ): Promise<DetailedMeta | null> {
   const queryType = mediaTypeToJW(type);
 
@@ -54,14 +152,17 @@ export async function getMetaFromId(
     throw err;
   }
 
-  const imdbId = data.external_ids.find(
+  let imdbId = data.external_ids.find(
     (v) => v.provider === "imdb_latest"
   )?.external_id;
-  const tmdbId = data.external_ids.find(
+  if (!imdbId)
+    imdbId = data.external_ids.find((v) => v.provider === "imdb")?.external_id;
+
+  let tmdbId = data.external_ids.find(
     (v) => v.provider === "tmdb_latest"
   )?.external_id;
-
-  if (!imdbId || !tmdbId) throw new Error("not enough info");
+  if (!tmdbId)
+    tmdbId = data.external_ids.find((v) => v.provider === "tmdb")?.external_id;
 
   let seasonData: JWSeasonMetaResult | undefined;
   if (data.object_type === "show") {
@@ -78,3 +179,55 @@ export async function getMetaFromId(
     tmdbId,
   };
 }
+
+export function TMDBMediaToId(media: MWMediaMeta): string {
+  return ["tmdb", mediaTypeToTMDB(media.type), media.id].join("-");
+}
+
+export function decodeTMDBId(
+  paramId: string
+): { id: string; type: MWMediaType } | null {
+  const [prefix, type, id] = paramId.split("-", 3);
+  if (prefix !== "tmdb") return null;
+  let mediaType;
+  try {
+    mediaType = TMDBMediaToMediaType(type);
+  } catch {
+    return null;
+  }
+  return {
+    type: mediaType,
+    id,
+  };
+}
+
+export function isLegacyUrl(url: string): boolean {
+  if (url.startsWith("/media/JW")) return true;
+  return false;
+}
+
+export async function convertLegacyUrl(
+  url: string
+): Promise<string | undefined> {
+  if (!isLegacyUrl(url)) return undefined;
+
+  const urlParts = url.split("/").slice(2);
+  const [, type, id] = urlParts[0].split("-", 3);
+
+  const mediaType = TMDBMediaToMediaType(type);
+  const meta = await getLegacyMetaFromId(mediaType, id);
+
+  if (!meta) return undefined;
+  const { tmdbId, imdbId } = meta;
+  if (!tmdbId && !imdbId) return undefined;
+
+  // movies always have an imdb id on tmdb
+  if (imdbId && mediaType === MWMediaType.MOVIE) {
+    const movieId = await getMovieFromExternalId(imdbId);
+    if (movieId) return `/media/tmdb-movie-${movieId}`;
+  }
+
+  if (tmdbId) {
+    return `/media/tmdb-${type}-${tmdbId}`;
+  }
+}

src/backend/metadata/justwatch.ts

@@ -1,38 +1,10 @@
-import { MWMediaMeta, MWMediaType, MWSeasonMeta } from "./types";
-
-export const JW_API_BASE = "https://apis.justwatch.com";
-export const JW_IMAGE_BASE = "https://images.justwatch.com";
-
-export type JWContentTypes = "movie" | "show";
-
-export type JWSeasonShort = {
-  title: string;
-  id: number;
-  season_number: number;
-};
-
-export type JWEpisodeShort = {
-  title: string;
-  id: number;
-  episode_number: number;
-};
-
-export type JWMediaResult = {
-  title: string;
-  poster?: string;
-  id: number;
-  original_release_year: number;
-  jw_entity_id: string;
-  object_type: JWContentTypes;
-  seasons?: JWSeasonShort[];
-};
-
-export type JWSeasonMetaResult = {
-  title: string;
-  id: string;
-  season_number: number;
-  episodes: JWEpisodeShort[];
-};
+import {
+  JWContentTypes,
+  JWMediaResult,
+  JWSeasonMetaResult,
+  JW_IMAGE_BASE,
+} from "./types/justwatch";
+import { MWMediaMeta, MWMediaType, MWSeasonMeta } from "./types/mw";
 
 export function mediaTypeToJW(type: MWMediaType): JWContentTypes {
   if (type === MWMediaType.MOVIE) return "movie";
@@ -67,7 +39,7 @@ export function formatJWMeta(
   return {
     title: media.title,
     id: media.id.toString(),
-    year: media.original_release_year.toString(),
+    year: media.original_release_year?.toString(),
     poster: media.poster
       ? `${JW_IMAGE_BASE}${media.poster.replace("{profile}", "s166")}`
       : undefined,

src/backend/metadata/search.ts

@@ -1,13 +1,12 @@
 import { SimpleCache } from "@/utils/cache";
-import { proxiedFetch } from "../helpers/fetch";
+
 import {
-  formatJWMeta,
-  JWContentTypes,
-  JWMediaResult,
-  JW_API_BASE,
-  mediaTypeToJW,
-} from "./justwatch";
-import { MWMediaMeta, MWQuery } from "./types";
+  formatTMDBMeta,
+  formatTMDBSearchResult,
+  mediaTypeToTMDB,
+  searchMedia,
+} from "./tmdb";
+import { MWMediaMeta, MWQuery } from "./types/mw";
 
 const cache = new SimpleCache<MWQuery, MWMediaMeta[]>();
 cache.setCompare((a, b) => {
@@ -15,44 +14,16 @@ cache.setCompare((a, b) => {
 });
 cache.initialize();
 
-type JWSearchQuery = {
-  content_types: JWContentTypes[];
-  page: number;
-  page_size: number;
-  query: string;
-};
-
-type JWPage<T> = {
-  items: T[];
-  page: number;
-  page_size: number;
-  total_pages: number;
-  total_results: number;
-};
-
 export async function searchForMedia(query: MWQuery): Promise<MWMediaMeta[]> {
   if (cache.has(query)) return cache.get(query) as MWMediaMeta[];
   const { searchQuery, type } = query;
 
-  const contentType = mediaTypeToJW(type);
-  const body: JWSearchQuery = {
-    content_types: [contentType],
-    page: 1,
-    query: searchQuery,
-    page_size: 40,
-  };
+  const data = await searchMedia(searchQuery, mediaTypeToTMDB(type));
+  const results = data.results.map((v) => {
+    const formattedResult = formatTMDBSearchResult(v, mediaTypeToTMDB(type));
+    return formatTMDBMeta(formattedResult);
+  });
 
-  const data = await proxiedFetch<JWPage<JWMediaResult>>(
-    "/content/titles/en_US/popular",
-    {
-      baseURL: JW_API_BASE,
-      params: {
-        body: JSON.stringify(body),
-      },
-    }
-  );
-
-  const returnData = data.items.map<MWMediaMeta>((v) => formatJWMeta(v));
-  cache.set(query, returnData, 3600); // cache for an hour
-  return returnData;
+  cache.set(query, results, 3600); // cache results for 1 hour
+  return results;
 }

src/backend/metadata/tmdb.ts

@@ -0,0 +1,239 @@
+import { conf } from "@/setup/config";
+
+import { MWMediaMeta, MWMediaType, MWSeasonMeta } from "./types/mw";
+import {
+  ExternalIdMovieSearchResult,
+  TMDBContentTypes,
+  TMDBEpisodeShort,
+  TMDBExternalIds,
+  TMDBMediaResult,
+  TMDBMovieData,
+  TMDBMovieExternalIds,
+  TMDBMovieResponse,
+  TMDBMovieResult,
+  TMDBSeason,
+  TMDBSeasonMetaResult,
+  TMDBShowData,
+  TMDBShowExternalIds,
+  TMDBShowResponse,
+  TMDBShowResult,
+} from "./types/tmdb";
+import { mwFetch } from "../helpers/fetch";
+
+export function mediaTypeToTMDB(type: MWMediaType): TMDBContentTypes {
+  if (type === MWMediaType.MOVIE) return "movie";
+  if (type === MWMediaType.SERIES) return "show";
+  throw new Error("unsupported type");
+}
+
+export function TMDBMediaToMediaType(type: string): MWMediaType {
+  if (type === "movie") return MWMediaType.MOVIE;
+  if (type === "show") return MWMediaType.SERIES;
+  throw new Error("unsupported type");
+}
+
+export function formatTMDBMeta(
+  media: TMDBMediaResult,
+  season?: TMDBSeasonMetaResult
+): MWMediaMeta {
+  const type = TMDBMediaToMediaType(media.object_type);
+  let seasons: undefined | MWSeasonMeta[];
+  if (type === MWMediaType.SERIES) {
+    seasons = media.seasons
+      ?.sort((a, b) => a.season_number - b.season_number)
+      .map(
+        (v): MWSeasonMeta => ({
+          title: v.title,
+          id: v.id.toString(),
+          number: v.season_number,
+        })
+      );
+  }
+
+  return {
+    title: media.title,
+    id: media.id.toString(),
+    year: media.original_release_year?.toString(),
+    poster: media.poster,
+    type,
+    seasons: seasons as any,
+    seasonData: season
+      ? ({
+          id: season.id.toString(),
+          number: season.season_number,
+          title: season.title,
+          episodes: season.episodes
+            .sort((a, b) => a.episode_number - b.episode_number)
+            .map((v) => ({
+              id: v.id.toString(),
+              number: v.episode_number,
+              title: v.title,
+            })),
+        } as any)
+      : (undefined as any),
+  };
+}
+
+export function TMDBMediaToId(media: MWMediaMeta): string {
+  return ["tmdb", mediaTypeToTMDB(media.type), media.id].join("-");
+}
+
+export function decodeTMDBId(
+  paramId: string
+): { id: string; type: MWMediaType } | null {
+  const [prefix, type, id] = paramId.split("-", 3);
+  if (prefix !== "tmdb") return null;
+  let mediaType;
+  try {
+    mediaType = TMDBMediaToMediaType(type);
+  } catch {
+    return null;
+  }
+  return {
+    type: mediaType,
+    id,
+  };
+}
+
+const baseURL = "https://api.themoviedb.org/3";
+
+const headers = {
+  accept: "application/json",
+  Authorization: `Bearer ${conf().TMDB_API_KEY}`,
+};
+
+async function get<T>(url: string, params?: object): Promise<T> {
+  const res = await mwFetch<any>(encodeURI(url), {
+    headers,
+    baseURL,
+    params: {
+      ...params,
+    },
+  });
+  return res;
+}
+
+export async function searchMedia(
+  query: string,
+  type: TMDBContentTypes
+): Promise<TMDBMovieResponse | TMDBShowResponse> {
+  let data;
+
+  switch (type) {
+    case "movie":
+      data = await get<TMDBMovieResponse>("search/movie", {
+        query,
+        include_adult: false,
+        language: "en-US",
+        page: 1,
+      });
+      break;
+    case "show":
+      data = await get<TMDBShowResponse>("search/tv", {
+        query,
+        include_adult: false,
+        language: "en-US",
+        page: 1,
+      });
+      break;
+    default:
+      throw new Error("Invalid media type");
+  }
+
+  return data;
+}
+
+// Conditional type which for inferring the return type based on the content type
+type MediaDetailReturn<T extends TMDBContentTypes> = T extends "movie"
+  ? TMDBMovieData
+  : T extends "show"
+  ? TMDBShowData
+  : never;
+
+export function getMediaDetails<
+  T extends TMDBContentTypes,
+  TReturn = MediaDetailReturn<T>
+>(id: string, type: T): Promise<TReturn> {
+  if (type === "movie") {
+    return get<TReturn>(`/movie/${id}`);
+  }
+  if (type === "show") {
+    return get<TReturn>(`/tv/${id}`);
+  }
+  throw new Error("Invalid media type");
+}
+
+export function getMediaPoster(posterPath: string | null): string | undefined {
+  if (posterPath) return `https://image.tmdb.org/t/p/w185/${posterPath}`;
+}
+
+export async function getEpisodes(
+  id: string,
+  season: number
+): Promise<TMDBEpisodeShort[]> {
+  const data = await get<TMDBSeason>(`/tv/${id}/season/${season}`);
+  return data.episodes.map((e) => ({
+    id: e.id,
+    episode_number: e.episode_number,
+    title: e.name,
+  }));
+}
+
+export async function getExternalIds(
+  id: string,
+  type: TMDBContentTypes
+): Promise<TMDBExternalIds> {
+  let data;
+
+  switch (type) {
+    case "movie":
+      data = await get<TMDBMovieExternalIds>(`/movie/${id}/external_ids`);
+      break;
+    case "show":
+      data = await get<TMDBShowExternalIds>(`/tv/${id}/external_ids`);
+      break;
+    default:
+      throw new Error("Invalid media type");
+  }
+
+  return data;
+}
+
+export async function getMovieFromExternalId(
+  imdbId: string
+): Promise<string | undefined> {
+  const data = await get<ExternalIdMovieSearchResult>(`/find/${imdbId}`, {
+    external_source: "imdb_id",
+  });
+
+  const movie = data.movie_results[0];
+  if (!movie) return undefined;
+
+  return movie.id.toString();
+}
+
+export function formatTMDBSearchResult(
+  result: TMDBShowResult | TMDBMovieResult,
+  mediatype: TMDBContentTypes
+): TMDBMediaResult {
+  const type = TMDBMediaToMediaType(mediatype);
+  if (type === MWMediaType.SERIES) {
+    const show = result as TMDBShowResult;
+    return {
+      title: show.name,
+      poster: getMediaPoster(show.poster_path),
+      id: show.id,
+      original_release_year: new Date(show.first_air_date).getFullYear(),
+      object_type: mediatype,
+    };
+  }
+  const movie = result as TMDBMovieResult;
+
+  return {
+    title: movie.title,
+    poster: getMediaPoster(movie.poster_path),
+    id: movie.id,
+    original_release_year: new Date(movie.release_date).getFullYear(),
+    object_type: mediatype,
+  };
+}

src/backend/metadata/types/justwatch.ts

@@ -0,0 +1,48 @@
+export type JWContentTypes = "movie" | "show";
+
+export type JWSearchQuery = {
+  content_types: JWContentTypes[];
+  page: number;
+  page_size: number;
+  query: string;
+};
+
+export type JWPage<T> = {
+  items: T[];
+  page: number;
+  page_size: number;
+  total_pages: number;
+  total_results: number;
+};
+
+export const JW_API_BASE = "https://apis.justwatch.com";
+export const JW_IMAGE_BASE = "https://images.justwatch.com";
+
+export type JWSeasonShort = {
+  title: string;
+  id: number;
+  season_number: number;
+};
+
+export type JWEpisodeShort = {
+  title: string;
+  id: number;
+  episode_number: number;
+};
+
+export type JWMediaResult = {
+  title: string;
+  poster?: string;
+  id: number;
+  original_release_year?: number;
+  jw_entity_id: string;
+  object_type: JWContentTypes;
+  seasons?: JWSeasonShort[];
+};
+
+export type JWSeasonMetaResult = {
+  title: string;
+  id: string;
+  season_number: number;
+  episodes: JWEpisodeShort[];
+};

src/backend/metadata/types/mw.ts

@@ -24,7 +24,7 @@ export type MWSeasonWithEpisodeMeta = {
 type MWMediaMetaBase = {
   title: string;
   id: string;
-  year: string;
+  year?: string;
   poster?: string;
 };
 
@@ -45,3 +45,9 @@ export interface MWQuery {
   searchQuery: string;
   type: MWMediaType;
 }
+
+export interface DetailedMeta {
+  meta: MWMediaMeta;
+  imdbId?: string;
+  tmdbId?: string;
+}

src/backend/metadata/types/tmdb.ts

@@ -0,0 +1,308 @@
+export type TMDBContentTypes = "movie" | "show";
+
+export type TMDBSeasonShort = {
+  title: string;
+  id: number;
+  season_number: number;
+};
+
+export type TMDBEpisodeShort = {
+  title: string;
+  id: number;
+  episode_number: number;
+};
+
+export type TMDBMediaResult = {
+  title: string;
+  poster?: string;
+  id: number;
+  original_release_year?: number;
+  object_type: TMDBContentTypes;
+  seasons?: TMDBSeasonShort[];
+};
+
+export type TMDBSeasonMetaResult = {
+  title: string;
+  id: string;
+  season_number: number;
+  episodes: TMDBEpisodeShort[];
+};
+
+export interface TMDBShowData {
+  adult: boolean;
+  backdrop_path: string | null;
+  created_by: {
+    id: number;
+    credit_id: string;
+    name: string;
+    gender: number;
+    profile_path: string | null;
+  }[];
+  episode_run_time: number[];
+  first_air_date: string;
+  genres: {
+    id: number;
+    name: string;
+  }[];
+  homepage: string;
+  id: number;
+  in_production: boolean;
+  languages: string[];
+  last_air_date: string;
+  last_episode_to_air: {
+    id: number;
+    name: string;
+    overview: string;
+    vote_average: number;
+    vote_count: number;
+    air_date: string;
+    episode_number: number;
+    production_code: string;
+    runtime: number | null;
+    season_number: number;
+    show_id: number;
+    still_path: string | null;
+  } | null;
+  name: string;
+  next_episode_to_air: {
+    id: number;
+    name: string;
+    overview: string;
+    vote_average: number;
+    vote_count: number;
+    air_date: string;
+    episode_number: number;
+    production_code: string;
+    runtime: number | null;
+    season_number: number;
+    show_id: number;
+    still_path: string | null;
+  } | null;
+  networks: {
+    id: number;
+    logo_path: string;
+    name: string;
+    origin_country: string;
+  }[];
+  number_of_episodes: number;
+  number_of_seasons: number;
+  origin_country: string[];
+  original_language: string;
+  original_name: string;
+  overview: string;
+  popularity: number;
+  poster_path: string | null;
+  production_companies: {
+    id: number;
+    logo_path: string | null;
+    name: string;
+    origin_country: string;
+  }[];
+  production_countries: {
+    iso_3166_1: string;
+    name: string;
+  }[];
+  seasons: {
+    air_date: string;
+    episode_count: number;
+    id: number;
+    name: string;
+    overview: string;
+    poster_path: string | null;
+    season_number: number;
+  }[];
+  spoken_languages: {
+    english_name: string;
+    iso_639_1: string;
+    name: string;
+  }[];
+  status: string;
+  tagline: string;
+  type: string;
+  vote_average: number;
+  vote_count: number;
+}
+
+export interface TMDBMovieData {
+  adult: boolean;
+  backdrop_path: string | null;
+  belongs_to_collection: {
+    id: number;
+    name: string;
+    poster_path: string | null;
+    backdrop_path: string | null;
+  } | null;
+  budget: number;
+  genres: {
+    id: number;
+    name: string;
+  }[];
+  homepage: string | null;
+  id: number;
+  imdb_id: string | null;
+  original_language: string;
+  original_title: string;
+  overview: string | null;
+  popularity: number;
+  poster_path: string | null;
+  production_companies: {
+    id: number;
+    logo_path: string | null;
+    name: string;
+    origin_country: string;
+  }[];
+  production_countries: {
+    iso_3166_1: string;
+    name: string;
+  }[];
+  release_date: string;
+  revenue: number;
+  runtime: number | null;
+  spoken_languages: {
+    english_name: string;
+    iso_639_1: string;
+    name: string;
+  }[];
+  status: string;
+  tagline: string | null;
+  title: string;
+  video: boolean;
+  vote_average: number;
+  vote_count: number;
+}
+
+export interface TMDBEpisodeResult {
+  season: number;
+  number: number;
+  title: string;
+  ids: {
+    trakt: number;
+    tvdb: number;
+    imdb: string;
+    tmdb: number;
+  };
+}
+
+export interface TMDBShowResult {
+  adult: boolean;
+  backdrop_path: string | null;
+  genre_ids: number[];
+  id: number;
+  origin_country: string[];
+  original_language: string;
+  original_name: string;
+  overview: string;
+  popularity: number;
+  poster_path: string | null;
+  first_air_date: string;
+  name: string;
+  vote_average: number;
+  vote_count: number;
+}
+
+export interface TMDBShowResponse {
+  page: number;
+  results: TMDBShowResult[];
+  total_pages: number;
+  total_results: number;
+}
+
+export interface TMDBMovieResult {
+  adult: boolean;
+  backdrop_path: string | null;
+  genre_ids: number[];
+  id: number;
+  original_language: string;
+  original_title: string;
+  overview: string;
+  popularity: number;
+  poster_path: string | null;
+  release_date: string;
+  title: string;
+  video: boolean;
+  vote_average: number;
+  vote_count: number;
+}
+
+export interface TMDBMovieResponse {
+  page: number;
+  results: TMDBMovieResult[];
+  total_pages: number;
+  total_results: number;
+}
+
+export interface TMDBEpisode {
+  air_date: string;
+  episode_number: number;
+  id: number;
+  name: string;
+  overview: string;
+  production_code: string;
+  runtime: number;
+  season_number: number;
+  show_id: number;
+  still_path: string | null;
+  vote_average: number;
+  vote_count: number;
+  crew: any[];
+  guest_stars: any[];
+}
+
+export interface TMDBSeason {
+  _id: string;
+  air_date: string;
+  episodes: TMDBEpisode[];
+  name: string;
+  overview: string;
+  id: number;
+  poster_path: string | null;
+  season_number: number;
+}
+
+export interface TMDBShowExternalIds {
+  id: number;
+  imdb_id: null | string;
+  freebase_mid: null | string;
+  freebase_id: null | string;
+  tvdb_id: number;
+  tvrage_id: null | string;
+  wikidata_id: null | string;
+  facebook_id: null | string;
+  instagram_id: null | string;
+  twitter_id: null | string;
+}
+
+export interface TMDBMovieExternalIds {
+  id: number;
+  imdb_id: null | string;
+  wikidata_id: null | string;
+  facebook_id: null | string;
+  instagram_id: null | string;
+  twitter_id: null | string;
+}
+
+export type TMDBExternalIds = TMDBShowExternalIds | TMDBMovieExternalIds;
+
+export interface ExternalIdMovieSearchResult {
+  movie_results: {
+    adult: boolean;
+    backdrop_path: string;
+    id: number;
+    title: string;
+    original_language: string;
+    original_title: string;
+    overview: string;
+    poster_path: string;
+    media_type: string;
+    genre_ids: number[];
+    popularity: number;
+    release_date: string;
+    video: boolean;
+    vote_average: number;
+    vote_count: number;
+  }[];
+  person_results: any[];
+  tv_results: any[];
+  tv_episode_results: any[];
+  tv_season_results: any[];
+}

src/backend/providers/2embed.ts

@@ -0,0 +1,252 @@
+import Base64 from "crypto-js/enc-base64";
+import Utf8 from "crypto-js/enc-utf8";
+
+import { proxiedFetch, rawProxiedFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import {
+  MWCaptionType,
+  MWStreamQuality,
+  MWStreamType,
+} from "../helpers/streams";
+import { MWMediaType } from "../metadata/types/mw";
+
+const twoEmbedBase = "https://www.2embed.to";
+
+async function fetchCaptchaToken(recaptchaKey: string) {
+  const domainHash = Base64.stringify(Utf8.parse(twoEmbedBase)).replace(
+    /=/g,
+    "."
+  );
+
+  const recaptchaRender = await proxiedFetch<any>(
+    `https://www.google.com/recaptcha/api.js?render=${recaptchaKey}`
+  );
+
+  const vToken = recaptchaRender.substring(
+    recaptchaRender.indexOf("/releases/") + 10,
+    recaptchaRender.indexOf("/recaptcha__en.js")
+  );
+
+  const recaptchaAnchor = await proxiedFetch<any>(
+    `https://www.google.com/recaptcha/api2/anchor?ar=1&hl=en&size=invisible&cb=flicklax&k=${recaptchaKey}&co=${domainHash}&v=${vToken}`
+  );
+
+  const cToken = new DOMParser()
+    .parseFromString(recaptchaAnchor, "text/html")
+    .getElementById("recaptcha-token")
+    ?.getAttribute("value");
+
+  if (!cToken) throw new Error("Unable to find cToken");
+
+  const payload = {
+    v: vToken,
+    reason: "q",
+    k: recaptchaKey,
+    c: cToken,
+    sa: "",
+    co: twoEmbedBase,
+  };
+
+  const tokenData = await proxiedFetch<string>(
+    `https://www.google.com/recaptcha/api2/reload?${new URLSearchParams(
+      payload
+    ).toString()}`,
+    {
+      headers: { referer: "https://www.google.com/recaptcha/api2/" },
+      method: "POST",
+    }
+  );
+
+  const token = tokenData.match('rresp","(.+?)"');
+  return token ? token[1] : null;
+}
+
+interface IEmbedRes {
+  link: string;
+  sources: [];
+  tracks: [];
+  type: string;
+}
+
+interface IStreamData {
+  status: string;
+  message: string;
+  type: string;
+  token: string;
+  result:
+    | {
+        Original: {
+          label: string;
+          file: string;
+          url: string;
+        };
+      }
+    | {
+        label: string;
+        size: number;
+        url: string;
+      }[];
+}
+
+interface ISubtitles {
+  url: string;
+  lang: string;
+}
+
+async function fetchStream(sourceId: string, captchaToken: string) {
+  const embedRes = await proxiedFetch<IEmbedRes>(
+    `${twoEmbedBase}/ajax/embed/play?id=${sourceId}&_token=${captchaToken}`,
+    {
+      headers: {
+        Referer: twoEmbedBase,
+      },
+    }
+  );
+
+  // Link format: https://rabbitstream.net/embed-4/{data-id}?z=
+  const rabbitStreamUrl = new URL(embedRes.link);
+
+  const dataPath = rabbitStreamUrl.pathname.split("/");
+  const dataId = dataPath[dataPath.length - 1];
+
+  // https://rabbitstream.net/embed/m-download/{data-id}
+  const download = await proxiedFetch<any>(
+    `${rabbitStreamUrl.origin}/embed/m-download/${dataId}`,
+    {
+      headers: {
+        referer: twoEmbedBase,
+      },
+    }
+  );
+
+  const downloadPage = new DOMParser().parseFromString(download, "text/html");
+
+  const streamlareEl = Array.from(
+    downloadPage.querySelectorAll(".dls-brand")
+  ).find((el) => el.textContent?.trim() === "Streamlare");
+  if (!streamlareEl) throw new Error("Unable to find streamlare element");
+
+  const streamlareUrl =
+    streamlareEl.nextElementSibling?.querySelector("a")?.href;
+  if (!streamlareUrl) throw new Error("Unable to parse streamlare url");
+
+  const subtitles: ISubtitles[] = [];
+  const subtitlesDropdown = downloadPage.querySelectorAll(
+    "#user_menu .dropdown-item"
+  );
+  subtitlesDropdown.forEach((item) => {
+    const url = item.getAttribute("href");
+    const lang = item.textContent?.trim().replace("Download", "").trim();
+    if (url && lang) subtitles.push({ url, lang });
+  });
+
+  const streamlare = await proxiedFetch<any>(streamlareUrl);
+
+  const streamlarePage = new DOMParser().parseFromString(
+    streamlare,
+    "text/html"
+  );
+
+  const csrfToken = streamlarePage
+    .querySelector("head > meta:nth-child(3)")
+    ?.getAttribute("content");
+
+  if (!csrfToken) throw new Error("Unable to find CSRF token");
+
+  const videoId = streamlareUrl.match("/[ve]/([^?#&/]+)")?.[1];
+  if (!videoId) throw new Error("Unable to get streamlare video id");
+
+  const streamRes = await proxiedFetch<IStreamData>(
+    `${new URL(streamlareUrl).origin}/api/video/download/get`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        id: videoId,
+      }),
+      headers: {
+        "X-Requested-With": "XMLHttpRequest",
+        "X-CSRF-Token": csrfToken,
+      },
+    }
+  );
+
+  if (streamRes.message !== "OK") throw new Error("Unable to fetch stream");
+
+  const streamData = Array.isArray(streamRes.result)
+    ? streamRes.result[0]
+    : streamRes.result.Original;
+  if (!streamData) throw new Error("Unable to get stream data");
+
+  const followStream = await rawProxiedFetch(streamData.url, {
+    method: "HEAD",
+    referrer: new URL(streamlareUrl).origin,
+  });
+
+  const finalStreamUrl = followStream.headers.get("X-Final-Destination");
+  return { url: finalStreamUrl, subtitles };
+}
+
+registerProvider({
+  id: "2embed",
+  displayName: "2Embed",
+  rank: 125,
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+  disabled: true, // Disabled, not working
+  async scrape({ media, episode, progress }) {
+    let embedUrl = `${twoEmbedBase}/embed/tmdb/movie?id=${media.tmdbId}`;
+
+    if (media.meta.type === MWMediaType.SERIES) {
+      const seasonNumber = media.meta.seasonData.number;
+      const episodeNumber = media.meta.seasonData.episodes.find(
+        (e) => e.id === episode
+      )?.number;
+
+      embedUrl = `${twoEmbedBase}/embed/tmdb/tv?id=${media.tmdbId}&s=${seasonNumber}&e=${episodeNumber}`;
+    }
+
+    const embed = await proxiedFetch<any>(embedUrl);
+    progress(20);
+
+    const embedPage = new DOMParser().parseFromString(embed, "text/html");
+
+    const pageServerItems = Array.from(
+      embedPage.querySelectorAll(".item-server")
+    );
+    const pageStreamItem = pageServerItems.find((item) =>
+      item.textContent?.includes("Vidcloud")
+    );
+
+    const sourceId = pageStreamItem
+      ? pageStreamItem.getAttribute("data-id")
+      : null;
+    if (!sourceId) throw new Error("Unable to get source id");
+
+    const siteKey = embedPage
+      .querySelector("body")
+      ?.getAttribute("data-recaptcha-key");
+    if (!siteKey) throw new Error("Unable to get site key");
+
+    const captchaToken = await fetchCaptchaToken(siteKey);
+    if (!captchaToken) throw new Error("Unable to fetch captcha token");
+    progress(35);
+
+    const stream = await fetchStream(sourceId, captchaToken);
+    if (!stream.url) throw new Error("Unable to find stream url");
+
+    return {
+      embeds: [],
+      stream: {
+        streamUrl: stream.url,
+        quality: MWStreamQuality.QUNKNOWN,
+        type: MWStreamType.MP4,
+        captions: stream.subtitles.map((sub) => {
+          return {
+            langIso: sub.lang,
+            url: `https://cc.2cdns.com${new URL(sub.url).pathname}`,
+            type: MWCaptionType.VTT,
+          };
+        }),
+      },
+    };
+  },
+});

src/backend/providers/flixhq.ts

@@ -1,65 +1,127 @@
 import { compareTitle } from "@/utils/titleMatch";
-import { proxiedFetch } from "../helpers/fetch";
-import { registerProvider } from "../helpers/register";
-import { MWStreamQuality, MWStreamType } from "../helpers/streams";
-import { MWMediaType } from "../metadata/types";
 
-const flixHqBase = "https://api.consumet.org/movies/flixhq";
+import {
+  getMWCaptionTypeFromUrl,
+  isSupportedSubtitle,
+} from "../helpers/captions";
+import { mwFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import { MWCaption, MWStreamQuality, MWStreamType } from "../helpers/streams";
+import { MWMediaType } from "../metadata/types/mw";
+
+const flixHqBase = "https://consumet-api-clone.vercel.app/meta/tmdb"; // instance stolen from streaminal :)
+
+type FlixHQMediaType = "Movie" | "TV Series";
+interface FLIXMediaBase {
+  id: number;
+  title: string;
+  url: string;
+  image: string;
+  type: FlixHQMediaType;
+  releaseDate: string;
+}
+interface FLIXSubType {
+  url: string;
+  lang: string;
+}
+function convertSubtitles({ url, lang }: FLIXSubType): MWCaption | null {
+  if (lang.includes("(maybe)")) return null;
+  const supported = isSupportedSubtitle(url);
+  if (!supported) return null;
+  const type = getMWCaptionTypeFromUrl(url);
+  return {
+    url,
+    langIso: lang,
+    type,
+  };
+}
+
+const qualityMap: Record<string, MWStreamQuality> = {
+  "360": MWStreamQuality.Q360P,
+  "540": MWStreamQuality.Q540P,
+  "480": MWStreamQuality.Q480P,
+  "720": MWStreamQuality.Q720P,
+  "1080": MWStreamQuality.Q1080P,
+};
+
+function flixTypeToMWType(type: FlixHQMediaType) {
+  if (type === "Movie") return MWMediaType.MOVIE;
+  return MWMediaType.SERIES;
+}
 
 registerProvider({
   id: "flixhq",
   displayName: "FlixHQ",
   rank: 100,
-  type: [MWMediaType.MOVIE],
-
-  async scrape({ media, progress }) {
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+  async scrape({ media, episode, progress }) {
+    if (!this.type.includes(media.meta.type)) {
+      throw new Error("Unsupported type");
+    }
     // search for relevant item
-    const searchResults = await proxiedFetch<any>(
+    const searchResults = await mwFetch<any>(
       `/${encodeURIComponent(media.meta.title)}`,
       {
         baseURL: flixHqBase,
       }
     );
-    const foundItem = searchResults.results.find((v: any) => {
+
+    const foundItem = searchResults.results.find((v: FLIXMediaBase) => {
+      if (v.type !== "Movie" && v.type !== "TV Series") return false;
       return (
         compareTitle(v.title, media.meta.title) &&
+        flixTypeToMWType(v.type) === media.meta.type &&
         v.releaseDate === media.meta.year
       );
     });
+
     if (!foundItem) throw new Error("No watchable item found");
-    const flixId = foundItem.id;
 
     // get media info
     progress(25);
-    const mediaInfo = await proxiedFetch<any>("/info", {
+    const mediaInfo = await mwFetch<any>(`/info/${foundItem.id}`, {
       baseURL: flixHqBase,
       params: {
-        id: flixId,
+        type: flixTypeToMWType(foundItem.type),
+      },
+    });
+    if (!mediaInfo.id) throw new Error("No watchable item found");
+    // get stream info from media
+    progress(50);
+
+    let episodeId: string | undefined;
+    if (media.meta.type === MWMediaType.MOVIE) {
+      episodeId = mediaInfo.episodeId;
+    } else if (media.meta.type === MWMediaType.SERIES) {
+      const seasonNo = media.meta.seasonData.number;
+      const episodeNo = media.meta.seasonData.episodes.find(
+        (e) => e.id === episode
+      )?.number;
+
+      const season = mediaInfo.seasons.find((o: any) => o.season === seasonNo);
+      episodeId = season.episodes.find((o: any) => o.episode === episodeNo).id;
+    }
+    if (!episodeId) throw new Error("No watchable item found");
+    progress(75);
+    const watchInfo = await mwFetch<any>(`/watch/${episodeId}`, {
+      baseURL: flixHqBase,
+      params: {
+        id: mediaInfo.id,
       },
     });
 
-    // get stream info from media
-    progress(75);
-    const watchInfo = await proxiedFetch<any>("/watch", {
-      baseURL: flixHqBase,
-      params: {
-        episodeId: mediaInfo.episodes[0].id,
-        mediaId: flixId,
-      },
-    });
+    if (!watchInfo.sources) throw new Error("No watchable item found");
 
     // get best quality source
-    const source = watchInfo.sources.reduce((p: any, c: any) =>
-      c.quality > p.quality ? c : p
-    );
-
+    // comes sorted by quality in descending order
+    const source = watchInfo.sources[0];
     return {
       embeds: [],
       stream: {
         streamUrl: source.url,
-        quality: MWStreamQuality.QUNKNOWN,
+        quality: qualityMap[source.quality],
         type: source.isM3U8 ? MWStreamType.HLS : MWStreamType.MP4,
-        captions: [],
+        captions: watchInfo.subtitles.map(convertSubtitles).filter(Boolean),
       },
     };
   },

src/backend/providers/gdriveplayer.ts

@@ -1,9 +1,10 @@
-import { unpack } from "unpacker";
 import CryptoJS from "crypto-js";
+import { unpack } from "unpacker";
 
 import { registerProvider } from "@/backend/helpers/register";
-import { MWMediaType } from "@/backend/metadata/types";
 import { MWStreamQuality } from "@/backend/helpers/streams";
+import { MWMediaType } from "@/backend/metadata/types/mw";
+
 import { proxiedFetch } from "../helpers/fetch";
 
 const format = {
@@ -35,10 +36,12 @@ const format = {
 registerProvider({
   id: "gdriveplayer",
   displayName: "gdriveplayer",
+  disabled: true,
   rank: 69,
   type: [MWMediaType.MOVIE],
 
   async scrape({ progress, media: { imdbId } }) {
+    if (!imdbId) throw new Error("not enough info");
     progress(10);
     const streamRes = await proxiedFetch<string>(
       "https://database.gdriveplayer.us/player.php",

src/backend/providers/gomovies.ts

@@ -0,0 +1,162 @@
+import { MWEmbedType } from "../helpers/embed";
+import { proxiedFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import { MWMediaType } from "../metadata/types/mw";
+
+const gomoviesBase = "https://gomovies.sx";
+
+registerProvider({
+  id: "gomovies",
+  displayName: "GOmovies",
+  rank: 200,
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+
+  async scrape({ media, episode }) {
+    const search = await proxiedFetch<any>("/ajax/search", {
+      baseURL: gomoviesBase,
+      method: "POST",
+      body: JSON.stringify({
+        keyword: media.meta.title,
+      }),
+      headers: {
+        "X-Requested-With": "XMLHttpRequest",
+      },
+    });
+
+    const searchPage = new DOMParser().parseFromString(search, "text/html");
+    const mediaElements = searchPage.querySelectorAll("a.nav-item");
+
+    const mediaData = Array.from(mediaElements).map((movieEl) => {
+      const name = movieEl?.querySelector("h3.film-name")?.textContent;
+      const year = movieEl?.querySelector(
+        "div.film-infor span:first-of-type"
+      )?.textContent;
+      const path = movieEl.getAttribute("href");
+      return { name, year, path };
+    });
+
+    const targetMedia = mediaData.find(
+      (m) =>
+        m.name === media.meta.title &&
+        (media.meta.type === MWMediaType.MOVIE
+          ? m.year === media.meta.year
+          : true)
+    );
+    if (!targetMedia?.path) throw new Error("Media not found");
+
+    // Example movie path: /movie/watch-{slug}-{id}
+    // Example series path: /tv/watch-{slug}-{id}
+    let mediaId = targetMedia.path.split("-").pop()?.replace("/", "");
+
+    let sources = null;
+    if (media.meta.type === MWMediaType.SERIES) {
+      const seasons = await proxiedFetch<any>(
+        `/ajax/v2/tv/seasons/${mediaId}`,
+        {
+          baseURL: gomoviesBase,
+          headers: {
+            "X-Requested-With": "XMLHttpRequest",
+          },
+        }
+      );
+
+      const seasonsEl = new DOMParser()
+        .parseFromString(seasons, "text/html")
+        .querySelectorAll(".ss-item");
+
+      const seasonsData = [...seasonsEl].map((season) => ({
+        number: season.innerHTML.replace("Season ", ""),
+        dataId: season.getAttribute("data-id"),
+      }));
+
+      const seasonNumber = media.meta.seasonData.number;
+      const targetSeason = seasonsData.find(
+        (season) => +season.number === seasonNumber
+      );
+      if (!targetSeason) throw new Error("Season not found");
+
+      const episodes = await proxiedFetch<any>(
+        `/ajax/v2/season/episodes/${targetSeason.dataId}`,
+        {
+          baseURL: gomoviesBase,
+          headers: {
+            "X-Requested-With": "XMLHttpRequest",
+          },
+        }
+      );
+
+      const episodesEl = new DOMParser()
+        .parseFromString(episodes, "text/html")
+        .querySelectorAll(".eps-item");
+
+      const episodesData = Array.from(episodesEl).map((ep) => ({
+        dataId: ep.getAttribute("data-id"),
+        number: ep
+          .querySelector("strong")
+          ?.textContent?.replace("Eps", "")
+          .replace(":", "")
+          .trim(),
+      }));
+
+      const episodeNumber = media.meta.seasonData.episodes.find(
+        (e) => e.id === episode
+      )?.number;
+
+      const targetEpisode = episodesData.find((ep) =>
+        ep.number ? +ep.number : ep.number === episodeNumber
+      );
+
+      if (!targetEpisode?.dataId) throw new Error("Episode not found");
+
+      mediaId = targetEpisode.dataId;
+
+      sources = await proxiedFetch<any>(`/ajax/v2/episode/servers/${mediaId}`, {
+        baseURL: gomoviesBase,
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      });
+    } else {
+      sources = await proxiedFetch<any>(`/ajax/movie/episodes/${mediaId}`, {
+        baseURL: gomoviesBase,
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+        },
+      });
+    }
+
+    const upcloud = new DOMParser()
+      .parseFromString(sources, "text/html")
+      .querySelector('a[title*="upcloud" i]');
+
+    const upcloudDataId =
+      upcloud?.getAttribute("data-id") ?? upcloud?.getAttribute("data-linkid");
+
+    if (!upcloudDataId) throw new Error("Upcloud source not available");
+
+    const upcloudSource = await proxiedFetch<{
+      type: "iframe" | string;
+      link: string;
+      sources: [];
+      title: string;
+      tracks: [];
+    }>(`/ajax/sources/${upcloudDataId}`, {
+      baseURL: gomoviesBase,
+      headers: {
+        "X-Requested-With": "XMLHttpRequest",
+      },
+    });
+
+    if (!upcloudSource.link || upcloudSource.type !== "iframe")
+      throw new Error("No upcloud stream found");
+
+    return {
+      embeds: [
+        {
+          type: MWEmbedType.UPCLOUD,
+          url: upcloudSource.link,
+        },
+      ],
+    };
+  },
+});

src/backend/providers/hdwatched.ts

@@ -0,0 +1,197 @@
+import { proxiedFetch } from "../helpers/fetch";
+import { MWProviderContext } from "../helpers/provider";
+import { registerProvider } from "../helpers/register";
+import { MWStreamQuality, MWStreamType } from "../helpers/streams";
+import { MWMediaType } from "../metadata/types/mw";
+
+const hdwatchedBase = "https://www.hdwatched.xyz";
+
+const qualityMap: Record<number, MWStreamQuality> = {
+  360: MWStreamQuality.Q360P,
+  540: MWStreamQuality.Q540P,
+  480: MWStreamQuality.Q480P,
+  720: MWStreamQuality.Q720P,
+  1080: MWStreamQuality.Q1080P,
+};
+
+interface SearchRes {
+  title: string;
+  year?: number;
+  href: string;
+  id: string;
+}
+
+function getStreamFromEmbed(stream: string) {
+  const embedPage = new DOMParser().parseFromString(stream, "text/html");
+  const source = embedPage.querySelector("#vjsplayer > source");
+  if (!source) {
+    throw new Error("Unable to fetch stream");
+  }
+
+  const streamSrc = source.getAttribute("src");
+  const streamRes = source.getAttribute("res");
+
+  if (!streamSrc || !streamRes) throw new Error("Unable to find stream");
+
+  return {
+    streamUrl: streamSrc,
+    quality:
+      streamRes && typeof +streamRes === "number"
+        ? qualityMap[+streamRes]
+        : MWStreamQuality.QUNKNOWN,
+  };
+}
+
+async function fetchMovie(targetSource: SearchRes) {
+  const stream = await proxiedFetch<any>(`/embed/${targetSource.id}`, {
+    baseURL: hdwatchedBase,
+  });
+
+  const embedPage = new DOMParser().parseFromString(stream, "text/html");
+  const source = embedPage.querySelector("#vjsplayer > source");
+  if (!source) {
+    throw new Error("Unable to fetch movie stream");
+  }
+
+  return getStreamFromEmbed(stream);
+}
+
+async function fetchSeries(
+  targetSource: SearchRes,
+  { media, episode, progress }: MWProviderContext
+) {
+  if (media.meta.type !== MWMediaType.SERIES)
+    throw new Error("Media type mismatch");
+
+  const seasonNumber = media.meta.seasonData.number;
+  const episodeNumber = media.meta.seasonData.episodes.find(
+    (e) => e.id === episode
+  )?.number;
+
+  if (!seasonNumber || !episodeNumber)
+    throw new Error("Unable to get season or episode number");
+
+  const seriesPage = await proxiedFetch<any>(
+    `${targetSource.href}?season=${media.meta.seasonData.number}`,
+    {
+      baseURL: hdwatchedBase,
+    }
+  );
+
+  const seasonPage = new DOMParser().parseFromString(seriesPage, "text/html");
+  const pageElements = seasonPage.querySelectorAll("div.i-container");
+
+  const seriesList: SearchRes[] = [];
+  pageElements.forEach((pageElement) => {
+    const href = pageElement.querySelector("a")?.getAttribute("href") || "";
+    const title =
+      pageElement?.querySelector("span.content-title")?.textContent || "";
+
+    seriesList.push({
+      title,
+      href,
+      id: href.split("/")[2], // Format: /free/{id}/{series-slug}-season-{season-number}-episode-{episode-number}
+    });
+  });
+
+  const targetEpisode = seriesList.find(
+    (episodeEl) =>
+      episodeEl.title.trim().toLowerCase() === `episode ${episodeNumber}`
+  );
+
+  if (!targetEpisode) throw new Error("Unable to find episode");
+
+  progress(70);
+
+  const stream = await proxiedFetch<any>(`/embed/${targetEpisode.id}`, {
+    baseURL: hdwatchedBase,
+  });
+
+  const embedPage = new DOMParser().parseFromString(stream, "text/html");
+  const source = embedPage.querySelector("#vjsplayer > source");
+  if (!source) {
+    throw new Error("Unable to fetch movie stream");
+  }
+
+  return getStreamFromEmbed(stream);
+}
+
+registerProvider({
+  id: "hdwatched",
+  displayName: "HDwatched",
+  rank: 150,
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+  async scrape(options) {
+    const { media, progress } = options;
+    if (!media.imdbId) throw new Error("not enough info");
+    if (!this.type.includes(media.meta.type)) {
+      throw new Error("Unsupported type");
+    }
+
+    const search = await proxiedFetch<any>(`/search/${media.imdbId}`, {
+      baseURL: hdwatchedBase,
+    });
+
+    const searchPage = new DOMParser().parseFromString(search, "text/html");
+    const pageElements = searchPage.querySelectorAll("div.i-container");
+
+    const searchList: SearchRes[] = [];
+    pageElements.forEach((pageElement) => {
+      const href = pageElement.querySelector("a")?.getAttribute("href") || "";
+      const title =
+        pageElement?.querySelector("span.content-title")?.textContent || "";
+      const year =
+        parseInt(
+          pageElement
+            ?.querySelector("div.duration")
+            ?.textContent?.trim()
+            ?.split(" ")
+            ?.pop() || "",
+          10
+        ) || 0;
+
+      searchList.push({
+        title,
+        year,
+        href,
+        id: href.split("/")[2], // Format: /free/{id}/{movie-slug} or /series/{id}/{series-slug}
+      });
+    });
+
+    progress(20);
+
+    const targetSource = searchList.find(
+      (source) => source.year === (media.meta.year ? +media.meta.year : 0) // Compare year to make the search more robust
+    );
+
+    if (!targetSource) {
+      throw new Error("Could not find stream");
+    }
+
+    progress(40);
+
+    if (media.meta.type === MWMediaType.SERIES) {
+      const series = await fetchSeries(targetSource, options);
+      return {
+        embeds: [],
+        stream: {
+          streamUrl: series.streamUrl,
+          quality: series.quality,
+          type: MWStreamType.MP4,
+          captions: [],
+        },
+      };
+    }
+
+    const movie = await fetchMovie(targetSource);
+    return {
+      embeds: [],
+      stream: {
+        streamUrl: movie.streamUrl,
+        quality: movie.quality,
+        type: MWStreamType.MP4,
+        captions: [],
+      },
+    };
+  },
+});

src/backend/providers/kissasian.ts

@@ -0,0 +1,119 @@
+import { MWEmbedType } from "../helpers/embed";
+import { proxiedFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import { MWMediaType } from "../metadata/types/mw";
+
+const kissasianBase = "https://kissasian.li";
+
+const embedProviders = [
+  {
+    type: MWEmbedType.MP4UPLOAD,
+    id: "mp",
+  },
+  {
+    type: MWEmbedType.STREAMSB,
+    id: "sb",
+  },
+];
+
+registerProvider({
+  id: "kissasian",
+  displayName: "KissAsian",
+  rank: 130,
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+
+  async scrape({ media, episode, progress }) {
+    let seasonNumber = "";
+    let episodeNumber = "";
+
+    if (media.meta.type === MWMediaType.SERIES) {
+      seasonNumber =
+        media.meta.seasonData.number === 1
+          ? ""
+          : `${media.meta.seasonData.number}`;
+      episodeNumber = `${
+        media.meta.seasonData.episodes.find((e) => e.id === episode)?.number ??
+        ""
+      }`;
+    }
+
+    const searchForm = new FormData();
+    searchForm.append("keyword", `${media.meta.title} ${seasonNumber}`.trim());
+    searchForm.append("type", "Drama");
+
+    const search = await proxiedFetch<any>("/Search/SearchSuggest", {
+      baseURL: kissasianBase,
+      method: "POST",
+      body: searchForm,
+    });
+
+    const searchPage = new DOMParser().parseFromString(search, "text/html");
+
+    const dramas = Array.from(searchPage.querySelectorAll("a")).map((drama) => {
+      return {
+        name: drama.textContent,
+        url: drama.href,
+      };
+    });
+
+    const targetDrama =
+      dramas.find(
+        (d) => d.name?.toLowerCase() === media.meta.title.toLowerCase()
+      ) ?? dramas[0];
+    if (!targetDrama) throw new Error("Drama not found");
+
+    progress(30);
+
+    const drama = await proxiedFetch<any>(targetDrama.url);
+
+    const dramaPage = new DOMParser().parseFromString(drama, "text/html");
+
+    const episodesEl = dramaPage.querySelectorAll("tbody tr:not(:first-child)");
+
+    const episodes = Array.from(episodesEl)
+      .map((ep) => {
+        const number = ep
+          ?.querySelector("td.episodeSub a")
+          ?.textContent?.split("Episode")[1]
+          ?.trim();
+        const url = ep?.querySelector("td.episodeSub a")?.getAttribute("href");
+        return { number, url };
+      })
+      .filter((e) => !!e.url);
+
+    const targetEpisode =
+      media.meta.type === MWMediaType.MOVIE
+        ? episodes[0]
+        : episodes.find((e) => e.number === `${episodeNumber}`);
+    if (!targetEpisode?.url) throw new Error("Episode not found");
+
+    progress(70);
+
+    let embeds = await Promise.all(
+      embedProviders.map(async (provider) => {
+        const watch = await proxiedFetch<any>(
+          `${targetEpisode.url}&s=${provider.id}`,
+          {
+            baseURL: kissasianBase,
+          }
+        );
+
+        const watchPage = new DOMParser().parseFromString(watch, "text/html");
+
+        const embedUrl = watchPage
+          .querySelector("iframe[id=my_video_1]")
+          ?.getAttribute("src");
+
+        return {
+          type: provider.type,
+          url: embedUrl ?? "",
+        };
+      })
+    );
+    embeds = embeds.filter((e) => e.url !== "");
+
+    return {
+      embeds,
+    };
+  },
+});

src/backend/providers/m4ufree.ts

@@ -1,7 +1,8 @@
 import { MWEmbed, MWEmbedType } from "@/backend/helpers/embed";
+
 import { proxiedFetch } from "../helpers/fetch";
 import { registerProvider } from "../helpers/register";
-import { MWMediaType } from "../metadata/types";
+import { MWMediaType } from "../metadata/types/mw";
 
 const HOST = "m4ufree.com";
 const URL_BASE = `https://${HOST}`;

src/backend/providers/netfilm.ts

@@ -1,25 +1,33 @@
 import { proxiedFetch } from "../helpers/fetch";
 import { registerProvider } from "../helpers/register";
-import { MWStreamQuality, MWStreamType } from "../helpers/streams";
-import { MWMediaType } from "../metadata/types";
+import {
+  MWCaptionType,
+  MWStreamQuality,
+  MWStreamType,
+} from "../helpers/streams";
+import { MWMediaType } from "../metadata/types/mw";
 
 const netfilmBase = "https://net-film.vercel.app";
 
-const qualityMap = {
-  "360": MWStreamQuality.Q360P,
-  "480": MWStreamQuality.Q480P,
-  "720": MWStreamQuality.Q720P,
-  "1080": MWStreamQuality.Q1080P,
+const qualityMap: Record<number, MWStreamQuality> = {
+  360: MWStreamQuality.Q360P,
+  540: MWStreamQuality.Q540P,
+  480: MWStreamQuality.Q480P,
+  720: MWStreamQuality.Q720P,
+  1080: MWStreamQuality.Q1080P,
 };
-type QualityInMap = keyof typeof qualityMap;
 
 registerProvider({
   id: "netfilm",
   displayName: "NetFilm",
   rank: 15,
   type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+  disabled: true, // The creator has asked us (very nicely) to leave him alone. Until (if) we self-host, netfilm should remain disabled
 
   async scrape({ media, episode, progress }) {
+    if (!this.type.includes(media.meta.type)) {
+      throw new Error("Unsupported type");
+    }
     // search for relevant item
     const searchResponse = await proxiedFetch<any>(
       `/api/search?keyword=${encodeURIComponent(media.meta.title)}`,
@@ -47,20 +55,29 @@ registerProvider({
         }
       );
 
-      const { qualities } = watchInfo.data;
+      const data = watchInfo.data;
 
       // get best quality source
-      const source = qualities.reduce((p: any, c: any) =>
-        c.quality > p.quality ? c : p
+      const source: { url: string; quality: number } = data.qualities.reduce(
+        (p: any, c: any) => (c.quality > p.quality ? c : p)
       );
 
+      const mappedCaptions = data.subtitles.map((sub: Record<string, any>) => ({
+        needsProxy: false,
+        url: sub.url.replace("https://convert-srt-to-vtt.vercel.app/?url=", ""),
+        type: MWCaptionType.SRT,
+        langIso: sub.language,
+      }));
+
       return {
         embeds: [],
         stream: {
-          streamUrl: source.url,
-          quality: qualityMap[source.quality as QualityInMap],
+          streamUrl: source.url
+            .replace("akm-cdn", "aws-cdn")
+            .replace("gg-cdn", "aws-cdn"),
+          quality: qualityMap[source.quality],
           type: MWStreamType.HLS,
-          captions: [],
+          captions: mappedCaptions,
         },
       };
     }
@@ -108,20 +125,29 @@ registerProvider({
       }
     );
 
-    const { qualities } = episodeStream.data;
+    const data = episodeStream.data;
 
     // get best quality source
-    const source = qualities.reduce((p: any, c: any) =>
-      c.quality > p.quality ? c : p
+    const source: { url: string; quality: number } = data.qualities.reduce(
+      (p: any, c: any) => (c.quality > p.quality ? c : p)
     );
 
+    const mappedCaptions = data.subtitles.map((sub: Record<string, any>) => ({
+      needsProxy: false,
+      url: sub.url.replace("https://convert-srt-to-vtt.vercel.app/?url=", ""),
+      type: MWCaptionType.SRT,
+      langIso: sub.language,
+    }));
+
     return {
       embeds: [],
       stream: {
-        streamUrl: source.url,
-        quality: qualityMap[source.quality as QualityInMap],
+        streamUrl: source.url
+          .replace("akm-cdn", "aws-cdn")
+          .replace("gg-cdn", "aws-cdn"),
+        quality: qualityMap[source.quality],
         type: MWStreamType.HLS,
-        captions: [],
+        captions: mappedCaptions,
       },
     };
   },

src/backend/providers/remotestream.ts

@@ -0,0 +1,49 @@
+import { mwFetch } from "@/backend/helpers/fetch";
+import { registerProvider } from "@/backend/helpers/register";
+import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
+import { MWMediaType } from "@/backend/metadata/types/mw";
+
+const remotestreamBase = `https://fsa.remotestre.am`;
+
+registerProvider({
+  id: "remotestream",
+  displayName: "Remote Stream",
+  disabled: false,
+  rank: 55,
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+
+  async scrape({ media, episode, progress }) {
+    if (!this.type.includes(media.meta.type)) {
+      throw new Error("Unsupported type");
+    }
+
+    progress(30);
+    const type = media.meta.type === MWMediaType.MOVIE ? "Movies" : "Shows";
+    let playlistLink = `${remotestreamBase}/${type}/${media.tmdbId}`;
+
+    if (media.meta.type === MWMediaType.SERIES) {
+      const seasonNumber = media.meta.seasonData.number;
+      const episodeNumber = media.meta.seasonData.episodes.find(
+        (e) => e.id === episode
+      )?.number;
+
+      playlistLink += `/${seasonNumber}/${episodeNumber}/${episodeNumber}.m3u8`;
+    } else {
+      playlistLink += `/${media.tmdbId}.m3u8`;
+    }
+
+    const streamRes = await mwFetch<Blob>(playlistLink);
+    if (streamRes.type !== "application/x-mpegurl")
+      throw new Error("No watchable item found");
+    progress(90);
+    return {
+      embeds: [],
+      stream: {
+        streamUrl: playlistLink,
+        quality: MWStreamQuality.QUNKNOWN,
+        type: MWStreamType.HLS,
+        captions: [],
+      },
+    };
+  },
+});

src/backend/providers/sflix.ts

@@ -0,0 +1,99 @@
+import { proxiedFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import { MWStreamQuality, MWStreamType } from "../helpers/streams";
+import { MWMediaType } from "../metadata/types/mw";
+
+const sflixBase = "https://sflix.video";
+
+registerProvider({
+  id: "sflix",
+  displayName: "Sflix",
+  rank: 50,
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+  async scrape({ media, episode, progress }) {
+    let searchQuery = `${media.meta.title} `;
+
+    if (media.meta.type === MWMediaType.MOVIE)
+      searchQuery += media.meta.year ?? "";
+
+    if (media.meta.type === MWMediaType.SERIES)
+      searchQuery += `S${String(media.meta.seasonData.number).padStart(
+        2,
+        "0"
+      )}`;
+
+    const search = await proxiedFetch<any>(
+      `/?s=${encodeURIComponent(searchQuery)}`,
+      {
+        baseURL: sflixBase,
+      }
+    );
+    const searchPage = new DOMParser().parseFromString(search, "text/html");
+
+    const moviePageUrl = searchPage
+      .querySelector(".movies-list .ml-item:first-child a")
+      ?.getAttribute("href");
+    if (!moviePageUrl) throw new Error("Movie does not exist");
+
+    progress(25);
+
+    const movie = await proxiedFetch<any>(moviePageUrl);
+    const moviePage = new DOMParser().parseFromString(movie, "text/html");
+
+    progress(45);
+
+    let outerEmbedSrc = null;
+    if (media.meta.type === MWMediaType.MOVIE) {
+      outerEmbedSrc = moviePage
+        .querySelector("iframe")
+        ?.getAttribute("data-lazy-src");
+    } else if (media.meta.type === MWMediaType.SERIES) {
+      const series = Array.from(moviePage.querySelectorAll(".desc p a")).map(
+        (a) => ({
+          title: a.getAttribute("title"),
+          link: a.getAttribute("href"),
+        })
+      );
+
+      const episodeNumber = media.meta.seasonData.episodes.find(
+        (e) => e.id === episode
+      )?.number;
+
+      const targetSeries = series.find((s) =>
+        s.title?.endsWith(String(episodeNumber).padStart(2, "0"))
+      );
+      if (!targetSeries) throw new Error("Episode does not exist");
+
+      outerEmbedSrc = targetSeries.link;
+    }
+    if (!outerEmbedSrc) throw new Error("Outer embed source not found");
+
+    progress(65);
+
+    const outerEmbed = await proxiedFetch<any>(outerEmbedSrc);
+    const outerEmbedPage = new DOMParser().parseFromString(
+      outerEmbed,
+      "text/html"
+    );
+
+    const embedSrc = outerEmbedPage
+      .querySelector("iframe")
+      ?.getAttribute("src");
+    if (!embedSrc) throw new Error("Embed source not found");
+
+    const embed = await proxiedFetch<string>(embedSrc);
+
+    const streamUrl = embed.match(/file\s*:\s*"([^"]+\.mp4)"/)?.[1];
+    if (!streamUrl) throw new Error("Unable to get stream");
+
+    return {
+      embeds: [],
+      stream: {
+        streamUrl,
+        quality: MWStreamQuality.Q1080P,
+        type: MWStreamType.MP4,
+        captions: [],
+      },
+    };
+  },
+});

src/backend/providers/streamflix.ts

@@ -0,0 +1,70 @@
+import { proxiedFetch } from "@/backend/helpers/fetch";
+import { registerProvider } from "@/backend/helpers/register";
+import {
+  MWCaptionType,
+  MWStreamQuality,
+  MWStreamType,
+} from "@/backend/helpers/streams";
+import { MWMediaType } from "@/backend/metadata/types/mw";
+
+const streamflixBase = "https://us-west2-compute-proxied.streamflix.one";
+
+const qualityMap: Record<number, MWStreamQuality> = {
+  360: MWStreamQuality.Q360P,
+  540: MWStreamQuality.Q540P,
+  480: MWStreamQuality.Q480P,
+  720: MWStreamQuality.Q720P,
+  1080: MWStreamQuality.Q1080P,
+};
+
+registerProvider({
+  id: "streamflix",
+  displayName: "StreamFlix",
+  disabled: false,
+  rank: 69,
+  type: [MWMediaType.MOVIE, MWMediaType.SERIES],
+
+  async scrape({ media, episode, progress }) {
+    if (!this.type.includes(media.meta.type)) {
+      throw new Error("Unsupported type");
+    }
+
+    progress(30);
+    const type = media.meta.type === MWMediaType.MOVIE ? "movies" : "tv";
+    let seasonNumber: number | undefined;
+    let episodeNumber: number | undefined;
+
+    if (media.meta.type === MWMediaType.SERIES) {
+      // can't do type === "tv" here :(
+      seasonNumber = media.meta.seasonData.number;
+      episodeNumber = media.meta.seasonData.episodes.find(
+        (e: any) => e.id === episode
+      )?.number;
+    }
+
+    const streamRes = await proxiedFetch<any>(`/api/player/${type}`, {
+      baseURL: streamflixBase,
+      params: {
+        id: media.tmdbId,
+        s: seasonNumber,
+        e: episodeNumber,
+      },
+    });
+    if (!streamRes.headers.Referer) throw new Error("No watchable item found");
+    progress(90);
+    return {
+      embeds: [],
+      stream: {
+        streamUrl: streamRes.sources[0].url,
+        quality: qualityMap[streamRes.sources[0].quality],
+        type: MWStreamType.HLS,
+        captions: streamRes.subtitles.map((s: Record<string, any>) => ({
+          needsProxy: true,
+          url: s.url,
+          type: MWCaptionType.VTT,
+          langIso: s.lang,
+        })),
+      },
+    };
+  },
+});

src/backend/providers/superstream/index.ts

@@ -1,15 +1,19 @@
-import { registerProvider } from "@/backend/helpers/register";
-import { MWMediaType } from "@/backend/metadata/types";
-
-import { customAlphabet } from "nanoid";
 import CryptoJS from "crypto-js";
+import { customAlphabet } from "nanoid";
+
+import {
+  getMWCaptionTypeFromUrl,
+  isSupportedSubtitle,
+} from "@/backend/helpers/captions";
 import { proxiedFetch } from "@/backend/helpers/fetch";
+import { registerProvider } from "@/backend/helpers/register";
 import {
   MWCaption,
   MWCaptionType,
   MWStreamQuality,
   MWStreamType,
 } from "@/backend/helpers/streams";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { compareTitle } from "@/utils/titleMatch";
 
 const nanoid = customAlphabet("0123456789abcdef", 32);
@@ -111,10 +115,34 @@ const getBestQuality = (list: any[]) => {
   );
 };
 
+const convertSubtitles = (subtitleGroup: any): MWCaption | null => {
+  let subtitles = subtitleGroup.subtitles;
+  subtitles = subtitles
+    .map((subFile: any) => {
+      const supported = isSupportedSubtitle(subFile.file_path);
+      if (!supported) return null;
+      const type = getMWCaptionTypeFromUrl(subFile.file_path);
+      return {
+        ...subFile,
+        type: type as MWCaptionType,
+      };
+    })
+    .filter(Boolean);
+
+  if (subtitles.length === 0) return null;
+  const subFile = subtitles[0];
+  return {
+    needsProxy: true,
+    langIso: subtitleGroup.language,
+    url: subFile.file_path,
+    type: subFile.type,
+  };
+};
+
 registerProvider({
   id: "superstream",
   displayName: "Superstream",
-  rank: 200,
+  rank: 300,
   type: [MWMediaType.MOVIE, MWMediaType.SERIES],
 
   async scrape({ media, episode, progress }) {
@@ -164,16 +192,9 @@ registerProvider({
 
       const subtitleRes = (await get(subtitleApiQuery)).data;
 
-      const mappedCaptions = subtitleRes.list.map(
-        (subtitle: any): MWCaption => {
-          return {
-            needsProxy: true,
-            langIso: subtitle.language,
-            url: subtitle.subtitles[0].file_path,
-            type: MWCaptionType.SRT,
-          };
-        }
-      );
+      const mappedCaptions = subtitleRes.list
+        .map(convertSubtitles)
+        .filter(Boolean);
 
       return {
         embeds: [],
@@ -224,16 +245,9 @@ registerProvider({
     };
 
     const subtitleRes = (await get(subtitleApiQuery)).data;
-
-    const mappedCaptions = subtitleRes.list.map((subtitle: any): MWCaption => {
-      return {
-        needsProxy: true,
-        langIso: subtitle.language,
-        url: subtitle.subtitles[0].file_path,
-        type: MWCaptionType.SRT,
-      };
-    });
-
+    const mappedCaptions = subtitleRes.list
+      .map(convertSubtitles)
+      .filter(Boolean);
     return {
       embeds: [],
       stream: {

src/components/Banner.tsx

@@ -0,0 +1,28 @@
+import { Icon, Icons } from "@/components/Icon";
+import { useBanner } from "@/hooks/useBanner";
+
+export function Banner(props: { children: React.ReactNode; type: "error" }) {
+  const [ref] = useBanner<HTMLDivElement>("internet");
+  const styles = {
+    error: "bg-[#C93957] text-white",
+  };
+  const icons = {
+    error: Icons.CIRCLE_EXCLAMATION,
+  };
+
+  return (
+    <div ref={ref}>
+      <div
+        className={[
+          styles[props.type],
+          "flex items-center justify-center p-1",
+        ].join(" ")}
+      >
+        <div className="flex items-center space-x-3">
+          <Icon icon={icons[props.type]} />
+          <div>{props.children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Button.tsx

@@ -1,6 +1,7 @@
-import { Icon, Icons } from "@/components/Icon";
 import { ReactNode } from "react";
 
+import { Icon, Icons } from "@/components/Icon";
+
 interface Props {
   icon?: Icons;
   onClick?: () => void;

src/components/CaptionColorSelector.tsx

@@ -0,0 +1,30 @@
+import { useSettings } from "@/state/settings";
+
+import { Icon, Icons } from "./Icon";
+
+export const colors = ["#ffffff", "#00ffff", "#ffff00"];
+export default function CaptionColorSelector({ color }: { color: string }) {
+  const { captionSettings, setCaptionColor } = useSettings();
+  return (
+    <div
+      className={`flex h-8 w-8 items-center justify-center rounded transition-[background-color,transform] duration-100 hover:bg-[#1c161b79] active:scale-110 ${
+        color === captionSettings.style.color ? "bg-[#1C161B]" : ""
+      }`}
+      onClick={() => setCaptionColor(color)}
+    >
+      <div
+        className="h-4 w-4 cursor-pointer appearance-none rounded-full"
+        style={{
+          backgroundColor: color,
+        }}
+      />
+      <Icon
+        className={[
+          "absolute text-xs text-[#1C161B]",
+          color === captionSettings.style.color ? "" : "hidden",
+        ].join(" ")}
+        icon={Icons.CHECKMARK}
+      />
+    </div>
+  );
+}

src/components/Dropdown.tsx

@@ -1,6 +1,6 @@
+import { Listbox, Transition } from "@headlessui/react";
 import React, { Fragment } from "react";
 
-import { Listbox, Transition } from "@headlessui/react";
 import { Icon, Icons } from "@/components/Icon";
 
 export interface OptionItem {
@@ -37,7 +37,7 @@ export function Dropdown(props: DropdownProps) {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm">
+              <Listbox.Options className="absolute left-0 right-0 top-10 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:top-10 sm:text-sm">
                 {props.options.map((opt) => (
                   <Listbox.Option
                     className={({ active }) =>

src/components/Icon.tsx

@@ -34,6 +34,13 @@ export enum Icons {
   CAPTIONS = "captions",
   LINK = "link",
   CASTING = "casting",
+  CIRCLE_EXCLAMATION = "circle_exclamation",
+  DOWNLOAD = "download",
+  GEAR = "gear",
+  WATCH_PARTY = "watch_party",
+  PICTURE_IN_PICTURE = "pictureInPicture",
+  CHECKMARK = "checkmark",
+  TACHOMETER = "tachometer",
 }
 
 export interface IconProps {
@@ -72,9 +79,16 @@ const iconList: Record<Icons, string> = {
   skip_forward: `<svg width="1em" height="1em" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3333 12.3333L16 7.66667M16 7.66667L11.3333 3M16 7.66667H6.66667C5.42899 7.66667 4.242 8.15833 3.36684 9.0335C2.49167 9.90867 2 11.0957 2 12.3333C2 13.571 2.49167 14.758 3.36684 15.6332C4.242 16.5083 5.42899 17 6.66667 17H9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M16.5043 14.2727V23H14.6591V16.0241H14.608L12.6094 17.277V15.6406L14.7699 14.2727H16.5043ZM22.0004 23.1918C21.2674 23.1889 20.6367 23.0085 20.1083 22.6506C19.5827 22.2926 19.1779 21.7741 18.8938 21.0952C18.6126 20.4162 18.4734 19.5994 18.4762 18.6449C18.4762 17.6932 18.6168 16.8821 18.8981 16.2116C19.1822 15.5412 19.587 15.0312 20.1126 14.6818C20.641 14.3295 21.2702 14.1534 22.0004 14.1534C22.7305 14.1534 23.3583 14.3295 23.8839 14.6818C24.4123 15.0341 24.8185 15.5455 25.1026 16.2159C25.3867 16.8835 25.5273 17.6932 25.5245 18.6449C25.5245 19.6023 25.3825 20.4205 25.0984 21.0994C24.8171 21.7784 24.4137 22.2969 23.8881 22.6548C23.3626 23.0128 22.7333 23.1918 22.0004 23.1918ZM22.0004 21.6619C22.5004 21.6619 22.8995 21.4105 23.1978 20.9077C23.4961 20.4048 23.6438 19.6506 23.641 18.6449C23.641 17.983 23.5728 17.4318 23.4364 16.9915C23.3029 16.5511 23.1126 16.2202 22.8654 15.9986C22.6211 15.777 22.3327 15.6662 22.0004 15.6662C21.5032 15.6662 21.1055 15.9148 20.8072 16.4119C20.5089 16.9091 20.3583 17.6534 20.3555 18.6449C20.3555 19.3153 20.4222 19.875 20.5558 20.3239C20.6921 20.7699 20.8839 21.1051 21.131 21.3295C21.3782 21.5511 21.668 21.6619 22.0004 21.6619Z" fill="currentColor" /></svg>`,
   skip_backward: `<svg width="1em" height="1em" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6667 12.3333L9 7.66667M9 7.66667L13.6667 3M9 7.66667H18.3333C19.571 7.66667 20.758 8.15833 21.6332 9.0335C22.5083 9.90867 23 11.0957 23 12.3333C23 13.571 22.5083 14.758 21.6332 15.6332C20.758 16.5083 19.571 17 18.3333 17H16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.50426 14.2727V23H2.65909V16.0241H2.60795L0.609375 17.277V15.6406L2.76989 14.2727H4.50426ZM10.0004 23.1918C9.2674 23.1889 8.63672 23.0085 8.10831 22.6506C7.58274 22.2926 7.17791 21.7741 6.89382 21.0952C6.61257 20.4162 6.47337 19.5994 6.47621 18.6449C6.47621 17.6932 6.61683 16.8821 6.89808 16.2116C7.18217 15.5412 7.587 15.0312 8.11257 14.6818C8.64098 14.3295 9.27024 14.1534 10.0004 14.1534C10.7305 14.1534 11.3583 14.3295 11.8839 14.6818C12.4123 15.0341 12.8185 15.5455 13.1026 16.2159C13.3867 16.8835 13.5273 17.6932 13.5245 18.6449C13.5245 19.6023 13.3825 20.4205 13.0984 21.0994C12.8171 21.7784 12.4137 22.2969 11.8881 22.6548C11.3626 23.0128 10.7333 23.1918 10.0004 23.1918ZM10.0004 21.6619C10.5004 21.6619 10.8995 21.4105 11.1978 20.9077C11.4961 20.4048 11.6438 19.6506 11.641 18.6449C11.641 17.983 11.5728 17.4318 11.4364 16.9915C11.3029 16.5511 11.1126 16.2202 10.8654 15.9986C10.6211 15.777 10.3327 15.6662 10.0004 15.6662C9.5032 15.6662 9.10547 15.9148 8.80717 16.4119C8.50888 16.9091 8.35831 17.6534 8.35547 18.6449C8.35547 19.3153 8.42223 19.875 8.55575 20.3239C8.69212 20.7699 8.88388 21.1051 9.13104 21.3295C9.3782 21.5511 9.66797 21.6619 10.0004 21.6619Z" fill="currentColor"/></svg>`,
   file: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>`,
-  captions: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H512c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z"/></svg>`,
+  captions: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 25 20"><path transform="translate(-3 -6)" d="M25.5,6H5.5A2.507,2.507,0,0,0,3,8.5v15A2.507,2.507,0,0,0,5.5,26h20A2.507,2.507,0,0,0,28,23.5V8.5A2.507,2.507,0,0,0,25.5,6ZM5.5,16h5v2.5h-5ZM18,23.5H5.5V21H18Zm7.5,0h-5V21h5Zm0-5H13V16H25.5Z" fill="currentColor"/></svg>`,
   link: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>`,
+  circle_exclamation: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
   casting: "",
+  download: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
+  gear: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M481.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-30.9 28.1c-7.7 7.1-11.4 17.5-10.9 27.9c.1 2.9 .2 5.8 .2 8.8s-.1 5.9-.2 8.8c-.5 10.5 3.1 20.9 10.9 27.9l30.9 28.1c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-39.7-12.6c-10-3.2-20.8-1.1-29.7 4.6c-4.9 3.1-9.9 6.1-15.1 8.7c-9.3 4.8-16.5 13.2-18.8 23.4l-8.9 40.7c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-8.9-40.7c-2.2-10.2-9.5-18.6-18.8-23.4c-5.2-2.7-10.2-5.6-15.1-8.7c-8.8-5.7-19.7-7.8-29.7-4.6L69.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l30.9-28.1c7.7-7.1 11.4-17.5 10.9-27.9c-.1-2.9-.2-5.8-.2-8.8s.1-5.9 .2-8.8c.5-10.5-3.1-20.9-10.9-27.9L8.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l39.7 12.6c10 3.2 20.8 1.1 29.7-4.6c4.9-3.1 9.9-6.1 15.1-8.7c9.3-4.8 16.5-13.2 18.8-23.4l8.9-40.7c2-9.1 9-16.3 18.2-17.8C213.3 1.2 227.5 0 242 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l8.9 40.7c2.2 10.2 9.4 18.6 18.8 23.4c5.2 2.7 10.2 5.6 15.1 8.7c8.8 5.7 19.7 7.7 29.7 4.6l39.7-12.6c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM242 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>`,
+  watch_party: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M319.4 372c48.5-31.3 80.6-85.9 80.6-148c0-97.2-78.8-176-176-176S48 126.8 48 224c0 62.1 32.1 116.6 80.6 148c1.2 17.3 4 38 7.2 57.1l.2 1C56 395.8 0 316.5 0 224C0 100.3 100.3 0 224 0S448 100.3 448 224c0 92.5-56 171.9-136 206.1l.2-1.1c3.1-19.2 6-39.8 7.2-57zm-2.3-38.1c-1.6-5.7-3.9-11.1-7-16.2c-5.8-9.7-13.5-17-21.9-22.4c19.5-17.6 31.8-43 31.8-71.3c0-53-43-96-96-96s-96 43-96 96c0 28.3 12.3 53.8 31.8 71.3c-8.4 5.4-16.1 12.7-21.9 22.4c-3.1 5.1-5.4 10.5-7 16.2C99.8 307.5 80 268 80 224c0-79.5 64.5-144 144-144s144 64.5 144 144c0 44-19.8 83.5-50.9 109.9zM224 312c32.9 0 64 8.6 64 43.8c0 33-12.9 104.1-20.6 132.9c-5.1 19-24.5 23.4-43.4 23.4s-38.2-4.4-43.4-23.4c-7.8-28.5-20.6-99.7-20.6-132.8c0-35.1 31.1-43.8 64-43.8zm0-144a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/></svg>`,
+  pictureInPicture: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" fill="currentColor" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/></svg>`,
+  checkmark: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" fill="currentColor" viewBox="0 0 24 24"><path d="M9 22l-10-10.598 2.798-2.859 7.149 7.473 13.144-14.016 2.909 2.806z" /></svg>`,
+  tachometer: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" fill="currentColor" viewBox="0 0 576 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M128 288c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32zm154.65-97.08l16.24-48.71c1.16-3.45 3.18-6.35 4.92-9.43-4.73-2.76-9.94-4.78-15.81-4.78-17.67 0-32 14.33-32 32 0 15.78 11.63 28.29 26.65 30.92zM176 176c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32zM288 32C128.94 32 0 160.94 0 320c0 52.8 14.25 102.26 39.06 144.8 5.61 9.62 16.3 15.2 27.44 15.2h443c11.14 0 21.83-5.58 27.44-15.2C561.75 422.26 576 372.8 576 320c0-159.06-128.94-288-288-288zm212.27 400H75.73C57.56 397.63 48 359.12 48 320 48 187.66 155.66 80 288 80s240 107.66 240 240c0 39.12-9.56 77.63-27.73 112zM416 320c0 17.67 14.33 32 32 32s32-14.33 32-32-14.33-32-32-32-32 14.33-32 32zm-56.41-182.77c-12.72-4.23-26.16 2.62-30.38 15.17l-45.34 136.01C250.49 290.58 224 318.06 224 352c0 11.72 3.38 22.55 8.88 32h110.25c5.5-9.45 8.88-20.28 8.88-32 0-19.45-8.86-36.66-22.55-48.4l45.34-136.01c4.17-12.57-2.64-26.17-15.21-30.36zM432 208c0-15.8-11.66-28.33-26.72-30.93-.07.21-.07.43-.14.65l-19.5 58.49c4.37 2.24 9.11 3.8 14.36 3.8 17.67-.01 32-14.34 32-32.01z"/></svg>`,
 };
 
 function ChromeCastButton() {

src/components/Overlay.tsx

@@ -1,6 +1,7 @@
-import { Transition } from "@/components/Transition";
 import { Helmet } from "react-helmet";
 
+import { Transition } from "@/components/Transition";
+
 export function Overlay(props: { children: React.ReactNode }) {
   return (
     <>

src/components/SearchBar.tsx

@@ -1,6 +1,8 @@
-import { MWMediaType, MWQuery } from "@/backend/metadata/types";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+
+import { MWMediaType, MWQuery } from "@/backend/metadata/types/mw";
+
 import { DropdownButton } from "./buttons/DropdownButton";
 import { Icon, Icons } from "./Icon";
 import { TextInputControl } from "./text-inputs/TextInputControl";
@@ -38,7 +40,7 @@ export function SearchBarInput(props: SearchBarProps) {
 
   return (
     <div className="relative flex flex-col rounded-[28px] bg-denim-400 transition-colors focus-within:bg-denim-400 hover:bg-denim-500 sm:flex-row sm:items-center">
-      <div className="pointer-events-none absolute left-5 top-0 bottom-0 flex max-h-14 items-center">
+      <div className="pointer-events-none absolute bottom-0 left-5 top-0 flex max-h-14 items-center">
         <Icon icon={Icons.SEARCH} />
       </div>
 
@@ -50,7 +52,7 @@ export function SearchBarInput(props: SearchBarProps) {
         placeholder={props.placeholder}
       />
 
-      <div className="px-4 py-4 pt-0 sm:py-2 sm:px-2">
+      <div className="px-4 py-4 pt-0 sm:px-2 sm:py-2">
         <DropdownButton
           icon={Icons.SEARCH}
           open={dropdownOpen}

src/components/Slider.tsx

@@ -0,0 +1,47 @@
+import { ChangeEventHandler, useEffect, useRef } from "react";
+
+export type SliderProps = {
+  label?: string;
+  min: number;
+  max: number;
+  step: number;
+  value?: number;
+  valueDisplay?: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+};
+
+export function Slider(props: SliderProps) {
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const e = ref.current as HTMLInputElement;
+    e.style.setProperty("--value", e.value);
+    e.style.setProperty("--min", e.min === "" ? "0" : e.min);
+    e.style.setProperty("--max", e.max === "" ? "100" : e.max);
+    e.addEventListener("input", () => e.style.setProperty("--value", e.value));
+  }, [ref]);
+
+  return (
+    <div className="mb-6 flex flex-row gap-4">
+      <div className="flex w-full flex-col gap-2">
+        {props.label ? (
+          <label className="font-bold">{props.label}</label>
+        ) : null}
+        <input
+          type="range"
+          ref={ref}
+          className="styled-slider slider-progress mt-[20px]"
+          onChange={props.onChange}
+          value={props.value}
+          max={props.max}
+          min={props.min}
+          step={props.step}
+        />
+      </div>
+      <div className="mt-1 aspect-[2/1] h-8 rounded-sm bg-[#1C161B] pt-1">
+        <div className="text-center font-bold text-white">
+          {props.valueDisplay ?? props.value}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Transition.tsx

@@ -1,10 +1,16 @@
-import { Fragment, ReactNode } from "react";
 import {
   Transition as HeadlessTransition,
   TransitionClasses,
 } from "@headlessui/react";
+import { Fragment, ReactNode } from "react";
 
-type TransitionAnimations = "slide-down" | "slide-up" | "fade" | "none";
+type TransitionAnimations =
+  | "slide-down"
+  | "slide-full-left"
+  | "slide-full-right"
+  | "slide-up"
+  | "fade"
+  | "none";
 
 interface Props {
   show?: boolean;
@@ -41,6 +47,28 @@ function getClasses(
     };
   }
 
+  if (animation === "slide-full-left") {
+    return {
+      leave: `transition-[transform] ${duration}`,
+      leaveFrom: "translate-x-0",
+      leaveTo: "-translate-x-full",
+      enter: `transition-[transform] ${duration}`,
+      enterFrom: "-translate-x-full",
+      enterTo: "translate-x-0",
+    };
+  }
+
+  if (animation === "slide-full-right") {
+    return {
+      leave: `transition-[transform] ${duration}`,
+      leaveFrom: "translate-x-0",
+      leaveTo: "translate-x-full",
+      enter: `transition-[transform] ${duration}`,
+      enterFrom: "translate-x-full",
+      enterTo: "translate-x-0",
+    };
+  }
+
   if (animation === "fade") {
     return {
       leave: `transition-[transform,opacity] ${duration}`,

src/components/buttons/DropdownButton.tsx

@@ -4,10 +4,11 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { Icon, Icons } from "@/components/Icon";
 
+import { Icon, Icons } from "@/components/Icon";
 import { BackdropContainer, useBackdrop } from "@/components/layout/Backdrop";
-import { ButtonControlProps, ButtonControl } from "./ButtonControl";
+
+import { ButtonControl, ButtonControlProps } from "./ButtonControl";
 
 export interface OptionItem {
   id: string;

src/components/buttons/EditButton.tsx

@@ -1,7 +1,9 @@
-import { Icon, Icons } from "@/components/Icon";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
+
+import { Icon, Icons } from "@/components/Icon";
+
 import { ButtonControl } from "./ButtonControl";
 
 export interface EditButtonProps {

src/components/buttons/IconButton.tsx

@@ -1,5 +1,6 @@
 import { Icon, Icons } from "@/components/Icon";
-import { ButtonControlProps, ButtonControl } from "./ButtonControl";
+
+import { ButtonControl, ButtonControlProps } from "./ButtonControl";
 
 export interface IconButtonProps extends ButtonControlProps {
   icon: Icons;

src/components/layout/Backdrop.tsx

@@ -1,5 +1,6 @@
 import React, { createRef, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+
 import { useFade } from "@/hooks/useFade";
 
 interface BackdropProps {
@@ -99,7 +100,7 @@ export function BackdropContainer(
   return (
     <div ref={root}>
       {createPortal(
-        <div className="pointer-events-none fixed top-0 left-0 z-[999]">
+        <div className="pointer-events-none fixed left-0 top-0 z-[999]">
           <Backdrop active={props.active} {...props} />
           <div ref={copy} className="pointer-events-auto absolute">
             {props.children}

src/components/layout/BrandPill.tsx

@@ -1,7 +1,11 @@
 import { useTranslation } from "react-i18next";
+
 import { Icon, Icons } from "@/components/Icon";
 
-export function BrandPill(props: { clickable?: boolean }) {
+export function BrandPill(props: {
+  clickable?: boolean;
+  hideTextOnMobile?: boolean;
+}) {
   const { t } = useTranslation();
 
   return (
@@ -13,7 +17,14 @@ export function BrandPill(props: { clickable?: boolean }) {
       }`}
     >
       <Icon className="text-xl" icon={Icons.MOVIE_WEB} />
-      <span className="font-semibold text-white">{t("global.name")}</span>
+      <span
+        className={[
+          "font-semibold text-white",
+          props.hideTextOnMobile ? "hidden sm:block" : "",
+        ].join(" ")}
+      >
+        {t("global.name")}
+      </span>
     </div>
   );
 }

src/components/layout/ErrorBoundary.tsx

@@ -1,10 +1,11 @@
 import { Component } from "react";
+import { Trans, useTranslation } from "react-i18next";
+
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Link } from "@/components/text/Link";
 import { Title } from "@/components/text/Title";
 import { conf } from "@/setup/config";
-import { Trans, useTranslation } from "react-i18next";
 
 interface ErrorShowcaseProps {
   error: {

src/components/layout/Modal.tsx

@@ -1,8 +1,9 @@
-import { Overlay } from "@/components/Overlay";
-import { Transition } from "@/components/Transition";
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";
 
+import { Overlay } from "@/components/Overlay";
+import { Transition } from "@/components/Transition";
+
 interface Props {
   show: boolean;
   children?: ReactNode;
@@ -35,9 +36,14 @@ export function Modal(props: Props) {
   );
 }
 
-export function ModalCard(props: { children?: ReactNode }) {
+export function ModalCard(props: { className?: string; children?: ReactNode }) {
   return (
-    <div className="relative mx-2 max-w-[600px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10">
+    <div
+      className={[
+        "relative mx-2 w-[500px] overflow-hidden rounded-lg bg-denim-300 px-10 py-10 sm:w-[500px] md:w-[500px] lg:w-[1000px]",
+        props.className ?? "",
+      ].join(" ")}
+    >
       {props.children}
     </div>
   );

src/components/layout/Navigation.tsx

@@ -1,8 +1,12 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { Link } from "react-router-dom";
+
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
+import { useBannerSize } from "@/hooks/useBanner";
 import { conf } from "@/setup/config";
+import SettingsModal from "@/views/SettingsModal";
+
 import { BrandPill } from "./BrandPill";
 
 export interface NavigationProps {
@@ -11,45 +15,63 @@ export interface NavigationProps {
 }
 
 export function Navigation(props: NavigationProps) {
+  const bannerHeight = useBannerSize();
+  const [showModal, setShowModal] = useState(false);
   return (
-    <div className="fixed left-0 right-0 top-0 z-10 flex min-h-[88px] items-center justify-between py-5 px-7">
-      <div
-        className={`${
-          props.bg ? "opacity-100" : "opacity-0"
-        } absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
-      >
-        <div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
-      </div>
-      <div className="relative flex w-full items-center justify-center sm:w-fit">
-        <div className="mr-auto sm:mr-6">
-          <Link to="/">
-            <BrandPill clickable />
-          </Link>
+    <div
+      className="fixed left-0 right-0 top-0 z-20 min-h-[150px] bg-gradient-to-b from-denim-300 via-denim-300 to-transparent sm:from-transparent"
+      style={{
+        top: `${bannerHeight}px`,
+      }}
+    >
+      <div className="fixed left-0 right-0 flex items-center justify-between px-7 py-5">
+        <div
+          className={`${
+            props.bg ? "opacity-100" : "opacity-0"
+          } absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
+        >
+          <div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
         </div>
-        {props.children}
-      </div>
-      <div
-        className={`${
-          props.children ? "hidden sm:flex" : "flex"
-        } relative flex-row	gap-4`}
-      >
-        <a
-          href={conf().DISCORD_LINK}
-          target="_blank"
-          rel="noreferrer"
-          className="text-2xl text-white"
+        <div className="relative flex w-full items-center justify-center sm:w-fit">
+          <div className="mr-auto sm:mr-6">
+            <Link to="/">
+              <BrandPill clickable />
+            </Link>
+          </div>
+          {props.children}
+        </div>
+        <div
+          className={`${
+            props.children ? "hidden sm:flex" : "flex"
+          } relative flex-row	gap-4`}
         >
-          <IconPatch icon={Icons.DISCORD} clickable />
-        </a>
-        <a
-          href={conf().GITHUB_LINK}
-          target="_blank"
-          rel="noreferrer"
-          className="text-2xl text-white"
-        >
-          <IconPatch icon={Icons.GITHUB} clickable />
-        </a>
+          <IconPatch
+            className="text-2xl text-white"
+            icon={Icons.GEAR}
+            clickable
+            onClick={() => {
+              setShowModal(true);
+            }}
+          />
+          <a
+            href={conf().DISCORD_LINK}
+            target="_blank"
+            rel="noreferrer"
+            className="text-2xl text-white"
+          >
+            <IconPatch icon={Icons.DISCORD} clickable />
+          </a>
+          <a
+            href={conf().GITHUB_LINK}
+            target="_blank"
+            rel="noreferrer"
+            className="text-2xl text-white"
+          >
+            <IconPatch icon={Icons.GITHUB} clickable />
+          </a>
+        </div>
       </div>
+      <SettingsModal show={showModal} onClose={() => setShowModal(false)} />
     </div>
   );
 }

src/components/layout/SectionHeading.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+
 import { Icon, Icons } from "@/components/Icon";
 
 interface SectionHeadingProps {
@@ -10,8 +11,8 @@ interface SectionHeadingProps {
 
 export function SectionHeading(props: SectionHeadingProps) {
   return (
-    <div className={`mt-12 ${props.className}`}>
-      <div className="mb-4 flex items-end">
+    <div className={props.className}>
+      <div className="mb-5 flex items-center">
         <p className="flex flex-1 items-center font-bold uppercase text-denim-700">
           {props.icon ? (
             <span className="mr-2 text-xl">

src/components/media/EpisodeButton.tsx

@@ -9,12 +9,12 @@ export function Episode(props: EpisodeProps) {
   return (
     <div
       onClick={props.onClick}
-      className={`transition-[background-color, transform, box-shadow] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded bg-denim-500 font-bold text-white hover:bg-denim-400 active:scale-110 ${
+      className={`transition-[background-color, transform, box-shadow] relative mb-3 mr-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded bg-denim-500 font-bold text-white hover:bg-denim-400 active:scale-110 ${
         props.active ? "shadow-[inset_0_0_0_2px] shadow-bink-500" : ""
       }`}
     >
       <div
-        className="absolute bottom-0 top-0 left-0 bg-bink-500 bg-opacity-50"
+        className="absolute bottom-0 left-0 top-0 bg-bink-500 bg-opacity-50"
         style={{
           width: `${props.progress || 0}%`,
         }}

src/components/media/MediaCard.tsx

@@ -1,17 +1,19 @@
-import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+import { TMDBMediaToId } from "@/backend/metadata/getmeta";
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
 import { DotList } from "@/components/text/DotList";
-import { MWMediaMeta } from "@/backend/metadata/types";
-import { JWMediaToId } from "@/backend/metadata/justwatch";
-import { Icons } from "../Icon";
+
 import { IconPatch } from "../buttons/IconPatch";
+import { Icons } from "../Icon";
 
 export interface MediaCardProps {
   media: MWMediaMeta;
   linkable?: boolean;
   series?: {
     episode: number;
-    season: number;
+    season?: number;
     episodeId: string;
     seasonId: string;
   };
@@ -33,6 +35,9 @@ function MediaCardContent({
 
   const canLink = linkable && !closable;
 
+  const dotListContent = [t(`media.${media.type}`)];
+  if (media.year) dotListContent.push(media.year);
+
   return (
     <div
       className={`group -m-3 mb-2 rounded-xl bg-denim-300 bg-opacity-0 transition-colors duration-100 ${
@@ -45,16 +50,29 @@ function MediaCardContent({
         }`}
       >
         <div
-          className="relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100 group-hover:rounded-lg"
+          className={[
+            "relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100",
+            closable ? "" : "group-hover:rounded-lg",
+          ].join(" ")}
           style={{
             backgroundImage: media.poster ? `url(${media.poster})` : undefined,
           }}
         >
           {series ? (
-            <div className="absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors group-hover:bg-denim-500">
-              <p className="text-center text-xs font-bold text-slate-400 transition-colors group-hover:text-white">
+            <div
+              className={[
+                "absolute right-2 top-2 rounded-md bg-denim-200 px-2 py-1 transition-colors",
+                closable ? "" : "group-hover:bg-denim-500",
+              ].join(" ")}
+            >
+              <p
+                className={[
+                  "text-center text-xs font-bold text-slate-400 transition-colors",
+                  closable ? "" : "group-hover:text-white",
+                ].join(" ")}
+              >
                 {t("seasons.seasonAndEpisode", {
-                  season: series.season,
+                  season: series.season || 1,
                   episode: series.episode,
                 })}
               </p>
@@ -102,10 +120,7 @@ function MediaCardContent({
         <h1 className="mb-1 max-h-[4.5rem] text-ellipsis break-words font-bold text-white line-clamp-3">
           <span>{media.title}</span>
         </h1>
-        <DotList
-          className="text-xs"
-          content={[t(`media.${media.type}`), media.year]}
-        />
+        <DotList className="text-xs" content={dotListContent} />
       </article>
     </div>
   );
@@ -117,13 +132,22 @@ export function MediaCard(props: MediaCardProps) {
   const canLink = props.linkable && !props.closable;
 
   let link = canLink
-    ? `/media/${encodeURIComponent(JWMediaToId(props.media))}`
+    ? `/media/${encodeURIComponent(TMDBMediaToId(props.media))}`
     : "#";
-  if (canLink && props.series)
-    link += `/${encodeURIComponent(props.series.seasonId)}/${encodeURIComponent(
-      props.series.episodeId
-    )}`;
+  if (canLink && props.series) {
+    if (props.series.season === 0 && !props.series.episodeId) {
+      link += `/${encodeURIComponent(props.series.seasonId)}`;
+    } else {
+      link += `/${encodeURIComponent(
+        props.series.seasonId
+      )}/${encodeURIComponent(props.series.episodeId)}`;
+    }
+  }
 
   if (!props.linkable) return <span>{content}</span>;
-  return <Link to={link}>{content}</Link>;
+  return (
+    <Link to={link} className={props.closable ? "hover:cursor-default" : ""}>
+      {content}
+    </Link>
+  );
 }

src/components/media/WatchedMediaCard.tsx

@@ -1,6 +1,8 @@
-import { MWMediaMeta } from "@/backend/metadata/types";
-import { useWatchedContext } from "@/state/watched";
 import { useMemo } from "react";
+
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
+import { useWatchedContext } from "@/state/watched";
+
 import { MediaCard } from "./MediaCard";
 
 export interface WatchedMediaCardProps {

src/components/popout/FloatingAnchor.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, useEffect, useRef } from "react";
+
+export function createFloatingAnchorEvent(id: string): string {
+  return `__floating::anchor::${id}`;
+}
+
+interface Props {
+  id: string;
+  children?: ReactNode;
+}
+
+export function FloatingAnchor(props: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const old = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    let cancelled = false;
+    function render() {
+      if (cancelled) return;
+
+      if (ref.current) {
+        const current = old.current;
+        const newer = ref.current.getBoundingClientRect();
+        const newerStr = JSON.stringify(newer);
+        if (current !== newerStr) {
+          old.current = newerStr;
+          const evtStr = createFloatingAnchorEvent(props.id);
+          (window as any)[evtStr] = newer;
+          const evObj = new CustomEvent(createFloatingAnchorEvent(props.id), {
+            detail: newer,
+          });
+          document.dispatchEvent(evObj);
+        }
+      }
+      window.requestAnimationFrame(render);
+    }
+
+    window.requestAnimationFrame(render);
+    return () => {
+      cancelled = true;
+    };
+  }, [props]);
+
+  return <div ref={ref}>{props.children}</div>;
+}

src/components/popout/FloatingCard.tsx

@@ -0,0 +1,194 @@
+import { animated, easings, useSpringValue } from "@react-spring/web";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { FloatingCardAnchorPosition } from "@/components/popout/positions/FloatingCardAnchorPosition";
+import { FloatingCardMobilePosition } from "@/components/popout/positions/FloatingCardMobilePosition";
+import { useIsMobile } from "@/hooks/useIsMobile";
+import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
+
+import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
+import { Icon, Icons } from "../Icon";
+
+interface FloatingCardProps {
+  children?: ReactNode;
+  onClose?: () => void;
+  for: string;
+}
+
+interface RootFloatingCardProps extends FloatingCardProps {
+  className?: string;
+}
+
+function CardBase(props: { children: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { isMobile } = useIsMobile();
+  const height = useSpringValue(0, {
+    config: { easing: easings.easeInOutSine, duration: 300 },
+  });
+  const width = useSpringValue(0, {
+    config: { easing: easings.easeInOutSine, duration: 300 },
+  });
+  const [pages, setPages] = useState<NodeListOf<Element> | null>(null);
+
+  const getNewHeight = useCallback(
+    (updateList = true) => {
+      if (!ref.current) return;
+      const children = ref.current.querySelectorAll(
+        ":scope *[data-floating-page='true']"
+      );
+      if (updateList) setPages(children);
+      if (children.length === 0) {
+        height.start(0);
+        width.start(0);
+        return;
+      }
+      const lastChild = children[children.length - 1];
+      const rect = lastChild.getBoundingClientRect();
+      const rectHeight = lastChild.scrollHeight;
+      if (height.get() === 0) {
+        height.set(rectHeight);
+        width.set(rect.width);
+      } else {
+        height.start(rectHeight);
+        width.start(rect.width);
+      }
+    },
+    [height, width]
+  );
+
+  useEffect(() => {
+    if (!ref.current) return;
+    getNewHeight();
+    const observer = new MutationObserver(() => {
+      getNewHeight();
+    });
+    observer.observe(ref.current, {
+      attributes: false,
+      childList: true,
+      subtree: false,
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [getNewHeight]);
+
+  useEffect(() => {
+    const observer = new ResizeObserver(() => {
+      getNewHeight(false);
+    });
+    pages?.forEach((el) => observer.observe(el));
+    return () => {
+      observer.disconnect();
+    };
+  }, [pages, getNewHeight]);
+
+  return (
+    <animated.div
+      ref={ref}
+      style={{
+        height,
+        width: isMobile ? "100%" : width,
+      }}
+      className="relative flex items-center justify-center overflow-hidden"
+    >
+      {props.children}
+    </animated.div>
+  );
+}
+
+export function FloatingCard(props: RootFloatingCardProps) {
+  const { isMobile } = useIsMobile();
+  const content = <CardBase>{props.children}</CardBase>;
+
+  if (isMobile)
+    return (
+      <FloatingCardMobilePosition
+        className={props.className}
+        onClose={props.onClose}
+      >
+        {content}
+      </FloatingCardMobilePosition>
+    );
+
+  return (
+    <FloatingCardAnchorPosition id={props.for} className={props.className}>
+      {content}
+    </FloatingCardAnchorPosition>
+  );
+}
+
+export function PopoutFloatingCard(props: FloatingCardProps) {
+  return (
+    <FloatingCard
+      className="overflow-hidden rounded-md bg-ash-300"
+      {...props}
+    />
+  );
+}
+
+export const FloatingCardView = {
+  Header(props: {
+    title: string;
+    description: string;
+    close?: boolean;
+    goBack: () => any;
+    action?: React.ReactNode;
+    backText?: string;
+  }) {
+    const { t } = useTranslation();
+
+    let left = (
+      <div
+        onClick={props.goBack}
+        className="flex cursor-pointer items-center space-x-2 transition-colors duration-200 hover:text-white"
+      >
+        <Icon icon={Icons.ARROW_LEFT} />
+        <span>{props.backText || t("videoPlayer.popouts.back")}</span>
+      </div>
+    );
+    if (props.close)
+      left = (
+        <div
+          onClick={props.goBack}
+          className="flex cursor-pointer items-center space-x-2 transition-colors duration-200 hover:text-white"
+        >
+          <Icon icon={Icons.X} />
+          <span>{t("videoPlayer.popouts.close")}</span>
+        </div>
+      );
+
+    return (
+      <div className="flex flex-col bg-[#1C161B]">
+        <FloatingDragHandle />
+        <PopoutSection>
+          <div className="flex justify-between">
+            <div>{left}</div>
+            <div>{props.action ?? null}</div>
+          </div>
+
+          <h2 className="mb-2 mt-8 text-3xl font-bold text-white">
+            {props.title}
+          </h2>
+          <p>{props.description}</p>
+        </PopoutSection>
+      </div>
+    );
+  },
+  Content(props: { children: React.ReactNode; noSection?: boolean }) {
+    return (
+      <div className="grid h-full grid-rows-[1fr]">
+        {props.noSection ? (
+          <div className="relative h-full overflow-y-auto bg-ash-300">
+            {props.children}
+          </div>
+        ) : (
+          <PopoutSection className="relative h-full overflow-y-auto bg-ash-300">
+            {props.children}
+          </PopoutSection>
+        )}
+        <MobilePopoutSpacer />
+      </div>
+    );
+  },
+};

src/components/popout/FloatingContainer.tsx

@@ -0,0 +1,76 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { Transition } from "@/components/Transition";
+
+interface Props {
+  children?: ReactNode;
+  onClose?: () => void;
+  show?: boolean;
+  darken?: boolean;
+}
+
+export function FloatingContainer(props: Props) {
+  const [portalElement, setPortalElement] = useState<Element | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const target = useRef<Element | null>(null);
+
+  useEffect(() => {
+    function listen(e: MouseEvent) {
+      target.current = e.target as Element;
+    }
+    document.addEventListener("mousedown", listen);
+    return () => {
+      document.removeEventListener("mousedown", listen);
+    };
+  });
+
+  const click = useCallback(
+    (e: React.MouseEvent) => {
+      const startedTarget = target.current;
+      target.current = null;
+      if (e.currentTarget !== e.target) return;
+      if (!startedTarget) return;
+      if (!startedTarget.isEqualNode(e.currentTarget as Element)) return;
+      if (props.onClose) props.onClose();
+    },
+    [props]
+  );
+
+  useEffect(() => {
+    const element = ref.current?.closest(".popout-location");
+    setPortalElement(element ?? document.body);
+  }, []);
+
+  return (
+    <div ref={ref}>
+      {portalElement
+        ? createPortal(
+            <Transition show={props.show} animation="none">
+              <div className="popout-wrapper pointer-events-auto fixed inset-0 z-[999] select-none">
+                <Transition animation="fade" isChild>
+                  <div
+                    onClick={click}
+                    className={[
+                      "absolute inset-0",
+                      props.darken ? "bg-black opacity-90" : "",
+                    ].join(" ")}
+                  />
+                </Transition>
+                <Transition animation="slide-up" className="h-0" isChild>
+                  {props.children}
+                </Transition>
+              </div>
+            </Transition>,
+            portalElement
+          )
+        : null}
+    </div>
+  );
+}

src/components/popout/FloatingDragHandle.tsx

@@ -0,0 +1,19 @@
+import { useIsMobile } from "@/hooks/useIsMobile";
+
+export function FloatingDragHandle() {
+  const { isMobile } = useIsMobile();
+
+  if (!isMobile) return null;
+
+  return (
+    <div className="relative z-50 mx-auto my-3 -mb-3 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
+  );
+}
+
+export function MobilePopoutSpacer() {
+  const { isMobile } = useIsMobile();
+
+  if (!isMobile) return null;
+
+  return <div className="h-[200px]" />;
+}

src/components/popout/FloatingView.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+
+import { Transition } from "@/components/Transition";
+import { useIsMobile } from "@/hooks/useIsMobile";
+
+interface Props {
+  children?: ReactNode;
+  show?: boolean;
+  className?: string;
+  height?: number;
+  width?: number;
+  active?: boolean; // true if a child view is loaded
+}
+
+export function FloatingView(props: Props) {
+  const { isMobile } = useIsMobile();
+  const width = !isMobile ? `${props.width}px` : "100%";
+  return (
+    <Transition
+      animation={props.active ? "slide-full-left" : "slide-full-right"}
+      className="absolute inset-0"
+      durationClass="duration-[400ms]"
+      show={props.show}
+    >
+      <div
+        className={[
+          props.className ?? "",
+          "grid grid-rows-[auto,minmax(0,1fr)]",
+        ].join(" ")}
+        data-floating-page={props.show ? "true" : undefined}
+        style={{
+          height: props.height ? `${props.height}px` : undefined,
+          maxHeight: "70vh",
+          width: props.width ? width : undefined,
+        }}
+      >
+        {props.children}
+      </div>
+    </Transition>
+  );
+}

src/components/popout/positions/FloatingCardAnchorPosition.tsx

@@ -0,0 +1,81 @@
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+
+import { createFloatingAnchorEvent } from "@/components/popout/FloatingAnchor";
+
+interface AnchorPositionProps {
+  children?: ReactNode;
+  id: string;
+  className?: string;
+}
+
+export function FloatingCardAnchorPosition(props: AnchorPositionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [left, setLeft] = useState<number>(0);
+  const [top, setTop] = useState<number>(0);
+  const [cardRect, setCardRect] = useState<DOMRect | null>(null);
+  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null);
+
+  const calculateAndSetCoords = useCallback(
+    (anchor: DOMRect, card: DOMRect) => {
+      const buttonCenter = anchor.left + anchor.width / 2;
+      const bottomReal = window.innerHeight - anchor.bottom;
+
+      setTop(
+        window.innerHeight - bottomReal - anchor.height - card.height - 30
+      );
+      setLeft(
+        Math.min(
+          buttonCenter - card.width / 2,
+          window.innerWidth - card.width - 30
+        )
+      );
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!anchorRect || !cardRect) return;
+    calculateAndSetCoords(anchorRect, cardRect);
+  }, [anchorRect, calculateAndSetCoords, cardRect]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    function checkBox() {
+      const divRect = ref.current?.getBoundingClientRect();
+      setCardRect(divRect ?? null);
+    }
+    checkBox();
+    const observer = new ResizeObserver(checkBox);
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    const evtStr = createFloatingAnchorEvent(props.id);
+    if ((window as any)[evtStr]) setAnchorRect((window as any)[evtStr]);
+    function listen(ev: CustomEvent<DOMRect>) {
+      setAnchorRect(ev.detail);
+    }
+    document.addEventListener(evtStr, listen as any);
+    return () => {
+      document.removeEventListener(evtStr, listen as any);
+    };
+  }, [props.id]);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        transform: `translateX(${left}px) translateY(${top}px)`,
+      }}
+      className={[
+        "pointer-events-auto z-10 inline-block origin-top-left touch-none overflow-hidden",
+        props.className ?? "",
+      ].join(" ")}
+    >
+      {props.children}
+    </div>
+  );
+}

src/components/popout/positions/FloatingCardMobilePosition.tsx

@@ -0,0 +1,103 @@
+import { animated, config, useSpring } from "@react-spring/web";
+import { useDrag } from "@use-gesture/react";
+import { ReactNode, useEffect, useRef, useState } from "react";
+
+interface MobilePositionProps {
+  children?: ReactNode;
+  className?: string;
+  onClose?: () => void;
+}
+
+export function FloatingCardMobilePosition(props: MobilePositionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const closing = useRef<boolean>(false);
+  const [cardRect, setCardRect] = useState<DOMRect | null>(null);
+  const [{ y }, api] = useSpring(() => ({
+    y: 0,
+    onRest() {
+      if (!closing.current) return;
+      if (props.onClose) props.onClose();
+    },
+  }));
+
+  const bind = useDrag(
+    ({
+      last,
+      velocity: [, vy],
+      direction: [, dy],
+      movement: [, my],
+      ...event
+    }) => {
+      if (closing.current) return;
+
+      const isInScrollable = (event.target as HTMLDivElement).closest(
+        ".overflow-y-auto"
+      );
+      if (isInScrollable) return; // Don't attempt to swipe the thing away if it's a scroll area unless the scroll area is at the top and the user is swiping down
+
+      const height = cardRect?.height ?? 0;
+      if (last) {
+        // if past half height downwards
+        // OR Y velocity is past 0.5 AND going down AND 20 pixels below start position
+        if (my > height * 0.5 || (vy > 0.5 && dy > 0 && my > 20)) {
+          api.start({
+            y: height * 1.2,
+            immediate: false,
+            config: { ...config.wobbly, velocity: vy, clamp: true },
+          });
+          closing.current = true;
+        } else {
+          api.start({
+            y: 0,
+            immediate: false,
+            config: config.wobbly,
+          });
+        }
+      } else {
+        api.start({ y: my, immediate: true });
+      }
+    },
+    {
+      from: () => [0, y.get()],
+      filterTaps: true,
+      bounds: { top: 0 },
+      rubberband: true,
+    }
+  );
+
+  useEffect(() => {
+    if (!ref.current) return;
+    function checkBox() {
+      const divRect = ref.current?.getBoundingClientRect();
+      setCardRect(divRect ?? null);
+    }
+    checkBox();
+    const observer = new ResizeObserver(checkBox);
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      className="is-mobile-view absolute inset-x-0 mx-auto max-w-[400px] origin-bottom-left touch-none"
+      style={{
+        transform: `translateY(${
+          window.innerHeight - (cardRect?.height ?? 0) + 200
+        }px)`,
+      }}
+    >
+      <animated.div
+        ref={ref}
+        className={[props.className ?? "", "touch-none"].join(" ")}
+        style={{
+          y,
+        }}
+        {...bind()}
+      >
+        {props.children}
+      </animated.div>
+    </div>
+  );
+}

src/components/text/ArrowLink.tsx

@@ -1,4 +1,5 @@
 import { Link as LinkRouter } from "react-router-dom";
+
 import { Icon, Icons } from "@/components/Icon";
 
 interface IArrowLinkPropsBase {

src/hooks/useBanner.tsx

@@ -0,0 +1,61 @@
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useMeasure } from "react-use";
+
+interface BannerInstance {
+  id: string;
+  height: number;
+}
+
+const BannerContext = createContext<
+  [BannerInstance[], Dispatch<SetStateAction<BannerInstance[]>>]
+>(null as any);
+
+export function BannerContextProvider(props: { children: ReactNode }) {
+  const [state, setState] = useState<BannerInstance[]>([]);
+  const memod = useMemo<
+    [BannerInstance[], Dispatch<SetStateAction<BannerInstance[]>>]
+  >(() => [state, setState], [state]);
+
+  return (
+    <BannerContext.Provider value={memod}>
+      {props.children}
+    </BannerContext.Provider>
+  );
+}
+
+export function useBanner<T extends Element>(id: string) {
+  const [ref, { height }] = useMeasure<T>();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, set] = useContext(BannerContext);
+
+  useEffect(() => {
+    set((v) => [...v, { id, height: 0 }]);
+    set((value) => {
+      const v = value.find((item) => item.id === id);
+      if (v) {
+        v.height = height;
+      }
+      return value;
+    });
+    return () => {
+      set((v) => v.filter((item) => item.id !== id));
+    };
+  }, [height, id, set]);
+
+  return [ref];
+}
+
+export function useBannerSize() {
+  const [val] = useContext(BannerContext);
+
+  return val.reduce((a, v) => a + v.height, 0);
+}

src/hooks/useChromecastAvailable.ts

@@ -1,8 +1,9 @@
 /// <reference types="chromecast-caf-sender"/>
 
-import { isChromecastAvailable } from "@/setup/chromecast";
 import { useEffect, useRef, useState } from "react";
 
+import { isChromecastAvailable } from "@/setup/chromecast";
+
 export function useChromecastAvailable() {
   const [available, setAvailable] = useState<boolean | null>(null);
 

src/hooks/useFloatingRouter.ts

@@ -0,0 +1,60 @@
+import { useLayoutEffect, useState } from "react";
+
+export function useFloatingRouter(initial = "/") {
+  const [route, setRoute] = useState<string[]>(
+    initial.split("/").filter((v) => v.length > 0)
+  );
+  const [previousRoute, setPreviousRoute] = useState(route);
+  const currentPage = route[route.length - 1] ?? "/";
+
+  useLayoutEffect(() => {
+    if (previousRoute.length === route.length) return;
+    // when navigating backwards, we delay the updating by a bit so transitions can be applied correctly
+    setTimeout(() => {
+      setPreviousRoute(route);
+    }, 20);
+  }, [route, previousRoute]);
+
+  function navigate(path: string) {
+    const newRoute = path.split("/").filter((v) => v.length > 0);
+    if (newRoute.length > previousRoute.length) setPreviousRoute(newRoute);
+    setRoute(newRoute);
+  }
+
+  function isActive(page: string) {
+    if (page === "/") return true;
+    const index = previousRoute.indexOf(page);
+    if (index === -1) return false; // not active
+    if (index === previousRoute.length - 1) return false; // active but latest route so shouldnt be counted as active
+    return true;
+  }
+
+  function isCurrentPage(page: string) {
+    return page === currentPage;
+  }
+
+  function isLoaded(page: string) {
+    if (page === "/") return true;
+    return route.includes(page);
+  }
+
+  function pageProps(page: string) {
+    return {
+      show: isCurrentPage(page),
+      active: isActive(page),
+    };
+  }
+
+  function reset() {
+    navigate("/");
+  }
+
+  return {
+    navigate,
+    reset,
+    isLoaded,
+    isCurrentPage,
+    pageProps,
+    isActive,
+  };
+}

src/hooks/useIsMobile.ts

@@ -1,12 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 
-export function useIsMobile() {
+export function useIsMobile(horizontal?: boolean) {
   const [isMobile, setIsMobile] = useState(false);
   const isMobileCurrent = useRef<boolean | null>(false);
 
   useEffect(() => {
     function onResize() {
-      const value = window.innerWidth < 1024;
+      const value = horizontal
+        ? window.innerHeight < 600
+        : window.innerWidth < 1024;
       const isChanged = isMobileCurrent.current !== value;
       if (!isChanged) return;
 
@@ -20,7 +22,7 @@ export function useIsMobile() {
     return () => {
       window.removeEventListener("resize", onResize);
     };
-  }, []);
+  }, [horizontal]);
 
   return {
     isMobile,

src/hooks/usePing.ts

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useIsOnline() {
+  const [online, setOnline] = useState<boolean | null>(true);
+  const ref = useRef<boolean>(true);
+
+  useEffect(() => {
+    let counter = 0;
+
+    let abort: null | AbortController = null;
+    const interval = setInterval(() => {
+      // if online try once every 10 iterations intead of every iteration
+      counter += 1;
+      if (ref.current) {
+        if (counter < 10) return;
+      }
+      counter = 0;
+
+      if (abort) abort.abort();
+      abort = new AbortController();
+      const signal = abort.signal;
+      fetch("/ping.txt", { signal })
+        .then(() => {
+          setOnline(true);
+          ref.current = true;
+        })
+        .catch((err) => {
+          if (err.name === "AbortError") return;
+          setOnline(false);
+          ref.current = false;
+        });
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+      if (abort) abort.abort();
+    };
+  }, []);
+
+  return online;
+}

src/hooks/useQueryParams.ts

@@ -0,0 +1,17 @@
+import { useMemo } from "react";
+import { useLocation } from "react-router-dom";
+
+export function useQueryParams() {
+  const loc = useLocation();
+
+  const queryParams = useMemo(() => {
+    // Basic absolutely-not-fool-proof URL query param parser
+    const obj: Record<string, string> = Object.fromEntries(
+      new URLSearchParams(loc.search).entries()
+    );
+
+    return obj;
+  }, [loc]);
+
+  return queryParams;
+}

src/hooks/useScrape.ts

@@ -1,8 +1,9 @@
+import { useEffect, useState } from "react";
+
 import { findBestStream } from "@/backend/helpers/scrape";
 import { MWStream } from "@/backend/helpers/streams";
 import { DetailedMeta } from "@/backend/metadata/getmeta";
-import { MWMediaType } from "@/backend/metadata/types";
-import { useEffect, useState } from "react";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 
 export interface ScrapeEventLog {
   type: "provider" | "embed";

src/hooks/useSearchQuery.ts

@@ -1,12 +1,13 @@
-import { MWMediaType, MWQuery } from "@/backend/metadata/types";
 import { useState } from "react";
 import { generatePath, useHistory, useRouteMatch } from "react-router-dom";
 
+import { MWMediaType, MWQuery } from "@/backend/metadata/types/mw";
+
 function getInitialValue(params: { type: string; query: string }) {
   const type =
     Object.values(MWMediaType).find((v) => params.type === v) ||
     MWMediaType.MOVIE;
-  const searchQuery = params.query || "";
+  const searchQuery = decodeURIComponent(params.query || "");
   return { type, searchQuery };
 }
 

src/hooks/useVolumeToggle.ts

@@ -1,18 +1,19 @@
+import { useState } from "react";
+
 import { useControls } from "@/video/state/logic/controls";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useState } from "react";
 
 export function useVolumeControl(descriptor: string) {
   const [storedVolume, setStoredVolume] = useState(1);
   const controls = useControls(descriptor);
   const mediaPlaying = useMediaPlaying(descriptor);
 
-  const toggleVolume = () => {
+  const toggleVolume = (isKeyboardEvent = false) => {
     if (mediaPlaying.volume > 0) {
       setStoredVolume(mediaPlaying.volume);
-      controls.setVolume(0);
+      controls.setVolume(0, isKeyboardEvent);
     } else {
-      controls.setVolume(storedVolume > 0 ? storedVolume : 1);
+      controls.setVolume(storedVolume > 0 ? storedVolume : 1, isKeyboardEvent);
     }
   };
 

src/index.tsx

@@ -1,26 +1,37 @@
-import React, { ReactNode, Suspense } from "react";
+import "core-js/stable";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter, HashRouter } from "react-router-dom";
-import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
-import { conf } from "@/setup/config";
+import type { ReactNode } from "react-router-dom/node_modules/@types/react/index";
+import { registerSW } from "virtual:pwa-register";
 
+import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
 import App from "@/setup/App";
-import "@/setup/i18n";
+import { conf } from "@/setup/config";
+import i18n from "@/setup/i18n";
+
+import "@/setup/ga";
+import "@/setup/sentry";
 import "@/setup/index.css";
 import "@/backend";
 import { initializeChromecast } from "./setup/chromecast";
+import { SettingsStore } from "./state/settings/store";
 import { initializeStores } from "./utils/storage";
 
 // initialize
 const key =
   (window as any)?.__CONFIG__?.VITE_KEY ?? import.meta.env.VITE_KEY ?? null;
 if (key) {
-  (window as any).initMW(conf().BASE_PROXY_URL, key);
+  (window as any).initMW(conf().PROXY_URLS, key);
 }
 initializeChromecast();
+registerSW({
+  immediate: true,
+});
 
 const LazyLoadedApp = React.lazy(async () => {
   await initializeStores();
+  i18n.changeLanguage(SettingsStore.get().language ?? "en");
   return {
     default: App,
   };

src/setup/App.tsx

@@ -1,33 +1,120 @@
-import { Redirect, Route, Switch } from "react-router-dom";
-import { BookmarkContextProvider } from "@/state/bookmark";
-import { WatchedContextProvider } from "@/state/watched";
+import { ReactElement, lazy, useEffect } from "react";
+import {
+  Redirect,
+  Route,
+  Switch,
+  useHistory,
+  useLocation,
+} from "react-router-dom";
 
-import { NotFoundPage } from "@/views/notfound/NotFoundView";
+import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
+import { MWMediaType } from "@/backend/metadata/types/mw";
+import { BannerContextProvider } from "@/hooks/useBanner";
+import { Layout } from "@/setup/Layout";
+import { BookmarkContextProvider } from "@/state/bookmark";
+import { SettingsProvider } from "@/state/settings";
+import { WatchedContextProvider } from "@/state/watched";
 import { MediaView } from "@/views/media/MediaView";
-import { SearchView } from "@/views/search/SearchView";
-import { MWMediaType } from "@/backend/metadata/types";
+import { NotFoundPage } from "@/views/notfound/NotFoundView";
 import { V2MigrationView } from "@/views/other/v2Migration";
+import { SearchView } from "@/views/search/SearchView";
+
+function LegacyUrlView({ children }: { children: ReactElement }) {
+  const location = useLocation();
+  const { replace } = useHistory();
+
+  useEffect(() => {
+    const url = location.pathname;
+    if (!isLegacyUrl(url)) return;
+    convertLegacyUrl(location.pathname).then((convertedUrl) => {
+      replace(convertedUrl ?? "/");
+    });
+  }, [location.pathname, replace]);
+
+  if (isLegacyUrl(location.pathname)) return null;
+  return children;
+}
 
 function App() {
   return (
-    <WatchedContextProvider>
-      <BookmarkContextProvider>
-        <Switch>
-          <Route exact path="/v2-migration" component={V2MigrationView} />
-          <Route exact path="/">
-            <Redirect to={`/search/${MWMediaType.MOVIE}`} />
-          </Route>
-          <Route exact path="/media/:media" component={MediaView} />
-          <Route
-            exact
-            path="/media/:media/:season/:episode"
-            component={MediaView}
-          />
-          <Route exact path="/search/:type/:query?" component={SearchView} />
-          <Route path="*" component={NotFoundPage} />
-        </Switch>
-      </BookmarkContextProvider>
-    </WatchedContextProvider>
+    <SettingsProvider>
+      <WatchedContextProvider>
+        <BookmarkContextProvider>
+          <BannerContextProvider>
+            <Layout>
+              <Switch>
+                {/* functional routes */}
+                <Route exact path="/v2-migration" component={V2MigrationView} />
+                <Route exact path="/">
+                  <Redirect to={`/search/${MWMediaType.MOVIE}`} />
+                </Route>
+
+                {/* pages */}
+                <Route exact path="/media/:media">
+                  <LegacyUrlView>
+                    <MediaView />
+                  </LegacyUrlView>
+                </Route>
+                <Route exact path="/media/:media/:season/:episode">
+                  <LegacyUrlView>
+                    <MediaView />
+                  </LegacyUrlView>
+                </Route>
+                <Route
+                  exact
+                  path="/search/:type/:query?"
+                  component={SearchView}
+                />
+
+                {/* other */}
+                <Route
+                  exact
+                  path="/dev"
+                  component={lazy(
+                    () => import("@/views/developer/DeveloperView")
+                  )}
+                />
+                <Route
+                  exact
+                  path="/dev/video"
+                  component={lazy(
+                    () => import("@/views/developer/VideoTesterView")
+                  )}
+                />
+                {/* developer routes that can abuse workers are disabled in production */}
+                {process.env.NODE_ENV === "development" ? (
+                  <>
+                    <Route
+                      exact
+                      path="/dev/test"
+                      component={lazy(
+                        () => import("@/views/developer/TestView")
+                      )}
+                    />
+
+                    <Route
+                      exact
+                      path="/dev/providers"
+                      component={lazy(
+                        () => import("@/views/developer/ProviderTesterView")
+                      )}
+                    />
+                    <Route
+                      exact
+                      path="/dev/embeds"
+                      component={lazy(
+                        () => import("@/views/developer/EmbedTesterView")
+                      )}
+                    />
+                  </>
+                ) : null}
+                <Route path="*" component={NotFoundPage} />
+              </Switch>
+            </Layout>
+          </BannerContextProvider>
+        </BookmarkContextProvider>
+      </WatchedContextProvider>
+    </SettingsProvider>
   );
 }
 

src/setup/Layout.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Banner } from "@/components/Banner";
+import { useBannerSize } from "@/hooks/useBanner";
+import { useIsOnline } from "@/hooks/usePing";
+
+export function Layout(props: { children: ReactNode }) {
+  const { t } = useTranslation();
+  const isOnline = useIsOnline();
+  const bannerSize = useBannerSize();
+
+  return (
+    <div>
+      <div className="fixed inset-x-0 z-[1000]">
+        {!isOnline ? <Banner type="error">{t("errors.offline")}</Banner> : null}
+      </div>
+      <div
+        style={{
+          paddingTop: `${bannerSize}px`,
+        }}
+        className="flex min-h-screen flex-col"
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}

src/setup/config.ts

@@ -1,4 +1,4 @@
-import { APP_VERSION, GITHUB_LINK, DISCORD_LINK } from "./constants";
+import { APP_VERSION, DISCORD_LINK, GITHUB_LINK } from "./constants";
 
 interface Config {
   APP_VERSION: string;
@@ -10,8 +10,14 @@ interface Config {
   NORMAL_ROUTER: boolean;
 }
 
-export interface RuntimeConfig extends Config {
-  BASE_PROXY_URL: string;
+export interface RuntimeConfig {
+  APP_VERSION: string;
+  GITHUB_LINK: string;
+  DISCORD_LINK: string;
+  OMDB_API_KEY: string;
+  TMDB_API_KEY: string;
+  NORMAL_ROUTER: boolean;
+  PROXY_URLS: string[];
 }
 
 const env: Record<keyof Config, undefined | string> = {
@@ -27,12 +33,13 @@ const env: Record<keyof Config, undefined | string> = {
 const alerts = [] as string[];
 
 // loads from different locations, in order: environment (VITE_{KEY}), window (public/config.js)
-function getKey(key: keyof Config): string {
+function getKey(key: keyof Config, defaultString?: string): string {
   let windowValue = (window as any)?.__CONFIG__?.[`VITE_${key}`];
   if (windowValue !== undefined && windowValue.length === 0)
     windowValue = undefined;
   const value = env[key] ?? windowValue ?? undefined;
   if (value === undefined) {
+    if (defaultString) return defaultString;
     if (!alerts.includes(key)) {
       // eslint-disable-next-line no-alert
       window.alert(`Misconfigured instance, missing key: ${key}`);
@@ -51,8 +58,9 @@ export function conf(): RuntimeConfig {
     DISCORD_LINK,
     OMDB_API_KEY: getKey("OMDB_API_KEY"),
     TMDB_API_KEY: getKey("TMDB_API_KEY"),
-    BASE_PROXY_URL: getKey("CORS_PROXY_URL"),
-    CORS_PROXY_URL: `${getKey("CORS_PROXY_URL")}/?destination=`,
-    NORMAL_ROUTER: (getKey("NORMAL_ROUTER") ?? "false") === "true",
+    PROXY_URLS: getKey("CORS_PROXY_URL")
+      .split(",")
+      .map((v) => v.trim()),
+    NORMAL_ROUTER: getKey("NORMAL_ROUTER", "false") === "true",
   };
 }

src/setup/constants.ts

@@ -1,3 +1,6 @@
+export const APP_VERSION = import.meta.env.PACKAGE_VERSION;
 export const DISCORD_LINK = "https://discord.gg/Jhqt4Xzpfb";
 export const GITHUB_LINK = "https://github.com/movie-web/movie-web";
-export const APP_VERSION = "3.0.2";
+export const GA_ID = "G-44YVXRL61C";
+export const SENTRY_DSN =
+  "https://b267ab7d52674c23af4e4e6cf2956251@o4505053491167232.ingest.sentry.io/4505053495296000";

src/setup/ga.ts

@@ -0,0 +1,9 @@
+import ReactGA from "react-ga4";
+
+import { GA_ID } from "@/setup/constants";
+
+ReactGA.initialize([
+  {
+    trackingId: GA_ID,
+  },
+]);

src/setup/i18n.ts

@@ -1,30 +1,70 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
 
 // Languages
+import { captionLanguages } from "./iso6391";
+import cs from "./locales/cs/translation.json";
+import de from "./locales/de/translation.json";
 import en from "./locales/en/translation.json";
+import fr from "./locales/fr/translation.json";
+import it from "./locales/it/translation.json";
+import nl from "./locales/nl/translation.json";
+import pirate from "./locales/pirate/translation.json";
+import pl from "./locales/pl/translation.json";
+import tr from "./locales/tr/translation.json";
+import vi from "./locales/vi/translation.json";
+import zh from "./locales/zh/translation.json";
 
+const locales = {
+  en: {
+    translation: en,
+  },
+  it: {
+    translation: it,
+  },
+  nl: {
+    translation: nl,
+  },
+  tr: {
+    translation: tr,
+  },
+  fr: {
+    translation: fr,
+  },
+  de: {
+    translation: de,
+  },
+  zh: {
+    translation: zh,
+  },
+  cs: {
+    translation: cs,
+  },
+  pirate: {
+    translation: pirate,
+  },
+  vi: {
+    translation: vi,
+  },
+  pl: {
+    translation: pl,
+  },
+};
 i18n
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  .use(LanguageDetector)
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
     fallbackLng: "en",
-
-    resources: {
-      en: {
-        translation: en,
-      },
-    },
-
+    resources: locales,
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },
   });
 
+export const appLanguageOptions = captionLanguages.filter((x) => {
+  return Object.keys(locales).includes(x.id);
+});
+
 export default i18n;

src/setup/index.css

@@ -4,12 +4,13 @@
 
 html,
 body {
-  @apply bg-denim-100 text-denim-700 font-open-sans overflow-x-hidden;
+  @apply bg-denim-100 font-open-sans text-denim-700 overflow-x-hidden;
   min-height: 100vh;
   min-height: 100dvh;
 }
 
-html[data-full], html[data-full] body {
+html[data-full],
+html[data-full] body {
   overscroll-behavior-y: none;
 }
 
@@ -37,6 +38,7 @@ body[data-no-select] {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -53,3 +55,143 @@ body[data-no-select] {
 .google-cast-button:not(.casting) google-cast-launcher {
   @apply brightness-[500];
 }
+
+.is-mobile-view .overflow-y-auto {
+  height: 60vh;
+}
+
+/*generated with Input range slider CSS style generator (version 20211225)
+https://toughengineer.github.io/demo/slider-styler*/
+:root {
+  --slider-height: 0.25rem;
+  --slider-border-radius: 1em;
+  --slider-progress-background: #8652bb;
+}
+
+input[type=range].styled-slider {
+  height: var(--slider-height);
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: var(--slider-border-radius);
+  background: #1C161B;
+}
+
+/*progress support*/
+input[type=range].styled-slider.slider-progress {
+  --range: calc(var(--max) - var(--min));
+  --ratio: calc((var(--value) - var(--min)) / var(--range));
+  --sx: calc(0.5 * 1rem + var(--ratio) * (100% - 1rem));
+}
+
+/*webkit*/
+input[type=range].styled-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--slider-border-radius);
+  background: #FFFFFF;
+  border: none;
+  box-shadow: 0 0 2px #000000;
+  margin-top: calc(0.25em * 0.5 - 1rem * 0.5);
+}
+
+input[type=range].styled-slider::-webkit-slider-runnable-track {
+  height: var(--slider-height);
+  border: none;
+  box-shadow: none;
+  border-radius: var(--slider-border-radius);
+}
+
+input[type=range].styled-slider::-webkit-slider-thumb:hover {
+  background: #DCDCDC;
+}
+
+input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
+  background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
+}
+
+/*mozilla*/
+input[type=range].styled-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--slider-border-radius);
+  background: #FFFFFF;
+  border: none;
+  box-shadow: 0 0 2px #000000;
+}
+
+input[type=range].styled-slider::-moz-range-track {
+  height: var(--slider-height);
+  border: none;
+  border-radius: var(--slider-border-radius);
+  background: #1C161B;
+  box-shadow: none;
+}
+
+input[type=range].styled-slider::-moz-range-thumb:hover {
+  background: #DCDCDC;
+}
+
+input[type=range].styled-slider.slider-progress::-moz-range-track {
+  background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
+}
+
+/*ms*/
+input[type=range].styled-slider::-ms-fill-upper {
+  background: transparent;
+  border-color: transparent;
+}
+
+input[type=range].styled-slider::-ms-fill-lower {
+  background: transparent;
+  border-color: transparent;
+}
+
+input[type=range].styled-slider::-ms-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--slider-border-radius);
+  background: #FFFFFF;
+  border: none;
+  box-shadow: 0 0 2px #000000;
+  margin-top: 0;
+  box-sizing: border-box;
+}
+
+input[type=range].styled-slider::-ms-track {
+  height: var(--slider-height);
+  border-radius: var(--slider-border-radius);
+  background: #1C161B;
+  border: none;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+
+input[type=range].styled-slider::-ms-thumb:hover {
+  background: #DCDCDC;
+}
+
+input[type=range].styled-slider.slider-progress::-ms-fill-lower {
+  height: var(--slider-height);
+  border-radius: var(--slider-border-radius) 0 0 5px;
+  margin: -undefined 0 -undefined -undefined;
+  background: var(--slider-progress-background);
+  border: none;
+  border-right-width: 0;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: theme("colors.denim-500");
+  border: 5px solid transparent;
+  border-left: 0;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar {
+  /* For some reason the styles don't get applied without the width */
+  width: 13px;
+}

src/setup/locales/cs/translation.json

@@ -0,0 +1,128 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Načítání Vašich oblíbených seriálů...",
+    "loading_movie": "Načítání Vašich oblíbených filmů...",
+    "loading": "Načítání...",
+    "allResults": "To je vše co máme!",
+    "noResults": "Nemohli jsme nic najít!",
+    "allFailed": "Nepodařilo se najít média, zkuste to znovu!",
+    "headingTitle": "Výsledky vyhledávání",
+    "bookmarks": "Záložky",
+    "continueWatching": "Pokračujte ve sledování",
+    "title": "Co si přejete sledovat?",
+    "placeholder": "Co si přejete sledovat?"
+  },
+  "media": {
+    "movie": "Filmy",
+    "series": "Seriály",
+    "stopEditing": "Zastavit upravování",
+    "errors": {
+      "genericTitle": "Jejda, rozbilo se to!",
+      "failedMeta": "Nepovedlo se načíst meta",
+      "mediaFailed": "Nepodařilo se nám požádat o Vaše média, zkontrolujte své internetové připojení a zkuste to znovu.",
+      "videoFailed": "Při přehrávání požadovaného videa došlo k chybě. Pokud se tohle opakuje prosím nahlašte nám to na <0>Discord serveru</0> nebo na <1>GitHubu</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Nenalezeno",
+    "backArrow": "Zpátky domů",
+    "media": {
+      "title": "Nemohli jsme najít Vaše média.",
+      "description": "Nemohli jsme najít média o které jste požádali. Buďto jsme ho nemohli najít, nebo jste manipulovali s URL."
+    },
+    "provider": {
+      "title": "Tento poskytovatel byl zakázán",
+      "description": "Měli jsme s tímto poskytovatelem problémy, nebo byl moc nestabilní na používání, a tak jsme ho museli zakázat."
+    },
+    "page": {
+      "title": "Tuto stránku se nepodařilo najít",
+      "description": "Dívali jsme se všude: pod koši, ve skříni, za proxy, ale nakonec jsme nemohli najít stránku, kterou hledáte."
+    }
+  },
+  "searchBar": {
+    "movie": "Film",
+    "series": "Seriál",
+    "Search": "Hledání"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Hledáme pro Vás nejlepší video",
+    "noVideos": "Jejda, nemohli jsme žádné video najít",
+    "loading": "Načítání...",
+    "backToHome": "Zpátky domů",
+    "backToHomeShort": "Zpět",
+    "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "Zbývá {{timeLeft}}",
+    "finishAt": "Končí ve {{timeFinished, datetime}}",
+    "buttons": {
+      "episodes": "Epizody",
+      "source": "Zdroj",
+      "captions": "Titulky",
+      "download": "Stáhnout",
+      "settings": "Nastavení",
+      "pictureInPicture": "Obraz v obraze",
+      "playbackSpeed": "Rychlost přehrávání"
+    },
+    "popouts": {
+      "back": "Zpět",
+      "sources": "Zdroje",
+      "seasons": "Sezóny",
+      "captions": "Titulky",
+      "playbackSpeed": "Rychlost přehrávání",
+      "customPlaybackSpeed": "Vlastní rychlost přehrávání",
+      "captionPreferences": {
+        "title": "Upravit",
+        "delay": "Zpoždení",
+        "fontSize": "Velikost",
+        "opacity": "Průhlednost",
+        "color": "Barva"
+      },
+      "episode": "E{{index}} - {{title}}",
+      "noCaptions": "Žádné titulky",
+      "linkedCaptions": "Propojené titulky",
+      "customCaption": "Vlastní titulky",
+      "uploadCustomCaption": "Nahrát titulky",
+      "noEmbeds": "Nebyla nalezena žádná vložení pro tento zdroj",
+
+      "errors": {
+        "loadingWentWong": "Něco se nepovedlo při načítání epizod pro {{seasonTitle}}",
+        "embedsError": "Něco se povedlo při načítání vložení pro tuhle věc, kterou máte tak rádi"
+      },
+      "descriptions": {
+        "sources": "Jakého poskytovatele chcete použít?",
+        "embeds": "Vyberte video, které chcete sledovat",
+        "seasons": "Vyberte sérii, kterou chcete sledovat",
+        "episode": "Vyberte epizodu",
+        "captions": "Vyberte jazyk titulků",
+        "captionPreferences": "Upravte titulky tak, jak se Vám budou líbit",
+        "playbackSpeed": "Změňtě rychlost přehrávání"
+      }
+    },
+    "errors": {
+      "fatalError": "Došlo k závažné chybě v přehrávači videa, prosím nahlašte ji na <0>Discord serveru</0> nebo na <1>GitHubu</1>."
+    }
+  },
+  "settings": {
+    "title": "Nastavení",
+    "language": "Jazyk",
+    "captionLanguage": "Jazyk titulků"
+  },
+  "v3": {
+    "newSiteTitle": "Je dostupná nová verze!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web se brzy přesune na novou doménu: <0>https://movie-web.app</0>. Nezapomeňte si aktualizovat záložky, protože <1>stará stránka přestane fungovat {{date}}.</1>",
+    "tireless": "Pracovali jsme neúnavně na této nové aktualizaci, a tak doufáme, že se Vám bude líbit co jsme v posledních měsících kuchtili.",
+    "leaveAnnouncement": "Vezměte mě tam!"
+  },
+  "casting": {
+    "casting": "Přehrávání do zařízení..."
+  },
+  "errors": {
+    "offline": "Zkontrolujte své internetové připojení"
+  }
+}

src/setup/locales/de/translation.json

@@ -0,0 +1,127 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Auf der Suche nach deiner Lieblingsserie...",
+    "loading_movie": "Auf der Suche nach deinen Lieblingsfilmen...",
+    "loading": "Wird geladen...",
+    "allResults": "Das ist alles, was wir haben!",
+    "noResults": "Wir haben nichts gefunden!",
+    "allFailed": "Das Medium wurde nicht gefunden, bitte versuchen Sie es erneut!",
+    "headingTitle": "Suchergebnisse",
+    "bookmarks": "Favoriten",
+    "continueWatching": "Weiter ansehen",
+    "title": "Was willst du gucken?",
+    "placeholder": "Was willst du gucken?"
+  },
+  "media": {
+    "movie": "Filme",
+    "series": "Serie",
+    "stopEditing": "Beenden die Bearbeitung",
+    "errors": {
+      "genericTitle": "Hoppla, etwas ist schiefgegangen!",
+      "failedMeta": "Metadaten konnten nicht geladen werden",
+      "mediaFailed": "Wir konnten die angeforderten Medien nicht abrufen.",
+      "videoFailed": "Beim Abspielen des angeforderten Videos ist ein Fehler aufgetreten. <0>Discord</0> Oder weiter <1>GitHub</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Nicht gefunden",
+    "backArrow": "Zurück zur Startseite",
+    "media": {
+      "title": "Das Medium konnte nicht gefunden werden",
+      "description": "Wir konnten die angeforderten Medien nicht finden."
+    },
+    "provider": {
+      "title": "Dieser Anbieter wurde deaktiviert",
+      "description": "Wir hatten Probleme mit dem Anbieter oder er war zu instabil, sodass wir ihn deaktivieren mussten."
+    },
+    "page": {
+      "title": "Diese Seite kann nicht gefunden werden",
+      "description": "Wir haben überall gesucht, aber am Ende konnten wir die gesuchte Seite nicht finden."
+    }
+  },
+  "searchBar": {
+    "movie": "Film",
+    "series": "Serie",
+    "Search": "Suchen"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Auf der Suche nach dem besten Video für Sie",
+    "noVideos": "Entschuldigung, wir konnten keine Videos finden",
+    "loading": "Wird geladen...",
+    "backToHome": "Zurück zur Startseite",
+    "backToHomeShort": "Rückmeldung",
+    "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "{{timeLeft}} verbleibend",
+    "finishAt": "Endet um {{timeFinished, datetime}}",
+    "buttons": {
+      "episodes": "Folgen",
+      "source": "Quelle",
+      "captions": "Untertitel",
+      "download": "Herunterladen",
+      "settings": "Einstellungen",
+      "pictureInPicture": "Bild-im-Bild",
+      "playbackSpeed": "Wiedergabegeschwindigkeit"
+    },
+    "popouts": {
+      "back": "Zurück",
+      "sources": "Quellen",
+      "seasons": "Staffel",
+      "captions": "Untertitel",
+      "playbackSpeed": "Lesegeschwindigkeit",
+      "customPlaybackSpeed": "Benutzerdefinierte Wiedergabegeschwindigkeit",
+      "captionPreferences": {
+        "title": "Bearbeiten",
+        "delay": "Verzögerung",
+        "fontSize": "Größe",
+        "opacity": "Opazität",
+        "color": "Farbe"
+      },
+      "episode": "E{{index}} - {{title}}",
+      "noCaptions": "Keine Untertitel",
+      "linkedCaptions": "Verbundene Untertitel",
+      "customCaption": "Benutzerdefinierte Untertitel",
+      "uploadCustomCaption": "Untertitel hochladen",
+      "noEmbeds": "Für diese Quelle wurde kein eingebetteter Inhalt gefunden",
+      "errors": {
+        "loadingWentWong": "Beim Laden der Folgen für {{seasonTitle}} ist ein Problem aufgetreten ",
+        "embedsError": "Beim Laden der eingebetteter Medien ist ein Problem aufgetreten"
+      },
+      "descriptions": {
+        "sources": "Welchen Anbieter möchtest du nutzen?",
+        "embeds": "Wähle das Video aus, das du ansehen möchten",
+        "seasons": "Wähle die Staffel aus, die du sehen möchten",
+        "episode": "Wähle eine Folge aus",
+        "captions": "Wähle eine Untertitelsprache",
+        "captionPreferences": "Passe das Erscheinungsbild von Untertiteln an",
+        "playbackSpeed": "Wiedergabegeschwindigkeit ändern"
+      }
+    },
+    "errors": {
+      "fatalError": "Der Videoplayer hat einen Fehler festgestellt, bitte melde ihn dem Server <0>Discord</0> Oder weiter <1>GitHub</1>."
+    }
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "language": "Sprache",
+    "captionLanguage": "Untertitelsprache"
+  },
+  "v3": {
+    "newSiteTitle": "Neue Version verfügbar!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web zieht in Kürze auf eine neue Domain um: <0>https://movie-web.app</0>. <1>Die alte Website funktioniert nicht mehr {{date}}.</1>",
+    "tireless": "Wir haben unermüdlich an diesem neuen Update gearbeitet und hoffen, dass dir gefällt, was wir in den letzten Monaten vorbereitet haben.",
+    "leaveAnnouncement": "Bring mich dahin!"
+  },
+  "casting": {
+    "casting": "An Gerät übertragen..."
+  },
+  "errors": {
+    "offline": "Internetverbindung ist instabil"
+  }
+}

src/setup/locales/en/translation.json

@@ -55,29 +55,72 @@
     "noVideos": "Whoops, couldn't find any videos for you",
     "loading": "Loading...",
     "backToHome": "Back to home",
+    "backToHomeShort": "Back",
     "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "{{timeLeft}} left",
+    "finishAt": "Finish at {{timeFinished, datetime}}",
     "buttons": {
       "episodes": "Episodes",
       "source": "Source",
-      "captions": "Captions"
+      "captions": "Captions",
+      "download": "Download",
+      "settings": "Settings",
+      "pictureInPicture": "Picture in Picture",
+      "playbackSpeed": "Playback speed"
     },
     "popouts": {
+      "back": "Go back",
       "sources": "Sources",
-      "seasons": "Seasons",
+      "close": "Close",
+      "seasons": {
+        "title":"Seasons",
+        "other": "Other seasons",
+        "noSeason": "No season"
+      },
+      "episodes": {
+        "unknown": "Unknown episode",
+        "noEpisode": "No episode"
+      },
       "captions": "Captions",
+      "playbackSpeed": "Playback speed",
+      "customPlaybackSpeed": "Custom playback speed",
+      "captionPreferences": {
+        "title": "Customize",
+        "delay": "Delay",
+        "fontSize": "Size",
+        "opacity": "Opacity",
+        "color": "Color"
+      },
       "episode": "E{{index}} - {{title}}",
       "noCaptions": "No captions",
       "linkedCaptions": "Linked captions",
+      "customCaption": "Custom caption",
+      "uploadCustomCaption": "Upload caption",
       "noEmbeds": "No embeds were found for this source",
+
       "errors": {
         "loadingWentWong": "Something went wrong loading the episodes for {{seasonTitle}}",
         "embedsError": "Something went wrong loading the embeds for this thing that you like"
+      },
+      "descriptions": {
+        "sources": "What provider do you want to use?",
+        "embeds": "Choose which video to view",
+        "seasons": "Choose which season you want to watch",
+        "episode": "Pick an episode",
+        "captions": "Choose a subtitle language",
+        "captionPreferences": "Make subtitles look how you want it",
+        "playbackSpeed": "Change the playback speed"
       }
     },
     "errors": {
       "fatalError": "The video player encounted a fatal error, please report it to the <0>Discord server</0> or on <1>GitHub</1>."
     }
   },
+  "settings": {
+    "title": "Settings",
+    "language": "Language",
+    "captionLanguage": "Caption Language"
+  },
   "v3": {
     "newSiteTitle": "New version now released!",
     "newDomain": "https://movie-web.app",
@@ -87,5 +130,8 @@
   },
   "casting": {
     "casting": "Casting to device..."
+  },
+  "errors": {
+    "offline": "Check your internet connection"
   }
 }

src/setup/locales/fr/translation.json

@@ -0,0 +1,127 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Recherche de votre série préférée...",
+    "loading_movie": "Recherche de vos films préférés...",
+    "loading": "Chargement...",
+    "allResults": "C'est tout ce que nous avons!",
+    "noResults": "Nous n'avons rien trouvé!",
+    "allFailed": "Le média n'a pas été trouvé, veuillez réessayez!",
+    "headingTitle": "Résultats de la recherche",
+    "bookmarks": "Favoris",
+    "continueWatching": "Continuer le visionnage",
+    "title": "Que voulez-vous voir?",
+    "placeholder": "Que voulez-vous voir?"
+  },
+  "media": {
+    "movie": "Films",
+    "series": "Séries",
+    "stopEditing": "Arrêter l'édition",
+    "errors": {
+      "genericTitle": "Oups, c'est coupé !",
+      "failedMeta": "Impossible de charger les métadonnées",
+      "mediaFailed": "Nous n'avons pas réussi à récupérer le média que vous avez demandé. Veuillez vérifier votre connexion Internet et réessayer.",
+      "videoFailed": "Nous avons rencontré une erreur lors de la lecture de la vidéo que vous avez demandée. Si cela se reproduit, veuillez signaler le problème au serveur <0>Discord</0> ou sur <1>GitHub</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Introuvable",
+    "backArrow": "Retour à l'accueil",
+    "media": {
+      "title": "Impossible de trouver ce média",
+      "description": "Nous n'avons pas trouvé le média que vous avez demandé. Soit il a été supprimé, soit vous avez modifié l'URL."
+    },
+    "provider": {
+      "title": "Ce fournisseur a été désactivé",
+      "description": "Nous avons eu des problèmes avec le fournisseur ou il était trop instable pour être utilisé, nous avons donc dû le désactiver."
+    },
+    "page": {
+      "title": "Impossible de trouver cette page",
+      "description": "Nous avons cherché partout : sous les poubelles, dans le placard, derrière le proxy, mais nous n'avons finalement pas trouvé la page que vous cherchez."
+    }
+  },
+  "searchBar": {
+    "movie": "Film",
+    "series": "Série",
+    "Search": "Rechercher"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Recherche de la meilleure vidéo pour vous",
+    "noVideos": "Désolé, nous n'avons pas pu trouver de vidéos pour vous",
+    "loading": "Chargement...",
+    "backToHome": "Retour à la page d'accueil",
+    "backToHomeShort": "Retour",
+    "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "{{timeLeft}} restant",
+    "finishAt": "Terminer à {{timeFinished, datetime}}",
+    "buttons": {
+      "episodes": "Épisodes",
+      "source": "Source",
+      "captions": "Sous-titres",
+      "download": "Télécharger",
+      "settings": "Paramètres",
+      "pictureInPicture": "Image dans l'image",
+      "playbackSpeed": "Vitesse"
+    },
+    "popouts": {
+      "back": "Retourner",
+      "sources": "Sources",
+      "seasons": "Saisons",
+      "captions": "Sous-titres",
+      "playbackSpeed": "Vitesse de lecture",
+      "customPlaybackSpeed": "Vitesse de lecture personnalisée",
+      "captionPreferences": {
+        "title": "Personnaliser",
+        "delay": "Délai",
+        "fontSize": "Taille",
+        "opacity": "Opacité",
+        "color": "Couleur"
+      },
+      "episode": "E{{index}} - {{title}}",
+      "noCaptions": "Pas de sous-titres",
+      "linkedCaptions": "Sous-titres liés",
+      "customCaption": "Sous-titres personnalisés",
+      "uploadCustomCaption": "Télécharger des sous-titres",
+      "noEmbeds": "Aucun contenu intégré n'a été trouvé pour cette source",
+      "errors": {
+        "loadingWentWong": "Un problème est survenu lors du chargement des épisodes pour {{seasonTitle}}",
+        "embedsError": "Un problème est survenu lors du chargement des contenus intégrés pour cet élément que vous aimez"
+      },
+      "descriptions": {
+        "sources": "Quel fournisseur voulez-vous utiliser ?",
+        "embeds": "Choisissez quelle vidéo regarder",
+        "seasons": "Choisissez la saison que vous voulez regarder",
+        "episode": "Sélectionnez un épisode",
+        "captions": "Choisissez une langue de sous-titres",
+        "captionPreferences": "Personnalisez l'apparence des sous-titres",
+        "playbackSpeed": "Changer la vitesse de lecture"
+      }
+    },
+    "errors": {
+      "fatalError": "Le lecteur vidéo a rencontré une erreur fatale, veuillez la signaler au serveur <0>Discord</0> ou sur <1>GitHub</1>."
+    }
+  },
+  "settings": {
+    "title": "Paramètres",
+    "language": "Language",
+    "captionLanguage": "Langue des sous-titres"
+  },
+  "v3": {
+    "newSiteTitle": "Nouvelle version disponible!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web déménagera bientôt vers un nouveau domaine : <0>https://movie-web.app</0>. Veillez à mettre à jour tous vos favoris car <1>l'ancien site web cessera de fonctionner le {{date}}.</1>",
+    "tireless": "Nous avons travaillé sans relâche sur cette nouvelle mise à jour et nous espérons que vous apprécierez ce que nous avons préparé ces derniers mois.",
+    "leaveAnnouncement": "Emmenez-moi là!"
+  },
+  "casting": {
+    "casting": "Transmission à l'appareil..."
+  },
+  "errors": {
+    "offline": "Vérifiez votre connexion internet"
+  }
+}