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 { videojsUntyped } from './peertube-videojs-typings'
  13 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
  14
  15 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
  16 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
  17
  18 function getVideojsOptions (options: {
  19   autoplay: boolean,
  20   playerElement: HTMLVideoElement,
  21   videoViewUrl: string,
  22   videoEmbedUrl: string,
  23   videoDuration: number,
  24   videoFiles: VideoFile[],
  25   enableHotkeys: boolean,
  26   inactivityTimeout: number,
  27   peertubeLink: boolean,
  28   poster: string,
  29   startTime: number
  30 }) {
  31   const videojsOptions = {
  32     controls: true,
  33     poster: options.poster,
  34     autoplay: false,
  35     inactivityTimeout: options.inactivityTimeout,
  36     playbackRates: [ 0.5, 1, 1.5, 2 ],
  37     plugins: {
  38       peertube: {
  39         autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
  40         videoFiles: options.videoFiles,
  41         playerElement: options.playerElement,
  42         videoViewUrl: options.videoViewUrl,
  43         videoDuration: options.videoDuration,
  44         startTime: options.startTime
  45       },
  46       contextmenuUI: {
  47         content: [
  48           {
  49             label: 'Copy the video URL',
  50             listener: function () {
  51               copyToClipboard(buildVideoLink())
  52             }
  53           },
  54           {
  55             label: 'Copy the video URL at the current time',
  56             listener: function () {
  57               const player = this
  58               copyToClipboard(buildVideoLink(player.currentTime()))
  59             }
  60           },
  61           {
  62             label: 'Copy embed code',
  63             listener: () => {
  64               copyToClipboard(buildVideoEmbed(options.videoEmbedUrl))
  65             }
  66           }
  67         ]
  68       }
  69     },
  70     controlBar: {
  71       children: getControlBarChildren(options)
  72     }
  73   }
  74
  75   if (options.enableHotkeys === true) {
  76     Object.assign(videojsOptions.plugins, {
  77       hotkeys: {
  78         enableVolumeScroll: false
  79       }
  80     })
  81   }
  82
  83   return videojsOptions
  84 }
  85
  86 function getControlBarChildren (options: {
  87   peertubeLink: boolean
  88 }) {
  89   const children = {
  90     'playToggle': {},
  91     'currentTimeDisplay': {},
  92     'timeDivider': {},
  93     'durationDisplay': {},
  94     'liveDisplay': {},
  95
  96     'flexibleWidthSpacer': {},
  97     'progressControl': {},
  98
  99     'webTorrentButton': {},
 100
 101     'muteToggle': {},
 102     'volumeControl': {},
 103
 104     'settingsButton': {
 105       setup: {
 106         maxHeightOffset: 40
 107       },
 108       entries: [
 109         'resolutionMenuButton',
 110         'playbackRateMenuButton'
 111       ]
 112     }
 113   }
 114
 115   if (options.peertubeLink === true) {
 116     Object.assign(children, {
 117       'peerTubeLinkButton': {}
 118     })
 119   }
 120
 121   Object.assign(children, {
 122     'fullscreenToggle': {}
 123   })
 124
 125   return children
 126 }
 127
 128 export { getVideojsOptions }