@caratlogic/design-system 0.1.10 → 0.1.11

package/dist/components/organisms/MediaGallery/MediaGallery.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 import type { MediaGalleryProps } from './MediaGallery.types';
 export declare const MediaGallery: FC<MediaGalleryProps>;
 //# sourceMappingURL=MediaGallery.d.ts.map

package/dist/components/organisms/MediaGallery/MediaGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/MediaGallery/MediaGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,OAAO,KAAK,EACV,iBAAiB,EAGlB,MAAM,sBAAsB,CAAC;AAgH9B,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+H9C,CAAC"}
+{"version":3,"file":"MediaGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/MediaGallery/MediaGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAY1C,OAAO,KAAK,EACV,iBAAiB,EAGlB,MAAM,sBAAsB,CAAC;AAwI9B,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+H9C,CAAC"}

package/dist/components/organisms/MediaGallery/MediaGallery.utils.d.ts

@@ -2,6 +2,12 @@ import type { MediaItem, MediaKind } from './MediaGallery.types';
 /** Seek to ~1st frame for static video thumbnails (HTML5 media fragment). */
 export declare const videoThumbnailSrc: (src: string) => string;
 export declare const createVideoMediaItem: (src: string, index: number, idPrefix?: string) => MediaItem;
+/**
+ * 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.
+ */
+export declare const isEmbedMediaItem: (item: MediaItem) => boolean;
 export declare const isPdfMediaItem: (item: MediaItem) => boolean;
 export declare const MEDIA_KIND_ORDER: MediaKind[];
 export declare const MEDIA_KIND_LABEL: Record<MediaKind, string>;

package/dist/components/organisms/MediaGallery/MediaGallery.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaGallery.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/MediaGallery/MediaGallery.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjE,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,KAAG,MAI/C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,KAAK,MAAM,EACX,OAAO,MAAM,EACb,iBAAgB,KACf,SAKD,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,MAAM,SAAS,KAAG,OAGa,CAAC;AAE/D,eAAO,MAAM,gBAAgB,EAAE,SAAS,EAAsC,CAAC;AAE/E,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,SAAS,EAAE,KACjB,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAU/B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,SAAS,EAAE,KAAG,SAAS,EACU,CAAC;AAExE,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,EAAE,WAAW,MAAM,KAAG,IASlE,CAAC"}
+{"version":3,"file":"MediaGallery.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/MediaGallery/MediaGallery.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjE,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,KAAG,MAI/C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,KAAK,MAAM,EACX,OAAO,MAAM,EACb,iBAAgB,KACf,SAKD,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,MAAM,SAAS,KAAG,OACE,CAAC;AAEtD,eAAO,MAAM,cAAc,GAAI,MAAM,SAAS,KAAG,OAGa,CAAC;AAE/D,eAAO,MAAM,gBAAgB,EAAE,SAAS,EAAsC,CAAC;AAE/E,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAItD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,SAAS,EAAE,KACjB,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAU/B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,SAAS,EAAE,KAAG,SAAS,EACU,CAAC;AAExE,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,EAAE,WAAW,MAAM,KAAG,IASlE,CAAC"}

package/dist/constants/filePatterns.d.ts

