aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client/config/webpack.common.js23
-rw-r--r--client/package.json3
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts3
-rw-r--r--client/src/standalone/videos/embed.html99
-rw-r--r--server.js3
5 files changed, 130 insertions, 1 deletions
diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 5ef5621e6..4ab813d63 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -119,7 +119,7 @@ module.exports = function (options) {
119 { 119 {
120 test: /\.html$/, 120 test: /\.html$/,
121 loader: 'raw-loader', 121 loader: 'raw-loader',
122 exclude: [ helpers.root('src/index.html') ] 122 exclude: [ helpers.root('src/index.html'), helpers.root('src/standalone/videos/embed.html') ]
123 } 123 }
124 124
125 ] 125 ]
@@ -187,6 +187,26 @@ module.exports = function (options) {
187 { 187 {
188 from: 'node_modules/webtorrent/webtorrent.min.js', 188 from: 'node_modules/webtorrent/webtorrent.min.js',
189 to: 'assets/webtorrent' 189 to: 'assets/webtorrent'
190 },
191 {
192 from: 'node_modules/video.js/dist/video.min.js',
193 to: 'assets/video-js'
194 },
195 {
196 from: 'node_modules/video.js/dist/video-js.min.css',
197 to: 'assets/video-js'
198 },
199 {
200 from: 'node_modules/videojs-dock/dist/videojs-dock.min.js',
201 to: 'assets/video-js'
202 },
203 {
204 from: 'node_modules/videojs-dock/dist/videojs-dock.css',
205 to: 'assets/video-js'
206 },
207 {
208 from: 'src/standalone',
209 to: 'standalone'
190 } 210 }
191 ]), 211 ]),
192 212
@@ -213,6 +233,7 @@ module.exports = function (options) {
213 * See: https://github.com/numical/script-ext-html-webpack-plugin 233 * See: https://github.com/numical/script-ext-html-webpack-plugin
214 */ 234 */
215 new ScriptExtHtmlWebpackPlugin({ 235 new ScriptExtHtmlWebpackPlugin({
236 sync: [ 'webtorrent.min.js' ],
216 defaultAttribute: 'defer' 237 defaultAttribute: 'defer'
217 }), 238 }),
218 239
diff --git a/client/package.json b/client/package.json
index 4049967ab..34f79ee28 100644
--- a/client/package.json
+++ b/client/package.json
@@ -70,6 +70,9 @@
70 "tslint-loader": "^2.1.4", 70 "tslint-loader": "^2.1.4",
71 "typescript": "^2.0.0", 71 "typescript": "^2.0.0",
72 "url-loader": "^0.5.7", 72 "url-loader": "^0.5.7",
73 "video.js": "^5.11.9",
74 "videojs": "^1.0.0",
75 "videojs-dock": "^2.0.2",
73 "webpack": "2.1.0-beta.25", 76 "webpack": "2.1.0-beta.25",
74 "webpack-md5-hash": "0.0.5", 77 "webpack-md5-hash": "0.0.5",
75 "webpack-merge": "^0.15.0", 78 "webpack-merge": "^0.15.0",
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index e705fa555..1d5fd45ee 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -62,6 +62,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
62 } 62 }
63 63
64 loadVideo() { 64 loadVideo() {
65
66 console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
67
65 // Reset the error 68 // Reset the error
66 this.error = false; 69 this.error = false;
67 // We are loading the video 70 // We are loading the video
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
new file mode 100644
index 000000000..5b0541df3
--- /dev/null
+++ b/client/src/standalone/videos/embed.html
@@ -0,0 +1,99 @@
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>PeerTube</title>
5
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8
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 </style>
38 </head>
39
40 <body>
41
42 <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
43 </video>
44
45
46 <script>
47 function loadVideoInfos (videoId, callback) {
48 var xhttp = new XMLHttpRequest()
49 xhttp.onreadystatechange = function () {
50 if (this.readyState === 4 && this.status === 200) {
51 var json = JSON.parse(this.responseText)
52 return callback(json)
53 }
54 }
55
56 var url = window.location.origin + '/api/v1/videos/' + videoId
57 xhttp.open('GET', url, true)
58 xhttp.send()
59 }
60
61 function loadVideoTorrent (magnetUri) {
62 console.log('Loading video ' + videoId)
63 var client = new window.WebTorrent()
64
65 console.log('Adding magnet ' + magnetUri)
66 client.add(magnetUri, function (torrent) {
67 var file = torrent.files[0]
68
69 file.renderTo('video', { autoplay: true })
70 })
71 }
72
73 var urlParts = window.location.href.split('/')
74 var videoId = urlParts[urlParts.length - 1]
75 var videoContainer = document.getElementById('video-container')
76
77 loadVideoInfos(videoId, function (videoInfos) {
78 var magnetUri = videoInfos.magnetUri
79 var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
80 videoContainer.poster = thumbnailUrl
81
82 videojs('video-container', { controls: true, autoplay: false }, function () {
83 var player = this
84
85 player.dock({
86 title: videoInfos.name
87 })
88
89 document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
90 loadVideoTorrent(magnetUri)
91
92 player.play()
93 }, false)
94 })
95 })
96
97 </script>
98 </body>
99</html>
diff --git a/server.js b/server.js
index a7d7e781c..65cf69f7d 100644
--- a/server.js
+++ b/server.js
@@ -89,6 +89,9 @@ const thumbnailsPhysicalPath = constants.CONFIG.STORAGE.THUMBNAILS_DIR
89app.use(constants.STATIC_PATHS.THUMBNAILS, express.static(thumbnailsPhysicalPath, { maxAge: constants.STATIC_MAX_AGE })) 89app.use(constants.STATIC_PATHS.THUMBNAILS, express.static(thumbnailsPhysicalPath, { maxAge: constants.STATIC_MAX_AGE }))
90 90
91// Client application 91// Client application
92app.use('/videos/embed', function (req, res, next) {
93 res.sendFile(path.join(__dirname, 'client/dist/standalone/videos/embed.html'))
94})
92app.use('/*', function (req, res, next) { 95app.use('/*', function (req, res, next) {
93 res.sendFile(path.join(__dirname, 'client/dist/index.html')) 96 res.sendFile(path.join(__dirname, 'client/dist/index.html'))
94}) 97})
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-18 17:37:21 +0000