pixel-react 1.21.17 → 1.21.19
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.
|
@@ -8,14 +8,17 @@ import './overviewModal.scss';
|
|
|
8
8
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
|
9
9
|
const OverviewModal = ({ isOpen, onClose, isMaximized, width = '800px', height = '432px', header, children, zIndex = 999, icons, downloadFileIcon = false, showHeader = true, top = '0', overlay = true, downloadHandler, multiData = [], setSelectedVideo, customStyle, isIframe = false, }) => {
|
|
10
10
|
const [videos, setVideos] = useState(multiData);
|
|
11
|
+
const [maximizedVideoIndex, setMaximizedVideoIndex] = useState(null);
|
|
11
12
|
useEffect(() => {
|
|
12
13
|
if (!checkEmpty(multiData)) {
|
|
13
14
|
setVideos(multiData);
|
|
14
15
|
}
|
|
16
|
+
setMaximizedVideoIndex(null);
|
|
15
17
|
}, [multiData]);
|
|
16
18
|
useEffect(() => {
|
|
17
19
|
const handleKeyDown = (event) => {
|
|
18
20
|
if (event.key === 'Escape') {
|
|
21
|
+
setMaximizedVideoIndex(null);
|
|
19
22
|
onClose?.();
|
|
20
23
|
}
|
|
21
24
|
};
|
|
@@ -26,10 +29,23 @@ const OverviewModal = ({ isOpen, onClose, isMaximized, width = '800px', height =
|
|
|
26
29
|
document.removeEventListener('keydown', handleKeyDown);
|
|
27
30
|
};
|
|
28
31
|
}, [isOpen, onClose]);
|
|
29
|
-
if (!isOpen)
|
|
32
|
+
if (!isOpen) {
|
|
30
33
|
return null;
|
|
31
|
-
|
|
32
|
-
const
|
|
34
|
+
}
|
|
35
|
+
const displayedVideos = maximizedVideoIndex !== null
|
|
36
|
+
? [{
|
|
37
|
+
video: videos[maximizedVideoIndex],
|
|
38
|
+
originalIndex: maximizedVideoIndex,
|
|
39
|
+
}]
|
|
40
|
+
: videos.map((video, index) => ({
|
|
41
|
+
video,
|
|
42
|
+
originalIndex: index,
|
|
43
|
+
}));
|
|
44
|
+
const isEmptyData = checkEmpty(displayedVideos);
|
|
45
|
+
const gridClass = classNames('image-grid', {
|
|
46
|
+
'image-grid--single': displayedVideos.length === 1,
|
|
47
|
+
'image-grid--double': displayedVideos.length === 2,
|
|
48
|
+
});
|
|
33
49
|
const handleVideoEnd = (index) => {
|
|
34
50
|
setVideos((prev) => {
|
|
35
51
|
const updated = prev.filter((_, i) => i !== index);
|
|
@@ -39,8 +55,14 @@ const OverviewModal = ({ isOpen, onClose, isMaximized, width = '800px', height =
|
|
|
39
55
|
return updated;
|
|
40
56
|
});
|
|
41
57
|
};
|
|
58
|
+
if (isOpen && videos.length === 0 && isIframe) {
|
|
59
|
+
onClose?.();
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
42
62
|
const modalContent = (_jsx("div", { className: "ff-overview-modal-overlay", style: {
|
|
43
|
-
background: overlay
|
|
63
|
+
background: overlay
|
|
64
|
+
? 'var(--pop-up-background-blur)'
|
|
65
|
+
: '',
|
|
44
66
|
zIndex,
|
|
45
67
|
}, children: _jsxs("div", { className: classNames('ff-overview-modal-container', {
|
|
46
68
|
'ff-overview-maximized-container': isMaximized,
|
|
@@ -51,13 +73,26 @@ const OverviewModal = ({ isOpen, onClose, isMaximized, width = '800px', height =
|
|
|
51
73
|
'--modal-top': top,
|
|
52
74
|
}, children: [showHeader && (_jsxs("div", { className: "ff-overview-modal-header", children: [header, _jsxs("div", { className: "ff-overview-modal-icons", children: [downloadFileIcon && (_jsx(Icon, { width: 16, height: 16, name: "download_file", onClick: downloadHandler })), icons] })] })), _jsx("div", { className: classNames('ff-overview-modal-body', {
|
|
53
75
|
'ff-overview-modal-body--centered': isEmptyData,
|
|
54
|
-
}), children: !isEmptyData ? (_jsx("div", { className:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
76
|
+
}), children: !isEmptyData ? (_jsx("div", { className: gridClass, children: displayedVideos.map(({ video, originalIndex }) => {
|
|
77
|
+
if (!video) {
|
|
78
|
+
return null;
|
|
79
|
+
}
|
|
80
|
+
return (_jsxs("div", { className: "ff-overview-modal-image-item", children: [isIframe ? (_jsx("iframe", { src: video.src, className: "ff-overview-modal-video", width: "100%", height: "100%" })) : (_jsx("video", { src: video.src, autoPlay: true, muted: true, playsInline: true, preload: "auto", controls: false, onEnded: () => handleVideoEnd(originalIndex), className: "ff-overview-modal-video", children: "Your browser does not support the video tag." })), _jsxs("div", { className: "ff-overview-modal-image-name", children: [_jsx(Icon, { name: video.icon || '' }), _jsxs(Typography, { children: [video.machineName, " - ", video.scriptName] })] }), _jsx(Icon, { width: 16, height: 16, className: "ff-overview-modal-image-action", name: maximizedVideoIndex === originalIndex
|
|
81
|
+
? 'collapse_icon'
|
|
82
|
+
: 'maximize_new', onClick: () => {
|
|
83
|
+
if (maximizedVideoIndex === originalIndex) {
|
|
84
|
+
setMaximizedVideoIndex(null);
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
setMaximizedVideoIndex(originalIndex);
|
|
88
|
+
}
|
|
89
|
+
const clickedVideo = {
|
|
90
|
+
currentVideoData: { ...video, clickedAt: Date.now() },
|
|
91
|
+
allVideoData: videos,
|
|
92
|
+
};
|
|
93
|
+
setSelectedVideo?.(clickedVideo);
|
|
94
|
+
} }), _jsxs(Typography, { color: "var(--ff-chip-bg)", className: "ff-overview-modal-scripts", children: [video.currentScripts, "/", video.totalScripts] })] }, `${video.src}-${originalIndex}`));
|
|
95
|
+
}) })) : (children) })] }) }));
|
|
61
96
|
return ReactDOM.createPortal(modalContent, document.body);
|
|
62
97
|
};
|
|
63
98
|
export default OverviewModal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overviewModal.js","sourceRoot":"","sources":["../../../src/components/OverviewModal/overviewModal.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE/D,MAAM,aAAa,GAAiC,CAAC,EACnD,MAAM,EACN,OAAO,EACP,WAAW,EACX,KAAK,GAAG,OAAO,EACf,MAAM,GAAG,OAAO,EAChB,MAAM,EACN,QAAQ,EACR,MAAM,GAAG,GAAG,EACZ,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,UAAU,GAAG,IAAI,EACjB,GAAG,GAAG,GAAG,EACT,OAAO,GAAG,IAAI,EACd,eAAe,EACf,SAAS,GAAG,EAAE,EACd,gBAAgB,EAChB,WAAW,EACX,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"overviewModal.js","sourceRoot":"","sources":["../../../src/components/OverviewModal/overviewModal.tsx"],"names":[],"mappings":"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"}
|