@se-studio/core-ui 0.0.0-next16-20260822103555

package/dist/components/ExternalVimeoEmbed.js

@@ -0,0 +1,211 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAnalytics } from '../analytics/useAnalytics';
+import { useVideoEngagement } from '../analytics/video/useVideoEngagement';
+import { useExternalVideoPlayButton } from '../context/ExternalVideoPlayButtonContext';
+import { cn } from '../utils/cn';
+import { DefaultExternalVideoPlayButton } from './DefaultExternalVideoPlayButton';
+import { LocalVideoPlayChrome } from './LocalVideoPlayChrome';
+import { calculateCropDetails } from './Visual';
+const PLAYBACK_REVEAL_TIMEOUT_MS = 12_000;
+function getHighResThumbnail(url, embedWidth, embedHeight) {
+    const longEdge = 1280;
+    const [w, h] = embedHeight > embedWidth
+        ? [Math.round((longEdge * embedWidth) / embedHeight), longEdge]
+        : [longEdge, Math.round((longEdge * embedHeight) / embedWidth)];
+    return url.replace(/d_\d+x\d+/, `d_${w}x${h}`);
+}
+function getVimeoHash(url) {
+    const queryMatch = url.match(/[?&]h=([^&]+)/);
+    if (queryMatch?.[1])
+        return queryMatch[1];
+    const pathMatch = url.match(/vimeo\.com\/(?:video\/)?\d+\/([a-zA-Z0-9]+)/);
+    return pathMatch?.[1] ?? null;
+}
+function buildVimeoEmbedSrc(vimeoId, externalUrl, options) {
+    const params = new URLSearchParams();
+    const hash = getVimeoHash(externalUrl);
+    if (hash) {
+        params.set('h', hash);
+    }
+    if (options.autoplay) {
+        params.set('autoplay', '1');
+        if (options.background) {
+            params.set('muted', '1');
+            params.set('background', '1');
+        }
+    }
+    if (options.loop) {
+        params.set('loop', '1');
+    }
+    if (options.dnt) {
+        params.set('dnt', '1');
+    }
+    const qs = params.toString();
+    return `https://player.vimeo.com/video/${vimeoId}${qs ? `?${qs}` : ''}`;
+}
+function ExternalVimeoEmbed({ video, style, className, vimeoId, analyticsContext, componentLabel, autoPlay, loop, externalVideoPlayButton, startPlaybackOnMount = false, }) {
+    const [hasActivated, setHasActivated] = useState(!!startPlaybackOnMount && !autoPlay);
+    /** Cover (poster + chrome) stays until real playback starts. */
+    const [isPlaying, setIsPlaying] = useState(false);
+    const clickTrackedRef = useRef(false);
+    const { trackClick } = useAnalytics();
+    const iframeRef = useRef(null);
+    const embed = video.embed;
+    const cropProperties = calculateCropDetails(video);
+    const fullStyle = {
+        ...style,
+        ...cropProperties,
+        aspectRatio: embed?.width && embed.height ? `${embed.width / embed.height}` : undefined,
+    };
+    const dnt = !!analyticsContext?.dnt;
+    const rawPoster = video.poster ?? embed?.thumbnailUrl;
+    const poster = rawPoster && !video.poster && embed?.width && embed?.height
+        ? getHighResThumbnail(rawPoster, embed.width, embed.height)
+        : rawPoster;
+    const playButtonFromContext = useExternalVideoPlayButton();
+    const playButtonContent = externalVideoPlayButton ?? playButtonFromContext;
+    const engagementEnabled = !autoPlay && !!analyticsContext;
+    const { sessionRef, rootRef } = useVideoEngagement({
+        identity: {
+            video_provider: 'vimeo',
+            video_id: vimeoId,
+            video_title: video.name,
+            video_url: video.external,
+            location: componentLabel ?? undefined,
+        },
+        analyticsContext,
+        enabled: engagementEnabled,
+    });
+    // Reveal player when Vimeo reports play (or after timeout so we never stick on cover).
+    useEffect(() => {
+        if (!hasActivated || autoPlay)
+            return;
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        let cancelled = false;
+        let player = null;
+        let lastTime = 0;
+        const reveal = () => {
+            if (cancelled)
+                return;
+            setIsPlaying(true);
+        };
+        const timeoutId = window.setTimeout(reveal, PLAYBACK_REVEAL_TIMEOUT_MS);
+        let handlers = null;
+        const bind = async () => {
+            try {
+                const Player = (await import('@vimeo/player')).default;
+                if (cancelled)
+                    return;
+                player = new Player(iframe);
+                handlers = {
+                    onPlay: () => {
+                        reveal();
+                        if (engagementEnabled) {
+                            void player?.getMuted().then((muted) => {
+                                sessionRef.current?.onPlay(!!muted);
+                            });
+                        }
+                    },
+                    onPause: () => {
+                        sessionRef.current?.onPause();
+                    },
+                    onTimeUpdate: (data) => {
+                        lastTime = data.seconds;
+                        sessionRef.current?.onTime(data.seconds, data.duration);
+                    },
+                    onSeeked: (data) => {
+                        sessionRef.current?.onSeek(lastTime, data.seconds, data.duration);
+                        lastTime = data.seconds;
+                    },
+                    onEnded: () => {
+                        void player?.getDuration().then((duration) => {
+                            sessionRef.current?.onEnded(duration ?? 0);
+                        });
+                    },
+                    onVolumeChange: () => {
+                        void player?.getMuted().then((muted) => {
+                            sessionRef.current?.onMuteChange(!!muted);
+                        });
+                    },
+                    onFullscreenChange: (data) => {
+                        sessionRef.current?.onFullscreen(!!data.fullscreen);
+                    },
+                };
+                player.on('play', handlers.onPlay);
+                if (engagementEnabled) {
+                    player.on('pause', handlers.onPause);
+                    player.on('timeupdate', handlers.onTimeUpdate);
+                    player.on('seeked', handlers.onSeeked);
+                    player.on('ended', handlers.onEnded);
+                    player.on('volumechange', handlers.onVolumeChange);
+                    player.on('fullscreenchange', handlers.onFullscreenChange);
+                }
+                // Already playing (race with autoplay)
+                try {
+                    const paused = await player.getPaused();
+                    if (!paused)
+                        reveal();
+                }
+                catch {
+                    // ignore
+                }
+            }
+            catch {
+                reveal();
+            }
+        };
+        void bind();
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timeoutId);
+            if (player && handlers) {
+                player.off('play', handlers.onPlay);
+                player.off('pause', handlers.onPause);
+                player.off('timeupdate', handlers.onTimeUpdate);
+                player.off('seeked', handlers.onSeeked);
+                player.off('ended', handlers.onEnded);
+                player.off('volumechange', handlers.onVolumeChange);
+                player.off('fullscreenchange', handlers.onFullscreenChange);
+            }
+        };
+    }, [hasActivated, autoPlay, engagementEnabled, sessionRef]);
+    // Intentional: trackClick = "opened player"; video_start fires when playback begins.
+    const trackOpenClick = useCallback(() => {
+        if (analyticsContext && !clickTrackedRef.current) {
+            clickTrackedRef.current = true;
+            trackClick('ExternalVideo', video.name, analyticsContext, {
+                location: componentLabel ?? undefined,
+            });
+        }
+    }, [analyticsContext, video.name, componentLabel, trackClick]);
+    useEffect(() => {
+        if (startPlaybackOnMount && !autoPlay) {
+            trackOpenClick();
+        }
+    }, [startPlaybackOnMount, autoPlay, trackOpenClick]);
+    if (autoPlay) {
+        return (_jsx("div", { className: cn('relative w-full overflow-hidden', className), style: fullStyle, children: _jsx("iframe", { src: buildVimeoEmbedSrc(vimeoId, video.external, {
+                    autoplay: true,
+                    background: true,
+                    loop,
+                    dnt,
+                }), title: video.name, className: "absolute inset-0 h-full w-full border-0", frameBorder: "0", 
+                // Chrome default strips the path on cross-origin player requests (Vimeo reports "/").
+                referrerPolicy: "no-referrer-when-downgrade", allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true }) }));
+    }
+    function handlePlay() {
+        setHasActivated(true);
+        trackOpenClick();
+    }
+    const showCover = !isPlaying;
+    return (_jsxs("div", { ref: rootRef, className: cn('relative w-full overflow-hidden bg-neutral-900', className), style: fullStyle, children: [hasActivated && (_jsx("iframe", { ref: iframeRef, src: buildVimeoEmbedSrc(vimeoId, video.external, { autoplay: true, loop, dnt }), title: video.name, className: "absolute inset-0 h-full w-full border-0", frameBorder: "0", 
+                // Chrome default strips the path on cross-origin player requests (Vimeo reports "/").
+                referrerPolicy: "no-referrer-when-downgrade", allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true })), showCover && (_jsxs("div", { className: "absolute inset-0 z-10", children: [poster && (_jsx(Image, { src: poster, alt: video.name, width: video.width ?? 1920, height: video.height ?? 1080, style: { objectFit: 'cover' }, sizes: "100vw", className: "h-full w-full" })), _jsx(LocalVideoPlayChrome, { label: `Play video: ${video.name}`, onPlay: handlePlay, loading: hasActivated && !isPlaying, playButton: playButtonContent ?? _jsx(DefaultExternalVideoPlayButton, {}) })] }))] }));
+}
+export default ExternalVimeoEmbed;
+//# sourceMappingURL=ExternalVimeoEmbed.js.map

