From 926d1704bfc34cee8a7e5dd2fe0ddb49d4c7ebd3 Mon Sep 17 00:00:00 2001
From: drigato <denise.rigato@sourcefabric.org>
Date: Mon, 20 Apr 2015 09:59:17 -0400
Subject: [PATCH] SAAS-723: Add compatibility chart to player page

---
 .../views/scripts/form/player.phtml           | 25 +++++++++++++++++++
 airtime_mvc/public/css/player-form.css        | 22 ++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/airtime_mvc/application/views/scripts/form/player.phtml b/airtime_mvc/application/views/scripts/form/player.phtml
index bedd3f099..fc9fa0065 100644
--- a/airtime_mvc/application/views/scripts/form/player.phtml
+++ b/airtime_mvc/application/views/scripts/form/player.phtml
@@ -15,6 +15,31 @@
 
         <?php echo $this->element->getElement('player_title')->render(); ?>
 
+        <table id="player_compatibility_chart">
+            <th colspan="5">Stream Compatibility</th>
+            <tr>
+                <td colspan="3">Desktop</td>
+                <td colspan="2">Mobile</td>
+            </tr>
+            <tr>
+                <td>Firefox</td>
+                <td>Chrome</td>
+                <td>Internet Explorer</td>
+                <td>Android 5 - Chrome</td>
+                <td>iOS 7 - Safari</td>
+            </tr>
+            <tr>
+                <td>Yes (Flash)</td>
+                <td>Yes (Flash)</td>
+                <td>Yes (Flash)</td>
+                <td>MP3/OGG* only</td>
+                <td>MP3/AAC only</td>
+            </tr>
+            <tr>
+                <td colspan="5">* Chrome on Android is known to take about 4 seconds to buffer a 128 kbps MP3 stream. Lower bitrates take longer to buffer.</td>
+            </tr>
+        </table>
+        
         <?php echo $this->element->getElement('player_stream_mode')->render(); ?>
 
         <?php echo $this->element->getElement('player_stream_url'); ?>
diff --git a/airtime_mvc/public/css/player-form.css b/airtime_mvc/public/css/player-form.css
index 69654c9f1..db2bc8616 100644
--- a/airtime_mvc/public/css/player-form.css
+++ b/airtime_mvc/public/css/player-form.css
@@ -59,4 +59,26 @@
 }
 
 
+table#player_compatibility_chart{
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 5px;
+    color: #3b3b3b;
+}
+
+#player_compatibility_chart th, tr, td {
+    border-bottom: 1px solid #999;
+    border-right: 1px solid #999 !important;
+    background-color: #ccc;
+    padding: 10px;
+}
+
+#player_compatibility_chart th
+{
+    color: #5b5b5b;
+    border: 0px;
+}
+
+
+