From 50975ebecb0bfefff50c9c613aa1e208e14742c3 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Tue, 9 Dec 2014 21:07:27 -0800
Subject: [PATCH] Check for browser compatibility

Fixes #89
---
 browser.js | 14 ++++++++++++++
 index.html | 23 +++++++++++++++++++++++
 winamp.css | 17 ++++++++++++++---
 winamp.js  | 12 ------------
 4 files changed, 51 insertions(+), 15 deletions(-)
 create mode 100644 browser.js

diff --git a/browser.js b/browser.js
new file mode 100644
index 00000000..f540f01d
--- /dev/null
+++ b/browser.js
@@ -0,0 +1,14 @@
+Browser = {
+    isCompatible: function() {
+        return this._supportsAudioApi() && this._supportsCanvas();
+    },
+
+    _supportsAudioApi: function() {
+        return !!(window.AudioContext || window.webkitAudioContext);
+    },
+    _supportsCanvas: function() {
+        return !!document.createElement('canvas').getContext;
+    }
+
+}
+
diff --git a/index.html b/index.html
index 81997624..e3136ab6 100755
--- a/index.html
+++ b/index.html
@@ -80,6 +80,10 @@
             </div>
             <a id='about' target='_blank' href='https://github.com/captbaritone/winamp2-js'></a>
         </div>
+        <div id='browser-compatibility'>
+            <p>Your browser does not support the features we need</p>
+            <p>Try using the most recent version of Chrome, Firefox or Safari</p>
+        </div>
         <p class='about'>
             by <a href='https://twitter.com/captbaritone'>@captbaritone</a>
             -
@@ -87,6 +91,7 @@
         </p>
         <script src="http://cdn.bootcss.com/jszip/2.4.0/jszip.min.js"></script>
 
+        <script src="browser.js"></script>
         <script src="file-manager.js"></script>
         <script src="visualizer.js"></script>
         <script src="media.js"></script>
@@ -95,5 +100,23 @@
         <script src="multi-display.js"></script>
         <script src="hotkeys.js"></script>
         <script src="winamp.js"></script>
+        <script type="text/javascript">
+            if(Browser.isCompatible()) {
+                winamp = Winamp.init({
+                    'volume': 50,
+                    'balance': 0,
+                    'mediaFile': {
+                        'url': "https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3",
+                        'name': "1. DJ Mike Llama - Llama Whippin' Intro"
+                    },
+                    'skinUrl': 'https://cdn.rawgit.com/captbaritone/winamp2-js/master/skins/base-2.91.wsz'
+                });
+
+                Hotkeys.init(winamp);
+            } else {
+                document.getElementById('winamp').style.display = 'none';
+                document.getElementById('browser-compatibility').style.display = 'block';
+            }
+        </script>
     </body>
 </html>
diff --git a/winamp.css b/winamp.css
index ccf937e1..394ffcf8 100755
--- a/winamp.css
+++ b/winamp.css
@@ -9,6 +9,8 @@ a:focus { outline: none; }
 
 body {
     background-color: #0072CC;
+    font-family: arial;
+    font-size: 15px;
 }
 
 #shade-time {
@@ -777,12 +779,21 @@ body {
 .about {
     position: absolute;
     bottom: 0;
-    color: #bbb;
-    font-family: arial;
-    font-size: 15px;
     color: white;
 }
 
 .about a {
     color: white;
 }
+
+#browser-compatibility {
+    display: none;
+    position: absolute;
+    width: 275px;
+    margin-top: -58px;
+    margin-left: -137px;
+    top: 40%;
+    left: 50%;
+    background: white;
+    text-align: center;
+}
diff --git a/winamp.js b/winamp.js
index 3b83d94d..6741d258 100755
--- a/winamp.js
+++ b/winamp.js
@@ -502,15 +502,3 @@ Winamp = {
         return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3];
     }
 }
-
-winamp = Winamp.init({
-    'volume': 50,
-    'balance': 0,
-    'mediaFile': {
-        'url': "https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3",
-        'name': "1. DJ Mike Llama - Llama Whippin' Intro"
-    },
-    'skinUrl': 'https://cdn.rawgit.com/captbaritone/winamp2-js/master/skins/base-2.91.wsz'
-});
-
-Hotkeys.init(winamp);