client/src/app/shared/shared-share-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
  10     <div class="playlist" *ngIf="playlist">
  11       <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
  12
  13       <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">
  14
  15         <ng-container ngbNavItem="url">
  16           <a ngbNavLink i18n>URL</a>
  17
  18           <ng-template ngbNavContent>
  19             <div class="nav-content">
  20
  21               <my-input-readonly-copy [value]="getPlaylistUrl()"></my-input-readonly-copy>
  22             </div>
  23           </ng-template>
  24         </ng-container>
  25
  26         <ng-container ngbNavItem="qrcode">
  27           <a ngbNavLink i18n>QR-Code</a>
  28
  29           <ng-template ngbNavContent>
  30             <div class="nav-content">
  31               <qrcode [qrdata]="getPlaylistUrl()" [size]="256" level="Q"></qrcode>
  32             </div>
  33           </ng-template>
  34         </ng-container>
  35
  36         <ng-container ngbNavItem="embed">
  37           <a ngbNavLink i18n>Embed</a>
  38
  39           <ng-template ngbNavContent>
  40             <div class="nav-content">
  41               <my-input-readonly-copy [value]="getPlaylistIframeCode()"></my-input-readonly-copy>
  42
  43               <div i18n *ngIf="notSecure()" class="alert alert-warning">
  44                 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).
  45               </div>
  46             </div>
  47           </ng-template>
  48         </ng-container>
  49
  50       </div>
  51
  52       <div [ngbNavOutlet]="nav"></div>
  53
  54       <div class="filters">
  55
  56         <div class="form-group" *ngIf="video">
  57           <my-peertube-checkbox inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist" i18n-labelText
  58             labelText="Share the playlist at this video position"></my-peertube-checkbox>
  59         </div>
  60
  61       </div>
  62     </div>
  63
  64
  65     <div class="video" *ngIf="video">
  66       <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
  67
  68       <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
  69
  70         <ng-container ngbNavItem="url">
  71           <a ngbNavLink i18n>URL</a>
  72
  73           <ng-template ngbNavContent>
  74             <div class="nav-content">
  75               <my-input-readonly-copy [value]="getVideoUrl()"></my-input-readonly-copy>
  76             </div>
  77           </ng-template>
  78         </ng-container>
  79
  80         <ng-container ngbNavItem="qrcode">
  81           <a ngbNavLink i18n>QR-Code</a>
  82
  83           <ng-template ngbNavContent>
  84             <div class="nav-content">
  85               <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
  86             </div>
  87           </ng-template>
  88         </ng-container>
  89
  90         <ng-container ngbNavItem="embed">
  91           <a ngbNavLink i18n>Embed</a>
  92
  93           <ng-template ngbNavContent>
  94             <div class="nav-content">
  95               <my-input-readonly-copy [value]="getVideoIframeCode()"></my-input-readonly-copy>
  96
  97               <div i18n *ngIf="notSecure()" class="alert alert-warning">
  98                 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).
  99               </div>
 100             </div>
 101           </ng-template>
 102         </ng-container>
 103
 104       </div>
 105
 106       <div [ngbNavOutlet]="nav"></div>
 107
 108       <div class="filters">
 109         <div>
 110           <div class="form-group start-at">
 111             <my-peertube-checkbox
 112               inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
 113               i18n-labelText labelText="Start at"
 114             ></my-peertube-checkbox>
 115
 116             <my-timestamp-input
 117               [timestamp]="customizations.startAt"
 118               [maxTimestamp]="video.duration"
 119               [disabled]="!customizations.startAtCheckbox"
 120               [(ngModel)]="customizations.startAt"
 121             >
 122             </my-timestamp-input>
 123           </div>
 124
 125           <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
 126             <my-peertube-checkbox
 127               inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
 128               i18n-labelText labelText="Auto select subtitle"
 129             ></my-peertube-checkbox>
 130
 131             <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
 132               <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
 133                 <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
 134               </select>
 135             </div>
 136           </div>
 137         </div>
 138
 139         <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
 140           <div>
 141             <div class="form-group stop-at">
 142               <my-peertube-checkbox
 143                 inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
 144                 i18n-labelText labelText="Stop at"
 145               ></my-peertube-checkbox>
 146
 147               <my-timestamp-input
 148                 [timestamp]="customizations.stopAt"
 149                 [maxTimestamp]="video.duration"
 150                 [disabled]="!customizations.stopAtCheckbox"
 151                 [(ngModel)]="customizations.stopAt"
 152               >
 153               </my-timestamp-input>
 154             </div>
 155
 156             <div class="form-group">
 157               <my-peertube-checkbox
 158                 inputName="autoplay" [(ngModel)]="customizations.autoplay"
 159                 i18n-labelText labelText="Autoplay"
 160               ></my-peertube-checkbox>
 161             </div>
 162
 163             <div class="form-group">
 164               <my-peertube-checkbox
 165                 inputName="muted" [(ngModel)]="customizations.muted"
 166                 i18n-labelText labelText="Muted"
 167               ></my-peertube-checkbox>
 168             </div>
 169
 170             <div class="form-group">
 171               <my-peertube-checkbox
 172                 inputName="loop" [(ngModel)]="customizations.loop"
 173                 i18n-labelText labelText="Loop"
 174               ></my-peertube-checkbox>
 175             </div>
 176           </div>
 177
 178           <ng-container *ngIf="isVideoInEmbedTab()">
 179             <div class="form-group">
 180               <my-peertube-checkbox
 181                 inputName="title" [(ngModel)]="customizations.title"
 182                 i18n-labelText labelText="Display video title"
 183               ></my-peertube-checkbox>
 184             </div>
 185
 186             <div class="form-group">
 187               <my-peertube-checkbox
 188                 inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
 189                 i18n-labelText labelText="Display privacy warning"
 190               ></my-peertube-checkbox>
 191             </div>
 192
 193             <div class="form-group">
 194               <my-peertube-checkbox
 195                 inputName="controls" [(ngModel)]="customizations.controls"
 196                 i18n-labelText labelText="Display player controls"
 197               ></my-peertube-checkbox>
 198             </div>
 199
 200             <div class="form-group">
 201               <my-peertube-checkbox
 202                 inputName="controls" [(ngModel)]="customizations.peertubeLink"
 203                 i18n-labelText labelText="Display PeerTube button link"
 204               ></my-peertube-checkbox>
 205             </div>
 206           </ng-container>
 207         </div>
 208
 209         <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
 210              [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 211
 212           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
 213             <span class="glyphicon glyphicon-menu-down"></span>
 214
 215             <ng-container i18n>
 216               More customization
 217             </ng-container>
 218           </ng-container>
 219
 220           <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
 221             <span class="glyphicon glyphicon-menu-up"></span>
 222
 223             <ng-container i18n>
 224               Less customization
 225             </ng-container>
 226           </ng-container>
 227         </div>
 228       </div>
 229     </div>
 230   </div>
 231
 232 </ng-template>