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