Merge pull request #302 from movie-web/dev

Version 3.0.15

package.json

@@ -1,6 +1,6 @@
 {
   "name": "movie-web",
-  "version": "3.0.14",
+  "version": "3.0.15",
   "private": true,
   "homepage": "https://movie-web.app",
   "dependencies": {
@@ -32,7 +32,7 @@
     "react-stickynode": "^4.1.0",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.4.0",
-    "subsrt-ts": "^2.1.0",
+    "subsrt-ts": "^2.1.1",
     "unpacker": "^1.0.1"
   },
   "scripts": {

src/__tests__/subtitles/subtitles.test.ts

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

src/__tests__/subtitles/testdata.ts

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

src/backend/helpers/captions.ts

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

src/backend/helpers/fetch.ts

@@ -1,4 +1,4 @@
-import { ofetch } from "ofetch";
+import { FetchOptions, FetchResponse, ofetch } from "ofetch";
 
 import { conf } from "@/setup/config";
 
@@ -59,3 +59,36 @@ export function proxiedFetch<T>(url: string, ops: P<T>[1] = {}): R<T> {
     },
   });
 }
+
+export function rawProxiedFetch<T>(
+  url: string,
+  ops: FetchOptions = {}
+): Promise<FetchResponse<T>> {
+  let combinedUrl = ops?.baseURL ?? "";
+  if (
+    combinedUrl.length > 0 &&
+    combinedUrl.endsWith("/") &&
+    url.startsWith("/")
+  )
+    combinedUrl += url.slice(1);
+  else if (
+    combinedUrl.length > 0 &&
+    !combinedUrl.endsWith("/") &&
+    !url.startsWith("/")
+  )
+    combinedUrl += `/${url}`;
+  else combinedUrl += url;
+
+  const parsedUrl = new URL(combinedUrl);
+  Object.entries(ops?.params ?? {}).forEach(([k, v]) => {
+    parsedUrl.searchParams.set(k, v);
+  });
+
+  return baseFetch.raw(getProxyUrl(), {
+    ...ops,
+    baseURL: undefined,
+    params: {
+      destination: parsedUrl.toString(),
+    },
+  });
+}

src/backend/helpers/streams.ts

@@ -3,9 +3,16 @@ export enum MWStreamType {
   HLS = "hls",
 }
 
+// subsrt-ts supported types
 export enum MWCaptionType {
   VTT = "vtt",
   SRT = "srt",
+  LRC = "lrc",
+  SBV = "sbv",
+  SUB = "sub",
+  SSA = "ssa",
+  ASS = "ass",
+  JSON = "json",
   UNKNOWN = "unknown",
 }
 

src/backend/index.ts

@@ -7,6 +7,7 @@ import "./providers/superstream";
 import "./providers/netfilm";
 import "./providers/m4ufree";
 import "./providers/hdwatched";
+import "./providers/2embed";
 
 // embeds
 import "./embeds/streamm4u";

src/backend/metadata/getmeta.ts

