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
Chrome has issues downloading files > 500 MB. Try using Firefox instead.
+ } 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} /> +