Upgrade packages, bundling, performance

package.json

@@ -26,96 +26,98 @@
     ]
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.7.0",
+    "@formkit/auto-animate": "^0.8.1",
-    "@headlessui/react": "^1.5.0",
+    "@headlessui/react": "^1.7.17",
     "@movie-web/providers": "^1.1.5",
-    "@noble/hashes": "^1.3.2",
+    "@noble/hashes": "^1.3.3",
-    "@react-spring/web": "^9.7.1",
+    "@react-spring/web": "^9.7.3",
-    "@scure/bip39": "^1.2.1",
+    "@scure/bip39": "^1.2.2",
     "@sozialhelden/ietf-language-tags": "^5.4.2",
-    "@types/node-forge": "^1.3.8",
+    "@types/node-forge": "^1.3.10",
     "classnames": "^2.3.2",
-    "core-js": "^3.29.1",
+    "core-js": "^3.34.0",
-    "dompurify": "^3.0.1",
+    "dompurify": "^3.0.6",
-    "flag-icons": "^6.11.1",
+    "flag-icons": "^7.1.0",
     "focus-trap-react": "^10.2.3",
     "fscreen": "^1.2.0",
-    "fuse.js": "^6.4.6",
+    "fuse.js": "^7.0.0",
-    "hls.js": "^1.0.7",
+    "hls.js": "^1.4.14",
-    "i18next": "^22.4.5",
+    "i18next": "^23.7.11",
-    "immer": "^10.0.2",
+    "immer": "^10.0.3",
     "iso-639-1": "^3.1.0",
     "jwt-decode": "^4.0.0",
     "lodash.isequal": "^4.5.0",
+    "million": "^2.6.4",
     "nanoid": "^5.0.4",
     "node-forge": "^1.3.1",
-    "ofetch": "^1.0.0",
+    "ofetch": "^1.3.3",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-ga4": "^2.0.0",
+    "react-ga4": "^2.1.0",
     "react-google-recaptcha-v3": "^1.10.1",
-    "react-helmet-async": "^1.3.0",
+    "react-helmet-async": "^2.0.4",
-    "react-i18next": "^12.1.1",
+    "react-i18next": "^14.0.0",
-    "react-router-dom": "^5.2.0",
+    "react-lazy-with-preload": "^2.2.1",
+    "react-router-dom": "^6.21.1",
     "react-sticky-el": "^2.1.0",
     "react-turnstile": "^1.1.2",
-    "react-use": "^17.4.0",
+    "react-use": "^17.4.2",
     "slugify": "^1.6.6",
-    "subsrt-ts": "^2.1.1",
+    "subsrt-ts": "^2.1.2",
-    "zustand": "^4.3.9"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.23.6",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.23.6",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/preset-typescript": "^7.23.3",
-    "@types/chromecast-caf-sender": "^1.0.5",
+    "@types/chromecast-caf-sender": "^1.0.8",
-    "@types/crypto-js": "^4.1.1",
+    "@types/crypto-js": "^4.2.1",
-    "@types/dompurify": "^2.4.0",
+    "@types/dompurify": "^3.0.5",
-    "@types/fscreen": "^1.0.1",
+    "@types/fscreen": "^1.0.4",
     "@types/lodash.isequal": "^4.5.8",
-    "@types/lodash.throttle": "^4.1.7",
+    "@types/lodash.throttle": "^4.1.9",
-    "@types/node": "^17.0.15",
+    "@types/node": "^20.10.5",
-    "@types/pako": "^2.0.0",
+    "@types/pako": "^2.0.3",
-    "@types/react": "^17.0.39",
+    "@types/react": "^18.2.45",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.2.18",
-    "@types/react-helmet": "^6.1.6",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-stickynode": "^4.0.0",
+    "@types/react-stickynode": "^4.0.3",
-    "@types/react-transition-group": "^4.4.5",
+    "@types/react-transition-group": "^4.4.10",
-    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^5.13.0",
+    "@typescript-eslint/parser": "^6.15.0",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
-    "eslint": "^8.10.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.1",
-    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-react-hooks": "4.6.0",
-    "glob": "^10.3.3",
+    "glob": "^10.3.10",
-    "handlebars": "^4.7.7",
+    "handlebars": "^4.7.8",
-    "jsdom": "^21.1.0",
+    "jsdom": "^23.0.1",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.32",
     "postcss-rtl": "^2.0.0",
     "postcss-rtlcss": "^4.0.9",
