use real channel videos in video playback

src/api/queries/__generated__/GetChannel.ts

@@ -59,7 +59,7 @@ export interface GetChannel_channel {
   handle: string;
   avatarPhotoURL: string | null;
   coverPhotoURL: string | null;
-  videos: GetChannel_channel_videos[] | null;
+  videos: GetChannel_channel_videos[];
 }
 
 export interface GetChannel {

src/api/queries/__generated__/GetVideo.ts

@@ -32,11 +32,58 @@ export interface GetVideo_video_media {
   location: GetVideo_video_media_location;
 }
 
+export interface GetVideo_video_channel_videos_category {
+  __typename: "Category";
+  id: string;
+}
+
+export interface GetVideo_video_channel_videos_media_location_HTTPVideoMediaLocation {
+  __typename: "HTTPVideoMediaLocation";
+  URL: string;
+}
+
+export interface GetVideo_video_channel_videos_media_location_JoystreamVideoMediaLocation {
+  __typename: "JoystreamVideoMediaLocation";
+  dataObjectID: string;
+}
+
+export type GetVideo_video_channel_videos_media_location = GetVideo_video_channel_videos_media_location_HTTPVideoMediaLocation | GetVideo_video_channel_videos_media_location_JoystreamVideoMediaLocation;
+
+export interface GetVideo_video_channel_videos_media {
+  __typename: "VideoMedia";
+  id: string;
+  pixelHeight: number;
+  pixelWidth: number;
+  location: GetVideo_video_channel_videos_media_location;
+}
+
+export interface GetVideo_video_channel_videos_channel {
+  __typename: "Channel";
+  id: string;
+  avatarPhotoURL: string | null;
+  handle: string;
+}
+
+export interface GetVideo_video_channel_videos {
+  __typename: "Video";
+  id: string;
+  title: string;
+  description: string;
+  category: GetVideo_video_channel_videos_category;
+  views: number | null;
+  duration: number;
+  thumbnailURL: string;
+  publishedOnJoystreamAt: GQLDate;
+  media: GetVideo_video_channel_videos_media;
+  channel: GetVideo_video_channel_videos_channel;
+}
+
 export interface GetVideo_video_channel {
   __typename: "Channel";
   id: string;
   avatarPhotoURL: string | null;
   handle: string;
+  videos: GetVideo_video_channel_videos[];
 }
 
 export interface GetVideo_video {

src/api/queries/videos.ts

@@ -73,10 +73,18 @@ export const GET_FEATURED_VIDEOS = gql`
   ${videoFieldsFragment}
 `
 
-export const GET_VIDEO = gql`
+export const GET_VIDEO_WITH_CHANNEL_VIDEOS = gql`
   query GetVideo($id: ID!) {
     video(id: $id) {
       ...VideoFields
+      channel {
+        id
+        avatarPhotoURL
+        handle
+        videos {
+          ...VideoFields
+        }
+      }
     }
   }
   ${videoFieldsFragment}

src/api/schemas/extendedQueryNode.graphql

@@ -32,7 +32,7 @@ type Channel {
 
   language: Language
 
-  videos: [Video!]
+  videos: [Video!]!
 }
 
 type Category {

src/views/VideoView/VideoView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { RouteComponentProps, useParams, navigate } from '@reach/router'
+import { navigate, RouteComponentProps, useParams } from '@reach/router'
 import {
   Container,
   DescriptionContainer,
@@ -15,7 +15,7 @@ import {
 import { VideoGrid } from '@/components'
 import { VideoPlayer } from '@/shared/components'
 import { useMutation, useQuery } from '@apollo/client'
-import { ADD_VIDEO_VIEW, GET_VIDEO } from '@/api/queries'
+import { ADD_VIDEO_VIEW, GET_VIDEO_WITH_CHANNEL_VIDEOS } from '@/api/queries'
 import { GetVideo, GetVideoVariables } from '@/api/queries/__generated__/GetVideo'
 import routes from '@/config/routes'
 import { formatVideoViewsAndDate } from '@/utils/video'
@@ -23,7 +23,7 @@ import { AddVideoView, AddVideoViewVariables } from '@/api/queries/__generated__
 
 const VideoView: React.FC<RouteComponentProps> = () => {
   const { id } = useParams()
-  const { loading, data } = useQuery<GetVideo, GetVideoVariables>(GET_VIDEO, {
+  const { loading, data } = useQuery<GetVideo, GetVideoVariables>(GET_VIDEO_WITH_CHANNEL_VIDEOS, {
     variables: { id },
   })
   const [addVideoView] = useMutation<AddVideoView, AddVideoViewVariables>(ADD_VIDEO_VIEW)
@@ -64,8 +64,6 @@ const VideoView: React.FC<RouteComponentProps> = () => {
 
   const descriptionLines = description.split('\n')
 
-  const moreVideos = Array.from({ length: 10 }, () => data.video as NonNullable<typeof data.video>)
-
   return (
     <Container>
       <PlayerContainer>
@@ -88,7 +86,7 @@ const VideoView: React.FC<RouteComponentProps> = () => {
         </DescriptionContainer>
         <MoreVideosContainer>
           <MoreVideosHeader>More from {channel.handle}</MoreVideosHeader>
-          <VideoGrid videos={moreVideos} />
+          <VideoGrid videos={channel.videos} />
         </MoreVideosContainer>
       </InfoContainer>
     </Container>