client/src/assets/player/shared/manager-options/manager-options-builder.ts

   1 import videojs from 'video.js'
   2 import { copyToClipboard } from '@root-helpers/utils'
   3 import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
   4 import { isIOS, isSafari } from '@root-helpers/web-browser'
   5 import { buildVideoLink, decorateVideoLink, pick } from '@shared/core-utils'
   6 import { isDefaultLocale } from '@shared/core-utils/i18n'
   7 import { VideoJSPluginOptions } from '../../types'
   8 import { CommonOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../types/manager-options'
   9 import { ControlBarOptionsBuilder } from './control-bar-options-builder'
  10 import { HLSOptionsBuilder } from './hls-options-builder'
  11 import { WebTorrentOptionsBuilder } from './webtorrent-options-builder'
  12
  13 export class ManagerOptionsBuilder {
  14
  15   constructor (
  16     private mode: PlayerMode,
  17     private options: PeertubePlayerManagerOptions,
  18     private p2pMediaLoaderModule?: any
  19   ) {
  20
  21   }
  22
  23   async getVideojsOptions (alreadyPlayed: boolean): Promise<videojs.PlayerOptions> {
  24     const commonOptions = this.options.common
  25
  26     let autoplay = this.getAutoPlayValue(commonOptions.autoplay, alreadyPlayed)
  27     const html5 = {
  28       preloadTextTracks: false
  29     }
  30
  31     const plugins: VideoJSPluginOptions = {
  32       peertube: {
  33         mode: this.mode,
  34         autoplay, // Use peertube plugin autoplay because we could get the file by webtorrent
  35
  36         ...pick(commonOptions, [
  37           'videoViewUrl',
  38           'authorizationHeader',
  39           'startTime',
  40           'videoDuration',
  41           'subtitle',
  42           'videoCaptions',
  43           'stopTime',
  44           'isLive',
  45           'videoUUID'
  46         ])
  47       },
  48       metrics: {
  49         mode: this.mode,
  50
  51         ...pick(commonOptions, [
  52           'metricsUrl',
  53           'videoUUID'
  54         ])
  55       }
  56     }
  57
  58     if (commonOptions.playlist) {
  59       plugins.playlist = commonOptions.playlist
  60     }
  61
  62     if (this.mode === 'p2p-media-loader') {
  63       const hlsOptionsBuilder = new HLSOptionsBuilder(this.options, this.p2pMediaLoaderModule)
  64       const options = await hlsOptionsBuilder.getPluginOptions()
  65
  66       Object.assign(plugins, pick(options, [ 'hlsjs', 'p2pMediaLoader' ]))
  67       Object.assign(html5, options.html5)
  68     } else if (this.mode === 'webtorrent') {
  69       const webtorrentOptionsBuilder = new WebTorrentOptionsBuilder(this.options, this.getAutoPlayValue(autoplay, alreadyPlayed))
  70
  71       Object.assign(plugins, webtorrentOptionsBuilder.getPluginOptions())
  72
  73       // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
  74       autoplay = false
  75     }
  76
  77     const controlBarOptionsBuilder = new ControlBarOptionsBuilder(this.options, this.mode)
  78
  79     const videojsOptions = {
  80       html5,
  81
  82       // We don't use text track settings for now
  83       textTrackSettings: false as any, // FIXME: typings
  84       controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
  85       loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
  86
  87       muted: commonOptions.muted !== undefined
  88         ? commonOptions.muted
  89         : undefined, // Undefined so the player knows it has to check the local storage
  90
  91       autoplay: this.getAutoPlayValue(autoplay, alreadyPlayed),
  92
  93       poster: commonOptions.poster,
  94       inactivityTimeout: commonOptions.inactivityTimeout,
  95       playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
  96
  97       plugins,
  98
  99       controlBar: {
 100         children: controlBarOptionsBuilder.getChildrenOptions() as any // FIXME: typings
 101       }
 102     }
 103
 104     if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
 105       Object.assign(videojsOptions, { language: commonOptions.language })
 106     }
 107
 108     return videojsOptions
 109   }
 110
 111   private getAutoPlayValue (autoplay: videojs.Autoplay, alreadyPlayed: boolean) {
 112     if (autoplay !== true) return autoplay
 113
 114     // On first play, disable autoplay to avoid issues
 115     // But if the player already played videos, we can safely autoplay next ones
 116     if (isIOS() || isSafari()) {
 117       return alreadyPlayed ? 'play' : false
 118     }
 119
 120     return this.options.common.forceAutoplay
 121       ? 'any'
 122       : 'play'
 123   }
 124
 125   getContextMenuOptions (player: videojs.Player, commonOptions: CommonOptions) {
 126     const content = () => {
 127       const isLoopEnabled = player.options_['loop']
 128
 129       const items = [
 130         {
 131           icon: 'repeat',
 132           label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
 133           listener: function () {
 134             player.options_['loop'] = !isLoopEnabled
 135           }
 136         },
 137         {
 138           label: player.localize('Copy the video URL'),
 139           listener: function () {
 140             copyToClipboard(buildVideoLink({ shortUUID: commonOptions.videoShortUUID }))
 141           }
 142         },
 143         {
 144           label: player.localize('Copy the video URL at the current time'),
 145           listener: function (this: videojs.Player) {
 146             const url = buildVideoLink({ shortUUID: commonOptions.videoShortUUID })
 147
 148             copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() }))
 149           }
 150         },
 151         {
 152           icon: 'code',
 153           label: player.localize('Copy embed code'),
 154           listener: () => {
 155             copyToClipboard(buildVideoOrPlaylistEmbed({ embedUrl: commonOptions.embedUrl, embedTitle: commonOptions.embedTitle }))
 156           }
 157         }
 158       ]
 159
 160       if (this.mode === 'webtorrent') {
 161         items.push({
 162           label: player.localize('Copy magnet URI'),
 163           listener: function (this: videojs.Player) {
 164             copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
 165           }
 166         })
 167       }
 168
 169       items.push({
 170         icon: 'info',
 171         label: player.localize('Stats for nerds'),
 172         listener: () => {
 173           player.stats().show()
 174         }
 175       })
 176
 177       return items.map(i => ({
 178         ...i,
 179         label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
 180       }))
 181     }
 182
 183     return { content }
 184   }
 185 }