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