Client: handle multiple file resolutions

2 files changed, 26 insertions, 73 deletions

diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index 938a6e48c..b76f09677 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -29,7 +29,11 @@ html, body {
   line-height: 2.20;
   transition: all .4s;
   position: relative;
-  right: 6px;
+  right: 8px;
+}
+
+.vjs-resolution-button-label {
+  left: -7px;
 }
 
 .vjs-peertube-link:hover {
@@ -38,5 +42,5 @@ html, body {
 
 // Fix volume panel because we added a new component (PeerTube link)
 .vjs-volume-panel {
-  margin-right: 90px !important;
+  margin-right: 130px !important;
 }
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 0698344b0..f2f339bcc 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,14 +1,11 @@
 import './embed.scss'
 
 import videojs from 'video.js'
+import '../../assets/player/peertube-videojs-plugin'
 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) {
+function loadVideoInfo (videoId: string, callback: (err: Error, res?: Video) => void) {
   const xhttp = new XMLHttpRequest()
   xhttp.onreadystatechange = function () {
     if (this.readyState === 4 && this.status === 200) {
@@ -24,84 +21,36 @@ function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) =>
   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) => {
+loadVideoInfo(videoId, (err, videoInfo) => {
   if (err) {
     console.error(err)
     return
   }
 
-  let magnetUri = ''
-  if (videoInfos.files !== undefined && videoInfos.files.length !== 0) {
-    magnetUri = videoInfos.files[0].magnetUri
+  const videoElement = document.getElementById('video-container') as HTMLVideoElement
+  const previewUrl = window.location.origin + videoInfo.previewPath
+  videoElement.poster = previewUrl
+
+  const videojsOptions = {
+    controls: true,
+    autoplay: false,
+    plugins: {
+      peertube: {
+        videoFiles: videoInfo.files,
+        playerElement: videoElement,
+        autoplay: false,
+        peerTubeLink: true
+      }
+    }
   }
-
-  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 () {
+  videojs('video-container', videojsOptions, 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
+      title: videoInfo.name
     })
-
-    document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
-      loadVideoTorrent(magnetUri, player)
-    }, false)
   })
 })