]>
Commit | Line | Data |
---|---|---|
63347a0f | 1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core' |
f1c86172 | 2 | import { DomSanitizer, SafeHtml } from '@angular/platform-browser' |
9162fdd3 | 3 | import { VideoDetails } from '@app/shared/shared-main' |
67ed6552 | 4 | import { VideoPlaylist } from '@app/shared/shared-video-playlist' |
82f443de | 5 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' |
15a7eafb | 6 | import { buildPlaylistLink, buildVideoLink, decoratePlaylistLink, decorateVideoLink } from '@shared/core-utils' |
38225867 | 7 | import { VideoCaption, VideoPlaylistPrivacy, VideoPrivacy } from '@shared/models' |
15a7eafb | 8 | import { buildVideoOrPlaylistEmbed } from '../../../assets/player/utils' |
2f4c784a C |
9 | |
10 | type Customizations = { | |
11 | startAtCheckbox: boolean | |
12 | startAt: number | |
13 | ||
14 | stopAtCheckbox: boolean | |
15 | stopAt: number | |
16 | ||
17 | subtitleCheckbox: boolean | |
18 | subtitle: string | |
19 | ||
20 | loop: boolean | |
dd1e2f2f | 21 | originUrl: boolean |
2f4c784a C |
22 | autoplay: boolean |
23 | muted: boolean | |
24 | title: boolean | |
25 | warningTitle: boolean | |
26 | controls: boolean | |
189ab8de | 27 | peertubeLink: boolean |
2f4c784a | 28 | } |
cf02fbfb | 29 | |
951b582f C |
30 | type TabId = 'url' | 'qrcode' | 'embed' |
31 | ||
cf02fbfb C |
32 | @Component({ |
33 | selector: 'my-video-share', | |
c7e1e432 JL |
34 | templateUrl: './video-share.component.html', |
35 | styleUrls: [ './video-share.component.scss' ] | |
cf02fbfb C |
36 | }) |
37 | export class VideoShareComponent { | |
f36da21e | 38 | @ViewChild('modal', { static: true }) modal: ElementRef |
11b8762f | 39 | |
404b54e1 | 40 | @Input() video: VideoDetails = null |
2f4c784a | 41 | @Input() videoCaptions: VideoCaption[] = [] |
3a1fed11 | 42 | @Input() playlist: VideoPlaylist = null |
d142c7b9 | 43 | @Input() playlistPosition: number = null |
cf02fbfb | 44 | |
951b582f C |
45 | activeVideoId: TabId = 'url' |
46 | activePlaylistId: TabId = 'url' | |
47 | ||
2f4c784a C |
48 | customizations: Customizations |
49 | isAdvancedCustomizationCollapsed = true | |
3a1fed11 | 50 | includeVideoInPlaylist = false |
2f4c784a | 51 | |
f1c86172 C |
52 | playlistEmbedHTML: SafeHtml |
53 | videoEmbedHTML: SafeHtml | |
54 | ||
55 | constructor ( | |
56 | private modalService: NgbModal, | |
57 | private sanitizer: DomSanitizer | |
58 | ) { } | |
cf02fbfb | 59 | |
951b582f | 60 | show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) { |
2f4c784a | 61 | let subtitle: string |
82f443de | 62 | if (this.videoCaptions && this.videoCaptions.length !== 0) { |
2f4c784a C |
63 | subtitle = this.videoCaptions[0].language.id |
64 | } | |
65 | ||
f1c86172 | 66 | this.customizations = new Proxy({ |
2f4c784a C |
67 | startAtCheckbox: false, |
68 | startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, | |
69 | ||
70 | stopAtCheckbox: false, | |
82f443de | 71 | stopAt: this.video?.duration, |
2f4c784a C |
72 | |
73 | subtitleCheckbox: false, | |
74 | subtitle, | |
75 | ||
76 | loop: false, | |
dd1e2f2f | 77 | originUrl: false, |
2f4c784a C |
78 | autoplay: false, |
79 | muted: false, | |
80 | ||
81 | // Embed options | |
82 | title: true, | |
83 | warningTitle: true, | |
189ab8de C |
84 | controls: true, |
85 | peertubeLink: true | |
f1c86172 C |
86 | }, { |
87 | set: (target, prop, value) => { | |
88 | target[prop] = value | |
89 | ||
90 | this.updateEmbedCode() | |
91 | ||
92 | return true | |
93 | } | |
94 | }) | |
11b8762f | 95 | |
951b582f C |
96 | this.playlistPosition = currentPlaylistPosition |
97 | ||
f1c86172 C |
98 | this.updateEmbedCode() |
99 | ||
24e7916c | 100 | this.modalService.open(this.modal, { centered: true }) |
cf02fbfb C |
101 | } |
102 | ||
df98563e | 103 | getVideoIframeCode () { |
9162fdd3 | 104 | const embedUrl = decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions() }) |
11b8762f | 105 | |
4097c6d6 | 106 | return buildVideoOrPlaylistEmbed(embedUrl, this.video.name) |
951b582f C |
107 | } |
108 | ||
109 | getPlaylistIframeCode () { | |
9162fdd3 | 110 | const embedUrl = decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() }) |
951b582f | 111 | |
4097c6d6 | 112 | return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName) |
cf02fbfb C |
113 | } |
114 | ||
df98563e | 115 | getVideoUrl () { |
ab4001aa C |
116 | const url = this.customizations.originUrl |
117 | ? this.video.url | |
118 | : buildVideoLink(this.video, window.location.origin) | |
d4a8e7a6 | 119 | |
9162fdd3 | 120 | return decorateVideoLink({ |
ab4001aa | 121 | url, |
2f4c784a | 122 | |
9162fdd3 C |
123 | ...this.getVideoOptions() |
124 | }) | |
cf02fbfb | 125 | } |
2c8d4697 | 126 | |
3a1fed11 | 127 | getPlaylistUrl () { |
9162fdd3 C |
128 | const url = buildPlaylistLink(this.playlist) |
129 | if (!this.includeVideoInPlaylist) return url | |
3a1fed11 | 130 | |
9162fdd3 | 131 | return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition }) |
2c8d4697 | 132 | } |
c7e1e432 | 133 | |
f1c86172 C |
134 | updateEmbedCode () { |
135 | if (this.playlist) this.playlistEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getPlaylistIframeCode()) | |
136 | ||
137 | if (this.video) this.videoEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getVideoIframeCode()) | |
138 | } | |
139 | ||
3a1fed11 C |
140 | notSecure () { |
141 | return window.location.protocol === 'http:' | |
c7e1e432 | 142 | } |
11b8762f | 143 | |
951b582f C |
144 | isVideoInEmbedTab () { |
145 | return this.activeVideoId === 'embed' | |
2f4c784a C |
146 | } |
147 | ||
dd1e2f2f J |
148 | isLocalVideo () { |
149 | return this.video.isLocal | |
150 | } | |
151 | ||
38225867 NR |
152 | isPrivateVideo () { |
153 | return this.video.privacy.id === VideoPrivacy.PRIVATE | |
154 | } | |
155 | ||
156 | isPrivatePlaylist () { | |
157 | return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE | |
158 | } | |
159 | ||
951b582f C |
160 | private getPlaylistOptions (baseUrl?: string) { |
161 | return { | |
162 | baseUrl, | |
163 | ||
164 | playlistPosition: this.playlistPosition || undefined | |
165 | } | |
166 | } | |
167 | ||
9162fdd3 | 168 | private getVideoOptions () { |
2f4c784a | 169 | return { |
2f4c784a C |
170 | startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined, |
171 | stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined, | |
172 | ||
173 | subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined, | |
174 | ||
175 | loop: this.customizations.loop, | |
176 | autoplay: this.customizations.autoplay, | |
177 | muted: this.customizations.muted, | |
11b8762f | 178 | |
2f4c784a C |
179 | title: this.customizations.title, |
180 | warningTitle: this.customizations.warningTitle, | |
189ab8de C |
181 | controls: this.customizations.controls, |
182 | peertubeLink: this.customizations.peertubeLink | |
2f4c784a | 183 | } |
11b8762f | 184 | } |
cf02fbfb | 185 | } |