Merge pull request #302 from movie-web/dev

Version 3.0.15
Merge branch 'master' into dev
2025-09-13 16:03:25 +00:00 · 2023-05-22 19:42:58 +02:00 · 2023-05-22 19:42:50 +02:00 · 2023-05-22 19:26:57 +02:00 · 2023-05-22 19:24:45 +02:00 · 2023-05-22 19:22:23 +02:00
163 changed files with 4962 additions and 1218 deletions
--- a/.eslintrc.js
+++ b/.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",
@@ -54,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,
+  },
 };
--- a/README.md
+++ b/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.

--- a/index.html
+++ b/index.html
@@ -29,6 +29,9 @@
    <!-- 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>
  <body>
--- a/package.json
+++ b/package.json
@@ -1,12 +1,14 @@
 {
  "name": "movie-web",
-  "version": "3.0.8",
+  "version": "3.0.15",
  "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",
    "@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",
@@ -19,7 +21,6 @@
    "json5": "^2.2.0",
    "lodash.throttle": "^4.1.1",
    "nanoid": "^4.0.0",
-    "node-webvtt": "^1.9.4",
    "ofetch": "^1.0.0",
    "pako": "^2.1.0",
    "react": "^17.0.2",
@@ -31,7 +32,7 @@
    "react-stickynode": "^4.1.0",
    "react-transition-group": "^4.4.5",
    "react-use": "^17.4.0",
-    "srt-webvtt": "^2.0.0",
+    "subsrt-ts": "^2.1.1",
    "unpacker": "^1.0.1"
  },
  "scripts": {
@@ -81,7 +82,7 @@
    "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",
--- a/src/@types/node_webtt.d.ts
+++ b/src/@types/node_webtt.d.ts
@@ -1,27 +0,0 @@
-declare module "node-webvtt" {
-  interface Cue {
-    identifier: string;
-    start: number;
-    end: number;
-    text: string;
-    styles: string;
-  }
-  interface Options {
-    meta?: boolean;
-    strict?: boolean;
-  }
-  type ParserError = Error;
-  interface ParseResult {
-    valid: boolean;
-    strict: boolean;
-    cues: Cue[];
-    errors: ParserError[];
-    meta?: Map<string, string>;
-  }
-  interface Segment {
-    duration: number;
-    cues: Cue[];
-  }
-  function parse(text: string, options: Options): ParseResult;
-  function segment(input: string, segmentLength?: number): Segment[];
-}
--- a/src/tests/providers/providers.test.ts
+++ b/src/tests/providers/providers.test.ts
@@ -1,9 +1,10 @@
 import { describe, it } from "vitest";
+
 import "@/backend";
-import { getProviders } from "@/backend/helpers/register";
-import { MWMediaType } from "@/backend/metadata/types";
-import { runProvider } from "@/backend/helpers/run";
 import { testData } from "@/__tests__/providers/testdata";
+import { getProviders } from "@/backend/helpers/register";
+import { runProvider } from "@/backend/helpers/run";
+import { MWMediaType } from "@/backend/metadata/types";

 describe("providers", () => {
  const providers = getProviders();
--- a/src/tests/subtitles/subtitles.test.ts
+++ b/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`);
+  });
+});
--- a/src/tests/subtitles/testdata.ts
+++ b/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 };
--- a/src/backend/embeds/streamm4u.ts
+++ b/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,
-  MWEmbedStream,
 } from "@/backend/helpers/streams";
-import { proxiedFetch } from "@/backend/helpers/fetch";

 const HOST = "streamm4u.club";
 const URL_BASE = `https://${HOST}`;
--- a/src/backend/helpers/captions.ts
+++ b/src/backend/helpers/captions.ts
@@ -1,48 +1,45 @@
+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";
-import DOMPurify from "dompurify";

-export const sanitize = DOMPurify.sanitize;
-export const CUSTOM_CAPTION_ID = "customCaption";
-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 async function convertCustomCaptionFileToWebVTT(file: File) {
-  const header = await file.slice(0, 6).text();
-  const isWebVTT = header === "WEBVTT";
-  if (!isWebVTT) {
-    return toWebVTT(file);
+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,
+    });
  }
-  return URL.createObjectURL(file);
+  // 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) {
@@ -50,3 +47,16 @@ export function revokeCaptionBlob(url: string | undefined) {
    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[];
+}
--- a/src/backend/helpers/fetch.ts
+++ b/src/backend/helpers/fetch.ts
@@ -1,5 +1,6 @@
+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);

@@ -58,3 +59,36 @@ export function proxiedFetch<T>(url: string, ops: P<T>[1] = {}): R<T> {
    },
  });
 }
+
+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: {
+      destination: parsedUrl.toString(),
+    },
+  });
+}
--- a/src/backend/helpers/provider.ts
+++ b/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";

 export type MWProviderScrapeResult = {
  stream?: MWStream;
--- a/src/backend/helpers/streams.ts
+++ b/src/backend/helpers/streams.ts
@@ -3,9 +3,17 @@ 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 {
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -1,11 +1,13 @@
 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";

 // embeds
 import "./embeds/streamm4u";
--- a/src/backend/metadata/getmeta.ts
+++ b/src/backend/metadata/getmeta.ts
@@ -1,13 +1,14 @@
 import { FetchError } from "ofetch";
-import { makeUrl, proxiedFetch } from "../helpers/fetch";
+
 import {
-  formatJWMeta,
  JWMediaResult,
  JWSeasonMetaResult,
  JW_API_BASE,
+  formatJWMeta,
  mediaTypeToJW,
 } from "./justwatch";
 import { MWMediaMeta, MWMediaType } from "./types";
+import { makeUrl, proxiedFetch } from "../helpers/fetch";

 type JWExternalIdType =
  | "eidr"
@@ -28,8 +29,8 @@ interface JWDetailedMeta extends JWMediaResult {

 export interface DetailedMeta {
  meta: MWMediaMeta;
-  tmdbId: string;
-  imdbId: string;
+  imdbId?: string;
+  tmdbId?: string;
 }

 export async function getMetaFromId(
@@ -66,8 +67,6 @@ export async function getMetaFromId(
  if (!tmdbId)
    tmdbId = data.external_ids.find((v) => v.provider === "tmdb")?.external_id;

-  if (!imdbId || !tmdbId) throw new Error("not enough info");
-
  let seasonData: JWSeasonMetaResult | undefined;
  if (data.object_type === "show") {
    const seasonToScrape = seasonId ?? data.seasons?.[0].id.toString() ?? "";
--- a/src/backend/metadata/search.ts
+++ b/src/backend/metadata/search.ts
@@ -1,13 +1,14 @@
 import { SimpleCache } from "@/utils/cache";
-import { proxiedFetch } from "../helpers/fetch";
+
 import {
-  formatJWMeta,
  JWContentTypes,
  JWMediaResult,
  JW_API_BASE,
+  formatJWMeta,
  mediaTypeToJW,
 } from "./justwatch";
 import { MWMediaMeta, MWQuery } from "./types";
+import { proxiedFetch } from "../helpers/fetch";

 const cache = new SimpleCache<MWQuery, MWMediaMeta[]>();
 cache.setCompare((a, b) => {
--- a/src/backend/providers/2embed.ts
+++ b/src/backend/providers/2embed.ts
@@ -0,0 +1,251 @@
+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";
+
+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],
+  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,
+          };
+        }),
+      },
+    };
+  },
+});
--- a/src/backend/providers/flixhq.ts
+++ b/src/backend/providers/flixhq.ts
@@ -1,42 +1,38 @@
 import { compareTitle } from "@/utils/titleMatch";
-import { proxiedFetch } from "../helpers/fetch";
-import { registerProvider } from "../helpers/register";
+
 import {
-  MWCaptionType,
-  MWStreamQuality,
-  MWStreamType,
-} from "../helpers/streams";
+  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";

-// const flixHqBase = "https://api.consumet.org/movies/flixhq";
-// *** TEMPORARY FIX - use other instance
-// SEE ISSUE: https://github.com/consumet/api.consumet.org/issues/326
-const flixHqBase = "https://c.delusionz.xyz/movies/flixhq";
+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: "Movie" | "TV Series";
-}
-
-interface FLIXTVSerie extends FLIXMediaBase {
-  seasons: number | null;
-}
-
-interface FLIXMovie extends FLIXMediaBase {
+  type: FlixHQMediaType;
  releaseDate: string;
 }
-
-function castSubtitles({ url, lang }: { url: string; lang: 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:
-      url.substring(url.length - 3) === "vtt"
-        ? MWCaptionType.VTT
-        : MWCaptionType.SRT,
+    type,
  };
 }

