preload sounds in AppContext (fixes #885)

sspenst · Jul 8, 2023 · afa4b29 · afa4b29
1 parent 8ca8e6b
commit afa4b29
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/components/styledTooltip.tsx b/components/styledTooltip.tsx
@@ -10,14 +10,14 @@ export default function StyledTooltip({ id }: StyledTooltipProps) {
     <Tooltip
       id={id}
       noArrow
+      opacity={1}
       style={{
         backgroundColor: 'var(--bg-color)',
         borderColor: 'var(--bg-color-4)',
         borderRadius: 6,
         borderWidth: 2,
         color: 'var(--color)',
         fontSize: '0.7rem',
-        opacity: 1,
         padding: '0.25rem 0.35rem 0.25rem 0.35rem',
         zIndex: 100,
       }}

diff --git a/contexts/appContext.ts b/contexts/appContext.ts
@@ -11,6 +11,7 @@ interface AppContextInterface {
   setShouldAttemptAuth: React.Dispatch<React.SetStateAction<boolean>>;
   setTheme: React.Dispatch<React.SetStateAction<string | undefined>>;
   shouldAttemptAuth: boolean;
+  sounds: { [key: string]: HTMLAudioElement };
   theme: string | undefined;
   user?: ReqUser;
   userConfig?: UserConfig;
@@ -30,6 +31,7 @@ export const AppContext = createContext<AppContextInterface>({
   setShouldAttemptAuth: () => { return; },
   setTheme: () => { return; },
   shouldAttemptAuth: true,
+  sounds: {},
   theme: undefined,
   userLoading: true,
 });
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -49,9 +49,18 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   });
   const router = useRouter();
   const [shouldAttemptAuth, setShouldAttemptAuth] = useState(true);
+  const [sounds, setSounds] = useState<{ [key: string]: HTMLAudioElement }>({});
   const [theme, setTheme] = useState<string>();
   const { matches, privateAndInvitedMatches } = multiplayerSocket;
 
+  useEffect(() => {
+    // preload sounds
+    setSounds({
+      'start': new Audio('/sounds/start.wav'),
+      'warning': new Audio('/sounds/warning.wav'),
+    });
+  }, []);
+
   Router.events.on('routeChangeStart', () => nProgress.start());
   Router.events.on('routeChangeComplete', () => nProgress.done());
   Router.events.on('routeChangeError', () => nProgress.done());
@@ -253,6 +262,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
         setShouldAttemptAuth: setShouldAttemptAuth,
         setTheme: setTheme,
         shouldAttemptAuth: shouldAttemptAuth,
+        sounds: sounds,
         theme: theme,
         user: user,
         userConfig: user?.config,

diff --git a/pages/match/[matchId]/index.tsx b/pages/match/[matchId]/index.tsx
@@ -46,23 +46,13 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 /* istanbul ignore next */
 export default function Match() {
   const [match, setMatch] = useState<MultiplayerMatch>();
+  const readyMark = useRef(false);
   const router = useRouter();
+  const startSoundPlayed = useRef(false);
+  const { sounds, user } = useContext(AppContext);
   const [usedSkip, setUsedSkip] = useState<boolean>(false);
-  const { user } = useContext(AppContext);
-  const readyMark = useRef(false);
   const { matchId } = router.query as { matchId: string };
 
-  // load sounds from /sounds/warning.wav and /sounds/start.wav
-  const [warningSound, setWarningSound] = useState<HTMLAudioElement | null>(null);
-  const [startSound, setStartSound] = useState<HTMLAudioElement | null>(null);
-  const startSoundPlayed = useRef(false);
-
-  // now load them
-  useEffect(() => {
-    setWarningSound(new Audio('/sounds/warning.wav'));
-    setStartSound(new Audio('/sounds/start.wav'));
-  }, []);
-
   useEffect(() => {
     const socketConn = io('', {
       path: '/api/socket/',
@@ -181,11 +171,11 @@ export default function Match() {
 
       if (match.state === MultiplayerMatchState.ACTIVE) {
         if (ncd > 0) {
+          // set the title to the countdown
           document.title = `Starting in ${ncd >> 0} seconds!`;
 
           if (!startSoundPlayed.current) {
-            // set the title to the countdown
-            startSound?.play();
+            sounds['start']?.play();
             startSoundPlayed.current = true;
           }
         } else {
@@ -207,7 +197,7 @@ export default function Match() {
     }, 250);
 
     return () => clearInterval(iv);
-  }, [fetchMarkReady, match, startSound]);
+  }, [fetchMarkReady, match, sounds]);
 
   useEffect(() => {
     if (!match) {