Merge pull request #282 from movie-web/dev

v3.0.14
Merge branch 'master' into dev
2025-09-13 18:13:24 +00:00 · 2023-04-25 17:47:13 +02:00 · 2023-04-25 17:41:12 +02:00 · 2023-04-25 17:39:11 +02:00 · 2023-04-25 17:38:27 +02:00 · 2023-04-25 17:37:49 +02:00
155 changed files with 3249 additions and 580 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.9",
+  "version": "3.0.14",
  "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.0",
    "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/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,29 @@
-import { mwFetch, proxiedFetch } from "@/backend/helpers/fetch";
-import { MWCaption, MWCaptionType } from "@/backend/helpers/streams";
-import toWebVTT from "srt-webvtt";
 import DOMPurify from "dompurify";
+import { detect, list, parse } from "subsrt-ts";
+import { ContentCaption } from "subsrt-ts/dist/types/handler";

-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;
+import { mwFetch, proxiedFetch } from "@/backend/helpers/fetch";
+import { MWCaption } from "@/backend/helpers/streams";

-    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 async function convertCustomCaptionFileToWebVTT(file: File) {
-  const header = await file.slice(0, 6).text();
-  const isWebVTT = header === "WEBVTT";
-  if (!isWebVTT) {
-    return toWebVTT(file);
+export const subtitleTypeList = list().map((type) => `.${type}`);
+export const sanitize = DOMPurify.sanitize;
+export async function getCaptionUrl(caption: MWCaption): Promise<string> {
+  if (caption.url.startsWith("blob:")) return caption.url;
+  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 URL.createObjectURL(file);
+  return URL.createObjectURL(captionBlob);
 }

 export function revokeCaptionBlob(url: string | undefined) {
@@ -50,3 +31,12 @@ export function revokeCaptionBlob(url: string | undefined) {
    URL.revokeObjectURL(url);
  }
 }
+
+export function parseSubtitles(text: string): ContentCaption[] {
+  if (detect(text) === "") {
+    throw new Error("Invalid subtitle format");
+  }
+  return parse(text).filter(
+    (cue) => cue.type === "caption"
+  ) as ContentCaption[];
+}
--- a/src/backend/helpers/fetch.ts
+++ b/src/backend/helpers/fetch.ts
@@ -1,6 +1,7 @@
-import { conf } from "@/setup/config";
 import { ofetch } from "ofetch";

+import { conf } from "@/setup/config";
+
 let proxyUrlIndex = Math.floor(Math.random() * conf().PROXY_URLS.length);

 // round robins all proxy urls
--- 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
@@ -6,6 +6,7 @@ export enum MWStreamType {
 export enum MWCaptionType {
  VTT = "vtt",
  SRT = "srt",
+  UNKNOWN = "unknown",
 }

 export enum MWStreamQuality {
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -1,11 +1,12 @@
 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";

 // 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"
--- 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/flixhq.ts
+++ b/src/backend/providers/flixhq.ts
@@ -1,4 +1,5 @@
 import { compareTitle } from "@/utils/titleMatch";
+
 import { proxiedFetch } from "../helpers/fetch";
 import { registerProvider } from "../helpers/register";
 import {
@@ -10,12 +11,13 @@ import { MWMediaType } from "../metadata/types";

 const flixHqBase = "https://api.consumet.org/meta/tmdb";

+type FlixHQMediaType = "Movie" | "TV Series";
 interface FLIXMediaBase {
  id: number;
  title: string;
  url: string;
  image: string;
-  type: "Movie" | "TV Series";
+  type: FlixHQMediaType;
  releaseDate: string;
 }

@@ -38,9 +40,9 @@ const qualityMap: Record<string, MWStreamQuality> = {
  "1080": MWStreamQuality.Q1080P,
 };

-enum FlixHQMediaType {
-  MOVIE = "movie",
-  SERIES = "series",
+function flixTypeToMWType(type: FlixHQMediaType) {
+  if (type === "Movie") return MWMediaType.MOVIE;
+  return MWMediaType.SERIES;
 }

 registerProvider({
@@ -48,7 +50,6 @@ registerProvider({
  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");
@@ -65,9 +66,11 @@ registerProvider({
      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");

    // get media info
@@ -75,15 +78,12 @@ registerProvider({
    const mediaInfo = await proxiedFetch<any>(`/info/${foundItem.id}`, {
      baseURL: flixHqBase,
      params: {
-        type:
-          media.meta.type === MWMediaType.MOVIE
-            ? FlixHQMediaType.MOVIE
-            : FlixHQMediaType.SERIES,
+        type: flixTypeToMWType(foundItem.type),
      },
    });
    if (!mediaInfo.id) throw new Error("No watchable item found");
    // get stream info from media
-    progress(75);
+    progress(50);

    let episodeId: string | undefined;
    if (media.meta.type === MWMediaType.MOVIE) {
@@ -98,7 +98,7 @@ registerProvider({
      episodeId = season.episodes.find((o: any) => o.episode === episodeNo).id;
    }
    if (!episodeId) throw new Error("No watchable item found");
-
+    progress(75);
    const watchInfo = await proxiedFetch<any>(`/watch/${episodeId}`, {
      baseURL: flixHqBase,
      params: {
--- 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 = {
--- a/src/backend/providers/hdwatched.ts
+++ b/src/backend/providers/hdwatched.ts
@@ -0,0 +1,196 @@
+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 (!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,15 @@
-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 { 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);
@@ -225,15 +225,21 @@ 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(
+      (subtitle: any): MWCaption | null => {
+        const sub = subtitle;
+        sub.subtitles = subtitle.subtitles.filter((subFile: any) => {
+          const extension = subFile.file_path.slice(-3);
+          return [MWCaptionType.SRT, MWCaptionType.VTT].includes(extension);
+        });
+        return {
+          needsProxy: true,
+          langIso: subtitle.language,
+          url: sub.subtitles[0].file_path,
+          type: MWCaptionType.SRT,
+        };
+      }
+    );
    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 top-10 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: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";
--- 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 {
--- 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"
@@ -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/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;
--- 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)
--- 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,10 +1,28 @@
 import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";

 // Languages
+import { captionLanguages } from "./iso6391";
 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";

+const locales = {
+  en: {
+    translation: en,
+  },
+  nl: {
+    translation: nl,
+  },
+  tr: {
+    translation: tr,
+  },
+  fr: {
+    translation: fr,
+  },
+};
 i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
@@ -15,16 +33,14 @@ i18n
  // 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/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}}",
    "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
@@ -16,16 +16,34 @@
    "placeholder": "Que voulez-vous voir?"
  },
  "media": {
-    "title": "Impossible de trouver ce média",
-    "description": "Nous n'avons pas pu trouver le média que vous avez demandé. Soit il a été supprimé, soit vous avez altéré l'URL."
+    "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>."
+    }
  },
-  "provider": {
-    "title": "Ce fournisseur a été désactivé",
-    "description": "Nous avons eu des problèmes avec le fournisseur ou bien il était trop instable pour être utilisé, donc nous avons dû le désactiver."
+  "seasons": {
+    "seasonAndEpisode": "S{{saison}} E{{épisode}}"
  },
-  "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 pu trouver la page que vous recherchez."
+  "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",
@@ -39,18 +57,24 @@
    "backToHome": "Retour à la page d'accueil",
    "backToHomeShort": "Retour",
    "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "{{timeLeft}} restant",
+    "finishAt": "Terminer à {{timeFinished}}",
    "buttons": {
      "episodes": "Épisodes",
      "source": "Source",
      "captions": "Sous-titres",
      "download": "Télécharger",
      "settings": "Paramètres",
-      "pictureInPicture": "Image dans l'image"
+      "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",
@@ -62,7 +86,7 @@
      "noCaptions": "Pas de sous-titres",
      "linkedCaptions": "Sous-titres liés",
      "customCaption": "Sous-titres personnalisés",
-      "uploadCustomCaption": "Télécharger des sous-titres (SRT, VTT)",
+      "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}}",
@@ -74,13 +98,19 @@
        "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"
+        "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",
--- 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}}",
+    "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/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>
--- 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 { 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 { 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 { 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
@@ -48,16 +51,18 @@ export function CaptionRendererAction({
  const source = useSource(descriptor).source;
  const videoTime = useProgress(descriptor).time;
  const { captionSettings } = useSettings();
-  const captions = useRef<Cue[]>([]);
+  const captions = useRef<ContentCaption[]>([]);

  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 = [];
+      }
    } else {
      captions.current = [];
    }
@@ -65,8 +70,8 @@ export function CaptionRendererAction({

  if (!captions.current.length) return null;
  const isVisible = (start: number, end: number): boolean => {
-    const delayedStart = start + captionSettings.delay;
-    const delayedEnd = end + captionSettings.delay;
+    const delayedStart = start / 1000 + captionSettings.delay;
+    const delayedEnd = end / 1000 + captionSettings.delay;
    return (
      Math.max(0, delayedStart) <= videoTime &&
      Math.max(0, delayedEnd) >= videoTime
@@ -82,9 +87,9 @@ export function CaptionRendererAction({
      show
    >
      {captions.current.map(
-        ({ identifier, end, start, text }) =>
+        ({ start, end, content }) =>
          isVisible(start, end) && (
-            <CaptionCue key={identifier || `${start}-${end}`} text={text} />
+            <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 timeLeft = formatSeconds(
+    (videoTime.duration - videoTime.time) / mediaPlaying.playbackSpeed,
+    hasHours
+  );
+  const timeFinished = new Date(
+    new Date().getTime() +
+      (videoTime.duration * 1000) / mediaPlaying.playbackSpeed
+  ).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  });
+  const formattedTimeFinished = ` - ${t("videoPlayer.finishAt", {
+    timeFinished,
+  })}`;
+
+  let formattedTime: string;
+
+  if (timeFormat === VideoPlayerTimeFormat.REGULAR) {
+    formattedTime = `${currentTime} ${props.noDuration ? "" : `/ ${duration}`}`;
+  } else if (timeFormat === VideoPlayerTimeFormat.REMAINING && !isMobile) {
+    formattedTime = `${t("videoPlayer.timeLeft", {
+      timeLeft,
+    })}${videoTime.time === videoTime.duration ? "" : formattedTimeFinished} `;
+  } else if (timeFormat === VideoPlayerTimeFormat.REMAINING && isMobile) {
+    formattedTime = `-${timeLeft}`;
+  } 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/src/video/components/actions/VolumeAction.tsx
+++ b/src/video/components/actions/VolumeAction.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
 import { Icon, Icons } from "@/components/Icon";
 import {
  makePercentage,
@@ -10,7 +12,6 @@ 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 { useCallback, useEffect, useRef, useState } from "react";

 interface Props {
  className?: string;
--- a/src/video/components/actions/VolumeAdjustedAction.tsx
+++ b/src/video/components/actions/VolumeAdjustedAction.tsx
@@ -0,0 +1,32 @@
+import { Icon, Icons } from "@/components/Icon";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useInterface } from "@/video/state/logic/interface";
+import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
+
+export function VolumeAdjustedAction() {
+  const descriptor = useVideoPlayerDescriptor();
+  const videoInterface = useInterface(descriptor);
+  const mediaPlaying = useMediaPlaying(descriptor);
+
+  return (
+    <div
+      className={[
+        videoInterface.volumeChangedWithKeybind
+          ? "mt-10 scale-100 opacity-100"
+          : "mt-5 scale-75 opacity-0",
+        "absolute left-1/2 z-[100] flex -translate-x-1/2 items-center space-x-4 rounded-full bg-bink-300 bg-opacity-50 py-2 px-5 transition-all duration-100",
+      ].join(" ")}
+    >
+      <Icon
+        icon={mediaPlaying.volume > 0 ? Icons.VOLUME : Icons.VOLUME_X}
+        className="text-xl text-white"
+      />
+      <div className="h-2 w-44 overflow-hidden rounded-full bg-denim-100">
+        <div
+          className="h-full rounded-r-full bg-bink-500 transition-[width] duration-100"
+          style={{ width: `${mediaPlaying.volume * 100}%` }}
+        />
+      </div>
+    </div>
+  );
+}
--- a/src/video/components/actions/list-entries/CaptionsSelectionAction.tsx
+++ b/src/video/components/actions/list-entries/CaptionsSelectionAction.tsx
@@ -1,5 +1,7 @@
-import { Icons } from "@/components/Icon";
 import { useTranslation } from "react-i18next";
+
+import { Icons } from "@/components/Icon";
+
 import { PopoutListAction } from "../../popouts/PopoutUtils";

 interface Props {
--- a/src/video/components/actions/list-entries/DownloadAction.tsx
+++ b/src/video/components/actions/list-entries/DownloadAction.tsx
@@ -1,10 +1,12 @@
-import { Icons } from "@/components/Icon";
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useSource } from "@/video/state/logic/source";
-import { MWStreamType } from "@/backend/helpers/streams";
-import { normalizeTitle } from "@/utils/normalizeTitle";
 import { useTranslation } from "react-i18next";
+
+import { MWStreamType } from "@/backend/helpers/streams";
+import { Icons } from "@/components/Icon";
+import { normalizeTitle } from "@/utils/normalizeTitle";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMeta } from "@/video/state/logic/meta";
+import { useSource } from "@/video/state/logic/source";
+
 import { PopoutListAction } from "../../popouts/PopoutUtils";

 export function DownloadAction() {
--- a/src/video/components/actions/list-entries/PlaybackSpeedSelectionAction.tsx
+++ b/src/video/components/actions/list-entries/PlaybackSpeedSelectionAction.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+
+import { Icons } from "@/components/Icon";
+
+import { PopoutListAction } from "../../popouts/PopoutUtils";
+
+interface Props {
+  onClick: () => any;
+}
+
+export function PlaybackSpeedSelectionAction(props: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <PopoutListAction icon={Icons.TACHOMETER} onClick={props.onClick}>
+      {t("videoPlayer.buttons.playbackSpeed")}
+    </PopoutListAction>
+  );
+}
--- a/src/video/components/actions/list-entries/SourceSelectionAction.tsx
+++ b/src/video/components/actions/list-entries/SourceSelectionAction.tsx
@@ -1,7 +1,9 @@
-import { Icons } from "@/components/Icon";
 import { useTranslation } from "react-i18next";
-import { PopoutListAction } from "../../popouts/PopoutUtils";
+
+import { Icons } from "@/components/Icon";
+
 import { QualityDisplayAction } from "./QualityDisplayAction";
+import { PopoutListAction } from "../../popouts/PopoutUtils";

 interface Props {
  onClick?: () => any;
--- a/src/video/components/controllers/MetaController.tsx
+++ b/src/video/components/controllers/MetaController.tsx
@@ -1,9 +1,10 @@
+import { useEffect } from "react";
+
 import { MWCaption } from "@/backend/helpers/streams";
 import { MWSeasonWithEpisodeMeta } from "@/backend/metadata/types";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { VideoPlayerMeta } from "@/video/state/types";
-import { useEffect } from "react";

 interface MetaControllerProps {
  data?: VideoPlayerMeta;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
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
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
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
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
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
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
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
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
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	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
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
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