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     const videojsOptions = {
  28       controls: true,
  29       autoplay: false,
  30       plugins: {
  31         peertube: {
  32           videoFiles: videoInfo.files,
  33           playerElement: videoElement,
  34           videoViewUrl: getVideoUrl(videoId) + '/views',
  35           videoDuration: videoInfo.duration
  36         },
  37         hotkeys: {
  38           enableVolumeScroll: false
  39         }
  40       },
  41       controlBar: {
  42         children: [
  43           'playToggle',
  44           'currentTimeDisplay',
  45           'timeDivider',
  46           'durationDisplay',
  47           'liveDisplay',
  48
  49           'flexibleWidthSpacer',
  50           'progressControl',
  51
  52           'webTorrentButton',
  53
  54           'muteToggle',
  55           'volumeControl',
  56
  57           'resolutionMenuButton',
  58           'peerTubeLinkButton',
  59
  60           'fullscreenToggle'
  61         ]
  62       }
  63     }
  64     videojs('video-container', videojsOptions, function () {
  65       const player = this
  66
  67       player.dock({
  68         title: videoInfo.name,
  69         description: 'Uses P2P, others may know you are watching this video.'
  70       })
  71     })
  72   })
  73   .catch(err => console.error(err))