client/src/standalone/videos/embed.ts

   1 import './embed.scss'
   2
   3 import 'core-js/es6/symbol'
   4 import 'core-js/es6/object'
   5 import 'core-js/es6/function'
   6 import 'core-js/es6/parse-int'
   7 import 'core-js/es6/parse-float'
   8 import 'core-js/es6/number'
   9 import 'core-js/es6/math'
  10 import 'core-js/es6/string'
  11 import 'core-js/es6/date'
  12 import 'core-js/es6/array'
  13 import 'core-js/es6/regexp'
  14 import 'core-js/es6/map'
  15 import 'core-js/es6/weak-map'
  16 import 'core-js/es6/set'
  17 // For google bot that uses Chrome 41 and does not understand fetch
  18 import 'whatwg-fetch'
  19
  20 import * as videojs from 'video.js'
  21
  22 import { VideoDetails } from '../../../../shared'
  23 import { addContextMenu, getVideojsOptions, loadLocale } from '../../assets/player/peertube-player'
  24 import { environment } from '../../environments/environment'
  25
  26 function getVideoUrl (id: string) {
  27   return window.location.origin + '/api/v1/videos/' + id
  28 }
  29
  30 function loadVideoInfo (videoId: string): Promise<Response> {
  31   return fetch(getVideoUrl(videoId))
  32 }
  33
  34 function removeElement (element: HTMLElement) {
  35   element.parentElement.removeChild(element)
  36 }
  37
  38 function displayError (videoElement: HTMLVideoElement, text: string) {
  39   // Remove video element
  40   removeElement(videoElement)
  41
  42   document.title = 'Sorry - ' + text
  43
  44   const errorBlock = document.getElementById('error-block')
  45   errorBlock.style.display = 'flex'
  46
  47   const errorText = document.getElementById('error-content')
  48   errorText.innerHTML = text
  49 }
  50
  51 function videoNotFound (videoElement: HTMLVideoElement) {
  52   const text = 'This video does not exist.'
  53   displayError(videoElement, text)
  54 }
  55
  56 function videoFetchError (videoElement: HTMLVideoElement) {
  57   const text = 'We cannot fetch the video. Please try again later.'
  58   displayError(videoElement, text)
  59 }
  60
  61 const urlParts = window.location.href.split('/')
  62 const lastPart = urlParts[urlParts.length - 1]
  63 const videoId = lastPart.indexOf('?') === -1 ? lastPart : lastPart.split('?')[0]
  64
  65 loadLocale(environment.apiUrl, videojs, navigator.language)
  66   .then(() => loadVideoInfo(videoId))
  67   .then(async response => {
  68     const videoContainerId = 'video-container'
  69     const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
  70
  71     if (!response.ok) {
  72       if (response.status === 404) return videoNotFound(videoElement)
  73
  74       return videoFetchError(videoElement)
  75     }
  76
  77     const videoInfo: VideoDetails = await response.json()
  78
  79     let autoplay = false
  80     let startTime = 0
  81
  82     try {
  83       let params = new URL(window.location.toString()).searchParams
  84       autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true')
  85
  86       const startTimeParamString = params.get('start')
  87       const startTimeParamNumber = parseInt(startTimeParamString, 10)
  88       if (isNaN(startTimeParamNumber) === false) startTime = startTimeParamNumber
  89     } catch (err) {
  90       console.error('Cannot get params from URL.', err)
  91     }
  92
  93     const videojsOptions = getVideojsOptions({
  94       autoplay,
  95       inactivityTimeout: 1500,
  96       videoViewUrl: getVideoUrl(videoId) + '/views',
  97       playerElement: videoElement,
  98       videoFiles: videoInfo.files,
  99       videoDuration: videoInfo.duration,
 100       enableHotkeys: true,
 101       peertubeLink: true,
 102       poster: window.location.origin + videoInfo.previewPath,
 103       startTime
 104     })
 105     videojs(videoContainerId, videojsOptions, function () {
 106       const player = this
 107
 108       player.dock({
 109         title: videoInfo.name,
 110         description: player.localize('Uses P2P, others may know you are watching this video.')
 111       })
 112
 113       addContextMenu(player, window.location.origin + videoInfo.embedPath)
 114     })
 115   })
 116   .catch(err => console.error(err))