Add "only display embed URL" in share modal

2 files changed, 41 insertions, 14 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 ecd36dd5a..7ff62e128 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
@@ -47,7 +47,7 @@
           <ng-template ngbNavContent>
             <div class="nav-content">
               <my-input-toggle-hidden
-                [value]="getPlaylistIframeCode()" (change)="updateEmbedCode()"
+                [value]="customizations.onlyEmbedUrl ? getPlaylistEmbedUrl() : getPlaylistIframeCode()" (change)="updateEmbedCode()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
               ></my-input-toggle-hidden>
 
@@ -67,8 +67,18 @@
       <div class="filters">
 
         <div class="form-group" *ngIf="video">
-          <my-peertube-checkbox inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist" i18n-labelText
-            labelText="Share the playlist at this video position"></my-peertube-checkbox>
+          <my-peertube-checkbox
+            inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist"
+            i18n-labelText labelText="Share the playlist at this video position"
+          ></my-peertube-checkbox>
+        </div>
+
+        <div class="form-group">
+          <my-peertube-checkbox
+            *ngIf="isInPlaylistEmbedTab()"
+            inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
+            i18n-labelText labelText="Only display embed URL"
+          ></my-peertube-checkbox>
         </div>
 
       </div>
@@ -114,7 +124,7 @@
           <ng-template ngbNavContent>
             <div class="nav-content">
               <my-input-toggle-hidden
-                [value]="getVideoIframeCode()" (ngModelChange)="updateEmbedCode()"
+                [value]="customizations.onlyEmbedUrl ? getVideoEmbedUrl() : getVideoIframeCode()" (ngModelChange)="updateEmbedCode()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
               ></my-input-toggle-hidden>
 
@@ -160,6 +170,14 @@
               </select>
             </div>
           </div>
+
+          <div class="form-group">
+            <my-peertube-checkbox
+              *ngIf="isInVideoEmbedTab()"
+              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
+              i18n-labelText labelText="Only display embed URL"
+            ></my-peertube-checkbox>
+          </div>
         </div>
 
         <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
@@ -200,7 +218,7 @@
               ></my-peertube-checkbox>
             </div>
 
-            <div *ngIf="!isLocalVideo() && !isVideoInEmbedTab()" class="form-group">
+            <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
               <my-peertube-checkbox
                 inputName="originUrl" [(ngModel)]="customizations.originUrl"
                 i18n-labelText labelText="Use origin instance URL"
@@ -208,7 +226,7 @@
             </div>
           </div>
 
-          <ng-container *ngIf="isVideoInEmbedTab()">
+          <ng-container *ngIf="isInVideoEmbedTab()">
             <div class="form-group">
               <my-peertube-checkbox
                 inputName="title" [(ngModel)]="customizations.title"
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 2346f03e4..6c0d4a039 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
@@ -24,6 +24,7 @@ type Customizations = {
   muted: boolean
 
   embedP2P: boolean
+  onlyEmbedUrl: boolean
   title: boolean
   warningTitle: boolean
   controls: boolean
@@ -82,9 +83,9 @@ export class VideoShareComponent {
       autoplay: false,
       muted: false,
 
-      embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
-
       // Embed options
+      embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
+      onlyEmbedUrl: false,
       title: true,
       warningTitle: true,
       controls: true,
@@ -112,15 +113,19 @@ export class VideoShareComponent {
   }
 
   getVideoIframeCode () {
-    const embedUrl = decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions(true) })
+    return buildVideoOrPlaylistEmbed(this.getVideoEmbedUrl(), this.video.name)
+  }
 
-    return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
+  getVideoEmbedUrl () {
+    return decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions(true) })
   }
 
-  getPlaylistIframeCode () {
-    const embedUrl = decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
+  getPlaylistEmbedUrl () {
+    return decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
+  }
 
-    return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
+  getPlaylistIframeCode () {
+    return buildVideoOrPlaylistEmbed(this.getPlaylistEmbedUrl(), this.playlist.displayName)
   }
 
   getVideoUrl () {
@@ -152,10 +157,14 @@ export class VideoShareComponent {
     return window.location.protocol === 'http:'
   }
 
-  isVideoInEmbedTab () {
+  isInVideoEmbedTab () {
     return this.activeVideoId === 'embed'
   }
 
+  isInPlaylistEmbedTab () {
+    return this.activePlaylistId === 'embed'
+  }
+
   isLocalVideo () {
     return this.video.isLocal
   }