@beautinique/frontend-components 1.0.7 → 1.0.9

package/dist/media/index.js

@@ -0,0 +1,605 @@
+import { addCollection, Icon } from '@iconify/react';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { ScrollableGradientContainer, ModalWrapper } from '@beautinique/frontend-components/layout';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Divider } from '@beautinique/frontend-components/ui';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/media/captureVideoPoster.ts
+var MIN_TIME = 0.05;
+var captureVideoPoster = /* @__PURE__ */ __name((src, { time = 0, maxWidth = 640, timeout = 1e4, signal } = {}) => new Promise((resolve) => {
+  if (signal?.aborted) {
+    resolve(void 0);
+    return;
+  }
+  const video = document.createElement("video");
+  let isDone = false;
+  const finish = /* @__PURE__ */ __name((poster) => {
+    if (isDone) return;
+    isDone = true;
+    window.clearTimeout(timer);
+    signal?.removeEventListener("abort", abort);
+    video.removeAttribute("src");
+    video.load();
+    resolve(poster);
+  }, "finish");
+  const abort = /* @__PURE__ */ __name(() => {
+    finish();
+  }, "abort");
+  const timer = window.setTimeout(abort, timeout);
+  video.muted = true;
+  video.playsInline = true;
+  video.preload = "auto";
+  video.crossOrigin = "anonymous";
+  video.addEventListener(
+    "loadeddata",
+    () => {
+      video.currentTime = Math.max(time, MIN_TIME);
+    },
+    { once: true }
+  );
+  video.addEventListener(
+    "seeked",
+    () => {
+      if (isDone) return;
+      try {
+        if (video.videoWidth === 0 || video.videoHeight === 0) {
+          finish();
+          return;
+        }
+        const scale = Math.min(1, maxWidth / video.videoWidth);
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.round(video.videoWidth * scale);
+        canvas.height = Math.round(video.videoHeight * scale);
+        const context = canvas.getContext("2d");
+        if (!context) {
+          finish();
+          return;
+        }
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        finish(canvas.toDataURL("image/jpeg", 0.8));
+      } catch {
+        finish();
+      }
+    },
+    { once: true }
+  );
+  video.addEventListener("error", abort, { once: true });
+  signal?.addEventListener("abort", abort, { once: true });
+  video.src = src;
+}), "captureVideoPoster");
+
+// src/media/labels.ts
+var position = /* @__PURE__ */ __name((index, total) => `${String(index + 1)} of ${String(total)}`, "position");
+var KIND = { image: "Image", video: "Video" };
+var MEDIA_LABELS = {
+  gallery: "Media gallery",
+  thumbnails: "Thumbnails",
+  select: /* @__PURE__ */ __name((item, index, total) => `Show ${item.type} ${position(index, total)}`, "select"),
+  preview: /* @__PURE__ */ __name((item, index, total) => `${KIND[item.type]} ${position(index, total)}`, "preview"),
+  remove: /* @__PURE__ */ __name((item, index) => `Remove ${item.type} ${String(index + 1)}`, "remove"),
+  previous: "Previous",
+  next: "Next",
+  close: "Close",
+  counter: position
+};
+var resolveLabels = /* @__PURE__ */ __name((labels) => ({
+  gallery: labels?.gallery ?? MEDIA_LABELS.gallery,
+  thumbnails: labels?.thumbnails ?? MEDIA_LABELS.thumbnails,
+  select: labels?.select ?? MEDIA_LABELS.select,
+  preview: labels?.preview ?? MEDIA_LABELS.preview,
+  remove: labels?.remove ?? MEDIA_LABELS.remove,
+  previous: labels?.previous ?? MEDIA_LABELS.previous,
+  next: labels?.next ?? MEDIA_LABELS.next,
+  close: labels?.close ?? MEDIA_LABELS.close,
+  counter: labels?.counter ?? MEDIA_LABELS.counter
+}), "resolveLabels");
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/media/media-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "play-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M20.4086 9.35258C22.5305 10.5065 22.5305 13.4935 20.4086 14.6474L7.59662 21.6145C5.53435 22.736 3 21.2763 3 18.9671L3 5.0329C3 2.72368 5.53435 1.26402 7.59661 2.38548L20.4086 9.35258Z"/>'
+      },
+      "alt-arrow-left-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 5L9 12L15 19"/>'
+      }
+    }
+  },
+  {
+    prefix: "lucide",
+    width: 24,
+    height: 24,
+    icons: {
+      x: {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>'
+      }
+    }
+  }
+];
+var { register: registerMediaIcons, names: MEDIA_ICON_NAMES } = createIconRegistry(ICON_SETS);
+
+// src/lib/mergeRefs.ts
+var assign = /* @__PURE__ */ __name((ref, node) => {
+  if (typeof ref === "function") return ref(node);
+  if (ref) ref.current = node;
+  return void 0;
+}, "assign");
+var mergeRefs = /* @__PURE__ */ __name((...refs) => (node) => {
+  const cleanups = refs.map((ref) => assign(ref, node));
+  return () => {
+    refs.forEach((ref, index) => {
+      const cleanup = cleanups[index];
+      if (typeof cleanup === "function") cleanup();
+      else assign(ref, null);
+    });
+  };
+}, "mergeRefs");
+
+// src/media/streaming.ts
+var HLS_MIME = "application/vnd.apple.mpegurl";
+var MAX_RECOVERIES = 3;
+var isHlsSource = /* @__PURE__ */ __name((src) => /\.m3u8(?:$|[?#])/i.test(src), "isHlsSource");
+var attachStream = /* @__PURE__ */ __name((video, src, { autoPlay, onError }) => {
+  let isCancelled = false;
+  let destroyPlayer;
+  const play = /* @__PURE__ */ __name(() => {
+    if (autoPlay) video.play().catch(() => void 0);
+  }, "play");
+  if (video.canPlayType(HLS_MIME) !== "") {
+    video.src = src;
+    video.addEventListener("loadedmetadata", play, { once: true });
+    return () => {
+      video.removeEventListener("loadedmetadata", play);
+    };
+  }
+  import('hls.js').then(({ default: Hls }) => {
+    if (isCancelled) return;
+    if (!Hls.isSupported()) {
+      onError?.(new Error("This browser cannot play HLS video."));
+      return;
+    }
+    const player = new Hls();
+    let recoveries = 0;
+    destroyPlayer = /* @__PURE__ */ __name(() => {
+      player.destroy();
+    }, "destroyPlayer");
+    player.on(Hls.Events.MANIFEST_PARSED, play);
+    player.on(Hls.Events.ERROR, (_event, data) => {
+      if (!data.fatal) return;
+      if (recoveries < MAX_RECOVERIES && data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+        recoveries += 1;
+        player.startLoad();
+      } else if (recoveries < MAX_RECOVERIES && data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+        recoveries += 1;
+        player.recoverMediaError();
+      } else {
+        player.destroy();
+        destroyPlayer = void 0;
+        onError?.(data);
+      }
+    });
+    player.loadSource(src);
+    player.attachMedia(video);
+  }).catch((error) => {
+    if (!isCancelled) onError?.(error);
+  });
+  return () => {
+    isCancelled = true;
+    destroyPlayer?.();
+  };
+}, "attachStream");
+var PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><rect width="16" height="9" fill="#9ca3af"/><path d="M6.5 3v3l3-1.5z" fill="#fff"/></svg>'
+)}`;
+var defaultGetPoster = /* @__PURE__ */ __name((src, signal) => isHlsSource(src) ? void 0 : captureVideoPoster(src, { signal }), "defaultGetPoster");
+var VideoPlayer = /* @__PURE__ */ __name(({
+  className = "",
+  videoProps,
+  ref,
+  showPosterOnly = false,
+  getPoster,
+  placeholder = PLACEHOLDER,
+  posterAlt = "",
+  onStreamError
+}) => {
+  const { src, poster: givenPoster, autoPlay = true } = videoProps;
+  const videoRef = useRef(null);
+  const getPosterRef = useRef(getPoster);
+  const onStreamErrorRef = useRef(onStreamError);
+  const [made, setMade] = useState(null);
+  useEffect(() => {
+    getPosterRef.current = getPoster;
+    onStreamErrorRef.current = onStreamError;
+  });
+  const mergedRef = useMemo(() => mergeRefs(videoRef, ref), [ref]);
+  const needsPoster = showPosterOnly && !!src && !givenPoster;
+  const isHls = !!src && isHlsSource(src);
+  useEffect(() => {
+    if (!needsPoster || !src) return;
+    const controller = new AbortController();
+    Promise.resolve((getPosterRef.current ?? defaultGetPoster)(src, controller.signal)).then((poster2) => {
+      if (poster2 && !controller.signal.aborted) setMade({ src, poster: poster2 });
+    }).catch(() => void 0);
+    return () => {
+      controller.abort();
+    };
+  }, [needsPoster, src]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (showPosterOnly || !isHls || !video || !src) return;
+    return attachStream(video, src, {
+      autoPlay,
+      onError: /* @__PURE__ */ __name((error) => {
+        onStreamErrorRef.current?.(error);
+      }, "onError")
+    });
+  }, [showPosterOnly, isHls, src, autoPlay]);
+  const poster = givenPoster ?? (made !== null && made.src === src ? made.poster : void 0);
+  const mediaClassName = `aspect-auto h-full w-full object-cover ${videoProps.className ?? ""}`;
+  return /* @__PURE__ */ jsx("div", { className: `h-full w-full ${className}`, children: showPosterOnly ? /* @__PURE__ */ jsx("img", { src: poster ?? placeholder, alt: posterAlt, className: mediaClassName }) : /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref: mergedRef,
+      ...videoProps,
+      src: isHls ? void 0 : src,
+      playsInline: videoProps.playsInline ?? true,
+      autoPlay,
+      muted: videoProps.muted ?? true,
+      loop: videoProps.loop ?? false,
+      controls: videoProps.controls ?? false,
+      className: mediaClassName
+    },
+    src
+  ) });
+}, "VideoPlayer");
+var keysOf = /* @__PURE__ */ __name((media) => {
+  const seen = /* @__PURE__ */ new Map();
+  return media.map(({ url }) => {
+    const count = seen.get(url) ?? 0;
+    seen.set(url, count + 1);
+    return `${url}#${String(count)}`;
+  });
+}, "keysOf");
+var MediaCarousel = /* @__PURE__ */ __name(({
+  className = "",
+  media,
+  selected,
+  onClick,
+  handleRemove,
+  gradientClassNames,
+  invalid,
+  listClassName = "p-2",
+  labels,
+  playerProps
+}) => {
+  registerMediaIcons();
+  const text = resolveLabels(labels);
+  const scrollerRef = useRef(null);
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller || selected === null || selected === void 0) return;
+    const thumbnail = scroller.querySelector(
+      `[data-media-index="${String(selected)}"]`
+    );
+    if (!thumbnail) return;
+    scroller.scrollLeft = thumbnail.offsetLeft - (scroller.clientWidth - thumbnail.offsetWidth) / 2;
+  }, [selected]);
+  if (media.length === 0) return null;
+  const keys = keysOf(media);
+  return /* @__PURE__ */ jsx(
+    ScrollableGradientContainer,
+    {
+      direction: "horizontal",
+      label: text.thumbnails,
+      scrollerRef,
+      className: `w-full [&>div]:justify-start ${className}`,
+      gradientClassNames,
+      children: /* @__PURE__ */ jsx("ul", { className: `media-carousel flex items-center gap-2 ${listClassName}`, children: media.map((item, index) => {
+        const isSelected = index === selected;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-media-index": index,
+            "data-invalid": invalid?.at(index) ? "" : void 0,
+            className: `relative size-14 shrink-0 overflow-hidden rounded-md border shadow-xs transition-colors duration-300 hover:opacity-100 md:size-16 lg:size-20 data-invalid:border-red-c! ${isSelected ? "border-tertiary opacity-100" : "border-primary/30 opacity-90"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": text.select(item, index, media.length),
+                  "aria-current": isSelected ? "true" : void 0,
+                  onClick: () => {
+                    onClick(index);
+                  },
+                  className: "group relative block size-full cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-crayola-c",
+                  children: item.type === "video" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    !isSelected && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "pointer-events-none absolute inset-0 z-1 grid place-items-center bg-black/50",
+                        children: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: "solar:play-linear",
+                            className: "text-white opacity-90 group-hover:opacity-100"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      VideoPlayer,
+                      {
+                        showPosterOnly: true,
+                        videoProps: { src: item.url, autoPlay: false },
+                        className: "aspect-square",
+                        ...playerProps
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: item.url,
+                      alt: "",
+                      draggable: false,
+                      loading: "lazy",
+                      className: "aspect-square size-full object-cover"
+                    }
+                  )
+                }
+              ),
+              handleRemove && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": text.remove(item, index),
+                  className: "group absolute top-0 right-0 z-2 grid size-6 cursor-pointer place-items-center focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-crayola-c",
+                  onClick: () => {
+                    handleRemove(index);
+                  },
+                  children: /* @__PURE__ */ jsx("span", { className: "bg-tertiary/80 group-hover:bg-tertiary grid size-4 place-items-center rounded-full", children: /* @__PURE__ */ jsx(Icon, { icon: "lucide:x", className: "text-primary-invert size-full shrink-0" }) })
+                }
+              )
+            ]
+          },
+          keys[index]
+        );
+      }) })
+    }
+  );
+}, "MediaCarousel");
+var ChevronButton = /* @__PURE__ */ __name(({
+  onClick,
+  label,
+  className = ""
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": label,
+    onClick,
+    className: `border-primary/50 bg-primary-invert/50 cursor-pointer rounded-md border p-1.25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c ${className}`,
+    children: /* @__PURE__ */ jsx(Icon, { icon: "solar:alt-arrow-left-linear", className: "text-primary" })
+  }
+), "ChevronButton");
+var isTypingTarget = /* @__PURE__ */ __name((target) => target instanceof HTMLVideoElement || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable, "isTypingTarget");
+var MediaCarouselWithParentMedia = /* @__PURE__ */ __name(({
+  className = "",
+  media,
+  selected,
+  needButtonControls = true,
+  videoProps,
+  handleRemove,
+  labels,
+  playerProps
+}) => {
+  registerMediaIcons();
+  const text = resolveLabels(labels);
+  const [current, setCurrent] = useState(selected ?? 0);
+  const [previousSelected, setPreviousSelected] = useState(selected);
+  if (selected !== previousSelected) {
+    setPreviousSelected(selected);
+    if (selected !== null && selected !== void 0) setCurrent(selected);
+  }
+  const count = media.length;
+  const index = Math.min(current, count - 1);
+  const item = media.at(index);
+  if (!item) return null;
+  const hasControls = needButtonControls && count > 1;
+  const go = /* @__PURE__ */ __name((step) => {
+    setCurrent((value) => (Math.min(value, count - 1) + step + count) % count);
+  }, "go");
+  const handleKeyDown = /* @__PURE__ */ __name((event) => {
+    if (!hasControls || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    if (isTypingTarget(event.target)) return;
+    event.preventDefault();
+    go(event.key === "ArrowLeft" ? -1 : 1);
+  }, "handleKeyDown");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "carousel",
+      "aria-label": text.gallery,
+      onKeyDown: handleKeyDown,
+      className: `bg-primary-invert flex w-full flex-col gap-4 overflow-hidden rounded-lg ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-100 items-center justify-center lg:h-105 xl:h-125", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center rounded-lg", children: item.type === "video" ? /* @__PURE__ */ jsx(
+            VideoPlayer,
+            {
+              videoProps: {
+                "aria-label": text.preview(item, index, count),
+                ...videoProps,
+                src: item.url
+              },
+              className: "mx-auto flex max-h-full items-center justify-center",
+              ...playerProps
+            },
+            item.url
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.url,
+              alt: text.preview(item, index, count),
+              className: "mx-auto h-full max-h-full w-full object-contain"
+            }
+          ) }),
+          hasControls && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 flex w-full items-center justify-center gap-5 py-2 text-center text-sm", children: [
+            /* @__PURE__ */ jsx(
+              ChevronButton,
+              {
+                label: text.previous,
+                onClick: () => {
+                  go(-1);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "border-primary/50 bg-primary-invert/50 text-primary min-h-full w-24 content-center rounded-md border px-4 py-2 leading-none",
+                children: text.counter(index, count)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronButton,
+              {
+                label: text.next,
+                onClick: () => {
+                  go(1);
+                },
+                className: "[&>svg]:rotate-180"
+              }
+            )
+          ] })
+        ] }),
+        count > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            MediaCarousel,
+            {
+              media,
+              selected: index,
+              onClick: setCurrent,
+              handleRemove,
+              labels,
+              playerProps
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, "MediaCarouselWithParentMedia");
+var MediaModal = /* @__PURE__ */ __name(({
+  media,
+  isOpen,
+  onClose,
+  selected,
+  className = "",
+  videoProps,
+  handleRemove,
+  labels,
+  playerProps
+}) => {
+  const text = resolveLabels(labels);
+  return /* @__PURE__ */ jsx(
+    ModalWrapper,
+    {
+      className: "max-w-xl",
+      isOpen: isOpen && media.length > 0,
+      onClose,
+      containerProps: { className },
+      header: { showCloseIcon: true },
+      closeLabel: text.close,
+      label: text.gallery,
+      children: /* @__PURE__ */ jsx(
+        MediaCarouselWithParentMedia,
+        {
+          media,
+          selected,
+          handleRemove,
+          labels,
+          playerProps,
+          videoProps: {
+            ...videoProps,
+            autoPlay: videoProps?.autoPlay ?? true,
+            muted: videoProps?.muted ?? true,
+            loop: videoProps?.loop ?? true,
+            controls: videoProps?.controls ?? true,
+            className: `object-contain! bg-primary/10 backdrop-blur-xs rounded-lg ${videoProps?.className ?? ""}`
+          }
+        }
+      )
+    }
+  );
+}, "MediaModal");
+var MediaCarouselWithModal = /* @__PURE__ */ __name(({
+  media,
+  videoProps,
+  className = "",
+  gradientClassNames,
+  labels,
+  playerProps
+}) => {
+  const [openIndex, setOpenIndex] = useState(null);
+  if (openIndex !== null && openIndex >= media.length) setOpenIndex(null);
+  if (media.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: `max-w-full min-w-0 overflow-hidden rounded-md ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      MediaCarousel,
+      {
+        media,
+        selected: openIndex,
+        onClick: setOpenIndex,
+        gradientClassNames,
+        listClassName: "p-0",
+        labels,
+        playerProps
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MediaModal,
+      {
+        media,
+        selected: openIndex,
+        isOpen: openIndex !== null,
+        onClose: () => {
+          setOpenIndex(null);
+        },
+        videoProps,
+        labels,
+        playerProps
+      }
+    )
+  ] });
+}, "MediaCarouselWithModal");
+
+export { MEDIA_LABELS, MediaCarousel, MediaCarouselWithModal, MediaCarouselWithParentMedia, MediaModal, VideoPlayer, captureVideoPoster };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map