added Playback preferences; added Play in VLC preference.

renderer/main.css

@@ -1078,6 +1078,14 @@ video::-webkit-media-text-track-container {
   vertical-align: text-bottom;
 }
 
+.preferences .checkbox {
+  width: auto;
+}
+
+.checkbox-label {
+  vertical-align: middle;
+}
+
 
 /*
  * MEDIA OVERLAY / AUDIO DETAILS

renderer/main.js

@@ -151,14 +151,8 @@ function updateElectron () {
   }
 }
 
-function toggleOpenInVlc (menuItem) {
-  var flag = menuItem.checked
-  console.log(`toggleOpenInVlc ${flag}`)
-  state.saved.openInVlc = flag
-}
-
 function getOpenInVlc () {
-  return state.saved.openInVlc
+  return state.saved.prefs.playInVlc
 }
 
 // Events from the UI never modify state directly. Instead they call dispatch()
@@ -167,9 +161,6 @@ function dispatch (action, ...args) {
   if (!['mediaMouseMoved', 'mediaTimeUpdate'].includes(action)) {
     console.log('dispatch: %s %o', action, args)
   }
-  if (action === 'toggleOpenInVlc') {
-    toggleOpenInVlc(args[0])
-  }
   if (action === 'onOpen') {
     onOpen(args[0] /* files */)
   }
@@ -1073,9 +1064,8 @@ function openPlayerFromActiveTorrent (torrentSummary, index, timeout, cb) {
       return update()
     }
 
-    // play in VLC if set as default player (Menu: Playback / Open in VLC)
+    // play in VLC if set as default player (Preferences / Playback / Play in VLC)
     if (getOpenInVlc()) {
-      console.log('-- OPEN IN VLC', torrentSummary)
       dispatch('vlcPlay')
       update()
       cb()

renderer/views/preferences.js

@@ -10,6 +10,7 @@ function Preferences (state) {
   return hx`
     <div class='preferences'>
       ${renderGeneralSection(state)}
+      ${renderPlaybackSection(state)}
     </div>
   `
 }
@@ -24,6 +25,29 @@ function renderGeneralSection (state) {
   ])
 }
 
+function renderPlaybackSection (state) {
+  return renderSection({
+    title: 'Playback',
+    description: '',
+    icon: 'settings'
+  }, [
+    renderPlayInVlcSelector(state)
+  ])
+}
+
+function renderPlayInVlcSelector (state) {
+  return renderCheckbox({
+    label: 'Play in VLC',
+    description: 'Media will play in VLC',
+    property: 'playInVlc',
+    value: state.saved.prefs.playInVlc
+  },
+  state.unsaved.prefs.playInVlc,
+  function (value) {
+    setStateValue('playInVlc', value)
+  })
+}
+
 function renderDownloadDirSelector (state) {
   return renderFileSelector({
     label: 'Download Path',
@@ -64,6 +88,34 @@ function renderSection (definition, controls) {
   `
 }
 
+function renderCheckbox(definition, value, callback) {
+  var checked = ''
+  if (value) checked = 'checked'
+
+  return hx`
+    <div class='control-group'>
+      <div class='controls'>
+        <label class='control-label'>
+          <div class='preference-title'>${definition.label}</div>
+        </label>
+        <div class='controls'>
+          <label>
+            <input type='checkbox' class='checkbox'
+              onclick=${handleClick}
+              id=${definition.property}
+              ${checked} />
+
+            <span class="checkbox-label">${definition.description}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  `
+  function handleClick () {
+    callback(this.checked)
+  }
+}
+
 // Creates a file chooser
 // - defition should be {label, description, options}
 //   options are passed to dialog.showOpenDialog