Merge branch 'dev' into time-format

3 years ago · 6eb25fb49c
135 changed files with 477 additions and 290 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -8,27 +8,28 @@ const a11yOff = Object.keys(require("eslint-plugin-jsx-a11y").rules).reduce(
				@@ -8,27 +8,28 @@ const a11yOff = Object.keys(require("eslint-plugin-jsx-a11y").rules).reduce(

 module.exports = {
  env: {
-    browser: true
+    browser: true,
  },
  extends: [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
  ],
  ignorePatterns: ["public/*", "dist/*", "/*.js", "/*.ts"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.json",
-    tsconfigRootDir: "./"
+    tsconfigRootDir: "./",
  },
  settings: {
    "import/resolver": {
-      typescript: {}
-    }
+      typescript: {
+        project: "./tsconfig.json",
+      },
+    },
  },
-  plugins: ["@typescript-eslint", "import"],
+  plugins: ["@typescript-eslint", "import", "prettier"],
  rules: {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
@ -54,16 +55,44 @@ module.exports = {
				@@ -54,16 +55,44 @@ module.exports = {
    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
    "react/jsx-filename-extension": [
      "error",
-      { extensions: [".js", ".tsx", ".jsx"] }
+      { extensions: [".js", ".tsx", ".jsx"] },
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        ts: "never",
-        tsx: "never"
-      }
+        tsx: "never",
+      },
    ],
-    ...a11yOff
-  }
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          ["sibling", "parent"],
+          "index",
+          "unknown",
+        ],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+    "sort-imports": [
+      "error",
+      {
+        ignoreCase: false,
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
+        allowSeparatedGroups: true,
+      },
+    ],
+    ...a11yOff,
+  },
 };
--- a/index.html
+++ b/index.html
@ -29,6 +29,9 @@
				@@ -29,6 +29,9 @@
    <!-- prevent darkreader extension from messing with our already dark site -->
    <meta name="darkreader-lock" />

