Add audio display

_internal/displays/AudioDisplay.php

@@ -5,7 +5,7 @@
 /**
  * Provides display for images
  */
-class ImageDisplay implements FileDisplay
+class AudioDisplay implements FileDisplay
 {
     public function doesHandle(string $ext): bool
     {

_internal/js/displays/audioDisplay.js

@@ -0,0 +1,15 @@
+const musics = Array.from(document.getElementsByClassName("audio-preview"));
+const player = document.getElementById("audio-player");
+player.volume = 0.25;
+if (musics.length > 0)
+{
+    player.src = musics[0];
+}
+for (const a of musics) {
+    const href = a.href;
+    a.addEventListener("click", e => {
+        e.preventDefault();
+        player.src = href;
+        player.play();
+    });
+}

_internal/templates/displays/audio.html.twig

@@ -1,15 +1,22 @@
 <div class="flex-container">
-    <audio controls></audio>
+    <audio controls id="audio-player"></audio>
     <div class="file-info header">
         <div class="icon"></div>
         <div class="name">Name</div>
     </div>
     {% for file in files %}
-        <a href="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}" {%if file.filePreview %} data-preview="{{ file.filePreview }}" {% endif %}>
+        <a href="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}"
+            {%if file.extension | canBeDisplayed(displayName) %}
+            class="audio-preview"
+            {%elseif file.filePreview %}
+            data-preview="{{ file.filePreview }}"
+            {% endif %}
+        >
             <div class="file-info">
                 <div class="icon"><i class="{{ file.icon }}"></i></div>
                 <div class="name">{{ file.name }}</div>
             </div>
         </a>
     {% endfor %}
-</div>
+</div>
+<script src="_internal/js/displays/audioDisplay.js"></script>

index.php

@@ -20,7 +20,7 @@
 
 $lister = new DeerLister();
 
-$lister->registerFileDisplay("audio", ImageDisplay::class);
+$lister->registerFileDisplay("audio", AudioDisplay::class);
 $lister->registerFileDisplay("image", ImageDisplay::class);
 
 $lister->registerFilePreview("audio", AudioPreview::class);