);
}
// ============== Projects ==============
function ytId(s) {
// Accepts a bare ID or any common YouTube URL form and returns the 11-char ID.
if (!s) return null;
if (/^[A-Za-z0-9_-]{11}$/.test(s)) return s;
const m = s.match(/(?:youtu\.be\/|v=|\/embed\/|\/shorts\/)([A-Za-z0-9_-]{11})/);
return m ? m[1] : null;
}
// Ask the app-level lightbox to play a video (user-initiated, with sound).
function playVideo(id) {
window.dispatchEvent(new CustomEvent("ym:playvideo", { detail: id }));
}
// Load the YouTube IFrame Player API once and resolve when ready.
let __ytApiPromise = null;
function loadYTApi() {
if (__ytApiPromise) return __ytApiPromise;
__ytApiPromise = new Promise((resolve) => {
if (window.YT && window.YT.Player) return resolve(window.YT);
const prev = window.onYouTubeIframeAPIReady;
window.onYouTubeIframeAPIReady = () => {if (prev) prev();resolve(window.YT);};
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
document.head.appendChild(tag);
});
return __ytApiPromise;
}
// A YouTube cover that autoplays inline (muted, looping) via the IFrame Player API.
// The thumbnail shows underneath as a graceful fallback; clicking opens the lightbox
// to watch with sound.
function ProjVideoCover({ id }) {
const mountRef = React.useRef(null);
const playerRef = React.useRef(null);
const [playing, setPlaying] = React.useState(false);
const [thumb, setThumb] = React.useState(`https://img.youtube.com/vi/${id}/maxresdefault.jpg`);
React.useEffect(() => {
let cancelled = false;
let fadeTimer = null;
loadYTApi().then((YT) => {
if (cancelled || !mountRef.current) return;
const holder = document.createElement("div");
mountRef.current.appendChild(holder);
playerRef.current = new YT.Player(holder, {
videoId: id,
playerVars: {
autoplay: 1, mute: 1, controls: 0, loop: 1, playlist: id,
playsinline: 1, rel: 0, modestbranding: 1, disablekb: 1, fs: 0, iv_load_policy: 3
},
events: {
onReady: (e) => {try {e.target.mute();e.target.playVideo();} catch (_) {}},
onStateChange: (e) => {
// Wait a beat after playback truly starts so the brief YouTube
// title/branding overlay passes before we fade the player in over
// the clean thumbnail.
if (e.data === YT.PlayerState.PLAYING) {
clearTimeout(fadeTimer);
fadeTimer = setTimeout(() => {if (!cancelled) setPlaying(true);}, 650);
}
if (e.data === YT.PlayerState.ENDED) {try {e.target.playVideo();} catch (_) {}}
}
}
});
});
return () => {
cancelled = true;
clearTimeout(fadeTimer);
try {playerRef.current && playerRef.current.destroy();} catch (_) {}
};
}, [id]);
const onThumbLoad = (e) => {
if (e.target.naturalWidth <= 121) setThumb(`https://img.youtube.com/vi/${id}/hqdefault.jpg`);
};
// Purely decorative: the looping clip never intercepts clicks, so the whole
// card stays a single link to the project.
return (
);
}
// A local looping video cover that only downloads/plays once scrolled near the
// viewport (the project clips total tens of MB, so eager autoplay made every
// page load pull all of them at once).
function ProjFileVideoCover({ cover }) {
const videoRef = React.useRef(null);
React.useEffect(() => {
const el = videoRef.current;
if (!el) return;
const io = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
if (!el.src) el.src = cover.video;
el.play().catch(() => {});
} else {
el.pause();
}
}, { rootMargin: "200px" });
io.observe(el);
return () => io.disconnect();
}, [cover.video]);
// Some screen-recordings have a baked-in black band (browser chrome) at the
// top/bottom. cover.crop = { scale, originY } zooms in to clip those bands.
const crop = cover.crop || {};
const vStyle = crop.scale ?
{ transform: `scale(${crop.scale})`, transformOrigin: `center ${crop.originY || "50%"}` } :
undefined;
return (
);
}
function ProjCover({ cover }) {
// Cover options (checked in order):
// cover.youtube → a YouTube link or ID, embedded as a silent looping clip, e.g.
// cover: { youtube: "https://youtu.be/dQw4w9WgXcQ" }
// cover.video → a looping muted video (drop file in assets/projects/, e.g.
// cover: { video: "assets/projects/weathersphere.mp4", poster: "assets/projects/weather.jpg" })
// poster is optional (shown while the video loads).
// cover.img → a still image, e.g. cover: { img: "assets/projects/mask.png" }
// otherwise → the generated striped placeholder (by hue/label).
const yt = ytId(cover.youtube);
if (yt) {
return ;
}
if (cover.video) {
return ;
}
if (cover.img) {
return (
);
}
// Generate a unique striped placeholder per hue
const id = "g" + Math.abs(cover.hue);
const a = `oklch(0.32 0.08 ${cover.hue})`;
const b = `oklch(0.22 0.05 ${cover.hue})`;
const c = `oklch(0.42 0.12 ${cover.hue})`;
return (