+    <!-- disabling referrer can fix some provider problems -->
+    <meta name="referrer" content="no-referrer" />
+
    <title>movie-web</title>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
				@@ -1,6 +1,6 @@
 {
  "name": "movie-web",
-  "version": "3.0.13",
+  "version": "3.0.14",
  "private": true,
  "homepage": "https://movie-web.app",
  "dependencies": {
@ -82,7 +82,7 @@
				@@ -82,7 +82,7 @@
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "^8.6.0",
    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "7.29.4",
--- a/src/tests/providers/providers.test.ts
+++ b/src/tests/providers/providers.test.ts
@ -1,9 +1,10 @@
				@@ -1,9 +1,10 @@
 import { describe, it } from "vitest";
+
 import "@/backend";
+import { testData } from "@/__tests__/providers/testdata";
 import { getProviders } from "@/backend/helpers/register";
-import { MWMediaType } from "@/backend/metadata/types";
 import { runProvider } from "@/backend/helpers/run";
-import { testData } from "@/__tests__/providers/testdata";
+import { MWMediaType } from "@/backend/metadata/types";

 describe("providers", () => {
  const providers = getProviders();
--- a/src/backend/embeds/streamm4u.ts
+++ b/src/backend/embeds/streamm4u.ts
@ -1,11 +1,11 @@
				@@ -1,11 +1,11 @@
 import { MWEmbedType } from "@/backend/helpers/embed";
+import { proxiedFetch } from "@/backend/helpers/fetch";
 import { registerEmbedScraper } from "@/backend/helpers/register";
 import {
+  MWEmbedStream,
  MWStreamQuality,
  MWStreamType,
-  MWEmbedStream,
 } from "@/backend/helpers/streams";
-import { proxiedFetch } from "@/backend/helpers/fetch";

 const HOST = "streamm4u.club";
 const URL_BASE = `https://${HOST}`;
--- a/src/backend/helpers/captions.ts
+++ b/src/backend/helpers/captions.ts
@ -1,9 +1,10 @@
				@@ -1,9 +1,10 @@
-import { mwFetch, proxiedFetch } from "@/backend/helpers/fetch";
-import { MWCaption } from "@/backend/helpers/streams";
 import DOMPurify from "dompurify";
-import { parse, detect, list } from "subsrt-ts";
+import { 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";
+
 export const customCaption = "external-custom";
 export function makeCaptionId(caption: MWCaption, isLinked: boolean): string {
  return isLinked ? `linked-${caption.langIso}` : `external-${caption.langIso}`;
--- a/src/backend/helpers/fetch.ts
+++ b/src/backend/helpers/fetch.ts
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
-import { conf } from "@/setup/config";
 import { ofetch } from "ofetch";

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

 // round robins all proxy urls
--- a/src/backend/helpers/provider.ts
+++ b/src/backend/helpers/provider.ts
@ -1,7 +1,7 @@
				@@ -1,7 +1,7 @@
-import { DetailedMeta } from "../metadata/getmeta";
-import { MWMediaType } from "../metadata/types";
 import { MWEmbed } from "./embed";
 import { MWStream } from "./streams";
+import { DetailedMeta } from "../metadata/getmeta";
+import { MWMediaType } from "../metadata/types";

 export type MWProviderScrapeResult = {
  stream?: MWStream;
--- a/src/backend/metadata/getmeta.ts
+++ b/src/backend/metadata/getmeta.ts
@ -1,13 +1,14 @@
				@@ -1,13 +1,14 @@
 import { FetchError } from "ofetch";
-import { makeUrl, proxiedFetch } from "../helpers/fetch";
+
 import {
-  formatJWMeta,
  JWMediaResult,
  JWSeasonMetaResult,
  JW_API_BASE,
+  formatJWMeta,
  mediaTypeToJW,
 } from "./justwatch";
 import { MWMediaMeta, MWMediaType } from "./types";
+import { makeUrl, proxiedFetch } from "../helpers/fetch";

 type JWExternalIdType =
  | "eidr"
--- a/src/backend/metadata/search.ts
+++ b/src/backend/metadata/search.ts
@ -1,13 +1,14 @@
				@@ -1,13 +1,14 @@
 import { SimpleCache } from "@/utils/cache";
-import { proxiedFetch } from "../helpers/fetch";
+
 import {
-  formatJWMeta,
  JWContentTypes,
  JWMediaResult,
  JW_API_BASE,
+  formatJWMeta,
  mediaTypeToJW,
 } from "./justwatch";
 import { MWMediaMeta, MWQuery } from "./types";
+import { proxiedFetch } from "../helpers/fetch";

 const cache = new SimpleCache<MWQuery, MWMediaMeta[]>();
 cache.setCompare((a, b) => {
--- a/src/backend/providers/flixhq.ts
+++ b/src/backend/providers/flixhq.ts
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { compareTitle } from "@/utils/titleMatch";
+
 import { proxiedFetch } from "../helpers/fetch";
 import { registerProvider } from "../helpers/register";
 import {
--- a/src/backend/providers/gdriveplayer.ts
+++ b/src/backend/providers/gdriveplayer.ts
@ -1,9 +1,10 @@
				@@ -1,9 +1,10 @@
-import { unpack } from "unpacker";
 import CryptoJS from "crypto-js";
+import { unpack } from "unpacker";

 import { registerProvider } from "@/backend/helpers/register";
-import { MWMediaType } from "@/backend/metadata/types";
 import { MWStreamQuality } from "@/backend/helpers/streams";
+import { MWMediaType } from "@/backend/metadata/types";
+
 import { proxiedFetch } from "../helpers/fetch";

 const format = {
--- a/src/backend/providers/m4ufree.ts
+++ b/src/backend/providers/m4ufree.ts
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { MWEmbed, MWEmbedType } from "@/backend/helpers/embed";
+
 import { proxiedFetch } from "../helpers/fetch";
 import { registerProvider } from "../helpers/register";
 import { MWMediaType } from "../metadata/types";
--- a/src/backend/providers/superstream/index.ts
+++ b/src/backend/providers/superstream/index.ts
@ -1,15 +1,15 @@
				@@ -1,15 +1,15 @@
-import { registerProvider } from "@/backend/helpers/register";
-import { MWMediaType } from "@/backend/metadata/types";
-
-import { customAlphabet } from "nanoid";
 import CryptoJS from "crypto-js";
+import { customAlphabet } from "nanoid";
+
 import { proxiedFetch } from "@/backend/helpers/fetch";
+import { registerProvider } from "@/backend/helpers/register";
 import {
  MWCaption,
  MWCaptionType,
  MWStreamQuality,
  MWStreamType,
 } from "@/backend/helpers/streams";
+import { MWMediaType } from "@/backend/metadata/types";
 import { compareTitle } from "@/utils/titleMatch";

 const nanoid = customAlphabet("0123456789abcdef", 32);
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
-import { Icon, Icons } from "@/components/Icon";
 import { ReactNode } from "react";

+import { Icon, Icons } from "@/components/Icon";
+
 interface Props {
  icon?: Icons;
  onClick?: () => void;
--- a/src/components/CaptionColorSelector.tsx
+++ b/src/components/CaptionColorSelector.tsx
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { useSettings } from "@/state/settings";
+
 import { Icon, Icons } from "./Icon";

 export const colors = ["#ffffff", "#00ffff", "#ffff00"];
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@ -1,6 +1,6 @@
				@@ -1,6 +1,6 @@
+import { Listbox, Transition } from "@headlessui/react";
 import React, { Fragment } from "react";

-import { Listbox, Transition } from "@headlessui/react";
 import { Icon, Icons } from "@/components/Icon";

 export interface OptionItem {
--- a/src/components/Overlay.tsx
+++ b/src/components/Overlay.tsx
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
-import { Transition } from "@/components/Transition";
 import { Helmet } from "react-helmet";

+import { Transition } from "@/components/Transition";
+
 export function Overlay(props: { children: React.ReactNode }) {
  return (
    <>
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@ -1,6 +1,8 @@
				@@ -1,6 +1,8 @@
-import { MWMediaType, MWQuery } from "@/backend/metadata/types";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+
+import { MWMediaType, MWQuery } from "@/backend/metadata/types";
+
 import { DropdownButton } from "./buttons/DropdownButton";
 import { Icon, Icons } from "./Icon";
 import { TextInputControl } from "./text-inputs/TextInputControl";
--- a/src/components/Transition.tsx
+++ b/src/components/Transition.tsx
@ -1,8 +1,8 @@
				@@ -1,8 +1,8 @@
-import { Fragment, ReactNode } from "react";
 import {
  Transition as HeadlessTransition,
  TransitionClasses,
 } from "@headlessui/react";
+import { Fragment, ReactNode } from "react";

 type TransitionAnimations =
  | "slide-down"
--- a/src/components/buttons/DropdownButton.tsx
+++ b/src/components/buttons/DropdownButton.tsx
@ -4,10 +4,11 @@ import React, {
				@@ -4,10 +4,11 @@ import React, {
  useEffect,
  useState,
 } from "react";
-import { Icon, Icons } from "@/components/Icon";

+import { Icon, Icons } from "@/components/Icon";
 import { BackdropContainer, useBackdrop } from "@/components/layout/Backdrop";
-import { ButtonControlProps, ButtonControl } from "./ButtonControl";
+
+import { ButtonControl, ButtonControlProps } from "./ButtonControl";

 export interface OptionItem {
  id: string;
--- a/src/components/buttons/EditButton.tsx
+++ b/src/components/buttons/EditButton.tsx
@ -1,7 +1,9 @@
				@@ -1,7 +1,9 @@
-import { Icon, Icons } from "@/components/Icon";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
+
+import { Icon, Icons } from "@/components/Icon";
+
 import { ButtonControl } from "./ButtonControl";

 export interface EditButtonProps {
--- a/src/components/buttons/IconButton.tsx
+++ b/src/components/buttons/IconButton.tsx
@ -1,5 +1,6 @@
				@@ -1,5 +1,6 @@
 import { Icon, Icons } from "@/components/Icon";
-import { ButtonControlProps, ButtonControl } from "./ButtonControl";
+
+import { ButtonControl, ButtonControlProps } from "./ButtonControl";

 export interface IconButtonProps extends ButtonControlProps {
  icon: Icons;
--- a/src/components/layout/Backdrop.tsx
+++ b/src/components/layout/Backdrop.tsx
@ -1,5 +1,6 @@
				@@ -1,5 +1,6 @@
 import React, { createRef, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+
 import { useFade } from "@/hooks/useFade";

 interface BackdropProps {
--- a/src/components/layout/BrandPill.tsx
+++ b/src/components/layout/BrandPill.tsx
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+
 import { Icon, Icons } from "@/components/Icon";

 export function BrandPill(props: {
--- a/src/components/layout/ErrorBoundary.tsx
+++ b/src/components/layout/ErrorBoundary.tsx
@ -1,10 +1,11 @@
				@@ -1,10 +1,11 @@
 import { Component } from "react";
+import { Trans, useTranslation } from "react-i18next";
+
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Link } from "@/components/text/Link";
 import { Title } from "@/components/text/Title";
 import { conf } from "@/setup/config";
-import { Trans, useTranslation } from "react-i18next";

 interface ErrorShowcaseProps {
  error: {
--- a/src/components/layout/Modal.tsx
+++ b/src/components/layout/Modal.tsx
@ -1,8 +1,9 @@
				@@ -1,8 +1,9 @@
-import { Overlay } from "@/components/Overlay";
-import { Transition } from "@/components/Transition";
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";

+import { Overlay } from "@/components/Overlay";
+import { Transition } from "@/components/Transition";
+
 interface Props {
  show: boolean;
  children?: ReactNode;
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@ -1,10 +1,12 @@
				@@ -1,10 +1,12 @@
 import { ReactNode, useState } from "react";
 import { Link } from "react-router-dom";
+
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
-import { conf } from "@/setup/config";
 import { useBannerSize } from "@/hooks/useBanner";
+import { conf } from "@/setup/config";
 import SettingsModal from "@/views/SettingsModal";
+
 import { BrandPill } from "./BrandPill";

 export interface NavigationProps {
--- a/src/components/layout/SectionHeading.tsx
+++ b/src/components/layout/SectionHeading.tsx
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+
 import { Icon, Icons } from "@/components/Icon";

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

 export interface MediaCardProps {
  media: MWMediaMeta;
--- a/src/components/media/WatchedMediaCard.tsx
+++ b/src/components/media/WatchedMediaCard.tsx
@ -1,6 +1,8 @@
				@@ -1,6 +1,8 @@
+import { useMemo } from "react";
+
 import { MWMediaMeta } from "@/backend/metadata/types";
 import { useWatchedContext } from "@/state/watched";
-import { useMemo } from "react";
+
 import { MediaCard } from "./MediaCard";

 export interface WatchedMediaCardProps {
--- a/src/components/popout/FloatingCard.tsx
+++ b/src/components/popout/FloatingCard.tsx
@ -1,12 +1,14 @@
				@@ -1,12 +1,14 @@
+import { animated, easings, useSpringValue } from "@react-spring/web";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+
 import { FloatingCardAnchorPosition } from "@/components/popout/positions/FloatingCardAnchorPosition";
 import { FloatingCardMobilePosition } from "@/components/popout/positions/FloatingCardMobilePosition";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
-import { useSpringValue, animated, easings } from "@react-spring/web";
-import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { Icon, Icons } from "../Icon";
+
 import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
+import { Icon, Icons } from "../Icon";

 interface FloatingCardProps {
  children?: ReactNode;
--- a/src/components/popout/FloatingContainer.tsx
+++ b/src/components/popout/FloatingContainer.tsx
@ -1,4 +1,3 @@
				@@ -1,4 +1,3 @@
-import { Transition } from "@/components/Transition";
 import React, {
  ReactNode,
  useCallback,
@ -8,6 +7,8 @@ import React, {
				@@ -8,6 +7,8 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";

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

 interface Props {
  children?: ReactNode;
--- a/src/components/popout/positions/FloatingCardAnchorPosition.tsx
+++ b/src/components/popout/positions/FloatingCardAnchorPosition.tsx
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
-import { createFloatingAnchorEvent } from "@/components/popout/FloatingAnchor";
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";

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

--- a/src/components/text/ArrowLink.tsx
+++ b/src/components/text/ArrowLink.tsx
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { Link as LinkRouter } from "react-router-dom";
+
 import { Icon, Icons } from "@/components/Icon";

 interface IArrowLinkPropsBase {
--- a/src/hooks/useBanner.tsx
+++ b/src/hooks/useBanner.tsx
@ -1,12 +1,12 @@
				@@ -1,12 +1,12 @@
 import {
-  ReactNode,
-  createContext,
-  useState,
-  useMemo,
  Dispatch,
+  ReactNode,
  SetStateAction,
-  useEffect,
+  createContext,
  useContext,
+  useEffect,
+  useMemo,
+  useState,
 } from "react";
 import { useMeasure } from "react-use";

--- a/src/hooks/useChromecastAvailable.ts
+++ b/src/hooks/useChromecastAvailable.ts
@ -1,8 +1,9 @@
				@@ -1,8 +1,9 @@
 /// <reference types="chromecast-caf-sender"/>

-import { isChromecastAvailable } from "@/setup/chromecast";
 import { useEffect, useRef, useState } from "react";

+import { isChromecastAvailable } from "@/setup/chromecast";
+
 export function useChromecastAvailable() {
  const [available, setAvailable] = useState<boolean | null>(null);

--- a/src/hooks/useScrape.ts
+++ b/src/hooks/useScrape.ts
@ -1,8 +1,9 @@
				@@ -1,8 +1,9 @@
+import { useEffect, useState } from "react";
+
 import { findBestStream } from "@/backend/helpers/scrape";
 import { MWStream } from "@/backend/helpers/streams";
 import { DetailedMeta } from "@/backend/metadata/getmeta";
 import { MWMediaType } from "@/backend/metadata/types";
-import { useEffect, useState } from "react";

 export interface ScrapeEventLog {
  type: "provider" | "embed";
--- a/src/hooks/useSearchQuery.ts
+++ b/src/hooks/useSearchQuery.ts
@ -1,7 +1,8 @@
				@@ -1,7 +1,8 @@
-import { MWMediaType, MWQuery } from "@/backend/metadata/types";
 import { useState } from "react";
 import { generatePath, useHistory, useRouteMatch } from "react-router-dom";

+import { MWMediaType, MWQuery } from "@/backend/metadata/types";
+
 function getInitialValue(params: { type: string; query: string }) {
  const type =
    Object.values(MWMediaType).find((v) => params.type === v) ||
--- a/src/hooks/useVolumeToggle.ts
+++ b/src/hooks/useVolumeToggle.ts
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
+import { useState } from "react";
+
 import { useControls } from "@/video/state/logic/controls";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useState } from "react";

 export function useVolumeControl(descriptor: string) {
  const [storedVolume, setStoredVolume] = useState(1);
--- a/src/index.tsx
+++ b/src/index.tsx
@ -3,11 +3,12 @@ import React, { Suspense } from "react";
				@@ -3,11 +3,12 @@ import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter, HashRouter } from "react-router-dom";
 import type { ReactNode } from "react-router-dom/node_modules/@types/react/index";
-import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
-import { conf } from "@/setup/config";
 import { registerSW } from "virtual:pwa-register";

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

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

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

                {/* other */}
+                <Route
+                  exact
+                  path="/dev"
+                  component={lazy(
+                    () => import("@/views/developer/DeveloperView")
+                  )}
+                />
+                <Route
+                  exact
+                  path="/dev/video"
+                  component={lazy(
+                    () => import("@/views/developer/VideoTesterView")
+                  )}
+                />
+                {/* developer routes that can abuse workers are disabled in production */}
                {process.env.NODE_ENV === "development" ? (
                  <>
-                    <Route
-                      exact
-                      path="/dev"
-                      component={lazy(
-                        () => import("@/views/developer/DeveloperView")
-                      )}
-                    />
                    <Route
                      exact
                      path="/dev/test"
@ -56,13 +64,7 @@ function App() {
				@@ -56,13 +64,7 @@ function App() {
                        () => import("@/views/developer/TestView")
                      )}
                    />
-                    <Route
-                      exact
-                      path="/dev/video"
-                      component={lazy(
-                        () => import("@/views/developer/VideoTesterView")
-                      )}
-                    />
+
                    <Route
                      exact
                      path="/dev/providers"
--- a/src/setup/Layout.tsx
+++ b/src/setup/Layout.tsx
@ -1,8 +1,9 @@
				@@ -1,8 +1,9 @@
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
 import { Banner } from "@/components/Banner";
 import { useBannerSize } from "@/hooks/useBanner";
 import { useIsOnline } from "@/hooks/usePing";
-import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";

 export function Layout(props: { children: ReactNode }) {
  const { t } = useTranslation();
--- a/src/setup/config.ts
+++ b/src/setup/config.ts
@ -1,4 +1,4 @@
				@@ -1,4 +1,4 @@
-import { APP_VERSION, GITHUB_LINK, DISCORD_LINK } from "./constants";
+import { APP_VERSION, DISCORD_LINK, GITHUB_LINK } from "./constants";

 interface Config {
  APP_VERSION: string;
--- a/src/setup/ga.ts
+++ b/src/setup/ga.ts
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import ReactGA from "react-ga4";
+
 import { GA_ID } from "@/setup/constants";

 ReactGA.initialize([
--- a/src/setup/i18n.ts
+++ b/src/setup/i18n.ts
@ -1,14 +1,13 @@
				@@ -1,14 +1,13 @@
 import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";

 // Languages
+import { captionLanguages } from "./iso6391";
 import en from "./locales/en/translation.json";
+import fr from "./locales/fr/translation.json";
 import nl from "./locales/nl/translation.json";
 import tr from "./locales/tr/translation.json";
-import fr from "./locales/fr/translation.json";
-
-import { captionLanguages } from "./iso6391";

 const locales = {
  en: {
--- a/src/setup/locales/fr/translation.json
+++ b/src/setup/locales/fr/translation.json
@ -27,7 +27,7 @@
				@@ -27,7 +27,7 @@
    }
  },
  "seasons": {
-    "seasonAndEpisode": "S{{saison}} E{{épisode}}"
+    "seasonAndEpisode": "S{{season}} E{{episode}}"
  },
  "notFound": {
    "genericTitle": "Introuvable",
--- a/src/setup/sentry.tsx
+++ b/src/setup/sentry.tsx
@ -1,7 +1,8 @@
				@@ -1,7 +1,8 @@
-import * as Sentry from "@sentry/react";
 import { CaptureConsole, HttpClient } from "@sentry/integrations";
-import { SENTRY_DSN } from "@/setup/constants";
+import * as Sentry from "@sentry/react";
+
 import { conf } from "@/setup/config";
+import { SENTRY_DSN } from "@/setup/constants";

 Sentry.init({
  dsn: SENTRY_DSN,
--- a/src/state/bookmark/context.tsx
+++ b/src/state/bookmark/context.tsx
@ -1,6 +1,8 @@
				@@ -1,6 +1,8 @@
+import { ReactNode, createContext, useContext, useMemo } from "react";
+
 import { MWMediaMeta } from "@/backend/metadata/types";
 import { useStore } from "@/utils/storage";
-import { createContext, ReactNode, useContext, useMemo } from "react";
+
 import { BookmarkStore } from "./store";
 import { BookmarkStoreData } from "./types";

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

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

--- a/src/state/settings/store.ts
+++ b/src/state/settings/store.ts
@ -1,4 +1,5 @@
				@@ -1,4 +1,5 @@
 import { createVersionedStore } from "@/utils/storage";
+
 import { MWSettingsData, MWSettingsDataV1 } from "./types";

 export const SettingsStore = createVersionedStore<MWSettingsData>()
--- a/src/state/watched/context.tsx
+++ b/src/state/watched/context.tsx
@ -1,16 +1,18 @@
				@@ -1,16 +1,18 @@
-import { DetailedMeta } from "@/backend/metadata/getmeta";
-import { MWMediaType } from "@/backend/metadata/types";
-import { useStore } from "@/utils/storage";
 import {
-  createContext,
  ReactNode,
+  createContext,
  useCallback,
  useContext,
  useMemo,
  useRef,
 } from "react";
+
+import { DetailedMeta } from "@/backend/metadata/getmeta";
+import { MWMediaType } from "@/backend/metadata/types";
+import { useStore } from "@/utils/storage";
+
 import { VideoProgressStore } from "./store";
-import { StoreMediaItem, WatchedStoreItem, WatchedStoreData } from "./types";
+import { StoreMediaItem, WatchedStoreData, WatchedStoreItem } from "./types";

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

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

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

 type Props = VideoPlayerBaseProps;
--- a/src/video/components/VideoPlayerBase.tsx
+++ b/src/video/components/VideoPlayerBase.tsx
@ -1,15 +1,17 @@
				@@ -1,15 +1,17 @@
+import { useRef } from "react";
+
 import { CastingInternal } from "@/video/components/internal/CastingInternal";
 import { WrapperRegisterInternal } from "@/video/components/internal/WrapperRegisterInternal";
 import { VideoErrorBoundary } from "@/video/components/parts/VideoErrorBoundary";
 import { useInterface } from "@/video/state/logic/interface";
 import { useMeta } from "@/video/state/logic/meta";
-import { useRef } from "react";
+
+import { MetaAction } from "./actions/MetaAction";
+import { VideoElementInternal } from "./internal/VideoElementInternal";
 import {
-  useVideoPlayerDescriptor,
  VideoPlayerContextProvider,
+  useVideoPlayerDescriptor,
 } from "../state/hooks";
-import { MetaAction } from "./actions/MetaAction";
-import { VideoElementInternal } from "./internal/VideoElementInternal";

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

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

 interface BackdropActionProps {
  children?: React.ReactNode;
--- a/src/video/components/actions/CaptionRendererAction.tsx
+++ b/src/video/components/actions/CaptionRendererAction.tsx
@ -1,9 +1,11 @@
				@@ -1,9 +1,11 @@
-import { Transition } from "@/components/Transition";
-import { useSettings } from "@/state/settings";
-import { sanitize, parseSubtitles } from "@/backend/helpers/captions";
-import { ContentCaption } from "subsrt-ts/dist/types/handler";
 import { useRef } from "react";
 import { useAsync } from "react-use";
+import { ContentCaption } from "subsrt-ts/dist/types/handler";
+
+import { parseSubtitles, sanitize } from "@/backend/helpers/captions";
+import { Transition } from "@/components/Transition";
+import { useSettings } from "@/state/settings";
+
 import { useVideoPlayerDescriptor } from "../../state/hooks";
 import { useProgress } from "../../state/logic/progress";
 import { useSource } from "../../state/logic/source";
--- a/src/video/components/actions/CastingTextAction.tsx
+++ b/src/video/components/actions/CastingTextAction.tsx
@ -1,7 +1,8 @@
				@@ -1,7 +1,8 @@
+import { useTranslation } from "react-i18next";
+
 import { Icon, Icons } from "@/components/Icon";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMisc } from "@/video/state/logic/misc";
-import { useTranslation } from "react-i18next";

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

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

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

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

 export function KeyboardShortcutsAction() {
  const descriptor = useVideoPlayerDescriptor();
--- a/src/video/components/actions/MetaAction.tsx
+++ b/src/video/components/actions/MetaAction.tsx
@ -1,9 +1,10 @@
				@@ -1,9 +1,10 @@
+import { useEffect } from "react";
+
 import { MWCaption } from "@/backend/helpers/streams";
 import { DetailedMeta } from "@/backend/metadata/getmeta";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMeta } from "@/video/state/logic/meta";
 import { useProgress } from "@/video/state/logic/progress";
-import { useEffect } from "react";

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

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

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

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

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

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

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

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

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

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

 function durationExceedsHour(secs: number): boolean {
  return secs > 60 * 60;
--- a/src/video/components/actions/VolumeAction.tsx
+++ b/src/video/components/actions/VolumeAction.tsx
@ -1,3 +1,5 @@
				@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
 import { Icon, Icons } from "@/components/Icon";
 import {
  makePercentage,
@ -10,7 +12,6 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
				@@ -10,7 +12,6 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useCallback, useEffect, useRef, useState } from "react";

 interface Props {
  className?: string;
--- a/src/video/components/actions/list-entries/CaptionsSelectionAction.tsx
+++ b/src/video/components/actions/list-entries/CaptionsSelectionAction.tsx
@ -1,5 +1,7 @@
				@@ -1,5 +1,7 @@
-import { Icons } from "@/components/Icon";
 import { useTranslation } from "react-i18next";
+
+import { Icons } from "@/components/Icon";
+
 import { PopoutListAction } from "../../popouts/PopoutUtils";

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

 export function DownloadAction() {
--- a/src/video/components/actions/list-entries/PlaybackSpeedSelectionAction.tsx
+++ b/src/video/components/actions/list-entries/PlaybackSpeedSelectionAction.tsx
@ -1,5 +1,7 @@
				@@ -1,5 +1,7 @@
-import { Icons } from "@/components/Icon";
 import { useTranslation } from "react-i18next";
+
+import { Icons } from "@/components/Icon";
+
 import { PopoutListAction } from "../../popouts/PopoutUtils";

 interface Props {
--- a/src/video/components/actions/list-entries/SourceSelectionAction.tsx
+++ b/src/video/components/actions/list-entries/SourceSelectionAction.tsx
@ -1,7 +1,9 @@
				@@ -1,7 +1,9 @@
-import { Icons } from "@/components/Icon";
 import { useTranslation } from "react-i18next";
-import { PopoutListAction } from "../../popouts/PopoutUtils";
+
+import { Icons } from "@/components/Icon";
+
 import { QualityDisplayAction } from "./QualityDisplayAction";
+import { PopoutListAction } from "../../popouts/PopoutUtils";

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

 interface MetaControllerProps {
  data?: VideoPlayerMeta;
--- a/src/video/components/controllers/ProgressListenerController.tsx
+++ b/src/video/components/controllers/ProgressListenerController.tsx
@ -1,10 +1,11 @@
				@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useRef } from "react";
 import throttle from "lodash.throttle";
+import { useEffect, useMemo, useRef } from "react";
+
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
-import { useProgress } from "@/video/state/logic/progress";
 import { useControls } from "@/video/state/logic/controls";
+import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 import { useMisc } from "@/video/state/logic/misc";
+import { useProgress } from "@/video/state/logic/progress";

 interface Props {
  startAt?: number;
--- a/src/video/components/controllers/SeriesController.tsx
+++ b/src/video/components/controllers/SeriesController.tsx
@ -1,8 +1,9 @@
				@@ -1,8 +1,9 @@
-import { useVideoPlayerDescriptor } from "@/video/state/hooks";
-import { useMeta } from "@/video/state/logic/meta";
 import { useEffect, useRef } from "react";
 import { useHistory } from "react-router-dom";

+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useMeta } from "@/video/state/logic/meta";
+
 interface SeriesControllerProps {
  onSelect?: (state: { episodeId?: string; seasonId?: string }) => void;
 }
--- a/src/video/components/controllers/SourceController.tsx
+++ b/src/video/components/controllers/SourceController.tsx
@ -1,3 +1,5 @@
				@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react";
+
 import { getCaptionUrl, makeCaptionId } from "@/backend/helpers/captions";
 import {
  MWCaption,
@ -9,7 +11,6 @@ import { useSettings } from "@/state/settings";
				@@ -9,7 +11,6 @@ import { useSettings } from "@/state/settings";
 import { useInitialized } from "@/video/components/hooks/useInitialized";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
-import { useEffect, useRef } from "react";

 interface SourceControllerProps {
  source: string;
--- a/src/video/components/hooks/useCurrentSeriesEpisodeInfo.ts
+++ b/src/video/components/hooks/useCurrentSeriesEpisodeInfo.ts
@ -1,8 +1,9 @@
				@@ -1,8 +1,9 @@
-import { MWMediaType } from "@/backend/metadata/types";
-import { useMeta } from "@/video/state/logic/meta";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";

+import { MWMediaType } from "@/backend/metadata/types";
+import { useMeta } from "@/video/state/logic/meta";
+
 export function useCurrentSeriesEpisodeInfo(descriptor: string) {
  const meta = useMeta(descriptor);
  const { t } = useTranslation();
--- a/src/video/components/hooks/useInitialized.ts
+++ b/src/video/components/hooks/useInitialized.ts
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
-import { useMisc } from "@/video/state/logic/misc";
 import { useMemo } from "react";

+import { useMisc } from "@/video/state/logic/misc";
+
 export function useInitialized(descriptor: string): { initialized: boolean } {
  const misc = useMisc(descriptor);
  const initialized = useMemo(() => !!misc.initalized, [misc]);
--- a/src/video/components/hooks/useSyncPopouts.ts
+++ b/src/video/components/hooks/useSyncPopouts.ts
@ -1,8 +1,9 @@
				@@ -1,8 +1,9 @@
-import { ControlMethods, useControls } from "@/video/state/logic/controls";
-import { useInterface } from "@/video/state/logic/interface";
 import { useEffect, useRef } from "react";
 import { useHistory, useLocation } from "react-router-dom";

+import { ControlMethods, useControls } from "@/video/state/logic/controls";
+import { useInterface } from "@/video/state/logic/interface";
+
 function syncRouteToPopout(
  location: ReturnType<typeof useLocation>,
  controls: ControlMethods
--- a/src/video/components/internal/CastingInternal.tsx
+++ b/src/video/components/internal/CastingInternal.tsx
@ -1,10 +1,11 @@
				@@ -1,10 +1,11 @@
+import { useEffect, useMemo, useRef } from "react";
+
 import { useChromecastAvailable } from "@/hooks/useChromecastAvailable";
 import { getPlayerState } from "@/video/state/cache";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { updateMisc, useMisc } from "@/video/state/logic/misc";
 import { createCastingStateProvider } from "@/video/state/providers/castingStateProvider";
 import { setProvider, unsetStateProvider } from "@/video/state/providers/utils";
-import { useEffect, useMemo, useRef } from "react";

 export function CastingInternal() {
  const descriptor = useVideoPlayerDescriptor();
--- a/src/video/components/internal/VideoElementInternal.tsx
+++ b/src/video/components/internal/VideoElementInternal.tsx
@ -1,9 +1,10 @@
				@@ -1,9 +1,10 @@
+import { useEffect, useMemo, useRef } from "react";
+
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 import { useMisc } from "@/video/state/logic/misc";
 import { setProvider, unsetStateProvider } from "@/video/state/providers/utils";
 import { createVideoStateProvider } from "@/video/state/providers/videoStateProvider";
-import { useEffect, useMemo, useRef } from "react";

 interface Props {
  autoPlay?: boolean;
--- a/src/video/components/internal/WrapperRegisterInternal.tsx
+++ b/src/video/components/internal/WrapperRegisterInternal.tsx
@ -1,7 +1,8 @@
				@@ -1,7 +1,8 @@
+import { useEffect } from "react";
+
 import { getPlayerState } from "@/video/state/cache";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { updateMisc } from "@/video/state/logic/misc";
-import { useEffect } from "react";

 export function WrapperRegisterInternal(props: {
  wrapper: HTMLDivElement | null;
--- a/src/video/components/parts/VideoErrorBoundary.tsx
+++ b/src/video/components/parts/VideoErrorBoundary.tsx
@ -1,10 +1,12 @@
				@@ -1,10 +1,12 @@
+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 { ErrorMessage } from "@/components/layout/ErrorBoundary";
 import { Link } from "@/components/text/Link";
 import { conf } from "@/setup/config";
-import { Component } from "react";
-import { Trans } from "react-i18next";
-import type { ReactNode } from "react-router-dom/node_modules/@types/react/index";
+
 import { VideoPlayerHeader } from "./VideoPlayerHeader";

 interface ErrorBoundaryState {
--- a/src/video/components/parts/VideoPlayerError.tsx
+++ b/src/video/components/parts/VideoPlayerError.tsx
@ -1,10 +1,12 @@
				@@ -1,10 +1,12 @@
+import { ReactNode } from "react";
+
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { Title } from "@/components/text/Title";
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useError } from "@/video/state/logic/error";
 import { useMeta } from "@/video/state/logic/meta";
-import { ReactNode } from "react";
+
 import { VideoPlayerHeader } from "./VideoPlayerHeader";

 interface VideoPlayerErrorProps {
--- a/src/video/components/parts/VideoPlayerHeader.tsx
+++ b/src/video/components/parts/VideoPlayerHeader.tsx
@ -1,16 +1,17 @@
				@@ -1,16 +1,17 @@
+import { useTranslation } from "react-i18next";
+
 import { MWMediaMeta } from "@/backend/metadata/types";
 import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icon, Icons } from "@/components/Icon";
 import { BrandPill } from "@/components/layout/BrandPill";
+import { useBannerSize } from "@/hooks/useBanner";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import {
  getIfBookmarkedFromPortable,
  useBookmarkContext,
 } from "@/state/bookmark";
 import { AirplayAction } from "@/video/components/actions/AirplayAction";
 import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
-import { useTranslation } from "react-i18next";
-import { useIsMobile } from "@/hooks/useIsMobile";
-import { useBannerSize } from "@/hooks/useBanner";

 interface VideoPlayerHeaderProps {
  media?: MWMediaMeta;
--- a/src/video/components/parts/VideoPlayerIconButton.tsx
+++ b/src/video/components/parts/VideoPlayerIconButton.tsx
@ -1,6 +1,7 @@
				@@ -1,6 +1,7 @@
-import { Icon, Icons } from "@/components/Icon";
 import React, { forwardRef } from "react";

+import { Icon, Icons } from "@/components/Icon";
+
 export interface VideoPlayerIconButtonProps {
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  icon: Icons;
--- a/src/video/components/parts/VideoPopout.tsx
+++ b/src/video/components/parts/VideoPopout.tsx
@ -1,7 +1,8 @@
				@@ -1,7 +1,8 @@
+import { useEffect, useRef } from "react";
+
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
-import { useEffect, useRef } from "react";

 interface Props {
  children?: React.ReactNode;
--- a/src/video/components/popouts/CaptionSelectionPopout.tsx
+++ b/src/video/components/popouts/CaptionSelectionPopout.tsx
@ -1,3 +1,6 @@
				@@ -1,3 +1,6 @@
+import { useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
 import {
  customCaption,
  getCaptionUrl,
@ -15,8 +18,7 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
				@@ -15,8 +18,7 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useMeta } from "@/video/state/logic/meta";
 import { useSource } from "@/video/state/logic/source";
-import { useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
+
 import { PopoutListEntry, PopoutSection } from "./PopoutUtils";

 export function CaptionSelectionPopout(props: {
--- a/src/video/components/popouts/CaptionSettingsPopout.tsx
+++ b/src/video/components/popouts/CaptionSettingsPopout.tsx
@ -1,13 +1,13 @@
				@@ -1,13 +1,13 @@
-import { FloatingCardView } from "@/components/popout/FloatingCard";
-import { FloatingView } from "@/components/popout/FloatingView";
-import { useFloatingRouter } from "@/hooks/useFloatingRouter";
-import { useSettings } from "@/state/settings";
 import { useTranslation } from "react-i18next";

-import { Slider } from "@/components/Slider";
 import CaptionColorSelector, {
  colors,
 } from "@/components/CaptionColorSelector";
+import { FloatingCardView } from "@/components/popout/FloatingCard";
+import { FloatingView } from "@/components/popout/FloatingView";
+import { Slider } from "@/components/Slider";
+import { useFloatingRouter } from "@/hooks/useFloatingRouter";
+import { useSettings } from "@/state/settings";

 export function CaptionSettingsPopout(props: {
  router: ReturnType<typeof useFloatingRouter>;
--- a/Show More
+++ b/Show More