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           peerTubeLink: true,
  35           videoViewUrl: getVideoUrl(videoId) + '/views',
  36           videoDuration: videoInfo.duration
  37         },
  38         hotkeys: {
  39           enableVolumeScroll: false
  40         }
  41       }
  42     }
  43     videojs('video-container', videojsOptions, function () {
  44       const player = this
  45
  46       player.dock({
  47         title: videoInfo.name
  48       })
  49     })
  50   })
  51   .catch(err => console.error(err))