package/dist/components/ExternalVimeoEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalVimeoEmbed.js","sourceRoot":"","sources":["../../src/components/ExternalVimeoEmbed.tsx"],"names":[],"mappings":"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"}

package/dist/components/ExternalYouTubeEmbed.d.ts

@@ -0,0 +1,9 @@
+import type { IAnalyticsContext, IExternalVideo } from '@se-studio/core-data-types';
+import type { IVideoProps } from './Video';
+export declare function ExternalYoutubeEmbed({ video, style, className, youTubeId, analyticsContext, componentLabel, autoPlay, loop, externalVideoPlayButton, startPlaybackOnMount, }: {
+    video: IExternalVideo;
+    youTubeId: string;
+    analyticsContext: IAnalyticsContext | null | undefined;
+    componentLabel: string | null | undefined;
+} & IVideoProps): import("react").JSX.Element;
+//# sourceMappingURL=ExternalYouTubeEmbed.d.ts.map

package/dist/components/ExternalYouTubeEmbed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalYouTubeEmbed.d.ts","sourceRoot":"","sources":["../../src/components/ExternalYouTubeEmbed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAiBpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA0C3C,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,uBAAuB,EACvB,oBAA4B,GAC7B,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,cAAc,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CAC3C,GAAG,WAAW,+BAwOd"}

