Project Media

1// One gallery media item. Branch on item.type ("IMAGE" | "VIDEO" | "UNDEFINED") — this branching
2// and the field paths (image.imageInfo.url, video.videoInfo.resolutions[0].url) are load-bearing;
3// re-skin via base44 design tokens (shadcn Tailwind classes), don't rewire the paths.
4
5function https(url) {
6  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
7}
8
9export default function ProjectMedia({ item }) {
10  if (item.type === "IMAGE") {
11    const src = https(item.image?.imageInfo?.url);
12    return src ? (
13      <img src={src} alt={item.title || ""} loading="lazy"
14        className="block w-full h-auto rounded-sm" />
15    ) : null;
16  }
17  if (item.type === "VIDEO") {
18    // resolutions[].url is the confirmed field; posters[0] is the poster (sub-shape not in the
19    // helper JSDoc — posters[0].url used here; confirm in wix-docs if a brand needs more).
20    const vi = item.video?.videoInfo;
21    const src = https(vi?.resolutions?.[0]?.url);
22    const poster = https(vi?.posters?.[0]?.url);
23    return src ? (
24      <video src={src} poster={poster || undefined} controls playsInline
25        className="block w-full h-auto rounded-sm bg-card" />
26    ) : null;
27  }
28  return null; // UNDEFINED — nothing renderable
29}