UI progress

main/index.css

@@ -12,11 +12,13 @@ body {
   overflow: auto;
   font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
   -webkit-user-select: none;
-  -webkit-app-region: drag;
+  background: #333;
+  font-size: 16px;
+  line-height: 1.5em;
 }
 
-body.drag .drag-layer {
+a {
-  display: block
+  cursor: default;
 }
 
 body.drag::before {
@@ -30,6 +32,20 @@ body.drag::before {
   border: 5px #f00 dashed;
 }
 
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.player {
+  height: 100%;
+}
+
 .player video {
   display: block;
   width: 100%;
@@ -37,4 +53,57 @@ body.drag::before {
 
 .torrent {
   height: 150px;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.5);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 0 50%;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  transition: all 0.1s;
+}
+
+.torrent:hover {
+  -webkit-filter: brightness(1.2);
+}
+
+.torrent .metadata {
+  float: left;
+  width: calc(100% - 80px);
+  color: #FFF;
+  text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
+}
+
+.torrent .play {
+  float: right;
+  margin-top: 25px;
+  background-color: #C62828;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  color: #FFF;
+  font-size: 24px;
+  padding-top: 14px;
+  padding-left: 3px;
+  text-align: center;
+  transition: all 0.1s;
+}
+
+.torrent .play:not(.disabled):hover {
+  -webkit-filter: brightness(1.5);
+}
+
+.torrent .name {
+  font-size: 1.6em;
+  font-weight: bold;
+  line-height: 1.5em;
+}
+
+.torrent .status {
+  opacity: 0.8;
+  font-size: 1em;
+  line-height: 1.5em;
+}
+
+.torrent .status :not(:last-child)::after {
+  content: ' — ';
 }

main/index.js

@@ -77,7 +77,6 @@ function handler (action, ...args) {
     closePlayer()
   }
 }
-addTorrent()
 
 function onFiles (files) {
   // .torrent file = start downloading the torrent
@@ -149,19 +148,23 @@ function torrentReady (torrent) {
   torrentPoster(torrent, function (err, buf) {
     if (err) return onError(err)
     torrent.posterURL = URL.createObjectURL(new Blob([ buf ], { type: 'image/png' }))
-    console.log(torrent.posterURL)
     update()
   })
   update()
 }
 
 function openPlayer (torrent) {
+  // use largest file
+  var index = torrent.files.indexOf(torrent.files.reduce(function (a, b) {
+    return a.length > b.length ? a : b
+  }))
+
   var server = torrent.createServer()
   server.listen(0, function () {
     var port = server.address().port
     state.player = {
       server: server,
-      url: 'http://localhost:' + port + '/0'
+      url: 'http://localhost:' + port + '/' + index
     }
     update()
   })

main/views/app.js

@@ -10,7 +10,7 @@ function App (state, handler) {
         autoplay: true,
         controls: true
       }),
-      h('button.close', {
+      h('a.close', {
         onclick: closePlayer
       }, 'Close')
     ])
@@ -18,17 +18,22 @@ function App (state, handler) {
     var list = state.torrents.map(function (torrent) {
       var style = {}
       if (torrent.posterURL) {
-        style['background-image'] = 'url("' + torrent.posterURL + '")'
+        style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("' + torrent.posterURL + '")'
       }
       return h('.torrent', {
         style: style
       }, [
-        h('.name', torrent.name),
+        h('.metadata', [
-        h('.progress', String(torrent.progress * 100) + '%'),
+          h('.name.ellipsis', torrent.name || 'Loading torrent...'),
-        h('button.play', {
+          h('.status', [
-          disabled: !torrent.ready,
+            h('span.progress', Math.floor(100 * torrent.progress) + '%'),
+            (torrent.ready && torrent.files.length > 1) ? h('span.files', torrent.files.length + ' files') : ''
+          ])
+        ]),
+        h('a.play', {
+          className: !torrent.ready ? 'disabled' : '',
           onclick: openPlayer
-        }, 'Play')
+        }, '▶')
       ])
 
       function openPlayer () {