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