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
  16 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
  17 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
  18
  19 function getVideojsOptions (options: {
  20   autoplay: boolean,
  21   playerElement: HTMLVideoElement,
  22   videoViewUrl: string,
  23   videoEmbedUrl: 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       contextmenuUI: {
  48         content: [
  49           {
  50             label: 'Copy the video URL',
  51             listener: function () {
  52               copyToClipboard(buildVideoLink())
  53             }
  54           },
  55           {
  56             label: 'Copy the video URL at the current time',
  57             listener: function () {
  58               const player = this
  59               copyToClipboard(buildVideoLink(player.currentTime()))
  60             }
  61           },
  62           {
  63             label: 'Copy embed code',
  64             listener: () => {
  65               copyToClipboard(buildVideoEmbed(options.videoEmbedUrl))
  66             }
  67           }
  68         ]
  69       }
  70     },
  71     controlBar: {
  72       children: getControlBarChildren(options)
  73     }
  74   }
  75
  76   if (options.enableHotkeys === true) {
  77     Object.assign(videojsOptions.plugins, {
  78       hotkeys: {
  79         enableVolumeScroll: false
  80       }
  81     })
  82   }
  83
  84   return videojsOptions
  85 }
  86
  87 function getControlBarChildren (options: {
  88   peertubeLink: boolean
  89 }) {
  90   const children = {
  91     'playToggle': {},
  92     'currentTimeDisplay': {},
  93     'timeDivider': {},
  94     'durationDisplay': {},
  95     'liveDisplay': {},
  96
  97     'flexibleWidthSpacer': {},
  98     'progressControl': {
  99       children: {
 100         'seekBar': {
 101           children: {
 102             'peerTubeLoadProgressBar': {},
 103             'playProgressBar': {}
 104           }
 105         }
 106       }
 107     },
 108
 109     'webTorrentButton': {},
 110
 111     'muteToggle': {},
 112     'volumeControl': {},
 113
 114     'settingsButton': {
 115       setup: {
 116         maxHeightOffset: 40
 117       },
 118       entries: [
 119         'resolutionMenuButton',
 120         'playbackRateMenuButton'
 121       ]
 122     }
 123   }
 124
 125   if (options.peertubeLink === true) {
 126     Object.assign(children, {
 127       'peerTubeLinkButton': {}
 128     })
 129   }
 130
 131   Object.assign(children, {
 132     'fullscreenToggle': {}
 133   })
 134
 135   return children
 136 }
 137
 138 export { getVideojsOptions }