Show spectrogram if javascript is enabled

1 files changed, 25 insertions, 6 deletions

diff --git a/mediagoblin/templates/mediagoblin/media_displays/audio.html b/mediagoblin/templates/mediagoblin/media_displays/audio.html
index 191eff14..9066cdbd 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/audio.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/audio.html
@@ -21,25 +21,44 @@
 {% block mediagoblin_head %}
     {{ super() }}
     <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/audio.css') }}" />
-    <script type="text/javascript" src="{{ request.staticdirect(
-        '/js/audio.js') }}"></script>
+    <style>
+     .hidden-spectrogram {
+         display: none;
+     }
+     .hidden-legacy-audio-player {
+         display: none;
+     }
+    </style>
 {% endblock %}
 
 {% block mediagoblin_media %}
   <div class="media_other_container">
     <div class="audio-media">
       {% if 'spectrogram' in media.media_files %}
-        <div class="audio-spectrogram">
+        <div class="audio-spectrogram hidden-spectrogram" id="spectrogram">
           <div class="playhead"></div>
           <div class="buffered-indicators"></div>
           <div class="seekbar"></div>
           <button class="audio-control-play-pause paused" aria-label="Play">▶</button>
           <div class="audio-currentTime" aria-label="current time">00:00</div>
           <input type="range" class="audio-volume" value="1" min="0" max="1" step="0.001" aria-label="volume" />
-	  <img src="{{ request.app.public_store.file_url(
-		        media.media_files.spectrogram) }}"
-	       alt="Spectrogram" />
+	  <img src="{{ request.app.public_store.file_url(media.media_files.spectrogram) }}" alt="Spectrogram" />
         </div>
+        <!-- Audio legacy player -->
+        <audio class="audio-player" controls="controls" preload="metadata" id="legacy-audio-player">
+          <source src="{{ request.app.public_store.file_url(media.media_files.webm_audio) }}" type="audio/webm; codecs=vorbis" />
+        </audio>
+        <!-- Spectre audio JS -->
+        <script src="{{ request.staticdirect('/js/audio.js') }}"></script>
+        <!-- Tools -->
+        <script>
+         /* Show spectrogram if javascript is enabled */
+         let spectrogram = document.getElementById('spectrogram');
+         spectrogram.classList.remove('hidden-spectrogram');
+         /* Hidden audio-legacy if javascript is enabled */
+         let legacyPlayer = document.getElementById('legacy-audio-player');
+         legacyPlayer.classList.add('hidden-legacy-audio-player');
+        </script>
       {% endif %}
       <audio class="audio-player" controls="controls"
 	     preload="metadata">