Show a vertical list of videos in “More from this channel” section

packages/joy-media/src/common/index.css

@@ -266,7 +266,7 @@ $borderColor: #e4e4e4;
 
 .ChannelPreview {
   display: flex;
-  align-items: center;
+  align-items: normal;
 
   .ListOfChannels & {
     margin-bottom: 1rem;
@@ -284,6 +284,7 @@ $borderColor: #e4e4e4;
     font-size: 1.5rem;
     font-weight: 500;
     margin: 0;
+    margin-top: .75rem;
 
     .ChannelHeader & {
       margin-top: 1rem;
@@ -291,7 +292,10 @@ $borderColor: #e4e4e4;
   }
   
   &.small {
+    align-items: center;
+
     .ChannelTitle {
+      margin-top: 0;
       font-size: 1rem;
       a {
         color: $blackFont;
@@ -303,8 +307,6 @@ $borderColor: #e4e4e4;
   }
 
   &.big {
-    align-items: normal;
-
     .ChannelTitle {
       font-size: 2rem;
     }
@@ -384,7 +386,7 @@ $borderColor: #e4e4e4;
     }
   }
 
-  .JoyPlayAlbum_Featured {
+  .JoyPlayAlbum_RightSidePanel {
     max-width: 450px;
   }
 }

packages/joy-media/src/explore/PlayContent.tsx

@@ -83,7 +83,7 @@ export function PlayContent (props: Props) {
       </div>
     </div>
     {featuredAlbums.length > 0 &&
-      <div className='JoyPlayAlbum_Featured'>
+      <div className='JoyPlayAlbum_RightSidePanel'>
         <h3>Featured albums</h3>
         {featuredAlbums.map(x => <MusicAlbumPreview {...x} size={170} />)}
       </div>

packages/joy-media/src/transport.ts

@@ -160,9 +160,16 @@ export abstract class MediaTransport extends Transport {
 
   abstract allMusicAlbums(): Promise<MusicAlbumType[]>
 
-  async videosByChannelId(channelId: ChannelId): Promise<VideoType[]> {
-    return (await this.allVideos())
+  async videosByChannelId(channelId: ChannelId, limit?: number): Promise<VideoType[]> {
+    let videos = (await this.allVideos())
       .filter(x => channelId && channelId.eq(x.channelId))
+      .sort(x => -1 * x.id)
+
+    if (limit && limit > 0) {
+      videos = videos.slice(0, limit)
+    }
+
+    return videos
   }
 
   async videosByAccount(accountId: AccountId): Promise<VideoType[]> {

packages/joy-media/src/video/PlayVideo.tsx

@@ -14,15 +14,27 @@ import { MediaPlayerWithResolver } from '../common/MediaPlayerWithResolver';
 import { ContentId } from '@joystream/types/media';
 
 export type PlayVideoProps = {
+  channel?: ChannelEntity
   mediaObject?: MediaObjectType
   id: EntityId
   video?: VideoType
-  channel?: ChannelEntity
+  moreChannelVideos?: VideoType[]
   featuredVideos?: VideoType[]
-};
+}
+
+type ListOfVideoPreviewProps = {
+  videos?: VideoType[]
+}
+
+function VertialListOfVideoPreviews(props: ListOfVideoPreviewProps) {
+  const { videos = [] } = props
+  return <>{videos.map((video) =>
+    <VideoPreview key={`VideoPreview-${video.id}`} {...video} size='small' orientation='horizontal' withChannel />
+  )}</>
+}
 
 export function PlayVideo (props: PlayVideoProps) {
-  const { mediaObject, video, channel, featuredVideos = [] } = props;
+  const { channel, mediaObject, video, moreChannelVideos = [], featuredVideos = [] } = props;
 
   if (!mediaObject || !video) {
     return <em>Video was not found</em>
@@ -98,13 +110,19 @@ export function PlayVideo (props: PlayVideoProps) {
       </div>
     </div>
 
-    {featuredVideos.length > 0 &&
-      <div className='JoyPlayAlbum_Featured'>
-        <h3 style={{ marginBottom: '1rem' }}>Featured videos</h3>
-        {featuredVideos.map((x) =>
-          <VideoPreview key={`VideoPreview-${x.id}`} {...x} size='small' orientation='horizontal' withChannel />
-        )}
-      </div>
-    }
+    <div className='JoyPlayAlbum_RightSidePanel'>
+      {featuredVideos.length > 0 &&
+        <div>
+          <h3 style={{ marginBottom: '1rem' }}>Featured videos</h3>
+          <VertialListOfVideoPreviews videos={featuredVideos} />
+        </div>
+      }
+      {moreChannelVideos.length > 0 &&
+        <div style={{ marginTop: '1rem' }}>
+          <h3 style={{ marginBottom: '1rem' }}>More from this channel</h3>
+          <VertialListOfVideoPreviews videos={moreChannelVideos} />
+        </div>
+      }
+    </div>
   </div>;
 }

packages/joy-media/src/video/PlayVideo.view.tsx

@@ -18,10 +18,11 @@ export const PlayVideoView = MediaView<Props>({
 
     const channelId = new ChannelId(video.channelId)
     const channel = await transport.channelById(channelId)
+    const moreChannelVideos = (await transport.videosByChannelId(channelId, 5)).filter(x => x.id !== video.id)
     const featuredVideos = await transport.featuredVideos()
     const mediaObject = video.object
 
-    return { mediaObject, video, channel, featuredVideos }
+    return { channel, mediaObject, video, moreChannelVideos, featuredVideos }
   }
 });