Simple refactor

src/main/resources/static/css/styles.css

@@ -1544,7 +1544,6 @@ button:disabled:hover {
     align-items: stretch;
     padding: 8px 10px;
     background: #111827;
-    border-top: 1px solid #1f2937;
     cursor: pointer;
     gap: 8px;
     font-size: 13px;
@@ -1552,6 +1551,10 @@ button:disabled:hover {
     height: 60px;
 }
 
+.asset-item:not(.is-hidden) {
+    border-top: 1px solid #1f2937;
+}
+
 .asset-item:last-child {
     border-bottom: 1px solid #1f2937;
 }

src/main/resources/static/js/admin.js

@@ -1,3 +1,5 @@
+import { isAudioAsset } from "./media/audio.js";
+
 const canvas = document.getElementById("admin-canvas");
 const ctx = canvas.getContext("2d");
 const overlay = document.getElementById("admin-overlay");
@@ -77,6 +79,18 @@ audioUnlockEvents.forEach((eventName) => {
     });
 });
 
+function handleFileSelection(input) {
+    if (!input) return;
+    const hasFile = input.files && input.files.length;
+    const name = hasFile ? input.files[0].name : "";
+    if (fileNameLabel) {
+        fileNameLabel.textContent = name || "No file chosen";
+    }
+    if (hasFile) {
+        uploadAsset(input.files[0]);
+    }
+}
+
 function debounce(fn, wait = 150) {
     let timeout;
     return (...args) => {
@@ -937,11 +951,6 @@ function isVideoAsset(asset) {
     return type.startsWith("video/");
 }
 
-function isAudioAsset(asset) {
-    const type = asset?.mediaType || asset?.originalMediaType || "";
-    return type.startsWith("audio/");
-}
-
 function isCodeAsset(asset) {
     const type = (asset?.mediaType || asset?.originalMediaType || "").toLowerCase();
     return type.startsWith("application/javascript") || type.startsWith("text/javascript");
@@ -2202,18 +2211,6 @@ function deleteAsset(asset) {
         .catch(() => showToast("Unable to delete asset. Please try again.", "error"));
 }
 
-function handleFileSelection(input) {
-    if (!input) return;
-    const hasFile = input.files && input.files.length;
-    const name = hasFile ? input.files[0].name : "";
-    if (fileNameLabel) {
-        fileNameLabel.textContent = name || "No file chosen";
-    }
-    if (hasFile) {
-        uploadAsset(input.files[0]);
-    }
-}
-
 function uploadAsset(file = null) {
     const fileInput = document.getElementById("asset-file");
     const selectedFile = file || (fileInput?.files && fileInput.files.length ? fileInput.files[0] : null);

src/main/resources/static/js/broadcast.js

@@ -1,3 +1,5 @@
+import { isAudioAsset } from "./media/audio.js";
+
 const canvas = document.getElementById("broadcast-canvas");
 const obsBrowser = !!globalThis.obsstudio;
 const supportsAnimatedDecode =
@@ -439,9 +441,6 @@ function isVideoAsset(asset) {
     return asset?.mediaType?.startsWith("video/");
 }
 
-function isAudioAsset(asset) {
-    return asset?.mediaType?.startsWith("audio/");
-}
 function getVideoPlaybackState(element) {
     if (!element) {
         return { playRequested: false, unmuteOnPlay: false };

src/main/resources/static/js/media/audio.js

@@ -0,0 +1,7 @@
+export function isAudioAsset(asset) {
+    if (!asset) {
+        console.warn("isAudioAsset called with null or undefined asset");
+    }
+    const type = asset?.mediaType || asset?.originalMediaType || "";
+    return type.startsWith("audio/");
+}

src/main/resources/templates/admin.html

@@ -416,7 +416,7 @@
         </script>
         <script src="/js/cookie-consent.js"></script>
         <script src="/js/toast.js"></script>
-        <script src="/js/admin.js"></script>
         <script src="/js/customAssets.js"></script>
+        <script type="module" src="/js/admin.js"></script>
     </body>
 </html>

src/main/resources/templates/broadcast.html

@@ -15,6 +15,6 @@
         </script>
         <script src="/js/cookie-consent.js"></script>
         <script src="/js/toast.js"></script>
-        <script src="/js/broadcast.js"></script>
+        <script type="module" src="/js/broadcast.js"></script>
     </body>
 </html>