# How to toggle between Gallery and Video-Single

**URL:** <https://devforum.zoom.us/t/how-to-toggle-between-gallery-and-video-single/93061>\
**Category:** Video SDK\
**Created:** [August 7, 2023, 9:30pm UTC](https://devforum.zoom.us/t/how-to-toggle-between-gallery-and-video-single/93061 "2023-08-07T21:30:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaleAtMarvin](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daleatmarvin/32/50392_2.png) [@DaleAtMarvin](https://devforum.zoom.us/u/DaleAtMarvin)\
**Post date:** [August 7, 2023, 9:30pm UTC](https://devforum.zoom.us/t/how-to-toggle-between-gallery-and-video-single/93061/1 "2023-08-07T21:30:00Z")

</div>

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:

```auto
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](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/7/e/7e8e9523209606471faaa504d2be0e6c9869bad8.png)

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

```auto
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

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [August 8, 2023, 2:00am UTC](https://devforum.zoom.us/t/how-to-toggle-between-gallery-and-video-single/93061/2 "2023-08-08T02:00:47Z")

</div>

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