Add buttons in playlist page

To delete/edit/share the playlist

5 files changed, 489 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-share-modal/index.ts b/client/src/app/shared/shared-share-modal/index.ts
new file mode 100644
index 000000000..e13c08acc
--- /dev/null
+++ b/client/src/app/shared/shared-share-modal/index.ts
@@ -0,0 +1,3 @@
+export * from './video-share.component'
+
+export * from './shared-share-modal.module'
diff --git a/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts b/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts
new file mode 100644
index 000000000..e269eecac
--- /dev/null
+++ b/client/src/app/shared/shared-share-modal/shared-share-modal.module.ts
@@ -0,0 +1,27 @@
+import { QRCodeModule } from 'angularx-qrcode'
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '../shared-forms'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { VideoShareComponent } from './video-share.component'
+
+@NgModule({
+  imports: [
+    QRCodeModule,
+
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    VideoShareComponent
+  ],
+
+  exports: [
+    VideoShareComponent
+  ],
+
+  providers: [ ]
+})
+export class SharedShareModal { }
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
new file mode 100644
index 000000000..4174458b5
--- /dev/null
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -0,0 +1,232 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Share</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+
+  <div class="modal-body">
+
+    <div class="playlist" *ngIf="playlist">
+      <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
+
+      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">
+
+        <ng-container ngbNavItem="url">
+          <a ngbNavLink i18n>URL</a>
+
+          <ng-template ngbNavContent>
+            <div class="nav-content">
+
+              <my-input-readonly-copy [value]="getPlaylistUrl()"></my-input-readonly-copy>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem="qrcode">
+          <a ngbNavLink i18n>QR-Code</a>
+
+          <ng-template ngbNavContent>
+            <div class="nav-content">
+              <qrcode [qrdata]="getPlaylistUrl()" [size]="256" level="Q"></qrcode>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem="embed">
+          <a ngbNavLink i18n>Embed</a>
+
+          <ng-template ngbNavContent>
+            <div class="nav-content">
+              <my-input-readonly-copy [value]="getPlaylistIframeCode()"></my-input-readonly-copy>
+
+              <div i18n *ngIf="notSecure()" class="alert alert-warning">
+                The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+
+      </div>
+
+      <div [ngbNavOutlet]="nav"></div>
+
+      <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>
+        </div>
+
+      </div>
+    </div>
+
+
+    <div class="video" *ngIf="video">
+      <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
+
+      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
+
+        <ng-container ngbNavItem="url">
+          <a ngbNavLink i18n>URL</a>
+
+          <ng-template ngbNavContent>
+            <div class="nav-content">
+              <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem="qrcode">
+          <a ngbNavLink i18n>QR-Code</a>
+
+          <ng-template ngbNavContent>
+            <div class="nav-content">
+              <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem="embed">
+          <a ngbNavLink i18n>Embed</a>
+
+          <ng-template ngbNavContent>
+            <div class="nav-content">
+              <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy>
+
+              <div i18n *ngIf="notSecure()" class="alert alert-warning">
+                The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+
+      </div>
+
+      <div [ngbNavOutlet]="nav"></div>
+
+      <div class="filters">
+        <div>
+          <div class="form-group start-at">
+            <my-peertube-checkbox
+              inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
+              i18n-labelText labelText="Start at"
+            ></my-peertube-checkbox>
+
+            <my-timestamp-input
+              [timestamp]="customizations.startAt"
+              [maxTimestamp]="video.duration"
+              [disabled]="!customizations.startAtCheckbox"
+              [(ngModel)]="customizations.startAt"
+            >
+            </my-timestamp-input>
+          </div>
+
+          <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
+            <my-peertube-checkbox
+              inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
+              i18n-labelText labelText="Auto select subtitle"
+            ></my-peertube-checkbox>
+
+            <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
+              <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
+                <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
+          <div>
+            <div class="form-group stop-at">
+              <my-peertube-checkbox
+                inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
+                i18n-labelText labelText="Stop at"
+              ></my-peertube-checkbox>
+
+              <my-timestamp-input
+                [timestamp]="customizations.stopAt"
+                [maxTimestamp]="video.duration"
+                [disabled]="!customizations.stopAtCheckbox"
+                [(ngModel)]="customizations.stopAt"
+              >
+              </my-timestamp-input>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="autoplay" [(ngModel)]="customizations.autoplay"
+                i18n-labelText labelText="Autoplay"
+              ></my-peertube-checkbox>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="muted" [(ngModel)]="customizations.muted"
+                i18n-labelText labelText="Muted"
+              ></my-peertube-checkbox>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="loop" [(ngModel)]="customizations.loop"
+                i18n-labelText labelText="Loop"
+              ></my-peertube-checkbox>
+            </div>
+          </div>
+
+          <ng-container *ngIf="isVideoInEmbedTab()">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="title" [(ngModel)]="customizations.title"
+                i18n-labelText labelText="Display video title"
+              ></my-peertube-checkbox>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
+                i18n-labelText labelText="Display privacy warning"
+              ></my-peertube-checkbox>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="controls" [(ngModel)]="customizations.controls"
+                i18n-labelText labelText="Display player controls"
+              ></my-peertube-checkbox>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="controls" [(ngModel)]="customizations.peertubeLink"
+                i18n-labelText labelText="Display PeerTube button link"
+              ></my-peertube-checkbox>
+            </div>
+          </ng-container>
+        </div>
+
+        <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
+             [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
+
+          <ng-container *ngIf="isAdvancedCustomizationCollapsed">
+            <span class="glyphicon glyphicon-menu-down"></span>
+
+            <ng-container i18n>
+              More customization
+            </ng-container>
+          </ng-container>
+
+          <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
+            <span class="glyphicon glyphicon-menu-up"></span>
+
+            <ng-container i18n>
+              Less customization
+            </ng-container>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</ng-template>
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
new file mode 100644
index 000000000..091d4dc3b
--- /dev/null
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -0,0 +1,79 @@
+@import '_mixins';
+@import '_variables';
+
+my-input-readonly-copy {
+  width: 100%;
+}
+
+.title-page.title-page-single {
+  margin-top: 0;
+}
+
+.playlist {
+  margin-bottom: 50px;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(200px);
+}
+
+.qr-code-group {
+  text-align: center;
+}
+
+.nav-content {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.alert {
+  margin-top: 20px;
+}
+
+.filters {
+  margin-top: 30px;
+
+  .advanced-filters-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    font-size: 16px;
+    font-weight: $font-semibold;
+    cursor: pointer;
+
+    .glyphicon {
+      margin-right: 5px;
+    }
+  }
+
+  .form-group {
+    margin-bottom: 0;
+    height: 34px;
+    display: flex;
+    align-items: center;
+  }
+
+  .video-caption-block {
+    display: flex;
+    align-items: center;
+
+    .peertube-select-container {
+      margin-left: 10px;
+    }
+  }
+
+  .start-at,
+  .stop-at {
+    width: 300px;
+    display: flex;
+    align-items: center;
+
+    my-timestamp-input {
+      margin-left: 10px;
+    }
+  }
+}
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
new file mode 100644
index 000000000..8d8e8a3a5
--- /dev/null
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -0,0 +1,148 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { VideoDetails } from '@app/shared/shared-main'
+import { VideoPlaylist } from '@app/shared/shared-video-playlist'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { VideoCaption } from '@shared/models'
+import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
+
+type Customizations = {
+  startAtCheckbox: boolean
+  startAt: number
+
+  stopAtCheckbox: boolean
+  stopAt: number
+
+  subtitleCheckbox: boolean
+  subtitle: string
+
+  loop: boolean
+  autoplay: boolean
+  muted: boolean
+  title: boolean
+  warningTitle: boolean
+  controls: boolean
+  peertubeLink: boolean
+}
+
+type TabId = 'url' | 'qrcode' | 'embed'
+
+@Component({
+  selector: 'my-video-share',
+  templateUrl: './video-share.component.html',
+  styleUrls: [ './video-share.component.scss' ]
+})
+export class VideoShareComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  @Input() video: VideoDetails = null
+  @Input() videoCaptions: VideoCaption[] = []
+  @Input() playlist: VideoPlaylist = null
+
+  activeVideoId: TabId = 'url'
+  activePlaylistId: TabId = 'url'
+
+  customizations: Customizations
+  isAdvancedCustomizationCollapsed = true
+  includeVideoInPlaylist = false
+
+  private playlistPosition: number = null
+
+  constructor (private modalService: NgbModal) { }
+
+  show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
+    let subtitle: string
+    if (this.videoCaptions && this.videoCaptions.length !== 0) {
+      subtitle = this.videoCaptions[0].language.id
+    }
+
+    this.customizations = {
+      startAtCheckbox: false,
+      startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
+
+      stopAtCheckbox: false,
+      stopAt: this.video?.duration,
+
+      subtitleCheckbox: false,
+      subtitle,
+
+      loop: false,
+      autoplay: false,
+      muted: false,
+
+      // Embed options
+      title: true,
+      warningTitle: true,
+      controls: true,
+      peertubeLink: true
+    }
+
+    this.playlistPosition = currentPlaylistPosition
+
+    this.modalService.open(this.modal, { centered: true })
+  }
+
+  getVideoIframeCode () {
+    const options = this.getVideoOptions(this.video.embedUrl)
+
+    const embedUrl = buildVideoLink(options)
+    return buildVideoOrPlaylistEmbed(embedUrl)
+  }
+
+  getPlaylistIframeCode () {
+    const options = this.getPlaylistOptions(this.playlist.embedUrl)
+
+    const embedUrl = buildPlaylistLink(options)
+    return buildVideoOrPlaylistEmbed(embedUrl)
+  }
+
+  getVideoUrl () {
+    const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid
+    const options = this.getVideoOptions(baseUrl)
+
+    return buildVideoLink(options)
+  }
+
+  getPlaylistUrl () {
+    const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
+
+    if (!this.includeVideoInPlaylist) return base
+
+    return base + '?videoId=' + this.video.uuid
+  }
+
+  notSecure () {
+    return window.location.protocol === 'http:'
+  }
+
+  isVideoInEmbedTab () {
+    return this.activeVideoId === 'embed'
+  }
+
+  private getPlaylistOptions (baseUrl?: string) {
+    return {
+      baseUrl,
+
+      playlistPosition: this.playlistPosition || undefined
+    }
+  }
+
+  private getVideoOptions (baseUrl?: string) {
+    return {
+      baseUrl,
+
+      startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
+      stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
+
+      subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
+
+      loop: this.customizations.loop,
+      autoplay: this.customizations.autoplay,
+      muted: this.customizations.muted,
+
+      title: this.customizations.title,
+      warningTitle: this.customizations.warningTitle,
+      controls: this.customizations.controls,
+      peertubeLink: this.customizations.peertubeLink
+    }
+  }
+}