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" *ngIf="isInVideoEmbedTab()">
 175             <my-peertube-checkbox
 176               inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
 177               i18n-labelText labelText="Only display embed URL"
 178             ></my-peertube-checkbox>
 179           </div>
 180         </div>
 181
 182         <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
 183           <div>
 184             <div class="form-group stop-at" *ngIf="!video.isLive">
 185               <my-peertube-checkbox
 186                 inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
 187                 i18n-labelText labelText="Stop at"
 188               ></my-peertube-checkbox>
 189
 190               <my-timestamp-input
 191                 [timestamp]="customizations.stopAt"
 192                 [maxTimestamp]="video.duration"
 193                 [disabled]="!customizations.stopAtCheckbox"
 194                 [(ngModel)]="customizations.stopAt"
 195               >
 196               </my-timestamp-input>
 197             </div>
 198
 199             <div class="form-group">
 200               <my-peertube-checkbox
 201                 inputName="autoplay" [(ngModel)]="customizations.autoplay"
 202                 i18n-labelText labelText="Autoplay"
 203               ></my-peertube-checkbox>
 204             </div>
 205
 206             <div class="form-group">
 207               <my-peertube-checkbox
 208                 inputName="muted" [(ngModel)]="customizations.muted"
 209                 i18n-labelText labelText="Muted"
 210               ></my-peertube-checkbox>
 211             </div>
 212
 213             <div class="form-group" *ngIf="!video.isLive">
 214               <my-peertube-checkbox
 215                 inputName="loop" [(ngModel)]="customizations.loop"
 216                 i18n-labelText labelText="Loop"
 217               ></my-peertube-checkbox>
 218             </div>
 219
 220             <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
 221               <my-peertube-checkbox
 222                 inputName="originUrl" [(ngModel)]="customizations.originUrl"
 223                 i18n-labelText labelText="Use origin instance URL"
 224               ></my-peertube-checkbox>
 225             </div>
 226           </div>
 227
 228           <ng-container *ngIf="isInVideoEmbedTab()">
 229             <div class="form-group">
 230               <my-peertube-checkbox
 231                 inputName="title" [(ngModel)]="customizations.title"
 232                 i18n-labelText labelText="Display video title"
 233               ></my-peertube-checkbox>
 234             </div>
 235
 236             <div class="form-group">
 237               <my-peertube-checkbox
 238                 inputName="embedP2P" [(ngModel)]="customizations.embedP2P"
 239                 i18n-labelText labelText="P2P"
 240               ></my-peertube-checkbox>
 241             </div>
 242
 243             <div class="form-group">
 244               <my-peertube-checkbox
 245                 inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
 246                 i18n-labelText labelText="Display privacy warning" [disabled]="!customizations.embedP2P"
 247               ></my-peertube-checkbox>
 248             </div>
 249
 250             <div class="form-group">
 251               <my-peertube-checkbox
 252                 inputName="controlBar" [(ngModel)]="customizations.controlBar"
 253                 i18n-labelText labelText="Display player control bar"
 254               ></my-peertube-checkbox>
 255             </div>
 256
 257             <div class="form-group">
 258               <my-peertube-checkbox
 259                 inputName="peertubeLink" [(ngModel)]="customizations.peertubeLink"
 260                 i18n-labelText labelText="Display PeerTube button link"
 261               ></my-peertube-checkbox>
 262             </div>
 263           </ng-container>
 264         </div>
 265
 266         <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
 267              [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
 268
 269           <ng-container *ngIf="isAdvancedCustomizationCollapsed">
 270             <span class="glyphicon glyphicon-menu-down"></span>
 271
 272             <ng-container i18n>
 273               More customization
 274             </ng-container>
 275           </ng-container>
 276
 277           <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
 278             <span class="glyphicon glyphicon-menu-up"></span>
 279
 280             <ng-container i18n>
 281               Less customization
 282             </ng-container>
 283           </ng-container>
 284         </div>
 285       </div>
 286     </div>
 287   </div>
 288
 289 </ng-template>