const { useState, useMemo, useEffect, useCallback } = React;
const CATEGORIES = ["All", "Trailer", "Teaser", "Recap", "Episodic", "Experimental"];
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"thumbSize": "large",
"showDivider": true,
"metaGap": 18
} /*EDITMODE-END*/;
function ytThumb(id) {
return `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
}
function Header({ active, onSelect }) {
return (
);
}
function Thumb({ work, onOpen, showDivider }) {
const src = work.thumbnail || ytThumb(work.youtubeId);
return (
onOpen(work)}>
PLAY
{work.title}
{work.category.toUpperCase()}
);
}
function Grid({ works, onOpen, showDivider }) {
if (!works.length) {
return No work in this category yet.
;
}
return (
{works.map((w) =>
)}
);
}
function Footer({ contact }) {
return (
);
}
function VideoModal({ works, index, onClose, onPrev, onNext }) {
const work = works[index];
useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") onClose();
else if (e.key === "ArrowLeft") onPrev();
else if (e.key === "ArrowRight") onNext();
};
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [onClose, onPrev, onNext]);
if (!work) return null;
return (
{work.title}
{work.category.toUpperCase()}
);
}
function App() {
const works = window.PORTFOLIO_WORKS;
const contact = window.PORTFOLIO_CONTACT;
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [active, setActive] = useState("All");
const [openIdx, setOpenIdx] = useState(-1);
const sizeMap = {
small: { cols: 4, maxW: 1200 },
medium: { cols: 3, maxW: 1200 },
large: { cols: 3, maxW: 1500 },
xlarge: { cols: 2, maxW: 1440 }
};
const sz = sizeMap[t.thumbSize] || sizeMap.large;
useEffect(() => {
const root = document.documentElement;
root.style.setProperty("--grid-cols", sz.cols);
root.style.setProperty("--max-w", sz.maxW + "px");
root.style.setProperty("--meta-pad", t.metaGap + "px");
}, [sz.cols, sz.maxW, t.metaGap]);
const filtered = useMemo(
() => active === "All" ? works : works.filter((w) => w.category === active),
[active, works]
);
const openWork = useCallback(
(work) => {
const idx = filtered.findIndex((w) => w.id === work.id);
setOpenIdx(idx);
},
[filtered]
);
const closeModal = useCallback(() => setOpenIdx(-1), []);
const prev = useCallback(
() => setOpenIdx((i) => (i - 1 + filtered.length) % filtered.length),
[filtered.length]
);
const next = useCallback(
() => setOpenIdx((i) => (i + 1) % filtered.length),
[filtered.length]
);
useEffect(() => {
if (openIdx >= filtered.length) setOpenIdx(-1);
}, [filtered, openIdx]);
return (
{openIdx >= 0 &&
}
setTweak("thumbSize", v)} />
setTweak("showDivider", v)} />
setTweak("metaGap", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();
