Upgrade packages, bundling, performance

This commit is contained in:
Contreras, Raf 2023-12-23 18:24:43 +13:00
parent afe2b24c96
commit 48b708d569
145 changed files with 2739 additions and 2038 deletions

View File

@ -26,96 +26,98 @@
]
},
"dependencies": {
"@formkit/auto-animate": "^0.7.0",
"@headlessui/react": "^1.5.0",
"@formkit/auto-animate": "^0.8.1",
"@headlessui/react": "^1.7.17",
"@movie-web/providers": "^1.1.5",
"@noble/hashes": "^1.3.2",
"@react-spring/web": "^9.7.1",
"@scure/bip39": "^1.2.1",
"@noble/hashes": "^1.3.3",
"@react-spring/web": "^9.7.3",
"@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",
"dompurify": "^3.0.1",
"flag-icons": "^6.11.1",
"core-js": "^3.34.0",
"dompurify": "^3.0.6",
"flag-icons": "^7.1.0",
"focus-trap-react": "^10.2.3",
"fscreen": "^1.2.0",
"fuse.js": "^6.4.6",
"hls.js": "^1.0.7",
"i18next": "^22.4.5",
"immer": "^10.0.2",
"fuse.js": "^7.0.0",
"hls.js": "^1.4.14",
"i18next": "^23.7.11",
"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",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ga4": "^2.0.0",
"ofetch": "^1.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-ga4": "^2.1.0",
"react-google-recaptcha-v3": "^1.10.1",
"react-helmet-async": "^1.3.0",
"react-i18next": "^12.1.1",
"react-router-dom": "^5.2.0",
"react-helmet-async": "^2.0.4",
"react-i18next": "^14.0.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",
"zustand": "^4.3.9"
"subsrt-ts": "^2.1.2",
"zustand": "^4.4.7"
},
"devDependencies": {
"@babel/core": "^7.21.3",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.21.0",
"@types/chromecast-caf-sender": "^1.0.5",
"@types/crypto-js": "^4.1.1",
"@types/dompurify": "^2.4.0",
"@types/fscreen": "^1.0.1",
"@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"@babel/preset-typescript": "^7.23.3",
"@types/chromecast-caf-sender": "^1.0.8",
"@types/crypto-js": "^4.2.1",
"@types/dompurify": "^3.0.5",
"@types/fscreen": "^1.0.4",
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.7",
"@types/node": "^17.0.15",
"@types/pako": "^2.0.0",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/react-helmet": "^6.1.6",
"@types/lodash.throttle": "^4.1.9",
"@types/node": "^20.10.5",
"@types/pako": "^2.0.3",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.18",
"@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-transition-group": "^4.4.5",
"@typescript-eslint/eslint-plugin": "^5.13.0",
"@typescript-eslint/parser": "^5.13.0",
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"@types/react-stickynode": "^4.0.3",
"@types/react-transition-group": "^4.4.10",
"@typescript-eslint/eslint-plugin": "^6.15.0",
"@typescript-eslint/parser": "^6.15.0",
"@vitejs/plugin-react": "^4.2.1",
"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-import-resolver-typescript": "^2.5.0",
"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",
"eslint-plugin-react-hooks": "4.3.0",
"glob": "^10.3.3",
"handlebars": "^4.7.7",
"jsdom": "^21.1.0",
"postcss": "^8.4.20",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.1",
"eslint-plugin-react": "7.33.2",
"eslint-plugin-react-hooks": "4.6.0",
"glob": "^10.3.10",
"handlebars": "^4.7.8",
"jsdom": "^23.0.1",
"postcss": "^8.4.32",
"postcss-rtl": "^2.0.0",
"postcss-rtlcss": "^4.0.9",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.7",
"tailwind-scrollbar": "^2.0.1",
"tailwindcss": "^3.2.4",
"tailwindcss-themer": "^3.1.0",
"type-fest": "^4.3.3",
"typescript": "^4.6.4",
"vite": "^4.4.12",
"vite-plugin-checker": "^0.5.6",
"vite-plugin-package-version": "^1.0.2",
"vite-plugin-pwa": "^0.16.5",
"vite-plugin-static-copy": "^0.16.0",
"vitest": "^0.28.5"
"prettier": "^3.1.1",
"prettier-plugin-tailwindcss": "^0.5.9",
"tailwind-scrollbar": "^3.0.5",
"tailwindcss": "^3.4.0",
"tailwindcss-themer": "^4.0.0",
"type-fest": "^4.8.3",
"typescript": "^5.3.3",
"vite": "^5.0.10",
"vite-plugin-checker": "^0.6.2",
"vite-plugin-package-version": "^1.1.0",
"vite-plugin-pwa": "^0.17.4",
"vite-plugin-static-copy": "^1.0.0",
"vitest": "^1.1.0"
},
"pnpm": {
"overrides": {

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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,
}
},
);
}

