@caratlogic/design-system 0.1.10 → 0.1.11

package/dist/index.esm.js

@@ -64641,6 +64641,8 @@ const FILE_TYPE_PATTERNS = {
     DOCUMENT: /\.(doc|docx|xls|xlsx|ppt|pptx)($|\?)/i,
     VIDEO: /\.(mp4|m4v|avi|mov|wmv|flv|webm|mkv|ogv|mpe?g|3gp)($|\?)/i,
     AUDIO: /\.(mp3|wav|flac|aac|ogg)($|\?)/i,
+    /** Interactive viewer pages (supplier 360° spinners), not media files. */
+    EMBED: /\.html?($|\?|#)/i,
 };
 const isFileType = {
     pdf: (url) => FILE_TYPE_PATTERNS.PDF.test(url),
@@ -64648,6 +64650,7 @@ const isFileType = {
     document: (url) => FILE_TYPE_PATTERNS.DOCUMENT.test(url),
     video: (url) => FILE_TYPE_PATTERNS.VIDEO.test(url),
     audio: (url) => FILE_TYPE_PATTERNS.AUDIO.test(url),
+    embed: (url) => FILE_TYPE_PATTERNS.EMBED.test(url),
 };
 
 /** Seek to ~1st frame for static video thumbnails (HTML5 media fragment). */
@@ -64663,6 +64666,12 @@ const createVideoMediaItem = (src, index, idPrefix = 'vid') => ({
     src,
     thumbSrc: videoThumbnailSrc(src),
 });
+/**
+ * True when a "video" is really an interactive viewer page. Supplier 360°
+ * spinners (Vision360, Varni) serve `text/html`, so `<video>` renders nothing
+ * and there is no frame to seek for a thumbnail — they need an iframe.
+ */
+const isEmbedMediaItem = (item) => item.kind === 'video' && isFileType.embed(item.src);
 const isPdfMediaItem = (item) => item.isPdf === true ||
     isFileType.pdf(item.src) ||
     (item.kind === 'certificate' && !isFileType.image(item.src));
@@ -65770,9 +65779,22 @@ const PdfPreview = ({ item }) => {
     const docsViewer = `https://docs.google.com/gview?embedded=1&url=${encodeURIComponent(item.src)}`;
     return (jsx("object", { data: item.src, type: "application/pdf", className: "h-full w-full bg-card", "aria-label": item.name ?? 'Certificate PDF', children: jsx("iframe", { title: item.name ?? 'Certificate PDF', className: "h-full w-full border-0 bg-card", src: docsViewer }) }));
 };
+/**
+ * Videos arrive as either a real file or a supplier's 360° viewer page. The URL
+ * settles most cases, but not every viewer ends in `.html` (v360, loupe360),
+ * so a `<video>` that fails to load falls back to the iframe as well. Remounted
+ * per selection via `key`, which resets that fallback.
+ */
+const VideoOrEmbed = ({ item }) => {
+    const [useEmbed, setUseEmbed] = useState(() => isEmbedMediaItem(item));
+    if (useEmbed) {
+        return (jsx("iframe", { src: item.src, title: item.name ?? '360\u00B0 viewer', className: "h-full w-full border-0 bg-card", allowFullScreen: true }));
+    }
+    return (jsx("video", { src: item.src, controls: true, onError: () => setUseEmbed(true), className: "h-full w-full object-cover", "aria-label": item.name ?? 'Video' }));
+};
 const MainMedia = ({ item }) => {
     if (item.kind === 'video') {
-        return (jsx("video", { src: item.src, controls: true, className: "h-full w-full object-cover", "aria-label": item.name ?? 'Video' }));
+        return jsx(VideoOrEmbed, { item: item });
     }
     if (isPdfMediaItem(item)) {
         return jsx(PdfPreview, { item: item });
@@ -65782,7 +65804,7 @@ const MainMedia = ({ item }) => {
 const Thumbnail = ({ item, isActive, onSelect }) => {
     const Icon = KIND_ICON[item.kind];
     const isPdf = isPdfMediaItem(item);
-    const isVideoWithoutThumb = item.kind === 'video' && !item.thumbSrc;
+    const isVideoWithoutThumb = item.kind === 'video' && (!item.thumbSrc || isEmbedMediaItem(item));
     return (jsxs("button", { type: "button", onClick: onSelect, "aria-label": `Select ${item.name ?? item.kind}`, "aria-pressed": isActive, className: cn('group relative flex aspect-square w-full cursor-pointer overflow-hidden rounded-lg border transition-colors', isActive
             ? 'border-primary ring-2 ring-primary/30'
             : 'border-border hover:border-primary/40'), children: [isPdf ? (jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 bg-muted p-2 text-muted-foreground", children: [jsx(Icon, { size: 20 }), jsx("span", { className: "text-[10px] font-medium uppercase", children: "PDF" })] })) : isVideoWithoutThumb ? (jsx("div", { className: "h-full w-full flex items-center justify-center bg-muted", children: jsx(Icon, { size: 24, className: "text-muted-foreground" }) })) : item.kind === 'video' ? (jsx("video", { src: item.thumbSrc ?? item.src, muted: true, playsInline: true, preload: "metadata", className: "h-full w-full object-cover", "aria-hidden": "true" })) : (jsx("img", { src: item.thumbSrc ?? item.src, alt: "", className: "h-full w-full object-cover" })), !isPdf && item.kind !== 'image' && !isVideoWithoutThumb && (jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30 text-white", children: jsx(Icon, { size: 20 }) })), isVideoWithoutThumb && (jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30" }))] }));
@@ -65803,7 +65825,7 @@ const MediaGallery = ({ items, thumbsVisible = 4, hideTabs = false, mainAspectCl
                 (kinds.length > 0 ? (jsx(Tabs, { value: activeKind ?? undefined, onValueChange: (v) => setActiveKind(v), tabStyle: "boxed", size: "sm", children: jsx(TabsList, { children: kinds.map((kind) => {
                             const Icon = KIND_ICON[kind];
                             return (jsx(TabsTrigger, { value: kind, icon: jsx(Icon, { size: 14 }), children: MEDIA_KIND_LABEL[kind] }, kind));
-                        }) }) })) : (jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxs("div", { className: "relative", children: [jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsx("div", { className: "absolute right-3 top-3 z-20", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsx(MainMedia, { item: selected }), !hideDownload && (jsx("div", { className: "absolute right-3 top-3", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsx("div", { className: cn('flex items-center justify-center rounded-xl border border-dashed border-border bg-muted/40 text-sm text-muted-foreground', mainAspectClassName), children: emptyText })), visibleItems.length > 1 && (jsx("div", { className: "grid gap-3", style: {
+                        }) }) })) : (jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxs("div", { className: "relative", children: [jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsx("div", { className: "absolute right-3 top-3 z-20", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsx(MainMedia, { item: selected }, selected.id), !hideDownload && !isEmbedMediaItem(selected) && (jsx("div", { className: "absolute right-3 top-3", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsx("div", { className: cn('flex items-center justify-center rounded-xl border border-dashed border-border bg-muted/40 text-sm text-muted-foreground', mainAspectClassName), children: emptyText })), visibleItems.length > 1 && (jsx("div", { className: "grid gap-3", style: {
                     gridTemplateColumns: `repeat(${Math.min(visibleItems.length, thumbsVisible)}, minmax(0, 1fr))`,
                 }, children: visibleItems.slice(0, thumbsVisible).map((item) => (jsx(Thumbnail, { item: item, isActive: selected?.id === item.id, onSelect: () => setSelected(item) }, item.id))) }))] }));
 };