code: adding mp3 duration to lock buttons client side

templates/index.jinja

@@ -47,12 +47,42 @@
       }
     }
 
-    function play(hash) {
+    var disableTimeout;
+    var none = null;
+
+    function play(hash, timeout) {
+
+      if (timeout && timeout != "none") {
+        // Add the "disabled" class to all clip buttons
+        $('.clip').addClass('disabled');
+
+        // Add "primary" and "loading" classes to the clicked button
+        var clickedButton = $('#clip-' + hash);
+        clickedButton.addClass('double loading positive');
+
+        // Clear any existing timeout to avoid conflicts
+        clearTimeout(disableTimeout);
+
+        // Set a new timeout
+        disableTimeout = setTimeout(function () {
+          $('.clip').removeClass('disabled');
+          clickedButton.removeClass('double loading positive');
+        }, timeout);
+      }
+
       fetch("/play/" + hash);
     }
 
     function stop() {
       fetch("/stop");
+
+      // Clear the timeout
+      clearTimeout(disableTimeout);
+
+      // Remove the "disabled" class from all clip buttons
+      // and the "primary" and "loading" classes from any button that might have them
+      $('.clip').removeClass('disabled');
+      $('.clip').removeClass('double loading positive');
     }
   </script>
   <style type="text/css">
@@ -61,6 +91,10 @@
       /* Define a CSS variable for the width */
     }
 
+    .ui.ui.ui.ui.ui.ui.loading.button {
+      color: black !important;
+    }
+
     .left-column {
       width: var(--left-column-width) !important;
       height: 100%;
@@ -110,8 +144,9 @@
 
       <div class="ui wrapped compact wrapping spaced /**buttons">
         {% for clip in clips %}
-        <button class="ui {{ loop.cycle('red', 'blue', 'green', 'violet', 'orange') }} basic button"
-          onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
+        <button id="clip-{{clip.hash}}"
+          class="ui {{ loop.cycle('red', 'blue', 'green', 'violet', 'orange') }} basic button clip"
+          onclick="play('{{clip.hash}}', {{clip.length}})">{{clip.title}}</button>
         {% endfor %}
 
       </div>