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

feat: subsites

Browse Source
This commit is contained in:
codey
2025-11-28 09:40:13 -05:00
parent d8d6c5ec21
commit ee33b86fe7
11 changed files with 65 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/AppLayout.jsx
View File

@@ -30,11 +30,10 @@ export default function Root({ child, user = undefined, ...props }) {
// runtime flag `window.__IS_SUBSITE` from the server layout so pages
// don't need to pass guards.
const isSubsite = typeof document !== 'undefined' && document.documentElement.getAttribute('data-subsite') === 'true';
// Helpful runtime debugging: only log when child changes so we don't spam
// the console on every render. Use an effect so output is stable.
// Log when the active child changes (DEV only)
useEffect(() => {
try {
if (typeof console !== 'undefined' && typeof document !== 'undefined') {
if (typeof console !== 'undefined' && typeof document !== 'undefined' && import.meta.env.DEV) {
console.debug(`[AppLayout] child=${String(child)}, data-subsite=${document.documentElement.getAttribute('data-subsite')}`);
}
} catch (e) {
@@ -58,13 +57,13 @@ export default function Root({ child, user = undefined, ...props }) {
useEffect(() => {
let mounted = true;
if (wantPlayer) {
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')
.then((mod) => {
if (!mounted) return;
// set the component factory
setPlayerComp(() => mod.default ?? null);
try { console.debug('[AppLayout] AudioPlayer import succeeded'); } catch (e) { }
if (import.meta.env.DEV) { try { console.debug('[AppLayout] AudioPlayer import succeeded'); } catch (e) { } }
})
.catch((err) => {
console.error('[AppLayout] AudioPlayer import failed', err);
@@ -94,7 +93,7 @@ export default function Root({ child, user = undefined, ...props }) {
{child == "LoginPage" && (<LoginPage {...props} loggedIn={loggedIn} />)}
{child == "LyricSearch" && (<LyricSearch {...props} client:only="react" />)}
{child == "Player" && !isSubsite && PlayerComp && (
<Suspense fallback={<div data-testid="player-fallback" className="p-4 text-center">Loading player...</div>}>
<Suspense fallback={null}>
<PlayerComp client:only="react" user={user} />
</Suspense>
)}

31
src/components/AudioPlayer.jsx
View File

@@ -1,11 +1,9 @@
import React, { useState, useEffect, useRef, Suspense, lazy, useMemo, useCallback } from "react";
import "@styles/player.css";
import { metaData } from "../config";
import Play from "@mui/icons-material/PlayArrow";
import Pause from "@mui/icons-material/Pause";
// Load AudioPlayer CSS at runtime only when the player mounts on the client.
// This avoids including the stylesheet in pages where the AudioPlayer never
// gets loaded (subsidiary/whitelabel sites). We dynamically import the
// stylesheet inside a client-only effect below.
import "@styles/player.css";
import { Dialog } from "primereact/dialog";
import { AutoComplete } from "primereact/autocomplete";
import { DataTable } from "primereact/datatable";
@@ -51,31 +49,6 @@ const STATIONS = {
export default function Player({ user }) {
// Log lifecycle so we can confirm the player mounted in the browser
useEffect(() => {
// Load the player stylesheet from /public/styles/player.css so it will be
// requested at runtime only when the AudioPlayer mounts. This prevents the
// CSS from being included as a route asset for subsites.
try {
if (typeof window !== 'undefined') {
if (!document.getElementById('audio-player-css')) {
const link = document.createElement('link');
link.id = 'audio-player-css';
link.rel = 'stylesheet';
link.href = '/styles/player.css';
link.onload = () => { try { console.debug('[AudioPlayer] CSS loaded (link)'); } catch (e) { } };
link.onerror = (err) => { console.warn('[AudioPlayer] CSS link failed', err); };
document.head.appendChild(link);
}
}
} catch (e) {
// ignore
}
try { console.debug('[AudioPlayer] mounted'); } catch (e) { }
return () => {
try { console.debug('[AudioPlayer] unmounted'); } catch (e) { }
};
}, []);
// Inject custom paginator styles
useEffect(() => {
const styleId = 'queue-paginator-styles';

2
src/components/BaseHead.astro
View File

@@ -20,7 +20,7 @@ const trimmedTitle = title?.trim();
const seoTitle = trimmedTitle || metaData.title;
const shareTitle = isWhitelabel ? (trimmedTitle || (metaData.shareTitle ?? metaData.title)) : (trimmedTitle ? `${trimmedTitle} | ${metaData.title}` : (metaData.shareTitle ?? metaData.title));
const seoTitleTemplate = isWhitelabel ? "%s" : (trimmedTitle ? `%s | ${metaData.title}` : "%s");
const shareDescription = description ?? metaData.shareDescription ?? metaData.description;
const shareDescription = isWhitelabel ? "%s" : (description ?? metaData.shareDescription ?? metaData.description);
const canonicalUrl = url?.href ?? metaData.baseUrl;
const shareImage = new URL(image ?? metaData.ogImage, metaData.baseUrl).toString();
const shareImageAlt = metaData.shareImageAlt ?? metaData.shareTitle ?? metaData.title;

4
src/components/Lighting.jsx
View File

@@ -27,7 +27,7 @@ export default function Lighting() {
}, []);
const handleColorChange = (color) => {
console.log('Handle color change:', color);
if (import.meta.env.DEV) console.debug('Handle color change:', color);
const { r, g, b } = color.rgb;
updateLighting({
...state,
@@ -128,7 +128,7 @@ export default function Lighting() {
s / 100, // saturation: 0-100 -> 0-1
(v ?? 100) / 100 // value: 0-100 -> 0-1, default to 1 if undefined
);
console.log('Converting color:', color.hsva, 'to RGB:', rgb);
if (import.meta.env.DEV) console.debug('Converting color:', color.hsva, 'to RGB:', rgb);
updateLighting({
...state,
red: rgb.red,

5
src/components/req/ReqForm.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import { toast } from "react-toastify";
import { Button } from "@mui/joy";
import { Dropdown } from "primereact/dropdown/dropdown.esm.js";
// Dropdown not used in this form; removed to avoid unused-import warnings
import { AutoComplete } from "primereact/autocomplete/autocomplete.esm.js";
import { InputText } from "primereact/inputtext/inputtext.esm.js";
@@ -133,7 +133,8 @@ export default function ReqForm() {
if (e.value.year) setYear(e.value.year);
setSelectedOverview(e.value.overview || "");
}}
placeholder="Enter movie or TV show title"
placeholder="Enter movie or TV title"
title="Enter movie or TV show title"
className="w-full"
inputClassName="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-4 py-3 focus:border-[#12f8f4] transition-colors"
panelClassName="border-2 border-gray-200 dark:border-gray-600 rounded-xl"