aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos/embed.ts
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-07-23 14:49:52 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-07-23 15:10:57 +0200
commit202e72231750705b1a071d57206424eef1fc5be1 (patch)
treeaf19fc202d51764132d59cd0e99874c7de356f50 /client/src/standalone/videos/embed.ts
parent0c31c33dcb0baaa8d3aeedb63336dfe2ae6e5585 (diff)
downloadPeerTube-202e72231750705b1a071d57206424eef1fc5be1.tar.gz
PeerTube-202e72231750705b1a071d57206424eef1fc5be1.tar.zst
PeerTube-202e72231750705b1a071d57206424eef1fc5be1.zip
Process embed in webpack too
Diffstat (limited to 'client/src/standalone/videos/embed.ts')
-rw-r--r--client/src/standalone/videos/embed.ts103
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 @@
1import './embed.scss'
2
3import videojs from 'video.js'
4import 'videojs-dock/dist/videojs-dock.es.js'
5import * as WebTorrent from 'webtorrent'
6import { Video } from '../../../../shared'
7
8// videojs typings don't have some method we need
9const videojsUntyped = videojs as any
10
11function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) {
12 const xhttp = new XMLHttpRequest()
13 xhttp.onreadystatechange = function () {
14 if (this.readyState === 4 && this.status === 200) {
15 const json = JSON.parse(this.responseText)
16 return callback(null, json)
17 }
18 }
19
20 xhttp.onerror = err => callback(err.error)
21
22 const url = window.location.origin + '/api/v1/videos/' + videoId
23 xhttp.open('GET', url, true)
24 xhttp.send()
25}
26
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('/')
52const videoId = urlParts[urlParts.length - 1]
53
54loadVideoInfos(videoId, (err, videoInfos) => {
55 if (err) {
56 console.error(err)
57 return
58 }
59
60 const magnetUri = videoInfos.magnetUri
61 const videoContainer = document.getElementById('video-container') as HTMLVideoElement
62 const previewUrl = window.location.origin + videoInfos.previewPath
63 videoContainer.poster = previewUrl
64
65 videojs('video-container', { controls: true, autoplay: false }, function () {
66 const player = this
67
68 const Button = videojsUntyped.getComponent('Button')
69 const peertubeLinkButton = videojsUntyped.extend(Button, {
70 constructor: function () {
71 Button.apply(this, arguments)
72 },
73
74 createEl: function () {
75 const link = document.createElement('a')
76 link.href = window.location.href.replace('embed', 'watch')
77 link.innerHTML = 'PeerTube'
78 link.title = 'Go to the video page'
79 link.className = 'vjs-peertube-link'
80 link.target = '_blank'
81
82 return link
83 },
84
85 handleClick: function () {
86 player.pause()
87 }
88 })
89 videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
90
91 const controlBar = player.getChild('controlBar')
92 const addedLink = controlBar.addChild('PeerTubeLinkButton', {})
93 controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
94
95 player.dock({
96 title: videoInfos.name
97 })
98
99 document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
100 loadVideoTorrent(magnetUri, player)
101 }, false)
102 })
103})