]>
Commit | Line | Data |
---|---|---|
1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core' | |
2 | import { VideoDetails } from '@app/shared/shared-main' | |
3 | import { VideoPlaylist } from '@app/shared/shared-video-playlist' | |
4 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | |
5 | import { VideoCaption } from '@shared/models' | |
6 | import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from '../../../assets/player/utils' | |
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 | originUrl: boolean | |
20 | autoplay: boolean | |
21 | muted: boolean | |
22 | title: boolean | |
23 | warningTitle: boolean | |
24 | controls: boolean | |
25 | peertubeLink: boolean | |
26 | } | |
27 | ||
28 | type TabId = 'url' | 'qrcode' | 'embed' | |
29 | ||
30 | @Component({ | |
31 | selector: 'my-video-share', | |
32 | templateUrl: './video-share.component.html', | |
33 | styleUrls: [ './video-share.component.scss' ] | |
34 | }) | |
35 | export class VideoShareComponent { | |
36 | @ViewChild('modal', { static: true }) modal: ElementRef | |
37 | ||
38 | @Input() video: VideoDetails = null | |
39 | @Input() videoCaptions: VideoCaption[] = [] | |
40 | @Input() playlist: VideoPlaylist = null | |
41 | @Input() playlistPosition: number = null | |
42 | ||
43 | activeVideoId: TabId = 'url' | |
44 | activePlaylistId: TabId = 'url' | |
45 | ||
46 | customizations: Customizations | |
47 | isAdvancedCustomizationCollapsed = true | |
48 | includeVideoInPlaylist = false | |
49 | ||
50 | constructor (private modalService: NgbModal) { } | |
51 | ||
52 | show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) { | |
53 | let subtitle: string | |
54 | if (this.videoCaptions && this.videoCaptions.length !== 0) { | |
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, | |
63 | stopAt: this.video?.duration, | |
64 | ||
65 | subtitleCheckbox: false, | |
66 | subtitle, | |
67 | ||
68 | loop: false, | |
69 | originUrl: false, | |
70 | autoplay: false, | |
71 | muted: false, | |
72 | ||
73 | // Embed options | |
74 | title: true, | |
75 | warningTitle: true, | |
76 | controls: true, | |
77 | peertubeLink: true | |
78 | } | |
79 | ||
80 | this.playlistPosition = currentPlaylistPosition | |
81 | ||
82 | this.modalService.open(this.modal, { centered: true }) | |
83 | } | |
84 | ||
85 | getVideoIframeCode () { | |
86 | const options = this.getVideoOptions(this.video.embedUrl) | |
87 | ||
88 | const embedUrl = buildVideoLink(options) | |
89 | return buildVideoOrPlaylistEmbed(embedUrl, this.video.name) | |
90 | } | |
91 | ||
92 | getPlaylistIframeCode () { | |
93 | const options = this.getPlaylistOptions(this.playlist.embedUrl) | |
94 | ||
95 | const embedUrl = buildPlaylistLink(options) | |
96 | return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName) | |
97 | } | |
98 | ||
99 | getVideoUrl () { | |
100 | let baseUrl = this.customizations.originUrl ? this.video.originInstanceUrl : window.location.origin | |
101 | baseUrl += '/w/' + this.video.uuid | |
102 | const options = this.getVideoOptions(baseUrl) | |
103 | ||
104 | return buildVideoLink(options) | |
105 | } | |
106 | ||
107 | getPlaylistUrl () { | |
108 | const base = window.location.origin + '/w/p/' + this.playlist.uuid | |
109 | ||
110 | if (!this.includeVideoInPlaylist) return base | |
111 | ||
112 | return base + '?playlistPosition=' + this.playlistPosition | |
113 | } | |
114 | ||
115 | notSecure () { | |
116 | return window.location.protocol === 'http:' | |
117 | } | |
118 | ||
119 | isVideoInEmbedTab () { | |
120 | return this.activeVideoId === 'embed' | |
121 | } | |
122 | ||
123 | isLocalVideo () { | |
124 | return this.video.isLocal | |
125 | } | |
126 | ||
127 | private getPlaylistOptions (baseUrl?: string) { | |
128 | return { | |
129 | baseUrl, | |
130 | ||
131 | playlistPosition: this.playlistPosition || undefined | |
132 | } | |
133 | } | |
134 | ||
135 | private getVideoOptions (baseUrl?: string) { | |
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, | |
147 | ||
148 | title: this.customizations.title, | |
149 | warningTitle: this.customizations.warningTitle, | |
150 | controls: this.customizations.controls, | |
151 | peertubeLink: this.customizations.peertubeLink | |
152 | } | |
153 | } | |
154 | } |