From c59f5241a144dc1bfb141ed75be424ce3f68ec96 Mon Sep 17 00:00:00 2001
From: Luke Berndt <luke@robotastic.com>
Date: Mon, 22 Feb 2021 21:50:40 -0500
Subject: [PATCH] changed controls

---
 frontend/public/index.html |  2 ++
 frontend/server/card.ejs   | 67 ++++++++++++++++----------------------
 2 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 3cefde5..f8fac76 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -9,6 +9,8 @@
       name="%REACT_APP_SITE_NAME%"
       content="Listen to live Police and Fire radio broadcasts. Archived for 30 days and searchable."
     />
+    <!-- Below is an ugly hack! I needed a way to add a tag to insert Twitter Meta if needed-->
+    <!-- I SED the tag below out and replace it with an EJS tag to insert a block of meta -->
     <meta name="temp" conent="replace"/>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
     <!--
diff --git a/frontend/server/card.ejs b/frontend/server/card.ejs
index c67fe25..012b3a0 100644
--- a/frontend/server/card.ejs
+++ b/frontend/server/card.ejs
@@ -4,38 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>OpenMHz</title>
     <script src="https://unpkg.com/wavesurfer.js"></script>
-    <script>
-      // Create an instance
-      let wavesurfer;
-      var call_url="<%- url%>";
-      // Init & load audio file
-      document.addEventListener("DOMContentLoaded", function () {
-        // Init
-        wavesurfer = WaveSurfer.create({
-          container: document.querySelector("#waveform"),
-          waveColor: "#A8DBA8",
-          progressColor: "#3B8686",
-          backend: "MediaElement",
-          mediaControls: true,
-        });
 
-        wavesurfer.once("ready", function () {
-          console.log("Using wavesurfer.js " + WaveSurfer.VERSION);
-        });
-
-        wavesurfer.on("error", function (e) {
-          console.warn(e);
-        });
-
-        // Load audio from URL
-        wavesurfer.load(call_url);
-
-        // toggle play button
-        document
-          .querySelector('[data-action="play"]')
-          .addEventListener("click", wavesurfer.playPause.bind(wavesurfer));
-      });
-    </script>
   </head>
 
   <body>
@@ -43,15 +12,35 @@
       <div id="waveform">
         <!-- Here be the waveform -->
       </div>
+      <script>
+        // Create an instance
+        let wavesurfer;
+        var call_url="<%- url%>";
+        // Init & load audio file
+        document.addEventListener("DOMContentLoaded", function () {
+          // Init
+          wavesurfer = WaveSurfer.create({
+            container: document.querySelector("#waveform"),
+            waveColor: "#A8DBA8",
+            progressColor: "#3B8686",
+            backend: "MediaElement",
+            mediaControls: true,
+          });
+  
+          wavesurfer.once("ready", function () {
+            console.log("Using wavesurfer.js " + WaveSurfer.VERSION);
+          });
+  
+          wavesurfer.on("error", function (e) {
+            console.warn(e);
+          });
+  
+          // Load audio from URL
+          wavesurfer.load(call_url);
+  
+        });
+      </script>
 
-      <div class="controls">
-        <button class="btn btn-primary" data-action="play">
-          <i class="glyphicon glyphicon-play"></i>
-          Play /
-          <i class="glyphicon glyphicon-pause"></i>
-          Pause
-        </button>
-      </div>
     </div>
   </body>
 </html>