1 <ng-template #modal
let-hide=
"close">
2 <div class=
"modal-header">
3 <h4 i18n
class=
"modal-title">Share
</h4>
5 <button class=
"border-0 p-0" (click)=
"hide()">
6 <my-global-icon iconName=
"cross" aria-label=
"Close" role=
"button" ></my-global-icon>
11 <div class=
"modal-body">
13 <div class=
"playlist" *
ngIf=
"playlist">
14 <h5 i18n *
ngIf=
"video">Share the playlist
</h5>
16 <div *
ngIf=
"isPrivatePlaylist()" class=
"alert-private alert alert-warning">
17 <div i18n
>This playlist is private so you won't be able to share it with external users
</div>
19 <a i18n
class=
"peertube-button-link orange-button" [routerLink]=
"[ '/my-library/video-playlists/update', playlist.uuid ]" target=
"_blank" rel=
"noopener noreferrer">
20 Update playlist privacy
24 <div ngbNav #
nav=
"ngbNav" class=
"nav-tabs" [(activeId)]=
"activePlaylistId">
26 <ng-container ngbNavItem=
"url">
27 <a ngbNavLink i18n
>URL
</a>
29 <ng-template ngbNavContent
>
30 <div class=
"nav-content">
31 <my-input-text [value]=
"playlistUrl" [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"></my-input-text>
36 <ng-container ngbNavItem=
"qrcode">
37 <a ngbNavLink i18n
>QR-Code
</a>
39 <ng-template ngbNavContent
>
40 <div class=
"nav-content">
41 <qrcode [qrdata]=
"playlistUrl" [width]=
"256" level=
"Q"></qrcode>
46 <ng-container ngbNavItem=
"embed">
47 <a ngbNavLink i18n
>Embed
</a>
49 <ng-template ngbNavContent
>
50 <div class=
"nav-content">
52 [value]=
"customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)=
"onUpdate()"
53 [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"
56 <div i18n *
ngIf=
"notSecure()" class=
"alert alert-warning">
57 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).
60 <div class=
"embed" [innerHTML]=
"playlistEmbedSafeHTML"></div>
67 <div [ngbNavOutlet]=
"nav"></div>
71 <div class=
"form-group" *
ngIf=
"video">
73 inputName=
"includeVideoInPlaylist" [(ngModel)]=
"customizations.includeVideoInPlaylist"
74 i18n-labelText
labelText=
"Share the playlist at this video position"
75 ></my-peertube-checkbox>
78 <ng-container *
ngIf=
"isInPlaylistEmbedTab()">
79 <div class=
"form-group">
81 inputName=
"onlyEmbedUrl" [(ngModel)]=
"customizations.onlyEmbedUrl"
82 i18n-labelText
labelText=
"Only display embed URL"
83 ></my-peertube-checkbox>
86 <div class=
"form-group">
88 inputName=
"responsive" [(ngModel)]=
"customizations.responsive"
89 i18n-labelText
labelText=
"Responsive embed"
90 ></my-peertube-checkbox>
94 <my-plugin-placeholder pluginId=
"share-modal-playlist-settings"></my-plugin-placeholder>
99 <div class=
"video" *
ngIf=
"video">
100 <h5 *
ngIf=
"playlist" i18n
>Share the video
</h5>
102 <div *
ngIf=
"isPrivateVideo()" class=
"alert-private alert alert-warning">
103 <div i18n
>This video is private so you won't be able to share it with external users
</div>
105 <a i18n
class=
"peertube-button-link orange-button" [routerLink]=
"[ '/videos/', 'update', video.shortUUID ]" target=
"_blank" rel=
"noopener noreferrer">
110 <div ngbNav #
nav=
"ngbNav" class=
"nav-tabs" [(activeId)]=
"activeVideoId">
112 <ng-container ngbNavItem=
"url">
113 <a ngbNavLink i18n
>URL
</a>
115 <ng-template ngbNavContent
>
116 <div class=
"nav-content">
117 <my-input-text [value]=
"videoUrl" [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"></my-input-text>
122 <ng-container ngbNavItem=
"qrcode">
123 <a ngbNavLink i18n
>QR-Code
</a>
125 <ng-template ngbNavContent
>
126 <div class=
"nav-content">
127 <qrcode [qrdata]=
"videoUrl" [width]=
"256" level=
"Q"></qrcode>
132 <ng-container ngbNavItem=
"embed">
133 <a ngbNavLink i18n
>Embed
</a>
135 <ng-template ngbNavContent
>
136 <div class=
"nav-content">
138 [value]=
"customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)=
"onUpdate()"
139 [withToggle]=
"false" [withCopy]=
"true" [show]=
"true" [readonly]=
"true"
142 <div i18n *
ngIf=
"notSecure()" class=
"alert alert-warning">
143 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).
146 <div class=
"embed" [innerHTML]=
"videoEmbedSafeHTML"></div>
153 <div [ngbNavOutlet]=
"nav"></div>
155 <div class=
"filters">
156 <div class=
"form-group start-at" *
ngIf=
"!video.isLive">
157 <my-peertube-checkbox
158 inputName=
"startAt" [(ngModel)]=
"customizations.startAtCheckbox"
159 i18n-labelText
labelText=
"Start at"
160 ></my-peertube-checkbox>
163 [timestamp]=
"customizations.startAt"
164 [maxTimestamp]=
"video.duration"
165 [disabled]=
"!customizations.startAtCheckbox"
166 [(ngModel)]=
"customizations.startAt"
168 </my-timestamp-input>
171 <div *
ngIf=
"videoCaptions.length !== 0" class=
"form-group video-caption-block">
172 <my-peertube-checkbox
173 inputName=
"subtitleCheckbox" [(ngModel)]=
"customizations.subtitleCheckbox"
174 i18n-labelText
labelText=
"Auto select subtitle"
175 ></my-peertube-checkbox>
177 <div class=
"peertube-select-container" [ngClass]=
"{ disabled: !customizations.subtitleCheckbox }">
178 <select [(ngModel)]=
"customizations.subtitle" [disabled]=
"!customizations.subtitleCheckbox" class=
"form-control">
179 <option *
ngFor=
"let caption of videoCaptions" [value]=
"caption.language.id">{{ caption.language.label }}
</option>
184 <div class=
"form-group" *
ngIf=
"isInVideoEmbedTab()">
185 <my-peertube-checkbox
186 inputName=
"onlyEmbedUrl" [(ngModel)]=
"customizations.onlyEmbedUrl"
187 i18n-labelText
labelText=
"Only display embed URL"
188 ></my-peertube-checkbox>
191 <my-plugin-placeholder pluginId=
"share-modal-video-settings"></my-plugin-placeholder>
193 <div class=
"advanced-filters" [ngbCollapse]=
"isAdvancedCustomizationCollapsed" [animation]=
"true">
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>
237 <ng-container *
ngIf=
"isInVideoEmbedTab()">
238 <div class=
"form-group">
239 <my-peertube-checkbox
240 inputName=
"responsive" [(ngModel)]=
"customizations.responsive"
241 i18n-labelText
labelText=
"Responsive embed"
242 ></my-peertube-checkbox>
245 <div class=
"form-group">
246 <my-peertube-checkbox
247 inputName=
"title" [(ngModel)]=
"customizations.title"
248 i18n-labelText
labelText=
"Display video title"
249 ></my-peertube-checkbox>
252 <div class=
"form-group">
253 <my-peertube-checkbox
254 inputName=
"embedP2P" [(ngModel)]=
"customizations.embedP2P"
255 i18n-labelText
labelText=
"P2P"
256 ></my-peertube-checkbox>
259 <div class=
"form-group">
260 <my-peertube-checkbox
261 inputName=
"warningTitle" [(ngModel)]=
"customizations.warningTitle"
262 i18n-labelText
labelText=
"Display privacy warning" [disabled]=
"!customizations.embedP2P"
263 ></my-peertube-checkbox>
266 <div class=
"form-group">
267 <my-peertube-checkbox
268 inputName=
"controlBar" [(ngModel)]=
"customizations.controlBar"
269 i18n-labelText
labelText=
"Display player control bar"
270 ></my-peertube-checkbox>
273 <div class=
"form-group">
274 <my-peertube-checkbox
275 inputName=
"peertubeLink" [(ngModel)]=
"customizations.peertubeLink"
276 i18n-labelText
labelText=
"Display PeerTube button link"
277 ></my-peertube-checkbox>
283 class=
"border-0 p-0 mt-4 mx-auto fw-semibold d-block"
284 (click)=
"isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
285 [attr.aria-expanded]=
"!isAdvancedCustomizationCollapsed" aria-controls=
"collapseBasic"
287 <ng-container *
ngIf=
"isAdvancedCustomizationCollapsed">
288 <span class=
"chevron-down"></span>
295 <ng-container *
ngIf=
"!isAdvancedCustomizationCollapsed">
296 <span class=
"chevron-up"></span>