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             'playProgressBar': {}
  84           }
  85         }
  86       }
  87     },
  88
  89     'webTorrentButton': {},
  90
  91     'muteToggle': {},
  92     'volumeControl': {},
  93
  94     'settingsButton': {
  95       setup: {
  96         maxHeightOffset: 40
  97       },
  98       entries: [
  99         'resolutionMenuButton',
 100         'playbackRateMenuButton'
 101       ]
 102     }
 103   }
 104
 105   if (options.peertubeLink === true) {
 106     Object.assign(children, {
 107       'peerTubeLinkButton': {}
 108     })
 109   }
 110
 111   if (options.theaterMode === true) {
 112     Object.assign(children, {
 113       'theaterButton': {}
 114     })
 115   }
 116
 117   Object.assign(children, {
 118     'fullscreenToggle': {}
 119   })
 120
 121   return children
 122 }
 123
 124 function addContextMenu (player: any, videoEmbedUrl: string) {
 125   player.contextmenuUI({
 126     content: [
 127       {
 128         label: player.localize('Copy the video URL'),
 129         listener: function () {
 130           copyToClipboard(buildVideoLink())
 131         }
 132       },
 133       {
 134         label: player.localize('Copy the video URL at the current time'),
 135         listener: function () {
 136           const player = this
 137           copyToClipboard(buildVideoLink(player.currentTime()))
 138         }
 139       },
 140       {
 141         label: player.localize('Copy embed code'),
 142         listener: () => {
 143           copyToClipboard(buildVideoEmbed(videoEmbedUrl))
 144         }
 145       }
 146     ]
 147   })
 148 }
 149
 150 function loadLocale (serverUrl: string, videojs: any, locale: string) {
 151   const completeLocale = getCompleteLocale(locale)
 152
 153   if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return Promise.resolve(undefined)
 154
 155   return fetch(serverUrl + '/client/locales/' + completeLocale + '/player.json')
 156     .then(res => res.json())
 157     .then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
 158 }
 159
 160 export {
 161   loadLocale,
 162   getVideojsOptions,
 163   addContextMenu
 164 }