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 class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
  96           <div>
  97             <div class="form-group stop-at">
  98               <my-peertube-checkbox
  99                 inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
 100                 i18n-labelText labelText="Stop at"
 101               ></my-peertube-checkbox>
 102
 103               <my-timestamp-input
 104                 [timestamp]="customizations.stopAt"
 105                 [maxTimestamp]="video.duration"
 106                 [disabled]="!customizations.stopAtCheckbox"
 107                 [(ngModel)]="customizations.stopAt"
 108               >
 109               </my-timestamp-input>
 110             </div>
 111
 112             <div class="form-group">
 113               <my-peertube-checkbox
 114                 inputName="autoplay" [(ngModel)]="customizations.autoplay"
 115                 i18n-labelText labelText="Autoplay"
 116               ></my-peertube-checkbox>
 117             </div>
 118
 119             <div class="form-group">
 120               <my-peertube-checkbox
 121                 inputName="muted" [(ngModel)]="customizations.muted"
 122                 i18n-labelText labelText="Muted"
 123               ></my-peertube-checkbox>
 124             </div>
 125
 126             <div class="form-group">
 127               <my-peertube-checkbox
 128                 inputName="loop" [(ngModel)]="customizations.loop"
 129                 i18n-labelText labelText="Loop"
 130               ></my-peertube-checkbox>
 131             </div>
 132           </div>
 133
 134           <ng-container *ngIf="isInEmbedTab()">
 135             <div class="form-group">
 136               <my-peertube-checkbox
 137                 inputName="title" [(ngModel)]="customizations.title"
 138                 i18n-labelText labelText="Display video title"
 139               ></my-peertube-checkbox>
 140             </div>
 141
 142             <div class="form-group">
 143               <my-peertube-checkbox
 144                 inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
 145                 i18n-labelText labelText="Display privacy warning"
 146               ></my-peertube-checkbox>
 147             </div>
 148
 149             <div class="form-group">
 150               <my-peertube-checkbox
 151                 inputName="controls" [(ngModel)]="customizations.controls"
 152                 i18n-labelText labelText="Display player controls"
 153               ></my-peertube-checkbox>
 154             </div>
 155           </ng-container>
 156         </div>
 157
 158         <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
 159              [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 160
 161           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
 162             <span class="glyphicon glyphicon-menu-down"></span>
 163
 164             <ng-container i18n>
 165               More customization
 166             </ng-container>
 167           </ng-container>
 168
 169           <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
 170             <span class="glyphicon glyphicon-menu-up"></span>
 171
 172             <ng-container i18n>
 173               Less customization
 174             </ng-container>
 175           </ng-container>
 176         </div>
 177       </div>
 178     </div>
 179   </div>
 180
 181 </ng-template>