Add Torrent Link modal

renderer/index.css

@@ -254,6 +254,81 @@ a:not(.disabled):hover, i:not(.disabled):hover {
   margin-top: 0;
 }
 
+/*
+ * MODAL POPOVERS
+ */
+
+.modal .modal-background {
+  content: ' ';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  opacity: 0.5;
+}
+
+.modal .modal-content {
+  position: fixed;
+  top: 45px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: calc(100% - 20px);
+  max-width: 600px;
+  box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.4);
+  background-color: white;
+  color: #222;
+  padding: 20px;
+}
+
+.open-torrent-address-modal input {
+  width: calc(100% - 100px)
+}
+
+/*
+ * BUTTONS
+ */
+
+button {
+  background: transparent;
+  margin-left: 10px;
+  padding: 0;
+  border: none;
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  color: #aaa;
+}
+
+button.primary {
+  color: #0cf;
+}
+
+button:hover {
+  -webkit-filter: brightness(1.1);
+}
+
+button:active {
+  -webkit-filter: brightness(1.1);
+  text-shadow: none;
+}
+
+/*
+ * OTHER FORM ELEMENT DEFAULTS
+ */
+
+input {
+  background: transparent;
+  width: 300px;
+  padding: 6px;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
+}
+
 /*
  * PLAYER
  */
@@ -384,6 +459,10 @@ body.drag .torrent-placeholder span {
   background-color: #F44336;
 }
 
