{"version":3,"file":"js/component-interactive-image.chunk.js","mappings":"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","sources":["webpack:///./assets/stone/src/components/interactiveImage/InteractiveImage.tsx"],"sourcesContent":["import React, { Suspense, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport classNames from 'classnames';\nimport Lazyimg from '@components/utils/Lazyimg';\nimport imageutils from '@common/utils/imageutils';\nimport '@stone/scss/components/interactive-image/_interactive-image.scss';\nimport Button from '@stone/ui/button/Button';\nimport Icon from '@stone/ui/icon/Icon';\nconst ThronVideo = React.lazy(() => import('@components/utils/ThronVideo'));\nconst InteractiveImageItem = (props) => {\n    var _a, _b, _c;\n    const { t } = useTranslation();\n    /* PROPS */\n    const { startcol, startrow, endcol, endrow, hotspottext } = props;\n    /* STATES */\n    const [isOpen, setIsOpen] = useState(false);\n    const [oneTimeOpen, setOneTimeOpen] = useState(false);\n    const [onBlurEnable, setOnBlurEnable] = useState(false);\n    /* REFS */\n    const contentRef = useRef();\n    const timeout = useRef();\n    const playerRef = useRef();\n    /* CALLBACKS */\n    const gridCSS = useCallback(() => {\n        let _endcol = Math.max(Number(endcol), Number(startcol));\n        let _endrow = Math.max(Number(endrow), Number(startrow));\n        return {\n            gridColumnStart: startcol,\n            gridColumnEnd: isOpen ? _endcol + 1 : Number(startcol) + 1,\n            gridRowStart: startrow,\n            gridRowEnd: isOpen ? _endrow + 1 : Number(startrow) + 1,\n        };\n    }, [isOpen]);\n    const isAccessible = useCallback(() => {\n        return props.thronID || (props.image && props.alt);\n    }, [props]);\n    /* HANDLER */\n    const onMouseEnter = () => {\n        clearTimeout(timeout.current);\n        timeout.current = setTimeout(() => {\n            setIsOpen(true);\n            oneTimeOpen || setOneTimeOpen(true);\n        }, 300);\n    };\n    /* useEffects */\n    useLayoutEffect(() => {\n        setTimeout(() => {\n            if (playerRef.current) {\n                if (isOpen) {\n                    playerRef.current.play();\n                }\n                else {\n                    playerRef.current.pause();\n                }\n            }\n        }, 100);\n    }, [isOpen]);\n    /* methods */\n    const onClick = () => {\n        clearTimeout(timeout.current);\n        setIsOpen(true);\n        setOnBlurEnable(true);\n        oneTimeOpen || setOneTimeOpen(true);\n        setTimeout(() => {\n            var _a;\n            (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n        }, 200);\n    };\n    const onMouseLeave = () => {\n        clearTimeout(timeout.current);\n        timeout.current = setTimeout(() => {\n            setIsOpen(false);\n        }, 300);\n    };\n    const handleBlur = () => {\n        if (!onBlurEnable)\n            return;\n        clearTimeout(timeout.current);\n        timeout.current = setTimeout(() => {\n            setOnBlurEnable(false);\n            setIsOpen(false);\n        }, 300);\n    };\n    const onPlayerInit = (player) => {\n        playerRef.current = player;\n        isOpen && player.play();\n    };\n    return (React.createElement(\"div\", { className: classNames('interactive-image_item', { open: isOpen }), style: gridCSS(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: -1, ref: contentRef },\n        React.createElement(\"div\", { className: \"interactive-image_anchor\" },\n            React.createElement(Button, { type: \"button\", cls: ['button--link'], inverted: true, ariaExpanded: isOpen, ariaHidden: !isAccessible(), customTabIndex: !isAccessible() && -1, onClick: onClick },\n                React.createElement(React.Fragment, null,\n                    React.createElement(Icon, { ariaHidden: true, family: \"10\", name: \"open\", inverted: true }),\n                    hotspottext || t('button.hotspot')))),\n        React.createElement(\"div\", { className: \"interactive-image_content\", onBlur: handleBlur },\n            React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) }, props.image ? (React.createElement(Lazyimg, { src: imageutils.transform((_a = props.image) === null || _a === void 0 ? void 0 : _a.path, { width: 200 }, ''), srcset: imageutils.srcset((_b = props.image) === null || _b === void 0 ? void 0 : _b.path, (_c = props.image) === null || _c === void 0 ? void 0 : _c.meta_data.width), dataSizes: \"fluid\", ariaHidden: !isAccessible(), alt: props.alt })) : (oneTimeOpen && React.createElement(ThronVideo, { thronID: props.thronID, lockBitrate: props.lockBitrate && 'max', autoplay: false, onInitCallback: onPlayerInit }))))));\n};\nconst InteractiveImage = (props) => {\n    var _a, _b;\n    return (React.createElement(\"div\", { className: \"interactive-image_wrapper\" },\n        React.createElement(Lazyimg, { src: imageutils.transform((_a = props.image) === null || _a === void 0 ? void 0 : _a.path, { width: 1280 }, ''), srcset: imageutils.srcset((_b = props.image) === null || _b === void 0 ? void 0 : _b.path, props.imageWidth), dataSizes: \"auto\", ariaHidden: true, alt: '' }),\n        React.createElement(\"div\", { className: \"interactive-image_over\" },\n            React.createElement(\"div\", { className: \"interactive-image_grid\" }, props.content.map((item) => ((item.image || item.thronID) && React.createElement(InteractiveImageItem, Object.assign({ key: item.ID }, item))) || false)))));\n};\nexport default InteractiveImage;\n"],"names":["ThronVideo","InteractiveImageItem","props","_a","_b","_c","t","startcol","startrow","endcol","endrow","hotspottext","isOpen","setIsOpen","useState","oneTimeOpen","setOneTimeOpen","onBlurEnable","setOnBlurEnable","contentRef","useRef","timeout","playerRef","gridCSS","useCallback","_endcol","Math","max","Number","_endrow","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","isAccessible","thronID","image","alt","useLayoutEffect","setTimeout","current","play","pause","className","open","style","onMouseEnter","clearTimeout","onMouseLeave","tabIndex","ref","type","cls","inverted","ariaExpanded","ariaHidden","customTabIndex","onClick","focus","family","name","onBlur","Suspense","fallback","src","path","width","srcset","meta_data","dataSizes","lockBitrate","autoplay","onInitCallback","player","imageWidth","content","map","item","Object","assign","key","ID"],"sourceRoot":""}