@gxpl/sdk 0.0.7 → 0.0.8

package/lib/sdk-nextjs/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -0,0 +1,170 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VimeoEmbedItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = __importDefault(require("@vimeo/player"));
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
+const LinkWrapper_1 = require("../LinkWrapper");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const utils_1 = require("../../../../utils");
+const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
+    const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { url } = item.commonParams;
+    const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const [imgRef, setImgRef] = (0, react_1.useState)(null);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
+    const layoutValues = [item.area, item.layoutParams];
+    const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
+    const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _b === void 0 ? void 0 : _b.blur, itemBlur);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const validUrl = (0, react_1.useMemo)(() => {
+        if (!layoutParams)
+            return url;
+        const validURL = new URL(url);
+        validURL.searchParams.append('controls', String(layoutParams.controls));
+        validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
+        validURL.searchParams.append('muted', String(layoutParams.muted));
+        validURL.searchParams.append('loop', String(layoutParams.loop));
+        validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
+        validURL.searchParams.append('title', '0');
+        validURL.searchParams.append('byline', '0');
+        validURL.searchParams.append('portrait', '0');
+        validURL.searchParams.append('autopause', 'false');
+        return validURL.href;
+    }, [url, layoutParams]);
+    (0, react_1.useEffect)(() => {
+        if (!vimeoPlayer || !imgRef || !layoutParams)
+            return;
+        if (layoutParams.play === 'on-click') {
+            setIsCoverVisible(true);
+        }
+        vimeoPlayer.on('pause', (e) => {
+            if (e.seconds === 0) {
+                setIsCoverVisible(true);
+            }
+        });
+        vimeoPlayer.on('ended', () => {
+            setIsCoverVisible(true);
+        });
+    }, [vimeoPlayer, imgRef, layoutParams]);
+    const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!vimeoPlayer)
+            return;
+        const isPaused = yield vimeoPlayer.getPaused();
+        if (isPaused) {
+            vimeoPlayer.play();
+            setIsCoverVisible(false);
+        }
+        else {
+            vimeoPlayer.pause();
+        }
+    });
+    const onCoverClick = () => {
+        if (!vimeoPlayer || !imgRef)
+            return;
+        vimeoPlayer.play();
+        setIsCoverVisible(false);
+    };
+    const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+        if (!isInteractive && vimeoPlayer) {
+            vimeoPlayer.pause();
+        }
+    }, [isInteractive, onVisibilityChange, vimeoPlayer]);
+    (0, react_1.useEffect)(() => {
+        if (!vimeoPlayer || !interactionCtrl)
+            return;
+        interactionCtrl.setActionReceiver((type) => {
+            switch (type) {
+                case 'play':
+                    vimeoPlayer.play();
+                    break;
+                case 'pause':
+                    vimeoPlayer.pause();
+                    break;
+            }
+        });
+    }, [interactionCtrl, vimeoPlayer]);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
+                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+                        return;
+                    vimeoPlayer.play();
+                }, onMouseLeave: () => {
+                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+                        return;
+                    vimeoPlayer.pause();
+                }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                            display: isCoverVisible ? 'block' : 'none',
+                            cursor: 'pointer',
+                            position: 'absolute',
+                            objectFit: 'cover',
+                            height: '100%',
+                            width: '100%',
+                            top: '0',
+                            left: '0'
+                        }, alt: "Cover img" })), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
+                            position: 'absolute',
+                            height: '100%',
+                            width: '100%',
+                            top: '0',
+                            left: '0'
+                        } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      .embed-video-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-video {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+        overflow: hidden;
+      }
+      ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                    return (`
+          .embed-video-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+          .embed-video-wrapper-${item.id} .embed-video {
+            border-radius: ${layoutParams.radius * 100}vw;
+          }
+        `);
+                })}
+    ` })] }));
+};
+exports.VimeoEmbedItem = VimeoEmbedItem;

package/lib/sdk-nextjs/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -0,0 +1,166 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YoutubeEmbedItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const LinkWrapper_1 = require("../LinkWrapper");
+const getValidYoutubeUrl_1 = require("../../../utils/getValidYoutubeUrl");
+const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
+const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useYouTubeIframeApi_1 = require("../../../utils/Youtube/useYouTubeIframeApi");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const utils_1 = require("../../../../utils");
+const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { url } = item.commonParams;
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
+    const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
+    const [div, setDiv] = (0, react_1.useState)(null);
+    const [player, setPlayer] = (0, react_1.useState)(undefined);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
+    const [imgRef, setImgRef] = (0, react_1.useState)(null);
+    const layoutValues = [item.area, item.layoutParams];
+    const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
+    const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _b === void 0 ? void 0 : _b.blur, itemBlur);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
+    const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    (0, useRegisterResize_1.useRegisterResize)(div, onResize);
+    (0, react_1.useEffect)(() => {
+        const newUrl = new URL(url);
+        const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
+        if (!YT || !videoId || !div || !layoutParams)
+            return;
+        const { play, controls } = layoutParams;
+        const placeholder = document.createElement('div');
+        div.appendChild(placeholder);
+        const player = new YT.Player(placeholder, {
+            videoId,
+            playerVars: {
+                autoplay: play === 'auto' ? '1' : '0',
+                controls: controls ? '1' : '0'
+            },
+            events: {
+                onStateChange: (event) => {
+                    if (play !== 'auto')
+                        return;
+                    if (event.data === 1) {
+                        setIsCoverVisible(false);
+                    }
+                    if (event.data === 2 || event.data === -1) {
+                        setIsCoverVisible(true);
+                    }
+                },
+                onReady: (event) => {
+                    setPlayer(event.target);
+                    if (play !== 'on-click') {
+                        player.mute();
+                    }
+                }
+            }
+        });
+        return () => {
+            var _a;
+            setPlayer(undefined);
+            player.destroy();
+            (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
+        };
+    }, [YT, div, layoutParams]);
+    const onCoverClick = () => {
+        if (!player || !imgRef)
+            return;
+        player.playVideo();
+        setIsCoverVisible(false);
+    };
+    (0, react_1.useEffect)(() => {
+        if (layoutParams && layoutParams.play === 'on-click' && !layoutParams.controls) {
+            setIsCoverVisible(true);
+        }
+    }, [layoutParams]);
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+        if (!isInteractive && player) {
+            player.pauseVideo();
+        }
+    }, [isInteractive, onVisibilityChange, player]);
+    (0, react_1.useEffect)(() => {
+        if (!player || !interactionCtrl)
+            return;
+        interactionCtrl.setActionReceiver((type) => {
+            switch (type) {
+                case 'play':
+                    player.playVideo();
+                    break;
+                case 'pause':
+                    player.pauseVideo();
+                    break;
+            }
+        });
+    }, [interactionCtrl, player]);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+                    if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                        return;
+                    player.playVideo();
+                }, onMouseLeave: () => {
+                    if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                        return;
+                    player.pauseVideo();
+                }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                            display: isCoverVisible ? 'block' : 'none',
+                            cursor: 'pointer',
+                            position: 'absolute',
+                            objectFit: 'cover',
+                            height: '100%',
+                            width: '100%',
+                            top: '0',
+                            left: '0',
+                            zIndex: 1
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .embed-youtube-video-wrapper-${item.id},
+        .embed-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+        .embed-${item.id} {
+          overflow: hidden;
+        }
+        .embed-youtube-video-wrapper-${item.id} iframe {
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          border: none;
+        }
+        ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                    return (`
+            .embed-youtube-video-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+            }
+            .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
+              border-radius: ${layoutParams.radius * 100}vw;
+            }
+          `);
+                })}
+      ` })] }));
+};
+exports.YoutubeEmbedItem = YoutubeEmbedItem;

