fix: Linting for player

package.json

@@ -3,8 +3,8 @@
   "scripts": {
     "dev": "turbo dev --filter=\"@superstreamer/*\"",
     "build": "turbo build --filter=\"@superstreamer/*\"",
-    "lint": "turbo lint",
-    "test": "turbo test",
+    "lint": "turbo lint --force --continue",
+    "test": "turbo test --force --continue",
     "install-bin": "turbo install-bin"
   },
   "packageManager": "[email protected]",

packages/player/src/react/ControllerProvider.tsx

@@ -1,13 +1,16 @@
 import { createContext } from "react";
-import { Controller } from "./hooks/useController";
+import type { Controller } from "./hooks/useController";
 import type { ReactNode } from "react";
 
-export const ControllerContext = createContext({} as Controller);
+export const ControllerContext = createContext(
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  {} as Controller,
+);
 
-type ControllerProviderProps = {
+interface ControllerProviderProps {
   children: ReactNode;
   controller: Controller;
-};
+}
 
 export function ControllerProvider({
   children,

packages/player/src/react/controls/Controls.tsx

@@ -4,10 +4,10 @@ import { AppStoreProvider } from "./context/AppStoreProvider";
 import { ParamsProvider } from "./context/ParamsProvider";
 import type { Lang, Metadata } from "./types";
 
-export type ControlsProps = {
+export interface ControlsProps {
   metadata?: Metadata;
   lang?: Lang;
-};
+}
 
 export function Controls({ metadata, lang }: ControlsProps) {
   return (

packages/player/src/react/controls/components/BottomControls.tsx

@@ -1,24 +1,24 @@
-import SettingsIcon from "../icons/settings.svg?react";
-import SubtitlesIcon from "../icons/subtitles.svg?react";
-import ForwardIcon from "../icons/forward.svg?react";
+import { FullscreenButton } from "./FullscreenButton";
+import { Label } from "./Label";
+import { PlayPauseButton } from "./PlayPauseButton";
 import { SqButton } from "./SqButton";
 import { VolumeButton } from "./VolumeButton";
-import { Label } from "./Label";
 import { useFacade, useSelector } from "../..";
 import { useAppStore } from "../hooks/useAppStore";
 import { useFakeTime } from "../hooks/useFakeTime";
 import { useSeekTo } from "../hooks/useSeekTo";
 import { useShowTextAudio } from "../hooks/useShowTextAudio";
-import { PlayPauseButton } from "./PlayPauseButton";
-import { FullscreenButton } from "./FullscreenButton";
-import type { MouseEventHandler } from "react";
+import ForwardIcon from "../icons/forward.svg?react";
+import SettingsIcon from "../icons/settings.svg?react";
+import SubtitlesIcon from "../icons/subtitles.svg?react";
 import type { SetAppSettings } from "../hooks/useAppSettings";
+import type { MouseEventHandler } from "react";
 
-type BottomControlsProps = {
+interface BottomControlsProps {
   nudgeVisible(): void;
   setAppSettings: SetAppSettings;
   toggleFullscreen: MouseEventHandler<HTMLElement>;
-};
+}
 
 export function BottomControls({
   nudgeVisible,

packages/player/src/react/controls/components/Center.tsx

@@ -1,12 +1,12 @@
-import { useFacade } from "../..";
-import { CenterIconPop } from "./CenterIconPop";
 import { useRef } from "react";
-import type { MouseEventHandler } from "react";
+import { CenterIconPop } from "./CenterIconPop";
+import { useFacade } from "../..";
 import type { CenterIconPopRef } from "./CenterIconPop";
+import type { MouseEventHandler } from "react";
 
-type CenterProps = {
+interface CenterProps {
   onDoubleClick?: MouseEventHandler<HTMLElement>;
-};
+}
 
 export function Center({ onDoubleClick }: CenterProps) {
   const facade = useFacade();

packages/player/src/react/controls/components/CenterIconPop.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { useSelector } from "../..";
-import playIcon from "../icons/play.svg";
 import pauseIcon from "../icons/pause.svg";
+import playIcon from "../icons/play.svg";
 
 export interface CenterIconPopRef {
   playOrPause(): void;
@@ -47,7 +47,7 @@ export const CenterIconPop = forwardRef<CenterIconPopRef, unknown>((_, ref) => {
   return <div ref={elementRef} />;
 });
 
-type LastNudge = {
+interface LastNudge {
   element: HTMLDivElement;
   timerId: number;
-};
+}

packages/player/src/react/controls/components/CheckList.tsx

@@ -1,15 +1,15 @@
 import cn from "clsx";
 
-export type CheckListItem = {
+export interface CheckListItem {
   id: number | null;
   label: React.ReactNode;
   checked: boolean;
-};
+}
 
-type CheckListProps = {
+interface CheckListProps {
   onSelect(id: CheckListItem["id"]): void;
   items: CheckListItem[];
-};
+}
 
 export function CheckList({ items, onSelect }: CheckListProps) {
   return (

packages/player/src/react/controls/components/FullscreenButton.tsx

@@ -1,12 +1,12 @@
-import FullscreenIcon from "../icons/fullscreen.svg?react";
-import FullscreenExitIcon from "../icons/fullscreen-exit.svg?react";
 import { SqButton } from "./SqButton";
 import { useAppStore } from "../hooks/useAppStore";
+import FullscreenExitIcon from "../icons/fullscreen-exit.svg?react";
+import FullscreenIcon from "../icons/fullscreen.svg?react";
 import type { MouseEventHandler } from "react";
 
-type FullscreenButtonProps = {
+interface FullscreenButtonProps {
   toggleFullscreen: MouseEventHandler<HTMLElement>;
-};
+}
 
 export function FullscreenButton({ toggleFullscreen }: FullscreenButtonProps) {
   const fullscreen = useAppStore((state) => state.fullscreen);

packages/player/src/react/controls/components/InterstitialProgress.tsx

@@ -1,9 +1,9 @@
 import { InterstitialAdProgress } from "./InterstitialAdProgress";
 import type { Interstitial } from "../..";
 
-type InterstitialProgressProps = {
+interface InterstitialProgressProps {
   interstitial: Interstitial;
-};
+}
 export function InterstitialProgress({
   interstitial,
 }: InterstitialProgressProps) {

packages/player/src/react/controls/components/Pane.tsx

@@ -1,7 +1,7 @@
-type PaneProps = {
+interface PaneProps {
   title: string;
   children: React.ReactNode;
-};
+}
 
 export function Pane({ title, children }: PaneProps) {
   return (

packages/player/src/react/controls/components/PlayPauseButton.tsx

@@ -1,11 +1,11 @@
-import { useFacade, useSelector } from "../..";
 import { SqButton } from "./SqButton";
-import PlayIcon from "../icons/play.svg?react";
+import { useFacade, useSelector } from "../..";
 import PauseIcon from "../icons/pause.svg?react";
+import PlayIcon from "../icons/play.svg?react";
 
-type PlayPauseButtonProps = {
+interface PlayPauseButtonProps {
   nudgeVisible(): void;
-};
+}
 
 export function PlayPauseButton({ nudgeVisible }: PlayPauseButtonProps) {
   const facade = useFacade();

packages/player/src/react/controls/components/Playback.tsx

@@ -1,13 +1,13 @@
 import cn from "clsx";
-import { Settings } from "./Settings";
-import { Center } from "./Center";
 import { BottomControls } from "./BottomControls";
-import { useAppVisible } from "../hooks/useAppVisible";
-import { useAppSettings } from "../hooks/useAppSettings";
-import { useAppFullscreen } from "../hooks/useAppFullscreen";
-import { useVisibleControls } from "../hooks/useVisibleControls";
+import { Center } from "./Center";
 import { Seekbar } from "./Seekbar";
+import { Settings } from "./Settings";
 import { useSelector } from "../..";
+import { useAppFullscreen } from "../hooks/useAppFullscreen";
+import { useAppSettings } from "../hooks/useAppSettings";
+import { useAppVisible } from "../hooks/useAppVisible";
+import { useVisibleControls } from "../hooks/useVisibleControls";
 
 export function Playback() {
   const ready = useSelector((facade) => facade.ready);

packages/player/src/react/controls/components/Progress.tsx

@@ -1,10 +1,10 @@
-import { useRef, useState, useEffect, useCallback } from "react";
-import { toHMS } from "../utils";
 import cn from "clsx";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useSelector } from "../..";
 import { useAppStore } from "../hooks/useAppStore";
 import { useFakeTime } from "../hooks/useFakeTime";
 import { useSeekTo } from "../hooks/useSeekTo";
+import { toHMS } from "../utils";
 import type { PointerEventHandler } from "react";
 
 export function Progress() {

packages/player/src/react/controls/components/QualitiesPane.tsx

@@ -1,8 +1,9 @@
 import cn from "clsx";
 import { CheckList } from "./CheckList";
 import { Pane } from "./Pane";
-import { Quality, useFacade, useSelector } from "../..";
+import { useFacade, useSelector } from "../..";
 import { useI18n } from "../hooks/useI18n";
+import type { Quality } from "../..";
 import type { CheckListItem } from "./CheckList";
 
 export function QualitiesPane() {

packages/player/src/react/controls/components/Seekbar.tsx

@@ -1,9 +1,9 @@
 import cn from "clsx";
-import { Progress } from "./Progress";
 import { InterstitialProgress } from "./InterstitialProgress";
+import { Progress } from "./Progress";
 import { TimeStat } from "./TimeStat";
-import { useAppStore } from "../hooks/useAppStore";
 import { useSelector } from "../..";
+import { useAppStore } from "../hooks/useAppStore";
 
 export function Seekbar() {
   const interstitial = useSelector((facade) => facade.interstitial);

packages/player/src/react/controls/components/Settings.tsx

@@ -1,10 +1,10 @@
 import cn from "clsx";
 import { useEffect, useLayoutEffect, useRef } from "react";
-import usePrevious from "../hooks/usePrevious";
-import { SettingsPane } from "./SettingsPane";
 import { QualitiesPane } from "./QualitiesPane";
+import { SettingsPane } from "./SettingsPane";
 import { TextAudioPane } from "./TextAudioPane";
 import { useAppStore } from "../hooks/useAppStore";
+import usePrevious from "../hooks/usePrevious";
 import type { SettingsMode } from "../hooks/useAppSettings";
 
 export function Settings() {

packages/player/src/react/controls/components/SettingsPane.tsx

@@ -1,9 +1,9 @@
 import cn from "clsx";
 
-type SettingsPaneProps = {
+interface SettingsPaneProps {
   children: React.ReactNode;
   active: boolean;
-};
+}
 
 export function SettingsPane({ children, active }: SettingsPaneProps) {
   return (

packages/player/src/react/controls/components/SqButton.tsx

@@ -1,10 +1,10 @@
 import cn from "clsx";
 import { useRef } from "react";
 import { SqButtonTooltip } from "./SqButtonTooltip";
-import type { MouseEventHandler } from "react";
 import type { LangKey } from "../i18n";
+import type { MouseEventHandler } from "react";
 
-type SqButtonProps = {
+interface SqButtonProps {
   children: React.ReactNode;
   onClick: MouseEventHandler<HTMLButtonElement>;
   onIdle?: () => void;
@@ -13,7 +13,7 @@ type SqButtonProps = {
   disabled?: boolean;
   tooltip?: LangKey;
   tooltipPlacement?: "left" | "right";
-};
+}
 
 export function SqButton({
   children,

packages/player/src/react/controls/components/SqButtonTooltip.tsx

@@ -1,12 +1,12 @@
 import cn from "clsx";
-import { useI18n } from "../hooks/useI18n";
 import { useSelector } from "../..";
+import { useI18n } from "../hooks/useI18n";
 import type { LangKey } from "../i18n";
 
-type SqButtonTooltipProps = {
+interface SqButtonTooltipProps {
   value: LangKey;
   placement?: "left" | "right";
-};
+}
 
 export function SqButtonTooltip({ value, placement }: SqButtonTooltipProps) {
   const l = useI18n();

packages/player/src/react/controls/components/Start.tsx

@@ -1,6 +1,6 @@
 import cn from "clsx";
-import PlayIcon from "../icons/play.svg?react";
 import { useFacade, useSelector } from "../..";
+import PlayIcon from "../icons/play.svg?react";
 
 export function Start() {
   const facade = useFacade();

packages/player/src/react/controls/components/TimeStat.tsx

@@ -1,6 +1,6 @@
-import { toHMS } from "../utils";
 import { useSelector } from "../..";
 import { useFakeTime } from "../hooks/useFakeTime";
+import { toHMS } from "../utils";
 
 export function TimeStat() {
   const fakeTime = useFakeTime();

packages/player/src/react/controls/components/VolumeButton.tsx

@@ -1,10 +1,11 @@
-import { SqButton } from "./SqButton";
 import cn from "clsx";
+import { useRef, useState } from "react";
+import { SqButton } from "./SqButton";
 import Volume0Icon from "../icons/volume-0.svg?react";
 import Volume1Icon from "../icons/volume-1.svg?react";
 import Volume2Icon from "../icons/volume-2.svg?react";
 import VolumeMutedIcon from "../icons/volume-muted.svg?react";
-import { CSSProperties, ReactEventHandler, useRef, useState } from "react";
+import type { CSSProperties, ReactEventHandler } from "react";
 
 const rangeStyle: CSSProperties = {
   writingMode: "vertical-lr",
@@ -15,10 +16,10 @@ const rangeStyle: CSSProperties = {
     : undefined,
 };
 
-type VolumeButtonProps = {
+interface VolumeButtonProps {
   volume: number;
   setVolume(volume: number): void;
-};
+}
 
 export function VolumeButton({ volume, setVolume }: VolumeButtonProps) {
   const [visible, setVisible] = useState(false);

packages/player/src/react/controls/context/AppStoreProvider.tsx

@@ -1,8 +1,8 @@
-import { createStore } from "zustand";
 import { createContext, useContext, useEffect, useState } from "react";
+import { createStore } from "zustand";
 import { ControllerContext, Events } from "../..";
-import type { ReactNode } from "react";
 import type { Settings } from "../hooks/useAppSettings";
+import type { ReactNode } from "react";
 
 type AppStore = ReturnType<typeof createAppStore>;
 
@@ -19,11 +19,14 @@ export interface AppState {
   setFullscreen(value: boolean): void;
 }
 
-export const StoreContext = createContext<AppStore>({} as AppStore);
+export const StoreContext = createContext<AppStore>(
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  {} as AppStore,
+);
 
-type StoreProviderProps = {
+interface StoreProviderProps {
   children: ReactNode;
-};
+}
 
 export function AppStoreProvider({ children }: StoreProviderProps) {
   const [store] = useState(createAppStore);