Fix performance

Author: nzws

apps/web/organisms/live/comment/menu.tsx

@@ -114,58 +114,60 @@ export const CommentMenu: FC<Props> = ({
           <FiMoreHorizontal />
         </MenuButton>
 
-        <Portal>
-          <MenuList zIndex={99999}>
-            <MenuGroup
-              title={intl.formatMessage(
-                {
-                  id: commentTypeIntlId
-                },
-                {
-                  relative: relativeTime
-                }
-              )}
-            >
-              {isAbleToDelete && (
-                <MenuItem
-                  onClick={() => void handleDelete()}
-                  isDisabled={isLoading}
-                >
-                  <FormattedMessage id="live.comment.delete" />
-                </MenuItem>
-              )}
-            </MenuGroup>
-
-            <MenuGroup title={user?.account}>
-              {isStreamer && (
-                <Fragment>
+        {isOpen && (
+          <Portal>
+            <MenuList zIndex={99999}>
+              <MenuGroup
+                title={intl.formatMessage(
+                  {
+                    id: commentTypeIntlId
+                  },
+                  {
+                    relative: relativeTime
+                  }
+                )}
+              >
+                {isAbleToDelete && (
                   <MenuItem
-                    onClick={() => setConfirmAutoMod('Account')}
+                    onClick={() => void handleDelete()}
                     isDisabled={isLoading}
-                    color="red.400"
                   >
-                    {user?.account} を非表示
+                    <FormattedMessage id="live.comment.delete" />
                   </MenuItem>
+                )}
+              </MenuGroup>
 
-                  <MenuItem
-                    onClick={() => setConfirmAutoMod('Domain')}
-                    isDisabled={isLoading}
-                    color="red.400"
-                  >
-                    *.{domain} を非表示
-                  </MenuItem>
-                </Fragment>
-              )}
+              <MenuGroup title={user?.account}>
+                {isStreamer && (
+                  <Fragment>
+                    <MenuItem
+                      onClick={() => setConfirmAutoMod('Account')}
+                      isDisabled={isLoading}
+                      color="red.400"
+                    >
+                      {user?.account} を非表示
+                    </MenuItem>
+
+                    <MenuItem
+                      onClick={() => setConfirmAutoMod('Domain')}
+                      isDisabled={isLoading}
+                      color="red.400"
+                    >
+                      *.{domain} を非表示
+                    </MenuItem>
+                  </Fragment>
+                )}
 
-              <LinkBox as={MenuItem}>
-                <LinkOverlay href={user?.url} isExternal>
-                  <FormattedMessage id="live.comment.account-page" />
-                  <ExternalLinkIcon mb={1} ml={2} />
-                </LinkOverlay>
-              </LinkBox>
-            </MenuGroup>
-          </MenuList>
-        </Portal>
+                <LinkBox as={MenuItem}>
+                  <LinkOverlay href={user?.url} isExternal>
+                    <FormattedMessage id="live.comment.account-page" />
+                    <ExternalLinkIcon mb={1} ml={2} />
+                  </LinkOverlay>
+                </LinkBox>
+              </MenuGroup>
+            </MenuList>
+          </Portal>
+        )}
       </Menu>
     </Fragment>
   );

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

@@ -196,12 +196,8 @@ export const LivePlayer: FC<Props> = ({
       return;
     }
     if (!commentAddedRef.current) {
-      const set = new Set<number>();
+      const set = new Set<number>(comments.map(comment => comment.id));
       commentAddedRef.current = set;
-
-      comments.forEach(comment => {
-        set.add(comment.id);
-      });
       return;
     }
 
@@ -210,17 +206,14 @@ export const LivePlayer: FC<Props> = ({
       return;
     }
 
-    for (const comment of comments) {
-      if (commentAddedRef.current?.has(comment.id)) {
-        break;
-      }
-
+    const comment = comments[0];
+    if (!commentAddedRef.current?.has(comment.id)) {
       commentAddedRef.current.add(comment.id);
       const dom = gravity.add(comment.content, false);
 
       setTimeout(() => {
         gravity.remove(dom);
-      }, 10000);
+      }, 10 * 1000);
     }
   }, [comments, danmaku]);
 

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

@@ -73,6 +73,7 @@ export const useVideoStream = <T extends 'live' | 'video'>(
           enableWorker: true,
           autoCleanupSourceBuffer: true,
           liveBufferLatencyChasing: true,
+          liveBufferLatencyMinRemain: 0.2,
           // @ts-expect-error: type error
           enableWorkerForMSE: true,
           liveBufferLatencyChasingOnPaused: true,
@@ -84,7 +85,7 @@ export const useVideoStream = <T extends 'live' | 'video'>(
           flvConfig = {
             ...flvConfig,
             enableStashBuffer: false,
-            liveBufferLatencyMaxLatency: 1,
+            liveBufferLatencyMaxLatency: 3,
             // @ts-expect-error: type error
             liveSyncTargetLatency: 0.5
           };
@@ -138,7 +139,8 @@ export const useVideoStream = <T extends 'live' | 'video'>(
               enableWorker: true,
               liveDurationInfinity: true,
               startFragPrefetch: true,
-              progressive: true
+              progressive: true,
+              autoStartLoad: true
             };
 
             if (LowLatency.includes(playType as LivePlayType)) {