@fefade/react/dist/components/gallery/GalleryVideo.js

Reusable React UI components powered by the fefade core system.

import { jsxs as m, Fragment as I, jsx as e } from "react/jsx-runtime";
import { b as N, P } from "../../index-DdnSr7Dp.js";
import { forwardRef as q, useState as u } from "react";
import A from "../video/Video.js";
import { r as D, s as t } from "../../GalleryItem.module-BANbEoWG.js";
import p from "../modal/index.js";
const z = q(
  ({
    className: c = "",
    lazy: h = !1,
    dataSrc: C,
    href: r,
    target: y = "_self",
    download: g,
    viewer: o,
    captionStyle: k,
    children: b,
    ...l
  }, x) => {
    const [s, i] = u(!1), [a, d] = u(null);
    function V() {
      i(!0);
    }
    function E() {
      i(!1), d(null);
    }
    function O(n) {
      P({
        href: r,
        download: g,
        target: y,
        onClick: () => {
          l.onClick?.(n);
        }
      });
    }
    function S(n) {
      if (o) {
        const f = n.currentTarget, j = /* @__PURE__ */ e(
          "video",
          {
            ...l,
            ...o,
            src: f.src || f.querySelector("source")?.src || ""
          }
        );
        d(j), V();
      }
      O(n);
    }
    return /* @__PURE__ */ m(I, { children: [
      o && s && a && D.createPortal(
        /* @__PURE__ */ e(
          p,
          {
            isOpen: s,
            style: { border: "none" },
            handleClose: E,
            children: /* @__PURE__ */ e(
              p.Content,
              {
                style: {
                  textAlign: "center",
                  overflow: "hidden",
                  padding: 0
                },
                children: a
              }
            )
          }
        ),
        document.body
      ),
      /* @__PURE__ */ m(
        "figure",
        {
          className: N(
            c,
            [c, t],
            t.galleryItem,
            {
              clickable: l.onClick || o || r
            }
          ),
          children: [
            /* @__PURE__ */ e(
              A,
              {
                ...l,
                ref: x,
                className: t.thumbnail,
                lazy: h,
                dataSrc: C,
                onClick: S
              }
            ),
            /* @__PURE__ */ e("figcaption", { className: t.caption, style: k, children: b })
          ]
        }
      )
    ] });
  }
);
export {
  z as default
};