wip using base domain for all media accesses

components/formatted/formattedLevelLink.tsx

@@ -35,6 +35,8 @@ export default function FormattedLevelLink({ id, gameId, level, onClick }: Enric
           className='max-w-full'
           height={Dimensions.LevelCanvasHeight / 3}
           src={'/api/level/image/' + level._id + '.png'}
+          // TODO: localhost origin in renderToStaticMarkup doesn't work, should probably not be using renderToStaticMarkup if possible
+          // src={getUrl(GameId.THINKY, `/api/level/image/${level._id}.png`)}
           width={Dimensions.LevelCanvasWidth / 3}
         />
       )}

components/profile/profileAvatar.tsx

@@ -1,3 +1,5 @@
+import { GameId } from '@root/constants/GameId';
+import useUrl from '@root/hooks/useUrl';
 import classNames from 'classnames';
 import React, { useContext } from 'react';
 import Dimensions from '../../constants/dimensions';
@@ -12,16 +14,17 @@ interface ProfileAvatarProps {
 }
 
 export default function ProfileAvatar({ hideStatusCircle, size = Dimensions.AvatarSize, user }: ProfileAvatarProps) {
+  const borderWidth = Math.round(size / 40) || 1;
+  const getUrl = useUrl();
   const { multiplayerSocket } = useContext(AppContext);
   const connectedUser = multiplayerSocket.connectedPlayers.find(u => u._id === user._id);
-  const borderWidth = Math.round(size / 40) || 1;
 
   return (
     <div className='flex items-end'>
       <span
         className='border'
         style={{
-          backgroundImage: user.avatarUpdatedAt ? `url("/api/avatar/${user._id}.png?ts=${user.avatarUpdatedAt}")` : 'url("/avatar_default.png")',
+          backgroundImage: `url(${getUrl(GameId.THINKY, user.avatarUpdatedAt ? `/api/avatar/${user._id}.png?ts=${user.avatarUpdatedAt}` : '/avatar_default.png')})`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           borderColor: 'var(--bg-color-3)',

contexts/musicContext.tsx

@@ -1,3 +1,5 @@
+import { GameId } from '@root/constants/GameId';
+import useUrl from '@root/hooks/useUrl';
 import React, { createContext, useCallback, useEffect, useRef, useState } from 'react';
 
 export interface MusicContextInterface {
@@ -161,6 +163,8 @@ export default function MusicContextProvider({ children }: { children: React.Rea
   const [songMetadata, setSongMetdata] = useState<SongMetadata>();
   const [volume, setVolume] = useState(0.66);
 
+  const getUrl = useUrl();
+
   useEffect(() => {
     const audio = new Audio();
     const canPlayOgg = audio.canPlayType('audio/ogg') !== '';
@@ -260,9 +264,9 @@ export default function MusicContextProvider({ children }: { children: React.Rea
       };
 
       if (isDynamicSupported) {
-        const ambient = new Audio(song.ambient);
-        const original = new Audio(song.original);
-        const thud = new Audio(song.thud);
+        const ambient = new Audio(getUrl(GameId.THINKY, song.ambient));
+        const original = new Audio(getUrl(GameId.THINKY, song.original));
+        const thud = new Audio(getUrl(GameId.THINKY, song.thud));
 
         ambient.preload = 'auto';
         original.preload = 'auto';
@@ -351,7 +355,7 @@ export default function MusicContextProvider({ children }: { children: React.Rea
         return newSongMetadata;
       });
     });
-  }, [isDynamicSupported, isHot, isPlaying, volume]);
+  }, [getUrl, isDynamicSupported, isHot, isPlaying, volume]);
 
   const seek = useCallback((offset: number, playOriginal = isHot) => {
     // add songs.length to account for negative offset

next.config.js

@@ -36,6 +36,11 @@ module.exports = {
         hostname: 'i.imgur.com',
         pathname: '**',
       },
+      // {
+      //   protocol: 'http',
+      //   hostname: 'localhost',
+      //   pathname: '**',
+      // }
     ],
   },
   eslint: {