From 31adc4533393f4e1445241db78f556edd8416ec6 Mon Sep 17 00:00:00 2001
From: Alex Kern <alex@kern.io>
Date: Mon, 18 May 2015 23:41:38 -0700
Subject: [PATCH] Add a notice in Chrome when dloading files >500MB.

---
 css/index.styl                 | 23 ++++++++++++--------
 lib/actions/SupportActions.js  |  1 +
 lib/client.js                  |  4 ++++
 lib/components/ChromeNotice.js | 39 ++++++++++++++++++++++++++++++++++
 lib/components/DownloadPage.js |  5 +++++
 lib/stores/SupportStore.js     |  5 +++++
 6 files changed, 68 insertions(+), 9 deletions(-)
 create mode 100644 lib/components/ChromeNotice.js

diff --git a/css/index.styl b/css/index.styl
index ea1c6dc..66122ec 100644
--- a/css/index.styl
+++ b/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;
-  bottom: 0;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 15px;
-  left: 0;
-  right: 0;
-  font: 16px/22px "Quicksand", sans-serif;
+    position: absolute;
+    bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 15px;
+    left: 0;
+    right: 0;
+    font: 16px/22px "Quicksand", sans-serif;
+}
+
+p.notice {
+    margin: 10px 0;
+    font-style: italic;
 }
 
 .drop-zone {
diff --git a/lib/actions/SupportActions.js b/lib/actions/SupportActions.js
index 24dafa8..f4cfaf5 100644
--- a/lib/actions/SupportActions.js
+++ b/lib/actions/SupportActions.js
@@ -3,6 +3,7 @@ import alt from '../alt'
 export default alt.createActions(class SupportActions {
   constructor() {
     this.generateActions(
+      'isChrome',
       'noSupport'
     )
   }
diff --git a/lib/client.js b/lib/client.js
index 9795dc5..7a50e80 100644
--- a/lib/client.js
+++ b/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()
+
 }
diff --git a/lib/components/ChromeNotice.js b/lib/components/ChromeNotice.js
new file mode 100644
index 0000000..fe5d865
--- /dev/null
+++ b/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
+    }
+  }
+
+}
diff --git a/lib/components/DownloadPage.js b/lib/components/DownloadPage.js
index 7f31093..9790972 100644
--- a/lib/components/DownloadPage.js
+++ b/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>
diff --git a/lib/stores/SupportStore.js b/lib/stores/SupportStore.js
index e1b531b..15f5e45 100644
--- a/lib/stores/SupportStore.js
+++ b/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')