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 { 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
  21 function getVideojsOptions (options: {
  22   autoplay: boolean,
  23   playerElement: HTMLVideoElement,
  24   videoViewUrl: string,
  25   videoDuration: number,
  26   videoFiles: VideoFile[],
  27   enableHotkeys: boolean,
  28   inactivityTimeout: number,
  29   peertubeLink: boolean,
  30   poster: string,
  31   startTime: number
  32   theaterMode: boolean
  33 }) {
  34   const videojsOptions = {
  35     controls: true,
  36     poster: options.poster,
  37     autoplay: false,
  38     inactivityTimeout: options.inactivityTimeout,
  39     playbackRates: [ 0.5, 1, 1.5, 2 ],
  40     plugins: {
  41       peertube: {
  42         autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
  43         videoFiles: options.videoFiles,
  44         playerElement: options.playerElement,
  45         videoViewUrl: options.videoViewUrl,
  46         videoDuration: options.videoDuration,
  47         startTime: options.startTime
  48       }
  49     },
  50     controlBar: {
  51       children: getControlBarChildren(options)
  52     }
  53   }
  54
  55   if (options.enableHotkeys === true) {
  56     Object.assign(videojsOptions.plugins, {
  57       hotkeys: {
  58         enableVolumeScroll: false
  59       }
  60     })
  61   }
  62
  63   return videojsOptions
  64 }
  65
  66 function getControlBarChildren (options: {
  67   peertubeLink: boolean
  68   theaterMode: boolean
  69 }) {
  70   const children = {
  71     'playToggle': {},
  72     'currentTimeDisplay': {},
  73     'timeDivider': {},
  74     'durationDisplay': {},
  75     'liveDisplay': {},
  76
  77     'flexibleWidthSpacer': {},
  78     'progressControl': {
  79       children: {
  80         'seekBar': {
  81           children: {
  82             'peerTubeLoadProgressBar': {},
  83             'mouseTimeDisplay': {},
  84             'playProgressBar': {}
  85           }
  86         }
  87       }
  88     },
  89
  90     'webTorrentButton': {},
  91
  92     'muteToggle': {},
  93     'volumeControl': {},
  94
  95     'settingsButton': {
  96       setup: {
  97         maxHeightOffset: 40
  98       },
  99       entries: [
 100         'resolutionMenuButton',
 101         'playbackRateMenuButton'
 102       ]
 103     }
 104   }
 105
 106   if (options.peertubeLink === true) {
 107     Object.assign(children, {
 108       'peerTubeLinkButton': {}
 109     })
 110   }
 111
 112   if (options.theaterMode === true) {
 113     Object.assign(children, {
 114       'theaterButton': {}
 115     })
 116   }
 117
 118   Object.assign(children, {
 119     'fullscreenToggle': {}
 120   })
 121
 122   return children
 123 }
 124
 125 function addContextMenu (player: any, videoEmbedUrl: string) {
 126   player.contextmenuUI({
 127     content: [
 128       {
 129         label: player.localize('Copy the video URL'),
 130         listener: function () {
 131           copyToClipboard(buildVideoLink())
 132         }
 133       },
 134       {
 135         label: player.localize('Copy the video URL at the current time'),
 136         listener: function () {
 137           const player = this
 138           copyToClipboard(buildVideoLink(player.currentTime()))
 139         }
 140       },
 141       {
 142         label: player.localize('Copy embed code'),
 143         listener: () => {
 144           copyToClipboard(buildVideoEmbed(videoEmbedUrl))
 145         }
 146       }
 147     ]
 148   })
 149 }
 150
 151 function loadLocale (serverUrl: string, videojs: any, locale: string) {
 152   const completeLocale = getCompleteLocale(locale)
 153
 154   if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return Promise.resolve(undefined)
 155
 156   return fetch(serverUrl + '/client/locales/' + completeLocale + '/player.json')
 157     .then(res => res.json())
 158     .then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
 159 }
 160
 161 export {
 162   loadLocale,
 163   getVideojsOptions,
 164   addContextMenu
 165 }