package/lib/sdk-nextjs/components/items/EmbedVideoItem/useEmbedVideoItem.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEmbedVideoItem = void 0;
+const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const Keyframe_1 = require("../../../../sdk/types/keyframe/Keyframe");
+const useEmbedVideoItem = (item, sectionId) => {
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.BorderRadius, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'radius' in layoutParams ? layoutParams.radius : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getRadius({ radius: value }, scroll).radius : undefined, sectionId, [layoutId]);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, Keyframe_1.KeyframeType.Opacity, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
+    return { radius, blur, opacity };
+};
+exports.useEmbedVideoItem = useEmbedVideoItem;

package/lib/sdk-nextjs/components/items/FileItem/ImageItem.js

@@ -0,0 +1,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const LinkWrapper_1 = require("../LinkWrapper");
+const useFileItem_1 = require("./useFileItem");
+const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../../provider/useCntrlContext");
+const useRegisterResize_1 = require("../../../common/useRegisterResize");
+const useImageFx_1 = require("../../../utils/effects/useImageFx");
+const useElementRect_1 = require("../../../utils/useElementRect");
+const useLayoutContext_1 = require("../../useLayoutContext");
+const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
+const useItemFXData_1 = require("../../../common/useItemFXData");
+const getFill_1 = require("../../../utils/getFill");
+const utils_1 = require("../../../../utils");
+const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
+    const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
+    const { url, hasGLEffect } = item.commonParams;
+    const fxCanvas = (0, react_1.useRef)(null);
+    const isInitialRef = (0, react_1.useRef)(true);
+    const layoutValues = [item.area, item.layoutParams];
+    const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
+    const area = layoutId ? item.area[layoutId] : null;
+    const exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
+    const width = area && exemplary ? area.width * exemplary : 0;
+    const height = area && exemplary ? area.height * exemplary : 0;
+    const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
+    const imgStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
+    const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
+    const stateStrokeFillLayers = (_b = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _b === void 0 ? void 0 : _b.strokeFill;
+    const strokeSolidTransition = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _c !== void 0 ? _c : 'none';
+    (0, react_1.useEffect)(() => {
+        isInitialRef.current = false;
+    }, []);
+    const isFXAllowed = (0, useImageFx_1.useImageFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
+        imageUrl: url,
+        fragmentShader,
+        controlsValues
+    }, width, height);
+    const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
+    const rectWidth = Math.floor((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0);
+    const rectHeight = Math.floor((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _f === void 0 ? void 0 : _f.radius, itemRadius);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _g === void 0 ? void 0 : _g.strokeWidth, itemStrokeWidth);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.blur, itemBlur);
+    const strokeValue = stateStrokeFillLayers
+        ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
+        : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
+    const stroke = strokeValue
+        ? (_l = (0, getFill_1.getFill)(strokeValue)) !== null && _l !== void 0 ? _l : 'transparent'
+        : 'transparent';
+    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_m = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
+    const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
+                        '--stroke-background-position': 'center',
+                        '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                        '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                    } : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: [hasGLEffect && isFXAllowed
+                            ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
+                            : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })), (0, jsx_runtime_1.jsx)("div", { className: `image-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
+                                backgroundPosition: 'center',
+                                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                            } : {
+                                background: stroke,
+                            })) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .image-wrapper-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: flex;
+        }
+        .image {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+          border-style: solid;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+        .img-canvas {
+          border: solid;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-width: 0;
+          box-sizing: border-box;
+        }
+        ${(0, utils_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                        return (`
+            .image-wrapper-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+            }
+            .image-${item.id} {
+              border: solid;
+              border-color: transparent;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
+              border-radius: ${layoutParams.radius * 100}vw;
+            }
+            .image-border-${item.id} {
+              position: absolute;
+              inset: 0;
+              border-radius: inherit;
+              pointer-events: none;
+              z-index: 2;
+              -webkit-mask:
+                linear-gradient(#fff 0 0) content-box,
+                linear-gradient(#fff 0 0);
+              -webkit-mask-composite: xor;
+              mask-composite: exclude;
+            }
+          `);
+                    })}
+      ` })] }) }));
+};
+exports.ImageItem = ImageItem;