add torrent poster (screenshot) generation

client/capture-video-frame.js

@@ -0,0 +1,23 @@
+module.exports = captureVideoFrame
+
+function captureVideoFrame (video, format) {
+  if (typeof video === 'string') video = document.querySelector(video)
+  if (!video || video.nodeName !== 'VIDEO') {
+    throw new Error('First argument must be a <video> element or selector')
+  }
+  if (format == null) format = 'png'
+  if (format !== 'png' && format !== 'jpg' && format !== 'webp') {
+    throw new Error('Second argument must be one of "png", "jpg", or "webp"')
+  }
+
+  var canvas = document.createElement('canvas')
+  canvas.width = video.videoWidth
+  canvas.height = video.videoHeight
+
+  canvas.getContext('2d').drawImage(video, 0, 0)
+
+  var dataUri = canvas.toDataURL('image/' + format)
+  var data = dataUri.split(',')[1]
+
+  return new Buffer(data, 'base64')
+}

client/index.js

@@ -1,3 +1,5 @@
+/* global URL, Blob */
+
 var createTorrent = require('create-torrent')
 var debug = require('debug')('instant.io')
 var dragDrop = require('drag-drop')
@@ -9,6 +11,7 @@ var thunky = require('thunky')
 var uploadElement = require('upload-element')
 var WebTorrent = require('webtorrent')
 var xhr = require('xhr')
+var torrentPoster = require('./torrent-poster')
 
 var util = require('./util')
 
@@ -166,24 +169,32 @@ function onTorrent (torrent) {
   setInterval(updateSpeed, 5000)
   updateSpeed()
 
-  torrent.files.forEach(function (file) {
-    // append file
-    file.appendTo(util.logElem, function (err, elem) {
-      if (err) return util.error(err)
-    })
-
-    // append download link
-    file.getBlobURL(function (err, url) {
-      if (err) return util.error(err)
-
-      var a = document.createElement('a')
-      a.target = '_blank'
-      a.download = file.name
-      a.href = url
-      a.textContent = 'Download ' + file.name
-      util.log(a)
-    })
+  torrentPoster(torrent, function (err, buf) {
+    if (err) return util.error(err)
+    var img = document.createElement('img')
+    img.src = URL.createObjectURL(new Blob([ buf ], { type: 'image/png' }))
+    document.body.appendChild(img)
   })
+
+  // TODO: play torrent when user clicks button
+  // torrent.files.forEach(function (file) {
+  //   // append file
+  //   file.appendTo(util.logElem, function (err, elem) {
+  //     if (err) return util.error(err)
+  //   })
+
+  //   // append download link
+  //   file.getBlobURL(function (err, url) {
+  //     if (err) return util.error(err)
+
+  //     var a = document.createElement('a')
+  //     a.target = '_blank'
+  //     a.download = file.name
+  //     a.href = url
+  //     a.textContent = 'Download ' + file.name
+  //     util.log(a)
+  //   })
+  // })
 }
 
 // function onBeforeUnload (e) {

client/torrent-poster.js

@@ -0,0 +1,26 @@
+module.exports = torrentScreenshot
+
+var captureVideoFrame = require('./capture-video-frame')
+
+function torrentScreenshot (torrent, cb) {
+  if (torrent.ready) onReady()
+  else torrent.once('ready', onReady)
+
+  function onReady () {
+    // use largest file
+    var file = torrent.files.reduce(function (a, b) {
+      return a.length > b.length ? a : b
+    })
+    var video = document.createElement('video')
+    file.renderTo(video)
+
+    video.currentTime = 5
+    video.addEventListener('seeked', onSeeked)
+
+    function onSeeked (e) {
+      video.removeEventListener('seeked', onSeeked)
+      var buf = captureVideoFrame(video)
+      cb(null, buf)
+    }
+  }
+}