Fixed something

This commit is contained in:
Josh Patra
2025-04-20 16:32:15 -04:00
parent 8d9a493e46
commit d61f4a0f96

View File

@@ -158,11 +158,10 @@
let iframeElement: HTMLIFrameElement; let iframeElement: HTMLIFrameElement;
let widget: any; let widget: any;
let widgetReady = false; let widgetReady = false;
let loading = true; let loading = true; // disable play until warmed up
let artworkUrl = ''; let artworkUrl = '';
let isPlaying = false; let isPlaying = false;
let currentPosition = 0; let currentPosition = 0;
let snippetTimeout: ReturnType<typeof setTimeout>;
let progressInterval: ReturnType<typeof setInterval>; let progressInterval: ReturnType<typeof setInterval>;
let fullDuration = 0; let fullDuration = 0;
@@ -210,29 +209,18 @@
function startPolling() { function startPolling() {
isPlaying = true; isPlaying = true;
clearInterval(progressInterval); clearInterval(progressInterval);
clearTimeout(snippetTimeout);
// progress updater—fires reliably on mobile
progressInterval = setInterval(() => { progressInterval = setInterval(() => {
widget.getPosition((pos: number) => { widget.getPosition((pos: number) => {
const limit = gameOver ? fullDuration : segmentDurations[attemptCount]; currentPosition = pos;
currentPosition = Math.min(pos, limit);
}); });
}, 100); }, 100);
if (!gameOver) {
// +100ms fudge so we never cut off at 1.999s instead of 2s
const clampMs = segmentDurations[attemptCount] + 100;
snippetTimeout = setTimeout(() => {
widget.pause();
currentPosition = segmentDurations[attemptCount];
}, clampMs);
}
} }
function stopAllTimers() { function stopAllTimers() {
isPlaying = false; isPlaying = false;
clearInterval(progressInterval); clearInterval(progressInterval);
clearTimeout(snippetTimeout);
} }
onMount(async () => { onMount(async () => {
@@ -242,7 +230,7 @@
tag.src = 'https://w.soundcloud.com/player/api.js'; tag.src = 'https://w.soundcloud.com/player/api.js';
tag.async = true; tag.async = true;
tag.onload = () => resolve(); tag.onload = () => resolve();
tag.onerror = () => reject(new Error('Failed to load SoundCloud API')); tag.onerror = () => reject(new Error('Failed to load SC API'));
document.head.appendChild(tag); document.head.appendChild(tag);
}); });
} }
@@ -261,29 +249,29 @@
artworkUrl = sound.artwork_url || ''; artworkUrl = sound.artwork_url || '';
}); });
// warm up
setTimeout(() => { setTimeout(() => {
widget.play(); widget.play();
widget.pause(); widget.pause();
widget.seekTo(0); widget.seekTo(0);
loading = false; loading = false;
widgetReady = true; widgetReady = true;
}, 1000); }, 750);
}); });
// no more PLAY binding here!
widget.bind(SC.Widget.Events.PAUSE, stopAllTimers); widget.bind(SC.Widget.Events.PAUSE, stopAllTimers);
widget.bind(SC.Widget.Events.FINISH, () => { widget.bind(SC.Widget.Events.FINISH, () => {
currentPosition = gameOver ? fullDuration : segmentDurations[attemptCount];
stopAllTimers(); stopAllTimers();
}); });
widget.bind(SC.Widget.Events.PLAY_PROGRESS, (e: { currentPosition: number }) => { widget.bind(SC.Widget.Events.PLAY_PROGRESS, (e: { currentPosition: number }) => {
if (!isPlaying) return; if (!isPlaying) return;
const limit = gameOver ? fullDuration : segmentDurations[attemptCount]; const limit = gameOver ? fullDuration : segmentDurations[attemptCount];
currentPosition = e.currentPosition;
if (e.currentPosition >= limit) { if (e.currentPosition >= limit) {
currentPosition = limit;
widget.pause(); widget.pause();
} else { currentPosition = limit;
currentPosition = e.currentPosition; stopAllTimers();
} }
}); });
}); });
@@ -319,8 +307,11 @@
attemptCount++; attemptCount++;
userInput = ''; userInput = '';
selectedTrack = null; selectedTrack = null;
if (attemptCount >= maxAttempts) revealAnswer(); if (attemptCount >= maxAttempts) {
else playSegment(); revealAnswer();
} else {
playSegment();
}
} }
function submitGuess() { function submitGuess() {
@@ -519,7 +510,7 @@
style="position:absolute; width:0; height:0; border:0; overflow:hidden; visibility:hidden;" style="position:absolute; width:0; height:0; border:0; overflow:hidden; visibility:hidden;"
allow="autoplay" allow="autoplay"
title="preview player" title="preview player"
></iframe> />
<!-- Bottompinned controls --> <!-- Bottompinned controls -->
<div class="mt-auto px-4 pb-4"> <div class="mt-auto px-4 pb-4">