unified-video-framework 1.4.320 → 1.4.321
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 +5 -1
- package/packages/web/dist/react/components/commerce/ProductBadge.js.map +1 -1
- package/packages/web/dist/react/components/commerce/ProductPanel.d.ts.map +1 -1
- package/packages/web/dist/react/components/commerce/ProductPanel.js +7 -2
- package/packages/web/dist/react/components/commerce/ProductPanel.js.map +1 -1
- package/packages/web/src/react/components/commerce/ProductBadge.tsx +8 -1
- package/packages/web/src/react/components/commerce/ProductPanel.tsx +9 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unified-video-framework",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.321",
|
|
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,KAAK,MAAM,OAAO,CAAC;AAC1B,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,KAAK,MAAM,OAAO,CAAC;AAC1B,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,qBAoDxE"}
|
|
@@ -3,9 +3,12 @@ export default function ProductBadge({ product, overlay, onClick }) {
|
|
|
3
3
|
console.log('[COMMERCE] 🎨 Rendering ProductBadge:', product.id, product.title);
|
|
4
4
|
const showPrice = overlay.style?.badge?.showPrice !== false;
|
|
5
5
|
const showThumb = overlay.style?.badge?.showThumb !== false;
|
|
6
|
+
const hasControls = typeof document !== 'undefined' && document.querySelector('.uvf-controls-bar.uvf-visible');
|
|
6
7
|
const base = {
|
|
7
8
|
position: "fixed",
|
|
8
|
-
bottom: overlay.placement?.mode === "dock" && overlay.placement.edge === "bottom"
|
|
9
|
+
bottom: overlay.placement?.mode === "dock" && overlay.placement.edge === "bottom"
|
|
10
|
+
? (hasControls ? 'calc(100vh - 140px)' : 16)
|
|
11
|
+
: undefined,
|
|
9
12
|
top: overlay.placement?.mode === "dock" && overlay.placement.edge === "top" ? 16 : undefined,
|
|
10
13
|
left: overlay.placement?.mode === "dock" && overlay.placement.edge === "left" ? 16 : undefined,
|
|
11
14
|
right: overlay.placement?.mode === "dock" && overlay.placement.edge === "right" ? 16 : undefined,
|
|
@@ -20,6 +23,7 @@ export default function ProductBadge({ product, overlay, onClick }) {
|
|
|
20
23
|
cursor: "pointer",
|
|
21
24
|
pointerEvents: "auto",
|
|
22
25
|
zIndex: overlay.behavior?.zIndex ?? 300,
|
|
26
|
+
transition: "bottom 0.3s ease",
|
|
23
27
|
};
|
|
24
28
|
if (overlay.placement?.mode === "anchor") {
|
|
25
29
|
base.left = `calc(${overlay.placement.x}% - 60px)`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductBadge.js","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,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,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;
|
|
1
|
+
{"version":3,"file":"ProductBadge.js","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductBadge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductPanel.d.ts","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EAAE,OAAO,EAAE,QAAkB,EAAE,KAAW,EAAE,cAAc,EAAE,OAAO,EAC5E,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ProductPanel.d.ts","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EAAE,OAAO,EAAE,QAAkB,EAAE,KAAW,EAAE,cAAc,EAAE,OAAO,EAC5E,EAAE,KAAK,qBAqDP"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export default function ProductPanel({ products, visible, position = "right", width = 360, onProductClick, onClose }) {
|
|
3
3
|
console.log('[COMMERCE] 📋 ProductPanel:', { visible, products: products.length, position, width });
|
|
4
|
+
const handleClose = () => {
|
|
5
|
+
console.log('[COMMERCE] ✖️ Panel close button clicked');
|
|
6
|
+
onClose();
|
|
7
|
+
};
|
|
4
8
|
const style = {
|
|
5
9
|
position: "fixed",
|
|
6
10
|
top: position === "bottom" ? undefined : 0,
|
|
@@ -16,13 +20,14 @@ export default function ProductPanel({ products, visible, position = "right", wi
|
|
|
16
20
|
borderTop: position === "bottom" ? "1px solid rgba(255,255,255,0.1)" : undefined,
|
|
17
21
|
transform: visible ? "translateX(0)" : position === "right" ? "translateX(100%)" : position === "left" ? "translateX(-100%)" : "translateY(100%)",
|
|
18
22
|
transition: "transform 240ms ease",
|
|
19
|
-
zIndex:
|
|
23
|
+
zIndex: 500,
|
|
20
24
|
overflowY: "auto",
|
|
25
|
+
pointerEvents: visible ? "auto" : "none",
|
|
21
26
|
};
|
|
22
27
|
return (React.createElement("aside", { style: style, "aria-hidden": !visible, "aria-label": "Products in this video" },
|
|
23
28
|
React.createElement("div", { style: { display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: "1px solid rgba(255,255,255,0.1)" } },
|
|
24
29
|
React.createElement("div", { style: { color: "#fff", fontWeight: 700 } }, "Products"),
|
|
25
|
-
React.createElement("button", { onClick:
|
|
30
|
+
React.createElement("button", { onClick: handleClose, style: { marginLeft: "auto", background: "transparent", color: "#fff", border: 0, fontSize: 20, cursor: "pointer", pointerEvents: "auto" }, "aria-label": "Close products" }, "\u00D7")),
|
|
26
31
|
React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr", gap: 12, padding: 16 } }, products.map(p => (React.createElement("button", { key: p.id, onClick: () => onProductClick(p), style: {
|
|
27
32
|
display: "grid", gridTemplateColumns: "64px 1fr", gap: 12, textAlign: "left",
|
|
28
33
|
background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductPanel.js","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,GAAG,GAAG,EAAE,cAAc,EAAE,OAAO,EACrE;IACN,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ProductPanel.js","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductPanel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,10 +11,16 @@ export default function ProductBadge({ product, overlay, onClick }: Props) {
|
|
|
11
11
|
console.log('[COMMERCE] 🎨 Rendering ProductBadge:', product.id, product.title);
|
|
12
12
|
const showPrice = overlay.style?.badge?.showPrice !== false;
|
|
13
13
|
const showThumb = overlay.style?.badge?.showThumb !== false;
|
|
14
|
+
|
|
15
|
+
// Detect if controls are likely visible by checking for active controls element
|
|
16
|
+
const hasControls = typeof document !== 'undefined' && document.querySelector('.uvf-controls-bar.uvf-visible');
|
|
14
17
|
|
|
15
18
|
const base: React.CSSProperties = {
|
|
16
19
|
position: "fixed",
|
|
17
|
-
|
|
20
|
+
// Position above controls when at bottom and controls are visible
|
|
21
|
+
bottom: overlay.placement?.mode === "dock" && overlay.placement.edge === "bottom"
|
|
22
|
+
? (hasControls ? 'calc(100vh - 140px)' : 16)
|
|
23
|
+
: undefined,
|
|
18
24
|
top: overlay.placement?.mode === "dock" && overlay.placement.edge === "top" ? 16 : undefined,
|
|
19
25
|
left: overlay.placement?.mode === "dock" && overlay.placement.edge === "left" ? 16 : undefined,
|
|
20
26
|
right: overlay.placement?.mode === "dock" && overlay.placement.edge === "right" ? 16 : undefined,
|
|
@@ -29,6 +35,7 @@ export default function ProductBadge({ product, overlay, onClick }: Props) {
|
|
|
29
35
|
cursor: "pointer",
|
|
30
36
|
pointerEvents: "auto",
|
|
31
37
|
zIndex: overlay.behavior?.zIndex ?? 300,
|
|
38
|
+
transition: "bottom 0.3s ease",
|
|
32
39
|
};
|
|
33
40
|
|
|
34
41
|
// anchor placement in % of video frame
|
|
@@ -14,6 +14,12 @@ export default function ProductPanel({
|
|
|
14
14
|
products, visible, position = "right", width = 360, onProductClick, onClose
|
|
15
15
|
}: Props) {
|
|
16
16
|
console.log('[COMMERCE] 📋 ProductPanel:', { visible, products: products.length, position, width });
|
|
17
|
+
|
|
18
|
+
const handleClose = () => {
|
|
19
|
+
console.log('[COMMERCE] ✖️ Panel close button clicked');
|
|
20
|
+
onClose();
|
|
21
|
+
};
|
|
22
|
+
|
|
17
23
|
const style: React.CSSProperties = {
|
|
18
24
|
position: "fixed",
|
|
19
25
|
top: position === "bottom" ? undefined : 0,
|
|
@@ -29,15 +35,16 @@ export default function ProductPanel({
|
|
|
29
35
|
borderTop: position === "bottom" ? "1px solid rgba(255,255,255,0.1)" : undefined,
|
|
30
36
|
transform: visible ? "translateX(0)" : position === "right" ? "translateX(100%)" : position === "left" ? "translateX(-100%)" : "translateY(100%)",
|
|
31
37
|
transition: "transform 240ms ease",
|
|
32
|
-
zIndex: 200
|
|
38
|
+
zIndex: 500, // Increased from 200 to ensure it's above badge (300) and controls (100)
|
|
33
39
|
overflowY: "auto",
|
|
40
|
+
pointerEvents: visible ? "auto" : "none", // Only allow clicks when panel is visible
|
|
34
41
|
};
|
|
35
42
|
|
|
36
43
|
return (
|
|
37
44
|
<aside style={style} aria-hidden={!visible} aria-label="Products in this video">
|
|
38
45
|
<div style={{ display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
|
|
39
46
|
<div style={{ color: "#fff", fontWeight: 700 }}>Products</div>
|
|
40
|
-
<button onClick={
|
|
47
|
+
<button onClick={handleClose} style={{ marginLeft: "auto", background: "transparent", color: "#fff", border: 0, fontSize: 20, cursor: "pointer", pointerEvents: "auto" }} aria-label="Close products">×</button>
|
|
41
48
|
</div>
|
|
42
49
|
<div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12, padding: 16 }}>
|
|
43
50
|
{products.map(p => (
|