From d309a01224e435ca6f6b5ebec4bc899af115ef4e Mon Sep 17 00:00:00 2001 From: Bartosz Dryl Date: Thu, 22 Jul 2021 15:46:33 +0200 Subject: [PATCH] Fix orion requests issue in video ending view (#1028) * fix issue with redundant orion requests * cr fixes --- src/api/hooks/video.ts | 12 ++++ .../__generated__/videos.generated.tsx | 68 +++++++++++++++++++ src/api/queries/videos.graphql | 16 +++++ src/providers/assets/helpers.ts | 21 ++++-- src/providers/assets/types.ts | 2 + .../components/VideoPlayer/VideoOverlay.tsx | 8 +-- .../VideoOverlays/EndingOverlay.tsx | 6 +- 7 files changed, 122 insertions(+), 11 deletions(-) diff --git a/src/api/hooks/video.ts b/src/api/hooks/video.ts index 9911904bd8..d413267822 100644 --- a/src/api/hooks/video.ts +++ b/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 +export const useBasicVideos = (variables?: GetBasicVideosQueryVariables, opts?: BasicVideosQueryOpts) => { + const { data, ...rest } = useGetBasicVideosQuery({ ...opts, variables }) + return { + videos: data?.videos, + ...rest, + } +} diff --git a/src/api/queries/__generated__/videos.generated.tsx b/src/api/queries/__generated__/videos.generated.tsx index c9d0a45205..19d37ec731 100644 --- a/src/api/queries/__generated__/videos.generated.tsx +++ b/src/api/queries/__generated__/videos.generated.tsx @@ -22,6 +22,15 @@ export type LicenseFieldsFragment = { customText?: Types.Maybe } +export type BasicVideoFieldsFragment = { + __typename?: 'Video' + id: string + title?: Types.Maybe + thumbnailPhotoUrls: Array + 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> } +export type GetBasicVideosQueryVariables = Types.Exact<{ + where?: Types.Maybe +}> + +export type GetBasicVideosQuery = { + __typename?: 'Query' + videos?: Types.Maybe> +} + 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 export type GetVideosLazyQueryHookResult = ReturnType export type GetVideosQueryResult = Apollo.QueryResult +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 +) { + return Apollo.useQuery(GetBasicVideosDocument, baseOptions) +} +export function useGetBasicVideosLazyQuery( + baseOptions?: Apollo.LazyQueryHookOptions +) { + return Apollo.useLazyQuery(GetBasicVideosDocument, baseOptions) +} +export type GetBasicVideosQueryHookResult = ReturnType +export type GetBasicVideosLazyQueryHookResult = ReturnType +export type GetBasicVideosQueryResult = Apollo.QueryResult export const GetVideoViewsDocument = gql` query GetVideoViews($videoId: ID!) { videoViews(videoId: $videoId) { diff --git a/src/api/queries/videos.graphql b/src/api/queries/videos.graphql index bca6ec147b..c44fdc308b 100644 --- a/src/api/queries/videos.graphql +++ b/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` diff --git a/src/providers/assets/helpers.ts b/src/providers/assets/helpers.ts index 75dee9db13..796c601777 100644 --- a/src/providers/assets/helpers.ts +++ b/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, } } diff --git a/src/providers/assets/types.ts b/src/providers/assets/types.ts index a0b0e0b32f..cb09226518 100644 --- a/src/providers/assets/types.ts +++ b/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 } diff --git a/src/shared/components/VideoPlayer/VideoOverlay.tsx b/src/shared/components/VideoPlayer/VideoOverlay.tsx index 3f389ca0dc..a879030a78 100644 --- a/src/shared/components/VideoPlayer/VideoOverlay.tsx +++ b/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 = ({ currentThumbnailUrl, videoId, }) => { - const [randomNextVideo, setRandomNextVideo] = useState(null) - const { videos } = useVideos({ + const [randomNextVideo, setRandomNextVideo] = useState(null) + const { videos } = useBasicVideos({ where: { channelId_eq: channelId, isPublic_eq: true, diff --git a/src/shared/components/VideoPlayer/VideoOverlays/EndingOverlay.tsx b/src/shared/components/VideoPlayer/VideoOverlays/EndingOverlay.tsx index 64e563f373..7cd335a454 100644 --- a/src/shared/components/VideoPlayer/VideoOverlays/EndingOverlay.tsx +++ b/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 = ({ Up next {randomNextVideo.title} - +