+.torrent.timeout .play {
+  padding-top: 8px;
+}
+
 .torrent.requested .play {
   border-top: 6px solid rgba(255, 255, 255, 0.2);
   border-right: 6px solid rgba(255, 255, 255, 0.2);

renderer/index.js

@@ -4,7 +4,6 @@ var airplay = require('airplay-js')
 var cfg = require('application-config')('WebTorrent')
 var cfgDirectory = require('application-config-path')('WebTorrent')
 var chromecasts = require('chromecasts')()
-var config = require('../config')
 var createTorrent = require('create-torrent')
 var dragDrop = require('drag-drop')
 var electron = require('electron')
@@ -13,16 +12,21 @@ var fs = require('fs')
 var mainLoop = require('main-loop')
 var networkAddress = require('network-address')
 var path = require('path')
-var torrentPoster = require('./lib/torrent-poster')
 var WebTorrent = require('webtorrent')
 
-var App = require('./views/app')
 var createElement = require('virtual-dom/create-element')
 var diff = require('virtual-dom/diff')
 var patch = require('virtual-dom/patch')
 
-var clipboard = electron.clipboard
+var App = require('./views/app')
+var config = require('../config')
+var torrentPoster = require('./lib/torrent-poster')
+
+// Electron apps have two processes: a main process (node) runs first and starts
+// a renderer process (essentially a Chrome window). We're in the renderer process,
+// and this IPC channel receives from and sends messages to the main process
 var ipcRenderer = electron.ipcRenderer
+var clipboard = electron.clipboard
 
 // For easy debugging in Developer Tools
 var state = global.state = require('./state')
@@ -94,7 +98,9 @@ function init () {
   // ...keyboard shortcuts
   document.addEventListener('keydown', function (e) {
     if (e.which === 27) { /* ESC means either exit fullscreen or go back */
-      if (state.window.isFullScreen) {
+      if (state.modal) {
+        dispatch('exitModal')
+      } else if (state.window.isFullScreen) {
         dispatch('toggleFullScreen')
       } else {
         dispatch('back')
@@ -157,6 +163,9 @@ function dispatch (action, ...args) {
   if (action === 'addTorrent') {
     addTorrent(args[0] /* torrent */)
   }
+  if (action === 'showOpenTorrentFile') {
+    ipcRenderer.send('showOpenTorrentFile')
+  }
   if (action === 'seed') {
     seed(args[0] /* files */)
   }
@@ -207,6 +216,10 @@ function dispatch (action, ...args) {
     state.video.mouseStationarySince = new Date().getTime()
     update()
   }
+  if (action === 'exitModal') {
+    state.modal = null
+    update()
+  }
 }
 
 function setupIpc () {
@@ -214,6 +227,11 @@ function setupIpc () {
     dispatch(action, ...args)
   })
 
+  ipcRenderer.on('showOpenTorrentAddress', function (e) {
+    state.modal = 'open-torrent-address-modal'
+    update()
+  })
+
   ipcRenderer.on('fullscreenChanged', function (e, isFullScreen) {
     state.window.isFullScreen = isFullScreen
     update()
@@ -288,7 +306,9 @@ function onFiles (files) {
   dispatch('seed', files.filter(isNotTorrentFile))
 }
 
-function onPaste () {
+function onPaste (e) {
+  if (e.target.tagName.toLowerCase() === 'input') return
+
   var torrentIds = clipboard.readText().split('\n')
   torrentIds.forEach(function (torrentId) {
     torrentId = torrentId.trim()
@@ -460,6 +480,7 @@ function startServerFromReadyTorrent (torrent, cb) {
 }
 
 function stopServer () {
+  if (!state.server) return
   state.server.server.destroy()
   state.server = null
 }
@@ -520,7 +541,7 @@ function toggleTorrent (torrentSummary) {
 function deleteTorrent (torrentSummary) {
   var infoHash = torrentSummary.infoHash
   var torrent = getTorrent(infoHash)
-  torrent.destroy()
+  if (torrent) torrent.destroy()
 
   var index = state.saved.torrents.findIndex((x) => x.infoHash === infoHash)
   if (index > -1) state.saved.torrents.splice(index, 1)

renderer/views/app.js

@@ -7,8 +7,9 @@ var hx = hyperx(h)
 var Header = require('./header')
 var Player = require('./player')
 var TorrentList = require('./torrent-list')
-
-var isOSX = process.platform === 'darwin'
+var Modals = {
+  'open-torrent-address-modal': require('./open-torrent-address-modal')
+}
 
 function App (state, dispatch) {
   // Hide player controls while playing video, if the mouse stays still for a while
@@ -28,21 +29,36 @@ function App (state, dispatch) {
   if (state.window.isFullScreen) cls.push('is-fullscreen')
   if (state.window.isFocused) cls.push('is-focused')
   if (hideControls) cls.push('hide-video-controls')
-
   return hx`
     <div class='app ${cls.join(' ')}'>
       ${getHeader()}
       <div class='content'>${getView()}</div>
+      ${getModal()}
     </div>
   `
 
   function getHeader () {
+    var isOSX = process.platform === 'darwin'
     // Hide the header on Windows/Linux when in the player
     if (isOSX || state.url !== 'player') {
       return Header(state, dispatch)
     }
   }
 
+  function getModal () {
+    if (state.modal) {
+      var contents = Modals[state.modal](state, dispatch)
+      return hx`
+        <div class='modal'>
+          <div class='modal-background'></div>
+          <div class='modal-content add-file-modal'>
+            ${contents}
+          </div>
+        </div>
+      `
+    }
+  }
+
   function getView () {
     if (state.url === 'home') {
       return TorrentList(state, dispatch)

renderer/views/header.js

@@ -40,7 +40,7 @@ function Header (state, dispatch) {
         <i
           class='icon add'
           title='add torrent'
-          onclick=${() => dispatch('addTorrent')}>
+          onclick=${() => dispatch('showOpenTorrentFile')}>
           add
         </i>
       `

renderer/views/open-torrent-address-modal.js

@@ -0,0 +1,31 @@
+module.exports = OpenTorrentAddressModal
+
+var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
+
+function OpenTorrentAddressModal (state, dispatch) {
+  return hx`
+    <div class='open-torrent-address-modal'>
+      <p><strong>Enter torrent address or magnet link</strong></p>
+      <p>
+        <input id='add-torrent-url' type='text' autofocus onkeypress=${handleKeyPress} />
+        <button class='primary' onclick=${handleOK}>OK</button>
+        <button class='cancel' onclick=${handleCancel}>Cancel</button>
+      </p>
+    </div>
+  `
+
+  function handleKeyPress (e) {
+    if (e.which === 13) handleOK() /* hit Enter to submit */
+  }
+
+  function handleOK () {
+    dispatch('exitModal')
+    dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
+  }
+
+  function handleCancel () {
+    dispatch('exitModal')
+  }
+}