@trafilea/afrodita-components 6.51.5 → 6.51.6

package/build/index.d.ts

@@ -2714,12 +2714,11 @@ declare type SpinnerProps = {
 declare const Spinner: React.FC<SpinnerProps>;
 
 declare type VideoProps = {
-    thumbnail: string;
     source: string;
+    thumbnail?: string;
     height?: string;
     hasAudioControl?: boolean;
     withProgressBar?: boolean;
-    isSlideActive?: boolean;
 } & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
 declare const Video: React.FC<VideoProps>;
 

package/build/index.esm.js

@@ -7064,28 +7064,23 @@ var ProgressBar$1 = function (_a) {
 var Container$17 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  max-width: 530px;\n  position: relative;\n"], ["\n  max-width: 530px;\n  position: relative;\n"])));
 var HTMLVideo = newStyled.video(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"], ["\n  width: 100%;\n  max-width: 530px;\n  height: ", ";\n"])), function (props) { return props.height; });
 var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"], ["\n  width: 120px;\n  height: 120px;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n"])));
-var PlayContainer = newStyled.div(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n"])));
+var PlayContainer = newStyled.div(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    cursor: pointer;\n  }\n"])));
 var PauseContainer = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
 var MuteButton = newStyled.button(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n  position: absolute;\n  background: transparent;\n  border: none;\n  bottom: 21px;\n  right: 23px;\n  z-index: 2;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  background: transparent;\n  border: none;\n  bottom: 21px;\n  right: 23px;\n  z-index: 2;\n  cursor: pointer;\n"])));
 var templateObject_1$1F, templateObject_2$1j, templateObject_3$14, templateObject_4$T, templateObject_5$K, templateObject_6$C;
 
 var Video$1 = function (_a) {
-    var _b, _c, _d, _e;
-    var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, isSlideActive = _a.isSlideActive, _g = _a.onLoadedData, onLoadedData = _g === void 0 ? function () { return setIsLoading(false); } : _g, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted", "isSlideActive", "onLoadedData"]);
+    var _b, _c;
+    var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _d = _a.withProgressBar, withProgressBar = _d === void 0 ? true : _d, hasAudioControl = _a.hasAudioControl, muted = _a.muted, onLoadedData = _a.onLoadedData, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted", "onLoadedData"]);
     var videoRef = useRef(null);
-    var _h = useState(true), isLoading = _h[0], setIsLoading = _h[1];
-    var _j = useState(false), isPlaying = _j[0], setIsPlaying = _j[1];
-    var _k = useState(muted), isMuted = _k[0], setIsMuted = _k[1];
-    var _l = useState(0), videoProgress = _l[0], setVideoProgress = _l[1];
-    var _m = useState(false), debouncePlay = _m[0], setDebouncePlay = _m[1];
+    var _e = useState(true), isLoading = _e[0], setIsLoading = _e[1];
+    var _f = useState(false), isPlaying = _f[0], setIsPlaying = _f[1];
+    var _g = useState(muted), isMuted = _g[0], setIsMuted = _g[1];
+    var _h = useState(0), videoProgress = _h[0], setVideoProgress = _h[1];
+    var _j = useState(false), debouncePlay = _j[0], setDebouncePlay = _j[1];
     var isStarted = videoProgress > 0;
-    var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
-    var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
-    if (isSlideActive !== undefined) {
-        if (!isMuted && !isSlideActive && videoRef.current) {
-            setIsMuted(true);
-        }
-    }
+    var progress = ((_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) ? videoProgress / videoRef.current.duration : 0;
+    var hideProgressBar = videoProgress === ((_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) || videoProgress === 0;
     var handlePlayClick = function () {
         if (videoRef.current && !debouncePlay) {
             setDebouncePlay(true);
@@ -7093,12 +7088,11 @@ var Video$1 = function (_a) {
                 .play()
                 .then(function () {
                 setIsPlaying(true);
-                setDebouncePlay(false);
             })
                 .catch(function (error) {
                 console.error('Error playing video:', error);
-                setDebouncePlay(false);
-            });
+            })
+                .finally(function () { return setDebouncePlay(false); });
         }
     };
     var handlePauseClick = function () {
@@ -7114,10 +7108,17 @@ var Video$1 = function (_a) {
     };
     var onTimeUpdate = function () {
         if (videoRef.current) {
-            setVideoProgress(videoRef.current.currentTime);
+            var currentTime_1 = videoRef.current.currentTime;
+            requestAnimationFrame(function () { return setVideoProgress(currentTime_1); });
+        }
+    };
+    var handleOnloadedData = function (event) {
+        if (onLoadedData) {
+            onLoadedData(event);
         }
+        setIsLoading(false);
     };
-    return (jsxs$1(Container$17, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: onLoadedData, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
+    return (jsxs$1(Container$17, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: handleOnloadedData, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
 };
 
 var LikeCount = newStyled.span(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 22px;\n  color: ", ";\n  font-weight: 600;\n\n  &.like-count {\n    transition: color 0.2s ease;\n  }\n"], ["\n  font-size: 14px;\n  line-height: 22px;\n  color: ", ";\n  font-weight: 600;\n\n  &.like-count {\n    transition: color 0.2s ease;\n  }\n"])), function (_a) {