Play unsupported files in VLC

renderer/views/app.js

@@ -12,7 +12,8 @@ var Views = {
 }
 var Modals = {
   'open-torrent-address-modal': require('./open-torrent-address-modal'),
-  'update-available-modal': require('./update-available-modal')
+  'update-available-modal': require('./update-available-modal'),
+  'unsupported-media-modal': require('./unsupported-media-modal')
 }
 
 function App (state) {

renderer/views/player.js

@@ -89,7 +89,8 @@ function renderMedia (state) {
       onstalling=${dispatcher('mediaStalled')}
       onerror=${dispatcher('mediaError')}
       ontimeupdate=${dispatcher('mediaTimeUpdate')}
-      autoplay>
+      onencrypted=${dispatcher('mediaEncrypted')}
+      oncanplay=${onCanPlay}>
       ${trackTags}
     </div>
   `
@@ -120,6 +121,16 @@ function renderMedia (state) {
   function onEnded (e) {
     state.playing.isPaused = true
   }
+
+  function onCanPlay (e) {
+    var video = e.target
+    if (video.webkitVideoDecodedByteCount > 0 &&
+      video.webkitAudioDecodedByteCount === 0) {
+      dispatch('mediaError', 'Audio codec unsupported')
+    } else {
+      video.play()
+    }
+  }
 }
 
 function renderOverlay (state) {
@@ -207,20 +218,33 @@ function renderLoadingSpinner (state) {
 }
 
 function renderCastScreen (state) {
-  var castIcon, castType
+  var castIcon, castType, isCast
   if (state.playing.location.startsWith('chromecast')) {
     castIcon = 'cast_connected'
     castType = 'Chromecast'
+    isCast = true
   } else if (state.playing.location.startsWith('airplay')) {
     castIcon = 'airplay'
     castType = 'AirPlay'
+    isCast = true
   } else if (state.playing.location.startsWith('dlna')) {
     castIcon = 'tv'
     castType = 'DLNA'
+    isCast = true
+  } else if (state.playing.location === 'vlc') {
+    castIcon = 'tv'
+    castType = 'VLC'
+    isCast = false
+  } else if (state.playing.location === 'error') {
+    castIcon = 'error_outline'
+    castType = 'Error'
+    isCast = false
   }
 
   var isStarting = state.playing.location.endsWith('-pending')
-  var castStatus = isStarting ? 'Connecting...' : 'Connected'
+  var castStatus
+  if (isCast) castStatus = isStarting ? 'Connecting...' : 'Connected'
+  else castStatus = ''
 
   // Show a nice title image, if possible
   var style = {
@@ -240,15 +264,26 @@ function renderCastScreen (state) {
 
 function renderSubtitlesOptions (state) {
   var subtitles = state.playing.subtitles
-  if (subtitles.tracks.length && subtitles.show) {
-    return hx`<ul.subtitles-list>
-      ${subtitles.tracks.map(function (w, i) {
-        return hx`<li onclick=${dispatcher('selectSubtitle', w.label)}><i.icon>${w.selected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>${w.label}</li>`
-      })}
-        <li onclick=${dispatcher('selectSubtitle', '')}><i.icon>${!subtitles.enabled ? 'radio_button_checked' : 'radio_button_unchecked'}</i>None</li>
-      </ul>
+  if (!subtitles.tracks.length || !subtitles.show) return
+
+  var items = subtitles.tracks.map(function (track) {
+    return hx`
+      <li onclick=${dispatcher('selectSubtitle', track.label)}>
+        <i.icon>${track.selected ? 'radio_button_checked' : 'radio_button_unchecked'}</i>
+        ${track.label}
+      </li>
     `
-  }
+  })
+
+  return hx`
+    <ul.subtitles-list>
+      ${items}
+      <li onclick=${dispatcher('selectSubtitle', '')}>
+        <i.icon>${!subtitles.enabled ? 'radio_button_checked' : 'radio_button_unchecked'}</i>
+        None
+      </li>
+    </ul>
+  `
 }
 
 function renderPlayerControls (state) {

renderer/views/unsupported-media-modal.js

@@ -0,0 +1,42 @@
+module.exports = UnsupportedMediaModal
+
+var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
+
+var electron = require('electron')
+
+var {dispatch, dispatcher} = require('../lib/dispatcher')
+
+function UnsupportedMediaModal (state) {
+  var err = state.modal.error
+  var message = (err && err.getMessage)
+    ? err.getMessage()
+    : err
+  var actionButton = state.modal.vlcInstalled
+    ? hx`<button class="button-raised" onclick=${onPlay}>Play in VLC</button>`
+    : hx`<button class="button-raised" onclick=${onInstall}>Install VLC</button>`
+  var vlcMessage = state.modal.vlcNotFound
+    ? 'Couldn\'t run VLC. Please make sure it\'s installed.'
+    : ''
+  return hx`
+    <div>
+      <p><strong>Sorry, we can't play that file.</strong></p>
+      <p>${message}</p>
+      <p class='float-right'>
+        <button class="button-flat" onclick=${dispatcher('backToList')}>Cancel</button>
+        ${actionButton}
+      </p>
+      <p class='error-text'>${vlcMessage}</p>
+    </div>
+  `
+
+  function onInstall () {
+    electron.shell.openExternal('http://www.videolan.org/vlc/')
+    state.modal.vlcInstalled = true // Assume they'll install it successfully
+  }
+
+  function onPlay () {
+    dispatch('vlcPlay')
+  }
+}