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