client/src/standalone/videos/embed.ts

   1 import './embed.scss'
   2
   3 import * as videojs from 'video.js'
   4
   5 import { VideoDetails } from '../../../../shared'
   6 import { getVideojsOptions } from '../../assets/player/peertube-player'
   7
   8 function getVideoUrl (id: string) {
   9   return window.location.origin + '/api/v1/videos/' + id
  10 }
  11
  12 async function loadVideoInfo (videoId: string): Promise<VideoDetails> {
  13   const response = await fetch(getVideoUrl(videoId))
  14   return response.json()
  15 }
  16
  17 const urlParts = window.location.href.split('/')
  18 const videoId = urlParts[urlParts.length - 1]
  19
  20 loadVideoInfo(videoId)
  21   .then(videoInfo => {
  22     const videoContainerId = 'video-container'
  23
  24     const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
  25     let autoplay = false
  26
  27     try {
  28       let params = new URL(window.location.toString()).searchParams
  29       autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true')
  30     } catch (err) {
  31       console.error('Cannot get params from URL.', err)
  32     }
  33
  34     const videojsOptions = getVideojsOptions({
  35       autoplay,
  36       inactivityTimeout: 1500,
  37       videoViewUrl: getVideoUrl(videoId) + '/views',
  38       playerElement: videoElement,
  39       videoFiles: videoInfo.files,
  40       videoDuration: videoInfo.duration,
  41       enableHotkeys: true,
  42       peertubeLink: true,
  43       poster: window.location.origin + videoInfo.previewPath
  44     })
  45     videojs(videoContainerId, videojsOptions, function () {
  46       const player = this
  47
  48       player.dock({
  49         title: videoInfo.name,
  50         description: 'Uses P2P, others may know you are watching this video.'
  51       })
  52     })
  53   })
  54   .catch(err => console.error(err))