@@ -29,8 +29,8 @@ interface JWDetailedMeta extends JWMediaResult {
 
 export interface DetailedMeta {
   meta: MWMediaMeta;
-  tmdbId: string;
+  imdbId?: string;
-  imdbId: string;
+  tmdbId?: string;
 }
 
 export async function getMetaFromId(
@@ -67,8 +67,6 @@ export async function getMetaFromId(
   if (!tmdbId)
     tmdbId = data.external_ids.find((v) => v.provider === "tmdb")?.external_id;
 
-  if (!imdbId || !tmdbId) throw new Error("not enough info");
-
   let seasonData: JWSeasonMetaResult | undefined;
   if (data.object_type === "show") {
     const seasonToScrape = seasonId ?? data.seasons?.[0].id.toString() ?? "";

src/backend/providers/2embed.ts

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

src/backend/providers/flixhq.ts

@@ -1,15 +1,15 @@
 import { compareTitle } from "@/utils/titleMatch";
 
-import { proxiedFetch } from "../helpers/fetch";
-import { registerProvider } from "../helpers/register";
 import {
-  MWCaptionType,
+  getMWCaptionTypeFromUrl,
-  MWStreamQuality,
+  isSupportedSubtitle,
-  MWStreamType,
+} from "../helpers/captions";
-} from "../helpers/streams";
+import { mwFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import { MWCaption, MWStreamQuality, MWStreamType } from "../helpers/streams";
 import { MWMediaType } from "../metadata/types";
 
-const flixHqBase = "https://api.consumet.org/meta/tmdb";
+const flixHqBase = "https://consumet-api-clone.vercel.app/meta/tmdb"; // instance stolen from streaminal :)
 
 type FlixHQMediaType = "Movie" | "TV Series";
 interface FLIXMediaBase {
@@ -20,15 +20,19 @@ interface FLIXMediaBase {
   type: FlixHQMediaType;
   releaseDate: string;
 }
-
+interface FLIXSubType {
-function castSubtitles({ url, lang }: { url: string; lang: string }) {
+  url: string;
+  lang: string;
+}
+function convertSubtitles({ url, lang }: FLIXSubType): MWCaption | null {
+  if (lang.includes("(maybe)")) return null;
+  const supported = isSupportedSubtitle(url);
+  if (!supported) return null;
+  const type = getMWCaptionTypeFromUrl(url);
   return {
     url,
     langIso: lang,
-    type:
+    type,
-      url.substring(url.length - 3) === "vtt"
-        ? MWCaptionType.VTT
-        : MWCaptionType.SRT,
   };
 }
 
@@ -55,7 +59,7 @@ registerProvider({
       throw new Error("Unsupported type");
     }
     // search for relevant item
-    const searchResults = await proxiedFetch<any>(
+    const searchResults = await mwFetch<any>(
       `/${encodeURIComponent(media.meta.title)}`,
       {
         baseURL: flixHqBase,
@@ -75,7 +79,7 @@ registerProvider({
 
     // get media info
     progress(25);
-    const mediaInfo = await proxiedFetch<any>(`/info/${foundItem.id}`, {
+    const mediaInfo = await mwFetch<any>(`/info/${foundItem.id}`, {
       baseURL: flixHqBase,
       params: {
         type: flixTypeToMWType(foundItem.type),
@@ -99,7 +103,7 @@ registerProvider({
     }
     if (!episodeId) throw new Error("No watchable item found");
     progress(75);
-    const watchInfo = await proxiedFetch<any>(`/watch/${episodeId}`, {
+    const watchInfo = await mwFetch<any>(`/watch/${episodeId}`, {
       baseURL: flixHqBase,
       params: {
         id: mediaInfo.id,
@@ -117,11 +121,7 @@ registerProvider({
         streamUrl: source.url,
         quality: qualityMap[source.quality],
         type: source.isM3U8 ? MWStreamType.HLS : MWStreamType.MP4,
-        captions: watchInfo.subtitles
+        captions: watchInfo.subtitles.map(convertSubtitles).filter(Boolean),
-          .filter(
-            (x: { url: string; lang: string }) => !x.lang.includes("(maybe)")
-          )
-          .map(castSubtitles),
       },
     };
   },

src/backend/providers/gdriveplayer.ts

@@ -41,6 +41,7 @@ registerProvider({
   type: [MWMediaType.MOVIE],
 
   async scrape({ progress, media: { imdbId } }) {
+    if (!imdbId) throw new Error("not enough info");
     progress(10);
     const streamRes = await proxiedFetch<string>(
       "https://database.gdriveplayer.us/player.php",

src/backend/providers/hdwatched.ts

@@ -123,6 +123,7 @@ registerProvider({
   type: [MWMediaType.MOVIE, MWMediaType.SERIES],
   async scrape(options) {
     const { media, progress } = options;
+    if (!media.imdbId) throw new Error("not enough info");
     if (!this.type.includes(media.meta.type)) {
       throw new Error("Unsupported type");
     }

src/backend/providers/superstream/index.ts

@@ -1,6 +1,10 @@
 import CryptoJS from "crypto-js";
 import { customAlphabet } from "nanoid";
 
+import {
+  getMWCaptionTypeFromUrl,
+  isSupportedSubtitle,
+} from "@/backend/helpers/captions";
 import { proxiedFetch } from "@/backend/helpers/fetch";
 import { registerProvider } from "@/backend/helpers/register";
 import {
@@ -111,6 +115,30 @@ const getBestQuality = (list: any[]) => {
   );
 };
 
+const convertSubtitles = (subtitleGroup: any): MWCaption | null => {
+  let subtitles = subtitleGroup.subtitles;
+  subtitles = subtitles
+    .map((subFile: any) => {
+      const supported = isSupportedSubtitle(subFile.file_path);
+      if (!supported) return null;
+      const type = getMWCaptionTypeFromUrl(subFile.file_path);
+      return {
+        ...subFile,
+        type: type as MWCaptionType,
+      };
+    })
+    .filter(Boolean);
+
+  if (subtitles.length === 0) return null;
+  const subFile = subtitles[0];
+  return {
+    needsProxy: true,
+    langIso: subtitleGroup.language,
+    url: subFile.file_path,
+    type: subFile.type,
+  };
+};
+
 registerProvider({
   id: "superstream",
   displayName: "Superstream",
@@ -164,16 +192,9 @@ registerProvider({
 
       const subtitleRes = (await get(subtitleApiQuery)).data;
 
-      const mappedCaptions = subtitleRes.list.map(
+      const mappedCaptions = subtitleRes.list
-        (subtitle: any): MWCaption => {
+        .map(convertSubtitles)
-          return {
+        .filter(Boolean);
-            needsProxy: true,
-            langIso: subtitle.language,
-            url: subtitle.subtitles[0].file_path,
-            type: MWCaptionType.SRT,
-          };
-        }
-      );
 
       return {
         embeds: [],
@@ -224,22 +245,9 @@ registerProvider({
     };
 
     const subtitleRes = (await get(subtitleApiQuery)).data;
-
+    const mappedCaptions = subtitleRes.list
-    const mappedCaptions = subtitleRes.list.map(
+      .map(convertSubtitles)
-      (subtitle: any): MWCaption | null => {
+      .filter(Boolean);
-        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: {

src/components/Dropdown.tsx

@@ -37,7 +37,7 @@ export function Dropdown(props: DropdownProps) {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <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">
+              <Listbox.Options className="absolute left-0 right-0 top-10 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:top-10 sm:text-sm">
                 {props.options.map((opt) => (
                   <Listbox.Option
                     className={({ active }) =>

src/components/SearchBar.tsx

@@ -40,7 +40,7 @@ export function SearchBarInput(props: SearchBarProps) {
 
   return (
     <div className="relative flex flex-col rounded-[28px] bg-denim-400 transition-colors focus-within:bg-denim-400 hover:bg-denim-500 sm:flex-row sm:items-center">
-      <div className="pointer-events-none absolute left-5 top-0 bottom-0 flex max-h-14 items-center">
+      <div className="pointer-events-none absolute bottom-0 left-5 top-0 flex max-h-14 items-center">
         <Icon icon={Icons.SEARCH} />
       </div>
 
@@ -52,7 +52,7 @@ export function SearchBarInput(props: SearchBarProps) {
         placeholder={props.placeholder}
       />
 
-      <div className="px-4 py-4 pt-0 sm:py-2 sm:px-2">
+      <div className="px-4 py-4 pt-0 sm:px-2 sm:py-2">
         <DropdownButton
           icon={Icons.SEARCH}
           open={dropdownOpen}

src/components/layout/Backdrop.tsx

@@ -100,7 +100,7 @@ export function BackdropContainer(
   return (
     <div ref={root}>
       {createPortal(
-        <div className="pointer-events-none fixed top-0 left-0 z-[999]">
+        <div className="pointer-events-none fixed left-0 top-0 z-[999]">
           <Backdrop active={props.active} {...props} />
           <div ref={copy} className="pointer-events-auto absolute">
             {props.children}

src/components/layout/Navigation.tsx

@@ -24,7 +24,7 @@ export function Navigation(props: NavigationProps) {
         top: `${bannerHeight}px`,
       }}
     >
-      <div className="fixed left-0 right-0 flex items-center justify-between py-5 px-7">
+      <div className="fixed left-0 right-0 flex items-center justify-between px-7 py-5">
         <div
           className={`${
             props.bg ? "opacity-100" : "opacity-0"

src/components/media/EpisodeButton.tsx

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

src/components/media/MediaCard.tsx

@@ -61,7 +61,7 @@ function MediaCardContent({
           {series ? (
             <div
               className={[
-                "absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors",
+                "absolute right-2 top-2 rounded-md bg-denim-200 px-2 py-1 transition-colors",
                 closable ? "" : "group-hover:bg-denim-500",
               ].join(" ")}
             >

src/components/popout/FloatingCard.tsx

@@ -167,7 +167,7 @@ export const FloatingCardView = {
             <div>{props.action ?? null}</div>
           </div>
 
-          <h2 className="mt-8 mb-2 text-3xl font-bold text-white">
+          <h2 className="mb-2 mt-8 text-3xl font-bold text-white">
             {props.title}
           </h2>
           <p>{props.description}</p>

src/setup/i18n.ts

@@ -1,13 +1,15 @@
 import i18n from "i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 
 // Languages
 import { captionLanguages } from "./iso6391";
+import cs from "./locales/cs/translation.json";
+import de from "./locales/de/translation.json";
 import en from "./locales/en/translation.json";
 import fr from "./locales/fr/translation.json";
 import nl from "./locales/nl/translation.json";
 import tr from "./locales/tr/translation.json";
+import zh from "./locales/zh/translation.json";
 
 const locales = {
   en: {
@@ -22,11 +24,17 @@ const locales = {
   fr: {
     translation: fr,
   },
+  de: {
+    translation: de,
+  },
+  zh: {
+    translation: zh,
+  },
+  cs: {
+    translation: cs,
+  },
 };
 i18n
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  .use(LanguageDetector)
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
   // init i18next

src/setup/locales/cs/translation.json

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

src/setup/locales/de/translation.json

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

src/setup/locales/en/translation.json

@@ -58,7 +58,7 @@
     "backToHomeShort": "Back",
     "seasonAndEpisode": "S{{season}} E{{episode}}",
     "timeLeft": "{{timeLeft}} left",
-    "finishAt": "Finish at {{timeFinished}}",
+    "finishAt": "Finish at {{timeFinished, datetime}}",
     "buttons": {
       "episodes": "Episodes",
       "source": "Source",

src/setup/locales/fr/translation.json

@@ -27,7 +27,7 @@
     }
   },
   "seasons": {
-    "seasonAndEpisode": "S{{saison}} E{{épisode}}"
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
   },
   "notFound": {
     "genericTitle": "Introuvable",
@@ -58,7 +58,7 @@
     "backToHomeShort": "Retour",
     "seasonAndEpisode": "S{{season}} E{{episode}}",
     "timeLeft": "{{timeLeft}} restant",
-    "finishAt": "Terminer à {{timeFinished}}",
+    "finishAt": "Terminer à {{timeFinished, datetime}}",
     "buttons": {
       "episodes": "Épisodes",
       "source": "Source",

src/setup/locales/nl/translation.json

@@ -58,7 +58,7 @@
     "backToHomeShort": "Terug",
     "seasonAndEpisode": "S{{season}} A{{episode}}",
     "timeLeft": "Nog {{timeLeft}}",
-    "finishAt": "Afgelopen om {{timeFinished}}",
+    "finishAt": "Afgelopen om {{timeFinished, datetime}}",
     "buttons": {
       "episodes": "Afleveringen",
       "source": "Bron",

src/setup/locales/zh/translation.json

@@ -0,0 +1,127 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "正在获取您最喜欢的连续剧……",
+    "loading_movie": "正在获取您最喜欢的影片……",
+    "loading": "载入中……",
+    "allResults": "以上是我们能找到的所有结果！",
+    "noResults": "我们找不到任何结果！",
+    "allFailed": "查找媒体失败，请重试！",
+    "headingTitle": "搜索结果",
+    "bookmarks": "书签",
+    "continueWatching": "继续观看",
+    "title": "您想看些什么？",
+    "placeholder": "您想看些什么？"
+  },
+  "media": {
+    "movie": "电影",
+    "series": "连续剧",
+    "stopEditing": "退出编辑",
+    "errors": {
+      "genericTitle": "哎呀，出问题了！",
+      "failedMeta": "加载元数据失败",
+      "mediaFailed": "我们未能请求到您要求的媒体，检查互联网连接并重试。",
+      "videoFailed": "我们在播放您要求的视频时遇到了错误。如果错误持续发生，请向 <0>Discord 服务器</0>或 <1>GitHub</1> 提交问题报告。"
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "第{{season}}季 第{{episode}}集"
+  },
+  "notFound": {
+    "genericTitle": "未找到",
+    "backArrow": "返回首页",
+    "media": {
+      "title": "无法找到媒体",
+      "description": "我们无法找到您请求的媒体。它可能已被删除，或您篡改了 URL"
+    },
+    "provider": {
+      "title": "该内容提供者已被停用",
+      "description": "我们的提供者出现问题，或是太不稳定，导致无法使用，所以我们不得不将其停用。"
+    },
+    "page": {
+      "title": "无法找到页面",
+      "description": "我们已经到处找过了：不管是垃圾桶下、橱柜里或是代理之后。但最终并没有发现您查找的页面。"
+    }
+  },
+  "searchBar": {
+    "movie": "电影",
+    "series": "连续剧",
+    "Search": "搜索"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "正在为您探测最佳视频",
+    "noVideos": "哎呀，无法为您找到任何视频",
+    "loading": "载入中……",
+    "backToHome": "返回首页",
+    "backToHomeShort": "返回",
+    "seasonAndEpisode": "第{{season}}季 第{{episode}}集",
+    "timeLeft": "还剩余 {{timeLeft}}",
+    "finishAt": "在 {{timeFinished, datetime}} 结束",
+    "buttons": {
+      "episodes": "分集",
+      "source": "视频源",
+      "captions": "字幕",
+      "download": "下载",
+      "settings": "设置",
+      "pictureInPicture": "画中画",
+      "playbackSpeed": "播放速度"
+    },
+    "popouts": {
+      "back": "返回",
+      "sources": "视频源",
+      "seasons": "分季",
+      "captions": "字幕",
+      "playbackSpeed": "播放速度",
+      "customPlaybackSpeed": "自定义播放速度",
+      "captionPreferences": {
+        "title": "自定义",
+        "delay": "延迟",
+        "fontSize": "尺寸",
+        "opacity": "透明度",
+        "color": "颜色"
+      },
+      "episode": "第{{index}}集 - {{title}}",
+      "noCaptions": "没有字幕",
+      "linkedCaptions": "已链接字幕",
+      "customCaption": "自定义字幕",
+      "uploadCustomCaption": "上传字幕",
+      "noEmbeds": "未发现该视频源的嵌入内容",
+      "errors": {
+        "loadingWentWong": "加载 {{seasonTitle}} 的分集时出现了一些问题",
+        "embedsError": "为您喜欢的这一东西加载嵌入内容时出现了一些问题"
+      },
+      "descriptions": {
+        "sources": "您想使用哪个内容提供者？",
+        "embeds": "选择要观看的视频",
+        "seasons": "选择您要观看的季",
+        "episode": "选择一个分集",
+        "captions": "选择字幕语言",
+        "captionPreferences": "让字幕看起来如您所想",
+        "playbackSpeed": "改变播放速度"
+      }
+    },
+    "errors": {
+      "fatalError": "视频播放器遇到致命错误，请向 <0>Discord 服务器</0>或 <1>GitHub</1> 报告。"
+    }
+  },
+  "settings": {
+    "title": "设置",
+    "language": "语言",
+    "captionLanguage": "字幕语言"
+  },
+  "v3": {
+    "newSiteTitle": "新的版本现已发布！",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web 将很快转移到新的域名：<0>https://movie-web.app</0>。请确保已经更新全部书签链接，<1>旧网站将于 {{date}} 停止工作。</1>",
+    "tireless": "为了这一新版本，我们不懈努力，希望您会喜欢我们在过去几个月中所做的一切。",
+    "leaveAnnouncement": "请带我去！"
+  },
+  "casting": {
+    "casting": "正在投射到设备……"
+  },
+  "errors": {
+    "offline": "检查您的互联网连接"
+  }
+}

src/video/components/VideoPlayer.tsx

@@ -120,7 +120,7 @@ export function VideoPlayer(props: Props) {
               <Transition
                 animation="slide-down"
                 show={show}
-                className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2"
+                className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2"
               >
                 <HeaderAction
                   showControls={isMobile}

src/video/components/actions/CaptionRendererAction.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useAsync } from "react-use";
 import { ContentCaption } from "subsrt-ts/dist/types/handler";
 
@@ -50,9 +50,14 @@ export function CaptionRendererAction({
   const descriptor = useVideoPlayerDescriptor();
   const source = useSource(descriptor).source;
   const videoTime = useProgress(descriptor).time;
-  const { captionSettings } = useSettings();
+  const { captionSettings, setCaptionDelay } = useSettings();
   const captions = useRef<ContentCaption[]>([]);
 
+  const captionSetRef = useRef<(delay: number) => void>(setCaptionDelay);
+  useEffect(() => {
+    captionSetRef.current = setCaptionDelay;
+  }, [setCaptionDelay]);
+
   useAsync(async () => {
     const blobUrl = source?.caption?.url;
     if (blobUrl) {
@@ -63,20 +68,38 @@ export function CaptionRendererAction({
       } catch (error) {
         captions.current = [];
       }
+      // reset delay on every subtitle change
+      setCaptionDelay(0);
     } else {
       captions.current = [];
     }
   }, [source?.caption?.url]);
 
+  // reset delay when loading new source url
+  useEffect(() => {
+    captionSetRef.current(0);
+  }, [source?.caption?.url]);
+
+  const isVisible = useCallback(
+    (
+      start: number,
+      end: number,
+      delay: number,
+      currentTime: number
+    ): boolean => {
+      const delayedStart = start / 1000 + delay;
+      const delayedEnd = end / 1000 + delay;
+      return (
+        Math.max(0, delayedStart) <= currentTime &&
+        Math.max(0, delayedEnd) >= currentTime
+      );
+    },
+    []
+  );
   if (!captions.current.length) return null;
-  const isVisible = (start: number, end: number): boolean => {
+  const visibileCaptions = captions.current.filter(({ start, end }) =>
-    const delayedStart = start / 1000 + captionSettings.delay;
+    isVisible(start, end, captionSettings.delay, videoTime)
-    const delayedEnd = end / 1000 + captionSettings.delay;
+  );
-    return (
-      Math.max(0, delayedStart) <= videoTime &&
-      Math.max(0, delayedEnd) >= videoTime
-    );
-  };
   return (
     <Transition
       className={[
@@ -86,12 +109,9 @@ export function CaptionRendererAction({
       animation="slide-up"
       show
     >
-      {captions.current.map(
+      {visibileCaptions.map(({ start, end, content }) => (
-        ({ start, end, content }) =>
+        <CaptionCue key={`${start}-${end}`} text={content} />
-          isVisible(start, end) && (
+      ))}
-            <CaptionCue key={`${start}-${end}`} text={content} />
-          )
-      )}
     </Transition>
   );
 }

src/video/components/actions/TimeAction.tsx

@@ -55,20 +55,20 @@ export function TimeAction(props: Props) {
     hasHours
   );
   const duration = formatSeconds(videoTime.duration, hasHours);
-  const timeLeft = formatSeconds(
+  const remaining = formatSeconds(
     (videoTime.duration - videoTime.time) / mediaPlaying.playbackSpeed,
     hasHours
   );
   const timeFinished = new Date(
     new Date().getTime() +
-      (videoTime.duration * 1000) / mediaPlaying.playbackSpeed
+      ((videoTime.duration - videoTime.time) * 1000) /
-  ).toLocaleTimeString("en-US", {
+        mediaPlaying.playbackSpeed
-    hour: "numeric",
+  );
-    minute: "numeric",
-    hour12: true,
-  });
   const formattedTimeFinished = ` - ${t("videoPlayer.finishAt", {
     timeFinished,
+    formatParams: {
+      timeFinished: { hour: "numeric", minute: "numeric" },
+    },
   })}`;
 
   let formattedTime: string;
@@ -77,10 +77,10 @@ export function TimeAction(props: Props) {
     formattedTime = `${currentTime} ${props.noDuration ? "" : `/ ${duration}`}`;
   } else if (timeFormat === VideoPlayerTimeFormat.REMAINING && !isMobile) {
     formattedTime = `${t("videoPlayer.timeLeft", {
-      timeLeft,
+      timeLeft: remaining,
     })}${videoTime.time === videoTime.duration ? "" : formattedTimeFinished} `;
   } else if (timeFormat === VideoPlayerTimeFormat.REMAINING && isMobile) {
-    formattedTime = `-${timeLeft}`;
+    formattedTime = `-${remaining}`;
   } else {
     formattedTime = "";
   }

src/video/components/actions/VolumeAdjustedAction.tsx

@@ -14,7 +14,7 @@ export function VolumeAdjustedAction() {
         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",
+        "absolute left-1/2 z-[100] flex -translate-x-1/2 items-center space-x-4 rounded-full bg-bink-300 bg-opacity-50 px-5 py-2 transition-all duration-100",
       ].join(" ")}
     >
       <Icon

src/video/components/actions/list-entries/QualityDisplayAction.tsx

@@ -8,7 +8,7 @@ export function QualityDisplayAction() {
   if (!source.source) return null;
 
   return (
-    <div className="rounded-md bg-denim-300 py-1 px-2 transition-colors">
+    <div className="rounded-md bg-denim-300 px-2 py-1 transition-colors">
       <p className="text-center text-xs font-bold text-slate-300 transition-colors">
         {source.source.quality}
       </p>

src/video/components/parts/VideoErrorBoundary.tsx

@@ -64,7 +64,7 @@ export class VideoErrorBoundary extends Component<
 
     return (
       <div className="absolute inset-0 bg-denim-100">
-        <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
+        <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2">
           <VideoPlayerHeader
             media={this.props.media}
             onClick={this.props.onGoBack}

src/video/components/parts/VideoPlayerError.tsx

@@ -32,7 +32,7 @@ export function VideoPlayerError(props: VideoPlayerErrorProps) {
           {err?.name}: {err?.description}
         </p>
       </div>
-      <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
+      <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col px-8 py-6 pb-2">
         <VideoPlayerHeader media={meta?.meta.meta} onClick={props.onGoBack} />
       </div>
     </div>

src/views/developer/VideoTesterView.tsx

@@ -51,7 +51,7 @@ export default function VideoTesterView() {
 
   if (video) {
     return (
-      <div className="fixed top-0 left-0 h-[100dvh] w-screen">
+      <div className="fixed left-0 top-0 h-[100dvh] w-screen">
         <Helmet>
           <html data-full="true" />
         </Helmet>

src/views/media/MediaErrorView.tsx

@@ -14,7 +14,7 @@ export function MediaFetchErrorView() {
       <Helmet>
         <title>{t("media.errors.failedMeta")}</title>
       </Helmet>
-      <div className="fixed inset-x-0 top-0 py-6 px-8">
+      <div className="fixed inset-x-0 top-0 px-8 py-6">
         <VideoPlayerHeader onClick={goBack} />
       </div>
       <ErrorMessage>

src/views/media/MediaView.tsx

@@ -34,7 +34,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
       <Helmet>
         <title>{t("videoPlayer.loading")}</title>
       </Helmet>
-      <div className="absolute inset-x-0 top-0 py-6 px-8">
+      <div className="absolute inset-x-0 top-0 px-8 py-6">
         <VideoPlayerHeader onClick={props.onGoBack} />
       </div>
       <div className="flex flex-col items-center">
@@ -68,7 +68,7 @@ function MediaViewScraping(props: MediaViewScrapingProps) {
       <Helmet>
         <title>{props.meta.meta.title}</title>
       </Helmet>
-      <div className="absolute inset-x-0 top-0 py-6 px-8">
+      <div className="absolute inset-x-0 top-0 px-8 py-6">
         <VideoPlayerHeader onClick={props.onGoBack} media={props.meta.meta} />
       </div>
       <div className="flex flex-col items-center transition-opacity duration-200">
@@ -134,7 +134,7 @@ export function MediaViewPlayer(props: MediaViewPlayerProps) {
   }
 
   return (
-    <div className="fixed top-0 left-0 h-[100dvh] w-screen">
+    <div className="fixed left-0 top-0 h-[100dvh] w-screen">
       <Helmet>
         <html data-full="true" />
       </Helmet>

src/views/notfound/NotFoundView.tsx

@@ -23,7 +23,7 @@ export function NotFoundWrapper(props: {
         <title>{t("notFound.genericTitle")}</title>
       </Helmet>
       {props.video ? (
-        <div className="absolute inset-x-0 top-0 py-6 px-8">
+        <div className="absolute inset-x-0 top-0 px-8 py-6">
           <VideoPlayerHeader onClick={goBack} />
         </div>
       ) : (
@@ -46,7 +46,7 @@ export function NotFoundMedia() {
         className="mb-6 text-xl text-bink-600"
       />
       <Title>{t("notFound.media.title")}</Title>
-      <p className="mt-5 mb-12 max-w-sm">{t("notFound.media.description")}</p>
+      <p className="mb-12 mt-5 max-w-sm">{t("notFound.media.description")}</p>
       <ArrowLink to="/" linkText={t("notFound.backArrow")} />
     </div>
   );
@@ -62,7 +62,7 @@ export function NotFoundProvider() {
         className="mb-6 text-xl text-bink-600"
       />
       <Title>{t("notFound.provider.title")}</Title>
-      <p className="mt-5 mb-12 max-w-sm">
+      <p className="mb-12 mt-5 max-w-sm">
         {t("notFound.provider.description")}
       </p>
       <ArrowLink to="/" linkText={t("notFound.backArrow")} />
@@ -80,7 +80,7 @@ export function NotFoundPage() {
         className="mb-6 text-xl text-bink-600"
       />
       <Title>{t("notFound.page.title")}</Title>
-      <p className="mt-5 mb-12 max-w-sm">{t("notFound.page.description")}</p>
+      <p className="mb-12 mt-5 max-w-sm">{t("notFound.page.description")}</p>
       <ArrowLink to="/" linkText={t("notFound.backArrow")} />
     </NotFoundWrapper>
   );

src/views/search/HomeView.tsx

@@ -169,7 +169,7 @@ function NewDomainModal() {
             }}
           />
           <div className="relative flex items-center justify-center">
-            <div className="rounded-full bg-bink-200 py-4 px-12 text-center text-sm font-bold text-white md:text-xl">
+            <div className="rounded-full bg-bink-200 px-12 py-4 text-center text-sm font-bold text-white md:text-xl">
               {t("v3.newDomain")}
             </div>
           </div>
@@ -186,7 +186,7 @@ function NewDomainModal() {
           </p>
           <p>{t("v3.tireless")}</p>
         </div>
-        <div className="mt-16 mb-6 flex items-center justify-center">
+        <div className="mb-6 mt-16 flex items-center justify-center">
           <Button icon={Icons.PLAY} onClick={() => closeModal()}>
             {t("v3.leaveAnnouncement")}
           </Button>

src/views/search/SearchLoadingView.tsx

@@ -8,7 +8,7 @@ export function SearchLoadingView() {
   const [query] = useSearchQuery();
   return (
     <Loading
-      className="mt-40 mb-24 "
+      className="mb-24 mt-40 "
       text={
         t(`search.loading_${query.type}`) ||
         t("search.loading") ||

src/views/search/SearchResultsView.tsx

@@ -18,7 +18,7 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
   const icon: Icons = props.failed ? Icons.WARNING : Icons.EYE_SLASH;
 
   return (
-    <div className="mt-40 mb-24  flex flex-col items-center justify-center space-y-3 text-center">
+    <div className="mb-24 mt-40  flex flex-col items-center justify-center space-y-3 text-center">
       <IconPatch
         icon={icon}
         className={`text-xl ${props.failed ? "text-red-400" : "text-bink-600"}`}

src/views/search/SearchView.tsx

@@ -33,7 +33,7 @@ export function SearchView() {
         <Navigation bg={showBg} />
         <ThinContainer>
           <div className="mt-44 space-y-16 text-center">
-            <div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center">
+            <div className="absolute bottom-0 left-0 right-0 flex h-0 justify-center">
               <div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
             </div>
             <div className="relative z-10 mb-16">