package/dist/components/ExternalYouTubeEmbed.js

@@ -0,0 +1,220 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAnalytics } from '../analytics/useAnalytics';
+import { loadYouTubeIframeApi, YT_ENDED, YT_PAUSED, YT_PLAYING, } from '../analytics/video/loadYouTubeIframeApi';
+import { useVideoEngagement } from '../analytics/video/useVideoEngagement';
+import { useExternalVideoPlayButton } from '../context/ExternalVideoPlayButtonContext';
+import { cn } from '../utils/cn';
+import { DefaultExternalVideoPlayButton } from './DefaultExternalVideoPlayButton';
+import { LocalVideoPlayChrome } from './LocalVideoPlayChrome';
+import { calculateCropDetails } from './Visual';
+const PLAYBACK_REVEAL_TIMEOUT_MS = 12_000;
+function buildYouTubeEmbedSrc(youTubeId, options) {
+    const base = options.dnt
+        ? 'https://www.youtube-nocookie.com/embed/'
+        : 'https://www.youtube.com/embed/';
+    const params = new URLSearchParams();
+    if (options.autoplay) {
+        params.set('autoplay', '1');
+    }
+    if (options.background) {
+        params.set('mute', '1');
+        params.set('controls', '0');
+    }
+    if (options.loop) {
+        params.set('loop', '1');
+        // YouTube requires playlist= equal to the video ID for looping in iframes
+        params.set('playlist', youTubeId);
+    }
+    params.set('rel', '0');
+    if (options.enableJsApi) {
+        params.set('enablejsapi', '1');
+        if (typeof window !== 'undefined' && window.location?.origin) {
+            params.set('origin', window.location.origin);
+        }
+    }
+    const qs = params.toString();
+    return `${base}${youTubeId}${qs ? `?${qs}` : ''}`;
+}
+export function ExternalYoutubeEmbed({ video, style, className, youTubeId, analyticsContext, componentLabel, autoPlay, loop, externalVideoPlayButton, startPlaybackOnMount = false, }) {
+    const [hasActivated, setHasActivated] = useState(!!startPlaybackOnMount && !autoPlay);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const clickTrackedRef = useRef(false);
+    const { trackClick } = useAnalytics();
+    const iframeRef = useRef(null);
+    const embed = video.embed;
+    const cropProperties = calculateCropDetails(video);
+    const fullStyle = {
+        ...style,
+        ...cropProperties,
+        aspectRatio: embed?.width && embed.height ? `${embed.width / embed.height}` : undefined,
+    };
+    const dnt = !!analyticsContext?.dnt;
+    const poster = video.poster ?? embed?.thumbnailUrl;
+    const playButtonFromContext = useExternalVideoPlayButton();
+    const playButtonContent = externalVideoPlayButton ?? playButtonFromContext;
+    const engagementEnabled = !autoPlay && !!analyticsContext;
+    const { sessionRef, rootRef } = useVideoEngagement({
+        identity: {
+            video_provider: 'youtube',
+            video_id: youTubeId,
+            video_title: video.name,
+            video_url: video.external,
+            location: componentLabel ?? undefined,
+        },
+        analyticsContext,
+        enabled: engagementEnabled,
+    });
+    useEffect(() => {
+        if (!hasActivated || autoPlay)
+            return;
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        let cancelled = false;
+        let player = null;
+        let pollId = null;
+        let lastTime = 0;
+        let wasPlaying = false;
+        const reveal = () => {
+            if (cancelled)
+                return;
+            setIsPlaying(true);
+        };
+        const timeoutId = window.setTimeout(reveal, PLAYBACK_REVEAL_TIMEOUT_MS);
+        const stopPoll = () => {
+            if (pollId != null) {
+                clearInterval(pollId);
+                pollId = null;
+            }
+        };
+        const startPoll = () => {
+            if (!engagementEnabled)
+                return;
+            stopPoll();
+            pollId = setInterval(() => {
+                if (!player)
+                    return;
+                try {
+                    const t = player.getCurrentTime();
+                    const d = player.getDuration();
+                    sessionRef.current?.onTime(t, d);
+                    lastTime = t;
+                }
+                catch {
+                    // player may be destroyed
+                }
+            }, 1000);
+        };
+        const onFullscreenChange = () => {
+            const fsEl = document.fullscreenElement;
+            const frame = iframeRef.current;
+            const isFs = !!frame && (fsEl === frame || (fsEl != null && (fsEl === frame || fsEl.contains(frame))));
+            sessionRef.current?.onFullscreen(isFs);
+        };
+        if (engagementEnabled) {
+            document.addEventListener('fullscreenchange', onFullscreenChange);
+        }
+        void (async () => {
+            try {
+                const YTPlayer = await loadYouTubeIframeApi();
+                if (cancelled || !iframeRef.current)
+                    return;
+                player = new YTPlayer(iframeRef.current, {
+                    events: {
+                        onStateChange: (event) => {
+                            const p = event.target;
+                            try {
+                                if (event.data === YT_PLAYING) {
+                                    reveal();
+                                    const muted = p.isMuted();
+                                    if (engagementEnabled && !wasPlaying) {
+                                        sessionRef.current?.onPlay(muted);
+                                        wasPlaying = true;
+                                    }
+                                    startPoll();
+                                }
+                                else if (event.data === YT_PAUSED && engagementEnabled) {
+                                    wasPlaying = false;
+                                    sessionRef.current?.onPause();
+                                    stopPoll();
+                                    try {
+                                        const t = p.getCurrentTime();
+                                        const d = p.getDuration();
+                                        if (Math.abs(t - lastTime) > 1) {
+                                            sessionRef.current?.onSeek(lastTime, t, d);
+                                        }
+                                        lastTime = t;
+                                    }
+                                    catch {
+                                        // ignore
+                                    }
+                                }
+                                else if (event.data === YT_ENDED && engagementEnabled) {
+                                    wasPlaying = false;
+                                    stopPoll();
+                                    sessionRef.current?.onEnded(p.getDuration());
+                                }
+                            }
+                            catch {
+                                // ignore
+                            }
+                        },
+                    },
+                });
+            }
+            catch {
+                reveal();
+            }
+        })();
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timeoutId);
+            stopPoll();
+            if (engagementEnabled) {
+                document.removeEventListener('fullscreenchange', onFullscreenChange);
+            }
+            try {
+                player?.destroy();
+            }
+            catch {
+                // ignore
+            }
+        };
+    }, [hasActivated, autoPlay, engagementEnabled, sessionRef]);
+    // Intentional: trackClick = "opened player"; video_start fires when playback begins.
+    const trackOpenClick = useCallback(() => {
+        if (analyticsContext && !clickTrackedRef.current) {
+            clickTrackedRef.current = true;
+            trackClick('ExternalVideo', video.name, analyticsContext, {
+                location: componentLabel ?? undefined,
+            });
+        }
+    }, [analyticsContext, video.name, componentLabel, trackClick]);
+    useEffect(() => {
+        if (startPlaybackOnMount && !autoPlay) {
+            trackOpenClick();
+        }
+    }, [startPlaybackOnMount, autoPlay, trackOpenClick]);
+    if (autoPlay) {
+        return (_jsx("div", { className: cn('relative w-full overflow-hidden', className), style: fullStyle, children: _jsx("iframe", { src: buildYouTubeEmbedSrc(youTubeId, { autoplay: true, background: true, loop, dnt }), title: video.name, className: "absolute inset-0 h-full w-full border-0", frameBorder: "0", 
+                // Chrome default strips the path on cross-origin player requests (source reports "/").
+                referrerPolicy: "no-referrer-when-downgrade", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }));
+    }
+    function handlePlay() {
+        setHasActivated(true);
+        trackOpenClick();
+    }
+    const showCover = !isPlaying;
+    return (_jsxs("div", { ref: rootRef, className: cn('relative w-full overflow-hidden bg-neutral-900', className), style: fullStyle, children: [hasActivated && (_jsx("iframe", { ref: iframeRef, src: buildYouTubeEmbedSrc(youTubeId, {
+                    autoplay: true,
+                    loop,
+                    dnt,
+                    enableJsApi: true,
+                }), title: video.name, className: "absolute inset-0 h-full w-full border-0", frameBorder: "0", 
+                // Chrome default strips the path on cross-origin player requests (source reports "/").
+                referrerPolicy: "no-referrer-when-downgrade", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true })), showCover && (_jsxs("div", { className: "absolute inset-0 z-10", children: [poster && (_jsx(Image, { src: poster, alt: video.name, width: video.width ?? 1920, height: video.height ?? 1080, style: { objectFit: 'cover' }, sizes: "100vw", className: "h-full w-full" })), _jsx(LocalVideoPlayChrome, { label: `Play video: ${video.name}`, onPlay: handlePlay, loading: hasActivated && !isPlaying, playButton: playButtonContent ?? _jsx(DefaultExternalVideoPlayButton, {}) })] }))] }));
+}
+//# sourceMappingURL=ExternalYouTubeEmbed.js.map

package/dist/components/ExternalYouTubeEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalYouTubeEmbed.js","sourceRoot":"","sources":["../../src/components/ExternalYouTubeEmbed.tsx"],"names":[],"mappings":"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"}

package/dist/components/HeroLoopVideo.d.ts

@@ -0,0 +1,13 @@
+import type { Horizontal, IHeroDelivery, IVisualSizes, Vertical } from '@se-studio/core-data-types';
+import type { IVideoProps } from './Video';
+export declare function shouldOfferHero1080(visualSizes?: IVisualSizes): boolean;
+export declare function heroLoopErrorMessage(error: IHeroDelivery['error'] | 'not_mute_loop'): string;
+export declare function formatHeroDurationSec(durationSec?: number): string | undefined;
+export declare function heroLoopErrorMeta(delivery: IHeroDelivery): string | undefined;
+export declare function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained: _contained, dontCrop, verticalCropPosition, horizontalCropPosition, className, style, loading, fetchPriority, }: {
+    delivery: IHeroDelivery;
+    dontCrop?: boolean | null;
+    verticalCropPosition?: Vertical | null;
+    horizontalCropPosition?: Horizontal | null;
+} & Pick<IVideoProps, 'autoPlay' | 'loop' | 'visualSizes' | 'contained' | 'className' | 'style' | 'loading' | 'fetchPriority'>): import("react").JSX.Element;
+//# sourceMappingURL=HeroLoopVideo.d.ts.map

