aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/standalone')
-rw-r--r--client/src/standalone/videos/embed.scss8
-rw-r--r--client/src/standalone/videos/embed.ts91
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 {
29 line-height: 2.20; 29 line-height: 2.20;
30 transition: all .4s; 30 transition: all .4s;
31 position: relative; 31 position: relative;
32 right: 6px; 32 right: 8px;
33}
34
35.vjs-resolution-button-label {
36 left: -7px;
33} 37}
34 38
35.vjs-peertube-link:hover { 39.vjs-peertube-link:hover {
@@ -38,5 +42,5 @@ html, body {
38 42
39// Fix volume panel because we added a new component (PeerTube link) 43// Fix volume panel because we added a new component (PeerTube link)
40.vjs-volume-panel { 44.vjs-volume-panel {
41 margin-right: 90px !important; 45 margin-right: 130px !important;
42} 46}
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 @@
1import './embed.scss' 1import './embed.scss'
2 2
3import videojs from 'video.js' 3import videojs from 'video.js'
4import '../../assets/player/peertube-videojs-plugin'
4import 'videojs-dock/dist/videojs-dock.es.js' 5import 'videojs-dock/dist/videojs-dock.es.js'
5import * as WebTorrent from 'webtorrent'
6import { Video } from '../../../../shared' 6import { Video } from '../../../../shared'
7 7
8// videojs typings don't have some method we need 8function loadVideoInfo (videoId: string, callback: (err: Error, res?: Video) => void) {
9const videojsUntyped = videojs as any
10
11function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) {
12 const xhttp = new XMLHttpRequest() 9 const xhttp = new XMLHttpRequest()
13 xhttp.onreadystatechange = function () { 10 xhttp.onreadystatechange = function () {
14 if (this.readyState === 4 && this.status === 200) { 11 if (this.readyState === 4 && this.status === 200) {
@@ -24,84 +21,36 @@ function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) =>
24 xhttp.send() 21 xhttp.send()
25} 22}
26 23
27function 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
51const urlParts = window.location.href.split('/') 24const urlParts = window.location.href.split('/')
52const videoId = urlParts[urlParts.length - 1] 25const videoId = urlParts[urlParts.length - 1]
53 26
54loadVideoInfos(videoId, (err, videoInfos) => { 27loadVideoInfo(videoId, (err, videoInfo) => {
55 if (err) { 28 if (err) {
56 console.error(err) 29 console.error(err)
57 return 30 return
58 } 31 }
59 32
60 let magnetUri = '' 33 const videoElement = document.getElementById('video-container') as HTMLVideoElement
61 if (videoInfos.files !== undefined && videoInfos.files.length !== 0) { 34 const previewUrl = window.location.origin + videoInfo.previewPath
62 magnetUri = videoInfos.files[0].magnetUri 35 videoElement.poster = previewUrl
36
37 const videojsOptions = {
38 controls: true,
39 autoplay: false,
40 plugins: {
41 peertube: {
42 videoFiles: videoInfo.files,
43 playerElement: videoElement,
44 autoplay: false,
45 peerTubeLink: true
46 }
47 }
63 } 48 }
64 49 videojs('video-container', videojsOptions, function () {
65 const videoContainer = document.getElementById('video-container') as HTMLVideoElement
66 const previewUrl = window.location.origin + videoInfos.previewPath
67 videoContainer.poster = previewUrl
68
69 videojs('video-container', { controls: true, autoplay: false }, function () {
70 const player = this 50 const player = this
71 51
72 const Button = videojsUntyped.getComponent('Button')
73 const peertubeLinkButton = videojsUntyped.extend(Button, {
74 constructor: function () {
75 Button.apply(this, arguments)
76 },
77
78 createEl: function () {
79 const link = document.createElement('a')
80 link.href = window.location.href.replace('embed', 'watch')
81 link.innerHTML = 'PeerTube'
82 link.title = 'Go to the video page'
83 link.className = 'vjs-peertube-link'
84 link.target = '_blank'
85
86 return link
87 },
88
89 handleClick: function () {
90 player.pause()
91 }
92 })
93 videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
94
95 const controlBar = player.getChild('controlBar')
96 const addedLink = controlBar.addChild('PeerTubeLinkButton', {})
97 controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
98
99 player.dock({ 52 player.dock({
100 title: videoInfos.name 53 title: videoInfo.name
101 }) 54 })
102
103 document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
104 loadVideoTorrent(magnetUri, player)
105 }, false)
106 }) 55 })
107}) 56})