using icon as checkbox

src/renderer/controllers/playback-controller.js

@@ -196,13 +196,8 @@ module.exports = class PlaybackController {
     }
   }
 
-function getOpenInVlc () {
-  return this.state.saved.prefs.playInVlc
-}
-
   openPlayerFromActiveTorrent (torrentSummary, index, timeout, cb) {
     var fileSummary = torrentSummary.files[index]
-}
 
     // update state
     var state = this.state
@@ -246,6 +241,14 @@ function getOpenInVlc () {
         return this.update()
       }
 
+      // play in VLC if set as default player (Preferences / Playback / Play in VLC)
+      if (this.state.saved.prefs.playInVlc) {
+        dispatch('vlcPlay')
+        this.update()
+        cb()
+        return
+      }
+
       // otherwise, play the video
       dispatch('setTitle', torrentSummary.files[state.playing.fileIndex].name)
       this.update()
@@ -255,14 +258,6 @@ function getOpenInVlc () {
     })
   }
 
-    // play in VLC if set as default player (Preferences / Playback / Play in VLC)
-    if (getOpenInVlc()) {
-      dispatch('vlcPlay')
-      this.update()
-      cb()
-      return  
-    }
-
   closePlayer () {
     console.log('closePlayer')
 

src/renderer/views/preferences.js

@@ -46,6 +46,7 @@ function renderPlayInVlcSelector (state) {
   },
   state.unsaved.prefs.playInVlc,
   function (value) {
+    console.log('-- VALUE:', value)
     setStateValue('playInVlc', value)
   })
 }
@@ -92,30 +93,31 @@ function renderSection (definition, controls) {
 }
 
 function renderCheckbox (definition, value, callback) {
-  var checked = ''
+  var iconClass = 'icon clickable'
-  if (value) checked = 'checked'
+  if (value) iconClass += ' enabled'
 
-  return hx`
+  return (
-    <div class='control-group'>
+    <div className='control-group'>
-      <div class='controls'>
+      <div className='controls'>
-        <label class='control-label'>
+        <label className='control-label'>
-          <div class='preference-title'>${definition.label}</div>
+          <div className='preference-title'>{definition.label}</div>
         </label>
-        <div class='controls'>
+        <div className='controls'>
-          <label>
+          <label className='clickable' onClick={handleClick}>
-            <input type='checkbox' class='checkbox'
+            <i
-              onclick=${handleClick}
+              className={iconClass}
-              id=${definition.property}
+              id='{definition.property}'
-              ${checked} />
+            >
-
+              check_circle
-            <span class="checkbox-label">${definition.description}</span>
+            </i>
+            <span className='checkbox-label'>{definition.description}</span>
           </label>
         </div>
       </div>
     </div>
-  `
+  )
   function handleClick () {
-    callback(this.checked)
+    callback(!value)
   }
 }
 

static/main.css

@@ -122,6 +122,10 @@ table {
  * UTILITY CLASSES
  */
 
+.clickable {
+  cursor: pointer;
+}
+
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -919,6 +923,10 @@ video::-webkit-media-text-track-container {
   margin-right: 0.2em;
 }
 
+.preferences .icon.enabled {
+  color: yellow;
+}
+
 .preferences .btn {
   display: inline-block;
   -webkit-appearance: button;
@@ -1071,7 +1079,7 @@ video::-webkit-media-text-track-container {
 }
 
 .checkbox-label {
-  vertical-align: middle;
+  vertical-align: top;
 }