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