chromecast subtitles support. fixes #10

index.js

@@ -26,8 +26,17 @@ var argv = minimist(JSON.parse(window.location.toString().split('#')[1]), {
   boolean: ['follow']
 })
 
+var onsubs = function (data) {
+  media.subtitles(data)
+}
+
 ipc.on('add-to-playlist', function (links) {
   links.forEach(function (link) {
+    if (/\.(vtt|srt)$/i.test(link)) {
+      fs.createReadStream(link).pipe(vtt()).pipe(concat(onsubs))
+      return
+    }
+
     list.add(link)
   })
 })
@@ -36,10 +45,6 @@ var media = player($('#player'))
 var list = playlist()
 
 drop($('body'), function (files) {
-  var onsubs = function (data) {
-    media.subtitles(data)
-  }
-
   for (var i = 0; i < files.length; i++) {
     if (/\.(vtt|srt)$/i.test(files[i].path)) {
       fs.createReadStream(files[i].path).pipe(vtt()).pipe(concat(onsubs))
@@ -83,6 +88,15 @@ $(window).on('contextmenu', function (e) {
     }
   }))
 
+  if (media.subtitles()) {
+    menu.append(new MenuItem({
+      label: 'Remove subtitles',
+      click: function () {
+        media.subtitles(null)
+      }
+    }))
+  }
+
   menu.popup(remote.getCurrentWindow())
 })
 
@@ -239,23 +253,17 @@ var updatePopup = function () {
   }
 }
 
-var toggleClass = function (el, cl) {
-  el = $(el)
-  if (el.hasClass(cl)) el.removeClass(cl)
-  else el.addClass(cl)
-}
-
 $('#controls-broadcast').on('click', function () {
   $('#popup').className = 'broadcast'
   $('#controls-playlist').className = ''
-  toggleClass('#controls-broadcast', 'selected')
+  $('#controls-broadcast').toggleClass('selected')
   chromecasts.update()
   updatePopup()
 })
 
 $('#controls-playlist').on('click', function (e) {
   $('#popup').className = 'playlist'
-  toggleClass('#controls-playlist', 'selected')
+  $('#controls-playlist').toggleClass('selected')
   $('#controls-broadcast').className = ''
   updatePopup()
 })
@@ -333,7 +341,20 @@ media.on('pause', function () {
 })
 
 var server = http.createServer(function (req, res) {
-  console.log('request for ' + req.url + ' ' + req.headers.range)
+  if (req.headers.origin) res.setHeader('Access-Control-Allow-Origin', req.headers.origin)
+
+  if (req.url === '/subtitles') {
+    var buf = media.subtitles()
+
+    if (buf) {
+      res.setHeader('Content-Type', 'text/vtt; charset=utf-8')
+      res.setHeader('Content-Length', buf.length)
+      res.end(buf)
+    } else {
+      res.statusCode = 404
+      res.end()
+    }
+  }
 
   if (req.url === '/follow') { // TODO: do not hardcode /0
     if (!list.selected) return res.end()
@@ -387,7 +408,9 @@ var server = http.createServer(function (req, res) {
   pump(file.createReadStream(range), res)
 })
 
-server.listen(0, function () { // 10000 in dev
+server.listen(0, function () {
+  console.log('Playback server running on port ' + server.address().port)
+
   argv._.forEach(function (file) {
     if (file) list.add(file)
   })

package.json

@@ -5,9 +5,9 @@
   "main": "app.js",
   "dependencies": {
     "JSONStream": "^0.10.0",
-    "chromecasts": "^1.0.0",
+    "chromecasts": "^1.2.1",
     "concat-stream": "^1.4.7",
-    "dombo": "^2.0.2",
+    "dombo": "^2.0.3",
     "drag-and-drop-files": "0.0.1",
     "end-of-stream": "^1.1.0",
     "filereader-stream": "^0.2.0",

player.js

@@ -15,6 +15,7 @@ module.exports = function ($video) {
   var chromecast = null
   var chromecastTime = 0
   var chromecastOffset = 0
+  var chromecastSubtitles = 1
   var interval = null
 
   var onerror = function () {
@@ -26,6 +27,7 @@ module.exports = function ($video) {
     if (err) return onerror(err)
     if (chromecastTime) chromecastOffset = 0
     chromecastTime = status.currentTime
+    chromecastSubtitles = 1
     that.duration = status.media.duration
     that.emit('metadata')
 
@@ -87,30 +89,39 @@ module.exports = function ($video) {
   that.time = function (time) {
     atEnd = false
     if (chromecast) {
-      if (time) {
+      if (arguments.length) {
         chromecastOffset = 0
         chromecast.seek(time)
       }
       return chromecastOffset || chromecastTime
     }
-    if (time) $video.currentTime = time
+    if (arguments.length) $video.currentTime = time
     return $video.currentTime
   }
 
   that.playing = false
 
   that.play = function (url, time) {
+    if (!url && !lastUrl) return
+    var changed = url && lastUrl !== url
+    if (changed) subs = null
     if (chromecast) {
       $video.innerHTML = '' // clear
       $video.pause()
       $video.load()
-      if (url) chromecast.play(url.replace('127.0.0.1', network()), {title: 'Playback', seek: time || 0}, onmetadata)
-      else chromecast.resume()
       lastUrl = url
       atEnd = false
+      if (url) {
+        var mediaUrl = url.replace('127.0.0.1', network())
+        var subsUrl = mediaUrl.replace(/(:\/\/.+)\/.*/, '$1/subtitles')
+        var subsList = []
+        for (var i = 0; i < 100; i++) subsList.push(subsUrl)
+        chromecast.play(mediaUrl, {title: 'Playback', seek: time || 0, subtitles: subsList, autoSubtitles: !!subs, }, onmetadata)
+      } else {
+        chromecast.resume()
+      }
     } else {
       if (atEnd && url === lastUrl) $video.time(0)
-      var changed = url && lastUrl !== url
       lastUrl = url
       atEnd = false
       $video.innerHTML = '' // clear
@@ -133,15 +144,27 @@ module.exports = function ($video) {
     that.emit('pause')
   }
 
+  var subs = null
   that.subtitles = function (buf) {
+    if (!arguments.length) return subs
+    subs = buf
+
+    if (chromecast) {
+      if (!buf) chromecast.subtitles(false)
+      else chromecast.subtitles(++chromecastSubtitles)
+      return
+    }
+
     if ($video.querySelector('track')) $video.removeChild($video.querySelector('track'))
+    if (!buf) return null
     var $track = document.createElement('track')
     $track.setAttribute('default', 'default')
     $track.setAttribute('src', 'data:text/vtt;base64,'+buf.toString('base64'))
     $track.setAttribute('label', 'Subtitles')
     $track.setAttribute('kind', 'subtitles')
     $video.appendChild($track)
     that.emit('subtitles', buf)
+    return buf
   }
 
   return that