@se-studio/core-ui 1.24.5 → 1.24.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/components/HeroLoopVideo.d.ts +2 -2
- package/dist/components/HeroLoopVideo.d.ts.map +1 -1
- package/dist/components/HeroLoopVideo.js +56 -7
- package/dist/components/HeroLoopVideo.js.map +1 -1
- package/dist/components/VisualComponent.d.ts.map +1 -1
- package/dist/components/VisualComponent.js +10 -1
- package/dist/components/VisualComponent.js.map +1 -1
- package/dist/components/heroLoop.d.ts +22 -0
- package/dist/components/heroLoop.d.ts.map +1 -0
- package/dist/components/heroLoop.js +24 -0
- package/dist/components/heroLoop.js.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @se-studio/core-ui
|
|
2
2
|
|
|
3
|
+
## 1.24.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f8a2ec2: Lazy mute-loop hero videos use a 0px IntersectionObserver margin below 1024px so the next stacked card is not fetched on phones.
|
|
8
|
+
|
|
9
|
+
## 1.24.6
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- b6434f7: Ready mute-loop hero packs render a native `<video poster>` (eager: sources in HTML; otherwise data-src + IntersectionObserver). LazyVideo remains for ImageKit, embeds, and click-to-play.
|
|
14
|
+
|
|
3
15
|
## 1.24.5
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -4,10 +4,10 @@ export declare function shouldOfferHero1080(visualSizes?: IVisualSizes): boolean
|
|
|
4
4
|
export declare function heroLoopErrorMessage(error: IHeroDelivery['error'] | 'not_mute_loop'): string;
|
|
5
5
|
export declare function formatHeroDurationSec(durationSec?: number): string | undefined;
|
|
6
6
|
export declare function heroLoopErrorMeta(delivery: IHeroDelivery): string | undefined;
|
|
7
|
-
export declare function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained: _contained, dontCrop, verticalCropPosition, horizontalCropPosition, className, style, }: {
|
|
7
|
+
export declare function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained: _contained, dontCrop, verticalCropPosition, horizontalCropPosition, className, style, loading, fetchPriority, }: {
|
|
8
8
|
delivery: IHeroDelivery;
|
|
9
9
|
dontCrop?: boolean | null;
|
|
10
10
|
verticalCropPosition?: Vertical | null;
|
|
11
11
|
horizontalCropPosition?: Horizontal | null;
|
|
12
|
-
} & Pick<IVideoProps, 'autoPlay' | 'loop' | 'visualSizes' | 'contained' | 'className' | 'style'>): import("react").JSX.Element;
|
|
12
|
+
} & Pick<IVideoProps, 'autoPlay' | 'loop' | 'visualSizes' | 'contained' | 'className' | 'style' | 'loading' | 'fetchPriority'>): import("react").JSX.Element;
|
|
13
13
|
//# sourceMappingURL=HeroLoopVideo.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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"}
|
|
@@ -3,14 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { processSizes } from '@se-studio/core-data-types';
|
|
4
4
|
import { useEffect, useRef } from 'react';
|
|
5
5
|
import { cn } from '../utils/cn';
|
|
6
|
+
import { HERO_LOOP_LAPTOP_MIN_WIDTH, heroLoopAttachRootMargin, isEagerHeroLoop } from './heroLoop';
|
|
6
7
|
import { CONTAINED_VIDEO_CLASSES, CONTENT_VIDEO_CLASSES, calculateCropDetails, shouldShowFullFrameVideo, } from './Visual';
|
|
7
|
-
const LAPTOP_MIN_WIDTH = 1024;
|
|
8
8
|
export function shouldOfferHero1080(visualSizes) {
|
|
9
9
|
if (!visualSizes) {
|
|
10
10
|
return true;
|
|
11
11
|
}
|
|
12
12
|
const processed = processSizes(visualSizes)?.breakpoints;
|
|
13
|
-
const laptop = processed?.find((b) => b.minWidth ===
|
|
13
|
+
const laptop = processed?.find((b) => b.minWidth === HERO_LOOP_LAPTOP_MIN_WIDTH);
|
|
14
14
|
if (laptop?.proportion !== undefined) {
|
|
15
15
|
return laptop.proportion > 0.6;
|
|
16
16
|
}
|
|
@@ -58,8 +58,9 @@ function aspectStyle(width, height) {
|
|
|
58
58
|
}
|
|
59
59
|
return { aspectRatio: '16 / 9' };
|
|
60
60
|
}
|
|
61
|
-
export function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained: _contained, dontCrop, verticalCropPosition, horizontalCropPosition, className, style, }) {
|
|
61
|
+
export function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained: _contained, dontCrop, verticalCropPosition, horizontalCropPosition, className, style, loading, fetchPriority, }) {
|
|
62
62
|
const isMuteLoop = Boolean(autoPlay && loop);
|
|
63
|
+
const isEager = isEagerHeroLoop({ loading, fetchPriority });
|
|
63
64
|
const videoRef = useRef(null);
|
|
64
65
|
const crop = calculateCropDetails({
|
|
65
66
|
dontCrop,
|
|
@@ -73,10 +74,58 @@ export function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained
|
|
|
73
74
|
};
|
|
74
75
|
// Safari autoplay checks the muted property, not only the attribute.
|
|
75
76
|
useEffect(() => {
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
const el = videoRef.current;
|
|
78
|
+
if (!el) {
|
|
79
|
+
return;
|
|
78
80
|
}
|
|
79
|
-
|
|
81
|
+
el.muted = true;
|
|
82
|
+
if (isEager) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
const attachAndPlay = () => {
|
|
86
|
+
if (el.querySelector('source[src]')) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
// data-src-720 does not map to dataset.src720 (digit after the hyphen).
|
|
90
|
+
const src1080 = el.getAttribute('data-src-1080');
|
|
91
|
+
const src720 = el.getAttribute('data-src-720');
|
|
92
|
+
const track = el.querySelector('track');
|
|
93
|
+
const insert = (node) => {
|
|
94
|
+
if (track) {
|
|
95
|
+
el.insertBefore(node, track);
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
el.appendChild(node);
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
if (src1080) {
|
|
102
|
+
const source = document.createElement('source');
|
|
103
|
+
source.src = src1080;
|
|
104
|
+
source.type = 'video/mp4';
|
|
105
|
+
source.media = `(min-width: ${String(HERO_LOOP_LAPTOP_MIN_WIDTH)}px)`;
|
|
106
|
+
insert(source);
|
|
107
|
+
}
|
|
108
|
+
if (src720) {
|
|
109
|
+
const source = document.createElement('source');
|
|
110
|
+
source.src = src720;
|
|
111
|
+
source.type = 'video/mp4';
|
|
112
|
+
insert(source);
|
|
113
|
+
}
|
|
114
|
+
el.load();
|
|
115
|
+
void el.play().catch(() => { });
|
|
116
|
+
};
|
|
117
|
+
const io = new IntersectionObserver((entries) => {
|
|
118
|
+
if (!entries[0]?.isIntersecting) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
io.disconnect();
|
|
122
|
+
attachAndPlay();
|
|
123
|
+
}, { rootMargin: heroLoopAttachRootMargin() });
|
|
124
|
+
io.observe(el);
|
|
125
|
+
return () => {
|
|
126
|
+
io.disconnect();
|
|
127
|
+
};
|
|
128
|
+
}, [isEager]);
|
|
80
129
|
const error = !isMuteLoop
|
|
81
130
|
? 'not_mute_loop'
|
|
82
131
|
: delivery.status === 'rejected' || delivery.status === 'failed'
|
|
@@ -92,6 +141,6 @@ export function HeroLoopVideo({ delivery, autoPlay, loop, visualSizes, contained
|
|
|
92
141
|
const offer1080 = Boolean(delivery.src1080 && shouldOfferHero1080(visualSizes));
|
|
93
142
|
const width = delivery.width && delivery.width > 0 ? delivery.width : 1920;
|
|
94
143
|
const height = delivery.height && delivery.height > 0 ? delivery.height : 1080;
|
|
95
|
-
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", style: { display: 'block', ...crop }, children: [offer1080 && delivery.src1080 ? (_jsx("source", { src: delivery.src1080, media: `(min-width: ${String(
|
|
144
|
+
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 })] }) }));
|
|
96
145
|
}
|
|
97
146
|
//# sourceMappingURL=HeroLoopVideo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeroLoopVideo.js","sourceRoot":"","sources":["../../src/components/HeroLoopVideo.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"HeroLoopVideo.js","sourceRoot":"","sources":["../../src/components/HeroLoopVideo.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VisualComponent.d.ts","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAoB,MAAM,4BAA4B,CAAC;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"VisualComponent.d.ts","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAoB,MAAM,4BAA4B,CAAC;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAU7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CA8J/D,CAAC"}
|
|
@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { isVisualDownload } from '@se-studio/core-data-types';
|
|
3
3
|
import { cn } from '../utils/cn';
|
|
4
4
|
import { UnsupportedWarning } from '../utils/UnsupportedWarning';
|
|
5
|
+
import { HeroLoopVideo } from './HeroLoopVideo';
|
|
6
|
+
import { shouldRenderHeroLoop } from './heroLoop';
|
|
5
7
|
import ImageComponent from './ImageComponent';
|
|
6
8
|
import { LazyAnimation } from './LazyAnimation';
|
|
7
9
|
import { LazyVideo } from './LazyVideo';
|
|
@@ -96,7 +98,14 @@ export const Visual = ({ visual, muted, controls, autoPlay, visualSizes, fullPla
|
|
|
96
98
|
content = (_jsx(LazyAnimation, { ...props, animation: animation, autoPlay: autoPlay, loop: loop, loopDelay: loopDelay, analyticsContext: analyticsContext, componentLabel: componentLabel, className: cn(className, mask && 'size-full object-cover'), style: mask ? undefined : style }));
|
|
97
99
|
}
|
|
98
100
|
else if (video) {
|
|
99
|
-
|
|
101
|
+
const videoClassName = cn(className, mask && 'size-full object-cover');
|
|
102
|
+
const videoStyle = mask ? undefined : style;
|
|
103
|
+
if (shouldRenderHeroLoop(video, { autoPlay, loop })) {
|
|
104
|
+
content = (_jsx(HeroLoopVideo, { delivery: video.heroDelivery, autoPlay: video.autoPlay ?? autoPlay, loop: video.loop ?? loop, visualSizes: visualSizes, contained: contained, dontCrop: video.dontCrop, verticalCropPosition: video.verticalCropPosition, horizontalCropPosition: video.horizontalCropPosition, loading: props.loading, fetchPriority: props.fetchPriority, className: videoClassName, style: videoStyle }));
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
content = (_jsx(LazyVideo, { ...props, video: video, autoPlay: autoPlay, muted: muted, controls: controls, visualSizes: visualSizes, fullPlayer: fullPlayer, loop: loop, contained: contained, analyticsContext: analyticsContext, componentLabel: componentLabel, className: videoClassName, style: videoStyle }));
|
|
108
|
+
}
|
|
100
109
|
}
|
|
101
110
|
else if (image) {
|
|
102
111
|
content = (_jsx(ImageComponent, { ...props, image: image, visualSizes: visualSizes, className: cn(className, mask && 'size-full object-cover'), style: mask ? undefined : style }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VisualComponent.js","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC;;;GAGG;AACH,SAAS,SAAS,CAAC,IAAY;IAC7B,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AACzD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,MAAM,CAAC,MAAM,MAAM,GAAiD,CAAC,EACnE,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,IAAI,EACJ,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE3D,qCAAqC;IACrC,IAAI,OAAwB,CAAC;IAE7B,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,GAAG,CACR,KAAC,aAAa,OACR,KAAK,EACT,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,wBAAwB,CAAC,EAC1D,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAC/B,CACH,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,EAAE,CAAC;QACjB,OAAO,GAAG,CACR,KAAC,SAAS,OACJ,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"VisualComponent.js","sourceRoot":"","sources":["../../src/components/VisualComponent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { IHeroDelivery, IVideo } from '@se-studio/core-data-types';
|
|
2
|
+
export type HeroLoopVisualHints = {
|
|
3
|
+
autoPlay?: boolean;
|
|
4
|
+
loop?: boolean;
|
|
5
|
+
loading?: 'eager' | 'lazy';
|
|
6
|
+
fetchPriority?: 'high' | 'low';
|
|
7
|
+
};
|
|
8
|
+
/** Mute-loop with a ready hero pack — render native HeroLoopVideo instead of LazyVideo. */
|
|
9
|
+
export declare function shouldRenderHeroLoop(video: IVideo | undefined | null, props?: Pick<HeroLoopVisualHints, 'autoPlay' | 'loop'>): video is IVideo & {
|
|
10
|
+
heroDelivery: IHeroDelivery & {
|
|
11
|
+
status: 'ready';
|
|
12
|
+
src720: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare function isEagerHeroLoop(props?: Pick<HeroLoopVisualHints, 'loading' | 'fetchPriority'>): boolean;
|
|
16
|
+
/** Laptop breakpoint for 1080 `<source media>` and lazy-attach rootMargin. */
|
|
17
|
+
export declare const HERO_LOOP_LAPTOP_MIN_WIDTH = 1024;
|
|
18
|
+
export declare const HERO_LOOP_ATTACH_ROOT_MARGIN_DESKTOP = "400px";
|
|
19
|
+
export declare const HERO_LOOP_ATTACH_ROOT_MARGIN_MOBILE = "0px";
|
|
20
|
+
/** Prefetch distance for lazy mute-loops. 0 below laptop width so the next card is not fetched. */
|
|
21
|
+
export declare function heroLoopAttachRootMargin(matchesMinWidth?: (query: string) => boolean): string;
|
|
22
|
+
//# sourceMappingURL=heroLoop.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"heroLoop.d.ts","sourceRoot":"","sources":["../../src/components/heroLoop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAExE,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC,CAAC;AAEF,2FAA2F;AAC3F,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAChC,KAAK,GAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,MAAM,CAAM,GACzD,KAAK,IAAI,MAAM,GAAG;IAAE,YAAY,EAAE,aAAa,GAAG;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAQzF;AAED,wBAAgB,eAAe,CAC7B,KAAK,GAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,eAAe,CAAM,GACjE,OAAO,CAET;AAED,8EAA8E;AAC9E,eAAO,MAAM,0BAA0B,OAAO,CAAC;AAC/C,eAAO,MAAM,oCAAoC,UAAU,CAAC;AAC5D,eAAO,MAAM,mCAAmC,QAAQ,CAAC;AAEzD,mGAAmG;AACnG,wBAAgB,wBAAwB,CACtC,eAAe,GAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAC+B,GAClE,MAAM,CAIR"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/** Mute-loop with a ready hero pack — render native HeroLoopVideo instead of LazyVideo. */
|
|
2
|
+
export function shouldRenderHeroLoop(video, props = {}) {
|
|
3
|
+
if (!video) {
|
|
4
|
+
return false;
|
|
5
|
+
}
|
|
6
|
+
const autoPlay = video.autoPlay ?? props.autoPlay;
|
|
7
|
+
const loop = video.loop ?? props.loop;
|
|
8
|
+
const delivery = video.heroDelivery;
|
|
9
|
+
return Boolean(autoPlay && loop && delivery?.status === 'ready' && delivery.src720);
|
|
10
|
+
}
|
|
11
|
+
export function isEagerHeroLoop(props = {}) {
|
|
12
|
+
return props.loading === 'eager' || props.fetchPriority === 'high';
|
|
13
|
+
}
|
|
14
|
+
/** Laptop breakpoint for 1080 `<source media>` and lazy-attach rootMargin. */
|
|
15
|
+
export const HERO_LOOP_LAPTOP_MIN_WIDTH = 1024;
|
|
16
|
+
export const HERO_LOOP_ATTACH_ROOT_MARGIN_DESKTOP = '400px';
|
|
17
|
+
export const HERO_LOOP_ATTACH_ROOT_MARGIN_MOBILE = '0px';
|
|
18
|
+
/** Prefetch distance for lazy mute-loops. 0 below laptop width so the next card is not fetched. */
|
|
19
|
+
export function heroLoopAttachRootMargin(matchesMinWidth = (query) => typeof window !== 'undefined' && window.matchMedia(query).matches) {
|
|
20
|
+
return matchesMinWidth(`(min-width: ${String(HERO_LOOP_LAPTOP_MIN_WIDTH)}px)`)
|
|
21
|
+
? HERO_LOOP_ATTACH_ROOT_MARGIN_DESKTOP
|
|
22
|
+
: HERO_LOOP_ATTACH_ROOT_MARGIN_MOBILE;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=heroLoop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"heroLoop.js","sourceRoot":"","sources":["../../src/components/heroLoop.ts"],"names":[],"mappings":"AASA,2FAA2F;AAC3F,MAAM,UAAU,oBAAoB,CAClC,KAAgC,EAChC,QAAwD,EAAE;IAE1D,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;IAClD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,OAAO,OAAO,CAAC,QAAQ,IAAI,IAAI,IAAI,QAAQ,EAAE,MAAM,KAAK,OAAO,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC;AACtF,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,QAAgE,EAAE;IAElE,OAAO,KAAK,CAAC,OAAO,KAAK,OAAO,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,CAAC;AACrE,CAAC;AAED,8EAA8E;AAC9E,MAAM,CAAC,MAAM,0BAA0B,GAAG,IAAI,CAAC;AAC/C,MAAM,CAAC,MAAM,oCAAoC,GAAG,OAAO,CAAC;AAC5D,MAAM,CAAC,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAEzD,mGAAmG;AACnG,MAAM,UAAU,wBAAwB,CACtC,kBAA8C,CAAC,KAAK,EAAE,EAAE,CACtD,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO;IAEnE,OAAO,eAAe,CAAC,eAAe,MAAM,CAAC,0BAA0B,CAAC,KAAK,CAAC;QAC5E,CAAC,CAAC,oCAAoC;QACtC,CAAC,CAAC,mCAAmC,CAAC;AAC1C,CAAC"}
|