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>
8 <div class=
"modal-body">
10 <div class=
"playlist" *
ngIf=
"playlist">
11 <h5 i18n *
ngIf=
"video">Share the playlist
</h5>
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>
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
21 <div ngbNav #
nav=
"ngbNav" class=
"nav-tabs" [(activeId)]=
"activePlaylistId">
23 <ng-container ngbNavItem=
"url">
24 <a ngbNavLink i18n
>URL
</a>
26 <ng-template ngbNavContent
>
27 <div class=
"nav-content">
28 <my-input-text [value]=
"playlistUrl" [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"></my-input-text>
33 <ng-container ngbNavItem=
"qrcode">
34 <a ngbNavLink i18n
>QR-Code
</a>
36 <ng-template ngbNavContent
>
37 <div class=
"nav-content">
38 <qrcode [qrdata]=
"playlistUrl" [width]=
"256" level=
"Q"></qrcode>
43 <ng-container ngbNavItem=
"embed">
44 <a ngbNavLink i18n
>Embed
</a>
46 <ng-template ngbNavContent
>
47 <div class=
"nav-content">
49 [value]=
"customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)=
"onUpdate()"
50 [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"
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).
57 <div class=
"embed" [innerHTML]=
"playlistEmbedSafeHTML"></div>
64 <div [ngbNavOutlet]=
"nav"></div>
68 <div class=
"form-group" *
ngIf=
"video">
70 inputName=
"includeVideoInPlaylist" [(ngModel)]=
"customizations.includeVideoInPlaylist"
71 i18n-labelText
labelText=
"Share the playlist at this video position"
72 ></my-peertube-checkbox>
75 <ng-container *
ngIf=
"isInPlaylistEmbedTab()">
76 <div class=
"form-group">
78 inputName=
"onlyEmbedUrl" [(ngModel)]=
"customizations.onlyEmbedUrl"
79 i18n-labelText
labelText=
"Only display embed URL"
80 ></my-peertube-checkbox>
83 <div class=
"form-group">
85 inputName=
"responsive" [(ngModel)]=
"customizations.responsive"
86 i18n-labelText
labelText=
"Responsive embed"
87 ></my-peertube-checkbox>
91 <my-plugin-placeholder pluginId=
"share-modal-playlist-settings"></my-plugin-placeholder>
96 <div class=
"video" *
ngIf=
"video">
97 <h5 *
ngIf=
"playlist" i18n
>Share the video
</h5>
99 <div *
ngIf=
"isPrivateVideo()" class=
"alert-private alert alert-warning">
100 <div i18n
>This video is private so you won't be able to share it with external users
</div>
102 <a i18n
class=
"peertube-button-link orange-button" [routerLink]=
"[ '/videos/', 'update', video.shortUUID ]" target=
"_blank" rel=
"noopener noreferrer">
107 <div ngbNav #
nav=
"ngbNav" class=
"nav-tabs" [(activeId)]=
"activeVideoId">
109 <ng-container ngbNavItem=
"url">
110 <a ngbNavLink i18n
>URL
</a>
112 <ng-template ngbNavContent
>
113 <div class=
"nav-content">
114 <my-input-text [value]=
"videoUrl" [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"></my-input-text>
119 <ng-container ngbNavItem=
"qrcode">
120 <a ngbNavLink i18n
>QR-Code
</a>
122 <ng-template ngbNavContent
>
123 <div class=
"nav-content">
124 <qrcode [qrdata]=
"videoUrl" [width]=
"256" level=
"Q"></qrcode>
129 <ng-container ngbNavItem=
"embed">
130 <a ngbNavLink i18n
>Embed
</a>
132 <ng-template ngbNavContent
>
133 <div class=
"nav-content">
135 [value]=
"customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)=
"onUpdate()"
136 [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"
139 <div i18n *
ngIf=
"notSecure()" class=
"alert alert-warning">
140 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).
143 <div class=
"embed" [innerHTML]=
"videoEmbedSafeHTML"></div>
150 <div [ngbNavOutlet]=
"nav"></div>
152 <div class=
"filters">
154 <div class=
"form-group start-at" *
ngIf=
"!video.isLive">
155 <my-peertube-checkbox
156 inputName=
"startAt" [(ngModel)]=
"customizations.startAtCheckbox"
157 i18n-labelText
labelText=
"Start at"
158 ></my-peertube-checkbox>
161 [timestamp]=
"customizations.startAt"
162 [maxTimestamp]=
"video.duration"
163 [disabled]=
"!customizations.startAtCheckbox"
164 [(ngModel)]=
"customizations.startAt"
166 </my-timestamp-input>
169 <div *
ngIf=
"videoCaptions.length !== 0" class=
"form-group video-caption-block">
170 <my-peertube-checkbox
171 inputName=
"subtitleCheckbox" [(ngModel)]=
"customizations.subtitleCheckbox"
172 i18n-labelText
labelText=
"Auto select subtitle"
173 ></my-peertube-checkbox>
175 <div class=
"peertube-select-container" [ngClass]=
"{ disabled: !customizations.subtitleCheckbox }">
176 <select [(ngModel)]=
"customizations.subtitle" [disabled]=
"!customizations.subtitleCheckbox" class=
"form-control">
177 <option *
ngFor=
"let caption of videoCaptions" [value]=
"caption.language.id">{{ caption.language.label }}
</option>
182 <div class=
"form-group" *
ngIf=
"isInVideoEmbedTab()">
183 <my-peertube-checkbox
184 inputName=
"onlyEmbedUrl" [(ngModel)]=
"customizations.onlyEmbedUrl"
185 i18n-labelText
labelText=
"Only display embed URL"
186 ></my-peertube-checkbox>
189 <my-plugin-placeholder pluginId=
"share-modal-video-settings"></my-plugin-placeholder>
192 <div class=
"advanced-filters collapse-transition" [ngbCollapse]=
"isAdvancedCustomizationCollapsed">
194 <div class=
"form-group stop-at" *
ngIf=
"!video.isLive">
195 <my-peertube-checkbox
196 inputName=
"stopAt" [(ngModel)]=
"customizations.stopAtCheckbox"
197 i18n-labelText
labelText=
"Stop at"
198 ></my-peertube-checkbox>
201 [timestamp]=
"customizations.stopAt"
202 [maxTimestamp]=
"video.duration"
203 [disabled]=
"!customizations.stopAtCheckbox"
204 [(ngModel)]=
"customizations.stopAt"
206 </my-timestamp-input>
209 <div class=
"form-group">
210 <my-peertube-checkbox
211 inputName=
"autoplay" [(ngModel)]=
"customizations.autoplay"
212 i18n-labelText
labelText=
"Autoplay"
213 ></my-peertube-checkbox>
216 <div class=
"form-group">
217 <my-peertube-checkbox
218 inputName=
"muted" [(ngModel)]=
"customizations.muted"
219 i18n-labelText
labelText=
"Muted"
220 ></my-peertube-checkbox>
223 <div class=
"form-group" *
ngIf=
"!video.isLive">
224 <my-peertube-checkbox
225 inputName=
"loop" [(ngModel)]=
"customizations.loop"
226 i18n-labelText
labelText=
"Loop"
227 ></my-peertube-checkbox>
230 <div *
ngIf=
"!isLocalVideo() && !isInVideoEmbedTab()" class=
"form-group">
231 <my-peertube-checkbox
232 inputName=
"originUrl" [(ngModel)]=
"customizations.originUrl"
233 i18n-labelText
labelText=
"Use origin instance URL"
234 ></my-peertube-checkbox>
238 <ng-container *
ngIf=
"isInVideoEmbedTab()">
239 <div class=
"form-group">
240 <my-peertube-checkbox
241 inputName=
"responsive" [(ngModel)]=
"customizations.responsive"
242 i18n-labelText
labelText=
"Responsive embed"
243 ></my-peertube-checkbox>
246 <div class=
"form-group">
247 <my-peertube-checkbox
248 inputName=
"title" [(ngModel)]=
"customizations.title"
249 i18n-labelText
labelText=
"Display video title"
250 ></my-peertube-checkbox>
253 <div class=
"form-group">
254 <my-peertube-checkbox
255 inputName=
"embedP2P" [(ngModel)]=
"customizations.embedP2P"
256 i18n-labelText
labelText=
"P2P"
257 ></my-peertube-checkbox>
260 <div class=
"form-group">
261 <my-peertube-checkbox
262 inputName=
"warningTitle" [(ngModel)]=
"customizations.warningTitle"
263 i18n-labelText
labelText=
"Display privacy warning" [disabled]=
"!customizations.embedP2P"
264 ></my-peertube-checkbox>
267 <div class=
"form-group">
268 <my-peertube-checkbox
269 inputName=
"controlBar" [(ngModel)]=
"customizations.controlBar"
270 i18n-labelText
labelText=
"Display player control bar"
271 ></my-peertube-checkbox>
274 <div class=
"form-group">
275 <my-peertube-checkbox
276 inputName=
"peertubeLink" [(ngModel)]=
"customizations.peertubeLink"
277 i18n-labelText
labelText=
"Display PeerTube button link"
278 ></my-peertube-checkbox>
283 <div (click)=
"isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role=
"button" class=
"advanced-filters-button"
284 [attr.aria-expanded]=
"!isAdvancedCustomizationCollapsed" aria-controls=
"collapseBasic">
286 <ng-container *
ngIf=
"isAdvancedCustomizationCollapsed">
287 <span class=
"chevron-down"></span>
294 <ng-container *
ngIf=
"!isAdvancedCustomizationCollapsed">
295 <span class=
"chevron-up"></span>