From d01780c563fa55769d57eb0f580d6c5da3c144af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= <andreas@kruhlmann.dev>
Date: Wed, 10 Dec 2025 16:38:47 +0100
Subject: [PATCH] Fix mute pausing videos

---
 src/main/resources/static/css/styles.css  |  5 +++--
 src/main/resources/static/js/admin.js     | 15 ++++++++++++++-
 src/main/resources/static/js/broadcast.js | 13 +++++++++++--
 src/main/resources/templates/admin.html   | 13 +++++++------
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index b88cb0a..82abd2b 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -302,8 +302,9 @@ body {
 
 .admin-identity {
     display: flex;
-    gap: 14px;
-    align-items: center;
+    gap: 4px;
+    align-items: flex-start;
+    flex-direction: column;
 }
 
 .header-actions.tight {
diff --git a/src/main/resources/static/js/admin.js b/src/main/resources/static/js/admin.js
index c290699..2077055 100644
--- a/src/main/resources/static/js/admin.js
+++ b/src/main/resources/static/js/admin.js
@@ -961,6 +961,7 @@ function applyMediaSettings(element, asset) {
     }
     const nextSpeed = asset.speed ?? 1;
     const effectiveSpeed = Math.max(nextSpeed, 0.01);
+    const wasMuted = element.muted;
     if (element.playbackRate !== effectiveSpeed) {
         element.playbackRate = effectiveSpeed;
     }
@@ -968,7 +969,19 @@ function applyMediaSettings(element, asset) {
     if (element.muted !== shouldMute) {
         element.muted = shouldMute;
     }
-    element.pause();
+    if (nextSpeed === 0) {
+        element.pause();
+        return;
+    }
+    const playPromise = element.play();
+    if (playPromise?.catch) {
+        playPromise.catch(() => {
+            if (!shouldMute && wasMuted) {
+                element.muted = true;
+                element.play().catch(() => {});
+            }
+        });
+    }
 }
 
 function renderAssetList() {
diff --git a/src/main/resources/static/js/broadcast.js b/src/main/resources/static/js/broadcast.js
index a926da1..10f0db4 100644
--- a/src/main/resources/static/js/broadcast.js
+++ b/src/main/resources/static/js/broadcast.js
@@ -670,6 +670,7 @@ function applyMediaSettings(element, asset) {
     }
     const nextSpeed = asset.speed ?? 1;
     const effectiveSpeed = Math.max(nextSpeed, 0.01);
+    const wasMuted = element.muted;
     if (element.playbackRate !== effectiveSpeed) {
         element.playbackRate = effectiveSpeed;
     }
@@ -679,8 +680,16 @@ function applyMediaSettings(element, asset) {
     }
     if (nextSpeed === 0) {
         element.pause();
-    } else if (element.paused) {
-        element.play().catch(() => {});
+    } else {
+        const playPromise = element.play();
+        if (playPromise?.catch) {
+            playPromise.catch(() => {
+                if (!shouldMute && wasMuted) {
+                    element.muted = true;
+                    element.play().catch(() => {});
+                }
+            });
+        }
     }
 }
 
diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html
index c218c0c..d508d62 100644
--- a/src/main/resources/templates/admin.html
+++ b/src/main/resources/templates/admin.html
@@ -14,14 +14,15 @@
     <div class="admin-shell">
         <header class="admin-header">
             <div class="admin-identity">
-                <div class="brand-mark">IF</div>
-                <div>
-                    <p class="eyebrow subtle">Channel</p>
-                    <h1 th:text="${broadcaster}"></h1>
-                </div>
+                <p class="eyebrow subtle">Channel</p>
+                <h1 th:text="${broadcaster}"></h1>
             </div>
             <div class="header-actions horizontal">
-                <a class="button ghost" th:href="@{/}">Back to dashboard</a>
+                <a class="icon-button" th:href="@{/}" title="Back to dashboard">
+                    <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+                    <span class="sr-only">Back to dashboard</span>
+                </a>
+                <a class="button ghost" th:href="${'/view/' + broadcaster + '/broadcast'}" target="_blank" rel="noopener">Broadcaster view</a>
                 <form th:action="@{/logout}" method="post">
                     <button class="secondary" type="submit">Logout</button>
                 </form>