308 lines
11 KiB
HTML
308 lines
11 KiB
HTML
<ng-template #modal let-hide="close">
|
|
<div class="modal-header">
|
|
<h4 i18n class="modal-title">Share</h4>
|
|
|
|
<button class="border-0 p-0" (click)="hide()">
|
|
<my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
<div class="playlist" *ngIf="playlist">
|
|
<h5 i18n *ngIf="video">Share the playlist</h5>
|
|
|
|
<div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
|
|
<div i18n>This playlist is private so you won't be able to share it with external users</div>
|
|
|
|
<a i18n class="peertube-button-link orange-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.uuid ]" target="_blank" rel="noopener noreferrer">
|
|
Update playlist privacy
|
|
</a>
|
|
</div>
|
|
|
|
<div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">
|
|
|
|
<ng-container ngbNavItem="url">
|
|
<a ngbNavLink i18n>URL</a>
|
|
|
|
<ng-template ngbNavContent>
|
|
<div class="nav-content">
|
|
<my-input-text [value]="playlistUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
|
|
<ng-container ngbNavItem="qrcode">
|
|
<a ngbNavLink i18n>QR-Code</a>
|
|
|
|
<ng-template ngbNavContent>
|
|
<div class="nav-content">
|
|
<qrcode [qrdata]="playlistUrl" [width]="256" level="Q"></qrcode>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
|
|
<ng-container ngbNavItem="embed">
|
|
<a ngbNavLink i18n>Embed</a>
|
|
|
|
<ng-template ngbNavContent>
|
|
<div class="nav-content">
|
|
<my-input-text
|
|
[value]="customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)="onUpdate()"
|
|
[withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
|
|
></my-input-text>
|
|
|
|
<div i18n *ngIf="notSecure()" class="alert alert-warning">
|
|
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).
|
|
</div>
|
|
|
|
<div class="embed" [innerHTML]="playlistEmbedSafeHTML"></div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
<div [ngbNavOutlet]="nav"></div>
|
|
|
|
<div class="filters">
|
|
|
|
<div class="form-group" *ngIf="video">
|
|
<my-peertube-checkbox
|
|
inputName="includeVideoInPlaylist" [(ngModel)]="customizations.includeVideoInPlaylist"
|
|
i18n-labelText labelText="Share the playlist at this video position"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<ng-container *ngIf="isInPlaylistEmbedTab()">
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
|
|
i18n-labelText labelText="Only display embed URL"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="responsive" [(ngModel)]="customizations.responsive"
|
|
i18n-labelText labelText="Responsive embed"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="video" *ngIf="video">
|
|
<h5 *ngIf="playlist" i18n>Share the video</h5>
|
|
|
|
<div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
|
|
<div i18n>This video is private so you won't be able to share it with external users</div>
|
|
|
|
<a i18n class="peertube-button-link orange-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
|
|
Update video privacy
|
|
</a>
|
|
</div>
|
|
|
|
<div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
|
|
|
|
<ng-container ngbNavItem="url">
|
|
<a ngbNavLink i18n>URL</a>
|
|
|
|
<ng-template ngbNavContent>
|
|
<div class="nav-content">
|
|
<my-input-text [value]="videoUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
|
|
<ng-container ngbNavItem="qrcode">
|
|
<a ngbNavLink i18n>QR-Code</a>
|
|
|
|
<ng-template ngbNavContent>
|
|
<div class="nav-content">
|
|
<qrcode [qrdata]="videoUrl" [width]="256" level="Q"></qrcode>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
|
|
<ng-container ngbNavItem="embed">
|
|
<a ngbNavLink i18n>Embed</a>
|
|
|
|
<ng-template ngbNavContent>
|
|
<div class="nav-content">
|
|
<my-input-text
|
|
[value]="customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)="onUpdate()"
|
|
[withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
|
|
></my-input-text>
|
|
|
|
<div i18n *ngIf="notSecure()" class="alert alert-warning">
|
|
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).
|
|
</div>
|
|
|
|
<div class="embed" [innerHTML]="videoEmbedSafeHTML"></div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
<div [ngbNavOutlet]="nav"></div>
|
|
|
|
<div class="filters">
|
|
<div class="form-group start-at" *ngIf="!video.isLive">
|
|
<my-peertube-checkbox
|
|
inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
|
|
i18n-labelText labelText="Start at"
|
|
></my-peertube-checkbox>
|
|
|
|
<my-timestamp-input
|
|
[timestamp]="customizations.startAt"
|
|
[maxTimestamp]="video.duration"
|
|
[disabled]="!customizations.startAtCheckbox"
|
|
[(ngModel)]="customizations.startAt"
|
|
>
|
|
</my-timestamp-input>
|
|
</div>
|
|
|
|
<div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
|
|
<my-peertube-checkbox
|
|
inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
|
|
i18n-labelText labelText="Auto select subtitle"
|
|
></my-peertube-checkbox>
|
|
|
|
<div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
|
|
<select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
|
|
<option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" *ngIf="isInVideoEmbedTab()">
|
|
<my-peertube-checkbox
|
|
inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
|
|
i18n-labelText labelText="Only display embed URL"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
|
|
|
|
<div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
|
|
<div class="form-group stop-at" *ngIf="!video.isLive">
|
|
<my-peertube-checkbox
|
|
inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
|
|
i18n-labelText labelText="Stop at"
|
|
></my-peertube-checkbox>
|
|
|
|
<my-timestamp-input
|
|
[timestamp]="customizations.stopAt"
|
|
[maxTimestamp]="video.duration"
|
|
[disabled]="!customizations.stopAtCheckbox"
|
|
[(ngModel)]="customizations.stopAt"
|
|
>
|
|
</my-timestamp-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="autoplay" [(ngModel)]="customizations.autoplay"
|
|
i18n-labelText labelText="Autoplay"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="muted" [(ngModel)]="customizations.muted"
|
|
i18n-labelText labelText="Muted"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group" *ngIf="!video.isLive">
|
|
<my-peertube-checkbox
|
|
inputName="loop" [(ngModel)]="customizations.loop"
|
|
i18n-labelText labelText="Loop"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="originUrl" [(ngModel)]="customizations.originUrl"
|
|
i18n-labelText labelText="Use origin instance URL"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<ng-container *ngIf="isInVideoEmbedTab()">
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="responsive" [(ngModel)]="customizations.responsive"
|
|
i18n-labelText labelText="Responsive embed"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="title" [(ngModel)]="customizations.title"
|
|
i18n-labelText labelText="Display video title"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="embedP2P" [(ngModel)]="customizations.embedP2P"
|
|
i18n-labelText labelText="P2P"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
|
|
i18n-labelText labelText="Display privacy warning" [disabled]="!customizations.embedP2P"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="controlBar" [(ngModel)]="customizations.controlBar"
|
|
i18n-labelText labelText="Display player control bar"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<my-peertube-checkbox
|
|
inputName="peertubeLink" [(ngModel)]="customizations.peertubeLink"
|
|
i18n-labelText labelText="Display PeerTube button link"
|
|
></my-peertube-checkbox>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<button
|
|
class="border-0 p-0 mt-4 mx-auto fw-semibold d-block"
|
|
(click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
|
|
[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
|
|
>
|
|
<ng-container *ngIf="isAdvancedCustomizationCollapsed">
|
|
<span class="chevron-down"></span>
|
|
|
|
<ng-container i18n>
|
|
More customization
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="!isAdvancedCustomizationCollapsed">
|
|
<span class="chevron-up"></span>
|
|
|
|
<ng-container i18n>
|
|
Less customization
|
|
</ng-container>
|
|
</ng-container>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|