Add ability to list all local videos on client

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index b3bb7f5f87de7418862cbf8e7369e7b6b700514d..a6f0656b8b79d2f15cb6fe47be74c352f8488238 100644 (file)
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -1,17 +1,6 @@
 @import '_variables';
 @import '_mixins';
 
-my-redundancy-checkbox /deep/ my-peertube-checkbox {
-  .form-group {
-    margin-bottom: 0;
-    align-items: center;
-  }
-
-  label {
-    margin: 0;
-  }
-}
-
 .caption {
   justify-content: flex-end;
 

diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
index 38691f05045efe0074da56cc81ceb6e527509cde..fb3006b5328a82eaf964f1bfb2d3144f9ed12a6c 100644 (file)
--- a/client/src/app/shared/forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -1,4 +1,4 @@
-<div class="form-group">
+<div class="root">
   <label class="form-group-checkbox">
     <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="isDisabled" />
     <span role="checkbox" [attr.aria-checked]="checked"></span>

diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index ee133f1908d589292ab3f4c89050ae5a81dc2fdb..6e4e207751fe713b2c5fc89f6c59a91e4cc25f5c 100644 (file)
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -1,7 +1,7 @@
 @import '_variables';
 @import '_mixins';
 
-.form-group {
+.root {
   display: flex;
 
   .form-group-checkbox {
@@ -20,6 +20,10 @@
     }
   }
 
+  label {
+    margin-bottom: 0;
+  }
+
   my-help {
     position: relative;
     top: -2px;

diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index d543ab7c12172d34d4f1de4c1b28c07d8a3934fd..69a619b7675e1e54b5531bdb692d80a3a6dc306d 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,8 +1,18 @@
 <div [ngClass]="{ 'margin-content': marginContent }">
-  <div *ngIf="titlePage" class="title-page title-page-single">
-    {{ titlePage }}
+  <div class="videos-header">
+    <div *ngIf="titlePage" class="title-page title-page-single">
+      {{ titlePage }}
+    </div>
+    <my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
+
+    <div class="moderation-block" *ngIf="displayModerationBlock">
+      <my-peertube-checkbox
+        (change)="toggleModerationDisplay()"
+        inputName="display-unlisted-private"  i18n-labelText labelText="Display unlisted and private videos"
+      >
+      </my-peertube-checkbox>
+    </div>
   </div>
-  <my-video-feed [syndicationItems]="syndicationItems"></my-video-feed>
 
   <div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
   <div

diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 3f9c73a29251a291523db91292f1951cea1af11f..92998cb44909a7a8eb1725d907c479e1c7c30f8d 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -8,12 +8,27 @@
   }
 }
 
-.title-page.title-page-single {
-  margin-right: 5px;
-}
+.videos-header {
+  display: flex;
+  height: 80px;
+  align-items: center;
+
+  .title-page.title-page-single {
+    margin: 0 5px 0 0;
+  }
 
-my-video-feed {
-  display: inline-block;
+  my-video-feed {
+    display: inline-block;
+    position: relative;
+    top: 1px;
+  }
+
+  .moderation-block {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    align-items: center;
+  }
 }
 
 @media screen and (max-width: 500px) {

diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 7637911650ce28069b64dbcab9a92a9ce3ee4326..1f43f974c372f7446557755fed44343847097f70 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -37,6 +37,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   videoPages: Video[][] = []
   ownerDisplayType: OwnerDisplayType = 'account'
   firstLoadedPage: number
+  displayModerationBlock = false
 
   protected baseVideoWidth = 215
   protected baseVideoHeight = 205
@@ -160,6 +161,10 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
     )
   }
 
+  toggleModerationDisplay () {
+    throw new Error('toggleModerationDisplay is not implemented')
+  }
+
   protected hasMoreVideos () {
     // No results
     if (this.pagination.totalItems === 0) return false

diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index cfc483018d7471934e04fbd43253418743c31fd3..41ba20d0031420aff527dcb0f7255d3d68fe4eae 100644 (file)
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -8,6 +8,9 @@
       [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
     >
       {{ video.name }}
+
+      <span *ngIf="isUnlistedVideo(video)" class="badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivateVideo(video)" class="badge badge-danger" i18n>Private</span>
     </a>
 
     <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>

diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 7e8692b0be9f93b4bcb819ba431998e8a822cede..2f951a1f1b3ecb25eeb7d1d84901b31922b9f4fc 100644 (file)
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
+import { VideoPrivacy } from '../../../../../shared'
 
 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 
@@ -49,4 +50,12 @@ export class VideoMiniatureComponent implements OnInit {
   displayOwnerVideoChannel () {
     return this.ownerDisplayTypeChosen === 'videoChannel'
   }
+
+  isUnlistedVideo () {
+    return this.video.privacy.id === VideoPrivacy.UNLISTED
+  }
+
+  isPrivateVideo () {
+    return this.video.privacy.id === VideoPrivacy.PRIVATE
+  }
 }

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index b039d7ad417e155d25d3ce9f06a176aaae240d64..25db8e8edba0f8cc249510034687f619690127e3 100644 (file)
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -5,6 +5,11 @@
   @include peertube-select-container(auto);
 }
 
+my-peertube-checkbox {
+  display: block;
+  margin-bottom: 1rem;
+}
+
 .video-edit {
   height: 100%;
   min-height: 300px;

diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts
index c91c639cacefbbe1ed7425580e5b57d17a59c82a..9d000cf2ed6a003faa39a7bef17bd3d5f966886f 100644 (file)
--- a/client/src/app/videos/video-list/video-local.component.ts
+++ b/client/src/app/videos/video-list/video-local.component.ts
@@ -10,6 +10,7 @@ import { VideoService } from '../../shared/video/video.service'
 import { VideoFilter } from '../../../../../shared/models/videos/video-query.type'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { UserRight } from '../../../../../shared/models/users'
 
 @Component({
   selector: 'my-videos-local',
@@ -40,6 +41,11 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
   ngOnInit () {
     super.ngOnInit()
 
+    if (this.authService.isLoggedIn()) {
+      const user = this.authService.getUser()
+      this.displayModerationBlock = user.hasRight(UserRight.SEE_ALL_VIDEOS)
+    }
+
     this.generateSyndicationList()
   }
 
@@ -56,4 +62,10 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
   generateSyndicationList () {
     this.syndicationItems = this.videoService.getVideoFeedUrls(this.sort, this.filter, this.categoryOneOf)
   }
+
+  toggleModerationDisplay () {
+    this.filter = this.filter === 'local' ? 'all-local' as 'all-local' : 'local' as 'local'
+
+    this.reloadVideos()
+  }
 }

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 2efd6a1d3545b81915b9a4e428958468e34cbaa9..b25d7ae0f19d0f88ee302f80e556583b8591ec63 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -29,7 +29,7 @@
   display: block;
   /* Fallback for non-webkit */
   display: -webkit-box;
-  max-height: $font-size*$line-height*$lines-to-show;
+  max-height: $font-size*$line-height*$lines-to-show + 0.2;
   /* Fallback for non-webkit */
   font-size: $font-size;
   line-height: $line-height;