aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos
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
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')
-rw-r--r--client/src/standalone/videos/embed.html135
-rw-r--r--client/src/standalone/videos/embed.scss41
-rw-r--r--client/src/standalone/videos/embed.ts103
3 files changed, 146 insertions, 133 deletions
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 @@
7 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 8
9 <link rel="icon" type="image/png" href="/client/assets/favicon.png" /> 9 <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
10
11 <link rel="stylesheet" href="/client/assets/video-js/video-js.min.css">
12 <link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css">
13
14 <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
15 <script src="/client/assets/video-js/video.min.js"></script>
16 <script src="/client/assets/video-js/videojs-dock.min.js"></script>
17
18 <style>
19 video {
20 width: 99%;
21 }
22
23 /* fill the entire space */
24 html, body {
25 height: 100%;
26 margin: 0;
27 }
28
29 .video-js {
30 width: 100%;
31 height: 100%;
32 }
33
34 .vjs-poster {
35 background-size: 100% auto;
36 }
37
38 .vjs-peertube-link {
39 color: white;
40 text-decoration: none;
41 font-size: 1.3em;
42 line-height: 2.20;
43 transition: all .4s;
44 }
45
46 .vjs-peertube-link:hover {
47 text-shadow: 0 0 1em #fff;
48 }
49
50 </style>
51 </head> 10 </head>
52 11
53 <body> 12 <body>
54 13
55 <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"> 14 <video id="video-container" class="video-js vjs-sublime-skin vjs-big-play-centered">
56 </video> 15 </video>
57
58
59 <script>
60 function loadVideoInfos (videoId, callback) {
61 var xhttp = new XMLHttpRequest()
62 xhttp.onreadystatechange = function () {
63 if (this.readyState === 4 && this.status === 200) {
64 var json = JSON.parse(this.responseText)
65 return callback(json)
66 }
67 }
68
69 var url = window.location.origin + '/api/v1/videos/' + videoId
70 xhttp.open('GET', url, true)
71 xhttp.send()
72 }
73
74 function loadVideoTorrent (magnetUri, player) {
75 console.log('Loading video ' + videoId)
76 var client = new window.WebTorrent()
77
78 console.log('Adding magnet ' + magnetUri)
79 client.add(magnetUri, function (torrent) {
80 var file = torrent.files[0]
81
82 file.renderTo('video', function (err) {
83 if (err) {
84 console.error(err)
85 return
86 }
87
88 // Hack to "simulate" src link in video.js >= 6
89 // If no, we can't play the video after pausing it
90 // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
91 player.src = function () { return true }
92
93 player.play()
94 })
95 })
96 }
97
98 var urlParts = window.location.href.split('/')
99 var videoId = urlParts[urlParts.length - 1]
100
101 loadVideoInfos(videoId, function (videoInfos) {
102 var magnetUri = videoInfos.magnetUri
103 var videoContainer = document.getElementById('video-container')
104 var previewUrl = window.location.origin + videoInfos.previewPath
105 videoContainer.poster = previewUrl
106
107 videojs('video-container', { controls: true, autoplay: false }, function () {
108 var player = this
109
110 var Button = videojs.getComponent('Button')
111 var peertubeLinkButton = videojs.extend(Button, {
112 constructor: function () {
113 Button.apply(this, arguments)
114 },
115
116 createEl: function () {
117 var link = document.createElement('a')
118 link.href = window.location.href.replace('embed', 'watch')
119 link.innerHTML = 'PeerTube'
120 link.title = 'Go to the video page'
121 link.className = 'vjs-peertube-link'
122 link.target = '_blank'
123
124 return link
125 },
126
127 handleClick: function () {
128 player.pause()
129 }
130 })
131 videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
132
133 var controlBar = player.getChild('controlBar')
134 var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
135 controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
136
137 player.dock({
138 title: videoInfos.name
139 })
140
141 document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
142 loadVideoTorrent(magnetUri, player)
143 }, false)
144 })
145 })
146 16
147 </script>
148 </body> 17 </body>
149</html 18</html
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
new file mode 100644
index 000000000..a4c44a59b
--- /dev/null
+++ b/client/src/standalone/videos/embed.scss
@@ -0,0 +1,41 @@
1@import '~video.js/dist/video-js.css';
2@import '~videojs-dock/dist/videojs-dock.css';
3@import '../../sass/video-js-custom.scss';
4
5video {
6 width: 99%;
7}
8
9/* fill the entire space */
10html, body {
11 height: 100%;
12 margin: 0;
13}
14
15.video-js {
16 width: 100%;
17 height: 100%;
18}
19
20.vjs-poster {
21 background-size: 100% auto;
22}
23
24.vjs-peertube-link {
25 color: white;
26 text-decoration: none;
27 font-size: 1.3em;
28 line-height: 2.20;
29 transition: all .4s;
30 position: relative;
31 right: 6px;
32}
33
34.vjs-peertube-link:hover {
35 text-shadow: 0 0 1em #fff;
36}
37
38// Fix volume panel because we added a new component (PeerTube link)
39.vjs-volume-panel {
40 margin-right: 90px !important;
41}
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})
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 09:16:43 +0000