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