client/src/standalone/videos/embed.ts

   1 import './embed.scss'
   2
   3 import videojs from 'video.js'
   4 import 'videojs-dock/dist/videojs-dock.es.js'
   5 import * as WebTorrent from 'webtorrent'
   6 import { Video } from '../../../../shared'
   7
   8 // videojs typings don't have some method we need
   9 const videojsUntyped = videojs as any
  10
  11 function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) {
  12   const xhttp = new XMLHttpRequest()
  13   xhttp.onreadystatechange = function () {
  14     if (this.readyState === 4 && this.status === 200) {
  15       const json = JSON.parse(this.responseText)
  16       return callback(null, json)
  17     }
  18   }
  19
  20   xhttp.onerror = err => callback(err.error)
  21
  22   const url = window.location.origin + '/api/v1/videos/' + videoId
  23   xhttp.open('GET', url, true)
  24   xhttp.send()
  25 }
  26
  27 function loadVideoTorrent (magnetUri: string, player: videojs.Player) {
  28   console.log('Loading video ' + videoId)
  29   const client = new WebTorrent()
  30
  31   console.log('Adding magnet ' + magnetUri)
  32   client.add(magnetUri, torrent => {
  33     const file = torrent.files[0]
  34
  35     file.renderTo('video', err => {
  36       if (err) {
  37         console.error(err)
  38         return
  39       }
  40
  41       // Hack to "simulate" src link in video.js >= 6
  42       // If no, we can't play the video after pausing it
  43       // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
  44       (player as any).src = () => true
  45
  46       player.play()
  47     })
  48   })
  49 }
  50
  51 const urlParts = window.location.href.split('/')
  52 const videoId = urlParts[urlParts.length - 1]
  53
  54 loadVideoInfos(videoId, (err, videoInfos) => {
  55   if (err) {
  56     console.error(err)
  57     return
  58   }
  59
  60   const magnetUri = videoInfos.magnetUri
  61   const videoContainer = document.getElementById('video-container') as HTMLVideoElement
  62   const previewUrl = window.location.origin + videoInfos.previewPath
  63   videoContainer.poster = previewUrl
  64
  65   videojs('video-container', { controls: true, autoplay: false }, function () {
  66     const player = this
  67
  68     const Button = videojsUntyped.getComponent('Button')
  69     const peertubeLinkButton = videojsUntyped.extend(Button, {
  70       constructor: function () {
  71         Button.apply(this, arguments)
  72       },
  73
  74       createEl: function () {
  75         const link = document.createElement('a')
  76         link.href = window.location.href.replace('embed', 'watch')
  77         link.innerHTML = 'PeerTube'
  78         link.title = 'Go to the video page'
  79         link.className = 'vjs-peertube-link'
  80         link.target = '_blank'
  81
  82         return link
  83       },
  84
  85       handleClick: function () {
  86         player.pause()
  87       }
  88     })
  89     videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
  90
  91     const controlBar = player.getChild('controlBar')
  92     const addedLink = controlBar.addChild('PeerTubeLinkButton', {})
  93     controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
  94
  95     player.dock({
  96       title: videoInfos.name
  97     })
  98
  99     document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
 100       loadVideoTorrent(magnetUri, player)
 101     }, false)
 102   })
 103 })