@codesinger0/shared-components 1.1.84 → 1.1.86
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.
|
@@ -22,10 +22,12 @@ const LargeItemCard = ({
|
|
|
22
22
|
availableLabel = 'נותרו במלאי',
|
|
23
23
|
soldOutLabel = 'אזל במלאי',
|
|
24
24
|
icons = [],
|
|
25
|
-
classNames = {}
|
|
25
|
+
classNames = {},
|
|
26
|
+
videoAutoPlay = true
|
|
26
27
|
}) => {
|
|
27
28
|
const [lightboxOpen, setLightboxOpen] = useState(false);
|
|
28
29
|
const [videoLightboxOpen, setVideoLightboxOpen] = useState(false);
|
|
30
|
+
const [isPlaying, setIsPlaying] = useState(videoAutoPlay);
|
|
29
31
|
|
|
30
32
|
const {
|
|
31
33
|
card: cardClass = 'glass-card',
|
|
@@ -50,17 +52,39 @@ const LargeItemCard = ({
|
|
|
50
52
|
transformOrigin: 'center'
|
|
51
53
|
};
|
|
52
54
|
|
|
55
|
+
const handleVideoClick = (e) => {
|
|
56
|
+
if (!isPlaying) {
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
setIsPlaying(true);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
53
62
|
const mediaContent = contentType === 'video' ? (
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
<div className="relative">
|
|
64
|
+
<video
|
|
65
|
+
autoPlay={isPlaying}
|
|
66
|
+
muted
|
|
67
|
+
loop
|
|
68
|
+
playsInline
|
|
69
|
+
className={`rounded-lg shadow-2xl border border-primary max-w-full ${className}`}
|
|
70
|
+
style={{ ...scaleStyle, objectFit: 'contain' }}
|
|
71
|
+
>
|
|
72
|
+
<source src={videoUrl} type="video/mp4" />
|
|
73
|
+
</video>
|
|
74
|
+
{!isPlaying && (
|
|
75
|
+
<button
|
|
76
|
+
onClick={handleVideoClick}
|
|
77
|
+
className="absolute inset-0 flex items-center justify-center bg-black/30 rounded-lg cursor-pointer"
|
|
78
|
+
aria-label="Play video"
|
|
79
|
+
>
|
|
80
|
+
<div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center shadow-lg hover:bg-white transition-colors">
|
|
81
|
+
<svg className="w-8 h-8 text-primary ml-1" fill="currentColor" viewBox="0 0 24 24">
|
|
82
|
+
<path d="M8 5v14l11-7z" />
|
|
83
|
+
</svg>
|
|
84
|
+
</div>
|
|
85
|
+
</button>
|
|
86
|
+
)}
|
|
87
|
+
</div>
|
|
64
88
|
) : (
|
|
65
89
|
<img
|
|
66
90
|
src={imageUrl}
|