@@ -4,6 +4,8 @@ export declare const FILE_TYPE_PATTERNS: {
     readonly DOCUMENT: RegExp;
     readonly VIDEO: RegExp;
     readonly AUDIO: RegExp;
+    /** Interactive viewer pages (supplier 360° spinners), not media files. */
+    readonly EMBED: RegExp;
 };
 export declare const isFileType: {
     readonly pdf: (url: string) => boolean;
@@ -11,5 +13,6 @@ export declare const isFileType: {
     readonly document: (url: string) => boolean;
     readonly video: (url: string) => boolean;
     readonly audio: (url: string) => boolean;
+    readonly embed: (url: string) => boolean;
 };
 //# sourceMappingURL=filePatterns.d.ts.map

package/dist/constants/filePatterns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filePatterns.d.ts","sourceRoot":"","sources":["../../src/constants/filePatterns.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,UAAU;wBACV,MAAM;0BACJ,MAAM;6BACH,MAAM;0BACT,MAAM;0BACN,MAAM;CACX,CAAC"}
+{"version":3,"file":"filePatterns.d.ts","sourceRoot":"","sources":["../../src/constants/filePatterns.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;IAM7B,0EAA0E;;CAElE,CAAC;AAEX,eAAO,MAAM,UAAU;wBACV,MAAM;0BACJ,MAAM;6BACH,MAAM;0BACT,MAAM;0BACN,MAAM;0BACN,MAAM;CACX,CAAC"}

package/dist/index.cjs.js

@@ -64671,6 +64671,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),
@@ -64678,6 +64680,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). */
@@ -64693,6 +64696,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));
@@ -65800,9 +65809,22 @@ const PdfPreview = ({ item }) => {
     const docsViewer = `https://docs.google.com/gview?embedded=1&url=${encodeURIComponent(item.src)}`;
     return (jsxRuntime.jsx("object", { data: item.src, type: "application/pdf", className: "h-full w-full bg-card", "aria-label": item.name ?? 'Certificate PDF', children: jsxRuntime.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] = React.useState(() => isEmbedMediaItem(item));
+    if (useEmbed) {
+        return (jsxRuntime.jsx("iframe", { src: item.src, title: item.name ?? '360\u00B0 viewer', className: "h-full w-full border-0 bg-card", allowFullScreen: true }));
+    }
+    return (jsxRuntime.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 (jsxRuntime.jsx("video", { src: item.src, controls: true, className: "h-full w-full object-cover", "aria-label": item.name ?? 'Video' }));
+        return jsxRuntime.jsx(VideoOrEmbed, { item: item });
     }
     if (isPdfMediaItem(item)) {
         return jsxRuntime.jsx(PdfPreview, { item: item });
@@ -65812,7 +65834,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 (jsxRuntime.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 ? (jsxRuntime.jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 bg-muted p-2 text-muted-foreground", children: [jsxRuntime.jsx(Icon, { size: 20 }), jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase", children: "PDF" })] })) : isVideoWithoutThumb ? (jsxRuntime.jsx("div", { className: "h-full w-full flex items-center justify-center bg-muted", children: jsxRuntime.jsx(Icon, { size: 24, className: "text-muted-foreground" }) })) : item.kind === 'video' ? (jsxRuntime.jsx("video", { src: item.thumbSrc ?? item.src, muted: true, playsInline: true, preload: "metadata", className: "h-full w-full object-cover", "aria-hidden": "true" })) : (jsxRuntime.jsx("img", { src: item.thumbSrc ?? item.src, alt: "", className: "h-full w-full object-cover" })), !isPdf && item.kind !== 'image' && !isVideoWithoutThumb && (jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30 text-white", children: jsxRuntime.jsx(Icon, { size: 20 }) })), isVideoWithoutThumb && (jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30" }))] }));
@@ -65833,7 +65855,7 @@ const MediaGallery = ({ items, thumbsVisible = 4, hideTabs = false, mainAspectCl
                 (kinds.length > 0 ? (jsxRuntime.jsx(Tabs, { value: activeKind ?? undefined, onValueChange: (v) => setActiveKind(v), tabStyle: "boxed", size: "sm", children: jsxRuntime.jsx(TabsList, { children: kinds.map((kind) => {
                             const Icon = KIND_ICON[kind];
                             return (jsxRuntime.jsx(TabsTrigger, { value: kind, icon: jsxRuntime.jsx(Icon, { size: 14 }), children: MEDIA_KIND_LABEL[kind] }, kind));
-                        }) }) })) : (jsxRuntime.jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3 z-20", children: jsxRuntime.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: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxRuntime.jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsxRuntime.jsx(MainMedia, { item: selected }), !hideDownload && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3", children: jsxRuntime.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: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "grid gap-3", style: {
+                        }) }) })) : (jsxRuntime.jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3 z-20", children: jsxRuntime.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: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxRuntime.jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsxRuntime.jsx(MainMedia, { item: selected }, selected.id), !hideDownload && !isEmbedMediaItem(selected) && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3", children: jsxRuntime.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: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "grid gap-3", style: {
                     gridTemplateColumns: `repeat(${Math.min(visibleItems.length, thumbsVisible)}, minmax(0, 1fr))`,
                 }, children: visibleItems.slice(0, thumbsVisible).map((item) => (jsxRuntime.jsx(Thumbnail, { item: item, isActive: selected?.id === item.id, onSelect: () => setSelected(item) }, item.id))) }))] }));
 };