From 0ecf492a20fdf6e74d524ed411e4c763c5347889 Mon Sep 17 00:00:00 2001
From: Job Evers-Meltzer <jobevers@users.noreply.github.com>
Date: Mon, 16 Jan 2017 13:57:40 -0500
Subject: [PATCH 01/24] need absolute paths for electron

---
 js/component/drawer.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/component/drawer.js b/js/component/drawer.js
index c43239345..7ced71391 100644
--- a/js/component/drawer.js
+++ b/js/component/drawer.js
@@ -40,13 +40,13 @@ var Drawer = React.createClass({
           <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="close-drawer-link"/>
           <a href="/"><img src="./img/lbry-dark-1600x528.png" style={drawerImageStyle}/></a>
         </div>
-        <DrawerItem href='/?discover' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search"  />
-        <DrawerItem href='/?publish' viewingPage={this.props.viewingPage} label="Publish" icon="icon-upload" />
-        <DrawerItem href='/?downloaded' subPages={['published']} viewingPage={this.props.viewingPage}  label="My Files" icon='icon-cloud-download' />
-        <DrawerItem href="/?wallet" subPages={['send', 'receive', 'claim', 'referral']} viewingPage={this.props.viewingPage}  label="My Wallet" badge={lbry.formatCredits(this.state.balance) } icon="icon-bank" />
-        <DrawerItem href='/?settings' viewingPage={this.props.viewingPage}  label="Settings" icon='icon-gear' />
-        <DrawerItem href='/?help' viewingPage={this.props.viewingPage}  label="Help" icon='icon-question-circle' />
-        {isLinux ? <Link href="/?start" icon="icon-close" className="close-lbry-link" /> : null}
+        <DrawerItem href='index.html?discover' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search"  />
+        <DrawerItem href='index.html?publish' viewingPage={this.props.viewingPage} label="Publish" icon="icon-upload" />
+        <DrawerItem href='index.html?downloaded' subPages={['published']} viewingPage={this.props.viewingPage}  label="My Files" icon='icon-cloud-download' />
+        <DrawerItem href="index.html?wallet" subPages={['send', 'receive', 'claim', 'referral']} viewingPage={this.props.viewingPage}  label="My Wallet" badge={lbry.formatCredits(this.state.balance) } icon="icon-bank" />
+        <DrawerItem href='index.html?settings' viewingPage={this.props.viewingPage}  label="Settings" icon='icon-gear' />
+        <DrawerItem href='index.html?help' viewingPage={this.props.viewingPage}  label="Help" icon='icon-question-circle' />
+        {isLinux ? <Link href="index.html?start" icon="icon-close" className="close-lbry-link" /> : null}
       </nav>
     );
   }

From e95f1b8163d69632879fdff614bc460fed273b19 Mon Sep 17 00:00:00 2001
From: Job Evers-Meltzer <jobevers@users.noreply.github.com>
Date: Thu, 19 Jan 2017 03:50:08 -0600
Subject: [PATCH 02/24] add html5 video playback

---
 js/page/watch.js  | 24 +++++++++++++++++-------
 package.json      |  6 ++++--
 webpack.config.js |  3 ++-
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index b145f1a65..642272023 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -2,6 +2,10 @@ import React from 'react';
 import lbry from '../lbry.js';
 import LoadScreen from '../component/load_screen.js'
 
