@trafilea/afrodita-components 6.34.9 → 6.35.1

package/build/index.d.ts

@@ -3804,6 +3804,7 @@ declare type VideoProps = {
     height?: string;
     hasAudioControl?: boolean;
     withProgressBar?: boolean;
+    isSlideActive?: boolean;
 } & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
 declare const Video: React.FC<VideoProps>;
 

package/build/index.esm.js

@@ -12103,7 +12103,10 @@ var ImageSmallPreview = function (_a) {
 
 var horizontalStyles = css(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"], ["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"])));
 var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"], ["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"])));
-var Container$T = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"], ["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"])), function (_a) {
+var Container$T = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n  display: grid;\n  max-height: ", ";\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"], ["\n  display: grid;\n  max-height: ", ";\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"])), function (_a) {
+    var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
+    return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
+}, function (_a) {
     var position = _a.position;
     return (position == 'horizontal' ? horizontalStyles : verticalStyles);
 }, function (_a) {
@@ -12144,7 +12147,7 @@ var ImagePreviewList = function (_a) {
         var element = document.querySelector(".imageListContainer");
         element.scrollBy(0, 200);
     };
-    return (jsxs$1(Fragment$2, { children: [jsx$1(Container$T, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
+    return (jsxs$1(Fragment$2, { children: [jsx$1(Container$T, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
                             arrowWidth: 0.75,
                             arrowHeight: 1.25,
                             arrowPadding: 1.625,
@@ -12172,7 +12175,7 @@ var templateObject_1$1a, templateObject_2$T, templateObject_3$J, templateObject_
 
 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, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
+    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, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted", "isSlideActive"]);
     var videoRef = useRef(null);
     var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
     var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
@@ -12182,11 +12185,11 @@ var Video$1 = function (_a) {
     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;
-    useEffect(function () {
-        if (videoRef.current) {
-            videoRef.current.muted = Boolean(muted);
+    if (isSlideActive !== undefined) {
+        if (!isMuted && !isSlideActive && videoRef.current) {
+            setIsMuted(true);
         }
-    }, [muted]);
+    }
     var handlePlayClick = function () {
         if (videoRef.current && !debouncePlay) {
             setDebouncePlay(true);
@@ -12210,7 +12213,6 @@ var Video$1 = function (_a) {
     };
     var handleMuteToggle = function () {
         if (videoRef.current) {
-            videoRef.current.muted = !videoRef.current.muted;
             setIsMuted(function (prevState) { return !prevState; });
         }
     };
@@ -12219,7 +12221,7 @@ var Video$1 = function (_a) {
             setVideoProgress(videoRef.current.currentTime);
         }
     };
-    return (jsxs$1(Container$S, __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: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, 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$S, __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: function () { return setIsLoading(false); }, 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 propTypes = {exports: {}};