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 { UserWatching, 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
  38   language?: string,
  39   controls?: boolean,
  40   muted?: boolean,
  41   loop?: boolean
  42
  43   userWatching?: UserWatching
  44 }) {
  45   const videojsOptions = {
  46     // We don't use text track settings for now
  47     textTrackSettings: false,
  48     controls: options.controls !== undefined ? options.controls : true,
  49     muted: options.controls !== undefined ? options.muted : false,
  50     loop: options.loop !== undefined ? options.loop : false,
  51     poster: options.poster,
  52     autoplay: false,
  53     inactivityTimeout: options.inactivityTimeout,
  54     playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
  55     plugins: {
  56       peertube: {
  57         autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
  58         videoCaptions: options.videoCaptions,
  59         videoFiles: options.videoFiles,
  60         playerElement: options.playerElement,
  61         videoViewUrl: options.videoViewUrl,
  62         videoDuration: options.videoDuration,
  63         startTime: options.startTime,
  64         userWatching: options.userWatching
  65       }
  66     },
  67     controlBar: {
  68       children: getControlBarChildren(options)
  69     }
  70   }
  71
  72   if (options.enableHotkeys === true) {
  73     Object.assign(videojsOptions.plugins, {
  74       hotkeys: {
  75         enableVolumeScroll: false,
  76         enableModifiersForNumbers: false,
  77
  78         fullscreenKey: function (event: any) {
  79           // fullscreen with the f key or Ctrl+Enter
  80           return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
  81         },
  82
  83         seekStep: function (event: any) {
  84           // mimic VLC seek behavior, and default to 5 (original value is 5).
  85           if (event.ctrlKey && event.altKey) {
  86             return 5 * 60
  87           } else if (event.ctrlKey) {
  88             return 60
  89           } else if (event.altKey) {
  90             return 10
  91           } else {
  92             return 5
  93           }
  94         },
  95
  96         customKeys: {
  97           increasePlaybackRateKey: {
  98             key: function (event: any) {
  99               return event.key === '>'
 100             },
 101             handler: function (player: any) {
 102               player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
 103             }
 104           },
 105           decreasePlaybackRateKey: {
 106             key: function (event: any) {
 107               return event.key === '<'
 108             },
 109             handler: function (player: any) {
 110               player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
 111             }
 112           },
 113           frameByFrame: {
 114             key: function (event: any) {
 115               return event.key === '.'
 116             },
 117             handler: function (player: any) {
 118               player.pause()
 119               // Calculate movement distance (assuming 30 fps)
 120               const dist = 1 / 30
 121               player.currentTime(player.currentTime() + dist)
 122             }
 123           }
 124         }
 125       }
 126     })
 127   }
 128
 129   if (options.language && !isDefaultLocale(options.language)) {
 130     Object.assign(videojsOptions, { language: options.language })
 131   }
 132
 133   return videojsOptions
 134 }
 135
 136 function getControlBarChildren (options: {
 137   peertubeLink: boolean
 138   theaterMode: boolean,
 139   videoCaptions: VideoJSCaption[]
 140 }) {
 141   const settingEntries = []
 142
 143   // Keep an order
 144   settingEntries.push('playbackRateMenuButton')
 145   if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
 146   settingEntries.push('resolutionMenuButton')
 147
 148   const children = {
 149     'playToggle': {},
 150     'currentTimeDisplay': {},
 151     'timeDivider': {},
 152     'durationDisplay': {},
 153     'liveDisplay': {},
 154
 155     'flexibleWidthSpacer': {},
 156     'progressControl': {
 157       children: {
 158         'seekBar': {
 159           children: {
 160             'peerTubeLoadProgressBar': {},
 161             'mouseTimeDisplay': {},
 162             'playProgressBar': {}
 163           }
 164         }
 165       }
 166     },
 167
 168     'webTorrentButton': {},
 169
 170     'muteToggle': {},
 171     'volumeControl': {},
 172
 173     'settingsButton': {
 174       setup: {
 175         maxHeightOffset: 40
 176       },
 177       entries: settingEntries
 178     }
 179   }
 180
 181   if (options.peertubeLink === true) {
 182     Object.assign(children, {
 183       'peerTubeLinkButton': {}
 184     })
 185   }
 186
 187   if (options.theaterMode === true) {
 188     Object.assign(children, {
 189       'theaterButton': {}
 190     })
 191   }
 192
 193   Object.assign(children, {
 194     'fullscreenToggle': {}
 195   })
 196
 197   return children
 198 }
 199
 200 function addContextMenu (player: any, videoEmbedUrl: string) {
 201   player.contextmenuUI({
 202     content: [
 203       {
 204         label: player.localize('Copy the video URL'),
 205         listener: function () {
 206           copyToClipboard(buildVideoLink())
 207         }
 208       },
 209       {
 210         label: player.localize('Copy the video URL at the current time'),
 211         listener: function () {
 212           const player = this
 213           copyToClipboard(buildVideoLink(player.currentTime()))
 214         }
 215       },
 216       {
 217         label: player.localize('Copy embed code'),
 218         listener: () => {
 219           copyToClipboard(buildVideoEmbed(videoEmbedUrl))
 220         }
 221       },
 222       {
 223         label: player.localize('Copy magnet URI'),
 224         listener: function () {
 225           const player = this
 226           copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
 227         }
 228       }
 229     ]
 230   })
 231 }
 232
 233 function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
 234   const path = getLocalePath(serverUrl, locale)
 235   // It is the default locale, nothing to translate
 236   if (!path) return Promise.resolve(undefined)
 237
 238   let p: Promise<any>
 239
 240   if (loadLocaleInVideoJS.cache[path]) {
 241     p = Promise.resolve(loadLocaleInVideoJS.cache[path])
 242   } else {
 243     p = fetch(path + '/player.json')
 244       .then(res => res.json())
 245       .then(json => {
 246         loadLocaleInVideoJS.cache[path] = json
 247         return json
 248       })
 249   }
 250
 251   const completeLocale = getCompleteLocale(locale)
 252   return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
 253 }
 254 namespace loadLocaleInVideoJS {
 255   export const cache: { [ path: string ]: any } = {}
 256 }
 257
 258 function getServerTranslations (serverUrl: string, locale: string) {
 259   const path = getLocalePath(serverUrl, locale)
 260   // It is the default locale, nothing to translate
 261   if (!path) return Promise.resolve(undefined)
 262
 263   return fetch(path + '/server.json')
 264     .then(res => res.json())
 265 }
 266
 267 // ############################################################################
 268
 269 export {
 270   getServerTranslations,
 271   loadLocaleInVideoJS,
 272   getVideojsOptions,
 273   addContextMenu
 274 }
 275
 276 // ############################################################################
 277
 278 function getLocalePath (serverUrl: string, locale: string) {
 279   const completeLocale = getCompleteLocale(locale)
 280
 281   if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
 282
 283   return serverUrl + '/client/locales/' + completeLocale
 284 }