expand the mocking dataset, add mocking tooling

packages/app/package.json

@@ -28,7 +28,10 @@
     "build-storybook": "build-storybook -c src/shared/.storybook",
     "chromatic": "chromatic --project-token=qq8aetz26u",
     "queries:codegen": "apollo client:codegen --target typescript --passthroughCustomScalars --customScalarsPrefix=GQL",
-    "queries:watch": "yarn queries:codegen --watch"
+    "queries:watch": "yarn queries:codegen --watch",
+    "mocking:videos": "node scripts/mocking/generateVideos.js",
+    "mocking:videosMedia": "node scripts/mocking/generateVideosMedia.js",
+    "mocking:channels": "node scripts/mocking/generateChannels.js"
   },
   "dependencies": {
     "@apollo/client": "^3.1.1",
@@ -74,6 +77,11 @@
     "use-resize-observer": "^6.1.0",
     "video.js": "^7.8.3"
   },
+  "devDependencies": {
+    "@types/faker": "^5.1.0",
+    "faker": "^5.1.0",
+    "fluent-ffmpeg": "^2.1.2"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

packages/app/scripts/mocking/.gitignore

@@ -0,0 +1,2 @@
+videos/
+generated/

packages/app/scripts/mocking/generateChannels.js

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const faker = require('faker')
+const { saveToFile, randomRange } = require('./utils')
+
+const OUTPUT_FILENAME = 'channels.json'
+const CHANNELS_COUNT = 10
+
+const generateChannel = () => {
+  const handleWordsCount = randomRange(1, 4)
+  return {
+    id: faker.random.uuid(),
+    handle: faker.lorem.words(handleWordsCount),
+    totalViews: faker.random.number(150000),
+  }
+}
+
+const main = async () => {
+  const channels = Array.from({ length: CHANNELS_COUNT }, generateChannel)
+  await saveToFile(channels, OUTPUT_FILENAME)
+}
+
+main()

packages/app/scripts/mocking/generateVideos.js

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const faker = require('faker')
+const { saveToFile, randomRange } = require('./utils')
+
+const OUTPUT_FILENAME = 'videos.json'
+const VIDEOS_COUNT = 100
+
+const generateVideo = () => {
+  const titleWordsCount = randomRange(2, 6)
+  const descriptionSentenceCount = randomRange(2, 12)
+  return {
+    id: faker.random.uuid(),
+    title: faker.lorem.words(titleWordsCount),
+    description: faker.lorem.sentences(descriptionSentenceCount),
+    views: faker.random.number(150000),
+    publishedOnJoystreamAt: faker.date.past(10),
+  }
+}
+
+const main = async () => {
+  const videos = Array.from({ length: VIDEOS_COUNT }, generateVideo)
+  await saveToFile(videos, OUTPUT_FILENAME)
+}
+
+main()

packages/app/scripts/mocking/generateVideosMedia.js

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// generate mock videos metadata for all the files in scripts/videos directory
+
+const path = require('path')
+const fs = require('fs')
+const { promisify } = require('util')
+const ffmpeg = require('fluent-ffmpeg')
+const faker = require('faker')
+const { saveToFile } = require('./utils')
+
+const readdir = promisify(fs.readdir)
+const ffprobe = promisify(ffmpeg.ffprobe)
+
+const HOSTED_ASSET_PREFIX = 'https://eu-central-1.linodeobjects.com/atlas-assets/videos/'
+
+const VIDEOS_DIR = 'videos'
+
+const OUTPUT_FILENAME = 'videosMedia.json'
+const videosPath = path.join(__dirname, VIDEOS_DIR)
+
+const CODEC_MAP = {
+  h264: 'H264_mpeg4',
+  vp8: 'VP8_WEBM',
+}
+
+const getVideoInfo = async (videoName) => {
+  const videoPath = path.join(videosPath, videoName)
+
+  const metadata = await ffprobe(videoPath)
+  const stream = metadata.streams.find((s) => s.codec_type === 'video')
+
+  return {
+    id: faker.random.uuid(),
+    codec: CODEC_MAP[stream.codec_name],
+    pixelWidth: stream.width,
+    pixelHeight: stream.height,
+    duration: Math.floor(metadata.format.duration),
+    size: metadata.format.size,
+    location: {
+      URL: HOSTED_ASSET_PREFIX + videoName,
+    },
+  }
+}
+
+const main = async () => {
+  const videos = await readdir(videosPath)
+
+  const promises = videos.map(getVideoInfo)
+  const infos = await Promise.all(promises)
+  await saveToFile(infos, OUTPUT_FILENAME)
+}
+
+main()

packages/app/scripts/mocking/utils.js

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path')
+const fs = require('fs')
+const { promisify } = require('util')
+const mkdir = promisify(fs.mkdir)
+const writeFile = promisify(fs.writeFile)
+
+const OUTPUT_DIR = 'generated'
+
+const randomRange = (min, max) => {
+  return Math.random() * (max - min) + min
+}
+
+const saveToFile = async (object, filename) => {
+  const jsonified = JSON.stringify(object)
+
+  const outputPath = path.join(__dirname, OUTPUT_DIR)
+  await mkdir(outputPath, { recursive: true })
+  const fileOutputPath = path.join(outputPath, filename)
+  await writeFile(fileOutputPath, jsonified)
+}
+
+module.exports = {
+  randomRange,
+  saveToFile,
+}

packages/app/src/api/queries/__generated__/GetChannel.ts

@@ -14,8 +14,7 @@ export interface GetChannel_channel_videos_category {
 
 export interface GetChannel_channel_videos_media_location_HTTPVideoMediaLocation {
   __typename: "HTTPVideoMediaLocation";
-  host: string;
-  port: number | null;
+  URL: string;
 }
 
 export interface GetChannel_channel_videos_media_location_JoystreamVideoMediaLocation {
@@ -27,6 +26,7 @@ export type GetChannel_channel_videos_media_location = GetChannel_channel_videos
 
 export interface GetChannel_channel_videos_media {
   __typename: "VideoMedia";
+  id: string;
   pixelHeight: number;
   pixelWidth: number;
   location: GetChannel_channel_videos_media_location;

packages/app/src/api/queries/__generated__/GetFeaturedVideos.ts

@@ -8,51 +8,53 @@
 // ====================================================
 
 export interface GetFeaturedVideos_featured_videos_category {
-  __typename: "Category";
-  id: string;
+  __typename: 'Category'
+  id: string
 }
 
 export interface GetFeaturedVideos_featured_videos_media_location_HTTPVideoMediaLocation {
-  __typename: "HTTPVideoMediaLocation";
-  host: string;
-  port: number | null;
+  __typename: 'HTTPVideoMediaLocation'
+  URL: string
 }
 
 export interface GetFeaturedVideos_featured_videos_media_location_JoystreamVideoMediaLocation {
-  __typename: "JoystreamVideoMediaLocation";
-  dataObjectID: string;
+  __typename: 'JoystreamVideoMediaLocation'
+  dataObjectID: string
 }
 
-export type GetFeaturedVideos_featured_videos_media_location = GetFeaturedVideos_featured_videos_media_location_HTTPVideoMediaLocation | GetFeaturedVideos_featured_videos_media_location_JoystreamVideoMediaLocation;
+export type GetFeaturedVideos_featured_videos_media_location =
+  | GetFeaturedVideos_featured_videos_media_location_HTTPVideoMediaLocation
+  | GetFeaturedVideos_featured_videos_media_location_JoystreamVideoMediaLocation
 
 export interface GetFeaturedVideos_featured_videos_media {
-  __typename: "VideoMedia";
-  pixelHeight: number;
-  pixelWidth: number;
-  location: GetFeaturedVideos_featured_videos_media_location;
+  __typename: 'VideoMedia'
+  id: string
+  pixelHeight: number
+  pixelWidth: number
+  location: GetFeaturedVideos_featured_videos_media_location
 }
 
 export interface GetFeaturedVideos_featured_videos_channel {
-  __typename: "Channel";
-  id: string;
-  avatarPhotoURL: string | null;
-  handle: string;
+  __typename: 'Channel'
+  id: string
+  avatarPhotoURL: string | null
+  handle: string
 }
 
 export interface GetFeaturedVideos_featured_videos {
-  __typename: "Video";
-  id: string;
-  title: string;
-  description: string;
-  category: GetFeaturedVideos_featured_videos_category;
-  views: number;
-  duration: number;
-  thumbnailURL: string;
-  publishedOnJoystreamAt: GQLDate;
-  media: GetFeaturedVideos_featured_videos_media;
-  channel: GetFeaturedVideos_featured_videos_channel;
+  __typename: 'Video'
+  id: string
+  title: string
+  description: string
+  category: GetFeaturedVideos_featured_videos_category
+  views: number
+  duration: number
+  thumbnailURL: string
+  publishedOnJoystreamAt: GQLDate
+  media: GetFeaturedVideos_featured_videos_media
+  channel: GetFeaturedVideos_featured_videos_channel
 }
 
 export interface GetFeaturedVideos {
-  featured_videos: GetFeaturedVideos_featured_videos[];
+  featured_videos: GetFeaturedVideos_featured_videos[]
 }

packages/app/src/api/queries/__generated__/GetVideo.ts

@@ -14,8 +14,7 @@ export interface GetVideo_video_category {
 
 export interface GetVideo_video_media_location_HTTPVideoMediaLocation {
   __typename: "HTTPVideoMediaLocation";
-  host: string;
-  port: number | null;
+  URL: string;
 }
 
 export interface GetVideo_video_media_location_JoystreamVideoMediaLocation {
@@ -27,6 +26,7 @@ export type GetVideo_video_media_location = GetVideo_video_media_location_HTTPVi
 
 export interface GetVideo_video_media {
   __typename: "VideoMedia";
+  id: string;
   pixelHeight: number;
   pixelWidth: number;
   location: GetVideo_video_media_location;

packages/app/src/api/queries/__generated__/GetVideos.ts

@@ -14,8 +14,7 @@ export interface GetVideos_videos_category {
 
 export interface GetVideos_videos_media_location_HTTPVideoMediaLocation {
   __typename: "HTTPVideoMediaLocation";
-  host: string;
-  port: number | null;
+  URL: string;
 }
 
 export interface GetVideos_videos_media_location_JoystreamVideoMediaLocation {
@@ -27,6 +26,7 @@ export type GetVideos_videos_media_location = GetVideos_videos_media_location_HT
 
 export interface GetVideos_videos_media {
   __typename: "VideoMedia";
+  id: string;
   pixelHeight: number;
   pixelWidth: number;
   location: GetVideos_videos_media_location;

packages/app/src/api/queries/__generated__/Search.ts

@@ -14,8 +14,7 @@ export interface Search_search_item_Video_category {
 
 export interface Search_search_item_Video_media_location_HTTPVideoMediaLocation {
   __typename: "HTTPVideoMediaLocation";
-  host: string;
-  port: number | null;
+  URL: string;
 }
 
 export interface Search_search_item_Video_media_location_JoystreamVideoMediaLocation {
@@ -27,6 +26,7 @@ export type Search_search_item_Video_media_location = Search_search_item_Video_m
 
 export interface Search_search_item_Video_media {
   __typename: "VideoMedia";
+  id: string;
   pixelHeight: number;
   pixelWidth: number;
   location: Search_search_item_Video_media_location;

packages/app/src/api/queries/__generated__/VideoFields.ts

@@ -14,8 +14,7 @@ export interface VideoFields_category {
 
 export interface VideoFields_media_location_HTTPVideoMediaLocation {
   __typename: "HTTPVideoMediaLocation";
-  host: string;
-  port: number | null;
+  URL: string;
 }
 
 export interface VideoFields_media_location_JoystreamVideoMediaLocation {
@@ -27,6 +26,7 @@ export type VideoFields_media_location = VideoFields_media_location_HTTPVideoMed
 
 export interface VideoFields_media {
   __typename: "VideoMedia";
+  id: string;
   pixelHeight: number;
   pixelWidth: number;
   location: VideoFields_media_location;

packages/app/src/api/queries/__generated__/VideoMediaFields.ts

@@ -0,0 +1,28 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: VideoMediaFields
+// ====================================================
+
+export interface VideoMediaFields_location_HTTPVideoMediaLocation {
+  __typename: "HTTPVideoMediaLocation";
+  URL: string;
+}
+
+export interface VideoMediaFields_location_JoystreamVideoMediaLocation {
+  __typename: "JoystreamVideoMediaLocation";
+  dataObjectID: string;
+}
+
+export type VideoMediaFields_location = VideoMediaFields_location_HTTPVideoMediaLocation | VideoMediaFields_location_JoystreamVideoMediaLocation;
+
+export interface VideoMediaFields {
+  __typename: "VideoMedia";
+  id: string;
+  pixelHeight: number;
+  pixelWidth: number;
+  location: VideoMediaFields_location;
+}

packages/app/src/api/queries/videos.ts

@@ -1,5 +1,21 @@
 import gql from 'graphql-tag'
 
+const videoMediaFieldsFragment = gql`
+  fragment VideoMediaFields on VideoMedia {
+    id
+    pixelHeight
+    pixelWidth
+    location {
+      ... on HTTPVideoMediaLocation {
+        URL
+      }
+      ... on JoystreamVideoMediaLocation {
+        dataObjectID
+      }
+    }
+  }
+`
+
 export const videoFieldsFragment = gql`
   fragment VideoFields on Video {
     id
@@ -13,17 +29,7 @@ export const videoFieldsFragment = gql`
     thumbnailURL
     publishedOnJoystreamAt
     media {
-      pixelHeight
-      pixelWidth
-      location {
-        ... on HTTPVideoMediaLocation {
-          host
-          port
-        }
-        ... on JoystreamVideoMediaLocation {
-          dataObjectID
-        }
-      }
+      ...VideoMediaFields
     }
     channel {
       id
@@ -31,6 +37,7 @@ export const videoFieldsFragment = gql`
       handle
     }
   }
+  ${videoMediaFieldsFragment}
 `
 
 export const GET_VIDEOS = gql`

packages/app/src/mocking/data/index.ts

@@ -1,3 +1,5 @@
 export { default as mockVideos } from './mockVideos'
+export { FEATURED_VIDEOS_INDEXES } from './mockFeaturedVideos'
+export { default as mockVideosMedia } from './mockVideosMedia'
 export { default as mockChannels } from './mockChannels'
 export { default as mockCategories } from './mockCategories'

packages/app/src/mocking/data/mockCategories.ts

@@ -1,26 +1,8 @@
 import { CategoryFields } from '@/api/queries/__generated__/CategoryFields'
+import rawCategories from './raw/categories.json'
 
-type RawCategory = Omit<CategoryFields, '__typename'>
+type MockCategory = CategoryFields
 
-const rawCategories: RawCategory[] = [
-  {
-    id: 'db931957-f905-4c40-b708-85fcabcba4f9',
-    name: 'Sport',
-  },
-  {
-    id: 'a8f16c74-7040-4c61-afef-ca70b90b0c03',
-    name: 'Health & Fitness',
-  },
-  {
-    id: '1429bd8e-b5d9-426a-9090-83002ca2ea9e',
-    name: 'Lifestyle',
-  },
-  {
-    id: '02c287dc-0b35-41f8-a494-9d98e312fbff',
-    name: 'Business',
-  },
-]
-
-const mockCategories: CategoryFields[] = rawCategories.map((c) => ({ ...c, __typename: 'Category' }))
+const mockCategories: MockCategory[] = rawCategories.map((c) => ({ ...c, __typename: 'Category' }))
 
 export default mockCategories

packages/app/src/mocking/data/mockChannels.ts

@@ -1,68 +1,14 @@
-import { shuffle } from 'lodash'
-import { channelSources, coverSources } from './mockImages'
+import { channelAvatarSources, channelPosterSources } from './mockImages'
 import { ChannelFields } from '@/api/queries/__generated__/ChannelFields'
+import rawChannels from './raw/channels.json'
 
-const rawChannels = [
-  {
-    id: 'acc5d2e6-9769-410f-a75f-dca4e3311ef5',
-    handle: 'eleifend',
-    totalViews: 3743422,
-  },
-  {
-    id: '8ec449d7-ea83-4733-8844-24f4ec6df796',
-    handle: 'ipsum primis in faucibus',
-    totalViews: 125,
-  },
-  {
-    id: 'b0f895d7-06eb-4f0a-83a6-914ac89a1e3b',
-    handle: 'augue luctus tincidunt',
-    totalViews: 3189965,
-  },
-  {
-    id: '5c9237ae-34af-4c6a-b175-7e0e2e632d0b',
-    handle: 'vel',
-    totalViews: 3759,
-  },
-  {
-    id: 'e7d5f6c0-e4a5-43dc-a950-160418867ad1',
-    handle: 'elementum ligula',
-    totalViews: 16,
-  },
-  {
-    id: '7df156ea-b7be-4911-b721-e25be826011f',
-    handle: 'phasellus sit amet erat nulla',
-    totalViews: 4344626,
-  },
-  {
-    id: 'c81d9e66-fc1a-4c3c-95b4-a2589e19d430',
-    handle: 'amet sapien dignissim',
-    totalViews: 239128,
-  },
-  {
-    id: 'ca51ed2b-0ae7-4806-bc12-327326c47ff3',
-    handle: 'maecenas rhoncus aliquam',
-    totalViews: 1300671,
-  },
-  {
-    id: '015f411a-5ebd-40a3-aee5-9fab3b433bb0',
-    handle: 'et commodo vulputate justo',
-    totalViews: 4834863,
-  },
-  {
-    id: 'e9bc9b46-04c6-49a4-ab26-445a271f5a06',
-    handle: 'in',
-    totalViews: 1509,
-  },
-]
+type MockChannel = ChannelFields
 
-type RawChannel = ChannelFields
-
-const shuffledRawChannels = shuffle(rawChannels)
-const mockChannels: RawChannel[] = shuffledRawChannels.map((rawChannel, idx) => ({
+const mockChannels: MockChannel[] = rawChannels.map((rawChannel, idx) => ({
   ...rawChannel,
   __typename: 'Channel',
-  avatarPhotoURL: channelSources[idx % channelSources.length],
-  coverPhotoURL: coverSources[idx % coverSources.length],
+  avatarPhotoURL: channelAvatarSources[idx % channelAvatarSources.length],
+  coverPhotoURL: channelPosterSources[idx % channelPosterSources.length],
 }))
 
 export default mockChannels

packages/app/src/mocking/data/mockFeaturedVideos.ts

@@ -0,0 +1 @@
+export const FEATURED_VIDEOS_INDEXES = [5, 8, 10, 15, 17, 19, 22]

packages/app/src/mocking/data/mockImages.ts

@@ -1,4 +1,4 @@
-export const channelSources = [
+export const channelAvatarSources = [
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-avatars/1.jpg',
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-avatars/2.jpg',
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-avatars/3.jpg',
@@ -11,7 +11,7 @@ export const channelSources = [
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-avatars/10.jpg',
 ]
 
-export const posterSources = [
+export const channelPosterSources = [
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/1.jpg',
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/2.jpg',
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/3.jpg',
@@ -24,7 +24,7 @@ export const posterSources = [
   'https://eu-central-1.linodeobjects.com/atlas-assets/channel-posters/10.jpg',
 ]
 
-export const coverSources = [
+export const thumbnailSources = [
   'https://eu-central-1.linodeobjects.com/atlas-assets/video-thumbnails/1.jpg',
   'https://eu-central-1.linodeobjects.com/atlas-assets/video-thumbnails/2.jpg',
   'https://eu-central-1.linodeobjects.com/atlas-assets/video-thumbnails/3.jpg',

packages/app/src/mocking/data/mockVideos.ts

@@ -1,111 +1,16 @@
-import { shuffle } from 'lodash'
-import { posterSources } from './mockImages'
+import { thumbnailSources } from './mockImages'
 import { VideoFields } from '@/api/queries/__generated__/VideoFields'
+import rawVideos from './raw/videos.json'
 
-const rawVideos = [
-  {
-    id: 'fbe69436-80a7-4695-b154-57fa274ec4fc',
-    title: 'semper sapien a libero',
-    description:
-      'Nam dui. Proin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis. Ut at dolor quis odio consequat varius. Integer ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi. Nam ultrices, libero non mattis pulvinar, nulla pede ullamcorper augue, a suscipit nulla elit ac nulla.',
-    views: 888346,
-    publishedOnJoystreamAt: '2017-08-25T13:40:41Z',
-    duration: 487,
-  },
-  {
-    id: '9afcca7b-f82a-4a79-a664-17dbe55af1e2',
-    title: 'eleifend',
-    description:
-      'Integer ac leo. Pellentesque ultrices mattis odio. Donec vitae nisi. Nam ultrices, libero non mattis pulvinar, nulla pede ullamcorper augue, a suscipit nulla elit ac nulla. Sed vel enim sit amet nunc viverra dapibus. Nulla suscipit ligula in lacus. Curabitur at ipsum ac tellus semper interdum. Mauris ullamcorper purus sit amet nulla. Quisque arcu libero, rutrum ac, lobortis vel, dapibus at, diam. Nam tristique tortor eu pede.',
-    views: 1057608,
-    publishedOnJoystreamAt: '2018-12-04T12:56:11Z',
-    duration: 71,
-  },
-  {
-    id: 'cd214dd2-6f29-4473-a60a-c665c0eb9df0',
-    title: 'vestibulum ante',
-    description:
-      'Donec semper sapien a libero. Nam dui. Proin leo odio, porttitor id, consequat in, consequat ut, nulla. Sed accumsan felis.',
-    views: 960251,
-    publishedOnJoystreamAt: '2013-07-10T13:01:00Z',
-    duration: 442,
-  },
-  {
-    id: '377031af-cd19-41c5-8efe-7a308b33ceb2',
-    title: 'curae nulla',
-    description:
-      'Nulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi. Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque. Quisque porta volutpat erat. Quisque erat eros, viverra eget, congue eget, semper rutrum, nulla. Nunc purus. Phasellus in felis.',
-    views: 529466,
-    publishedOnJoystreamAt: '2019-09-04T14:56:26Z',
-    duration: 315,
-  },
-  {
-    id: '502c026c-a9c4-4042-a6b1-6391e7bb1908',
-    title: 'ac diam',
-    description:
-      'Proin at turpis a pede posuere nonummy. Integer non velit. Donec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra, magna vestibulum aliquet ultrices, erat tortor sollicitudin mi, sit amet lobortis sapien sapien non mi. Integer ac neque. Duis bibendum. Morbi non quam nec dui luctus rutrum. Nulla tellus.',
-    views: 1021837,
-    publishedOnJoystreamAt: '2011-11-07T12:32:01Z',
-    duration: 3606,
-  },
-  {
-    id: '97870b76-b657-4025-94ba-feaaca42c798',
-    title: 'tempor convallis',
-    description:
-      'Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh. Quisque id justo sit amet sapien dignissim vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla dapibus dolor vel est. Donec odio justo, sollicitudin ut, suscipit a, feugiat et, eros. Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.',
-    views: 196110,
-    publishedOnJoystreamAt: '2016-04-30T02:36:12Z',
-    duration: 134,
-  },
-  {
-    id: 'd3ecc339-369d-4c74-b914-3a695ba5a68c',
-    title: 'donec vitae nisi',
-    description:
-      'Vivamus in felis eu sapien cursus vestibulum. Proin eu mi. Nulla ac enim. In tempor, turpis nec euismod scelerisque, quam turpis adipiscing lorem, vitae mattis nibh ligula nec sem. Duis aliquam convallis nunc. Proin at turpis a pede posuere nonummy. Integer non velit. Donec diam neque, vestibulum eget, vulputate ut, ultrices vel, augue.',
-    views: 95954,
-    publishedOnJoystreamAt: '2011-11-23T02:46:49Z',
-    duration: 716,
-  },
-  {
-    id: '7e33bb53-f114-4fc3-adb8-13ad72811a07',
-    title: 'duis mattis egestas metus duis mattis',
-    description:
-      'In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem. Integer tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat. Praesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.',
-    views: 870023,
-    publishedOnJoystreamAt: '2020-01-07T13:17:49Z',
-    duration: 16,
-  },
-  {
-    id: 'c557b154-ee2a-4548-a0c5-4a74774ecf58',
-    title: 'cursus',
-    description:
-      'Mauris lacinia sapien quis libero. Nullam sit amet turpis elementum ligula vehicula consequat. Morbi a ipsum. Integer a nibh.',
-    views: 429603,
-    publishedOnJoystreamAt: '2018-05-16T15:55:50Z',
-    duration: 1181,
-  },
-  {
-    id: 'a07dd663-48f6-4bf7-9212-944660d5a90a',
-    title: 'velit eu est congue velit eu est congue velit eu est congue',
-    description:
-      'Sed sagittis. Nam congue, risus semper porta volutpat, quam pede lobortis ligula, sit amet eleifend pede libero quis orci. Nullam molestie nibh in lectus. Pellentesque at nulla. Suspendisse potenti. Cras in purus eu magna vulputate luctus.',
-    views: 258527,
-    publishedOnJoystreamAt: '2020-08-10T12:32:00Z',
-    duration: 307,
-  },
-]
-
-type RawVideo = Omit<VideoFields, 'media' | 'category' | 'channel' | 'publishedOnJoystreamAt' | 'duration'> & {
+type MockVideo = Omit<VideoFields, 'media' | 'category' | 'channel' | 'publishedOnJoystreamAt' | 'duration'> & {
   publishedOnJoystreamAt: unknown
-  duration: unknown
 }
 
-const shuffledRawVideos = shuffle(rawVideos)
-const mockVideos: RawVideo[] = shuffledRawVideos.map((rawVideo, idx) => {
+const mockVideos: MockVideo[] = rawVideos.map((rawVideo, idx) => {
   return {
     ...rawVideo,
     __typename: 'Video',
-    thumbnailURL: posterSources[idx % posterSources.length],
+    thumbnailURL: thumbnailSources[idx % thumbnailSources.length],
   }
 })
 

packages/app/src/mocking/data/mockVideosMedia.ts

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

packages/app/src/mocking/data/raw/categories.json

@@ -0,0 +1,18 @@
+[
+  {
+    "id": "db931957-f905-4c40-b708-85fcabcba4f9",
+    "name": "Sport"
+  },
+  {
+    "id": "a8f16c74-7040-4c61-afef-ca70b90b0c03",
+    "name": "Health & Fitness"
+  },
+  {
+    "id": "1429bd8e-b5d9-426a-9090-83002ca2ea9e",
+    "name": "Lifestyle"
+  },
+  {
+    "id": "02c287dc-0b35-41f8-a494-9d98e312fbff",
+    "name": "Business"
+  }
+]

packages/app/src/mocking/data/raw/channels.json

@@ -0,0 +1,12 @@
+[
+  { "id": "e619b9e6-f7b5-4624-979f-2ddefbdead26", "handle": "mollitia quasi odit rerum", "totalViews": 91878 },
+  { "id": "e5849d9e-0096-4bc1-97f5-2eb5ffbca99a", "handle": "eligendi consequatur", "totalViews": 55377 },
+  { "id": "88d3f52e-de3e-4b62-8a89-b336ce8dd73d", "handle": "id vel", "totalViews": 140095 },
+  { "id": "d1a9d99c-5a79-4956-ae69-edbc769fe347", "handle": "explicabo officia", "totalViews": 72177 },
+  { "id": "8d29f059-d403-4145-a4f2-ab6e1ad0088a", "handle": "fugit et et", "totalViews": 45519 },
+  { "id": "ff0eb9cc-5421-4648-aa31-e1a6c7ff25e5", "handle": "delectus voluptas veniam aut", "totalViews": 112005 },
+  { "id": "f460ecd2-f76a-47bc-9489-2a36b40c2fe2", "handle": "voluptatibus saepe", "totalViews": 65270 },
+  { "id": "28e58b60-6647-41b0-8bb1-3562f927e56f", "handle": "ut iste quia dolorem", "totalViews": 31754 },
+  { "id": "e7db3770-f3d0-4ea6-b491-0e369dc91279", "handle": "molestias ab optio sit", "totalViews": 10482 },
+  { "id": "f3eb7b52-e94b-48df-a16c-6e3c679f6d9e", "handle": "harum molestias aut dolore", "totalViews": 87730 }
+]

packages/app/src/mocking/data/raw/videos.json

@@ -0,0 +1,702 @@
+[
+  {
+    "id": "10f5241b-1b59-4da0-a6cc-29a26f357984",
+    "title": "nemo iure atque quia",
+    "description": "Et eaque fugit sint quaerat deleniti iste eum maiores. Quidem officia eum assumenda aut beatae. Et et iusto aut.",
+    "views": 28038,
+    "publishedOnJoystreamAt": "2015-04-27T11:59:55.820Z"
+  },
+  {
+    "id": "237bfeab-2fc3-4f42-b6b4-4cf61981a1bd",
+    "title": "consequatur possimus facere nam in qui",
+    "description": "Et mollitia minus voluptas ducimus molestias. Eius et eum est sapiente et et. Animi optio voluptate. Esse fugiat quisquam excepturi optio est excepturi. Voluptates cum est quibusdam et enim.",
+    "views": 142225,
+    "publishedOnJoystreamAt": "2014-09-01T06:01:19.194Z"
+  },
+  {
+    "id": "61c92652-da1f-4f63-a326-6df316d3db94",
+    "title": "et reiciendis numquam vitae",
+    "description": "Cum sit fugiat omnis quo harum sit. Natus beatae voluptatibus sapiente nihil qui vel non quibusdam eius. Magnam officiis doloremque inventore odit. Omnis explicabo aut quibusdam sequi magnam est sunt deleniti ex.",
+    "views": 142223,
+    "publishedOnJoystreamAt": "2014-11-05T08:15:21.837Z"
+  },
+  {
+    "id": "dab5ddc5-48d8-4462-bad4-4350dada023d",
+    "title": "aut quasi et quis ab est",
+    "description": "Provident iusto quidem laborum laudantium hic consequuntur. Minima voluptates consequatur eos quis. Recusandae qui repellat ut facilis aut non corrupti. Voluptatem aut odit. At perspiciatis rerum blanditiis praesentium.",
+    "views": 131799,
+    "publishedOnJoystreamAt": "2011-11-09T16:22:04.159Z"
+  },
+  {
+    "id": "dda36cc7-0e71-4969-bc31-d37c3cb9089b",
+    "title": "voluptatem at autem inventore",
+    "description": "In similique nulla rerum cupiditate odit ut neque doloremque consequatur. Illum voluptas rerum atque cumque. Sunt laborum vel molestias autem laboriosam sunt sed porro omnis. Sed dolore minus. Aliquam sed sit nihil laudantium itaque alias non iure eligendi. Veniam sed natus tempore. Harum dolores et dolorem. Natus non qui. Iusto voluptas hic non totam reiciendis tempore fugit. Et et sint quae aut voluptas ut. Eligendi voluptatibus officiis sunt est mollitia culpa. Est alias praesentium voluptatum ut natus dolores.",
+    "views": 109389,
+    "publishedOnJoystreamAt": "2015-02-17T12:23:03.981Z"
+  },
+  {
+    "id": "134a50d2-c185-406d-a729-cea63cce339e",
+    "title": "deserunt quia alias",
+    "description": "Numquam beatae et illum corrupti. Maiores laboriosam eum exercitationem molestiae. Quas vero iusto mollitia optio. Nobis aspernatur voluptatibus non debitis laboriosam rem aut. Quo quis vitae ut quam voluptatem. Magni sed asperiores voluptate. Magnam reprehenderit occaecati sint enim. Sed aut neque voluptatum et in placeat. Et voluptatum esse autem consequatur dolorem nobis magni. Praesentium laudantium molestiae asperiores aut dolores amet. Doloribus sequi sint blanditiis et quia aut officiis ea.",
+    "views": 94397,
+    "publishedOnJoystreamAt": "2018-12-13T12:27:08.662Z"
+  },
+  {
+    "id": "332d167f-c9d0-4a8c-840f-93cc7a4f2588",
+    "title": "aliquam neque quaerat eos quae minus",
+    "description": "Dolores blanditiis magnam possimus qui vel quia placeat. Consequuntur provident ut expedita velit dolores commodi asperiores totam ad. Consectetur et iste nemo eum ut veniam. Excepturi placeat et iure praesentium consequatur quibusdam in. Quae doloribus eum nesciunt quia laborum minus. Dolor animi qui fugit et. Sit fugit delectus sit qui enim expedita id excepturi.",
+    "views": 56231,
+    "publishedOnJoystreamAt": "2017-06-20T14:26:53.235Z"
+  },
+  {
+    "id": "92383791-15f4-47a4-bb8d-fef38fa0e0cf",
+    "title": "odit necessitatibus est commodi sunt ab",
+    "description": "Molestias quidem qui eos. Aut ipsam rerum et consectetur perferendis ut est ut. Repellendus ut aut et voluptatem consectetur est est rem aperiam. Officiis repellendus et sit quidem at sit. Minima totam neque quia voluptatibus quia sit eum.",
+    "views": 19205,
+    "publishedOnJoystreamAt": "2017-08-10T00:00:30.498Z"
+  },
+  {
+    "id": "076bf856-da97-4be8-a396-99c08fd2add7",
+    "title": "omnis perferendis maiores earum error",
+    "description": "Eaque commodi dolor velit tempora optio modi aut atque. Ipsam delectus nesciunt qui vero et. Reprehenderit ullam qui ea excepturi porro sed asperiores quia minus. Commodi quisquam est incidunt quidem autem quia voluptas. Eos voluptatibus dolorem tempore rerum et nostrum perspiciatis. Nostrum cum ipsum harum. Doloremque sit sed nulla dolores aut dolor ut ut. Explicabo accusantium ut possimus enim incidunt sint explicabo a vel. Aut voluptas qui. Blanditiis quidem maiores ullam repellat nisi sed. Veritatis voluptate dolorem expedita. Quidem ducimus in ut expedita repellat maiores laboriosam id.",
+    "views": 96135,
+    "publishedOnJoystreamAt": "2015-07-04T12:36:12.568Z"
+  },
+  {
+    "id": "3331ae63-5186-46a4-a50d-b707c8257a77",
+    "title": "nam eos corporis molestiae in",
+    "description": "Est occaecati consequatur iste quis. Aut ad deserunt eligendi commodi minima. Nemo in neque. Voluptatem unde fugit quas libero quod. Eius optio tempora molestiae doloribus.",
+    "views": 96149,
+    "publishedOnJoystreamAt": "2018-10-26T13:10:22.775Z"
+  },
+  {
+    "id": "6d008cc1-a278-4a77-b86e-4f414f0ad76e",
+    "title": "possimus repellendus earum vel",
+    "description": "Optio aut sequi et ducimus a qui tenetur ratione. Velit sunt at vel nemo vitae perferendis alias. Dolor porro quis itaque sequi quae ut id repudiandae. Dicta et unde. Et porro perferendis aut consectetur et quae consequuntur culpa. Dolor eos eius consequatur. A est nesciunt qui saepe perspiciatis accusamus. Provident cumque ut quas quia voluptas. In quo recusandae ipsum magnam similique dolore commodi. Consequatur beatae rerum quibusdam incidunt placeat aut cumque qui beatae.",
+    "views": 117159,
+    "publishedOnJoystreamAt": "2014-01-13T09:46:45.198Z"
+  },
+  {
+    "id": "13cfce04-a0f6-4677-8cc6-47122aa99414",
+    "title": "atque aspernatur vitae aut omnis cum",
+    "description": "Explicabo maxime rerum similique. Eius eaque corrupti qui. Velit error occaecati in eaque vel est at omnis. Enim at illum autem veniam molestiae ut sed.",
+    "views": 46636,
+    "publishedOnJoystreamAt": "2016-02-04T06:51:15.538Z"
+  },
+  {
+    "id": "242cf1dd-c80e-48fa-8a75-eff1bbd4ccd3",
+    "title": "et assumenda nemo molestias debitis voluptates",
+    "description": "Quos molestias natus tempore. Aspernatur non officiis eum enim maiores. Laudantium pariatur velit enim. Id rerum qui est voluptatibus molestias est porro quia quia. Dolor sunt fuga incidunt sint laboriosam ut. Magni eum fuga voluptatem atque aliquid. Iure et voluptas esse qui reiciendis in et.",
+    "views": 128115,
+    "publishedOnJoystreamAt": "2017-11-03T03:20:36.102Z"
+  },
+  {
+    "id": "10319bf0-2c84-46bb-b0db-52b2bb42d96e",
+    "title": "nesciunt repellat totam",
+    "description": "Neque libero amet. Quia a maxime dicta incidunt cumque enim. Illum saepe fuga dolorem. Ut quia alias impedit commodi in. Asperiores quis deleniti laboriosam iusto qui culpa sit.",
+    "views": 123350,
+    "publishedOnJoystreamAt": "2018-08-01T08:36:49.909Z"
+  },
+  {
+    "id": "8ac942b2-905b-4e87-9c0d-edef9a580287",
+    "title": "hic sed et sit est nulla",
+    "description": "Totam odit ut aliquam voluptatem dolore. Blanditiis dolor numquam. Voluptatibus corporis adipisci quae quaerat id voluptatibus et. Qui voluptas quia consequatur aspernatur cupiditate in asperiores. Velit reiciendis facilis asperiores consectetur quia voluptatem. Porro cupiditate temporibus rem. Sit deserunt nemo nisi iure in ipsa. Velit non cupiditate dolorem.",
+    "views": 40627,
+    "publishedOnJoystreamAt": "2020-08-21T20:40:20.535Z"
+  },
+  {
+    "id": "1264e38f-38f4-48eb-8f46-abc95d7999fe",
+    "title": "ut perspiciatis illo",
+    "description": "Nam consequatur architecto consequatur omnis sit. Soluta at doloribus pariatur omnis ut totam sunt. Animi et harum in nostrum. Eligendi amet et perferendis corporis aut exercitationem et et suscipit. Dolores eos molestiae ut quod non consequatur qui enim.",
+    "views": 111297,
+    "publishedOnJoystreamAt": "2018-05-05T12:27:34.119Z"
+  },
+  {
+    "id": "cf390a49-be59-41a5-ab61-5de7e6a73cd1",
+    "title": "ipsam sed possimus et",
+    "description": "Nisi vitae vitae eos inventore distinctio accusamus et voluptatem voluptatem. In et itaque nostrum velit quis officia cumque accusamus. Adipisci quia reiciendis aut velit veniam. Sit laboriosam sit voluptas in tempora eum voluptatem dolorem labore. Sapiente explicabo porro qui qui quis esse qui harum. Et minus ab eos repudiandae unde. Ea dolorem qui. Voluptatem ratione aperiam eos et nisi quis. Mollitia sequi officia officiis aut et explicabo suscipit ex. Eos delectus molestias omnis. Praesentium nihil amet suscipit ut qui qui sit incidunt quo. Molestiae delectus aut consequatur corporis ex consequuntur quis.",
+    "views": 41874,
+    "publishedOnJoystreamAt": "2015-05-17T00:39:59.055Z"
+  },
+  {
+    "id": "737a4360-620e-420d-b274-13232b04727d",
+    "title": "voluptas provident accusantium suscipit et itaque",
+    "description": "Atque sint fugiat magni non et sit rerum ullam consequatur. Sunt quibusdam illum dolor. Corrupti earum ut veniam velit molestiae neque nemo.",
+    "views": 35103,
+    "publishedOnJoystreamAt": "2019-11-17T10:18:47.632Z"
+  },
+  {
+    "id": "c54322e0-fe8a-4a1b-b854-b8e50b87c7f4",
+    "title": "et nulla omnis",
+    "description": "Sequi necessitatibus nihil sed. Magni odio explicabo quisquam sed excepturi. Commodi quibusdam et aut. Non explicabo in animi voluptatem eum.",
+    "views": 106821,
+    "publishedOnJoystreamAt": "2014-05-03T23:41:06.614Z"
+  },
+  {
+    "id": "68063c2b-291d-4477-8dc1-94802dc51149",
+    "title": "provident quas repellat provident aut",
+    "description": "At minus praesentium consequuntur vitae dicta. Quam qui ea placeat assumenda omnis id voluptatem soluta. Magni dolores quam. Qui suscipit molestiae inventore et voluptas eius dignissimos. Voluptatem aspernatur velit in voluptatem velit aut quod. Veniam architecto ipsa nemo quasi omnis pariatur possimus voluptatem ut. Necessitatibus est sint laboriosam sed et. Veritatis hic ea voluptatum ducimus excepturi rerum sit repellat ad. Deleniti molestiae adipisci aperiam aut tempore minima et. Qui maiores est aliquid. Quas totam commodi natus et. Sit nam minus qui.",
+    "views": 136734,
+    "publishedOnJoystreamAt": "2014-09-15T22:27:51.124Z"
+  },
+  {
+    "id": "7f650ed8-c079-4c07-bef6-11a010a81de1",
+    "title": "asperiores ut saepe expedita",
+    "description": "Et voluptatem consectetur ut. Possimus eos eos cum ut ipsum. Fugiat quis voluptatibus corporis expedita cum et. Voluptas non perspiciatis ducimus. Doloremque voluptatem quia facere est consequatur sunt. Nemo et at. Sint dicta qui aspernatur voluptas. Eaque vitae quaerat magni repellat nobis. Quia sit cum laudantium.",
+    "views": 133520,
+    "publishedOnJoystreamAt": "2015-02-25T19:59:16.192Z"
+  },
+  {
+    "id": "98cb9167-6575-4b8a-a926-6b5641d52cc2",
+    "title": "facere aut rem",
+    "description": "Occaecati aliquid libero impedit aut. Eligendi fugiat ut ipsa reprehenderit quo qui. Debitis sit nihil cupiditate nihil nobis adipisci.",
+    "views": 49632,
+    "publishedOnJoystreamAt": "2017-06-26T23:18:51.860Z"
+  },
+  {
+    "id": "d66c4143-d22a-4aa7-8343-4a0bbede8eaf",
+    "title": "occaecati sit et",
+    "description": "Error illo laboriosam. Consequatur vel nam dolorem quas rerum voluptatum aperiam voluptates. Est amet delectus. Architecto eum consequuntur dolor cum amet. Quos sit temporibus. Reiciendis accusantium ex nisi et corporis nam. Alias nobis quibusdam rem qui et ullam.",
+    "views": 24879,
+    "publishedOnJoystreamAt": "2017-06-06T20:50:18.114Z"
+  },
+  {
+    "id": "1e0738e2-b4e4-4f36-a7ae-75164286e9bc",
+    "title": "perspiciatis est dolor enim sed et",
+    "description": "Corporis hic suscipit qui et commodi voluptatum. Sit esse doloremque necessitatibus occaecati placeat quia veniam quis minus. Quo quos enim. Consequatur iusto nemo at occaecati voluptatem recusandae. Impedit rem quis quisquam modi dolorem tempore tenetur ut nisi. Repellat eos repudiandae. Ipsam dignissimos consequatur quaerat velit pariatur odio itaque.",
+    "views": 143576,
+    "publishedOnJoystreamAt": "2011-07-06T21:52:45.040Z"
+  },
+  {
+    "id": "35837d64-5feb-4f3d-95b4-e1fb808c29d3",
+    "title": "et explicabo modi dolores vitae quos",
+    "description": "Dolorem molestias dolor harum voluptas quisquam unde quos. Repellat ipsa velit quos neque illum voluptas et quibusdam veritatis. At molestias id et sunt ratione consequatur sequi maxime ut. Aut autem accusamus quaerat et et sit. Corporis consequatur dolore soluta sapiente. At fugiat laudantium neque et labore ullam incidunt vel quos.",
+    "views": 93619,
+    "publishedOnJoystreamAt": "2019-10-03T01:36:51.872Z"
+  },
+  {
+    "id": "b72a3dec-341b-41ae-9b10-a15cf0f36053",
+    "title": "sint et asperiores aut",
+    "description": "Est quos facilis omnis culpa. Est voluptas nisi placeat est qui dignissimos hic quod. Qui dignissimos ullam. Quis inventore qui eligendi voluptatem voluptatem. Eligendi in nam ex necessitatibus qui aut est. Odio quo occaecati velit ut doloremque voluptatem illum. Incidunt earum numquam mollitia incidunt ipsam facilis quod voluptatum accusantium. Voluptas atque aliquid officia. Et ducimus voluptatem quia aliquid. Quaerat aliquid doloribus explicabo odio quisquam. Itaque eum itaque beatae ea rerum iusto. Consequuntur ut et repellendus debitis adipisci officiis.",
+    "views": 137409,
+    "publishedOnJoystreamAt": "2018-02-11T21:15:50.568Z"
+  },
+  {
+    "id": "99335e44-ae50-4bd0-8145-08f03c2852da",
+    "title": "aperiam consequatur asperiores amet et",
+    "description": "Perspiciatis unde ad. Nobis non in quos nam sit blanditiis id hic repellat. Dolor vero odit laborum distinctio qui. Dolores et neque alias non neque blanditiis maiores molestias. Quia blanditiis consequatur et eum dolor. Vitae doloremque quod aut reprehenderit repellendus assumenda. Suscipit consequatur rerum maiores. Ut eaque eius cupiditate vel sit deserunt eaque. Beatae quo voluptas dolorem tempore ut saepe alias laudantium occaecati. Temporibus consectetur neque aliquid tempore modi facilis culpa. Explicabo impedit iste. Voluptate sed quaerat labore ad vel est id.",
+    "views": 36148,
+    "publishedOnJoystreamAt": "2012-01-21T15:11:56.208Z"
+  },
+  {
+    "id": "b5e2ead4-8c79-47e3-8995-0e9b756d7541",
+    "title": "exercitationem natus dolore voluptas nulla nesciunt",
+    "description": "Minus velit quo sequi perspiciatis qui. Sit id aspernatur nam laudantium possimus cum sed. Dignissimos sapiente minima voluptate nihil minus. Nostrum corporis quos minus.",
+    "views": 72404,
+    "publishedOnJoystreamAt": "2017-10-08T08:20:00.357Z"
+  },
+  {
+    "id": "4832f303-0807-4112-becd-1c36ec8b0d9c",
+    "title": "voluptatem fugiat sequi reiciendis",
+    "description": "Architecto animi ut eveniet ipsum quae consequatur omnis ullam. Sit et atque esse et perferendis quia. Illum sit nisi est nisi. Corporis voluptas quam facere et. Quia sit sed consequatur qui rerum. Id recusandae illum ipsam reiciendis qui. Tenetur non quis et magni quisquam eaque omnis est sapiente. Expedita quis et iste expedita.",
+    "views": 48430,
+    "publishedOnJoystreamAt": "2014-01-02T20:26:22.720Z"
+  },
+  {
+    "id": "19231896-b78a-42aa-909c-522e934a6a18",
+    "title": "laborum officiis eos placeat",
+    "description": "Ut doloremque eaque ea omnis rem commodi saepe in debitis. Aperiam excepturi tempore. Suscipit officiis quidem beatae commodi et. Recusandae non expedita necessitatibus praesentium laudantium. Provident repudiandae sunt quisquam qui numquam molestiae et error. Exercitationem deleniti voluptatem consequatur architecto quis voluptatum itaque quia aut. Ut vitae et. Voluptas ratione asperiores et consequuntur rerum et.",
+    "views": 105402,
+    "publishedOnJoystreamAt": "2016-02-16T09:33:09.328Z"
+  },
+  {
+    "id": "123c4050-6f37-4379-ab7d-f0824fd85b2f",
+    "title": "voluptates cumque ut voluptas praesentium",
+    "description": "Fugiat unde nostrum quisquam labore. Enim in dolore et eveniet omnis. Qui aut quo soluta consectetur quia veritatis dolores. Vel ut unde totam soluta quasi dolorum quia dolor. Expedita fuga sit accusantium nihil illo. Dolore ut qui dolorum qui vitae non. Recusandae est est. Assumenda exercitationem praesentium assumenda aut libero. Asperiores voluptas vel modi nostrum sint officiis minima sint ut. Ut qui in sapiente praesentium sunt officiis omnis nisi ullam.",
+    "views": 31417,
+    "publishedOnJoystreamAt": "2014-03-13T13:31:13.417Z"
+  },
+  {
+    "id": "be6e1134-f555-4833-ad96-4a2318de16a6",
+    "title": "quidem provident voluptatem ut",
+    "description": "Iure aut voluptas cupiditate quam officiis distinctio sunt corrupti. Accusantium a consequuntur quo. Sint voluptate non ut accusamus. Quis recusandae illum. Explicabo quis ipsa saepe itaque. Ab quasi et reprehenderit. Dolor iure soluta dignissimos doloremque repudiandae. Suscipit expedita fugit. Vero officiis fugiat nesciunt consequatur velit sit impedit beatae.",
+    "views": 23111,
+    "publishedOnJoystreamAt": "2015-01-26T06:34:10.837Z"
+  },
+  {
+    "id": "3041b7c9-2314-4019-a206-c3a0323ca03a",
+    "title": "autem dolor ducimus in voluptas quod",
+    "description": "Id necessitatibus quisquam. Amet consectetur saepe ipsam beatae. Et qui non ea rerum. Voluptatibus mollitia nostrum at cupiditate debitis vel. Nostrum rerum qui laboriosam voluptas vel. Rerum vel quisquam quibusdam voluptatem velit voluptas quis. Aliquid debitis sequi eos quasi voluptatem adipisci molestiae sed.",
+    "views": 37327,
+    "publishedOnJoystreamAt": "2020-02-12T02:40:15.154Z"
+  },
+  {
+    "id": "e2ffad81-6ad5-44f5-b112-83e820ecb6b4",
+    "title": "rem error illo",
+    "description": "Dolores vel unde quia. Enim asperiores id quaerat iste sint porro est expedita nobis. Dicta aperiam nisi ex eligendi. Fugiat tenetur quia aut vel alias porro reiciendis voluptates. Fugit eos aut ducimus ut odit.",
+    "views": 91728,
+    "publishedOnJoystreamAt": "2012-05-19T18:50:15.803Z"
+  },
+  {
+    "id": "035cea4d-dcc1-4066-8fad-11f1649cbd8a",
+    "title": "qui est a autem labore",
+    "description": "Laboriosam magni at. Quis distinctio libero. Nihil dolor cupiditate dignissimos voluptas. Voluptatem omnis aliquam possimus molestias quo voluptas laudantium id. Mollitia dolor sit eaque non fuga repellendus. Aliquid nihil rerum velit accusantium assumenda architecto similique enim perferendis. Distinctio dolores recusandae et unde est distinctio veniam aliquid.",
+    "views": 132009,
+    "publishedOnJoystreamAt": "2014-06-28T06:45:20.035Z"
+  },
+  {
+    "id": "4abdee40-e5da-4280-b3fa-6f0a41306fdb",
+    "title": "non aut sapiente et et",
+    "description": "Facilis asperiores libero eius voluptatum nulla dolorem suscipit. Temporibus laboriosam sit inventore earum vitae quos est quos ipsa. Vero minima inventore corporis voluptatem est velit temporibus sit. Et vitae ea magnam praesentium adipisci enim. Ut quos quod repellendus voluptatem. Quo laborum iusto alias aut.",
+    "views": 104552,
+    "publishedOnJoystreamAt": "2015-10-03T03:45:38.306Z"
+  },
+  {
+    "id": "aa839855-4991-4880-bb03-c94769874ab9",
+    "title": "nemo id et quis nisi molestiae",
+    "description": "Perferendis voluptates suscipit tenetur et ab autem. Sint voluptate impedit natus et. Consequatur quos quod. Quas ut nihil provident est magni natus. Eligendi voluptatibus adipisci. Qui rerum facere aut. Quam dolores dolorem incidunt eaque aut quos. Quam voluptas perspiciatis odit ut. Quam repellat enim voluptas voluptas excepturi soluta occaecati sed repellendus.",
+    "views": 130334,
+    "publishedOnJoystreamAt": "2018-10-05T13:41:25.717Z"
+  },
+  {
+    "id": "a9793d5c-07b7-4364-8008-e516bedb05a3",
+    "title": "natus iste ut sed hic",
+    "description": "Molestiae animi accusantium maiores facilis omnis inventore est consectetur quas. Voluptatibus qui inventore tenetur perferendis illum consequuntur blanditiis vel. Dolorem sint repellendus. Voluptate doloribus rerum illum consequuntur ex reiciendis ut eum. Delectus rem quasi veritatis adipisci sed. Exercitationem vel aut omnis eligendi et dolorem. Excepturi repellat temporibus. Delectus eos neque qui vel consequatur provident voluptas.",
+    "views": 4526,
+    "publishedOnJoystreamAt": "2014-01-21T04:05:28.161Z"
+  },
+  {
+    "id": "0bd62827-2dcf-4d22-b455-850949e96748",
+    "title": "qui id ut",
+    "description": "Praesentium officia molestias non rem eos. Ducimus id libero nulla sapiente eos ea. Omnis voluptatem debitis quas ad consequuntur non ducimus nostrum officia. Deleniti dolores accusantium adipisci. Veniam id totam. Excepturi nostrum illo exercitationem dignissimos. Molestiae at laborum ipsum quia incidunt quia. Amet et culpa odio mollitia deleniti minima. Harum accusamus aliquam fugit. Aut dolores et deleniti. Animi nobis consequuntur reiciendis qui nihil velit.",
+    "views": 31735,
+    "publishedOnJoystreamAt": "2019-10-05T15:35:48.432Z"
+  },
+  {
+    "id": "288e513b-8be5-4d99-8a42-57346384aef6",
+    "title": "et non consequuntur quae",
+    "description": "Nemo rem quo. Ex quod architecto qui quo optio. Nisi soluta voluptas et. Sint placeat ullam labore. Recusandae dolor perferendis. Repellendus rerum occaecati eos animi assumenda delectus. Iusto vel ipsa. Unde sunt delectus ut doloribus omnis totam saepe accusamus.",
+    "views": 94564,
+    "publishedOnJoystreamAt": "2020-04-21T23:55:12.550Z"
+  },
+  {
+    "id": "162dc8a1-5484-42cf-9fb8-a7d80101c09b",
+    "title": "nemo velit explicabo quisquam",
+    "description": "Est cupiditate iure saepe repudiandae sed qui. Tempora beatae explicabo. Quasi eos dolorem maiores. Error sit est culpa qui et sint.",
+    "views": 95764,
+    "publishedOnJoystreamAt": "2014-10-25T03:19:15.897Z"
+  },
+  {
+    "id": "82be8137-75b5-4e4a-ad57-33625dbfbf02",
+    "title": "magnam expedita modi quia eos",
+    "description": "Architecto dolore corrupti architecto ea et ipsa quidem quae nulla. Unde molestias quos. Sed qui dolores. Illum eligendi sit voluptatum laudantium ad autem quasi. Placeat in voluptas odit odit voluptatem consectetur dolorum ut. Voluptatem magnam iste. Consequatur numquam deserunt cumque asperiores odio.",
+    "views": 115997,
+    "publishedOnJoystreamAt": "2012-01-28T17:58:53.676Z"
+  },
+  {
+    "id": "9cf50ea6-257e-46d1-b52d-cf8634d8f5fb",
+    "title": "et magni omnis distinctio libero",
+    "description": "Dolores ut doloribus necessitatibus. Deserunt voluptatem deserunt magnam perferendis porro. Nihil earum autem nesciunt vero facere odio. Quaerat harum temporibus assumenda vitae illum architecto dicta. Quae dolorum et ut eum non ut est doloremque. Illo facilis doloremque sed.",
+    "views": 7465,
+    "publishedOnJoystreamAt": "2011-07-20T00:16:38.789Z"
+  },
+  {
+    "id": "ab3f28d9-0775-4a76-977e-c1bd3d5406a2",
+    "title": "architecto ea fugiat voluptatem nemo",
+    "description": "Non facere magnam porro sapiente sint iste rerum ut. Aspernatur unde hic molestias dignissimos et. Illum voluptatem veritatis assumenda recusandae qui qui vel.",
+    "views": 33495,
+    "publishedOnJoystreamAt": "2018-08-27T11:47:15.086Z"
+  },
+  {
+    "id": "aa00e3a1-1064-4660-89e7-6c957edb9d79",
+    "title": "sed omnis quia",
+    "description": "Et sit omnis et necessitatibus vero fuga amet sit. Aspernatur dignissimos voluptate tempore animi quia. Quos eos doloremque modi. Voluptas aspernatur voluptatibus id et. Amet excepturi ullam rerum et quam. Animi dolor ut deleniti ut sunt dolor odio. Dignissimos rem quae temporibus ut est at nulla voluptatum et. Dignissimos magnam alias iusto quos rerum quo odit expedita. Esse dolore ullam qui esse possimus corrupti. Corrupti veniam velit. Suscipit fugiat nesciunt sint.",
+    "views": 140620,
+    "publishedOnJoystreamAt": "2013-06-20T03:53:19.127Z"
+  },
+  {
+    "id": "e5bc8cfa-eb3c-4227-9f7a-3a984f979005",
+    "title": "animi sit esse exercitationem consequatur enim",
+    "description": "Blanditiis consectetur ab aut. Repudiandae sed harum est unde ut consequatur. Quaerat repellendus quam minus odio. Facere maiores harum rerum pariatur voluptatem quia velit et. Fugiat sequi et consequatur rerum est incidunt quia quas aspernatur. Provident architecto accusamus qui voluptatibus natus id voluptatum voluptatem et. Quia nihil dolore provident veniam harum vel consequatur esse ab. Est ut optio est est.",
+    "views": 122437,
+    "publishedOnJoystreamAt": "2013-11-05T16:06:25.140Z"
+  },
+  {
+    "id": "01e106d6-c168-4c0d-b63e-64cecf321443",
+    "title": "magnam voluptas expedita atque autem",
+    "description": "Quas doloremque quidem unde beatae facere aut. Aut molestiae error distinctio odio. Est perferendis provident voluptatibus impedit. Odit voluptatibus recusandae aliquam fugit voluptate ut tempora. Exercitationem amet ut dolor. Sint delectus debitis illo ut fugiat omnis ut. Vel enim omnis. Laborum error consequatur alias provident.",
+    "views": 38622,
+    "publishedOnJoystreamAt": "2019-01-04T02:12:41.796Z"
+  },
+  {
+    "id": "15dc171c-6bb6-4a75-91d0-50debfd1c65b",
+    "title": "dolor qui culpa dolore explicabo",
+    "description": "Alias nostrum officiis ipsam qui nostrum dolores. Amet et assumenda. Animi perspiciatis assumenda alias sapiente accusamus. Nobis harum soluta aut doloremque laborum veritatis dolore omnis quae. Eum amet molestiae repudiandae ipsum ea molestiae earum. A nulla quam maiores. Illum voluptatem similique deserunt blanditiis repudiandae atque amet placeat.",
+    "views": 69168,
+    "publishedOnJoystreamAt": "2016-05-19T21:43:19.912Z"
+  },
+  {
+    "id": "4b106cdb-4b12-4cce-b2d3-42a41736fdfc",
+    "title": "qui laboriosam ullam nesciunt sit nesciunt",
+    "description": "Quibusdam tenetur sit magnam incidunt est aut amet dolorum. Eos enim delectus. Quas quam saepe consequatur ipsa quis qui sint. At qui incidunt voluptates qui numquam mollitia dolor. Quis incidunt dolor velit beatae. Magni sed iure facilis quo doloribus quibusdam sunt. Non placeat at cum. Qui maxime sed velit consequatur et. Quos voluptas et fuga. Minus ut iure aut. Ea qui quibusdam mollitia laborum ut. Ea aut assumenda dolorum non consequatur et et itaque modi.",
+    "views": 1310,
+    "publishedOnJoystreamAt": "2013-02-07T09:51:51.068Z"
+  },
+  {
+    "id": "6278a0ce-54b7-4d5a-85e3-f7a0e50e1fea",
+    "title": "non placeat assumenda corrupti vel nisi",
+    "description": "Enim enim aut veniam adipisci fugiat delectus qui. Consequatur architecto tempore modi sunt. Nam voluptatem in ratione cupiditate. Natus rerum illo.",
+    "views": 110428,
+    "publishedOnJoystreamAt": "2010-12-15T19:29:26.380Z"
+  },
+  {
+    "id": "2a1f9410-371e-47aa-92d1-e392217f3c05",
+    "title": "deserunt quo reprehenderit molestiae quos facilis",
+    "description": "Veniam quisquam aspernatur qui inventore deserunt et. Nulla quos facilis pariatur illo voluptas aut sint. Explicabo est at excepturi a aut. Sint voluptatem ut deleniti voluptatem eum. Aliquid sint voluptatibus labore non. Ea repudiandae consequuntur quo voluptas et corrupti delectus. Aut quisquam odit accusamus est enim veritatis ex. Consequuntur itaque inventore placeat eos cum nulla officia. Reprehenderit repellendus voluptatum.",
+    "views": 120421,
+    "publishedOnJoystreamAt": "2012-03-29T04:29:45.803Z"
+  },
+  {
+    "id": "e9390583-28e3-44de-bce9-c100f11f8307",
+    "title": "praesentium architecto est",
+    "description": "Distinctio qui distinctio minima consequuntur deleniti. A sed quia qui ut et eveniet quasi qui. Facilis id odio perspiciatis omnis voluptatum tempore unde. Illo iusto consequatur.",
+    "views": 115589,
+    "publishedOnJoystreamAt": "2011-03-06T11:56:37.988Z"
+  },
+  {
+    "id": "0f218709-494e-4b1e-bf10-e5053f21e848",
+    "title": "voluptatem cupiditate ut eos",
+    "description": "Ducimus dolorum incidunt ullam et aut voluptas exercitationem et praesentium. Et facilis quo. Nam aut delectus aliquid nesciunt hic.",
+    "views": 43611,
+    "publishedOnJoystreamAt": "2012-04-24T08:28:28.346Z"
+  },
+  {
+    "id": "6d6f67c0-8f31-469a-a643-7b3aef6f8666",
+    "title": "doloribus suscipit eaque odio quas id",
+    "description": "Magni esse ab voluptates rerum quisquam quia vel. Blanditiis enim explicabo voluptas fugit. Saepe ullam facere dolores doloremque quo.",
+    "views": 144757,
+    "publishedOnJoystreamAt": "2014-07-11T08:07:46.135Z"
+  },
+  {
+    "id": "ad380c76-e098-4c61-ad09-5d1f3d636e61",
+    "title": "dignissimos nihil ut deleniti",
+    "description": "Fuga atque occaecati blanditiis aut voluptatem est maxime. Qui deleniti qui voluptatem fugiat facere dolorem iusto et sunt. Est temporibus dolores quia et nostrum suscipit. Voluptas beatae non soluta. Dolorem quae illum enim dignissimos alias beatae est repudiandae facere.",
+    "views": 99866,
+    "publishedOnJoystreamAt": "2016-09-11T01:47:31.125Z"
+  },
+  {
+    "id": "43a85a94-3521-46cc-bf2a-bb248da2214b",
+    "title": "illum ea eaque",
+    "description": "Officiis voluptas est. Veritatis ut quo repellat sit et nihil dolorem facilis exercitationem. Qui omnis sit. Ullam delectus ipsum reprehenderit. Adipisci rem dolorem libero. Libero ex in dolor doloribus natus. Et ut delectus. Suscipit iure eos numquam sint deserunt corrupti nihil.",
+    "views": 123889,
+    "publishedOnJoystreamAt": "2012-10-27T18:39:16.961Z"
+  },
+  {
+    "id": "104a60c8-c3b4-47c1-b07f-0357ff35fbb8",
+    "title": "voluptatum dolorem ut maiores facilis fugiat",
+    "description": "In illo consectetur delectus in. Laudantium earum quam. Voluptas nobis hic quod alias.",
+    "views": 9081,
+    "publishedOnJoystreamAt": "2017-11-20T10:21:32.244Z"
+  },
+  {
+    "id": "e30c946d-9758-41c7-8ad4-afe5f974f95d",
+    "title": "suscipit totam quia",
+    "description": "Dolorem ut voluptas autem voluptas. Autem velit et. Sint molestias veritatis fugit sunt libero vel. Voluptatem dicta inventore porro inventore fugiat qui molestias sint animi. Atque placeat vero est. Quia exercitationem adipisci rerum voluptas beatae unde. Provident eaque veritatis voluptate deleniti quod quasi necessitatibus cumque. Voluptates et rem animi quia rerum possimus qui.",
+    "views": 104042,
+    "publishedOnJoystreamAt": "2013-07-01T08:41:10.849Z"
+  },
+  {
+    "id": "4b5b5302-3088-437e-af84-13290077c0f0",
+    "title": "voluptas qui dolore consectetur consequatur qui",
+    "description": "Maxime similique praesentium minima quia et. Illum aut dolor aut corrupti non placeat dolorum ut. Asperiores unde est.",
+    "views": 4928,
+    "publishedOnJoystreamAt": "2019-05-07T17:23:40.687Z"
+  },
+  {
+    "id": "31c1e417-11ac-4037-aedb-a58d6b793cc8",
+    "title": "itaque recusandae unde",
+    "description": "Est enim qui. Fugiat quia ut veritatis repellendus. Voluptatem ducimus itaque tempora harum veritatis fugiat corrupti possimus. Molestias fugiat voluptatem.",
+    "views": 129745,
+    "publishedOnJoystreamAt": "2019-12-23T11:19:29.511Z"
+  },
+  {
+    "id": "d90efc46-1004-42ee-82ee-e9cf0054c188",
+    "title": "vitae excepturi in debitis voluptatem",
+    "description": "Quia blanditiis voluptatem ut omnis minus. Quibusdam distinctio quasi vitae ab. Repellat tenetur quisquam dolorum dignissimos in maiores et. Laborum dolore nostrum deleniti quas vero et reiciendis officiis. Accusamus optio possimus quia aliquid. Provident voluptatem natus error accusamus esse eum et pariatur. Sunt et est dignissimos eius velit ab dolore praesentium.",
+    "views": 119308,
+    "publishedOnJoystreamAt": "2020-03-17T19:06:38.168Z"
+  },
+  {
+    "id": "d8a74e76-208d-4a76-b3cf-213d0df756d9",
+    "title": "porro aut nemo omnis vel a",
+    "description": "Id ea aut corrupti perferendis consequuntur rem. Omnis dicta nobis eum sit. Dolore itaque et mollitia possimus ut tempora sit. Quas harum incidunt fuga dolores. Error nemo ratione accusantium. Sunt reiciendis minima modi. Voluptas iste maxime cum aliquam cupiditate. Quisquam ut dignissimos reiciendis.",
+    "views": 108892,
+    "publishedOnJoystreamAt": "2019-08-15T14:09:04.551Z"
+  },
+  {
+    "id": "b720a375-32e8-4f56-81d2-437196d151e1",
+    "title": "qui et enim",
+    "description": "Eum temporibus non ut id impedit molestiae veritatis. Repudiandae et nostrum rerum molestias voluptas rem perferendis eaque voluptatem. Praesentium enim aut non. Maiores facilis corrupti vel commodi suscipit hic labore ut quia. Ducimus et vel hic sunt autem voluptatum recusandae officia labore. Reprehenderit ut porro quod molestias sunt at rerum. Molestiae optio voluptas. Facere sit voluptatibus veritatis voluptatem est odit sunt quo. Iste debitis eaque. Et unde eligendi tempore quis deserunt eum sint saepe recusandae. Repellat molestias nihil necessitatibus consequatur porro libero possimus.",
+    "views": 148561,
+    "publishedOnJoystreamAt": "2011-10-11T23:56:17.557Z"
+  },
+  {
+    "id": "b24dc302-550e-4fcb-8927-80bc72b7d935",
+    "title": "et ab tempora laborum in quia",
+    "description": "Amet necessitatibus repudiandae et voluptatum delectus odio consequatur odit. Minima quibusdam repellat ullam nisi sapiente id. Odit similique voluptate dolores quos cumque accusamus sit voluptatem necessitatibus.",
+    "views": 149840,
+    "publishedOnJoystreamAt": "2017-06-11T08:18:50.851Z"
+  },
+  {
+    "id": "2f341a86-5333-4656-a14c-f99b1d9d0dbf",
+    "title": "labore delectus voluptatibus animi",
+    "description": "Exercitationem voluptatum et esse enim placeat eaque. Eveniet sint voluptatibus eveniet dolor sint fugit eos. Facilis perspiciatis voluptatem et delectus sed accusantium. Harum pariatur ipsum deserunt quia alias rerum nesciunt. Laudantium aut voluptas nulla accusantium a quod ex at est.",
+    "views": 26577,
+    "publishedOnJoystreamAt": "2011-05-24T05:31:54.678Z"
+  },
+  {
+    "id": "12a60e3b-6cc5-45b7-ba6d-35407b964423",
+    "title": "non voluptas magni neque tenetur",
+    "description": "Perspiciatis dolores reiciendis non eos consequatur. Nulla deleniti harum. Quas quae natus asperiores repellat nam numquam amet reprehenderit non. Qui similique dolorem non non. Laboriosam occaecati ipsam fugiat possimus est cupiditate eum. Quia repudiandae similique minus voluptas quisquam. Veritatis laboriosam et voluptas eum saepe pariatur ratione. Voluptatem amet sit odio aliquam sit doloribus. Adipisci ab molestiae quod. Quod consequatur illum sed aspernatur et dolor molestiae nihil.",
+    "views": 1325,
+    "publishedOnJoystreamAt": "2014-09-10T20:41:28.611Z"
+  },
+  {
+    "id": "2c06d768-100c-47c8-bbfe-82862c9795c5",
+    "title": "vel magni sit rerum blanditiis dolores",
+    "description": "Perferendis exercitationem nostrum omnis velit quisquam quasi odit omnis et. Ratione sint iste atque autem quis aliquam qui perferendis consequatur. Commodi vitae voluptate quasi sunt quidem quaerat quaerat dolore. Nostrum nihil voluptatem ea dolorem. Voluptatem nesciunt omnis. Vel ducimus dolores consequatur quis voluptate deserunt consequuntur. Id blanditiis est consequatur natus expedita.",
+    "views": 48952,
+    "publishedOnJoystreamAt": "2015-05-28T02:59:04.960Z"
+  },
+  {
+    "id": "47ad7ead-cfc8-44f6-b284-ce91249c9dbf",
+    "title": "magni ipsa eos nesciunt praesentium nemo",
+    "description": "Amet rerum laudantium provident minus consectetur omnis. Possimus vel aperiam voluptas nihil. Dignissimos quas quia dolore sint alias omnis non. Fugiat omnis ut repellendus quia voluptatem voluptas reiciendis. Maxime sequi adipisci aut sit repudiandae iste.",
+    "views": 115477,
+    "publishedOnJoystreamAt": "2018-12-19T18:13:41.131Z"
+  },
+  {
+    "id": "74f85266-9049-4933-aedb-e4cd5a95f714",
+    "title": "neque laborum numquam facere expedita",
+    "description": "Corrupti odit aut quas doloribus. Recusandae dolores non aut in blanditiis eos et. Et velit asperiores. Beatae necessitatibus aut voluptas expedita commodi voluptas sit magnam dolores. Eius minus corrupti sit eligendi tempora explicabo. Tenetur fugiat id et ut eum odit. Alias aut est et dignissimos. Dolores sint dolor qui enim voluptas non totam. Assumenda accusantium et sequi deserunt magni ad animi. Sed non et nam officia. Enim dolorum corrupti molestias dolorem. Sunt inventore est consequuntur ullam et et temporibus.",
+    "views": 72661,
+    "publishedOnJoystreamAt": "2019-02-08T05:48:24.945Z"
+  },
+  {
+    "id": "731d096e-5fea-4e94-b46f-f13739b374c5",
+    "title": "reiciendis libero ipsa dolorem repellendus",
+    "description": "Nulla id et sit ad. Officiis exercitationem sapiente pariatur. Odio nostrum necessitatibus aut fugit. In totam dignissimos nostrum veritatis aut laudantium explicabo id a. Natus eius praesentium qui quia autem quam voluptas. Saepe ipsam porro nesciunt placeat asperiores.",
+    "views": 82519,
+    "publishedOnJoystreamAt": "2015-12-16T11:56:02.571Z"
+  },
+  {
+    "id": "032a4f1c-dba2-473d-9814-119d45d36044",
+    "title": "debitis magnam dolor ab",
+    "description": "Odit nesciunt qui aperiam. Doloremque non accusamus odio quam. Ea cumque ab libero voluptatibus molestiae. Beatae placeat animi. Voluptatibus tempore reprehenderit commodi. Quae in ex non officia.",
+    "views": 65866,
+    "publishedOnJoystreamAt": "2012-01-07T05:03:58.161Z"
+  },
+  {
+    "id": "e81e1c96-2081-4579-9a16-cc685a9d7cd7",
+    "title": "neque nihil corporis",
+    "description": "Corrupti voluptas dolorum provident dolor sunt quia modi. Ut quam ut omnis fuga. In magnam et dolorem modi ut recusandae. Eum quas placeat et provident nihil quas alias ipsa saepe. Odio nihil dolore nesciunt ut impedit. Iure quia ut rerum.",
+    "views": 17103,
+    "publishedOnJoystreamAt": "2016-10-21T08:19:14.186Z"
+  },
+  {
+    "id": "c6613254-1aa8-48bf-8e24-0f9c52cf52ec",
+    "title": "ea quae rem velit ea",
+    "description": "Officia nihil distinctio. Est corporis similique. Quod assumenda quasi blanditiis animi ducimus numquam optio.",
+    "views": 77913,
+    "publishedOnJoystreamAt": "2014-06-20T13:36:25.563Z"
+  },
+  {
+    "id": "b47675ed-47cf-4ac0-8a5a-61e71733c92e",
+    "title": "omnis praesentium odit dolor temporibus",
+    "description": "Voluptatibus optio deleniti adipisci quo magnam velit cumque quod. Exercitationem mollitia voluptas natus cum reprehenderit ex id rerum odio. Unde hic eum rerum aut.",
+    "views": 45527,
+    "publishedOnJoystreamAt": "2015-08-24T09:06:24.220Z"
+  },
+  {
+    "id": "4282dea0-8a7d-4225-8fa7-41091122e70f",
+    "title": "consequuntur voluptas dolorum",
+    "description": "Ut incidunt blanditiis asperiores autem vitae architecto quasi rerum alias. Et aut ipsam quaerat sed quidem aut. Asperiores recusandae suscipit rem molestiae corrupti. Dolor vitae magnam ea odio nisi expedita consequuntur hic dolores. Dignissimos ipsam fugit at perspiciatis accusamus. Est ea est.",
+    "views": 112659,
+    "publishedOnJoystreamAt": "2012-10-19T07:55:15.852Z"
+  },
+  {
+    "id": "c659feb8-4dd3-4b84-9be5-d85ed7a7e402",
+    "title": "et enim quis",
+    "description": "Cupiditate est itaque animi enim. Et omnis aliquam est eaque et aut porro natus. Ipsum aut ab quo quod enim blanditiis quae quas sunt.",
+    "views": 54931,
+    "publishedOnJoystreamAt": "2017-03-26T22:51:10.561Z"
+  },
+  {
+    "id": "68c1fca6-be50-48ae-a3eb-50a4e50f4e14",
+    "title": "dignissimos ex nisi natus molestiae corrupti",
+    "description": "Natus qui inventore doloribus. Aut provident quia neque in. Et sint rem. Consectetur eos sed fugit. Quia rerum quo nobis molestiae voluptatibus dicta tempora vero. Cum eum nihil consectetur voluptas molestias. Similique sit qui earum numquam repudiandae beatae et error. Omnis sint cupiditate enim pariatur sunt facere. Id optio et aspernatur tempora facilis. Neque dolorem est dolores fugit non voluptatem pariatur soluta.",
+    "views": 77586,
+    "publishedOnJoystreamAt": "2017-08-01T04:21:03.476Z"
+  },
+  {
+    "id": "710124de-ee2c-48e1-8240-7239e6418cb9",
+    "title": "blanditiis nobis deserunt",
+    "description": "Fuga blanditiis repudiandae culpa. Dolorem asperiores asperiores dolor. Dolor vel sit aut consectetur aut blanditiis et. Ut aut delectus delectus accusamus et vitae mollitia. Cum sed et incidunt ullam dolorem hic aut et. Dignissimos adipisci quis ut ipsum id maiores id sint. Quia deserunt ut et praesentium corporis iste harum tempore. Praesentium consectetur pariatur vero vitae officiis sit consequatur tenetur. Tempore natus qui ut iusto ratione.",
+    "views": 128522,
+    "publishedOnJoystreamAt": "2018-05-08T04:26:49.655Z"
+  },
+  {
+    "id": "61e515b0-70f5-4861-915e-8e8ff2ee4ef5",
+    "title": "illo id exercitationem eos",
+    "description": "Exercitationem ut aut tempora. Nulla itaque mollitia ab voluptas. Explicabo ex voluptatem rem quas mollitia fuga id sint. Veritatis qui aperiam non quisquam quidem debitis odit alias qui. Officia exercitationem amet odit rem odio quas et molestiae. Recusandae dolor ipsum animi adipisci dolorum dolor modi. Animi architecto sunt dolores eveniet incidunt voluptatibus. Rem accusamus culpa sit consequatur. Aut praesentium expedita laboriosam ipsam dolore repellendus expedita. Alias velit veritatis distinctio corrupti dolores necessitatibus earum.",
+    "views": 106659,
+    "publishedOnJoystreamAt": "2020-02-21T15:06:41.513Z"
+  },
+  {
+    "id": "b7275064-db65-4b8b-9e77-87a338920024",
+    "title": "quia eius velit voluptas quia",
+    "description": "Quibusdam dolores voluptatem est non molestiae voluptate. Quia occaecati excepturi nesciunt ut velit aliquam. Iste officia ut vero ullam atque dolores velit quaerat qui. Totam quis illum nulla cum esse. Expedita similique a et quae omnis sed. Voluptatum culpa quisquam illo molestias quo velit. Est optio rerum nam non voluptatem recusandae rerum corporis.",
+    "views": 74858,
+    "publishedOnJoystreamAt": "2011-08-19T16:55:43.187Z"
+  },
+  {
+    "id": "cb0b792a-e99d-44e2-bc9a-ac6a253e0b68",
+    "title": "ducimus nihil veniam nobis eos",
+    "description": "Sed enim illum impedit suscipit aut quas. Deserunt quasi perspiciatis incidunt quia nostrum fugit aut. Sit omnis quaerat sint quia. Ipsa ipsam ut corrupti perferendis. Dolorem cupiditate qui assumenda. Consequuntur accusantium impedit magnam. Impedit ipsam aut molestiae dolorem et adipisci et. Soluta molestiae eius at laboriosam. Sit ut repellendus vitae natus ut.",
+    "views": 24238,
+    "publishedOnJoystreamAt": "2011-07-13T13:44:16.123Z"
+  },
+  {
+    "id": "6d184d61-c7fc-4480-bdd4-963a6e4b8282",
+    "title": "earum exercitationem facere asperiores sequi",
+    "description": "Ipsa et dolorem autem occaecati ea quis accusantium ut vel. Dolor repellat illo nisi. Necessitatibus sit sequi quia blanditiis. Suscipit eos est sed mollitia qui molestiae deserunt. Qui sit perspiciatis libero ipsum odit iste sunt dignissimos velit. Qui beatae et. Quaerat ratione sit.",
+    "views": 115983,
+    "publishedOnJoystreamAt": "2019-03-04T06:35:57.310Z"
+  },
+  {
+    "id": "b105d47a-767b-4385-80c2-40a1cb9c2259",
+    "title": "recusandae aut qui suscipit quo error",
+    "description": "Tenetur quaerat aperiam perferendis non deserunt expedita quidem. Iure illum beatae a libero laborum maiores exercitationem sunt. Perspiciatis perspiciatis nobis sed veniam enim eum soluta dolores dolores.",
+    "views": 29885,
+    "publishedOnJoystreamAt": "2012-08-15T07:55:10.141Z"
+  },
+  {
+    "id": "ba4e1eea-747f-471f-bcac-b3f9e05ff9b6",
+    "title": "aut qui qui itaque",
+    "description": "Doloremque perferendis molestiae enim eveniet dolor delectus dicta quo. Necessitatibus quis consectetur odio soluta atque. Et voluptas consectetur consequatur omnis.",
+    "views": 81313,
+    "publishedOnJoystreamAt": "2013-11-05T07:21:12.767Z"
+  },
+  {
+    "id": "416bc10a-58d9-49c8-a159-79ea78ad07f0",
+    "title": "ut eos delectus accusamus",
+    "description": "Qui laudantium adipisci ut nihil eum. Sunt architecto odio vitae qui reprehenderit. Id repudiandae ut eos eligendi in aut. Recusandae qui praesentium iste et quis impedit et quia. Sequi sit et sed.",
+    "views": 27100,
+    "publishedOnJoystreamAt": "2011-09-25T15:20:10.804Z"
+  },
+  {
+    "id": "1342ba04-19e2-46dc-9e53-4762bd8bc78b",
+    "title": "autem quia quia",
+    "description": "Architecto eum non aut dolor quibusdam. Dignissimos distinctio eum omnis ea exercitationem fuga sit. Culpa cum sit qui. Quos quas reiciendis maxime qui porro minima. Fuga minus qui velit repudiandae. Adipisci rerum facilis unde et maxime voluptas. Minus necessitatibus cumque delectus. Et ut vitae necessitatibus non magnam laudantium velit molestias quia. Rem asperiores et quas blanditiis quo itaque doloribus dolores. Non temporibus doloribus veritatis. In ullam autem quia explicabo tenetur voluptatibus laborum in. Voluptas voluptate id sit et tempore.",
+    "views": 55346,
+    "publishedOnJoystreamAt": "2013-04-16T00:22:55.252Z"
+  },
+  {
+    "id": "1f8c0854-c1cf-464c-ae82-0dc4dbec2812",
+    "title": "illum saepe excepturi alias eum",
+    "description": "In et facilis eligendi labore id. Corrupti quod consequuntur et aut culpa sunt corrupti. Sed error quia ut repellendus ratione sit in tenetur. Architecto facere nihil. Iusto aut sunt ea similique qui voluptate autem.",
+    "views": 115368,
+    "publishedOnJoystreamAt": "2012-03-11T18:38:52.929Z"
+  },
+  {
+    "id": "b479d6f0-35b0-4164-adc4-e4398d23ae18",
+    "title": "ut qui quas dolorem rerum assumenda",
+    "description": "Vel veritatis et dicta sed rerum sit eius nesciunt. Quisquam et aut amet aperiam quasi quisquam sapiente voluptatem. Deleniti quas voluptatem.",
+    "views": 59332,
+    "publishedOnJoystreamAt": "2017-12-21T04:20:03.790Z"
+  },
+  {
+    "id": "b14dc3c5-c38f-48ec-86ce-85d297e08891",
+    "title": "illo qui hic ad voluptatum",
+    "description": "Ut id dolor nihil illo natus commodi. Officiis eveniet quis harum non accusantium. Dolor recusandae qui sit quis consequatur occaecati veritatis animi in. Porro dolorum vitae consectetur tempore maxime enim totam aspernatur. Recusandae voluptatum libero repellat voluptatem. Placeat id cumque libero cum animi enim occaecati ea.",
+    "views": 70234,
+    "publishedOnJoystreamAt": "2020-06-07T00:05:15.074Z"
+  },
+  {
+    "id": "e1d96cd2-6118-47f3-bb9c-a40ac0143f8c",
+    "title": "dicta tempora molestiae dignissimos eius",
+    "description": "Nam velit ipsa architecto corporis sed et officia. In in soluta culpa maxime eum. Placeat et vero architecto quo molestiae quaerat natus in autem. Autem voluptatem ad quia labore ea. Est voluptatibus quod voluptas. Distinctio at error assumenda consequatur officia.",
+    "views": 5353,
+    "publishedOnJoystreamAt": "2019-11-21T02:10:35.173Z"
+  },
+  {
+    "id": "497daaee-63c5-4889-b718-efc231f6ac3b",
+    "title": "rerum in impedit",
+    "description": "Expedita reprehenderit molestiae quidem veniam consequatur ut dolorum non. Dolor asperiores ratione dolores dicta ut. Minus deserunt ut commodi veritatis doloremque tenetur eveniet. Voluptatem reprehenderit blanditiis accusamus aut voluptatem. Dolor necessitatibus vitae aut. Dignissimos minus at nihil eveniet eos qui. Dignissimos sed sit dolor exercitationem sit autem ipsa. Molestiae ut molestiae omnis suscipit veniam qui inventore modi atque. Eos quia necessitatibus quod non earum aperiam autem adipisci. Fugit numquam excepturi. Mollitia placeat qui et eius similique. Fuga perspiciatis quos ab qui possimus facilis ut consequatur sed.",
+    "views": 146799,
+    "publishedOnJoystreamAt": "2019-07-10T16:25:14.121Z"
+  },
+  {
+    "id": "8b498979-0567-4696-b6da-47e74913f91b",
+    "title": "sint dolor suscipit",
+    "description": "Voluptatem quo commodi esse blanditiis ad rerum. Sint similique quibusdam assumenda illo nam porro neque repellendus. Est ab aut quam sit placeat sit. Dolorem et libero omnis sunt molestiae quo expedita quidem. Nemo vel non dolorem. Suscipit veritatis omnis rerum cum temporibus tempore et ipsam. Necessitatibus accusantium reprehenderit. Quia blanditiis voluptatem autem provident sit tenetur odio voluptatem.",
+    "views": 26739,
+    "publishedOnJoystreamAt": "2012-12-14T18:18:30.575Z"
+  },
+  {
+    "id": "9368a188-8d37-432e-9103-8c00676366e4",
+    "title": "ex dolorem suscipit eius quia",
+    "description": "Dolorem qui aut expedita minus harum eligendi et. Aut corrupti aliquam aspernatur aperiam reiciendis velit animi consequatur et. Ut occaecati quia aut provident corrupti consectetur. Rem voluptatem repellendus eum maxime numquam architecto. Voluptate dicta architecto odit inventore. Sapiente ex sit et tenetur nulla aut qui sint et. Quod alias et nihil. Qui porro libero labore corrupti omnis repellendus quae culpa. Veniam aliquam repellendus est eum. Voluptatem non sequi. Magni natus dolores necessitatibus voluptatem rerum vitae. Quo error earum animi autem quidem ipsa molestiae.",
+    "views": 95180,
+    "publishedOnJoystreamAt": "2014-05-17T21:42:50.695Z"
+  },
+  {
+    "id": "4663b7ca-9e65-405c-96f5-ddac48bdb576",
+    "title": "dolor suscipit in",
+    "description": "Impedit id non minima est. Nemo explicabo qui necessitatibus sit praesentium rem sapiente sit aut. Rerum aut ut fuga dolores totam enim temporibus molestias. Est voluptatibus enim eum soluta aut distinctio ea consequatur. Officia et eius voluptatibus dolor. Beatae esse totam aut iusto voluptas adipisci. Quae porro ut quia voluptatem ullam officia recusandae. Qui perspiciatis voluptatum doloribus dolor tenetur rem et amet aliquam.",
+    "views": 17119,
+    "publishedOnJoystreamAt": "2017-04-23T01:30:20.935Z"
+  },
+  {
+    "id": "0da51468-c042-4d69-a897-613ad5fc450b",
+    "title": "illo voluptates qui facere",
+    "description": "Officiis at dignissimos quia omnis repellat possimus vel. Et expedita aut non necessitatibus consectetur. Velit expedita itaque quia id nulla. Molestiae officiis quae quam cupiditate velit a. Eos consequatur quis culpa est quia maxime sed sint maiores.",
+    "views": 93726,
+    "publishedOnJoystreamAt": "2015-02-21T15:15:31.292Z"
+  },
+  {
+    "id": "37cdf8d8-2773-4986-a076-7174c1497d42",
+    "title": "mollitia repellendus id provident beatae rerum",
+    "description": "Accusamus inventore ut. Ipsa voluptatem nesciunt dolorum. Dolor aut et ut. Ex modi explicabo quod sit eligendi reiciendis cum quibusdam tempora. Nobis suscipit nemo quam. Temporibus saepe culpa velit. Qui ut cumque consequatur voluptatum quia. Consequatur consequuntur voluptatum quidem ut reprehenderit quam.",
+    "views": 133814,
+    "publishedOnJoystreamAt": "2013-10-20T02:16:43.553Z"
+  },
+  {
+    "id": "c42cdc1b-a6fc-418e-acdd-1454ed910c91",
+    "title": "rerum odio et ullam a",
+    "description": "Culpa ab labore molestiae accusamus veritatis ut fugit asperiores ipsam. Eum dolor dolorem incidunt. Voluptatum explicabo qui. Fugiat omnis ut perferendis dignissimos et. Non omnis ut. Laudantium ducimus sunt enim corporis ut eum cum sed. Voluptas et provident iure pariatur temporibus.",
+    "views": 134018,
+    "publishedOnJoystreamAt": "2019-08-18T17:47:23.281Z"
+  },
+  {
+    "id": "16edd9e8-dab8-47b0-ad06-c89707182765",
+    "title": "et ut ipsam",
+    "description": "Tempore numquam ullam beatae maxime qui cumque iste est. Ut sit optio. Aspernatur dolores esse sunt aut occaecati doloremque ullam voluptas. Ut aspernatur et vero aut est aliquam. Ab natus recusandae facilis.",
+    "views": 145923,
+    "publishedOnJoystreamAt": "2017-06-27T04:59:56.722Z"
+  },
+  {
+    "id": "8f050d88-f288-47f9-8f39-1c9d64cf0652",
+    "title": "et asperiores vel cupiditate quos",
+    "description": "Pariatur voluptatem quod sunt praesentium esse qui possimus sed. Non ea omnis asperiores sunt reprehenderit. Ut voluptatum sed voluptatem beatae earum. Quam nihil sunt nobis molestiae eos officia. Non consequatur exercitationem laborum explicabo ut maiores recusandae. Voluptas sunt et velit vero. Fugiat totam corrupti error id et dolorem voluptatem enim. Dolores et explicabo in enim. Quis aliquam vel quaerat ratione nisi.",
+    "views": 63065,
+    "publishedOnJoystreamAt": "2018-09-19T05:25:04.055Z"
+  },
+  {
+    "id": "d0ff2b8e-533b-47a2-b969-c1b324a5b15e",
+    "title": "quia quasi at sequi",
+    "description": "Vero consectetur eveniet officia minima veritatis facere delectus aperiam nobis. Cumque eos rerum impedit ea suscipit omnis sit eligendi. Hic odio rerum sed. Omnis molestias accusamus omnis sed sit nam. Necessitatibus quo magni dolore. Accusamus eos modi commodi asperiores et. Provident perspiciatis sit. Iure qui quia temporibus ut. Inventore nam quam quaerat consequatur sit nihil error. Neque quod et sed ut aut maxime. Cum excepturi quibusdam et.",
+    "views": 89744,
+    "publishedOnJoystreamAt": "2020-04-15T00:50:14.396Z"
+  }
+]

packages/app/src/mocking/data/raw/videosMedia.json

@@ -0,0 +1,83 @@
+[
+  {
+    "id": "344de92b-3505-4b76-bcbd-9c6c949ffdf2",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 2560,
+    "pixelHeight": 1440,
+    "duration": 29,
+    "size": 44851016,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/1.mp4" }
+  },
+  {
+    "id": "acbfd83a-66d8-4275-9270-369b2cab8ee0",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 1280,
+    "pixelHeight": 720,
+    "duration": 100,
+    "size": 71928640,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/2.m4v" }
+  },
+  {
+    "id": "137536b1-1965-416d-aecd-6356b536bc18",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 1280,
+    "pixelHeight": 720,
+    "duration": 162,
+    "size": 48997777,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/3.mp4" }
+  },
+  {
+    "id": "0de1ac1a-d1bd-4a08-8115-a800cd5f1fc1",
+    "codec": "VP8_WEBM",
+    "pixelWidth": 1920,
+    "pixelHeight": 1080,
+    "duration": 103,
+    "size": 6959818,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/4.webm" }
+  },
+  {
+    "id": "a0a09887-7e1b-4a4f-b386-09f02bb59e2c",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 1920,
+    "pixelHeight": 1080,
+    "duration": 47,
+    "size": 34452169,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/5.mp4" }
+  },
+  {
+    "id": "2c6e01be-52e3-469f-8e5e-ad4cac864fa9",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 1920,
+    "pixelHeight": 1080,
+    "duration": 59,
+    "size": 37488451,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/6.mp4" }
+  },
+  {
+    "id": "ed247bbf-aa89-4377-bfce-b055e4b05cb9",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 640,
+    "pixelHeight": 480,
+    "duration": 664,
+    "size": 68512128,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/7.mp4" }
+  },
+  {
+    "id": "46eda8d5-9a78-41c3-9ae7-72b5df936c69",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 1920,
+    "pixelHeight": 1080,
+    "duration": 23,
+    "size": 15223013,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/8.mp4" }
+  },
+  {
+    "id": "2659dabe-928f-4789-ac92-13325acffa3c",
+    "codec": "H264_mpeg4",
+    "pixelWidth": 1280,
+    "pixelHeight": 720,
+    "duration": 403,
+    "size": 295780291,
+    "location": { "URL": "https://eu-central-1.linodeobjects.com/atlas-assets/videos/9.m4v" }
+  }
+]

packages/app/src/mocking/server.ts

@@ -1,10 +1,14 @@
 import { createServer } from 'miragejs'
 import { createGraphQLHandler, mirageGraphQLFieldResolver } from '@miragejs/graphql'
 import { shuffle } from 'lodash'
+import faker from 'faker'
 
 import schema from '../schema.graphql'
-import { mockCategories, mockChannels, mockVideos } from '@/mocking/data'
+import { FEATURED_VIDEOS_INDEXES, mockCategories, mockChannels, mockVideos, mockVideosMedia } from '@/mocking/data'
 import { SearchVariables } from '@/api/queries/__generated__/Search'
+import { ModelInstance } from 'miragejs/-types'
+import { ChannelFields } from '@/api/queries/__generated__/ChannelFields'
+import { CategoryFields } from '@/api/queries/__generated__/CategoryFields'
 
 createServer({
   routes() {
@@ -25,8 +29,8 @@ createServer({
             return videos.slice(start, end)
           },
           featured_videos: (...params: unknown[]) => {
-            const videos = mirageGraphQLFieldResolver(...params)
-            return shuffle(videos.slice(0, 16))
+            const videos = mirageGraphQLFieldResolver(...params) as unknown[]
+            return videos.filter((_, idx) => FEATURED_VIDEOS_INDEXES.includes(idx))
           },
           channels: (...params: unknown[]) => {
             const channels = mirageGraphQLFieldResolver(...params)
@@ -67,46 +71,40 @@ createServer({
 
   seeds(server) {
     const channels = mockChannels.map((channel) => {
-      const models = server.create('Channel', {
+      return server.schema.create('Channel', {
         ...channel,
-      })
-      return models
+      }) as ModelInstance<ChannelFields>
     })
 
     const categories = mockCategories.map((category) => {
-      const models = server.create('Category', {
+      return server.schema.create('Category', {
         ...category,
-      })
-      return models
+      }) as ModelInstance<CategoryFields>
     })
 
-    const location = server.schema.create('HTTPVideoMediaLocation', {
-      id: 'locationID',
-      host: 'https://js-video-example.s3.eu-central-1.amazonaws.com/waves.mp4',
-    })
+    const videoMedias = mockVideosMedia.map((videoMedia) => {
+      // FIXME: This suffers from the same behaviour as the search resolver - all the returned items have the same location
+      const location = server.schema.create('HTTPVideoMediaLocation', {
+        id: faker.random.uuid(),
+        ...videoMedia.location,
+      })
 
-    const media = server.schema.create('VideoMedia', {
-      id: 'videoMediaID',
-      entityID: 'videoMediaEntityID',
-      encoding: 'H264_mpeg4',
-      pixelWidth: 1920,
-      pixelHeight: 1080,
-      location,
+      const model = server.schema.create('VideoMedia', {
+        ...videoMedia,
+        location,
+      })
+      return model
     })
 
-    // repeat videos 15 times
-    // TODO: expand as part of https://github.com/Joystream/joystream/issues/1270
-    const fakedMockVideos = Array.from({ length: 15 }, (_, idx) =>
-      mockVideos.map((v) => ({ ...v, id: `${v.id}${idx}` }))
-    ).flat()
-
-    fakedMockVideos.forEach((video, idx) =>
-      server.create('Video', {
+    mockVideos.forEach((video, idx) => {
+      const mediaIndex = idx % mockVideosMedia.length
+      server.schema.create('Video', {
         ...video,
-        media,
+        duration: mockVideosMedia[mediaIndex].duration,
         channel: channels[idx % channels.length],
         category: categories[idx % categories.length],
+        media: videoMedias[mediaIndex],
       })
-    )
+    })
   },
 })

packages/app/src/schema.graphql

@@ -16,9 +16,6 @@ type Member {
 type Channel {
   id: ID!
 
-  # Id of underlying entity.
-  entityID: String!
-
   handle: String!
 
   description: String!
@@ -43,9 +40,6 @@ type Channel {
 type Category {
   id: ID!
 
-  # Id of underlying entity.
-  entityID: String!
-
   name: String!
 
   videos: [Video!]
@@ -56,9 +50,7 @@ type JoystreamVideoMediaLocation {
 }
 
 type HTTPVideoMediaLocation {
-  # TODO: join these fields together
-  host: String!
-  port: Int
+  URL: String!
 }
 
 # In the future we can add IPFS, Dat, etc.
@@ -96,9 +88,6 @@ union License = UserDefinedLicense | CreativeCommonsLicense
 type VideoMedia {
   id: ID!
 
-  # Id of underlying entity.
-  entityID: String!
-
   encoding: VideoMediaEncoding!
 
   # Resolution width
@@ -117,9 +106,6 @@ type VideoMedia {
 type Video {
   id: ID!
 
-  # Id of underlying entity.
-  entityID: String!
-
   channel: Channel!
 
   category: Category!

packages/app/src/shared/components/InfiniteVideoGrid/InfiniteVideoGrid.tsx

@@ -76,6 +76,7 @@ const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
         <StyledVideoPreview
           title={v.title}
           channelName={v.channel.handle}
+          channelAvatarURL={v.channel.avatarPhotoURL}
           createdAt={v.publishedOnJoystreamAt}
           views={v.views}
           posterURL={v.thumbnailURL}

packages/app/src/shared/components/VideoPlayer/videoJsPlayer.ts

@@ -17,7 +17,7 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({ fill, fluid, height, src,
   const playerRef = useRef<HTMLVideoElement>(null)
   const [player, setPlayer] = useState<VideoJsPlayer | null>(null)
 
-  const parsedSource = src.__typename === 'HTTPVideoMediaLocation' ? src.host : 'TODO'
+  const parsedSource = src.__typename === 'HTTPVideoMediaLocation' ? src.URL : 'TODO'
 
   useEffect(() => {
     const videoJsOptions: VideoJsPlayerOptions = {
@@ -41,7 +41,7 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({ fill, fluid, height, src,
       src: parsedSource,
       type: 'video/mp4',
     })
-  }, [player, src])
+  }, [player, parsedSource])
 
   useEffect(() => {
     if (!player || !width) {

yarn.lock

@@ -3678,6 +3678,11 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/faker@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.1.0.tgz#72ba5762e0ac00c52c79e08a482962908c4959ff"
+  integrity sha512-7iK+rNvtSmG3FcAgI67BphmQVzBPkI6SCjJqR/SXxGr6tDUoMovkhGYIxNICEfy/trTgiGQL2v1tKPuFEXIrQg==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -5280,6 +5285,11 @@ async-retry@^1.3.1:
   dependencies:
     retry "0.12.0"
 
+async@>=0.2.9:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
+  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -9139,6 +9149,11 @@ fake-xml-http-request@^2.1.1:
   resolved "https://registry.yarnpkg.com/fake-xml-http-request/-/fake-xml-http-request-2.1.1.tgz#279fdac235840d7a4dff77d98ec44bce9fc690a6"
   integrity sha512-Kn2WYYS6cDBS5jq/voOfSGCA0TafOYAUPbEp8mUVpD/DVV5bQIDjlq+MLLvNUokkbTpjBVlLDaM5PnX+PwZMlw==
 
+faker@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-5.1.0.tgz#e10fa1dec4502551aee0eb771617a7e7b94692e8"
+  integrity sha512-RrWKFSSA/aNLP0g3o2WW1Zez7/MnMr7xkiZmoCfAGZmdkDQZ6l2KtuXHN5XjdvpRjDl8+3vf+Rrtl06Z352+Mw==
+
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
@@ -9432,6 +9447,14 @@ flow-parser@0.*:
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.129.0.tgz#5924357da8f4982c11e02883a6ed10e954e61ea4"
   integrity sha512-kzxyoEl8vG0JF0/h/u0UjALXmsGvwU2NBfKczCSNO/It2fKb8hz1gMt05OuZAlMLYXcvgjntWJadIABeKGPK4g==
 
+fluent-ffmpeg@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fluent-ffmpeg/-/fluent-ffmpeg-2.1.2.tgz#c952de2240f812ebda0aa8006d7776ee2acf7d74"
+  integrity sha1-yVLeIkD4EuvaCqgAbXd27irPfXQ=
+  dependencies:
+    async ">=0.2.9"
+    which "^1.1.1"
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -20122,7 +20145,7 @@ which-pm-runs@^1.0.0:
   resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
   integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
 
-which@^1.2.9, which@^1.3.0, which@^1.3.1:
+which@^1.1.1, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==