codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

Compare commits

base: codey:823c8b52b36a0e45bad21fa14ef12f760cc81eb3
Branches Tags
codey:master codey:dev
..
compare: codey:dev
Branches Tags
codey:dev codey:master

5 Commits
823c8b52b3 ... dev

Author SHA1 Message Date
codey
1da33de892 Refactor components to TypeScript, enhance media request handling, and improve UI elements 
- Updated Radio component to TypeScript and added WebSocket connection checks.
- Enhanced DiscordLogs component with thread detection and improved bot presence checks.
- Modified Login component to include a client ID for authentication.
- Refactored RadioBanner for better styling and accessibility.
- Improved BreadcrumbNav with Astro reload attribute for better navigation.
- Enhanced MediaRequestForm to prevent rapid clicks during track play/pause.
- Updated RequestManagement to handle track lists and finalizing job status more effectively.
- Improved CSS for RequestManagement to enhance progress bar and track list display.
 2026-01-25 13:11:25 -05:00
codey
256d5d9c7f Redirect user to requests page after successful media request submission 
js->ts
 2025-12-24 09:55:08 -05:00
codey
bb71f662ed Enhance mobile menu styles and update progress handling in RequestManagement component 2025-12-24 07:50:15 -05:00
codey
bc847629e6 . 2025-12-19 13:45:37 -05:00
codey
7b3862c43a js -> ts 2025-12-19 13:45:30 -05:00
32 changed files with 1743 additions and 535 deletions
Expand all files Collapse all files

1
src/assets/styles/global.css
View File

@@ -364,7 +364,6 @@ Custom
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 9999px; border-radius: 9999px;
border: 1px solid; border: 1px solid;
text-transform: uppercase;
letter-spacing: 0.025em; letter-spacing: 0.025em;
} }

11
src/assets/styles/nav.css
View File

