Add warning and update privacy on share playlist (#4469)

* add warning and update privacy on share

* update playlist display name on toast

* change privacy update to link

* remove conditional

* Improve share private warning styling

Co-authored-by: Chocobozzz <me@florianbigard.com>

3 files changed, 32 insertions, 1 deletions

diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index bcb1db4c4..059699d3b 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -10,6 +10,15 @@
     <div class="playlist" *ngIf="playlist">
       <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
 
+
+      <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
+        <div i18n>This playlist is private so you won't be able to share it with external users</div>
+
+        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.uuid ]" target="_blank" rel="noopener noreferrer">
+          Update playlist privacy
+        </a>
+      </div>
+
       <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">
 
         <ng-container ngbNavItem="url">
@@ -65,6 +74,14 @@
     <div class="video" *ngIf="video">
       <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
 
+      <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
+        <div i18n>This video is private so you won't be able to share it with external users</div>
+
+        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
+          Update video privacy
+        </a>
+      </div>
+
       <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
 
         <ng-container ngbNavItem="url">
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 98aab8fe8..ac3b841da 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -81,3 +81,9 @@ my-input-toggle-hidden {
     }
   }
 }
+
+.alert-private {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index 70890e551..e6e4bd147 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -3,7 +3,7 @@ import { VideoDetails } from '@app/shared/shared-main'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { buildPlaylistLink, buildVideoLink, decoratePlaylistLink, decorateVideoLink } from '@shared/core-utils'
-import { VideoCaption } from '@shared/models'
+import { VideoCaption, VideoPlaylistPrivacy, VideoPrivacy } from '@shared/models'
 import { buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
 
 type Customizations = {
@@ -126,6 +126,14 @@ export class VideoShareComponent {
     return this.video.isLocal
   }
 
+  isPrivateVideo () {
+    return this.video.privacy.id === VideoPrivacy.PRIVATE
+  }
+
+  isPrivatePlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
+  }
+
   private getPlaylistOptions (baseUrl?: string) {
     return {
       baseUrl,