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