@@ -48,18 +44,22 @@ const qualityMap: Record<string, MWStreamQuality> = {
  "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, 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,
@@ -67,60 +67,46 @@ registerProvider({
    );

    const foundItem = searchResults.results.find((v: FLIXMediaBase) => {
-      if (media.meta.type === MWMediaType.MOVIE) {
-        if (v.type !== "Movie") return false;
-        const movie = v as FLIXMovie;
-        return (
-          compareTitle(movie.title, media.meta.title) &&
-          movie.releaseDate === media.meta.year
-        );
-      }
-      if (media.meta.type === MWMediaType.SERIES) {
-        if (v.type !== "TV Series") return false;
-        const serie = v as FLIXTVSerie;
-        if (serie.seasons && media.meta.seasons) {
-          return (
-            compareTitle(serie.title, media.meta.title) &&
-            serie.seasons === media.meta.seasons.length
-          );
-        }
-        return false;
-      }
-      return false;
+      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.episodes) throw new Error("No watchable item found");
+    if (!mediaInfo.id) throw new Error("No watchable item found");
    // get stream info from media
-    progress(75);
+    progress(50);

-    // By default we assume it is a movie
-    let episodeId: string | undefined = mediaInfo.episodes[0].id;
-    if (media.meta.type === MWMediaType.SERIES) {
+    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;
-      episodeId = mediaInfo.episodes.find(
-        (e: any) => e.season === seasonNo && e.number === episodeNo
-      )?.id;
+
+      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");
-
-    const watchInfo = await proxiedFetch<any>("/watch", {
+    progress(75);
+    const watchInfo = await mwFetch<any>(`/watch/${episodeId}`, {
      baseURL: flixHqBase,
      params: {
-        episodeId,
-        mediaId: flixId,
+        id: mediaInfo.id,
      },
    });

@@ -135,11 +121,7 @@ registerProvider({
        streamUrl: source.url,
        quality: qualityMap[source.quality],
        type: source.isM3U8 ? MWStreamType.HLS : MWStreamType.MP4,
-        captions: watchInfo.subtitles
-          .filter(
-            (x: { url: string; lang: string }) => !x.lang.includes("(maybe)")
-          )
-          .map(castSubtitles),
+        captions: watchInfo.subtitles.map(convertSubtitles).filter(Boolean),
      },
    };
  },
--- a/src/backend/providers/gdriveplayer.ts
+++ b/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";
+
 import { proxiedFetch } from "../helpers/fetch";

 const format = {
@@ -40,6 +41,7 @@ registerProvider({
  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",
--- a/src/backend/providers/hdwatched.ts
+++ b/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";
+
+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: [],
+      },
+    };
+  },
+});
--- a/src/backend/providers/m4ufree.ts
+++ b/src/backend/providers/m4ufree.ts
@@ -1,4 +1,5 @@
 import { MWEmbed, MWEmbedType } from "@/backend/helpers/embed";
+
 import { proxiedFetch } from "../helpers/fetch";
 import { registerProvider } from "../helpers/register";
 import { MWMediaType } from "../metadata/types";
--- a/src/backend/providers/netfilm.ts
+++ b/src/backend/providers/netfilm.ts
@@ -22,6 +22,7 @@ registerProvider({
  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)) {
--- a/src/backend/providers/superstream/index.ts
+++ b/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";
 import { compareTitle } from "@/utils/titleMatch";

 const nanoid = customAlphabet("0123456789abcdef", 32);
@@ -111,6 +115,30 @@ 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",
@@ -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: {
--- a/src/components/Button.tsx
+++ b/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;
--- a/src/components/CaptionColorSelector.tsx
+++ b/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>
+  );
+}
--- a/src/components/Dropdown.tsx
+++ b/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 }) =>
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -40,6 +40,7 @@ export enum Icons {
  WATCH_PARTY = "watch_party",
  PICTURE_IN_PICTURE = "pictureInPicture",
  CHECKMARK = "checkmark",
+  TACHOMETER = "tachometer",
 }

 export interface IconProps {
@@ -87,6 +88,7 @@ const iconList: Record<Icons, string> = {
  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() {
--- a/src/components/Overlay.tsx
+++ b/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 (
    <>
--- a/src/components/SearchBar.tsx
+++ b/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";
+
 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}
--- a/src/components/Slider.tsx
+++ b/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>
+  );
+}
--- a/src/components/Transition.tsx
+++ b/src/components/Transition.tsx
@@ -1,8 +1,8 @@
-import { Fragment, ReactNode } from "react";
 import {
  Transition as HeadlessTransition,
  TransitionClasses,
 } from "@headlessui/react";
+import { Fragment, ReactNode } from "react";

 type TransitionAnimations =
  | "slide-down"
--- a/src/components/buttons/DropdownButton.tsx
+++ b/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;
--- a/src/components/buttons/EditButton.tsx
+++ b/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 {
--- a/src/components/buttons/IconButton.tsx
+++ b/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;
--- a/src/components/layout/Backdrop.tsx
+++ b/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}
--- a/src/components/layout/BrandPill.tsx
+++ b/src/components/layout/BrandPill.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+
 import { Icon, Icons } from "@/components/Icon";

 export function BrandPill(props: {
--- a/src/components/layout/ErrorBoundary.tsx
+++ b/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: {
--- a/src/components/layout/Modal.tsx
+++ b/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>
  );
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -1,9 +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 { conf } from "@/setup/config";
 import { useBannerSize } from "@/hooks/useBanner";
+import { conf } from "@/setup/config";
+import SettingsModal from "@/views/SettingsModal";
+
 import { BrandPill } from "./BrandPill";

 export interface NavigationProps {
@@ -13,7 +16,7 @@ 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-20 min-h-[150px] bg-gradient-to-b from-denim-300 via-denim-300 to-transparent sm:from-transparent"
@@ -21,7 +24,7 @@ export function Navigation(props: NavigationProps) {
        top: `${bannerHeight}px`,
      }}
    >
-      <div className="fixed left-0 right-0 flex items-center justify-between py-5 px-7">
+      <div className="fixed left-0 right-0 flex items-center justify-between px-7 py-5">
        <div
          className={`${
            props.bg ? "opacity-100" : "opacity-0"
@@ -42,6 +45,14 @@ export function Navigation(props: NavigationProps) {
            props.children ? "hidden sm:flex" : "flex"
          } relative flex-row	gap-4`}
        >
+          <IconPatch
+            className="text-2xl text-white"
+            icon={Icons.GEAR}
+            clickable
+            onClick={() => {
+              setShowModal(true);
+            }}
+          />
          <a
            href={conf().DISCORD_LINK}
            target="_blank"
@@ -60,6 +71,7 @@ export function Navigation(props: NavigationProps) {
          </a>
        </div>
      </div>
+      <SettingsModal show={showModal} onClose={() => setShowModal(false)} />
    </div>
  );
 }
--- a/src/components/layout/SectionHeading.tsx
+++ b/src/components/layout/SectionHeading.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+
 import { Icon, Icons } from "@/components/Icon";

 interface SectionHeadingProps {
--- a/src/components/media/EpisodeButton.tsx
+++ b/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}%`,
        }}
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -1,10 +1,12 @@
-import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { DotList } from "@/components/text/DotList";
-import { MWMediaMeta } from "@/backend/metadata/types";
+import { Link } from "react-router-dom";
+
 import { JWMediaToId } from "@/backend/metadata/justwatch";
-import { Icons } from "../Icon";
+import { MWMediaMeta } from "@/backend/metadata/types";
+import { DotList } from "@/components/text/DotList";
+
 import { IconPatch } from "../buttons/IconPatch";
+import { Icons } from "../Icon";

 export interface MediaCardProps {
  media: MWMediaMeta;
@@ -59,7 +61,7 @@ function MediaCardContent({
          {series ? (
            <div
              className={[
-                "absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors",
+                "absolute right-2 top-2 rounded-md bg-denim-200 px-2 py-1 transition-colors",
                closable ? "" : "group-hover:bg-denim-500",
              ].join(" ")}
            >
--- a/src/components/media/WatchedMediaCard.tsx
+++ b/src/components/media/WatchedMediaCard.tsx
@@ -1,6 +1,8 @@
+import { useMemo } from "react";
+
 import { MWMediaMeta } from "@/backend/metadata/types";
 import { useWatchedContext } from "@/state/watched";
-import { useMemo } from "react";
+
 import { MediaCard } from "./MediaCard";

 export interface WatchedMediaCardProps {
--- a/src/components/popout/FloatingCard.tsx
+++ b/src/components/popout/FloatingCard.tsx
@@ -1,11 +1,14 @@
+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 { useSpringValue, animated, easings } from "@react-spring/web";
-import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { Icon, Icons } from "../Icon";
+
 import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
+import { Icon, Icons } from "../Icon";

 interface FloatingCardProps {
  children?: ReactNode;
@@ -133,13 +136,15 @@ export const FloatingCardView = {
    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 || "Go back"}</span>
+        <span>{props.backText || t("videoPlayer.popouts.back")}</span>
      </div>
    );
    if (props.close)
@@ -162,7 +167,7 @@ export const FloatingCardView = {
            <div>{props.action ?? null}</div>
          </div>

-          <h2 className="mt-8 mb-2 text-3xl font-bold text-white">
+          <h2 className="mb-2 mt-8 text-3xl font-bold text-white">
            {props.title}
          </h2>
          <p>{props.description}</p>
--- a/src/components/popout/FloatingContainer.tsx
+++ b/src/components/popout/FloatingContainer.tsx
@@ -1,4 +1,3 @@
-import { Transition } from "@/components/Transition";
 import React, {
  ReactNode,
  useCallback,
@@ -8,6 +7,8 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";

+import { Transition } from "@/components/Transition";
+
 interface Props {
  children?: ReactNode;
  onClose?: () => void;
--- a/src/components/popout/FloatingView.tsx
+++ b/src/components/popout/FloatingView.tsx
@@ -1,6 +1,7 @@
+import { ReactNode } from "react";
+
 import { Transition } from "@/components/Transition";
 import { useIsMobile } from "@/hooks/useIsMobile";
-import { ReactNode } from "react";

 interface Props {
  children?: ReactNode;
@@ -29,6 +30,7 @@ export function FloatingView(props: Props) {
        data-floating-page={props.show ? "true" : undefined}
        style={{
          height: props.height ? `${props.height}px` : undefined,
+          maxHeight: "70vh",
          width: props.width ? width : undefined,
        }}
      >
--- a/src/components/popout/positions/FloatingCardAnchorPosition.tsx
+++ b/src/components/popout/positions/FloatingCardAnchorPosition.tsx
@@ -1,6 +1,7 @@
-import { createFloatingAnchorEvent } from "@/components/popout/FloatingAnchor";
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";

+import { createFloatingAnchorEvent } from "@/components/popout/FloatingAnchor";
+
 interface AnchorPositionProps {
  children?: ReactNode;
  id: string;
--- a/src/components/popout/positions/FloatingCardMobilePosition.tsx
+++ b/src/components/popout/positions/FloatingCardMobilePosition.tsx
@@ -1,4 +1,4 @@
-import { useSpring, animated, config } from "@react-spring/web";
+import { animated, config, useSpring } from "@react-spring/web";
 import { useDrag } from "@use-gesture/react";
 import { ReactNode, useEffect, useRef, useState } from "react";

@@ -21,8 +21,20 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
  }));

  const bind = useDrag(
-    ({ last, velocity: [, vy], direction: [, dy], movement: [, my] }) => {
+    ({
+      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
@@ -69,7 +81,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {

  return (
    <div
-      className="absolute inset-x-0 mx-auto max-w-[400px] origin-bottom-left touch-none"
+      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
--- a/src/components/text/ArrowLink.tsx
+++ b/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 {
--- a/src/hooks/useBanner.tsx
+++ b/src/hooks/useBanner.tsx
@@ -1,12 +1,12 @@
 import {
-  ReactNode,
-  createContext,
-  useState,
-  useMemo,
  Dispatch,
+  ReactNode,
  SetStateAction,
-  useEffect,
+  createContext,
  useContext,
+  useEffect,
+  useMemo,
+  useState,
 } from "react";
 import { useMeasure } from "react-use";

--- a/src/hooks/useChromecastAvailable.ts
+++ b/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);

--- a/src/hooks/useScrape.ts
+++ b/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";

 export interface ScrapeEventLog {
  type: "provider" | "embed";
--- a/src/hooks/useSearchQuery.ts
+++ b/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";
+
 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 };
 }

--- a/src/hooks/useVolumeToggle.ts
+++ b/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);
    }
  };

--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,12 +3,14 @@ import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter, HashRouter } from "react-router-dom";
 import type { ReactNode } from "react-router-dom/node_modules/@types/react/index";
-import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
-import { conf } from "@/setup/config";
 import { registerSW } from "virtual:pwa-register";

+import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
 import App from "@/setup/App";
+import { conf } from "@/setup/config";
+
 import "@/setup/ga";
+import "@/setup/sentry";
 import "@/setup/i18n";
 import "@/setup/index.css";
 import "@/backend";
--- a/src/setup/App.tsx
+++ b/src/setup/App.tsx
@@ -1,20 +1,16 @@
+import { lazy } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
-import { BookmarkContextProvider } from "@/state/bookmark";
-import { WatchedContextProvider } from "@/state/watched";
-import { SettingsProvider } from "@/state/settings";

-import { NotFoundPage } from "@/views/notfound/NotFoundView";
-import { MediaView } from "@/views/media/MediaView";
-import { SearchView } from "@/views/search/SearchView";
 import { MWMediaType } from "@/backend/metadata/types";
-import { V2MigrationView } from "@/views/other/v2Migration";
-import { DeveloperView } from "@/views/developer/DeveloperView";
-import { VideoTesterView } from "@/views/developer/VideoTesterView";
-import { ProviderTesterView } from "@/views/developer/ProviderTesterView";
-import { EmbedTesterView } from "@/views/developer/EmbedTesterView";
 import { BannerContextProvider } from "@/hooks/useBanner";
 import { Layout } from "@/setup/Layout";
-import { TestView } from "@/views/developer/TestView";
+import { BookmarkContextProvider } from "@/state/bookmark";
+import { SettingsProvider } from "@/state/settings";
+import { WatchedContextProvider } from "@/state/watched";
+import { MediaView } from "@/views/media/MediaView";
+import { NotFoundPage } from "@/views/notfound/NotFoundView";
+import { V2MigrationView } from "@/views/other/v2Migration";
+import { SearchView } from "@/views/search/SearchView";

 function App() {
  return (
@@ -44,15 +40,47 @@ function App() {
                />

                {/* other */}
-                <Route exact path="/dev" component={DeveloperView} />
-                <Route exact path="/dev/test" component={TestView} />
-                <Route exact path="/dev/video" component={VideoTesterView} />
                <Route
                  exact
-                  path="/dev/providers"
-                  component={ProviderTesterView}
+                  path="/dev"
+                  component={lazy(
+                    () => import("@/views/developer/DeveloperView")
+                  )}
                />
-                <Route exact path="/dev/embeds" component={EmbedTesterView} />
+                <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>
--- a/src/setup/Layout.tsx
+++ b/src/setup/Layout.tsx
@@ -1,8 +1,9 @@
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
 import { Banner } from "@/components/Banner";
 import { useBannerSize } from "@/hooks/useBanner";
 import { useIsOnline } from "@/hooks/usePing";
-import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";

 export function Layout(props: { children: ReactNode }) {
  const { t } = useTranslation();
--- a/src/setup/config.ts
+++ b/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;
--- a/src/setup/constants.ts
+++ b/src/setup/constants.ts
@@ -2,3 +2,5 @@ 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 GA_ID = "G-44YVXRL61C";
+export const SENTRY_DSN =
+  "https://b267ab7d52674c23af4e4e6cf2956251@o4505053491167232.ingest.sentry.io/4505053495296000";
--- a/src/setup/ga.ts
+++ b/src/setup/ga.ts
@@ -1,4 +1,5 @@
 import ReactGA from "react-ga4";
+
 import { GA_ID } from "@/setup/constants";

 ReactGA.initialize([
--- a/src/setup/i18n.ts
+++ b/src/setup/i18n.ts
@@ -1,30 +1,54 @@
 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 nl from "./locales/nl/translation.json";
+import tr from "./locales/tr/translation.json";
+import zh from "./locales/zh/translation.json";

+const locales = {
+  en: {
+    translation: en,
+  },
+  nl: {
+    translation: nl,
+  },
+  tr: {
+    translation: tr,
+  },
+  fr: {
+    translation: fr,
+  },
+  de: {
+    translation: de,
+  },
+  zh: {
+    translation: zh,
+  },
+  cs: {
+    translation: cs,
+  },
+};
 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;
--- a/src/setup/index.css
+++ b/src/setup/index.css
@@ -38,6 +38,7 @@ body[data-no-select] {
  from {
    transform: rotate(0deg);
  }
+
  to {
    transform: rotate(360deg);
  }
@@ -55,6 +56,10 @@ body[data-no-select] {
  @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 {
@@ -62,6 +67,7 @@ https://toughengineer.github.io/demo/slider-styler*/
  --slider-border-radius: 1em;
  --slider-progress-background: #8652bb;
 }
+
 input[type=range].styled-slider {
  height: var(--slider-height);
  -webkit-appearance: none;
@@ -101,7 +107,7 @@ input[type=range].styled-slider::-webkit-slider-thumb:hover {
 }

 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;
+  background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
 }

 /*mozilla*/
@@ -127,7 +133,7 @@ input[type=range].styled-slider::-moz-range-thumb:hover {
 }

 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;
+  background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
 }

 /*ms*/
@@ -172,4 +178,4 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  background: var(--slider-progress-background);
  border: none;
  border-right-width: 0;
-}
+}
--- a/src/setup/iso6391.ts
+++ b/src/setup/iso6391.ts
--- a/src/setup/locales/cs/translation.json
+++ b/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í"
+  }
+}
--- a/src/setup/locales/de/translation.json
+++ b/src/setup/locales/de/translation.json
@@ -0,0 +1,127 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Auf der Suche nach Ihrer Lieblingsserie...",
+    "loading_movie": "Auf der Suche nach Ihren 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 sehen?",
+    "placeholder": "Was willst du sehen?"
+  },
+  "media": {
+    "movie": "Filme",
+    "series": "Serie",
+    "stopEditing": "Beenden Sie die Bearbeitung",
+    "errors": {
+      "genericTitle": "Hoppla, etwas ist falsch gegangen!",
+      "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": "Forschen"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Auf der Suche nach dem besten Video für Sie",
+    "noVideos": "Entschuldigung, wir konnten keine Videos für Sie finden",
+    "loading": "Wird geladen...",
+    "backToHome": "Zurück zur Startseite",
+    "backToHomeShort": "Rückmeldung",
+    "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "{{timeLeft}} bleibt",
+    "finishAt": "Ende 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": "Saison",
+      "captions": "Untertitel",
+      "playbackSpeed": "Lesegeschwindigkeit",
+      "customPlaybackSpeed": "Benutzerdefinierte Wiedergabegeschwindigkeit",
+      "captionPreferences": {
+        "title": "Personifizieren",
+        "delay": "Zeitlimit",
+        "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öchten Sie nutzen?",
+        "embeds": "Wählen Sie das Video aus, das Sie ansehen möchten",
+        "seasons": "Wählen Sie die Staffel aus, die Sie sehen möchten",
+        "episode": "Wählen Sie eine Folge aus",
+        "captions": "Wählen Sie eine Untertitelsprache",
+        "captionPreferences": "Passen Sie das Erscheinungsbild von Untertiteln an",
+        "playbackSpeed": "Wiedergabegeschwindigkeit ändern"
+      }
+    },
+    "errors": {
+      "fatalError": "Der Videoplayer hat einen Fehler festgestellt, bitte melden Sie 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 Ihnen das gefällt, was wir in den letzten Monaten vorbereitet haben.",
+    "leaveAnnouncement": "Bring mich dahin!"
+  },
+  "casting": {
+    "casting": "An Gerät übertragen..."
+  },
+  "errors": {
+    "offline": "Ihre Internetverbindung ist instabil"
+  }
+}
--- a/src/setup/locales/en/translation.json
+++ b/src/setup/locales/en/translation.json
@@ -57,18 +57,24 @@
    "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",
      "download": "Download",
      "settings": "Settings",
-      "pictureInPicture": "Picture in Picture"
+      "pictureInPicture": "Picture in Picture",
+      "playbackSpeed": "Playback speed"
    },
    "popouts": {
+      "back": "Go back",
      "sources": "Sources",
      "seasons": "Seasons",
      "captions": "Captions",
+      "playbackSpeed": "Playback speed",
+      "customPlaybackSpeed": "Custom playback speed",
      "captionPreferences": {
        "title": "Customize",
        "delay": "Delay",
@@ -80,8 +86,9 @@
      "noCaptions": "No captions",
      "linkedCaptions": "Linked captions",
      "customCaption": "Custom caption",
-      "uploadCustomCaption": "Upload caption (SRT, VTT)",
+      "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"
@@ -92,13 +99,19 @@
        "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"
+        "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",
--- a/src/setup/locales/fr/translation.json
+++ b/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"
+  }
+}
--- a/src/setup/locales/nl/translation.json
+++ b/src/setup/locales/nl/translation.json
@@ -0,0 +1,128 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "We zoeken je favoriete series...",
+    "loading_movie": "We zoeken je favoriete films...",
+    "loading": "Aan het zoeken...",
+    "allResults": "Dat is het!",
+    "noResults": "We konden helaas niets vinden.",
+    "allFailed": "Het is niet gelukt de media te laden, probeer het nog eens.",
+    "headingTitle": "Zoekresultaten",
+    "bookmarks": "Opgeslagen",
+    "continueWatching": "Kijk verder",
+    "title": "Wat wil je graag kijken?",
+    "placeholder": "Wat wil je graag kijken?"
+  },
+  "media": {
+    "movie": "Film",
+    "series": "Serie",
+    "stopEditing": "Stop met bewerken",
+    "errors": {
+      "genericTitle": "Oeps, hier ging iets mis!",
+      "failedMeta": "Het is niet gelukt de meta-informatie op te halen/",
+      "mediaFailed": "Het is niet gelukt deze media op te halen. Controleer of je een internetverbinding hebt en probeer het nog een keer.",
+      "videoFailed": "Er ging iets mis tijdens het spelen van deze video. Als dit blijft gebeuren, deel het dan in de <0>Discord server</0> of maak een <1>GitHub issue</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} A{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Pagina niet gevonden",
+    "backArrow": "Naar de home-pagina",
+    "media": {
+      "title": "We konden deze media niet vinden.",
+      "description": "We konden dit stukje media niet vinden. Het is mogelijk verwijderd, of jij hebt zelf de URL aangepast."
+    },
+    "provider": {
+      "title": "Deze bron is niet langer beschikbaar",
+      "description": "Deze bron was helaas te instabiel, we hebben hem jammer genoeg uit moeten zetten."
+    },
+    "page": {
+      "title": "Pagina niet gevonden",
+      "description": "We hebben echt alles geprobeerd, zelfs tijdrijzen; echter hebben we deze pagina helaas niet kunnen vinden."
+    }
+  },
+  "searchBar": {
+    "movie": "Films",
+    "series": "Series",
+    "Search": "Zoeken"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "De beste video voor jou aan het zoeken...",
+    "noVideos": "Helaas konden we dat filmpje niet vinden",
+    "loading": "Aan het laden...",
+    "backToHome": "Naar de home-pagina",
+    "backToHomeShort": "Terug",
+    "seasonAndEpisode": "S{{season}} A{{episode}}",
+    "timeLeft": "Nog {{timeLeft}}",
+    "finishAt": "Afgelopen om {{timeFinished, datetime}}",
+    "buttons": {
+      "episodes": "Afleveringen",
+      "source": "Bron",
+      "captions": "Ondertiteling",
+      "download": "Download",
+      "settings": "Instellingen",
+      "pictureInPicture": "Beeld-in-beeld",
+      "playbackSpeed": "Afspeelsnelheid"
+    },
+    "popouts": {
+      "back": "Terug",
+      "sources": "Bronnen",
+      "seasons": "Seizoenen",
+      "captions": "Ondertiteling",
+      "playbackSpeed": "Afspeelsnelheid",
+      "customPlaybackSpeed": "Andere snelheden",
+      "captionPreferences": {
+        "title": "Instellingen",
+        "delay": "Vertraging",
+        "fontSize": "Lettergrootte",
+        "opacity": "Doorzichtbaarheid",
+        "color": "Kleur"
+      },
+      "episode": "A{{index}} - {{title}}",
+      "noCaptions": "Geen ondertiteling",
+      "linkedCaptions": "Gelinkte ondertiteling",
+      "customCaption": "Eigen ondertiteling",
+      "uploadCustomCaption": "Ondertiteling uploaden",
+      "noEmbeds": "We hebben geen filmpjes kunnen vinden voor deze bron.",
+
+      "errors": {
+        "loadingWentWong": "Er ging iets mis tijdens het laden van de afleveringen voor {{seasonTitle}}",
+        "embedsError": "Er ging iets mis tijdens het laden van de embeds voor dit dingetje dat je waarschijnlijk leuk vindt"
+      },
+      "descriptions": {
+        "sources": "Welke bron wil je graag gebruiken",
+        "embeds": "Welk filmpje wil je gebruiken?",
+        "seasons": "Welk seizoen wil je kijken?",
+        "episode": "Kies een aflevering",
+        "captions": "Kies een taal voor de ondertiteling",
+        "captionPreferences": "Pas de ondertiteling aan aan je voorkeuren",
+        "playbackSpeed": "Pas de afspeelsnelhijd aan"
+      }
+    },
+    "errors": {
+      "fatalError": "De videospeler is helaas ontploft, rapporteer deze fout op de <0>Discord server</0> of op <1>GitHub</1>."
+    }
+  },
+  "settings": {
+    "title": "Instellingen",
+    "language": "Taal",
+    "captionLanguage": "Taal voor de Ondertiteling"
+  },
+  "v3": {
+    "newSiteTitle": "De nieuwe versie is uit!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "We gaan binnenkort verhuizen naar een nieuw domein: <0>https://movie-web.app</0>. Pas je bladwijzers aan naar het nieuwe domein, want </b>het oude domein gaat stoppen met werken op {{date}}.</b>",
+    "tireless": "We hebben mega hard gewerkt aan deze nieuwe versie, dus we hopen dat je er van gaat genieten.",
+    "leaveAnnouncement": "Let's go!"
+  },
+  "casting": {
+    "casting": "Aan het casten..."
+  },
+  "errors": {
+    "offline": "Controleer je internetverbinding"
+  }
+}
--- a/src/setup/locales/tr/translation.json
+++ b/src/setup/locales/tr/translation.json
@@ -0,0 +1,128 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Favori dizileriniz aranıyor...",
+    "loading_movie": "Favori filmleriniz aranıyor...",
+    "loading": "Yükleniyor...",
+    "allResults": "Bu kadarını bulabildik!",
+    "noResults": "Hiçbir şey bulamadık!",
+    "allFailed": "Medya bulunamadı, tekrar deneyin!",
+    "headingTitle": "Arama sonuçları",
+    "bookmarks": "Yerimleri",
+    "continueWatching": "İzlemeye devam edin",
+    "title": "Ne izlemek istersiniz?",
+    "placeholder": "Ne izlemek istersiniz?"
+  },
+  "media": {
+    "movie": "Film",
+    "series": "Dizi",
+    "stopEditing": "Düzenlemeyi durdur",
+    "errors": {
+      "genericTitle": "Hay aksi, bozuldu!",
+      "failedMeta": "Önbilgi yüklenemedi",
+      "mediaFailed": "İstediğiniz medyaya istek atarken hata oluştu, internet bağlantınızı kontrol edin ve tekrar deneyin.",
+      "videoFailed": "İstediğiniz videoyu oynatırken bir sorunla karşılaştık. Bu durum devam ederse lütfen bunu <0>Discord sunucumuza</0> veya <1>GitHub</1> üzerinden bildiriniz."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} B{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Bulunamadı",
+    "backArrow": "Geri",
+    "media": {
+      "title": "Medya bulunamadı",
+      "description": "İstediğiniz medyayı bulamadık. URL'i yanlış girdiniz ya da medya kaldırıldı."
+    },
+    "provider": {
+      "title": "Bu sağlayıcı devre dışı bırakıldı",
+      "description": "Sağlayıcı ile ilgili bir sorun oluştu ya da kullanılacak kadar stabil değildi bu yüzden devre dışı bırakmak zorunda kaldık."
+    },
+    "page": {
+      "title": "Sayfa bulunamadı",
+      "description": "Her yere baktık: bazanın altına, dolabın içine hatta ara sunucuya ama maalesef aradığınız sayfayı bulamadık."
+    }
+  },
+  "searchBar": {
+    "movie": "Film",
+    "series": "Dizi",
+    "Search": "Ara"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Sizin için en iyi videoyu buluyoruz...",
+    "noVideos": "Hay aksi, hiçbir video bulamadık",
+    "loading": "Yükleniyor...",
+    "backToHome": "Ana sayfaya dön",
+    "backToHomeShort": "Geri",
+    "seasonAndEpisode": "S{{season}} B{{episode}}",
+    "timeLeft": "{{timeLeft}} kaldı",
+    "finishAt": "{{timeFinished, datetime}}'de/da bitiyor",
+    "buttons": {
+      "episodes": "Bölümler",
+      "source": "Kaynak",
+      "captions": "Altyazılar",
+      "download": "İndir",
+      "settings": "Ayarlar",
+      "pictureInPicture": "Resim içinde Resim",
+      "playbackSpeed": "Oynatma Hızı"
+    },
+    "popouts": {
+      "back": "Geri git",
+      "sources": "Kaynaklar",
+      "seasons": "Sezonlar",
+      "captions": "Altyazılar",
+      "playbackSpeed": "Oynatma hızı",
+      "customPlaybackSpeed": "Özel oynatma hızı",
+      "captionPreferences": {
+        "title": "Kişiselleştirme",
+        "delay": "Gecikme",
+        "fontSize": "Boyut",
+        "opacity": "Opaklık",
+        "color": "Renk"
+      },
+      "episode": "B{{index}} - {{title}}",
+      "noCaptions": "Altyazı yok",
+      "linkedCaptions": "Kaynak Altyazıları",
+      "customCaption": "Özel altyazı",
+      "uploadCustomCaption": "Altyazı yükle",
+      "noEmbeds": "Bu kaynak için gömülü video bulunamadı",
+
+      "errors": {
+        "loadingWentWong": "{{seasonTitle}} için bölümler yüklenirken bir hata oluştu",
+        "embedsError": "İstediğiniz şey için gömülü video bulunurken bir hata oluştu"
+      },
+      "descriptions": {
+        "sources": "Hangi sağlayıcıyı kullanmak istersiniz?",
+        "embeds": "Görüntülemek istediğiniz videoyu seçiniz",
+        "seasons": "İzlemek istediğiniz sezonu seçiniz",
+        "episode": "Bir bölüm seçiniz",
+        "captions": "Altyazı dili seçiniz",
+        "captionPreferences": "Altyazıları istediğiniz gibi ayarlayın",
+        "playbackSpeed": "Oynatma hızınızı değiştirin"
+      }
+    },
+    "errors": {
+      "fatalError": "Video oynatıcıda bir hata oluştu, lütfen bunu <0>Discord sunucumuzda</0> ya da <1>GitHub</1> üzeriden bildiriniz."
+    }
+  },
+  "settings": {
+    "title": "Ayarlar",
+    "language": "Dil",
+    "captionLanguage": "Altyazı Dili"
+  },
+  "v3": {
+    "newSiteTitle": "Yeni sürüm yayınlandı!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web yakında yeni bir alan adına taşınacak: <0>https://movie-web.app</0>. <1>{{date}} tarihinde eski site çalışmayacağı için</1> yerimlerinizi güncellemeyi unutmayın.",
+    "tireless": "Bu yeni güncelleme için gece gündüz çalıştık, umarız aylardan beri hazırladığımız bu güncellemeyi beğenirsiniz.",
+    "leaveAnnouncement": "Götür beni!"
+  },
+  "casting": {
+    "casting": "Cihaza aktarılıyor..."
+  },
+  "errors": {
+    "offline": "İnternet bağlantınızı kontrol ediniz"
+  }
+}
--- a/src/setup/locales/zh/translation.json
+++ b/src/setup/locales/zh/translation.json
@@ -0,0 +1,127 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "正在获取您最喜欢的连续剧……",
+    "loading_movie": "正在获取您最喜欢的影片……",
+    "loading": "载入中……",
+    "allResults": "以上是我们能找到的所有结果！",
+    "noResults": "我们找不到任何结果！",
+    "allFailed": "查找媒体失败，请重试！",
+    "headingTitle": "搜索结果",
+    "bookmarks": "书签",
+    "continueWatching": "继续观看",
+    "title": "您想看些什么？",
+    "placeholder": "您想看些什么？"
+  },
+  "media": {
+    "movie": "电影",
+    "series": "连续剧",
+    "stopEditing": "退出编辑",
+    "errors": {
+      "genericTitle": "哎呀，出问题了！",
+      "failedMeta": "加载元数据失败",
+      "mediaFailed": "我们未能请求到您要求的媒体，检查互联网连接并重试。",
+      "videoFailed": "我们在播放您要求的视频时遇到了错误。如果错误持续发生，请向 <0>Discord 服务器</0>或 <1>GitHub</1> 提交问题报告。"
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "第{{season}}季 第{{episode}}集"
+  },
+  "notFound": {
+    "genericTitle": "未找到",
+    "backArrow": "返回首页",
+    "media": {
+      "title": "无法找到媒体",
+      "description": "我们无法找到您请求的媒体。它可能已被删除，或您篡改了 URL"
+    },
+    "provider": {
+      "title": "该内容提供者已被停用",
+      "description": "我们的提供者出现问题，或是太不稳定，导致无法使用，所以我们不得不将其停用。"
+    },
+    "page": {
+      "title": "无法找到页面",
+      "description": "我们已经到处找过了：不管是垃圾桶下、橱柜里或是代理之后。但最终并没有发现您查找的页面。"
+    }
+  },
+  "searchBar": {
+    "movie": "电影",
+    "series": "连续剧",
+    "Search": "搜索"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "正在为您探测最佳视频",
+    "noVideos": "哎呀，无法为您找到任何视频",
+    "loading": "载入中……",
+    "backToHome": "返回首页",
+    "backToHomeShort": "返回",
+    "seasonAndEpisode": "第{{season}}季 第{{episode}}集",
+    "timeLeft": "还剩余 {{timeLeft}}",
+    "finishAt": "在 {{timeFinished, datetime}} 结束",
+    "buttons": {
+      "episodes": "分集",
+      "source": "视频源",
+      "captions": "字幕",
+      "download": "下载",
+      "settings": "设置",
+      "pictureInPicture": "画中画",
+      "playbackSpeed": "播放速度"
+    },
+    "popouts": {
+      "back": "返回",
+      "sources": "视频源",
+      "seasons": "分季",
+      "captions": "字幕",
+      "playbackSpeed": "播放速度",
+      "customPlaybackSpeed": "自定义播放速度",
+      "captionPreferences": {
+        "title": "自定义",
+        "delay": "延迟",
+        "fontSize": "尺寸",
+        "opacity": "透明度",
+        "color": "颜色"
+      },
+      "episode": "第{{index}}集 - {{title}}",
+      "noCaptions": "没有字幕",
+      "linkedCaptions": "已链接字幕",
+      "customCaption": "自定义字幕",
+      "uploadCustomCaption": "上传字幕",
+      "noEmbeds": "未发现该视频源的嵌入内容",
+      "errors": {
+        "loadingWentWong": "加载 {{seasonTitle}} 的分集时出现了一些问题",
+        "embedsError": "为您喜欢的这一东西加载嵌入内容时出现了一些问题"
+      },
+      "descriptions": {
+        "sources": "您想使用哪个内容提供者？",
+        "embeds": "选择要观看的视频",
+        "seasons": "选择您要观看的季",
+        "episode": "选择一个分集",
+        "captions": "选择字幕语言",
+        "captionPreferences": "让字幕看起来如您所想",
+        "playbackSpeed": "改变播放速度"
+      }
+    },
+    "errors": {
+      "fatalError": "视频播放器遇到致命错误，请向 <0>Discord 服务器</0>或 <1>GitHub</1> 报告。"
+    }
+  },
+  "settings": {
+    "title": "设置",
+    "language": "语言",
+    "captionLanguage": "字幕语言"
+  },
+  "v3": {
+    "newSiteTitle": "新的版本现已发布！",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web 将很快转移到新的域名：<0>https://movie-web.app</0>。请确保已经更新全部书签链接，<1>旧网站将于 {{date}} 停止工作。</1>",
+    "tireless": "为了这一新版本，我们不懈努力，希望您会喜欢我们在过去几个月中所做的一切。",
+    "leaveAnnouncement": "请带我去！"
+  },
+  "casting": {
+    "casting": "正在投射到设备……"
+  },
+  "errors": {
+    "offline": "检查您的互联网连接"
+  }
+}
--- a/src/setup/sentry.tsx
+++ b/src/setup/sentry.tsx
@@ -0,0 +1,16 @@
+import { CaptureConsole, HttpClient } from "@sentry/integrations";
+import * as Sentry from "@sentry/react";
+
+import { conf } from "@/setup/config";
+import { SENTRY_DSN } from "@/setup/constants";
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  release: `movie-web@${conf().APP_VERSION}`,
+  sampleRate: 0.5,
+  integrations: [
+    new Sentry.BrowserTracing(),
+    new CaptureConsole(),
+    new HttpClient(),
+  ],
+});
--- a/src/state/bookmark/context.tsx
+++ b/src/state/bookmark/context.tsx
@@ -1,6 +1,8 @@
+import { ReactNode, createContext, useContext, useMemo } from "react";
+
 import { MWMediaMeta } from "@/backend/metadata/types";
 import { useStore } from "@/utils/storage";
-import { createContext, ReactNode, useContext, useMemo } from "react";
+
 import { BookmarkStore } from "./store";
 import { BookmarkStoreData } from "./types";

--- a/src/state/bookmark/store.ts
+++ b/src/state/bookmark/store.ts
@@ -1,6 +1,7 @@
 import { createVersionedStore } from "@/utils/storage";
-import { migrateV1Bookmarks, OldBookmarks } from "../watched/migrations/v2";
+
 import { BookmarkStoreData } from "./types";
+import { OldBookmarks, migrateV1Bookmarks } from "../watched/migrations/v2";

 export const BookmarkStore = createVersionedStore<BookmarkStoreData>()
  .setKey("mw-bookmarks")
--- a/src/state/settings/context.tsx
+++ b/src/state/settings/context.tsx
@@ -1,14 +1,18 @@
+import { ReactNode, createContext, useContext, useMemo } from "react";
+
+import { LangCode } from "@/setup/iso6391";
 import { useStore } from "@/utils/storage";
-import { createContext, ReactNode, useContext, useMemo } from "react";
+
 import { SettingsStore } from "./store";
 import { MWSettingsData } from "./types";

 interface MWSettingsDataSetters {
-  setLanguage(language: string): void;
+  setLanguage(language: LangCode): void;
+  setCaptionLanguage(language: LangCode): void;
  setCaptionDelay(delay: number): void;
  setCaptionColor(color: string): void;
  setCaptionFontSize(size: number): void;
-  setCaptionBackgroundColor(backgroundColor: string): void;
+  setCaptionBackgroundColor(backgroundColor: number): void;
 }
 type MWSettingsDataWrapper = MWSettingsData & MWSettingsDataSetters;
 const SettingsContext = createContext<MWSettingsDataWrapper>(null as any);
@@ -17,7 +21,6 @@ export function SettingsProvider(props: { children: ReactNode }) {
    return Math.max(min, Math.min(value, max));
  }
  const [settings, setSettings] = useStore(SettingsStore);
-
  const context: MWSettingsDataWrapper = useMemo(() => {
    const settingsContext: MWSettingsDataWrapper = {
      ...settings,
@@ -29,6 +32,14 @@ export function SettingsProvider(props: { children: ReactNode }) {
          };
        });
      },
+      setCaptionLanguage(language) {
+        setSettings((oldSettings) => {
+          const captionSettings = oldSettings.captionSettings;
+          captionSettings.language = language;
+          const newSettings = oldSettings;
+          return newSettings;
+        });
+      },
      setCaptionDelay(delay: number) {
        setSettings((oldSettings) => {
          const captionSettings = oldSettings.captionSettings;
@@ -56,7 +67,10 @@ export function SettingsProvider(props: { children: ReactNode }) {
      setCaptionBackgroundColor(backgroundColor) {
        setSettings((oldSettings) => {
          const style = oldSettings.captionSettings.style;
-          style.backgroundColor = backgroundColor;
+          style.backgroundColor = `${style.backgroundColor.substring(
+            0,
+            7
+          )}${backgroundColor.toString(16).padStart(2, "0")}`;
          const newSettings = oldSettings;
          return newSettings;
        });
--- a/src/state/settings/store.ts
+++ b/src/state/settings/store.ts
@@ -1,11 +1,12 @@
 import { createVersionedStore } from "@/utils/storage";
-import { MWSettingsData } from "./types";
+
+import { MWSettingsData, MWSettingsDataV1 } from "./types";

 export const SettingsStore = createVersionedStore<MWSettingsData>()
  .setKey("mw-settings")
  .addVersion({
    version: 0,
-    create(): MWSettingsData {
+    create(): MWSettingsDataV1 {
      return {
        language: "en",
        captionSettings: {
@@ -18,5 +19,31 @@ export const SettingsStore = createVersionedStore<MWSettingsData>()
        },
      };
    },
+    migrate(data: MWSettingsDataV1): MWSettingsData {
+      return {
+        language: data.language,
+        captionSettings: {
+          language: "none",
+          ...data.captionSettings,
+        },
+      };
+    },
+  })
+  .addVersion({
+    version: 1,
+    create(): MWSettingsData {
+      return {
+        language: "en",
+        captionSettings: {
+          delay: 0,
+          language: "none",
+          style: {
+            color: "#ffffff",
+            fontSize: 25,
+            backgroundColor: "#00000096",
+          },
+        },
+      };
+    },
  })
  .build();
--- a/src/state/settings/types.ts
+++ b/src/state/settings/types.ts
@@ -1,3 +1,5 @@
+import { LangCode } from "@/setup/iso6391";
+
 export interface CaptionStyleSettings {
  color: string;
  /**
@@ -7,7 +9,7 @@ export interface CaptionStyleSettings {
  backgroundColor: string;
 }

-export interface CaptionSettings {
+export interface CaptionSettingsV1 {
  /**
   * Range is [-10, 10]s
   */
@@ -15,7 +17,20 @@ export interface CaptionSettings {
  style: CaptionStyleSettings;
 }

+export interface CaptionSettings {
+  language: LangCode;
+  /**
+   * Range is [-10, 10]s
+   */
+  delay: number;
+  style: CaptionStyleSettings;
+}
+export interface MWSettingsDataV1 {
+  language: LangCode;
+  captionSettings: CaptionSettingsV1;
+}
+
 export interface MWSettingsData {
-  language: string;
+  language: LangCode;
  captionSettings: CaptionSettings;
 }
--- a/src/state/watched/context.tsx
+++ b/src/state/watched/context.tsx
@@ -1,16 +1,18 @@
-import { DetailedMeta } from "@/backend/metadata/getmeta";
-import { MWMediaType } from "@/backend/metadata/types";
-import { useStore } from "@/utils/storage";
 import {
-  createContext,
  ReactNode,
+  createContext,
  useCallback,
  useContext,
  useMemo,
  useRef,
 } from "react";
+
+import { DetailedMeta } from "@/backend/metadata/getmeta";
+import { MWMediaType } from "@/backend/metadata/types";
+import { useStore } from "@/utils/storage";
+
 import { VideoProgressStore } from "./store";
-import { StoreMediaItem, WatchedStoreItem, WatchedStoreData } from "./types";
+import { StoreMediaItem, WatchedStoreData, WatchedStoreItem } from "./types";

 const FIVETEEN_MINUTES = 15 * 60;
 const FIVE_MINUTES = 5 * 60;
--- a/src/state/watched/migrations/v2.ts
+++ b/src/state/watched/migrations/v2.ts
@@ -2,6 +2,7 @@ import { DetailedMeta, getMetaFromId } from "@/backend/metadata/getmeta";
 import { searchForMedia } from "@/backend/metadata/search";
 import { MWMediaMeta, MWMediaType } from "@/backend/metadata/types";
 import { compareTitle } from "@/utils/titleMatch";
+
 import { WatchedStoreData, WatchedStoreItem } from "../types";

 interface OldMediaBase {
--- a/src/state/watched/store.ts
+++ b/src/state/watched/store.ts
@@ -1,5 +1,6 @@
 import { createVersionedStore } from "@/utils/storage";
-import { migrateV2Videos, OldData } from "./migrations/v2";
+
+import { OldData, migrateV2Videos } from "./migrations/v2";
 import { WatchedStoreData } from "./types";

 export const VideoProgressStore = createVersionedStore<WatchedStoreData>()
--- a/src/video/components/VideoPlayer.tsx
+++ b/src/video/components/VideoPlayer.tsx
@@ -1,36 +1,39 @@
+import { ReactNode, useCallback, useState } from "react";
+
 import { Transition } from "@/components/Transition";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { AirplayAction } from "@/video/components/actions/AirplayAction";
 import { BackdropAction } from "@/video/components/actions/BackdropAction";
+import { CastingTextAction } from "@/video/components/actions/CastingTextAction";
+import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
 import { FullscreenAction } from "@/video/components/actions/FullscreenAction";
 import { HeaderAction } from "@/video/components/actions/HeaderAction";
+import { KeyboardShortcutsAction } from "@/video/components/actions/KeyboardShortcutsAction";
 import { LoadingAction } from "@/video/components/actions/LoadingAction";
 import { MiddlePauseAction } from "@/video/components/actions/MiddlePauseAction";
 import { MobileCenterAction } from "@/video/components/actions/MobileCenterAction";
 import { PageTitleAction } from "@/video/components/actions/PageTitleAction";
 import { PauseAction } from "@/video/components/actions/PauseAction";
+import { PictureInPictureAction } from "@/video/components/actions/PictureInPictureAction";
 import { ProgressAction } from "@/video/components/actions/ProgressAction";
 import { SeriesSelectionAction } from "@/video/components/actions/SeriesSelectionAction";
 import { ShowTitleAction } from "@/video/components/actions/ShowTitleAction";
-import { KeyboardShortcutsAction } from "@/video/components/actions/KeyboardShortcutsAction";
 import { SkipTimeAction } from "@/video/components/actions/SkipTimeAction";
 import { TimeAction } from "@/video/components/actions/TimeAction";
 import { VolumeAction } from "@/video/components/actions/VolumeAction";
 import { VideoPlayerError } from "@/video/components/parts/VideoPlayerError";
+import { PopoutProviderAction } from "@/video/components/popouts/PopoutProviderAction";
 import {
  VideoPlayerBase,
  VideoPlayerBaseProps,
 } from "@/video/components/VideoPlayerBase";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
-import { ReactNode, useCallback, useState } from "react";
-import { PopoutProviderAction } from "@/video/components/popouts/PopoutProviderAction";
-import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
-import { CastingTextAction } from "@/video/components/actions/CastingTextAction";
-import { PictureInPictureAction } from "@/video/components/actions/PictureInPictureAction";
+
 import { CaptionRendererAction } from "./actions/CaptionRendererAction";
-import { SettingsAction } from "./actions/SettingsAction";
 import { DividerAction } from "./actions/DividerAction";
+import { SettingsAction } from "./actions/SettingsAction";
+import { VolumeAdjustedAction } from "./actions/VolumeAdjustedAction";

 type Props = VideoPlayerBaseProps;

@@ -91,6 +94,7 @@ export function VideoPlayer(props: Props) {
        <>
          <KeyboardShortcutsAction />
          <PageTitleAction />
+          <VolumeAdjustedAction />
          <VideoPlayerError onGoBack={props.onGoBack}>
            <BackdropAction onBackdropChange={onBackdropChange}>
              <CenterPosition>
@@ -116,7 +120,7 @@ export function VideoPlayer(props: Props) {
              <Transition
                animation="slide-down"
                show={show}
-                className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2"
+                className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2"
              >
                <HeaderAction
                  showControls={isMobile}
--- a/src/video/components/VideoPlayerBase.tsx
+++ b/src/video/components/VideoPlayerBase.tsx
@@ -1,15 +1,17 @@
+import { useRef } from "react";
+
 import { CastingInternal } from "@/video/components/internal/CastingInternal";
 import { WrapperRegisterInternal } from "@/video/components/internal/WrapperRegisterInternal";
 import { VideoErrorBoundary } from "@/video/components/parts/VideoErrorBoundary";
 import { useInterface } from "@/video/state/logic/interface";
 import { useMeta } from "@/video/state/logic/meta";
-import { useRef } from "react";
-import {
-  useVideoPlayerDescriptor,
-  VideoPlayerContextProvider,
-} from "../state/hooks";
+
 import { MetaAction } from "./actions/MetaAction";
 import { VideoElementInternal } from "./internal/VideoElementInternal";
+import {
+  VideoPlayerContextProvider,
+  useVideoPlayerDescriptor,
+} from "../state/hooks";

 export interface VideoPlayerBaseProps {
  children?:
--- a/src/video/components/actions/AirplayAction.tsx
+++ b/src/video/components/actions/AirplayAction.tsx
@@ -1,8 +1,10 @@
+import { useCallback } from "react";
+
 import { Icons } from "@/components/Icon";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useMisc } from "@/video/state/logic/misc";
-import { useCallback } from "react";
+
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";

 interface Props {
--- a/src/video/components/actions/BackdropAction.tsx
+++ b/src/video/components/actions/BackdropAction.tsx
@@ -1,8 +1,9 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import React, { useCallback, useEffect, useRef, useState } from "react";

 interface BackdropActionProps {
  children?: React.ReactNode;
@@ -24,18 +25,16 @@ export function BackdropAction(props: BackdropActionProps) {
  const handleMouseMove = useCallback(() => {
    if (!moved) {
      setTimeout(() => {
+        // If NOT a touch, set moved to true
        const isTouch = Date.now() - lastTouchEnd.current < 200;
-        if (!isTouch) {
-          setMoved(true);
-        }
+        if (!isTouch) setMoved(true);
      }, 20);
-      return;
    }

    // remove after all
    if (timeout.current) clearTimeout(timeout.current);
    timeout.current = setTimeout(() => {
-      if (moved) setMoved(false);
+      setMoved(false);
      timeout.current = null;
    }, 3000);
  }, [setMoved, moved]);
--- a/src/video/components/actions/CaptionRendererAction.tsx
+++ b/src/video/components/actions/CaptionRendererAction.tsx
@@ -1,14 +1,16 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useAsync } from "react-use";
+import { ContentCaption } from "subsrt-ts/dist/types/handler";
+
+import { parseSubtitles, sanitize } from "@/backend/helpers/captions";
 import { Transition } from "@/components/Transition";
 import { useSettings } from "@/state/settings";
-import { sanitize } from "@/backend/helpers/captions";
-import { parse, Cue } from "node-webvtt";
-import { useRef } from "react";
-import { useAsync } from "react-use";
+
 import { useVideoPlayerDescriptor } from "../../state/hooks";
 import { useProgress } from "../../state/logic/progress";
 import { useSource } from "../../state/logic/source";

-function CaptionCue({ text }: { text?: string }) {
+export function CaptionCue({ text, scale }: { text?: string; scale?: number }) {
  const { captionSettings } = useSettings();
  const textWithNewlines = (text || "").replaceAll(/\r?\n/g, "<br />");

@@ -25,6 +27,7 @@ function CaptionCue({ text }: { text?: string }) {
      className="pointer-events-none mb-1 select-none rounded px-4 py-1 text-center [text-shadow:0_2px_4px_rgba(0,0,0,0.5)]"
      style={{
        ...captionSettings.style,
+        fontSize: captionSettings.style.fontSize * (scale ?? 1),
      }}
    >
      <span
@@ -47,31 +50,56 @@ export function CaptionRendererAction({
  const descriptor = useVideoPlayerDescriptor();
  const source = useSource(descriptor).source;
  const videoTime = useProgress(descriptor).time;
-  const { captionSettings } = useSettings();
-  const captions = useRef<Cue[]>([]);
+  const { captionSettings, setCaptionDelay } = useSettings();
+  const captions = useRef<ContentCaption[]>([]);
+
+  const captionSetRef = useRef<(delay: number) => void>(setCaptionDelay);
+  useEffect(() => {
+    captionSetRef.current = setCaptionDelay;
+  }, [setCaptionDelay]);

  useAsync(async () => {
-    const url = source?.caption?.url;
-    if (url) {
-      // Is there a better way?
-      const result = await fetch(url);
-      // Uses UTF-8 by default
+    const blobUrl = source?.caption?.url;
+    if (blobUrl) {
+      const result = await fetch(blobUrl);
      const text = await result.text();
-      captions.current = parse(text, { strict: false }).cues;
+      try {
+        captions.current = parseSubtitles(text);
+      } catch (error) {
+        captions.current = [];
+      }
+      // reset delay on every subtitle change
+      setCaptionDelay(0);
    } else {
      captions.current = [];
    }
  }, [source?.caption?.url]);

+  // reset delay when loading new source url
+  useEffect(() => {
+    captionSetRef.current(0);
+  }, [source?.caption?.url]);
+
+  const isVisible = useCallback(
+    (
+      start: number,
+      end: number,
+      delay: number,
+      currentTime: number
+    ): boolean => {
+      const delayedStart = start / 1000 + delay;
+      const delayedEnd = end / 1000 + delay;
+      return (
+        Math.max(0, delayedStart) <= currentTime &&
+        Math.max(0, delayedEnd) >= currentTime
+      );
+    },
+    []
+  );
  if (!captions.current.length) return null;
-  const isVisible = (start: number, end: number): boolean => {
-    const delayedStart = start + captionSettings.delay;
-    const delayedEnd = end + captionSettings.delay;
-    return (
-      Math.max(0, delayedStart) <= videoTime &&
-      Math.max(0, delayedEnd) >= videoTime
-    );
-  };
+  const visibileCaptions = captions.current.filter(({ start, end }) =>
+    isVisible(start, end, captionSettings.delay, videoTime)
+  );
  return (
    <Transition
      className={[
@@ -81,12 +109,9 @@ export function CaptionRendererAction({
      animation="slide-up"
      show
    >
-      {captions.current.map(
-        ({ identifier, end, start, text }) =>
-          isVisible(start, end) && (
-            <CaptionCue key={identifier || `${start}-${end}`} text={text} />
-          )
-      )}
+      {visibileCaptions.map(({ start, end, content }) => (
+        <CaptionCue key={`${start}-${end}`} text={content} />
+      ))}
    </Transition>
  );
 }
--- a/src/video/components/actions/CastingTextAction.tsx
+++ b/src/video/components/actions/CastingTextAction.tsx
@@ -1,7 +1,8 @@
+import { useTranslation } from "react-i18next";
+
 import { Icon, Icons } from "@/components/Icon";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMisc } from "@/video/state/logic/misc";
-import { useTranslation } from "react-i18next";

 export function CastingTextAction() {
  const { t } = useTranslation();
--- a/src/video/components/actions/ChromecastAction.tsx
+++ b/src/video/components/actions/ChromecastAction.tsx
@@ -1,8 +1,9 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
 import { Icons } from "@/components/Icon";
 import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMisc } from "@/video/state/logic/misc";
-import { useCallback, useEffect, useRef, useState } from "react";

 interface Props {
  className?: string;
--- a/src/video/components/actions/DividerAction.tsx
+++ b/src/video/components/actions/DividerAction.tsx
@@ -1,6 +1,6 @@
+import { MWMediaType } from "@/backend/metadata/types";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMeta } from "@/video/state/logic/meta";
-import { MWMediaType } from "@/backend/metadata/types";

 export function DividerAction() {
  const descriptor = useVideoPlayerDescriptor();
--- a/src/video/components/actions/FullscreenAction.tsx
+++ b/src/video/components/actions/FullscreenAction.tsx
@@ -1,9 +1,11 @@
+import { useCallback } from "react";
+
 import { Icons } from "@/components/Icon";
 import { canFullscreen } from "@/utils/detectFeatures";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
-import { useCallback } from "react";
+
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";

 interface Props {
--- a/src/video/components/actions/KeyboardShortcutsAction.tsx
+++ b/src/video/components/actions/KeyboardShortcutsAction.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useRef } from "react";
+
+import { useVolumeControl } from "@/hooks/useVolumeToggle";
+import { getPlayerState } from "@/video/state/cache";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
-import { getPlayerState } from "@/video/state/cache";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 import { useProgress } from "@/video/state/logic/progress";
-import { useVolumeControl } from "@/hooks/useVolumeToggle";

 export function KeyboardShortcutsAction() {
  const descriptor = useVideoPlayerDescriptor();
@@ -60,7 +61,17 @@ export function KeyboardShortcutsAction() {

        // Mute
        case "m":
-          toggleVolume();
+          toggleVolume(true);
+          break;
+
+        // Decrease volume
+        case "arrowdown":
+          controls.setVolume(Math.max(mediaPlaying.volume - 0.1, 0), true);
+          break;
+
+        // Increase volume
+        case "arrowup":
+          controls.setVolume(Math.min(mediaPlaying.volume + 0.1, 1), true);
          break;

        // Do a barrel Roll!
--- a/src/video/components/actions/MetaAction.tsx
+++ b/src/video/components/actions/MetaAction.tsx
@@ -1,9 +1,10 @@
+import { useEffect } from "react";
+
 import { MWCaption } from "@/backend/helpers/streams";
 import { DetailedMeta } from "@/backend/metadata/getmeta";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMeta } from "@/video/state/logic/meta";
 import { useProgress } from "@/video/state/logic/progress";
-import { useEffect } from "react";

 export type WindowMeta = {
  meta: DetailedMeta;
--- a/src/video/components/actions/MiddlePauseAction.tsx
+++ b/src/video/components/actions/MiddlePauseAction.tsx
@@ -1,8 +1,9 @@
+import { useCallback } from "react";
+
 import { Icon, Icons } from "@/components/Icon";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useCallback } from "react";

 export function MiddlePauseAction() {
  const descriptor = useVideoPlayerDescriptor();
--- a/src/video/components/actions/PageTitleAction.tsx
+++ b/src/video/components/actions/PageTitleAction.tsx
@@ -1,5 +1,7 @@
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { Helmet } from "react-helmet";
+
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+
 import { useCurrentSeriesEpisodeInfo } from "../hooks/useCurrentSeriesEpisodeInfo";

 export function PageTitleAction() {
--- a/src/video/components/actions/PauseAction.tsx
+++ b/src/video/components/actions/PauseAction.tsx
@@ -1,8 +1,10 @@
+import { useCallback } from "react";
+
 import { Icons } from "@/components/Icon";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useCallback } from "react";
+
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";

 interface Props {
--- a/src/video/components/actions/PictureInPictureAction.tsx
+++ b/src/video/components/actions/PictureInPictureAction.tsx
@@ -1,13 +1,15 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
 import { Icons } from "@/components/Icon";
 import { useIsMobile } from "@/hooks/useIsMobile";
-import { useTranslation } from "react-i18next";
-import { useControls } from "@/video/state/logic/controls";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useCallback } from "react";
 import {
  canPictureInPicture,
  canWebkitPictureInPicture,
 } from "@/utils/detectFeatures";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useControls } from "@/video/state/logic/controls";
+
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";

 interface Props {
--- a/src/video/components/actions/ProgressAction.tsx
+++ b/src/video/components/actions/ProgressAction.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useRef } from "react";
+
 import {
  makePercentage,
  makePercentageString,
@@ -7,7 +9,6 @@ import { getPlayerState } from "@/video/state/cache";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useProgress } from "@/video/state/logic/progress";
-import { useCallback, useEffect, useRef } from "react";

 export function ProgressAction() {
  const descriptor = useVideoPlayerDescriptor();
--- a/src/video/components/actions/SeriesSelectionAction.tsx
+++ b/src/video/components/actions/SeriesSelectionAction.tsx
@@ -1,12 +1,13 @@
-import { Icons } from "@/components/Icon";
+import { useTranslation } from "react-i18next";
+
 import { MWMediaType } from "@/backend/metadata/types";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMeta } from "@/video/state/logic/meta";
+import { Icons } from "@/components/Icon";
+import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
 import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
-import { useTranslation } from "react-i18next";
-import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
+import { useMeta } from "@/video/state/logic/meta";

 interface Props {
  className?: string;
--- a/src/video/components/actions/SettingsAction.tsx
+++ b/src/video/components/actions/SettingsAction.tsx
@@ -1,11 +1,12 @@
+import { useTranslation } from "react-i18next";
+
 import { Icons } from "@/components/Icon";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
-import { useIsMobile } from "@/hooks/useIsMobile";
-import { useTranslation } from "react-i18next";
-import { FloatingAnchor } from "@/components/popout/FloatingAnchor";

 interface Props {
  className?: string;
--- a/src/video/components/actions/ShowTitleAction.tsx
+++ b/src/video/components/actions/ShowTitleAction.tsx
@@ -1,4 +1,5 @@
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+
 import { useCurrentSeriesEpisodeInfo } from "../hooks/useCurrentSeriesEpisodeInfo";

 export function ShowTitleAction() {
--- a/src/video/components/actions/SkipTimeAction.tsx
+++ b/src/video/components/actions/SkipTimeAction.tsx
@@ -2,6 +2,7 @@ import { Icons } from "@/components/Icon";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useProgress } from "@/video/state/logic/progress";
+
 import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";

 interface Props {
--- a/src/video/components/actions/TimeAction.tsx
+++ b/src/video/components/actions/TimeAction.tsx
@@ -1,6 +1,12 @@
+import { useTranslation } from "react-i18next";
+
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useControls } from "@/video/state/logic/controls";
+import { useInterface } from "@/video/state/logic/interface";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 import { useProgress } from "@/video/state/logic/progress";
+import { VideoPlayerTimeFormat } from "@/video/state/types";

 function durationExceedsHour(secs: number): boolean {
  return secs > 60 * 60;
@@ -37,19 +43,71 @@ export function TimeAction(props: Props) {
  const descriptor = useVideoPlayerDescriptor();
  const videoTime = useProgress(descriptor);
  const mediaPlaying = useMediaPlaying(descriptor);
+  const { setTimeFormat } = useControls(descriptor);
+  const { timeFormat } = useInterface(descriptor);
+  const { isMobile } = useIsMobile();
+  const { t } = useTranslation();

  const hasHours = durationExceedsHour(videoTime.duration);
-  const time = formatSeconds(
+
+  const currentTime = formatSeconds(
    mediaPlaying.isDragSeeking ? videoTime.draggingTime : videoTime.time,
    hasHours
  );
  const duration = formatSeconds(videoTime.duration, hasHours);
+  const remaining = formatSeconds(
+    (videoTime.duration - videoTime.time) / mediaPlaying.playbackSpeed,
+    hasHours
+  );
+  const timeFinished = new Date(
+    new Date().getTime() +
+      ((videoTime.duration - videoTime.time) * 1000) /
+        mediaPlaying.playbackSpeed
+  );
+  const formattedTimeFinished = ` - ${t("videoPlayer.finishAt", {
+    timeFinished,
+    formatParams: {
+      timeFinished: { hour: "numeric", minute: "numeric" },
+    },
+  })}`;
+
+  let formattedTime: string;
+
+  if (timeFormat === VideoPlayerTimeFormat.REGULAR) {
+    formattedTime = `${currentTime} ${props.noDuration ? "" : `/ ${duration}`}`;
+  } else if (timeFormat === VideoPlayerTimeFormat.REMAINING && !isMobile) {
+    formattedTime = `${t("videoPlayer.timeLeft", {
+      timeLeft: remaining,
+    })}${videoTime.time === videoTime.duration ? "" : formattedTimeFinished} `;
+  } else if (timeFormat === VideoPlayerTimeFormat.REMAINING && isMobile) {
+    formattedTime = `-${remaining}`;
+  } else {
+    formattedTime = "";
+  }

  return (
-    <div className={props.className}>
-      <p className="select-none text-white">
-        {time} {props.noDuration ? "" : `/ ${duration}`}
-      </p>
-    </div>
+    <button
+      type="button"
+      className={[
+        "group pointer-events-auto text-white transition-transform duration-100 active:scale-110",
+      ].join(" ")}
+      onClick={() => {
+        setTimeFormat(
+          timeFormat === VideoPlayerTimeFormat.REGULAR
+            ? VideoPlayerTimeFormat.REMAINING
+            : VideoPlayerTimeFormat.REGULAR
+        );
+      }}
+    >
+      <div
+        className={[
+          "flex items-center justify-center rounded-full bg-denim-600 bg-opacity-0 p-2 transition-colors duration-100 group-hover:bg-opacity-50 group-active:bg-denim-500 group-active:bg-opacity-100 sm:px-4",
+        ].join(" ")}
+      >
+        <div className={props.className}>
+          <p className="select-none text-white">{formattedTime}</p>
+        </div>
+      </div>
+    </button>
  );
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
mrjvs	1fd458fa27	Merge pull request #302 from movie-web/dev Version 3.0.15	2023-05-22 19:42:58 +02:00
mrjvs	e4c15c624b	Merge branch 'master' into dev	2023-05-22 19:42:50 +02:00
mrjvs	b12649bd2e	Remove browser language detector, only configurable through settings now	2023-05-22 19:26:57 +02:00
mrjvs	37e10fb40e	bump version 🎉	2023-05-22 19:24:45 +02:00
mrjvs	61b75da402	Merge pull request #292 from Jordaar/dev Add 2embed provider	2023-05-22 19:22:23 +02:00
mrjvs	73b2f57fdc	Merge branch 'dev' into dev	2023-05-22 19:22:00 +02:00
mrjvs	0b8c6439d7	Merge pull request #300 from thehairy/dev fix: move meta id check to providers	2023-05-22 19:18:58 +02:00
mrjvs	4ad0d53683	Merge branch 'dev' into dev	2023-05-22 19:16:54 +02:00
mrjvs	3958df8e29	Merge pull request #301 from lem6ns/dev refactor: use mwFetch instead of proxiedFetch	2023-05-22 19:16:03 +02:00
thehairy	fa36493c50	re-add tmdbId	2023-05-21 21:00:35 +02:00
mrjvs	efd87ab96e	Merge branch 'dev' into dev	2023-05-21 20:47:16 +02:00
cloud	f80d79070e	refactor: use mwFetch instead of proxiedFetch	2023-05-21 11:46:10 -07:00
mrjvs	be7b875666	Merge pull request #299 from lem6ns/dev fix: replace consumet instance	2023-05-21 20:34:31 +02:00
thehairy	bb869fd7e3	fix: move meta id check to providers	2023-05-21 18:12:45 +02:00
cloud	2b30bb0e2b	fix: replace consumet instance	2023-05-21 00:15:11 -07:00
mrjvs	b9448b5231	Merge pull request #250 from frost768/subtitle-file-type-control Subtitle tests and type controls	2023-05-19 19:42:08 +02:00
mrjvs	7a6af6c072	remove unnecesary eslint ignore	2023-05-19 19:41:20 +02:00
frost768	2657d1f856	Merge branch 'subtitle-file-type-control' of https://github.com/frost768/movie-web into subtitle-file-type-control	2023-05-12 22:40:20 +03:00
frost768	21cc8c16d6	Merge branch 'dev' of https://github.com/frost768/movie-web into subtitle-file-type-control	2023-05-12 22:40:15 +03:00
Emre Can Minnet	b04209d9b3	Merge branch 'dev' into subtitle-file-type-control	2023-05-10 22:34:12 +03:00
James Hawkins	55bfa2be9d	Merge pull request #274 from frost768/time-format language based time formatting	2023-05-10 10:46:32 +01:00
James Hawkins	dd8b6c3f9e	Merge branch 'dev' into time-format	2023-05-10 10:44:48 +01:00
James Hawkins	835e818ca0	Merge pull request #293 from zisra/fix-time Fix "Finish at xx:xxPM/AM"	2023-05-10 10:40:17 +01:00
Isra	942725d04c	Fix time finished	2023-05-09 14:07:09 -05:00
JORDAAR	010f1d3987	register 2Embed provider	2023-05-09 12:52:54 +05:30
JORDAAR	7bad6eaff9	add 2Embed provider	2023-05-09 12:52:13 +05:30
JORDAAR	bcff5a8972	add rawProxiedFetch	2023-05-09 12:51:13 +05:30
Emre Can Minnet	caba492ca2	Merge branch 'dev' into subtitle-file-type-control	2023-05-07 22:08:03 +03:00
frost768	f03145ee6d	formatting added to new translation files	2023-05-06 15:03:13 +03:00
Emre Can Minnet	c0aebca4d9	Merge branch 'dev' into time-format	2023-05-06 14:42:05 +03:00
James Hawkins	c7651950ce	Merge pull request #288 from zisra/deutsch German Language	2023-05-06 10:26:17 +01:00
James Hawkins	cd3bd22a2c	Update i18n.ts	2023-05-06 10:24:57 +01:00
James Hawkins	9773fcc7b5	Merge branch 'dev' into deutsch	2023-05-06 10:22:55 +01:00
James Hawkins	c937acfb09	Merge pull request #283 from raymond-nee/dev Chinese(Simplified) Translation	2023-05-06 10:22:02 +01:00
James Hawkins	d1f3a7ad24	Merge branch 'dev' into dev	2023-05-06 10:20:24 +01:00
James Hawkins	cd0e4522c9	Merge pull request #280 from panmlg/dev Czech language	2023-05-06 10:19:13 +01:00
Isra	f4be26d92d	Deutsch!	2023-04-30 16:18:20 -05:00
frost768	22f8d8a581	Merge branch 'subtitle-file-type-control' of https://github.com/frost768/movie-web into subtitle-file-type-control	2023-05-01 00:15:59 +03:00
frost768	6cfd1235bc	thumbnailCreator deleted	2023-05-01 00:15:18 +03:00
Emre Can Minnet	bdeaca3062	prefer length over falsy check Co-authored-by: Jip Frijlink <jipfrijlink@gmail.com>	2023-05-01 00:02:14 +03:00
zisra	15e95923be	English first!	2023-04-30 15:48:03 -05:00
panmlg	571df9e0ad	Merge branch 'dev' into dev	2023-04-28 12:32:49 +02:00
panmlg	cce47fab5d	Update src/setup/locales/cs/translation.json Co-authored-by: James Hawkins <jhawki2005@gmail.com>	2023-04-27 23:45:21 +02:00
Emre Can Minnet	6eb25fb49c	Merge branch 'dev' into time-format	2023-04-27 22:30:29 +03:00
frost768	e61937b5c4	refactor(lint): apply lint rules	2023-04-27 22:01:14 +03:00
frost768	2338b0d652	chore: allow updates on subsrt-ts	2023-04-27 21:58:45 +03:00
frost768	37463afc8d	refactor(subtitles): use official subsrt-ts package	2023-04-27 21:56:02 +03:00
frost768	9c8e89a274	lint fixes	2023-04-27 21:54:36 +03:00
frost768	bf135a2bdf	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-file-type-control	2023-04-27 21:54:24 +03:00
Monstorix	4dc6658e67	Chinese Simplified Translation	2023-04-27 00:42:23 +08:00
James Hawkins	fffc119e88	Update translation.json	2023-04-26 10:53:48 +01:00
mrjvs	5468a4677b	Merge pull request #282 from movie-web/dev v3.0.14	2023-04-25 17:47:13 +02:00
mrjvs	85cfba1a7a	Merge branch 'master' into dev	2023-04-25 17:41:12 +02:00
mrjvs	fd6895c326	Merge pull request #281 from movie-web/fix-referer-maybe Fix referer maybe	2023-04-25 17:39:11 +02:00
mrjvs	dfc3d9e50f	Merge branch 'dev' into fix-referer-maybe	2023-04-25 17:38:27 +02:00
mrjvs	fcdf45d3f5	bump version for real	2023-04-25 17:37:49 +02:00
mrjvs	592837e2a6	bump version for a small release	2023-04-25 17:35:59 +02:00
mrjvs	9b3c1ffa28	add some dev routes back	2023-04-25 17:35:09 +02:00
mrjvs	7cb9ccaf14	referrer policy	2023-04-25 17:35:03 +02:00
panmlg	aa91bae418	fix of broken thingy	2023-04-25 16:59:19 +02:00
panmlg	7737bd1866	Czech language	2023-04-25 16:36:16 +02:00
mrjvs	4c0c61b0b9	Merge pull request #278 from yilmazcabuk/dev style: sort imports according to ESLint rules	2023-04-25 00:55:41 +02:00
Yılmaz ÇABUK	4880d46dc4	style: sort imports according to ESLint rules This commit updates the import statements in the codebase to comply with ESLint rules for import ordering. All imports have been sorted alphabetically and grouped according to the specified import groups in the ESLint configuration. This improves the codebase's consistency and maintainability.	2023-04-24 18:41:54 +03:00
frost768	ef39d87b4b	update yarn.lock registry	2023-04-24 05:32:34 +03:00
frost768	e2a4caa8aa	update version	2023-04-24 05:19:25 +03:00
frost768	b6a60cf5f8	patch subsrt-ts	2023-04-24 05:17:34 +03:00
frost768	f784f5f4b2	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-file-type-control	2023-04-24 05:10:07 +03:00
Emre Can Minnet	01348f2f9a	Merge branch 'dev' into time-format	2023-04-24 01:14:44 +03:00
mrjvs	8200079af7	Merge pull request #277 from movie-web/dev V1.0.13	2023-04-24 00:14:32 +02:00
mrjvs	dcb5d2f068	Merge branch 'master' into dev	2023-04-24 00:13:41 +02:00
Jip Frijlink	99e47f16ea	Bump version	2023-04-24 00:11:37 +02:00
mrjvs	6fb76908ae	Merge pull request #276 from JipFr/dev feat(player): add soundbar visibility thingie for M keyboard shortcut	2023-04-24 00:08:36 +02:00
Jip Fr	a718abdcdd	feat(player): add soundbar visibility thingie for M keyboard shortcut	2023-04-24 00:00:53 +02:00
frost768	0e77d63caf	Merge branch 'dev' of https://github.com/movie-web/movie-web into time-format	2023-04-23 20:15:35 +03:00
mrjvs	106290070a	Merge pull request #275 from frost768/dev Turkish translation	2023-04-23 19:13:27 +02:00
frost768	433d618096	remove relativeTime formatting	2023-04-23 20:09:50 +03:00
mrjvs	af954af36c	Merge branch 'dev' into dev	2023-04-23 19:07:16 +02:00
Emre Can Minnet	16841b8e69	Merge branch 'dev' into time-format	2023-04-23 20:06:34 +03:00
James Hawkins	41979712c3	Merge pull request #272 from judemont/dev Add French in the settings languages selector	2023-04-23 18:06:09 +01:00
frost768	9b62b55fbb	Turkish translation	2023-04-23 20:03:01 +03:00
frost768	6ef41bdf1c	language based time formatting	2023-04-23 20:01:12 +03:00
frost768	33ebd34808	fix multiline in subtitles	2023-04-23 18:44:16 +03:00
mrjvs	52598599e7	Merge branch 'dev' into dev	2023-04-23 16:23:31 +02:00
James Hawkins	cccc84624a	Update README.md	2023-04-23 13:11:50 +01:00
mrjvs	d54921900b	Update src/setup/locales/fr/translation.json Co-authored-by: James Hawkins <jhawki2005@gmail.com>	2023-04-23 14:11:07 +02:00
JdM	2a4bc7349c	Update src/setup/locales/fr/translation.json Co-authored-by: BrightDV <92821484+BrightDV@users.noreply.github.com>	2023-04-22 16:49:34 +02:00
JdM	7b641c61cd	Update src/setup/locales/fr/translation.json Co-authored-by: BrightDV <92821484+BrightDV@users.noreply.github.com>	2023-04-22 16:49:24 +02:00
JdM	3a7b05264d	Update src/setup/locales/fr/translation.json Co-authored-by: BrightDV <92821484+BrightDV@users.noreply.github.com>	2023-04-22 16:49:15 +02:00
JdM	a1e3d98538	Add French in the settings languages selector	2023-04-22 13:32:34 +02:00
frost768	68e5742c25	add multine test	2023-04-22 13:10:02 +03:00
Emre Can Minnet	283b9cc996	Merge branch 'dev' into subtitle-file-type-control	2023-04-22 12:52:55 +03:00
mrjvs	3ed5dcfc15	Merge pull request #271 from movie-web/dev v3.0.12	2023-04-21 21:17:27 +02:00
mrjvs	71235f5174	Merge branch 'master' into dev	2023-04-21 21:16:06 +02:00
mrjvs	0d79a677a0	Merge pull request #270 from movie-web/jvs-sentry-telemetry Sentry telemetry	2023-04-21 21:15:14 +02:00
mrjvs	a34d245e2b	version bump	2023-04-21 21:09:56 +02:00
mrjvs	8b8cbc8cc9	Dutch language translations Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>	2023-04-21 21:08:01 +02:00
mrjvs	5ee4f013ff	Sentry integration Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>	2023-04-21 20:49:47 +02:00
frost768	75ef831ddc	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-file-type-control	2023-04-20 22:32:42 +03:00
mrjvs	99a3e6db69	Merge pull request #268 from movie-web/dev V3.0.11	2023-04-20 21:31:55 +02:00
mrjvs	7d3e1c0943	Merge branch 'master' into dev	2023-04-20 21:30:03 +02:00
frost768	e2d1842946	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-file-type-control	2023-04-20 22:29:50 +03:00
mrjvs	2cfd7e64a2	remove gdrive from bundle	2023-04-20 21:29:47 +02:00
mrjvs	d6def996bf	bump version	2023-04-20 21:26:37 +02:00
mrjvs	8bba2961b4	Merge pull request #266 from Jordaar/dev Add hdwatched provider	2023-04-20 21:24:47 +02:00
frost768	f12f53d32c	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-file-type-control	2023-04-20 22:22:10 +03:00
mrjvs	da05a2597e	Merge branch 'dev' into dev	2023-04-20 21:11:24 +02:00
mrjvs	d40076e950	Merge pull request #267 from JipFr/dev Add volume adjusted bar for keyboard events, fix UI always being dismissed after single mousemove	2023-04-20 21:09:42 +02:00
mrjvs	bb4a6d8a1e	Merge branch 'dev' into dev	2023-04-20 21:08:28 +02:00
Jip Fr	7007f030e1	feat(player): use state-specific debouncer, not global	2023-04-20 21:07:44 +02:00
mrjvs	24fa1c449f	Merge pull request #255 from zisra/movie-time Time format	2023-04-20 21:04:13 +02:00
mrjvs	591b1d3bc5	Merge branch 'dev' into movie-time	2023-04-20 20:57:20 +02:00
mrjvs	c162f15496	Merge pull request #252 from frost768/settings A settings modal	2023-04-20 20:56:55 +02:00
mrjvs	2650707d2c	Merge branch 'dev' into movie-time	2023-04-20 20:54:42 +02:00
Jip Fr	a0a51c898a	chore: remove unused import	2023-04-20 20:53:35 +02:00
mrjvs	43c8da9003	remove unsused useControls	2023-04-20 20:53:23 +02:00
mrjvs	1472b21600	negative sign thingy	2023-04-20 20:52:06 +02:00
Jip Fr	2424cdfc9e	feat(video): add "volume adjusted" bar on top for keyboard events	2023-04-20 20:51:05 +02:00
frost768	2239c186a5	modal background changed	2023-04-20 21:43:51 +03:00
Jip Fr	0c2df2cd3c	fix(player): fix dismissal of UI after only 1 mousemove event	2023-04-20 19:50:57 +02:00
JORDAAR	b26b0715bd	increase rank	2023-04-20 22:26:54 +05:30
JORDAAR	7b75c36d21	add series support & improvements	2023-04-20 15:53:28 +05:30
JORDAAR	e52b29a1a1	add hdwatched provider	2023-04-19 15:44:20 +05:30
frost768	a910c1c18c	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-file-type-control	2023-04-17 17:49:31 +03:00
frost768	12c245b2da	Merge branch 'dev' of https://github.com/movie-web/movie-web into settings	2023-04-15 01:00:11 +03:00
mrjvs	871780f95e	Merge pull request #261 from movie-web/dev version 3.0.10	2023-04-14 22:35:57 +02:00
mrjvs	fa985fc2c2	Merge branch 'master' into dev	2023-04-14 22:35:02 +02:00
mrjvs	db9eec195a	bump version	2023-04-14 22:32:45 +02:00
mrjvs	de1221235b	Merge pull request #260 from JipFr/dev A couple bug fixes	2023-04-14 21:44:46 +02:00
Jip Fr	b576a298e8	Disable netfilm	2023-04-14 21:43:30 +02:00
Jip Frijlink	fcb24c783c	Update src/components/popout/positions/FloatingCardMobilePosition.tsx	2023-04-14 21:40:55 +02:00
Isra	c5251401e7	Does this fix it?	2023-04-14 14:18:17 -05:00
Isra	41fd23cf20	Reviews	2023-04-14 14:11:13 -05:00
Jip Fr	5dfeeadbb8	fix(popouts): fix touch on scroll areas being weird	2023-04-14 20:03:11 +02:00
Jip Fr	0794558338	fix(player): add max-height to modals for smaller screens	2023-04-14 19:39:01 +02:00
Jip Fr	d2ffa35f2c	fix(superstream): fix subtitle error on SuperStream	2023-04-14 19:32:34 +02:00
Isra	c330112dbc	Translations	2023-04-11 16:34:19 -05:00
Isra	84b8a67cea	Time format	2023-04-11 16:16:06 -05:00
frost768	546b008b2e	show text when no caption language is selected	2023-04-10 22:10:11 +03:00
frost768	b9b0380dfe	suggested changes	2023-04-10 00:55:23 +03:00
frost768	c472e7f7b8	Merge branch 'dev' of https://github.com/movie-web/movie-web into settings	2023-04-09 23:22:32 +03:00
mrjvs	3decc9190c	Merge pull request #224 from zisra/dev Playback speed	2023-04-09 13:22:12 +02:00
zisra	184af19498	Merge branch 'movie-web:dev' into dev	2023-04-07 23:15:05 -05:00
frost768	2eab07b8b6	modal customization	2023-04-06 04:35:20 +03:00
frost768	5d8f03b859	fix migration	2023-04-06 04:34:59 +03:00
frost768	2178057633	auto select subtitle	2023-04-06 01:49:33 +03:00
frost768	9e961223f6	settings modal	2023-04-06 01:48:07 +03:00
frost768	c2b52d3db8	Add language selection	2023-04-06 01:46:27 +03:00
frost768	42dee51570	subtitle tests	2023-04-03 23:18:28 +03:00
frost768	9c13be37e8	subtitle type checks	2023-04-03 23:18:10 +03:00
zisra	06a44da9cc	Update index.tsx	2023-04-02 10:29:44 -05:00
zisra	49d7dc9761	Update VideoErrorBoundary.tsx	2023-04-02 10:28:20 -05:00
mrjvs	1585805d86	Merge pull request #230 from frost768/subtitle-fix Better subtitle handling	2023-04-02 17:21:28 +02:00
frost768	7dc76e993f	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-fix	2023-04-02 18:14:44 +03:00
frost768	661d995e3b	filter out non subtitle files	2023-04-02 18:14:26 +03:00
frost768	156b693460	suggested changes	2023-04-02 18:14:03 +03:00
mrjvs	d82b32e8d9	Merge branch 'dev' into dev	2023-04-02 17:05:02 +02:00
zisra	8a8dbb2778	Update yarn.lock	2023-04-02 10:03:54 -05:00
zisra	6d95f83c0b	Update videoStateProvider.ts	2023-04-02 10:01:52 -05:00
mrjvs	2fe53a05e8	Merge pull request #231 from frost768/exclude-dev-routes Exclude dev routes from production	2023-04-02 16:46:57 +02:00
frost768	495222eb10	export subtitle types as a list	2023-04-01 12:19:05 +03:00
zisra	119bafa516	Update translation.json	2023-03-31 16:03:47 -05:00
frost768	ba1ee0267b	Merge branch 'dev' of https://github.com/movie-web/movie-web into exclude-dev-routes	2023-03-31 21:11:44 +03:00
frost768	92ef687ddc	change: use ternary instead of short circuit	2023-03-31 21:07:58 +03:00
frost768	5e776f8655	Merge branch 'dev' of https://github.com/movie-web/movie-web into subtitle-fix	2023-03-31 20:57:18 +03:00
zisra	c541d4212a	Merge branch 'dev' into dev	2023-03-30 21:19:21 -05:00
Isra	2d17c8abaa	Remove duplicate label	2023-03-30 19:10:35 -05:00
zisra	4a52fc11ed	Keyboard up and down	2023-03-30 23:25:49 +00:00
zisra	54d1af0e0a	Suggested changes	2023-03-30 23:21:17 +00:00
mrjvs	48f54dd7cc	Merge pull request #243 from JipFr/dev Add volume up / down keyboard events	2023-03-31 00:56:31 +02:00
mrjvs	3a44eb550d	Merge branch 'dev' into dev	2023-03-31 00:55:05 +02:00
Jip Fr	0fa3d3e430	fix: copy over old yarn.lock	2023-03-31 00:52:14 +02:00
mrjvs	a9849b40c2	Merge pull request #232 from frost768/flixhq-filter Flixhq media type filter	2023-03-31 00:36:32 +02:00
Jip Fr	80954514b6	chore(player): add comments to up/down kb events	2023-03-30 19:54:06 +02:00
Jip Fr	e2dd74c0af	feat(player): add arrow up/down controls for volume	2023-03-30 19:53:27 +02:00
frost768	2f10de415b	add flixhq media type filter	2023-03-26 10:44:16 +03:00
frost768	efcb12f95a	exclude dev routes from production	2023-03-26 10:41:39 +03:00
frost768	307f555b70	better subtitle handling	2023-03-26 10:33:24 +03:00
frost768	4d5f03337d	Merge branch 'dev' of https://github.com/movie-web/movie-web into dev	2023-03-26 00:24:27 +03:00
mrjvs	9f008f02d1	Merge pull request #229 from movie-web/dev Version 3.0.9	2023-03-25 22:12:20 +01:00
mrjvs	e91f65dd91	Merge branch 'master' into dev	2023-03-25 22:11:54 +01:00
mrjvs	3aab008f12	version bump	2023-03-25 22:10:51 +01:00
mrjvs	659b0168c3	Merge pull request #228 from Artikronisz/hotfix/20230325_FlixHQ_Fix Fix for flixHQ provider	2023-03-25 22:03:00 +01:00
mrjvs	e9e2129aa2	Merge branch 'dev' into hotfix/20230325_FlixHQ_Fix	2023-03-25 22:01:22 +01:00
mrjvs	bed3318ebe	Merge pull request #226 from judemont/dev Add French translation	2023-03-25 21:53:31 +01:00
Artikronisz	436a2388b9	Fix for flixHQ provider	2023-03-25 16:20:50 -04:00
judemont	1ad1c69d3e	Add french translation	2023-03-24 21:55:03 +01:00
zisra	fac2b50bfc	Reset config	2023-03-23 14:19:18 -05:00
zisra	4d08ecc694	Playback speed	2023-03-23 13:52:34 -05:00
frost768	5edc99cdfe	Merge branch 'dev' of https://github.com/movie-web/movie-web into dev	2023-03-23 01:33:49 +03:00
frost768	603e42b907	remove unnecessary margin from slider	2023-03-22 12:51:51 +03:00
frost768	d51603a382	fix safari fullscreen	2023-03-22 12:38:12 +03:00