warning for non-chrome browsers

colinmorris · Mar 13, 2017 · 3a8b0e1 · 3a8b0e1
1 parent a2e7369
commit 3a8b0e1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "bootstrap": "^3.3.7",
     "clipboard": "^1.6.1",
+    "detect-browser": "^1.6.2",
     "file-saver": "^1.3.3",
     "firebase": "^3.6.10",
     "gh-pages": "^0.12.0",

diff --git a/src/Songsim.js b/src/Songsim.js
@@ -3,6 +3,7 @@ import { ResizableBox } from 'react-resizable';
 import { saveAs } from 'file-saver';
 import JSZip from 'jszip';
 import { hashHistory } from 'react-router';
+import browser from 'detect-browser';
 
 import './Songsim.css';
 
@@ -283,6 +284,12 @@ class Songsim extends Component {
     this.setState(state);
   }
 
+  renderBrowserWarning() {
+    if (browser.name && browser.name !== 'chrome') {
+      return (<p className="bg-danger"><b>Warning:</b> This site runs best on Chrome. It may run slowly on other browsers, or not at all.</p>);
+    }
+  }
+
   render() {
     // TODO: this method is getting pretty huge
     var rowcols = this.focal_rowcols;
@@ -398,6 +405,7 @@ class Songsim extends Component {
         <div className="container">
           {toolbox}
         </div>
+        {this.renderBrowserWarning()}
         {debug}
         </div>
         );
@@ -437,6 +445,7 @@ class Songsim extends Component {
             </p>
             </div>
           }
+          {this.renderBrowserWarning()}
 
       </div>
     )