Fix orion requests issue in video ending view (#1028)

* fix issue with redundant orion requests

* cr fixes

src/api/hooks/video.ts

@@ -2,10 +2,13 @@ import { MutationHookOptions, QueryHookOptions } from '@apollo/client'
 
 import {
   AddVideoViewMutation,
+  GetBasicVideosQuery,
+  GetBasicVideosQueryVariables,
   GetVideoQuery,
   GetVideosQuery,
   GetVideosQueryVariables,
   useAddVideoViewMutation,
+  useGetBasicVideosQuery,
   useGetVideoQuery,
   useGetVideosQuery,
 } from '@/api/queries'
@@ -52,3 +55,12 @@ export const useAddVideoView = (opts?: AddVideoViewOpts) => {
     ...rest,
   }
 }
+
+type BasicVideosQueryOpts = QueryHookOptions<GetBasicVideosQuery>
+export const useBasicVideos = (variables?: GetBasicVideosQueryVariables, opts?: BasicVideosQueryOpts) => {
+  const { data, ...rest } = useGetBasicVideosQuery({ ...opts, variables })
+  return {
+    videos: data?.videos,
+    ...rest,
+  }
+}

src/api/queries/videos.graphql

@@ -11,6 +11,16 @@ fragment LicenseFields on License {
   customText
 }
 
+fragment BasicVideoFields on Video {
+  id
+  title
+  thumbnailPhotoUrls
+  thumbnailPhotoAvailability
+  thumbnailPhotoDataObject {
+    ...DataObjectFields
+  }
+}
+
 fragment VideoFields on Video {
   id
   title
@@ -84,6 +94,12 @@ query GetVideos($offset: Int, $limit: Int, $where: VideoWhereInput, $orderBy: Vi
   }
 }
 
+query GetBasicVideos($where: VideoWhereInput) {
+  videos(where: $where) {
+    ...BasicVideoFields
+  }
+}
+
 ### Orion
 
 # modyfying this query name will need a sync-up in `src/api/client/resolvers.ts`

src/providers/assets/helpers.ts

@@ -2,6 +2,7 @@ import {
   AllChannelFieldsFragment,
   AssetAvailability,
   BasicChannelFieldsFragment,
+  BasicVideoFieldsFragment,
   VideoFieldsFragment,
 } from '@/api/queries'
 import { createStorageNodeUrl } from '@/utils/asset'
@@ -25,7 +26,13 @@ export const testAssetDownload = (url: string, type: AssetType) => {
   })
 }
 export const readAssetData = (
-  entity: VideoFieldsFragment | AllChannelFieldsFragment | BasicChannelFieldsFragment | null | undefined,
+  entity:
+    | VideoFieldsFragment
+    | BasicVideoFieldsFragment
+    | AllChannelFieldsFragment
+    | BasicChannelFieldsFragment
+    | null
+    | undefined,
   assetType: AssetType
 ): AssetResolutionData | null => {
   if (entity?.__typename === 'Channel') {
@@ -44,9 +51,15 @@ export const readAssetData = (
     }
   } else if (entity?.__typename === 'Video') {
     return {
-      availability: assetType === AssetType.MEDIA ? entity.mediaAvailability : entity.thumbnailPhotoAvailability,
-      urls: assetType === AssetType.MEDIA ? entity.mediaUrls : entity.thumbnailPhotoUrls,
-      dataObject: assetType === AssetType.MEDIA ? entity.mediaDataObject : entity.thumbnailPhotoDataObject,
+      availability:
+        assetType === AssetType.MEDIA
+          ? (entity as VideoFieldsFragment).mediaAvailability
+          : entity.thumbnailPhotoAvailability,
+      urls: assetType === AssetType.MEDIA ? (entity as VideoFieldsFragment).mediaUrls : entity.thumbnailPhotoUrls,
+      dataObject:
+        assetType === AssetType.MEDIA
+          ? (entity as VideoFieldsFragment).mediaDataObject
+          : entity.thumbnailPhotoDataObject,
       assetType,
     }
   }

src/providers/assets/types.ts

@@ -2,6 +2,7 @@ import {
   AllChannelFieldsFragment,
   AssetAvailability,
   BasicChannelFieldsFragment,
+  BasicVideoFieldsFragment,
   DataObject,
   VideoFieldsFragment,
 } from '@/api/queries'
@@ -14,6 +15,7 @@ export enum AssetType {
 }
 
 export type UseAssetDataArgs =
+  | { entity?: BasicVideoFieldsFragment | null; assetType: AssetType.THUMBNAIL }
   | { entity?: VideoFieldsFragment | null; assetType: AssetType.THUMBNAIL | AssetType.MEDIA }
   | { entity?: AllChannelFieldsFragment | null; assetType: AssetType.COVER | AssetType.AVATAR }
   | { entity?: BasicChannelFieldsFragment | null; assetType: AssetType.AVATAR }

src/shared/components/VideoPlayer/VideoOverlay.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
-import { useVideos } from '@/api/hooks'
-import { AssetAvailability, VideoFieldsFragment } from '@/api/queries'
+import { useBasicVideos } from '@/api/hooks'
+import { AssetAvailability, BasicVideoFieldsFragment } from '@/api/queries'
 import { transitions } from '@/shared/theme'
 import { getRandomIntInclusive } from '@/utils/number'
 
@@ -23,8 +23,8 @@ export const VideoOverlay: React.FC<VideoOverlaProps> = ({
   currentThumbnailUrl,
   videoId,
 }) => {
-  const [randomNextVideo, setRandomNextVideo] = useState<VideoFieldsFragment | null>(null)
-  const { videos } = useVideos({
+  const [randomNextVideo, setRandomNextVideo] = useState<BasicVideoFieldsFragment | null>(null)
+  const { videos } = useBasicVideos({
     where: {
       channelId_eq: channelId,
       isPublic_eq: true,

src/shared/components/VideoPlayer/VideoOverlays/EndingOverlay.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
 
-import { VideoFieldsFragment } from '@/api/queries'
+import { BasicVideoFieldsFragment } from '@/api/queries'
 import { absoluteRoutes } from '@/config/routes'
 import { AssetType, useAsset } from '@/providers'
 import { SvgGlyphRestart, SvgPlayerPause, SvgPlayerPlay } from '@/shared/icons'
@@ -24,7 +24,7 @@ type EndingOverlayProps = {
   currentThumbnailUrl?: string | null
   isFullScreen?: boolean
   onPlayAgain?: () => void
-  randomNextVideo?: VideoFieldsFragment | null
+  randomNextVideo?: BasicVideoFieldsFragment | null
   isEnded: boolean
 }
 // 10 seconds
@@ -97,7 +97,7 @@ export const EndingOverlay: React.FC<EndingOverlayProps> = ({
               Up next
             </SubHeading>
             <Heading variant="h3">{randomNextVideo.title}</Heading>
-            <StyledChannelLink id={randomNextVideo.channel.id} avatarSize="default" />
+            <StyledChannelLink id={channelId} avatarSize="default" />
           </VideoInfo>
           <CountDownWrapper>
             <StyledCircularProgressBar