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       }
  74     })
  75   }
  76
  77   if (options.language && !isDefaultLocale(options.language)) {
  78     Object.assign(videojsOptions, { language: options.language })
  79   }
  80
  81   return videojsOptions
  82 }
  83
  84 function getControlBarChildren (options: {
  85   peertubeLink: boolean
  86   theaterMode: boolean,
  87   videoCaptions: VideoJSCaption[]
  88 }) {
  89   const settingEntries = []
  90
  91   // Keep an order
  92   settingEntries.push('playbackRateMenuButton')
  93   if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
  94   settingEntries.push('resolutionMenuButton')
  95
  96   const children = {
  97     'playToggle': {},
  98     'currentTimeDisplay': {},
  99     'timeDivider': {},
 100     'durationDisplay': {},
 101     'liveDisplay': {},
 102
 103     'flexibleWidthSpacer': {},
 104     'progressControl': {
 105       children: {
 106         'seekBar': {
 107           children: {
 108             'peerTubeLoadProgressBar': {},
 109             'mouseTimeDisplay': {},
 110             'playProgressBar': {}
 111           }
 112         }
 113       }
 114     },
 115
 116     'webTorrentButton': {},
 117
 118     'muteToggle': {},
 119     'volumeControl': {},
 120
 121     'settingsButton': {
 122       setup: {
 123         maxHeightOffset: 40
 124       },
 125       entries: settingEntries
 126     }
 127   }
 128
 129   if (options.peertubeLink === true) {
 130     Object.assign(children, {
 131       'peerTubeLinkButton': {}
 132     })
 133   }
 134
 135   if (options.theaterMode === true) {
 136     Object.assign(children, {
 137       'theaterButton': {}
 138     })
 139   }
 140
 141   Object.assign(children, {
 142     'fullscreenToggle': {}
 143   })
 144
 145   return children
 146 }
 147
 148 function addContextMenu (player: any, videoEmbedUrl: string) {
 149   player.contextmenuUI({
 150     content: [
 151       {
 152         label: player.localize('Copy the video URL'),
 153         listener: function () {
 154           copyToClipboard(buildVideoLink())
 155         }
 156       },
 157       {
 158         label: player.localize('Copy the video URL at the current time'),
 159         listener: function () {
 160           const player = this
 161           copyToClipboard(buildVideoLink(player.currentTime()))
 162         }
 163       },
 164       {
 165         label: player.localize('Copy embed code'),
 166         listener: () => {
 167           copyToClipboard(buildVideoEmbed(videoEmbedUrl))
 168         }
 169       },
 170       {
 171         label: player.localize('Copy magnet URI'),
 172         listener: function () {
 173           const player = this
 174           copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
 175         }
 176       }
 177     ]
 178   })
 179 }
 180
 181 function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
 182   const path = getLocalePath(serverUrl, locale)
 183   // It is the default locale, nothing to translate
 184   if (!path) return Promise.resolve(undefined)
 185
 186   let p: Promise<any>
 187
 188   if (loadLocaleInVideoJS.cache[path]) {
 189     p = Promise.resolve(loadLocaleInVideoJS.cache[path])
 190   } else {
 191     p = fetch(path + '/player.json')
 192       .then(res => res.json())
 193       .then(json => {
 194         loadLocaleInVideoJS.cache[path] = json
 195         return json
 196       })
 197   }
 198
 199   const completeLocale = getCompleteLocale(locale)
 200   return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
 201 }
 202 namespace loadLocaleInVideoJS {
 203   export const cache: { [ path: string ]: any } = {}
 204 }
 205
 206 function getServerTranslations (serverUrl: string, locale: string) {
 207   const path = getLocalePath(serverUrl, locale)
 208   // It is the default locale, nothing to translate
 209   if (!path) return Promise.resolve(undefined)
 210
 211   return fetch(path + '/server.json')
 212     .then(res => res.json())
 213 }
 214
 215 // ############################################################################
 216
 217 export {
 218   getServerTranslations,
 219   loadLocaleInVideoJS,
 220   getVideojsOptions,
 221   addContextMenu
 222 }
 223
 224 // ############################################################################
 225
 226 function getLocalePath (serverUrl: string, locale: string) {
 227   const completeLocale = getCompleteLocale(locale)
 228
 229   if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
 230
 231   return serverUrl + '/client/locales/' + completeLocale
 232 }