]>
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 | |
19 | autoplay: boolean | |
20 | muted: boolean | |
21 | title: boolean | |
22 | warningTitle: boolean | |
23 | controls: boolean | |
189ab8de | 24 | peertubeLink: boolean |
2f4c784a | 25 | } |
cf02fbfb | 26 | |
951b582f C |
27 | type TabId = 'url' | 'qrcode' | 'embed' |
28 | ||
cf02fbfb C |
29 | @Component({ |
30 | selector: 'my-video-share', | |
c7e1e432 JL |
31 | templateUrl: './video-share.component.html', |
32 | styleUrls: [ './video-share.component.scss' ] | |
cf02fbfb C |
33 | }) |
34 | export class VideoShareComponent { | |
f36da21e | 35 | @ViewChild('modal', { static: true }) modal: ElementRef |
11b8762f | 36 | |
404b54e1 | 37 | @Input() video: VideoDetails = null |
2f4c784a | 38 | @Input() videoCaptions: VideoCaption[] = [] |
3a1fed11 | 39 | @Input() playlist: VideoPlaylist = null |
cf02fbfb | 40 | |
951b582f C |
41 | activeVideoId: TabId = 'url' |
42 | activePlaylistId: TabId = 'url' | |
43 | ||
2f4c784a C |
44 | customizations: Customizations |
45 | isAdvancedCustomizationCollapsed = true | |
3a1fed11 | 46 | includeVideoInPlaylist = false |
2f4c784a | 47 | |
951b582f C |
48 | private playlistPosition: number = null |
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, | |
69 | autoplay: false, | |
70 | muted: false, | |
71 | ||
72 | // Embed options | |
73 | title: true, | |
74 | warningTitle: true, | |
189ab8de C |
75 | controls: true, |
76 | peertubeLink: true | |
2f4c784a | 77 | } |
11b8762f | 78 | |
951b582f C |
79 | this.playlistPosition = currentPlaylistPosition |
80 | ||
24e7916c | 81 | this.modalService.open(this.modal, { centered: true }) |
cf02fbfb C |
82 | } |
83 | ||
df98563e | 84 | getVideoIframeCode () { |
951b582f | 85 | const options = this.getVideoOptions(this.video.embedUrl) |
11b8762f | 86 | |
2f4c784a | 87 | const embedUrl = buildVideoLink(options) |
951b582f C |
88 | return buildVideoOrPlaylistEmbed(embedUrl) |
89 | } | |
90 | ||
91 | getPlaylistIframeCode () { | |
92 | const options = this.getPlaylistOptions(this.playlist.embedUrl) | |
93 | ||
94 | const embedUrl = buildPlaylistLink(options) | |
95 | return buildVideoOrPlaylistEmbed(embedUrl) | |
cf02fbfb C |
96 | } |
97 | ||
df98563e | 98 | getVideoUrl () { |
3a1fed11 | 99 | const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid |
951b582f | 100 | const options = this.getVideoOptions(baseUrl) |
2f4c784a C |
101 | |
102 | return buildVideoLink(options) | |
cf02fbfb | 103 | } |
2c8d4697 | 104 | |
3a1fed11 C |
105 | getPlaylistUrl () { |
106 | const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid | |
107 | ||
108 | if (!this.includeVideoInPlaylist) return base | |
109 | ||
03aff3c6 | 110 | return base + '?videoId=' + this.video.uuid |
2c8d4697 | 111 | } |
c7e1e432 | 112 | |
3a1fed11 C |
113 | notSecure () { |
114 | return window.location.protocol === 'http:' | |
c7e1e432 | 115 | } |
11b8762f | 116 | |
951b582f C |
117 | isVideoInEmbedTab () { |
118 | return this.activeVideoId === 'embed' | |
2f4c784a C |
119 | } |
120 | ||
951b582f C |
121 | private getPlaylistOptions (baseUrl?: string) { |
122 | return { | |
123 | baseUrl, | |
124 | ||
125 | playlistPosition: this.playlistPosition || undefined | |
126 | } | |
127 | } | |
128 | ||
129 | private getVideoOptions (baseUrl?: string) { | |
2f4c784a C |
130 | return { |
131 | baseUrl, | |
132 | ||
133 | startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined, | |
134 | stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined, | |
135 | ||
136 | subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined, | |
137 | ||
138 | loop: this.customizations.loop, | |
139 | autoplay: this.customizations.autoplay, | |
140 | muted: this.customizations.muted, | |
11b8762f | 141 | |
2f4c784a C |
142 | title: this.customizations.title, |
143 | warningTitle: this.customizations.warningTitle, | |
189ab8de C |
144 | controls: this.customizations.controls, |
145 | peertubeLink: this.customizations.peertubeLink | |
2f4c784a | 146 | } |
11b8762f | 147 | } |
cf02fbfb | 148 | } |