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   getVideojsOptions (alreadyPlayed: boolean): 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 = 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: any, 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 'play'
 121   }
 122
 123   getContextMenuOptions (player: videojs.Player, commonOptions: CommonOptions) {
 124     const content = () => {
 125       const isLoopEnabled = player.options_['loop']
 126
 127       const items = [
 128         {
 129           icon: 'repeat',
 130           label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
 131           listener: function () {
 132             player.options_['loop'] = !isLoopEnabled
 133           }
 134         },
 135         {
 136           label: player.localize('Copy the video URL'),
 137           listener: function () {
 138             copyToClipboard(buildVideoLink({ shortUUID: commonOptions.videoShortUUID }))
 139           }
 140         },
 141         {
 142           label: player.localize('Copy the video URL at the current time'),
 143           listener: function (this: videojs.Player) {
 144             const url = buildVideoLink({ shortUUID: commonOptions.videoShortUUID })
 145
 146             copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() }))
 147           }
 148         },
 149         {
 150           icon: 'code',
 151           label: player.localize('Copy embed code'),
 152           listener: () => {
 153             copyToClipboard(buildVideoOrPlaylistEmbed({ embedUrl: commonOptions.embedUrl, embedTitle: commonOptions.embedTitle }))
 154           }
 155         }
 156       ]
 157
 158       if (this.mode === 'webtorrent') {
 159         items.push({
 160           label: player.localize('Copy magnet URI'),
 161           listener: function (this: videojs.Player) {
 162             copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
 163           }
 164         })
 165       }
 166
 167       items.push({
 168         icon: 'info',
 169         label: player.localize('Stats for nerds'),
 170         listener: () => {
 171           player.stats().show()
 172         }
 173       })
 174
 175       return items.map(i => ({
 176         ...i,
 177         label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
 178       }))
 179     }
 180
 181     return { content }
 182   }
 183 }