@se-studio/core-ui 1.0.77 → 1.0.79
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 +23 -0
- package/dist/components/ExternalVimeoEmbed.d.ts.map +1 -1
- package/dist/components/ExternalVimeoEmbed.js +57 -3
- package/dist/components/ExternalVimeoEmbed.js.map +1 -1
- package/dist/components/ImageKitClientVideo.d.ts.map +1 -1
- package/dist/components/ImageKitClientVideo.js +28 -9
- package/dist/components/ImageKitClientVideo.js.map +1 -1
- package/dist/components/ImageKitHlsVideoClient.d.ts +13 -0
- package/dist/components/ImageKitHlsVideoClient.d.ts.map +1 -0
- package/dist/components/ImageKitHlsVideoClient.js +51 -0
- package/dist/components/ImageKitHlsVideoClient.js.map +1 -0
- package/dist/components/LocalVideoServer.d.ts.map +1 -1
- package/dist/components/LocalVideoServer.js +24 -1
- package/dist/components/LocalVideoServer.js.map +1 -1
- package/package.json +7 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @se-studio/core-ui
|
|
2
2
|
|
|
3
|
+
## 1.0.79
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Bulk version bump: patch for all packages
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @se-studio/contentful-rest-api@1.0.79
|
|
10
|
+
- @se-studio/core-data-types@1.0.79
|
|
11
|
+
|
|
12
|
+
## 1.0.78
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Bulk version bump: patch for all packages
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
- @se-studio/contentful-rest-api@1.0.78
|
|
19
|
+
- @se-studio/core-data-types@1.0.78
|
|
20
|
+
|
|
3
21
|
## 1.0.77
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -115,6 +133,11 @@
|
|
|
115
133
|
- **CmsRendererConfig.previewHelpers** is now **required**. Apps must pass `previewHelpers` (and optionally `fetchHelpers`) on the renderer config so components and collections can use `getPreviewFieldProps(rendererConfig, id, fieldId)` without importing from cms-server. See `docs/SERVER_CLIENT_BOUNDARIES.md`.
|
|
116
134
|
- **BackgroundMedia** no longer accepts `analyticsContext`. Section-level background media is not used for analytics tracking.
|
|
117
135
|
|
|
136
|
+
### Documentation
|
|
137
|
+
|
|
138
|
+
- **CmsContent** expects `pageContext`, `contents`, `rendererConfig`, and optionally `analyticsContext` (not `content`/`config`). Pass `analyticsContext` for link/click tracking.
|
|
139
|
+
- **SectionLinks** (app-level element) requires `rendererConfig`; for correct tracking also pass `trackingLocation` (e.g. `cmsLabel`) and `analyticsContext` (e.g. `contentContext?.analyticsContext`).
|
|
140
|
+
|
|
118
141
|
## 1.0.65
|
|
119
142
|
|
|
120
143
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalVimeoEmbed.d.ts","sourceRoot":"","sources":["../../src/components/ExternalVimeoEmbed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"ExternalVimeoEmbed.d.ts","sourceRoot":"","sources":["../../src/components/ExternalVimeoEmbed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAKpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAqG3C,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,cAAc,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CAC3C,GAAG,WAAW,2CA4Dd;AAED,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,8 +1,57 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from 'next/image';
|
|
4
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
5
|
import { cn } from '../utils/cn';
|
|
5
6
|
import { calculateCropDetails } from './Visual';
|
|
7
|
+
function getVimeoHash(url) {
|
|
8
|
+
const queryMatch = url.match(/[?&]h=([^&]+)/);
|
|
9
|
+
if (queryMatch?.[1])
|
|
10
|
+
return queryMatch[1];
|
|
11
|
+
const pathMatch = url.match(/vimeo\.com\/(?:video\/)?\d+\/([a-zA-Z0-9]+)/);
|
|
12
|
+
return pathMatch?.[1] ?? null;
|
|
13
|
+
}
|
|
14
|
+
function buildVimeoEmbedSrc(vimeoId, externalUrl, options) {
|
|
15
|
+
const params = new URLSearchParams();
|
|
16
|
+
const hash = getVimeoHash(externalUrl);
|
|
17
|
+
if (hash) {
|
|
18
|
+
params.set('h', hash);
|
|
19
|
+
}
|
|
20
|
+
if (options.autoplay) {
|
|
21
|
+
params.set('autoplay', '1');
|
|
22
|
+
params.set('muted', '1');
|
|
23
|
+
params.set('background', '1');
|
|
24
|
+
if (options.loop) {
|
|
25
|
+
params.set('loop', '1');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const qs = params.toString();
|
|
29
|
+
return `https://player.vimeo.com/video/${vimeoId}${qs ? `?${qs}` : ''}`;
|
|
30
|
+
}
|
|
31
|
+
function AutoplayVimeoIframe({ video, vimeoId, style, className, loop, }) {
|
|
32
|
+
const containerRef = useRef(null);
|
|
33
|
+
const [shouldLoad, setShouldLoad] = useState(false);
|
|
34
|
+
const embed = video.embed;
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
const el = containerRef.current;
|
|
37
|
+
if (!el)
|
|
38
|
+
return;
|
|
39
|
+
const io = new IntersectionObserver((entries) => {
|
|
40
|
+
const entry = entries[0];
|
|
41
|
+
if (entry?.isIntersecting) {
|
|
42
|
+
setShouldLoad(true);
|
|
43
|
+
}
|
|
44
|
+
}, { rootMargin: '50px', threshold: 0 });
|
|
45
|
+
io.observe(el);
|
|
46
|
+
return () => io.disconnect();
|
|
47
|
+
}, []);
|
|
48
|
+
const fullStyle = {
|
|
49
|
+
...style,
|
|
50
|
+
...calculateCropDetails(video),
|
|
51
|
+
aspectRatio: embed ? `${embed.width / embed.height}` : undefined,
|
|
52
|
+
};
|
|
53
|
+
return (_jsxs("div", { ref: containerRef, className: cn('relative w-full overflow-hidden', className), style: fullStyle, children: [!shouldLoad && video.poster && (_jsx(Image, { src: video.poster, alt: video.name, width: video.width ?? 1920, height: video.height ?? 1080, style: { objectFit: 'cover' }, sizes: "100vw", className: "h-full w-full" })), shouldLoad && (_jsx("iframe", { src: buildVimeoEmbedSrc(vimeoId, video.external, { autoplay: true, loop: loop ?? false }), title: video.name, className: "absolute inset-0 h-full w-full border-0", allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true }))] }));
|
|
54
|
+
}
|
|
6
55
|
function ExternalVimeoEmbed({ video, style, className, vimeoId, analyticsContext, componentLabel, autoPlay, loop, ...props }) {
|
|
7
56
|
const cropProperties = calculateCropDetails(video);
|
|
8
57
|
const embed = video.embed;
|
|
@@ -11,9 +60,14 @@ function ExternalVimeoEmbed({ video, style, className, vimeoId, analyticsContext
|
|
|
11
60
|
...cropProperties,
|
|
12
61
|
aspectRatio: embed ? `${embed.width / embed.height}` : undefined,
|
|
13
62
|
};
|
|
14
|
-
|
|
63
|
+
if (autoPlay) {
|
|
64
|
+
return (_jsx(AutoplayVimeoIframe, { video: video, vimeoId: vimeoId, style: style, className: className, loop: loop }));
|
|
65
|
+
}
|
|
66
|
+
const vimeoHash = getVimeoHash(video.external);
|
|
67
|
+
const useIframe = vimeoHash !== null;
|
|
68
|
+
return (_jsx("div", { className: cn('w-full', className), style: fullStyle, children: useIframe ? (_jsx("iframe", { src: buildVimeoEmbedSrc(vimeoId, video.external, { autoplay: false }), title: video.name, className: "h-full w-full border-0", allow: "fullscreen; picture-in-picture", allowFullScreen: true })) : (_jsx("lite-vimeo", { videoid: vimeoId, title: video.name, className: "h-full w-full", autoload: true, ...props, children: video.poster && (_jsx(Image, { slot: "image", src: video.poster, alt: video.name, width: video.width ?? 1920, height: video.height ?? 1080, style: {
|
|
15
69
|
objectFit: 'cover',
|
|
16
|
-
}, sizes: "100vw", className: "h-full w-full" })) }) }));
|
|
70
|
+
}, sizes: "100vw", className: "h-full w-full" })) })) }));
|
|
17
71
|
}
|
|
18
72
|
export default ExternalVimeoEmbed;
|
|
19
73
|
//# sourceMappingURL=ExternalVimeoEmbed.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalVimeoEmbed.js","sourceRoot":"","sources":["../../src/components/ExternalVimeoEmbed.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,SAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EAMK;IACb,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAC1B,MAAM,SAAS,GAAkB;QAC/B,GAAG,KAAK;QACR,GAAG,cAAc;QACjB,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS;KACjE,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"ExternalVimeoEmbed.js","sourceRoot":"","sources":["../../src/components/ExternalVimeoEmbed.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageKitClientVideo.d.ts","sourceRoot":"","sources":["../../src/components/ImageKitClientVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAmC,MAAM,4BAA4B,CAAC;AACjG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageKitClientVideo.d.ts","sourceRoot":"","sources":["../../src/components/ImageKitClientVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAmC,MAAM,4BAA4B,CAAC;AACjG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgE3C,iBAAS,aAAa,CAAC,EACrB,GAAG,EACH,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,oBAAoB,EACpB,sBAAsB,EACtB,KAAK,EACL,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC,GAC/D,WAAW,2CA+CZ;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -1,18 +1,37 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { processSizes } from '@se-studio/core-data-types';
|
|
3
3
|
import { calculateCropDetails } from './Visual';
|
|
4
|
+
/** Extra viewport widths for high-DPI video sources (srcset-style). */
|
|
5
|
+
const VIDEO_EXPANSION_VIEWPORTS = [1280, 1920, 2560, 3840];
|
|
6
|
+
function expandBreakpointsForVideo(breakpoints) {
|
|
7
|
+
if (!breakpoints?.length)
|
|
8
|
+
return breakpoints ?? [];
|
|
9
|
+
const sorted = [...breakpoints].sort((a, b) => a.minWidth - b.minWidth);
|
|
10
|
+
const max = sorted[sorted.length - 1];
|
|
11
|
+
if (!max)
|
|
12
|
+
return breakpoints;
|
|
13
|
+
const ratio = max.pixels / max.minWidth;
|
|
14
|
+
const existingWidths = new Set(breakpoints.map((b) => b.minWidth));
|
|
15
|
+
const expanded = [...sorted];
|
|
16
|
+
for (const vw of VIDEO_EXPANSION_VIEWPORTS) {
|
|
17
|
+
if (vw > max.minWidth && !existingWidths.has(vw)) {
|
|
18
|
+
expanded.push({ minWidth: vw, pixels: Math.round(vw * ratio) });
|
|
19
|
+
existingWidths.add(vw);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return expanded.sort((a, b) => a.minWidth - b.minWidth);
|
|
23
|
+
}
|
|
4
24
|
const VideoSources = ({ baseSrc, videoPrefix, width, visualSizes }) => {
|
|
5
25
|
if (!visualSizes) {
|
|
6
26
|
return _jsx("source", { src: `${videoPrefix}${baseSrc}`, type: "video/mp4" });
|
|
7
27
|
}
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return maxWidth ? (_jsx("source", { src: `${videoPrefix}${baseSrc}?tr=w-${pixels}`, media: `(max-width: ${maxWidth}px)`, type: "video/mp4" }, minWidth)) : null;
|
|
28
|
+
const processed = processSizes(visualSizes)?.breakpoints;
|
|
29
|
+
const expanded = expandBreakpointsForVideo(processed);
|
|
30
|
+
const sizes = expanded
|
|
31
|
+
.filter((x) => !width || x.pixels < width)
|
|
32
|
+
.sort((a, b) => b.minWidth - a.minWidth);
|
|
33
|
+
return (_jsxs(_Fragment, { children: [sizes?.map(({ minWidth, pixels }) => {
|
|
34
|
+
return (_jsx("source", { src: `${videoPrefix}${baseSrc}?tr=w-${pixels}`, media: `(min-width: ${minWidth}px)`, type: "video/mp4" }, minWidth));
|
|
16
35
|
}), visualSizes.defaultPixels ? (_jsx("source", { src: `${videoPrefix}${baseSrc}?tr=w-${visualSizes.defaultPixels}`, type: "video/mp4" })) : (_jsx("source", { src: `${videoPrefix}${baseSrc}`, type: "video/mp4" }))] }));
|
|
17
36
|
};
|
|
18
37
|
function ImageKitVideo({ url, videoPrefix, autoPlay, loop, muted, controls, style, poster, dontCrop, verticalCropPosition, horizontalCropPosition, width, height, visualSizes, loading, fetchPriority, noPoster, ...props }) {
|
|
@@ -33,7 +52,7 @@ function ImageKitVideo({ url, videoPrefix, autoPlay, loop, muted, controls, styl
|
|
|
33
52
|
? 'auto'
|
|
34
53
|
: loading === 'lazy'
|
|
35
54
|
? 'metadata'
|
|
36
|
-
: undefined, fetchPriority: fetchPriority, ...props, poster: realPoster, children: [_jsx(VideoSources, { videoPrefix: videoPrefix, baseSrc: baseSrc, visualSizes: visualSizes }), realMuted && _jsx("track", { kind: "captions", default: true })] }));
|
|
55
|
+
: undefined, fetchPriority: fetchPriority, ...props, poster: realPoster, children: [_jsx(VideoSources, { width: width, videoPrefix: videoPrefix, baseSrc: baseSrc, visualSizes: visualSizes }), realMuted && _jsx("track", { kind: "captions", default: true })] }));
|
|
37
56
|
}
|
|
38
57
|
export default ImageKitVideo;
|
|
39
58
|
//# sourceMappingURL=ImageKitClientVideo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageKitClientVideo.js","sourceRoot":"","sources":["../../src/components/ImageKitClientVideo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyC,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEjG,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,
|
|
1
|
+
{"version":3,"file":"ImageKitClientVideo.js","sourceRoot":"","sources":["../../src/components/ImageKitClientVideo.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { IVideoProps } from './Video';
|
|
2
|
+
interface ImageKitHlsVideoClientProps extends Omit<IVideoProps, 'poster'> {
|
|
3
|
+
hlsSrc: string;
|
|
4
|
+
/** Optional MP4 URL used when HLS fails fatally (e.g. unsupported codec or network error). */
|
|
5
|
+
fallbackMp4Url?: string | null;
|
|
6
|
+
poster?: string | null;
|
|
7
|
+
width?: number;
|
|
8
|
+
height?: number;
|
|
9
|
+
noPoster?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export default function ImageKitHlsVideoClient({ hlsSrc, fallbackMp4Url, autoPlay, loop, muted, controls, style, poster, width, height, loading, fetchPriority, noPoster, visualSizes: _visualSizes, ...props }: ImageKitHlsVideoClientProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=ImageKitHlsVideoClient.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageKitHlsVideoClient.d.ts","sourceRoot":"","sources":["../../src/components/ImageKitHlsVideoClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,UAAU,2BAA4B,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACvE,MAAM,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,MAAM,EACN,cAAc,EACd,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAa,EACb,QAAQ,EACR,WAAW,EAAE,YAAY,EACzB,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAyE7B"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
export default function ImageKitHlsVideoClient({ hlsSrc, fallbackMp4Url, autoPlay, loop, muted, controls, style, poster, width, height, loading, fetchPriority, noPoster, visualSizes: _visualSizes, ...props }) {
|
|
5
|
+
const videoRef = useRef(null);
|
|
6
|
+
const [useFallbackMp4, setUseFallbackMp4] = useState(false);
|
|
7
|
+
const realAutoPlay = !!autoPlay;
|
|
8
|
+
const realMuted = muted ?? realAutoPlay;
|
|
9
|
+
const realControls = !realAutoPlay || controls;
|
|
10
|
+
const realPoster = noPoster ? undefined : (poster ?? undefined);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (useFallbackMp4)
|
|
13
|
+
return;
|
|
14
|
+
const video = videoRef.current;
|
|
15
|
+
if (!video)
|
|
16
|
+
return;
|
|
17
|
+
let hlsInstance = null;
|
|
18
|
+
const setupHls = async () => {
|
|
19
|
+
const Hls = (await import('hls.js')).default;
|
|
20
|
+
if (!Hls.isSupported()) {
|
|
21
|
+
if (fallbackMp4Url)
|
|
22
|
+
setUseFallbackMp4(true);
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
hlsInstance = new Hls();
|
|
26
|
+
hlsInstance.loadSource(hlsSrc);
|
|
27
|
+
hlsInstance.attachMedia(video);
|
|
28
|
+
hlsInstance.on(Hls.Events.ERROR, (_event, data) => {
|
|
29
|
+
if (data.fatal) {
|
|
30
|
+
hlsInstance?.destroy();
|
|
31
|
+
hlsInstance = null;
|
|
32
|
+
if (fallbackMp4Url)
|
|
33
|
+
setUseFallbackMp4(true);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
setupHls();
|
|
38
|
+
return () => {
|
|
39
|
+
if (hlsInstance) {
|
|
40
|
+
hlsInstance.destroy();
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
}, [hlsSrc, fallbackMp4Url, useFallbackMp4]);
|
|
44
|
+
const useMp4 = useFallbackMp4 && fallbackMp4Url;
|
|
45
|
+
return (_jsx("video", { ref: videoRef, src: useMp4 ? fallbackMp4Url : undefined, "aria-hidden": realMuted && loop, playsInline: true, autoPlay: realAutoPlay, loop: loop, muted: realMuted, controls: realControls, style: style, width: width, height: height, poster: realPoster ?? undefined, preload: fetchPriority === 'high' || loading === 'eager'
|
|
46
|
+
? 'auto'
|
|
47
|
+
: loading === 'lazy'
|
|
48
|
+
? 'metadata'
|
|
49
|
+
: undefined, fetchPriority: fetchPriority, ...props, children: realMuted && _jsx("track", { kind: "captions", default: true }) }));
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=ImageKitHlsVideoClient.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageKitHlsVideoClient.js","sourceRoot":"","sources":["../../src/components/ImageKitHlsVideoClient.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocalVideoServer.d.ts","sourceRoot":"","sources":["../../src/components/LocalVideoServer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"LocalVideoServer.d.ts","sourceRoot":"","sources":["../../src/components/LocalVideoServer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsC3C,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAC9B;IACE,KAAK,EAAE,WAAW,CAAC;IACnB,gBAAgB,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,cAAc,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CAC3C,GAAG,WAAW,CAqEhB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import ImageKitVideo from './ImageKitClientVideo';
|
|
3
|
+
import ImageKitHlsVideoClient from './ImageKitHlsVideoClient';
|
|
4
|
+
import { calculateCropDetails } from './Visual';
|
|
3
5
|
async function tryGetVideoMetadata(url) {
|
|
4
6
|
const imagekitUrl = process.env.IMAGEKIT_URL;
|
|
5
7
|
const privateKey = process.env.IMAGEKIT_PRIVATE_KEY;
|
|
@@ -25,7 +27,28 @@ async function tryGetVideoMetadata(url) {
|
|
|
25
27
|
}
|
|
26
28
|
const LocalVideoServer = async ({ video, autoPlay, loop, controls, poster, analyticsContext, componentLabel, ...props }) => {
|
|
27
29
|
const videoMetadata = await tryGetVideoMetadata(video.preview.videoUrl);
|
|
28
|
-
|
|
30
|
+
const useHls = process.env.IMAGEKIT_VIDEO_HLS === 'true' || process.env.IMAGEKIT_VIDEO_HLS === '1';
|
|
31
|
+
const resolvedAutoPlay = video.autoPlay ?? autoPlay;
|
|
32
|
+
const resolvedLoop = video.loop ?? loop;
|
|
33
|
+
const resolvedControls = !video.hideControls && controls;
|
|
34
|
+
const resolvedPoster = video.poster ?? poster;
|
|
35
|
+
if (useHls) {
|
|
36
|
+
const fullUrl = new URL(video.preview.videoUrl);
|
|
37
|
+
const pathname = fullUrl.pathname;
|
|
38
|
+
const basePath = pathname.replace(/\/$/, '');
|
|
39
|
+
const mp4Extension = pathname.endsWith('.mp4') ? '' : '/ik-video.mp4';
|
|
40
|
+
const representations = process.env.IMAGEKIT_VIDEO_HLS_REPRESENTATIONS ?? '240_360_480_720_1080';
|
|
41
|
+
const hlsSrc = `${video.videoPrefix}${basePath}/ik-master.m3u8?tr=sr-${representations}`;
|
|
42
|
+
const fallbackMp4Url = `${video.videoPrefix}${pathname}${mp4Extension}`;
|
|
43
|
+
const posterUrl = resolvedPoster ?? `${video.videoPrefix}${pathname}${mp4Extension}/ik-thumbnail.jpg`;
|
|
44
|
+
const cropStyle = calculateCropDetails({
|
|
45
|
+
dontCrop: video.dontCrop,
|
|
46
|
+
verticalCropPosition: video.verticalCropPosition,
|
|
47
|
+
horizontalCropPosition: video.horizontalCropPosition,
|
|
48
|
+
});
|
|
49
|
+
return (_jsx(ImageKitHlsVideoClient, { hlsSrc: hlsSrc, fallbackMp4Url: fallbackMp4Url, width: videoMetadata?.width, height: videoMetadata?.height, autoPlay: resolvedAutoPlay, loop: resolvedLoop, controls: resolvedControls, poster: posterUrl, style: { ...props.style, ...cropStyle }, ...props }));
|
|
50
|
+
}
|
|
51
|
+
return (_jsx(ImageKitVideo, { url: video.preview.videoUrl, videoPrefix: video.videoPrefix, width: videoMetadata?.width, height: videoMetadata?.height, autoPlay: resolvedAutoPlay, loop: resolvedLoop, controls: resolvedControls, poster: resolvedPoster, dontCrop: video.dontCrop, verticalCropPosition: video.verticalCropPosition, horizontalCropPosition: video.horizontalCropPosition, ...props }));
|
|
29
52
|
};
|
|
30
53
|
export default LocalVideoServer;
|
|
31
54
|
//# sourceMappingURL=LocalVideoServer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocalVideoServer.js","sourceRoot":"","sources":["../../src/components/LocalVideoServer.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"LocalVideoServer.js","sourceRoot":"","sources":["../../src/components/LocalVideoServer.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAClD,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAWhD,KAAK,UAAU,mBAAmB,CAAC,GAAW;IAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC;IAC7C,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;IACpD,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;IAC7D,CAAC;IACD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,GAAG,GAAG,GAAG,WAAW,GAAG,OAAO,CAAC,QAAQ,eAAe,CAAC;IAE7D,MAAM,OAAO,GAAG,2CAA2C,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;IACrF,MAAM,WAAW,GAAgB;QAC/B,MAAM,EAAE,KAAK;QACb,OAAO,EAAE;YACP,aAAa,EAAE,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;SAC3E;QACD,KAAK,EAAE,aAAa;KACrB,CAAC;IACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IACnD,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAA8B,CAAC;QACtE,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,gBAAgB,GAMlB,KAAK,EAAE,EACT,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACxE,MAAM,MAAM,GACV,OAAO,CAAC,GAAG,CAAC,kBAAkB,KAAK,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,KAAK,GAAG,CAAC;IAEtF,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC;IACpD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC;IACxC,MAAM,gBAAgB,GAAG,CAAC,KAAK,CAAC,YAAY,IAAI,QAAQ,CAAC;IACzD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC;IAE9C,IAAI,MAAM,EAAE,CAAC;QACX,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC7C,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;QACtE,MAAM,eAAe,GACnB,OAAO,CAAC,GAAG,CAAC,kCAAkC,IAAI,sBAAsB,CAAC;QAC3E,MAAM,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,GAAG,QAAQ,yBAAyB,eAAe,EAAE,CAAC;QACzF,MAAM,cAAc,GAAG,GAAG,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,YAAY,EAAE,CAAC;QACxE,MAAM,SAAS,GACb,cAAc,IAAI,GAAG,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,YAAY,mBAAmB,CAAC;QACtF,MAAM,SAAS,GAAG,oBAAoB,CAAC;YACrC,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,oBAAoB,EAAE,KAAK,CAAC,oBAAoB;YAChD,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;SACrD,CAAC,CAAC;QAEH,OAAO,CACL,KAAC,sBAAsB,IACrB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,aAAa,EAAE,KAAK,EAC3B,MAAM,EAAE,aAAa,EAAE,MAAM,EAC7B,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,SAAS,EAAE,KACnC,KAAK,GACT,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,aAAa,IACZ,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,EAC3B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,aAAa,EAAE,KAAK,EAC3B,MAAM,EAAE,aAAa,EAAE,MAAM,EAC7B,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,EAChD,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,KAChD,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@se-studio/core-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.79",
|
|
4
4
|
"description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -49,21 +49,22 @@
|
|
|
49
49
|
"react-dom": "^19.2.0"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@contentful/live-preview": "^4.9.
|
|
52
|
+
"@contentful/live-preview": "^4.9.5",
|
|
53
53
|
"@contentful/rich-text-react-renderer": "^16.1.6",
|
|
54
54
|
"@contentful/rich-text-types": "^17.2.5",
|
|
55
55
|
"@extractus/oembed-extractor": "^4.0.9",
|
|
56
56
|
"@radix-ui/react-slot": "^1.2.4",
|
|
57
57
|
"@types/mustache": "4.2.6",
|
|
58
58
|
"clsx": "^2.1.1",
|
|
59
|
+
"hls.js": "^1.6.15",
|
|
59
60
|
"html-entities": "^2.6.0",
|
|
60
61
|
"mustache": "4.2.0",
|
|
61
|
-
"tailwind-merge": "^3.
|
|
62
|
-
"@se-studio/contentful-rest-api": "1.0.
|
|
63
|
-
"@se-studio/core-data-types": "1.0.
|
|
62
|
+
"tailwind-merge": "^3.5.0",
|
|
63
|
+
"@se-studio/contentful-rest-api": "1.0.79",
|
|
64
|
+
"@se-studio/core-data-types": "1.0.79"
|
|
64
65
|
},
|
|
65
66
|
"devDependencies": {
|
|
66
|
-
"@biomejs/biome": "^2.3
|
|
67
|
+
"@biomejs/biome": "^2.4.3",
|
|
67
68
|
"@types/node": "^22.19.11",
|
|
68
69
|
"@types/react": "^19.2.14",
|
|
69
70
|
"@types/react-dom": "^19.2.3",
|