quick fix noop context

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -11,6 +11,7 @@ import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
 import { SpotifyControlsBar } from "@/features/spotify/components";
+import { useAuth } from "@/contexts/auth-context";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
   beforeLoad: async ({ context, params }) => {
@@ -39,6 +40,8 @@ export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
 function RouteComponent() {
   const { id } = Route.useParams();
   const { data: tournament } = useTournament(id);
+  const { roles } = useAuth();
+  const isAdmin = roles?.includes('Admin') || false;
 
   const bracket: BracketData = useMemo(() => {
     if (!tournament.matches || tournament.matches.length === 0) {
@@ -76,7 +79,7 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      <SpotifyControlsBar />
+      { isAdmin && <SpotifyControlsBar />}
       {tournament.matches?.length ? (
         <BracketView bracket={bracket} showControls />
       ) : (

src/app/routes/_authed/tournaments/$id.bracket.tsx

@@ -10,7 +10,6 @@ import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
 import BracketView from "@/features/bracket/components/bracket-view";
-import { SpotifyControlsBar } from "@/features/spotify/components";
 
 export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   beforeLoad: async ({ context, params }) => {

src/lib/spotify/hooks.ts

@@ -13,11 +13,39 @@ export const useSpotify = (): SpotifyContextType => {
 };
 
 export const useSpotifyAuth = () => {
-  const { isAuthenticated, login, logout } = useSpotify();
+  const context = useSpotify();
+
+  if (!context) {
+    return {
+      isAuthenticated: false,
+      login: async () => {},
+      logout: async () => {},
+    };
+  }
+
+  const { isAuthenticated, login, logout } = context;
   return { isAuthenticated, login, logout };
 };
 
 export const useSpotifyPlayback = () => {
+  const context = useSpotify();
+
+  if (!context) {
+    return {
+      playbackState: null,
+      currentTrack: null,
+      play: async () => {},
+      playTrack: async () => {},
+      pause: async () => {},
+      skipNext: async () => {},
+      skipPrevious: async () => {},
+      setVolume: async () => {},
+      refreshPlaybackState: async () => {},
+      isLoading: false,
+      isPlaying: false,
+    };
+  }
+
   const {
     playbackState,
     currentTrack,
@@ -29,7 +57,7 @@ export const useSpotifyPlayback = () => {
     setVolume,
     refreshPlaybackState,
     isLoading,
-  } = useSpotify();
+  } = context;
 
   return {
     playbackState,
@@ -47,14 +75,26 @@ export const useSpotifyPlayback = () => {
 };
 
 export const useSpotifyDevices = () => {
+  const context = useSpotify();
+
+  if (!context) {
+    return {
+      devices: [],
+      activeDevice: null,
+      getDevices: async () => {},
+      setActiveDevice: async () => {},
+      isLoading: false,
+    };
+  }
+
   const {
     devices,
     activeDevice,
     getDevices,
     setActiveDevice,
     isLoading,
-  } = useSpotify();
+  } = context;
-  
+
   return {
     devices,
     activeDevice,