try hyperx

package.json

@@ -16,6 +16,7 @@
     "create-torrent": "^3.22.1",
     "debug": "^2.2.0",
     "drag-drop": "^2.3.1",
+    "hyperx": "^1.4.0",
     "network-address": "^1.1.0",
     "pretty-bytes": "^3.0.0",
     "throttleit": "^1.0.0",

renderer/views/app.js

@@ -1,22 +1,26 @@
 module.exports = App
 
 var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
 
 var Header = require('./header')
 var Player = require('./player')
 var TorrentList = require('./torrent-list')
 
 function App (state, dispatch) {
-  return h('.app', [
+  function getView () {
-    Header(state, dispatch),
+    if (state.view.url === '/') {
-    h('.content', [
+      return TorrentList(state, dispatch)
-      (function () {
+    } else if (state.view.url === '/player') {
-        if (state.view.url === '/') {
+      return Player(state, dispatch)
-          return TorrentList(state, dispatch)
+    }
-        } else if (state.view.url === '/player') {
+  }
-          return Player(state, dispatch)
+
-        }
+  return hx`
-      })()
+    <div className="app">
-    ])
+      ${Header(state, dispatch)}
-  ])
+      <div className="content">${getView()}</div>
+    </div>
+  `
 }

renderer/views/header.js

@@ -1,32 +1,34 @@
 module.exports = Header
 
 var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
 
 function Header (state, dispatch) {
-  return h('.header', [
+  return hx`
-    (function () {
+    <div className="header">
-      if (process.platform === 'darwin') {
+      ${getTitle()}
-        return h('.title', state.view.title)
+      <div className="nav left">
-      }
+        <i className="icon back" onclick=${onBack}>chevron_left</i>
-    })(),
+        <i className="icon forward" onclick=${onForward}>chevron_right</i>
-    h('.nav.left', [
+      </div>
-      h('i.icon.back', {
+      <div className="nav right">
-        onclick: onBack
+        ${plusButton()}
-      }, 'chevron_left'),
+      </div>
-      h('i.icon.forward', {
+    </div>
-        onclick: onForward
+  `
-      }, 'chevron_right')
+
-    ]),
+  function getTitle () {
-    (function () {
+    if (process.platform === 'darwin') {
-      if (state.view.url !== '/player') {
+      return hx`<div className="title">${state.view.title}</div>`
-        return h('.nav.right', [
+    }
-          h('i.icon.add', {
+  }
-            onclick: onAddTorrent
+
-          }, 'add')
+  function plusButton () {
-        ])
+    if (state.view.url !== '/player') {
-      }
+      return hx`<i className="icon add" onclick=${onAddTorrent}>add</i>`
-    })()
+    }
-  ])
+  }
 
   function onBack (e) {
     dispatch('back')

renderer/views/player.js

@@ -1,6 +1,8 @@
 module.exports = Player
 
 var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
 var electron = require('electron')
 
 function Player (state, dispatch) {
@@ -23,14 +25,16 @@ function Player (state, dispatch) {
   }
 
   // Show the video as large as will fit in the window, play immediately
-  return h('.player', [
+  return hx`
-    h('video', {
+    <div className="player">
-      src: state.server.localURL,
+      <video
-      autoplay: true,
+        src="${state.server.localURL}"
-      onloadedmetadata: onLoadedMetadata
+        onloadedmetadata="${onLoadedMetadata}"
-    }),
+        autoplay="true">
-    renderPlayerControls(state, dispatch)
+      </video>
-  ])
+      ${renderPlayerControls(state, dispatch)}
+    </div>
+  `
 
   // As soon as the video loads far enough to know the dimensions, resize the
   // window to match the video resolution
@@ -48,22 +52,22 @@ function Player (state, dispatch) {
 // TODO: cast buttons
 function renderPlayerControls (state, dispatch) {
   var positionPercent = 100 * state.video.currentTime / state.video.duration
-  return h('.player-controls', [
+  var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 4px)' }
-    h('.scrub-bar', {
+
-      onclick: handleScrub,
+  return hx`
-      ondrag: handleScrub
+    <div className="player-controls">
-    }, [
+      <div className="scrub-bar"
-      h('.loading-bar', renderLoadingBar(state)),
+        draggable="true"
-      h('.playback-cursor', {
+        onclick=${handleScrub},
-        style: {
+        ondrag=${handleScrub}>
-          left: 'calc(' + positionPercent + '% - 4px)'
+        ${renderLoadingBar(state)}
-        }
+        <div className="playback-cursor" style=${playbackCursorStyle}></div>
-      })
+      </div>
-    ]),
+      <i className="icon play-pause" onclick=${() => dispatch('playPause')}>
-    h('i.icon.play-pause', {
+        ${state.video.isPaused ? 'play_arrow' : 'pause'}
-      onclick: () => dispatch('playPause')
+      </i>
-    }, state.video.isPaused ? 'play_arrow' : 'pause')
+    </div>
-  ])
+  `
 
   // Handles a click or drag to scrub (jump to another position in the video)
   function handleScrub (e) {
@@ -99,12 +103,16 @@ function renderLoadingBar (state) {
   }
 
   // Output an list of rectangles to show loading progress
-  return parts.map(function (part) {
+  return hx`
-    return h('.loading-bar-part', {
+    <div className="loading-bar">
-      style: {
+      ${parts.map(function (part) {
-        left: (100 * part.start / numParts) + '%',
+        var style = {
-        width: (100 * part.count / numParts) + '%'
+          left: (100 * part.start / numParts) + '%',
-      }
+          width: (100 * part.count / numParts) + '%'
-    })
+        }
-  })
+
+        return hx`<div className="loading-bar-part" style=${style}></div>`
+      })}
+    </div>
+  `
 }

renderer/views/torrent-list.js

@@ -1,6 +1,8 @@
 module.exports = TorrentList
 
 var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
 var prettyBytes = require('pretty-bytes')
 
 function TorrentList (state, dispatch) {
@@ -9,7 +11,7 @@ function TorrentList (state, dispatch) {
     : []
 
   var list = torrents.map((torrent) => renderTorrent(state, dispatch, torrent))
-  return h('.torrent-list', list)
+  return hx`<div className="torrent-list">${list}</div>`
 }
 
 // Renders a torrent in the torrent list
@@ -19,51 +21,75 @@ function renderTorrent (state, dispatch, torrent) {
   // Background image: show some nice visuals, like a frame from the movie, if possible
   var style = {}
   if (torrent.posterURL) {
-    style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("' + torrent.posterURL + '")'
+    style['background-image'] = `linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("${torrent.posterURL}")`
   }
 
   // Foreground: name of the torrent, basic info like size, play button,
   // cast buttons if available, and delete
   var elements = [
     renderTorrentMetadata(torrent),
-    h('i.icon.delete', {
+    hx`
-      onclick: () => dispatch('deleteTorrent', torrent)
+      <i
-    }, 'close'),
+        className="icon delete"
-    h('i.btn.icon.play', {
+        onclick=${() => dispatch('deleteTorrent', torrent)}>
-      className: !torrent.ready ? 'disabled' : '',
+        close
-      onclick: () => dispatch('openPlayer', torrent)
+      </i>
-    }, 'play_arrow')
+    `,
+    hx`
+      <i
+        className="${!torrent.ready ? 'disabled btn icon play' : 'btn icon play'}"
+        onclick=${() => dispatch('openPlayer', torrent)}>
+        play_arrow
+      </i>
+    `
   ]
+
   if (state.view.chromecast) {
-    elements.push(h('i.btn.icon.chromecast', {
+    elements.push(hx`
-      className: !torrent.ready ? 'disabled' : '',
+      <i
-      onclick: () => dispatch('openChromecast', torrent)
+        className="${!torrent.ready ? 'disabled btn icon chromecast' : 'btn icon chromecast'}"
-    }, 'cast'))
+        onclick=${() => dispatch('openChromecast', torrent)}>
-  }
+        cast
-  if (state.view.devices.airplay) {
+      </i>
-    elements.push(h('i.btn.icon.airplay', {
+    `)
-      className: !torrent.ready ? 'disabled' : '',
-      onclick: () => dispatch('openAirplay', torrent)
-    }, 'airplay'))
   }
 
-  return h('.torrent', {style: style}, elements)
+  if (state.view.devices.airplay) {
+    elements.push(hx`
+      <i
+        className="${!torrent.ready ? 'disabled btn icon airplay' : 'btn icon airplay'}"
+        onclick=${() => dispatch('openAirplay', torrent)}>
+        airplay
+      </i>
+    `)
+  }
+
+  return hx`<div className='torrent' style=${style}>${elements}</div>`
 }
 
 // Renders the torrent name and download progress
 function renderTorrentMetadata (torrent) {
-  return h('.metadata', [
+  return hx`
-    h('.name.ellipsis', torrent.name || 'Loading torrent...'),
+    <div className="metadata">
-    h('.status', [
+      <div className="name ellipsis">${torrent.name || 'Loading torrent...'}</div>
-      h('span.progress', Math.floor(100 * torrent.progress) + '%'),
+      <div className="status">
-      (function () {
+        <span className="progress">${Math.floor(100 * torrent.progress)}%</span>
-        if (torrent.ready && torrent.files.length > 1) {
+      </div>
-          return h('span.files', torrent.files.length + ' files')
+      ${getFilesLength()}
-        }
+      <span>${getPeers()}</span>
-      })(),
+      <span>${prettyBytes(torrent.downloadSpeed)}/s</span>
-      h('span', torrent.numPeers + ' ' + (torrent.numPeers === 1 ? 'peer' : 'peers')),
+      <span>${prettyBytes(torrent.uploadSpeed)}/s</span>
-      h('span', prettyBytes(torrent.downloadSpeed) + '/s'),
+    </div>
-      h('span', prettyBytes(torrent.uploadSpeed) + '/s')
+  `
-    ])
+
-  ])
+  function getPeers () {
+    var count = torrent.numPeers === 1 ? 'peer' : 'peers'
+    return `${torrent.numPeers} ${count}`
+  }
+
+  function getFilesLength () {
+    if (torrent.ready && torrent.files.length > 1) {
+      return hx`<span className="files">${torrent.files.length} files</span>`
+    }
+  }
 }