Add ability to share musics in audio display

_internal/DeerLister.php

@@ -29,9 +29,9 @@ function __construct()
         $this->twig = new Environment($loader);
 
         // load config
-        if (file_exists("config.toml"))
+        if (file_exists(__DIR__ . "/config.toml"))
         {
-            $this->config = Toml::Parse(file_get_contents("config.toml"));
+            $this->config = Toml::Parse(file_get_contents(__DIR__ . "/config.toml"));
         }
 
         // Convert a size in byte to something more diggest

_internal/css/displays/image.css

@@ -29,4 +29,21 @@
 
 .display-image p {
     color: black;
+}
+
+.button {
+    margin: 2px;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttons {
+    display: flex;
+    background-color: lightgray !important;
+}
+
+.flex-container span.folder-element:not(:hover) .buttons {
+    visibility: hidden;
 }

_internal/css/light.css

@@ -16,12 +16,13 @@
     color: white;
 }
 
-.flex-container a:nth-child(odd) {
+.flex-container a:nth-child(odd), .flex-container span:nth-child(odd) {
     background-color: lightblue;
 }
 
-.flex-container a:hover {
+.flex-container a:hover, .flex-container span.folder-element:hover {
     background-color: lightgray;
+    cursor: pointer;
 }
 
 .modal-body {

_internal/js/displays/audioDisplay.js

@@ -5,25 +5,48 @@ const player = document.getElementById("audio-player");
 
 player.volume = 0.25;
 
+function playSong(index, startAuto = true) {
+    player.src = songs[index].dataset.song;
+    document.getElementById("audio-title").innerHTML = songs[index].dataset.filename;
+    if (startAuto) player.play();
+}
+
 if (songs.length > 0) {
-    player.src = songs[0].href;
+    player.src = songs[0].dataset.song;
     document.getElementById("audio-title").innerHTML = songs[0].dataset.filename;
 }
 
-for (const a of songs) {
-    a.addEventListener("click", e => {
-        e.preventDefault();
-        player.src = a.href;
-        document.getElementById("audio-title").innerHTML = a.dataset.filename;
-        player.play();
+for (let i = 0; i < songs.length; i++) {
+    let curr = i;
+
+    songs[i].addEventListener("click", e => {
+        audioIndex = curr;
+        playSong(audioIndex);
+    });
+    songs[i].querySelector(".share").addEventListener("click", e => {
+        e.stopPropagation();
+
+        const filename = songs[curr].dataset.filename
+        const share = encodeURI(filename)
+        showShare(createShareUrl(share))
+    });
+    songs[i].querySelector(".download").addEventListener("click", e => {
+        e.stopPropagation();
     });
 }
 
 player.addEventListener("ended", () => {
     if (audioIndex < songs.length - 1) {
         audioIndex++;
-        player.src = songs[audioIndex].href;
-        document.getElementById("audio-title").innerHTML = songs[audioIndex].dataset.filename;
-        player.play();
+        playSong(audioIndex);
+    }
+});
+
+let shareParams = new URLSearchParams(document.location.search)
+let share = shareParams.get("share")
+if (share) {
+    for (let i = 0; i < songs.length; i++) {
+        audioIndex = i;
+        playSong(audioIndex, false);
     }
-});
+}

_internal/js/script.js

@@ -1,49 +1,54 @@
-const template = document.getElementById("filepreview")
-
-// register a click handler for each file link
-document.querySelectorAll("#file-display a").forEach(link => link.addEventListener("click", fileClicked))
-
-// prevents clicking modal to dispatch modal close
-document.querySelector(".modal-body").addEventListener("click", event => event.stopPropagation())
+function init() {
+    if (!document.querySelector("overrides-share")) return
+
+    const template = document.getElementById("filepreview")
+
+    // register a click handler for each file link
+    document.querySelectorAll("#file-display a").forEach(link => link.addEventListener("click", fileClicked))
+
+    // prevents clicking modal to dispatch modal close
+    document.querySelector(".modal-body").addEventListener("click", event => event.stopPropagation())
+
+    // close modal while clicking outside it
+    document.querySelector(".modal").addEventListener("click", function(event) {
+        document.querySelector(".modal-body").innerHTML = ""
+        event.currentTarget.style.display = "none"
+
+        // Update state with URL
+        let url = new URL(document.location.href)
+        let dirParam = url.searchParams.get("dir")
+        let finalUrl = document.location.origin + document.location.pathname;
+        if (dirParam) {
+            const split = dirParam.split('/')
+            document.title = split[split.length - 1]
+            finalUrl += `?dir=${dirParam}`
+        } else {
+            document.title = "Home"
+        }
+        window.history.pushState({target: null, pageTitle: document.title}, "", finalUrl)
+    })
 
-// close modal while clicking outside it
-document.querySelector(".modal").addEventListener("click", function(event) {
-    document.querySelector(".modal-body").innerHTML = ""
-    event.currentTarget.style.display = "none"
+    window.addEventListener("popstate", (e) => {
+        if(e.state) {
+            if (e.state.target) {
+                const file = document.querySelector(`[data-preview="${e.state.target}"]`)
+                showFile(file.href, file.dataset.preview, file.dataset.filename, encodeURI(file.dataset.filename))
+            } else {
+                document.querySelector(".modal-body").innerHTML = ""
+                document.querySelector(".modal").style.display = "none"
+            }
 
-    // Update state with URL
-    let url = new URL(document.location.href)
-    let dirParam = url.searchParams.get("dir")
-    let finalUrl = document.location.origin + document.location.pathname;
-    if (dirParam) {
-        const split = dirParam.split('/')
-        document.title = split[split.length - 1]
-        finalUrl += `?dir=${dirParam}`
-    } else {
-        document.title = "Home"
-    }
-    window.history.pushState({target: null, pageTitle: document.title}, "", finalUrl)
-})
-
-window.addEventListener("popstate", (e) => {
-    if(e.state) {
-        if (e.state.target) {
-            const file = document.querySelector(`[data-preview="${e.state.target}"]`)
-            showFile(file.href, file.dataset.preview, file.dataset.filename, encodeURI(file.dataset.filename))
-        } else {
-            document.querySelector(".modal-body").innerHTML = ""
-            document.querySelector(".modal").style.display = "none"
+            document.title = e.state.pageTitle;
         }
+    });
 
-        document.title = e.state.pageTitle;
+    const prev = document.getElementById("selected-preview")
+    if (prev != undefined) {
+        showFile(prev.href, prev.dataset.preview, prev.dataset.filename, encodeURI(prev.dataset.filename))
     }
-});
-
-const prev = document.getElementById("selected-preview")
-if (prev != undefined) {
-    showFile(prev.href, prev.dataset.preview, prev.dataset.filename, encodeURI(prev.dataset.filename))
 }
 
+
 function fileClicked(event) {
     const target = event.currentTarget
 
@@ -93,22 +98,38 @@ function showFileModal(href, filename, content, shareName) {
     document.querySelector(".modal-body").appendChild(clone)
     document.getElementById("modal").style.display = "block"
 
-    let shareParams = new URLSearchParams(document.location.search)
-    shareParams.set("share", shareName)
-    const shareUrl = `${window.location.origin}${window.location.pathname}?${shareParams.toString()}`
+    const shareUrl = createShareUrl(shareName)
 
     // Update state with URL
     document.title = filename
     window.history.pushState({target: filename, pageTitle: filename}, "", shareUrl)
 
     document.getElementById("share").addEventListener("click", _ => {
-        if (navigator.share)
-        {
-            navigator.share({url: shareUrl});
-        }
-        else
-        {
-            window.prompt("Copy to share", shareUrl)
-        }
+        showShare(shareUrl)
     })
 }
+
+document.onreadystatechange = async function () {
+    if (document.readyState == "interactive") {
+        init();
+    }
+};
+
+function createShareUrl(shareName) {
+
+    let shareParams = new URLSearchParams(document.location.search)
+    shareParams.set("share", shareName)
+    return `${window.location.origin}${window.location.pathname}?${shareParams.toString()}`
+}
+
+function showShare(shareUrl)
+{
+    if (navigator.share)
+    {
+        navigator.share({url: shareUrl});
+    }
+    else
+    {
+        window.prompt("Copy to share", shareUrl)
+    }
+}

_internal/templates/base.html.twig

@@ -21,6 +21,8 @@
 
         <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/x86asm.min.js"></script>
+
+        <script src="_internal/js/script.js"></script>
     </head>
     <body>
         <div class="banner">
@@ -35,7 +37,5 @@
                 <div class="modal-body"></div>
             </div>
         </div>
-
-        <script src="_internal/js/script.js"></script>
     </body>
 </html>

_internal/templates/displays/audio.html.twig

@@ -1,15 +1,14 @@
-<div class="flex-container">
+<div class="flex-container overrides-share">
     <h3 id="audio-title"></h3>
     <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.extension | canBeDisplayed(displayName) %}
-            class="audio-preview"
-            {% elseif file.filePreview %}
+        <span data-song="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}"
+            class="folder-element {% if file.extension | canBeDisplayed(displayName) %}audio-preview{% endif %}"
+            {% if file.filePreview %}
             data-preview="{{ file.filePreview }}"
             {% endif %}
             {% if file.preview %}
@@ -25,8 +24,13 @@
                     {% endif %}
                 </div>
                 <div class="name">{{ file.name }}</div>
+
+                <span class="buttons">
+                    <a class="button download" download href="{{ file | getFilePath(path.full) }}"><i class="fa-solid fa-download"></i></a>
+                    <a class="button share"><i class="fa-solid fa-share-nodes"></i></a>
+                </span>
             </div>
-        </a>
+        </span>
     {% endfor %}
 </div>
 <script src="_internal/js/displays/audioDisplay.js"></script>