Process embed in webpack too

1 files changed, 103 insertions, 0 deletions

diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
new file mode 100644
index 000000000..64a0f0798
--- /dev/null
+++ b/client/src/standalone/videos/embed.ts
@@ -0,0 +1,103 @@
+import './embed.scss'
+
+import videojs from 'video.js'
+import 'videojs-dock/dist/videojs-dock.es.js'
+import * as WebTorrent from 'webtorrent'
+import { Video } from '../../../../shared'
+
+// videojs typings don't have some method we need
+const videojsUntyped = videojs as any
+
+function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) {
+  const xhttp = new XMLHttpRequest()
+  xhttp.onreadystatechange = function () {
+    if (this.readyState === 4 && this.status === 200) {
+      const json = JSON.parse(this.responseText)
+      return callback(null, json)
+    }
+  }
+
+  xhttp.onerror = err => callback(err.error)
+
+  const url = window.location.origin + '/api/v1/videos/' + videoId
+  xhttp.open('GET', url, true)
+  xhttp.send()
+}
+
+function loadVideoTorrent (magnetUri: string, player: videojs.Player) {
+  console.log('Loading video ' + videoId)
+  const client = new WebTorrent()
+
+  console.log('Adding magnet ' + magnetUri)
+  client.add(magnetUri, torrent => {
+    const file = torrent.files[0]
+
+    file.renderTo('video', err => {
+      if (err) {
+        console.error(err)
+        return
+      }
+
+      // Hack to "simulate" src link in video.js >= 6
+      // If no, we can't play the video after pausing it
+      // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
+      (player as any).src = () => true
+
+      player.play()
+    })
+  })
+}
+
+const urlParts = window.location.href.split('/')
+const videoId = urlParts[urlParts.length - 1]
+
+loadVideoInfos(videoId, (err, videoInfos) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  const magnetUri = videoInfos.magnetUri
+  const videoContainer = document.getElementById('video-container') as HTMLVideoElement
+  const previewUrl = window.location.origin + videoInfos.previewPath
+  videoContainer.poster = previewUrl
+
+  videojs('video-container', { controls: true, autoplay: false }, function () {
+    const player = this
+
+    const Button = videojsUntyped.getComponent('Button')
+    const peertubeLinkButton = videojsUntyped.extend(Button, {
+      constructor: function () {
+        Button.apply(this, arguments)
+      },
+
+      createEl: function () {
+        const link = document.createElement('a')
+        link.href = window.location.href.replace('embed', 'watch')
+        link.innerHTML = 'PeerTube'
+        link.title = 'Go to the video page'
+        link.className = 'vjs-peertube-link'
+        link.target = '_blank'
+
+        return link
+      },
+
+      handleClick: function () {
+        player.pause()
+      }
+    })
+    videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
+
+    const controlBar = player.getChild('controlBar')
+    const addedLink = controlBar.addChild('PeerTubeLinkButton', {})
+    controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
+
+    player.dock({
+      title: videoInfos.name
+    })
+
+    document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
+      loadVideoTorrent(magnetUri, player)
+    }, false)
+  })
+})