imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 03:39:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix playback

Browse Source
This commit is contained in:
Andreas Krühlmann
2025-12-10 17:36:12 +01:00
parent 6c908c95f1
commit fa8aacd59d
4 changed files with 150 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/main/resources/static/css/styles.css
View File

@@ -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 {
list-style: none;
padding: 0;
margin: 14px 0 18px;
.preview-summary {
margin: 10px 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 {
font-weight: 700;
}
.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;
.preview-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid #1f2937;
padding: 16px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.info-card h4 {
margin: 10px 0 6px;
}
.info-card p {
padding: 12px;
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;

50
src/main/resources/static/js/broadcast.js
View File

@@ -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;
element.playbackRate = Math.max(playback, 0.01);
if (playback === 0) {
element.pause();
} else {
element.play().catch(() => queueAudioForUnlock({ element }));
}
startVideoPlayback(element, asset);
}
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);
if (nextSpeed === 0) {
const volume = applyMediaVolume(element, asset);
element.defaultMuted = volume === 0;
element.muted = element.defaultMuted;
if (effectiveSpeed === 0) {
element.pause();
} else {
const playPromise = element.play();
if (playPromise?.catch) {
playPromise.catch(() => queueAudioForUnlock({ element }));
}
return;
}
const attemptPlay = (allowFallback) => {
const playPromise = element.play();
if (playPromise?.then) {
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() {

52
src/main/resources/templates/dashboard.html
View File

@@ -7,22 +7,34 @@
</head>
<body class="dashboard-body">
<div class="dashboard-shell">
<header class="dashboard-header">
<div>
<p class="eyebrow">Logged in</p>
<h1>Welcome back, <span th:text="${username}">user</span></h1>
<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>
<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="header-actions">
<a class="button" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
<a class="button ghost" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
<form th:action="@{/logout}" method="post">
<button class="secondary" type="submit">Logout</button>
</form>
<div class="hero-panel hero-preview">
<div class="panel-header">
<div>
<p class="eyebrow subtle">Quick actions</p>
<h3>Jump into your overlay</h3>
</div>
<span class="badge">Live</span>
</div>
<div class="preview-summary">
<p class="muted">Open your broadcast view or delegate control without leaving this page.</p>
</div>
<div class="panel-actions">
<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>
@@ -30,9 +42,9 @@
<div class="card">
<div class="card-header">
<div>
<p class="eyebrow">Canvas setup</p>
<h3>Overlay dimensions</h3>
<p class="muted">Match the canvas size to your streaming output so overlays sit exactly where you expect.</p>
<p class="eyebrow">Canvas</p>
<h3>Overlay size</h3>
<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>

81
src/main/resources/templates/index.html
View File

@@ -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>
<h1>Design, schedule, and control your Twitch overlays with ease.</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="eyebrow">Overlay toolkit</p>
<h1>Keep your Twitch overlays tidy.</h1>
<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>
</div>
<div class="stats">
<div class="stat">
<div class="stat-value">Live</div>
<div class="stat-label">Status preview for your overlay</div>
</div>
<div class="stat">
<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>
<span class="muted">Secure OAuth login. No bots needed.</span>
</div>
<ul class="pill-list minimal">
<li>Instant overlay updates</li>
<li>Shared access for teammates</li>
</ul>
</div>
<div class="hero-panel">
<div class="hero-panel hero-preview">
<div class="panel-header">
<div>
<p class="eyebrow">Preview</p>
<h3>Overlay control center</h3>
<p class="eyebrow subtle">Ready to go live</p>
<h3>Preview &amp; publish quickly</h3>
</div>
<span class="badge">Secure</span>
</div>
<ul class="feature-list">
<li>
<div>
<div class="feature-title">Live dashboard</div>
<div class="feature-desc">Monitor your broadcast overlay and see changes instantly.</div>
</div>
</li>
<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 class="preview-summary">
<p class="muted">Spot check your canvas, push assets live, and keep everything aligned with your stream.</p>
</div>
<a class="button block" href="/oauth2/authorization/twitch">Open dashboard</a>
</div>
</main>
<section class="info-grid">
<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">
<footer class="landing-footer compact">
<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>