This commit is contained in:
2025-12-17 13:33:31 -05:00
parent e18aa3f42c
commit c49bfe5a3d
38 changed files with 2436 additions and 436 deletions

View File

@@ -1,9 +1,9 @@
import React, { useState, useEffect, useRef, Suspense, lazy, useMemo, useCallback } from "react";
import "@styles/player.css";
import "@/components/TRip/RequestManagement.css";
import { metaData } from "../config";
import Play from "@mui/icons-material/PlayArrow";
import Pause from "@mui/icons-material/Pause";
import "@styles/player.css";
import { Dialog } from "primereact/dialog";
import { AutoComplete } from "primereact/autocomplete";
import { DataTable } from "primereact/datatable";
@@ -14,30 +14,7 @@ import { API_URL } from "@/config";
import { authFetch } from "@/utils/authFetch";
import { requireAuthHook } from "@/hooks/requireAuthHook";
import { useHtmlThemeAttr } from "@/hooks/useHtmlThemeAttr";
import "@/components/TRip/RequestManagement.css";
// Custom styles for paginator
const paginatorStyles = `
.queue-paginator .p-paginator-current {
background: transparent !important;
color: inherit !important;
border: none !important;
}
.dark .queue-paginator .p-paginator-current {
color: rgb(212 212 212) !important;
background: transparent !important;
}
.queue-paginator .p-paginator-bottom {
padding: 16px !important;
border-top: 1px solid rgb(229 229 229) !important;
}
.dark .queue-paginator .p-paginator-bottom {
border-top-color: rgb(82 82 82) !important;
}
`;
const STATIONS = {
main: { label: "Main" },
@@ -49,16 +26,7 @@ const STATIONS = {
export default function Player({ user }) {
// Inject custom paginator styles
useEffect(() => {
const styleId = 'queue-paginator-styles';
if (!document.getElementById(styleId)) {
const style = document.createElement('style');
style.id = styleId;
style.textContent = paginatorStyles;
document.head.appendChild(style);
}
}, []);
// Global CSS now contains the paginator / dialog datatable dark rules.
const [isQueueVisible, setQueueVisible] = useState(false);
// Mouse wheel scroll fix for queue modal
@@ -749,7 +717,7 @@ export default function Player({ user }) {
<div className="music-time flex justify-between items-center mt-4">
<p className="music-time__current text-sm">{formatTime(elapsedTime)}</p>
<p className="music-time__last text-sm">-{formatTime(trackDuration - elapsedTime)}</p>
<p className="music-time__last text-sm">- {formatTime(trackDuration - elapsedTime)}</p>
</div>
<div className="progress-bar-container w-full h-2 rounded bg-neutral-300 dark:bg-neutral-700 overflow-hidden">
@@ -870,7 +838,8 @@ export default function Player({ user }) {
style={{ width: "80vw", maxWidth: "1200px", height: "auto", maxHeight: "90vh" }}
footer={queueFooter}
onHide={() => setQueueVisible(false)}
className={theme === "dark" ? "dark-theme" : "light-theme"}
// Use the same dark class used by other dialog styles (CSS escapes the colon)
className={theme === "dark" ? "dark:bg-neutral-900" : "light-theme"}
dismissableMask={true}
>
<div style={{ maxHeight: "calc(90vh - 100px)", overflow: "visible" }}>