Add claim code page

dist/index.html

@@ -34,6 +34,7 @@
       <script src="./js/page/report.js"></script>
       <script src="./js/page/my_files.js"></script>
       <script src="./js/page/start.js"></script>
+      <script src="./js/page/claim_code.js"></script>
       <script src="./js/app.js"></script>
       <script src="./js/main.js"></script>
     </body>

js/app.js

@@ -4,7 +4,7 @@ var App = React.createClass({
     var match, param, val;
     [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
 
-    if (['settings', 'help', 'start', 'watch', 'report', 'files'].indexOf(param) != -1) {
+    if (['settings', 'help', 'start', 'watch', 'report', 'files', 'claim'].indexOf(param) != -1) {
       var viewingPage = param;
     } else {
       var viewingPage = 'home';
@@ -56,6 +56,8 @@ var App = React.createClass({
       return <MyFilesPage />;
     } else if (this.state.viewingPage == 'start') {
       return <StartPage />;
+    } else if (this.state.viewingPage == 'claim') {
+      return <ClaimCodePage />;
     }
   }
 });

js/lbry.js

@@ -77,6 +77,14 @@ lbry.getStartNotice = function(callback) {
   lbry.call('get_start_notice', {}, callback);
 }
 
+lbry.checkFirstRun = function(callback) {
+  lbry.call('is_first_run', {}, callback);
+}
+
+lbry.getNewAddress = function(callback) {
+  lbry.call('get_new_address', {}, callback);
+}
+
 lbry.getSettings = function(callback) {
   lbry.call('get_settings', {}, callback);
 };

js/main.js

@@ -4,7 +4,19 @@ var init = function() {
 
   ReactDOM.render(
     <SplashScreen message="Connecting" onLoadDone={function() {
-      ReactDOM.render(<App/>, canvas);
+      // 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') {
+        lbry.getBalance((balance) => {
+          if (balance <= 0) {
+            window.location.href = '?claim';
+          } else {
+            ReactDOM.render(<App/>, canvas);
+          }
+        });
+      } else {
+        ReactDOM.render(<App/>, canvas);
+      }
     }}/>,
     canvas
   );

js/page/claim_code.js

@@ -0,0 +1,89 @@
+var claimCodePageStyle = {
+  textAlign: 'center',
+}, claimCodeContentStyle = {
+  display: 'inline-block',
+  textAlign: 'left',
+  width: '600px',
+}, claimCodeLabelStyle = {
+  display: 'inline-block',
+  cursor: 'default',
+  width: '130px',
+};
+
+var ClaimCodePage = React.createClass({
+  getInitialState: function() {
+    return {
+      submitting: false,
+    }
+  },
+  handleSubmit: function() {
+    if (!this.refs.code.value) {
+      alert('Please enter an invitation code or choose "Skip."')
+    }
+
+    this.setState({
+      submitting: true
+    });
+
+    lbry.getNewAddress((address) => {
+      var code = this.refs.code.value;
+      var email = this.refs.email.value;
+
+      var xhr = new XMLHttpRequest;
+      xhr.addEventListener('load', () => {
+        var response = JSON.parse(xhr.responseText);
+
+        if (response.success) {
+          alert('Your invite code has been redeemed! 200 LBRY credits will be added to your balance shortly.');
+          // Send them to "landing" instead of "home" (home will just trigger the message all over again until the credits arrive)
+          window.location = '?landing';
+        } else {
+          alert("You've entered an invalid code, or one that's already been claimed. Please check your code and try again.");
+          this.setState({
+            submitting: false
+          });
+        }
+      });
+
+      xhr.addEventListener('error', () => {
+        this.setState({
+          submitting: false
+        });
+        alert('LBRY couldn\'t connect to our servers to confirm your invitation code. Please check your ' +
+              'internet connection. If you continue to have problems, you can still browse LBRY and ' +
+              'visit the Settings page to redeem your code later.');
+      });
+
+      xhr.open('POST', 'https://invites.lbry.io', true);
+      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+      xhr.send('code=' + code + '&address=' + address + (email ? ('&email=' + email) : ''));
+    });
+  },
+  handleSkip: function() {
+    alert('Welcome to LBRY! You can visit the Settings page to redeem an invite code at any time.');
+    window.location = '?landing';
+  },
+  render: function() {
+    return (
+      <main className="page" style={claimCodePageStyle}>
+      <h1>Claim your beta invitation code</h1>
+      <section style={claimCodeContentStyle}>
+        <p>Thanks for beta testing LBRY! Enter your invitation code below to receive your 200 free LBRY credits.</p>
+        <p>You may also enter your email address. This will add you to our mailing list (if you're not already on it)
+           as well as making you eligible for future rewards for beta testers.</p>
+      </section>
+      <section>
+        <form>
+          <section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
+          <section><label style={claimCodeLabelStyle} htmlFor="email">Email (optional)</label><input name="email" ref="email" /></section>
+        </form>
+      </section>
+      <section>
+        <Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
+              disabled={this.state.submitting} onClick={this.handleSubmit} />
+        <Link button="primary" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
+      </section>
+      </main>
+    );
+  }
+});

js/page/settings.js

@@ -113,6 +113,11 @@ var SettingsPage = React.createClass({
             <input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
           </label>
         </section>
+        <section>
+          <h4>Claim invite code</h4>
+          <Link href="?claim" label="Claim a LBRY beta invite code"/>
+        </section>
+
         <section>
           <Link href="/" label="<< Return"/>
         </section>

js/page/watch.js

@@ -44,7 +44,7 @@ var WatchPage = React.createClass({
         {this.state.loadStatusMessage}...
       </div>
       <video ref="player" width="100%" height="100%">
-        <source type={this.state.mimeType} src={'/view?name=' + this.props.name} />
+        <source type={this.state.mimeType == 'audio/m4a' ? 'video/mp4' : this.state.mimeType} src={'/view?name=' + this.props.name} />
       </video>
       </main>
     );