]>
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 |
d142c7b9 | 40 | @Input() playlistPosition: number = null |
cf02fbfb | 41 | |
951b582f C |
42 | activeVideoId: TabId = 'url' |
43 | activePlaylistId: TabId = 'url' | |
44 | ||
2f4c784a C |
45 | customizations: Customizations |
46 | isAdvancedCustomizationCollapsed = true | |
3a1fed11 | 47 | includeVideoInPlaylist = false |
2f4c784a | 48 | |
3a1fed11 | 49 | constructor (private modalService: NgbModal) { } |
cf02fbfb | 50 | |
951b582f | 51 | show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) { |
2f4c784a | 52 | let subtitle: string |
82f443de | 53 | if (this.videoCaptions && this.videoCaptions.length !== 0) { |
2f4c784a C |
54 | subtitle = this.videoCaptions[0].language.id |
55 | } | |
56 | ||
57 | this.customizations = { | |
58 | startAtCheckbox: false, | |
59 | startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, | |
60 | ||
61 | stopAtCheckbox: false, | |
82f443de | 62 | stopAt: this.video?.duration, |
2f4c784a C |
63 | |
64 | subtitleCheckbox: false, | |
65 | subtitle, | |
66 | ||
67 | loop: false, | |
68 | autoplay: false, | |
69 | muted: false, | |
70 | ||
71 | // Embed options | |
72 | title: true, | |
73 | warningTitle: true, | |
189ab8de C |
74 | controls: true, |
75 | peertubeLink: true | |
2f4c784a | 76 | } |
11b8762f | 77 | |
951b582f C |
78 | this.playlistPosition = currentPlaylistPosition |
79 | ||
24e7916c | 80 | this.modalService.open(this.modal, { centered: true }) |
cf02fbfb C |
81 | } |
82 | ||
df98563e | 83 | getVideoIframeCode () { |
951b582f | 84 | const options = this.getVideoOptions(this.video.embedUrl) |
11b8762f | 85 | |
2f4c784a | 86 | const embedUrl = buildVideoLink(options) |
951b582f C |
87 | return buildVideoOrPlaylistEmbed(embedUrl) |
88 | } | |
89 | ||
90 | getPlaylistIframeCode () { | |
91 | const options = this.getPlaylistOptions(this.playlist.embedUrl) | |
92 | ||
93 | const embedUrl = buildPlaylistLink(options) | |
94 | return buildVideoOrPlaylistEmbed(embedUrl) | |
cf02fbfb C |
95 | } |
96 | ||
df98563e | 97 | getVideoUrl () { |
3a1fed11 | 98 | const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid |
951b582f | 99 | const options = this.getVideoOptions(baseUrl) |
2f4c784a C |
100 | |
101 | return buildVideoLink(options) | |
cf02fbfb | 102 | } |
2c8d4697 | 103 | |
3a1fed11 C |
104 | getPlaylistUrl () { |
105 | const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid | |
106 | ||
107 | if (!this.includeVideoInPlaylist) return base | |
108 | ||
d142c7b9 | 109 | return base + '?playlistPosition=' + this.playlistPosition |
2c8d4697 | 110 | } |
c7e1e432 | 111 | |
3a1fed11 C |
112 | notSecure () { |
113 | return window.location.protocol === 'http:' | |
c7e1e432 | 114 | } |
11b8762f | 115 | |
951b582f C |
116 | isVideoInEmbedTab () { |
117 | return this.activeVideoId === 'embed' | |
2f4c784a C |
118 | } |
119 | ||
951b582f C |
120 | private getPlaylistOptions (baseUrl?: string) { |
121 | return { | |
122 | baseUrl, | |
123 | ||
124 | playlistPosition: this.playlistPosition || undefined | |
125 | } | |
126 | } | |
127 | ||
128 | private getVideoOptions (baseUrl?: string) { | |
2f4c784a C |
129 | return { |
130 | baseUrl, | |
131 | ||
132 | startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined, | |
133 | stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined, | |
134 | ||
135 | subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined, | |
136 | ||
137 | loop: this.customizations.loop, | |
138 | autoplay: this.customizations.autoplay, | |
139 | muted: this.customizations.muted, | |
11b8762f | 140 | |
2f4c784a C |
141 | title: this.customizations.title, |
142 | warningTitle: this.customizations.warningTitle, | |
189ab8de C |
143 | controls: this.customizations.controls, |
144 | peertubeLink: this.customizations.peertubeLink | |
2f4c784a | 145 | } |
11b8762f | 146 | } |
cf02fbfb | 147 | } |