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