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 async function loadVideoInfo (videoId: string): Promise<VideoDetails> {
  10   const response = await fetch(window.location.origin + '/api/v1/videos/' + videoId)
  11   return response.json()
  12 }
  13
  14 const urlParts = window.location.href.split('/')
  15 const videoId = urlParts[urlParts.length - 1]
  16
  17 loadVideoInfo(videoId)
  18   .then(videoInfo => {
  19     const videoElement = document.getElementById('video-container') as HTMLVideoElement
  20     const previewUrl = window.location.origin + videoInfo.previewPath
  21     videoElement.poster = previewUrl
  22
  23     const videojsOptions = {
  24       controls: true,
  25       autoplay: false,
  26       plugins: {
  27         peertube: {
  28           videoFiles: videoInfo.files,
  29           playerElement: videoElement,
  30           peerTubeLink: true
  31         },
  32         hotkeys: {
  33           enableVolumeScroll: false
  34         }
  35       }
  36     }
  37     videojs('video-container', videojsOptions, function () {
  38       const player = this
  39
  40       player.dock({
  41         title: videoInfo.name
  42       })
  43     })
  44   })
  45   .catch(err => console.error(err))