2018-08-09 12:55:06 +00:00
|
|
|
<ng-template #modal let-hide="close">
|
|
|
|
<div class="modal-header">
|
|
|
|
<h4 i18n class="modal-title">Share</h4>
|
2019-01-16 15:05:40 +00:00
|
|
|
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
2018-08-09 12:55:06 +00:00
|
|
|
</div>
|
2016-11-20 15:09:38 +00:00
|
|
|
|
2019-12-05 09:05:00 +00:00
|
|
|
|
2018-08-09 12:55:06 +00:00
|
|
|
<div class="modal-body">
|
2020-08-07 11:43:48 +00:00
|
|
|
|
2020-08-07 14:29:30 +00:00
|
|
|
<div class="playlist" *ngIf="playlist">
|
|
|
|
<div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-08-07 11:43:48 +00:00
|
|
|
<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">
|
|
|
|
|
2020-12-04 14:58:55 +00:00
|
|
|
<my-input-toggle-hidden [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
|
2020-08-07 11:43:48 +00:00
|
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container ngbNavItem="qrcode">
|
|
|
|
<a ngbNavLink i18n>QR-Code</a>
|
|
|
|
|
|
|
|
<ng-template ngbNavContent>
|
|
|
|
<div class="nav-content">
|
|
|
|
<qrcode [qrdata]="getPlaylistUrl()" [size]="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">
|
2020-12-04 14:58:55 +00:00
|
|
|
<my-input-toggle-hidden [value]="getPlaylistIframeCode()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
|
2020-08-07 11:43:48 +00:00
|
|
|
|
|
|
|
<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>
|
|
|
|
</ng-template>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div [ngbNavOutlet]="nav"></div>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2019-12-05 09:05:00 +00:00
|
|
|
<div class="filters">
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-08-07 14:29:30 +00:00
|
|
|
<div class="form-group" *ngIf="video">
|
2020-08-07 11:43:48 +00:00
|
|
|
<my-peertube-checkbox inputName="includeVideoInPlaylist" [(ngModel)]="includeVideoInPlaylist" i18n-labelText
|
|
|
|
labelText="Share the playlist at this video position"></my-peertube-checkbox>
|
2016-11-20 15:09:38 +00:00
|
|
|
</div>
|
2016-11-20 15:13:42 +00:00
|
|
|
|
2018-08-09 12:55:06 +00:00
|
|
|
</div>
|
2019-12-05 09:05:00 +00:00
|
|
|
</div>
|
2017-12-20 16:49:58 +00:00
|
|
|
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-08-07 14:29:30 +00:00
|
|
|
<div class="video" *ngIf="video">
|
|
|
|
<div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-08-07 11:43:48 +00:00
|
|
|
<div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-04-01 14:52:59 +00:00
|
|
|
<ng-container ngbNavItem="url">
|
|
|
|
<a ngbNavLink i18n>URL</a>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-04-01 14:52:59 +00:00
|
|
|
<ng-template ngbNavContent>
|
|
|
|
<div class="nav-content">
|
2020-12-04 14:58:55 +00:00
|
|
|
<my-input-toggle-hidden [value]="getVideoUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
|
2019-12-05 09:05:00 +00:00
|
|
|
</div>
|
|
|
|
</ng-template>
|
2020-04-01 14:52:59 +00:00
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container ngbNavItem="qrcode">
|
|
|
|
<a ngbNavLink i18n>QR-Code</a>
|
2019-12-05 09:05:00 +00:00
|
|
|
|
2020-04-01 14:52:59 +00:00
|
|
|
<ng-template ngbNavContent>
|
|
|
|
<div class="nav-content">
|
2020-02-10 13:25:38 +00:00
|
|
|
<qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
|
2019-12-05 09:05:00 +00:00
|
|
|
</div>
|
|
|
|
</ng-template>
|
2020-04-01 14:52:59 +00:00
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container ngbNavItem="embed">
|
|
|
|
<a ngbNavLink i18n>Embed</a>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2020-04-01 14:52:59 +00:00
|
|
|
<ng-template ngbNavContent>
|
|
|
|
<div class="nav-content">
|
2020-12-04 14:58:55 +00:00
|
|
|
<my-input-toggle-hidden [value]="getVideoIframeCode()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
|
2019-12-05 09:05:00 +00:00
|
|
|
|
|
|
|
<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>
|
|
|
|
</ng-template>
|
2020-04-01 14:52:59 +00:00
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
</div>
|
2019-12-05 09:05:00 +00:00
|
|
|
|
2020-04-01 14:52:59 +00:00
|
|
|
<div [ngbNavOutlet]="nav"></div>
|
2019-12-05 09:05:00 +00:00
|
|
|
|
|
|
|
<div class="filters">
|
2019-06-12 10:40:24 +00:00
|
|
|
<div>
|
2020-09-25 08:04:21 +00:00
|
|
|
<div class="form-group start-at" *ngIf="!video.isLive">
|
2019-06-12 10:40:24 +00:00
|
|
|
<my-peertube-checkbox
|
2019-12-05 09:05:00 +00:00
|
|
|
inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
|
|
|
|
i18n-labelText labelText="Start at"
|
2019-06-12 10:40:24 +00:00
|
|
|
></my-peertube-checkbox>
|
|
|
|
|
|
|
|
<my-timestamp-input
|
2019-12-05 09:05:00 +00:00
|
|
|
[timestamp]="customizations.startAt"
|
2019-06-12 10:40:24 +00:00
|
|
|
[maxTimestamp]="video.duration"
|
2019-12-05 09:05:00 +00:00
|
|
|
[disabled]="!customizations.startAtCheckbox"
|
|
|
|
[(ngModel)]="customizations.startAt"
|
2019-06-12 10:40:24 +00:00
|
|
|
>
|
|
|
|
</my-timestamp-input>
|
|
|
|
</div>
|
|
|
|
|
2019-12-05 09:05:00 +00:00
|
|
|
<div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
|
2019-06-12 10:40:24 +00:00
|
|
|
<my-peertube-checkbox
|
2019-12-05 09:05:00 +00:00
|
|
|
inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
|
|
|
|
i18n-labelText labelText="Auto select subtitle"
|
2019-06-12 10:40:24 +00:00
|
|
|
></my-peertube-checkbox>
|
|
|
|
|
2019-12-05 09:05:00 +00:00
|
|
|
<div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
|
|
|
|
<select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox">
|
|
|
|
<option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
2019-06-12 10:40:24 +00:00
|
|
|
</div>
|
2019-12-05 09:05:00 +00:00
|
|
|
</div>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2019-12-05 09:05:00 +00:00
|
|
|
<div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
|
|
|
|
<div>
|
2020-09-25 08:04:21 +00:00
|
|
|
<div class="form-group stop-at" *ngIf="!video.isLive">
|
2019-12-05 09:05:00 +00:00
|
|
|
<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>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2019-12-05 09:05:00 +00:00
|
|
|
<div class="form-group">
|
|
|
|
<my-peertube-checkbox
|
|
|
|
inputName="autoplay" [(ngModel)]="customizations.autoplay"
|
|
|
|
i18n-labelText labelText="Autoplay"
|
|
|
|
></my-peertube-checkbox>
|
|
|
|
</div>
|
2019-06-12 10:40:24 +00:00
|
|
|
|
2019-12-05 09:05:00 +00:00
|
|
|
<div class="form-group">
|
|
|
|
<my-peertube-checkbox
|
|
|
|
inputName="muted" [(ngModel)]="customizations.muted"
|
|
|
|
i18n-labelText labelText="Muted"
|
|
|
|
></my-peertube-checkbox>
|
|
|
|
</div>
|
|
|
|
|
2020-09-25 08:04:21 +00:00
|
|
|
<div class="form-group" *ngIf="!video.isLive">
|
2019-12-05 09:05:00 +00:00
|
|
|
<my-peertube-checkbox
|
|
|
|
inputName="loop" [(ngModel)]="customizations.loop"
|
|
|
|
i18n-labelText labelText="Loop"
|
|
|
|
></my-peertube-checkbox>
|
2020-10-18 01:16:41 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div *ngIf="!isLocalVideo() && !isVideoInEmbedTab()" class="form-group">
|
|
|
|
<my-peertube-checkbox
|
|
|
|
inputName="originUrl" [(ngModel)]="customizations.originUrl"
|
|
|
|
i18n-labelText labelText="Use origin instance URL"
|
|
|
|
></my-peertube-checkbox>
|
2019-12-05 09:05:00 +00:00
|
|
|
</div>
|
2019-06-12 10:40:24 +00:00
|
|
|
</div>
|
2019-12-05 09:05:00 +00:00
|
|
|
|
2020-08-07 11:43:48 +00:00
|
|
|
<ng-container *ngIf="isVideoInEmbedTab()">
|
2019-12-05 09:05:00 +00:00
|
|
|
<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="warningTitle" [(ngModel)]="customizations.warningTitle"
|
|
|
|
i18n-labelText labelText="Display privacy warning"
|
|
|
|
></my-peertube-checkbox>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<my-peertube-checkbox
|
|
|
|
inputName="controls" [(ngModel)]="customizations.controls"
|
|
|
|
i18n-labelText labelText="Display player controls"
|
|
|
|
></my-peertube-checkbox>
|
|
|
|
</div>
|
2020-08-07 09:42:53 +00:00
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<my-peertube-checkbox
|
|
|
|
inputName="controls" [(ngModel)]="customizations.peertubeLink"
|
|
|
|
i18n-labelText labelText="Display PeerTube button link"
|
|
|
|
></my-peertube-checkbox>
|
|
|
|
</div>
|
2019-12-05 09:05:00 +00:00
|
|
|
</ng-container>
|
|
|
|
</div>
|
2020-03-06 14:05:19 +00:00
|
|
|
|
|
|
|
<div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
|
|
|
|
[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
|
|
|
|
|
|
|
|
<ng-container *ngIf="isAdvancedCustomizationCollapsed">
|
|
|
|
<span class="glyphicon glyphicon-menu-down"></span>
|
|
|
|
|
|
|
|
<ng-container i18n>
|
|
|
|
More customization
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container *ngIf="!isAdvancedCustomizationCollapsed">
|
|
|
|
<span class="glyphicon glyphicon-menu-up"></span>
|
|
|
|
|
|
|
|
<ng-container i18n>
|
|
|
|
Less customization
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
</div>
|
2019-06-12 10:40:24 +00:00
|
|
|
</div>
|
2018-08-09 12:55:06 +00:00
|
|
|
</div>
|
2018-08-27 13:59:00 +00:00
|
|
|
</div>
|
2018-07-12 17:43:42 +00:00
|
|
|
|
2018-08-09 12:55:06 +00:00
|
|
|
</ng-template>
|