Fix mute pausing videos

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

@@ -302,8 +302,9 @@ body {
 
 .admin-identity {
     display: flex;
-    gap: 14px;
+    gap: 4px;
-    align-items: center;
+    align-items: flex-start;
+    flex-direction: column;
 }
 
 .header-actions.tight {

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;
     }
+    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() {

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,9 +680,17 @@ function applyMediaSettings(element, asset) {
     }
     if (nextSpeed === 0) {
         element.pause();
-    } else if (element.paused) {
+    } else {
+        const playPromise = element.play();
+        if (playPromise?.catch) {
+            playPromise.catch(() => {
+                if (!shouldMute && wasMuted) {
+                    element.muted = true;
                     element.play().catch(() => {});
                 }
+            });
+        }
+    }
 }
 
 function startRenderLoop() {

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>
-            </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>