Add ability to set a start time

[github/Chocobozzz/PeerTube.git] / client / src / standalone / videos / embed.ts

diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 64a0f0798d4a06b5b1c4dce77a5c7ebc30337dc3..a99bc586fd71de6dd4251684d05e31f82822b46d 100644 (file)
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,103 +1,60 @@
 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'
+import * as videojs from 'video.js'
 
-// videojs typings don't have some method we need
-const videojsUntyped = videojs as any
+import { VideoDetails } from '../../../../shared'
+import { getVideojsOptions } from '../../assets/player/peertube-player'
 
-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 getVideoUrl (id: string) {
+  return window.location.origin + '/api/v1/videos/' + id
 }
 
-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()
-    })
-  })
+async function loadVideoInfo (videoId: string): Promise<VideoDetails> {
+  const response = await fetch(getVideoUrl(videoId))
+  return response.json()
 }
 
 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
+loadVideoInfo(videoId)
+  .then(videoInfo => {
+    const videoContainerId = 'video-container'
 
-    const Button = videojsUntyped.getComponent('Button')
-    const peertubeLinkButton = videojsUntyped.extend(Button, {
-      constructor: function () {
-        Button.apply(this, arguments)
-      },
+    const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
+    let autoplay = false
+    let startTime = 0
 
-      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'
+    try {
+      let params = new URL(window.location.toString()).searchParams
+      autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true')
 
-        return link
-      },
+      const startTimeParamString = params.get('start')
+      const startTimeParamNumber = parseInt(startTimeParamString, 10)
+      if (isNaN(startTimeParamNumber) === false) startTime = startTimeParamNumber
+    } catch (err) {
+      console.error('Cannot get params from URL.', err)
+    }
 
-      handleClick: function () {
-        player.pause()
-      }
+    const videojsOptions = getVideojsOptions({
+      autoplay,
+      inactivityTimeout: 1500,
+      videoViewUrl: getVideoUrl(videoId) + '/views',
+      playerElement: videoElement,
+      videoFiles: videoInfo.files,
+      videoDuration: videoInfo.duration,
+      enableHotkeys: true,
+      peertubeLink: true,
+      poster: window.location.origin + videoInfo.previewPath,
+      startTime
     })
-    videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
-
-    const controlBar = player.getChild('controlBar')
-    const addedLink = controlBar.addChild('PeerTubeLinkButton', {})
-    controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
+    videojs(videoContainerId, videojsOptions, function () {
+      const player = this
 
-    player.dock({
-      title: videoInfos.name
+      player.dock({
+        title: videoInfo.name,
+        description: 'Uses P2P, others may know you are watching this video.'
+      })
     })
-
-    document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
-      loadVideoTorrent(magnetUri, player)
-    }, false)
   })
-})
+  .catch(err => console.error(err))