unified-video-framework 1.4.331 → 1.4.333
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/package.json +1 -1
- package/packages/web/dist/react/components/commerce/ProductBadge.d.ts.map +1 -1
- package/packages/web/dist/react/components/commerce/ProductBadge.js +25 -30
- package/packages/web/dist/react/components/commerce/ProductBadge.js.map +1 -1
- package/packages/web/src/react/components/commerce/ProductBadge.tsx +31 -33
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unified-video-framework",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.333",
|
|
4
4
|
"description": "Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more",
|
|
5
5
|
"main": "packages/core/dist/index.js",
|
|
6
6
|
"types": "packages/core/dist/index.d.ts",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductBadge.d.ts","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEjF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ProductBadge.d.ts","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEjF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,qBAuGxE"}
|
|
@@ -9,52 +9,47 @@ export default function ProductBadge({ product, overlay, onClick }) {
|
|
|
9
9
|
const checkPauseState = () => {
|
|
10
10
|
const video = document.querySelector('.uvf-video');
|
|
11
11
|
if (video) {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
const newPausedState = video.paused;
|
|
13
|
+
setIsPaused(newPausedState);
|
|
14
|
+
console.log('[COMMERCE] Video paused state:', newPausedState, 'video element:', !!video);
|
|
14
15
|
}
|
|
15
16
|
};
|
|
16
17
|
const checkControlsVisible = () => {
|
|
17
18
|
const wrapper = document.querySelector('.uvf-player-wrapper');
|
|
18
19
|
const visible = wrapper?.classList.contains('controls-visible') ?? false;
|
|
19
20
|
setControlsVisible(visible);
|
|
20
|
-
console.log('[COMMERCE] Controls visible
|
|
21
|
+
console.log('[COMMERCE] Controls visible:', visible);
|
|
21
22
|
};
|
|
22
23
|
const video = document.querySelector('.uvf-video');
|
|
23
24
|
const wrapper = document.querySelector('.uvf-player-wrapper');
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
checkPauseState();
|
|
28
|
-
}
|
|
25
|
+
console.log('[COMMERCE] Setup - video element found:', !!video, 'wrapper found:', !!wrapper);
|
|
26
|
+
const pausePollInterval = setInterval(checkPauseState, 100);
|
|
27
|
+
let observer = null;
|
|
29
28
|
if (wrapper) {
|
|
30
|
-
|
|
29
|
+
observer = new MutationObserver(checkControlsVisible);
|
|
31
30
|
observer.observe(wrapper, { attributes: true, attributeFilter: ['class'] });
|
|
32
31
|
checkControlsVisible();
|
|
33
|
-
return () => {
|
|
34
|
-
if (video) {
|
|
35
|
-
video.removeEventListener('play', checkPauseState);
|
|
36
|
-
video.removeEventListener('pause', checkPauseState);
|
|
37
|
-
}
|
|
38
|
-
observer.disconnect();
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
if (video) {
|
|
42
|
-
return () => {
|
|
43
|
-
video.removeEventListener('play', checkPauseState);
|
|
44
|
-
video.removeEventListener('pause', checkPauseState);
|
|
45
|
-
};
|
|
46
32
|
}
|
|
47
|
-
|
|
33
|
+
checkPauseState();
|
|
34
|
+
return () => {
|
|
35
|
+
clearInterval(pausePollInterval);
|
|
36
|
+
if (observer) {
|
|
37
|
+
observer.disconnect();
|
|
38
|
+
}
|
|
39
|
+
};
|
|
48
40
|
}, []);
|
|
49
|
-
console.log('[COMMERCE]
|
|
41
|
+
console.log('[COMMERCE] Rendering - isPaused:', isPaused, 'controlsVisible:', controlsVisible);
|
|
42
|
+
const placementMode = overlay.placement?.mode ?? "dock";
|
|
43
|
+
const placementEdge = overlay.placement?.mode === "dock" ? (overlay.placement?.edge ?? "bottom") : undefined;
|
|
50
44
|
const base = {
|
|
51
45
|
position: "fixed",
|
|
52
|
-
bottom:
|
|
46
|
+
bottom: placementMode === "dock" && placementEdge === "bottom"
|
|
53
47
|
? ((isPaused || controlsVisible) ? 155 : 16)
|
|
54
|
-
:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
: placementMode !== "anchor" ? ((isPaused || controlsVisible) ? 155 : 16)
|
|
49
|
+
: undefined,
|
|
50
|
+
top: placementMode === "dock" && placementEdge === "top" ? 25 : undefined,
|
|
51
|
+
left: placementMode === "dock" && placementEdge === "left" ? 25 : (placementMode === "anchor" ? undefined : 25),
|
|
52
|
+
right: placementMode === "dock" && placementEdge === "right" ? 25 : undefined,
|
|
58
53
|
background: "rgba(0,0,0,0.6)",
|
|
59
54
|
backdropFilter: "blur(8px)",
|
|
60
55
|
border: "1px solid rgba(255,255,255,0.2)",
|
|
@@ -68,7 +63,7 @@ export default function ProductBadge({ product, overlay, onClick }) {
|
|
|
68
63
|
zIndex: overlay.behavior?.zIndex ?? 300,
|
|
69
64
|
transition: "bottom 0.3s ease",
|
|
70
65
|
};
|
|
71
|
-
if (
|
|
66
|
+
if (placementMode === "anchor" && overlay.placement && 'x' in overlay.placement && 'y' in overlay.placement) {
|
|
72
67
|
base.left = `calc(${overlay.placement.x}% - 60px)`;
|
|
73
68
|
base.top = `calc(${overlay.placement.y}% - 20px)`;
|
|
74
69
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductBadge.js","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASnD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAS;IACvE,OAAO,CAAC,GAAG,CAAC,uCAAuC,EAAE,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAChF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC;IAC5D,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC;IAG5D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAqB,CAAC;YACvE,IAAI,KAAK,EAAE;gBACT,
|
|
1
|
+
{"version":3,"file":"ProductBadge.js","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductBadge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,8 +19,9 @@ export default function ProductBadge({ product, overlay, onClick }: Props) {
|
|
|
19
19
|
const checkPauseState = () => {
|
|
20
20
|
const video = document.querySelector('.uvf-video') as HTMLVideoElement;
|
|
21
21
|
if (video) {
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
const newPausedState = video.paused;
|
|
23
|
+
setIsPaused(newPausedState);
|
|
24
|
+
console.log('[COMMERCE] Video paused state:', newPausedState, 'video element:', !!video);
|
|
24
25
|
}
|
|
25
26
|
};
|
|
26
27
|
|
|
@@ -28,55 +29,52 @@ export default function ProductBadge({ product, overlay, onClick }: Props) {
|
|
|
28
29
|
const wrapper = document.querySelector('.uvf-player-wrapper') as HTMLElement | null;
|
|
29
30
|
const visible = wrapper?.classList.contains('controls-visible') ?? false;
|
|
30
31
|
setControlsVisible(visible);
|
|
31
|
-
console.log('[COMMERCE] Controls visible
|
|
32
|
+
console.log('[COMMERCE] Controls visible:', visible);
|
|
32
33
|
};
|
|
33
34
|
|
|
34
|
-
// Check on mount and whenever video events occur
|
|
35
35
|
const video = document.querySelector('.uvf-video') as HTMLVideoElement;
|
|
36
36
|
const wrapper = document.querySelector('.uvf-player-wrapper') as HTMLElement | null;
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
38
|
+
console.log('[COMMERCE] Setup - video element found:', !!video, 'wrapper found:', !!wrapper);
|
|
39
|
+
|
|
40
|
+
// Poll pause state every 100ms instead of relying on events
|
|
41
|
+
const pausePollInterval = setInterval(checkPauseState, 100);
|
|
43
42
|
|
|
44
|
-
// Monitor controls visibility
|
|
43
|
+
// Monitor controls visibility with mutation observer
|
|
44
|
+
let observer: MutationObserver | null = null;
|
|
45
45
|
if (wrapper) {
|
|
46
|
-
|
|
46
|
+
observer = new MutationObserver(checkControlsVisible);
|
|
47
47
|
observer.observe(wrapper, { attributes: true, attributeFilter: ['class'] });
|
|
48
48
|
checkControlsVisible();
|
|
49
|
-
|
|
50
|
-
return () => {
|
|
51
|
-
if (video) {
|
|
52
|
-
video.removeEventListener('play', checkPauseState);
|
|
53
|
-
video.removeEventListener('pause', checkPauseState);
|
|
54
|
-
}
|
|
55
|
-
observer.disconnect();
|
|
56
|
-
};
|
|
57
49
|
}
|
|
58
50
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
video.removeEventListener('play', checkPauseState);
|
|
62
|
-
video.removeEventListener('pause', checkPauseState);
|
|
63
|
-
};
|
|
64
|
-
}
|
|
51
|
+
// Also check on mount
|
|
52
|
+
checkPauseState();
|
|
65
53
|
|
|
66
|
-
return
|
|
54
|
+
return () => {
|
|
55
|
+
clearInterval(pausePollInterval);
|
|
56
|
+
if (observer) {
|
|
57
|
+
observer.disconnect();
|
|
58
|
+
}
|
|
59
|
+
};
|
|
67
60
|
}, []);
|
|
68
61
|
|
|
69
|
-
console.log('[COMMERCE]
|
|
62
|
+
console.log('[COMMERCE] Rendering - isPaused:', isPaused, 'controlsVisible:', controlsVisible);
|
|
70
63
|
|
|
64
|
+
// Default to dock-bottom if no placement specified
|
|
65
|
+
const placementMode = overlay.placement?.mode ?? "dock";
|
|
66
|
+
const placementEdge = overlay.placement?.mode === "dock" ? (overlay.placement?.edge ?? "bottom") : undefined;
|
|
67
|
+
|
|
71
68
|
const base: React.CSSProperties = {
|
|
72
69
|
position: "fixed",
|
|
73
|
-
//
|
|
74
|
-
bottom:
|
|
70
|
+
// Default to bottom positioning
|
|
71
|
+
bottom: placementMode === "dock" && placementEdge === "bottom"
|
|
75
72
|
? ((isPaused || controlsVisible) ? 155 : 16)
|
|
73
|
+
: placementMode !== "anchor" ? ((isPaused || controlsVisible) ? 155 : 16)
|
|
76
74
|
: undefined,
|
|
77
|
-
top:
|
|
78
|
-
left:
|
|
79
|
-
right:
|
|
75
|
+
top: placementMode === "dock" && placementEdge === "top" ? 25 : undefined,
|
|
76
|
+
left: placementMode === "dock" && placementEdge === "left" ? 25 : (placementMode === "anchor" ? undefined : 25),
|
|
77
|
+
right: placementMode === "dock" && placementEdge === "right" ? 25 : undefined,
|
|
80
78
|
background: "rgba(0,0,0,0.6)",
|
|
81
79
|
backdropFilter: "blur(8px)",
|
|
82
80
|
border: "1px solid rgba(255,255,255,0.2)",
|
|
@@ -92,7 +90,7 @@ export default function ProductBadge({ product, overlay, onClick }: Props) {
|
|
|
92
90
|
};
|
|
93
91
|
|
|
94
92
|
// anchor placement in % of video frame
|
|
95
|
-
if (
|
|
93
|
+
if (placementMode === "anchor" && overlay.placement && 'x' in overlay.placement && 'y' in overlay.placement) {
|
|
96
94
|
base.left = `calc(${overlay.placement.x}% - 60px)`;
|
|
97
95
|
base.top = `calc(${overlay.placement.y}% - 20px)`;
|
|
98
96
|
}
|