Add tooltips

renderer/index.css

@@ -456,7 +456,8 @@ input {
   background-color: #F44336;
 }
 
-.torrent.timeout .play {
+.torrent.timeout .play,
+.torrent.unplayable .play {
   padding-top: 8px;
 }
 

renderer/index.js

@@ -19,6 +19,7 @@ var patch = require('virtual-dom/patch')
 
 var App = require('./views/app')
 var Cast = require('./lib/cast')
+var errors = require('./lib/errors')
 var config = require('../config')
 var TorrentPlayer = require('./lib/torrent-player')
 var torrentPoster = require('./lib/torrent-poster')
@@ -601,7 +602,7 @@ function startServerFromReadyTorrent (torrent, index, cb) {
   if (!index) {
     // filter out file formats that the <video> tag definitely can't play
     var files = torrent.files.filter(TorrentPlayer.isPlayable)
-    if (files.length === 0) return cb(new Error('Can\'t play any files in torrent'))
+    if (files.length === 0) return cb(new errors.UnplayableError())
     // use largest file
     var largestFile = files.reduce(function (a, b) {
       return a.length > b.length ? a : b
@@ -648,13 +649,18 @@ function openPlayer (torrentSummary, index, cb) {
   }, 10000) /* give it a few seconds */
 
   startServer(torrentSummary, index, function (err) {
-    if (err) return onError(err)
+    clearTimeout(timeout)
+    if (err) {
+      torrentSummary.playStatus = 'unplayable'
+      playInterfaceSound(config.SOUND_ERROR)
+      update()
+      return onError(err)
+    }
 
     // if we timed out (user clicked play a long time ago), don't autoplay
-    clearTimeout(timeout)
     var timedOut = torrentSummary.playStatus === 'timeout'
     delete torrentSummary.playStatus
-    if (timedOut) return
+    if (timedOut) return update()
 
     // otherwise, play the video
     state.window.title = torrentSummary.name

renderer/lib/errors.js

@@ -0,0 +1,8 @@
+module.exports = {
+  UnplayableError
+}
+
+function UnplayableError () {
+  this.message = 'Can\'t play any files in torrent'
+}
+UnplayableError.prototype = Error

renderer/views/header.js

@@ -11,13 +11,13 @@ function Header (state, dispatch) {
       <div class='nav left'>
         <i.icon.back
           class=${state.location.hasBack() ? '' : 'disabled'}
-          title='back'
+          title='Back'
           onclick=${() => dispatch('back')}>
           chevron_left
         </i>
         <i.icon.forward
           class=${state.location.hasForward() ? '' : 'disabled'}
-          title='forward'
+          title='Forward'
           onclick=${() => dispatch('forward')}>
           chevron_right
         </i>
@@ -39,7 +39,7 @@ function Header (state, dispatch) {
       return hx`
         <i
           class='icon add'
-          title='add torrent'
+          title='Add torrent'
           onclick=${() => dispatch('showOpenTorrentFile')}>
           add
         </i>

renderer/views/torrent-list.js

@@ -103,19 +103,47 @@ function TorrentList (state, dispatch) {
   // Download button toggles between torrenting (DL/seed) and paused
   // Play button starts streaming the torrent immediately, unpausing if needed
   function renderTorrentButtons (torrentSummary) {
+    var playIcon, playTooltip
+    if (torrentSummary.playStatus === 'unplayable') {
+      playIcon = 'warning'
+      playTooltip = 'Sorry, WebTorrent can\'t play any of the files in this torrent. ' +
+        'View details and click on individual files to open them in another program.'
+    } else if (torrentSummary.playStatus === 'timeout') {
+      playIcon = 'warning'
+      playTooltip = 'Playback timed out. No seeds? No internet? Click to try again.'
+    } else {
+      playIcon = 'play_arrow'
+      playTooltip = 'Start streaming'
+    }
+
+    var downloadIcon, downloadTooltip
+    if (torrentSummary.status === 'seeding') {
+      downloadIcon = 'file_upload'
+      downloadTooltip = 'Seeding. Click to stop.'
+    } else if (torrentSummary.status === 'downloading') {
+      downloadIcon = 'file_download'
+      downloadTooltip = 'Torrenting. Click to stop.'
+    } else {
+      downloadIcon = 'file_download'
+      downloadTooltip = 'Click to start torrenting.'
+    }
+
     return hx`
       <div class='buttons'>
         <i.btn.icon.play
+          title='${playTooltip}'
           onclick=${(e) => handleButton('play', e)}>
-          ${torrentSummary.playStatus === 'timeout' ? 'warning' : 'play_arrow'}
+          ${playIcon}
         </i>
         <i.btn.icon.download
           class='${torrentSummary.status}'
+          title='${downloadTooltip}'
           onclick=${(e) => handleButton('toggleTorrent', e)}>
-          ${torrentSummary.status === 'seeding' ? 'file_upload' : 'file_download'}
+          ${downloadIcon}
         </i>
         <i
           class='icon delete'
+          title='Remove torrent'
           onclick=${(e) => handleButton('deleteTorrent', e)}>
           close
         </i>