X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fmodal%2Fvideo-share.component.html;h=e0be9f2654b9ac62448dd41abc90507ce7d4737b;hb=f36da21e40104a50acb00132920b835240cebb38;hp=26ab5144ab0a334dbfc7f5d3dae2cf8dc48e3a25;hpb=b1d40cff89f7cff565a98cdbcea9a624196a169a;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 26ab5144a..e0be9f265 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -1,47 +1,176 @@
-<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
+<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-header">
-        <span class="close" aria-hidden="true" (click)="hide()"></span>
-        <h4 i18n class="modal-title">Share</h4>
-      </div>
+  <div class="modal-body">
+    <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)">
+
+      <ngb-tab i18n-title title="URL" id="url">
+        <ng-template ngbTabContent>
 
-      <div class="modal-body">
-        <div class="form-group">
-          <label i18n>URL</label>
-          <div class="input-group input-group-sm">
-            <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
-            <div class="input-group-btn" placement="bottom right">
-              <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
-                <span class="glyphicon glyphicon-copy"></span>
-              </button>
+          <div class="tab-content">
+            <div class="input-group">
+              <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoUrl()" />
+              <div class="input-group-append">
+                <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+                  <span class="glyphicon glyphicon-copy"></span>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div class="form-group">
-          <label i18n>Embed</label>
-          <div class="input-group input-group-sm">
-            <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
-            <div class="input-group-btn" placement="bottom right">
-              <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
-                <span class="glyphicon glyphicon-copy"></span>
-              </button>
+        </ng-template>
+      </ngb-tab>
+
+      <ngb-tab i18n-title title="QR-Code" id="qrcode">
+        <ng-template ngbTabContent>
+          <div class="tab-content">
+            <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode>
+          </div>
+        </ng-template>
+      </ngb-tab>
+
+      <ngb-tab i18n-title title="Embed" id="embed">
+        <ng-template ngbTabContent>
+          <div class="tab-content">
+            <div class="input-group">
+              <input #shareInput (click)="shareInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoIframeCode()" />
+              <div class="input-group-append">
+                <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+                  <span class="glyphicon glyphicon-copy"></span>
+                </button>
+              </div>
+            </div>
+
+            <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>
+      </ngb-tab>
+
+    </ngb-tabset>
+
+    <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 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 *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 (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>
 
-        <div class="form-group inputs">
-          <span i18n class="action-button action-button-cancel" (click)="hide()">
-            Cancel
-          </span>
+          <ng-container i18n>
+            Less customization
+          </ng-container>
+        </ng-container>
+      </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="isInEmbedTab()">
+          <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>
+        </ng-container>
       </div>
     </div>
   </div>
-</div>
+
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
+  </div>
+
+</ng-template>