Add preferences page

* For now, the prefs page has just a single option, Downloads Folder
* For now, you can't type in a folder, you must use the chooser
* Further fixes coming om master
* Written by @ChrisMorrisOrg and @grunjol, rebased by @dcposch

renderer/views/app.js

@@ -8,7 +8,8 @@ var Header = require('./header')
 var Views = {
   'home': require('./torrent-list'),
   'player': require('./player'),
-  'create-torrent': require('./create-torrent-page')
+  'create-torrent': require('./create-torrent-page'),
+  'preferences': require('./preferences')
 }
 var Modals = {
   'open-torrent-address-modal': require('./open-torrent-address-modal'),

renderer/views/header.js

@@ -37,7 +37,7 @@ function Header (state) {
   }
 
   function getAddButton () {
-    if (state.location.url() !== 'player') {
+    if (state.location.url() === 'home') {
       return hx`
         <i
           class='icon add'

renderer/views/preferences.js

@@ -0,0 +1,155 @@
+module.exports = Preferences
+
+var fs = require('fs-extra')
+var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
+var {dispatch} = require('../lib/dispatcher')
+
+var remote = require('electron').remote
+var dialog = remote.dialog
+
+var prefState
+
+function Preferences (state) {
+  prefState = state.unsaved.prefs
+  var definitions = getPreferenceDefinitions()
+  var sections = []
+
+  definitions.forEach(function (sectionDefinition) {
+    sections.push(renderSection(sectionDefinition))
+  })
+
+  return hx`
+    <div class='preferences'>
+      ${sections}
+    </div>
+  `
+}
+
+function renderSection (definition) {
+  var controls = []
+
+  definition.controls.forEach(function (controlDefinition) {
+    controls.push(controlDefinition.renderer(controlDefinition))
+  })
+
+  return hx`
+    <section class='section preferences-panel'>
+      <div class='section-container'>
+        <div class='section-heading'><i.icon>${definition.icon}</i>${definition.title}</div>
+          <div class='help text'><i.icon>help_outline</i>${definition.description}</div>
+          <div class='section-body'>
+          ${controls}
+          </div>
+      </div>
+    </section>
+  `
+}
+
+function renderFileSelector (definition) {
+  var value = getStateValue(definition.property)
+  return hx`
+    <div class='control-group'>
+      <div class='controls'>
+        <label class='control-label'>
+          <div class='preference-title'>${definition.label}</div>
+          <div class='preference-description'>${definition.description}</div>
+        </label>
+        <div class='controls'>
+          <input type='text' class='file-picker-text'
+            id=${definition.property} placeholder=${definition.placeholder}
+            readonly='readonly'
+            value=${value}/>
+          <button class='btn' onclick=${filePickerHandler}><i.icon>folder_open</i></button>
+        </div>
+      </div>
+    </div>
+  `
+  function filePickerHandler () {
+    dialog.showOpenDialog(remote.getCurrentWindow(), definition.options, function (filenames) {
+      if (!Array.isArray(filenames)) return
+      if (!definition.validator || definition.validator(filenames[0])) {
+        setStateValue(definition.property, filenames[0])
+      }
+    })
+  }
+}
+
+/*
+function renderCheckbox (definition) {
+  var checked = getStateValue(definition.property)
+  var checkbox = checked ? 'check_box' : 'check_box_outline_blank'
+  return hx`
+    <div class='control-group'>
+      <div class='controls'>
+        <div class='checkbox'>
+          <label class='control-label'>
+            <i.icon onclick=${checkboxHandler}>${checkbox}</i>
+            <div class='preference-title' onclick=${checkboxHandler}>${definition.label}</div>
+          </label>
+          <div class='preference-description'>${definition.description}</div>
+        </div>
+      </div>
+    </div>
+  `
+  function checkboxHandler (e) {
+    setStateValue(definition.property, !getStateValue(definition.property))
+  }
+}
+*/
+
+function getPreferenceDefinitions () {
+  return [
+    {
+      title: 'General',
+      description: 'These are WebTorrent Desktop main preferences. Will put a very long text to check if it overflows correctly.',
+      icon: 'settings',
+      controls: [
+        {
+          label: 'Download Path',
+          description: 'Directory where the files will be stored. Please, check if it has enough space!',
+          property: 'downloadPath',
+          renderer: renderFileSelector,
+          placeholder: 'Your downloads directory ie: $HOME/Downloads',
+          options: {
+            title: 'Select download directory.',
+            properties: [ 'openDirectory' ]
+          },
+          validator: function (value) {
+            return fs.existsSync(value)
+          }
+        }
+      ]
+    }/*,
+    {
+      title: 'Interface',
+      description: 'Here you can change the way the application looks and beahaves.',
+      icon: 'view_compact',
+      controls: [
+        {
+          label: 'Disable Tray',
+          description: 'This option gives you the chance to quit immediately and don\'t send the application to background when you close it.',
+          property: 'interface.disableTray',
+          renderer: renderCheckbox
+        }
+      ]
+    }*/
+  ]
+}
+
+function getStateValue (property) {
+  var path = property.split('.')
+  var key = prefState
+  for (var i = 0; i < path.length - 1; i++) {
+    if (typeof key[path[i]] === 'undefined') {
+      return ''
+    }
+    key = key[path[i]]
+  }
+  return key[path[i]]
+}
+
+function setStateValue (property, value) {
+  dispatch('updatePreferences', property, value)
+}

renderer/views/torrent-list.js

@@ -142,7 +142,8 @@ function TorrentList (state) {
     // of the play button, unless already showing a spinner there:
     var positionElem
     var willShowSpinner = torrentSummary.playStatus === 'requested'
-    var defaultFile = torrentSummary.files[torrentSummary.defaultPlayFileIndex]
+    var defaultFile = torrentSummary.files &&
+      torrentSummary.files[torrentSummary.defaultPlayFileIndex]
     if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
       var fraction = defaultFile.currentTime / defaultFile.duration
       positionElem = renderRadialProgressBar(fraction, 'radial-progress-large')