aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-watch/modal/video-share.component.ts
blob: b42b775c135cff238e1d814914e55d5a4e5893a4 (plain) (blame)
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
import { Component, ElementRef, Input, ViewChild } from '@angular/core'
import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { VideoCaption } from '@shared/models'
import { VideoDetails } from '@app/shared/shared-main'
import { VideoPlaylist } from '@app/shared/shared-video-playlist'

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', { static: true }) modal: ElementRef

  @Input() video: VideoDetails = null
  @Input() videoCaptions: VideoCaption[] = []
  @Input() playlist: VideoPlaylist = null

  activeId: 'url' | 'qrcode' | 'embed' = 'url'
  customizations: Customizations
  isAdvancedCustomizationCollapsed = true
  includeVideoInPlaylist = false

  constructor (private modalService: NgbModal) { }

  show (currentVideoTimestamp?: number) {
    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, { centered: true })
  }

  getVideoIframeCode () {
    const options = this.getOptions(this.video.embedUrl)

    const embedUrl = buildVideoLink(options)
    return buildVideoEmbed(embedUrl)
  }

  getVideoUrl () {
    const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid
    const options = this.getOptions(baseUrl)

    return buildVideoLink(options)
  }

  getPlaylistUrl () {
    const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid

    if (!this.includeVideoInPlaylist) return base

    return base + '?videoId=' + this.video.uuid
  }

  notSecure () {
    return window.location.protocol === 'http:'
  }

  isInEmbedTab () {
    return this.activeId === 'embed'
  }

  hasPlaylist () {
    return !!this.playlist
  }

  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
    }
  }
}