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/__generated__/videos.generated.tsx

@@ -22,6 +22,15 @@ export type LicenseFieldsFragment = {
   customText?: Types.Maybe<string>
 }
 
+export type BasicVideoFieldsFragment = {
+  __typename?: 'Video'
+  id: string
+  title?: Types.Maybe<string>
+  thumbnailPhotoUrls: Array<string>
+  thumbnailPhotoAvailability: Types.AssetAvailability
+  thumbnailPhotoDataObject?: Types.Maybe<{ __typename?: 'DataObject' } & DataObjectFieldsFragment>
+}
+
 export type VideoFieldsFragment = {
   __typename?: 'Video'
   id: string
@@ -87,6 +96,15 @@ export type GetVideosQuery = {
   videos?: Types.Maybe<Array<{ __typename?: 'Video' } & VideoFieldsFragment>>
 }
 
+export type GetBasicVideosQueryVariables = Types.Exact<{
+  where?: Types.Maybe<Types.VideoWhereInput>
+}>
+
+export type GetBasicVideosQuery = {
+  __typename?: 'Query'
+  videos?: Types.Maybe<Array<{ __typename?: 'Video' } & BasicVideoFieldsFragment>>
+}
+
 export type GetVideoViewsQueryVariables = Types.Exact<{
   videoId: Types.Scalars['ID']
 }>
@@ -115,6 +133,18 @@ export type AddVideoViewMutation = {
   addVideoView: { __typename?: 'EntityViewsInfo'; id: string; views: number }
 }
 
+export const BasicVideoFieldsFragmentDoc = gql`
+  fragment BasicVideoFields on Video {
+    id
+    title
+    thumbnailPhotoUrls
+    thumbnailPhotoAvailability
+    thumbnailPhotoDataObject {
+      ...DataObjectFields
+    }
+  }
+  ${DataObjectFieldsFragmentDoc}
+`
 export const VideoMediaMetadataFieldsFragmentDoc = gql`
   fragment VideoMediaMetadataFields on VideoMediaMetadata {
     id
@@ -313,6 +343,44 @@ export function useGetVideosLazyQuery(
 export type GetVideosQueryHookResult = ReturnType<typeof useGetVideosQuery>
 export type GetVideosLazyQueryHookResult = ReturnType<typeof useGetVideosLazyQuery>
 export type GetVideosQueryResult = Apollo.QueryResult<GetVideosQuery, GetVideosQueryVariables>
+export const GetBasicVideosDocument = gql`
+  query GetBasicVideos($where: VideoWhereInput) {
+    videos(where: $where) {
+      ...BasicVideoFields
+    }
+  }
+  ${BasicVideoFieldsFragmentDoc}
+`
+
+/**
+ * __useGetBasicVideosQuery__
+ *
+ * To run a query within a React component, call `useGetBasicVideosQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetBasicVideosQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetBasicVideosQuery({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useGetBasicVideosQuery(
+  baseOptions?: Apollo.QueryHookOptions<GetBasicVideosQuery, GetBasicVideosQueryVariables>
+) {
+  return Apollo.useQuery<GetBasicVideosQuery, GetBasicVideosQueryVariables>(GetBasicVideosDocument, baseOptions)
+}
+export function useGetBasicVideosLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<GetBasicVideosQuery, GetBasicVideosQueryVariables>
+) {
+  return Apollo.useLazyQuery<GetBasicVideosQuery, GetBasicVideosQueryVariables>(GetBasicVideosDocument, baseOptions)
+}
+export type GetBasicVideosQueryHookResult = ReturnType<typeof useGetBasicVideosQuery>
+export type GetBasicVideosLazyQueryHookResult = ReturnType<typeof useGetBasicVideosLazyQuery>
+export type GetBasicVideosQueryResult = Apollo.QueryResult<GetBasicVideosQuery, GetBasicVideosQueryVariables>
 export const GetVideoViewsDocument = gql`
   query GetVideoViews($videoId: ID!) {
     videoViews(videoId: $videoId) {

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 { ASSET_RESPONSE_TIMEOUT } from '@/config/assets'
@@ -27,7 +28,13 @@ export const testAssetDownload = (url: string, type: AssetType) => {
   return withTimeout(testPromise, ASSET_RESPONSE_TIMEOUT)
 }
 export const readAssetData = (
-  entity: VideoFieldsFragment | AllChannelFieldsFragment | BasicChannelFieldsFragment | null | undefined,
+  entity:
+    | VideoFieldsFragment
+    | BasicVideoFieldsFragment
+    | AllChannelFieldsFragment
+    | BasicChannelFieldsFragment
+    | null
+    | undefined,
   assetType: AssetType
 ): AssetResolutionData | null => {
   if (entity?.__typename === 'Channel') {
@@ -46,9 +53,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