trying to reduce re-renders but it's kind of a lost cause?

HolodexNet · Jun 9, 2024 · fb9d41b · fb9d41b
1 parent a0c9dbd
commit fb9d41b
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 91 deletions.
diff --git a/packages/react/src/components/layout/PlayerWrapper.tsx b/packages/react/src/components/layout/PlayerWrapper.tsx
@@ -19,95 +19,93 @@ interface IPlayerWrapper {
   customSetPlayerRef?: React.Ref<ReactPlayer>;
 }
 
-export const PlayerWrapper = ({
-  id,
-  url,
-  customSetPlayerRef,
-}: IPlayerWrapper) => {
-  const playerRefAtom = videoPlayerRefAtomFamily(id);
-  const setPlayerRef = useSetAtom(playerRefAtom);
+export const PlayerWrapper = React.memo(
+  ({ id, url, customSetPlayerRef }: IPlayerWrapper) => {
+    const playerRefAtom = videoPlayerRefAtomFamily(id);
+    const setPlayerRef = useSetAtom(playerRefAtom);
 
-  const videoStatusAtom = videoStatusAtomFamily(id || "x");
-  const playingVideoStateSetter = useSetAtom(videoStatusAtom);
-  // Assuming you have a way to access `set` for updating the atom
-  const updateState = (update: Partial<PlayingVideoState>) => {
-    playingVideoStateSetter((prev) => ({ ...prev, ...update }));
-  };
+    const videoStatusAtom = videoStatusAtomFamily(id || "x");
+    const playingVideoStateSetter = useSetAtom(videoStatusAtom);
+    // Assuming you have a way to access `set` for updating the atom
+    const updateState = (update: Partial<PlayingVideoState>) => {
+      playingVideoStateSetter((prev) => ({ ...prev, ...update }));
+    };
 
-  return (
-    <LazyReactPlayer
-      ref={customSetPlayerRef ?? setPlayerRef}
-      // pass `key` to prevent flicker issue https://github.com/CookPete/react-player/issues/413#issuecomment-395404630
-      key={url}
-      style={{
-        aspectRatio: "16 / 9", //uncommenting this may cause the aspect ratio to lock on certain pages such as script editor
-      }}
-      width="100%"
-      // width="auto"
-      height="100%"
-      url={url}
-      controls
-      config={{
-        youtube: {
-          playerVars: {
-            origin: window.origin,
-            autoplay: 1,
+    return (
+      <LazyReactPlayer
+        ref={customSetPlayerRef ?? setPlayerRef}
+        // pass `key` to prevent flicker issue https://github.com/CookPete/react-player/issues/413#issuecomment-395404630
+        key={url}
+        style={{
+          aspectRatio: "16 / 9", //uncommenting this may cause the aspect ratio to lock on certain pages such as script editor
+        }}
+        width="100%"
+        // width="auto"
+        height="100%"
+        url={url}
+        controls
+        config={{
+          youtube: {
+            playerVars: {
+              origin: window.origin,
+              autoplay: 1,
+            },
           },
-        },
-      }}
-      onStart={() => {
-        defaultPlayerEventBus.emit("onStart", id || "");
-        updateState({ status: "playing" });
-      }}
-      onPlay={() => {
-        defaultPlayerEventBus.emit("onPlay", id || "");
-        updateState({ status: "playing" });
-      }}
-      onPause={() => {
-        defaultPlayerEventBus.emit("onPause", id || "");
-        updateState({ status: "paused" });
-      }}
-      onBuffer={() => {
-        defaultPlayerEventBus.emit("onBuffer", id || "");
-        updateState({ status: "buffering" });
-      }}
-      onBufferEnd={() => {
-        defaultPlayerEventBus.emit("onBufferEnd", id || "");
-      }}
-      onClickPreview={(e: unknown) => {
-        defaultPlayerEventBus.emit("onClickPreview", id || "", e);
-      }}
-      onError={(a: unknown, b: unknown, c: unknown, d: unknown) => {
-        defaultPlayerEventBus.emit("onError", id || "", a, b, c, d);
-        console.error("VIDEO PLAYER ERROR", id, a, b, c, d);
-        updateState({ error: { a, b, c, d } });
-      }}
-      onEnablePIP={() => {
-        defaultPlayerEventBus.emit("onEnablePIP", id || "");
-        console.log("onEnablePIP", id);
-      }}
-      onDisablePIP={() => {
-        defaultPlayerEventBus.emit("onDisablePIP", id || "");
-        console.log("onDisablePIP", id);
-      }}
-      onProgress={(state: OnProgressProps) => {
-        defaultPlayerEventBus.emit("onProgress", id || "", state);
-        updateState({
-          progress: state.playedSeconds,
-          progressRecordedAt: Date.now(),
-        });
-      }}
-      onDuration={(dur: number) => {
-        defaultPlayerEventBus.emit("onDuration", id || "", dur);
-        updateState({ duration: dur });
-      }}
-      onSeek={(s: number) => {
-        defaultPlayerEventBus.emit("onSeek", id || "", s);
-      }}
-      onEnded={() => {
-        defaultPlayerEventBus.emit("onEnded", id || "");
-        updateState({ status: "ended" });
-      }}
-    />
-  );
-};
+        }}
+        onStart={() => {
+          defaultPlayerEventBus.emit("onStart", id || "");
+          updateState({ status: "playing" });
+        }}
+        onPlay={() => {
+          defaultPlayerEventBus.emit("onPlay", id || "");
+          updateState({ status: "playing" });
+        }}
+        onPause={() => {
+          defaultPlayerEventBus.emit("onPause", id || "");
+          updateState({ status: "paused" });
+        }}
+        onBuffer={() => {
+          defaultPlayerEventBus.emit("onBuffer", id || "");
+          updateState({ status: "buffering" });
+        }}
+        onBufferEnd={() => {
+          defaultPlayerEventBus.emit("onBufferEnd", id || "");
+        }}
+        onClickPreview={(e: unknown) => {
+          defaultPlayerEventBus.emit("onClickPreview", id || "", e);
+        }}
+        onError={(a: unknown, b: unknown, c: unknown, d: unknown) => {
+          defaultPlayerEventBus.emit("onError", id || "", a, b, c, d);
+          console.error("VIDEO PLAYER ERROR", id, a, b, c, d);
+          updateState({ error: { a, b, c, d } });
+        }}
+        onEnablePIP={() => {
+          defaultPlayerEventBus.emit("onEnablePIP", id || "");
+          console.log("onEnablePIP", id);
+        }}
+        onDisablePIP={() => {
+          defaultPlayerEventBus.emit("onDisablePIP", id || "");
+          console.log("onDisablePIP", id);
+        }}
+        onProgress={(state: OnProgressProps) => {
+          defaultPlayerEventBus.emit("onProgress", id || "", state);
+          updateState({
+            progress: state.playedSeconds,
+            progressRecordedAt: Date.now(),
+          });
+        }}
+        onDuration={(dur: number) => {
+          defaultPlayerEventBus.emit("onDuration", id || "", dur);
+          updateState({ duration: dur });
+        }}
+        onSeek={(s: number) => {
+          defaultPlayerEventBus.emit("onSeek", id || "", s);
+        }}
+        onEnded={() => {
+          defaultPlayerEventBus.emit("onEnded", id || "");
+          updateState({ status: "ended" });
+        }}
+      />
+    );
+  },
+);
diff --git a/packages/react/src/components/video/VideoMenu.tsx b/packages/react/src/components/video/VideoMenu.tsx
@@ -49,7 +49,10 @@ export function VideoMenu({ children, video, url }: VideoMenuProps) {
   return (
     <DropdownMenu onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent onClick={(e) => e.stopPropagation()}>
+      <DropdownMenuContent
+        onClick={(e) => e.stopPropagation()}
+        // className="border-base-5"
+      >
         <DropdownMenuItem
           className="flex gap-2"
           onClick={() =>

diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
@@ -60,7 +60,7 @@ export default function Watch() {
   const chatPos = useAtomValue(chatPosAtom);
   const [ref, bounds] = useMeasure({ debounce: 50, scroll: false });
 
-  const url = idToVideoURL(id, currentVideo?.link);
+  const url = idToVideoURL(id!, currentVideo?.link);
   return (
     <>
       <Helmet>