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