View File

@ -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),

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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),

View File

@ -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 (

View File

@ -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();

View File

@ -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[] = [];

View File

@ -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;

View File

@ -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(
(v) => v.provider === "imdb_latest"
)?.external_id;
let imdbId = data.external_ids.find((v) => v.provider === "imdb_latest")
?.external_id;
if (!imdbId)
imdbId = data.external_ids.find((v) => v.provider === "imdb")?.external_id;
let tmdbId = data.external_ids.find(
(v) => v.provider === "tmdb_latest"
)?.external_id;
let tmdbId = data.external_ids.find((v) => v.provider === "tmdb_latest")
?.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}`;
}

View File

@ -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;

View File

@ -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
: never;
? TMDBShowData
: 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) {

View File

@ -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;

View File

@ -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,
)}
/>
);

View File

@ -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}
/>

View File

@ -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 (

View File

@ -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>

View File

@ -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 }}

View File

@ -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}

View File

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

View File

@ -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} />

View File

@ -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);
}, [history, props.to]);
navigate(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>

View File

@ -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 ? (

View File

@ -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}

View File

@ -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}
/>

View File

@ -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}

View File

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

View File

@ -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

View File

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

View File

@ -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);

View File

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

View File

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

View File

@ -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 (

View File

@ -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(() => {

View File

@ -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
}%`,
}}

View File

@ -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);

View File

@ -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(() => {

View File

@ -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}

View File

@ -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;

View File

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

View File

@ -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];

View File

@ -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(() => {

View File

@ -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} />}

View File

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

View File

@ -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} />

View File

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

View File

@ -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);

View File

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

View File

@ -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 (

View File

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

View File

@ -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()) {

View File

@ -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,
);
};
}

View File

@ -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;

View File

@ -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 () => {

View File

@ -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();

View File

@ -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);

View File

@ -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 {

View File

@ -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;

View File

@ -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();
}

View File

@ -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]);

View File

@ -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]);

View File

@ -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();

View File

@ -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 (

View File

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

View File

@ -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;

View File

@ -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

View File

@ -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,

View File

@ -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) {

View File

@ -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;
}
},
);

View File

@ -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}

View File

@ -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}

View File

@ -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",
)}
/>
);

View File

@ -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

View File

@ -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();

View File

@ -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">

View File

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

View File

@ -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 {

View File

@ -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 {

View File

@ -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

View File

@ -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 {

View File

@ -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];

View File

@ -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];

View File

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

View File

@ -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 },
);
};

View File

@ -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);

View File

@ -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(
<React.StrictMode>
<ErrorBoundary>
<TurnstileProvider />
<HelmetProvider>
<Suspense fallback={<LoadingScreen type="lazy" />}>
<ThemeProvider applyGlobal>
<ProgressSyncer />
<BookmarkSyncer />
<SettingsSyncer />
<TheRouter>
<MigrationRunner />
</TheRouter>
</ThemeProvider>
</Suspense>
</HelmetProvider>
</ErrorBoundary>
</React.StrictMode>,
document.getElementById("root")
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
<ErrorBoundary>
<TurnstileProvider />
<HelmetProvider>
<Suspense fallback={<LoadingScreen type="lazy" />}>
<ThemeProvider applyGlobal>
<ProgressSyncer />
<BookmarkSyncer />
<SettingsSyncer />
<TheRouter>
<MigrationRunner />
</TheRouter>
</ThemeProvider>
</Suspense>
</HelmetProvider>
</ErrorBoundary>,
);

View File

@ -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>

View File

@ -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(
`/media/${params.media}/${meta.season?.tmdbId}/${meta.episode?.tmdbId}`
navigate(
`/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;

View File

@ -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}

View File

@ -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;

View File

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

View File

@ -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}

View File

@ -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",
)}
/>
</>

Some files were not shown because too many files have changed in this diff Show More