attempted upgrade
This commit is contained in:
yohlo
@@ -1,127 +1,146 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { SpotifyAuth } from '@/lib/spotify/auth'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
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!
|
||||
const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!;
|
||||
const SPOTIFY_CLIENT_SECRET = import.meta.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 }) => {
|
||||
const getReturnPath = (state: string | null): string => {
|
||||
if (!state) return '/';
|
||||
try {
|
||||
const decodedState = JSON.parse(atob(state));
|
||||
return decodedState.returnPath || '/';
|
||||
} catch {
|
||||
return '/';
|
||||
}
|
||||
};
|
||||
export const Route = createFileRoute("/api/spotify/callback")({
|
||||
server: {
|
||||
handlers: {
|
||||
GET: async ({ request }: { request: Request }) => {
|
||||
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')
|
||||
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);
|
||||
const returnPath = getReturnPath(state);
|
||||
|
||||
if (error) {
|
||||
console.error('Spotify OAuth error:', error)
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': returnPath + '?spotify_error=' + encodeURIComponent(error),
|
||||
},
|
||||
})
|
||||
}
|
||||
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',
|
||||
},
|
||||
})
|
||||
}
|
||||
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,
|
||||
})
|
||||
console.log("Token exchange attempt:", {
|
||||
client_id: SPOTIFY_CLIENT_ID,
|
||||
redirect_uri: SPOTIFY_REDIRECT_URI,
|
||||
has_code: !!code,
|
||||
has_state: !!state,
|
||||
});
|
||||
|
||||
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,
|
||||
}),
|
||||
})
|
||||
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,
|
||||
})
|
||||
|
||||
const errorParam = encodeURIComponent(`${tokenResponse.status}: ${errorText}`)
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': `${returnPath}?spotify_error=token_exchange_failed&details=${errorParam}`,
|
||||
},
|
||||
})
|
||||
}
|
||||
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,
|
||||
});
|
||||
|
||||
const tokens = await tokenResponse.json()
|
||||
const errorParam = encodeURIComponent(
|
||||
`${tokenResponse.status}: ${errorText}`
|
||||
);
|
||||
return new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
Location: `${returnPath}?spotify_error=token_exchange_failed&details=${errorParam}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
console.log('Token exchange successful:', {
|
||||
has_access_token: !!tokens.access_token,
|
||||
has_refresh_token: !!tokens.refresh_token,
|
||||
expires_in: tokens.expires_in,
|
||||
})
|
||||
const tokens = await tokenResponse.json();
|
||||
|
||||
console.log('Decoded return path:', returnPath);
|
||||
console.log("Token exchange successful:", {
|
||||
has_access_token: !!tokens.access_token,
|
||||
has_refresh_token: !!tokens.refresh_token,
|
||||
expires_in: tokens.expires_in,
|
||||
});
|
||||
|
||||
const response = new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
'Location': returnPath + '?spotify_auth=success',
|
||||
},
|
||||
})
|
||||
console.log("Decoded return path:", returnPath);
|
||||
|
||||
const isSecure = process.env.NODE_ENV === 'production'
|
||||
const cookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${tokens.expires_in}`
|
||||
const response = new Response(null, {
|
||||
status: 302,
|
||||
headers: {
|
||||
Location: returnPath + "?spotify_auth=success",
|
||||
},
|
||||
});
|
||||
|
||||
response.headers.append('Set-Cookie', `spotify_access_token=${tokens.access_token}; ${cookieOptions}`)
|
||||
|
||||
if (tokens.refresh_token) {
|
||||
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}`)
|
||||
}
|
||||
const isSecure = import.meta.env.NODE_ENV === "production";
|
||||
const cookieOptions = `HttpOnly; Secure=${isSecure}; SameSite=Strict; Path=/; Max-Age=${tokens.expires_in}`;
|
||||
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Spotify callback error:', error)
|
||||
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',
|
||||
},
|
||||
})
|
||||
}
|
||||
response.headers.append(
|
||||
"Set-Cookie",
|
||||
`spotify_access_token=${tokens.access_token}; ${cookieOptions}`
|
||||
);
|
||||
|
||||
if (tokens.refresh_token) {
|
||||
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);
|
||||
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",
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,59 +1,60 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { SpotifyWebApiClient } from '@/lib/spotify/client'
|
||||
import type { SpotifyPlaybackSnapshot } from '@/lib/spotify/types'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { SpotifyWebApiClient } from "@/lib/spotify/client";
|
||||
import type { SpotifyPlaybackSnapshot } from "@/lib/spotify/types";
|
||||
|
||||
export const ServerRoute = createServerFileRoute('/api/spotify/capture').methods({
|
||||
POST: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
// Get access token from cookies
|
||||
const cookies = request.headers.get('Cookie') || ''
|
||||
const accessTokenMatch = cookies.match(/spotify_access_token=([^;]+)/)
|
||||
|
||||
if (!accessTokenMatch) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No access token found' }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
export const Route = createFileRoute("/api/spotify/capture")({
|
||||
server: {
|
||||
handlers: {
|
||||
POST: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const cookies = request.headers.get("Cookie") || "";
|
||||
const accessTokenMatch = cookies.match(
|
||||
/spotify_access_token=([^;]+)/
|
||||
);
|
||||
|
||||
if (!accessTokenMatch) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: "No access token found" }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const accessToken = decodeURIComponent(accessTokenMatch[1])
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken)
|
||||
const accessToken = decodeURIComponent(accessTokenMatch[1]);
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken);
|
||||
|
||||
// Create a snapshot of the current playback state
|
||||
const snapshot = await spotifyClient.createPlaybackSnapshot()
|
||||
|
||||
if (!snapshot) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No active playback to capture' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
const snapshot = await spotifyClient.createPlaybackSnapshot();
|
||||
|
||||
if (!snapshot) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: "No active playback to capture" }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ snapshot }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
return new Response(JSON.stringify({ snapshot }), {
|
||||
status: 200,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Spotify capture error:", error);
|
||||
|
||||
const errorMessage =
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Failed to capture playback state";
|
||||
|
||||
return new Response(JSON.stringify({ error: errorMessage }), {
|
||||
status: 500,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Spotify capture error:', error)
|
||||
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to capture playback state'
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ error: errorMessage }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,202 +1,203 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { SpotifyWebApiClient } from '@/lib/spotify/client'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { SpotifyWebApiClient } from "@/lib/spotify/client";
|
||||
|
||||
function getAccessTokenFromCookies(request: Request): string | null {
|
||||
const cookieHeader = request.headers.get('cookie')
|
||||
if (!cookieHeader) return null
|
||||
const cookieHeader = request.headers.get("cookie");
|
||||
if (!cookieHeader) return null;
|
||||
|
||||
const cookies = Object.fromEntries(
|
||||
cookieHeader.split('; ').map(c => c.split('='))
|
||||
)
|
||||
cookieHeader.split("; ").map((c) => c.split("="))
|
||||
);
|
||||
|
||||
return cookies.spotify_access_token || null
|
||||
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, trackId, positionMs } = body
|
||||
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken)
|
||||
|
||||
switch (action) {
|
||||
case 'play':
|
||||
await spotifyClient.play(deviceId)
|
||||
break
|
||||
case 'playTrack':
|
||||
if (!trackId) {
|
||||
export const Route = createFileRoute("/api/spotify/playback")({
|
||||
server: {
|
||||
handlers: {
|
||||
POST: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const accessToken = getAccessTokenFromCookies(request);
|
||||
if (!accessToken) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'trackId is required for playTrack action' }),
|
||||
JSON.stringify({ error: "No access token found" }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
status: 401,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
await spotifyClient.playTrack(trackId, deviceId, positionMs)
|
||||
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') {
|
||||
|
||||
const body = await request.json();
|
||||
const { action, deviceId, volumePercent, trackId, positionMs } = body;
|
||||
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken);
|
||||
|
||||
switch (action) {
|
||||
case "play":
|
||||
await spotifyClient.play(deviceId);
|
||||
break;
|
||||
case "playTrack":
|
||||
if (!trackId) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
error: "trackId is required for playTrack action",
|
||||
}),
|
||||
{
|
||||
status: 400,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
await spotifyClient.playTrack(trackId, deviceId, positionMs);
|
||||
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);
|
||||
|
||||
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" },
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const accessToken = getAccessTokenFromCookies(request);
|
||||
if (!accessToken) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'volumePercent must be a number' }),
|
||||
JSON.stringify({ error: "No access token found" }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
status: 401,
|
||||
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' },
|
||||
}
|
||||
)
|
||||
|
||||
const url = new URL(request.url);
|
||||
const type = url.searchParams.get("type");
|
||||
|
||||
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 {
|
||||
const [devices, playbackState] = await Promise.all([
|
||||
spotifyClient.getDevices(),
|
||||
spotifyClient.getPlaybackState(),
|
||||
]);
|
||||
|
||||
return new Response(JSON.stringify({ devices, playbackState }), {
|
||||
status: 200,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
await spotifyClient.transferPlayback(deviceId)
|
||||
break
|
||||
default:
|
||||
} catch (error) {
|
||||
console.error("Get playback data error:", error);
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Invalid action' }),
|
||||
JSON.stringify({ error: "Failed to get playback data" }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
status: 500,
|
||||
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)
|
||||
|
||||
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' },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
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: 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')
|
||||
|
||||
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 {
|
||||
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' },
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,72 +1,71 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { SpotifyWebApiClient } from '@/lib/spotify/client'
|
||||
import type { SpotifyPlaybackSnapshot } from '@/lib/spotify/types'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { SpotifyWebApiClient } from "@/lib/spotify/client";
|
||||
import type { SpotifyPlaybackSnapshot } from "@/lib/spotify/types";
|
||||
|
||||
export const ServerRoute = createServerFileRoute('/api/spotify/resume').methods({
|
||||
POST: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
// Get access token from cookies
|
||||
const cookies = request.headers.get('Cookie') || ''
|
||||
const accessTokenMatch = cookies.match(/spotify_access_token=([^;]+)/)
|
||||
|
||||
if (!accessTokenMatch) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No access token found' }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
export const Route = createFileRoute("/api/spotify/resume")({
|
||||
server: {
|
||||
handlers: {
|
||||
POST: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const cookies = request.headers.get("Cookie") || "";
|
||||
const accessTokenMatch = cookies.match(
|
||||
/spotify_access_token=([^;]+)/
|
||||
);
|
||||
|
||||
if (!accessTokenMatch) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: "No access token found" }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const accessToken = decodeURIComponent(accessTokenMatch[1])
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken)
|
||||
const accessToken = decodeURIComponent(accessTokenMatch[1]);
|
||||
const spotifyClient = new SpotifyWebApiClient(accessToken);
|
||||
|
||||
// Parse the request body to get the snapshot
|
||||
const body = await request.json()
|
||||
const { snapshot } = body as { snapshot: SpotifyPlaybackSnapshot }
|
||||
|
||||
if (!snapshot) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'No snapshot provided' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
const body = await request.json();
|
||||
const { snapshot } = body as { snapshot: SpotifyPlaybackSnapshot };
|
||||
|
||||
if (!snapshot) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: "No snapshot provided" }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// Restore the playback state from the snapshot
|
||||
await spotifyClient.restorePlaybackSnapshot(snapshot)
|
||||
await spotifyClient.restorePlaybackSnapshot(snapshot);
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ success: true }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
return new Response(JSON.stringify({ success: true }), {
|
||||
status: 200,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Spotify resume error:", error);
|
||||
|
||||
let errorMessage = "Failed to resume playback state";
|
||||
|
||||
if (error instanceof Error) {
|
||||
if (
|
||||
error.message.includes("Premium") ||
|
||||
error.message.includes("403")
|
||||
) {
|
||||
errorMessage = "Spotify premium required";
|
||||
} else {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify({ error: errorMessage }), {
|
||||
status: 500,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Spotify resume error:', error)
|
||||
|
||||
let errorMessage = 'Failed to resume playback state'
|
||||
|
||||
// Handle common Spotify Premium requirement error
|
||||
if (error instanceof Error) {
|
||||
if (error.message.includes('Premium') || error.message.includes('403')) {
|
||||
errorMessage = 'Spotify Premium required for playback control'
|
||||
} else {
|
||||
errorMessage = error.message
|
||||
}
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ error: errorMessage }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,81 +1,87 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
// Function to get Client Credentials access token
|
||||
async function getClientCredentialsToken(): Promise<string> {
|
||||
const clientId = process.env.VITE_SPOTIFY_CLIENT_ID
|
||||
const clientSecret = process.env.SPOTIFY_CLIENT_SECRET
|
||||
const clientId = import.meta.env.VITE_SPOTIFY_CLIENT_ID;
|
||||
const clientSecret = import.meta.env.SPOTIFY_CLIENT_SECRET;
|
||||
|
||||
if (!clientId || !clientSecret) {
|
||||
throw new Error('Missing Spotify client credentials')
|
||||
throw new Error("Missing Spotify client credentials");
|
||||
}
|
||||
|
||||
const response = await fetch('https://accounts.spotify.com/api/token', {
|
||||
method: 'POST',
|
||||
const response = await fetch("https://accounts.spotify.com/api/token", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Authorization': `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
Authorization: `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString("base64")}`,
|
||||
},
|
||||
body: 'grant_type=client_credentials',
|
||||
})
|
||||
body: "grant_type=client_credentials",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get Spotify access token')
|
||||
throw new Error("Failed to get Spotify access token");
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return data.access_token
|
||||
const data = await response.json();
|
||||
return data.access_token;
|
||||
}
|
||||
|
||||
export const ServerRoute = createServerFileRoute('/api/spotify/search').methods({
|
||||
GET: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const url = new URL(request.url)
|
||||
const query = url.searchParams.get('q')
|
||||
export const Route = createFileRoute("/api/spotify/search")({
|
||||
server: {
|
||||
handlers: {
|
||||
GET: async ({ request }: { request: Request }) => {
|
||||
try {
|
||||
const url = new URL(request.url);
|
||||
const query = url.searchParams.get("q");
|
||||
|
||||
if (!query) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Query parameter q is required' }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
if (!query) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: "Query parameter q is required" }),
|
||||
{
|
||||
status: 400,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// Get client credentials access token
|
||||
const accessToken = await getClientCredentialsToken()
|
||||
// Get client credentials access token
|
||||
const accessToken = await getClientCredentialsToken();
|
||||
|
||||
// Search using Spotify API directly
|
||||
const searchUrl = `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&limit=20`
|
||||
// Search using Spotify API directly
|
||||
const searchUrl = `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&limit=20`;
|
||||
|
||||
const searchResponse = await fetch(searchUrl, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
})
|
||||
const searchResponse = await fetch(searchUrl, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!searchResponse.ok) {
|
||||
throw new Error('Spotify search request failed')
|
||||
}
|
||||
if (!searchResponse.ok) {
|
||||
throw new Error("Spotify search request failed");
|
||||
}
|
||||
|
||||
const searchResult = await searchResponse.json()
|
||||
const searchResult = await searchResponse.json();
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ tracks: searchResult.tracks.items }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
return new Response(
|
||||
JSON.stringify({ tracks: searchResult.tracks.items }),
|
||||
{
|
||||
status: 200,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Search error:", error);
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
error: "Search failed",
|
||||
details: error instanceof Error ? error.message : "Unknown error",
|
||||
}),
|
||||
{
|
||||
status: 500,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Search error:', error)
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Search failed', details: error instanceof Error ? error.message : 'Unknown error' }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
+119
-115
@@ -1,127 +1,131 @@
|
||||
import { createServerFileRoute } from '@tanstack/react-start/server'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!
|
||||
const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET!
|
||||
const SPOTIFY_CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID!;
|
||||
const SPOTIFY_CLIENT_SECRET = import.meta.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
|
||||
export const Route = createFileRoute("/api/spotify/token")({
|
||||
server: {
|
||||
handlers: {
|
||||
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' },
|
||||
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,
|
||||
}),
|
||||
})
|
||||
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' },
|
||||
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()
|
||||
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' },
|
||||
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" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
} 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: 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" },
|
||||
}
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// 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' },
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user