Prefetch on video view only when video is already playing

WRadoslaw · Feb 19, 2024 · 76b9dc7 · 76b9dc7
1 parent 67741bb
commit 76b9dc7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/atlas/src/views/viewer/VideoView/MoreVideos.tsx b/packages/atlas/src/views/viewer/VideoView/MoreVideos.tsx
@@ -22,6 +22,7 @@ type MoreVideosProps = {
   categoryName?: string | null
   videoId?: string
   type: 'channel' | 'category'
+  shouldPrefetch?: boolean
 }
 
 const NUMBER_OF_VIDEOS = 6
@@ -33,6 +34,7 @@ export const MoreVideos: FC<MoreVideosProps> = ({
   categoryName,
   videoId,
   type,
+  shouldPrefetch,
 }) => {
   const videoCategories = categoryId ? displayCategoriesLookup[categoryId].videoCategories : undefined
   const where =
@@ -64,7 +66,7 @@ export const MoreVideos: FC<MoreVideosProps> = ({
             id={video.id}
             detailsVariant="withChannelName"
             direction={lgMatch ? 'horizontal' : 'vertical'}
-            prefetch={idx < 5}
+            prefetch={idx < 5 && shouldPrefetch}
           />
         </GridItem>
       ))}

diff --git a/packages/atlas/src/views/viewer/VideoView/VideoView.tsx b/packages/atlas/src/views/viewer/VideoView/VideoView.tsx
@@ -98,6 +98,7 @@ export const VideoView: FC = () => {
   const { likeOrDislikeVideo } = useReactionTransactions()
   const { withdrawBid } = useNftTransactions()
   const { trackLikeAdded, trackDislikeAdded } = useSegmentAnalytics()
+  const [canPrefetchNew, setCanPrefetchNew] = useState(false)
 
   const mdMatch = useMediaMatch('md')
   const { addVideoView } = useAddVideoView()
@@ -202,6 +203,9 @@ export const VideoView: FC = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleTimeUpdate = useCallback(
     throttle((time) => {
+      if (!canPrefetchNew) {
+        setCanPrefetchNew(true)
+      }
       if (video?.id) {
         updateWatchedVideos('INTERRUPTED', video.id, time)
       }
@@ -317,7 +321,13 @@ export const VideoView: FC = () => {
               onWithdrawBid={(bid, createdAt) => id && createdAt && bid && withdrawBid(id, bid, createdAt)}
             />
           )}
-      <MoreVideos channelId={channelId} channelName={channelName} videoId={id} type="channel" />
+      <MoreVideos
+        channelId={channelId}
+        channelName={channelName}
+        videoId={id}
+        type="channel"
+        shouldPrefetch={canPrefetchNew}
+      />
       {belongsToCategories?.map((category) => (
         <MoreVideos
           key={category.id}