diff --git a/components/AudioPlayer.tsx b/components/AudioPlayer.tsx index 59f2393..85e71bb 100644 --- a/components/AudioPlayer.tsx +++ b/components/AudioPlayer.tsx @@ -8,6 +8,7 @@ interface AudioPlayerProps { paused: boolean; inferenceResults: InferenceResult[]; nowPlayingCallback: (result: InferenceResult, playerTime: number) => void; + playerIsBehindCallback: (isBehind: boolean) => void; } /** @@ -19,13 +20,13 @@ export default function AudioPlayer({ paused, inferenceResults, nowPlayingCallback, + playerIsBehindCallback, }: AudioPlayerProps) { const [tonePlayer, setTonePlayer] = useState(null); const [numClipsPlayed, setNumClipsPlayed] = useState(0); const [prevNumClipsPlayed, setPrevNumClipsPlayed] = useState(0); - // TODO(hayk): What is this? const [resultCounter, setResultCounter] = useState(0); // On load, create a player synced to the tone transport @@ -46,20 +47,9 @@ export default function AudioPlayer({ // Set up a callback to increment numClipsPlayed at the edge of each clip const bufferLength = player.sampleTime * player.buffer.length; - // console.log(bufferLength, result.duration_s); // TODO(hayk): Set this callback up to vary each time using duration_s Tone.Transport.scheduleRepeat((time) => { - // TODO(hayk): Edge of clip callback - // console.log( - // "Edge of clip, t = ", - // Tone.Transport.getSecondsAtTime(time), - // ", bufferLength = ", - // bufferLength, - // ", tone transport seconds = ", - // Tone.Transport.seconds - // ); - setNumClipsPlayed((n) => n + 1); }, bufferLength); @@ -99,13 +89,16 @@ export default function AudioPlayer({ if (maxResultCounter < resultCounter) { console.info( - "not picking a new result, none available", + "No new result available, looping previous clip", resultCounter, maxResultCounter ); + playerIsBehindCallback(true); return; } + playerIsBehindCallback(false); + const result = inferenceResults.find( (r: InferenceResult) => r.counter == resultCounter ); diff --git a/components/FallingBehindWarning.tsx b/components/FallingBehindWarning.tsx new file mode 100644 index 0000000..c6c4f33 --- /dev/null +++ b/components/FallingBehindWarning.tsx @@ -0,0 +1,12 @@ +export default function FallingBehindWarning() { + return ( +
+ + Uh oh! The GPU server is behind. + +
+ ); +} diff --git a/pages/index.tsx b/pages/index.tsx index 51f3577..f8a50e9 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react"; import * as Tone from "tone"; import AudioPlayer from "../components/AudioPlayer"; +import FallingBehindWarning from "../components/FallingBehindWarning"; import PageHead from "../components/PageHead"; import Share from "../components/Share"; import Settings from "../components/Settings"; @@ -213,6 +214,13 @@ export default function Home() { }); }; + // Track from the audio player whether we're behind on having new inference results, + // in order to display an alert. + const [playerIsBehind, setPlayerIsBehind] = useState(false); + const playerIsBehindCallback = (isBehind: boolean) => { + setPlayerIsBehind(isBehind); + }; + // TODO(hayk): This is not done yet but it's supposed to clear out future state and prompts // and allow the user to immediately start a new prompt. const resetCallback = () => { @@ -258,6 +266,8 @@ export default function Home() { + {playerIsBehind ? : null} +