From 0f7407d926cf7774f8f730dba08327569c11680c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 1 Apr 2021 11:10:27 +0200
Subject: Refactor video miniature

Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size
---
 .../video-channel-playlists.component.html         |  8 +++---
 .../video-channel-playlists.component.scss         | 29 ++++++++++++++++++----
 .../video-channel-playlists.component.ts           |  9 +++++--
 .../+video-channels/video-channels.component.scss  |  4 +--
 4 files changed, 37 insertions(+), 13 deletions(-)

(limited to 'client/src/app/+video-channels')

diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
index 594935afd..b69d1682a 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -1,13 +1,13 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
+  <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
     Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
   </div>
 
   <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
 
-  <div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
-    <div *ngFor="let playlist of videoPlaylists" class="playlist-miniature-container">
-      <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
+  <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
+    <div *ngFor="let playlist of videoPlaylists" class="playlist-wrapper">
+      <my-video-playlist-miniature [playlist]="playlist" [toManage]="false" [displayAsRow]="displayAsRow()"></my-video-playlist-miniature>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index cb2931858..3dd35ef3f 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -1,14 +1,33 @@
-.title-page {
-  margin-top: 0;
-}
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
 
-.video-playlist {
+.playlists {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 
-  .playlist-miniature-container {
+  .playlist-wrapper {
     margin-right: 15px;
     margin-bottom: 30px;
   }
 }
+
+.margin-content {
+  @include grid-videos-miniature-layout;
+}
+
+@media screen and (max-width: $mobile-view) {
+  .title-page {
+    display: block;
+    text-align: center;
+  }
+
+  .playlists {
+    text-align: left !important;
+    justify-content: left !important;
+
+    margin-left: pvar(--horizontalMarginContent) !important;
+    margin-right: var(--horizontalMarginContent) !important;
+  }
+}
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
index 8b507c626..14465bb8d 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -1,6 +1,6 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems } from '@app/core'
+import { ComponentPagination, hasMoreItems, ScreenService } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 
@@ -25,7 +25,8 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
 
   constructor (
     private videoPlaylistService: VideoPlaylistService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private screenService: ScreenService
   ) {}
 
   ngOnInit () {
@@ -48,6 +49,10 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
     this.loadVideoPlaylists()
   }
 
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
+
   private loadVideoPlaylists () {
     this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination)
         .subscribe(res => {
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 3b27f3aa1..ce33e7be6 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -16,11 +16,11 @@
 }
 
 .links {
-  @include fluid-videos-miniature-margins;
+  @include grid-videos-miniature-margins;
 }
 
 .channel-info {
-  @include fluid-videos-miniature-margins(false, 15px);
+  @include grid-videos-miniature-margins(false, 15px);
 
   display: grid;
   grid-template-columns: 1fr auto;
-- 
cgit v1.2.3