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       <h5 i18n *ngIf="video">Share the playlist</h5>
  12
  13       <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
  14         <div i18n>This playlist is private so you won't be able to share it with external users</div>
  15
  16         <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.uuid ]" target="_blank" rel="noopener noreferrer">
  17           Update playlist privacy
  18         </a>
  19       </div>
  20
  21       <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">
  22
  23         <ng-container ngbNavItem="url">
  24           <a ngbNavLink i18n>URL</a>
  25
  26           <ng-template ngbNavContent>
  27             <div class="nav-content">
  28               <my-input-text [value]="playlistUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
  29             </div>
  30           </ng-template>
  31         </ng-container>
  32
  33         <ng-container ngbNavItem="qrcode">
  34           <a ngbNavLink i18n>QR-Code</a>
  35
  36           <ng-template ngbNavContent>
  37             <div class="nav-content">
  38               <qrcode [qrdata]="playlistUrl" [width]="256" level="Q"></qrcode>
  39             </div>
  40           </ng-template>
  41         </ng-container>
  42
  43         <ng-container ngbNavItem="embed">
  44           <a ngbNavLink i18n>Embed</a>
  45
  46           <ng-template ngbNavContent>
  47             <div class="nav-content">
  48               <my-input-text
  49                 [value]="customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)="onUpdate()"
  50                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
  51               ></my-input-text>
  52
  53               <div i18n *ngIf="notSecure()" class="alert alert-warning">
  54                 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).
  55               </div>
  56
  57               <div class="embed" [innerHTML]="playlistEmbedSafeHTML"></div>
  58             </div>
  59           </ng-template>
  60         </ng-container>
  61
  62       </div>
  63
  64       <div [ngbNavOutlet]="nav"></div>
  65
  66       <div class="filters">
  67
  68         <div class="form-group" *ngIf="video">
  69           <my-peertube-checkbox
  70             inputName="includeVideoInPlaylist" [(ngModel)]="customizations.includeVideoInPlaylist"
  71             i18n-labelText labelText="Share the playlist at this video position"
  72           ></my-peertube-checkbox>
  73         </div>
  74
  75         <ng-container *ngIf="isInPlaylistEmbedTab()">
  76           <div class="form-group">
  77             <my-peertube-checkbox
  78               inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
  79               i18n-labelText labelText="Only display embed URL"
  80             ></my-peertube-checkbox>
  81           </div>
  82
  83           <div class="form-group">
  84             <my-peertube-checkbox
  85               inputName="responsive" [(ngModel)]="customizations.responsive"
  86               i18n-labelText labelText="Responsive embed"
  87             ></my-peertube-checkbox>
  88           </div>
  89         </ng-container>
  90
  91         <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
  92       </div>
  93     </div>
  94
  95
  96     <div class="video" *ngIf="video">
  97       <h5 *ngIf="playlist" i18n>Share the video</h5>
  98
  99       <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
 100         <div i18n>This video is private so you won't be able to share it with external users</div>
 101
 102         <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
 103           Update video privacy
 104         </a>
 105       </div>
 106
 107       <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
 108
 109         <ng-container ngbNavItem="url">
 110           <a ngbNavLink i18n>URL</a>
 111
 112           <ng-template ngbNavContent>
 113             <div class="nav-content">
 114               <my-input-text [value]="videoUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
 115             </div>
 116           </ng-template>
 117         </ng-container>
 118
 119         <ng-container ngbNavItem="qrcode">
 120           <a ngbNavLink i18n>QR-Code</a>
 121
 122           <ng-template ngbNavContent>
 123             <div class="nav-content">
 124               <qrcode [qrdata]="videoUrl" [width]="256" level="Q"></qrcode>
 125             </div>
 126           </ng-template>
 127         </ng-container>
 128
 129         <ng-container ngbNavItem="embed">
 130           <a ngbNavLink i18n>Embed</a>
 131
 132           <ng-template ngbNavContent>
 133             <div class="nav-content">
 134               <my-input-text
 135                 [value]="customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)="onUpdate()"
 136                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
 137               ></my-input-text>
 138
 139               <div i18n *ngIf="notSecure()" class="alert alert-warning">
 140                 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).
 141               </div>
 142
 143               <div class="embed" [innerHTML]="videoEmbedSafeHTML"></div>
 144             </div>
 145           </ng-template>
 146         </ng-container>
 147
 148       </div>
 149
 150       <div [ngbNavOutlet]="nav"></div>
 151
 152       <div class="filters">
 153         <div>
 154           <div class="form-group start-at" *ngIf="!video.isLive">
 155             <my-peertube-checkbox
 156               inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
 157               i18n-labelText labelText="Start at"
 158             ></my-peertube-checkbox>
 159
 160             <my-timestamp-input
 161               [timestamp]="customizations.startAt"
 162               [maxTimestamp]="video.duration"
 163               [disabled]="!customizations.startAtCheckbox"
 164               [(ngModel)]="customizations.startAt"
 165             >
 166             </my-timestamp-input>
 167           </div>
 168
 169           <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
 170             <my-peertube-checkbox
 171               inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
 172               i18n-labelText labelText="Auto select subtitle"
 173             ></my-peertube-checkbox>
 174
 175             <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
 176               <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
 177                 <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
 178               </select>
 179             </div>
 180           </div>
 181
 182           <div class="form-group" *ngIf="isInVideoEmbedTab()">
 183             <my-peertube-checkbox
 184               inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
 185               i18n-labelText labelText="Only display embed URL"
 186             ></my-peertube-checkbox>
 187           </div>
 188
 189           <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
 190         </div>
 191
 192         <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
 193           <div>
 194             <div class="form-group stop-at" *ngIf="!video.isLive">
 195               <my-peertube-checkbox
 196                 inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
 197                 i18n-labelText labelText="Stop at"
 198               ></my-peertube-checkbox>
 199
 200               <my-timestamp-input
 201                 [timestamp]="customizations.stopAt"
 202                 [maxTimestamp]="video.duration"
 203                 [disabled]="!customizations.stopAtCheckbox"
 204                 [(ngModel)]="customizations.stopAt"
 205               >
 206               </my-timestamp-input>
 207             </div>
 208
 209             <div class="form-group">
 210               <my-peertube-checkbox
 211                 inputName="autoplay" [(ngModel)]="customizations.autoplay"
 212                 i18n-labelText labelText="Autoplay"
 213               ></my-peertube-checkbox>
 214             </div>
 215
 216             <div class="form-group">
 217               <my-peertube-checkbox
 218                 inputName="muted" [(ngModel)]="customizations.muted"
 219                 i18n-labelText labelText="Muted"
 220               ></my-peertube-checkbox>
 221             </div>
 222
 223             <div class="form-group" *ngIf="!video.isLive">
 224               <my-peertube-checkbox
 225                 inputName="loop" [(ngModel)]="customizations.loop"
 226                 i18n-labelText labelText="Loop"
 227               ></my-peertube-checkbox>
 228             </div>
 229
 230             <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
 231               <my-peertube-checkbox
 232                 inputName="originUrl" [(ngModel)]="customizations.originUrl"
 233                 i18n-labelText labelText="Use origin instance URL"
 234               ></my-peertube-checkbox>
 235             </div>
 236           </div>
 237
 238           <ng-container *ngIf="isInVideoEmbedTab()">
 239             <div class="form-group">
 240               <my-peertube-checkbox
 241                 inputName="responsive" [(ngModel)]="customizations.responsive"
 242                 i18n-labelText labelText="Responsive embed"
 243               ></my-peertube-checkbox>
 244             </div>
 245
 246             <div class="form-group">
 247               <my-peertube-checkbox
 248                 inputName="title" [(ngModel)]="customizations.title"
 249                 i18n-labelText labelText="Display video title"
 250               ></my-peertube-checkbox>
 251             </div>
 252
 253             <div class="form-group">
 254               <my-peertube-checkbox
 255                 inputName="embedP2P" [(ngModel)]="customizations.embedP2P"
 256                 i18n-labelText labelText="P2P"
 257               ></my-peertube-checkbox>
 258             </div>
 259
 260             <div class="form-group">
 261               <my-peertube-checkbox
 262                 inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
 263                 i18n-labelText labelText="Display privacy warning" [disabled]="!customizations.embedP2P"
 264               ></my-peertube-checkbox>
 265             </div>
 266
 267             <div class="form-group">
 268               <my-peertube-checkbox
 269                 inputName="controlBar" [(ngModel)]="customizations.controlBar"
 270                 i18n-labelText labelText="Display player control bar"
 271               ></my-peertube-checkbox>
 272             </div>
 273
 274             <div class="form-group">
 275               <my-peertube-checkbox
 276                 inputName="peertubeLink" [(ngModel)]="customizations.peertubeLink"
 277                 i18n-labelText labelText="Display PeerTube button link"
 278               ></my-peertube-checkbox>
 279             </div>
 280           </ng-container>
 281         </div>
 282
 283         <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
 284              [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 285
 286           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
 287             <span class="chevron-down"></span>
 288
 289             <ng-container i18n>
 290               More customization
 291             </ng-container>
 292           </ng-container>
 293
 294           <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
 295             <span class="chevron-up"></span>
 296
 297             <ng-container i18n>
 298               Less customization
 299             </ng-container>
 300           </ng-container>
 301         </div>
 302       </div>
 303     </div>
 304   </div>
 305
 306 </ng-template>