- {alertVisible && (
- setAlertVisible(false)}
- sx={{ mb: 2 }}
+
+ setValue(e.target.value)}
+ onKeyDown={handleKeyDown}
+ onShow={handlePanelShow}
+ placeholder={placeholder}
+ autoFocus
+ style={{ width: '100%', maxWidth: '900px' }}
+ inputStyle={{ width: '100%' }}
+ className={`lyric-search-input ${inputStatus === "error" ? "has-error" : ""} ${inputStatus === "ready" ? "has-ready" : ""}`}
+ aria-invalid={inputStatus === "error"}
+ aria-label={`Lyric search input. ${statusTitle}`}
+ aria-controls="lyric-search-input"
+ />
+
+
+ {statusTitle}
+
+
@@ -272,10 +363,50 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
{lyricsResult && (
-
- 
+
+
diff --git a/src/components/Memes.jsx b/src/components/Memes.jsx
index 63e7c47..dd6efe9 100644
--- a/src/components/Memes.jsx
+++ b/src/components/Memes.jsx
@@ -2,6 +2,9 @@ import { useEffect, useState, useRef, useCallback } from "react";
import { ProgressSpinner } from 'primereact/progressspinner';
import { Dialog } from 'primereact/dialog';
import { Image } from 'primereact/image';
+import IconButton from '@mui/joy/IconButton';
+import FileCopyRoundedIcon from '@mui/icons-material/FileCopyRounded';
+import { toast } from 'react-toastify';
import { API_URL } from '../config';
const MEME_API_URL = `${API_URL}/memes/list_memes`;
@@ -13,10 +16,77 @@ const Memes = () => {
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
const [selectedImage, setSelectedImage] = useState(null);
+ const [selectedIndex, setSelectedIndex] = useState(-1);
const observerRef = useRef();
const theme = document.documentElement.getAttribute("data-theme")
+ const cacheRef = useRef({ pagesLoaded: new Set(), items: [] });
+
+ const prefetchImage = useCallback((img) => {
+ if (!img || typeof window === "undefined") return;
+ const preload = new window.Image();
+ preload.src = img.url;
+ }, []);
+
+ const handleNavigate = useCallback((direction) => {
+ setSelectedIndex((prev) => {
+ const newIndex = prev + direction;
+ if (newIndex < 0 || newIndex >= images.length) {
+ return prev;
+ }
+ const nextImage = images[newIndex];
+ setSelectedImage(nextImage);
+ prefetchImage(images[newIndex + 1]);
+ return newIndex;
+ });
+ }, [images, prefetchImage]);
+
+ useEffect(() => {
+ if (!selectedImage) {
+ return;
+ }
+ const handleKeyDown = (event) => {
+ if (event.key === 'ArrowLeft') {
+ event.preventDefault();
+ handleNavigate(-1);
+ } else if (event.key === 'ArrowRight') {
+ event.preventDefault();
+ handleNavigate(1);
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [selectedImage, handleNavigate]);
+ useEffect(() => {
+ const cached = sessionStorage.getItem("memes-cache");
+ if (cached) {
+ try {
+ const parsed = JSON.parse(cached);
+ cacheRef.current = {
+ pagesLoaded: new Set(parsed.pagesLoaded || []),
+ items: parsed.items || [],
+ };
+ setImages(parsed.items || []);
+ setPage(parsed.nextPage || 1);
+ setHasMore(parsed.hasMore ?? true);
+ } catch (e) {
+ console.warn("Failed to parse meme cache", e);
+ }
+ }
+ }, []);
+ const persistCache = useCallback((nextPage) => {
+ sessionStorage.setItem("memes-cache", JSON.stringify({
+ items: cacheRef.current.items,
+ pagesLoaded: Array.from(cacheRef.current.pagesLoaded),
+ nextPage,
+ hasMore,
+ }));
+ }, [hasMore]);
+
const loadImages = async (pageNum, attempt = 0) => {
- if (loading || !hasMore) return;
+ if (loading || !hasMore || cacheRef.current.pagesLoaded.has(pageNum)) return;
setLoading(true);
try {
const res = await fetch(`${MEME_API_URL}?page=${pageNum}`);
@@ -47,8 +117,14 @@ const Memes = () => {
url: `${BASE_IMAGE_URL}/${m.id}.png`,
}));
- setImages(prev => [...prev, ...imageObjects]);
- setPage(prev => prev + 1);
+ cacheRef.current.pagesLoaded.add(pageNum);
+ cacheRef.current.items = [...cacheRef.current.items, ...imageObjects];
+ setImages(cacheRef.current.items);
+ setPage(prev => {
+ const next = prev + 1;
+ persistCache(next);
+ return next;
+ });
} catch (e) {
console.error("Failed to load memes", e);
toast.error("Failed to load more memes.");
@@ -69,9 +145,37 @@ const Memes = () => {
}, [loading, hasMore, page]);
useEffect(() => {
- loadImages(1);
+ if (!cacheRef.current.pagesLoaded.size) {
+ loadImages(1);
+ }
}, []);
+ const canGoPrev = selectedIndex > 0;
+ const canGoNext = selectedIndex >= 0 && selectedIndex < images.length - 1;
+
+ const closeDialog = useCallback(() => {
+ setSelectedImage(null);
+ setSelectedIndex(-1);
+ }, []);
+
+ const handleCopyImage = useCallback(async () => {
+ if (!selectedImage) return;
+ try {
+ const res = await fetch(selectedImage.url, { mode: "cors" });
+ const blob = await res.blob();
+ if (!navigator.clipboard?.write) {
+ throw new Error("Clipboard API not available");
+ }
+ await navigator.clipboard.write([
+ new window.ClipboardItem({ [blob.type || "image/png"]: blob })
+ ]);
+ toast.success("Image copied", { autoClose: 1500 });
+ } catch (err) {
+ console.error("Copy image failed", err);
+ toast.error("Unable to copy image");
+ }
+ }, [selectedImage]);
+
return (
<>
+
+
{lyricsResult.artist} - {lyricsResult.song}
+
+
+
+
+
+
+
+
+
+
+
@@ -82,7 +186,11 @@ const Memes = () => {
key={img.id}
className="grid-item"
ref={isLast ? lastImageRef : null}
- onClick={() => setSelectedImage(img)}
+ onClick={() => {
+ setSelectedImage(img);
+ setSelectedIndex(i);
+ prefetchImage(images[i + 1]);
+ }}
style={{ cursor: 'pointer' }}
>
{
{/* Dialog for enlarged image */}
+ }
visible={!!selectedImage}
- onHide={() => setSelectedImage(null)}
+ onHide={closeDialog}
style={{ width: '90vw', maxWidth: '720px' }}
className={`d-${theme}`}
modal
@@ -113,18 +239,38 @@ const Memes = () => {
dismissableMask={true}
>
{selectedImage && (
-
+
+
+
+
)}
diff --git a/src/config.js b/src/config.js
index bae25c2..88cae93 100644
--- a/src/config.js
+++ b/src/config.js
@@ -14,6 +14,6 @@ export const RADIO_API_URL = "https://radio-api.codey.lol";
export const socialLinks = {
};
-export const MAJOR_VERSION = "0.2"
+export const MAJOR_VERSION = "0.3"
export const RELEASE_FLAG = null;
export const ENVIRONMENT = import.meta.env.DEV ? "Dev" : "Prod";
\ No newline at end of file
diff --git a/src/layouts/Nav.astro b/src/layouts/Nav.astro
index 49740b1..5b21e09 100644
--- a/src/layouts/Nav.astro
+++ b/src/layouts/Nav.astro
@@ -1,31 +1,58 @@
---
-import { metaData } from "../config";
+import { metaData, API_URL } from "../config";
import { Icon } from "astro-icon/components";
-import ExitToApp from '@mui/icons-material/ExitToApp';
const isLoggedIn = Astro.cookies.get('access_token') || Astro.cookies.get('refresh_token');
+const padlockIconSvg = `
+
+`;
+
+const externalLinkIconSvg = `
+
+`;
+
const navItems = [
{ label: "Home", href: "/" },
{ label: "Radio", href: "/radio" },
{ label: "Memes", href: "/memes" },
- { label: "Lighting", href: "/lighting", auth: true },
- { label: "TRip", href: "/TRip", auth: true },
- { label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
- { label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
- // ...(isLoggedIn ? [{ label: "Logout", href: "#", onClick: "handleLogout()" }] : []), # todo
+ { label: "Lighting", href: "/lighting", auth: true, icon: "padlock" },
+ { label: "TRip", href: "/TRip", auth: true, icon: "padlock" },
+ { label: "Status", href: "https://status.boatson.boats", icon: "external" },
+ { label: "Git", href: "https://kode.boatson.boats", icon: "external" },
+ ...(isLoggedIn ? [{ label: "Logout", href: "#logout", onclick: "handleLogout()" }] : []),
];
const currentPath = Astro.url.pathname;
+
---
-