From 202e72231750705b1a071d57206424eef1fc5be1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Sun, 23 Jul 2017 14:49:52 +0200 Subject: Process embed in webpack too --- client/src/standalone/videos/embed.html | 135 +------------------------------- client/src/standalone/videos/embed.scss | 41 ++++++++++ client/src/standalone/videos/embed.ts | 103 ++++++++++++++++++++++++ 3 files changed, 146 insertions(+), 133 deletions(-) create mode 100644 client/src/standalone/videos/embed.scss create mode 100644 client/src/standalone/videos/embed.ts (limited to 'client/src/standalone') diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html index f72080937..627acb5af 100644 --- a/client/src/standalone/videos/embed.html +++ b/client/src/standalone/videos/embed.html @@ -7,143 +7,12 @@ - - - - - - - - - -

- - - 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) + }) +}) -- cgit v1.2.3