misc

src/components/AppLayout.jsx

@@ -7,6 +7,7 @@ import { usePrimeReactThemeSwitcher } from '@/hooks/usePrimeReactThemeSwitcher.j
 import CustomToastContainer from '../components/ToastProvider.jsx';
 import 'primereact/resources/themes/bootstrap4-light-blue/theme.css';
 import 'primereact/resources/primereact.min.css';
+import "primeicons/primeicons.css";
 
 const LoginPage = lazy(() => import('./Login.jsx'));
 const LyricSearch = lazy(() => import('./LyricSearch'));
@@ -14,7 +15,7 @@ const MediaRequestForm = lazy(() => import('./TRip/MediaRequestForm.jsx'));
 const RequestManagement = lazy(() => import('./TRip/RequestManagement.jsx'));
 const Player = lazy(() => import('./AudioPlayer.jsx'));
 
-export default function Root({ child }) {
+export default function Root({ child, user = undefined }) {
   window.toast = toast;
   const theme = document.documentElement.getAttribute("data-theme")
   usePrimeReactThemeSwitcher(theme);
@@ -34,7 +35,7 @@ export default function Root({ child }) {
         </Alert> */}
         {child == "LoginPage" && (<LoginPage client:only="react" />)}
         {child == "LyricSearch" && (<LyricSearch client:only="react" />)}
-        {child == "Player" && (<Player client:only="react" />)}
+        {child == "Player" && (<Player client:only="react" user={user} />)}
         {child == "Memes" && <Memes client:only="react" />}
         {child == "qs2.MediaRequestForm" && <MediaRequestForm client:only="react" />}
         {child == "qs2.RequestManagement" && <RequestManagement client:only="react" />}

src/components/AudioPlayer.jsx

@@ -5,6 +5,7 @@ import Pause from "@mui/icons-material/Pause";
 import "@styles/player.css";
 
 import { API_URL } from "@/config";
+import { requireAuthHook } from "@/hooks/requireAuthHook";
 
 const STATIONS = {
   main: { label: "Main" },
@@ -14,7 +15,8 @@ const STATIONS = {
   pop: { label: "Pop" },
 };
 
-export default function Player() {
+
+export default function Player({ user }) {
   const [activeStation, setActiveStation] = useState("main");
   const [isPlaying, setIsPlaying] = useState(false);
   const [trackTitle, setTrackTitle] = useState("");
@@ -270,7 +272,8 @@ export default function Player() {
         ))}
       </div>
       <div className="c-containter">
-        <div className="music-container mt-8">
+        {user ? <span>Hello, {user.user}</span> : <span>Not logged in</span>}
+        < div className="music-container mt-8">
           <section className="album-cover">
             <div className="music-player__album" title="Album">
               {trackAlbum}
@@ -328,7 +331,7 @@ export default function Player() {
           </section>
         </div>
         <audio ref={audioElement} preload="none" />
-      </div>
+      </div >
     </>
   );
 }

src/components/TRip/MediaRequestForm.jsx

@@ -268,7 +268,7 @@ export default function MediaRequestForm() {
         if (albumsToFetch.length === 0) return;
 
         const fetchTracksSequentially = async () => {
-            const minDelay = 500; // ms between API requests
+            const minDelay = 650; // ms between API requests
             setIsFetching(true);
 
             const totalAlbums = albumsToFetch.length;

src/components/TRip/RequestManagement.jsx

@@ -308,38 +308,56 @@ export default function RequestManagement() {
           emptyMessage="No requests found."
           onRowClick={handleRowClick}
         >
-          <Column field="id" header="ID" style={{ width: "8rem" }} body={(row) => textWithEllipsis(row.id, "6rem")} />
+
+          <Column
+            field="id"
+            header="ID"
+            style={{ width: "6rem" }}
+            body={(row) => (
+              <span title={row.id}>
+                {row.id.split("-").slice(-1)[0]}
+              </span>
+            )}
+          />
           <Column field="target" header="Target" sortable style={{ width: "12rem" }} body={(row) => textWithEllipsis(row.target, "10rem")} />
           <Column field="tracks" header="# Tracks" style={{ width: "8rem" }} body={(row) => row.tracks} />
           <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: "10rem", textAlign: "center" }} sortable />
           <Column field="progress" header="Progress" body={(row) => formatProgress(row.progress)} style={{ width: "8rem", textAlign: "center" }} sortable />
-          <Column
-            field="tarball"
-            header="Tarball"
-            body={(row) => {
-              const url = tarballUrl(row.tarball, row.quality || "FLAC");
-              return url ? (
-                <a
-                  href={url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-500 hover:underline truncate block"
-                  title={url.split("/").pop()}
-                >
-                  {truncate(url.split("/").pop(), 16)}
-                </a>
-              ) : (
-                "—"
-              );
-            }}
-            style={{ width: "10rem" }}
-          />
           <Column
             field="quality"
             header="Quality"
             body={qualityBodyTemplate}
             style={{ width: "6rem", textAlign: "center" }}
             sortable />
+          <Column
+            field="tarball"
+            header={
+              <span className="flex items-center">
+                <i className="pi pi-download mr-1" /> {/* download icon in header */}
+                Tarball
+              </span>
+            }
+            body={(row) => {
+              const url = tarballUrl(row.tarball, row.quality || "FLAC");
+              const encodedURL = encodeURI(url);
+              if (!url) return "—";
+
+              const fileName = url.split("/").pop();
+
+              return (
+                <a
+                  href={encodedURL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="truncate text-blue-500 hover:underline"
+                  title={fileName}
+                >
+                  {truncate(fileName, 16)}
+                </a>
+              );
+            }}
+            style={{ width: "10rem" }}
+          />
         </DataTable>
       </div>
 
@@ -402,7 +420,7 @@ export default function RequestManagement() {
                   <p>
                     <strong>Tarball:</strong>{" "}
                     <a
-                      href={tarballUrl(selectedRequest.tarball, selectedRequest.quality)}
+                      href={encodeURI(tarballUrl(selectedRequest.tarball, selectedRequest.quality))}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="text-blue-500 hover:underline"

src/layouts/Nav.astro

@@ -9,7 +9,7 @@ const navItems = [
   { label: "Memes", href: "/memes" },
   { label: "TRip", href: "/TRip", auth: true },
   { label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
-  { label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
+  // { label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
 ];
 
 

src/pages/radio.astro

@@ -1,13 +1,13 @@
 ---
 import Base from "../layouts/Base.astro";
 import Root from "../components/AppLayout.jsx";
-import "@styles/player.css";
+import { requireAuthHook } from "@/hooks/requireAuthHook";
+const user = await requireAuthHook(Astro);
 ---
-
 <Base>
   <section>
   <div class="prose prose-neutral dark:prose-invert">
-  <Root child="Player" client:only="react">
+  <Root child="Player" user={user} client:only="react">
   </Root>
   </section>
 </Base>