+const fs = require('fs');
+const VideoStream = require('videostream');
+
+
 var WatchPage = React.createClass({
   propTypes: {
     name: React.PropTypes.string,
@@ -22,6 +26,7 @@ var WatchPage = React.createClass({
     lbry.getFileStatus(this.props.name, (status) => {
       if (!status || status.code != 'running' || status.written_bytes == 0) {
         // Download hasn't started yet, so update status message (if available) then try again
+	// TODO: Would be nice to check if we have the MOOV before starting playing
         if (status) {
           this.setState({
             loadStatusMessage: status.message
@@ -33,11 +38,17 @@ var WatchPage = React.createClass({
           readyToPlay: true,
           mimeType: status.mime_type,
         })
-        var player = new MediaElementPlayer(this.refs.player, {
-          mode: 'shim',
-          plugins: ['flash'],
-          setDimensions: false,
-        });
+	const mediaFile = {
+	  createReadStream: function (opts) {
+	    // Return a readable stream that provides the bytes
+	    // between offsets "start" and "end" inclusive
+	    console.log('Stream between ' + opts.start + ' and ' + opts.end + '.');
+	    return fs.createReadStream(status.download_path, opts)
+	  }
+	}
+	var elem = this.refs.video;
+	var videostream = VideoStream(mediaFile, elem);
+	elem.play();
       }
     });
   },
@@ -46,8 +57,7 @@ var WatchPage = React.createClass({
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
         : <main className="full-screen">
-            <video ref="player" width="100%" height="100%">
-              <source type={(this.state.mimeType == 'audio/m4a' || this.state.mimeType == 'audio/mp4a-latm') ? 'video/mp4' : this.state.mimeType} src={lbry.webUiUri + '/view?name=' + this.props.name} />
+            <video controls width="100%" height="100%" id="video" ref="video">
             </video>
           </main>
     );
diff --git a/package.json b/package.json
index ff5a89af2..d9d719fc7 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "node-sass": "^3.8.0",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
-    "react-modal": "^1.5.2"
+    "react-modal": "^1.5.2",
+    "videostream": "^2.4.2"
   },
   "devDependencies": {
     "babel": "^6.5.2",
@@ -45,6 +46,7 @@
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.7.1",
     "node-sass": "^3.13.0",
-    "webpack": "^1.13.3"
+    "webpack": "^1.13.3",
+    "webpack-target-electron-renderer": "^0.4.0"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 03ccc2372..bdfd83191 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,5 +33,6 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  target: 'electron-main',
 };

From 728125c9992feb0334aa68e6307594833796d617 Mon Sep 17 00:00:00 2001
From: Job Evers-Meltzer <jobevers@users.noreply.github.com>
Date: Thu, 19 Jan 2017 03:50:20 -0600
Subject: [PATCH 03/24] move build to electron folder

---
 webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index bdfd83191..cd4cdabb5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,7 +8,7 @@ const PATHS = {
 module.exports = {
   entry: ['babel-polyfill', './js/main.js'],
   output: {
-    path: path.join(PATHS.dist, 'js'),
+    path: path.join(__dirname, '..', 'electron', 'dist', 'js'),
     publicPath: '/js/',
     filename: "bundle.js"
   },

From 18108f12abe910277bbe7933ebb7d0e34abd783e Mon Sep 17 00:00:00 2001
From: Job Evers-Meltzer <jobevers@users.noreply.github.com>
Date: Tue, 24 Jan 2017 22:19:38 -0500
Subject: [PATCH 04/24] need full link for electron

---
 js/component/file-tile.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index 2e9e247cd..7577b1c2a 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -121,15 +121,15 @@ export let FileTileStream = React.createClass({
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
         <div className={"row-fluid card-content file-tile__row"}>
           <div className="span3">
-            <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={`Photo for ${title}`} /></a>
+            <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
           </div>
           <div className="span9">
             { !this.props.hidePrice
               ? <FilePrice name={this.props.name} />
               : null}
-            <div className="meta"><a href={'/?show=' + this.props.name}>{'lbry://' + this.props.name}</a></div>
+            <div className="meta"><a href={'index.html?show=' + this.props.name}>{'lbry://' + this.props.name}</a></div>
             <h3 className="file-tile__title">
-              <a href={'/?show=' + this.props.name}>
+              <a href={'index.html?show=' + this.props.name}>
                 <TruncatedText lines={1}>
                   {title}
                 </TruncatedText>
@@ -195,4 +195,4 @@ export let FileTile = React.createClass({
 
     return <FileTileStream sdHash={this.state.sdHash} metadata={this.state.metadata} {... this.props} />;
   }
-});
\ No newline at end of file
+});

From 24d339b5832cfdef8b9b2987740f20e5b93d051b Mon Sep 17 00:00:00 2001
From: Job Evers-Meltzer <jobevers@users.noreply.github.com>
Date: Tue, 24 Jan 2017 22:20:41 -0500
Subject: [PATCH 05/24] only show the splash screen on initial load

---
 js/component/splash.js |  1 +
 js/main.js             | 37 ++++++++++++++++++++-----------------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/js/component/splash.js b/js/component/splash.js
index 29cb65234..bba92e288 100644
--- a/js/component/splash.js
+++ b/js/component/splash.js
@@ -28,6 +28,7 @@ var SplashScreen = React.createClass({
       });
 
       lbry.resolveName('one', () => {
+	window.sessionStorage.setItem('loaded', 'y')
         this.props.onLoadDone();
       });
       return;
diff --git a/js/main.js b/js/main.js
index d5cb1ab57..e03313718 100644
--- a/js/main.js
+++ b/js/main.js
@@ -13,24 +13,27 @@ var init = function() {
   }
 
   var canvas = document.getElementById('canvas');
-
-  ReactDOM.render(
-    <SplashScreen message="Connecting" onLoadDone={function() {
-      // Redirect to the claim code page if needed. Find somewhere better for this logic
-      if (!localStorage.getItem('claimCodeDone') && window.location.search == '' || window.location.search == '?' || window.location.search == 'discover') {
-        lbry.getBalance((balance) => {
-          if (balance <= 0) {
-            window.location.href = '?claim';
-          } else {
+  if (window.sessionStorage.getItem('loaded') == 'y') {
+    ReactDOM.render(<App/>, canvas)
+  } else {
+    ReactDOM.render(
+	<SplashScreen message="Connecting" onLoadDone={function() {
+	  // Redirect to the claim code page if needed. Find somewhere better for this logic
+	  if (!localStorage.getItem('claimCodeDone') && window.location.search == '' || window.location.search == '?' || window.location.search == 'discover') {
+            lbry.getBalance((balance) => {
+              if (balance <= 0) {
+		window.location.href = '?claim';
+              } else {
+		ReactDOM.render(<App/>, canvas);
+              }
+            });
+	  } else {
             ReactDOM.render(<App/>, canvas);
-          }
-        });
-      } else {
-        ReactDOM.render(<App/>, canvas);
-      }
-    }}/>,
-    canvas
-  );
+	  }
+	}}/>,
+      canvas
+    );
+  }
 };
 
 init();

From 557ee9cb91af42dbdde32550617ecea2160740e0 Mon Sep 17 00:00:00 2001
From: Job Evers-Meltzer <jobevers@users.noreply.github.com>
Date: Tue, 24 Jan 2017 23:57:58 -0500
Subject: [PATCH 06/24] add shutdown msg html pages

---
 dist/quit.html    | 37 +++++++++++++++++++++++++++++++++++++
 dist/warning.html | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 dist/quit.html
 create mode 100644 dist/warning.html

diff --git a/dist/quit.html b/dist/quit.html
new file mode 100644
index 000000000..5bed1d4a9
--- /dev/null
+++ b/dist/quit.html
@@ -0,0 +1,37 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>LBRY</title>
+    
+    <link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
+    <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
+    <link href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
+    <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="./img/fav/android-chrome-192x192.png" sizes="192x192">
+    <link rel="icon" type="image/png" href="./img/fav/favicon-16x16.png" sizes="16x16">
+    
+    <meta name="msapplication-TileColor" content="#155B4A">
+    <meta name="msapplication-TileImage" content="/img/fav/mstile-144x144.png">
+    <meta name="theme-color" content="#155B4A">
+    <style>
+      body {
+        background-color: "#155b4a"
+      }
+</style>
+  </head>
+  <div id="canvas">
+    <div class="load-screen" style="color: white; min-height: 100vh; min-width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+      <img src="./img/lbry-white-485x160.png" alt="LBRY">
+      <div style="margin-top: 24px; width: 325px; text-align: center;">
+	<h3>
+	  <span>Shutting Down <span class="busy-indicator"></span>
+	  </span>
+	</h3>
+      </div>
+    </div>
+  </div>
+</html>
diff --git a/dist/warning.html b/dist/warning.html
new file mode 100644
index 000000000..d82276d94
--- /dev/null
+++ b/dist/warning.html
@@ -0,0 +1,37 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>LBRY</title>
+    
+    <link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
+    <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
+    <link href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
+    <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="./img/fav/android-chrome-192x192.png" sizes="192x192">
+    <link rel="icon" type="image/png" href="./img/fav/favicon-16x16.png" sizes="16x16">
+    
+    <meta name="msapplication-TileColor" content="#155B4A">
+    <meta name="msapplication-TileImage" content="/img/fav/mstile-144x144.png">
+    <meta name="theme-color" content="#155B4A">
+    <style>
+      body {
+        background-color: "#155b4a"
+      }
+</style>
+  </head>
+  <div id="canvas">
+    <div class="load-screen" style="color: white; min-height: 100vh; min-width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+      <img src="./img/lbry-white-485x160.png" alt="LBRY">
+      <div style="margin-top: 24px; width: 325px; text-align: center;">
+	<h3>
+	  <span>The daemon has unexpectedly shutdown. Goodbye.
+	  </span>
+	</h3>
+      </div>
+    </div>
+  </div>
+</html>

From 4ba671d4d6587c785bc45fb59a48b34a0751b5a1 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Thu, 26 Jan 2017 11:40:44 -0600
Subject: [PATCH 07/24] revert - build into the dist folder

---
 webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index cd4cdabb5..bdfd83191 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,7 +8,7 @@ const PATHS = {
 module.exports = {
   entry: ['babel-polyfill', './js/main.js'],
   output: {
-    path: path.join(__dirname, '..', 'electron', 'dist', 'js'),
+    path: path.join(PATHS.dist, 'js'),
     publicPath: '/js/',
     filename: "bundle.js"
   },

From 3394f964ddcbdaa34d33b1fe1bb72afe69eb7e12 Mon Sep 17 00:00:00 2001
From: Job Evers-Meltzer <jobevers@users.noreply.github.com>
Date: Thu, 12 Jan 2017 12:26:36 -0600
Subject: [PATCH 08/24] Add a dev build configuration

Add caching and a faster source map for the dev builds.
This brings the rebuild time down to about 500ms for me.

dev build now puts the bundle in the electron app/js directory
so that the app can be automatically reloaded
---
 webpack.config.js     |  4 ++--
 webpack.dev.config.js | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 webpack.dev.config.js

diff --git a/webpack.config.js b/webpack.config.js
index bdfd83191..fdafd70b2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,8 +25,8 @@ module.exports = {
     loaders: [
       { test: /\.css$/, loader: "style!css" },
       {
-	    test: /\.jsx?$/,
-	    loader: 'babel',
+	test: /\.jsx?$/,
+	loader: 'babel',
         query: {
           cacheDirectory: true,
           presets:[ 'es2015', 'react', 'stage-2' ]
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
new file mode 100644
index 000000000..b84f2f94a
--- /dev/null
+++ b/webpack.dev.config.js
@@ -0,0 +1,41 @@
+const path = require('path');
+
+const PATHS = {
+  app: path.join(__dirname, 'app'),
+  dist: path.join(__dirname, '..', 'app', 'dist')
+};
+
+module.exports = {
+  entry: ['babel-polyfill', './js/main.js'],
+  output: {
+    path: path.join(PATHS.dist, 'js'),
+    publicPath: '/js/',
+    filename: "bundle.js",
+    pathinfo: true
+  },
+  debug: true,
+  cache: true,
+  devtool: 'eval',
+  module: {
+    preLoaders: [
+      {
+        test: /\.jsx?$/,
+        loaders: ['eslint'],
+        // define an include so we check just the files we need
+        include: PATHS.app
+      }
+    ],
+    loaders: [
+      { test: /\.css$/, loader: "style!css" },
+      {
+	test: /\.jsx?$/,
+	loader: 'babel',
+	query: {
+          cacheDirectory: true,
+          presets:[ 'es2015', 'react', 'stage-2' ]
+        }
+      }
+    ]
+  },
+  target: 'electron-main',
+};

From 06aba33300aa24d7d1c610aa24b93414ac281c56 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Wed, 8 Feb 2017 13:11:58 -0600
Subject: [PATCH 09/24] Use local file path for publishing instead of uploading

---
 js/component/form.js |  3 ++
 js/page/publish.js   | 88 ++------------------------------------------
 2 files changed, 6 insertions(+), 85 deletions(-)

diff --git a/js/component/form.js b/js/component/form.js
index ae4135a29..1d2b63bf6 100644
--- a/js/component/form.js
+++ b/js/component/form.js
@@ -56,6 +56,9 @@ var FormField = React.createClass({
   getValue: function() {
     if (this.props.type == 'checkbox') {
       return this.refs.field.checked;
+    }
+    else if (this.props.type == 'file') {
+      return this.refs.field.files[0].path;
     } else {
       return this.refs.field.value;
     }
diff --git a/js/page/publish.js b/js/page/publish.js
index d1d48bc3a..cf2d6f45d 100644
--- a/js/page/publish.js
+++ b/js/page/publish.js
@@ -45,14 +45,7 @@ var PublishPage = React.createClass({
       }
     }
 
-    let fileProcessing = false;
-    if (this.state.fileInfo && !this.state.tempFileReady) {
-      this.refs.file.showAdvice('Your file is still processing.');
-      this.refs.file.focus();
-      fileProcessing = true;
-    }
-
-    if (missingFieldFound || fileProcessing) {
+    if (missingFieldFound) {
       this.setState({
         submitting: false,
       });
@@ -89,7 +82,7 @@ var PublishPage = React.createClass({
       };
 
       if (this.refs.file.getValue() !== '') {
-        publishArgs.file_path = this._tempFilePath;
+	publishArgs.file_path = this.refs.file.getValue();
       }
       
       lbry.publish(publishArgs, (message) => {
@@ -114,8 +107,6 @@ var PublishPage = React.createClass({
     }
   },
   getInitialState: function() {
-    this._tempFilePath = null;
-
     return {
       rawName: '',
       name: '',
@@ -127,14 +118,12 @@ var PublishPage = React.createClass({
       myClaimValue: 0.0,
       myClaimMetadata: null,
       myClaimExists: null,
-      fileInfo: null,
       copyrightNotice: '',
       otherLicenseDescription: '',
       otherLicenseUrl: '',
       uploadProgress: 0.0,
       uploaded: false,
       errorMessage: null,
-      tempFileReady: false,
       submitting: false,
       modal: null,
     };
@@ -236,56 +225,6 @@ var PublishPage = React.createClass({
       feeCurrency: event.target.value,
     });
   },
-  handleFileChange: function(event) {
-    event.preventDefault();
-
-    var fileInput = event.target;
-
-    this._tempFilePath = null;
-    if (fileInput.files.length == 0) {
-      // File was removed
-      this.setState({
-        fileInfo: null,
-        uploadProgress: 0.0,
-        uploaded: false,
-        tempFileReady: false,
-      });
-    } else {
-      var file = fileInput.files[0];
-      this.setState({
-        fileInfo: {
-          name: file.name,
-          size: file.size,
-        },
-        uploadProgress: 0.0,
-        uploaded: false,
-        tempFileReady: false,
-      });
-
-      var xhr = new XMLHttpRequest();
-      xhr.upload.addEventListener('progress', (event) => {
-        this.setState({
-          uploadProgress: (event.loaded / event.total),
-        });
-      });
-      xhr.upload.addEventListener('load', (event) => {
-        this.setState({
-          uploaded: true,
-        });
-      });
-      xhr.addEventListener('load', (event) => {
-        this._tempFilePath = JSON.parse(xhr.responseText);
-        this.setState({
-          tempFileReady: true,
-        });
-      })
-
-      var formData = new FormData(fileInput.form);
-      formData.append('file', fileInput.files[0]);
-      xhr.open('POST', lbry.webUiUri + '/upload', true);
-      xhr.send(formData);
-    }
-  },
   handleFeePrefChange: function(feeEnabled) {
     this.setState({
       isFee: feeEnabled
@@ -333,21 +272,6 @@ var PublishPage = React.createClass({
     document.title = "Publish";
   },
   componentDidUpdate: function() {
-    if (this.state.fileInfo && !this.state.tempFileReady) {
-      // A file was chosen but the daemon hasn't finished processing it yet, i.e. it's loading, so
-      // we're displaying a progress bar and need a value for it.
-
-      // React can't unset the "value" prop (to show an "indeterminate" bar) after it's already
-      // been set, so we have to manage it manually.
-
-      if (!this.state.uploaded) {
-        // Still uploading
-        this.refs.progress.setAttribute('value', this.state.uploadProgress);
-      } else {
-        // Fully uploaded and waiting for server to finish processing, so set progress bar to "indeterminite"
-        this.refs.progress.removeAttribute('value');
-      }
-    }
   },
   // Also getting a type warning here too
   render: function() {
@@ -370,13 +294,7 @@ var PublishPage = React.createClass({
 
           <section className="card">
             <h4>Choose File</h4>
-            <FormField name="file" ref="file" type="file" onChange={this.handleFileChange} />
-            { !this.state.fileInfo ? '' :
-                (!this.state.tempFileReady ? <div>
-                                               <progress ref='progress'></progress>
-                                               {!this.state.uploaded ? <span> Importing file into LBRY...</span> : <span> Processing file...</span>}
-                                             </div>
-                                           : <div>File ready for publishing!</div>) }
+            <FormField name="file" ref="file" type="file" />
             { this.state.myClaimExists ? <div className="help">If you don't choose a file, the file from your existing claim will be used.</div> : null }
           </section>
 

From 10179772517d01f3be13e101af67d9050671e1fb Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Wed, 8 Feb 2017 15:15:45 -0600
Subject: [PATCH 10/24] change path for images

---
 js/component/common.js | 2 +-
 js/component/drawer.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/component/common.js b/js/component/common.js
index afb110871..9e163476c 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -98,7 +98,7 @@ export let Address = React.createClass({
 });
 
 export let Thumbnail = React.createClass({
-  _defaultImageUri: '/img/default-thumb.svg',
+  _defaultImageUri: lbry.imagePath('default-thumb.svg'),
   _maxLoadTime: 10000,
   _isMounted: false,
 
diff --git a/js/component/drawer.js b/js/component/drawer.js
index 7ced71391..01b7d0ffc 100644
--- a/js/component/drawer.js
+++ b/js/component/drawer.js
@@ -38,7 +38,7 @@ var Drawer = React.createClass({
       <nav id="drawer">
         <div id="drawer-handle">
           <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="close-drawer-link"/>
-          <a href="/"><img src="./img/lbry-dark-1600x528.png" style={drawerImageStyle}/></a>
+        <a href="/"><img src={lbry.imagePath("lbry-dark-1600x528.png")} style={drawerImageStyle}/></a>
         </div>
         <DrawerItem href='index.html?discover' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search"  />
         <DrawerItem href='index.html?publish' viewingPage={this.props.viewingPage} label="Publish" icon="icon-upload" />

From 93effcbb78d5eff03d93ad6d0be969e10d31db40 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Wed, 8 Feb 2017 15:16:02 -0600
Subject: [PATCH 11/24] background image isn't actually used on load screen

---
 scss/component/_load-screen.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/component/_load-screen.scss b/scss/component/_load-screen.scss
index 85093bb0d..06540324f 100644
--- a/scss/component/_load-screen.scss
+++ b/scss/component/_load-screen.scss
@@ -2,7 +2,6 @@
 
 .load-screen {
   color: white;
-  background-image: url("/img/lbry-bg.png");
   background-size: cover;
   min-height: 100vh;
   min-width: 100vw;

From 9c89652d462fae1765791b9bee1cb23ddc35fcb4 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Wed, 8 Feb 2017 15:16:15 -0600
Subject: [PATCH 12/24] change watch for electron

---
 watch.sh | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/watch.sh b/watch.sh
index ed9ada730..91893b1c6 100755
--- a/watch.sh
+++ b/watch.sh
@@ -16,7 +16,7 @@ if [ ! -d "$DIR/node_modules" ]; then
 fi
 
 # run sass once without --watch to force update. then run with --watch to keep watching
-$DIR/node_modules/.bin/node-sass --output $DIR/dist/css --sourcemap=none $DIR/scss/
-$DIR/node_modules/.bin/node-sass --output $DIR/dist/css --sourcemap=none --watch $DIR/scss/ &
+$DIR/node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none $DIR/scss/
+$DIR/node_modules/.bin/node-sass --output $DIR/../app/dist/css --sourcemap=none --watch $DIR/scss/ &
 
-node_modules/.bin/webpack --progress --colors --watch
+node_modules/.bin/webpack --config webpack.dev.config.js --progress --colors --watch

From 4068fb5fd8bfec035daff83b518e3a5d99344dda Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Wed, 15 Feb 2017 11:28:15 -0600
Subject: [PATCH 13/24] add changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a8750713..5a07f26da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,3 +6,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 (Note for Alex: fill in what kind of versioning we want to use)
 
 ## [Unreleased]
+### Changed
+ * Use local file for publishing
+ * Use local file and html5 for video playback
+ * Misc changes needed to make UI compatible with electron

From 75b28f998c1d443683e07924264c9997a8f66d5e Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Wed, 15 Feb 2017 16:46:16 -0500
Subject: [PATCH 14/24] Change Watch page to recognize "stopped" status as
 playable

---
 js/page/watch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 642272023..37efe8bf4 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -24,7 +24,7 @@ var WatchPage = React.createClass({
   },
   updateLoadStatus: function() {
     lbry.getFileStatus(this.props.name, (status) => {
-      if (!status || status.code != 'running' || status.written_bytes == 0) {
+      if (!status || ['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
         // Download hasn't started yet, so update status message (if available) then try again
 	// TODO: Would be nice to check if we have the MOOV before starting playing
         if (status) {

From 3252d29d9e7a72f37761c5630e9e8a7673e4aa4a Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 16 Feb 2017 00:19:10 -0500
Subject: [PATCH 15/24] Watch: correct status check logic

---
 js/page/watch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 37efe8bf4..18bbb97c2 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -24,7 +24,7 @@ var WatchPage = React.createClass({
   },
   updateLoadStatus: function() {
     lbry.getFileStatus(this.props.name, (status) => {
-      if (!status || ['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
+      if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
         // Download hasn't started yet, so update status message (if available) then try again
 	// TODO: Would be nice to check if we have the MOOV before starting playing
         if (status) {

From 7c7e3a97e8455d989e378961bbda1f29b8b6e813 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Wed, 15 Feb 2017 11:28:15 -0600
Subject: [PATCH 16/24] add changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a8750713..5a07f26da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,3 +6,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 (Note for Alex: fill in what kind of versioning we want to use)
 
 ## [Unreleased]
+### Changed
+ * Use local file for publishing
+ * Use local file and html5 for video playback
+ * Misc changes needed to make UI compatible with electron

From 056470b47c90f3aa73f19365767c9451bf13cded Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 3 Feb 2017 03:51:13 -0500
Subject: [PATCH 17/24] Convert to HTML5 video player (temp)

---
 js/page/watch.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 18bbb97c2..c58d10281 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -29,7 +29,7 @@ var WatchPage = React.createClass({
 	// TODO: Would be nice to check if we have the MOOV before starting playing
         if (status) {
           this.setState({
-            loadStatusMessage: status.message
+            loadStatusMessage: status.message,
           });
         }
         setTimeout(() => { this.updateLoadStatus() }, 250);
@@ -57,8 +57,7 @@ var WatchPage = React.createClass({
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
         : <main className="full-screen">
-            <video controls width="100%" height="100%" id="video" ref="video">
-            </video>
+            <video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name} />
           </main>
     );
   }

From b6982854d81c37ff852c7bce91e943fa6909cc00 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 3 Feb 2017 05:25:05 -0500
Subject: [PATCH 18/24] Add Back button to Watch page

---
 js/page/watch.js      | 18 +++++++++++++++-
 scss/all.scss         |  3 ++-
 scss/page/_watch.scss | 50 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 scss/page/_watch.scss

diff --git a/js/page/watch.js b/js/page/watch.js
index c58d10281..4825049f2 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import {Icon} from '../component/common.js';
+import {Link} from '../component/link.js';
 import lbry from '../lbry.js';
 import LoadScreen from '../component/load_screen.js'
 
@@ -22,6 +24,9 @@ var WatchPage = React.createClass({
     lbry.getStream(this.props.name);
     this.updateLoadStatus();
   },
+  handleBackClicked: function() {
+    history.back();
+  },
   updateLoadStatus: function() {
     lbry.getFileStatus(this.props.name, (status) => {
       if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
@@ -56,8 +61,19 @@ var WatchPage = React.createClass({
     return (
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
-        : <main className="full-screen">
+        : <main className="video full-screen">
             <video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name} />
+            <div className="video__overlay">
+              <div className="video__back">
+                <Link icon="icon-arrow-circle-o-left" className="video__back-link" onClick={this.handleBackClicked}/>
+                <div className="video__back-label">
+                  <Icon icon="icon-caret-left" className="video__back-label-arrow" />
+                  <div className="video__back-label-content">
+                    Back to LBRY
+                  </div>
+                </div>
+              </div>
+            </div>
           </main>
     );
   }
diff --git a/scss/all.scss b/scss/all.scss
index 452cbbcac..8729eb666 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -10,4 +10,5 @@
 @import "component/_menu.scss";
 @import "component/_tooltip.scss";
 @import "component/_load-screen.scss";
-@import "page/_developer.scss";
\ No newline at end of file
+@import "page/_developer.scss";
+@import "page/_watch.scss";
\ No newline at end of file
diff --git a/scss/page/_watch.scss b/scss/page/_watch.scss
new file mode 100644
index 000000000..ab3c9a577
--- /dev/null
+++ b/scss/page/_watch.scss
@@ -0,0 +1,50 @@
+.video {
+  background: #000;
+}
+
+.video__overlay {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  color: #fff;
+  z-index: 1;
+}
+
+.video__back {
+  margin-top: 30px;
+  margin-left: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.video__back-link {
+  font-size: 50px;
+}
+
+.video__back-label {
+  opacity: 0;
+  transition: opacity 100ms ease-in;
+}
+
+.video__back-link:hover + .video__back-label {
+  opacity: 1;
+}
+
+.video__back-label-arrow {
+  color: darken($color-primary, 5%);
+  font-size: 20px;
+}
+
+.video__back-label-content {
+  display: inline-block;
+  margin-left: -2px;
+  font-size: 20px;
+  padding: 10px;
+  border-radius: 3px;
+  background-color: darken($color-primary, 5%);
+  color: #fff;
+  pointer-events: none;
+}

From 471bf2fb103066329e8f618dc37da5e7108fcc3a Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Wed, 8 Feb 2017 13:27:34 -0500
Subject: [PATCH 19/24] change bg color

---
 scss/page/_watch.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/scss/page/_watch.scss b/scss/page/_watch.scss
index ab3c9a577..01b3b7b93 100644
--- a/scss/page/_watch.scss
+++ b/scss/page/_watch.scss
@@ -33,18 +33,21 @@
   opacity: 1;
 }
 
+$video-back-background: #333;
+$video-back-size: 20px;
+
 .video__back-label-arrow {
-  color: darken($color-primary, 5%);
-  font-size: 20px;
+  color: $video-back-background;
+  font-size: $video-back-size;
 }
 
 .video__back-label-content {
   display: inline-block;
   margin-left: -2px;
-  font-size: 20px;
-  padding: 10px;
+  font-size: $video-back-size;
+  padding: $spacing-vertical / 2;
   border-radius: 3px;
-  background-color: darken($color-primary, 5%);
+  background-color: $video-back-background;
   color: #fff;
   pointer-events: none;
 }

From 6059c3bebb3f0ce1cc7787ff14801ea80cd43a4a Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 16 Feb 2017 02:18:26 -0500
Subject: [PATCH 20/24] Watch: Update Back to LBRY button for Electron

---
 js/page/watch.js      | 61 +++++++++++++++++++++++++++++++++++--------
 scss/page/_watch.scss |  2 --
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 4825049f2..640d43ac2 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -9,6 +9,10 @@ const VideoStream = require('videostream');
 
 
 var WatchPage = React.createClass({
+  _isMounted: false,
+  _controlsHideDelay: 3000, // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us
+  _controlsHideTimeout: null,
+
   propTypes: {
     name: React.PropTypes.string,
   },
@@ -18,6 +22,7 @@ var WatchPage = React.createClass({
       readyToPlay: false,
       loadStatusMessage: "Requesting stream",
       mimeType: null,
+      controlsShown: false,
     };
   },
   componentDidMount: function() {
@@ -27,6 +32,37 @@ var WatchPage = React.createClass({
   handleBackClicked: function() {
     history.back();
   },
+  handleMouseMove: function() {
+    if (this._controlsTimeout) {
+      clearTimeout(this._controlsTimeout);
+    }
+
+    if (!this.state.controlsShown) {
+      this.setState({
+        controlsShown: true,
+      });
+    }
+    this._controlsTimeout = setTimeout(() => {
+      if (!this.isMounted) {
+        return;
+      }
+
+      this.setState({
+        controlsShown: false,
+      });
+    }, this._controlsHideDelay);
+  },
+  handleMouseOut: function() {
+    if (this._controlsTimeout) {
+      clearTimeout(this._controlsTimeout);
+    }
+
+    if (this.state.controlsShown) {
+      this.setState({
+        controlsShown: false,
+      });
+    }
+  },
   updateLoadStatus: function() {
     lbry.getFileStatus(this.props.name, (status) => {
       if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
@@ -61,19 +97,22 @@ var WatchPage = React.createClass({
     return (
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
-        : <main className="video full-screen">
-            <video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name} />
-            <div className="video__overlay">
-              <div className="video__back">
-                <Link icon="icon-arrow-circle-o-left" className="video__back-link" onClick={this.handleBackClicked}/>
-                <div className="video__back-label">
-                  <Icon icon="icon-caret-left" className="video__back-label-arrow" />
-                  <div className="video__back-label-content">
-                    Back to LBRY
+        : <main className="video full-screen" onMouseMove={this.handleMouseMove} onMouseOut={this.handleMouseOut}>
+            <video width="100%" height="100%" id="video" ref="video" src={'/view?name=' + this.props.name}
+                   controls={this.state.controlsShown}/>
+            {this.state.controlsShown
+              ? <div className="video__overlay">
+                  <div className="video__back">
+                    <Link icon="icon-arrow-circle-o-left" className="video__back-link" onClick={this.handleBackClicked}/>
+                    <div className="video__back-label">
+                      <Icon icon="icon-caret-left" className="video__back-label-arrow" />
+                      <div className="video__back-label-content">
+                        Back to LBRY
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
+              : null}
           </main>
     );
   }
diff --git a/scss/page/_watch.scss b/scss/page/_watch.scss
index 01b3b7b93..23fbcc171 100644
--- a/scss/page/_watch.scss
+++ b/scss/page/_watch.scss
@@ -5,9 +5,7 @@
 .video__overlay {
   position: absolute;
   top: 0px;
-  bottom: 0px;
   left: 0px;
-  right: 0px;
   color: #fff;
   z-index: 1;
 }

From 5b454a383798f19aa11b661d770e183dc6b76336 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Thu, 16 Feb 2017 21:26:29 -0600
Subject: [PATCH 21/24] download updates using node

---
 js/app.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/js/app.js b/js/app.js
index 68c03a648..dd3c86e74 100644
--- a/js/app.js
+++ b/js/app.js
@@ -19,6 +19,11 @@ import Header from './component/header.js';
 import Modal from './component/modal.js';
 import {Link} from './component/link.js';
 
+
+const remote = require('electron').remote;
+const {download} = remote.require('electron-dl');
+
+
 var App = React.createClass({
   _error_key_labels: {
     connectionString: 'API connection string',
@@ -78,7 +83,7 @@ var App = React.createClass({
         this.setState({
           modal: 'upgrade',
           isOldOSX: isOldOSX,
-          updateUrl: updateUrl,
+          updateUrl: versionInfo.lbrynet_update_url,
         })
       });
     });
@@ -97,8 +102,14 @@ var App = React.createClass({
     });
   },
   handleUpgradeClicked: function() {
-    lbry.stop();
-    window.location = this.state.updateUrl;
+    // TODO: create a callback for onProgress and have the UI
+    //       show download progress
+    // TODO: remove the saveAs popup. Thats just me being lazy and having
+    //       some indication that the download is happening
+    // TODO: calling lbry.stop() ends up displaying the "daemon
+    //       unexpectedly stopped" page. Have a better way of shutting down
+    download(remote.getCurrentWindow(), this.state.updateUrl, {saveAs: true})
+      .then(dl => lbry.stop())
   },
   handleSkipClicked: function() {
     sessionStorage.setItem('upgradeSkipped', true);

From 86351d17362148168507958d33aad6111fd634aa Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Mon, 20 Feb 2017 12:56:15 -0600
Subject: [PATCH 22/24] Improve updates download

- create progress bar modal
- trigger app shutdown on successful download
- move update url logic to the website
---
 js/app.js    | 30 ++++++++++++++++--------------
 package.json |  1 +
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/js/app.js b/js/app.js
index dd3c86e74..9b7348149 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import {Line} from 'rc-progress';
+
 import lbry from './lbry.js';
 import SettingsPage from './page/settings.js';
 import HelpPage from './page/help.js';
@@ -20,9 +22,10 @@ import Modal from './component/modal.js';
 import {Link} from './component/link.js';
 
 
-const remote = require('electron').remote;
+const {remote, ipcRenderer} = require('electron');
 const {download} = remote.require('electron-dl');
 
+const UPDATE_URL = 'https://lbry.io/get/latest';
 
 var App = React.createClass({
   _error_key_labels: {
@@ -48,8 +51,8 @@ var App = React.createClass({
       pageArgs: typeof val !== 'undefined' ? val : null,
       errorInfo: null,
       modal: null,
-      updateUrl: null,
       isOldOSX: null,
+      downloadProgress: null,
     };
   },
   componentWillMount: function() {
@@ -65,25 +68,15 @@ var App = React.createClass({
       lbry.getVersionInfo((versionInfo) => {
         var isOldOSX = false;
         if (versionInfo.os_system == 'Darwin') {
-          var updateUrl = 'https://lbry.io/get/lbry.dmg';
-
           var maj, min, patch;
           [maj, min, patch] = versionInfo.lbrynet_version.split('.');
           if (maj == 0 && min <= 2 && patch <= 2) {
             isOldOSX = true;
           }
-        } else if (versionInfo.os_system == 'Linux') {
-          var updateUrl = 'https://lbry.io/get/lbry.deb';
-        } else if (versionInfo.os_system == 'Windows') {
-          var updateUrl = 'https://lbry.io/get/lbry.msi';
-        } else {
-          var updateUrl = 'https://lbry.io/get';
         }
-
         this.setState({
           modal: 'upgrade',
           isOldOSX: isOldOSX,
-          updateUrl: versionInfo.lbrynet_update_url,
         })
       });
     });
@@ -108,8 +101,12 @@ var App = React.createClass({
     //       some indication that the download is happening
     // TODO: calling lbry.stop() ends up displaying the "daemon
     //       unexpectedly stopped" page. Have a better way of shutting down
-    download(remote.getCurrentWindow(), this.state.updateUrl, {saveAs: true})
-      .then(dl => lbry.stop())
+    let options = {
+      onProgress: (p) => this.setState({downloadProgress: Math.round(p * 100)}),
+    }
+    download(remote.getCurrentWindow(), UPDATE_URL, options)
+      .then(dl => ipcRenderer.send('shutdown'));
+    this.setState({modal: 'downloading'});
   },
   handleSkipClicked: function() {
     sessionStorage.setItem('upgradeSkipped', true);
@@ -222,6 +219,11 @@ var App = React.createClass({
               : null}
 
           </Modal>
+          // TODO: have color refence css color-primary
+          <Modal isOpen={this.state.modal == 'downloading'} contentLabel="Downloading Update" type="custom">
+            Downloading Update: {this.state.downloadProgress}% Complete
+            <Line percent={this.state.downloadProgress} strokeWidth="4"/>
+          </Modal>
           <Modal isOpen={this.state.modal == 'error'} contentLabel="Error" type="custom"
                  className="error-modal" overlayClassName="error-modal-overlay"  >
             <h3 className="modal__header">Error</h3>
diff --git a/package.json b/package.json
index d9d719fc7..70b849611 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "clamp-js-main": "^0.11.1",
     "mediaelement": "^2.23.4",
     "node-sass": "^3.8.0",
+    "rc-progress": "^2.0.6",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
     "react-modal": "^1.5.2",

From 0005280cb6cad0b05290daffc840ea2db6b38650 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Mon, 20 Feb 2017 13:28:59 -0600
Subject: [PATCH 23/24] revert to detecting the OS client side for update url

---
 js/app.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/js/app.js b/js/app.js
index 9b7348149..fdf8b1028 100644
--- a/js/app.js
+++ b/js/app.js
@@ -25,7 +25,6 @@ import {Link} from './component/link.js';
 const {remote, ipcRenderer} = require('electron');
 const {download} = remote.require('electron-dl');
 
-const UPDATE_URL = 'https://lbry.io/get/latest';
 
 var App = React.createClass({
   _error_key_labels: {
@@ -51,6 +50,7 @@ var App = React.createClass({
       pageArgs: typeof val !== 'undefined' ? val : null,
       errorInfo: null,
       modal: null,
+      updateUrl: null,
       isOldOSX: null,
       downloadProgress: null,
     };
@@ -68,15 +68,28 @@ var App = React.createClass({
       lbry.getVersionInfo((versionInfo) => {
         var isOldOSX = false;
         if (versionInfo.os_system == 'Darwin') {
+          var updateUrl = 'https://lbry.io/get/lbry.dmg';
+
           var maj, min, patch;
           [maj, min, patch] = versionInfo.lbrynet_version.split('.');
           if (maj == 0 && min <= 2 && patch <= 2) {
             isOldOSX = true;
           }
+        } else if (versionInfo.os_system == 'Linux') {
+          var updateUrl = 'https://lbry.io/get/lbry.deb';
+        } else if (versionInfo.os_system == 'Windows') {
+	  // A little weird, but for electron, the installer is
+	  // actually an exe. Maybe a better url would
+	  // be something like /get/windows ?
+          var updateUrl = 'https://lbry.io/get/lbry.msi';
+        } else {
+          var updateUrl = 'https://lbry.io/get';
         }
+
         this.setState({
           modal: 'upgrade',
           isOldOSX: isOldOSX,
+          updateUrl: updateUrl,
         })
       });
     });
@@ -104,7 +117,7 @@ var App = React.createClass({
     let options = {
       onProgress: (p) => this.setState({downloadProgress: Math.round(p * 100)}),
     }
-    download(remote.getCurrentWindow(), UPDATE_URL, options)
+    download(remote.getCurrentWindow(), this.state.updateUrl, options)
       .then(dl => ipcRenderer.send('shutdown'));
     this.setState({modal: 'downloading'});
   },

From a973c59051d941e2d48d6c5b4fa3aa90d0427445 Mon Sep 17 00:00:00 2001
From: jobevers <jobevers@users.noreply.github.com>
Date: Mon, 20 Feb 2017 16:03:45 -0600
Subject: [PATCH 24/24] update bumpversion

---
 .bumpversion.cfg | 20 +++++++++++++++++++-
 CHANGELOG.md     |  2 +-
 package.json     |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/.bumpversion.cfg b/.bumpversion.cfg
index a5f60a198..b24d9073c 100644
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@@ -1,5 +1,23 @@
 [bumpversion]
-current_version = 0.1.1
+current_version = 0.9.0rc6
 commit = True
 tag = True
+parse = (?P<major>\d+)\.(?P<minor>\d+)\.(?P<patch>\d+)((?P<release>[a-z]+)(?P<candidate>\d+))?
+serialize = 
+	{major}.{minor}.{patch}{release}{candidate}
+	{major}.{minor}.{patch}
+
+[bumpversion:file:package.json]
+
+[bumpversion:part:release]
+optional_value = production
+values = 
+	rc
+	production
+
+[bumpversion:file:CHANGELOG.md]
+search = [Unreleased]
+replace = [Unreleased]
+	
+	\#\# [{new_version}] - {now:%Y-%m-%d}
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a07f26da..1cd70fe77 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/).
 
-(Note for Alex: fill in what kind of versioning we want to use)
+The UI versions track the corresponding version in https://github.com/lbryio/lbry
 
 ## [Unreleased]
 ### Changed
diff --git a/package.json b/package.json
index 70b849611..d9f0733e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lbry-web-ui",
-  "version": "1.0.0",
+  "version": "0.9.0rc6",
   "description": "LBRY web ui",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"