add cover video to the mocked server

src/components/FeaturedVideoHeader/FeaturedVideoHeader.style.ts

@@ -3,6 +3,7 @@ import { fluidRange } from 'polished'
 
 import { Avatar, Button } from '@/shared/components'
 import { breakpoints, colors, spacing, typography } from '@/shared/theme'
+import { Link } from '@reach/router'
 
 export const Container = styled.section`
   position: relative;
@@ -19,7 +20,7 @@ export const MediaWrapper = styled.div`
   width: calc(100% + calc(2 * var(--global-horizontal-padding)));
 `
 
-export const BackgroundImage = styled.div`
+export const BackgroundImage = styled.div<{ src: string }>`
   width: 100%;
   height: 0;
   padding-top: 56.25%;
@@ -27,11 +28,9 @@ export const BackgroundImage = styled.div`
   background-position: center;
   background-attachment: local;
   background-size: cover;
-  background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 20%),
-    url(https://eu-central-1.linodeobjects.com/atlas-assets/featured-video-thumbnail.jpg);
+  background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 20%), url(${({ src }) => src});
   @media screen and (min-width: ${breakpoints.medium}) {
-    background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 70%),
-      url(https://eu-central-1.linodeobjects.com/atlas-assets/featured-video-thumbnail.jpg);
+    background-image: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 70%), url(${({ src }) => src});
   }
 `
 
@@ -54,14 +53,17 @@ export const InfoContainer = styled.div`
   }
 `
 
+export const ChannelLink = styled(Link)`
+  margin-bottom: ${spacing.m};
+  display: inline-block;
+`
+
 export const StyledAvatar = styled(Avatar)`
   width: 64px;
   height: 64px;
