projects / oweals / peertube.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 81ca2cd)
Prepare embed page
authorChocobozzz <florian.bigard@gmail.com>
Mon, 7 Nov 2016 21:35:37 +0000 (22:35 +0100)
committerChocobozzz <florian.bigard@gmail.com>
Mon, 7 Nov 2016 21:35:37 +0000 (22:35 +0100)
client/config/webpack.common.js patch | blob | history
client/package.json patch | blob | history
client/src/app/videos/video-watch/video-watch.component.ts patch | blob | history
client/src/standalone/videos/embed.html [new file with mode: 0644] patch | blob
server.js patch | blob | history

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 5ef5621e64c18da962ba8e4f7152ea8b0416791a..4ab813d637e73823902b9e822ab73392c7ecb86b 100644 (file)
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -119,7 +119,7 @@ module.exports = function (options) {
         {
           test: /\.html$/,
           loader: 'raw-loader',
-          exclude: [ helpers.root('src/index.html') ]
+          exclude: [ helpers.root('src/index.html'), helpers.root('src/standalone/videos/embed.html') ]
         }
 
       ]
@@ -187,6 +187,26 @@ module.exports = function (options) {
         {
           from: 'node_modules/webtorrent/webtorrent.min.js',
           to: 'assets/webtorrent'
+        },
+        {
+          from: 'node_modules/video.js/dist/video.min.js',
+          to: 'assets/video-js'
+        },
+        {
+          from: 'node_modules/video.js/dist/video-js.min.css',
+          to: 'assets/video-js'
+        },
+        {
+          from: 'node_modules/videojs-dock/dist/videojs-dock.min.js',
+          to: 'assets/video-js'
+        },
+        {
+          from: 'node_modules/videojs-dock/dist/videojs-dock.css',
+          to: 'assets/video-js'
+        },
+        {
+          from: 'src/standalone',
+          to: 'standalone'
         }
       ]),
 
@@ -213,6 +233,7 @@ module.exports = function (options) {
       * See: https://github.com/numical/script-ext-html-webpack-plugin
       */
       new ScriptExtHtmlWebpackPlugin({
+        sync: [ 'webtorrent.min.js' ],
         defaultAttribute: 'defer'
       }),
 
diff --git a/client/package.json b/client/package.json
index 4049967ab96694a048333a65f5451bf705a18d67..34f79ee286e8fdf536e2b7948c66867fd59d8dab 100644 (file)
--- a/client/package.json
+++ b/client/package.json
@@ -70,6 +70,9 @@
     "tslint-loader": "^2.1.4",
     "typescript": "^2.0.0",
     "url-loader": "^0.5.7",
+    "video.js": "^5.11.9",
+    "videojs": "^1.0.0",
+    "videojs-dock": "^2.0.2",
     "webpack": "2.1.0-beta.25",
     "webpack-md5-hash": "0.0.5",
     "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 e705fa555b65ac19cebc58eb43f38e04c7c33ed7..1d5fd45eebb841525d3576bb85c4a791a6dc8982 100644 (file)
--- 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 {
   }
 
   loadVideo() {
+
+    console.log('<iframe width="560" height="315" src="' + window.location.origin + '/videos/embed/' + this.video.id + '" frameborder="0" allowfullscreen></iframe>');
+
     // Reset the error
     this.error = false;
     // 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 (file)
index 0000000..5b0541d
--- /dev/null
+++ b/client/src/standalone/videos/embed.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>PeerTube</title>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
+
+    <link rel="stylesheet" href="/client/assets/video-js/video-js.min.css">
+    <link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css">
+
+    <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
+    <script src="/client/assets/video-js/video.min.js"></script>
+    <script src="/client/assets/video-js/videojs-dock.min.js"></script>
+
+    <style>
+      video {
+        width: 99%;
+      }
+
+      /* fill the entire space */
+      html, body {
+        height: 100%;
+        margin: 0;
+      }
+
+      .video-js {
+        width: 100%;
+        height: 100%;
+      }
+
+      .vjs-poster {
+        background-size: 100% auto;
+      }
+    </style>
+  </head>
+
+  <body>
+
+  <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
+  </video>
+
+
+  <script>
+  function loadVideoInfos (videoId, callback) {
+    var xhttp = new XMLHttpRequest()
+    xhttp.onreadystatechange = function () {
+      if (this.readyState === 4 && this.status === 200) {
+        var json = JSON.parse(this.responseText)
+        return callback(json)
+      }
+    }
+
+    var url = window.location.origin + '/api/v1/videos/' + videoId
+    xhttp.open('GET', url, true)
+    xhttp.send()
+  }
+
+  function loadVideoTorrent (magnetUri) {
+    console.log('Loading video ' + videoId)
+    var client = new window.WebTorrent()
+
+    console.log('Adding magnet ' + magnetUri)
+    client.add(magnetUri, function (torrent) {
+      var file = torrent.files[0]
+
+      file.renderTo('video', { autoplay: true })
+    })
+  }
+
+  var urlParts = window.location.href.split('/')
+  var videoId = urlParts[urlParts.length - 1]
+  var videoContainer = document.getElementById('video-container')
+
+  loadVideoInfos(videoId, function (videoInfos) {
+    var magnetUri = videoInfos.magnetUri
+    var thumbnailUrl = 'http://' + videoInfos.podUrl + videoInfos.thumbnailPath
+    videoContainer.poster = thumbnailUrl
+
+    videojs('video-container', { controls: true, autoplay: false }, function () {
+      var player = this
+
+      player.dock({
+        title: videoInfos.name
+      })
+
+      document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
+        loadVideoTorrent(magnetUri)
+
+        player.play()
+      }, false)
+    })
+  })
+
+  </script>
+  </body>
+</html>
diff --git a/server.js b/server.js
index a7d7e781cf311709e702d22464066b8f4c29c06b..65cf69f7db034f9a5b71e3f1440258afea031049 100644 (file)
--- a/server.js
+++ b/server.js
@@ -89,6 +89,9 @@ const thumbnailsPhysicalPath = constants.CONFIG.STORAGE.THUMBNAILS_DIR
 app.use(constants.STATIC_PATHS.THUMBNAILS, express.static(thumbnailsPhysicalPath, { maxAge: constants.STATIC_MAX_AGE }))
 
 // Client application
+app.use('/videos/embed', function (req, res, next) {
+  res.sendFile(path.join(__dirname, 'client/dist/standalone/videos/embed.html'))
+})
 app.use('/*', function (req, res, next) {
   res.sendFile(path.join(__dirname, 'client/dist/index.html'))
 })
Unnamed repository; edit this file 'description' to name the repository.