client/src/app/videos/+video-watch/modal/video-share.component.html

   1 <ng-template #modal let-hide="close">
   2   <div class="modal-header">
   3     <h4 i18n class="modal-title">Share</h4>
   4     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   5   </div>
   6
   7   <div class="modal-body">
   8     <ngb-tabset class="root-tabset bootstrap" (tabChange)="onTabChange($event)">
   9
  10       <ngb-tab i18n-title title="URL" id="url">
  11         <ng-template ngbTabContent>
  12
  13           <div class="tab-content">
  14             <div class="input-group">
  15               <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoUrl()" />
  16               <div class="input-group-append">
  17                 <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
  18                   <span class="glyphicon glyphicon-copy"></span>
  19                 </button>
  20               </div>
  21             </div>
  22           </div>
  23
  24         </ng-template>
  25       </ngb-tab>
  26
  27       <ngb-tab i18n-title title="QR-Code" id="qrcode">
  28         <ng-template ngbTabContent>
  29           <div class="tab-content">
  30             <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
  31           </div>
  32         </ng-template>
  33       </ngb-tab>
  34
  35       <ngb-tab i18n-title title="Embed" id="embed">
  36         <ng-template ngbTabContent>
  37           <div class="tab-content">
  38             <div class="input-group">
  39               <input #shareInput (click)="shareInput.select()" type="text" class="form-control readonly" readonly [value]="getVideoIframeCode()" />
  40               <div class="input-group-append">
  41                 <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
  42                   <span class="glyphicon glyphicon-copy"></span>
  43                 </button>
  44               </div>
  45             </div>
  46
  47             <div i18n *ngIf="notSecure()" class="alert alert-warning">
  48               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).
  49             </div>
  50           </div>
  51         </ng-template>
  52       </ngb-tab>
  53
  54     </ngb-tabset>
  55
  56     <div class="filters">
  57       <div>
  58         <div class="form-group start-at">
  59           <my-peertube-checkbox
  60             inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
  61             i18n-labelText labelText="Start at"
  62           ></my-peertube-checkbox>
  63
  64           <my-timestamp-input
  65             [timestamp]="customizations.startAt"
  66             [maxTimestamp]="video.duration"
  67             [disabled]="!customizations.startAtCheckbox"
  68             [(ngModel)]="customizations.startAt"
  69           >
  70           </my-timestamp-input>
  71         </div>
  72
  73         <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
  74           <my-peertube-checkbox
  75             inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
  76             i18n-labelText labelText="Auto select subtitle"
  77           ></my-peertube-checkbox>
  78
  79           <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
  80             <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
  81               <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
  82             </select>
  83           </div>
  84         </div>
  85       </div>
  86
  87       <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
  88            [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
  89
  90         <ng-container *ngIf="isAdvancedCustomizationCollapsed">
  91           <span class="glyphicon glyphicon-menu-down"></span>
  92
  93           <ng-container i18n>
  94             More customization
  95           </ng-container>
  96         </ng-container>
  97
  98         <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
  99           <span class="glyphicon glyphicon-menu-up"></span>
 100
 101           <ng-container i18n>
 102             Less customization
 103           </ng-container>
 104         </ng-container>
 105       </div>
 106
 107       <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
 108         <div>
 109           <div class="form-group stop-at">
 110             <my-peertube-checkbox
 111               inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
 112               i18n-labelText labelText="Stop at"
 113             ></my-peertube-checkbox>
 114
 115             <my-timestamp-input
 116               [timestamp]="customizations.stopAt"
 117               [maxTimestamp]="video.duration"
 118               [disabled]="!customizations.stopAtCheckbox"
 119               [(ngModel)]="customizations.stopAt"
 120             >
 121             </my-timestamp-input>
 122           </div>
 123
 124           <div class="form-group">
 125             <my-peertube-checkbox
 126               inputName="autoplay" [(ngModel)]="customizations.autoplay"
 127               i18n-labelText labelText="Autoplay"
 128             ></my-peertube-checkbox>
 129           </div>
 130
 131           <div class="form-group">
 132             <my-peertube-checkbox
 133               inputName="muted" [(ngModel)]="customizations.muted"
 134               i18n-labelText labelText="Muted"
 135             ></my-peertube-checkbox>
 136           </div>
 137
 138           <div class="form-group">
 139             <my-peertube-checkbox
 140               inputName="loop" [(ngModel)]="customizations.loop"
 141               i18n-labelText labelText="Loop"
 142             ></my-peertube-checkbox>
 143           </div>
 144         </div>
 145
 146         <ng-container *ngIf="isInEmbedTab()">
 147           <div class="form-group">
 148             <my-peertube-checkbox
 149               inputName="title" [(ngModel)]="customizations.title"
 150               i18n-labelText labelText="Display video title"
 151             ></my-peertube-checkbox>
 152           </div>
 153
 154           <div class="form-group">
 155             <my-peertube-checkbox
 156               inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
 157               i18n-labelText labelText="Display privacy warning"
 158             ></my-peertube-checkbox>
 159           </div>
 160
 161           <div class="form-group">
 162             <my-peertube-checkbox
 163               inputName="controls" [(ngModel)]="customizations.controls"
 164               i18n-labelText labelText="Display player controls"
 165             ></my-peertube-checkbox>
 166           </div>
 167         </ng-container>
 168       </div>
 169     </div>
 170   </div>
 171
 172   <div class="modal-footer inputs">
 173     <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
 174   </div>
 175
 176 </ng-template>