]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/videos/+video-watch/modal/video-share.component.ts
Improving select displays, focus box-shadows for paginators, instructions for index url
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / modal / video-share.component.ts
1 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
2 import { VideoDetails } from '../../../shared/video/video-details.model'
3 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
4 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
5 import { VideoCaption } from '@shared/models'
6 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
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
24 }
25
26 @Component({
27 selector: 'my-video-share',
28 templateUrl: './video-share.component.html',
29 styleUrls: [ './video-share.component.scss' ]
30 })
31 export class VideoShareComponent {
32 @ViewChild('modal', { static: true }) modal: ElementRef
33
34 @Input() video: VideoDetails = null
35 @Input() videoCaptions: VideoCaption[] = []
36 @Input() playlist: VideoPlaylist = null
37
38 activeId: 'url' | 'qrcode' | 'embed' = 'url'
39 customizations: Customizations
40 isAdvancedCustomizationCollapsed = true
41 includeVideoInPlaylist = false
42
43 private currentVideoTimestamp: number
44
45 constructor (private modalService: NgbModal) { }
46
47 show (currentVideoTimestamp?: number) {
48 this.currentVideoTimestamp = currentVideoTimestamp
49
50 let subtitle: string
51 if (this.videoCaptions.length !== 0) {
52 subtitle = this.videoCaptions[0].language.id
53 }
54
55 this.customizations = {
56 startAtCheckbox: false,
57 startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
58
59 stopAtCheckbox: false,
60 stopAt: this.video.duration,
61
62 subtitleCheckbox: false,
63 subtitle,
64
65 loop: false,
66 autoplay: false,
67 muted: false,
68
69 // Embed options
70 title: true,
71 warningTitle: true,
72 controls: true
73 }
74
75 this.modalService.open(this.modal, { centered: true })
76 }
77
78 getVideoIframeCode () {
79 const options = this.getOptions(this.video.embedUrl)
80
81 const embedUrl = buildVideoLink(options)
82 return buildVideoEmbed(embedUrl)
83 }
84
85 getVideoUrl () {
86 const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid
87 const options = this.getOptions(baseUrl)
88
89 return buildVideoLink(options)
90 }
91
92 getPlaylistUrl () {
93 const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
94
95 if (!this.includeVideoInPlaylist) return base
96
97 return base + '?videoId=' + this.video.uuid
98 }
99
100 notSecure () {
101 return window.location.protocol === 'http:'
102 }
103
104 isInEmbedTab () {
105 return this.activeId === 'embed'
106 }
107
108 hasPlaylist () {
109 return !!this.playlist
110 }
111
112 private getOptions (baseUrl?: string) {
113 return {
114 baseUrl,
115
116 startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
117 stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
118
119 subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
120
121 loop: this.customizations.loop,
122 autoplay: this.customizations.autoplay,
123 muted: this.customizations.muted,
124
125 title: this.customizations.title,
126 warningTitle: this.customizations.warningTitle,
127 controls: this.customizations.controls
128 }
129 }
130 }