Add video channel view

7 files changed, 85 insertions, 17 deletions

diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
index 1f178675f..4764fc0e1 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -2,7 +2,7 @@
   <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
     <div class="position">
       <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
-      <ng-container *ngIf="!playing">{{ video.playlistElement.position }}</ng-container>
+      <ng-container *ngIf="!playing">{{ position }}</ng-container>
     </div>
 
     <my-video-thumbnail
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index eb869f69a..f57fd2e1c 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -34,7 +34,7 @@
       font-weight: $font-semibold;
       margin-right: 10px;
       color: $grey-foreground-color;
-      min-width: 20px;
+      min-width: 25px;
 
       my-global-icon {
         @include apply-svg-color($grey-foreground-color);
@@ -59,7 +59,7 @@
 
       a {
         color: var(--mainForegroundColor);
-        width: fit-content;
+        width: auto;
 
         &:hover {
           text-decoration: underline !important;
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index c0cfd855d..6cc5b87b4 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
 import { Video } from '@app/shared/video/video.model'
 import { VideoPlaylistElementUpdate } from '@shared/models'
 import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
@@ -13,7 +13,8 @@ import { secondsToTime } from '../../../assets/player/utils'
 @Component({
   selector: 'my-video-playlist-element-miniature',
   styleUrls: [ './video-playlist-element-miniature.component.scss' ],
-  templateUrl: './video-playlist-element-miniature.component.html'
+  templateUrl: './video-playlist-element-miniature.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoPlaylistElementMiniatureComponent {
   @ViewChild('moreDropdown') moreDropdown: NgbDropdown
@@ -24,6 +25,7 @@ export class VideoPlaylistElementMiniatureComponent {
   @Input() playing = false
   @Input() rowLink = false
   @Input() accountLink = true
+  @Input() position: number
 
   @Output() elementRemoved = new EventEmitter<Video>()
 
@@ -44,7 +46,8 @@ export class VideoPlaylistElementMiniatureComponent {
     private route: ActivatedRoute,
     private i18n: I18n,
     private videoService: VideoService,
-    private videoPlaylistService: VideoPlaylistService
+    private videoPlaylistService: VideoPlaylistService,
+    private cdr: ChangeDetectorRef
   ) {}
 
   buildRouterLink () {
@@ -95,6 +98,8 @@ export class VideoPlaylistElementMiniatureComponent {
 
             video.playlistElement.startTimestamp = body.startTimestamp
             video.playlistElement.stopTimestamp = body.stopTimestamp
+
+            this.cdr.detectChanges()
           },
 
           err => this.notifier.error(err.message)
@@ -145,5 +150,10 @@ export class VideoPlaylistElementMiniatureComponent {
         this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
       }
     }
+
+    // FIXME: why do we have to use setTimeout here?
+    setTimeout(() => {
+      this.cdr.detectChanges()
+    })
   }
 }
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
index a136f9233..c01c73012 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.html
@@ -1,6 +1,6 @@
 <div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
   <a
-    [routerLink]="getPlaylistUrl()" [attr.title]="playlist.displayName"
+    [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
     class="miniature-thumbnail"
   >
     <img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
@@ -14,9 +14,21 @@
     </div>
   </a>
 
-  <div class="miniature-bottom">
-    <a tabindex="-1" class="miniature-name" [routerLink]="getPlaylistUrl()" [attr.title]="playlist.displayName">
+  <div class="miniature-info">
+    <a tabindex="-1" class="miniature-name" [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description">
       {{ playlist.displayName }}
     </a>
+
+    <div class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</div>
+
+    <div class="video-info-by-date">
+      <a i18n [routerLink]="[ '/video-channels', playlist.videoChannelBy ]" class="by" *ngIf="displayChannel && playlist.videoChannelBy">
+        {{ playlist.videoChannelBy }}
+      </a>
+
+      <div i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</div>
+    </div>
+
+    <div *ngIf="displayDescription" class="video-info-description">{{ playlist.description }}</div>
   </div>
 </div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index 72158eb10..94edd1177 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -11,9 +11,11 @@
     }
   }
 
-  &.to-manage .play-overlay,
+  &.to-manage,
   &.no-videos {
-    display: none;
+    .play-overlay {
+      display: none;
+    }
   }
 
   .miniature-thumbnail {
@@ -34,7 +36,7 @@
     }
   }
 
-  .miniature-bottom {
+  .miniature-info {
     width: 200px;
     margin-top: 2px;
     line-height: normal;
@@ -42,5 +44,33 @@
     .miniature-name {
       @include miniature-name;
     }
+
+    .video-info-by-date {
+      display: flex;
+      font-size: 13px;
+      margin: 5px 0;
+
+      .by {
+        @include disable-default-a-behaviour;
+
+        display: block;
+        color: var(--mainForegroundColor);
+
+        &::after {
+          content: '-';
+          margin: 0 3px;
+        }
+      }
+    }
+
+    .video-info-privacy {
+      font-size: 13px;
+      font-weight: $font-semibold;
+    }
+
+    .video-info-description {
+      margin-top: 10px;
+      color: $grey-foreground-color;
+    }
   }
 }
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
index cb5803400..523e96f2a 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.ts
@@ -9,6 +9,9 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 export class VideoPlaylistMiniatureComponent {
   @Input() playlist: VideoPlaylist
   @Input() toManage = false
+  @Input() displayChannel = false
+  @Input() displayDescription = false
+  @Input() displayPrivacy = false
 
   getPlaylistUrl () {
     if (this.toManage) return [ '/my-account/video-playlists', this.playlist.uuid ]
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index 186597a3a..a9e75007c 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -1,5 +1,5 @@
 import { distinct, distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
-import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 import { fromEvent, Subscription } from 'rxjs'
 
 @Directive({
@@ -11,7 +11,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   @Input() firstLoadedPage = 1
   @Input() percentLimit = 70
   @Input() autoInit = false
-  @Input() container = document.body
+  @Input() onItself = false
 
   @Output() nearOfBottom = new EventEmitter<void>()
   @Output() nearOfTop = new EventEmitter<void>()
@@ -24,8 +24,9 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   private scrollUpSub: Subscription
   private pageChangeSub: Subscription
   private middleScreen: number
+  private container: HTMLElement
 
-  constructor () {
+  constructor (private el: ElementRef) {
     this.decimalLimit = this.percentLimit / 100
   }
 
@@ -40,16 +41,20 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   }
 
   initialize () {
+    if (this.onItself) {
+      this.container = this.el.nativeElement
+    }
+
     this.middleScreen = window.innerHeight / 2
 
     // Emit the last value
     const throttleOptions = { leading: true, trailing: true }
 
-    const scrollObservable = fromEvent(window, 'scroll')
+    const scrollObservable = fromEvent(this.container || window, 'scroll')
       .pipe(
         startWith(null),
         throttleTime(200, undefined, throttleOptions),
-        map(() => ({ current: window.scrollY, maximumScroll: this.container.clientHeight - window.innerHeight })),
+        map(() => this.getScrollInfo()),
         distinctUntilChanged((o1, o2) => o1.current === o2.current),
         share()
       )
@@ -102,4 +107,12 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
     // Offset page
     return page + (this.firstLoadedPage - 1)
   }
+
+  private getScrollInfo () {
+    if (this.container) {
+      return { current: this.container.scrollTop, maximumScroll: this.container.scrollHeight }
+    }
+
+    return { current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight }
+  }
 }