Fix playback

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

@@ -66,13 +66,18 @@ body {
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 28px;
     align-items: center;
-    background: rgba(15, 23, 42, 0.8);
+    background: rgba(15, 23, 42, 0.85);
     border: 1px solid #1f2937;
     padding: 28px;
     border-radius: 16px;
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
 }
 
+.hero-compact {
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    padding: 24px;
+}
+
 .hero-text h1 {
     font-size: 32px;
     line-height: 1.2;
@@ -84,6 +89,34 @@ body {
     line-height: 1.6;
 }
 
+.pill-list {
+    list-style: none;
+    padding: 0;
+    margin: 16px 0 0;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.pill-list.minimal {
+    margin-top: 12px;
+}
+
+.pill-list li {
+    background: rgba(124, 58, 237, 0.12);
+    border: 1px solid rgba(124, 58, 237, 0.2);
+    color: #e9d5ff;
+    padding: 8px 12px;
+    border-radius: 999px;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.pill-list.minimal li {
+    background: rgba(124, 58, 237, 0.08);
+    border-color: rgba(124, 58, 237, 0.18);
+}
+
 .eyebrow {
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -124,6 +157,13 @@ body {
     width: 100%;
 }
 
+.block {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .button.ghost {
     background: transparent;
     border: 1px solid #2d3a57;
@@ -140,29 +180,6 @@ body {
     background: #475569;
 }
 
-.stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 12px;
-    margin-top: 18px;
-}
-
-.stat {
-    padding: 12px;
-    background: #0b1220;
-    border-radius: 10px;
-    border: 1px solid #1f2937;
-}
-
-.stat-value {
-    font-weight: 700;
-}
-
-.stat-label {
-    color: #94a3b8;
-    font-size: 13px;
-}
-
 .hero-panel {
     background: #0b1220;
     border: 1px solid #1f2937;
@@ -210,46 +227,34 @@ body {
     gap: 6px;
 }
 
-.feature-list {
+.preview-summary {
-    list-style: none;
+    margin: 10px 0 18px;
-    padding: 0;
+}
-    margin: 14px 0 18px;
+
+.panel-actions {
     display: flex;
     flex-direction: column;
+    gap: 10px;
+}
+
+.preview-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 12px;
 }
 
-.feature-title {
+.preview-card {
-    font-weight: 700;
+    background: rgba(255, 255, 255, 0.02);
-}
-
-.feature-desc {
-    color: #94a3b8;
-    margin-top: 4px;
-}
-
-.info-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 16px;
-    margin: 28px 0;
-}
-
-.info-card {
-    background: #0b1220;
     border: 1px solid #1f2937;
-    padding: 16px;
     border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+    padding: 12px;
-}
-
-.info-card h4 {
-    margin: 10px 0 6px;
-}
-
-.info-card p {
     color: #cbd5e1;
-    line-height: 1.5;
+}
+
+.preview-card p {
+    margin: 8px 0 0;
+    color: #cbd5e1;
+    line-height: 1.4;
 }
 
 .landing-footer {
@@ -262,6 +267,10 @@ body {
     border-radius: 12px;
 }
 
+.landing-footer.compact {
+    margin-top: 18px;
+}
+
 .admin-layout {
     min-height: 100vh;
     display: flex;

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

@@ -522,13 +522,16 @@ function ensureMedia(asset) {
     element.crossOrigin = 'anonymous';
     if (isVideoElement(element)) {
         element.loop = true;
-        applyMediaVolume(element, asset);
         element.playsInline = true;
         element.autoplay = true;
+        element.controls = false;
         element.onloadeddata = draw;
         element.onloadedmetadata = () => recordDuration(asset.id, element.duration);
         element.preload = 'auto';
         element.addEventListener('error', () => clearMedia(asset.id));
+        const volume = applyMediaVolume(element, asset);
+        element.defaultMuted = volume === 0;
+        element.muted = element.defaultMuted;
         setVideoSource(element, asset);
     } else {
         element.onload = draw;
@@ -625,13 +628,7 @@ function setVideoSource(element, asset) {
 
 function applyVideoSource(element, objectUrl, asset) {
     element.src = objectUrl;
-    const playback = asset.speed ?? 1;
+    startVideoPlayback(element, asset);
-    element.playbackRate = Math.max(playback, 0.01);
-    if (playback === 0) {
-        element.pause();
-    } else {
-        element.play().catch(() => queueAudioForUnlock({ element }));
-    }
 }
 
 function getCachedSource(element) {
@@ -680,20 +677,43 @@ function applyMediaSettings(element, asset) {
     if (!isVideoElement(element)) {
         return;
     }
+    startVideoPlayback(element, asset);
+}
+
+function startVideoPlayback(element, asset) {
     const nextSpeed = asset.speed ?? 1;
     const effectiveSpeed = Math.max(nextSpeed, 0.01);
     if (element.playbackRate !== effectiveSpeed) {
         element.playbackRate = effectiveSpeed;
     }
-    applyMediaVolume(element, asset);
+    const volume = applyMediaVolume(element, asset);
-    if (nextSpeed === 0) {
+    element.defaultMuted = volume === 0;
+    element.muted = element.defaultMuted;
+
+    if (effectiveSpeed === 0) {
         element.pause();
-    } else {
+        return;
+    }
+
+    const attemptPlay = (allowFallback) => {
         const playPromise = element.play();
-        if (playPromise?.catch) {
+        if (playPromise?.then) {
-            playPromise.catch(() => queueAudioForUnlock({ element }));
+            playPromise.then(() => {
+                if (volume > 0) {
+                    element.muted = false;
                 }
+            }).catch(() => {
+                if (!allowFallback) {
+                    queueAudioForUnlock({ element });
+                    return;
                 }
+                element.muted = true;
+                element.play().catch(() => queueAudioForUnlock({ element }));
+            });
+        }
+    };
+
+    attemptPlay(true);
 }
 
 function startRenderLoop() {

src/main/resources/templates/dashboard.html

@@ -7,32 +7,44 @@
 </head>
 <body class="dashboard-body">
 <div class="dashboard-shell">
-    <header class="dashboard-header">
+    <header class="dashboard-hero hero hero-compact">
+        <div class="hero-text">
+            <p class="eyebrow">Dashboard</p>
+            <h1>Hello, <span th:text="${username}">user</span></h1>
+            <p class="lead">Manage overlay assets, keep your canvas sized correctly, and hand off control to trusted mods.</p>
+            <ul class="pill-list minimal">
+                <li>Channel: <strong th:text="${channel}">channel</strong></li>
+                <li>Secure dashboard</li>
+            </ul>
+        </div>
+        <div class="hero-panel hero-preview">
+            <div class="panel-header">
                 <div>
-            <p class="eyebrow">Logged in</p>
+                    <p class="eyebrow subtle">Quick actions</p>
-            <h1>Welcome back, <span th:text="${username}">user</span></h1>
+                    <h3>Jump into your overlay</h3>
-            <p class="muted">Control your channel overlay, invite trusted teammates, and get to broadcasting faster.</p>
-            <div class="chip-row">
-                <span class="chip">Primary channel: <strong th:text="${channel}">channel</strong></span>
-                <span class="chip subtle">Secure dashboard</span>
                 </div>
+                <span class="badge">Live</span>
             </div>
-        <div class="header-actions">
+            <div class="preview-summary">
-            <a class="button" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
+                <p class="muted">Open your broadcast view or delegate control without leaving this page.</p>
-            <a class="button ghost" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
+            </div>
-            <form th:action="@{/logout}" method="post">
+            <div class="panel-actions">
-                <button class="secondary" type="submit">Logout</button>
+                <a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
+                <a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
+                <form class="block" th:action="@{/logout}" method="post">
+                    <button class="secondary block" type="submit">Logout</button>
                 </form>
             </div>
+        </div>
     </header>
 
     <section class="card-grid two-col">
         <div class="card">
             <div class="card-header">
                 <div>
-                    <p class="eyebrow">Canvas setup</p>
+                    <p class="eyebrow">Canvas</p>
-                    <h3>Overlay dimensions</h3>
+                    <h3>Overlay size</h3>
-                    <p class="muted">Match the canvas size to your streaming output so overlays sit exactly where you expect.</p>
+                    <p class="muted">Match your OBS output so overlays land where you expect.</p>
                 </div>
                 <div class="pill">Visible to admins</div>
             </div>
@@ -57,7 +69,7 @@
                 <div>
                     <p class="eyebrow">Collaboration</p>
                     <h3>Channel admins</h3>
-                    <p class="muted">Invite moderators or teammates to manage overlay assets without sharing your login.</p>
+                    <p class="muted">Invite moderators to help manage assets.</p>
                 </div>
             </div>
             <div class="inline-form">
@@ -73,7 +85,7 @@
             <div>
                 <p class="eyebrow">Your access</p>
                 <h3>Channels you administer</h3>
-                <p class="muted">Hop into a teammate's overlay console with the right permissions.</p>
+                <p class="muted">Jump into a teammate's overlay console.</p>
             </div>
         </div>
         <p th:if="${#lists.isEmpty(adminChannels)}">No admin invitations yet.</p>

src/main/resources/templates/index.html

@@ -18,86 +18,41 @@
         <a class="button ghost" href="/oauth2/authorization/twitch">Login with Twitch</a>
     </header>
 
-    <main class="hero">
+    <main class="hero hero-compact">
         <div class="hero-text">
-            <p class="eyebrow">Overlay toolkit for busy streamers</p>
+            <p class="eyebrow">Overlay toolkit</p>
-            <h1>Design, schedule, and control your Twitch overlays with ease.</h1>
+            <h1>Keep your Twitch overlays tidy.</h1>
-            <p class="lead">Imgfloat keeps your branding consistent while letting mods and trusted admins help run the show. Upload assets, schedule when they appear, and keep everything in sync across your scenes.</p>
+            <p class="lead">Upload artwork, drop it into a shared dashboard, and stay in sync with your mods.</p>
             <div class="cta-row">
                 <a class="button" href="/oauth2/authorization/twitch">Login with Twitch</a>
-                <span class="muted">No bots to invite. Connect securely with Twitch OAuth.</span>
+                <span class="muted">Secure OAuth login. No bots needed.</span>
             </div>
-            <div class="stats">
+            <ul class="pill-list minimal">
-                <div class="stat">
+                <li>Instant overlay updates</li>
-                    <div class="stat-value">Live</div>
+                <li>Shared access for teammates</li>
-                    <div class="stat-label">Status preview for your overlay</div>
+            </ul>
         </div>
-                <div class="stat">
+        <div class="hero-panel hero-preview">
-                    <div class="stat-value">Admins</div>
-                    <div class="stat-label">Invite trusted helpers in seconds</div>
-                </div>
-                <div class="stat">
-                    <div class="stat-value">Assets</div>
-                    <div class="stat-label">Manage images & animations from one place</div>
-                </div>
-            </div>
-        </div>
-        <div class="hero-panel">
             <div class="panel-header">
                 <div>
-                    <p class="eyebrow">Preview</p>
+                    <p class="eyebrow subtle">Ready to go live</p>
-                    <h3>Overlay control center</h3>
+                    <h3>Preview &amp; publish quickly</h3>
                 </div>
                 <span class="badge">Secure</span>
             </div>
-            <ul class="feature-list">
+            <div class="preview-summary">
-                <li>
+                <p class="muted">Spot check your canvas, push assets live, and keep everything aligned with your stream.</p>
-                    <div>
-                        <div class="feature-title">Live dashboard</div>
-                        <div class="feature-desc">Monitor your broadcast overlay and see changes instantly.</div>
             </div>
-                </li>
+            <a class="button block" href="/oauth2/authorization/twitch">Open dashboard</a>
-                <li>
-                    <div>
-                        <div class="feature-title">Invite admins</div>
-                        <div class="feature-desc">Share access with team members without sharing credentials.</div>
-                    </div>
-                </li>
-                <li>
-                    <div>
-                        <div class="feature-title">Asset library</div>
-                        <div class="feature-desc">Upload, tag, and reuse assets across events and layouts.</div>
-                    </div>
-                </li>
-            </ul>
-            <a class="button block" href="/oauth2/authorization/twitch">Get started</a>
         </div>
     </main>
 
-    <section class="info-grid">
+    <footer class="landing-footer compact">
-        <div class="info-card">
-            <div class="badge subtle">Step 1</div>
-            <h4>Connect your Twitch account</h4>
-            <p>Authenticate once with Twitch OAuth to unlock the dashboard and sync your channel context. No complex setup required.</p>
-        </div>
-        <div class="info-card">
-            <div class="badge subtle">Step 2</div>
-            <h4>Upload overlays & widgets</h4>
-            <p>Add images, animations, or sponsor placements. Imgfloat keeps them organized and ready for your next broadcast.</p>
-        </div>
-        <div class="info-card">
-            <div class="badge subtle">Step 3</div>
-            <h4>Invite trusted admins</h4>
-            <p>Share control with moderators so someone always has the controls, even while you focus on the stream.</p>
-        </div>
-    </section>
-
-    <footer class="landing-footer">
         <div>
             <div class="brand-title">Imgfloat</div>
             <div class="muted">Ready when you go live.</div>
         </div>
-        <a class="button" href="/oauth2/authorization/twitch">Launch dashboard</a>
+        <a class="button ghost" href="/oauth2/authorization/twitch">Login</a>
     </footer>
 </div>
 </body>