1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { Component, ElementRef, Input, ViewChild } from '@angular/core'
import { Notifier } from '@app/core'
import { VideoDetails } from '../../../shared/video/video-details.model'
import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
import { VideoCaption } from '@shared/models'
type Customizations = {
startAtCheckbox: boolean
startAt: number
stopAtCheckbox: boolean
stopAt: number
subtitleCheckbox: boolean
subtitle: string
loop: boolean
autoplay: boolean
muted: boolean
title: boolean
warningTitle: boolean
controls: boolean
}
@Component({
selector: 'my-video-share',
templateUrl: './video-share.component.html',
styleUrls: [ './video-share.component.scss' ]
})
export class VideoShareComponent {
@ViewChild('modal') modal: ElementRef
@Input() video: VideoDetails = null
@Input() videoCaptions: VideoCaption[] = []
activeId: 'url' | 'qrcode' | 'embed'
customizations: Customizations
isAdvancedCustomizationCollapsed = true
private currentVideoTimestamp: number
constructor (
private modalService: NgbModal,
private notifier: Notifier,
private i18n: I18n
) { }
show (currentVideoTimestamp?: number) {
this.currentVideoTimestamp = currentVideoTimestamp
let subtitle: string
if (this.videoCaptions.length !== 0) {
subtitle = this.videoCaptions[0].language.id
}
this.customizations = {
startAtCheckbox: false,
startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
stopAtCheckbox: false,
stopAt: this.video.duration,
subtitleCheckbox: false,
subtitle,
loop: false,
autoplay: false,
muted: false,
// Embed options
title: true,
warningTitle: true,
controls: true
}
this.modalService.open(this.modal)
}
getVideoIframeCode () {
const options = this.getOptions(this.video.embedUrl)
const embedUrl = buildVideoLink(options)
return buildVideoEmbed(embedUrl)
}
getVideoUrl () {
const options = this.getOptions()
return buildVideoLink(options)
}
notSecure () {
return window.location.protocol === 'http:'
}
activateCopiedMessage () {
this.notifier.success(this.i18n('Copied'))
}
onTabChange (event: NgbTabChangeEvent) {
this.activeId = event.nextId as any
}
isInEmbedTab () {
return this.activeId === 'embed'
}
private getOptions (baseUrl?: string) {
return {
baseUrl,
startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
loop: this.customizations.loop,
autoplay: this.customizations.autoplay,
muted: this.customizations.muted,
title: this.customizations.title,
warningTitle: this.customizations.warningTitle,
controls: this.customizations.controls
}
}
}
|