Merge pull request #361 from movie-web/dev

v3.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "movie-web",
-  "version": "3.0.14",
+  "version": "3.1.0",
   "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__/providers/providers.test.ts

@@ -4,7 +4,7 @@ import "@/backend";
 import { testData } from "@/__tests__/providers/testdata";
 import { getProviders } from "@/backend/helpers/register";
 import { runProvider } from "@/backend/helpers/run";
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 
 describe("providers", () => {
   const providers = getProviders();

src/__tests__/providers/testdata.ts

@@ -1,5 +1,5 @@
 import { DetailedMeta } from "@/backend/metadata/getmeta";
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 
 export const testData: DetailedMeta[] = [
   {

src/__tests__/subtitles/subtitles.test.ts

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

src/__tests__/subtitles/testdata.ts

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

src/backend/embeds/mp4upload.ts

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

src/backend/embeds/streamsb.ts

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

src/backend/embeds/upcloud.ts

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

src/backend/helpers/captions.ts

@@ -1,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/embed.ts

@@ -4,6 +4,9 @@ export enum MWEmbedType {
   M4UFREE = "m4ufree",
   STREAMM4U = "streamm4u",
   PLAYM4U = "playm4u",
+  UPCLOUD = "upcloud",
+  STREAMSB = "streamsb",
+  MP4UPLOAD = "mp4upload",
 }
 
 export type MWEmbed = {

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/provider.ts

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

src/backend/helpers/scrape.ts

@@ -3,7 +3,7 @@ import { getEmbedScraperByType, getProviders } from "./register";
 import { runEmbedScraper, runProvider } from "./run";
 import { MWStream } from "./streams";
 import { DetailedMeta } from "../metadata/getmeta";
-import { MWMediaType } from "../metadata/types";
+import { MWMediaType } from "../metadata/types/mw";
 
 interface MWProgressData {
   type: "embed" | "provider";

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,9 +7,18 @@ import "./providers/superstream";
 import "./providers/netfilm";
 import "./providers/m4ufree";
 import "./providers/hdwatched";
+import "./providers/2embed";
+import "./providers/sflix";
+import "./providers/gomovies";
+import "./providers/kissasian";
+import "./providers/streamflix";
+import "./providers/remotestream";
 
 // embeds
 import "./embeds/streamm4u";
 import "./embeds/playm4u";
+import "./embeds/upcloud";
+import "./embeds/streamsb";
+import "./embeds/mp4upload";
 
 initializeScraperStore();

src/backend/metadata/getmeta.ts

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

src/backend/metadata/justwatch.ts

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

src/backend/metadata/search.ts

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

src/backend/metadata/tmdb.ts

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

src/backend/metadata/types/justwatch.ts

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

src/backend/metadata/types/mw.ts

@@ -45,3 +45,9 @@ export interface MWQuery {
   searchQuery: string;
   type: MWMediaType;
 }
+
+export interface DetailedMeta {
+  meta: MWMediaMeta;
+  imdbId?: string;
+  tmdbId?: string;
+}

src/backend/metadata/types/tmdb.ts

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

src/backend/providers/2embed.ts

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

src/backend/providers/flixhq.ts

@@ -1,15 +1,15 @@
 import { compareTitle } from "@/utils/titleMatch";
 
-import { proxiedFetch } from "../helpers/fetch";
-import { registerProvider } from "../helpers/register";
 import {
-  MWCaptionType,
-  MWStreamQuality,
-  MWStreamType,
-} from "../helpers/streams";
-import { MWMediaType } from "../metadata/types";
+  getMWCaptionTypeFromUrl,
+  isSupportedSubtitle,
+} from "../helpers/captions";
+import { mwFetch } from "../helpers/fetch";
+import { registerProvider } from "../helpers/register";
+import { MWCaption, MWStreamQuality, MWStreamType } from "../helpers/streams";
+import { MWMediaType } from "../metadata/types/mw";
 
-const flixHqBase = "https://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;
 }
-
-function castSubtitles({ url, lang }: { url: string; lang: string }) {
+interface FLIXSubType {
+  url: string;
+  lang: string;
+}
+function convertSubtitles({ url, lang }: FLIXSubType): MWCaption | null {
+  if (lang.includes("(maybe)")) return null;
+  const supported = isSupportedSubtitle(url);
+  if (!supported) return null;
+  const type = getMWCaptionTypeFromUrl(url);
   return {
     url,
     langIso: lang,
-    type:
-      url.substring(url.length - 3) === "vtt"
-        ? MWCaptionType.VTT
-        : MWCaptionType.SRT,
+    type,
   };
 }
 
@@ -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
-          .filter(
-            (x: { url: string; lang: string }) => !x.lang.includes("(maybe)")
-          )
-          .map(castSubtitles),
+        captions: watchInfo.subtitles.map(convertSubtitles).filter(Boolean),
       },
     };
   },

src/backend/providers/gdriveplayer.ts

@@ -3,7 +3,7 @@ import { unpack } from "unpacker";
 
 import { registerProvider } from "@/backend/helpers/register";
 import { MWStreamQuality } from "@/backend/helpers/streams";
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 
 import { proxiedFetch } from "../helpers/fetch";
 
@@ -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/gomovies.ts

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

src/backend/providers/hdwatched.ts

@@ -2,7 +2,7 @@ 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";
+import { MWMediaType } from "../metadata/types/mw";
 
 const hdwatchedBase = "https://www.hdwatched.xyz";
 
@@ -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/kissasian.ts

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

src/backend/providers/m4ufree.ts

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

src/backend/providers/netfilm.ts

@@ -5,7 +5,7 @@ import {
   MWStreamQuality,
   MWStreamType,
 } from "../helpers/streams";
-import { MWMediaType } from "../metadata/types";
+import { MWMediaType } from "../metadata/types/mw";
 
 const netfilmBase = "https://net-film.vercel.app";
 

src/backend/providers/remotestream.ts

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

src/backend/providers/sflix.ts

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

src/backend/providers/streamflix.ts

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

src/backend/providers/superstream/index.ts

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { MWMediaType, MWQuery } from "@/backend/metadata/types";
+import { MWMediaType, MWQuery } from "@/backend/metadata/types/mw";
 
 import { DropdownButton } from "./buttons/DropdownButton";
 import { Icon, Icons } from "./Icon";
@@ -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

@@ -1,8 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-import { JWMediaToId } from "@/backend/metadata/justwatch";
-import { MWMediaMeta } from "@/backend/metadata/types";
+import { TMDBMediaToId } from "@/backend/metadata/getmeta";
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
 import { DotList } from "@/components/text/DotList";
 
 import { IconPatch } from "../buttons/IconPatch";
@@ -13,7 +13,7 @@ export interface MediaCardProps {
   linkable?: boolean;
   series?: {
     episode: number;
-    season: number;
+    season?: number;
     episodeId: string;
     seasonId: string;
   };
@@ -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(" ")}
             >
@@ -72,7 +72,7 @@ function MediaCardContent({
                 ].join(" ")}
               >
                 {t("seasons.seasonAndEpisode", {
-                  season: series.season,
+                  season: series.season || 1,
                   episode: series.episode,
                 })}
               </p>
@@ -132,12 +132,17 @@ export function MediaCard(props: MediaCardProps) {
   const canLink = props.linkable && !props.closable;
 
   let link = canLink
-    ? `/media/${encodeURIComponent(JWMediaToId(props.media))}`
+    ? `/media/${encodeURIComponent(TMDBMediaToId(props.media))}`
     : "#";
-  if (canLink && props.series)
-    link += `/${encodeURIComponent(props.series.seasonId)}/${encodeURIComponent(
-      props.series.episodeId
-    )}`;
+  if (canLink && props.series) {
+    if (props.series.season === 0 && !props.series.episodeId) {
+      link += `/${encodeURIComponent(props.series.seasonId)}`;
+    } else {
+      link += `/${encodeURIComponent(
+        props.series.seasonId
+      )}/${encodeURIComponent(props.series.episodeId)}`;
+    }
+  }
 
   if (!props.linkable) return <span>{content}</span>;
   return (

src/components/media/WatchedMediaCard.tsx

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

src/components/popout/FloatingCard.tsx

@@ -154,7 +154,7 @@ export const FloatingCardView = {
           className="flex cursor-pointer items-center space-x-2 transition-colors duration-200 hover:text-white"
         >
           <Icon icon={Icons.X} />
-          <span>Close</span>
+          <span>{t("videoPlayer.popouts.close")}</span>
         </div>
       );
 
@@ -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/hooks/useQueryParams.ts

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

src/hooks/useScrape.ts

@@ -3,7 +3,7 @@ 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 { MWMediaType } from "@/backend/metadata/types/mw";
 
 export interface ScrapeEventLog {
   type: "provider" | "embed";

src/hooks/useSearchQuery.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { generatePath, useHistory, useRouteMatch } from "react-router-dom";
 
-import { MWMediaType, MWQuery } from "@/backend/metadata/types";
+import { MWMediaType, MWQuery } from "@/backend/metadata/types/mw";
 
 function getInitialValue(params: { type: string; query: string }) {
   const type =

src/index.tsx

@@ -8,13 +8,14 @@ import { registerSW } from "virtual:pwa-register";
 import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
 import App from "@/setup/App";
 import { conf } from "@/setup/config";
+import i18n from "@/setup/i18n";
 
 import "@/setup/ga";
 import "@/setup/sentry";
-import "@/setup/i18n";
 import "@/setup/index.css";
 import "@/backend";
 import { initializeChromecast } from "./setup/chromecast";
+import { SettingsStore } from "./state/settings/store";
 import { initializeStores } from "./utils/storage";
 
 // initialize
@@ -30,6 +31,7 @@ registerSW({
 
 const LazyLoadedApp = React.lazy(async () => {
   await initializeStores();
+  i18n.changeLanguage(SettingsStore.get().language ?? "en");
   return {
     default: App,
   };

src/setup/App.tsx

@@ -1,7 +1,14 @@
-import { lazy } from "react";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { ReactElement, lazy, useEffect } from "react";
+import {
+  Redirect,
+  Route,
+  Switch,
+  useHistory,
+  useLocation,
+} from "react-router-dom";
 
-import { MWMediaType } from "@/backend/metadata/types";
+import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { BannerContextProvider } from "@/hooks/useBanner";
 import { Layout } from "@/setup/Layout";
 import { BookmarkContextProvider } from "@/state/bookmark";
@@ -12,6 +19,22 @@ import { NotFoundPage } from "@/views/notfound/NotFoundView";
 import { V2MigrationView } from "@/views/other/v2Migration";
 import { SearchView } from "@/views/search/SearchView";
 
+function LegacyUrlView({ children }: { children: ReactElement }) {
+  const location = useLocation();
+  const { replace } = useHistory();
+
+  useEffect(() => {
+    const url = location.pathname;
+    if (!isLegacyUrl(url)) return;
+    convertLegacyUrl(location.pathname).then((convertedUrl) => {
+      replace(convertedUrl ?? "/");
+    });
+  }, [location.pathname, replace]);
+
+  if (isLegacyUrl(location.pathname)) return null;
+  return children;
+}
+
 function App() {
   return (
     <SettingsProvider>
@@ -27,12 +50,16 @@ function App() {
                 </Route>
 
                 {/* pages */}
-                <Route exact path="/media/:media" component={MediaView} />
-                <Route
-                  exact
-                  path="/media/:media/:season/:episode"
-                  component={MediaView}
-                />
+                <Route exact path="/media/:media">
+                  <LegacyUrlView>
+                    <MediaView />
+                  </LegacyUrlView>
+                </Route>
+                <Route exact path="/media/:media/:season/:episode">
+                  <LegacyUrlView>
+                    <MediaView />
+                  </LegacyUrlView>
+                </Route>
                 <Route
                   exact
                   path="/search/:type/:query?"

src/setup/i18n.ts

@@ -1,18 +1,27 @@
 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 it from "./locales/it/translation.json";
 import nl from "./locales/nl/translation.json";
+import pirate from "./locales/pirate/translation.json";
+import pl from "./locales/pl/translation.json";
 import tr from "./locales/tr/translation.json";
+import vi from "./locales/vi/translation.json";
+import zh from "./locales/zh/translation.json";
 
 const locales = {
   en: {
     translation: en,
   },
+  it: {
+    translation: it,
+  },
   nl: {
     translation: nl,
   },
@@ -22,11 +31,26 @@ const locales = {
   fr: {
     translation: fr,
   },
+  de: {
+    translation: de,
+  },
+  zh: {
+    translation: zh,
+  },
+  cs: {
+    translation: cs,
+  },
+  pirate: {
+    translation: pirate,
+  },
+  vi: {
+    translation: vi,
+  },
+  pl: {
+    translation: pl,
+  },
 };
 i18n
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  .use(LanguageDetector)
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
   // init i18next

src/setup/index.css

@@ -178,4 +178,20 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
   background: var(--slider-progress-background);
   border: none;
   border-right-width: 0;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: theme("colors.denim-500");
+  border: 5px solid transparent;
+  border-left: 0;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar {
+  /* For some reason the styles don't get applied without the width */
+  width: 13px;
 }

src/setup/iso6391.ts

@@ -1,5 +1,6 @@
 export type LangCode =
   | "none"
+  | "pirate"
   | "aa"
   | "ab"
   | "ae"
@@ -219,6 +220,12 @@ export const captionLanguages: CaptionLanguageOption[] = [
     name: "None",
     nativeName: "Lorem ipsum",
   },
+  {
+    id: "pirate",
+    englishName: "Pirate",
+    name: "Pirate English",
+    nativeName: "Pirate English",
+  },
   {
     id: "aa",
     englishName: "Afar",

src/setup/locales/cs/translation.json

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

src/setup/locales/de/translation.json

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

src/setup/locales/en/translation.json

@@ -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",
@@ -71,7 +71,16 @@
     "popouts": {
       "back": "Go back",
       "sources": "Sources",
-      "seasons": "Seasons",
+      "close": "Close",
+      "seasons": {
+        "title":"Seasons",
+        "other": "Other seasons",
+        "noSeason": "No season"
+      },
+      "episodes": {
+        "unknown": "Unknown episode",
+        "noEpisode": "No episode"
+      },
       "captions": "Captions",
       "playbackSpeed": "Playback speed",
       "customPlaybackSpeed": "Custom playback speed",

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/it/translation.json

@@ -0,0 +1,128 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Recupero delle tue serie preferite...",
+    "loading_movie": "Recupero dei tuoi film preferiti...",
+    "loading": "Caricamento...",
+    "allResults": "Ecco tutto ciò che abbiamo!",
+    "noResults": "Non abbiamo trovato nulla!",
+    "allFailed": "Impossibile trovare i media, riprova!",
+    "headingTitle": "Risultati della ricerca",
+    "bookmarks": "Segnalibri",
+    "continueWatching": "Continua a guardare",
+    "title": "Cosa vuoi guardare?",
+    "placeholder": "Cosa vuoi guardare?"
+  },
+  "media": {
+    "movie": "Film",
+    "series": "Serie",
+    "stopEditing": "Interrompi modifica",
+    "errors": {
+      "genericTitle": "Ops, qualcosa si è rotto!",
+      "failedMeta": "Caricamento dei metadati non riuscito",
+      "mediaFailed": "Impossibile richiedere il media che hai richiesto, controlla la tua connessione internet e riprova.",
+      "videoFailed": "Si è verificato un errore durante la riproduzione del video che hai richiesto. Se ciò continua a accadere, segnala il problema sul <0>server Discord</0> o su <1>GitHub</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Non trovato",
+    "backArrow": "Torna alla home",
+    "media": {
+      "title": "Impossibile trovare quel media",
+      "description": "Non siamo riusciti a trovare il media richiesto. È stato rimosso o hai manomesso l'URL."
+    },
+    "provider": {
+      "title": "Questo provider è stato disabilitato",
+      "description": "Abbiamo riscontrato problemi con il provider o era troppo instabile da utilizzare, quindi abbiamo dovuto disabilitarlo."
+    },
+    "page": {
+      "title": "Impossibile trovare quella pagina",
+      "description": "Abbiamo cercato ovunque: sotto i bidoni, nell'armadio, dietro il proxy, ma alla fine non siamo riusciti a trovare la pagina che stai cercando."
+    }
+  },
+  "searchBar": {
+    "movie": "Film",
+    "series": "Serie",
+    "Search": "Cerca"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Ricerca del miglior video per te",
+    "noVideos": "Ops, non è stato possibile trovare alcun video per te",
+    "loading": "Caricamento...",
+    "backToHome": "Torna alla home",
+    "backToHomeShort": "Indietro",
+    "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "{{timeLeft}} rimanente",
+    "finishAt": "Fine alle {{timeFinished, datetime}}",
+    "buttons": {
+      "episodes": "Episodi",
+      "source": "Fonte",
+      "captions": "Sottotitoli",
+      "download": "Download",
+      "settings": "Impostazioni",
+      "pictureInPicture": "Picture in Picture",
+      "playbackSpeed": "Velocità di riproduzione"
+    },
+    "popouts": {
+      "back": "Torna indietro",
+      "sources": "Fonti",
+      "seasons": "Stagioni",
+      "captions": "Sottotitoli",
+      "playbackSpeed": "Velocità di riproduzione",
+      "customPlaybackSpeed": "Velocità di riproduzione personalizzata",
+      "captionPreferences": {
+        "title": "Personalizza",
+        "delay": "Ritardo",
+        "fontSize": "Dimensione carattere",
+        "opacity": "Opacità",
+        "color": "Colore"
+      },
+      "episode": "E{{index}} - {{title}}",
+      "noCaptions": "Nessun sottotitolo",
+      "linkedCaptions": "Sottotitoli collegati",
+      "customCaption": "Sottotitolo personalizzato",
+      "uploadCustomCaption": "Carica sottotitolo",
+      "noEmbeds": "Nessun embed è stato trovato per questa fonte",
+      
+      "errors": {
+        "loadingWentWong": "Si è verificato un problema durante il caricamento degli episodi per {{seasonTitle}}",
+        "embedsError": "Si è verificato un problema durante il caricamento degli embed per questa cosa che ti piace"
+      },
+      "descriptions": {
+        "sources": "Quale provider desideri utilizzare?",
+        "embeds": "Scegli quale video visualizzare",
+        "seasons": "Scegli quale stagione vuoi guardare",
+        "episode": "Scegli un episodio",
+        "captions": "Scegli una lingua per i sottotitoli",
+        "captionPreferences": "Personalizza l'aspetto dei sottotitoli",
+        "playbackSpeed": "Cambia la velocità di riproduzione"
+      }
+    },
+    "errors": {
+      "fatalError": "Il lettore video ha riscontrato un errore fatale, segnalalo sul <0>server Discord</0> o su <1>GitHub</1>."
+    }
+  },
+  "settings": {
+    "title": "Impostazioni",
+    "language": "Lingua",
+    "captionLanguage": "Lingua dei sottotitoli"
+  },
+  "v3": {
+    "newSiteTitle": "Nuova versione ora disponibile!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web si sposterà presto su un nuovo dominio: <0>https://movie-web.app</0>. Assicurati di aggiornare tutti i tuoi segnalibri poiché <1>il vecchio sito smetterà di funzionare il {{date}}.</1>",
+    "tireless": "Abbiamo lavorato instancabilmente su questo nuovo aggiornamento, speriamo che ti piaccia quello su cui abbiamo lavorato negli ultimi mesi.",
+    "leaveAnnouncement": "Portami lì!"
+  },
+  "casting": {
+    "casting": "Trasmissione su dispositivo in corso..."
+  },
+  "errors": {
+    "offline": "Controlla la tua connessione internet"
+  }
+}

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/pirate/translation.json

@@ -0,0 +1,124 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Fetchin' yer favorite series...",
+    "loading_movie": "Fetchin' yer favorite movies...",
+    "loadin'": "Loadin'...",
+    "allResults": "That be all we 'ave, me hearty!",
+    "noResults": "We couldn't find anythin' that matches yer search!",
+    "allFailed": "Failed t' find media, walk the plank and try again!",
+    "headingTitle": "Search results",
+    "bookmarks": "Treasure Maps",
+    "continueWatchin'": "Continue Watchin'",
+    "title": "Wha' be ye wantin' to watch, me matey?",
+    "placeholder": "Wha' be ye searchin' for?"
+  },
+  "media": {
+    "movie": "Movie",
+    "series": "Series",
+    "stopEditin'": "Stop editin'",
+    "errors": {
+      "genericTitle": "Shiver me timbers! It broke!",
+      "failedMeta": "Ye can't trust the compass, failed to load meta",
+      "mediaFailed": "We failed t' request the media ye asked fer, check yer internet connection, or Davy Jones's locker awaits ye!",
+      "videoFailed": "Blimey! We encountered an error while playin' the video ye requested. If this keeps happening please report the issue to the <0>Discord server</0> or on <1>GitHub</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Ahoy! I see nothin' on the horizon.",
+    "backArrow": "Back to the port",
+    "media": {
+      "title": "Avast ye! Couldn't find that media",
+      "description": "We couldn't find the media ye requested. Either it's been scuttled or ye tampered with the URL, ye scallywag!"
+    },
+    "provider": {
+      "title": "Walk the plank! This provider has been disabled",
+      "description": "We had issues wit' the provider or 'twas too unstable t' use, so we had t' disable it. Try another one, arrr!"
+    },
+    "page": {
+      "title": "Avast ye! Couldn't find that page.",
+      "description": "Arrr! We searched every inch o' the vessel: from the bilge to the crow's nest, from the keel to the topmast, but avast! We couldn't find the page ye be lookin' fer, me heartie."
+    }
+  },
+  "searchBar": {
+    "movie": "Movie",
+    "series": "Series",
+    "Search": "Search"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Finding the best video fer ye, hoist the colors!",
+    "noVideos": "Blistering barnacles, couldn't find any videos fer ye. Ye need a better map!",
+    "loading": "Loading...",
+    "backToHome": "Back to the port, mates!",
+    "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": "Spyglass view",
+      "playbackSpeed": "Set sail!"
+    },
+    "popouts": {
+      "back": "Avast ye, go back!",
+      "sources": "Wha' provider do ye want to use?",
+      "seasons": "Choose which season you wants to watch!",
+      "captions": "Select a subtitle language, me hearty!",
+      "playbackSpeed": "Change the speed of Blackbeard's ship!",
+      "customPlaybackSpeed": "Set a custom playback speed",
+      "captionPreferences": {
+        "title": "Customize yer captions",
+        "delay": "Delay",
+        "fontSize": "Size",
+        "opacity": "Opacity",
+        "color": "Color"
+      },
+      "episode": "E{{index}} - {{title}}",
+      "noCaptions": "No captions, hoist the Jolly Roger!",
+      "linkedCaptions": "Linked captions, drop anchor!",
+      "customCaption": "Custom caption, arrr!",
+      "uploadCustomCaption": "Upload yer own caption!",
+      "noEmbeds": "No embeds we be found fer this source",
+
+      "errors": {
+        "loadingWentWong": "Shiver me timbers! Somethin' went wrong loadin' the episodes fer {{seasonTitle}}",
+        "embedsError": "Blimey! Somethin' went wrong loadin' the embeds fer this thin' that ye like"
+      },
+      "descriptions": {
+        "sources": "Wha' provider do ye wants to use?",
+        "embeds": "Choose which video to view",
+        "seasons": "Choose which season ye wants to watch",
+        "episode": "Pick an episode",
+        "captions": "Choose a subtitle language",
+        "captionPreferences": "Make subtitles look how ye wants it",
+        "playbackSpeed": "Change the playback speed"
+      }
+    },
+    "errors": {
+      "fatalError": "Blow me down! 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",
+    "newDomainText": "movie-web will soon be movin' to a new domain: <0>https://movie-web.app</0>. Make sure to update all yer bookmarks as <1>the ole website will stop workin' on {{date}}.</1>",
+    "tireless": "We've worked tirelessly on this new update, we hope ye will enjoy wha' we've been cookin' up fer the past months.",
+    "leaveAnnouncement": "Take me thar!"
+  },
+  "casting": { "casting": "Casting to device..." },
+  "errors": { "offline": "Avast! Check yer internet connection" }
+}

src/setup/locales/pl/translation.json

@@ -0,0 +1,137 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Szukamy twoich ulubionych seriali...",
+    "loading_movie": "Szukamy twoich ulubionych filmów...",
+    "loading": "Wczytywanie...",
+    "allResults": "To wszystko co mamy!",
+    "noResults": "Nie mogliśmy niczego znaleźć!",
+    "allFailed": "Nie udało się znaleźć mediów, Spróbuj ponownie!",
+    "headingTitle": "Wyniki wyszukiwania",
+    "bookmarks": "Zakładki",
+    "continueWatching": "Kontynuuj oglądanie",
+    "title": "Co chciałbyś obejrzeć?",
+    "placeholder": "Co chciałbyś obejrzeć?"
+  },
+  "media": {
+    "movie": "Film",
+    "series": "Serial",
+    "stopEditing": "Zatrzymaj edycje",
+    "errors": {
+      "genericTitle": "Ups, popsuło się!",
+      "failedMeta": "Nie udało się wczytać metadanych",
+      "mediaFailed": "Nie udało nam się zarządać mediów, sprawdź połączenie sieciowe i spróbuj ponownie.",
+      "videoFailed": "Napotkaliśmy błąd podczas odtwarzania rządanego video. Jeśli problem będzie się powtarzać prosimy o zgłoszenie problemu na <0>Serwer Discord</0> lub na <1>GitHub</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Nie znaleziono",
+    "backArrow": "Wróć na stronę główną",
+    "media": {
+      "title": "Nie można znaleźć multimediów",
+      "description": "Nie mogliśmy znaleźć rządanych multimediów. Albo zostały usunięte, albo grzebałeś przy adresie URL."
+    },
+    "provider": {
+      "title": "Ten dostawca został wyłączony",
+      "description": "Mieliśmy problemy z tym dostawcą, albo był zbyt niestabilny, więc musieliśmy go wyłączyć."
+    },
+    "page": {
+      "title": "Nie można znaleźć tej strony",
+      "description": "Szukaliśmy wszędzie: w koszu, w szafie a nawet w piwnicy, ale nie byliśmy w stanie znaleźć strony której szukasz."
+    }
+  },
+  "searchBar": {
+    "movie": "Filmy",
+    "series": "Seriale",
+    "Search": "Szukaj"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Szukamy najlepszego video dla ciebie",
+    "noVideos": "Oj, Nie mogliśmy znaleźć żadnego video",
+    "loading": "Wczytywanie...",
+    "backToHome": "Wróć na stronę główną",
+    "backToHomeShort": "Wróć",
+    "seasonAndEpisode": "S{{season}} E{{episode}}",
+    "timeLeft": "Pozostało {{timeLeft}}",
+    "finishAt": "Zakończ na {{timeFinished, datetime}}",
+    "buttons": {
+      "episodes": "Odcinki",
+      "source": "Źródło",
+      "captions": "Napisy",
+      "download": "Pobierz",
+      "settings": "Ustawienia",
+      "pictureInPicture": "Obraz w obrazie (PIP)",
+      "playbackSpeed": "Prędkość odtwarzania"
+    },
+    "popouts": {
+      "close": "Zamknąć",
+      "seasons": {
+        "title":"Sezony",
+        "other": "Inne sezony",
+        "noSeason": "Brak sezonu"
+      },
+      "episodes": {
+        "unknown": "Nieznany odcinki",
+        "noEpisode": "Brak odcinki"
+      },
+      "back": "Wróć",
+      "sources": "Źródła",
+      "captions": "Napisy",
+      "playbackSpeed": "Prędkość odtwarzania",
+      "customPlaybackSpeed": "Niestandardowa prędkość odtwarzania",
+      "captionPreferences": {
+        "title": "Personalizuj",
+        "delay": "Opóźnienie",
+        "fontSize": "Rozmiar",
+        "opacity": "Przeźroczystość",
+        "color": "Kolor"
+      },
+      "episode": "E{{index}} - {{title}}",
+      "noCaptions": "Brak napisów",
+      "linkedCaptions": "Załączone napisy",
+      "customCaption": "Napisy niestandardowe",
+      "uploadCustomCaption": "Załącz",
+      "noEmbeds": "Nie znaleziono osadzonych mediów dla tego źródła",
+
+      "errors": {
+        "loadingWentWong": "Coś poszło nie tak  {{seasonTitle}}",
+        "embedsError": "Coś poszło nie tak przy wczytywaniu osadzonych mediów"
+      },
+      "descriptions": {
+        "sources": "Którego dostawcy chciałbyś używać?",
+        "embeds": "Wybierz, które video chcesz zobaczyć",
+        "seasons": "Wybierz, który sezon chcesz obejrzeć",
+        "episode": "Wybierz odcinek",
+        "captions": "Zmień język napisów",
+        "captionPreferences": "Ustaw napisy, tak jak ci to odpowiada",
+        "playbackSpeed": "Zmień prędkość odtwarzania"
+      }
+    },
+    "errors": {
+      "fatalError": "Odtwarzacz napotkał poważny błąd, Prosimy o złoszenie tego na <0>Serwer Discord</0> lub na <1>GitHub</1>."
+    }
+  },
+  "settings": {
+    "title": "Ustawienia",
+    "language": "Język",
+    "captionLanguage": "Język napisów"
+  },
+  "v3": {
+    "newSiteTitle": "Nowa wersja została wydana!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web przeniesie się wkrótce na nowy adres: <0>https://movie-web.app</0>. Prosimy zaaktualizować swoje zakładki ponieważ <1>stara strona przestanie działać {{date}}.</1>",
+    "tireless": "Pracowaliśmy niestrudzenie nad tą aktualizacją, Mamy nadzieję że będziecie zadowoleni z tego nad czym pracowaliśmy przez ostatnie parę miesięcy.",
+    "leaveAnnouncement": "Zabierz mnie tam!"
+  },
+  "casting": {
+    "casting": "Przesyłanie do urządzenia..."
+  },
+  "errors": {
+    "offline": "Sprawdź swoje połączenie sieciowe"
+  }
+}

src/setup/locales/tr/translation.json

@@ -71,7 +71,16 @@
     "popouts": {
       "back": "Geri git",
       "sources": "Kaynaklar",
-      "seasons": "Sezonlar",
+      "close":"Kapat",
+      "seasons": {
+        "title":"Sezonlar",
+        "other": "Diğer sezonlar",
+        "noSeason": "Sezon yok"
+      },
+      "episodes": {
+        "unknown": "Bilinmeyen bölüm",
+        "noEpisode": "Bölüm yok"
+      },
       "captions": "Altyazılar",
       "playbackSpeed": "Oynatma hızı",
       "customPlaybackSpeed": "Özel oynatma hızı",

src/setup/locales/vi/translation.json

@@ -0,0 +1,128 @@
+{
+  "global": {
+    "name": "movie-web"
+  },
+  "search": {
+    "loading_series": "Đang tìm chương trình yêu thích của bạn...",
+    "loading_movie": "Đang tìm bộ phim yêu thích của bạn...",
+    "loading": "Đang tải...",
+    "allResults": "Đó là tất cả chúng tôi có!",
+    "noResults": "Chúng tôi không thể tìm thấy gì!",
+    "allFailed": "Không thể tìm thấy nội dung, hãy thử lại!",
+    "headingTitle": "Kết quả tìm kiếm",
+    "bookmarks": "Đánh dấu",
+    "continueWatching": "Tiếp tục xem",
+    "title": "Bạn muốn xem gì?",
+    "placeholder": "Bạn muốn xem gì?"
+  },
+  "media": {
+    "movie": "Phim",
+    "series": "Chương trình truyền hình",
+    "stopEditing": "Hãy dừng chỉnh sửa",
+    "errors": {
+      "genericTitle": "Rất tiếc, đã hỏng!",
+      "failedMeta": "Không thể tải meta",
+      "mediaFailed": "Chúng tôi không thể tìm thấy nội dung mà bạn yêu cầu, hãy kiểm tra kết nối internet của bạn và thử lại.",
+      "videoFailed": "Chúng tôi đã gặp lỗi khi phát nội dung mà bạn yêu cầu. Nếu điều này tiếp tục xảy ra, vui lòng báo cáo sự cố trên <0>máy chủ Discord</0> hoặc trên <1>GitHub</1>."
+    }
+  },
+  "seasons": {
+    "seasonAndEpisode": "M{{season}} T{{episode}}"
+  },
+  "notFound": {
+    "genericTitle": "Không tìm thấy",
+    "backArrow": "Quay lại trang chính",
+    "media": {
+      "title": "Không thể tìm thấy nội dung",
+      "description": "Chúng tôi không thể tìm thấy nội dung mà bạn yêu cầu. Hoặc là nó đã bị xóa, hoặc bạn đã xáo trộn URL"
+    },
+    "provider": {
+      "title": "Nhà cung cấp này đã bị vô hiệu hóa",
+      "description": "Chúng tôi đã gặp vấn đề với nhà cung cấp hoặc nó quá bất ổn để sử dụng, cho nên chúng tôi đã phải vô hiệu hóa nó."
+    },
+    "page": {
+      "title": "Không thể tìm thấy trang",
+      "description": "Chúng tôi đã tìm kiếm khắp nơi: dưới thùng rác, trong tủ quần áo, đằng sau máy chủ proxy nhưng vẫn không thể tìm thấy trang bạn đang tìm kiếm."
+    }
+  },
+  "searchBar": {
+    "movie": "Phim",
+    "series": "Chương trình truyền hình",
+    "Search": "Tìm kiếm"
+  },
+  "videoPlayer": {
+    "findingBestVideo": "Đang tìm nội dung tốt nhất cho bạn",
+    "noVideos": "Rất tiếc, không tìm thấy nội dung nào cho bạn",
+    "loading": "Đang tải...",
+    "backToHome": "Quay lại trang chính",
+    "backToHomeShort": "Quay lại",
+    "seasonAndEpisode": "M{{season}} T{{episode}}",
+    "timeLeft": "Còn {{timeLeft}}",
+    "finishAt": "Kết thúc vào {{timeFinished, datetime}}",
+    "buttons": {
+      "episodes": "Tập",
+      "source": "Source",
+      "captions": "Phụ đề",
+      "download": "Tải xuống",
+      "settings": "Cài đặt",
+      "pictureInPicture": "Hình trong hình",
+      "playbackSpeed": "Tốc độ phát"
+    },
+    "popouts": {
+      "back": "Quay lại",
+      "sources": "Nguồn",
+      "seasons": "Mùa",
+      "captions": "Phụ đề",
+      "playbackSpeed": "Tốc độ phát",
+      "customPlaybackSpeed": "Tủy chỉnh tốc độ phát",
+      "captionPreferences": {
+        "title": "Tùy chỉnh",
+        "delay": "Trì hoãn",
+        "fontSize": "Kích cỡ",
+        "opacity": "Độ mờ",
+        "color": "Màu sắc"
+      },
+      "episode": "T{{index}} - {{title}}",
+      "noCaptions": "Không phụ đề",
+      "linkedCaptions": "Phụ đề được liên kết",
+      "customCaption": "Phụ đề tùy chỉnh",
+      "uploadCustomCaption": "Tải phụ đề lên",
+      "noEmbeds": "Không tìm thấy nội dung nhúng nào cho nguồn này",
+
+      "errors": {
+        "loadingWentWong": "Đã xảy ra lỗi khi tải các tập phim cho {{seasonTitle}}",
+        "embedsError": "Đã xảy ra lỗi khi tải nội dung nhúng cho nội dung bạn thích này"
+      },
+      "descriptions": {
+        "sources": "Bạn muốn sử dụng nhà cung cấp nào?",
+        "embeds": "Chọn video để xem",
+        "seasons": "Chọn mùa bạn muốn xem",
+        "episode": "Chọn một tập",
+        "captions": "Chọn ngôn ngữ của phụ đề",
+        "captionPreferences": "Làm cho phụ đề trông như thế nào bạn muốn",
+        "playbackSpeed": "Thay đổi tốc độ phát"
+      }
+    },
+    "errors": {
+      "fatalError": "Trình phát video đã gặp phải lỗi nghiêm trọng, vui lòng báo cáo sự cố trên <0>máy chủ Discord</0> hoặc trên <1>GitHub</1>."
+    }
+  },
+  "settings": {
+    "title": "Cài đặt",
+    "language": "Ngôn ngữ",
+    "captionLanguage": "Ngôn ngữ phụ đề"
+  },
+  "v3": {
+    "newSiteTitle": "Phiên bản mới đã được phát hành!",
+    "newDomain": "https://movie-web.app",
+    "newDomainText": "movie-web sẽ sớm chuyển sang trang mới: <0>https://movie-web.app</0>. Hãy đảm bảo rằng các đánh dấu đã được cập nhật vì <1>trang web cũ sẽ dừng hoạt động vào {{date}}.</1>",
+    "tireless": "Chúng tôi đã làm việc vất vả để tạo phiên bản mới này, chúng tôi hy vọng bạn sẽ thích những gì chúng tôi đã nung nấu trong những tháng qua.",
+    "leaveAnnouncement": "Hãy đưa tôi đến đó!"
+  },
+  "casting": {
+    "casting": "Đang truyền tới thiết bị..."
+  },
+  "errors": {
+    "offline": "Hãy kiểm tra kết nối Internet của bạn"
+  }
+}

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/state/bookmark/context.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, createContext, useContext, useMemo } from "react";
 
-import { MWMediaMeta } from "@/backend/metadata/types";
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
 import { useStore } from "@/utils/storage";
 
 import { BookmarkStore } from "./store";

src/state/bookmark/store.ts

@@ -2,6 +2,7 @@ import { createVersionedStore } from "@/utils/storage";
 
 import { BookmarkStoreData } from "./types";
 import { OldBookmarks, migrateV1Bookmarks } from "../watched/migrations/v2";
+import { migrateV2Bookmarks } from "../watched/migrations/v3";
 
 export const BookmarkStore = createVersionedStore<BookmarkStoreData>()
   .setKey("mw-bookmarks")
@@ -13,6 +14,12 @@ export const BookmarkStore = createVersionedStore<BookmarkStoreData>()
   })
   .addVersion({
     version: 1,
+    migrate(old: BookmarkStoreData) {
+      return migrateV2Bookmarks(old);
+    },
+  })
+  .addVersion({
+    version: 2,
     create() {
       return {
         bookmarks: [],

src/state/bookmark/types.ts

@@ -1,4 +1,4 @@
-import { MWMediaMeta } from "@/backend/metadata/types";
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
 
 export interface BookmarkStoreData {
   bookmarks: MWMediaMeta[];

src/state/watched/context.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 
 import { DetailedMeta } from "@/backend/metadata/getmeta";
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { useStore } from "@/utils/storage";
 
 import { VideoProgressStore } from "./store";

src/state/watched/migrations/v2.ts

@@ -1,6 +1,6 @@
 import { DetailedMeta, getMetaFromId } from "@/backend/metadata/getmeta";
 import { searchForMedia } from "@/backend/metadata/search";
-import { MWMediaMeta, MWMediaType } from "@/backend/metadata/types";
+import { MWMediaMeta, MWMediaType } from "@/backend/metadata/types/mw";
 import { compareTitle } from "@/utils/titleMatch";
 
 import { WatchedStoreData, WatchedStoreItem } from "../types";

src/state/watched/migrations/v3.ts

@@ -0,0 +1,89 @@
+import { getLegacyMetaFromId } from "@/backend/metadata/getmeta";
+import {
+  getEpisodes,
+  getMediaDetails,
+  getMovieFromExternalId,
+} from "@/backend/metadata/tmdb";
+import { MWMediaType } from "@/backend/metadata/types/mw";
+import { BookmarkStoreData } from "@/state/bookmark/types";
+import { isNotNull } from "@/utils/typeguard";
+
+import { WatchedStoreData } from "../types";
+
+async function migrateId(
+  id: string,
+  type: MWMediaType
+): Promise<string | undefined> {
+  const meta = await getLegacyMetaFromId(type, id);
+
+  if (!meta) return undefined;
+  const { tmdbId, imdbId } = meta;
+  if (!tmdbId && !imdbId) return undefined;
+
+  // movies always have an imdb id on tmdb
+  if (imdbId && type === MWMediaType.MOVIE) {
+    const movieId = await getMovieFromExternalId(imdbId);
+    if (movieId) return movieId;
+  }
+
+  if (tmdbId) {
+    return tmdbId;
+  }
+}
+
+export async function migrateV2Bookmarks(old: BookmarkStoreData) {
+  const updatedBookmarks = old.bookmarks.map(async (item) => ({
+    ...item,
+    id: await migrateId(item.id, item.type).catch(() => undefined),
+  }));
+
+  return {
+    bookmarks: (await Promise.all(updatedBookmarks)).filter((item) => item.id),
+  };
+}
+
+export async function migrateV3Videos(
+  old: WatchedStoreData
+): Promise<WatchedStoreData> {
+  const updatedItems = await Promise.all(
+    old.items.map(async (progress) => {
+      try {
+        const migratedId = await migrateId(
+          progress.item.meta.id,
+          progress.item.meta.type
+        );
+
+        if (!migratedId) return null;
+
+        const clone = structuredClone(progress);
+        clone.item.meta.id = migratedId;
+        if (clone.item.series) {
+          const series = clone.item.series;
+          const details = await getMediaDetails(migratedId, "show");
+
+          const season = details.seasons.find(
+            (v) => v.season_number === series.season
+          );
+          if (!season) return null;
+
+          const episodes = await getEpisodes(migratedId, season.season_number);
+          const episode = episodes.find(
+            (v) => v.episode_number === series.episode
+          );
+          if (!episode) return null;
+
+          clone.item.series.episodeId = episode.id.toString();
+          clone.item.series.seasonId = season.id.toString();
+        }
+
+        return clone;
+      } catch (err) {
+        return null;
+      }
+    })
+  );
+
+  return {
+    items: updatedItems.filter(isNotNull),
+  };
+}

src/state/watched/store.ts

@@ -1,6 +1,7 @@
 import { createVersionedStore } from "@/utils/storage";
 
 import { OldData, migrateV2Videos } from "./migrations/v2";
+import { migrateV3Videos } from "./migrations/v3";
 import { WatchedStoreData } from "./types";
 
 export const VideoProgressStore = createVersionedStore<WatchedStoreData>()
@@ -21,6 +22,12 @@ export const VideoProgressStore = createVersionedStore<WatchedStoreData>()
   })
   .addVersion({
     version: 2,
+    migrate(old: WatchedStoreData) {
+      return migrateV3Videos(old);
+    },
+  })
+  .addVersion({
+    version: 3,
     create() {
       return {
         items: [],

src/state/watched/types.ts

@@ -1,4 +1,4 @@
-import { MWMediaMeta } from "@/backend/metadata/types";
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
 
 export interface StoreMediaItem {
   meta: MWMediaMeta;

src/utils/storage.ts

@@ -46,8 +46,13 @@ export async function initializeStores() {
     let mostRecentData = data;
     try {
       for (const version of relevantVersions) {
-        if (version.migrate)
+        if (version.migrate) {
+          localStorage.setItem(
+            `BACKUP-v${version.version}-${internal.key}`,
+            JSON.stringify(mostRecentData)
+          );
           mostRecentData = await version.migrate(mostRecentData);
+        }
       }
     } catch (err) {
       console.error(`FAILED TO MIGRATE STORE ${internal.key}`, err);

src/utils/typeguard.ts

@@ -0,0 +1,3 @@
+export function isNotNull<T>(obj: T | null): obj is T {
+  return obj != null;
+}

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 delayedStart = start / 1000 + captionSettings.delay;
-    const delayedEnd = end / 1000 + captionSettings.delay;
-    return (
-      Math.max(0, delayedStart) <= videoTime &&
-      Math.max(0, delayedEnd) >= videoTime
-    );
-  };
+  const visibileCaptions = captions.current.filter(({ start, end }) =>
+    isVisible(start, end, captionSettings.delay, videoTime)
+  );
   return (
     <Transition
       className={[
@@ -86,12 +109,9 @@ export function CaptionRendererAction({
       animation="slide-up"
       show
     >
-      {captions.current.map(
-        ({ start, end, content }) =>
-          isVisible(start, end) && (
-            <CaptionCue key={`${start}-${end}`} text={content} />
-          )
-      )}
+      {visibileCaptions.map(({ start, end, content }) => (
+        <CaptionCue key={`${start}-${end}`} text={content} />
+      ))}
     </Transition>
   );
 }

src/video/components/actions/DividerAction.tsx

@@ -1,4 +1,4 @@
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMeta } from "@/video/state/logic/meta";
 

src/video/components/actions/SeriesSelectionAction.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { Icons } from "@/components/Icon";
 import { FloatingAnchor } from "@/components/popout/FloatingAnchor";
 import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";

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
-  ).toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "numeric",
-    hour12: true,
-  });
+      ((videoTime.duration - videoTime.time) * 1000) /
+        mediaPlaying.playbackSpeed
+  );
   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/controllers/MetaController.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 import { MWCaption } from "@/backend/helpers/streams";
-import { MWSeasonWithEpisodeMeta } from "@/backend/metadata/types";
+import { MWSeasonWithEpisodeMeta } from "@/backend/metadata/types/mw";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { VideoPlayerMeta } from "@/video/state/types";

src/video/components/controllers/ProgressListenerController.tsx

@@ -1,6 +1,7 @@
 import throttle from "lodash.throttle";
 import { useEffect, useMemo, useRef } from "react";
 
+import { useQueryParams } from "@/hooks/useQueryParams";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
@@ -20,6 +21,7 @@ export function ProgressListenerController(props: Props) {
   const misc = useMisc(descriptor);
   const didInitialize = useRef<true | null>(null);
   const lastTime = useRef<number>(props.startAt ?? 0);
+  const queryParams = useQueryParams();
 
   // time updates (throttled)
   const updateTime = useMemo(
@@ -56,9 +58,26 @@ export function ProgressListenerController(props: Props) {
   useEffect(() => {
     if (lastStateProviderId.current === stateProviderId) return;
     if (mediaPlaying.isFirstLoading) return;
+
     lastStateProviderId.current = stateProviderId;
+
+    if ((queryParams.t ?? null) !== null) {
+      // Convert `t` param to time. Supports having only seconds (like `?t=192`), but also `3:30` or `1:30:02`
+
+      const timeArr = queryParams.t.toString().split(":").map(Number).reverse(); // This is an array of [seconds, ?minutes, ?hours] as ints.
+
+      const hours = timeArr[2] ?? 0;
+      const minutes = Math.min(timeArr[1] ?? 0, 59);
+      const seconds = Math.min(timeArr[0] ?? 0, minutes > 0 ? 59 : Infinity);
+
+      const timeInSeconds = hours * 60 * 60 + minutes * 60 + seconds;
+
+      controls.setTime(timeInSeconds);
+      return;
+    }
+
     controls.setTime(lastTime.current);
-  }, [controls, mediaPlaying, stateProviderId]);
+  }, [controls, mediaPlaying, stateProviderId, queryParams]);
 
   useEffect(() => {
     // if it initialized, but media starts loading for the first time again.

src/video/components/hooks/useCurrentSeriesEpisodeInfo.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { useMeta } from "@/video/state/logic/meta";
 
 export function useCurrentSeriesEpisodeInfo(descriptor: string) {

src/video/components/parts/VideoErrorBoundary.tsx

@@ -2,7 +2,7 @@ import { Component } from "react";
 import { Trans } from "react-i18next";
 import type { ReactNode } from "react-router-dom/node_modules/@types/react/index";
 
-import { MWMediaMeta } from "@/backend/metadata/types";
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
 import { ErrorMessage } from "@/components/layout/ErrorBoundary";
 import { Link } from "@/components/text/Link";
 import { conf } from "@/setup/config";
@@ -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/video/components/parts/VideoPlayerHeader.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 
-import { MWMediaMeta } from "@/backend/metadata/types";
+import { MWMediaMeta } from "@/backend/metadata/types/mw";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icon, Icons } from "@/components/Icon";
 import { BrandPill } from "@/components/layout/BrandPill";

src/video/components/popouts/EpisodeSelectionPopout.tsx

@@ -2,9 +2,11 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
-import { getMetaFromId } from "@/backend/metadata/getmeta";
-import { decodeJWId } from "@/backend/metadata/justwatch";
-import { MWMediaType, MWSeasonWithEpisodeMeta } from "@/backend/metadata/types";
+import { decodeTMDBId, getMetaFromId } from "@/backend/metadata/getmeta";
+import {
+  MWMediaType,
+  MWSeasonWithEpisodeMeta,
+} from "@/backend/metadata/types/mw";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icon, Icons } from "@/components/Icon";
 import { Loading } from "@/components/layout/Loading";
@@ -45,7 +47,7 @@ export function EpisodeSelectionPopout() {
         seasonId: sId,
         season: undefined,
       });
-      reqSeasonMeta(decodeJWId(params.media)?.id as string, sId).then((v) => {
+      reqSeasonMeta(decodeTMDBId(params.media)?.id as string, sId).then((v) => {
         if (v?.meta.type !== MWMediaType.SERIES) return;
         setCurrentVisibleSeason({
           seasonId: sId,
@@ -99,10 +101,10 @@ export function EpisodeSelectionPopout() {
     <>
       <FloatingView {...pageProps("seasons")} height={600} width={375}>
         <FloatingCardView.Header
-          title={t("videoPlayer.popouts.seasons")}
+          title={t("videoPlayer.popouts.seasons.title")}
           description={t("videoPlayer.popouts.descriptions.seasons")}
           goBack={() => navigate("/episodes")}
-          backText={`To ${currentSeasonInfo?.title.toLowerCase()}`}
+          backText={currentSeasonInfo?.title}
         />
         <FloatingCardView.Content>
           {currentSeasonInfo
@@ -115,12 +117,15 @@ export function EpisodeSelectionPopout() {
                   {season.title}
                 </PopoutListEntry>
               ))
-            : "No season"}
+            : t("videoPlayer.popouts.seasons.noSeason")}
         </FloatingCardView.Content>
       </FloatingView>
       <FloatingView {...pageProps("episodes")} height={600} width={375}>
         <FloatingCardView.Header
-          title={currentSeasonInfo?.title ?? "Unknown season"}
+          title={
+            currentSeasonInfo?.title ??
+            t("videoPlayer.popouts.episodes.unknown")
+          }
           description={t("videoPlayer.popouts.descriptions.episode")}
           goBack={closePopout}
           close
@@ -130,7 +135,7 @@ export function EpisodeSelectionPopout() {
               onClick={() => navigate("/episodes/seasons")}
               className="flex cursor-pointer items-center space-x-2 transition-colors duration-200 hover:text-white"
             >
-              <span>Other seasons</span>
+              <span>{t("videoPlayer.popouts.seasons.other")}</span>
               <Icon icon={Icons.CHEVRON_RIGHT} />
             </button>
           }
@@ -181,7 +186,7 @@ export function EpisodeSelectionPopout() {
                       })}
                     </PopoutListEntry>
                   ))
-                : "No episodes"}
+                : t("videoPlayer.popouts.episodes.noEpisode")}
             </div>
           )}
         </FloatingCardView.Content>

src/video/components/popouts/PopoutProviderAction.tsx

@@ -9,8 +9,6 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
 
-import "./Popouts.css";
-
 function ShowPopout(props: { popoutId: string | null; onClose: () => void }) {
   const popoutMap = {
     settings: <SettingsPopout />,

src/video/components/popouts/Popouts.css

@@ -1,15 +0,0 @@
-.popout-wrapper ::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.popout-wrapper ::-webkit-scrollbar-thumb {
-  background-color: theme("colors.denim-500");
-  border: 5px solid transparent;
-  border-left: 0;
-  background-clip: content-box;
-}
-
-.popout-wrapper ::-webkit-scrollbar {
-  /* For some reason the styles don't get applied without the width */
-  width: 13px;
-}

src/views/developer/VideoTesterView.tsx

@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet";
 
 import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams";
 import { DetailedMeta } from "@/backend/metadata/getmeta";
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { Button } from "@/components/Button";
 import { Dropdown } from "@/components/Dropdown";
 import { Navigation } from "@/components/layout/Navigation";
@@ -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

@@ -4,9 +4,15 @@ import { useTranslation } from "react-i18next";
 import { useHistory, useParams } from "react-router-dom";
 
 import { MWStream } from "@/backend/helpers/streams";
-import { DetailedMeta, getMetaFromId } from "@/backend/metadata/getmeta";
-import { decodeJWId } from "@/backend/metadata/justwatch";
-import { MWMediaType, MWSeasonWithEpisodeMeta } from "@/backend/metadata/types";
+import {
+  DetailedMeta,
+  decodeTMDBId,
+  getMetaFromId,
+} from "@/backend/metadata/getmeta";
+import {
+  MWMediaType,
+  MWSeasonWithEpisodeMeta,
+} from "@/backend/metadata/types/mw";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Loading } from "@/components/layout/Loading";
@@ -34,7 +40,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 +74,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 +140,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>
@@ -181,7 +187,7 @@ export function MediaView() {
   const [selected, setSelected] = useState<SelectedMediaData | null>(null);
   const [exec, loading, error] = useLoading(
     async (mediaParams: string, seasonId?: string) => {
-      const data = decodeJWId(mediaParams);
+      const data = decodeTMDBId(mediaParams);
       if (!data) return null;
       return getMetaFromId(data.type, data.id, seasonId);
     }

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/other/v2Migration.tsx

@@ -1,7 +1,7 @@
 import pako from "pako";
 import { useEffect, useState } from "react";
 
-import { MWMediaType } from "@/backend/metadata/types";
+import { MWMediaType } from "@/backend/metadata/types/mw";
 import { conf } from "@/setup/config";
 
 function fromBinary(str: string): Uint8Array {

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/SearchResultsPartial.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { MWQuery } from "@/backend/metadata/types";
+import { MWQuery } from "@/backend/metadata/types/mw";
 import { useDebounce } from "@/hooks/useDebounce";
 
 import { HomeView } from "./HomeView";

src/views/search/SearchResultsView.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { searchForMedia } from "@/backend/metadata/search";
-import { MWMediaMeta, MWQuery } from "@/backend/metadata/types";
+import { MWMediaMeta, MWQuery } from "@/backend/metadata/types/mw";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
@@ -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">