improve: player error message, episode card component

BGmi · Apr 28, 2024 · ec48048 · ec48048
1 parent 3382fb0
commit ec48048
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 25 deletions.
diff --git a/src/components/video-player/episode-card.tsx b/src/components/video-player/episode-card.tsx
@@ -1,35 +1,28 @@
 import type { BoxProps } from '@chakra-ui/react';
 import { Box, Button, Grid, GridItem, Text } from '@chakra-ui/react';
 
-import { FallbackEpisodeCard } from '../fallback';
-
 import { useColorMode } from '~/hooks/use-color-mode';
 import { useWatchHistory } from '~/hooks/use-watch-history';
 
 interface Props {
-  setPlayState: (url: string) => void;
-  bangumiData:
-    | {
-        totalEpisode: string[];
-        playUrl: Record<string, Record<(string & {}) | 'path', string> | undefined>;
-        bangumiName: string;
-      }
-    | undefined;
+  setPlayState: () => void;
+  bangumiData: {
+    totalEpisode: string[];
+    bangumiName: string;
+    currentEpisode: string;
+  };
 }
 
 export default function EpisodeCard({ setPlayState, bangumiData, ...props }: Props & BoxProps) {
   const { colorMode } = useColorMode();
   const [watchHistory, setWatchHistory] = useWatchHistory();
 
-  if (!bangumiData) return <FallbackEpisodeCard />;
-
   const bangumiName = bangumiData.bangumiName;
   const totalMark = watchHistory[bangumiName];
   const markBgColor = colorMode === 'dark' ? 'blackAlpha.400' : 'whiteAlpha.600';
 
-  const handlePlay = (url: string, episode: string) => {
-    setPlayState(url);
-
+  const handlePlay = (episode: string) => {
+    // 这里更新 current-watch 的 episode 时，会更新 /pages/player/[bangumi].tsx 的状态来切换播放的视频
     setWatchHistory({
       ...watchHistory,
       [bangumiName]: {
@@ -61,15 +54,21 @@ export default function EpisodeCard({ setPlayState, bangumiData, ...props }: Pro
       {...props}
     >
       <Text mb="4">选集</Text>
+      {bangumiData.totalEpisode.length === 0 && (
+        <Text fontSize="sm" opacity="75%">
+          暂无剧集
+        </Text>
+      )}
       <Grid templateColumns="repeat(auto-fill, minmax(3.75rem, 1fr))" gap={4}>
         {bangumiData.totalEpisode.map(episode => (
           <GridItem key={episode}>
             <Button
               px="7"
               maxW="16"
-              onClick={() => handlePlay(bangumiData.playUrl[episode]?.path ?? '', episode)}
+              onClick={() => handlePlay(episode)}
               fontSize="sm"
               bg={checkMark(episode) ? markBgColor : 'Background'}
+              isActive={bangumiData.currentEpisode === episode}
             >
               {episode}
             </Button>

diff --git a/src/components/video-player/index.tsx b/src/components/video-player/index.tsx
@@ -34,7 +34,17 @@ export default function VideoPlayer({ bangumiData, danmakuApi, episode }: Props)
 
   const { updateCurrentTime, getCurrentTime } = useVideoCurrentTime(bangumiData.bangumi_name);
 
-  const fileUrl = `./bangumi${bangumiData.player[episode].path}`;
+  const path = bangumiData.player[episode]?.path;
+  if (!path && !toast.isActive(episode))
+    toast({
+      title: '视频文件不存在',
+      status: 'error',
+      duration: 3000,
+      position: 'top-right',
+      id: episode,
+    });
+
+  const fileUrl = `./bangumi${path ?? ''}`;
   const fileType = fileUrl.split('.').pop();
 
   const dplayerOptions = useCallback(
@@ -61,12 +71,14 @@ export default function VideoPlayer({ bangumiData, danmakuApi, episode }: Props)
                   }
                 });
               } else {
-                toast({
-                  title: '浏览器不支持 Hls，建议使用最新版本的 Chrome 浏览器',
-                  status: 'error',
-                  duration: 3000,
-                  position: 'top-right',
-                });
+                if (!toast.isActive(`HlsError-${id}`))
+                  toast({
+                    title: '浏览器不支持 Hls，建议使用最新版本的 Chrome 浏览器',
+                    status: 'error',
+                    duration: 3000,
+                    position: 'top-right',
+                    id: `HlsError-${id}`,
+                  });
                 console.error('Hls is not supported');
               }
             },
@@ -96,10 +108,10 @@ export default function VideoPlayer({ bangumiData, danmakuApi, episode }: Props)
   const episodeCardProps = useMemo(
     () => ({
       totalEpisode: Object.keys(bangumiData.player),
-      playUrl: bangumiData.player, // { episode: "path": "/bangumi_file.mp4" }
       bangumiName: bangumiData.bangumi_name,
+      currentEpisode: episode,
     }),
-    [bangumiData]
+    [bangumiData.bangumi_name, bangumiData.player, episode]
   );
 
   // event