chore: upgrade TypeScript version

stephane-r · Oct 24, 2023 · 414e7f4 · 414e7f4
1 parent 381d631
commit 414e7f4
Show file tree

Hide file tree

Showing 97 changed files with 526 additions and 515 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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<ButtonDownloadProps> = memo(
-  ({ iconSize }) => {
-    const { video } = usePlayerVideo();
-    const playerUrl = usePlayerUrl();
-    const { t } = useTranslation();
+export const ButtonDownload: FC<ButtonDownloadProps> = 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 (
-      <Menu>
-        <Menu.Target>
-          <ActionIcon color="transparent" title={t("download.sound")}>
-            <IconDownload size={iconSize} />
-          </ActionIcon>
-        </Menu.Target>
-        <Menu.Dropdown mah={400} style={{ overflow: "auto" }}>
-          {video.adaptiveFormats.map((format) => (
-            <Menu.Item key={format.type} onClick={() => handleDownload()}>
-              <span>
-                {format.type
-                  .replace(";", ",")
-                  .replace('="', ": ")
-                  .replace('"', "")}
-              </span>
-            </Menu.Item>
-          ))}
-        </Menu.Dropdown>
-      </Menu>
-    );
-  },
-);
+  return (
+    <Menu>
+      <Menu.Target>
+        <ActionIcon color="transparent" title={t("download.sound")}>
+          <IconDownload size={iconSize} />
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown mah={400} style={{ overflow: "auto" }}>
+        {video.adaptiveFormats.map((format) => (
+          <Menu.Item key={format.type} onClick={() => handleDownload()}>
+            <span>
+              {format.type
+                .replace(";", ",")
+                .replace('="', ": ")
+                .replace('"', "")}
+            </span>
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+});
diff --git 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<ButtonFavoriteProps> = memo(
+export const ButtonFavorite: FC<ButtonFavoriteProps> = memo(
   ({
     card: parentCard,
     iconSize = 18,

diff --git 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<ButtonPlayerModeVideoProps> = memo(
+export const ButtonPlayerModeVideo: FC<ButtonPlayerModeVideoProps> = memo(
   ({ iconSize, render = "button" }) => {
     const setPlayerMode = useSetPlayerMode();
     const playerMode = usePlayerMode();

diff --git 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<ButtonRepeatProps> = memo(
-  ({ iconSize }) => {
-    const playerState = usePlayerState();
-    const playerAudio = usePlayerAudio();
-    const setPlayerState = useSetPlayerState();
+export const ButtonRepeat: FC<ButtonRepeatProps> = 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 (
-      <ActionIcon color="transparent" onClick={handleClick} title="Repeat">
-        {playerState.repeat ? (
-          <IconRepeatOnce size={iconSize ?? undefined} />
-        ) : (
-          <IconRepeat size={iconSize ?? undefined} />
-        )}
-      </ActionIcon>
-    );
-  },
-);
+  return (
+    <ActionIcon color="transparent" onClick={handleClick} title="Repeat">
+      {playerState.repeat ? (
+        <IconRepeatOnce size={iconSize ?? undefined} />
+      ) : (
+        <IconRepeat size={iconSize ?? undefined} />
+      )}
+    </ActionIcon>
+  );
+});
diff --git a/src/components/ButtonShare.tsx b/src/components/ButtonShare.tsx
@@ -7,74 +7,72 @@ 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";
 
 interface ButtonDownloadProps {
   iconSize?: number;
 }
 
-export const ButtonShare: React.FC<ButtonDownloadProps> = memo(
-  ({ iconSize }) => {
-    const { video } = usePlayerVideo() as { video: Video };
-    const clipboard = useClipboard();
-    const settings = useSettings();
-    const { t } = useTranslation();
+export const ButtonShare: FC<ButtonDownloadProps> = 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 (
-      <Menu shadow="md" width={220}>
-        <Menu.Target>
-          <ActionIcon color="transparent" title={t("button.share.video")}>
-            <IconShare size={iconSize} />
-          </ActionIcon>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Label>{t("share.title")}</Menu.Label>
-          <Menu.Item
-            onClick={() => handleClick("holoplay")}
-            leftSection={<IconCopy size={18} />}
-          >
-            {t("share.holoplay.link")}
-          </Menu.Item>
-          <Menu.Item
-            onClick={() => handleClick("invidious")}
-            leftSection={<IconPlayerPlay size={18} />}
-          >
-            {t("share.invidious.link")}
-          </Menu.Item>
-          <Menu.Item
-            onClick={() => handleClick("youtube")}
-            leftSection={<IconBrandYoutube size={18} />}
-          >
-            {t("share.youtube.link")}
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    );
-  },
-);
+  return (
+    <Menu shadow="md" width={220}>
+      <Menu.Target>
+        <ActionIcon color="transparent" title={t("button.share.video")}>
+          <IconShare size={iconSize} />
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Label>{t("share.title")}</Menu.Label>
+        <Menu.Item
+          onClick={() => handleClick("holoplay")}
+          leftSection={<IconCopy size={18} />}
+        >
+          {t("share.holoplay.link")}
+        </Menu.Item>
+        <Menu.Item
+          onClick={() => handleClick("invidious")}
+          leftSection={<IconPlayerPlay size={18} />}
+        >
+          {t("share.invidious.link")}
+        </Menu.Item>
+        <Menu.Item
+          onClick={() => handleClick("youtube")}
+          leftSection={<IconBrandYoutube size={18} />}
+        >
+          {t("share.youtube.link")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+});