Gallery Media

1// SHIPPED — wire as-is. One gallery item as its one element: a <video> with poster for a video
2// item, an <img> for an image item, null when nothing is renderable (never a broken tag, never
3// an <img> for a video). The branching rule is `mediaElement` in wix/portfolio/portfolio-core.ts,
4// shared with every other stack; this is its React spelling. Wrapped in a link when the owner
5// attached one. `className` styles the media element itself.
6import type { ReactNode } from "react";
7import { mediaElement } from "../../wix/portfolio/portfolio-core";
8import type { GalleryItem } from "../../wix/portfolio/types";
9
10export interface GalleryMediaProps {
11  item: GalleryItem;
12  className?: string;
13}
14
15export function GalleryMedia({ item, className }: GalleryMediaProps) {
16  const el = mediaElement(item);
17  if (!el) return null;
18  if (el.tag === "video") {
19    return <video src={el.attrs.src} poster={el.attrs.poster} controls playsInline className={className} />;
20  }
21  return <img src={el.attrs.src} alt={el.attrs.alt} loading="lazy" decoding="async" className={className} />;
22}
23
24/** The item's outbound link when the owner set one, else the children as they are. */
25export function GalleryLink({ item, children }: { item: GalleryItem; children: ReactNode }) {
26  return item.linkUrl ? (
27    <a href={item.linkUrl} target={item.linkTarget ?? undefined} rel="noopener">
28      {children}
29    </a>
30  ) : (
31    <>{children}</>
32  );
33}
34
35export default GalleryMedia;