unified-video-framework 1.4.328 → 1.4.329
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 +23 -5
- package/packages/web/dist/react/components/commerce/ProductBadge.js.map +1 -1
- package/packages/web/src/react/components/commerce/ProductBadge.tsx +30 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unified-video-framework",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.329",
|
|
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,
|
|
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,qBA6ExE"}
|
|
@@ -1,15 +1,33 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
2
|
export default function ProductBadge({ product, overlay, onClick }) {
|
|
3
3
|
console.log('[COMMERCE] 🎨 Rendering ProductBadge:', product.id, product.title);
|
|
4
|
+
const [isPaused, setIsPaused] = useState(false);
|
|
4
5
|
const showPrice = overlay.style?.badge?.showPrice !== false;
|
|
5
6
|
const showThumb = overlay.style?.badge?.showThumb !== false;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const checkPauseState = () => {
|
|
9
|
+
const video = document.querySelector('.uvf-video');
|
|
10
|
+
if (video) {
|
|
11
|
+
setIsPaused(video.paused);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const video = document.querySelector('.uvf-video');
|
|
15
|
+
if (video) {
|
|
16
|
+
video.addEventListener('play', checkPauseState);
|
|
17
|
+
video.addEventListener('pause', checkPauseState);
|
|
18
|
+
checkPauseState();
|
|
19
|
+
return () => {
|
|
20
|
+
video.removeEventListener('play', checkPauseState);
|
|
21
|
+
video.removeEventListener('pause', checkPauseState);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return undefined;
|
|
25
|
+
}, []);
|
|
26
|
+
console.log('[COMMERCE] Badge paused state:', isPaused);
|
|
9
27
|
const base = {
|
|
10
28
|
position: "fixed",
|
|
11
29
|
bottom: overlay.placement?.mode === "dock" && overlay.placement.edge === "bottom"
|
|
12
|
-
? (
|
|
30
|
+
? (isPaused ? 155 : 16)
|
|
13
31
|
: undefined,
|
|
14
32
|
top: overlay.placement?.mode === "dock" && overlay.placement.edge === "top" ? 25 : undefined,
|
|
15
33
|
left: overlay.placement?.mode === "dock" && overlay.placement.edge === "left" ? 25 : 25,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductBadge.js","sourceRoot":"","sources":["../../../../src/react/components/commerce/ProductBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
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,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,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAC3B;QACH,CAAC,CAAC;QAGF,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAqB,CAAC;QACvE,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;YAChD,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;YACjD,eAAe,EAAE,CAAC;YAElB,OAAO,GAAG,EAAE;gBACV,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;gBACnD,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;YACtD,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,GAAG,CAAC,gCAAgC,EAAE,QAAQ,CAAC,CAAC;IAExD,MAAM,IAAI,GAAwB;QAChC,QAAQ,EAAE,OAAO;QAEjB,MAAM,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,QAAQ;YAC/E,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YACvB,CAAC,CAAC,SAAS;QACb,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QAC5F,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QAChG,UAAU,EAAE,iBAAiB;QAC7B,cAAc,EAAE,WAAW;QAC3B,MAAM,EAAE,iCAAiC;QACzC,YAAY,EAAE,EAAE;QAChB,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,SAAS;QACjB,aAAa,EAAE,MAAM;QACrB,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG;QACvC,UAAU,EAAE,kBAAkB;KAC/B,CAAC;IAGF,IAAI,OAAO,CAAC,SAAS,EAAE,IAAI,KAAK,QAAQ,EAAE;QACxC,IAAI,CAAC,IAAI,GAAG,QAAQ,OAAO,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC;QACnD,IAAI,CAAC,GAAG,GAAG,QAAQ,OAAO,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC;KACnD;IAED,OAAO,CACL,6BAAK,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,gBAAc,QAAQ,OAAO,CAAC,KAAK,EAAE;QACnF,SAAS,IAAI,OAAO,CAAC,UAAU,CAAC,MAAM,IAAI,CACzC,6BAAK,GAAG,EAAE,OAAO,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAI,CACtH;QACD,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE;YACrC,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,IAAG,OAAO,CAAC,KAAK,CAAO;YACnG,SAAS,IAAI,CACZ,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,IAC3C,OAAO,CAAC,OAAO,CAAC,SAAS,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,CACjF,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
2
|
import { VCProduct, VCOverlayInstruction } from "../../types/VideoCommerceTypes";
|
|
3
3
|
|
|
4
4
|
type Props = {
|
|
@@ -9,19 +9,42 @@ type Props = {
|
|
|
9
9
|
|
|
10
10
|
export default function ProductBadge({ product, overlay, onClick }: Props) {
|
|
11
11
|
console.log('[COMMERCE] 🎨 Rendering ProductBadge:', product.id, product.title);
|
|
12
|
+
const [isPaused, setIsPaused] = useState(false);
|
|
12
13
|
const showPrice = overlay.style?.badge?.showPrice !== false;
|
|
13
14
|
const showThumb = overlay.style?.badge?.showThumb !== false;
|
|
14
15
|
|
|
15
|
-
// Detect if
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
// Detect if video is paused by checking the video element's paused property
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const checkPauseState = () => {
|
|
19
|
+
const video = document.querySelector('.uvf-video') as HTMLVideoElement;
|
|
20
|
+
if (video) {
|
|
21
|
+
setIsPaused(video.paused);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// Check on mount and whenever video events occur
|
|
26
|
+
const video = document.querySelector('.uvf-video') as HTMLVideoElement;
|
|
27
|
+
if (video) {
|
|
28
|
+
video.addEventListener('play', checkPauseState);
|
|
29
|
+
video.addEventListener('pause', checkPauseState);
|
|
30
|
+
checkPauseState();
|
|
31
|
+
|
|
32
|
+
return () => {
|
|
33
|
+
video.removeEventListener('play', checkPauseState);
|
|
34
|
+
video.removeEventListener('pause', checkPauseState);
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return undefined;
|
|
39
|
+
}, []);
|
|
40
|
+
|
|
41
|
+
console.log('[COMMERCE] Badge paused state:', isPaused);
|
|
19
42
|
|
|
20
43
|
const base: React.CSSProperties = {
|
|
21
44
|
position: "fixed",
|
|
22
|
-
// Position above controls when at bottom and controls
|
|
45
|
+
// Position above controls when at bottom and video is paused (controls will show)
|
|
23
46
|
bottom: overlay.placement?.mode === "dock" && overlay.placement.edge === "bottom"
|
|
24
|
-
? (
|
|
47
|
+
? (isPaused ? 155 : 16)
|
|
25
48
|
: undefined,
|
|
26
49
|
top: overlay.placement?.mode === "dock" && overlay.placement.edge === "top" ? 25 : undefined,
|
|
27
50
|
left: overlay.placement?.mode === "dock" && overlay.placement.edge === "left" ? 25 : 25,
|