Improve stability

Author: nzws

apps/web/organisms/live/live-app.tsx

@@ -103,6 +103,7 @@ export const LiveApp: FC<Props> = ({ live, streamer }) => {
               liveTitle={live.title}
               userId={user?.id}
               comments={comments}
+              key={url?.flvWs} // 強制再読み込み用
             />
           ) : (
             <VideoMessageBox

apps/web/organisms/live/video/live-player.tsx

@@ -24,6 +24,9 @@ type Props = {
   comments: CommentPublic[];
 };
 
+// コンポーネント再マウントしても保持したいのでとりあえず
+let stealingCount = 0;
+
 export const LivePlayer: FC<Props> = ({
   thumbnailUrl,
   url,
@@ -48,7 +51,11 @@ export const LivePlayer: FC<Props> = ({
   const [canPlay, setCanPlay] = useState(false);
   const [maybeBlocked, setMaybeBlocked] = useState(false);
   const [danmaku, setDanmaku] = useState(true);
-  const { playType, setPlayType, play } = useVideoStream('live', videoRef, url);
+  const { playType, setPlayType, play, handleToLowerQuality } = useVideoStream(
+    'live',
+    videoRef,
+    url
+  );
   useMuxData(videoRef, liveId, liveTitle, userId, playType);
 
   const autoSeek = useCallback(() => {
@@ -217,6 +224,29 @@ export const LivePlayer: FC<Props> = ({
     }
   }, [comments, danmaku]);
 
+  useEffect(() => {
+    if (latency > 0 || !canPlay) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      // 長期間バッファチェック
+
+      stealingCount++;
+      console.warn('Stealing, count:', stealingCount);
+      // 連続でバッファリングが発生した場合は画質を下げる
+      if (stealingCount > 2) {
+        stealingCount = 0;
+        handleToLowerQuality();
+        console.warn('Stealing, lower quality');
+      }
+
+      void updateUrl();
+    }, 5 * 1000);
+
+    return () => clearTimeout(timeout);
+  }, [latency, handleToLowerQuality, canPlay, updateUrl]);
+
   return (
     <Box
       {...events}

apps/web/utils/hooks/use-video-stream.ts

@@ -5,10 +5,11 @@ import { LiveUrls } from 'api-types/api/v1/lives/_liveId@number/url';
 import { useAPIError } from './api/use-api-error';
 import { VideoUrls } from 'api-types/api/v1/videos/_liveId@number';
 import type { HlsConfig } from 'hls.js';
+import { useLocalStorage } from 'react-use';
 
 export enum LivePlayType {
-  FlvHttp = 'flvHttp',
   FlvWs = 'flvWs',
+  FlvHttp = 'flvHttp',
   HlsHq = 'hlsHq',
   HlsLq = 'hlsLq',
   Audio = 'audio'
@@ -31,14 +32,19 @@ type UrlType<T> = T extends 'live' ? LiveUrls : VideoUrls;
 let hlsInterface: typeof Hls | undefined;
 let mpegtsInterface: typeof Mpegts | undefined;
 
+const isLivePlayType = (type: string): type is LivePlayType =>
+  Object.values(LivePlayType).includes(type as LivePlayType);
+
 export const useVideoStream = <T extends 'live' | 'video'>(
   entityType: T,
   videoTagRef: RefObject<HTMLVideoElement>,
   url?: UrlType<T>
 ) => {
   const mpegtsPlayerRef = useRef<Mpegts.Player>();
   const hlsPlayerRef = useRef<Hls>();
-  const [playType, setPlayType] = useState<PlayType<T>>();
+  const [playType, setPlayType] = useLocalStorage<PlayType<T>>(
+    `knzklive-${entityType}-play-type`
+  );
   const [error, setError] = useState<unknown>();
   useAPIError(error);
 
@@ -210,6 +216,24 @@ export const useVideoStream = <T extends 'live' | 'video'>(
     [videoTagRef]
   );
 
+  const handleToLowerQuality = useCallback(() => {
+    if (!playType) {
+      return;
+    }
+    if (isLivePlayType(playType)) {
+      const qualities = Object.values(LivePlayType);
+      const currentIndex = qualities.indexOf(playType);
+      const nextQuality = qualities[currentIndex + 1];
+      if (nextQuality && nextQuality !== LivePlayType.Audio) {
+        setPlayType(nextQuality as PlayType<T>);
+
+        return true;
+      }
+    }
+
+    return false;
+  }, [playType, setPlayType]);
+
   useEffect(() => {
     const video = videoTagRef.current;
     if (!video || !url) {
@@ -273,12 +297,21 @@ export const useVideoStream = <T extends 'live' | 'video'>(
         video.src = '';
       }
     };
-  }, [videoTagRef, url, playType, handleFlv, handleHls, entityType]);
+  }, [
+    videoTagRef,
+    url,
+    playType,
+    handleFlv,
+    handleHls,
+    entityType,
+    setPlayType
+  ]);
 
   return {
     playType,
     setPlayType,
-    play
+    play,
+    handleToLowerQuality
   } as const;
 };