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