Merge pull request #319 from psu-stewardship/audio

Fixing audio player disiplay on firefox and safari so the HTML5 audio ta...

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'
-          });
-    });
-  };
-}

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')
+
+        });
+    };
+}

app/assets/stylesheets/sufia-audio-overrides.css

@@ -0,0 +1,9 @@
+
+.no-audio-background {
+    background: none;
+    box-shadow: none;
+}
+
+.span40 .audiojs audio {
+    left: 10px;
+}

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';
-

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.