-    "prettier": "^2.5.1",
+    "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.1.7",
+    "prettier-plugin-tailwindcss": "^0.5.9",
-    "tailwind-scrollbar": "^2.0.1",
+    "tailwind-scrollbar": "^3.0.5",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.4.0",
-    "tailwindcss-themer": "^3.1.0",
+    "tailwindcss-themer": "^4.0.0",
-    "type-fest": "^4.3.3",
+    "type-fest": "^4.8.3",
-    "typescript": "^4.6.4",
+    "typescript": "^5.3.3",
-    "vite": "^4.4.12",
+    "vite": "^5.0.10",
-    "vite-plugin-checker": "^0.5.6",
+    "vite-plugin-checker": "^0.6.2",
-    "vite-plugin-package-version": "^1.0.2",
+    "vite-plugin-package-version": "^1.1.0",
-    "vite-plugin-pwa": "^0.16.5",
+    "vite-plugin-pwa": "^0.17.4",
-    "vite-plugin-static-copy": "^0.16.0",
+    "vite-plugin-static-copy": "^1.0.0",
-    "vitest": "^0.28.5"
+    "vitest": "^1.1.0"
   },
   "pnpm": {
     "overrides": {

src/backend/accounts/auth.ts

@@ -22,7 +22,7 @@ export function getAuthHeaders(token: string): Record<string, string> {
 export async function accountLogin(
   url: string,
   id: string,
-  deviceName: string
+  deviceName: string,
 ): Promise<LoginResponse> {
   return ofetch<LoginResponse>("/auth/login", {
     method: "POST",

src/backend/accounts/bookmarks.ts

@@ -19,7 +19,7 @@ export interface BookmarkInput {
 
 export function bookmarkMediaToInput(
   tmdbId: string,
-  item: BookmarkMediaItem
+  item: BookmarkMediaItem,
 ): BookmarkInput {
   return {
     meta: {
@@ -35,7 +35,7 @@ export function bookmarkMediaToInput(
 export async function addBookmark(
   url: string,
   account: AccountWithToken,
-  input: BookmarkInput
+  input: BookmarkInput,
 ) {
   return ofetch<BookmarkResponse>(
     `/users/${account.userId}/bookmarks/${input.tmdbId}`,
@@ -44,14 +44,14 @@ export async function addBookmark(
       headers: getAuthHeaders(account.token),
       baseURL: url,
       body: input,
-    }
+    },
   );
 }
 
 export async function removeBookmark(
   url: string,
   account: AccountWithToken,
-  id: string
+  id: string,
 ) {
   return ofetch<{ tmdbId: string }>(
     `/users/${account.userId}/bookmarks/${id}`,
@@ -59,6 +59,6 @@ export async function removeBookmark(
       method: "DELETE",
       headers: getAuthHeaders(account.token),
       baseURL: url,
-    }
+    },
   );
 }

src/backend/accounts/crypto.ts

@@ -41,7 +41,7 @@ export function genMnemonic(): string {
 
 export async function signCode(
   code: string,
-  privateKey: Uint8Array
+  privateKey: Uint8Array,
 ): Promise<Uint8Array> {
   return forge.pki.ed25519.sign({
     encoding: "utf8",
@@ -91,7 +91,7 @@ export async function encryptData(data: string, secret: Uint8Array) {
 
   const cipher = forge.cipher.createCipher(
     "AES-GCM",
-    forge.util.createBuffer(secret)
+    forge.util.createBuffer(secret),
   );
   cipher.start({
     iv,
@@ -104,7 +104,7 @@ export async function encryptData(data: string, secret: Uint8Array) {
   const tag = cipher.mode.tag;
 
   return `${forge.util.encode64(iv)}.${stringBufferToBase64(
-    encryptedData
+    encryptedData,
   )}.${stringBufferToBase64(tag)}` as const;
 }
 
@@ -115,7 +115,7 @@ export function decryptData(data: string, secret: Uint8Array) {
 
   const decipher = forge.cipher.createDecipher(
     "AES-GCM",
-    forge.util.createBuffer(secret)
+    forge.util.createBuffer(secret),
   );
   decipher.start({
     iv: base64ToStringBuffer(iv),

src/backend/accounts/import.ts

@@ -9,7 +9,7 @@ import { ProgressInput } from "./progress";
 export function importProgress(
   url: string,
   account: AccountWithToken,
-  progressItems: ProgressInput[]
+  progressItems: ProgressInput[],
 ) {
   return ofetch<void>(`/users/${account.userId}/progress/import`, {
     method: "PUT",
@@ -22,7 +22,7 @@ export function importProgress(
 export function importBookmarks(
   url: string,
   account: AccountWithToken,
-  bookmarks: BookmarkInput[]
+  bookmarks: BookmarkInput[],
 ) {
   return ofetch<void>(`/users/${account.userId}/bookmarks`, {
     method: "PUT",

src/backend/accounts/login.ts

@@ -8,7 +8,7 @@ export interface ChallengeTokenResponse {
 
 export async function getLoginChallengeToken(
   url: string,
-  publicKey: string
+  publicKey: string,
 ): Promise<ChallengeTokenResponse> {
   return ofetch<ChallengeTokenResponse>("/auth/login/start", {
     method: "POST",
@@ -35,7 +35,7 @@ export interface LoginInput {
 
 export async function loginAccount(
   url: string,
-  data: LoginInput
+  data: LoginInput,
 ): Promise<LoginResponse> {
   return ofetch<LoginResponse>("/auth/login/complete", {
     method: "POST",

src/backend/accounts/progress.ts

@@ -23,7 +23,7 @@ export interface ProgressInput {
 }
 
 export function progressUpdateItemToInput(
-  item: ProgressUpdateItem
+  item: ProgressUpdateItem,
 ): ProgressInput {
   return {
     duration: item.progress?.duration ?? 0,
@@ -44,7 +44,7 @@ export function progressUpdateItemToInput(
 
 export function progressMediaItemToInputs(
   tmdbId: string,
-  item: ProgressMediaItem
+  item: ProgressMediaItem,
 ): ProgressInput[] {
   if (item.type === "show") {
     return Object.entries(item.episodes).flatMap(([_, episode]) => ({
@@ -83,7 +83,7 @@ export function progressMediaItemToInputs(
 export async function setProgress(
   url: string,
   account: AccountWithToken,
-  input: ProgressInput
+  input: ProgressInput,
 ) {
   return ofetch<ProgressResponse>(
     `/users/${account.userId}/progress/${input.tmdbId}`,
@@ -92,7 +92,7 @@ export async function setProgress(
       headers: getAuthHeaders(account.token),
       baseURL: url,
       body: input,
-    }
+    },
   );
 }
 
@@ -101,7 +101,7 @@ export async function removeProgress(
   account: AccountWithToken,
   id: string,
   episodeId?: string,
-  seasonId?: string
+  seasonId?: string,
 ) {
   await ofetch(`/users/${account.userId}/progress/${id}`, {
     method: "DELETE",

src/backend/accounts/register.ts

@@ -9,7 +9,7 @@ export interface ChallengeTokenResponse {
 
 export async function getRegisterChallengeToken(
   url: string,
-  captchaToken?: string
+  captchaToken?: string,
 ): Promise<ChallengeTokenResponse> {
   return ofetch<ChallengeTokenResponse>("/auth/register/start", {
     method: "POST",
@@ -42,7 +42,7 @@ export interface RegisterInput {
 
 export async function registerAccount(
   url: string,
-  data: RegisterInput
+  data: RegisterInput,
 ): Promise<RegisterResponse> {
   return ofetch<RegisterResponse>("/auth/register/complete", {
     method: "POST",

src/backend/accounts/sessions.ts

@@ -26,7 +26,7 @@ export async function getSessions(url: string, account: AccountWithToken) {
 export async function updateSession(
   url: string,
   account: AccountWithToken,
-  update: SessionUpdate
+  update: SessionUpdate,
 ) {
   return ofetch<SessionResponse[]>(`/sessions/${account.sessionId}`, {
     method: "PATCH",
@@ -39,7 +39,7 @@ export async function updateSession(
 export async function removeSession(
   url: string,
   token: string,
-  sessionId: string
+  sessionId: string,
 ) {
   return ofetch<SessionResponse[]>(`/sessions/${sessionId}`, {
     method: "DELETE",

src/backend/accounts/settings.ts

@@ -18,7 +18,7 @@ export interface SettingsResponse {
 export function updateSettings(
   url: string,
   account: AccountWithToken,
-  settings: SettingsInput
+  settings: SettingsInput,
 ) {
   return ofetch<SettingsResponse>(`/users/${account.userId}/settings`, {
     method: "PUT",

src/backend/accounts/user.ts

@@ -119,21 +119,21 @@ export function progressResponsesToEntries(responses: ProgressResponse[]) {
 
 export async function getUser(
   url: string,
-  token: string
+  token: string,
 ): Promise<{ user: UserResponse; session: SessionResponse }> {
   return ofetch<{ user: UserResponse; session: SessionResponse }>(
     "/users/@me",
     {
       headers: getAuthHeaders(token),
       baseURL: url,
-    }
+    },
   );
 }
 
 export async function editUser(
   url: string,
   account: AccountWithToken,
-  object: UserEdit
+  object: UserEdit,
 ): Promise<{ user: UserResponse; session: SessionResponse }> {
   return ofetch<{ user: UserResponse; session: SessionResponse }>(
     `/users/${account.userId}`,
@@ -142,13 +142,13 @@ export async function editUser(
       headers: getAuthHeaders(account.token),
       body: object,
       baseURL: url,
-    }
+    },
   );
 }
 
 export async function deleteUser(
   url: string,
-  account: AccountWithToken
+  account: AccountWithToken,
 ): Promise<UserResponse> {
   return ofetch<UserResponse>(`/users/${account.userId}`, {
     headers: getAuthHeaders(account.token),

src/backend/helpers/fetch.ts

@@ -25,7 +25,7 @@ export function mwFetch<T>(url: string, ops: P<T>[1] = {}): R<T> {
 export async function singularProxiedFetch<T>(
   proxyUrl: string,
   url: string,
-  ops: P<T>[1] = {}
+  ops: P<T>[1] = {},
 ): R<T> {
   let combinedUrl = ops?.baseURL ?? "";
   if (

src/backend/helpers/providerApi.ts

@@ -96,7 +96,7 @@ export async function getApiToken(): Promise<string | null> {
 
 export async function connectServerSideEvents<T>(
   url: string,
-  endEvents: string[]
+  endEvents: string[],
 ) {
   const apiToken = await getApiToken();
 

src/backend/helpers/report.ts

@@ -58,7 +58,7 @@ export function scrapeSourceOutputToProviderMetric(
   providerId: string,
   embedId: string | null,
   status: ProviderMetric["status"],
-  err: unknown | null
+  err: unknown | null,
 ): ProviderMetric {
   const episodeId = media.episode?.tmdbId;
   const seasonId = media.season?.tmdbId;
@@ -82,7 +82,7 @@ export function scrapeSourceOutputToProviderMetric(
 export function scrapeSegmentToProviderMetric(
   media: ScrapeMedia,
   providerId: string,
-  segment: ScrapingSegment
+  segment: ScrapingSegment,
 ): ProviderMetric | null {
   const status = segmentStatusMap[segment.status];
   if (!status) return null;
@@ -112,7 +112,7 @@ export function scrapeSegmentToProviderMetric(
 export function scrapePartsToProviderMetric(
   media: ScrapeMedia,
   order: ScrapingItems[],
-  sources: Record<string, ScrapingSegment>
+  sources: Record<string, ScrapingSegment>,
 ): ProviderMetric[] {
   const output: ProviderMetric[] = [];
 

src/backend/helpers/subs.ts

@@ -14,7 +14,7 @@ const expirySeconds = 24 * 60 * 60;
  * Always returns SRT
  */
 export async function downloadCaption(
-  caption: CaptionListItem
+  caption: CaptionListItem,
 ): Promise<string> {
   const cached = downloadCache.get(caption.url);
   if (cached) return cached;

src/backend/metadata/getmeta.ts

@@ -34,7 +34,7 @@ export interface DetailedMeta {
 
 export function formatTMDBMetaResult(
   details: TMDBShowData | TMDBMovieData,
-  type: MWMediaType
+  type: MWMediaType,
 ): TMDBMediaResult {
   if (type === MWMediaType.MOVIE) {
     const movie = details as TMDBMovieData;
@@ -68,7 +68,7 @@ export function formatTMDBMetaResult(
 export async function getMetaFromId(
   type: MWMediaType,
   id: string,
-  seasonId?: string
+  seasonId?: string,
 ): Promise<DetailedMeta | null> {
   const details = await getMediaDetails(id, mediaTypeToTMDB(type));
 
@@ -89,7 +89,7 @@ export async function getMetaFromId(
     if (selectedSeason) {
       const episodes = await getEpisodes(
         details.id.toString(),
-        selectedSeason.season_number
+        selectedSeason.season_number,
       );
 
       seasonData = {
@@ -116,7 +116,7 @@ export async function getMetaFromId(
 export async function getLegacyMetaFromId(
   type: MWMediaType,
   id: string,
-  seasonId?: string
+  seasonId?: string,
 ): Promise<DetailedMeta | null> {
   const queryType = mediaTypeToJW(type);
 
@@ -135,15 +135,13 @@ export async function getLegacyMetaFromId(
     throw err;
   }
 
-  let imdbId = data.external_ids.find(
+  let imdbId = data.external_ids.find((v) => v.provider === "imdb_latest")
-    (v) => v.provider === "imdb_latest"
+    ?.external_id;
-  )?.external_id;
   if (!imdbId)
     imdbId = data.external_ids.find((v) => v.provider === "imdb")?.external_id;
 
-  let tmdbId = data.external_ids.find(
+  let tmdbId = data.external_ids.find((v) => v.provider === "tmdb_latest")
-    (v) => v.provider === "tmdb_latest"
+    ?.external_id;
-  )?.external_id;
   if (!tmdbId)
     tmdbId = data.external_ids.find((v) => v.provider === "tmdb")?.external_id;
 
@@ -175,7 +173,7 @@ export function isLegacyMediaType(url: string): boolean {
 }
 
 export async function convertLegacyUrl(
-  url: string
+  url: string,
 ): Promise<string | undefined> {
   if (!isLegacyUrl(url)) return undefined;
 
@@ -191,7 +189,7 @@ export async function convertLegacyUrl(
     return `/media/${TMDBIdToUrlId(
       MWMediaType.SERIES,
       details.id.toString(),
-      details.name
+      details.name,
     )}${suffix}`;
   }
 

src/backend/metadata/justwatch.ts

@@ -20,7 +20,7 @@ export function JWMediaToMediaType(type: string): MWMediaType {
 
 export function formatJWMeta(
   media: JWMediaResult,
-  season?: JWSeasonMetaResult
+  season?: JWSeasonMetaResult,
 ): MWMediaMeta {
   const type = JWMediaToMediaType(media.object_type);
   let seasons: undefined | MWSeasonMeta[];
@@ -32,7 +32,7 @@ export function formatJWMeta(
           id: v.id.toString(),
           number: v.season_number,
           title: v.title,
-        })
+        }),
       );
   }
 
@@ -67,7 +67,7 @@ export function JWMediaToId(media: MWMediaMeta): string {
 }
 
 export function decodeJWId(
-  paramId: string
+  paramId: string,
 ): { id: string; type: MWMediaType } | null {
   const [prefix, type, id] = paramId.split("-", 3);
   if (prefix !== "JW") return null;

src/backend/metadata/tmdb.ts

@@ -38,7 +38,7 @@ export function TMDBMediaToMediaType(type: TMDBContentTypes): MWMediaType {
 }
 
 export function TMDBMediaToMediaItemType(
-  type: TMDBContentTypes
+  type: TMDBContentTypes,
 ): MediaItem["type"] {
   if (type === TMDBContentTypes.MOVIE) return "movie";
   if (type === TMDBContentTypes.TV) return "show";
@@ -47,7 +47,7 @@ export function TMDBMediaToMediaItemType(
 
 export function formatTMDBMeta(
   media: TMDBMediaResult,
-  season?: TMDBSeasonMetaResult
+  season?: TMDBSeasonMetaResult,
 ): MWMediaMeta {
   const type = TMDBMediaToMediaType(media.object_type);
   let seasons: undefined | MWSeasonMeta[];
@@ -59,7 +59,7 @@ export function formatTMDBMeta(
           title: v.title,
           id: v.id.toString(),
           number: v.season_number,
-        })
+        }),
       );
   }
 
@@ -102,7 +102,7 @@ export function formatTMDBMetaToMediaItem(media: TMDBMediaResult): MediaItem {
 export function TMDBIdToUrlId(
   type: MWMediaType,
   tmdbId: string,
-  title: string
+  title: string,
 ) {
   return [
     "tmdb",
@@ -120,12 +120,12 @@ export function mediaItemToId(media: MediaItem): string {
   return TMDBIdToUrlId(
     mediaItemTypeToMediaType(media.type),
     media.id,
-    media.title
+    media.title,
   );
 }
 
 export function decodeTMDBId(
-  paramId: string
+  paramId: string,
 ): { id: string; type: MWMediaType } | null {
   const [prefix, type, id] = paramId.split("-", 3);
   if (prefix !== "tmdb") return null;
@@ -160,7 +160,7 @@ async function get<T>(url: string, params?: object): Promise<T> {
 }
 
 export async function multiSearch(
-  query: string
+  query: string,
 ): Promise<(TMDBMovieSearchResult | TMDBShowSearchResult)[]> {
   const data = await get<TMDBSearchResult>("search/multi", {
     query,
@@ -172,13 +172,13 @@ export async function multiSearch(
   const results = data.results.filter(
     (r) =>
       r.media_type === TMDBContentTypes.MOVIE ||
-      r.media_type === TMDBContentTypes.TV
+      r.media_type === TMDBContentTypes.TV,
   );
   return results;
 }
 
 export async function generateQuickSearchMediaUrl(
-  query: string
+  query: string,
 ): Promise<string | undefined> {
   const data = await multiSearch(query);
   if (data.length === 0) return undefined;
@@ -189,7 +189,7 @@ export async function generateQuickSearchMediaUrl(
   return `/media/${TMDBIdToUrlId(
     TMDBMediaToMediaType(result.media_type),
     result.id.toString(),
-    title
+    title,
   )}`;
 }
 
@@ -198,12 +198,12 @@ type MediaDetailReturn<T extends TMDBContentTypes> =
   T extends TMDBContentTypes.MOVIE
     ? TMDBMovieData
     : T extends TMDBContentTypes.TV
-    ? TMDBShowData
+      ? TMDBShowData
-    : never;
+      : never;
 
 export function getMediaDetails<
   T extends TMDBContentTypes,
-  TReturn = MediaDetailReturn<T>
+  TReturn = MediaDetailReturn<T>,
 >(id: string, type: T): Promise<TReturn> {
   if (type === TMDBContentTypes.MOVIE) {
     return get<TReturn>(`/movie/${id}`, { append_to_response: "external_ids" });
@@ -220,7 +220,7 @@ export function getMediaPoster(posterPath: string | null): string | undefined {
 
 export async function getEpisodes(
   id: string,
-  season: number
+  season: number,
 ): Promise<TMDBEpisodeShort[]> {
   const data = await get<TMDBSeason>(`/tv/${id}/season/${season}`);
   return data.episodes.map((e) => ({
@@ -231,7 +231,7 @@ export async function getEpisodes(
 }
 
 export async function getMovieFromExternalId(
-  imdbId: string
+  imdbId: string,
 ): Promise<string | undefined> {
   const data = await get<ExternalIdMovieSearchResult>(`/find/${imdbId}`, {
     external_source: "imdb_id",
@@ -245,7 +245,7 @@ export async function getMovieFromExternalId(
 
 export function formatTMDBSearchResult(
   result: TMDBMovieSearchResult | TMDBShowSearchResult,
-  mediatype: TMDBContentTypes
+  mediatype: TMDBContentTypes,
 ): TMDBMediaResult {
   const type = TMDBMediaToMediaType(mediatype);
   if (type === MWMediaType.SERIES) {

src/components/Avatar.tsx

@@ -20,7 +20,7 @@ export function Avatar(props: AvatarProps) {
       <div
         className={classNames(
           props.sizeClass,
-          "rounded-full overflow-hidden flex items-center justify-center text-white"
+          "rounded-full overflow-hidden flex items-center justify-center text-white",
         )}
         style={{
           background: `linear-gradient(to bottom right, ${props.profile.colorA}, ${props.profile.colorB})`,
@@ -53,7 +53,7 @@ export function UserAvatar(props: {
       auth.account && auth.account.seed
         ? base64ToBuffer(auth.account.seed)
         : null,
-    [auth]
+    [auth],
   );
 
   if (!auth.account || auth.account === null) return null;

src/components/FlagIcon.tsx

@@ -51,7 +51,7 @@ export function FlagIcon(props: FlagIconProps) {
     <span
       className={classNames(
         "!w-8 h-6 rounded overflow-hidden bg-video-context-flagBg bg-cover bg-center block fi",
-        props.countryCode ? `fi-${countryCode}` : undefined
+        props.countryCode ? `fi-${countryCode}` : undefined,
       )}
     />
   );

src/components/LinksDropdown.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { base64ToBuffer, decryptData } from "@/backend/accounts/crypto";
 import { UserAvatar } from "@/components/Avatar";
@@ -21,11 +21,11 @@ function GoToLink(props: {
   className?: string;
   onClick?: () => void;
 }) {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const goTo = (href: string) => {
     if (href.startsWith("http")) window.open(href, "_blank");
-    else history.push(href);
+    else navigate(href);
   };
 
   return (
@@ -61,7 +61,7 @@ function DropdownLink(props: {
         props.highlight
           ? "text-dropdown-highlight hover:text-dropdown-highlightHover"
           : "text-dropdown-text hover:text-white",
-        props.className
+        props.className,
       )}
     >
       {props.icon ? <Icon icon={props.icon} className="text-xl" /> : null}
@@ -88,7 +88,7 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
   const seed = useAuthStore((s) => s.account?.seed);
   const bufferSeed = useMemo(
     () => (seed ? base64ToBuffer(seed) : null),
-    [seed]
+    [seed],
   );
   const { logout } = useAuth();
 
@@ -118,7 +118,7 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
         <Icon
           className={classNames(
             "text-xl transition-transform duration-100",
-            open ? "rotate-180" : ""
+            open ? "rotate-180" : "",
           )}
           icon={Icons.CHEVRON_DOWN}
         />

src/components/buttons/Button.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { ReactNode, useCallback } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { Icon, Icons } from "@/components/Icon";
 import { Spinner } from "@/components/layout/Spinner";
@@ -19,13 +19,13 @@ interface Props {
 }
 
 export function Button(props: Props) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { onClick, href, loading } = props;
   const cb = useCallback(() => {
     if (loading) return;
-    if (href) history.push(href);
+    if (href) navigate(href);
     else onClick?.();
-  }, [onClick, href, history, loading]);
+  }, [onClick, href, navigate, loading]);
 
   let colorClasses = "bg-white hover:bg-gray-200 text-black";
   if (props.theme === "purple")
@@ -41,7 +41,7 @@ export function Button(props: Props) {
     props.padding ?? "px-4 py-3",
     props.className,
     colorClasses,
-    props.disabled ? "cursor-not-allowed bg-opacity-60 text-opacity-60" : null
+    props.disabled ? "cursor-not-allowed bg-opacity-60 text-opacity-60" : null,
   );
 
   if (props.disabled)
@@ -49,7 +49,7 @@ export function Button(props: Props) {
       .split(" ")
       .filter(
         (className) =>
-          !className.startsWith("hover:") && !className.startsWith("active:")
+          !className.startsWith("hover:") && !className.startsWith("active:"),
       )
       .join(" ");
 
@@ -120,7 +120,7 @@ export function ButtonPlain(props: ButtonPlainProps) {
     "cursor-pointer inline-flex items-center justify-center rounded-lg font-medium transition-[transform,background-color] duration-100 active:scale-105 md:px-8",
     "px-4 py-3",
     props.className,
-    colorClasses
+    colorClasses,
   );
 
   return (

src/components/buttons/Toggle.tsx

@@ -7,14 +7,14 @@ export function Toggle(props: { onClick: () => void; enabled?: boolean }) {
       onClick={props.onClick}
       className={classNames(
         "w-11 h-6 p-1 rounded-full grid transition-colors duration-100 group/toggle tabbable",
-        props.enabled ? "bg-buttons-toggle" : "bg-buttons-toggleDisabled"
+        props.enabled ? "bg-buttons-toggle" : "bg-buttons-toggleDisabled",
       )}
     >
       <div className="relative w-full h-full">
         <div
           className={classNames(
             "scale-90 group-hover/toggle:scale-100 h-full aspect-square rounded-full bg-white absolute transition-all duration-100",
-            props.enabled ? "left-full transform -translate-x-full" : "left-0"
+            props.enabled ? "left-full transform -translate-x-full" : "left-0",
           )}
         />
       </div>

src/components/form/ColorPicker.tsx

@@ -24,7 +24,7 @@ export function ColorPicker(props: {
               tabIndex={0}
               className={classNames(
                 "w-full h-10 rounded flex justify-center items-center text-white pointer border-2 border-opacity-10 cursor-pointer",
-                props.value === color ? "border-white" : "border-transparent"
+                props.value === color ? "border-white" : "border-transparent",
               )}
               onClick={() => props.onInput(color)}
               style={{ backgroundColor: color }}

src/components/form/IconPicker.tsx

@@ -32,7 +32,7 @@ export function IconPicker(props: {
                 "w-full h-10 rounded flex justify-center items-center text-white pointer border-2 border-opacity-10 cursor-pointer",
                 props.value === icon
                   ? "bg-buttons-purple border-white"
-                  : "bg-authentication-inputBg border-transparent"
+                  : "bg-authentication-inputBg border-transparent",
               )}
               onClick={() => props.onInput(icon)}
               key={icon}

src/components/form/SearchBar.tsx

@@ -60,5 +60,5 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
         </Flare.Child>
       </Flare.Base>
     );
-  }
+  },
 );

src/components/layout/BrandPill.tsx

@@ -17,7 +17,7 @@ export function BrandPill(props: {
         props.backgroundClass ?? "bg-pill-background bg-opacity-50",
         props.clickable
           ? "transition-[transform,background-color] hover:scale-105 hover:bg-pill-backgroundHover hover:text-type-logo active:scale-95"
-          : ""
+          : "",
       )}
     >
       <Icon className="text-xl" icon={Icons.MOVIE_WEB} />

src/components/layout/Footer.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import type { RequireExactlyOne } from "type-fest";
 
 import { Icon, Icons } from "@/components/Icon";
@@ -21,13 +21,13 @@ type FooterLinkProps = RequireExactlyOne<
 >;
 
 function FooterLink(props: FooterLinkProps) {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const navigateTo = useCallback(() => {
     if (!props.to) return;
 
-    history.push(props.to);
+    navigate(props.to);
-  }, [history, props.to]);
+  }, [navigate, props.to]);
 
   return (
     <a
@@ -99,7 +99,7 @@ export function FooterView(props: {
   return (
     <div
       className={["flex min-h-screen flex-col", props.className || ""].join(
-        " "
+        " ",
       )}
     >
       <div style={{ flex: "1 0 auto" }}>{props.children}</div>

src/components/layout/Navigation.tsx

@@ -51,7 +51,7 @@ export function Navigation(props: NavigationProps) {
             "fixed left-0 right-0 h-20 flex items-center",
             props.doBackground
               ? "bg-background-main border-b border-utils-divider border-opacity-50"
-              : null
+              : null,
           )}
         >
           {props.doBackground ? (

src/components/layout/SettingsCard.tsx

@@ -10,7 +10,7 @@ export function SettingsCard(props: {
       className={classNames(
         "w-full rounded-lg bg-settings-card-background bg-opacity-[0.15] border border-settings-card-border",
         props.paddingClass ?? "px-8 py-6",
-        props.className
+        props.className,
       )}
     >
       {props.children}
@@ -28,7 +28,7 @@ export function SolidSettingsCard(props: {
       className={classNames(
         "w-full rounded-lg bg-settings-card-altBackground bg-opacity-50",
         props.paddingClass ?? "px-8 py-6",
-        props.className
+        props.className,
       )}
     >
       {props.children}

src/components/layout/Sidebar.tsx

@@ -31,13 +31,13 @@ export function SidebarLink(props: {
         "tabbable w-full px-3 py-2 flex items-center space-x-3 cursor-pointer rounded my-2",
         props.active
           ? "bg-settings-sidebar-activeLink text-settings-sidebar-type-activated"
-          : null
+          : null,
       )}
     >
       <Icon
         className={classNames(
           "text-2xl text-settings-sidebar-type-icon",
-          props.active ? "text-settings-sidebar-type-iconActivated" : null
+          props.active ? "text-settings-sidebar-type-iconActivated" : null,
         )}
         icon={props.icon}
       />

src/components/media/MediaCard.tsx

@@ -66,7 +66,7 @@ function MediaCardContent({
             "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
             {
               "group-hover:rounded-lg": !closable,
-            }
+            },
           )}
           style={{
             backgroundImage: media.poster ? `url(${media.poster})` : undefined,
@@ -152,7 +152,7 @@ export function MediaCard(props: MediaCardProps) {
       link += `/${encodeURIComponent(props.series.seasonId)}`;
     } else {
       link += `/${encodeURIComponent(
-        props.series.seasonId
+        props.series.seasonId,
       )}/${encodeURIComponent(props.series.episodeId)}`;
     }
   }
@@ -164,7 +164,7 @@ export function MediaCard(props: MediaCardProps) {
       tabIndex={-1}
       className={classNames(
         "tabbable",
-        props.closable ? "hover:cursor-default" : ""
+        props.closable ? "hover:cursor-default" : "",
       )}
     >
       {content}

src/components/media/MediaGrid.tsx

@@ -14,5 +14,5 @@ export const MediaGrid = forwardRef<HTMLDivElement, MediaGridProps>(
         {props.children}
       </div>
     );
-  }
+  },
 );

src/components/media/WatchedMediaCard.tsx

@@ -32,7 +32,7 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
   }, [progressItems, props.media]);
   const itemToDisplay = useMemo(
     () => (item ? shouldShowProgress(item) : null),
-    [item]
+    [item],
   );
   const percentage = itemToDisplay?.show
     ? (itemToDisplay.progress.watched / itemToDisplay.progress.duration) * 100

src/components/overlays/OverlayDisplay.tsx

@@ -80,7 +80,7 @@ export function OverlayPortal(props: {
                 </div>
               </FocusTrap>
             </Transition>,
-            portalElement
+            portalElement,
           )
         : null}
     </div>

src/components/overlays/OverlayRouter.tsx

@@ -21,7 +21,7 @@ function RouterBase(props: { id: string; children: ReactNode }) {
   const router = useInternalOverlayRouter(props.id);
   const routeMeta = useMemo(
     () => routes[router.currentRoute ?? ""],
-    [routes, router]
+    [routes, router],
   );
 
   const [dimensions, api] = useSpring(
@@ -34,7 +34,7 @@ function RouterBase(props: { id: string; children: ReactNode }) {
         easing: easings.linear,
       },
     }),
-    []
+    [],
   );
 
   const currentState = useRef<null | string>(null);

src/components/overlays/positions/OverlayAnchorPosition.tsx

@@ -25,11 +25,11 @@ function useCalculatePositions() {
       setLeft(
         Math.min(
           buttonCenter - card.width / 2,
-          window.innerWidth - card.width - 30
+          window.innerWidth - card.width - 30,
-        )
+        ),
       );
     },
-    []
+    [],
   );
 
   useEffect(() => {

src/components/player/atoms/Chromecast.tsx

@@ -18,7 +18,7 @@ export function Chromecast(props: ChromecastProps) {
       const isVisible = (tag.getAttribute("style") ?? "").includes("inline");
       setHidden(!isVisible);
     },
-    [setHidden]
+    [setHidden],
   );
 
   useEffect(() => {

src/components/player/atoms/Episodes.tsx

@@ -54,7 +54,7 @@ function SeasonsView({
   const meta = usePlayerStore((s) => s.meta);
   const [loadingState, seasons] = useSeasonData(
     meta?.tmdbId ?? "",
-    selectedSeason
+    selectedSeason,
   );
 
   let content: ReactNode = null;
@@ -120,7 +120,7 @@ function EpisodesView({
       // player already switches route after meta change
       router.close(true);
     },
-    [setPlayerMeta, loadingState, router, onChange]
+    [setPlayerMeta, loadingState, router, onChange],
   );
 
   if (!meta?.tmdbId) return null;
@@ -175,7 +175,7 @@ function EpisodesView({
                       "p-0.5 px-2 rounded inline bg-video-context-hoverColor",
                       ep.id === meta?.episode?.tmdbId
                         ? "text-white bg-opacity-100"
-                        : "bg-opacity-50"
+                        : "bg-opacity-50",
                     )}
                   >
                     {t("player.menus.episodes.episodeBadge", {
@@ -226,7 +226,7 @@ function EpisodesOverlay({
       setSelectedSeason(seasonId);
       router.navigate("/episodes");
     },
-    [router]
+    [router],
   );
 
   return (

src/components/player/atoms/NextEpisodeButton.tsx

@@ -10,7 +10,7 @@ import { usePlayerStore } from "@/stores/player/store";
 
 function shouldShowNextEpisodeButton(
   time: number,
-  duration: number
+  duration: number,
 ): "always" | "hover" | "none" {
   const percentage = time / duration;
   const secondsFromEnd = duration - time;
@@ -28,7 +28,7 @@ function Button(props: {
     <button
       className={classNames(
         "font-bold rounded h-10 w-40 scale-95 hover:scale-100 transition-all duration-200",
-        props.className
+        props.className,
       )}
       type="button"
       onClick={props.onClick}
@@ -53,7 +53,7 @@ export function NextEpisodeButton(props: {
   const showingState = shouldShowNextEpisodeButton(time, duration);
   const status = usePlayerStore((s) => s.status);
   const setShouldStartFromBeginning = usePlayerStore(
-    (s) => s.setShouldStartFromBeginning
+    (s) => s.setShouldStartFromBeginning,
   );
 
   let show = false;
@@ -69,7 +69,7 @@ export function NextEpisodeButton(props: {
       : "bottom-[calc(3rem+env(safe-area-inset-bottom))]";
 
   const nextEp = meta?.episodes?.find(
-    (v) => v.number === (meta?.episode?.number ?? 0) + 1
+    (v) => v.number === (meta?.episode?.number ?? 0) + 1,
   );
 
   const loadNextEpisode = useCallback(() => {

src/components/player/atoms/ProgressBar.tsx

@@ -58,7 +58,7 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
             <p className="text-center mt-1">
               {formatSeconds(
                 Math.max(props.at, 0),
-                durationExceedsHour(props.at)
+                durationExceedsHour(props.at),
               )}
             </p>
           </div>
@@ -79,7 +79,7 @@ function useMouseHoverPosition(barRef: RefObject<HTMLDivElement>) {
       const pos = (e.pageX - rect.left) / barRef.current.offsetWidth;
       setMousePos(pos * 100);
     },
-    [setMousePos, barRef]
+    [setMousePos, barRef],
   );
 
   const mouseLeave = useCallback(() => {
@@ -97,10 +97,10 @@ export function ProgressBar() {
   const { isSeeking } = usePlayerStore((s) => s.interface);
 
   const commitTime = useCallback(
-    (percentage) => {
+    (percentage: number) => {
       display?.setTime(percentage * duration);
     },
-    [duration, display]
+    [duration, display],
   );
 
   const ref = useRef<HTMLDivElement>(null);
@@ -108,7 +108,7 @@ export function ProgressBar() {
 
   const { dragging, dragPercentage, dragMouseDown } = useProgressBar(
     ref,
-    commitTime
+    commitTime,
   );
   useEffect(() => {
     setSeeking(dragging);
@@ -165,8 +165,8 @@ export function ProgressBar() {
                     0,
                     Math.min(
                       1,
-                      dragging ? dragPercentage / 100 : time / duration
+                      dragging ? dragPercentage / 100 : time / duration,
-                    )
+                    ),
                   ) * 100
                 }%`,
               }}

src/components/player/atoms/Time.tsx

@@ -22,19 +22,19 @@ export function Time(props: { short?: boolean }) {
     setTimeFormat(
       timeFormat === VideoPlayerTimeFormat.REGULAR
         ? VideoPlayerTimeFormat.REMAINING
-        : VideoPlayerTimeFormat.REGULAR
+        : VideoPlayerTimeFormat.REGULAR,
     );
   }
 
   const currentTime = Math.min(
     Math.max(isSeeking ? draggingTime : time, 0),
-    timeDuration
+    timeDuration,
   );
   const secondsRemaining = Math.abs(currentTime - timeDuration);
 
   const timeLeft = formatSeconds(
     secondsRemaining,
-    durationExceedsHour(secondsRemaining)
+    durationExceedsHour(secondsRemaining),
   );
   const timeWatched = formatSeconds(currentTime, hasHours);
   const timeFinished = new Date(Date.now() + secondsRemaining * 1e3);

src/components/player/atoms/Volume.tsx

@@ -23,16 +23,16 @@ export function Volume(props: Props) {
   const { setVolume, toggleMute } = useVolume();
 
   const commitVolume = useCallback(
-    (percentage) => {
+    (percentage: number) => {
       setVolume(percentage);
     },
-    [setVolume]
+    [setVolume],
   );
 
   const { dragging, dragPercentage, dragMouseDown } = useProgressBar(
     ref,
     commitVolume,
-    true
+    true,
   );
 
   const handleClick = useCallback(() => {

src/components/player/atoms/settings/CaptionSettingsView.tsx

@@ -19,7 +19,7 @@ export function ColorOption(props: {
       type="button"
       className={classNames(
         "tabbable p-1.5 bg-video-context-buttonFocus rounded transition-colors duration-100",
-        props.active ? "bg-opacity-100" : "bg-opacity-0 cursor-pointer"
+        props.active ? "bg-opacity-100" : "bg-opacity-0 cursor-pointer",
       )}
       onClick={props.onClick}
     >
@@ -50,18 +50,18 @@ export function CaptionSetting(props: {
 
   const currentPercentage = (props.value - props.min) / (props.max - props.min);
   const commit = useCallback(
-    (percentage) => {
+    (percentage: number) => {
       const range = props.max - props.min;
       const newPercentage = Math.min(Math.max(percentage, 0), 1);
       props.onChange?.(props.min + range * newPercentage);
     },
-    [props]
+    [props],
   );
 
   const { dragging, dragPercentage, dragMouseDown } = useProgressBar(
     ref,
     commit,
-    true
+    true,
   );
 
   const [isFocused, setIsFocused] = useState(false);
@@ -112,8 +112,8 @@ export function CaptionSetting(props: {
                       0,
                       Math.min(
                         1,
-                        dragging ? dragPercentage / 100 : currentPercentage
+                        dragging ? dragPercentage / 100 : currentPercentage,
-                      )
+                      ),
                     ) * 100
                   }%`,
                 }}
@@ -141,7 +141,7 @@ export function CaptionSetting(props: {
                 const num = Number((e.target as HTMLInputElement).value);
                 if (!Number.isNaN(num))
                   props.onChange?.(
-                    (props.decimalsAllowed ?? 0) === 0 ? Math.round(num) : num
+                    (props.decimalsAllowed ?? 0) === 0 ? Math.round(num) : num,
                   );
               }}
               ref={inputRef}
@@ -163,13 +163,13 @@ export function CaptionSetting(props: {
               <button
                 className={classNames(
                   inputClasses,
-                  props.controlButtons ? "relative" : undefined
+                  props.controlButtons ? "relative" : undefined,
                 )}
                 type="button"
                 tabIndex={0}
               >
                 {textTransformer(
-                  props.value.toFixed(props.decimalsAllowed ?? 0)
+                  props.value.toFixed(props.decimalsAllowed ?? 0),
                 )}
               </button>
               {props.controlButtons ? (
@@ -180,7 +180,8 @@ export function CaptionSetting(props: {
                       onClick={
                         () =>
                           props.onChange?.(
-                            props.value - 1 / 10 ** (props.decimalsAllowed ?? 0)
+                            props.value -
+                              1 / 10 ** (props.decimalsAllowed ?? 0),
                           ) // Remove depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
                       }
                       className={arrowButtonClasses}
@@ -194,7 +195,8 @@ export function CaptionSetting(props: {
                       onClick={
                         () =>
                           props.onChange?.(
-                            props.value + 1 / 10 ** (props.decimalsAllowed ?? 0)
+                            props.value +
+                              1 / 10 ** (props.decimalsAllowed ?? 0),
                           ) // Add depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
                       }
                       className={arrowButtonClasses}

src/components/player/atoms/settings/CaptionsView.tsx

@@ -127,7 +127,7 @@ export function CaptionsView({ id }: { id: string }) {
       setCurrentlyDownloading(language);
       return selectLanguage(language);
     },
-    [selectLanguage, setCurrentlyDownloading]
+    [selectLanguage, setCurrentlyDownloading],
   );
 
   const content = subtitleList.map((v, i) => {
@@ -141,7 +141,7 @@ export function CaptionsView({ id }: { id: string }) {
         loading={v.language === currentlyDownloading && downloadReq.loading}
         error={
           v.language === currentlyDownloading && downloadReq.error
-            ? downloadReq.error
+            ? downloadReq.error.toString()
             : undefined
         }
         onClick={() => startDownload(v.language)}
@@ -182,3 +182,5 @@ export function CaptionsView({ id }: { id: string }) {
     </>
   );
 }
+
+export default CaptionsView;

src/components/player/atoms/settings/Downloads.tsx

@@ -48,7 +48,7 @@ export function DownloadView({ id }: { id: string }) {
       selectedCaption
         ? convertSubtitlesToSrtDataurl(selectedCaption?.srtData)
         : null,
-    [selectedCaption]
+    [selectedCaption],
   );
 
   if (!downloadUrl) return null;

src/components/player/atoms/settings/PlaybackSettingsView.tsx

@@ -21,7 +21,7 @@ function ButtonList(props: {
               "w-full px-2 py-1 rounded-md tabbable",
               props.selected === option
                 ? "bg-video-context-buttons-active text-white"
-                : null
+                : null,
             )}
             onClick={() => props.onClick(option)}
             key={option}
@@ -44,7 +44,7 @@ export function PlaybackSettingsView({ id }: { id: string }) {
     (v: number) => {
       display?.setPlaybackRate(v);
     },
-    [display]
+    [display],
   );
 
   const options = [0.25, 0.5, 1, 1.5, 2];

src/components/player/atoms/settings/QualityView.tsx

@@ -43,7 +43,7 @@ export function QualityView({ id }: { id: string }) {
   const currentQuality = usePlayerStore((s) => s.currentQuality);
   const switchQuality = usePlayerStore((s) => s.switchQuality);
   const enableAutomaticQuality = usePlayerStore(
-    (s) => s.enableAutomaticQuality
+    (s) => s.enableAutomaticQuality,
   );
   const setAutomaticQuality = useQualityStore((s) => s.setAutomaticQuality);
   const setLastChosenQuality = useQualityStore((s) => s.setLastChosenQuality);
@@ -56,7 +56,7 @@ export function QualityView({ id }: { id: string }) {
       switchQuality(q);
       router.close();
     },
-    [router, switchQuality, setLastChosenQuality, setAutomaticQuality]
+    [router, switchQuality, setLastChosenQuality, setAutomaticQuality],
   );
 
   const changeAutomatic = useCallback(() => {

src/components/player/atoms/settings/SettingsMenu.tsx

@@ -17,14 +17,14 @@ export function SettingsMenu({ id }: { id: string }) {
   const router = useOverlayRouter(id);
   const currentQuality = usePlayerStore((s) => s.currentQuality);
   const selectedCaptionLanguage = usePlayerStore(
-    (s) => s.caption.selected?.language
+    (s) => s.caption.selected?.language,
   );
   const subtitlesEnabled = useSubtitleStore((s) => s.enabled);
   const currentSourceId = usePlayerStore((s) => s.sourceId);
   const sourceName = useMemo(() => {
     if (!currentSourceId) return "...";
     const source = getCachedMetadata().find(
-      (src) => src.id === currentSourceId
+      (src) => src.id === currentSourceId,
     );
     return source?.name ?? "...";
   }, [currentSourceId]);
@@ -59,7 +59,7 @@ export function SettingsMenu({ id }: { id: string }) {
           clickable
           onClick={() =>
             router.navigate(
-              source?.type === "file" ? "/download" : "/download/unable"
+              source?.type === "file" ? "/download" : "/download/unable",
             )
           }
           rightSide={<Icon className="text-xl" icon={Icons.DOWNLOAD} />}

src/components/player/atoms/settings/SourceSelectingView.tsx

@@ -41,7 +41,7 @@ export function EmbedOption(props: {
     props.routerId,
     props.sourceId,
     props.url,
-    props.embedId
+    props.embedId,
   );
 
   return (

src/components/player/base/BackLink.tsx

@@ -1,17 +1,17 @@
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { Icon, Icons } from "@/components/Icon";
 
 export function BackLink(props: { url: string }) {
   const { t } = useTranslation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   return (
     <div className="flex items-center">
       <button
         type="button"
-        onClick={() => history.push(props.url)}
+        onClick={() => navigate(props.url)}
         className="py-1 -my-1 px-2 -mx-2 tabbable rounded-lg flex items-center cursor-pointer text-type-secondary hover:text-white transition-colors duration-200 font-medium"
       >
         <Icon className="mr-2" icon={Icons.ARROW_LEFT} />

src/components/player/base/BottomControls.tsx

@@ -8,7 +8,7 @@ export function BottomControls(props: {
   children: React.ReactNode;
 }) {
   const setHoveringAnyControls = usePlayerStore(
-    (s) => s.setHoveringAnyControls
+    (s) => s.setHoveringAnyControls,
   );
 
   useEffect(() => {

src/components/player/base/Container.tsx

@@ -21,7 +21,7 @@ export interface PlayerProps {
 function useHovering(containerEl: RefObject<HTMLDivElement>) {
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const updateInterfaceHovering = usePlayerStore(
-    (s) => s.updateInterfaceHovering
+    (s) => s.updateInterfaceHovering,
   );
   const hovering = usePlayerStore((s) => s.interface.hovering);
 

src/components/player/base/LeftSideControls.tsx

@@ -8,7 +8,7 @@ export function LeftSideControls(props: {
   className?: string;
 }) {
   const setHoveringLeftControls = usePlayerStore(
-    (s) => s.setHoveringLeftControls
+    (s) => s.setHoveringLeftControls,
   );
 
   const mouseLeave = useCallback(() => {

src/components/player/base/SubtitleView.tsx

@@ -79,15 +79,15 @@ export function SubtitleRenderer() {
 
   const parsedCaptions = useMemo(
     () => (srtData ? parseSubtitles(srtData, language) : []),
-    [srtData, language]
+    [srtData, language],
   );
 
   const visibileCaptions = useMemo(
     () =>
       parsedCaptions.filter(({ start, end }) =>
-        captionIsVisible(start, end, delay, videoTime)
+        captionIsVisible(start, end, delay, videoTime),
       ),
-    [parsedCaptions, videoTime, delay]
+    [parsedCaptions, videoTime, delay],
   );
 
   return (

src/components/player/base/TopControls.tsx

@@ -11,7 +11,7 @@ export function TopControls(props: {
 }) {
   const bannerSize = useBannerSize("player");
   const setHoveringAnyControls = usePlayerStore(
-    (s) => s.setHoveringAnyControls
+    (s) => s.setHoveringAnyControls,
   );
 
   useEffect(() => {

src/components/player/display/base.ts

@@ -36,7 +36,7 @@ function hlsLevelToQuality(level: Level): SourceQuality | null {
 
 function qualityToHlsLevel(quality: SourceQuality): number | null {
   const found = Object.entries(levelConversionMap).find(
-    (entry) => entry[1] === quality
+    (entry) => entry[1] === quality,
   );
   return found ? +found[0] : null;
 }
@@ -83,7 +83,7 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
       });
       if (availableQuality) {
         const levelIndex = hls.levels.findIndex(
-          (v) => v.height === qualityToHlsLevel(availableQuality)
+          (v) => v.height === qualityToHlsLevel(availableQuality),
         );
         if (levelIndex !== -1) {
           hls.currentLevel = levelIndex;
@@ -182,10 +182,10 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
     videoElement.addEventListener("canplay", () => emit("loading", false));
     videoElement.addEventListener("waiting", () => emit("loading", true));
     videoElement.addEventListener("volumechange", () =>
-      emit("volumechange", videoElement?.muted ? 0 : videoElement?.volume ?? 0)
+      emit("volumechange", videoElement?.muted ? 0 : videoElement?.volume ?? 0),
     );
     videoElement.addEventListener("timeupdate", () =>
-      emit("time", videoElement?.currentTime ?? 0)
+      emit("time", videoElement?.currentTime ?? 0),
     );
     videoElement.addEventListener("loadedmetadata", () => {
       if (
@@ -202,7 +202,7 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
       if (videoElement)
         emit(
           "buffered",
-          handleBuffered(videoElement.currentTime, videoElement.buffered)
+          handleBuffered(videoElement.currentTime, videoElement.buffered),
         );
     });
     videoElement.addEventListener("webkitendfullscreen", () => {
@@ -216,7 +216,7 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
         if (e.availability === "available") {
           emit("canairplay", true);
         }
-      }
+      },
     );
     videoElement.addEventListener("ratechange", () => {
       if (videoElement) emit("playbackrate", videoElement.playbackRate);
@@ -368,7 +368,7 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
         webkitPlayer.webkitSetPresentationMode(
           webkitPlayer.webkitPresentationMode === "picture-in-picture"
             ? "inline"
-            : "picture-in-picture"
+            : "picture-in-picture",
         );
       }
       if (canPictureInPicture()) {

src/components/player/display/chromecast.ts

@@ -28,7 +28,7 @@ export interface ChromeCastDisplayInterfaceOptions {
  */
 
 export function makeChromecastDisplayInterface(
-  ops: ChromeCastDisplayInterfaceOptions
+  ops: ChromeCastDisplayInterfaceOptions,
 ): DisplayInterface {
   const { emit, on, off } = makeEmitter<DisplayInterfaceEvents>();
   let isPaused = false;
@@ -89,12 +89,12 @@ export function makeChromecastDisplayInterface(
     };
     ops.controller?.addEventListener(
       cast.framework.RemotePlayerEventType.ANY_CHANGE,
-      listen
+      listen,
     );
     return () => {
       ops.controller?.removeEventListener(
         cast.framework.RemotePlayerEventType.ANY_CHANGE,
-        listen
+        listen,
       );
     };
   }

src/components/player/display/displayInterface.ts

@@ -54,7 +54,7 @@ export interface DisplayInterface extends Listener<DisplayInterfaceEvents> {
   load(ops: qualityChangeOptions): void;
   changeQuality(
     automaticQuality: boolean,
-    preferredQuality: SourceQuality | null
+    preferredQuality: SourceQuality | null,
   ): void;
   processVideoElement(video: HTMLVideoElement): void;
   processContainerElement(container: HTMLElement): void;

src/components/player/hooks/useCaptions.ts

@@ -8,7 +8,7 @@ export function useCaptions() {
   const setLanguage = useSubtitleStore((s) => s.setLanguage);
   const enabled = useSubtitleStore((s) => s.enabled);
   const resetSubtitleSpecificSettings = useSubtitleStore(
-    (s) => s.resetSubtitleSpecificSettings
+    (s) => s.resetSubtitleSpecificSettings,
   );
   const setCaption = usePlayerStore((s) => s.setCaption);
   const lastSelectedLanguage = useSubtitleStore((s) => s.lastSelectedLanguage);
@@ -27,7 +27,7 @@ export function useCaptions() {
       resetSubtitleSpecificSettings();
       setLanguage(language);
     },
-    [setLanguage, captionList, setCaption, resetSubtitleSpecificSettings]
+    [setLanguage, captionList, setCaption, resetSubtitleSpecificSettings],
   );
 
   const disable = useCallback(async () => {

src/components/player/hooks/useInitializePlayer.ts

@@ -22,7 +22,7 @@ export function useInitializeSource() {
   const source = usePlayerStore((s) => s.source);
   const sourceIdentifier = useMemo(
     () => (source ? JSON.stringify(source) : null),
-    [source]
+    [source],
   );
   const { selectLastUsedLanguageIfEnabled } = useCaptions();
 

src/components/player/hooks/usePlayer.ts

@@ -16,7 +16,7 @@ export interface Source {
 
 function getProgress(
   items: Record<string, ProgressMediaItem>,
-  meta: PlayerMeta | null
+  meta: PlayerMeta | null,
 ): number {
   const item = items[meta?.tmdbId ?? ""];
   if (!item || !meta) return 0;
@@ -38,10 +38,10 @@ export function usePlayer() {
   const setSourceId = usePlayerStore((s) => s.setSourceId);
   const status = usePlayerStore((s) => s.status);
   const shouldStartFromBeginning = usePlayerStore(
-    (s) => s.interface.shouldStartFromBeginning
+    (s) => s.interface.shouldStartFromBeginning,
   );
   const setShouldStartFromBeginning = usePlayerStore(
-    (s) => s.setShouldStartFromBeginning
+    (s) => s.setShouldStartFromBeginning,
   );
   const reset = usePlayerStore((s) => s.reset);
   const meta = usePlayerStore((s) => s.meta);
@@ -61,7 +61,7 @@ export function usePlayer() {
       source: SourceSliceSource,
       captions: CaptionListItem[],
       sourceId: string | null,
-      startAtOverride?: number
+      startAtOverride?: number,
     ) {
       const start = startAtOverride ?? getProgress(progressStore.items, meta);
       setCaption(null);

src/components/player/hooks/usePlayerMeta.ts

@@ -13,14 +13,14 @@ export function usePlayerMeta() {
   const { meta, setMeta } = usePlayer();
   const scrapeMedia = useMemo(
     () => (meta ? metaToScrapeMedia(meta) : null),
-    [meta]
+    [meta],
   );
 
   const setDirectMeta = useCallback(
     (m: PlayerMeta) => {
       setMeta(m, playerStatus.SCRAPING);
     },
-    [setMeta]
+    [setMeta],
   );
 
   const setPlayerMeta = useCallback(
@@ -65,7 +65,7 @@ export function usePlayerMeta() {
       setDirectMeta(playerMeta);
       return playerMeta;
     },
-    [setDirectMeta]
+    [setDirectMeta],
   );
 
   return {

src/components/player/hooks/useShouldShowControls.tsx

@@ -4,12 +4,12 @@ import { usePlayerStore } from "@/stores/player/store";
 export function useShouldShowControls() {
   const hovering = usePlayerStore((s) => s.interface.hovering);
   const lastHoveringState = usePlayerStore(
-    (s) => s.interface.lastHoveringState
+    (s) => s.interface.lastHoveringState,
   );
   const isPaused = usePlayerStore((s) => s.mediaPlaying.isPaused);
   const hasOpenOverlay = usePlayerStore((s) => s.interface.hasOpenOverlay);
   const isHoveringControls = usePlayerStore(
-    (s) => s.interface.isHoveringControls
+    (s) => s.interface.isHoveringControls,
   );
 
   const isUsingTouch = lastHoveringState === PlayerHoverState.MOBILE_TAPPED;

src/components/player/hooks/useSourceSelection.ts

@@ -24,7 +24,7 @@ export function useEmbedScraping(
   routerId: string,
   sourceId: string,
   url: string,
-  embedId: string
+  embedId: string,
 ) {
   const setSource = usePlayerStore((s) => s.setSource);
   const setCaption = usePlayerStore((s) => s.setCaption);
@@ -43,7 +43,7 @@ export function useEmbedScraping(
         const baseUrlMaker = makeProviderUrl(providerApiUrl);
         const conn = await connectServerSideEvents<EmbedOutput>(
           baseUrlMaker.scrapeEmbed(embedId, url),
-          ["completed", "noOutput"]
+          ["completed", "noOutput"],
         );
         result = await conn.promise();
       } else {
@@ -62,7 +62,7 @@ export function useEmbedScraping(
           sourceId,
           embedId,
           status,
-          err
+          err,
         ),
       ]);
       throw err;
@@ -75,7 +75,7 @@ export function useEmbedScraping(
     setSource(
       convertRunoutputToSource({ stream: result.stream }),
       convertProviderCaption(result.stream.captions),
-      progress
+      progress,
     );
     router.close();
   }, [embedId, sourceId, meta, router, report, setCaption]);
@@ -107,7 +107,7 @@ export function useSourceScraping(sourceId: string | null, routerId: string) {
         const baseUrlMaker = makeProviderUrl(providerApiUrl);
         const conn = await connectServerSideEvents<SourcererOutput>(
           baseUrlMaker.scrapeSource(sourceId, scrapeMedia),
-          ["completed", "noOutput"]
+          ["completed", "noOutput"],
         );
         result = await conn.promise();
       } else {
@@ -134,7 +134,7 @@ export function useSourceScraping(sourceId: string | null, routerId: string) {
       setSource(
         convertRunoutputToSource({ stream: result.stream }),
         convertProviderCaption(result.stream.captions),
-        progress
+        progress,
       );
       setSourceId(sourceId);
       router.close();
@@ -149,9 +149,9 @@ export function useSourceScraping(sourceId: string | null, routerId: string) {
           const conn = await connectServerSideEvents<EmbedOutput>(
             baseUrlMaker.scrapeEmbed(
               result.embeds[0].embedId,
-              result.embeds[0].url
+              result.embeds[0].url,
             ),
-            ["completed", "noOutput"]
+            ["completed", "noOutput"],
           );
           embedResult = await conn.promise();
         } else {
@@ -170,7 +170,7 @@ export function useSourceScraping(sourceId: string | null, routerId: string) {
             sourceId,
             result.embeds[0].embedId,
             status,
-            err
+            err,
           ),
         ]);
         throw err;
@@ -181,7 +181,7 @@ export function useSourceScraping(sourceId: string | null, routerId: string) {
           sourceId,
           result.embeds[0].embedId,
           "success",
-          null
+          null,
         ),
       ]);
       setSourceId(sourceId);
@@ -189,7 +189,7 @@ export function useSourceScraping(sourceId: string | null, routerId: string) {
       setSource(
         convertRunoutputToSource({ stream: embedResult.stream }),
         convertProviderCaption(embedResult.stream.captions),
-        progress
+        progress,
       );
       router.close();
     }

src/components/player/internals/CastingInternal.tsx

@@ -102,13 +102,13 @@ export function CastingInternal() {
     }
     newControlller.addEventListener(
       cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
-      connectionChanged
+      connectionChanged,
     );
 
     return () => {
       newControlller.removeEventListener(
         cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
-        connectionChanged
+        connectionChanged,
       );
     };
   }, [available, setPlayer, setController, setInstance, setIsCasting]);

src/components/player/internals/ContextMenu/Sections.tsx

@@ -9,7 +9,7 @@ export function SectionTitle(props: {
     <h3
       className={classNames(
         "uppercase font-bold text-video-context-type-secondary text-xs pt-8 pl-1 pb-2.5 border-b border-video-context-border",
-        props.className
+        props.className,
       )}
     >
       {props.children}
@@ -47,7 +47,7 @@ export function ScrollToActiveSection(props: {
 
     scrollingContainer.current?.scrollTo(
       0,
-      activeYPos - boxRect.height / 2 + activeLinkRect.height / 2
+      activeYPos - boxRect.height / 2 + activeLinkRect.height / 2,
     );
   }, [props.loaded]);
 

src/components/player/internals/KeyboardEvents.tsx

@@ -75,11 +75,11 @@ export function KeyboardEvents() {
       }
       if (k === "ArrowUp")
         dataRef.current.setVolume(
-          (dataRef.current.mediaPlaying?.volume || 0) + 0.15
+          (dataRef.current.mediaPlaying?.volume || 0) + 0.15,
         );
       if (k === "ArrowDown")
         dataRef.current.setVolume(
-          (dataRef.current.mediaPlaying?.volume || 0) - 0.15
+          (dataRef.current.mediaPlaying?.volume || 0) - 0.15,
         );
       if (k === "m") dataRef.current.toggleMute();
 

src/components/player/internals/StatusCircle.tsx

@@ -15,7 +15,7 @@ export interface StatusCircleLoading extends StatusCircle {
 }
 
 function statusIsLoading(
-  props: StatusCircle | StatusCircleLoading
+  props: StatusCircle | StatusCircleLoading,
 ): props is StatusCircleLoading {
   return props.type === "loading";
 }
@@ -25,7 +25,7 @@ export function StatusCircle(props: StatusCircle | StatusCircleLoading) {
     () => ({
       percentage: statusIsLoading(props) ? props.percentage : 0,
     }),
-    [props]
+    [props],
   );
 
   return (

src/components/player/internals/ThumbnailScraper.tsx

@@ -95,7 +95,7 @@ class ThumnbnailWorker {
       0,
       0,
       this.canvasEl.width,
-      this.canvasEl.height
+      this.canvasEl.height,
     );
     const imgUrl = this.canvasEl.toDataURL();
 

src/components/player/internals/VideoClickTarget.tsx

@@ -10,7 +10,7 @@ export function VideoClickTarget(props: { showingControls: boolean }) {
   const display = usePlayerStore((s) => s.display);
   const isPaused = usePlayerStore((s) => s.mediaPlaying.isPaused);
   const updateInterfaceHovering = usePlayerStore(
-    (s) => s.updateInterfaceHovering
+    (s) => s.updateInterfaceHovering,
   );
   const hovering = usePlayerStore((s) => s.interface.hovering);
 
@@ -33,7 +33,7 @@ export function VideoClickTarget(props: { showingControls: boolean }) {
         updateInterfaceHovering(PlayerHoverState.MOBILE_TAPPED);
       else updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
     },
-    [display, isPaused, hovering, updateInterfaceHovering]
+    [display, isPaused, hovering, updateInterfaceHovering],
   );
 
   if (!show) return null;

src/components/player/internals/VideoContainer.tsx

@@ -70,7 +70,7 @@ function VideoElement() {
   const language = usePlayerStore((s) => s.caption.selected?.language);
   const trackObjectUrl = useObjectUrl(
     () => (srtData ? convertSubtitlesToObjectUrl(srtData) : null),
-    [srtData]
+    [srtData],
   );
 
   // report video element to display interface

src/components/player/utils/captions.ts

@@ -12,7 +12,7 @@ export function captionIsVisible(
   start: number,
   end: number,
   delay: number,
-  currentTime: number
+  currentTime: number,
 ) {
   const delayedStart = start / 1000 + delay;
   const delayedEnd = end / 1000 + delay;
@@ -52,7 +52,7 @@ export function convertSubtitlesToSrt(text: string): string {
 
 export function parseSubtitles(
   text: string,
-  _language?: string
+  _language?: string,
 ): CaptionCueType[] {
   const vtt = convertSubtitlesToVtt(text);
   return parse(vtt).filter((cue) => cue.type === "caption") as CaptionCueType[];
@@ -64,7 +64,7 @@ function stringToBase64(input: string): string {
 
 export function convertSubtitlesToSrtDataurl(text: string): string {
   return `data:application/x-subrip;base64,${stringToBase64(
-    convertSubtitlesToSrt(text)
+    convertSubtitlesToSrt(text),
   )}`;
 }
 
@@ -72,12 +72,12 @@ export function convertSubtitlesToObjectUrl(text: string): string {
   return URL.createObjectURL(
     new Blob([convertSubtitlesToVtt(text)], {
       type: "text/vtt",
-    })
+    }),
   );
 }
 
 export function convertProviderCaption(
-  captions: RunOutput["stream"]["captions"]
+  captions: RunOutput["stream"]["captions"],
 ): CaptionListItem[] {
   return captions.map((v) => ({
     language: v.language,

src/components/player/utils/mediaErrorDetails.ts

@@ -18,7 +18,7 @@ const mediaErrorMap: Record<number, { name: string; key: string }> = {
 };
 
 export function getMediaErrorDetails(
-  err: MediaError | null
+  err: MediaError | null,
 ): (typeof mediaErrorMap)[number] {
   const item = mediaErrorMap[err?.code ?? -1];
   if (!item) {

src/components/text-inputs/TextInputControl.tsx

@@ -36,7 +36,7 @@ export const TextInputControl = forwardRef<
       onFocus,
       passwordToggleable,
     },
-    ref
+    ref,
   ) => {
     let inputType = "text";
     const [showPassword, setShowPassword] = useState(true);
@@ -81,5 +81,5 @@ export const TextInputControl = forwardRef<
     }
 
     return input;
-  }
+  },
 );

src/components/text/Paragraph.tsx

@@ -8,7 +8,7 @@ export function Paragraph(props: {
     <p
       className={classNames(
         "text-errors-type-secondary",
-        props.marginClass ?? "mt-6"
+        props.marginClass ?? "mt-6",
       )}
     >
       {props.children}

src/components/text/Title.tsx

@@ -8,7 +8,7 @@ export function Title(props: {
     <h2
       className={classNames(
         "text-white text-3xl font-bold text-opacity-100 mt-6",
-        props.className
+        props.className,
       )}
     >
       {props.children}

src/components/utils/Divider.tsx

@@ -5,7 +5,7 @@ export function Divider(props: { marginClass?: string }) {
     <hr
       className={classNames(
         "w-full h-px border-0 bg-utils-divider bg-opacity-50",
-        props.marginClass ?? "my-8"
+        props.marginClass ?? "my-8",
       )}
     />
   );

src/components/utils/Flare.tsx

@@ -46,11 +46,11 @@ function Light(props: FlareProps) {
       const halfSize = size / 2;
       outerRef.current.style.setProperty(
         "--bg-x",
-        `${(e.clientX - rect.left - halfSize).toFixed(0)}px`
+        `${(e.clientX - rect.left - halfSize).toFixed(0)}px`,
       );
       outerRef.current.style.setProperty(
         "--bg-y",
-        `${(e.clientY - rect.top - halfSize).toFixed(0)}px`
+        `${(e.clientY - rect.top - halfSize).toFixed(0)}px`,
       );
     }
     document.addEventListener("mousemove", mouseMove);
@@ -66,7 +66,7 @@ function Light(props: FlareProps) {
         props.className,
         {
           "!opacity-100": props.enabled ?? false,
-        }
+        },
       )}
       style={{
         backgroundImage: `radial-gradient(circle at center, rgba(var(${cssVar}), 1), rgba(var(${cssVar}), 0) 70%)`,
@@ -79,7 +79,7 @@ function Light(props: FlareProps) {
         className={c(
           "absolute inset-[1px] overflow-hidden",
           props.className,
-          props.backgroundClass
+          props.backgroundClass,
         )}
       >
         <div

src/components/utils/Lightbar.tsx

@@ -33,7 +33,7 @@ class Particle {
     options: LightbarOptions = {
       horizontalMotion: false,
       sizeRange: [10, 10],
-    }
+    },
   ) {
     if (options.imgSrc) {
       this.image = new Image();
@@ -117,7 +117,7 @@ class Particle {
         this.radius * 1.5,
         this.direction,
         0,
-        Math.PI * 2
+        Math.PI * 2,
       );
       ctx.fillStyle = "white";
       ctx.fill();

src/components/utils/Ol.tsx

@@ -8,7 +8,7 @@ export function Ol(props: { items: React.ReactNode[] }) {
           <li
             className={classNames(
               "grid grid-cols-[auto,1fr] gap-6",
-              i !== props.items.length - 1 ? "pb-12" : undefined
+              i !== props.items.length - 1 ? "pb-12" : undefined,
             )}
           >
             <div className="relative z-0">

src/components/utils/Transition.tsx

@@ -24,7 +24,7 @@ interface Props {
 
 function getClasses(
   animation: TransitionAnimations,
-  duration: string
+  duration: string,
 ): TransitionClasses {
   if (animation === "slide-down") {
     return {

src/hooks/auth/useAuth.ts

@@ -67,7 +67,7 @@ export function useAuth() {
       const publicKeyBase64Url = bytesToBase64Url(keys.publicKey);
       const { challenge } = await getLoginChallengeToken(
         backendUrl,
-        publicKeyBase64Url
+        publicKeyBase64Url,
       );
       const signature = await signChallenge(keys, challenge);
       const loginResult = await loginAccount(backendUrl, {
@@ -83,7 +83,7 @@ export function useAuth() {
       const seedBase64 = bytesToBase64(keys.seed);
       return userDataLogin(loginResult, user.user, user.session, seedBase64);
     },
-    [userDataLogin, backendUrl]
+    [userDataLogin, backendUrl],
   );
 
   const logout = useCallback(async () => {
@@ -92,7 +92,7 @@ export function useAuth() {
       await removeSession(
         backendUrl,
         currentAccount.token,
-        currentAccount.sessionId
+        currentAccount.sessionId,
       );
     } catch {
       // we dont care about failing to delete session
@@ -104,7 +104,7 @@ export function useAuth() {
     async (registerData: RegistrationData) => {
       const { challenge } = await getRegisterChallengeToken(
         backendUrl,
-        registerData.recaptchaToken
+        registerData.recaptchaToken,
       );
       const keys = await keysFromMnemonic(registerData.mnemonic);
       const signature = await signChallenge(keys, challenge);
@@ -122,17 +122,17 @@ export function useAuth() {
         registerResult,
         registerResult.user,
         registerResult.session,
-        bytesToBase64(keys.seed)
+        bytesToBase64(keys.seed),
       );
     },
-    [backendUrl, userDataLogin]
+    [backendUrl, userDataLogin],
   );
 
   const importData = useCallback(
     async (
       account: AccountWithToken,
       progressItems: Record<string, ProgressMediaItem>,
-      bookmarks: Record<string, BookmarkMediaItem>
+      bookmarks: Record<string, BookmarkMediaItem>,
     ) => {
       if (
         Object.keys(progressItems).length === 0 &&
@@ -142,17 +142,17 @@ export function useAuth() {
       }
 
       const progressInputs = Object.entries(progressItems).flatMap(
-        ([tmdbId, item]) => progressMediaItemToInputs(tmdbId, item)
+        ([tmdbId, item]) => progressMediaItemToInputs(tmdbId, item),
       );
 
       const bookmarkInputs = Object.entries(bookmarks).map(([tmdbId, item]) =>
-        bookmarkMediaToInput(tmdbId, item)
+        bookmarkMediaToInput(tmdbId, item),
       );
 
       await importProgress(backendUrl, account, progressInputs);
       await importBookmarks(backendUrl, account, bookmarkInputs);
     },
-    [backendUrl]
+    [backendUrl],
   );
 
   const restore = useCallback(
@@ -180,7 +180,7 @@ export function useAuth() {
 
       syncData(user.user, user.session, progress, bookmarks, settings);
     },
-    [backendUrl, syncData, logout]
+    [backendUrl, syncData, logout],
   );
 
   return {

src/hooks/auth/useAuthData.ts

@@ -25,7 +25,7 @@ export function useAuthData() {
   const setTheme = useThemeStore((s) => s.setTheme);
   const setAppLanguage = useLanguageStore((s) => s.setLanguage);
   const importSubtitleLanguage = useSubtitleStore(
-    (s) => s.importSubtitleLanguage
+    (s) => s.importSubtitleLanguage,
   );
 
   const replaceBookmarks = useBookmarkStore((s) => s.replaceBookmarks);
@@ -36,7 +36,7 @@ export function useAuthData() {
       loginResponse: LoginResponse,
       user: UserResponse,
       session: SessionResponse,
-      seed: string
+      seed: string,
     ) => {
       const account = {
         token: loginResponse.token,
@@ -49,7 +49,7 @@ export function useAuthData() {
       setAccount(account);
       return account;
     },
-    [setAccount]
+    [setAccount],
   );
 
   const logout = useCallback(async () => {
@@ -64,7 +64,7 @@ export function useAuthData() {
       _session: SessionResponse,
       progress: ProgressResponse[],
       bookmarks: BookmarkResponse[],
-      settings: SettingsResponse
+      settings: SettingsResponse,
     ) => {
       replaceBookmarks(bookmarkResponsesToEntries(bookmarks));
       replaceItems(progressResponsesToEntries(progress));
@@ -87,7 +87,7 @@ export function useAuthData() {
       setAppLanguage,
       importSubtitleLanguage,
       setTheme,
-    ]
+    ],
   );
 
   return {

src/hooks/useOverlayRouter.ts

@@ -17,7 +17,7 @@ export function useRouterAnchorUpdate(id: string) {
   const setAnchorPoint = useOverlayStore((s) => s.setAnchorPoint);
   const routerActive = useMemo(
     () => !!route && route.startsWith(`/${id}`),
-    [route, id]
+    [route, id],
   );
 
   const update = useCallback(() => {
@@ -96,7 +96,7 @@ export function useInternalOverlayRouter(id: string) {
       if (route && !preventRouteClear) setRoute(null);
       setTransition(null);
     },
-    [setRoute, route, setTransition]
+    [setRoute, route, setTransition],
   );
 
   const open = useCallback(
@@ -104,7 +104,7 @@ export function useInternalOverlayRouter(id: string) {
       setTransition(null);
       setRoute(joinPath(splitPath(defaultRoute, id)));
     },
-    [id, setRoute, setTransition]
+    [id, setRoute, setTransition],
   );
 
   const activeRoute = routerActive

src/hooks/useProgressBar.ts

@@ -13,7 +13,7 @@ export function makePercentage(num: number) {
 }
 
 function isClickEvent(
-  evt: ActivityEvent
+  evt: ActivityEvent,
 ): evt is React.MouseEvent<HTMLElement> | MouseEvent {
   return (
     evt.type === "mousedown" ||
@@ -29,7 +29,7 @@ const getEventX = (evt: ActivityEvent) => {
 export function useProgressBar(
   barRef: RefObject<HTMLElement>,
   commit: (percentage: number) => void,
-  commitImmediately = false
+  commitImmediately = false,
 ) {
   const [mouseDown, setMouseDown] = useState<boolean>(false);
   const [progress, setProgress] = useState<number>(0);
@@ -78,7 +78,7 @@ export function useProgressBar(
         ((getEventX(ev) - rect.left) / barRef.current.offsetWidth) * 100;
       setProgress(pos);
     },
-    [setProgress, barRef]
+    [setProgress, barRef],
   );
 
   return {

src/hooks/useProviderScrape.tsx

@@ -54,7 +54,7 @@ function useBaseScrape() {
         .reduce<Record<string, ScrapingSegment>>((a, v) => {
           a[v.id] = v;
           return a;
-        }, {})
+        }, {}),
     );
     setSourceOrder(evt.sourceIds.map((v) => ({ id: v, children: [] })));
   }, []);
@@ -85,7 +85,7 @@ function useBaseScrape() {
       setSources((s) => {
         evt.embeds.forEach((v) => {
           const source = getCachedMetadata().find(
-            (src) => src.id === v.embedScraperId
+            (src) => src.id === v.embedScraperId,
           );
           if (!source) throw new Error("invalid source id");
           const out: ScrapingSegment = {
@@ -106,7 +106,7 @@ function useBaseScrape() {
         return [...s];
       });
     },
-    []
+    [],
   );
 
   const startScrape = useCallback(() => {
@@ -158,7 +158,7 @@ export function useScrape() {
         const baseUrlMaker = makeProviderUrl(providerApiUrl);
         const conn = await connectServerSideEvents<RunOutput | "">(
           baseUrlMaker.scrapeAll(media),
-          ["completed", "noOutput"]
+          ["completed", "noOutput"],
         );
         conn.on("init", initEvent);
         conn.on("start", startEvent);
@@ -189,7 +189,7 @@ export function useScrape() {
       discoverEmbedsEvent,
       getResult,
       startScrape,
-    ]
+    ],
   );
 
   return {
@@ -204,7 +204,7 @@ export function useListCenter(
   containerRef: RefObject<HTMLDivElement | null>,
   listRef: RefObject<HTMLDivElement | null>,
   sourceOrder: ScrapingItems[],
-  currentSource: string | undefined
+  currentSource: string | undefined,
 ) {
   const [renderedOnce, setRenderedOnce] = useState(false);
 
@@ -217,7 +217,7 @@ export function useListCenter(
     ] as HTMLDivElement[];
 
     const currentIndex = elements.findIndex(
-      (e) => e.getAttribute("data-source-id") === currentSource
+      (e) => e.getAttribute("data-source-id") === currentSource,
     );
 
     const currentElement = elements[currentIndex];

src/hooks/useQueryParams.ts

@@ -1,12 +1,12 @@
 import { useCallback, useMemo } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export function useQueryParams() {
   const loc = useLocation();
 
   const queryParams = useMemo(() => {
     const obj: Record<string, string> = Object.fromEntries(
-      new URLSearchParams(loc.search).entries()
+      new URLSearchParams(loc.search).entries(),
     );
 
     return obj;
@@ -16,11 +16,11 @@ export function useQueryParams() {
 }
 
 export function useQueryParam(
-  param: string
+  param: string,
 ): [string | null, (a: string | null) => void] {
   const params = useQueryParams();
   const location = useLocation();
-  const router = useHistory();
+  const navigate = useNavigate();
   const currentValue = params[param] ?? null;
 
   const set = useCallback(
@@ -28,11 +28,11 @@ export function useQueryParam(
       const parsed = new URLSearchParams(location.search);
       if (value) parsed.set(param, value);
       else parsed.delete(param);
-      router.push({
+      navigate({
         search: parsed.toString(),
       });
     },
-    [param, location.search, router]
+    [param, location.search, navigate],
   );
 
   return [currentValue, set];

src/hooks/useRandomTranslation.ts

@@ -22,7 +22,7 @@ export function useRandomTranslation() {
 
       return typeof keys === "string" ? keys : defaultTitle;
     },
-    [t, seed, shouldJoke]
+    [t, seed, shouldJoke],
   );
 
   return { t: getRandomTranslation };

src/hooks/useSearchQuery.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { generatePath, useHistory, useParams } from "react-router-dom";
+import { generatePath, useNavigate, useParams } from "react-router-dom";
 
 function decode(query: string | null | undefined) {
   return query ? decodeURIComponent(query) : "";
@@ -8,9 +8,9 @@ function decode(query: string | null | undefined) {
 export function useSearchQuery(): [
   string,
   (inp: string, force?: boolean) => void,
-  () => void
+  () => void,
 ] {
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = useParams<{ query: string }>();
   const [search, setSearch] = useState(decode(params.query));
 
@@ -22,13 +22,14 @@ export function useSearchQuery(): [
     setSearch(inp);
     if (!commitToUrl) return;
     if (inp.length === 0) {
-      history.replace("/");
+      navigate("/", { replace: true });
       return;
     }
-    history.replace(
+    navigate(
       generatePath("/browse/:query", {
         query: inp,
-      })
+      }),
+      { replace: true },
     );
   };
 

src/hooks/useSettingsState.ts

@@ -11,7 +11,7 @@ import {
 import { SubtitleStyling } from "@/stores/subtitles";
 
 export function useDerived<T>(
-  initial: T
+  initial: T,
 ): [T, Dispatch<SetStateAction<T>>, () => void, boolean] {
   const [overwrite, setOverwrite] = useState<T | undefined>(undefined);
   useEffect(() => {
@@ -19,14 +19,14 @@ export function useDerived<T>(
   }, [initial]);
   const changed = useMemo(
     () => !isEqual(overwrite, initial) && overwrite !== undefined,
-    [overwrite, initial]
+    [overwrite, initial],
   );
   const setter = useCallback<Dispatch<SetStateAction<T>>>(
     (inp) => {
       if (!(inp instanceof Function)) setOverwrite(inp);
       else setOverwrite((s) => inp(s !== undefined ? s : initial));
     },
-    [initial, setOverwrite]
+    [initial, setOverwrite],
   );
   const data = overwrite === undefined ? initial : overwrite;
 
@@ -48,7 +48,7 @@ export function useSettingsState(
         colorB: string;
         icon: string;
       }
-    | undefined
+    | undefined,
 ) {
   const [proxyUrlsState, setProxyUrls, resetProxyUrls, proxyUrlsChanged] =
     useDerived(proxyUrls);

src/index.tsx

@@ -6,7 +6,7 @@ import "@/assets/css/index.css";
 
 import React, { Suspense, useCallback } from "react";
 import type { ReactNode } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { BrowserRouter, HashRouter } from "react-router-dom";
@@ -114,7 +114,7 @@ function AuthWrapper() {
         {t(
           isCustomUrl
             ? "screens.loadingUserError.textWithReset"
-            : "screens.loadingUserError.text"
+            : "screens.loadingUserError.text",
         )}
       </ErrorScreen>
     );
@@ -141,23 +141,23 @@ function TheRouter(props: { children: ReactNode }) {
   return <HashRouter>{props.children}</HashRouter>;
 }
 
-ReactDOM.render(
+const container = document.getElementById("root");
-  <React.StrictMode>
+const root = createRoot(container!);
-    <ErrorBoundary>
+
-      <TurnstileProvider />
+root.render(
-      <HelmetProvider>
+  <ErrorBoundary>
-        <Suspense fallback={<LoadingScreen type="lazy" />}>
+    <TurnstileProvider />
-          <ThemeProvider applyGlobal>
+    <HelmetProvider>
-            <ProgressSyncer />
+      <Suspense fallback={<LoadingScreen type="lazy" />}>
-            <BookmarkSyncer />
+        <ThemeProvider applyGlobal>
-            <SettingsSyncer />
+          <ProgressSyncer />
-            <TheRouter>
+          <BookmarkSyncer />
-              <MigrationRunner />
+          <SettingsSyncer />
-            </TheRouter>
+          <TheRouter>
-          </ThemeProvider>
+            <MigrationRunner />
-        </Suspense>
+          </TheRouter>
-      </HelmetProvider>
+        </ThemeProvider>
-    </ErrorBoundary>
+      </Suspense>
-  </React.StrictMode>,
+    </HelmetProvider>
-  document.getElementById("root")
+  </ErrorBoundary>,
 );

src/pages/Login.tsx

@@ -1,18 +1,18 @@
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
 import { LoginFormPart } from "@/pages/parts/auth/LoginFormPart";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 export function LoginPage() {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   return (
     <SubPageLayout>
       <PageTitle subpage k="global.pages.login" />
       <LoginFormPart
         onLogin={() => {
-          history.push("/");
+          navigate("/");
         }}
       />
     </SubPageLayout>

src/pages/PlayerView.tsx

@@ -1,6 +1,6 @@
 import { RunOutput } from "@movie-web/providers";
 import { useCallback, useEffect, useState } from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { usePlayer } from "@/components/player/hooks/usePlayer";
 import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta";
@@ -18,7 +18,7 @@ import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
 import { parseTimestamp } from "@/utils/timestamp";
 
 export function PlayerView() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = useParams<{
     media: string;
     episode?: string;
@@ -52,12 +52,12 @@ export function PlayerView() {
   const metaChange = useCallback(
     (meta: PlayerMeta) => {
       if (meta?.type === "show")
-        history.push(
+        navigate(
-          `/media/${params.media}/${meta.season?.tmdbId}/${meta.episode?.tmdbId}`
+          `/media/${params.media}/${meta.season?.tmdbId}/${meta.episode?.tmdbId}`,
         );
-      else history.push(`/media/${params.media}`);
+      else navigate(`/media/${params.media}`);
     },
-    [history, params]
+    [navigate, params],
   );
 
   const playAfterScrape = useCallback(
@@ -71,7 +71,7 @@ export function PlayerView() {
         convertRunoutputToSource(out),
         convertProviderCaption(out.stream.captions),
         out.sourceId,
-        shouldStartFromBeginning ? 0 : startAt
+        shouldStartFromBeginning ? 0 : startAt,
       );
       setShouldStartFromBeginning(false);
     },
@@ -80,7 +80,7 @@ export function PlayerView() {
       startAtParam,
       shouldStartFromBeginning,
       setShouldStartFromBeginning,
-    ]
+    ],
   );
 
   return (
@@ -108,3 +108,5 @@ export function PlayerView() {
     </PlayerPart>
   );
 }
+
+export default PlayerView;

src/pages/Register.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { MetaResponse } from "@/backend/accounts/meta";
 import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
@@ -26,7 +26,7 @@ function CaptchaProvider(props: {
 }
 
 export function RegisterPage() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [step, setStep] = useState(0);
   const [mnemonic, setMnemonic] = useState<null | string>(null);
   const [account, setAccount] = useState<null | AccountProfile>(null);
@@ -42,7 +42,7 @@ export function RegisterPage() {
               setSiteKey(
                 meta.hasCaptcha && meta.captchaClientKey
                   ? meta.captchaClientKey
-                  : null
+                  : null,
               );
               setStep(1);
             }}
@@ -70,7 +70,7 @@ export function RegisterPage() {
             mnemonic={mnemonic}
             userData={account}
             onNext={() => {
-              history.push("/");
+              navigate("/");
             }}
           />
         ) : null}

src/pages/Settings.tsx

@@ -45,7 +45,7 @@ function SettingsLayout(props: { children: React.ReactNode }) {
       <div
         className={classNames(
           "grid gap-12",
-          isMobile ? "grid-cols-1" : "lg:grid-cols-[280px,1fr]"
+          isMobile ? "grid-cols-1" : "lg:grid-cols-[280px,1fr]",
         )}
       >
         <SidebarPart />
@@ -135,7 +135,7 @@ export function SettingsPage() {
     decryptedName,
     proxySet,
     backendUrlSetting,
-    account?.profile
+    account?.profile,
   );
 
   const saveChanges = useCallback(async () => {
@@ -149,7 +149,7 @@ export function SettingsPage() {
       if (state.deviceName.changed) {
         const newDeviceName = await encryptData(
           state.deviceName.state,
-          base64ToBuffer(account.seed)
+          base64ToBuffer(account.seed),
         );
         await updateSession(backendUrl, account, {
           deviceName: newDeviceName,
@@ -270,3 +270,5 @@ export function SettingsPage() {
     </SubPageLayout>
   );
 }
+
+export default SettingsPage;

src/pages/developer/VideoTesterView.tsx

@@ -54,7 +54,7 @@ export default function VideoTesterView() {
       setMeta(testMeta);
       playMedia(source, [], null);
     },
-    [playMedia, setMeta]
+    [playMedia, setMeta],
   );
 
   return (

src/pages/layouts/ErrorLayout.tsx

@@ -9,7 +9,7 @@ export function ErrorContainer(props: {
     <div
       className={classNames(
         "w-full p-6 text-center flex flex-col items-center",
-        props.maxWidth ?? "max-w-[28rem]"
+        props.maxWidth ?? "max-w-[28rem]",
       )}
     >
       {props.children}

src/pages/layouts/SubPageLayout.tsx

@@ -10,13 +10,13 @@ export function BlurEllipsis(props: { positionClass?: string }) {
       <div
         className={classNames(
           props.positionClass ?? "fixed",
-          "top-0 -right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentA blur-[100px] pointer-events-none opacity-25"
+          "top-0 -right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentA blur-[100px] pointer-events-none opacity-25",
         )}
       />
       <div
         className={classNames(
           props.positionClass ?? "fixed",
-          "top-0 right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentB blur-[100px] pointer-events-none opacity-25"
+          "top-0 right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentB blur-[100px] pointer-events-none opacity-25",
         )}
       />
     </>