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