How to toggle between Gallery and Video-Single

Video SDK
1

My client wants to be able to toggle between the Gallery View and the Single person view with a button click.

I started off with the video-sdk web project and haven’t modified anything except for modifying the Home component with a button for the toggle like so:

return (
    <div>
      <button onClick={() => setIsGalleryView(bool => !bool)}>
        Toggle View
      </button>
      <div>
        {isGalleryView && (
          <Video />
        )}
        {!isGalleryView && (
          <VideoSingle />
        )}
      </div>
    </div>
  );

it does not work though as once I switch to Gallery View i get this error:

image
image974×80 5.82 KB

the closest i got is that it’s not going into the following function. if i remove:
previousIsVideoDecodeReady === false
i can force it to run the code, but I still get the same error

useEffect(() => {
    if (previousIsVideoDecodeReady === false && isVideoDecodeReady === true && subscribedVideos.length > 0) {
      subscribedVideos.forEach(async (userId) => {
        const index = participants.findIndex((user) => user.userId === userId);
        const cellDimension = layout[index];
        if (cellDimension && (!isSkipSelfVideo || (isSkipSelfVideo && userId !== currentUserId))) {
          const { width, height, x, y, quality } = cellDimension;
          console.log('userId: ', userId);
          await mediaStream?.renderVideo(videoRef.current as HTMLCanvasElement, userId, width, height, x, y, quality);
        }
      });
    }
  }, [
    mediaStream,
    videoRef,
    layout,
    participants,
    subscribedVideos,
    isVideoDecodeReady,
    previousIsVideoDecodeReady,
    isSkipSelfVideo,
    currentUserId
  ]);

can someone point me in the direction on how I can get this going? super frustrated

2

Hey @DaleAtMarvin

Thanks for your feedback.

The <Video /> and <VideoSingle /> are not used for switching between gallery view and single view. You can update the code in useGalleryLayout and useRenderVideo hooks to get it working.

Thanks
Vic

1 Like