-  margin-bottom: ${spacing.m};
   @media screen and (min-width: ${breakpoints.medium}) {
     width: 88px;
     height: 88px;
-    margin-bottom: ${spacing.m};
   }
 `
 

src/components/FeaturedVideoHeader/FeaturedVideoHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   BackgroundImage,
+  ChannelLink,
   Container,
   InfoContainer,
   MediaWrapper,
@@ -8,20 +9,25 @@ import {
   StyledAvatar,
   TitleContainer,
 } from './FeaturedVideoHeader.style'
+import { mockCoverVideo, mockCoverVideoChannel } from '@/mocking/data/mockCoverVideo'
+import { navigate } from '@reach/router'
+import routes from '@/config/routes'
 
 const FeaturedVideoHeader: React.FC = () => {
   return (
     <Container>
       <MediaWrapper>
-        <BackgroundImage />
+        <BackgroundImage src={mockCoverVideo.thumbnailURL} />
       </MediaWrapper>
       <InfoContainer>
-        <StyledAvatar img="https://eu-central-1.linodeobjects.com/atlas-assets/feautured-video-channel-avatar.png" />
+        <ChannelLink to={routes.channel(mockCoverVideoChannel.id)}>
+          <StyledAvatar img={mockCoverVideoChannel.avatarPhotoURL} name={mockCoverVideoChannel.handle} />
+        </ChannelLink>
         <TitleContainer>
-          <h2>Ghost Signals</h2>
-          <span>How We Lost Trust In Authority, And Authority Taught Us To Distrust Ourselves</span>
+          <h2>{mockCoverVideo.title}</h2>
+          <span>{mockCoverVideo.description}</span>
         </TitleContainer>
-        <PlayButton>Play</PlayButton>
+        <PlayButton onClick={() => navigate(routes.video(mockCoverVideo.id))}>Play</PlayButton>
       </InfoContainer>
     </Container>
   )

src/mocking/data/mockChannels.ts

@@ -2,7 +2,7 @@ import { channelAvatarSources, channelPosterSources } from './mockImages'
 import { ChannelFields } from '@/api/queries/__generated__/ChannelFields'
 import rawChannels from './raw/channels.json'
 
-type MockChannel = ChannelFields
+export type MockChannel = ChannelFields
 
 const mockChannels: MockChannel[] = rawChannels.map((rawChannel, idx) => ({
   ...rawChannel,

src/mocking/data/mockCoverVideo.ts

@@ -0,0 +1,23 @@
+import rawCoverVideo from './raw/coverVideo.json'
+import { MockVideo } from '@/mocking/data/mockVideos'
+import { MockVideoMedia } from '@/mocking/data/mockVideosMedia'
+import { MockChannel } from '@/mocking/data/mockChannels'
+
+export const mockCoverVideoChannel: MockChannel = {
+  ...rawCoverVideo.channel,
+  __typename: 'Channel',
+}
+
+export const mockCoverVideo: MockVideo = {
+  ...rawCoverVideo.video,
+  __typename: 'Video',
+}
+
+export const mockCoverVideoMedia: MockVideoMedia = {
+  ...rawCoverVideo.videoMedia,
+  __typename: 'VideoMedia',
+  location: {
+    __typename: 'HTTPVideoMediaLocation',
+    ...rawCoverVideo.videoMedia.location,
+  },
+}

src/mocking/data/mockVideos.ts

@@ -2,7 +2,7 @@ import { thumbnailSources } from './mockImages'
 import { VideoFields } from '@/api/queries/__generated__/VideoFields'
 import rawVideos from './raw/videos.json'
 
-type MockVideo = Omit<VideoFields, 'media' | 'category' | 'channel' | 'publishedOnJoystreamAt' | 'duration'> & {
+export type MockVideo = Omit<VideoFields, 'media' | 'category' | 'channel' | 'publishedOnJoystreamAt' | 'duration'> & {
   publishedOnJoystreamAt: unknown
 }
 

src/mocking/data/mockVideosMedia.ts

@@ -1,7 +1,7 @@
 import { VideoMediaFields } from '@/api/queries/__generated__/VideoMediaFields'
 import rawVideosMedia from './raw/videosMedia.json'
 
-type MockVideoMedia = VideoMediaFields & { duration: number }
+export type MockVideoMedia = VideoMediaFields & { duration: number }
 
 const mockVideosMedia: MockVideoMedia[] = rawVideosMedia.map((rawVideoMedia) => {
   return {

src/mocking/data/raw/coverVideo.json

@@ -0,0 +1,25 @@
+{
+  "video": {
+    "id": "2edfa557-9298-43c7-a6c5-95e580ace40e",
+    "title": "Ghost Signals",
+    "description": "How We Lost Trust In Authority, And Authority Taught Us To Distrust Ourselves",
+    "views": 132,
+    "publishedOnJoystreamAt": "2020-11-04T15:59:55.820Z",
+    "thumbnailURL": "https://eu-central-1.linodeobjects.com/atlas-assets/featured-video-thumbnail.jpg"
+  },
+  "videoMedia": {
+    "id": "4551c421-8edd-4d3b-8357-9fe825742775",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 2560,
+    "pixelHeight": 1440,
+    "duration": 29,
+    "size": 44851016,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/1.mp4" }
+  },
+  "channel": {
+    "id": "d458e199-e1ae-4ccc-9f42-0ff8fbf9ab81",
+    "handle": "SCHISM",
+    "avatarPhotoURL": "https://eu-central-1.linodeobjects.com/atlas-assets/feautured-video-channel-avatar.png",
+    "coverPhotoURL": null
+  }
+}

src/mocking/server/data.ts

@@ -4,8 +4,11 @@ import faker from 'faker'
 import { mockCategories, mockChannels, mockVideos, mockVideosMedia } from '@/mocking/data'
 import { ChannelFields } from '@/api/queries/__generated__/ChannelFields'
 import { CategoryFields } from '@/api/queries/__generated__/CategoryFields'
+import { mockCoverVideo, mockCoverVideoChannel, mockCoverVideoMedia } from '@/mocking/data/mockCoverVideo'
 
-export const createMockData = (server: any) => {
+type MirageJSServer = any
+
+export const createMockData = (server: MirageJSServer) => {
   const channels = mockChannels.map((channel) => {
     return server.schema.create('Channel', {
       ...channel,
@@ -49,4 +52,35 @@ export const createMockData = (server: any) => {
       views: video.views,
     })
   })
+
+  createCoverVideoData(server, categories)
+}
+
+const createCoverVideoData = (server: MirageJSServer, categories: unknown[]) => {
+  const channel = server.schema.create('Channel', {
+    ...mockCoverVideoChannel,
+  })
+
+  const location = server.schema.create('HTTPVideoMediaLocation', {
+    id: faker.random.uuid(),
+    ...mockCoverVideoMedia.location,
+  })
+
+  const media = server.schema.create('VideoMedia', {
+    ...mockCoverVideoMedia,
+    location,
+  })
+
+  const video = server.schema.create('Video', {
+    ...mockCoverVideo,
+    duration: media.duration,
+    category: categories[0],
+    channel,
+    media,
+  })
+
+  server.create('VideoViewsInfo', {
+    id: video.id,
+    views: video.views,
+  })
 }

src/shared/components/Avatar/Avatar.style.tsx

@@ -12,7 +12,7 @@ const container: StyleFn = (_, { size = 'default' }) => {
     minWidth: width,
     backgroundColor: colors.gray[400],
     color: colors.white,
-    display: 'flex',
+    display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',