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