Add videos worth watching section (#1115)

src/api/client/cache.ts

@@ -25,13 +25,14 @@ const getVideoKeyArgs = (args: GetVideosConnectionQueryVariables | null) => {
   const channelIdIn = args?.where?.channelId_in ? JSON.stringify(args.where.channelId_in) : ''
   const createdAtGte = args?.where?.createdAt_gte ? JSON.stringify(args.where.createdAt_gte) : ''
   const sorting = args?.orderBy?.[0] ? args.orderBy[0] : ''
+  const isFeatured = args?.where?.isFeatured_eq ?? ''
 
   // only for counting videos in HomeView
   if (args?.where?.channelId_in && !args?.first) {
     return `${createdAtGte}:${channelIdIn}`
   }
 
-  return `${onlyCount}:${channelId}:${categoryId}:${channelIdIn}:${createdAtGte}:${isPublic}:${idEq}:${idIn}:${sorting}`
+  return `${onlyCount}:${channelId}:${categoryId}:${channelIdIn}:${createdAtGte}:${isPublic}:${idEq}:${idIn}:${sorting}:${isFeatured}`
 }
 
 const createDateHandler = () => ({

src/components/InfiniteGrids/InfiniteVideoGrid.tsx

@@ -37,6 +37,7 @@ type InfiniteVideoGridProps = {
     name: string
     url: string
   }
+  isFeatured?: boolean
 }
 
 const INITIAL_ROWS = 2
@@ -60,6 +61,7 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
   currentlyWatchedVideoId,
   onDemand = false,
   additionalLink,
+  isFeatured = false,
 }) => {
   const [videosPerRow, setVideosPerRow] = useState(INITIAL_VIDEOS_PER_ROW)
   const queryVariables: { where: VideoWhereInput } = {
@@ -71,6 +73,7 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
       ...(thumbnailPhotoAvailability ? { thumbnailPhotoAvailability_eq: thumbnailPhotoAvailability } : {}),
       ...(mediaAvailability ? { mediaAvailability_eq: mediaAvailability } : {}),
       ...(idIn ? { id_in: idIn } : {}),
+      isFeatured_eq: isFeatured,
       isPublic_eq: isPublic,
       isCensored_eq: isCensored,
     },

src/views/viewer/HomeView.tsx

@@ -56,14 +56,12 @@ export const HomeView: React.FC = () => {
             onDemand
           />
         ) : null}
-        {!mostViewedVideosLoading && mostViewedVideos?.length ? (
-          <StyledInfiniteVideoGrid
-            title="Popular on Joystream"
-            idIn={mostViewedVideosIds}
-            ready={!mostViewedVideosLoading}
-            onDemand
-          />
-        ) : null}
+        <StyledInfiniteVideoGrid
+          title="Popular on Joystream"
+          idIn={mostViewedVideosIds}
+          ready={!mostViewedVideosLoading}
+          onDemand
+        />
         <OfficialJoystreamUpdate />
         <TopTenThisWeek />
         <StyledInfiniteVideoGrid title="All content" onDemand />

src/views/viewer/NewView/NewView.tsx

@@ -1,16 +1,16 @@
 import styled from '@emotion/styled'
-import React, { FC } from 'react'
+import React from 'react'
 
-import { ViewWrapper } from '@/components'
+import { InfiniteVideoGrid, ViewWrapper } from '@/components'
 import { absoluteRoutes } from '@/config/routes'
-import { CallToActionButton, CallToActionWrapper } from '@/shared/components'
-import { Text } from '@/shared/components'
+import { CallToActionButton, CallToActionWrapper, Text } from '@/shared/components'
 import { SvgNavChannels, SvgNavHome, SvgNavPopular } from '@/shared/icons'
 import { sizes } from '@/shared/theme'
 
-export const NewView: FC = () => (
+export const NewView: React.FC = () => (
   <ViewWrapper>
     <Header variant="h2">New & Noteworthy</Header>
+    <StyledInfiniteVideoGrid title="Videos worth watching" isFeatured onDemand />
     <CallToActionWrapper>
       <CallToActionButton label="Home" to={absoluteRoutes.viewer.index()} colorVariant="yellow" icon={<SvgNavHome />} />
       <CallToActionButton
@@ -30,5 +30,14 @@ export const NewView: FC = () => (
 )
 
 const Header = styled(Text)`
-  margin-top: ${sizes(16)};
+  margin: ${sizes(16)} 0;
+`
+
+const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`
+  margin: 0;
+  padding-bottom: 4rem;
+
+  :not(:first-of-type) {
+    margin-top: ${sizes(36)};
+  }
 `