Use single quotes in hyperx

package.json

@@ -17,7 +17,7 @@
     "debug": "^2.2.0",
     "drag-drop": "^2.3.1",
     "electron-localshortcut": "^0.6.0",
-    "hyperx": "^2.0.0",
+    "hyperx": "^2.0.2",
     "main-loop": "^3.2.0",
     "network-address": "^1.1.0",
     "pretty-bytes": "^3.0.0",

renderer/index.js

@@ -253,6 +253,7 @@ function isNotTorrentFile (file) {
 }
 
 function addTorrent (torrentId) {
+  if (!torrentId) torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
   var torrent = client.add(torrentId)
   addTorrentEvents(torrent)
 }

renderer/views/header.js

@@ -8,41 +8,43 @@ function Header (state, dispatch) {
   var navLeftStyle = process.platform === 'darwin'
     ? {marginLeft: '78px'} /* OSX needs room on the left for min/max/close buttons */
     : null /* On Windows and Linux, the header is separate & underneath the title bar */
+
   return hx`
-    <div class="header">
+    <div class='header'>
       ${getTitle()}
-      <div class="nav left" style=${navLeftStyle}>
+      <div class='nav left' style=${navLeftStyle}>
-        <i class="icon back" onclick=${onBack}>chevron_left</i>
+        <i
-        <i class="icon forward" onclick=${onForward}>chevron_right</i>
+          class='icon back'
+          onclick=${() => dispatch('back')}>
+          chevron_left
+        </i>
+        <i
+          class='icon forward'
+          onclick=${() => dispatch('forward')}>
+          chevron_right
+        </i>
       </div>
-      <div class="nav right">
+      <div class='nav right'>
-        ${plusButton()}
+        ${getAddButton()}
       </div>
     </div>
   `
 
   function getTitle () {
     if (process.platform === 'darwin') {
-      return hx`<div class="title">${state.title}</div>`
+      return hx`<div class='title'>${state.title}</div>`
     }
   }
 
-  function plusButton () {
+  function getAddButton () {
     if (state.url !== '/player') {
-      return hx`<i class="icon add" onclick=${onAddTorrent}>add</i>`
+      return hx`
+        <i
+          class='icon add'
+          onclick=${() => dispatch('addTorrent')}>
+          add
+        </i>
+      `
     }
   }
-
-  function onBack (e) {
-    dispatch('back')
-  }
-
-  function onForward (e) {
-    dispatch('forward')
-  }
-
-  function onAddTorrent (e) {
-    var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
-    dispatch('addTorrent', torrentId)
-  }
 }

renderer/views/player.js

@@ -30,12 +30,12 @@ function Player (state, dispatch) {
 
   // Show the video as large as will fit in the window, play immediately
   return hx`
-    <div class="player ${hideControls ? 'hide' : ''}" onmousemove=${onMouseMove}>
+    <div class='player ${hideControls ? 'hide' : ''}' onmousemove=${onMouseMove}>
-      <div class="letterbox" onmousemove=${onMouseMove}>
+      <div class='letterbox' onmousemove=${onMouseMove}>
         <video
-          src="${state.server.localURL}"
+          src='${state.server.localURL}'
           onloadedmetadata=${onLoadedMetadata}
-          autoplay="autoplay">
+          autoplay>
         </video>
       </div>
       ${renderPlayerControls(state, dispatch)}
@@ -46,8 +46,7 @@ function Player (state, dispatch) {
     if (state.isFullScreen) dispatch('fullscreenVideoMouseMoved')
   }
 
-  // As soon as the video loads far enough to know the dimensions, resize the
+  // As soon as the video loads enough to know the video dimensions, resize the window
-  // window to match the video resolution
   function onLoadedMetadata (e) {
     var video = e.target
     var dimensions = {
@@ -58,8 +57,6 @@ function Player (state, dispatch) {
   }
 }
 
-// Renders all video controls: play/pause, scrub, loading bar
-// TODO: cast buttons
 function renderPlayerControls (state, dispatch) {
   var positionPercent = 100 * state.video.currentTime / state.video.duration
   var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 8px)' }
@@ -67,17 +64,17 @@ function renderPlayerControls (state, dispatch) {
 
   var elements = [
     hx`
-      <div class="playback-bar">
+      <div class='playback-bar'>
         ${renderLoadingBar(state)}
-        <div class="playback-cursor" style=${playbackCursorStyle}></div>
+        <div class='playback-cursor' style=${playbackCursorStyle}></div>
-        <div class="scrub-bar"
+        <div class='scrub-bar'
-          draggable="true"
+          draggable='true'
           onclick=${handleScrub},
           ondrag=${handleScrub}></div>
       </div>
     `,
     hx`
-      <i class="icon fullscreen"
+      <i class='icon fullscreen'
         onclick=${() => dispatch('toggleFullScreen')}>
         fullscreen
       </i>
@@ -111,12 +108,12 @@ function renderPlayerControls (state, dispatch) {
     `)
   }
   elements.push(hx`
-    <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
+    <i class='icon play-pause' onclick=${() => dispatch('playPause')}>
       ${state.video.isPaused ? 'play_arrow' : 'pause'}
     </i>
   `)
 
-  return hx`<div class="player-controls">${elements}</div>`
+  return hx`<div class='player-controls'>${elements}</div>`
 
   // Handles a click or drag to scrub (jump to another position in the video)
   function handleScrub (e) {
@@ -151,14 +148,14 @@ function renderLoadingBar (state) {
 
   // Output an list of rectangles to show loading progress
   return hx`
-    <div class="loading-bar">
+    <div class='loading-bar'>
       ${parts.map(function (part) {
         var style = {
           left: (100 * part.start / numParts) + '%',
           width: (100 * part.count / numParts) + '%'
         }
 
-        return hx`<div class="loading-bar-part" style=${style}></div>`
+        return hx`<div class='loading-bar-part' style=${style}></div>`
       })}
     </div>
   `

renderer/views/torrent-list.js

@@ -3,11 +3,12 @@ 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) {
   var list = state.client.torrents.map((torrent) => renderTorrent(torrent, dispatch))
-  return hx`<div class="torrent-list">${list}</div>`
+  return hx`<div class='torrent-list'>${list}</div>`
 }
 
 // Renders a torrent in the torrent list
@@ -26,21 +27,21 @@ function renderTorrent (torrent, dispatch) {
     renderTorrentMetadata(torrent),
     hx`
       <i
-        class="icon delete"
+        class='icon delete'
         onclick=${() => dispatch('deleteTorrent', torrent)}>
         close
       </i>
     `,
     hx`
       <i.btn.icon.play
-        class="${!torrent.ready ? 'disabled' : ''}"
+        class='${!torrent.ready ? 'disabled' : ''}'
         onclick=${() => dispatch('openPlayer', torrent)}>
         play_arrow
       </i>
     `
   ]
 
-  return hx`<div class="torrent" style=${style}>${elements}</div>`
+  return hx`<div class='torrent' style=${style}>${elements}</div>`
 }
 
 // Renders the torrent name and download progress
@@ -52,10 +53,10 @@ function renderTorrentMetadata (torrent) {
   if (downloaded !== total) downloaded += ` / ${total}`
 
   return hx`
-    <div class="metadata">
+    <div class='metadata'>
-      <div class="name ellipsis">${torrent.name || 'Loading torrent...'}</div>
+      <div class='name ellipsis'>${torrent.name || 'Loading torrent...'}</div>
-      <div class="status">
+      <div class='status'>
-        <span class="progress">${progress}%</span>
+        <span class='progress'>${progress}%</span>
         <span>${downloaded}</span>
       </div>
       ${getFilesLength()}
@@ -72,7 +73,7 @@ function renderTorrentMetadata (torrent) {
 
   function getFilesLength () {
     if (torrent.ready && torrent.files.length > 1) {
-      return hx`<span class="files">${torrent.files.length} files</span>`
+      return hx`<span class='files'>${torrent.files.length} files</span>`
     }
   }
 }