ui/js/component/modal-page.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+
+export const ModalPage = React.createClass({
+  render: function() {
+    return (
+      <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
+                  className={(this.props.className || '') + ' modal-page'}
+                  overlayClassName={(this.props.overlayClassName || '') + ' modal-page-overlay'}>
+        <div className="modal-page__content">
+          {this.props.children}
+        </div>
+      </ReactModal>
+    );
+  }
+});
+
+export default ModalPage;

ui/js/component/welcome.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ModalPage from './modal-page.js';
+import {Link} from '../component/link.js';
+
+export const Welcome = React.createClass({
+  propTypes: {
+    onDone: React.PropTypes.func.isRequired,
+  },
+  handleOKClicked: function() {
+    this.props.onDone();
+  },
+  render: function() {
+    return (
+      <ModalPage contentLabel="Welcome to LBRY" {...this.props}>
+        <h1>Welcome to LBRY</h1>
+        Content will go here...
+        <section>
+          <Link button="primary" label="OK" onClick={this.handleOKClicked} />
+        </section>
+      </ModalPage>
+    );
+  }
+});
+

ui/js/page/discover.js

@@ -5,6 +5,7 @@ import {FileTile} from '../component/file-tile.js';
 import {Link} from '../component/link.js';
 import {ToolTip} from '../component/tooltip.js';
 import {BusyMessage} from '../component/common.js';
+import {Welcome} from '../component/welcome.js';
 
 var fetchResultsStyle = {
     color: '#888',
@@ -105,6 +106,10 @@ var FeaturedContent = React.createClass({
 var DiscoverPage = React.createClass({
   userTypingTimer: null,
 
+  propTypes: {
+    showWelcome: React.PropTypes.bool.isRequired,
+  },
+
   componentDidUpdate: function() {
     if (this.props.query != this.state.query)
     {
@@ -112,6 +117,12 @@ var DiscoverPage = React.createClass({
     }
   },
 
+  getDefaultProps: function() {
+    return {
+      showWelcome: false,
+    }
+  },
+
   componentWillReceiveProps: function(nextProps, nextState) {
     if (nextProps.query != nextState.query)
     {
@@ -128,6 +139,12 @@ var DiscoverPage = React.createClass({
     lighthouse.search(query).then(this.searchCallback);
   },
 
+  handleWelcomeDone: function() {
+    this.setState({
+      welcomeComplete: true,
+    });
+  },
+
   componentWillMount: function() {
     document.title = "Discover";
     if (this.props.query) {
@@ -138,6 +155,7 @@ var DiscoverPage = React.createClass({
 
   getInitialState: function() {
     return {
+      welcomeComplete: false,
       results: [],
       query: this.props.query,
       searching: ('query' in this.props) && (this.props.query.length > 0)
@@ -161,6 +179,7 @@ var DiscoverPage = React.createClass({
         { !this.state.searching && this.props.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
         { !this.state.searching && this.props.query && !this.state.results.length ? <SearchNoResults query={this.props.query} /> : null }
         { !this.props.query && !this.state.searching ? <FeaturedContent /> : null }
+        <Welcome isOpen={this.props.showWelcome && !this.state.welcomeComplete} onDone={this.handleWelcomeDone} />
       </main>
     );
   }

ui/scss/all.scss

@@ -11,6 +11,7 @@
 @import "component/_tooltip.scss";
 @import "component/_load-screen.scss";
 @import "component/_channel-indicator.scss";
+@import "component/_modal-page.scss";
 @import "page/_developer.scss";
 @import "page/_watch.scss";
 @import "page/_reward.scss";

ui/scss/component/_modal-page.scss

@@ -0,0 +1,33 @@
+.modal-page-overlay {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: rgba(255, 255, 255, 0.74902);
+  z-index: 9999;
+}
+
+.modal-page {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid rgb(204, 204, 204);
+  background: rgb(255, 255, 255);
+  overflow: auto;
+  border-radius: 4px;
+  outline: none;
+  padding: 36px;
+
+  top: 25px;
+  left: 25px;
+  right: 25px;
+  bottom: 25px;
+}