spotify controls

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

@@ -14,6 +14,7 @@ import BracketView from "@/features/bracket/components/bracket-view";
 import { startMatch } from "@/features/matches/server";
 import { useServerMutation } from "@/lib/tanstack-query/hooks";
 import { useQueryClient } from "@tanstack/react-query";
+import { SpotifyControlsBar } from "@/features/spotify/components";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
   beforeLoad: async ({ context, params }) => {
@@ -29,6 +30,7 @@ export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
   },
   loader: ({ context }) => ({
     fullWidth: true,
+    showSpotifyPanel: true,
     header: {
       withBackButton: true,
       title: `Run ${context.tournament.name}`,
@@ -77,6 +79,7 @@ function RouteComponent() {
 
   return (
     <Container size="md">
+      <SpotifyControlsBar />
       {tournament.matches?.length ? (
         <BracketView bracket={bracket} showControls />
       ) : (

src/app/routes/api/spotify/callback.ts

@@ -0,0 +1,135 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+import { SpotifyAuth } from '@/lib/spotify/auth'
+
+const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!
+const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
+const SPOTIFY_REDIRECT_URI = import.meta.env.VITE_SPOTIFY_REDIRECT_URI!
+
+export const ServerRoute = createServerFileRoute('/api/spotify/callback').methods({
+  GET: async ({ request }: { request: Request }) => {
+    // Helper function to get return path from state parameter
+    const getReturnPath = (state: string | null): string => {
+      if (!state) return '/';
+      try {
+        const decodedState = JSON.parse(atob(state));
+        return decodedState.returnPath || '/';
+      } catch {
+        return '/';
+      }
+    };
+
+    try {
+      const url = new URL(request.url)
+      const code = url.searchParams.get('code')
+      const state = url.searchParams.get('state')
+      const error = url.searchParams.get('error')
+
+      const returnPath = getReturnPath(state);
+
+      // Check for OAuth errors
+      if (error) {
+        console.error('Spotify OAuth error:', error)
+        return new Response(null, {
+          status: 302,
+          headers: {
+            'Location': returnPath + '?spotify_error=' + encodeURIComponent(error),
+          },
+        })
+      }
+
+      if (!code || !state) {
+        console.error('Missing code or state:', { code: !!code, state: !!state })
+        return new Response(null, {
+          status: 302,
+          headers: {
+            'Location': returnPath + '?spotify_error=missing_code_or_state',
+          },
+        })
+      }
+
+      console.log('Token exchange attempt:', {
+        client_id: SPOTIFY_CLIENT_ID,
+        redirect_uri: SPOTIFY_REDIRECT_URI,
+        has_code: !!code,
+        has_state: !!state,
+      })
+
+      // Exchange code for tokens
+      const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Authorization': `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString('base64')}`,
+        },
+        body: new URLSearchParams({
+          grant_type: 'authorization_code',
+          code,
+          redirect_uri: SPOTIFY_REDIRECT_URI,
+        }),
+      })
+
+      if (!tokenResponse.ok) {
+        const errorText = await tokenResponse.text()
+        console.error('Token exchange error:', {
+          status: tokenResponse.status,
+          statusText: tokenResponse.statusText,
+          body: errorText,
+          redirect_uri: SPOTIFY_REDIRECT_URI,
+        })
+        
+        // Return more detailed error info
+        const errorParam = encodeURIComponent(`${tokenResponse.status}: ${errorText}`)
+        return new Response(null, {
+          status: 302,
+          headers: {
+            'Location': `${returnPath}?spotify_error=token_exchange_failed&details=${errorParam}`,
+          },
+        })
+      }
+
+      const tokens = await tokenResponse.json()
+
+      console.log('Token exchange successful:', {
+        has_access_token: !!tokens.access_token,
+        has_refresh_token: !!tokens.refresh_token,
+        expires_in: tokens.expires_in,
+      })
+
+      console.log('Decoded return path:', returnPath);
+
+      // Create response with redirect to original path
+      const response = new Response(null, {
+        status: 302,
+        headers: {
+          'Location': returnPath + '?spotify_auth=success',
+        },
+      })
+
+      // Set secure cookies for tokens
+      const isSecure = process.env.NODE_ENV === 'production'
+      const cookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${tokens.expires_in}`
+
+      response.headers.append('Set-Cookie', `spotify_access_token=${tokens.access_token}; ${cookieOptions}`)
+      
+      if (tokens.refresh_token) {
+        // Refresh token doesn't expire, set longer max age
+        const refreshCookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${60 * 60 * 24 * 30}` // 30 days
+        response.headers.append('Set-Cookie', `spotify_refresh_token=${tokens.refresh_token}; ${refreshCookieOptions}`)
+      }
+
+      return response
+    } catch (error) {
+      console.error('Spotify callback error:', error)
+      // Try to get return path from query params if available, otherwise use default
+      const url = new URL(request.url);
+      const state = url.searchParams.get('state');
+      const returnPath = getReturnPath(state);
+      return new Response(null, {
+        status: 302,
+        headers: {
+          'Location': returnPath + '?spotify_error=callback_failed',
+        },
+      })
+    }
+  },
+})

src/app/routes/api/spotify/playback.ts

@@ -0,0 +1,195 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+import { SpotifyWebApiClient } from '@/lib/spotify/client'
+
+// Helper function to get access token from cookies
+function getAccessTokenFromCookies(request: Request): string | null {
+  const cookieHeader = request.headers.get('cookie')
+  if (!cookieHeader) return null
+
+  const cookies = Object.fromEntries(
+    cookieHeader.split('; ').map(c => c.split('='))
+  )
+
+  return cookies.spotify_access_token || null
+}
+
+export const ServerRoute = createServerFileRoute('/api/spotify/playback').methods({
+  POST: async ({ request }: { request: Request }) => {
+    try {
+      const accessToken = getAccessTokenFromCookies(request)
+      if (!accessToken) {
+        return new Response(
+          JSON.stringify({ error: 'No access token found' }),
+          {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      }
+
+      const body = await request.json()
+      const { action, deviceId, volumePercent } = body
+
+      const spotifyClient = new SpotifyWebApiClient(accessToken)
+
+      switch (action) {
+        case 'play':
+          await spotifyClient.play(deviceId)
+          break
+        case 'pause':
+          await spotifyClient.pause()
+          break
+        case 'next':
+          await spotifyClient.skipToNext()
+          break
+        case 'previous':
+          await spotifyClient.skipToPrevious()
+          break
+        case 'volume':
+          if (typeof volumePercent !== 'number') {
+            return new Response(
+              JSON.stringify({ error: 'volumePercent must be a number' }),
+              {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' },
+              }
+            )
+          }
+          await spotifyClient.setVolume(volumePercent)
+          break
+        case 'transfer':
+          if (!deviceId) {
+            return new Response(
+              JSON.stringify({ error: 'deviceId is required for transfer action' }),
+              {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' },
+              }
+            )
+          }
+          await spotifyClient.transferPlayback(deviceId)
+          break
+        default:
+          return new Response(
+            JSON.stringify({ error: 'Invalid action' }),
+            {
+              status: 400,
+              headers: { 'Content-Type': 'application/json' },
+            }
+          )
+      }
+
+      return new Response(
+        JSON.stringify({ success: true }),
+        {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+    } catch (error) {
+      console.error('Playback control error:', error)
+      
+      // Handle specific Spotify API errors
+      if (error instanceof Error) {
+        if (error.message.includes('NO_ACTIVE_DEVICE')) {
+          return new Response(
+            JSON.stringify({ error: 'No active device found. Please select a device first.' }),
+            {
+              status: 400,
+              headers: { 'Content-Type': 'application/json' },
+            }
+          )
+        }
+        
+        if (error.message.includes('PREMIUM_REQUIRED')) {
+          return new Response(
+            JSON.stringify({ error: 'Spotify Premium is required for playback control.' }),
+            {
+              status: 403,
+              headers: { 'Content-Type': 'application/json' },
+            }
+          )
+        }
+
+        // Log the full error details for debugging
+        console.error('Full error details:', {
+          message: error.message,
+          stack: error.stack,
+          name: error.name,
+        })
+      }
+
+      return new Response(
+        JSON.stringify({ error: 'Playback control failed', details: error instanceof Error ? error.message : 'Unknown error' }),
+        {
+          status: 500,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+    }
+  },
+
+  // GET endpoint for retrieving current playback state and devices
+  GET: async ({ request }: { request: Request }) => {
+    try {
+      const accessToken = getAccessTokenFromCookies(request)
+      if (!accessToken) {
+        return new Response(
+          JSON.stringify({ error: 'No access token found' }),
+          {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      }
+
+      const url = new URL(request.url)
+      const type = url.searchParams.get('type') // 'state' or 'devices'
+
+      const spotifyClient = new SpotifyWebApiClient(accessToken)
+
+      if (type === 'devices') {
+        const devices = await spotifyClient.getDevices()
+        return new Response(
+          JSON.stringify({ devices }),
+          {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      } else if (type === 'state') {
+        const playbackState = await spotifyClient.getPlaybackState()
+        return new Response(
+          JSON.stringify({ playbackState }),
+          {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      } else {
+        // Return both by default
+        const [devices, playbackState] = await Promise.all([
+          spotifyClient.getDevices(),
+          spotifyClient.getPlaybackState(),
+        ])
+
+        return new Response(
+          JSON.stringify({ devices, playbackState }),
+          {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      }
+    } catch (error) {
+      console.error('Get playback data error:', error)
+      return new Response(
+        JSON.stringify({ error: 'Failed to get playback data' }),
+        {
+          status: 500,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+    }
+  },
+})

src/app/routes/api/spotify/token.ts

@@ -0,0 +1,127 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+
+const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!
+const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
+
+export const ServerRoute = createServerFileRoute('/api/spotify/token').methods({
+  POST: async ({ request }: { request: Request }) => {
+    try {
+      const body = await request.json()
+      const { refresh_token } = body
+
+      if (!refresh_token) {
+        return new Response(
+          JSON.stringify({ error: 'refresh_token is required' }),
+          {
+            status: 400,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      }
+
+      // Refresh access token
+      const tokenResponse = await fetch('https://accounts.spotify.com/api/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Authorization': `Basic ${Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString('base64')}`,
+        },
+        body: new URLSearchParams({
+          grant_type: 'refresh_token',
+          refresh_token,
+        }),
+      })
+
+      if (!tokenResponse.ok) {
+        const error = await tokenResponse.json()
+        console.error('Token refresh error:', error)
+        return new Response(
+          JSON.stringify({ error: 'Failed to refresh token', details: error }),
+          {
+            status: tokenResponse.status,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      }
+
+      const tokens = await tokenResponse.json()
+
+      // Return new tokens
+      return new Response(
+        JSON.stringify({
+          access_token: tokens.access_token,
+          expires_in: tokens.expires_in,
+          scope: tokens.scope,
+          token_type: tokens.token_type,
+        }),
+        {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+    } catch (error) {
+      console.error('Token refresh endpoint error:', error)
+      return new Response(
+        JSON.stringify({ error: 'Internal server error' }),
+        {
+          status: 500,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+    }
+  },
+
+  // GET endpoint to retrieve current tokens from cookies
+  GET: async ({ request }: { request: Request }) => {
+    try {
+      const cookieHeader = request.headers.get('cookie')
+      if (!cookieHeader) {
+        return new Response(
+          JSON.stringify({ error: 'No cookies found' }),
+          {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      }
+
+      const cookies = Object.fromEntries(
+        cookieHeader.split('; ').map((c: string) => c.split('='))
+      )
+
+      const accessToken = cookies.spotify_access_token
+      const refreshToken = cookies.spotify_refresh_token
+
+      if (!accessToken && !refreshToken) {
+        return new Response(
+          JSON.stringify({ error: 'No Spotify tokens found' }),
+          {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      }
+
+      return new Response(
+        JSON.stringify({
+          access_token: accessToken || null,
+          refresh_token: refreshToken || null,
+          has_tokens: !!(accessToken || refreshToken),
+        }),
+        {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+    } catch (error) {
+      console.error('Get tokens endpoint error:', error)
+      return new Response(
+        JSON.stringify({ error: 'Internal server error' }),
+        {
+          status: 500,
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+    }
+  },
+})