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