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     videoElement.poster = window.location.origin + videoInfo.previewPath
  26
  27     let autoplay = false
  28
  29     try {
  30       let params = new URL(window.location.toString()).searchParams
  31       autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true')
  32     } catch (err) {
  33       console.error('Cannot get params from URL.', err)
  34     }
  35
  36     const videojsOptions = getVideojsOptions({
  37       autoplay,
  38       inactivityTimeout: 1500,
  39       videoViewUrl: getVideoUrl(videoId) + '/views',
  40       playerElement: videoElement,
  41       videoFiles: videoInfo.files,
  42       videoDuration: videoInfo.duration,
  43       enableHotkeys: true,
  44       peertubeLink: true
  45     })
  46     videojs(videoContainerId, videojsOptions, function () {
  47       const player = this
  48
  49       player.dock({
  50         title: videoInfo.name,
  51         description: 'Uses P2P, others may know you are watching this video.'
  52       })
  53     })
  54   })
  55   .catch(err => console.error(err))