From d7e9f83cdeb9ecb4aa5f181b13a77d12a472d4c0 Mon Sep 17 00:00:00 2001
From: Carolyn Cole <cam156@psu.edu>
Date: Fri, 7 Feb 2014 10:12:47 -0500
Subject: [PATCH] Fixing audiojs to only display if audio is not supported by
 the browser and do not show the HTML5 audio tags along with the swf if html5
 is not supported

---
 app/assets/javascripts/sufia.js               | 21 +-------------
 app/assets/javascripts/sufia/audio.js         | 28 +++++++++++++++++++
 .../stylesheets/sufia-audio-overrides.css     |  9 ++++++
 app/assets/stylesheets/sufia.css.scss         |  2 +-
 .../generic_files/_media_display.html.erb     |  2 +-
 5 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 app/assets/javascripts/sufia/audio.js
 create mode 100644 app/assets/stylesheets/sufia-audio-overrides.css

diff --git a/app/assets/javascripts/sufia.js b/app/assets/javascripts/sufia.js
index 4cfb56931a..5f189bc6bc 100644
--- a/app/assets/javascripts/sufia.js
+++ b/app/assets/javascripts/sufia.js
@@ -45,6 +45,7 @@ limitations under the License.
 //= require sufia/multiForm
 //= require sufia/edit_metadata
 //= require sufia/single_use_link
+//= require sufia/audio
 //= require hydra/batch_select
 //= require hydra_collections
 
@@ -175,23 +176,3 @@ function preg_quote( str ) {
 
     return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
 }
-
-
-function initialize_audio() {
-
-  if (navigator.userAgent.match("Chrome")){
-      $('audio').each(function() {
-         this.controls = true;
-      });
-  }else {
-      $('audio').each(function() {
-         $(this).attr("preload","auto");
-      });
-    audiojs.events.ready(function() {
-          var as = audiojs.createAll({
-                 imageLocation: '/assets/player-graphics.gif',
-                 swfLocation: '/assets/audiojs.swf'
-          });
-    });
-  };
-}
diff --git a/app/assets/javascripts/sufia/audio.js b/app/assets/javascripts/sufia/audio.js
new file mode 100644
index 0000000000..304e6729db
--- /dev/null
+++ b/app/assets/javascripts/sufia/audio.js
@@ -0,0 +1,28 @@
+function initialize_audio() {
+
+    var test_audio= document.createElement("audio") //try and create sample audio element
+    var audiosupport= (test_audio.play)? true : false
+
+    if (audiosupport){
+        $('audio').each(function() {
+            this.controls = true;
+        });
+    }else {
+        $('audio').each(function() {
+            $(this).attr("preload","auto");
+        });
+        audiojs.events.ready(function() {
+          var as = audiojs.createAll({
+                 imageLocation: '/assets/player-graphics.gif',
+                 swfLocation: '/assets/audiojs.swf'
+                 });
+
+          // remove html 5 player from veiw on firefox and safari
+          $('.audiojs').addClass('no-audio-background')
+          $('.audiojs .play-pause').addClass('hide')
+          $('.audiojs .scrubber').addClass('hide')
+          $('.audiojs .time').addClass('hide')
+
+        });
+    };
+}
diff --git a/app/assets/stylesheets/sufia-audio-overrides.css b/app/assets/stylesheets/sufia-audio-overrides.css
new file mode 100644
index 0000000000..ddedeffb9e
--- /dev/null
+++ b/app/assets/stylesheets/sufia-audio-overrides.css
@@ -0,0 +1,9 @@
+
+.no-audio-background {
+    background: none;
+    box-shadow: none;
+}
+
+.span40 .audiojs audio {
+    left: 10px;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/sufia.css.scss b/app/assets/stylesheets/sufia.css.scss
index 45cc8e7387..747f99dba6 100644
--- a/app/assets/stylesheets/sufia.css.scss
+++ b/app/assets/stylesheets/sufia.css.scss
@@ -10,7 +10,7 @@
  *= require audio-js
  *= require dashboard
  *= require jquery-ui
+ *= require sufia-audio-overrides
 */
 
 @import 'font-awesome';
-
diff --git a/app/views/generic_files/_media_display.html.erb b/app/views/generic_files/_media_display.html.erb
index 3a4b91b001..251b1dc9c7 100644
--- a/app/views/generic_files/_media_display.html.erb
+++ b/app/views/generic_files/_media_display.html.erb
@@ -7,7 +7,7 @@
     Your browser does not support the video tag.
   </video>
 <% elsif @generic_file.audio? %>
-  <audio controls="controls" class="video-js vjs-default-skin" data-setup="{}" preload="auto">
+    <audio controls="controls" class="audiojs" preload="auto">
     <source src="<%= sufia.download_path(@generic_file, datastream_id: 'ogg') %>" type="audio/ogg" />
     <source src="<%= sufia.download_path(@generic_file, datastream_id: 'mp3') %>" type="audio/mpeg" />
     Your browser does not support the audio tag.