crude ability to jump to discover

dist/index.html

@@ -33,7 +33,7 @@
       <script src="./js/component/header.js"></script>
       <script src="./js/component/drawer.js"></script>
       <script src="./js/component/splash.js"></script>
-      <script src="./js/page/home.js"></script>
+      <script src="./js/page/discover.js"></script>
       <script src="./js/page/settings.js"></script>
       <script src="./js/page/help.js"></script>
       <script src="./js/page/watch.js"></script>

js/app.js

@@ -6,16 +6,23 @@ var App = React.createClass({
 
     [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
 
-    if (param && ['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
+    if (param && ['settings', 'discover', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
       viewingPage = param;
     }
 
     return {
-      viewingPage: viewingPage ? viewingPage : 'home',
+      viewingPage: viewingPage ? viewingPage : 'discover',
       drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true,
       pageArgs: val,
     };
   },
+  componentDidMount: function() {
+    lbry.getStartNotice(function(notice) {
+      if (notice) {
+        alert(notice);
+      }
+    });
+  },
   componentWillMount: function() {
     lbry.checkNewVersionAvailable(function(isAvailable) {
 
@@ -59,12 +66,15 @@ var App = React.createClass({
     sessionStorage.setItem('drawerOpen', false);
     this.setState({ drawerOpen: false });
   },
+  onSearchStart: function() {
+    this.setState({ viewingPage: 'discover' });
+  },
   getMainContent: function()
   {
     switch(this.state.viewingPage)
     {
-      case 'home':
+      case 'discover':
-        return <HomePage />;
+        return <DiscoverPage />;
       case 'settings':
         return <SettingsPage />;
       case 'help':
@@ -83,8 +93,6 @@ var App = React.createClass({
         return <WalletPage />;
       case 'show':
         return <DetailPage name={this.state.pageArgs} />;
-      case 'wallet':
-        return <WalletPage />;
       case 'publish':
         return <PublishPage />;
     }
@@ -96,7 +104,7 @@ var App = React.createClass({
       <div id="window" className={ this.state.drawerOpen ? 'drawer-open' : 'drawer-closed' }>
         <Drawer onCloseDrawer={this.closeDrawer} viewingPage={this.state.viewingPage} />
         <div id="main-content">
-          <Header onOpenDrawer={this.openDrawer} />
+          <Header onOpenDrawer={this.openDrawer} onSearchStart={this.onSearchStart} />
           {mainContent}
         </div>
       </div>

js/component/drawer.js

@@ -23,18 +23,20 @@ var Drawer = React.createClass({
     }.bind(this));
   },
   render: function() {
+    var isLinux = false && /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
     return (
       <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>
         </div>
-        <DrawerItem href='/?home' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search"  />
+        <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='/?files' viewingPage={this.props.viewingPage}  label="My Files" icon='icon-cloud-download' />
         <DrawerItem href="/?wallet" 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}
       </nav>
     );
   }

js/component/header.js

@@ -24,13 +24,30 @@ var Header = React.createClass({
       isScrolled: event.srcElement.body.scrollTop > 0
     });
   },
+  onQueryChange: function(event) {
+
+    this.props.onSearchStart();
+
+    if (this.userTypingTimer)
+    {
+      clearTimeout(this.userTypingTimer);
+    }
+
+    //@TODO: Switch to React.js timing
+    this.userTypingTimer = setTimeout(this.search, 800); // 800ms delay, tweak for faster/slower
+
+    // this.setState({
+    //   searching: event.target.value.length > 0,
+    //   query: event.target.value
+    // });
+  },
   render: function() {
-    var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
     return (
       <header id="header" className={this.state.isScrolled ? 'header-scrolled' : 'header-unscrolled'}>
         <Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
-        {isLinux ? <Link href="/?start" icon="icon-close" className="close-lbry-link" /> : null}
         <h1>{ this.state.title }</h1>
+        <input type="search" onChange={this.onQueryChange}
+               placeholder="Find movies, music, games, and more"/>
       </header>
     );
   }

js/main.js

@@ -6,7 +6,7 @@ var init = function() {
     <SplashScreen message="Connecting" onLoadDone={function() {
       // On home page, if the balance is 0, display claim code page instead of home page.
       // Find somewhere better for this logic
-      if (window.location.search == '' || window.location.search == '?' || window.location.search == 'home') {
+      if (window.location.search == '' || window.location.search == '?' || window.location.search == 'discover') {
         lbry.getBalance((balance) => {
           if (balance <= 0) {
             window.location.href = '?claim';

js/page/discover.js

@@ -265,13 +265,13 @@ var FeaturedContent = React.createClass({
   }
 });
 
-var discoverMainStyle = {
+var DiscoverPage = React.createClass({
-  color: '#333'
-};
-
-var Discover = React.createClass({
   userTypingTimer: null,
 
+  componentDidMount: function() {
+    document.title = "Discover";
+  },
+
   getInitialState: function() {
     return {
       results: [],
@@ -321,9 +321,7 @@ var Discover = React.createClass({
 
   render: function() {
     return (
-      <main style={discoverMainStyle}>
+      <main>
-        <section><input type="search" style={searchInputStyle} onChange={this.onQueryChange}
-                        placeholder="Find movies, music, games, and more"/></section>
         { this.state.searching ? <SearchActive /> : null }
         { !this.state.searching && this.state.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
         { !this.state.searching && this.state.query && !this.state.results.length ? <SearchNoResults query={this.state.query} /> : null }
@@ -332,19 +330,3 @@ var Discover = React.createClass({
     );
   }
 });
-
-var HomePage = React.createClass({
-  componentDidMount: function() {
-    document.title = "Discover";
-    lbry.getStartNotice(function(notice) {
-      if (notice) {
-        alert(notice);
-      }
-    });
-  },
-  render: function() {
-    return (
-      <Discover />
-    );
-  }
-});

js/page/my_files.js

@@ -126,6 +126,7 @@ var MyFilesRow = React.createClass({
 });
 
 var MyFilesPage = React.createClass({
+  fileTimeout: null,
   getInitialState: function() {
     return {
       filesInfo: null,
@@ -137,12 +138,18 @@ var MyFilesPage = React.createClass({
   componentWillMount: function() {
     this.updateFilesInfo();
   },
+  componentWillUnmount: function() {
+    if (this.fileTimeout)
+    {
+      clearTimeout(this.fileTimeout);
+    }
+  },
   updateFilesInfo: function() {
     lbry.getFilesInfo((filesInfo) => {
       this.setState({
         filesInfo: (filesInfo ? filesInfo : []),
       });
-      setTimeout(() => { this.updateFilesInfo() }, 1000);
+      this.fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
     });
   },
   render: function() {

scss/_canvas.scss

@@ -67,7 +67,7 @@ $drawer-width: 240px;
 #window.drawer-open
 {
   #main-content { margin-left: $drawer-width; }
-  .open-drawer-link { display: none; }
+  .open-drawer-link { visibility: hidden; }
 }
 
 #header
@@ -81,7 +81,7 @@ $drawer-width: 240px;
   left: 0;
   width: 100%;
   box-sizing: border-box;
-  h1 { font-size: 1.8em; line-height: $header-height - $spacing-vertical; }
+  h1 { font-size: 1.8em; line-height: $header-height - $spacing-vertical; display: inline-block; }
   &.header-scrolled
   {
     box-shadow: $default-box-shadow;