Add a notice in Chrome when dloading files >500MB.

css/index.styl

@@ -37,18 +37,23 @@ p {
     color: gray;
     font: 18px/22px "Quicksand", sans-serif;
     text-align: center;
-    margin: 0 0;
+    margin: 0;
 }
 
 p.byline {
-  position: absolute;
+    position: absolute;
-  bottom: 0;
+    bottom: 0;
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
-  margin-bottom: 15px;
+    margin-bottom: 15px;
-  left: 0;
+    left: 0;
-  right: 0;
+    right: 0;
-  font: 16px/22px "Quicksand", sans-serif;
+    font: 16px/22px "Quicksand", sans-serif;
+}
+
+p.notice {
+    margin: 10px 0;
+    font-style: italic;
 }
 
 .drop-zone {

lib/actions/SupportActions.js

@@ -3,6 +3,7 @@ import alt from '../alt'
 export default alt.createActions(class SupportActions {
   constructor() {
     this.generateActions(
+      'isChrome',
       'noSupport'
     )
   }

lib/client.js

@@ -14,4 +14,8 @@ window.FilePizza = () => {
   })
 
   if (!webrtcSupport.support) SupportActions.noSupport()
+
+  let isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
+  if (isChrome) SupportActions.isChrome()
+
 }

lib/components/ChromeNotice.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import DownloadStore from '../stores/DownloadStore'
+import SupportStore from '../stores/SupportStore'
+
+function getState() {
+  return {
+    active: SupportStore.getState().isChrome && DownloadStore.getState().file.size >= 500000000 
+  }
+}
+
+export default class ChromeNotice extends React.Component {
+
+  constructor() {
+    this.state = getState()
+
+    this._onChange = () => {
+      this.setState(getState())
+    }
+  }
+
+  componentDidMount() {
+    DownloadStore.listen(this._onChange)
+    SupportStore.listen(this._onChange)
+  }
+
+  componentDidUnmount() {
+    DownloadStore.unlisten(this._onChange)
+    SupportStore.unlisten(this._onChange)
+  }
+
+  render() {
+    if (this.state.active) {
+      return <p className="notice">Chrome has issues downloading files > 500 MB. Try using Firefox instead.</p>
+    } else {
+      return null
+    }
+  }
+
+}

lib/components/DownloadPage.js

@@ -1,4 +1,5 @@
 import Centered from './Centered'
+import ChromeNotice from './ChromeNotice'
 import DownloadActions from '../actions/DownloadActions'
 import DownloadButton from './DownloadButton'
 import DownloadStore from '../stores/DownloadStore'
@@ -45,6 +46,7 @@ export default class DownloadPage extends React.Component {
             name={this.state.file.name}
             size={this.state.file.size} />
 
+          <ChromeNotice />
           <DownloadButton onClick={this.downloadFile.bind(this)} />
 
         </Centered>
@@ -58,6 +60,7 @@ export default class DownloadPage extends React.Component {
             name={this.state.file.name}
             size={this.state.file.size} />
 
+          <ChromeNotice />
           <ProgressBar value={this.state.progress} />
 
         </Centered>
@@ -70,6 +73,7 @@ export default class DownloadPage extends React.Component {
             name={this.state.file.name}
             size={this.state.file.size} />
 
+          <ChromeNotice />
           <ProgressBar value={-1} />
 
         </Centered>
@@ -82,6 +86,7 @@ export default class DownloadPage extends React.Component {
             name={this.state.file.name}
             size={this.state.file.size} />
 
+          <ChromeNotice />
           <ProgressBar value={1} />
 
         </Centered>

lib/stores/SupportStore.js

@@ -6,10 +6,15 @@ export default alt.createStore(class SupportStore {
   constructor() {
     this.bindActions(SupportActions)
     this.isSupported = true
+    this.isChrome = false
   }
 
   onNoSupport() {
     this.isSupported = false
   }
 
+  onIsChrome() {
+    this.isChrome = true
+  }
+
 }, 'SupportStore')