client/src/standalone/videos/embed.ts

   1 import './embed.scss'
   2
   3 import * as videojs from 'video.js'
   4 import 'videojs-hotkeys'
   5 import '../../assets/player/peertube-videojs-plugin'
   6 import 'videojs-dock/dist/videojs-dock.es.js'
   7 import { VideoDetails } from '../../../../shared'
   8
   9 function getVideoUrl (id: string) {
  10   return window.location.origin + '/api/v1/videos/' + id
  11 }
  12
  13 async function loadVideoInfo (videoId: string): Promise<VideoDetails> {
  14   const response = await fetch(getVideoUrl(videoId))
  15   return response.json()
  16 }
  17
  18 const urlParts = window.location.href.split('/')
  19 const videoId = urlParts[urlParts.length - 1]
  20
  21 loadVideoInfo(videoId)
  22   .then(videoInfo => {
  23     const videoElement = document.getElementById('video-container') as HTMLVideoElement
  24     const previewUrl = window.location.origin + videoInfo.previewPath
  25     videoElement.poster = previewUrl
  26
  27     let autoplay = false
  28
  29     try {
  30       let params = new URL(window.location.toString()).searchParams
  31       autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true')
  32     } catch (err) {
  33       console.error('Cannot get params from URL.', err)
  34     }
  35
  36     const videojsOptions = {
  37       controls: true,
  38       autoplay,
  39       inactivityTimeout: 500,
  40       plugins: {
  41         peertube: {
  42           videoFiles: videoInfo.files,
  43           playerElement: videoElement,
  44           videoViewUrl: getVideoUrl(videoId) + '/views',
  45           videoDuration: videoInfo.duration
  46         },
  47         hotkeys: {
  48           enableVolumeScroll: false
  49         }
  50       },
  51       controlBar: {
  52         children: [
  53           'playToggle',
  54           'currentTimeDisplay',
  55           'timeDivider',
  56           'durationDisplay',
  57           'liveDisplay',
  58
  59           'flexibleWidthSpacer',
  60           'progressControl',
  61
  62           'webTorrentButton',
  63
  64           'muteToggle',
  65           'volumeControl',
  66
  67           'resolutionMenuButton',
  68           'peerTubeLinkButton',
  69
  70           'fullscreenToggle'
  71         ]
  72       }
  73     }
  74     videojs('video-container', videojsOptions, function () {
  75       const player = this
  76
  77       player.dock({
  78         title: videoInfo.name,
  79         description: 'Uses P2P, others may know you are watching this video.'
  80       })
  81     })
  82   })
  83   .catch(err => console.error(err))