diff --git a/chat-popout.html b/chat-popout.html
new file mode 100644
index 0000000..a2347d5
--- /dev/null
+++ b/chat-popout.html
@@ -0,0 +1,383 @@
+
+
+
+
+
+FISHTANK // CHAT
+
+
+
+
+
+ FISHTANK // CHAT
+
+ 0 messages
+
+
+
+
+
💬
+
Waiting for messages...
+
+
+
@@ -1223,11 +1496,12 @@
-
@@ -1487,14 +1761,25 @@
function applyPollVote(scores) {
// scores = [{value, score}, ...] from poll:vote WS event
- if (!pollCache) return; // no poll loaded yet, ignore
- if (pollCache.currentPoll) {
- pollCache.currentPoll.scores = scores;
- } else {
- // No current poll in cache yet — trigger a full fetch
+ if (!pollCache) {
fetchPoll();
return;
}
+
+ // Check if options have changed — means a new poll started
+ const cachedOptions = (pollCache.currentPoll && pollCache.currentPoll.scores || [])
+ .map(s => s.value).sort().join('|');
+ const incomingOptions = scores.map(s => s.value).sort().join('|');
+
+ if (!pollCache.currentPoll || cachedOptions !== incomingOptions) {
+ // New poll — re-fetch to get the question and metadata
+ console.log('[Poll] Options changed, fetching new poll...');
+ fetchPoll();
+ return;
+ }
+
+ // Same poll — just update scores and re-render
+ pollCache.currentPoll.scores = scores;
renderPoll(pollCache);
}
@@ -1550,10 +1835,9 @@
${msg.voice}
${ROOM_NAMES[msg.room] || msg.room || ''}
${msg.status.toUpperCase()}
- ⬡ ${msg.cost}
${msg.message}
- ${formatTime(msg.createdAt)} · ${timeAgo(msg.createdAt)}
+ ${formatTime(msg.createdAt)} · ${timeAgo(msg.createdAt)}⬡ ${msg.cost}
`;
} else {
// SFX item — fields: sound, url, displayName, cost, room, createdAt (unix ms)
@@ -1884,17 +2168,39 @@
function makeHls(slug, video, muted, retryDelay) {
retryDelay = retryDelay || 2000;
- const hls = new Hls({ lowLatencyMode: true, maxBufferLength: 8 });
+ const hls = new Hls({
+ lowLatencyMode: true,
+ maxBufferLength: 8,
+ maxMaxBufferLength: 16,
+ fragLoadingTimeOut: 10000,
+ manifestLoadingTimeOut: 10000,
+ levelLoadingTimeOut: 10000,
+ fragLoadingMaxRetry: 3,
+ manifestLoadingMaxRetry: 3,
+ });
hls.loadSource('http://localhost:3000/cam/' + slug + '/index.m3u8');
hls.attachMedia(video);
+
+ let reconnectOverlayTimer = null;
+
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.muted = muted;
video.play().catch(() => {});
+ });
+
+ // Hide overlay as soon as frames start playing
+ video.addEventListener('playing', () => {
+ if (reconnectOverlayTimer) { clearTimeout(reconnectOverlayTimer); reconnectOverlayTimer = null; }
hideReconnecting(video);
});
+
hls.on(Hls.Events.ERROR, (e, d) => {
if (!d.fatal) return;
- showReconnecting(video);
+ // Only show reconnecting overlay after a short grace period
+ // so brief blips on a healthy stream don't flash it
+ if (!reconnectOverlayTimer) {
+ reconnectOverlayTimer = setTimeout(() => showReconnecting(video), 1500);
+ }
hls.destroy();
const nextDelay = Math.min(retryDelay * 1.5, 10000);
setTimeout(() => {
@@ -1940,6 +2246,11 @@
const overlay = document.getElementById('featPlayOverlay');
if (overlay) overlay.classList.add('hidden');
featuredIdx = idx;
+ // Restart buffer so clips target the new camera
+ stopBuffer();
+ bufferChunks = [];
+ bufferInitChunk = null;
+ setTimeout(() => ensureBuffer(), 500);
// Refresh overlays and viewer counts for new featured cam
if (typeof updateContestantOverlays === 'function' && window._lastContestantData && Object.keys(window._lastContestantData).length) {
updateContestantOverlays(window._lastContestantData);
@@ -2001,6 +2312,7 @@
// ── Rolling 60s buffer (for CLIP) ──────────────────────────
let bufferRecorder = null;
let bufferChunks = []; // { data, ts }
+ let bufferInitChunk = null; // WebM init segment, kept permanently
const BUFFER_SECS = 65; // keep a bit extra
let mirrorVideo = null;
@@ -2064,13 +2376,25 @@
try { bufferRecorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 4000000 }); }
catch(e) { return; }
bufferChunks = [];
+ bufferInitChunk = null; // reset so first chunk of new recorder is captured as init
bufferRecorder.ondataavailable = e => {
if (!e.data || e.data.size === 0) return;
const now = Date.now();
+ if (!bufferInitChunk) {
+ // First chunk is always the WebM init segment — store separately
+ bufferInitChunk = e.data;
+ return;
+ }
bufferChunks.push({ data: e.data, ts: now });
const cutoff = now - BUFFER_SECS * 1000;
bufferChunks = bufferChunks.filter(c => c.ts >= cutoff);
};
+ bufferRecorder._getBlob = (mimeType) => {
+ const chunks = bufferInitChunk
+ ? [bufferInitChunk, ...bufferChunks.map(c => c.data)]
+ : bufferChunks.map(c => c.data);
+ return new Blob(chunks, { type: mimeType });
+ };
bufferRecorder.start(250);
}
@@ -2193,19 +2517,238 @@
}
function saveClip() {
- ensureBuffer();
- if (!bufferChunks.length) { alert('No buffer yet — wait a moment after the stream starts.'); return; }
const mimeType = bufferRecorder ? bufferRecorder.mimeType : 'video/webm';
- const blob = new Blob(bufferChunks.map(c => c.data), { type: mimeType });
- const url = URL.createObjectURL(blob);
+ if (!bufferChunks.length) { alert('No buffer yet — wait a moment after the stream starts.'); return; }
+ // Calculate real duration from chunk timestamps (WebM header duration is unreliable)
+ const realDuration = (bufferChunks[bufferChunks.length - 1].ts - bufferChunks[0].ts) / 1000;
+ const blob = bufferRecorder._getBlob ? bufferRecorder._getBlob(mimeType)
+ : new Blob(bufferChunks.map(c => c.data), { type: mimeType });
const wrap = document.getElementById('camFeaturedWrap');
const label = wrap ? wrap.querySelector('.cam-label') : null;
const camName = label ? label.textContent.replace(/[^a-z0-9]/gi, '_').toLowerCase() : 'clip';
+ openClipEditor(blob, mimeType, camName, realDuration);
+ }
+
+ function openClipEditor(blob, mimeType, camName, realDuration) {
+ const blobUrl = URL.createObjectURL(blob);
+
+ const backdrop = document.createElement('div');
+ backdrop.className = 'clip-modal-backdrop';
+ backdrop.innerHTML = `
+
+
✂ EDIT CLIP
+
+
+
+ IN: 0.0s
+ DURATION: —
+ OUT: —
+
+
+
+
+
+
+
+
+
+