package/dist/components/HeroLoopVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroLoopVideo.d.ts","sourceRoot":"","sources":["../../src/components/HeroLoopVideo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAKpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQ3C,wBAAgB,mBAAmB,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,OAAO,CAUvE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,eAAe,GAAG,MAAM,CAc5F;AAED,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAM9E;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,aAAa,GAAG,MAAM,GAAG,SAAS,CAa7E;AASD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,SAAS,EAAE,UAAU,EACrB,QAAQ,EACR,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,oBAAoB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvC,sBAAsB,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5C,GAAG,IAAI,CACN,WAAW,EACT,UAAU,GACV,MAAM,GACN,aAAa,GACb,WAAW,GACX,WAAW,GACX,OAAO,GACP,SAAS,GACT,eAAe,CAClB,+BA0IA"}

package/dist/components/HeroLoopVideo.js

@@ -0,0 +1,146 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { processSizes } from '@se-studio/core-data-types';
+import { useEffect, useRef } from 'react';
+import { cn } from '../utils/cn';
+import { HERO_LOOP_LAPTOP_MIN_WIDTH, heroLoopAttachRootMargin, isEagerHeroLoop } from './heroLoop';
+import { CONTAINED_VIDEO_CLASSES, CONTENT_VIDEO_CLASSES, calculateCropDetails, shouldShowFullFrameVideo, } from './Visual';
+export function shouldOfferHero1080(visualSizes) {
+    if (!visualSizes) {
+        return true;
+    }
+    const processed = processSizes(visualSizes)?.breakpoints;
+    const laptop = processed?.find((b) => b.minWidth === HERO_LOOP_LAPTOP_MIN_WIDTH);
+    if (laptop?.proportion !== undefined) {
+        return laptop.proportion > 0.6;
+    }
+    return true;
+}
+export function heroLoopErrorMessage(error) {
+    switch (error) {
+        case 'too_long':
+            return 'This local video is longer than 30 seconds. Use Vimeo or YouTube.';
+        case 'not_mute_loop':
+            return 'Local video is only for mute looping heroes. Turn on Autoplay and Loop, or use Vimeo / YouTube.';
+        case 'no_video_stream':
+        case 'unsupported_type':
+            return 'This file is not a playable video.';
+        case 'encode_failed':
+            return 'This video could not be processed.';
+        default:
+            return 'This video is not available.';
+    }
+}
+export function formatHeroDurationSec(durationSec) {
+    if (durationSec === undefined || !Number.isFinite(durationSec)) {
+        return undefined;
+    }
+    const rounded = Math.round(durationSec * 10) / 10;
+    return Number.isInteger(rounded) ? `${String(rounded)}s` : `${rounded.toFixed(1)}s`;
+}
+export function heroLoopErrorMeta(delivery) {
+    const parts = [];
+    if (delivery.sourceName) {
+        parts.push(delivery.sourceName);
+    }
+    if (delivery.width && delivery.height) {
+        parts.push(`${String(delivery.width)} × ${String(delivery.height)}`);
+    }
+    const duration = formatHeroDurationSec(delivery.durationSec);
+    if (duration) {
+        parts.push(duration);
+    }
+    return parts.length > 0 ? parts.join(' · ') : undefined;
+}
+function aspectStyle(width, height) {
+    if (width && height && width > 0 && height > 0) {
+        return { aspectRatio: `${String(width)} / ${String(height)}` };
+    }
+    return { aspectRatio: '16 / 9' };
+}
+export function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained: _contained, dontCrop, verticalCropPosition, horizontalCropPosition, className, style, loading, fetchPriority, }) {
+    const isMuteLoop = Boolean(autoPlay && loop);
+    const isEager = isEagerHeroLoop({ loading, fetchPriority });
+    const videoRef = useRef(null);
+    const crop = calculateCropDetails({
+        dontCrop,
+        verticalCropPosition,
+        horizontalCropPosition,
+    });
+    const showFullFrame = shouldShowFullFrameVideo(dontCrop, crop.objectFit);
+    const boxStyle = {
+        ...aspectStyle(delivery.width, delivery.height),
+        ...style,
+    };
+    // Safari autoplay checks the muted property, not only the attribute.
+    useEffect(() => {
+        const el = videoRef.current;
+        if (!el) {
+            return;
+        }
+        el.muted = true;
+        if (isEager) {
+            return;
+        }
+        const attachAndPlay = () => {
+            if (el.querySelector('source[src]')) {
+                return;
+            }
+            // data-src-720 does not map to dataset.src720 (digit after the hyphen).
+            const src1080 = el.getAttribute('data-src-1080');
+            const src720 = el.getAttribute('data-src-720');
+            const track = el.querySelector('track');
+            const insert = (node) => {
+                if (track) {
+                    el.insertBefore(node, track);
+                }
+                else {
+                    el.appendChild(node);
+                }
+            };
+            if (src1080) {
+                const source = document.createElement('source');
+                source.src = src1080;
+                source.type = 'video/mp4';
+                source.media = `(min-width: ${String(HERO_LOOP_LAPTOP_MIN_WIDTH)}px)`;
+                insert(source);
+            }
+            if (src720) {
+                const source = document.createElement('source');
+                source.src = src720;
+                source.type = 'video/mp4';
+                insert(source);
+            }
+            el.load();
+            void el.play().catch(() => { });
+        };
+        const io = new IntersectionObserver((entries) => {
+            if (!entries[0]?.isIntersecting) {
+                return;
+            }
+            io.disconnect();
+            attachAndPlay();
+        }, { rootMargin: heroLoopAttachRootMargin() });
+        io.observe(el);
+        return () => {
+            io.disconnect();
+        };
+    }, [isEager]);
+    const error = !isMuteLoop
+        ? 'not_mute_loop'
+        : delivery.status === 'rejected' || delivery.status === 'failed'
+            ? (delivery.error ?? 'encode_failed')
+            : undefined;
+    if (error) {
+        const meta = heroLoopErrorMeta(delivery);
+        return (_jsxs("div", { className: cn('relative box-border flex w-full flex-col items-center justify-center gap-2 border border-neutral-400 bg-black/[0.03] px-4 py-6 text-center text-sm text-neutral-600', className), style: boxStyle, role: "status", children: [_jsx("p", { children: heroLoopErrorMessage(error) }), meta ? _jsx("p", { className: "font-mono text-xs text-neutral-500", children: meta }) : null] }));
+    }
+    if (delivery.status !== 'ready' || !delivery.src720) {
+        return (_jsx("div", { className: cn('relative w-full bg-black/5', className), style: boxStyle, "aria-hidden": true }));
+    }
+    const offer1080 = Boolean(delivery.src1080 && shouldOfferHero1080(visualSizes));
+    const width = delivery.width && delivery.width > 0 ? delivery.width : 1920;
+    const height = delivery.height && delivery.height > 0 ? delivery.height : 1080;
+    return (_jsx("div", { className: cn('relative block w-full', className), style: boxStyle, children: _jsxs("video", { ref: videoRef, poster: delivery.poster, "aria-hidden": true, className: cn(showFullFrame ? CONTENT_VIDEO_CLASSES : CONTAINED_VIDEO_CLASSES), playsInline: true, autoPlay: true, loop: true, muted: true, controls: false, width: width, height: height, preload: "none", "data-src-720": isEager ? undefined : delivery.src720, "data-src-1080": isEager || !offer1080 ? undefined : delivery.src1080, style: { display: 'block', ...crop }, children: [isEager && offer1080 && delivery.src1080 ? (_jsx("source", { src: delivery.src1080, media: `(min-width: ${String(HERO_LOOP_LAPTOP_MIN_WIDTH)}px)`, type: "video/mp4" })) : null, isEager ? _jsx("source", { src: delivery.src720, type: "video/mp4" }) : null, _jsx("track", { kind: "captions", default: true })] }) }));
+}
+//# sourceMappingURL=HeroLoopVideo.js.map