Minor improvements and fix video content pages typos (#1172)

* Minor improvements and fix video content pages typos

* bring back channels link

Co-authored-by: drillprop <drylbartosz@gmail.com>

src/components/DiscoverChannels.tsx

@@ -5,7 +5,14 @@ import { ChannelEdge, VideoEdge } from '@/api/queries'
 import { InfiniteChannelWithVideosGrid } from '@/components/InfiniteGrids'
 import { sizes } from '@/shared/theme'
 
-export const DiscoverChannels: React.FC = () => {
+type DiscoverChannelsProps = {
+  additionalLink?: {
+    name: string
+    url: string
+  }
+}
+
+export const DiscoverChannels: React.FC<DiscoverChannelsProps> = ({ additionalLink }) => {
   const sortChannelsByFollowsDesc = (edges?: ChannelEdge[] | VideoEdge[]) => {
     if (!edges) {
       return []
@@ -21,9 +28,10 @@ export const DiscoverChannels: React.FC = () => {
 
   return (
     <StyledInfiniteChannelWithVideosGrid
-      title="Discover channels"
+      title="Discover new channels"
       onDemand
       additionalSortFn={sortChannelsByFollowsDesc}
+      additionalLink={additionalLink}
     />
   )
 }

src/components/OfficialJoystreamUpdate.tsx

@@ -17,12 +17,7 @@ export const OfficialJoystreamUpdate = () => {
 
   return (
     <section>
-      <VideoGallery
-        title="Official Joystream updates"
-        videos={videos || []}
-        seeAllUrl={`/channel/${channelId}`}
-        loading={loading}
-      />
+      <VideoGallery title="Official Joystream updates" videos={videos || []} loading={loading} />
     </section>
   )
 }

src/components/Sidenav/ViewerSidenav/ViewerSidenav.tsx

@@ -4,7 +4,7 @@ import { NavItemType, SidenavBase } from '@/components/Sidenav/SidenavBase'
 import { absoluteRoutes } from '@/config/routes'
 import { usePersonalDataStore } from '@/providers'
 import { Button } from '@/shared/components'
-import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavNew, SvgNavPopular, SvgNavVideos } from '@/shared/icons'
+import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavNew, SvgNavPopular } from '@/shared/icons'
 import { openInNewTab } from '@/utils/browser'
 import { ConsoleLogger } from '@/utils/logs'
 
@@ -26,11 +26,6 @@ const viewerSidenavItems: NavItemType[] = [
     name: 'New',
     to: absoluteRoutes.viewer.new(),
   },
-  {
-    icon: <SvgNavVideos />,
-    name: 'Videos',
-    to: absoluteRoutes.viewer.videos(),
-  },
   {
     icon: <SvgNavChannels />,
     name: 'Channels',

src/config/routes.ts

@@ -25,7 +25,6 @@ export const relativeRoutes = {
     channel: (id = ':id') => `channel/${id}`,
     channels: () => 'channels',
     video: (id = ':id') => `video/${id}`,
-    videos: () => 'videos',
   },
   legal: {
     index: () => '',

src/views/viewer/HomeView.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { useMostViewedVideosIds, useVideosConnection } from '@/api/hooks'
 import {
+  DiscoverChannels,
   InfiniteVideoGrid,
   LimitedWidthContainer,
   OfficialJoystreamUpdate,
@@ -57,8 +58,9 @@ export const HomeView: React.FC = () => {
           ready={!mostViewedVideosLoading}
           onDemand
         />
-        <OfficialJoystreamUpdate />
         <TopTenThisWeek />
+        <OfficialJoystreamUpdate />
+        <DiscoverChannels additionalLink={{ name: 'Browse channels', url: absoluteRoutes.viewer.channels() }} />
         <InfiniteVideoGrid title="All content" onDemand />
         <CallToActionWrapper>
           <CallToActionButton

src/views/viewer/VideosView/VideosView.style.ts

@@ -1,48 +0,0 @@
-import styled from '@emotion/styled'
-
-import { InfiniteVideoGrid, TOP_NAVBAR_HEIGHT, ViewWrapper } from '@/components'
-import { CategoryPicker, Text } from '@/shared/components'
-import { colors, sizes, transitions, zIndex } from '@/shared/theme'
-
-type IsAtTop = {
-  isAtTop: boolean
-}
-
-export const StyledViewWrapper = styled(ViewWrapper)`
-  padding-top: ${sizes(14)};
-  padding-bottom: ${sizes(4)};
-`
-
-export const GRID_TOP_PADDING = sizes(2, true)
-
-export const Header = styled(Text)`
-  margin-bottom: ${sizes(10)};
-`
-
-export const FeaturedVideosContainer = styled.div`
-  margin-bottom: ${sizes(10)};
-`
-
-export const CategoriesVideosContainer = styled.div`
-  padding-bottom: ${sizes(4)};
-`
-
-export const StyledCategoryPicker = styled(CategoryPicker)<IsAtTop>`
-  z-index: ${zIndex.overlay};
-  position: sticky;
-
-  /* Offset Category Picker by Navbar Height */
-  top: ${TOP_NAVBAR_HEIGHT}px;
-  padding: ${sizes(5)} var(--global-horizontal-padding) ${sizes(2)};
-  margin: 0 calc(-1 * var(--global-horizontal-padding));
-  background-color: ${colors.black};
-  border-bottom: 1px solid ${(props) => (props.isAtTop ? colors.black : colors.gray[800])};
-  transition: background-color ${transitions.timings.regular} ${transitions.easing};
-`
-export const StyledInfiniteVideoGrid = styled(InfiniteVideoGrid)`
-  padding-top: ${GRID_TOP_PADDING}px;
-`
-
-export const IntersectionTarget = styled.div`
-  min-height: 1px;
-`

src/views/viewer/VideosView/index.ts

@@ -1 +0,0 @@
-export * from './VideosView'

src/views/viewer/ViewerLayout.tsx

@@ -10,14 +10,13 @@ import { absoluteRoutes, relativeRoutes } from '@/config/routes'
 import { transitions } from '@/shared/theme'
 import { RoutingState } from '@/types/routing'
 
-import { ChannelView, ChannelsView, HomeView, NewView, PopularView, SearchOverlayView, VideoView, VideosView } from '.'
+import { ChannelView, ChannelsView, HomeView, NewView, PopularView, SearchOverlayView, VideoView } from '.'
 
 const viewerRoutes = [
   { path: relativeRoutes.viewer.index(), element: <HomeView /> },
   { path: relativeRoutes.viewer.popular(), element: <PopularView /> },
   { path: relativeRoutes.viewer.new(), element: <NewView /> },
   { path: relativeRoutes.viewer.video(), element: <VideoView /> },
-  { path: relativeRoutes.viewer.videos(), element: <VideosView /> },
   { path: relativeRoutes.viewer.channels(), element: <ChannelsView /> },
   { path: relativeRoutes.viewer.channel(), element: <ChannelView /> },
 ]

src/views/viewer/index.ts

@@ -5,5 +5,4 @@ export * from './ChannelsView'
 export * from './HomeView'
 export * from './SearchOverlayView'
 export * from './VideoView'
-export * from './VideosView'
 export * from './ViewerLayout'