From 414e7f49cfc18c12639810684a1dfe9ae14c6510 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane?= Date: Tue, 24 Oct 2023 15:06:04 +0200 Subject: [PATCH] chore: upgrade TypeScript version --- package-lock.json | 22 +-- package.json | 2 +- src/components/AppVersion.tsx | 2 +- src/components/ButtonDownload.tsx | 64 ++++----- src/components/ButtonFavorite.tsx | 14 +- src/components/ButtonPlayerModeVideo.tsx | 4 +- src/components/ButtonRepeat.tsx | 50 ++++--- src/components/ButtonShare.tsx | 112 ++++++++------- src/components/CardImage.tsx | 5 +- src/components/CardList.tsx | 4 +- src/components/CardMenu.tsx | 6 +- src/components/ChangeLanguage.tsx | 2 +- src/components/ChannelCard.tsx | 8 +- src/components/DrawerPlayer.tsx | 8 +- src/components/ExportData.tsx | 4 +- src/components/FavoritePlaylist.tsx | 4 +- src/components/Form.tsx | 10 +- src/components/HorizontalGridList.tsx | 6 +- src/components/Image.tsx | 2 +- src/components/ImportData.tsx | 12 +- src/components/LinkSeeAll.tsx | 2 +- src/components/Main.tsx | 2 +- src/components/MobileNavigation.tsx | 4 +- src/components/Modal.tsx | 8 +- src/components/ModalAddCustomInstance.tsx | 4 +- src/components/ModalAddToPlaylist.tsx | 8 +- src/components/ModalDeleteCustomInstance.tsx | 4 +- src/components/ModalDeleteFromPlaylist.tsx | 13 +- src/components/ModalDeletePlaylist.tsx | 6 +- src/components/ModalSyncData.tsx | 6 +- src/components/ModalUpdatePlaylist.tsx | 8 +- .../ModalVideoIframeInformation.tsx | 4 +- src/components/PageHeader.tsx | 5 +- src/components/PlayerActions.tsx | 8 +- src/components/PlaylistCard.tsx | 8 +- src/components/PlaylistCardMenu.tsx | 6 +- src/components/Popular.tsx | 4 +- src/components/SearchFiltersMenu.tsx | 2 +- src/components/SearchHistoryMenu.tsx | 4 +- src/components/SearchResult.tsx | 2 +- src/components/SelectInvidiousInstance.tsx | 4 +- src/components/SponsorBlockBar.tsx | 2 +- src/components/SponsorBlockSettings.tsx | 2 +- src/components/SwitchVideoMode.tsx | 2 +- src/components/TransferList.tsx | 2 +- src/components/Trending.tsx | 64 ++++----- src/components/VerticalSlider.tsx | 4 +- src/components/Video.tsx | 132 +++++++++--------- src/components/VideoCard.tsx | 4 +- src/components/VideoIframe.tsx | 46 +++--- src/components/VideoList.tsx | 6 +- src/components/VideoPlayer.tsx | 2 +- .../05092023_migrate_custom_instance.ts | 2 +- .../18102023_migrate_formate_storage_data.ts | 8 +- src/database/index.ts | 2 +- src/database/migrations.ts | 2 +- src/database/utils.ts | 8 +- src/hooks/useGetChannel.ts | 2 +- src/hooks/useGetPlaylist.ts | 2 +- src/hooks/usePaginateData.ts | 2 +- src/hooks/usePlayPlaylist.ts | 2 +- src/hooks/usePlayVideo.ts | 2 +- src/hooks/useResolveVideosPlaylist.ts | 4 +- src/hooks/useSponsorBlock.ts | 2 +- src/pages/ChannelDetail.tsx | 4 +- src/pages/PlaylistDetail.tsx | 2 +- src/providers/Favorite.tsx | 10 +- src/providers/History.tsx | 8 +- src/providers/Mantine.tsx | 2 +- src/providers/Navigate.tsx | 8 +- src/providers/Player.tsx | 35 +++-- src/providers/PlayerMode.tsx | 17 +-- src/providers/PlayerPlaylist.tsx | 23 +-- src/providers/Playlist.tsx | 14 +- src/providers/PreviousNextTrack.tsx | 25 ++-- src/providers/Search.tsx | 19 +-- src/providers/Settings.tsx | 20 ++- src/providers/Spotlight.tsx | 10 +- src/providers/TrendingFilters.tsx | 10 +- src/providers/VideoIframeVisibility.tsx | 19 +-- src/reportWebVitals.ts | 2 +- src/services/channel.ts | 6 +- src/services/instances.ts | 2 +- src/services/playlist.ts | 2 +- src/services/popular.ts | 2 +- src/services/search.ts | 4 +- src/services/sponsor-block.ts | 2 +- src/services/trending.ts | 4 +- src/services/video.ts | 2 +- src/types/interfaces/Card.ts | 2 +- src/types/interfaces/Channel.ts | 2 +- src/types/interfaces/Playlist.ts | 4 +- src/types/interfaces/Settings.ts | 2 +- src/utils/cleanVideoThumbnailsUrl.ts | 2 +- src/utils/formatData.ts | 8 +- src/utils/getCurrentInstance.ts | 2 +- tsconfig.json | 10 +- 97 files changed, 526 insertions(+), 515 deletions(-) diff --git a/package-lock.json b/package-lock.json index a796468..464ffde 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,7 +64,7 @@ "@craco/types": "^7.1.0", "@trivago/prettier-plugin-sort-imports": "^4.2.1", "husky": "^8.0.3", - "typescript": "^4.9.5", + "typescript": "^5.2.2", "uniqolor": "^1.1.0" } }, @@ -3884,19 +3884,6 @@ "node": ">=8" } }, - "node_modules/@commitlint/load/node_modules/typescript": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", - "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, "node_modules/@commitlint/message": { "version": "18.0.0", "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-18.0.0.tgz", @@ -20114,14 +20101,15 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/ua-parser-js": { diff --git a/package.json b/package.json index 7722092..67c3969 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "@craco/types": "^7.1.0", "@trivago/prettier-plugin-sort-imports": "^4.2.1", "husky": "^8.0.3", - "typescript": "^4.9.5", + "typescript": "^5.2.2", "uniqolor": "^1.1.0" } } diff --git a/src/components/AppVersion.tsx b/src/components/AppVersion.tsx index 2a5b5ff..85f902d 100644 --- a/src/components/AppVersion.tsx +++ b/src/components/AppVersion.tsx @@ -1,5 +1,5 @@ import { Badge, Space, Text } from "@mantine/core"; -import { FC, memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import pkg from "../../package.json"; diff --git a/src/components/ButtonDownload.tsx b/src/components/ButtonDownload.tsx index 8afbcca..7e3b9e2 100644 --- a/src/components/ButtonDownload.tsx +++ b/src/components/ButtonDownload.tsx @@ -1,6 +1,6 @@ import { ActionIcon, Menu } from "@mantine/core"; import { IconDownload } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { usePlayerUrl, usePlayerVideo } from "../providers/Player"; @@ -9,38 +9,36 @@ interface ButtonDownloadProps { iconSize?: number; } -export const ButtonDownload: React.FC = memo( - ({ iconSize }) => { - const { video } = usePlayerVideo(); - const playerUrl = usePlayerUrl(); - const { t } = useTranslation(); +export const ButtonDownload: FC = memo(({ iconSize }) => { + const { video } = usePlayerVideo(); + const playerUrl = usePlayerUrl(); + const { t } = useTranslation(); - if (!video) return null; + if (!video) return null; - const handleDownload = () => { - window.open(playerUrl as string, "_blank"); - }; + const handleDownload = () => { + window.open(playerUrl as string, "_blank"); + }; - return ( - - - - - - - - {video.adaptiveFormats.map((format) => ( - handleDownload()}> - - {format.type - .replace(";", ",") - .replace('="', ": ") - .replace('"', "")} - - - ))} - - - ); - }, -); + return ( + + + + + + + + {video.adaptiveFormats.map((format) => ( + handleDownload()}> + + {format.type + .replace(";", ",") + .replace('="', ": ") + .replace('"', "")} + + + ))} + + + ); +}); diff --git a/src/components/ButtonFavorite.tsx b/src/components/ButtonFavorite.tsx index 4d878f1..dafad54 100644 --- a/src/components/ButtonFavorite.tsx +++ b/src/components/ButtonFavorite.tsx @@ -1,30 +1,30 @@ import { ActionIcon, - ActionIconProps, + type ActionIconProps, Menu, useMantineTheme, } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { IconHeart, IconHeartFilled } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { db } from "../database"; import { getFavoritePlaylist } from "../database/utils"; import { useFavorite, useSetFavorite } from "../providers/Favorite"; import { usePlayerVideo } from "../providers/Player"; -import { +import type { Card, CardChannel, CardPlaylist, CardVideo, } from "../types/interfaces/Card"; -import { Channel } from "../types/interfaces/Channel"; -import { +import type { Channel } from "../types/interfaces/Channel"; +import type { FavoritePlaylist as Favorite, Playlist, } from "../types/interfaces/Playlist"; -import { Video } from "../types/interfaces/Video"; +import type { Video } from "../types/interfaces/Video"; import { formatedCardChannel, formatedCardPlaylist, @@ -65,7 +65,7 @@ export const getCardTitle = (item: ButtonFavoriteCard) => { } }; -export const ButtonFavorite: React.FC = memo( +export const ButtonFavorite: FC = memo( ({ card: parentCard, iconSize = 18, diff --git a/src/components/ButtonPlayerModeVideo.tsx b/src/components/ButtonPlayerModeVideo.tsx index 06932ac..29f6cd9 100644 --- a/src/components/ButtonPlayerModeVideo.tsx +++ b/src/components/ButtonPlayerModeVideo.tsx @@ -1,6 +1,6 @@ import { ActionIcon, Menu } from "@mantine/core"; import { IconVideo } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { usePlayerAudio } from "../providers/Player"; @@ -11,7 +11,7 @@ interface ButtonPlayerModeVideoProps { render: "menu" | "button"; } -export const ButtonPlayerModeVideo: React.FC = memo( +export const ButtonPlayerModeVideo: FC = memo( ({ iconSize, render = "button" }) => { const setPlayerMode = useSetPlayerMode(); const playerMode = usePlayerMode(); diff --git a/src/components/ButtonRepeat.tsx b/src/components/ButtonRepeat.tsx index 39c8ff1..1392368 100644 --- a/src/components/ButtonRepeat.tsx +++ b/src/components/ButtonRepeat.tsx @@ -1,6 +1,6 @@ import { ActionIcon } from "@mantine/core"; import { IconRepeat, IconRepeatOnce } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { usePlayerAudio, @@ -12,31 +12,29 @@ interface ButtonRepeatProps { iconSize?: number; } -export const ButtonRepeat: React.FC = memo( - ({ iconSize }) => { - const playerState = usePlayerState(); - const playerAudio = usePlayerAudio(); - const setPlayerState = useSetPlayerState(); +export const ButtonRepeat: FC = memo(({ iconSize }) => { + const playerState = usePlayerState(); + const playerAudio = usePlayerAudio(); + const setPlayerState = useSetPlayerState(); - const handleClick = () => { - // @ts-ignore - const audio = playerAudio?.current?.audioEl.current as HTMLAudioElement; - audio.loop = !playerState.repeat; + const handleClick = () => { + // @ts-ignore + const audio = playerAudio?.current?.audioEl.current as HTMLAudioElement; + audio.loop = !playerState.repeat; - setPlayerState((previousState) => ({ - ...previousState, - repeat: !previousState.repeat, - })); - }; + setPlayerState((previousState) => ({ + ...previousState, + repeat: !previousState.repeat, + })); + }; - return ( - - {playerState.repeat ? ( - - ) : ( - - )} - - ); - }, -); + return ( + + {playerState.repeat ? ( + + ) : ( + + )} + + ); +}); diff --git a/src/components/ButtonShare.tsx b/src/components/ButtonShare.tsx index 4dbbd80..a4f2dc4 100644 --- a/src/components/ButtonShare.tsx +++ b/src/components/ButtonShare.tsx @@ -7,12 +7,12 @@ import { IconPlayerPlay, IconShare, } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { usePlayerVideo } from "../providers/Player"; import { useSettings } from "../providers/Settings"; -import { Video } from "../types/interfaces/Video"; +import type { Video } from "../types/interfaces/Video"; type ShareType = "holoplay" | "invidious" | "youtube"; @@ -20,61 +20,59 @@ interface ButtonDownloadProps { iconSize?: number; } -export const ButtonShare: React.FC = memo( - ({ iconSize }) => { - const { video } = usePlayerVideo() as { video: Video }; - const clipboard = useClipboard(); - const settings = useSettings(); - const { t } = useTranslation(); +export const ButtonShare: FC = memo(({ iconSize }) => { + const { video } = usePlayerVideo() as { video: Video }; + const clipboard = useClipboard(); + const settings = useSettings(); + const { t } = useTranslation(); - const formateVideoUrl = (type: ShareType) => { - switch (type) { - case "holoplay": - return `https://app.holoplay.io/?v=${video.videoId}`; - case "invidious": - return `${settings.currentInstance?.uri}/watch?v=${video.videoId}`; - case "youtube": - return `https://www.youtube.com/watch?v=${video.videoId}`; - } - }; + const formateVideoUrl = (type: ShareType) => { + switch (type) { + case "holoplay": + return `https://app.holoplay.io/?v=${video.videoId}`; + case "invidious": + return `${settings.currentInstance?.uri}/watch?v=${video.videoId}`; + case "youtube": + return `https://www.youtube.com/watch?v=${video.videoId}`; + } + }; - const handleClick = (type: ShareType) => { - clipboard.copy(formateVideoUrl(type)); - notifications.show({ - title: t("share.notification.title"), - message: t("share.notification.message"), - }); - }; + const handleClick = (type: ShareType) => { + clipboard.copy(formateVideoUrl(type)); + notifications.show({ + title: t("share.notification.title"), + message: t("share.notification.message"), + }); + }; - return ( - - - - - - - - {t("share.title")} - handleClick("holoplay")} - leftSection={} - > - {t("share.holoplay.link")} - - handleClick("invidious")} - leftSection={} - > - {t("share.invidious.link")} - - handleClick("youtube")} - leftSection={} - > - {t("share.youtube.link")} - - - - ); - }, -); + return ( + + + + + + + + {t("share.title")} + handleClick("holoplay")} + leftSection={} + > + {t("share.holoplay.link")} + + handleClick("invidious")} + leftSection={} + > + {t("share.invidious.link")} + + handleClick("youtube")} + leftSection={} + > + {t("share.youtube.link")} + + + + ); +}); diff --git a/src/components/CardImage.tsx b/src/components/CardImage.tsx index f03dbee..2a3547e 100644 --- a/src/components/CardImage.tsx +++ b/src/components/CardImage.tsx @@ -1,4 +1,5 @@ import { Flex } from "@mantine/core"; +import type { FC, ReactNode } from "react"; import classes from "./CardImage.module.css"; import { Image } from "./Image"; @@ -7,10 +8,10 @@ interface CardImageProps { src: string; title: string; domain?: string; - children?: React.ReactNode; + children?: ReactNode; } -export const CardImage: React.FC = ({ +export const CardImage: FC = ({ src, title, domain = "", diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index 454bbb4..f23871b 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -1,8 +1,8 @@ import { Box } from "@mantine/core"; -import { FC, memo } from "react"; +import { type FC, memo } from "react"; import { useSettings } from "../providers/Settings"; -import { Card as CardType } from "../types/interfaces/Card"; +import type { Card as CardType } from "../types/interfaces/Card"; import { getCardTitle } from "./ButtonFavorite"; import classes from "./CardList.module.css"; import { ChannelCard } from "./ChannelCard"; diff --git a/src/components/CardMenu.tsx b/src/components/CardMenu.tsx index 32bb801..7ff1d49 100644 --- a/src/components/CardMenu.tsx +++ b/src/components/CardMenu.tsx @@ -6,11 +6,11 @@ import { IconShare, IconTrash, } from "@tabler/icons-react"; -import { memo, useState } from "react"; +import { type FC, memo, useState } from "react"; import { useTranslation } from "react-i18next"; import { useIsLocalPlaylist } from "../hooks/useIsLocalPlaylist"; -import { CardVideo } from "../types/interfaces/Card"; +import type { CardVideo } from "../types/interfaces/Card"; import { ModalAddToPlaylist } from "./ModalAddToPlaylist"; import { ModalDeleteFromPlaylist } from "./ModalDeleteFromPlaylist"; @@ -18,7 +18,7 @@ interface CardMenuProps { card: CardVideo; } -export const CardMenu: React.FC = memo(({ card }) => { +export const CardMenu: FC = memo(({ card }) => { const [addToPlaylistModalOpened, setAddToPlaylistModalOpened] = useState(false); const [deleteFromPlaylistModalOpened, setDeleteFromPlaylistModalOpened] = diff --git a/src/components/ChangeLanguage.tsx b/src/components/ChangeLanguage.tsx index a3281ef..e94f4e7 100644 --- a/src/components/ChangeLanguage.tsx +++ b/src/components/ChangeLanguage.tsx @@ -3,7 +3,7 @@ import i18next from "i18next"; import { memo } from "react"; import { useTranslation } from "react-i18next"; -import { Languages, languagesValues } from "../translations"; +import { type Languages, languagesValues } from "../translations"; export const ChangeLanguage = memo(() => { const { t } = useTranslation("translation", { diff --git a/src/components/ChannelCard.tsx b/src/components/ChannelCard.tsx index 50f0d8d..7bc0308 100644 --- a/src/components/ChannelCard.tsx +++ b/src/components/ChannelCard.tsx @@ -8,12 +8,12 @@ import { UnstyledButton, } from "@mantine/core"; import { IconDiscountCheckFilled } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { useStableNavigate } from "../providers/Navigate"; -import { CardChannel } from "../types/interfaces/Card"; -import { VideoThumbnail } from "../types/interfaces/Video"; +import type { CardChannel } from "../types/interfaces/Card"; +import type { VideoThumbnail } from "../types/interfaces/Video"; import { ButtonFavorite } from "./ButtonFavorite"; import { CardImage } from "./CardImage"; import classes from "./ChannelCard.module.css"; @@ -23,7 +23,7 @@ interface ChannelCardProps { currentInstanceUri: string; } -export const ChannelCard: React.FC = memo( +export const ChannelCard: FC = memo( ({ channel, currentInstanceUri }) => { const navigate = useStableNavigate(); const { t } = useTranslation(); diff --git a/src/components/DrawerPlayer.tsx b/src/components/DrawerPlayer.tsx index bc03e39..f67172a 100644 --- a/src/components/DrawerPlayer.tsx +++ b/src/components/DrawerPlayer.tsx @@ -9,13 +9,13 @@ import { Title, } from "@mantine/core"; import { useDocumentTitle } from "@mantine/hooks"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { usePlayerUrl, usePlayerVideo } from "../providers/Player"; import { usePlayerPlaylist } from "../providers/PlayerPlaylist"; -import { CardVideo } from "../types/interfaces/Card"; -import { Video, VideoThumbnail } from "../types/interfaces/Video"; +import type { CardVideo } from "../types/interfaces/Card"; +import type { Video, VideoThumbnail } from "../types/interfaces/Video"; import { ButtonDownload } from "./ButtonDownload"; import { ButtonFavorite } from "./ButtonFavorite"; import { ButtonPlayerModeVideo } from "./ButtonPlayerModeVideo"; @@ -99,7 +99,7 @@ interface VideoInformationsProps { titleLineClamp?: number; hideDescription?: boolean; } -const VideoInformations: React.FC = memo( +const VideoInformations: FC = memo( ({ titleLineClamp = 1, hideDescription = false }) => { const { video } = usePlayerVideo(); diff --git a/src/components/ExportData.tsx b/src/components/ExportData.tsx index aaeb7a1..3e8e461 100644 --- a/src/components/ExportData.tsx +++ b/src/components/ExportData.tsx @@ -4,9 +4,9 @@ import { memo } from "react"; import { useTranslation } from "react-i18next"; import { getAllPlaylists } from "../database/utils"; -import { CardPlaylist } from "../types/interfaces/Card"; +import type { CardPlaylist } from "../types/interfaces/Card"; import { generateAndDownloadFile } from "../utils/generateAndDownloadFile"; -import { TransferList, TransferListData } from "./TransferList"; +import { TransferList, type TransferListData } from "./TransferList"; const loadPlaylistData = (playlistsTitle: string[]) => { const playlists = getAllPlaylists(); diff --git a/src/components/FavoritePlaylist.tsx b/src/components/FavoritePlaylist.tsx index 85eb785..adee808 100644 --- a/src/components/FavoritePlaylist.tsx +++ b/src/components/FavoritePlaylist.tsx @@ -6,12 +6,12 @@ import { IconUser, IconVideo, } from "@tabler/icons-react"; -import { FC, memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { usePaginateData } from "../hooks/usePaginateData"; import { useFavorite } from "../providers/Favorite"; -import { Card, CardVideo } from "../types/interfaces/Card"; +import type { Card, CardVideo } from "../types/interfaces/Card"; import { CardList } from "./CardList"; import { isLiveStream } from "./VideoCard"; diff --git a/src/components/Form.tsx b/src/components/Form.tsx index 0fe857d..3f6edbe 100644 --- a/src/components/Form.tsx +++ b/src/components/Form.tsx @@ -1,14 +1,12 @@ +import type { FC, ReactNode } from "react"; + interface FormProps { onSubmit: () => void; className?: string; - children: React.ReactNode; + children: ReactNode; } -export const Form: React.FC = ({ - onSubmit, - className, - children, -}) => { +export const Form: FC = ({ onSubmit, className, children }) => { return (
= memo( +export const HorizontalGridList: FC = memo( ({ data }) => { const { ref, width } = useElementSize(); diff --git a/src/components/Image.tsx b/src/components/Image.tsx index 665fe04..07f05cd 100644 --- a/src/components/Image.tsx +++ b/src/components/Image.tsx @@ -1,5 +1,5 @@ import { Skeleton } from "@mantine/core"; -import { FC, ImgHTMLAttributes, memo, useState } from "react"; +import { type FC, type ImgHTMLAttributes, memo, useState } from "react"; export const Image: FC> = memo( ({ src, className, alt, ...props }) => { diff --git a/src/components/ImportData.tsx b/src/components/ImportData.tsx index 635fd3d..241a31e 100644 --- a/src/components/ImportData.tsx +++ b/src/components/ImportData.tsx @@ -8,7 +8,7 @@ import { useMantineColorScheme, useMantineTheme, } from "@mantine/core"; -import { Dropzone, FileRejection } from "@mantine/dropzone"; +import { Dropzone, type FileRejection } from "@mantine/dropzone"; import "@mantine/dropzone/styles.css"; import { notifications } from "@mantine/notifications"; import { @@ -19,7 +19,7 @@ import { } from "@tabler/icons-react"; // @ts-ignore import { map as cappedAll } from "awaiting"; -import { FC, memo, useState } from "react"; +import { type FC, memo, useState } from "react"; import { useTranslation } from "react-i18next"; import { @@ -31,10 +31,10 @@ import { getPlaylists } from "../database/utils"; import { useSetFavorite } from "../providers/Favorite"; import { useSetPlaylists } from "../providers/Playlist"; import { getVideo } from "../services/video"; -import { Card, CardVideo } from "../types/interfaces/Card"; -import { FavoritePlaylist, Playlist } from "../types/interfaces/Playlist"; -import { Video } from "../types/interfaces/Video"; -import { TransferList, TransferListData } from "./TransferList"; +import type { Card, CardVideo } from "../types/interfaces/Card"; +import type { FavoritePlaylist, Playlist } from "../types/interfaces/Playlist"; +import type { Video } from "../types/interfaces/Video"; +import { TransferList, type TransferListData } from "./TransferList"; export const ImportData = memo(() => { const theme = useMantineTheme(); diff --git a/src/components/LinkSeeAll.tsx b/src/components/LinkSeeAll.tsx index a422505..8da6c1c 100644 --- a/src/components/LinkSeeAll.tsx +++ b/src/components/LinkSeeAll.tsx @@ -1,4 +1,4 @@ -import { FC, memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; diff --git a/src/components/Main.tsx b/src/components/Main.tsx index e2daf2b..5f2bf6b 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -1,4 +1,4 @@ -import { FC, PropsWithChildren } from "react"; +import type { FC, PropsWithChildren } from "react"; import classes from "./Main.module.css"; import { PlayerSpace } from "./Player"; diff --git a/src/components/MobileNavigation.tsx b/src/components/MobileNavigation.tsx index 88e0d82..00cb4f1 100644 --- a/src/components/MobileNavigation.tsx +++ b/src/components/MobileNavigation.tsx @@ -7,7 +7,7 @@ import { IconTrendingUp, IconUsers, } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import classes from "./MobileNavigation.module.css"; @@ -17,7 +17,7 @@ interface MobileNavigationProps { onClose: () => void; } -export const MobileNavigation: React.FC = memo( +export const MobileNavigation: FC = memo( ({ onClose }) => { const { t } = useTranslation(); diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 72b722a..96097a3 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,5 +1,9 @@ -import { Modal as MModal, ModalProps, useMantineTheme } from "@mantine/core"; -import { FC, ReactNode } from "react"; +import { + Modal as MModal, + type ModalProps, + useMantineTheme, +} from "@mantine/core"; +import { type FC, type ReactNode } from "react"; import { useAppColorScheme } from "../hooks/useAppColorScheme"; diff --git a/src/components/ModalAddCustomInstance.tsx b/src/components/ModalAddCustomInstance.tsx index e565b27..31160d0 100644 --- a/src/components/ModalAddCustomInstance.tsx +++ b/src/components/ModalAddCustomInstance.tsx @@ -13,8 +13,8 @@ import { useTranslation } from "react-i18next"; import { db } from "../database"; import { useSetSettings } from "../providers/Settings"; -import { Instance } from "../types/interfaces/Instance"; -import { Settings } from "../types/interfaces/Settings"; +import type { Instance } from "../types/interfaces/Instance"; +import type { Settings } from "../types/interfaces/Settings"; import { ButtonAddCustomInstance } from "./ButtonAddCustomInstance"; import { Form } from "./Form"; import { Modal } from "./Modal"; diff --git a/src/components/ModalAddToPlaylist.tsx b/src/components/ModalAddToPlaylist.tsx index a246662..2a3de27 100644 --- a/src/components/ModalAddToPlaylist.tsx +++ b/src/components/ModalAddToPlaylist.tsx @@ -8,14 +8,14 @@ import { TextInput, } from "@mantine/core"; import { notifications } from "@mantine/notifications"; -import { memo, useMemo, useState } from "react"; +import { type FC, memo, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { db } from "../database"; import { getPlaylists } from "../database/utils"; import { usePlaylists, useSetPlaylists } from "../providers/Playlist"; -import { CardVideo } from "../types/interfaces/Card"; -import { Playlist } from "../types/interfaces/Playlist"; +import type { CardVideo } from "../types/interfaces/Card"; +import type { Playlist } from "../types/interfaces/Playlist"; import { Form } from "./Form"; import { Modal } from "./Modal"; @@ -25,7 +25,7 @@ interface ModalAddToPlaylistProps { video: CardVideo; } -export const ModalAddToPlaylist: React.FC = memo( +export const ModalAddToPlaylist: FC = memo( ({ opened, onClose, video }) => { const [selectedPlaylistTitle, setSelectedPlaylistTitle] = useState< string | null diff --git a/src/components/ModalDeleteCustomInstance.tsx b/src/components/ModalDeleteCustomInstance.tsx index 93ddbaf..0ec73e4 100644 --- a/src/components/ModalDeleteCustomInstance.tsx +++ b/src/components/ModalDeleteCustomInstance.tsx @@ -5,8 +5,8 @@ import { useTranslation } from "react-i18next"; import { db } from "../database"; import { useSetSettings, useSettings } from "../providers/Settings"; -import { CustomInstance } from "../types/interfaces/Instance"; -import { Settings } from "../types/interfaces/Settings"; +import type { CustomInstance } from "../types/interfaces/Instance"; +import type { Settings } from "../types/interfaces/Settings"; import { ButtonDeleteCustomInstance } from "./ButtonDeleteustomInstance"; import { Modal } from "./Modal"; diff --git a/src/components/ModalDeleteFromPlaylist.tsx b/src/components/ModalDeleteFromPlaylist.tsx index 7616dc5..3e183d4 100644 --- a/src/components/ModalDeleteFromPlaylist.tsx +++ b/src/components/ModalDeleteFromPlaylist.tsx @@ -1,14 +1,14 @@ import { Button, Flex, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { db } from "../database"; import { getPlaylist, getPlaylists } from "../database/utils"; import { useIsLocalPlaylist } from "../hooks/useIsLocalPlaylist"; import { useSetPlaylists } from "../providers/Playlist"; -import { CardVideo } from "../types/interfaces/Card"; -import { Playlist } from "../types/interfaces/Playlist"; +import type { CardVideo } from "../types/interfaces/Card"; +import type { Playlist } from "../types/interfaces/Playlist"; import { Modal } from "./Modal"; interface ModalDeleteFromPlaylistProps { @@ -17,8 +17,8 @@ interface ModalDeleteFromPlaylistProps { video: CardVideo; } -export const ModalDeleteFromPlaylist: React.FC = - memo(({ opened, onClose, video }) => { +export const ModalDeleteFromPlaylist: FC = memo( + ({ opened, onClose, video }) => { const setPlaylists = useSetPlaylists(); const { playlistId } = useIsLocalPlaylist(); const { t } = useTranslation(); @@ -86,4 +86,5 @@ export const ModalDeleteFromPlaylist: React.FC = ); - }); + }, +); diff --git a/src/components/ModalDeletePlaylist.tsx b/src/components/ModalDeletePlaylist.tsx index 3865a9e..a14dbb6 100644 --- a/src/components/ModalDeletePlaylist.tsx +++ b/src/components/ModalDeletePlaylist.tsx @@ -1,12 +1,12 @@ import { Button, Flex, Text } from "@mantine/core"; import { notifications } from "@mantine/notifications"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { db } from "../database"; import { getPlaylists } from "../database/utils"; import { useSetPlaylists } from "../providers/Playlist"; -import { CardPlaylist } from "../types/interfaces/Card"; +import type { CardPlaylist } from "../types/interfaces/Card"; import { Modal } from "./Modal"; interface ModalDeletePlaylistProps { @@ -15,7 +15,7 @@ interface ModalDeletePlaylistProps { playlist: CardPlaylist; } -export const ModalDeletePlaylist: React.FC = memo( +export const ModalDeletePlaylist: FC = memo( ({ opened, onClose, playlist }) => { const setPlaylists = useSetPlaylists(); const { t } = useTranslation(); diff --git a/src/components/ModalSyncData.tsx b/src/components/ModalSyncData.tsx index 821527e..e1d6d5f 100644 --- a/src/components/ModalSyncData.tsx +++ b/src/components/ModalSyncData.tsx @@ -1,6 +1,6 @@ import { Box, Button, Flex, Text, TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; -import { memo, useState } from "react"; +import { type FC, memo, useState } from "react"; import useDigitInput from "react-digit-input"; import { useTranslation } from "react-i18next"; import { useQuery } from "react-query"; @@ -13,7 +13,7 @@ import { import { getPlaylists } from "../database/utils"; import { useSetFavorite } from "../providers/Favorite"; import { useSetPlaylists } from "../providers/Playlist"; -import { Card, CardPlaylist } from "../types/interfaces/Card"; +import type { Card, CardPlaylist } from "../types/interfaces/Card"; import { Form } from "./Form"; import { Modal } from "./Modal"; import classes from "./ModalSyncData.module.css"; @@ -31,7 +31,7 @@ const syncData = async (code: string): Promise => { return data; }; -export const ModalSyncData: React.FC = memo( +export const ModalSyncData: FC = memo( ({ opened, onClose }) => { const [value, onChange] = useState(""); const { t } = useTranslation(); diff --git a/src/components/ModalUpdatePlaylist.tsx b/src/components/ModalUpdatePlaylist.tsx index 8f98c76..1cd94f0 100644 --- a/src/components/ModalUpdatePlaylist.tsx +++ b/src/components/ModalUpdatePlaylist.tsx @@ -1,13 +1,13 @@ import { Button, Flex, TextInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; -import { memo, useState } from "react"; +import { type FC, memo, useState } from "react"; import { useTranslation } from "react-i18next"; import { db } from "../database"; import { getPlaylists } from "../database/utils"; import { useSetPlaylists } from "../providers/Playlist"; -import { CardPlaylist } from "../types/interfaces/Card"; -import { Playlist } from "../types/interfaces/Playlist"; +import type { CardPlaylist } from "../types/interfaces/Card"; +import type { Playlist } from "../types/interfaces/Playlist"; import { Form } from "./Form"; import { Modal } from "./Modal"; @@ -17,7 +17,7 @@ interface ModalUpdatePlaylistProps { playlist: CardPlaylist; } -export const ModalUpdatePlaylist: React.FC = memo( +export const ModalUpdatePlaylist: FC = memo( ({ opened, onClose, playlist }) => { const [playlistTitle, setPlaylistTitle] = useState(playlist.title); const setPlaylists = useSetPlaylists(); diff --git a/src/components/ModalVideoIframeInformation.tsx b/src/components/ModalVideoIframeInformation.tsx index 43dc926..57ee724 100644 --- a/src/components/ModalVideoIframeInformation.tsx +++ b/src/components/ModalVideoIframeInformation.tsx @@ -1,5 +1,5 @@ import { Text, Title } from "@mantine/core"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { Modal } from "./Modal"; @@ -9,7 +9,7 @@ interface ModalVideoIframeInformationProps { onClose: () => void; } -export const ModalVideoIframeInformation: React.FC = +export const ModalVideoIframeInformation: FC = memo(({ opened, onClose }) => { const { t } = useTranslation(); diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx index 317ff84..8c5726d 100644 --- a/src/components/PageHeader.tsx +++ b/src/components/PageHeader.tsx @@ -1,14 +1,15 @@ import { Flex, Space, Title } from "@mantine/core"; +import type { FC, ReactNode } from "react"; import { ButtonHistoryBack } from "./ButtonHistoryBack"; interface PageHeaderProps { title: string; canGoBack?: boolean; - children?: React.ReactNode; + children?: ReactNode; } -export const PageHeader: React.FC = ({ +export const PageHeader: FC = ({ title, canGoBack = false, children, diff --git a/src/components/PlayerActions.tsx b/src/components/PlayerActions.tsx index ff3cd94..18ae6b3 100644 --- a/src/components/PlayerActions.tsx +++ b/src/components/PlayerActions.tsx @@ -1,11 +1,11 @@ -import { ActionIcon, ActionIconProps, Flex } from "@mantine/core"; +import { ActionIcon, type ActionIconProps, Flex } from "@mantine/core"; import { IconPlayerPause, IconPlayerPlay, IconPlayerTrackNext, IconPlayerTrackPrev, } from "@tabler/icons-react"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { usePlayVideo } from "../hooks/usePlayVideo"; @@ -18,7 +18,7 @@ interface PlayerActionsProps { showTrackNext?: boolean; } -export const PlayerActions: React.FC = memo( +export const PlayerActions: FC = memo( ({ showTrackPrevious = true, showTrackNext = true }) => { const playerMode = usePlayerMode(); const iconPlayPauseOnly = !showTrackPrevious && !showTrackNext; @@ -48,7 +48,7 @@ interface ButtonNextVideoProps extends ActionIconProps { iconSize?: number; } -export const ButtonPlayPause: React.FC = memo( +export const ButtonPlayPause: FC = memo( ({ size, radius, iconSize }) => { const playerState = usePlayerState(); const playerAudio = usePlayerAudio(); diff --git a/src/components/PlaylistCard.tsx b/src/components/PlaylistCard.tsx index 3cafba7..e4651ab 100644 --- a/src/components/PlaylistCard.tsx +++ b/src/components/PlaylistCard.tsx @@ -10,14 +10,14 @@ import { } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { IconCheck, IconPlayerPlay, IconPlus } from "@tabler/icons-react"; -import { FC, memo } from "react"; +import { type FC, memo } from "react"; import { db } from "../database"; import { getPlaylists } from "../database/utils"; import { usePlayPlaylist } from "../hooks/usePlayPlaylist"; import { useStableNavigate } from "../providers/Navigate"; import { usePlaylists, useSetPlaylists } from "../providers/Playlist"; -import { CardPlaylist, CardVideo } from "../types/interfaces/Card"; +import type { CardPlaylist, CardVideo } from "../types/interfaces/Card"; import { getThumbnailQuality } from "../utils/formatData"; import { ButtonFavorite } from "./ButtonFavorite"; import classes from "./PlaylistCard.module.css"; @@ -28,7 +28,7 @@ interface PlaylistCardProps { currentInstanceUri: string; } -export const PlaylistCard: React.FC = memo( +export const PlaylistCard: FC = memo( ({ playlist, currentInstanceUri }) => { const navigate = useStableNavigate(); @@ -117,7 +117,7 @@ interface VideosThumbnailProps { videoCount: number; } -const VideosThumbnail: React.FC = memo( +const VideosThumbnail: FC = memo( ({ domain, videos, videoCount }) => { const displayVideos = videos.slice(-4); const restOfVideosCount = videoCount - displayVideos.length; diff --git a/src/components/PlaylistCardMenu.tsx b/src/components/PlaylistCardMenu.tsx index ffd778e..e2ee160 100644 --- a/src/components/PlaylistCardMenu.tsx +++ b/src/components/PlaylistCardMenu.tsx @@ -1,9 +1,9 @@ import { ActionIcon, Menu } from "@mantine/core"; import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react"; -import { memo, useState } from "react"; +import { type FC, memo, useState } from "react"; import { useTranslation } from "react-i18next"; -import { CardPlaylist } from "../types/interfaces/Card"; +import type { CardPlaylist } from "../types/interfaces/Card"; import { ModalDeletePlaylist } from "./ModalDeletePlaylist"; import { ModalUpdatePlaylist } from "./ModalUpdatePlaylist"; @@ -11,7 +11,7 @@ interface PlaylistCardMenuProps { playlist: CardPlaylist; } -export const PlaylistCardMenu: React.FC = memo( +export const PlaylistCardMenu: FC = memo( ({ playlist }) => { const [menuOpened, setMenuOpened] = useState(false); const [modalUpdateOpened, setModalUpdateOpened] = useState(false); diff --git a/src/components/Popular.tsx b/src/components/Popular.tsx index 7257560..9dcd1fa 100644 --- a/src/components/Popular.tsx +++ b/src/components/Popular.tsx @@ -1,5 +1,5 @@ import { Alert, Text } from "@mantine/core"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { useQuery } from "react-query"; @@ -11,7 +11,7 @@ interface PopularProps { horizontal?: boolean; } -export const Popular: React.FC = memo(({ horizontal }) => { +export const Popular: FC = memo(({ horizontal }) => { const query = useQuery("most-popular", () => getPopuplars()); const { t } = useTranslation(); diff --git a/src/components/SearchFiltersMenu.tsx b/src/components/SearchFiltersMenu.tsx index 05bf6af..d112efd 100644 --- a/src/components/SearchFiltersMenu.tsx +++ b/src/components/SearchFiltersMenu.tsx @@ -4,7 +4,7 @@ import { memo } from "react"; import { useTranslation } from "react-i18next"; import { useSearchValues, useSetSearchValues } from "../providers/Search"; -import { +import type { SearchDate, SearchDuration, SearchService, diff --git a/src/components/SearchHistoryMenu.tsx b/src/components/SearchHistoryMenu.tsx index e98a273..abec8bc 100644 --- a/src/components/SearchHistoryMenu.tsx +++ b/src/components/SearchHistoryMenu.tsx @@ -1,13 +1,13 @@ import { Box, Button, Divider, Popover, Space } from "@mantine/core"; import { IconHistory } from "@tabler/icons-react"; -import { FC } from "react"; +import { type FC, type ReactNode } from "react"; import { getSearchHistory } from "../database/utils"; interface SearcHistoryMenuProps { opened: boolean; onSelect: (value: string) => void; - children: React.ReactNode; + children: ReactNode; } export const SearcHistoryMenu: FC = ({ diff --git a/src/components/SearchResult.tsx b/src/components/SearchResult.tsx index 79cdb42..b3829d9 100644 --- a/src/components/SearchResult.tsx +++ b/src/components/SearchResult.tsx @@ -6,7 +6,7 @@ import { useQuery } from "react-query"; import { useSearchValues } from "../providers/Search"; import { search } from "../services/search"; -import { Card } from "../types/interfaces/Card"; +import type { Card } from "../types/interfaces/Card"; import { CardList } from "./CardList"; export const SearchResult = memo(() => { diff --git a/src/components/SelectInvidiousInstance.tsx b/src/components/SelectInvidiousInstance.tsx index ff76640..57684de 100644 --- a/src/components/SelectInvidiousInstance.tsx +++ b/src/components/SelectInvidiousInstance.tsx @@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next"; import { db } from "../database"; import { useSetSettings, useSettings } from "../providers/Settings"; -import { Instance } from "../types/interfaces/Instance"; -import { Settings } from "../types/interfaces/Settings"; +import type { Instance } from "../types/interfaces/Instance"; +import type { Settings } from "../types/interfaces/Settings"; import { ModalAddCustomInstance } from "./ModalAddCustomInstance"; import { ModalDeleteCustomInstance } from "./ModalDeleteCustomInstance"; diff --git a/src/components/SponsorBlockBar.tsx b/src/components/SponsorBlockBar.tsx index 3cfdf26..745b71e 100644 --- a/src/components/SponsorBlockBar.tsx +++ b/src/components/SponsorBlockBar.tsx @@ -4,7 +4,7 @@ import { memo } from "react"; import { usePlayerState, usePlayerVideo } from "../providers/Player"; import { useSettings } from "../providers/Settings"; -import { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; +import type { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; import classes from "./SponsorBlockBar.module.css"; interface RangeSponsorBlockSegment extends SponsorBlockSegment { diff --git a/src/components/SponsorBlockSettings.tsx b/src/components/SponsorBlockSettings.tsx index e53f875..9c8ee21 100644 --- a/src/components/SponsorBlockSettings.tsx +++ b/src/components/SponsorBlockSettings.tsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"; import { db } from "../database"; import { useSetSettings, useSettings } from "../providers/Settings"; -import { Settings } from "../types/interfaces/Settings"; +import type { Settings } from "../types/interfaces/Settings"; export const sponsorBlockCategoriesValues = [ { diff --git a/src/components/SwitchVideoMode.tsx b/src/components/SwitchVideoMode.tsx index d1cff23..7de6277 100644 --- a/src/components/SwitchVideoMode.tsx +++ b/src/components/SwitchVideoMode.tsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"; import { db } from "../database"; import { useSetSettings, useSettings } from "../providers/Settings"; -import { Settings } from "../types/interfaces/Settings"; +import type { Settings } from "../types/interfaces/Settings"; export const SwitchVideoMode = memo(() => { const settings = useSettings(); diff --git a/src/components/TransferList.tsx b/src/components/TransferList.tsx index d589add..8db4914 100644 --- a/src/components/TransferList.tsx +++ b/src/components/TransferList.tsx @@ -9,7 +9,7 @@ import { useCombobox, } from "@mantine/core"; import { IconChevronRight } from "@tabler/icons-react"; -import { FC, memo, useState } from "react"; +import { type FC, memo, useState } from "react"; import { useTranslation } from "react-i18next"; import classes from "./TransferList.module.css"; diff --git a/src/components/Trending.tsx b/src/components/Trending.tsx index 44d68db..9ba2522 100644 --- a/src/components/Trending.tsx +++ b/src/components/Trending.tsx @@ -1,5 +1,5 @@ import { Alert, Text } from "@mantine/core"; -import { memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { useQuery } from "react-query"; @@ -12,42 +12,40 @@ interface TrendingProps { horizontal?: boolean; } -export const Trending: React.FC = memo( - ({ horizontal = false }) => { - const trendingFiltersValues = useTrendingFiltersValues(); - const query = useQuery( - `trending-${trendingFiltersValues.type}-${trendingFiltersValues.region}`, - () => getTrendings(trendingFiltersValues), - { - enabled: Boolean(trendingFiltersValues.region), - }, - ); - const { t } = useTranslation(); +export const Trending: FC = memo(({ horizontal = false }) => { + const trendingFiltersValues = useTrendingFiltersValues(); + const query = useQuery( + `trending-${trendingFiltersValues.type}-${trendingFiltersValues.region}`, + () => getTrendings(trendingFiltersValues), + { + enabled: Boolean(trendingFiltersValues.region), + }, + ); + const { t } = useTranslation(); - if (!query.data) { - return {t("loading")}; - } + if (!query.data) { + return {t("loading")}; + } - if (query.error) { - return {t("error")}; - } + if (query.error) { + return {t("error")}; + } - if (horizontal) { - if (!query.data.length) { - return ( - - {t("recently.play.alert.message")} - - ); - } + if (horizontal) { + if (!query.data.length) { return ( - + + {t("recently.play.alert.message")} + ); } + return ( + + ); + } - return ; - }, -); + return ; +}); diff --git a/src/components/VerticalSlider.tsx b/src/components/VerticalSlider.tsx index c71f512..71be795 100644 --- a/src/components/VerticalSlider.tsx +++ b/src/components/VerticalSlider.tsx @@ -1,6 +1,6 @@ import { Group } from "@mantine/core"; import { useMove } from "@mantine/hooks"; -import { memo, useState } from "react"; +import { type FC, memo, useState } from "react"; import classes from "./VerticalSlider.module.css"; @@ -9,7 +9,7 @@ interface VerticalSliderProps { onChangeEnd: (value: number) => void; } -export const VerticalSlider: React.FC = memo( +export const VerticalSlider: FC = memo( ({ value, onChangeEnd }) => { const [localValue, setLocalValue] = useState(0.2); const { ref } = useMove(({ y }) => handleChangeEnd(1 - y)); diff --git a/src/components/Video.tsx b/src/components/Video.tsx index 01214a6..88bf89d 100644 --- a/src/components/Video.tsx +++ b/src/components/Video.tsx @@ -8,12 +8,12 @@ import { } from "@mantine/core"; import { IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react"; import hexToRgba from "hex-to-rgba"; -import { FC, memo } from "react"; +import { type FC, memo } from "react"; import { usePlayVideo } from "../hooks/usePlayVideo"; import { usePlayerAudio, usePlayerVideo } from "../providers/Player"; import { useSettings } from "../providers/Settings"; -import { Video as VideoType } from "../types/interfaces/Video"; +import type { Video as VideoType } from "../types/interfaces/Video"; import { getThumbnailQuality } from "../utils/formatData"; import { Image } from "./Image"; import classes from "./Video.module.css"; @@ -23,77 +23,75 @@ interface VideoProps { withThumbnail?: boolean; } -export const Video: React.FC = memo( - ({ video, withThumbnail = true }) => { - const { video: playedVideo, primaryColor } = usePlayerVideo(); - const { handlePlay, loading } = usePlayVideo(); - const playerAudio = usePlayerAudio(); - const { currentInstance } = useSettings(); +export const Video: FC = memo(({ video, withThumbnail = true }) => { + const { video: playedVideo, primaryColor } = usePlayerVideo(); + const { handlePlay, loading } = usePlayVideo(); + const playerAudio = usePlayerAudio(); + const { currentInstance } = useSettings(); - const imageSrc = - video.thumbnail ?? getThumbnailQuality(video.videoThumbnails, "default"); + const imageSrc = + video.thumbnail ?? getThumbnailQuality(video.videoThumbnails, "default"); - console.log(imageSrc); + console.log(imageSrc); - const isPlaying = playedVideo?.videoId === video.videoId; + const isPlaying = playedVideo?.videoId === video.videoId; - const handleClick = () => { - if (isPlaying) { - // @ts-ignore - const audio = playerAudio?.current?.audioEl.current as HTMLAudioElement; - audio.pause(); - } else { - handlePlay(video.videoId); - } - }; + const handleClick = () => { + if (isPlaying) { + // @ts-ignore + const audio = playerAudio?.current?.audioEl.current as HTMLAudioElement; + audio.pause(); + } else { + handlePlay(video.videoId); + } + }; - return ( - handleClick()} style={{ width: "100%" }}> - - - - {withThumbnail ? ( - - - - ) : null} - - {isPlaying ? {video.title} : video.title} - - - {isPlaying ? null : ( - - {isPlaying ? ( - - ) : ( - - )} - - )} + return ( + handleClick()} style={{ width: "100%" }}> + + + + {withThumbnail ? ( + + + + ) : null} + + {isPlaying ? {video.title} : video.title} + - - ); - }, -); + {isPlaying ? null : ( + + {isPlaying ? ( + + ) : ( + + )} + + )} + + + ); +}); interface VideoThumbnailProps { src: string; diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx index a899480..9b9330b 100644 --- a/src/components/VideoCard.tsx +++ b/src/components/VideoCard.tsx @@ -14,7 +14,7 @@ import { IconPlayerPause, IconPlayerPlay, } from "@tabler/icons-react"; -import React, { FC, memo } from "react"; +import { type FC, memo } from "react"; import { useTranslation } from "react-i18next"; import { usePlayVideo } from "../hooks/usePlayVideo"; @@ -23,7 +23,7 @@ import { usePlayerState, usePlayerVideo, } from "../providers/Player"; -import { CardVideo } from "../types/interfaces/Card"; +import type { CardVideo } from "../types/interfaces/Card"; import { displayTimeBySeconds } from "../utils/displayTimeBySeconds"; import { getThumbnailQuality } from "../utils/formatData"; import { ButtonFavorite } from "./ButtonFavorite"; diff --git a/src/components/VideoIframe.tsx b/src/components/VideoIframe.tsx index f566c54..c3dd7dc 100644 --- a/src/components/VideoIframe.tsx +++ b/src/components/VideoIframe.tsx @@ -5,7 +5,7 @@ import { IconHandMove, IconInfoCircle, } from "@tabler/icons-react"; -import { memo, useCallback, useEffect, useMemo, useRef } from "react"; +import { type FC, memo, useCallback, useEffect, useMemo, useRef } from "react"; import videojs from "video.js"; import Player from "video.js/dist/types/player"; import "video.js/dist/video-js.css"; @@ -26,31 +26,29 @@ interface VideoIframeProps { height: number; } -export const VideoIframe: React.FC = memo( - ({ width, height }) => { - const { video } = usePlayerVideo(); - const playerState = usePlayerState(); +export const VideoIframe: FC = memo(({ width, height }) => { + const { video } = usePlayerVideo(); + const playerState = usePlayerState(); - if (!video) { - return null; - } + if (!video) { + return null; + } - return ( - - - - - - - ); - }, -); + return ( + + + + + + + ); +}); const Video = ({ loop, src }: { loop: boolean; src: string }) => { const videoRef = useRef(); diff --git a/src/components/VideoList.tsx b/src/components/VideoList.tsx index 577679a..57a4ad7 100644 --- a/src/components/VideoList.tsx +++ b/src/components/VideoList.tsx @@ -1,14 +1,14 @@ import { Box } from "@mantine/core"; -import { memo } from "react"; +import { type FC, memo } from "react"; -import { Video as VideoType } from "../types/interfaces/Video"; +import type { Video as VideoType } from "../types/interfaces/Video"; import { Video } from "./Video"; interface VideoListProps { videos: VideoType[]; } -export const VideoList: React.FC = memo(({ videos }) => { +export const VideoList: FC = memo(({ videos }) => { if (!videos) return null; return ( diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx index 1f64080..056d738 100644 --- a/src/components/VideoPlayer.tsx +++ b/src/components/VideoPlayer.tsx @@ -1,6 +1,6 @@ import { useMantineTheme } from "@mantine/core"; import { useMediaQuery } from "@mantine/hooks"; -import { MotionStyle, motion } from "framer-motion"; +import { type MotionStyle, motion } from "framer-motion"; import { memo, useMemo, useRef } from "react"; import { useVideoIframeVisibility } from "../providers/VideoIframeVisibility"; diff --git a/src/database/05092023_migrate_custom_instance.ts b/src/database/05092023_migrate_custom_instance.ts index 1eaf56e..8586c57 100644 --- a/src/database/05092023_migrate_custom_instance.ts +++ b/src/database/05092023_migrate_custom_instance.ts @@ -1,5 +1,5 @@ import { db } from "."; -import { Settings } from "../types/interfaces/Settings"; +import type { Settings } from "../types/interfaces/Settings"; const migration = () => { const settings = db.queryAll("settings", { query: { ID: 1 } })[0] as Settings; diff --git a/src/database/18102023_migrate_formate_storage_data.ts b/src/database/18102023_migrate_formate_storage_data.ts index 44b645d..ffe0dc4 100644 --- a/src/database/18102023_migrate_formate_storage_data.ts +++ b/src/database/18102023_migrate_formate_storage_data.ts @@ -1,6 +1,10 @@ import { db } from "."; -import { CardChannel, CardPlaylist, CardVideo } from "../types/interfaces/Card"; -import { FavoritePlaylist, Playlist } from "../types/interfaces/Playlist"; +import type { + CardChannel, + CardPlaylist, + CardVideo, +} from "../types/interfaces/Card"; +import type { FavoritePlaylist, Playlist } from "../types/interfaces/Playlist"; import { formatedCardChannel, formatedCardPlaylist, diff --git a/src/database/index.ts b/src/database/index.ts index 52c1dc2..f6ed7ad 100644 --- a/src/database/index.ts +++ b/src/database/index.ts @@ -3,7 +3,7 @@ import localStorageDB from "localstoragedb"; import { v4 as uuidv4 } from "uuid"; import { sponsorBlockCategoriesValues } from "../components/SponsorBlockSettings"; -import { Settings } from "../types/interfaces/Settings"; +import type { Settings } from "../types/interfaces/Settings"; const initDb = () => { const db = new localStorageDB("library", localStorage); diff --git a/src/database/migrations.ts b/src/database/migrations.ts index bd39976..3b57d8c 100644 --- a/src/database/migrations.ts +++ b/src/database/migrations.ts @@ -1,5 +1,5 @@ import { db } from "."; -import { Migration } from "../types/interfaces/Migration"; +import type { Migration } from "../types/interfaces/Migration"; const migrations = db.queryAll("migrations") as Migration[]; diff --git a/src/database/utils.ts b/src/database/utils.ts index 377e13f..6c6a4db 100644 --- a/src/database/utils.ts +++ b/src/database/utils.ts @@ -1,9 +1,9 @@ import { db } from "."; import { getCardId } from "../components/ButtonFavorite"; -import { Card, CardPlaylist, CardVideo } from "../types/interfaces/Card"; -import { FavoritePlaylist, Playlist } from "../types/interfaces/Playlist"; -import { SearchHistory } from "../types/interfaces/Search"; -import { Settings } from "../types/interfaces/Settings"; +import type { Card, CardPlaylist, CardVideo } from "../types/interfaces/Card"; +import type { FavoritePlaylist, Playlist } from "../types/interfaces/Playlist"; +import type { SearchHistory } from "../types/interfaces/Search"; +import type { Settings } from "../types/interfaces/Settings"; export const getSettings = (): Settings => { return db.queryAll("settings", { query: { ID: 1 } })[0]; diff --git a/src/hooks/useGetChannel.ts b/src/hooks/useGetChannel.ts index fb43b89..779fb31 100644 --- a/src/hooks/useGetChannel.ts +++ b/src/hooks/useGetChannel.ts @@ -3,7 +3,7 @@ import { useEffect, useState } from "react"; import { queryClient } from "../queryClient"; import { getChannel } from "../services/channel"; -import { Channel } from "../types/interfaces/Channel"; +import type { Channel } from "../types/interfaces/Channel"; export const useGetChannel = (authorId: string) => { const [channel, setChannel] = useState(null); diff --git a/src/hooks/useGetPlaylist.ts b/src/hooks/useGetPlaylist.ts index 3a6ba2d..5316d53 100644 --- a/src/hooks/useGetPlaylist.ts +++ b/src/hooks/useGetPlaylist.ts @@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from "react"; import { usePlaylists } from "../providers/Playlist"; import { queryClient } from "../queryClient"; import { getPlaylist } from "../services/playlist"; -import { Playlist } from "../types/interfaces/Playlist"; +import type { Playlist } from "../types/interfaces/Playlist"; export const useGetPlaylist = (playlistId: string | number) => { const playlists = usePlaylists(); diff --git a/src/hooks/usePaginateData.ts b/src/hooks/usePaginateData.ts index 8e03314..d69eff6 100644 --- a/src/hooks/usePaginateData.ts +++ b/src/hooks/usePaginateData.ts @@ -2,7 +2,7 @@ import chunk from "lodash/chunk"; import { useEffect, useState } from "react"; import { useInView } from "react-intersection-observer"; -import { Card } from "../types/interfaces/Card"; +import type { Card } from "../types/interfaces/Card"; export const usePaginateData = (cards: Card[]) => { const chunkedData = chunk(cards, 10); diff --git a/src/hooks/usePlayPlaylist.ts b/src/hooks/usePlayPlaylist.ts index b494e9b..b168f20 100644 --- a/src/hooks/usePlayPlaylist.ts +++ b/src/hooks/usePlayPlaylist.ts @@ -3,7 +3,7 @@ import { useState } from "react"; import { getPlaylist as getLocalPlaylist } from "../database/utils"; import { getPlaylist as getRemotePlaylist } from "../services/playlist"; -import { Video } from "../types/interfaces/Video"; +import type { Video } from "../types/interfaces/Video"; import { usePlayVideo } from "./usePlayVideo"; export const usePlayPlaylist = () => { diff --git a/src/hooks/usePlayVideo.ts b/src/hooks/usePlayVideo.ts index 276e2fe..ecb5ba2 100644 --- a/src/hooks/usePlayVideo.ts +++ b/src/hooks/usePlayVideo.ts @@ -13,7 +13,7 @@ import { useSetPreviousNextVideos } from "../providers/PreviousNextTrack"; import { useSettings } from "../providers/Settings"; import { getSponsorBlockSegments } from "../services/sponsor-block"; import { getVideo } from "../services/video"; -import { Video, VideoThumbnail } from "../types/interfaces/Video"; +import type { Video, VideoThumbnail } from "../types/interfaces/Video"; import { colorExtractor } from "../utils/colorExtractor"; import { useResolveVideosPlaylist } from "./useResolveVideosPlaylist"; diff --git a/src/hooks/useResolveVideosPlaylist.ts b/src/hooks/useResolveVideosPlaylist.ts index a08e98a..57d6c08 100644 --- a/src/hooks/useResolveVideosPlaylist.ts +++ b/src/hooks/useResolveVideosPlaylist.ts @@ -5,8 +5,8 @@ import { getPlaylist as getLocalPlaylist, } from "../database/utils"; import { queryClient } from "../queryClient"; -import { Playlist } from "../types/interfaces/Playlist"; -import { Video } from "../types/interfaces/Video"; +import type { Playlist } from "../types/interfaces/Playlist"; +import type { Video } from "../types/interfaces/Video"; export const useResolveVideosPlaylist = () => { const location = useLocation(); diff --git a/src/hooks/useSponsorBlock.ts b/src/hooks/useSponsorBlock.ts index 154eff9..02a53a0 100644 --- a/src/hooks/useSponsorBlock.ts +++ b/src/hooks/useSponsorBlock.ts @@ -5,7 +5,7 @@ import { usePlayerState, usePlayerVideo, } from "../providers/Player"; -import { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; +import type { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; const inRange = (num: number, min: number, max: number) => num >= min && num <= max; diff --git a/src/pages/ChannelDetail.tsx b/src/pages/ChannelDetail.tsx index f8f8938..89293cd 100644 --- a/src/pages/ChannelDetail.tsx +++ b/src/pages/ChannelDetail.tsx @@ -1,6 +1,6 @@ import { LoadingOverlay, Paper, Tabs } from "@mantine/core"; import { IconPlaylist, IconVideo } from "@tabler/icons-react"; -import { memo, useEffect, useState } from "react"; +import { type FC, memo, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { useInView } from "react-intersection-observer"; import { useQuery } from "react-query"; @@ -59,7 +59,7 @@ interface PaginateDataListProps { hasNextPage?: boolean; } -const PaginateDataList: React.FC = memo( +const PaginateDataList: FC = memo( ({ queryKey, fetcher, onSuccess, hasNextPage }) => { const { ref, inView } = useInView(); const [page, setPage] = useState(1); diff --git a/src/pages/PlaylistDetail.tsx b/src/pages/PlaylistDetail.tsx index c7fffad..4c8168c 100644 --- a/src/pages/PlaylistDetail.tsx +++ b/src/pages/PlaylistDetail.tsx @@ -6,7 +6,7 @@ import { CardList } from "../components/CardList"; import { PageHeader } from "../components/PageHeader"; import { useGetPlaylist } from "../hooks/useGetPlaylist"; import { useIsLocalPlaylist } from "../hooks/useIsLocalPlaylist"; -import { CardVideo } from "../types/interfaces/Card"; +import type { CardVideo } from "../types/interfaces/Card"; export const PlaylistDetailPage = memo(() => { return ( diff --git a/src/providers/Favorite.tsx b/src/providers/Favorite.tsx index f59c1a2..f26a2b4 100644 --- a/src/providers/Favorite.tsx +++ b/src/providers/Favorite.tsx @@ -1,6 +1,8 @@ import { - FC, - PropsWithChildren, + type Dispatch, + type FC, + type PropsWithChildren, + type SetStateAction, createContext, useContext, useMemo, @@ -8,12 +10,12 @@ import { } from "react"; import { getFavoritePlaylist } from "../database/utils"; -import { FavoritePlaylist } from "../types/interfaces/Playlist"; +import type { FavoritePlaylist } from "../types/interfaces/Playlist"; // @ts-ignore const FavoriteContext = createContext({}); const SetFavoriteContext = createContext< - React.Dispatch> + Dispatch> >(() => {}); export const FavoriteProvider: FC = ({ children }) => { diff --git a/src/providers/History.tsx b/src/providers/History.tsx index 5abd6c7..f848dd2 100644 --- a/src/providers/History.tsx +++ b/src/providers/History.tsx @@ -1,6 +1,6 @@ import { - FC, - PropsWithChildren, + type FC, + type PropsWithChildren, createContext, useCallback, useContext, @@ -10,8 +10,8 @@ import { import { db } from "../database"; import { getVideosHistory } from "../database/utils"; -import { CardVideo } from "../types/interfaces/Card"; -import { Video } from "../types/interfaces/Video"; +import type { CardVideo } from "../types/interfaces/Card"; +import type { Video } from "../types/interfaces/Video"; import { formatedCardVideo } from "../utils/formatData"; const HistoryContext = createContext([]); diff --git a/src/providers/Mantine.tsx b/src/providers/Mantine.tsx index 88e3080..ed88432 100644 --- a/src/providers/Mantine.tsx +++ b/src/providers/Mantine.tsx @@ -1,5 +1,5 @@ import { MantineProvider as Provider } from "@mantine/core"; -import { FC, PropsWithChildren } from "react"; +import type { FC, PropsWithChildren } from "react"; export const MantineProvider: FC = ({ children }) => { return ( diff --git a/src/providers/Navigate.tsx b/src/providers/Navigate.tsx index 210f8a1..30db979 100644 --- a/src/providers/Navigate.tsx +++ b/src/providers/Navigate.tsx @@ -1,12 +1,12 @@ import { - FC, - MutableRefObject, - PropsWithChildren, + type FC, + type MutableRefObject, + type PropsWithChildren, createContext, useContext, useRef, } from "react"; -import { NavigateFunction, useNavigate } from "react-router-dom"; +import { type NavigateFunction, useNavigate } from "react-router-dom"; const StableNavigateContext = createContext | null>(null); diff --git a/src/providers/Player.tsx b/src/providers/Player.tsx index 1e113ad..fbf8708 100644 --- a/src/providers/Player.tsx +++ b/src/providers/Player.tsx @@ -1,8 +1,19 @@ -import { createContext, useContext, useMemo, useRef, useState } from "react"; +import { + type Dispatch, + type FC, + type MutableRefObject, + type PropsWithChildren, + type SetStateAction, + createContext, + useContext, + useMemo, + useRef, + useState, +} from "react"; -import { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; -import { Video } from "../types/interfaces/Video"; -import { ColorInfo } from "../utils/colorExtractor"; +import type { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; +import type { Video } from "../types/interfaces/Video"; +import type { ColorInfo } from "../utils/colorExtractor"; interface PlayerVideo { video: Video | null; @@ -44,27 +55,21 @@ export const initialPlayerState: PlayerState = { loading: true, }; -const PlayerAudioContext = createContext | null>( - null, -); +const PlayerAudioContext = createContext | null>(null); const PlayerUrlContext = createContext(null); const SetPlayerUrlContext = createContext< - React.Dispatch> + Dispatch> >(() => {}); const PlayerVideoContext = createContext(initialPlayerVideoState); const SetPlayerVideoContext = createContext< - React.Dispatch> + Dispatch> >(() => {}); const PlayerStateContext = createContext(initialPlayerState); const SetPlayerStateContext = createContext< - React.Dispatch> + Dispatch> >(() => {}); -interface PlayerProviderProps { - children: React.ReactNode; -} - -export const PlayerProvider: React.FC = ({ children }) => { +export const PlayerProvider: FC = ({ children }) => { const [video, setVideo] = useState(initialPlayerVideoState); const [url, setUrl] = useState(null); const [playerStatus, setPlayerStatus] = diff --git a/src/providers/PlayerMode.tsx b/src/providers/PlayerMode.tsx index ca4049f..2531ea5 100644 --- a/src/providers/PlayerMode.tsx +++ b/src/providers/PlayerMode.tsx @@ -1,4 +1,11 @@ -import { createContext, useContext, useMemo, useState } from "react"; +import { + type FC, + type PropsWithChildren, + createContext, + useContext, + useMemo, + useState, +} from "react"; export type PlayerMode = "audio" | "video"; @@ -7,13 +14,7 @@ const SetPlayerModeContext = createContext<(mode: PlayerMode) => void>( () => {}, ); -interface PlayerModeProviderProps { - children: React.ReactNode; -} - -export const PlayerModeProvider: React.FC = ({ - children, -}) => { +export const PlayerModeProvider: FC = ({ children }) => { const [mode, setMode] = useState("audio"); const value = useMemo( diff --git a/src/providers/PlayerPlaylist.tsx b/src/providers/PlayerPlaylist.tsx index 23ce921..72433e0 100644 --- a/src/providers/PlayerPlaylist.tsx +++ b/src/providers/PlayerPlaylist.tsx @@ -1,19 +1,22 @@ -import { createContext, useContext, useMemo, useState } from "react"; +import { + type Dispatch, + type FC, + type PropsWithChildren, + type SetStateAction, + createContext, + useContext, + useMemo, + useState, +} from "react"; -import { Video } from "../types/interfaces/Video"; +import type { Video } from "../types/interfaces/Video"; const PlayerPlaylistContext = createContext([]); const SetPlayerPlaylistContext = createContext< - React.Dispatch> + Dispatch> >(() => {}); -interface PlayerPlaylistProviderProps { - children: React.ReactNode; -} - -export const PlayerPlaylistProvider: React.FC = ({ - children, -}) => { +export const PlayerPlaylistProvider: FC = ({ children }) => { const [videos, setVideos] = useState([]); const value = useMemo( diff --git a/src/providers/Playlist.tsx b/src/providers/Playlist.tsx index 016ea12..4e7cf55 100644 --- a/src/providers/Playlist.tsx +++ b/src/providers/Playlist.tsx @@ -1,6 +1,8 @@ import { - FC, - PropsWithChildren, + type Dispatch, + type FC, + type PropsWithChildren, + type SetStateAction, createContext, useContext, useMemo, @@ -8,12 +10,12 @@ import { } from "react"; import { getPlaylists } from "../database/utils"; -import { Playlist } from "../types/interfaces/Playlist"; +import type { Playlist } from "../types/interfaces/Playlist"; const PlaylistContext = createContext([]); -const SetPlaylistContext = createContext< - React.Dispatch> ->(() => {}); +const SetPlaylistContext = createContext>>( + () => {}, +); export const PlaylistProvider: FC = ({ children }) => { const [playlists, setPlaylists] = useState(getPlaylists()); diff --git a/src/providers/PreviousNextTrack.tsx b/src/providers/PreviousNextTrack.tsx index ef8a38f..23bff45 100644 --- a/src/providers/PreviousNextTrack.tsx +++ b/src/providers/PreviousNextTrack.tsx @@ -1,4 +1,13 @@ -import { createContext, useContext, useMemo, useState } from "react"; +import { + type Dispatch, + type FC, + type PropsWithChildren, + type SetStateAction, + createContext, + useContext, + useMemo, + useState, +} from "react"; type VideosIds = { previousVideoId: string | null; @@ -14,20 +23,16 @@ const PreviousNextVideosContext = createContext<{ }, }); const SetPreviousNextVideosContext = createContext< - React.Dispatch< - React.SetStateAction<{ + Dispatch< + SetStateAction<{ videosIds: VideosIds; }> > >(() => {}); -interface PreviousNextTrackProviderProps { - children: React.ReactNode; -} - -export const PreviousNextTrackProvider: React.FC< - PreviousNextTrackProviderProps -> = ({ children }) => { +export const PreviousNextTrackProvider: FC = ({ + children, +}) => { const [videosIds, setPreviousVideoId] = useState<{ videosIds: VideosIds; }>({ diff --git a/src/providers/Search.tsx b/src/providers/Search.tsx index 44e1880..ab79b5c 100644 --- a/src/providers/Search.tsx +++ b/src/providers/Search.tsx @@ -1,7 +1,14 @@ import qs from "qs"; -import { createContext, useContext, useMemo, useState } from "react"; - import { + type FC, + type PropsWithChildren, + createContext, + useContext, + useMemo, + useState, +} from "react"; + +import type { Search, SearchDate, SearchDuration, @@ -23,10 +30,6 @@ const initialState: Search = { const SearchValueContext = createContext(initialState); const SetSearchValueContext = createContext(null); -interface SearchProviderrProps { - children: React.ReactNode; -} - const getSearchParams = () => { const urlParams = new URLSearchParams(window.location.search); return { @@ -40,9 +43,7 @@ const getSearchParams = () => { }; }; -export const SearchProvider: React.FC = ({ - children, -}) => { +export const SearchProvider: FC = ({ children }) => { const [value, setValue] = useState(getSearchParams()); const params = useMemo( diff --git a/src/providers/Settings.tsx b/src/providers/Settings.tsx index 7f17ec4..65252c6 100644 --- a/src/providers/Settings.tsx +++ b/src/providers/Settings.tsx @@ -1,4 +1,8 @@ import { + type Dispatch, + type FC, + type PropsWithChildren, + type SetStateAction, createContext, useCallback, useContext, @@ -13,20 +17,14 @@ import { fetchInvidiousInstances, filterAndParseInstances, } from "../services/instances"; -import { Settings } from "../types/interfaces/Settings"; +import type { Settings } from "../types/interfaces/Settings"; const SettingsContext = createContext>; + setSettings: Dispatch>; }>(null); -interface SettingsProviderProps { - children: React.ReactNode; -} - -export const SettingsProvider: React.FC = ({ - children, -}) => { +export const SettingsProvider: FC = ({ children }) => { const [settings, setSettings] = useState({ ...getSettings(), instances: [], @@ -95,8 +93,8 @@ export const SettingsProvider: React.FC = ({ export const useSettings = () => useContext(SettingsContext)?.settings as Settings; export const useSetSettings = () => - useContext(SettingsContext)?.setSettings as React.Dispatch< - React.SetStateAction + useContext(SettingsContext)?.setSettings as Dispatch< + SetStateAction >; const generateRandomInteger = (min = 1, max: number) => diff --git a/src/providers/Spotlight.tsx b/src/providers/Spotlight.tsx index e6f275b..5c2244c 100644 --- a/src/providers/Spotlight.tsx +++ b/src/providers/Spotlight.tsx @@ -1,4 +1,4 @@ -import { Spotlight, SpotlightActionData } from "@mantine/spotlight"; +import { Spotlight, type SpotlightActionData } from "@mantine/spotlight"; import { IconHeart, IconHistory, @@ -8,7 +8,13 @@ import { IconTrendingUp, IconUsers, } from "@tabler/icons-react"; -import { FC, PropsWithChildren, useCallback, useMemo, useState } from "react"; +import { + type FC, + type PropsWithChildren, + useCallback, + useMemo, + useState, +} from "react"; import { useStableNavigate } from "./Navigate"; import { useSearchValues, useSetSearchValues } from "./Search"; diff --git a/src/providers/TrendingFilters.tsx b/src/providers/TrendingFilters.tsx index 7cbb3ed..c0d4737 100644 --- a/src/providers/TrendingFilters.tsx +++ b/src/providers/TrendingFilters.tsx @@ -1,5 +1,7 @@ import qs from "qs"; import { + type FC, + type PropsWithChildren, createContext, useCallback, useContext, @@ -8,7 +10,7 @@ import { } from "react"; import { useQuery } from "react-query"; -import { TrendingFilterType } from "../components/TrendingFilters"; +import type { TrendingFilterType } from "../components/TrendingFilters"; import { useStableNavigate } from "./Navigate"; export interface TrendingFilters { @@ -25,10 +27,6 @@ const TrendingFiltersValuesContext = createContext(initialState); const SetTrendingFiltersValuesContext = createContext(null); -interface ProviderProps { - children: React.ReactNode; -} - const getInitialParams = () => { const urlParams = new URLSearchParams(window.location.search); return { @@ -51,7 +49,7 @@ interface GeoLocation { region: string; } -export const TrendingFiltersProvider: React.FC = ({ +export const TrendingFiltersProvider: FC = ({ children, }) => { const [value, setValue] = useState(getInitialParams()); diff --git a/src/providers/VideoIframeVisibility.tsx b/src/providers/VideoIframeVisibility.tsx index 2a70c3f..6c6d20e 100644 --- a/src/providers/VideoIframeVisibility.tsx +++ b/src/providers/VideoIframeVisibility.tsx @@ -1,17 +1,20 @@ -import { createContext, useContext, useMemo, useState } from "react"; +import { + type FC, + type PropsWithChildren, + createContext, + useContext, + useMemo, + useState, +} from "react"; const VideoIframeVisibilityContext = createContext(true); const SetVideoIframeVisibilityContext = createContext<(value: boolean) => void>( () => {}, ); -interface VideoIframeVisibilityProviderProps { - children: React.ReactNode; -} - -export const VideoIframeVisibilityProvider: React.FC< - VideoIframeVisibilityProviderProps -> = ({ children }) => { +export const VideoIframeVisibilityProvider: FC = ({ + children, +}) => { const [visible, setVisible] = useState(true); const value = useMemo(() => ({ visible, setVisible }), [visible, setVisible]); diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts index 5fa3583..ad7f32f 100644 --- a/src/reportWebVitals.ts +++ b/src/reportWebVitals.ts @@ -1,4 +1,4 @@ -import { ReportHandler } from "web-vitals"; +import type { ReportHandler } from "web-vitals"; const reportWebVitals = (onPerfEntry?: ReportHandler) => { if (onPerfEntry && onPerfEntry instanceof Function) { diff --git a/src/services/channel.ts b/src/services/channel.ts index fbf157f..99ddf6a 100644 --- a/src/services/channel.ts +++ b/src/services/channel.ts @@ -1,8 +1,8 @@ import qs from "qs"; -import { Channel } from "../types/interfaces/Channel"; -import { Playlist } from "../types/interfaces/Playlist"; -import { Video } from "../types/interfaces/Video"; +import type { Channel } from "../types/interfaces/Channel"; +import type { Playlist } from "../types/interfaces/Playlist"; +import type { Video } from "../types/interfaces/Video"; import { getCurrentInstance } from "../utils/getCurrentInstance"; export const getChannel = async (authorId: string): Promise => { diff --git a/src/services/instances.ts b/src/services/instances.ts index ffa2593..a6e82e2 100644 --- a/src/services/instances.ts +++ b/src/services/instances.ts @@ -1,4 +1,4 @@ -import { Instance } from "../types/interfaces/Instance"; +import type { Instance } from "../types/interfaces/Instance"; export const fetchInvidiousInstances = async () => { const request = await fetch("https://api.invidious.io/instances.json"); diff --git a/src/services/playlist.ts b/src/services/playlist.ts index 76c86c0..6297589 100644 --- a/src/services/playlist.ts +++ b/src/services/playlist.ts @@ -1,4 +1,4 @@ -import { Playlist } from "../types/interfaces/Playlist"; +import type { Playlist } from "../types/interfaces/Playlist"; import { getCurrentInstance } from "../utils/getCurrentInstance"; export const getPlaylist = async (playlistId: string): Promise => { diff --git a/src/services/popular.ts b/src/services/popular.ts index e4bedf5..d900a21 100644 --- a/src/services/popular.ts +++ b/src/services/popular.ts @@ -1,4 +1,4 @@ -import { CardVideo } from "../types/interfaces/Card"; +import type { CardVideo } from "../types/interfaces/Card"; import { getCurrentInstance } from "../utils/getCurrentInstance"; export const getPopuplars = async (): Promise => { diff --git a/src/services/search.ts b/src/services/search.ts index f8b1e55..b2fb6ff 100644 --- a/src/services/search.ts +++ b/src/services/search.ts @@ -1,7 +1,7 @@ import qs from "qs"; -import { Card } from "../types/interfaces/Card"; -import { Search } from "../types/interfaces/Search"; +import type { Card } from "../types/interfaces/Card"; +import type { Search } from "../types/interfaces/Search"; import { getCurrentInstance } from "../utils/getCurrentInstance"; interface SearchParams extends Search { diff --git a/src/services/sponsor-block.ts b/src/services/sponsor-block.ts index e65d272..6e440c9 100644 --- a/src/services/sponsor-block.ts +++ b/src/services/sponsor-block.ts @@ -1,5 +1,5 @@ import { getSettings } from "../database/utils"; -import { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; +import type { SponsorBlockSegment } from "../types/interfaces/SponsorBlock"; interface Data { segments: SponsorBlockSegment[]; diff --git a/src/services/trending.ts b/src/services/trending.ts index 968581f..275df29 100644 --- a/src/services/trending.ts +++ b/src/services/trending.ts @@ -1,7 +1,7 @@ import qs from "qs"; -import { TrendingFilters } from "../providers/TrendingFilters"; -import { CardVideo } from "../types/interfaces/Card"; +import type { TrendingFilters } from "../providers/TrendingFilters"; +import type { CardVideo } from "../types/interfaces/Card"; import { getCurrentInstance } from "../utils/getCurrentInstance"; export const getTrendings = async ( diff --git a/src/services/video.ts b/src/services/video.ts index 61fdec1..c030632 100644 --- a/src/services/video.ts +++ b/src/services/video.ts @@ -1,5 +1,5 @@ import { getSettings } from "../database/utils"; -import { AdaptiveFormat, Video } from "../types/interfaces/Video"; +import type { AdaptiveFormat, Video } from "../types/interfaces/Video"; export const getVideo = async ( videoId: string, diff --git a/src/types/interfaces/Card.ts b/src/types/interfaces/Card.ts index 972286a..df8b8fd 100644 --- a/src/types/interfaces/Card.ts +++ b/src/types/interfaces/Card.ts @@ -1,4 +1,4 @@ -import { VideoThumbnail as Thumbnail } from "./Video"; +import type { VideoThumbnail as Thumbnail } from "./Video"; export type CardVideoTypes = "video" | "livestream" | "scheduled"; diff --git a/src/types/interfaces/Channel.ts b/src/types/interfaces/Channel.ts index 311491d..24cc169 100644 --- a/src/types/interfaces/Channel.ts +++ b/src/types/interfaces/Channel.ts @@ -1,4 +1,4 @@ -import { VideoThumbnail } from "./Video"; +import type { VideoThumbnail } from "./Video"; export interface Channel { type: "channel"; diff --git a/src/types/interfaces/Playlist.ts b/src/types/interfaces/Playlist.ts index ad8be52..651e837 100644 --- a/src/types/interfaces/Playlist.ts +++ b/src/types/interfaces/Playlist.ts @@ -1,5 +1,5 @@ -import { Card } from "./Card"; -import { Video } from "./Video"; +import type { Card } from "./Card"; +import type { Video } from "./Video"; export interface Playlist { type: "playlist"; diff --git a/src/types/interfaces/Settings.ts b/src/types/interfaces/Settings.ts index 0ef3e52..82566e6 100644 --- a/src/types/interfaces/Settings.ts +++ b/src/types/interfaces/Settings.ts @@ -1,4 +1,4 @@ -import { Instance } from "./Instance"; +import type { Instance } from "./Instance"; export interface Settings { instances: Instance[]; diff --git a/src/utils/cleanVideoThumbnailsUrl.ts b/src/utils/cleanVideoThumbnailsUrl.ts index 9dc6572..b030472 100644 --- a/src/utils/cleanVideoThumbnailsUrl.ts +++ b/src/utils/cleanVideoThumbnailsUrl.ts @@ -1,4 +1,4 @@ -import { Video } from "../types/interfaces/Video"; +import type { Video } from "../types/interfaces/Video"; import { getThumbnailQuality } from "./formatData"; const DOMAIN_REGEX = diff --git a/src/utils/formatData.ts b/src/utils/formatData.ts index af7fd55..df76270 100644 --- a/src/utils/formatData.ts +++ b/src/utils/formatData.ts @@ -1,13 +1,13 @@ -import { +import type { CardChannel, CardPlaylist, CardPlaylistVideo, CardVideo, CardVideoTypes, } from "../types/interfaces/Card"; -import { Channel } from "../types/interfaces/Channel"; -import { Playlist } from "../types/interfaces/Playlist"; -import { +import type { Channel } from "../types/interfaces/Channel"; +import type { Playlist } from "../types/interfaces/Playlist"; +import type { ThumbnailQualityTypes, Video, VideoThumbnail, diff --git a/src/utils/getCurrentInstance.ts b/src/utils/getCurrentInstance.ts index afc531e..4ec0c7d 100644 --- a/src/utils/getCurrentInstance.ts +++ b/src/utils/getCurrentInstance.ts @@ -1,5 +1,5 @@ import { getSettings } from "../database/utils"; -import { Instance } from "../types/interfaces/Instance"; +import type { Instance } from "../types/interfaces/Instance"; export const getCurrentInstance = (): Instance => { const settings = getSettings(); diff --git a/tsconfig.json b/tsconfig.json index d51be21..815968a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,11 @@ { "compilerOptions": { - "target": "es2021", + "target": "es2022", "lib": [ "dom", "dom.iterable", - "esnext" + "esnext", + "es2022" ], "allowJs": true, "skipLibCheck": true, @@ -13,12 +14,13 @@ "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, - "module": "esnext", + "module": "es2022", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "verbatimModuleSyntax": true, }, "include": [ "src"