misc
This commit is contained in:
@@ -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" }}>
|
||||
|
||||
Reference in New Issue
Block a user