client/src/assets/player/peertube-player.ts

   1 import { VideoFile } from '../../../../shared/models/videos'
   2
   3 import 'videojs-hotkeys'
   4 import 'videojs-dock'
   5 import 'videojs-contextmenu-ui'
   6 import './peertube-link-button'
   7 import './resolution-menu-button'
   8 import './settings-menu-button'
   9 import './webtorrent-info-button'
  10 import './peertube-videojs-plugin'
  11 import './peertube-load-progress-bar'
  12 import './theater-button'
  13 import { VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
  14 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
  15 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
  16
  17 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
  18 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
  19 // Change Captions to Subtitles/CC
  20 videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
  21 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
  22 videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
  23
  24 function getVideojsOptions (options: {
  25   autoplay: boolean,
  26   playerElement: HTMLVideoElement,
  27   videoViewUrl: string,
  28   videoDuration: number,
  29   videoFiles: VideoFile[],
  30   enableHotkeys: boolean,
  31   inactivityTimeout: number,
  32   peertubeLink: boolean,
  33   poster: string,
  34   startTime: number | string
  35   theaterMode: boolean,
  36   videoCaptions: VideoJSCaption[],
  37   language?: string,
  38   controls?: boolean,
  39   muted?: boolean,
  40   loop?: boolean
  41 }) {
  42   const videojsOptions = {
  43     // We don't use text track settings for now
  44     textTrackSettings: false,
  45     controls: options.controls !== undefined ? options.controls : true,
  46     muted: options.controls !== undefined ? options.muted : false,
  47     loop: options.loop !== undefined ? options.loop : false,
  48     poster: options.poster,
  49     autoplay: false,
  50     inactivityTimeout: options.inactivityTimeout,
  51     playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
  52     plugins: {
  53       peertube: {
  54         autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
  55         videoCaptions: options.videoCaptions,
  56         videoFiles: options.videoFiles,
  57         playerElement: options.playerElement,
  58         videoViewUrl: options.videoViewUrl,
  59         videoDuration: options.videoDuration,
  60         startTime: options.startTime
  61       }
  62     },
  63     controlBar: {
  64       children: getControlBarChildren(options)
  65     }
  66   }
  67
  68   if (options.enableHotkeys === true) {
  69     Object.assign(videojsOptions.plugins, {
  70       hotkeys: {
  71         enableVolumeScroll: false,
  72         enableModifiersForNumbers: false,
  73         customKeys: {
  74           increasePlaybackRateKey: {
  75             key: function (event) {
  76               return event.key === '>'
  77             },
  78             handler: function (player) {
  79               player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
  80             }
  81           },
  82           decreasePlaybackRateKey: {
  83             key: function (event) {
  84               return event.key === '<'
  85             },
  86             handler: function (player) {
  87               player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
  88             }
  89           }
  90         }
  91       }
  92     })
  93   }
  94
  95   if (options.language && !isDefaultLocale(options.language)) {
  96     Object.assign(videojsOptions, { language: options.language })
  97   }
  98
  99   return videojsOptions
 100 }
 101
 102 function getControlBarChildren (options: {
 103   peertubeLink: boolean
 104   theaterMode: boolean,
 105   videoCaptions: VideoJSCaption[]
 106 }) {
 107   const settingEntries = []
 108
 109   // Keep an order
 110   settingEntries.push('playbackRateMenuButton')
 111   if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
 112   settingEntries.push('resolutionMenuButton')
 113
 114   const children = {
 115     'playToggle': {},
 116     'currentTimeDisplay': {},
 117     'timeDivider': {},
 118     'durationDisplay': {},
 119     'liveDisplay': {},
 120
 121     'flexibleWidthSpacer': {},
 122     'progressControl': {
 123       children: {
 124         'seekBar': {
 125           children: {
 126             'peerTubeLoadProgressBar': {},
 127             'mouseTimeDisplay': {},
 128             'playProgressBar': {}
 129           }
 130         }
 131       }
 132     },
 133
 134     'webTorrentButton': {},
 135
 136     'muteToggle': {},
 137     'volumeControl': {},
 138
 139     'settingsButton': {
 140       setup: {
 141         maxHeightOffset: 40
 142       },
 143       entries: settingEntries
 144     }
 145   }
 146
 147   if (options.peertubeLink === true) {
 148     Object.assign(children, {
 149       'peerTubeLinkButton': {}
 150     })
 151   }
 152
 153   if (options.theaterMode === true) {
 154     Object.assign(children, {
 155       'theaterButton': {}
 156     })
 157   }
 158
 159   Object.assign(children, {
 160     'fullscreenToggle': {}
 161   })
 162
 163   return children
 164 }
 165
 166 function addContextMenu (player: any, videoEmbedUrl: string) {
 167   player.contextmenuUI({
 168     content: [
 169       {
 170         label: player.localize('Copy the video URL'),
 171         listener: function () {
 172           copyToClipboard(buildVideoLink())
 173         }
 174       },
 175       {
 176         label: player.localize('Copy the video URL at the current time'),
 177         listener: function () {
 178           const player = this
 179           copyToClipboard(buildVideoLink(player.currentTime()))
 180         }
 181       },
 182       {
 183         label: player.localize('Copy embed code'),
 184         listener: () => {
 185           copyToClipboard(buildVideoEmbed(videoEmbedUrl))
 186         }
 187       },
 188       {
 189         label: player.localize('Copy magnet URI'),
 190         listener: function () {
 191           const player = this
 192           copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
 193         }
 194       }
 195     ]
 196   })
 197 }
 198
 199 function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
 200   const path = getLocalePath(serverUrl, locale)
 201   // It is the default locale, nothing to translate
 202   if (!path) return Promise.resolve(undefined)
 203
 204   let p: Promise<any>
 205
 206   if (loadLocaleInVideoJS.cache[path]) {
 207     p = Promise.resolve(loadLocaleInVideoJS.cache[path])
 208   } else {
 209     p = fetch(path + '/player.json')
 210       .then(res => res.json())
 211       .then(json => {
 212         loadLocaleInVideoJS.cache[path] = json
 213         return json
 214       })
 215   }
 216
 217   const completeLocale = getCompleteLocale(locale)
 218   return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
 219 }
 220 namespace loadLocaleInVideoJS {
 221   export const cache: { [ path: string ]: any } = {}
 222 }
 223
 224 function getServerTranslations (serverUrl: string, locale: string) {
 225   const path = getLocalePath(serverUrl, locale)
 226   // It is the default locale, nothing to translate
 227   if (!path) return Promise.resolve(undefined)
 228
 229   return fetch(path + '/server.json')
 230     .then(res => res.json())
 231 }
 232
 233 // ############################################################################
 234
 235 export {
 236   getServerTranslations,
 237   loadLocaleInVideoJS,
 238   getVideojsOptions,
 239   addContextMenu
 240 }
 241
 242 // ############################################################################
 243
 244 function getLocalePath (serverUrl: string, locale: string) {
 245   const completeLocale = getCompleteLocale(locale)
 246
 247   if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
 248
 249   return serverUrl + '/client/locales/' + completeLocale
 250 }