@@ -29,10 +29,19 @@
} }
.mobile-menu-dropdown.open { .mobile-menu-dropdown.open {
max-height: 500px; max-height: none;
overflow: visible;
padding-bottom: 0.75rem;
opacity: 1; opacity: 1;
} }
.mobile-menu-dropdown a {
font-size: 0.95rem;
line-height: 1.25rem;
padding: 0.6rem 0.75rem;
border-radius: 12px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.mobile-menu-dropdown { .mobile-menu-dropdown {
display: none; display: none;

14
src/assets/styles/player.css
View File

@@ -6,10 +6,10 @@
} }
:root { :root {
--lrc-text-color: #333; /* darker text */ --lrc-text-color: #666; /* muted text for inactive lines */
--lrc-bg-color: rgba(0, 0, 0, 0.05); --lrc-bg-color: rgba(0, 0, 0, 0.05);
--lrc-active-color: #000; /* bold black for active */ --lrc-active-color: #000; /* bold black for active */
--lrc-active-shadow: none; /* no glow in light mode */ --lrc-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* subtle shadow in light mode */
--lrc-hover-color: #005fcc; /* darker blue hover */ --lrc-hover-color: #005fcc; /* darker blue hover */
} }
@@ -259,7 +259,7 @@ body {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
max-height: 125px; max-height: 220px;
max-width: 100%; max-width: 100%;
overflow-y: auto; overflow-y: auto;
margin-top: 1rem; margin-top: 1rem;
@@ -277,6 +277,9 @@ body {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #999 transparent; scrollbar-color: #999 transparent;
scroll-padding-bottom: 1rem; scroll-padding-bottom: 1rem;
overscroll-behavior: contain;
touch-action: pan-y;
scroll-behavior: smooth;
} }
.lrc-text.empty { .lrc-text.empty {
@@ -297,9 +300,10 @@ body {
.lrc-line.active { .lrc-line.active {
color: var(--lrc-active-color); color: var(--lrc-active-color);
font-weight: 600; font-weight: 700;
font-size: 0.8rem; font-size: 0.95rem;
text-shadow: var(--lrc-active-shadow); text-shadow: var(--lrc-active-shadow);
transform: scale(1.02);
} }
.lrc-line:hover { .lrc-line:hover {

120
src/components/AppLayout.tsx
View File

@@ -1,27 +1,49 @@
import React, { Suspense, lazy, useState, useMemo, useEffect } from 'react'; import React, { Suspense, lazy, useState, useMemo, useEffect } from 'react';
import type { ComponentType } from 'react'; import type { ComponentType } from 'react';
import Memes from './Memes.jsx'; import Memes from './Memes.tsx';
import Lighting from './Lighting.jsx'; import Lighting from './Lighting.tsx';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { JoyUIRootIsland } from './Components.jsx'; import { JoyUIRootIsland } from './Components.tsx';
import { PrimeReactProvider } from "primereact/api"; import { PrimeReactProvider } from "primereact/api";
import { usePrimeReactThemeSwitcher } from '@/hooks/usePrimeReactThemeSwitcher.jsx'; import { usePrimeReactThemeSwitcher } from '@/hooks/usePrimeReactThemeSwitcher.tsx';
import CustomToastContainer from '../components/ToastProvider.jsx'; import CustomToastContainer from '../components/ToastProvider.tsx';
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'; import 'primereact/resources/themes/bootstrap4-light-blue/theme.css';
import 'primereact/resources/primereact.min.css'; import 'primereact/resources/primereact.min.css';
import "primeicons/primeicons.css"; import "primeicons/primeicons.css";
const LoginPage = lazy(() => import('./Login.jsx')); const LoginPage = lazy(() => import('./Login.tsx'));
const LyricSearch = lazy(() => import('./LyricSearch')); const LyricSearch = lazy(() => import('./LyricSearch'));
const MediaRequestForm = lazy(() => import('./TRip/MediaRequestForm.jsx')); const MediaRequestForm = lazy(() => import('./TRip/MediaRequestForm.tsx'));
const RequestManagement = lazy(() => import('./TRip/RequestManagement.jsx')); const RequestManagement = lazy(() => import('./TRip/RequestManagement.tsx'));
const DiscordLogs = lazy(() => import('./DiscordLogs.jsx')); const DiscordLogs = lazy(() => import('./DiscordLogs.tsx'));
// NOTE: Player is intentionally NOT imported at module initialization. // NOTE: Player is intentionally NOT imported at module initialization.
// We create the lazy import inside the component at render-time only when // We create the lazy import inside the component at render-time only when
// we are on the main site and the Player island should be rendered. This // we are on the main site and the Player island should be rendered. This
// prevents bundling the player island into pages that are explicitly // prevents bundling the player island into pages that are explicitly
// identified as subsites. // identified as subsites.
const ReqForm = lazy(() => import('./req/ReqForm.jsx')); const ReqForm = lazy(() => import('./req/ReqForm.tsx'));
// Simple error boundary for lazy islands
class LazyBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean }> {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(err) {
if (import.meta.env.DEV) {
console.error('[AppLayout] lazy island error', err);
}
}
render() {
if (this.state.hasError) {
return <div style={{ padding: '1rem', textAlign: 'center' }}>Something went wrong loading this module.</div>;
}
return this.props.children;
}
}
declare global { declare global {
interface Window { interface Window {
@@ -46,7 +68,8 @@ export interface RootProps {
export default function Root({ child, user = undefined, ...props }: RootProps): React.ReactElement { export default function Root({ child, user = undefined, ...props }: RootProps): React.ReactElement {
window.toast = toast; window.toast = toast;
const theme = document.documentElement.getAttribute("data-theme") const theme = document.documentElement.getAttribute("data-theme") ?? null;
const toastTheme = theme ?? undefined;
const loggedIn = props.loggedIn ?? Boolean(user); const loggedIn = props.loggedIn ?? Boolean(user);
usePrimeReactThemeSwitcher(theme); usePrimeReactThemeSwitcher(theme);
// Avoid adding the Player island for subsite requests. We expose a // Avoid adding the Player island for subsite requests. We expose a
@@ -54,15 +77,18 @@ export default function Root({ child, user = undefined, ...props }: RootProps):
// don't need to pass guards. // don't need to pass guards.
const isSubsite = typeof document !== 'undefined' && document.documentElement.getAttribute('data-subsite') === 'true'; const isSubsite = typeof document !== 'undefined' && document.documentElement.getAttribute('data-subsite') === 'true';
// Log when the active child changes (DEV only) // Log when the active child changes (DEV only)
const devLogsEnabled = import.meta.env.DEV && import.meta.env.VITE_DEV_LOGS === '1';
useEffect(() => { useEffect(() => {
if (!devLogsEnabled) return;
try { try {
if (typeof console !== 'undefined' && typeof document !== 'undefined' && import.meta.env.DEV) { if (typeof console !== 'undefined' && typeof document !== 'undefined') {
console.debug(`[AppLayout] child=${String(child)}, data-subsite=${document.documentElement.getAttribute('data-subsite')}`); console.debug(`[AppLayout] child=${String(child)}, data-subsite=${document.documentElement.getAttribute('data-subsite')}`);
} }
} catch (e) { } catch (e) {
// no-op // no-op
} }
}, [child]); }, [child, devLogsEnabled]);
// Only initialize the lazy player when this is NOT a subsite and the // Only initialize the lazy player when this is NOT a subsite and the
// active child is the Player island. Placing the lazy() call here // active child is the Player island. Placing the lazy() call here
@@ -81,7 +107,7 @@ export default function Root({ child, user = undefined, ...props }: RootProps):
let mounted = true; let mounted = true;
if (wantPlayer) { if (wantPlayer) {
if (import.meta.env.DEV) { try { console.debug('[AppLayout] dynamic-import: requesting AudioPlayer'); } catch (e) { } } if (import.meta.env.DEV) { try { console.debug('[AppLayout] dynamic-import: requesting AudioPlayer'); } catch (e) { } }
import('./AudioPlayer.jsx') import('./Radio.tsx')
.then((mod) => { .then((mod) => {
if (!mounted) return; if (!mounted) return;
// set the component factory // set the component factory
@@ -102,7 +128,7 @@ export default function Root({ child, user = undefined, ...props }: RootProps):
return ( return (
<PrimeReactProvider> <PrimeReactProvider>
<CustomToastContainer <CustomToastContainer
theme={theme} theme={toastTheme}
newestOnTop={true} newestOnTop={true}
closeOnClick={true} /> closeOnClick={true} />
<JoyUIRootIsland> <JoyUIRootIsland>
@@ -113,23 +139,59 @@ export default function Root({ child, user = undefined, ...props }: RootProps):
color="danger"> color="danger">
Work in progress... bugs are to be expected. Work in progress... bugs are to be expected.
</Alert> */} </Alert> */}
{child == "LoginPage" && (<LoginPage {...props} loggedIn={loggedIn} />)} {child == "LoginPage" && (
{child == "LyricSearch" && (<LyricSearch {...props} client:only="react" />)} <LazyBoundary>
{child == "Player" && !isSubsite && PlayerComp && (
<Suspense fallback={null}>
<PlayerComp client:only="react" user={user} />
</Suspense>
)}
{child == "Memes" && <Memes client:only="react" />}
{child == "DiscordLogs" && (
<Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}> <Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
<DiscordLogs client:only="react" /> <LoginPage {...props} loggedIn={loggedIn} />
</Suspense> </Suspense>
</LazyBoundary>
)}
{child == "LyricSearch" && (
<LazyBoundary>
<Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
<LyricSearch />
</Suspense>
</LazyBoundary>
)}
{child == "Player" && !isSubsite && PlayerComp && (
<LazyBoundary>
<Suspense fallback={null}>
<PlayerComp user={user} />
</Suspense>
</LazyBoundary>
)}
{child == "Memes" && (
<LazyBoundary>
<Memes />
</LazyBoundary>
)}
{child == "DiscordLogs" && (
<LazyBoundary>
<Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
<DiscordLogs />
</Suspense>
</LazyBoundary>
)}
{child == "qs2.MediaRequestForm" && (
<LazyBoundary>
<MediaRequestForm />
</LazyBoundary>
)}
{child == "qs2.RequestManagement" && (
<LazyBoundary>
<RequestManagement />
</LazyBoundary>
)}
{child == "ReqForm" && (
<LazyBoundary>
<ReqForm />
</LazyBoundary>
)}
{child == "Lighting" && (
<LazyBoundary>
<Lighting key={window.location.pathname + Math.random()} />
</LazyBoundary>
)} )}
{child == "qs2.MediaRequestForm" && <MediaRequestForm client:only="react" />}
{child == "qs2.RequestManagement" && <RequestManagement client:only="react" />}
{child == "ReqForm" && <ReqForm {...props} client:only="react" />}
{child == "Lighting" && <Lighting key={window.location.pathname + Math.random()} client:only="react" />}
</JoyUIRootIsland> </JoyUIRootIsland>
</PrimeReactProvider> </PrimeReactProvider>
); );

316
src/components/DiscordLogs.tsx
View File

@@ -38,6 +38,9 @@ interface DiscordChannel {
topic?: string; topic?: string;
messageCount?: number; messageCount?: number;
threads?: DiscordChannel[]; threads?: DiscordChannel[];
categoryName?: string | null;
categoryPosition?: number;
guild?: DiscordGuild;
} }
interface DiscordEmoji { interface DiscordEmoji {
@@ -134,14 +137,24 @@ interface DiscordMessage {
tts?: boolean; tts?: boolean;
} }
interface MemberSummary {
id: string;
username?: string;
displayName?: string;
avatar?: string;
color?: string | number;
isBot?: boolean;
}
interface MemberGroup { interface MemberGroup {
role?: DiscordRole; role?: DiscordRole;
members?: Array<{ id: string; color?: string | number }>; members?: MemberSummary[];
} }
interface MembersData { interface MembersData {
groups?: MemberGroup[]; groups?: MemberGroup[];
roles?: Map<string, DiscordRole> | Record<string, DiscordRole>; roles?: Map<string, DiscordRole> | Record<string, DiscordRole>;
totalMembers?: number;
} }
interface DiscordGuild { interface DiscordGuild {
@@ -150,7 +163,7 @@ interface DiscordGuild {
guildId?: string; guildId?: string;
guildName?: string; guildName?: string;
guildIcon?: string; guildIcon?: string;
icon?: string; icon?: string | null;
roles?: DiscordRole[]; roles?: DiscordRole[];
} }
@@ -180,7 +193,7 @@ interface MessageProps {
message: DiscordMessage; message: DiscordMessage;
isFirstInGroup: boolean; isFirstInGroup: boolean;
showTimestamp: boolean; showTimestamp: boolean;
previewCache: Map<string, LinkPreviewData>; previewCache: Record<string, LinkPreviewData>;
onPreviewLoad: (url: string, preview: LinkPreviewData) => void; onPreviewLoad: (url: string, preview: LinkPreviewData) => void;
channelMap: Map<string, DiscordChannel>; channelMap: Map<string, DiscordChannel>;
usersMap: Record<string, DiscordUser>; usersMap: Record<string, DiscordUser>;
@@ -221,7 +234,7 @@ interface ArchivedMessageResult {
interface ReactionPopupState { interface ReactionPopupState {
x: number; x: number;
y: number; y: number;
emoji: { id?: string; name: string; animated?: boolean }; emoji: { id?: string; name: string; animated?: boolean; url?: string };
users: Array<{ id: string; username?: string; displayName?: string; avatar?: string }>; users: Array<{ id: string; username?: string; displayName?: string; avatar?: string }>;
loading?: boolean; loading?: boolean;
} }
@@ -663,7 +676,7 @@ const ARCHIVE_USERS = {
* If members data is provided, looks up color from there * If members data is provided, looks up color from there
* Returns user data if found, otherwise returns a basic object with just the username * Returns user data if found, otherwise returns a basic object with just the username
*/ */
function resolveArchivedUser(archivedUsername: string, usersMap?: Record<string, DiscordUser>, members?: MembersData): DiscordUser { function resolveArchivedUser(archivedUsername: string, usersMap?: Record<string, DiscordUser>, members?: MembersData | null): DiscordUser {
// First check hardcoded archive users // First check hardcoded archive users
if (ARCHIVE_USERS[archivedUsername]) { if (ARCHIVE_USERS[archivedUsername]) {
const archivedUser = ARCHIVE_USERS[archivedUsername]; const archivedUser = ARCHIVE_USERS[archivedUsername];
@@ -2480,19 +2493,19 @@ export default function DiscordLogs() {
try { try {
const response = await authFetch('/api/discord/channels'); const response = await authFetch('/api/discord/channels');
if (!response.ok) throw new Error('Failed to fetch channels'); if (!response.ok) throw new Error('Failed to fetch channels');
const data = await response.json(); const data = await response.json() as DiscordChannel[];
// Separate categories (type 4), text channels (type 0), and threads (types 10, 11, 12) // Separate categories (type 4), text channels (type 0), and threads (types 10, 11, 12)
const categories = {}; const categories: Record<string, { id: string; name: string; position: number; guildId?: string }> = {};
const textChannels = []; const textChannels: DiscordChannel[] = [];
const threads = []; const threads: DiscordChannel[] = [];
data.forEach(channel => { (data as DiscordChannel[]).forEach((channel: DiscordChannel) => {
if (channel.type === 4) { if (channel.type === 4) {
categories[channel.id] = { categories[channel.id] = {
id: channel.id, id: channel.id,
name: channel.name, name: channel.name,
position: channel.position, position: channel.position ?? 0,
guildId: channel.guildId, guildId: channel.guildId,
}; };
} else if (channel.type === 10 || channel.type === 11 || channel.type === 12) { } else if (channel.type === 10 || channel.type === 11 || channel.type === 12) {
@@ -2503,8 +2516,8 @@ export default function DiscordLogs() {
}); });
// Create a map of parent channel ID to threads // Create a map of parent channel ID to threads
const threadsByParent = {}; const threadsByParent: Record<string, DiscordChannel[]> = {};
threads.forEach(thread => { threads.forEach((thread: DiscordChannel) => {
if (thread.parentId) { if (thread.parentId) {
if (!threadsByParent[thread.parentId]) { if (!threadsByParent[thread.parentId]) {
threadsByParent[thread.parentId] = []; threadsByParent[thread.parentId] = [];
@@ -2514,10 +2527,10 @@ export default function DiscordLogs() {
}); });
// Group channels by guild // Group channels by guild
const byGuild = {}; const byGuild: Record<string, DiscordChannel[]> = {};
const guildMap = {}; const guildMap: Record<string, DiscordGuild> = {};
textChannels.forEach(channel => { textChannels.forEach((channel: DiscordChannel) => {
const guildId = channel.guildId || 'unknown'; const guildId = channel.guildId || 'unknown';
if (!byGuild[guildId]) { if (!byGuild[guildId]) {
byGuild[guildId] = []; byGuild[guildId] = [];
@@ -2525,10 +2538,10 @@ export default function DiscordLogs() {
id: guildId, id: guildId,
name: channel.guildName || 'Discord Archive', name: channel.guildName || 'Discord Archive',
icon: channel.guildIcon || null, icon: channel.guildIcon || null,
}; } as DiscordGuild;
} }
const categoryName = channel.parentId ? categories[channel.parentId]?.name : null; const categoryName = channel.parentId ? categories[channel.parentId]?.name ?? null : null;
const categoryPosition = channel.parentId ? categories[channel.parentId]?.position : -1; const categoryPosition = channel.parentId ? categories[channel.parentId]?.position ?? -1 : -1;
// Get threads for this channel // Get threads for this channel
const channelThreads = threadsByParent[channel.id] || []; const channelThreads = threadsByParent[channel.id] || [];
@@ -2543,22 +2556,22 @@ export default function DiscordLogs() {
categoryName, categoryName,
categoryPosition, categoryPosition,
guild: guildMap[guildId], guild: guildMap[guildId],
messageCount: channel.messageCount || 0, messageCount: channel.messageCount ?? 0,
threads: channelThreads.map(t => ({ threads: channelThreads.map(t => ({
id: t.id, id: t.id,
name: t.name, name: t.name,
type: t.type, type: t.type,
messageCount: t.messageCount || 0, messageCount: t.messageCount ?? 0,
parentId: t.parentId, parentId: t.parentId,
guildId: t.guildId, guildId: t.guildId,
guildName: t.guildName, guildName: t.guildName,
guildIcon: t.guildIcon, guildIcon: t.guildIcon,
})), })),
}); } as DiscordChannel);
}); });
// Sort guilds - put "no place like ::1" first // Sort guilds - put "no place like ::1" first
const guildList = Object.values(guildMap).sort((a, b) => { const guildList = (Object.values(guildMap) as DiscordGuild[]).sort((a, b) => {
if (a.name === 'no place like ::1') return -1; if (a.name === 'no place like ::1') return -1;
if (b.name === 'no place like ::1') return 1; if (b.name === 'no place like ::1') return 1;
return a.name.localeCompare(b.name); return a.name.localeCompare(b.name);
@@ -2569,23 +2582,23 @@ export default function DiscordLogs() {
byGuild[guildId].sort((a, b) => { byGuild[guildId].sort((a, b) => {
// First sort by category position (no category = -1, comes first) // First sort by category position (no category = -1, comes first)
if (a.categoryPosition !== b.categoryPosition) { if (a.categoryPosition !== b.categoryPosition) {
return a.categoryPosition - b.categoryPosition; return (a.categoryPosition ?? -1) - (b.categoryPosition ?? -1);
} }
// Then by channel position within category // Then by channel position within category
return (a.position || 0) - (b.position || 0); return (a.position ?? 0) - (b.position ?? 0);
}); });
}); });
setGuilds(guildList); setGuilds(guildList);
setChannelsByGuild(byGuild); setChannelsByGuild(byGuild);
setChannels(data); setChannels(data as DiscordChannel[]);
// Check URL hash for deep linking // Check URL hash for deep linking
const hash = window.location.hash.slice(1); // Remove # const hash = window.location.hash.slice(1); // Remove #
const [hashGuildId, hashChannelId, hashMessageId] = hash.split('/'); const [hashGuildId, hashChannelId, hashMessageId] = hash.split('/');
let initialGuild = null; let initialGuild: DiscordGuild | null = null;
let initialChannel = null; let initialChannel: DiscordChannel | null = null;
// Set target message ID for scrolling after messages load // Set target message ID for scrolling after messages load
if (hashMessageId) { if (hashMessageId) {
@@ -2596,7 +2609,7 @@ export default function DiscordLogs() {
if (hashGuildId && guildMap[hashGuildId]) { if (hashGuildId && guildMap[hashGuildId]) {
initialGuild = guildMap[hashGuildId]; initialGuild = guildMap[hashGuildId];
if (hashChannelId && byGuild[hashGuildId]) { if (hashChannelId && byGuild[hashGuildId]) {
initialChannel = byGuild[hashGuildId].find(c => c.id === hashChannelId && c.messageCount > 0); initialChannel = byGuild[hashGuildId].find(c => c.id === hashChannelId && (c.messageCount ?? 0) > 0) ?? null;
} }
} }
@@ -2606,7 +2619,7 @@ export default function DiscordLogs() {
} }
if (!initialChannel && initialGuild && byGuild[initialGuild.id]?.length > 0) { if (!initialChannel && initialGuild && byGuild[initialGuild.id]?.length > 0) {
// Pick first channel with messages // Pick first channel with messages
initialChannel = byGuild[initialGuild.id].find(c => c.type !== 4 && c.messageCount > 0); initialChannel = byGuild[initialGuild.id].find(c => c.type !== 4 && (c.messageCount ?? 0) > 0) ?? null;
} }
if (initialGuild) { if (initialGuild) {
@@ -2629,20 +2642,22 @@ export default function DiscordLogs() {
// Load members when guild or channel changes // Load members when guild or channel changes
useEffect(() => { useEffect(() => {
if (!selectedGuild) return; const guildId = selectedGuild?.id;
if (!guildId) return;
async function fetchMembers() { async function fetchMembers() {
setLoadingMembers(true); setLoadingMembers(true);
try { try {
// Include channelId to filter members by channel visibility // Include channelId to filter members by channel visibility
let url = `/api/discord/members?guildId=${selectedGuild.id}`; let url = `/api/discord/members?guildId=${guildId}`;
if (selectedChannel?.id) { const channelId = selectedChannel?.id;
url += `&channelId=${selectedChannel.id}`; if (channelId) {
url += `&channelId=${channelId}`;
} }
const response = await authFetch(url); const response = await authFetch(url);
if (!response.ok) throw new Error('Failed to fetch members'); if (!response.ok) throw new Error('Failed to fetch members');
const data = await response.json(); const data = await response.json();
setMembers(data); setMembers(data as MembersData);
} catch (err) { } catch (err) {
console.error('Failed to fetch members:', err); console.error('Failed to fetch members:', err);
setMembers(null); setMembers(null);
@@ -2656,7 +2671,8 @@ export default function DiscordLogs() {
// Load messages from API when channel changes // Load messages from API when channel changes
useEffect(() => { useEffect(() => {
if (!selectedChannel) return; const channelId = selectedChannel?.id;
if (!channelId) return;
// Reset topic expanded state when channel changes // Reset topic expanded state when channel changes
setTopicExpanded(false); setTopicExpanded(false);
@@ -2676,7 +2692,7 @@ export default function DiscordLogs() {
try { try {
// If we have a target message ID, use 'around' to fetch messages centered on it // If we have a target message ID, use 'around' to fetch messages centered on it
let url = `/api/discord/messages?channelId=${selectedChannel.id}&limit=50`; let url = `/api/discord/messages?channelId=${channelId}&limit=50`;
if (targetMessageId) { if (targetMessageId) {
url += `&around=${targetMessageId}`; url += `&around=${targetMessageId}`;
} }
@@ -2695,20 +2711,20 @@ export default function DiscordLogs() {
if (targetMessageId && messagesData.length === 0) { if (targetMessageId && messagesData.length === 0) {
console.warn(`Target message ${targetMessageId} not found, loading latest messages`); console.warn(`Target message ${targetMessageId} not found, loading latest messages`);
pendingTargetMessageRef.current = null; pendingTargetMessageRef.current = null;
const fallbackResponse = await authFetch(`/api/discord/messages?channelId=${selectedChannel.id}&limit=50`); const fallbackResponse = await authFetch(`/api/discord/messages?channelId=${channelId}&limit=50`);
if (fallbackResponse.ok) { if (fallbackResponse.ok) {
const fallbackData = await fallbackResponse.json(); const fallbackData = await fallbackResponse.json();
const fallbackMessages = fallbackData.messages || fallbackData; const fallbackMessages = fallbackData.messages || fallbackData;
const fallbackUsers = fallbackData.users || {}; const fallbackUsers = fallbackData.users || {};
const fallbackEmojis = fallbackData.emojiCache || {}; const fallbackEmojis = fallbackData.emojiCache || {};
const normalizedFallback = fallbackMessages.map(msg => ({ const normalizedFallback = fallbackMessages.map((msg: DiscordMessage) => ({
...msg, ...msg,
referenced_message: msg.referencedMessage || msg.referenced_message, referenced_message: (msg as any).referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({ attachments: (msg.attachments || []).map(att => ({
...att, ...att,
content_type: att.contentType || att.content_type, content_type: (att as any).contentType || att.content_type,
})), })),
})); } as DiscordMessage));
setMessages(normalizedFallback.reverse()); setMessages(normalizedFallback.reverse());
setUsersMap(fallbackUsers); setUsersMap(fallbackUsers);
setEmojiCache(fallbackEmojis); setEmojiCache(fallbackEmojis);
@@ -2720,14 +2736,14 @@ export default function DiscordLogs() {
} }
// Normalize field names from API to component expectations // Normalize field names from API to component expectations
const normalizedMessages = messagesData.map(msg => ({ const normalizedMessages = messagesData.map((msg: DiscordMessage) => ({
...msg, ...msg,
referenced_message: msg.referencedMessage || msg.referenced_message, referenced_message: (msg as any).referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({ attachments: (msg.attachments || []).map(att => ({
...att, ...att,
content_type: att.contentType || att.content_type, content_type: (att as any).contentType || att.content_type,
})), })),
})); } as DiscordMessage));
// When using 'around', messages come back in ASC order already // When using 'around', messages come back in ASC order already
// When using default (no around), they come DESC so reverse them // When using default (no around), they come DESC so reverse them
@@ -2797,14 +2813,15 @@ export default function DiscordLogs() {
// Load more messages (pagination) // Load more messages (pagination)
const loadMoreMessages = useCallback(async () => { const loadMoreMessages = useCallback(async () => {
if (loadingMore || !hasMoreMessages || messages.length === 0) return; const channelId = selectedChannel?.id;
if (loadingMore || !hasMoreMessages || messages.length === 0 || !channelId) return;
setLoadingMore(true); setLoadingMore(true);
try { try {
// Get the oldest message ID for pagination (messages are in ASC order, so first = oldest) // Get the oldest message ID for pagination (messages are in ASC order, so first = oldest)
const oldestMessage = messages[0]; const oldestMessage = messages[0];
const response = await authFetch( const response = await authFetch(
`/api/discord/messages?channelId=${selectedChannel.id}&limit=50&before=${oldestMessage.id}` `/api/discord/messages?channelId=${channelId}&limit=50&before=${oldestMessage.id}`
); );
if (!response.ok) throw new Error('Failed to fetch more messages'); if (!response.ok) throw new Error('Failed to fetch more messages');
const data = await response.json(); const data = await response.json();
@@ -2814,14 +2831,14 @@ export default function DiscordLogs() {
const usersData = data.users || {}; const usersData = data.users || {};
const emojiCacheData = data.emojiCache || {}; const emojiCacheData = data.emojiCache || {};
const normalizedMessages = messagesData.map(msg => ({ const normalizedMessages = messagesData.map((msg: DiscordMessage) => ({
...msg, ...msg,
referenced_message: msg.referencedMessage || msg.referenced_message, referenced_message: (msg as any).referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({ attachments: (msg.attachments || []).map(att => ({
...att, ...att,
content_type: att.contentType || att.content_type, content_type: (att as any).contentType || att.content_type,
})), })),
})); } as DiscordMessage));
// Prepend older messages (reversed to maintain ASC order) // Prepend older messages (reversed to maintain ASC order)
setMessages(prev => [...normalizedMessages.reverse(), ...prev]); setMessages(prev => [...normalizedMessages.reverse(), ...prev]);
@@ -2835,7 +2852,7 @@ export default function DiscordLogs() {
} finally { } finally {
setLoadingMore(false); setLoadingMore(false);
} }
}, [loadingMore, hasMoreMessages, messages, selectedChannel]); }, [loadingMore, hasMoreMessages, messages, selectedChannel?.id]);
// Jump to first message in channel // Jump to first message in channel
const jumpToFirstMessage = useCallback(async () => { const jumpToFirstMessage = useCallback(async () => {
@@ -2886,14 +2903,15 @@ export default function DiscordLogs() {
// Load newer messages (when viewing historical/oldest messages) // Load newer messages (when viewing historical/oldest messages)
const loadNewerMessages = useCallback(async () => { const loadNewerMessages = useCallback(async () => {
if (loadingNewer || !hasNewerMessages || messages.length === 0) return; const channelId = selectedChannel?.id;
if (loadingNewer || !hasNewerMessages || messages.length === 0 || !channelId) return;
setLoadingNewer(true); setLoadingNewer(true);
try { try {
// Get the newest message ID currently loaded // Get the newest message ID currently loaded
const newestMessage = messages[messages.length - 1]; const newestMessage = messages[messages.length - 1];
const response = await authFetch( const response = await authFetch(
`/api/discord/messages?channelId=${selectedChannel.id}&limit=50&after=${newestMessage.id}` `/api/discord/messages?channelId=${channelId}&limit=50&after=${newestMessage.id}`
); );
if (!response.ok) throw new Error('Failed to fetch newer messages'); if (!response.ok) throw new Error('Failed to fetch newer messages');
const data = await response.json(); const data = await response.json();
@@ -2902,14 +2920,14 @@ export default function DiscordLogs() {
const usersData = data.users || {}; const usersData = data.users || {};
const emojiCacheData = data.emojiCache || {}; const emojiCacheData = data.emojiCache || {};
const normalizedMessages = messagesData.map(msg => ({ const normalizedMessages = messagesData.map((msg: DiscordMessage) => ({
...msg, ...msg,
referenced_message: msg.referencedMessage || msg.referenced_message, referenced_message: (msg as any).referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({ attachments: (msg.attachments || []).map(att => ({
...att, ...att,
content_type: att.contentType || att.content_type, content_type: (att as any).contentType || att.content_type,
})), })),
})); } as DiscordMessage));
// Append newer messages // Append newer messages
setMessages(prev => [...prev, ...normalizedMessages]); setMessages(prev => [...prev, ...normalizedMessages]);
@@ -2924,7 +2942,7 @@ export default function DiscordLogs() {
} finally { } finally {
setLoadingNewer(false); setLoadingNewer(false);
} }
}, [loadingNewer, hasNewerMessages, messages, selectedChannel]); }, [loadingNewer, hasNewerMessages, messages, selectedChannel?.id]);
// Infinite scroll: load more when scrolling near the top or bottom // Infinite scroll: load more when scrolling near the top or bottom
useEffect(() => { useEffect(() => {
@@ -2979,9 +2997,9 @@ export default function DiscordLogs() {
`/api/discord/messages?channelId=${selectedChannel.id}&limit=50&after=${newestMessage.id}` `/api/discord/messages?channelId=${selectedChannel.id}&limit=50&after=${newestMessage.id}`
); );
let newMessages = []; let newMessages: DiscordMessage[] = [];
let newUsersData = {}; let newUsersData: Record<string, DiscordUser> = {};
let newEmojiCacheData = {}; let newEmojiCacheData: Record<string, DiscordEmoji> = {};
if (newMsgsResponse.ok) { if (newMsgsResponse.ok) {
const data = await newMsgsResponse.json(); const data = await newMsgsResponse.json();
@@ -2990,14 +3008,14 @@ export default function DiscordLogs() {
newEmojiCacheData = data.emojiCache || {}; newEmojiCacheData = data.emojiCache || {};
if (messagesData.length > 0) { if (messagesData.length > 0) {
newMessages = messagesData.map(msg => ({ newMessages = messagesData.map((msg: DiscordMessage) => ({
...msg, ...msg,
referenced_message: msg.referencedMessage || msg.referenced_message, referenced_message: (msg as any).referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({ attachments: (msg.attachments || []).map(att => ({
...att, ...att,
content_type: att.contentType || att.content_type, content_type: (att as any).contentType || att.content_type,
})), })),
})); } as DiscordMessage));
} }
} }
@@ -3006,7 +3024,7 @@ export default function DiscordLogs() {
`/api/discord/messages?channelId=${selectedChannel.id}&limit=100&editedSince=${encodeURIComponent(lastPollTimeRef.current)}` `/api/discord/messages?channelId=${selectedChannel.id}&limit=100&editedSince=${encodeURIComponent(lastPollTimeRef.current)}`
); );
let editedMessages = []; let editedMessages: DiscordMessage[] = [];
if (editedResponse.ok) { if (editedResponse.ok) {
const editedData = await editedResponse.json(); const editedData = await editedResponse.json();
const editedMessagesData = editedData.messages || editedData; const editedMessagesData = editedData.messages || editedData;
@@ -3015,14 +3033,14 @@ export default function DiscordLogs() {
newUsersData = { ...newUsersData, ...editedUsersData }; newUsersData = { ...newUsersData, ...editedUsersData };
newEmojiCacheData = { ...newEmojiCacheData, ...editedEmojiCacheData }; newEmojiCacheData = { ...newEmojiCacheData, ...editedEmojiCacheData };
editedMessages = editedMessagesData.map(msg => ({ editedMessages = editedMessagesData.map((msg: DiscordMessage) => ({
...msg, ...msg,
referenced_message: msg.referencedMessage || msg.referenced_message, referenced_message: (msg as any).referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({ attachments: (msg.attachments || []).map(att => ({
...att, ...att,
content_type: att.contentType || att.content_type, content_type: (att as any).contentType || att.content_type,
})), })),
})); } as DiscordMessage));
} }
// Update last poll time for next iteration // Update last poll time for next iteration
@@ -3037,7 +3055,7 @@ export default function DiscordLogs() {
if (newMessages.length > 0 || editedMessages.length > 0) { if (newMessages.length > 0 || editedMessages.length > 0) {
setMessages(prev => { setMessages(prev => {
// Create a map of existing messages by ID // Create a map of existing messages by ID
const msgMap = new Map(prev.map(m => [m.id, m])); const msgMap = new Map<string, DiscordMessage>(prev.map(m => [m.id, m]));
// Update with edited messages (overwrite existing) // Update with edited messages (overwrite existing)
for (const msg of editedMessages) { for (const msg of editedMessages) {
@@ -3085,14 +3103,14 @@ export default function DiscordLogs() {
try { try {
const response = await authFetch('/api/discord/channels'); const response = await authFetch('/api/discord/channels');
if (!response.ok) return; if (!response.ok) return;
const data = await response.json(); const data = await response.json() as DiscordChannel[];
// Separate categories (type 4), text channels (type 0), and threads (types 10, 11, 12) // Separate categories (type 4), text channels (type 0), and threads (types 10, 11, 12)
const categories = {}; const categories: Record<string, { id: string; name: string; position?: number; guildId?: string }> = {};
const textChannels = []; const textChannels: DiscordChannel[] = [];
const threads = []; const threads: DiscordChannel[] = [];
data.forEach(channel => { data.forEach((channel: DiscordChannel) => {
if (channel.type === 4) { if (channel.type === 4) {
categories[channel.id] = { categories[channel.id] = {
id: channel.id, id: channel.id,
@@ -3108,8 +3126,8 @@ export default function DiscordLogs() {
}); });
// Create a map of parent channel ID to threads // Create a map of parent channel ID to threads
const threadsByParent = {}; const threadsByParent: Record<string, DiscordChannel[]> = {};
threads.forEach(thread => { threads.forEach((thread: DiscordChannel) => {
if (thread.parentId) { if (thread.parentId) {
if (!threadsByParent[thread.parentId]) { if (!threadsByParent[thread.parentId]) {
threadsByParent[thread.parentId] = []; threadsByParent[thread.parentId] = [];
@@ -3119,10 +3137,10 @@ export default function DiscordLogs() {
}); });
// Rebuild guild/channel maps // Rebuild guild/channel maps
const byGuild = {}; const byGuild: Record<string, DiscordChannel[]> = {};
const guildMap = {}; const guildMap: Record<string, DiscordGuild> = {};
textChannels.forEach(channel => { textChannels.forEach((channel: DiscordChannel) => {
const guildId = channel.guildId || 'unknown'; const guildId = channel.guildId || 'unknown';
if (!byGuild[guildId]) { if (!byGuild[guildId]) {
byGuild[guildId] = []; byGuild[guildId] = [];
@@ -3163,7 +3181,7 @@ export default function DiscordLogs() {
}); });
// Sort guilds // Sort guilds
const guildList = Object.values(guildMap).sort((a, b) => { const guildList: DiscordGuild[] = Object.values(guildMap).sort((a: DiscordGuild, b: DiscordGuild) => {
if (a.name === 'no place like ::1') return -1; if (a.name === 'no place like ::1') return -1;
if (b.name === 'no place like ::1') return 1; if (b.name === 'no place like ::1') return 1;
return a.name.localeCompare(b.name); return a.name.localeCompare(b.name);
@@ -3171,9 +3189,9 @@ export default function DiscordLogs() {
// Sort channels within each guild // Sort channels within each guild
Object.keys(byGuild).forEach(guildId => { Object.keys(byGuild).forEach(guildId => {
byGuild[guildId].sort((a, b) => { byGuild[guildId].sort((a: DiscordChannel, b: DiscordChannel) => {
if (a.categoryPosition !== b.categoryPosition) { if ((a.categoryPosition ?? -1) !== (b.categoryPosition ?? -1)) {
return a.categoryPosition - b.categoryPosition; return (a.categoryPosition ?? -1) - (b.categoryPosition ?? -1);
} }
return (a.position || 0) - (b.position || 0); return (a.position || 0) - (b.position || 0);
}); });
@@ -3241,15 +3259,17 @@ export default function DiscordLogs() {
if (msg.author?.displayName?.toLowerCase().includes(query)) return true; if (msg.author?.displayName?.toLowerCase().includes(query)) return true;
// Check embed content // Check embed content
if (msg.embeds?.length > 0) { const embeds = msg.embeds ?? [];
for (const embed of msg.embeds) { if (embeds.length > 0) {
for (const embed of embeds) {
if (embed.title?.toLowerCase().includes(query)) return true; if (embed.title?.toLowerCase().includes(query)) return true;
if (embed.description?.toLowerCase().includes(query)) return true; if (embed.description?.toLowerCase().includes(query)) return true;
if (embed.author?.name?.toLowerCase().includes(query)) return true; if (embed.author?.name?.toLowerCase().includes(query)) return true;
if (embed.footer?.text?.toLowerCase().includes(query)) return true; if (embed.footer?.text?.toLowerCase().includes(query)) return true;
// Check embed fields // Check embed fields
if (embed.fields?.length > 0) { const fields = embed.fields ?? [];
for (const field of embed.fields) { if (fields.length > 0) {
for (const field of fields) {
if (field.name?.toLowerCase().includes(query)) return true; if (field.name?.toLowerCase().includes(query)) return true;
if (field.value?.toLowerCase().includes(query)) return true; if (field.value?.toLowerCase().includes(query)) return true;
} }
@@ -3264,9 +3284,14 @@ export default function DiscordLogs() {
// Check if current channel is dds-archive // Check if current channel is dds-archive
const isArchiveChannel = selectedChannel?.name === 'dds-archive'; const isArchiveChannel = selectedChannel?.name === 'dds-archive';
// Check if current channel is a thread (types 10, 11, 12)
const isThread = selectedChannel?.type === 10 || selectedChannel?.type === 11 || selectedChannel?.type === 12;
// Check if Havoc bot is in the channel's member list // Check if Havoc bot is in the channel's member list
const HAVOC_BOT_ID = '1219636064608583770'; const HAVOC_BOT_ID = '1219636064608583770';
const isHavocInChannel = useMemo(() => { const isHavocInChannel = useMemo(() => {
// Threads inherit access from parent channel - if we can see the thread, Havoc has access
if (isThread) return true;
if (!members?.groups) return true; // Assume present if members not loaded if (!members?.groups) return true; // Assume present if members not loaded
for (const group of members.groups) { for (const group of members.groups) {
if (group.members?.some(m => m.id === HAVOC_BOT_ID)) { if (group.members?.some(m => m.id === HAVOC_BOT_ID)) {
@@ -3274,20 +3299,34 @@ export default function DiscordLogs() {
} }
} }
return false; return false;
}, [members]); }, [members, isThread]);
// Group messages by author and time window (5 minutes) // Group messages by author and time window (5 minutes)
// Messages are in ASC order (oldest first, newest at bottom), so we group accordingly // Messages are in ASC order (oldest first, newest at bottom), so we group accordingly
// For archive channel, parse messages to get real author/timestamp for grouping // For archive channel, parse messages to get real author/timestamp for grouping
interface MessageGroupDivider {
type: 'divider';
date: string | null;
}
interface MessageGroupMessages {
type: 'messages';
author: DiscordUser;
effectiveAuthor: DiscordUser;
messages: Array<DiscordMessage & { effectiveTimestamp: string | null }>;
}
type MessageGroup = MessageGroupDivider | MessageGroupMessages;
const groupedMessages = useMemo(() => { const groupedMessages = useMemo(() => {
const groups = []; const groups: MessageGroup[] = [];
let currentGroup = null; let currentGroup: MessageGroupMessages | null = null;
let lastDate = null; let lastDate: string | null = null;
filteredMessages.forEach((message) => { filteredMessages.forEach((message) => {
// For archive channel, parse to get real author and timestamp // For archive channel, parse to get real author and timestamp
let effectiveAuthor = message.author; let effectiveAuthor = message.author;
let effectiveTimestamp = message.timestamp; let effectiveTimestamp: string | null = message.timestamp ?? null;
if (isArchiveChannel) { if (isArchiveChannel) {
const parsed = parseArchivedMessage(message.content); const parsed = parseArchivedMessage(message.content);
@@ -3295,25 +3334,34 @@ export default function DiscordLogs() {
// Use resolved user for proper grouping by real user ID // Use resolved user for proper grouping by real user ID
const resolvedUser = resolveArchivedUser(parsed.originalAuthor, usersMap, members); const resolvedUser = resolveArchivedUser(parsed.originalAuthor, usersMap, members);
effectiveAuthor = resolvedUser; effectiveAuthor = resolvedUser;
effectiveTimestamp = parsed.originalTimestamp; effectiveTimestamp = parsed.originalTimestamp ?? null;
} }
} }
const messageDate = new Date(effectiveTimestamp).toDateString(); const effectiveTs = effectiveTimestamp ?? message.timestamp ?? null;
const messageDate = effectiveTs ? new Date(effectiveTs).toDateString() : lastDate;
// Check if we need a date divider (date changed from previous message) // Check if we need a date divider (date changed from previous message)
if (messageDate !== lastDate) { if (messageDate !== lastDate) {
if (currentGroup) groups.push(currentGroup); if (currentGroup) groups.push(currentGroup);
groups.push({ type: 'divider', date: effectiveTimestamp }); groups.push({ type: 'divider', date: effectiveTs });
currentGroup = null; currentGroup = null;
lastDate = messageDate; lastDate = messageDate;
} }
const lastMessage = currentGroup?.messages[currentGroup.messages.length - 1];
const lastTimestamp = lastMessage?.effectiveTimestamp ?? lastMessage?.timestamp ?? null;
const timeGapExceeded = lastTimestamp && effectiveTs
? Math.abs(new Date(lastTimestamp).getTime() - new Date(effectiveTs).getTime()) > 5 * 60 * 1000
: true;
// For ASC order: check time diff from the LAST message in current group // For ASC order: check time diff from the LAST message in current group
// (which is the most recent since we're iterating oldest to newest) // (which is the most recent since we're iterating oldest to newest)
const shouldStartNewGroup = !currentGroup || const shouldStartNewGroup = !currentGroup ||
currentGroup.effectiveAuthor?.id !== effectiveAuthor?.id || currentGroup.effectiveAuthor?.id !== effectiveAuthor?.id ||
Math.abs(new Date(currentGroup.messages[currentGroup.messages.length - 1].effectiveTimestamp) - new Date(effectiveTimestamp)) > 5 * 60 * 1000; timeGapExceeded;
const messageWithEffective = { ...message, effectiveTimestamp: effectiveTs } as DiscordMessage & { effectiveTimestamp: string | null };
if (shouldStartNewGroup) { if (shouldStartNewGroup) {
if (currentGroup) groups.push(currentGroup); if (currentGroup) groups.push(currentGroup);
@@ -3321,10 +3369,10 @@ export default function DiscordLogs() {
type: 'messages', type: 'messages',
author: effectiveAuthor, author: effectiveAuthor,
effectiveAuthor, effectiveAuthor,
messages: [{ ...message, effectiveTimestamp }], messages: [messageWithEffective],
}; };
} else { } else if (currentGroup) {
currentGroup.messages.push({ ...message, effectiveTimestamp }); currentGroup.messages.push(messageWithEffective);
} }
}); });
@@ -3332,6 +3380,8 @@ export default function DiscordLogs() {
return groups; return groups;
}, [filteredMessages, isArchiveChannel, usersMap, members]); }, [filteredMessages, isArchiveChannel, usersMap, members]);
const memberGroups = members?.groups ?? [];
if (loading) { if (loading) {
return ( return (
<div className="discord-logs-container"> <div className="discord-logs-container">
@@ -3461,7 +3511,7 @@ export default function DiscordLogs() {
setSelectedGuild(guild); setSelectedGuild(guild);
const guildChannels = channelsByGuild[guild.id]; const guildChannels = channelsByGuild[guild.id];
// Select first channel with messages // Select first channel with messages
const firstAccessible = guildChannels?.find(c => c.messageCount > 0); const firstAccessible = guildChannels?.find(c => (c.messageCount ?? 0) > 0);
if (firstAccessible) { if (firstAccessible) {
setSelectedChannel(firstAccessible); setSelectedChannel(firstAccessible);
} }
@@ -3494,28 +3544,29 @@ export default function DiscordLogs() {
{/* Collapsible categories state and handler at top level */} {/* Collapsible categories state and handler at top level */}
{/* ...existing code... */} {/* ...existing code... */}
{(() => { {(() => {
let lastCategory = null; let lastCategory: string | null | undefined;
// Filter out channels with no messages (no access), but include if they have threads with messages // Filter out channels with no messages (no access), but include if they have threads with messages
const accessibleChannels = channelsByGuild[selectedGuild.id].filter(c => const accessibleChannels = channelsByGuild[selectedGuild.id].filter(c =>
c.messageCount > 0 || c.threads?.some(t => t.messageCount > 0) (c.messageCount ?? 0) > 0 || c.threads?.some(t => (t.messageCount ?? 0) > 0)
); );
return accessibleChannels.map((channel) => { return accessibleChannels.map((channel) => {
const showCategoryHeader = channel.categoryName !== lastCategory; const catName = channel.categoryName ?? null;
lastCategory = channel.categoryName; const showCategoryHeader = catName !== lastCategory;
lastCategory = catName;
// Filter threads that have messages // Filter threads that have messages
const accessibleThreads = channel.threads?.filter(t => t.messageCount > 0) || []; const accessibleThreads = channel.threads?.filter(t => (t.messageCount ?? 0) > 0) || [];
const isCollapsed = channel.categoryName && collapsedCategories[channel.categoryName]; const isCollapsed = catName ? collapsedCategories[catName] : false;
return ( return (
<React.Fragment key={channel.id}> <React.Fragment key={channel.id}>
{showCategoryHeader && channel.categoryName && ( {showCategoryHeader && catName && (
<div className="discord-category-header" onClick={() => handleCategoryToggle(channel.categoryName)} style={{ cursor: 'pointer', userSelect: 'none' }}> <div className="discord-category-header" onClick={() => handleCategoryToggle(catName)} style={{ cursor: 'pointer', userSelect: 'none' }}>
<svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12" style={{ transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s' }}> <svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12" style={{ transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s' }}>
<path d="M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z" /> <path d="M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z" />
</svg> </svg>
{channel.categoryName} {catName}
</div> </div>
)} )}
{!isCollapsed && channel.messageCount > 0 && ( {!isCollapsed && (channel.messageCount ?? 0) > 0 && (
<button <button
className={`discord-channel-btn ${channel.categoryName ? 'has-category' : ''} ${selectedChannel?.id === channel.id ? 'active' : ''}`} className={`discord-channel-btn ${channel.categoryName ? 'has-category' : ''} ${selectedChannel?.id === channel.id ? 'active' : ''}`}
onClick={() => setSelectedChannel(channel)} onClick={() => setSelectedChannel(channel)}
@@ -3616,7 +3667,7 @@ export default function DiscordLogs() {
if (group.type === 'divider') { if (group.type === 'divider') {
return ( return (
<div key={`divider-${groupIdx}`} className="discord-date-divider"> <div key={`divider-${groupIdx}`} className="discord-date-divider">
<span>{formatDateDivider(group.date)}</span> <span>{formatDateDivider(group.date ?? '')}</span>
</div> </div>
); );
} }
@@ -3631,12 +3682,13 @@ export default function DiscordLogs() {
key={message.id} key={message.id}
message={message} message={message}
isFirstInGroup={msgIdx === 0} isFirstInGroup={msgIdx === 0}
showTimestamp={msgIdx === 0}
previewCache={previewCache} previewCache={previewCache}
onPreviewLoad={handlePreviewLoad} onPreviewLoad={handlePreviewLoad}
channelMap={channelMap} channelMap={channelMap}
usersMap={usersMap} usersMap={usersMap}
emojiCache={emojiCache} emojiCache={emojiCache}
members={members} members={members ?? undefined}
onChannelSelect={handleChannelSelect} onChannelSelect={handleChannelSelect}
channelName={selectedChannel?.name} channelName={selectedChannel?.name}
onReactionClick={handleReactionClick} onReactionClick={handleReactionClick}
@@ -3669,17 +3721,25 @@ export default function DiscordLogs() {
<div className="discord-member-list-loading"> <div className="discord-member-list-loading">
<ProgressSpinner style={{ width: '24px', height: '24px' }} strokeWidth="4" /> <ProgressSpinner style={{ width: '24px', height: '24px' }} strokeWidth="4" />
</div> </div>
) : members?.groups?.length > 0 ? ( ) : memberGroups.length > 0 ? (
<> <>
{members.groups.map((group) => ( {memberGroups.map((group, groupIdx) => {
<div key={group.role.id} className="discord-member-group"> const roleColor = group.role?.color ? String(group.role.color) : undefined;
const roleName = group.role?.name ?? 'Members';
const groupMembers = group.members ?? [];
const groupKey = group.role?.id ?? `group-${groupIdx}`;
return (
<div key={groupKey} className="discord-member-group">
<div <div
className="discord-member-group-header" className="discord-member-group-header"
style={group.role.color ? { color: group.role.color } : undefined} style={roleColor ? { color: roleColor } : undefined}
> >
{group.role.name} — {group.members.length} {roleName} — {groupMembers.length}
</div> </div>
{group.members.map((member) => ( {groupMembers.map((member) => {
const memberColor = member.color ? String(member.color) : undefined;
const display = member.displayName || member.username || member.id;
return (
<div key={member.id} className="discord-member-item"> <div key={member.id} className="discord-member-item">
{member.avatar ? ( {member.avatar ? (
<img <img
@@ -3689,20 +3749,22 @@ export default function DiscordLogs() {
/> />
) : ( ) : (
<div className="discord-member-avatar-placeholder"> <div className="discord-member-avatar-placeholder">
{(member.displayName || member.username || 'U')[0].toUpperCase()} {display[0]?.toUpperCase()}
</div> </div>
)} )}
<span <span
className="discord-member-name" className="discord-member-name"
style={member.color ? { color: member.color } : undefined} style={memberColor ? { color: memberColor } : undefined}
> >
{member.displayName || member.username} {display}
</span> </span>
{member.isBot && <span className="discord-bot-tag">APP</span>} {member.isBot && <span className="discord-bot-tag">APP</span>}
</div> </div>
))} );
})}
</div> </div>
))} );
})}
</> </>
) : ( ) : (
<div className="discord-member-list-empty">No members found</div> <div className="discord-member-list-empty">No members found</div>

2
src/components/Login.tsx
View File

@@ -53,7 +53,7 @@ export default function LoginPage({ loggedIn = false, accessDenied = false, requ
password, password,
grant_type: "password", grant_type: "password",
scope: "", scope: "",
client_id: "", client_id: "b8308cf47d424e66",
client_secret: "", client_secret: "",
}); });

273
src/components/AudioPlayer.tsx → src/components/Radio.tsx
View File

@@ -44,6 +44,11 @@ export default function Player({ user }: PlayerProps) {
// Global CSS now contains the paginator / dialog datatable dark rules. // Global CSS now contains the paginator / dialog datatable dark rules.
const [isQueueVisible, setQueueVisible] = useState(false); const [isQueueVisible, setQueueVisible] = useState(false);
const lrcContainerRef = useRef<HTMLDivElement | null>(null);
const lrcWheelHandlerRef = useRef<((e: WheelEvent) => void) | null>(null);
const lrcScrollTimeout = useRef<number | null>(null);
const lrcScrollRaf = useRef<number | null>(null);
const lrcActiveRef = useRef<HTMLElement | null>(null);
// Mouse wheel scroll fix for queue modal // Mouse wheel scroll fix for queue modal
useEffect(() => { useEffect(() => {
if (!isQueueVisible) return; if (!isQueueVisible) return;
@@ -151,6 +156,10 @@ export default function Player({ user }: PlayerProps) {
const lastUpdateTimestamp = useRef<number>(Date.now()); const lastUpdateTimestamp = useRef<number>(Date.now());
const activeStationRef = useRef<string>(activeStation); const activeStationRef = useRef<string>(activeStation);
const wsInstance = useRef<WebSocket | null>(null); const wsInstance = useRef<WebSocket | null>(null);
const wsReconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const wsConnectionCheckTimer = useRef<ReturnType<typeof setInterval> | null>(null);
const wsLastMessageTime = useRef<number>(Date.now());
const [isStreamReady, setIsStreamReady] = useState(false);
const formatTime = (seconds: number): string => { const formatTime = (seconds: number): string => {
if (!seconds || isNaN(seconds) || seconds < 0) return "00:00"; if (!seconds || isNaN(seconds) || seconds < 0) return "00:00";
@@ -166,6 +175,7 @@ export default function Player({ user }: PlayerProps) {
// Initialize or switch HLS stream // Initialize or switch HLS stream
const initializeStream = (station) => { const initializeStream = (station) => {
setIsStreamReady(false);
import('hls.js').then(({ default: Hls }) => { import('hls.js').then(({ default: Hls }) => {
const audio = audioElement.current; const audio = audioElement.current;
if (!audio) return; if (!audio) return;
@@ -183,11 +193,13 @@ export default function Player({ user }: PlayerProps) {
// Handle audio load errors // Handle audio load errors
audio.onerror = () => { audio.onerror = () => {
setIsPlaying(false); setIsPlaying(false);
setIsStreamReady(false);
}; };
if (audio.canPlayType("application/vnd.apple.mpegurl")) { if (audio.canPlayType("application/vnd.apple.mpegurl")) {
audio.src = streamUrl; audio.src = streamUrl;
audio.load(); audio.load();
setIsStreamReady(true);
audio.play().then(() => setIsPlaying(true)).catch(() => { audio.play().then(() => setIsPlaying(true)).catch(() => {
setTrackTitle("Offline"); setTrackTitle("Offline");
setIsPlaying(false); setIsPlaying(false);
@@ -217,6 +229,7 @@ export default function Player({ user }: PlayerProps) {
hls.attachMedia(audio); hls.attachMedia(audio);
hls.on(Hls.Events.MEDIA_ATTACHED, () => hls.loadSource(streamUrl)); hls.on(Hls.Events.MEDIA_ATTACHED, () => hls.loadSource(streamUrl));
hls.on(Hls.Events.MANIFEST_PARSED, () => { hls.on(Hls.Events.MANIFEST_PARSED, () => {
setIsStreamReady(true);
audio.play().then(() => setIsPlaying(true)).catch(() => { audio.play().then(() => setIsPlaying(true)).catch(() => {
setIsPlaying(false); setIsPlaying(false);
}); });
@@ -228,6 +241,7 @@ export default function Player({ user }: PlayerProps) {
hlsInstance.current = null; hlsInstance.current = null;
setTrackTitle("Offline"); setTrackTitle("Offline");
setIsPlaying(false); setIsPlaying(false);
setIsStreamReady(false);
} }
}); });
}); });
@@ -249,16 +263,56 @@ export default function Player({ user }: PlayerProps) {
// Scroll active lyric into view // Scroll active lyric into view
useEffect(() => { useEffect(() => {
setTimeout(() => { const container = lrcContainerRef.current;
const activeElement = document.querySelector('.lrc-line.active'); if (!container || lyrics.length === 0) return;
const lyricsContainer = document.querySelector('.lrc-text');
if (activeElement && lyricsContainer) { const scheduleScroll = () => {
(lyricsContainer as HTMLElement).style.maxHeight = '220px'; // Read ref/DOM inside the callback so we get the updated element after render
(lyricsContainer as HTMLElement).style.overflowY = 'auto'; const activeElement = lrcActiveRef.current || (container.querySelector('.lrc-line.active') as HTMLElement | null);
activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); if (!activeElement) return;
// Use getBoundingClientRect for accurate positioning
const containerRect = container.getBoundingClientRect();
const activeRect = activeElement.getBoundingClientRect();
// Calculate where the element is relative to the container's current scroll
const elementTopInContainer = activeRect.top - containerRect.top + container.scrollTop;
// Center the active line in the container
const targetScrollTop = elementTopInContainer - (container.clientHeight / 2) + (activeElement.offsetHeight / 2);
container.scrollTo({ top: Math.max(targetScrollTop, 0), behavior: 'smooth' });
};
// Debounce a tick then align to paint frame so ref is updated after render
if (lrcScrollTimeout.current) window.clearTimeout(lrcScrollTimeout.current);
lrcScrollTimeout.current = window.setTimeout(() => {
if (lrcScrollRaf.current) cancelAnimationFrame(lrcScrollRaf.current);
lrcScrollRaf.current = requestAnimationFrame(scheduleScroll);
}, 16);
const wheelHandler = (e: WheelEvent) => {
const atTop = container.scrollTop === 0;
const atBottom = container.scrollTop + container.clientHeight >= container.scrollHeight;
if ((e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) {
e.preventDefault();
} else {
e.stopPropagation();
} }
}, 0); };
}, [currentLyricIndex, lyrics]);
if (lrcWheelHandlerRef.current) {
container.removeEventListener('wheel', lrcWheelHandlerRef.current as EventListener);
}
lrcWheelHandlerRef.current = wheelHandler;
container.addEventListener('wheel', wheelHandler, { passive: false });
return () => {
if (lrcScrollTimeout.current) window.clearTimeout(lrcScrollTimeout.current);
if (lrcScrollRaf.current) cancelAnimationFrame(lrcScrollRaf.current);
container.removeEventListener('wheel', wheelHandler as EventListener);
};
}, [currentLyricIndex, lyrics.length]);
// Handle station changes: reset and start new stream // Handle station changes: reset and start new stream
useEffect(() => { useEffect(() => {
@@ -306,11 +360,20 @@ export default function Player({ user }: PlayerProps) {
const handleTrackData = useCallback((trackData) => { const handleTrackData = useCallback((trackData) => {
const requestStation = activeStationRef.current; const requestStation = activeStationRef.current;
// Guard: if trackData is null/undefined or empty object, ignore
if (!trackData || (typeof trackData === 'object' && Object.keys(trackData).length === 0)) {
return;
}
// Only set "No track playing" if we have clear indication of no track // Only set "No track playing" if we have clear indication of no track
// and not just missing song field (to avoid flickering during transitions) // AND we don't already have a valid track playing (to prevent race conditions)
if ((!trackData.song || trackData.song === 'N/A') && (!trackData.artist || trackData.artist === 'N/A')) { if ((!trackData.song || trackData.song === 'N/A') && (!trackData.artist || trackData.artist === 'N/A')) {
// Only clear if we don't have a current track UUID (meaning we never had valid data)
if (!currentTrackUuid.current) {
setTrackTitle('No track playing'); setTrackTitle('No track playing');
setLyrics([]); setLyrics([]);
}
// Otherwise ignore this empty data - keep showing current track
return; return;
} }
@@ -338,28 +401,66 @@ export default function Player({ user }: PlayerProps) {
}, []); }, []);
const initializeWebSocket = useCallback((station) => { const initializeWebSocket = useCallback((station) => {
// Clean up existing WebSocket // Clean up existing WebSocket and timers
if (wsReconnectTimer.current) {
clearTimeout(wsReconnectTimer.current);
wsReconnectTimer.current = null;
}
if (wsConnectionCheckTimer.current) {
clearInterval(wsConnectionCheckTimer.current);
wsConnectionCheckTimer.current = null;
}
if (wsInstance.current) { if (wsInstance.current) {
wsInstance.current.onclose = null; // Prevent triggering reconnection logic wsInstance.current.onclose = null; // Prevent triggering reconnection logic
wsInstance.current.onerror = null;
wsInstance.current.close(); wsInstance.current.close();
wsInstance.current = null; wsInstance.current = null;
} }
const connectWebSocket = (retryCount = 0) => { let retryCount = 0;
const baseDelay = 1000; // 1 second const baseDelay = 1000; // 1 second
const maxDelay = 30000; // 30 seconds const maxDelay = 30000; // 30 seconds
let isIntentionallyClosed = false;
const connectWebSocket = () => {
if (isIntentionallyClosed) return;
const wsUrl = `${API_URL.replace(/^https?:/, 'wss:')}/radio/ws/${station}`; const wsUrl = `${API_URL.replace(/^https?:/, 'wss:')}/radio/ws/${station}`;
const ws = new WebSocket(wsUrl); const ws = new WebSocket(wsUrl);
ws.onopen = function () { ws.onopen = function () {
// Reset retry count on successful connection // Reset retry count on successful connection
retryCount = 0;
wsLastMessageTime.current = Date.now();
// Start periodic connection check - if no messages received for 2 minutes,
// the connection is likely dead (server sends track updates regularly)
if (wsConnectionCheckTimer.current) {
clearInterval(wsConnectionCheckTimer.current);
}
wsConnectionCheckTimer.current = setInterval(() => {
const timeSinceLastMessage = Date.now() - wsLastMessageTime.current;
const isStale = timeSinceLastMessage > 120000; // 2 minutes without any message
// Check if connection appears dead
if (ws.readyState !== WebSocket.OPEN || isStale) {
console.warn('WebSocket connection appears stale, reconnecting...');
// Force close and let onclose handle reconnection
ws.close();
}
}, 30000); // Check every 30 seconds
}; };
ws.onmessage = function (event) { ws.onmessage = function (event) {
// Track last message time for connection health monitoring
wsLastMessageTime.current = Date.now();
try { try {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
// Ignore pong responses and other control messages
if (data.type === 'pong' || data.type === 'ping' || data.type === 'error' || data.type === 'status') return;
if (data.type === 'track_change') { if (data.type === 'track_change') {
// Handle track change // Handle track change
setLyrics([]); setLyrics([]);
@@ -370,24 +471,35 @@ export default function Player({ user }: PlayerProps) {
const parsedLyrics = parseLrcString(data.data); const parsedLyrics = parseLrcString(data.data);
setLyrics(parsedLyrics); setLyrics(parsedLyrics);
setCurrentLyricIndex(0); setCurrentLyricIndex(0);
} else { } else if (data.type === 'now_playing' || data.type === 'initial') {
// Handle initial now playing data // Explicit now playing message
handleTrackData(data.data || data);
} else if (!data.type && (data.song || data.artist || data.uuid)) {
// Untyped message with track data fields - treat as now playing
handleTrackData(data); handleTrackData(data);
} }
// Ignore any other message types that don't contain track data
} catch (error) { } catch (error) {
console.error('Error parsing WebSocket message:', error); console.error('Error parsing WebSocket message:', error);
} }
}; };
ws.onclose = function (event) { ws.onclose = function (event) {
// Don't retry if it was a clean close (code 1000) // Clear connection check timer
if (event.code === 1000) return; if (wsConnectionCheckTimer.current) {
clearInterval(wsConnectionCheckTimer.current);
wsConnectionCheckTimer.current = null;
}
// Attempt reconnection with exponential backoff // Always attempt reconnection unless intentionally closed
if (isIntentionallyClosed) return;
// Exponential backoff for reconnection
const delay = Math.min(baseDelay * Math.pow(2, retryCount), maxDelay); const delay = Math.min(baseDelay * Math.pow(2, retryCount), maxDelay);
retryCount++;
setTimeout(() => { wsReconnectTimer.current = setTimeout(() => {
connectWebSocket(retryCount + 1); connectWebSocket();
}, delay); }, delay);
}; };
@@ -400,6 +512,25 @@ export default function Player({ user }: PlayerProps) {
}; };
connectWebSocket(); connectWebSocket();
// Return cleanup function
return () => {
isIntentionallyClosed = true;
if (wsReconnectTimer.current) {
clearTimeout(wsReconnectTimer.current);
wsReconnectTimer.current = null;
}
if (wsConnectionCheckTimer.current) {
clearInterval(wsConnectionCheckTimer.current);
wsConnectionCheckTimer.current = null;
}
if (wsInstance.current) {
wsInstance.current.onclose = null;
wsInstance.current.onerror = null;
wsInstance.current.close();
wsInstance.current = null;
}
};
}, [handleTrackData, parseLrcString]); }, [handleTrackData, parseLrcString]);
const setTrackMetadata = useCallback((trackData, requestStation) => { const setTrackMetadata = useCallback((trackData, requestStation) => {
@@ -422,34 +553,43 @@ export default function Player({ user }: PlayerProps) {
// Ensure the ref points to the current activeStation for in-flight guards // Ensure the ref points to the current activeStation for in-flight guards
activeStationRef.current = activeStation; activeStationRef.current = activeStation;
// Clean up the existing WebSocket connection before initializing a new one // Initialize WebSocket connection for metadata
const cleanupWebSocket = async () => { const cleanupWs = initializeWebSocket(activeStation);
if (wsInstance.current) {
wsInstance.current.onclose = null; // Prevent triggering reconnection logic // Handle visibility change - reconnect when page becomes visible
wsInstance.current.close(); const handleVisibilityChange = () => {
wsInstance.current = null; if (document.visibilityState === 'visible') {
// Check if WebSocket is not connected or not open
if (!wsInstance.current || wsInstance.current.readyState !== WebSocket.OPEN) {
// Reinitialize WebSocket connection
if (cleanupWs) cleanupWs();
initializeWebSocket(activeStation);
}
} }
}; };
cleanupWebSocket().then(() => { document.addEventListener('visibilitychange', handleVisibilityChange);
// Initialize WebSocket connection for metadata
initializeWebSocket(activeStation);
});
return () => { return () => {
// Clean up WebSocket on station change or component unmount document.removeEventListener('visibilitychange', handleVisibilityChange);
if (wsInstance.current) { if (cleanupWs) cleanupWs();
wsInstance.current.onclose = null; // Prevent triggering reconnection logic
wsInstance.current.close();
wsInstance.current = null;
}
}; };
}, [activeStation, initializeWebSocket]); }, [activeStation, initializeWebSocket]);
// Cleanup WebSocket on component unmount // Cleanup WebSocket on component unmount
useEffect(() => { useEffect(() => {
return () => { return () => {
if (wsReconnectTimer.current) {
clearTimeout(wsReconnectTimer.current);
wsReconnectTimer.current = null;
}
if (wsConnectionCheckTimer.current) {
clearInterval(wsConnectionCheckTimer.current);
wsConnectionCheckTimer.current = null;
}
if (wsInstance.current) { if (wsInstance.current) {
wsInstance.current.onclose = null;
wsInstance.current.onerror = null;
wsInstance.current.close(); wsInstance.current.close();
wsInstance.current = null; wsInstance.current = null;
} }
@@ -621,7 +761,7 @@ export default function Player({ user }: PlayerProps) {
const [queueSearch, setQueueSearch] = useState(""); const [queueSearch, setQueueSearch] = useState("");
const fetchQueue = async (page = queuePage, rows = queueRows, search = queueSearch) => { const fetchQueue = async (page = queuePage, rows = queueRows, search = queueSearch) => {
const start = page * rows; const start = page * rows;
console.log("Fetching queue for station (ref):", activeStationRef.current); // console.log("Fetching queue for station (ref):", activeStationRef.current);
try { try {
const response = await authFetch(`${API_URL}/radio/get_queue`, { const response = await authFetch(`${API_URL}/radio/get_queue`, {
method: "POST", method: "POST",
@@ -647,13 +787,13 @@ export default function Player({ user }: PlayerProps) {
useEffect(() => { useEffect(() => {
if (isQueueVisible) { if (isQueueVisible) {
console.log("Fetching queue for station:", activeStation); // console.log("Fetching queue for station:", activeStation);
fetchQueue(queuePage, queueRows, queueSearch); fetchQueue(queuePage, queueRows, queueSearch);
} }
}, [isQueueVisible, queuePage, queueRows, queueSearch, activeStation]); }, [isQueueVisible, queuePage, queueRows, queueSearch, activeStation]);
useEffect(() => { useEffect(() => {
console.log("Active station changed to:", activeStation); // console.log("Active station changed to:", activeStation);
if (isQueueVisible) { if (isQueueVisible) {
fetchQueue(queuePage, queueRows, queueSearch); fetchQueue(queuePage, queueRows, queueSearch);
} }
@@ -661,7 +801,7 @@ export default function Player({ user }: PlayerProps) {
useEffect(() => { useEffect(() => {
if (isQueueVisible) { if (isQueueVisible) {
console.log("Track changed, refreshing queue for station:", activeStation); // console.log("Track changed, refreshing queue for station:", activeStation);
fetchQueue(queuePage, queueRows, queueSearch); fetchQueue(queuePage, queueRows, queueSearch);
} }
}, [currentTrackUuid]); }, [currentTrackUuid]);
@@ -746,10 +886,42 @@ export default function Player({ user }: PlayerProps) {
></div> ></div>
</div> </div>
<div className={`lrc-text mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800 ${lyrics.length === 0 ? "empty" : ""}`}> <div
ref={lrcContainerRef}
className={`lrc-text mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800 ${lyrics.length === 0 ? "empty" : ""}`}
tabIndex={lyrics.length > 0 ? 0 : -1}
aria-label="Lyrics"
onKeyDown={(e) => {
if (!lrcContainerRef.current || lyrics.length === 0) return;
const container = lrcContainerRef.current;
const step = 24;
switch (e.key) {
case 'ArrowDown':
container.scrollBy({ top: step, behavior: 'smooth' });
e.preventDefault();
break;
case 'ArrowUp':
container.scrollBy({ top: -step, behavior: 'smooth' });
e.preventDefault();
break;
case 'Home':
container.scrollTo({ top: 0, behavior: 'smooth' });
e.preventDefault();
break;
case 'End':
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
e.preventDefault();
break;
}
}}
>
{lyrics.length === 0 && (
<p className="lrc-line text-sm text-neutral-400 dark:text-neutral-500">No lyrics available.</p>
)}
{lyrics.map((lyricObj, index) => ( {lyrics.map((lyricObj, index) => (
<p <p
key={index} key={index}
ref={index === currentLyricIndex ? (lrcActiveRef as React.RefObject<HTMLParagraphElement>) : undefined}
className={`lrc-line text-sm ${index === currentLyricIndex ? "active font-bold" : ""}`} className={`lrc-line text-sm ${index === currentLyricIndex ? "active font-bold" : ""}`}
> >
{lyricObj.line} {lyricObj.line}
@@ -830,14 +1002,27 @@ export default function Player({ user }: PlayerProps) {
<div className="music-control mt-4 flex justify-center"> <div className="music-control mt-4 flex justify-center">
<div <div
className="music-control__play" className="music-control__play"
onClick={() => { onClick={async () => {
const audio = audioElement.current; const audio = audioElement.current;
if (!audio) return; if (!audio) return;
if (isPlaying) { if (isPlaying) {
audio.pause(); audio.pause();
setIsPlaying(false); setIsPlaying(false);
} else { } else {
audio.play().then(() => setIsPlaying(true)); // If stream is not ready, reinitialize it
if (!isStreamReady || !audio.src || audio.error) {
initializeStream(activeStation);
return;
}
try {
await audio.play();
setIsPlaying(true);
} catch (err) {
console.warn('Playback failed, reinitializing stream:', err);
// Reinitialize stream on playback failure
initializeStream(activeStation);
}
} }
}} }}
role="button" role="button"
@@ -885,7 +1070,7 @@ export default function Player({ user }: PlayerProps) {
fetchQueue(e.page ?? 0, queueRows, queueSearch); fetchQueue(e.page ?? 0, queueRows, queueSearch);
}} }}
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} tracks"
paginatorClassName="queue-paginator !bg-neutral-50 dark:!bg-neutral-800 !text-neutral-900 dark:!text-neutral-100 !border-neutral-200 dark:!border-neutral-700" paginatorClassName="queue-paginator !bg-neutral-50 dark:!bg-neutral-800 !text-neutral-900 dark:!text-neutral-100 !border-neutral-200 dark:!border-neutral-700"
className="p-datatable-gridlines rounded-lg shadow-md border-t border-neutral-300 dark:border-neutral-700" className="p-datatable-gridlines rounded-lg shadow-md border-t border-neutral-300 dark:border-neutral-700"
style={{ minHeight: 'auto', height: 'auto', tableLayout: 'fixed', width: '100%' }} style={{ minHeight: 'auto', height: 'auto', tableLayout: 'fixed', width: '100%' }}
@@ -905,7 +1090,7 @@ export default function Player({ user }: PlayerProps) {
sortable sortable
headerClassName="bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 font-bold font-sans" headerClassName="bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 font-bold font-sans"
style={{ width: '300px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} style={{ width: '300px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
body={(rowData) => <span title={rowData.artistsong} style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '300px' }}>{rowData.artistsong}</span>} body={(rowData) => <span title={`${rowData.artist} - ${rowData.song}`} style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '300px' }}>{rowData.artist} - {rowData.song}</span>}
></Column> ></Column>
<Column <Column
field="album" field="album"

22
src/components/RadioBanner.tsx
View File

@@ -1,19 +1,19 @@
import React from "react"; import React from "react";
import Alert from "@mui/joy/Alert";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
export default function RadioBanner(): React.ReactElement { export default function RadioBanner(): React.ReactElement {
return ( return (
<div> <div className="radio-banner text-center mb-8">
<h2 style={{ textAlign: 'center', marginBottom: '1rem' }}>Radio</h2> <h2 className="text-[#333333] dark:text-[#D4D4D4] text-2xl font-bold mb-4">Radio</h2>
<Alert <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mx-auto max-w-md">
variant="soft" <div className="flex items-center">
color="danger" <svg className="w-6 h-6 text-yellow-600 dark:text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
sx={{ fontSize: "1.0rem", textAlign: "center", mt: 4, mb: 4, px: 3, py: 2 }} <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
startDecorator={<ErrorOutlineIcon fontSize="large" />} </svg>
> <p className="text-yellow-800 dark:text-yellow-200 font-medium">
Maintenance in progress. Please check back soon! Maintenance in progress. Please check back soon!
</Alert> </p>
</div>
</div>
</div> </div>
); );
} }

6
src/components/SubsiteAppLayout.tsx
View File

@@ -4,11 +4,13 @@
* This is a minimal version that avoids importing from shared modules * This is a minimal version that avoids importing from shared modules
* that would pull in heavy CSS (AppLayout, Components, etc.) * that would pull in heavy CSS (AppLayout, Components, etc.)
*/ */
import React, { Suspense, lazy, ReactNode } from 'react'; import React, { Suspense, lazy } from 'react';
import type { ReactNode } from 'react';
import { ToastContainer, toast } from 'react-toastify'; import { ToastContainer, toast } from 'react-toastify';
import { CssVarsProvider } from "@mui/joy"; import { CssVarsProvider } from "@mui/joy";
import { CacheProvider, EmotionCache } from "@emotion/react"; import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache"; import createCache from "@emotion/cache";
import type { EmotionCache } from "@emotion/cache";
import { PrimeReactProvider } from "primereact/api"; import { PrimeReactProvider } from "primereact/api";
// Import only minimal CSS - no theme CSS, no primeicons // Import only minimal CSS - no theme CSS, no primeicons

1
src/components/TRip/BreadcrumbNav.tsx
View File

@@ -24,6 +24,7 @@ export default function BreadcrumbNav({ currentPage }: BreadcrumbNavProps): Reac
<React.Fragment key={key}> <React.Fragment key={key}>
<a <a
href={href} href={href}
data-astro-reload
className={`px-3 py-1.5 rounded-full transition-colors ${isActive className={`px-3 py-1.5 rounded-full transition-colors ${isActive
? "bg-neutral-200 dark:bg-neutral-700 font-semibold text-neutral-900 dark:text-white" ? "bg-neutral-200 dark:bg-neutral-700 font-semibold text-neutral-900 dark:text-white"
: "text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800" : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800"

56
src/components/TRip/MediaRequestForm.tsx
View File

@@ -100,6 +100,7 @@ export default function MediaRequestForm() {
const albumHeaderRefs = useRef<Record<string | number, HTMLElement | null>>({}); const albumHeaderRefs = useRef<Record<string | number, HTMLElement | null>>({});
const suppressHashRef = useRef(false); const suppressHashRef = useRef(false);
const lastUrlRef = useRef(""); const lastUrlRef = useRef("");
const playPauseClickRef = useRef(false);
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); // Helper for delays const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); // Helper for delays
const sanitizeFilename = (text: string) => (text || "").replace(/[\\/:*?"<>|]/g, "_") || "track"; const sanitizeFilename = (text: string) => (text || "").replace(/[\\/:*?"<>|]/g, "_") || "track";
@@ -558,31 +559,42 @@ export default function MediaRequestForm() {
}; };
const handleTrackPlayPause = async (track: Track, albumId: string | number | null = null, albumIndex: number | null = null) => { const handleTrackPlayPause = async (track: Track, albumId: string | number | null = null, albumIndex: number | null = null) => {
// Prevent double-clicks / rapid clicks
if (playPauseClickRef.current) return;
playPauseClickRef.current = true;
const audio = audioRef.current; const audio = audioRef.current;
if (!audio) return; if (!audio) {
playPauseClickRef.current = false;
return;
}
if (typeof albumIndex === "number") { if (typeof albumIndex === "number") {
ensureAlbumExpanded(albumIndex); ensureAlbumExpanded(albumIndex);
} }
try {
if (currentTrackId === track.id) { if (currentTrackId === track.id) {
if (audio.paused) { if (audio.paused) {
setIsAudioPlaying(true); setIsAudioPlaying(true);
try {
await audio.play(); await audio.play();
} catch (error) {
setIsAudioPlaying(false);
console.error(error);
toast.error("Unable to resume playback.");
}
} else { } else {
setIsAudioPlaying(false); setIsAudioPlaying(false);
audio.pause(); audio.pause();
} }
return; } else {
}
await playTrack(track, { fromQueue: false }); await playTrack(track, { fromQueue: false });
}
} catch (error) {
setIsAudioPlaying(false);
console.error(error);
toast.error("Unable to play/pause track.");
} finally {
// Small delay before allowing next click to prevent rapid clicks
setTimeout(() => {
playPauseClickRef.current = false;
}, 150);
}
}; };
const toggleAlbumShuffle = (albumId) => { const toggleAlbumShuffle = (albumId) => {
@@ -993,7 +1005,14 @@ export default function MediaRequestForm() {
} }
const data = await response.json(); const data = await response.json();
toast.success(`Request submitted! (${allSelectedIds.length} tracks)`); const toastId = 'trip-request-submitted';
toast.success(`Request submitted! (${allSelectedIds.length} tracks)`, {
toastId,
autoClose: 3000,
onClose: () => {
if (typeof window !== 'undefined') window.location.href = '/TRip/requests';
}
});
} catch (err) { } catch (err) {
console.error(err); console.error(err);
toast.error("Failed to submit request."); toast.error("Failed to submit request.");
@@ -1297,22 +1316,13 @@ export default function MediaRequestForm() {
e.stopPropagation(); e.stopPropagation();
handleTrackPlayPause(track, id, albumIndex); handleTrackPlayPause(track, id, albumIndex);
}} }}
onPointerDown={(e) => { style={{ touchAction: "manipulation", WebkitTapHighlightColor: "transparent" }}
try { className={`flex items-center justify-center w-8 h-8 rounded-full border text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed select-none ${isCurrentTrack && isAudioPlaying
if (e?.pointerType === "touch" || e.type === "touchstart") {
e.preventDefault();
}
} catch (err) {
// ignore
}
}}
style={{ touchAction: "manipulation" }}
className={`flex items-center justify-center w-8 h-8 rounded-full border text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed ${isCurrentTrack && isAudioPlaying
? "border-green-600 text-green-600" ? "border-green-600 text-green-600"
: "border-neutral-400 text-neutral-600 hover:text-blue-600 hover:border-blue-600"}`} : "border-neutral-400 text-neutral-600 hover:text-blue-600 hover:border-blue-600"}`}
aria-label={`${isCurrentTrack && isAudioPlaying ? "Pause" : "Play"} ${track.title}`} aria-label={`${isCurrentTrack && isAudioPlaying ? "Pause" : "Play"} ${track.title}`}
aria-pressed={isCurrentTrack && isAudioPlaying} aria-pressed={isCurrentTrack && isAudioPlaying}
disabled={audioLoadingTrackId === track.id} disabled={audioLoadingTrackId === track.id || playPauseClickRef.current}
> >
{audioLoadingTrackId === track.id ? ( {audioLoadingTrackId === track.id ? (
<InlineSpinner sizeClass="h-4 w-4" /> <InlineSpinner sizeClass="h-4 w-4" />

98
src/components/TRip/RequestManagement.css
View File

@@ -279,6 +279,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
gap: 0.5rem; /* space between track and percent */
} }
@@ -292,6 +293,7 @@
overflow: hidden; /* must clip when scaled */ overflow: hidden; /* must clip when scaled */
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
margin-right: 0; /* ensure neighbor percent isn't pushed inside */
} }
.rm-progress-track-lg { .rm-progress-track-lg {
@@ -308,13 +310,41 @@
transform: scaleX(var(--rm-progress, 0)); /* use custom property (0-1 range) */ transform: scaleX(var(--rm-progress, 0)); /* use custom property (0-1 range) */
border-top-left-radius: 999px; border-top-left-radius: 999px;
border-bottom-left-radius: 999px; border-bottom-left-radius: 999px;
transition: transform 0.24s cubic-bezier(0.4,0,0.2,1), border-radius 0.24s; transition: transform .5s cubic-bezier(.25,.8,.25,1), background-color .28s ease, border-radius .28s;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
right: 0; right: 0;
min-width: 0; min-width: 0;
will-change: transform; will-change: transform, background-color;
box-sizing: border-box; box-sizing: border-box;
z-index: 1; /* ensure fill sits beneath the percent text */
}
/* Ensure percent label appears above the fill even when inside the track */
.rm-progress-text {
position: relative;
z-index: 2;
flex: none; /* don't stretch */
margin-left: 0.5rem;
white-space: nowrap;
overflow: visible;
}
/* Finalizing pulse for near-100% jobs */
.rm-finalizing {
animation: rm-finalize-pulse 1.6s ease-in-out infinite;
}
@keyframes rm-finalize-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
}
50% {
box-shadow: 0 0 12px 4px rgba(255, 193, 7, 0.10);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
}
} }
/* Fix for native audio progress bar (range input) */ /* Fix for native audio progress bar (range input) */
@@ -404,16 +434,47 @@
.rm-progress-text { .rm-progress-text {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: inherit;
}
/* Ensure progress styles apply when rendered within a PrimeReact Dialog (portal) */ /* Ensure progress styles apply when rendered within a PrimeReact Dialog (portal) */
.p-dialog .rm-progress-container{display:flex;align-items:center;width:100%} .p-dialog .rm-progress-container {
.p-dialog .rm-progress-track{position:relative;flex:1 1 0%;min-width:0;height:6px;background-color:#80808033;border-radius:999px;overflow:hidden;margin:0!important;padding:0!important} display: flex;
.p-dialog .rm-progress-track-lg{height:10px} align-items: center;
.p-dialog .rm-progress-fill{position:absolute;left:0;top:0;height:100%;width:100%!important;transform-origin:left center;transform:scaleX(var(--rm-progress, 0));border-top-left-radius:999px;border-bottom-left-radius:999px;transition:transform .24s cubic-bezier(.4,0,.2,1),border-radius .24s;margin:0!important;padding:0!important;right:0;min-width:0;will-change:transform;box-sizing:border-box} width: 100%;
.p-dialog .rm-progress-text{font-size:.75rem;font-weight:600;min-width:2.5rem;text-align:right}
min-width: 2.5rem;
text-align: right;
} }
.p-dialog .rm-progress-track {
position: relative;
flex: 1 1 0%;
min-width: 0;
height: 6px;
background-color: #80808033;
border-radius: 999px;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
.p-dialog .rm-progress-track-lg { height: 10px; }
.p-dialog .rm-progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100% !important;
transform-origin: left center;
transform: scaleX(var(--rm-progress, 0));
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
transition: transform .5s cubic-bezier(.25,.8,.25,1), background-color .28s ease, border-radius .28s;
margin: 0 !important;
padding: 0 !important;
right: 0;
min-width: 0;
will-change: transform, background-color;
box-sizing: border-box;
}
.p-dialog .rm-progress-text { font-size: .75rem; font-weight: 600; color: #e5e7eb !important; margin-left: 0.5rem; white-space: nowrap; }
/* Container Styles */ /* Container Styles */
.trip-management-container { .trip-management-container {
@@ -532,6 +593,25 @@
font-size: 0.85rem !important; font-size: 0.85rem !important;
} }
/* Track list scrollbar and status pill adjustments */
.rm-track-list {
/* Give room for overlay scrollbars so status pills don't overlap */
padding-inline-end: 1.25rem; /* ~20px */
}
.rm-track-status {
/* Ensure the status pill has extra right padding and sits visually clear of the scrollbar */
padding-right: 0.75rem !important;
margin-right: 0.25rem !important;
border-radius: 999px !important;
}
/* Slightly reduce spacing on very small screens */
@media (max-width: 480px) {
.rm-track-list { padding-inline-end: 0.75rem; }
.rm-track-status { padding-right: 0.5rem !important; }
}
/* Album header info stacks */ /* Album header info stacks */
.album-header-info { .album-header-info {
flex-direction: column; flex-direction: column;

224
src/components/TRip/RequestManagement.tsx
View File

@@ -11,17 +11,27 @@ import BreadcrumbNav from "./BreadcrumbNav";
import { API_URL } from "@/config"; import { API_URL } from "@/config";
import "./RequestManagement.css"; import "./RequestManagement.css";
interface TrackInfo {
title?: string;
artist?: string;
status?: string;
error?: string;
filename?: string;
[key: string]: unknown;
}
interface RequestJob { interface RequestJob {
id: string | number; id: string | number;
target: string; target: string;
tracks: number; tracks: number;
quality: string; quality: string;
status: string; status: string;
progress: number; progress: number | string | null;
type?: string; type?: string;
tarball_path?: string; tarball?: string;
created_at?: string; created_at?: string;
updated_at?: string; updated_at?: string;
track_list?: TrackInfo[];
[key: string]: unknown; [key: string]: unknown;
} }
@@ -38,11 +48,24 @@ export default function RequestManagement() {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null); const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
const pollingDetailRef = useRef<ReturnType<typeof setInterval> | null>(null); const pollingDetailRef = useRef<ReturnType<typeof setInterval> | null>(null);
// Track finalizing job polls to actively refresh job status when progress hits 100% but status hasn't updated yet
const finalizingPollsRef = useRef<Record<string | number, ReturnType<typeof setInterval> | null>>({});
const resolveTarballPath = (job: RequestJob) => job.tarball;
const tarballUrl = (absPath: string | undefined, quality: string) => { const tarballUrl = (absPath: string | undefined, quality: string) => {
if (!absPath) return null; if (!absPath) return null;
const filename = absPath.split("/").pop(); // get "SOMETHING.tar.gz" const filename = absPath.split("/").pop(); // get "SOMETHING.tar.gz"
// If the backend already stores a fully qualified URL, return as-is
if (/^https?:\/\//i.test(absPath)) return absPath;
// Check if path is /storage/music/TRIP
if (absPath.includes("/storage/music/TRIP/")) {
return `https://music.boatson.boats/TRIP/${filename}`;
}
// Otherwise, assume /storage/music2/completed/{quality} format
return `${TAR_BASE_URL}/${quality}/${filename}`; return `${TAR_BASE_URL}/${quality}/${filename}`;
}; };
@@ -172,39 +195,111 @@ export default function RequestManagement() {
const formatProgress = (p: unknown) => { const formatProgress = (p: unknown) => {
if (p === null || p === undefined || p === "") return "—"; if (p === null || p === undefined || p === "") return "—";
const num = Number(p); const pct = computePct(p);
if (Number.isNaN(num)) return "—";
const pct = num > 1 ? Math.round(num) : num;
return `${pct}%`; return `${pct}%`;
}; };
const computePct = (p: unknown) => { const computePct = (p: unknown) => {
if (p === null || p === undefined || p === "") return 0; if (p === null || p === undefined || p === "") return 0;
// Handle "X / Y" format (e.g., "9 / 545") - note spaces around slash from backend
if (typeof p === 'string' && p.includes('/')) {
const parts = p.split('/').map(s => s.trim());
const current = parseFloat(parts[0]);
const total = parseFloat(parts[1]);
if (Number.isFinite(current) && Number.isFinite(total) && total > 0) {
return Math.min(100, Math.max(0, Math.round((current / total) * 100)));
}
return 0;
}
const num = Number(p); const num = Number(p);
if (Number.isNaN(num)) return 0; if (!Number.isFinite(num)) return 0;
return Math.min(100, Math.max(0, num > 1 ? Math.round(num) : Math.round(num * 100))); // Backend sends progress as 0-100 directly, so just clamp it
return Math.min(100, Math.max(0, Math.round(num)));
}; };
// Visual pct used for display/fill. Prevent briefly showing 100% unless status is Finished
const displayPct = (p: unknown, status?: string) => {
const pct = computePct(p);
const statusNorm = String(status || "").trim();
// If the backend reports 100% but the job hasn't reached 'Finished', show 99 to avoid flash
if (pct >= 100 && statusNorm.toLowerCase() !== 'finished') return 99;
return pct;
};
const isFinalizingJob = (job: RequestJob | { progress?: unknown; status?: string }) => {
const pct = computePct(job.progress);
const statusNorm = String(job.status || "").trim().toLowerCase();
// Only treat as finalizing when status is explicitly "Compressing"
// This is set by the backend only when progress == 100 and tarball isn't ready yet
return statusNorm === 'compressing';
};
const startFinalizingPoll = (jobId: string | number) => {
if (finalizingPollsRef.current[jobId]) return; // already polling
let attempts = 0;
const iv = setInterval(async () => {
attempts += 1;
try {
const updated = await fetchJobDetail(jobId);
if (updated) {
// Merge the updated job into requests list so UI refreshes
setRequests((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
// If it's no longer finalizing, stop this poll
if (!isFinalizingJob(updated)) {
if (finalizingPollsRef.current[jobId]) {
clearInterval(finalizingPollsRef.current[jobId] as ReturnType<typeof setInterval>);
finalizingPollsRef.current[jobId] = null;
}
}
}
} catch (err) {
// ignore individual errors; we'll retry a few times
}
// safety cap: stop after ~20 attempts (~30s)
if (attempts >= 20) {
if (finalizingPollsRef.current[jobId]) {
clearInterval(finalizingPollsRef.current[jobId] as ReturnType<typeof setInterval>);
finalizingPollsRef.current[jobId] = null;
}
}
}, 1500);
finalizingPollsRef.current[jobId] = iv;
};
// stop all finalizing polls on unmount
useEffect(() => {
return () => {
Object.values(finalizingPollsRef.current).forEach((iv) => {
if (iv) clearInterval(iv);
});
};
}, []);
const progressBarTemplate = (rowData: RequestJob) => { const progressBarTemplate = (rowData: RequestJob) => {
const p = rowData.progress; const p = rowData.progress;
if (p === null || p === undefined || p === 0) return "—"; if (p === null || p === undefined || p === "") return "—";
const num = Number(p); const pctRaw = computePct(p);
if (Number.isNaN(num)) return "—"; const isFinalizing = isFinalizingJob(rowData);
const pct = computePct(p); const pct = isFinalizing ? 99 : pctRaw;
const getProgressColor = () => { const getProgressColor = () => {
if (rowData.status === "Failed") return "bg-red-500"; if (rowData.status === "Failed") return "bg-red-500";
if (rowData.status === "Finished") return "bg-green-500"; if (rowData.status === "Finished") return "bg-green-500";
if (pct < 30) return "bg-blue-400"; if (isFinalizing) return "bg-yellow-500"; // finalizing indicator
if (pct < 70) return "bg-blue-500"; if (pctRaw < 30) return "bg-blue-400";
if (pctRaw < 70) return "bg-blue-500";
return "bg-blue-600"; return "bg-blue-600";
}; };
// If this job appears to be finalizing, ensure a poll is active to get the real status
if (isFinalizing) startFinalizingPoll(rowData.id);
return ( return (
<div className="rm-progress-container"> <div className="rm-progress-container">
<div className="rm-progress-track" style={{ flex: 1, minWidth: 0 }}> <div className="rm-progress-track" style={{ flex: 1, minWidth: 0 }}>
<div <div
className={`rm-progress-fill ${getProgressColor()}`} className={`rm-progress-fill ${getProgressColor()} ${isFinalizing ? 'rm-finalizing' : ''}`}
style={{ style={{
// CSS custom property for progress animation // CSS custom property for progress animation
['--rm-progress' as string]: (pct / 100).toString(), ['--rm-progress' as string]: (pct / 100).toString(),
@@ -212,12 +307,12 @@ export default function RequestManagement() {
borderBottomRightRadius: pct === 100 ? '999px' : 0 borderBottomRightRadius: pct === 100 ? '999px' : 0
}} }}
data-pct={pct} data-pct={pct}
aria-valuenow={pct} aria-valuenow={pctRaw}
aria-valuemin={0} aria-valuemin={0}
aria-valuemax={100} aria-valuemax={100}
/> />
</div> </div>
<span className="rm-progress-text" style={{ marginLeft: 8, flex: 'none' }}>{pct}%</span> <span className="rm-progress-text" style={{ marginLeft: 8, flex: 'none' }}>{pct}%{isFinalizing ? ' (finalizing...)' : ''}</span>
</div> </div>
); );
}; };
@@ -341,7 +436,7 @@ export default function RequestManagement() {
</span> </span>
} }
body={(row: RequestJob) => { body={(row: RequestJob) => {
const url = tarballUrl(row.tarball_path, row.quality || "FLAC"); const url = tarballUrl(resolveTarballPath(row as RequestJob), row.quality || "FLAC");
if (!url) return "—"; if (!url) return "—";
const encodedURL = encodeURI(url); const encodedURL = encodeURI(url);
@@ -409,20 +504,35 @@ export default function RequestManagement() {
<strong>Progress:</strong> <strong>Progress:</strong>
<div className="rm-progress-container mt-2"> <div className="rm-progress-container mt-2">
<div className="rm-progress-track rm-progress-track-lg"> <div className="rm-progress-track rm-progress-track-lg">
{(() => {
const pctRawDialog = computePct(selectedRequest.progress);
const isFinalizingDialog = isFinalizingJob(selectedRequest);
const pctDialog = isFinalizingDialog ? 99 : pctRawDialog;
const status = selectedRequest.status;
const fillColor = status === "Failed" ? "bg-red-500" : status === "Finished" ? "bg-green-500" : isFinalizingDialog ? "bg-yellow-500" : "bg-blue-500";
// Ensure we poll for finalizing jobs to get the real status update
if (isFinalizingDialog) startFinalizingPoll(selectedRequest.id);
return (
<>
<div <div
className={`rm-progress-fill ${selectedRequest.status === "Failed" ? "bg-red-500" : selectedRequest.status === "Finished" ? "bg-green-500" : "bg-blue-500"}`} className={`rm-progress-fill ${fillColor} ${isFinalizingDialog ? 'rm-finalizing' : ''}`}
style={{ style={{
['--rm-progress' as string]: (computePct(selectedRequest.progress) / 100).toString(), ['--rm-progress' as string]: (pctDialog / 100).toString(),
borderTopRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0, borderTopRightRadius: pctDialog >= 100 ? '999px' : 0,
borderBottomRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0 borderBottomRightRadius: pctDialog >= 100 ? '999px' : 0
}} }}
data-pct={computePct(selectedRequest.progress)} data-pct={pctDialog}
aria-valuenow={Math.min(100, Math.max(0, Number(selectedRequest.progress) > 1 ? Math.round(selectedRequest.progress) : selectedRequest.progress * 100))} aria-valuenow={pctRawDialog}
aria-valuemin={0} aria-valuemin={0}
aria-valuemax={100} aria-valuemax={100}
/> />
</>
);
})()}
</div> </div>
<span className="rm-progress-text">{formatProgress(selectedRequest.progress)}</span> <span className="rm-progress-text">{formatProgress(selectedRequest.progress)}{isFinalizingJob(selectedRequest) ? ' — finalizing' : ''}</span>
</div> </div>
</div> </div>
)} )}
@@ -437,23 +547,83 @@ export default function RequestManagement() {
{/* --- Tarball Card --- */} {/* --- Tarball Card --- */}
{ {
selectedRequest.tarball_path && ( selectedRequest.tarball && (
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md"> <div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md">
<p> <p>
<strong>Tarball:</strong>{" "} <strong>Tarball:</strong>{" "}
<a <a
href={encodeURI(tarballUrl(selectedRequest.tarball_path, selectedRequest.quality) || "")} href={encodeURI(tarballUrl(resolveTarballPath(selectedRequest), selectedRequest.quality) || "")}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-blue-500 hover:underline" className="text-blue-500 hover:underline"
> >
{tarballUrl(selectedRequest.tarball_path, selectedRequest.quality)?.split("/").pop()} {tarballUrl(resolveTarballPath(selectedRequest), selectedRequest.quality)?.split("/").pop()}
</a> </a>
</p> </p>
</div> </div>
) )
} }
{/* --- Track List Card --- */}
{selectedRequest.track_list && selectedRequest.track_list.length > 0 && (
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md">
<p className="mb-2"><strong>Tracks ({selectedRequest.track_list.length}):</strong></p>
<div className="max-h-60 overflow-y-auto space-y-2" data-lenis-prevent>
{selectedRequest.track_list.map((track, idx) => {
const rawStatus = String(track.status || "pending");
const statusNorm = rawStatus.trim().toLowerCase();
const isError = statusNorm === "failed" || statusNorm === "error" || !!track.error;
const isSuccess = ["done", "success", "completed", "finished"].includes(statusNorm);
const isPending = ["pending", "queued"].includes(statusNorm);
const isDownloading = ["downloading", "in_progress", "started"].includes(statusNorm);
const statusBadgeClass = isError
? "bg-red-600 text-white"
: isSuccess
? "bg-green-600 text-white"
: isDownloading
? "bg-blue-600 text-white"
: isPending
? "bg-yellow-600 text-white"
: "bg-gray-500 text-white";
const trackTitle = track.title || track.filename || `Track ${idx + 1}`;
const trackArtist = track.artist;
return (
<div
key={idx}
className={`p-2 rounded border ${isError ? "border-red-500/50 bg-red-500/10" : "border-neutral-300 dark:border-neutral-600"}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate" title={trackTitle}>
{trackTitle}
</p>
{trackArtist && (
<p className="text-xs text-neutral-500 dark:text-neutral-400 truncate" title={trackArtist}>
{trackArtist}
</p>
)}
</div>
<span className={`px-2 py-0.5 pr-3 mr-2 rounded text-xs font-semibold whitespace-nowrap ${statusBadgeClass} rm-track-status`} title={rawStatus}>
{rawStatus}
</span>
</div>
{track.error && (
<p className="mt-1 text-xs text-red-400 break-words">
<i className="pi pi-exclamation-triangle mr-1" />
{track.error}
</p>
)}
</div>
);
})}
</div>
</div>
)}
</div > </div >
) : ( ) : (
<p>Loading...</p> <p>Loading...</p>

86
src/components/req/ReqForm.tsx
View File

@@ -5,19 +5,46 @@ import { Button } from "@mui/joy";
import { AutoComplete } from "primereact/autocomplete"; import { AutoComplete } from "primereact/autocomplete";
import { InputText } from "primereact/inputtext"; import { InputText } from "primereact/inputtext";
declare global {
interface Window {
_t?: string;
}
}
type MediaType = 'movie' | 'tv' | string;
interface SearchItem {
label: string;
year?: string;
mediaType?: MediaType;
poster_path?: string | null;
overview?: string;
title?: string;
type?: string;
requester?: string;
}
interface SubmittedRequest {
title: string;
year: string;
type: string;
requester: string;
poster_path?: string | null;
}
export default function ReqForm() { export default function ReqForm() {
const [type, setType] = useState(""); const [type, setType] = useState<string>("");
const [title, setTitle] = useState(""); const [title, setTitle] = useState<string>("");
const [year, setYear] = useState(""); const [year, setYear] = useState<string>("");
const [requester, setRequester] = useState(""); const [requester, setRequester] = useState<string>("");
const [selectedItem, setSelectedItem] = useState(null); const [selectedItem, setSelectedItem] = useState<SearchItem | null>(null);
const [selectedOverview, setSelectedOverview] = useState(""); const [selectedOverview, setSelectedOverview] = useState<string>("");
const [selectedTitle, setSelectedTitle] = useState(""); const [selectedTitle, setSelectedTitle] = useState<string>("");
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
const [suggestions, setSuggestions] = useState([]); const [suggestions, setSuggestions] = useState<SearchItem[]>([]);
const [posterLoading, setPosterLoading] = useState(true); const [posterLoading, setPosterLoading] = useState<boolean>(true);
const [submittedRequest, setSubmittedRequest] = useState(null); // Track successful submission const [submittedRequest, setSubmittedRequest] = useState<SubmittedRequest | null>(null); // Track successful submission
const [csrfToken, setCsrfToken] = useState(null); const [csrfToken, setCsrfToken] = useState<string | null>(null);
// Get CSRF token from window global on mount // Get CSRF token from window global on mount
useEffect(() => { useEffect(() => {
@@ -36,7 +63,7 @@ export default function ReqForm() {
} }
}, [title, selectedTitle, selectedOverview, selectedItem, type]); }, [title, selectedTitle, selectedOverview, selectedItem, type]);
const searchTitles = async (event) => { const searchTitles = async (event: { query: string }) => {
const query = event.query; const query = event.query;
if (query.length < 2) { if (query.length < 2) {
setSuggestions([]); setSuggestions([]);
@@ -48,7 +75,7 @@ export default function ReqForm() {
if (!response.ok) { if (!response.ok) {
throw new Error(`API error: ${response.status}`); throw new Error(`API error: ${response.status}`);
} }
const data = await response.json(); const data: SearchItem[] = await response.json();
setSuggestions(data); setSuggestions(data);
} catch (error) { } catch (error) {
console.error('Error fetching suggestions:', error); console.error('Error fetching suggestions:', error);
@@ -56,7 +83,7 @@ export default function ReqForm() {
} }
}; };
const handleSubmit = async (e) => { const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (!title.trim()) { if (!title.trim()) {
toast.error("Please fill in the required fields."); toast.error("Please fill in the required fields.");
@@ -101,7 +128,7 @@ export default function ReqForm() {
year, year,
type, type,
requester, requester,
poster_path: selectedItem?.poster_path, poster_path: selectedItem?.poster_path ?? null,
}); });
} catch (error) { } catch (error) {
console.error('Submission error:', error); console.error('Submission error:', error);
@@ -126,13 +153,13 @@ export default function ReqForm() {
const attachScrollFix = () => { const attachScrollFix = () => {
setTimeout(() => { setTimeout(() => {
const panel = document.querySelector(".p-autocomplete-panel"); const panel = document.querySelector<HTMLElement>(".p-autocomplete-panel");
const items = panel?.querySelector(".p-autocomplete-items"); const items = panel?.querySelector<HTMLElement>(".p-autocomplete-items");
if (items) { if (items) {
items.style.maxHeight = "200px"; items.style.maxHeight = "200px";
items.style.overflowY = "auto"; items.style.overflowY = "auto";
items.style.overscrollBehavior = "contain"; items.style.overscrollBehavior = "contain";
const wheelHandler = (e) => { const wheelHandler = (e: WheelEvent) => {
const delta = e.deltaY; const delta = e.deltaY;
const atTop = items.scrollTop === 0; const atTop = items.scrollTop === 0;
const atBottom = items.scrollTop + items.clientHeight >= items.scrollHeight; const atBottom = items.scrollTop + items.clientHeight >= items.scrollHeight;
@@ -148,7 +175,7 @@ export default function ReqForm() {
}, 0); }, 0);
}; };
const formatMediaType = (mediaTypeValue) => { const formatMediaType = (mediaTypeValue: MediaType | undefined) => {
if (!mediaTypeValue) return ""; if (!mediaTypeValue) return "";
if (mediaTypeValue === "tv") return "TV Series"; if (mediaTypeValue === "tv") return "TV Series";
if (mediaTypeValue === "movie") return "Movie"; if (mediaTypeValue === "movie") return "Movie";
@@ -239,16 +266,17 @@ export default function ReqForm() {
delay={300} delay={300}
onChange={(e) => { onChange={(e) => {
// Handle both string input and object selection // Handle both string input and object selection
const val = e.target?.value ?? e.value; const val = (e as any).target?.value ?? e.value;
setTitle(typeof val === 'string' ? val : val?.label || ''); setTitle(typeof val === 'string' ? val : (val as SearchItem | undefined)?.label || '');
}} }}
onSelect={(e) => { onSelect={(e: { value: SearchItem }) => {
setType(e.value.mediaType === 'tv' ? 'tv' : 'movie'); const item = e.value;
setTitle(e.value.label); setType(item.mediaType === 'tv' ? 'tv' : 'movie');
setSelectedTitle(e.value.label); setTitle(item.label);
setSelectedItem(e.value); setSelectedTitle(item.label);
if (e.value.year) setYear(e.value.year); setSelectedItem(item);
setSelectedOverview(e.value.overview || ""); if (item.year) setYear(item.year);
setSelectedOverview(item.overview || "");
}} }}
placeholder="Enter movie or TV title" placeholder="Enter movie or TV title"
title="Enter movie or TV show title" title="Enter movie or TV show title"

2
src/config.ts
View File

@@ -63,7 +63,7 @@ export const RADIO_API_URL: string = "https://radio-api.codey.lol";
export const socialLinks: Record<string, string> = { export const socialLinks: Record<string, string> = {
}; };
export const MAJOR_VERSION: string = "0.5" export const MAJOR_VERSION: string = "0.6"
export const RELEASE_FLAG: string | null = null; export const RELEASE_FLAG: string | null = null;
export const ENVIRONMENT: "Dev" | "Prod" = import.meta.env.DEV ? "Dev" : "Prod"; export const ENVIRONMENT: "Dev" | "Prod" = import.meta.env.DEV ? "Dev" : "Prod";

3
src/layouts/WhitelabelLayout.tsx
View File

@@ -1,4 +1,5 @@
import React, { ReactNode, CSSProperties } from 'react'; import React from 'react';
import type { ReactNode, CSSProperties } from 'react';
interface WhitelabelLayoutProps { interface WhitelabelLayoutProps {
children: ReactNode; children: ReactNode;

511
src/middleware.js Normal file
View File

@@ -0,0 +1,511 @@
import { defineMiddleware } from 'astro:middleware';
import { SUBSITES, PROTECTED_ROUTES, PUBLIC_ROUTES } from './config.js';
import { getSubsiteByHost, getSubsiteFromSignal } from './utils/subsites.js';
// Polyfill Headers.getSetCookie for environments where it's not present.
// Astro's Node adapter expects headers.getSetCookie() to exist when
// 'set-cookie' headers are present; in some Node runtimes Headers lacks it
// which leads to TypeError: headers.getSetCookie is not a function.
if (typeof globalThis.Headers !== 'undefined' && typeof globalThis.Headers.prototype.getSetCookie !== 'function') {
try {
Object.defineProperty(globalThis.Headers.prototype, 'getSetCookie', {
value: function () {
const cookies = [];
for (const [name, val] of this.entries()) {
if (name && name.toLowerCase() === 'set-cookie') cookies.push(val);
}
return cookies;
},
configurable: true,
writable: true,
});
} catch (err) {
// If we can't patch Headers, swallow silently — code will still try to
// access getSetCookie, but our other guards handle missing function calls.
console.warn('[middleware] Failed to polyfill Headers.getSetCookie', err);
}
}
const API_URL = "https://api.codey.lol";
const AUTH_TIMEOUT_MS = 3000; // 3 second timeout for auth requests
// Deduplication for concurrent refresh requests (prevents race condition where
// multiple SSR requests try to refresh simultaneously, causing 401s after the
// first one rotates the refresh token)
let refreshPromise = null;
let lastRefreshResult = null;
let lastRefreshTime = 0;
const REFRESH_RESULT_TTL = 5000; // Cache successful refresh result for 5 seconds
// Auth check function (mirrors requireAuthHook logic but for middleware)
async function checkAuth(request) {
try {
const cookieHeader = request.headers.get("cookie") ?? "";
// Add timeout to prevent hanging
let controller = new AbortController;
let timeout = setTimeout(() => controller.abort(), AUTH_TIMEOUT_MS);
let res;
try {
res = await fetch(`${API_URL}/auth/id`, {
headers: { Cookie: cookieHeader },
credentials: "include",
signal: controller.signal,
});
} catch (err) {
clearTimeout(timeout);
console.error("[middleware] auth/id failed or timed out", err.name === 'AbortError' ? 'timeout' : err);
return { authenticated: false, user: null, cookies: null };
}
clearTimeout(timeout);
if (res.status === 401) {
// Check if we even have a refresh token before attempting refresh
if (!cookieHeader.includes('refresh_token=')) {
return { authenticated: false, user: null, cookies: null };
}
// Check if we have a recent successful refresh result we can reuse
const now = Date.now();
if (lastRefreshResult && (now - lastRefreshTime) < REFRESH_RESULT_TTL) {
console.log(`[middleware] Reusing cached refresh result from ${now - lastRefreshTime}ms ago`);
return lastRefreshResult;
}
// Deduplicate concurrent refresh requests
if (refreshPromise) {
console.log(`[middleware] Waiting for in-flight refresh request`);
return refreshPromise;
}
// Start a new refresh request
refreshPromise = (async () => {
console.log(`[middleware] Starting token refresh...`);
let controller = new AbortController();
let timeout = setTimeout(() => controller.abort(), AUTH_TIMEOUT_MS);
let refreshRes;
try {
refreshRes = await fetch(`${API_URL}/auth/refresh`, {
method: "POST",
headers: { Cookie: cookieHeader },
credentials: "include",
signal: controller.signal,
});
} catch (err) {
clearTimeout(timeout);
console.error("[middleware] auth/refresh failed or timed out", err.name === 'AbortError' ? 'timeout' : err);
return { authenticated: false, user: null, cookies: null };
}
clearTimeout(timeout);
if (!refreshRes.ok) {
// Log the response body for debugging
let errorDetail = '';
try {
const errorBody = await refreshRes.text();
errorDetail = ` - ${errorBody}`;
} catch {}
console.error(`[middleware] Token refresh failed ${refreshRes.status}${errorDetail}`);
return { authenticated: false, user: null, cookies: null };
}
console.log(`[middleware] Token refresh succeeded`);
// Get refreshed cookies
let setCookies = [];
if (typeof refreshRes.headers.getSetCookie === 'function') {
setCookies = refreshRes.headers.getSetCookie();
} else {
const setCookieHeader = refreshRes.headers.get("set-cookie");
if (setCookieHeader) {
setCookies = setCookieHeader.split(/,(?=\s*[a-zA-Z_][a-zA-Z0-9_]*=)/);
}
}
if (setCookies.length === 0) {
console.error("[middleware] No set-cookie headers in refresh response");
return { authenticated: false, user: null, cookies: null };
}
// Build new cookie header for retry
const newCookieHeader = setCookies.map(c => c.split(";")[0].trim()).join("; ");
// Retry auth/id with new cookies and timeout
controller = new AbortController();
timeout = setTimeout(() => controller.abort(), AUTH_TIMEOUT_MS);
let retryRes;
try {
retryRes = await fetch(`${API_URL}/auth/id`, {
headers: { Cookie: newCookieHeader },
credentials: "include",
signal: controller.signal,
});
} catch (err) {
clearTimeout(timeout);
console.error("[middleware] auth/id retry failed or timed out", err.name === 'AbortError' ? 'timeout' : err);
return { authenticated: false, user: null, cookies: null };
}
clearTimeout(timeout);
if (!retryRes.ok) {
console.error(`[middleware] auth/id retry failed with status ${retryRes.status}`);
return { authenticated: false, user: null, cookies: null };
}
const user = await retryRes.json();
return { authenticated: true, user, cookies: setCookies };
})();
// Clear the promise when done and cache the result
refreshPromise.then(result => {
if (result.authenticated) {
lastRefreshResult = result;
lastRefreshTime = Date.now();
}
refreshPromise = null;
}).catch(() => {
refreshPromise = null;
});
return refreshPromise;
}
if (!res.ok) {
return { authenticated: false, user: null, cookies: null };
}
const user = await res.json();
return { authenticated: true, user, cookies: null };
} catch (err) {
console.error("[middleware] Auth check error:", err);
return { authenticated: false, user: null, cookies: null };
}
}
// Check if a path matches any protected route and return the config
function getProtectedRouteConfig(pathname) {
// Normalize pathname for comparison (lowercase)
const normalizedPath = pathname.toLowerCase();
for (const route of PROTECTED_ROUTES) {
const routePath = typeof route === 'string' ? route : route.path;
const normalizedRoute = routePath.toLowerCase();
const matches = normalizedPath === normalizedRoute || normalizedPath.startsWith(normalizedRoute + '/');
if (matches) {
// Check if this path is excluded from protection
const excludes = (typeof route === 'object' && route.exclude) || [];
for (const excludePath of excludes) {
const normalizedExclude = excludePath.toLowerCase();
if (normalizedPath === normalizedExclude || normalizedPath.startsWith(normalizedExclude + '/')) {
if (import.meta.env.DEV) console.log(`[middleware] Path ${pathname} excluded from protection by ${excludePath}`);
return null; // Excluded, not protected
}
}
return typeof route === 'string' ? { path: route, roles: null } : route;
}
}
return null;
}
// Check if a path is explicitly public (but NOT if it matches a protected route)
function isPublicRoute(pathname) {
// If the path matches a protected route, it's NOT public
if (getProtectedRouteConfig(pathname)) {
return false;
}
for (const route of PUBLIC_ROUTES) {
// For routes ending with /, match any path starting with that prefix
if (route.endsWith('/') && route !== '/') {
if (pathname.startsWith(route)) {
if (import.meta.env.DEV) console.log(`[middleware] isPublicRoute: ${pathname} matched ${route} (prefix)`);
return true;
}
} else {
// For other routes, match exactly or as a path prefix (route + /)
if (pathname === route) {
if (import.meta.env.DEV) console.log(`[middleware] isPublicRoute: ${pathname} matched ${route} (exact)`);
return true;
}
// Special case: don't treat / as a prefix for all paths
if (route !== '/' && pathname.startsWith(route + '/')) {
if (import.meta.env.DEV) console.log(`[middleware] isPublicRoute: ${pathname} matched ${route}/ (subpath)`);
return true;
}
}
}
if (import.meta.env.DEV) console.log(`[middleware] isPublicRoute(${pathname}) = false`);
return false;
}
export const onRequest = defineMiddleware(async (context, next) => {
try {
const pathname = context.url.pathname;
// Skip auth check for static assets
const skipAuthPrefixes = ['/_astro', '/_', '/assets', '/scripts', '/favicon', '/images', '/_static'];
const shouldSkipAuth = skipAuthPrefixes.some(p => pathname.startsWith(p));
// Check if route is protected (requires auth)
const protectedConfig = getProtectedRouteConfig(pathname);
const isApiRoute = pathname.startsWith('/api/');
if (import.meta.env.DEV) console.log(`[middleware] Path: ${pathname}, Protected: ${!!protectedConfig}, SkipAuth: ${shouldSkipAuth}`);
// Always attempt auth for non-static routes to populate user info
if (!shouldSkipAuth) {
const { authenticated, user, cookies } = await checkAuth(context.request);
if (import.meta.env.DEV) console.log(`[middleware] Auth result: authenticated=${authenticated}`);
// Expose authenticated user and refreshed cookies to downstream handlers/layouts
if (authenticated && user) {
context.locals.user = user;
if (cookies && cookies.length > 0) {
context.locals.refreshedCookies = cookies;
}
}
// For protected routes, enforce authentication
if (protectedConfig && !isPublicRoute(pathname)) {
if (!authenticated) {
if (isApiRoute) {
// Return JSON 401 for API routes
return new Response(JSON.stringify({ error: 'Unauthorized', message: 'Authentication required' }), {
status: 401,
headers: { 'Content-Type': 'application/json' },
});
}
// Redirect to login with return URL
const returnUrl = encodeURIComponent(pathname + context.url.search);
if (import.meta.env.DEV) console.log(`[middleware] Auth required for ${pathname}, redirecting to login`);
return context.redirect(`/login?returnUrl=${returnUrl}`, 302);
}
// Check role-based access if roles are specified
if (protectedConfig.roles && protectedConfig.roles.length > 0) {
const userRoles = user?.roles || [];
const isAdmin = userRoles.includes('admin');
const hasRequiredRole = isAdmin || protectedConfig.roles.some(role => userRoles.includes(role));
if (!hasRequiredRole) {
if (import.meta.env.DEV) console.log(`[middleware] User lacks required role for ${pathname}`);
if (isApiRoute) {
// Return JSON 403 for API routes
return new Response(JSON.stringify({
error: 'Forbidden',
message: 'Insufficient permissions',
requiredRoles: protectedConfig.roles
}), {
status: 403,
headers: { 'Content-Type': 'application/json' },
});
}
// Store required roles in locals for the login page to access
context.locals.accessDenied = true;
context.locals.requiredRoles = protectedConfig.roles;
context.locals.returnUrl = pathname + context.url.search;
// Rewrite to login page - this renders /login but keeps the URL and locals
return context.rewrite('/login');
}
}
if (import.meta.env.DEV) console.log(`[middleware] Auth OK for ${pathname}, user: ${user?.username || user?.id || 'unknown'}`);
}
}
// Check the Host header to differentiate subdomains
// Build a headers map safely because Headers.get(':authority') throws
const headersMap = {};
for (const [k, v] of context.request.headers) {
headersMap[k.toLowerCase()] = v;
}
const hostHeader = headersMap['host'] || '';
// Node/http2 might store host as :authority (pseudo header); it appears under iteration as ':authority'
const authorityHeader = headersMap[':authority'] || '';
// Fallback to context.url.hostname if available (some environments populate it)
const urlHost = context.url?.hostname || '';
const host = (hostHeader || authorityHeader || urlHost).split(':')[0]; // normalize remove port
const requestIp = (headersMap['x-forwarded-for']?.split(',')[0]?.trim())
|| headersMap['x-real-ip']
|| headersMap['cf-connecting-ip']
|| headersMap['forwarded']?.split(';').find(kv => kv.trim().startsWith('for='))?.split('=')[1]?.replace(/"/g, '')
|| context.request.headers.get('x-client-ip')
|| 'unknown';
// Cloudflare geo data (available in production)
const cfCountry = headersMap['cf-ipcountry'] || null;
const userAgent = headersMap['user-agent'] || null;
// Debug info for incoming requests
if (import.meta.env.DEV) console.log(`[middleware] incoming: host=${hostHeader} ip=${requestIp} path=${context.url.pathname}`);
// When the host header is missing, log all headers for debugging and
// attempt to determine host from forwarded headers or a dev query header.
if (!host) {
if (import.meta.env.DEV) console.log('[middleware] WARNING: Host header missing. Dumping headers:');
for (const [k, v] of context.request.headers) {
if (import.meta.env.DEV) console.log(`[middleware] header: ${k}=${v}`);
}
}
// Determine if how the request says it wants the whitelabel
const forwardedHost = headersMap['x-forwarded-host'] || '';
const xWhitelabel = headersMap['x-whitelabel'] || '';
const forceWhitelabelQuery = context.url.searchParams.get('whitelabel');
// Make whitelabel detection dynamic based on `SUBSITES` mapping and incoming signals
// We'll detect by full host (host/forwarded/authority) or by short-name match
const subsiteHosts = Object.keys(SUBSITES || {});
const hostSubsite = getSubsiteByHost(host);
const forwardedSubsite = getSubsiteByHost(forwardedHost);
const authoritySubsite = getSubsiteByHost(authorityHeader);
const headerSignalSubsite = getSubsiteFromSignal(xWhitelabel);
const querySignalSubsite = getSubsiteFromSignal(forceWhitelabelQuery);
const wantsSubsite = Boolean(hostSubsite || forwardedSubsite || authoritySubsite || headerSignalSubsite || querySignalSubsite);
// Use central SUBSITES mapping
// import from config.js near top to ensure single source of truth
// (we import lazily here for compatibility with middleware runtime)
const subsites = SUBSITES || {};
// Check if the request matches a subsite
const subsitePath = subsites[host];
if (subsitePath) {
const skipPrefixes = ['/_astro', '/_', '/assets', '/scripts', '/favicon', '/api', '/robots.txt', '/_static'];
const shouldSkip = skipPrefixes.some((p) => context.url.pathname.startsWith(p));
if (!shouldSkip && !context.url.pathname.startsWith(subsitePath)) {
const newPath = `${subsitePath}${context.url.pathname}`;
if (import.meta.env.DEV) console.log(`[middleware] Rewriting ${host} ${context.url.pathname} -> ${newPath}`);
return context.rewrite(newPath);
}
} else {
// If the path appears to be a subsite path (like /subsites/req) but the host isn't a subsite,
// block so the main site doesn't accidentally serve that content.
const allPaths = Object.values(subsites || {});
const pathLooksLikeSubsite = allPaths.some((p) => context.url.pathname.startsWith(p));
if (pathLooksLikeSubsite) {
if (import.meta.env.DEV) console.log(`[middleware] Blocking subsite path on main domain: ${host}${context.url.pathname}`);
return new Response('Not found', { status: 404 });
}
}
// Block /subsites/req/* on main domain (codey.lol, local.codey.lol, etc)
const isMainDomain = !wantsSubsite;
if (isMainDomain && Object.values(subsites || {}).some(p => context.url.pathname.startsWith(p))) {
// Immediately return a 404 for /req on the main domain
if (Object.values(subsites || {}).includes(context.url.pathname)) {
if (import.meta.env.DEV) console.log(`[middleware] Blocking subsite root on main domain: ${hostHeader}${context.url.pathname}`);
return new Response('Not found', { status: 404 });
}
if (import.meta.env.DEV) console.log(`[middleware] Blocking subsite wildcard path on main domain: ${hostHeader}${context.url.pathname}`);
return new Response('Not found', { status: 404 });
}
// Explicitly handle the forceWhitelabelQuery to rewrite the path
if (forceWhitelabelQuery) {
const forced = getSubsiteFromSignal(forceWhitelabelQuery);
const subsitePath = forced?.path || (`/${forceWhitelabelQuery}`.startsWith('/') ? `/${forceWhitelabelQuery}` : `/${forceWhitelabelQuery}`);
if (import.meta.env.DEV) console.log(`[middleware] Forcing whitelabel via query: ${forceWhitelabelQuery} -> rewrite to ${subsitePath}${context.url.pathname}`);
context.url.pathname = `${subsitePath}${context.url.pathname}`;
}
// Pass the whitelabel value explicitly to context.locals
// set a normalized whitelabel short name if available
const chosen = querySignalSubsite?.short || headerSignalSubsite?.short || hostSubsite?.short || forwardedSubsite?.short || authoritySubsite?.short || null;
context.locals.whitelabel = chosen;
context.locals.isSubsite = Boolean(wantsSubsite);
if (import.meta.env.DEV) console.log(`[middleware] Setting context.locals.whitelabel: ${context.locals.whitelabel}`);
// Final debug: show the final pathname we hand to Astro
if (import.meta.env.DEV) console.log(`[middleware] Final pathname: ${context.url.pathname}`);
// Let Astro handle the request first
const response = await next();
// Add security headers to response
const securityHeaders = new Headers(response.headers);
// Prevent clickjacking
securityHeaders.set('X-Frame-Options', 'SAMEORIGIN');
// Prevent MIME type sniffing
securityHeaders.set('X-Content-Type-Options', 'nosniff');
// XSS protection (legacy, but still useful)
securityHeaders.set('X-XSS-Protection', '1; mode=block');
// Referrer policy - send origin only on cross-origin requests
securityHeaders.set('Referrer-Policy', 'strict-origin-when-cross-origin');
// HSTS - enforce HTTPS (only in production)
if (!import.meta.env.DEV) {
securityHeaders.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
}
// Permissions policy - restrict sensitive APIs
securityHeaders.set('Permissions-Policy', 'geolocation=(), microphone=(), camera=()');
// Content Security Policy - restrict resource loading
// Note: 'unsafe-inline' and 'unsafe-eval' needed for React/Astro hydration
// In production, consider using nonces or hashes for stricter CSP
const cspDirectives = [
"default-src 'self'",
"script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.youtube.com https://www.youtube-nocookie.com https://s.ytimg.com https://challenges.cloudflare.com https://static.cloudflareinsights.com",
// Allow Cloudflare's inline event handlers (for Turnstile/challenges)
"script-src-attr 'unsafe-inline'",
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
"font-src 'self' https://fonts.gstatic.com data:",
"img-src 'self' data: blob: https: http:",
"media-src 'self' blob: https:",
"connect-src 'self' https://api.codey.lol https://*.codey.lol https://*.audio.tidal.com wss:",
// Allow YouTube for video embeds and Cloudflare for challenges/Turnstile
"frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com https://challenges.cloudflare.com",
"object-src 'none'",
"base-uri 'self'",
"form-action 'self'",
"frame-ancestors 'self'",
"upgrade-insecure-requests",
].join('; ');
securityHeaders.set('Content-Security-Policy', cspDirectives);
// Forward any refreshed auth cookies to the client
if (context.locals.refreshedCookies && context.locals.refreshedCookies.length > 0) {
const newResponse = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: securityHeaders,
});
context.locals.refreshedCookies.forEach(cookie => {
newResponse.headers.append('set-cookie', cookie.trim());
});
// If it's a 404, redirect to home
if (newResponse.status === 404 && !context.url.pathname.startsWith('/api/')) {
if (import.meta.env.DEV) console.log(`404 redirect: ${context.url.pathname} -> /`);
return context.redirect('/', 302);
}
return newResponse;
}
// If it's a 404, redirect to home
if (response.status === 404 && !context.url.pathname.startsWith('/api/')) {
if (import.meta.env.DEV) console.log(`404 redirect: ${context.url.pathname} -> /`);
return context.redirect('/', 302);
}
// Return response with security headers
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: securityHeaders,
});
} catch (error) {
// Handle any middleware errors by redirecting to home
console.error('Middleware error:', error);
return context.redirect('/', 302);
}
});

37
src/middleware.ts
View File

@@ -2,6 +2,30 @@ import { defineMiddleware } from 'astro:middleware';
import { SUBSITES, PROTECTED_ROUTES, PUBLIC_ROUTES, type ProtectedRoute } from './config.ts'; import { SUBSITES, PROTECTED_ROUTES, PUBLIC_ROUTES, type ProtectedRoute } from './config.ts';
import { getSubsiteByHost, getSubsiteFromSignal, type SubsiteInfo } from './utils/subsites.ts'; import { getSubsiteByHost, getSubsiteFromSignal, type SubsiteInfo } from './utils/subsites.ts';
declare module 'astro' {
interface Locals {
user?: AuthUser;
refreshedCookies?: string[];
accessDenied?: boolean;
requiredRoles?: string[];
returnUrl?: string;
whitelabel?: string | null;
isSubsite?: boolean;
}
}
declare module 'astro:middleware' {
interface Locals {
user?: AuthUser;
refreshedCookies?: string[];
accessDenied?: boolean;
requiredRoles?: string[];
returnUrl?: string;
whitelabel?: string | null;
isSubsite?: boolean;
}
}
export interface AuthUser { export interface AuthUser {
id?: string; id?: string;
username?: string; username?: string;
@@ -313,9 +337,9 @@ export const onRequest = defineMiddleware(async (context, next) => {
}); });
} }
// Store required roles in locals for the login page to access // Store required roles in locals for the login page to access
context.locals.accessDenied = true; (context.locals as any).accessDenied = true;
context.locals.requiredRoles = protectedConfig.roles; (context.locals as any).requiredRoles = protectedConfig.roles;
context.locals.returnUrl = pathname + context.url.search; (context.locals as any).returnUrl = pathname + context.url.search;
// Rewrite to login page - this renders /login but keeps the URL and locals // Rewrite to login page - this renders /login but keeps the URL and locals
return context.rewrite('/login'); return context.rewrite('/login');
} }
@@ -374,8 +398,8 @@ export const onRequest = defineMiddleware(async (context, next) => {
const hostSubsite = getSubsiteByHost(host); const hostSubsite = getSubsiteByHost(host);
const forwardedSubsite = getSubsiteByHost(forwardedHost); const forwardedSubsite = getSubsiteByHost(forwardedHost);
const authoritySubsite = getSubsiteByHost(authorityHeader); const authoritySubsite = getSubsiteByHost(authorityHeader);
const headerSignalSubsite = getSubsiteFromSignal(xWhitelabel); const headerSignalSubsite = getSubsiteFromSignal(xWhitelabel || undefined);
const querySignalSubsite = getSubsiteFromSignal(forceWhitelabelQuery); const querySignalSubsite = getSubsiteFromSignal(forceWhitelabelQuery || undefined);
const wantsSubsite = Boolean(hostSubsite || forwardedSubsite || authoritySubsite || headerSignalSubsite || querySignalSubsite); const wantsSubsite = Boolean(hostSubsite || forwardedSubsite || authoritySubsite || headerSignalSubsite || querySignalSubsite);
@@ -420,7 +444,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
// Explicitly handle the forceWhitelabelQuery to rewrite the path // Explicitly handle the forceWhitelabelQuery to rewrite the path
if (forceWhitelabelQuery) { if (forceWhitelabelQuery) {
const forced = getSubsiteFromSignal(forceWhitelabelQuery); const forced = getSubsiteFromSignal(forceWhitelabelQuery || undefined);
const subsitePath = forced?.path || (`/${forceWhitelabelQuery}`.startsWith('/') ? `/${forceWhitelabelQuery}` : `/${forceWhitelabelQuery}`); const subsitePath = forced?.path || (`/${forceWhitelabelQuery}`.startsWith('/') ? `/${forceWhitelabelQuery}` : `/${forceWhitelabelQuery}`);
if (import.meta.env.DEV) console.log(`[middleware] Forcing whitelabel via query: ${forceWhitelabelQuery} -> rewrite to ${subsitePath}${context.url.pathname}`); if (import.meta.env.DEV) console.log(`[middleware] Forcing whitelabel via query: ${forceWhitelabelQuery} -> rewrite to ${subsitePath}${context.url.pathname}`);
context.url.pathname = `${subsitePath}${context.url.pathname}`; context.url.pathname = `${subsitePath}${context.url.pathname}`;
@@ -433,7 +457,6 @@ export const onRequest = defineMiddleware(async (context, next) => {
// Also make it explicit whether this request maps to a subsite (any configured SUBSITES value) // Also make it explicit whether this request maps to a subsite (any configured SUBSITES value)
// Middleware already resolved `wantsSubsite` which is true if host/forwarded/authority/header/query indicate a subsite. // Middleware already resolved `wantsSubsite` which is true if host/forwarded/authority/header/query indicate a subsite.
// Expose a simple boolean so server-rendered pages/layouts or components can opt-out of loading/hydrating // Expose a simple boolean so server-rendered pages/layouts or components can opt-out of loading/hydrating
// heavyweight subsystems (like the AudioPlayer) when the request is for a subsite.
context.locals.isSubsite = Boolean(wantsSubsite); context.locals.isSubsite = Boolean(wantsSubsite);
if (import.meta.env.DEV) console.log(`[middleware] Setting context.locals.whitelabel: ${context.locals.whitelabel}`); if (import.meta.env.DEV) console.log(`[middleware] Setting context.locals.whitelabel: ${context.locals.whitelabel}`);

4
src/pages/api/discord/cached-video.ts
View File

@@ -120,6 +120,10 @@ export async function GET({ request }: APIContext): Promise<Response> {
} }
// Partial content // Partial content
if (result.start == null || result.end == null) {
console.error('[cached-video] Missing range bounds in partial response');
return new Response('Invalid range', { status: 500 });
}
headers.set('Content-Range', `bytes ${result.start}-${result.end}/${result.total}`); headers.set('Content-Range', `bytes ${result.start}-${result.end}/${result.total}`);
headers.set('Content-Length', String(result.end - result.start + 1)); headers.set('Content-Length', String(result.end - result.start + 1));
return new Response(result.stream, { status: 206, headers }); return new Response(result.stream, { status: 206, headers });

4
src/pages/api/discord/channels.ts
View File

@@ -27,9 +27,9 @@ interface ChannelRow {
export async function GET({ request }: APIContext): Promise<Response> { export async function GET({ request }: APIContext): Promise<Response> {
// Rate limit check // Rate limit check
const rateCheck = checkRateLimit(request, { const rateCheck = checkRateLimit(request, {
limit: 20, limit: 60,
windowMs: 1000, windowMs: 1000,
burstLimit: 100, burstLimit: 240,
burstWindowMs: 10_000, burstWindowMs: 10_000,
}); });

69
src/pages/api/discord/members.ts
View File

@@ -22,7 +22,12 @@ const ADMINISTRATOR = 0x8n; // 8
* 3. Apply member-specific overwrites (allow/deny) * 3. Apply member-specific overwrites (allow/deny)
* 4. Check if VIEW_CHANNEL permission is granted * 4. Check if VIEW_CHANNEL permission is granted
*/ */
async function getChannelVisibleMembers(channelId, guildId) { interface RoleOverwrite {
allow: bigint;
deny: bigint;
}
async function getChannelVisibleMembers(channelId: string, guildId: string): Promise<Set<string>> {
// Get guild info including owner // Get guild info including owner
const guildInfo = await sql` const guildInfo = await sql`
SELECT owner_id FROM guilds WHERE guild_id = ${guildId} SELECT owner_id FROM guilds WHERE guild_id = ${guildId}
@@ -43,8 +48,8 @@ async function getChannelVisibleMembers(channelId, guildId) {
`; `;
// Build overwrite lookups // Build overwrite lookups
const roleOverwrites = new Map(); const roleOverwrites = new Map<string, RoleOverwrite>();
const memberOverwrites = new Map(); const memberOverwrites = new Map<string, RoleOverwrite>();
for (const ow of overwrites) { for (const ow of overwrites) {
const targetId = ow.target_id.toString(); const targetId = ow.target_id.toString();
const allow = BigInt(ow.allow_permissions); const allow = BigInt(ow.allow_permissions);
@@ -67,16 +72,16 @@ async function getChannelVisibleMembers(channelId, guildId) {
const allRoles = await sql` const allRoles = await sql`
SELECT role_id, permissions FROM roles WHERE guild_id = ${guildId} SELECT role_id, permissions FROM roles WHERE guild_id = ${guildId}
`; `;
const rolePermissions = new Map(); const rolePermissions = new Map<string, bigint>();
for (const role of allRoles) { for (const role of allRoles) {
rolePermissions.set(role.role_id.toString(), BigInt(role.permissions || 0)); rolePermissions.set(role.role_id.toString(), BigInt(role.permissions || 0));
} }
const visibleMemberIds = new Set(); const visibleMemberIds = new Set<string>();
for (const member of members) { for (const member of members) {
const userId = member.user_id.toString(); const userId = member.user_id.toString();
const memberRoles = (member.roles || []).map(r => r.toString()); const memberRoles = (member.roles || []).map((r: bigint | string) => r.toString());
// Owner always has access // Owner always has access
if (ownerId && member.user_id.toString() === ownerId.toString()) { if (ownerId && member.user_id.toString() === ownerId.toString()) {
@@ -138,9 +143,9 @@ async function getChannelVisibleMembers(channelId, guildId) {
export async function GET({ request }) { export async function GET({ request }) {
// Rate limit check // Rate limit check
const rateCheck = checkRateLimit(request, { const rateCheck = checkRateLimit(request, {
limit: 20, limit: 80,
windowMs: 1000, windowMs: 1000,
burstLimit: 100, burstLimit: 320,
burstWindowMs: 10_000, burstWindowMs: 10_000,
}); });
@@ -187,7 +192,7 @@ export async function GET({ request }) {
} }
// If channelId provided, get visible members for that channel // If channelId provided, get visible members for that channel
let visibleMemberIds = null; let visibleMemberIds: Set<string> | null = null;
if (channelId) { if (channelId) {
visibleMemberIds = await getChannelVisibleMembers(channelId, guildId); visibleMemberIds = await getChannelVisibleMembers(channelId, guildId);
} }
@@ -226,14 +231,22 @@ export async function GET({ request }) {
`; `;
// Create role lookup map // Create role lookup map
const roleMap = {}; interface RoleInfo {
id: string;
name: string;
color: string | null;
position: number;
hoist: boolean;
}
const roleMap: Record<string, RoleInfo> = {};
roles.forEach(role => { roles.forEach(role => {
roleMap[role.role_id.toString()] = { roleMap[role.role_id.toString()] = {
id: role.role_id.toString(), id: role.role_id.toString(),
name: role.name, name: role.name,
color: role.color ? `#${role.color.toString(16).padStart(6, '0')}` : null, color: role.color ? `#${Number(role.color).toString(16).padStart(6, '0')}` : null,
position: role.position, position: Number(role.position ?? 0),
hoist: role.hoist, // "hoist" means the role is displayed separately in member list hoist: Boolean(role.hoist), // "hoist" means the role is displayed separately in member list
}; };
}); });
@@ -243,11 +256,24 @@ export async function GET({ request }) {
: members; : members;
// Format members with their highest role for color // Format members with their highest role for color
const formattedMembers = filteredMembers.map(member => { interface FormattedMember {
const memberRoles = (member.roles || []).map(r => r.toString()); id: string;
username: string;
displayName: string;
avatar: string | null;
isBot: boolean;
color: string | null;
primaryRoleId: string | null;
primaryRoleName: string | null;
roles: string[];
}
const formattedMembers: FormattedMember[] = filteredMembers.map(member => {
const memberRoles = (member.roles || []).map((r: bigint | string) => r.toString());
// Find highest positioned role with color for display // Find highest positioned role with color for display
let displayRole = null; let displayRole: RoleInfo | null = null;
let displayRoleColor: string | null = null;
let highestPosition = -1; let highestPosition = -1;
memberRoles.forEach(roleId => { memberRoles.forEach(roleId => {
@@ -256,6 +282,7 @@ export async function GET({ request }) {
highestPosition = role.position; highestPosition = role.position;
if (role.color && role.color !== '#000000') { if (role.color && role.color !== '#000000') {
displayRole = role; displayRole = role;
displayRoleColor = role.color;
} }
} }
}); });
@@ -263,7 +290,7 @@ export async function GET({ request }) {
// Find all hoisted roles for grouping // Find all hoisted roles for grouping
const hoistedRoles = memberRoles const hoistedRoles = memberRoles
.map(rid => roleMap[rid]) .map(rid => roleMap[rid])
.filter(r => r && r.hoist) .filter((r): r is RoleInfo => Boolean(r && r.hoist))
.sort((a, b) => b.position - a.position); .sort((a, b) => b.position - a.position);
const primaryRole = hoistedRoles[0] || displayRole || null; const primaryRole = hoistedRoles[0] || displayRole || null;
@@ -284,7 +311,7 @@ export async function GET({ request }) {
displayName: member.nickname || member.global_name || member.username, displayName: member.nickname || member.global_name || member.username,
avatar: avatarUrl, avatar: avatarUrl,
isBot: member.is_bot || false, isBot: member.is_bot || false,
color: displayRole?.color || null, color: displayRoleColor,
primaryRoleId: primaryRole?.id || null, primaryRoleId: primaryRole?.id || null,
primaryRoleName: primaryRole?.name || null, primaryRoleName: primaryRole?.name || null,
roles: memberRoles, roles: memberRoles,
@@ -292,8 +319,8 @@ export async function GET({ request }) {
}); });
// Group members by their primary (highest hoisted) role // Group members by their primary (highest hoisted) role
const membersByRole = {}; const membersByRole: Record<string, { role: RoleInfo; members: FormattedMember[] }> = {};
const noRoleMembers = []; const noRoleMembers: FormattedMember[] = [];
formattedMembers.forEach(member => { formattedMembers.forEach(member => {
if (member.primaryRoleId) { if (member.primaryRoleId) {
@@ -316,7 +343,7 @@ export async function GET({ request }) {
// Add "Online" or default group for members without hoisted roles // Add "Online" or default group for members without hoisted roles
if (noRoleMembers.length > 0) { if (noRoleMembers.length > 0) {
sortedGroups.push({ sortedGroups.push({
role: { id: 'none', name: 'Members', color: null, position: -1 }, role: { id: 'none', name: 'Members', color: null, position: -1, hoist: false },
members: noRoleMembers, members: noRoleMembers,
}); });
} }

6
src/pages/api/discord/messages.ts
View File

@@ -99,9 +99,9 @@ function getSafeImageUrl(originalUrl: string | null, baseUrl: string): string |
export async function GET({ request }: APIContext) { export async function GET({ request }: APIContext) {
// Rate limit check // Rate limit check
const rateCheck = checkRateLimit(request, { const rateCheck = checkRateLimit(request, {
limit: 30, limit: 100,
windowMs: 1000, windowMs: 1000,
burstLimit: 150, burstLimit: 400,
burstWindowMs: 10_000, burstWindowMs: 10_000,
}); });
@@ -920,7 +920,7 @@ export async function GET({ request }: APIContext) {
} }
const ext = stickerExtensions[sticker.format_type] || 'png'; const ext = stickerExtensions[sticker.format_type] || 'png';
// Use cached sticker image if available, otherwise fall back to Discord CDN // Use cached sticker image if available, otherwise fall back to Discord CDN
let stickerUrl = null; let stickerUrl: string | null = null;
if (sticker.cached_image_id) { if (sticker.cached_image_id) {
const sig = signImageId(sticker.cached_image_id); const sig = signImageId(sticker.cached_image_id);
stickerUrl = `${baseUrl}/api/discord/cached-image?id=${sticker.cached_image_id}&sig=${sig}`; stickerUrl = `${baseUrl}/api/discord/cached-image?id=${sticker.cached_image_id}&sig=${sig}`;

27
src/pages/api/discord/search.ts
View File

@@ -182,7 +182,20 @@ export async function GET({ request }) {
LEFT JOIN video_cache vc ON a.cached_video_id = vc.video_id LEFT JOIN video_cache vc ON a.cached_video_id = vc.video_id
WHERE a.message_id = ANY(${messageIds}) WHERE a.message_id = ANY(${messageIds})
ORDER BY a.attachment_id ORDER BY a.attachment_id
`; ` as unknown as Array<{
message_id: string;
attachment_id: string;
filename: string | null;
url: string;
proxy_url: string | null;
content_type: string | null;
size: number | null;
width: number | null;
height: number | null;
cached_image_id: number | null;
cached_video_id: number | null;
video_file_path: string | null;
}>;
// Fetch cached video URLs for video attachments // Fetch cached video URLs for video attachments
const videoUrls = attachments const videoUrls = attachments
@@ -193,9 +206,9 @@ export async function GET({ request }) {
SELECT source_url, video_id SELECT source_url, video_id
FROM video_cache FROM video_cache
WHERE source_url = ANY(${videoUrls}) WHERE source_url = ANY(${videoUrls})
` : []; ` as unknown as Array<{ source_url: string; video_id: number }> : [];
const videoCacheMap = {}; const videoCacheMap: Record<string, number> = {};
cachedVideos.forEach(v => { cachedVideos.forEach(v => {
videoCacheMap[v.source_url] = v.video_id; videoCacheMap[v.source_url] = v.video_id;
}); });
@@ -234,7 +247,13 @@ export async function GET({ request }) {
.filter(m => m.reference_message_id) .filter(m => m.reference_message_id)
.map(m => m.reference_message_id); .map(m => m.reference_message_id);
let referencedMessages = []; let referencedMessages: Array<{
message_id: string;
content: string;
author_id: string;
author_username: string;
author_display_name: string;
}> = [];
if (referencedIds.length > 0) { if (referencedIds.length > 0) {
referencedMessages = await sql` referencedMessages = await sql`
SELECT SELECT

3
src/pages/api/image-proxy.ts
View File

@@ -263,7 +263,8 @@ export async function GET({ request }) {
return proxyResponse; return proxyResponse;
} catch (err) { } catch (err) {
console.error('[image-proxy] Error fetching image:', err.message); const message = err instanceof Error ? err.message : String(err);
console.error('[image-proxy] Error fetching image:', message);
return new Response('Failed to fetch image', { status: 500 }); return new Response('Failed to fetch image', { status: 500 });
} }
} }

12
src/pages/api/link-preview.ts
View File

@@ -24,6 +24,7 @@ interface LinkPreviewMeta {
type: string | null; type: string | null;
video: string | null; video: string | null;
themeColor: string | null; themeColor: string | null;
trusted: boolean;
} }
// Trusted domains that can be loaded client-side // Trusted domains that can be loaded client-side
@@ -73,6 +74,7 @@ function parseMetaTags(html: string, url: string): LinkPreviewMeta {
type: null, type: null,
video: null, video: null,
themeColor: null, themeColor: null,
trusted: false,
}; };
const decode = str => str?.replace(/&(#(?:x[0-9a-fA-F]+|\d+)|[a-zA-Z]+);/g, const decode = str => str?.replace(/&(#(?:x[0-9a-fA-F]+|\d+)|[a-zA-Z]+);/g,
@@ -253,6 +255,13 @@ export async function GET({ request }) {
} }
// Read first 50KB // Read first 50KB
if (!response.body) {
return new Response(JSON.stringify({ error: 'Empty response body' }), {
status: 502,
headers: { 'Content-Type': 'application/json' },
});
}
const reader = response.body.getReader(); const reader = response.body.getReader();
let html = ''; let html = '';
let bytesRead = 0; let bytesRead = 0;
@@ -281,7 +290,8 @@ export async function GET({ request }) {
return resp; return resp;
} catch (err) { } catch (err) {
console.error('[link-preview] Error fetching URL:', err.message); const message = err instanceof Error ? err.message : String(err);
console.error('[link-preview] Error fetching URL:', message);
// Don't expose internal error details to client // Don't expose internal error details to client
return new Response(JSON.stringify({ error: 'Failed to fetch preview' }), { return new Response(JSON.stringify({ error: 'Failed to fetch preview' }), {
status: 500, status: 500,

2
src/pages/api/search.ts
View File

@@ -30,7 +30,7 @@ interface SearchSuggestion {
export async function GET({ request }: APIContext): Promise<Response> { export async function GET({ request }: APIContext): Promise<Response> {
const host = request.headers.get('host'); const host = request.headers.get('host');
const subsite = getSubsiteByHost(host); const subsite = getSubsiteByHost(host || undefined);
if (!subsite || subsite.short !== 'req') { if (!subsite || subsite.short !== 'req') {
return new Response('Not found', { status: 404 }); return new Response('Not found', { status: 404 });

2
src/pages/lighting.astro
View File

@@ -7,7 +7,7 @@ import Root from "@/components/AppLayout.jsx";
const user = Astro.locals.user as any; const user = Astro.locals.user as any;
--- ---
<Base> <Base title="Lighting">
<section class="page-section"> <section class="page-section">
<Root child="Lighting" user?={user} client:only="react" /> <Root child="Lighting" user?={user} client:only="react" />
</section> </section>

2
src/pages/login.astro
View File

@@ -9,7 +9,7 @@ const accessDenied = Astro.locals.accessDenied || false;
const requiredRoles = Astro.locals.requiredRoles || []; const requiredRoles = Astro.locals.requiredRoles || [];
--- ---
<Base> <Base title="Login">
<section class="page-section"> <section class="page-section">
<Root child="LoginPage" loggedIn={isLoggedIn} accessDenied={accessDenied} requiredRoles={requiredRoles} client:only="react" /> <Root child="LoginPage" loggedIn={isLoggedIn} accessDenied={accessDenied} requiredRoles={requiredRoles} client:only="react" />
</section> </section>

2
src/pages/memes.astro
View File

@@ -4,7 +4,7 @@ import Root from "../components/AppLayout.jsx";
import "@styles/MemeGrid.css"; import "@styles/MemeGrid.css";
--- ---
<Base hideFooter> <Base hideFooter title="Memes">
<section class="page-section"> <section class="page-section">
<Root child="Memes" client:only="react" /> <Root child="Memes" client:only="react" />
</section> </section>

2
src/utils/apiAuth.ts
View File

@@ -76,7 +76,7 @@ export async function requireApiAuth(request: Request): Promise<AuthResult> {
} }
clearTimeout(timeout); clearTimeout(timeout);
let newSetCookieHeader = null; let newSetCookieHeader: string[] | null = null;
// If unauthorized, try to refresh the token // If unauthorized, try to refresh the token
if (res.status === 401) { if (res.status === 401) {

2
src/utils/db.ts
View File

@@ -5,7 +5,7 @@ import postgres from 'postgres';
import type { Sql } from 'postgres'; import type { Sql } from 'postgres';
// Database connection configuration // Database connection configuration
const sql: Sql = postgres({ const sql: Sql<any> = postgres({
host: import.meta.env.DISCORD_DB_HOST || 'localhost', host: import.meta.env.DISCORD_DB_HOST || 'localhost',
port: parseInt(import.meta.env.DISCORD_DB_PORT || '5432', 10), port: parseInt(import.meta.env.DISCORD_DB_PORT || '5432', 10),
database: import.meta.env.DISCORD_DB_NAME || 'discord', database: import.meta.env.DISCORD_DB_NAME || 'discord',

2
src/utils/subsites.ts
View File

@@ -1,4 +1,4 @@
import { SUBSITES, WHITELABELS, WhitelabelConfig } from '../config.ts'; import { SUBSITES, WHITELABELS, type WhitelabelConfig } from '../config.ts';
export interface SubsiteInfo { export interface SubsiteInfo {
host: string; host: string;