Merge pull request #674 from codealchemist/open-in-vlc-preferences

Added Playback preferences and Play in VLC

src/renderer/controllers/playback-controller.js

@@ -241,12 +241,19 @@ module.exports = class PlaybackController {
         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
       state.window.title = torrentSummary.files[state.playing.fileIndex].name
       this.update()
 
       ipcRenderer.send('onPlayerOpen')
-
       cb()
     })
   }

src/renderer/views/preferences.js

@@ -10,6 +10,7 @@ module.exports = class Preferences extends React.Component {
     return (
       <div className='preferences'>
         {renderGeneralSection(state)}
+        {renderPlaybackSection(state)}
       </div>
     )
   }
@@ -27,6 +28,30 @@ function renderGeneralSection (state) {
   ])
 }
 
+function renderPlaybackSection (state) {
+  return renderSection({
+    title: 'Playback',
+    description: '',
+    icon: 'settings'
+  }, [
+    renderPlayInVlcSelector(state)
+  ])
+}
+
+function renderPlayInVlcSelector (state) {
+  return renderCheckbox({
+    key: 'play-in-vlc',
+    label: 'Play in VLC',
+    description: 'Media will play in VLC',
+    property: 'playInVlc',
+    value: state.saved.prefs.playInVlc
+  },
+  state.unsaved.prefs.playInVlc,
+  function (value) {
+    dispatch('updatePreferences', 'playInVlc', value)
+  })
+}
+
 function renderDownloadPathSelector (state) {
   return renderFileSelector({
     key: 'download-path',
@@ -91,6 +116,35 @@ function renderSection (definition, controls) {
   )
 }
 
+function renderCheckbox (definition, value, callback) {
+  var iconClass = 'icon clickable'
+  if (value) iconClass += ' enabled'
+
+  return (
+    <div key='{definition.key}' className='control-group'>
+      <div className='controls'>
+        <label className='control-label'>
+          <div className='preference-title'>{definition.label}</div>
+        </label>
+        <div className='controls'>
+          <label className='clickable' onClick={handleClick}>
+            <i
+              className={iconClass}
+              id='{definition.property}'
+            >
+              check_circle
+            </i>
+            <span className='checkbox-label'>{definition.description}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  )
+  function handleClick () {
+    callback(!value)
+  }
+}
+
 // Creates a file chooser
 // - defition should be {label, description, options}
 //   options are passed to dialog.showOpenDialog

static/main.css

@@ -122,6 +122,10 @@ table {
  * UTILITY CLASSES
  */
 
+.clickable {
+  cursor: pointer;
+}
+
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -932,6 +936,10 @@ video::-webkit-media-text-track-container {
   margin-right: 0.2em;
 }
 
+.preferences .icon.enabled {
+  color: yellow;
+}
+
 .preferences .btn {
   display: inline-block;
   -webkit-appearance: button;
@@ -1079,6 +1087,14 @@ video::-webkit-media-text-track-container {
   vertical-align: text-bottom;
 }
 
+.preferences .checkbox {
+  width: auto;
+}
+
+.checkbox-label {
+  vertical-align: top;
+}
+
 
 /*
  * MEDIA OVERLAY / AUDIO DETAILS