{"version":3,"file":"43.47cee1f9b45a7cb2.js","mappings":"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","sources":["webpack:///./Scripts/Components/Hillerstorp/ImageSlider.js"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\r\nimport Carousel from 'react-multi-carousel';\r\nimport 'react-multi-carousel/lib/styles.css';\r\nimport useWindowRezise from '../hooks/useWindowRezise';\r\n\r\nconst responsive = {\r\n    desktop: {\r\n        breakpoint: { max: 100000, min: 1024 },\r\n        items: 1,\r\n        slidesToSlide: 1, // optional, default to 1.\r\n        partialVisibilityGutter: 200\r\n    },\r\n    tablet: {\r\n        breakpoint: { max: 1024, min: 768 },\r\n        items: 1,\r\n        slidesToSlide: 1, // optional, default to 1.\r\n        partialVisibilityGutter: 80\r\n    },\r\n    mobile: {\r\n        breakpoint: { max: 767, min: 0 },\r\n        items: 1,\r\n        slidesToSlide: 1, // optional, default to 1.\r\n        partialVisibilityGutter: 0\r\n    },\r\n};\r\nconst ImageSlider = ({ values }) => {\r\n    const refPlayPause = useRef(null);\r\n    const refVideo = useRef(null);\r\n\r\n    let video;\r\n    let playPause;\r\n\r\n    const changeButtonState = (type) => {\r\n        if (type == 'playpause') {\r\n            if (video.paused || video.ended) {\r\n                playPause.classList.remove(\r\n                    'slider__video-item-play-pause--playing'\r\n                );\r\n            } else {\r\n                playPause.classList.add(\r\n                    'slider__video-item-play-pause--playing'\r\n                );\r\n            }\r\n        }\r\n    };\r\n    const [refAquired, setRefAquired] = useState(false);\r\n    const [isMobileWidth, setIsMobileWidth] = useState(false);\r\n    const { width } = useWindowRezise();\r\n\r\n    useEffect(() => {\r\n        setRefAquired(true);\r\n    }, []);\r\n    useEffect(() => {\r\n        video = refVideo.current;\r\n        playPause = refPlayPause.current;\r\n        const mobile = width < responsive.tablet.breakpoint.max;\r\n\r\n        setIsMobileWidth(mobile);\r\n        if (video && width >= 768) video.play();\r\n    }, [refAquired]);\r\n    const getPos = (e) => {\r\n        const bounds = e.currentTarget.getBoundingClientRect();\r\n        const x = e.clientX - bounds.left;\r\n        const y = e.clientY - bounds.top;\r\n\r\n        e.target.style.top =\r\n            '-' +\r\n            (y * (e.target.offsetHeight - e.currentTarget.offsetHeight)) /\r\n            e.currentTarget.offsetHeight +\r\n            'px';\r\n        e.target.style.left =\r\n            '-' +\r\n            (x * (e.target.offsetWidth - e.currentTarget.offsetWidth)) /\r\n            e.currentTarget.offsetWidth +\r\n            'px';\r\n    };\r\n\r\n    return (\r\n        <Carousel\r\n            swipeable={true}\r\n            draggable={false}\r\n            showDots={false}\r\n            responsive={responsive}\r\n            containerClass=\"carousel-container\"\r\n            dotListClass=\"custom-dot-list-style\"\r\n            itemClass=\"carousel-item-padding-8-px\"\r\n            keyBoardControl={true}\r\n            partialVisible={true}\r\n            beforeChange={(nextSlide, { currentSlide, onMove }) => {\r\n                if (video) {\r\n                    if (width < responsive.mobile.breakpoint.max) {\r\n                        if (\r\n                            currentSlide === 1 &&\r\n                            (nextSlide === 0 || nextSlide === 2)\r\n                        ) {\r\n                            video.pause();\r\n                        }\r\n                    } else {\r\n                        if (nextSlide === 2 && currentSlide < 2) video.pause();\r\n                        else if (currentSlide === 2 && nextSlide < 2)\r\n                            video.play();\r\n                    }\r\n                }\r\n            }}\r\n        >\r\n            {values.map((value, index) =>\r\n                value.image ? (\r\n                    <div\r\n                        onMouseMove={(e) => getPos(e)}\r\n                        onMouseOut={(e) => {\r\n                            e.currentTarget.classList.remove(\r\n                                'slider__item--hover'\r\n                            );\r\n                        }}\r\n                        onMouseOver={(e) => {\r\n                            e.currentTarget.classList.add(\r\n                                'slider__item--hover'\r\n                            );\r\n                        }}\r\n                        className=\"slider__item\"\r\n                        key={`figure${index}`}\r\n                    >\r\n                        <a href={value.url}>\r\n                            <img className=\"slider__image1\" src={value.image} alt={value.imageAlt} />\r\n                            {!isMobileWidth && (\r\n                                <img\r\n                                    className=\"slider__zoom-image\"\r\n                                    src={value.imageFull}\r\n                                    alt={value.imageAlt || value.imageFull.split('/').pop().replace(/\\.[^/.]+$/, '')}\r\n                                />\r\n                            )}\r\n                        </a>\r\n                    </div>\r\n                ) : (\r\n                    <div className=\"slider__video-item\" key={`figure${index}`}>\r\n                        <figure className=\"slider__video-item-container\">\r\n                            <video\r\n                                onPlay={() => changeButtonState('playpause')}\r\n                                onPause={() => changeButtonState('playpause')}\r\n                                ref={refVideo}\r\n                                loop\r\n                                muted\r\n                                playsInline\r\n                                preload=\"metadata\"\r\n                            >\r\n                                <source\r\n                                    src={`${value.video}#t=0.001`}\r\n                                    type=\"video/mp4\"\r\n                                />\r\n                            </video>\r\n                            <div className=\"slider__video-item-controls\">\r\n                                <button\r\n                                    ref={refPlayPause}\r\n                                    className=\"slider__video-item-play-pause\"\r\n                                    type=\"button\"\r\n                                    onClick={() => {\r\n                                        if (video.paused || video.ended)\r\n                                            video.play();\r\n                                        else video.pause();\r\n                                    }}\r\n                                ></button>\r\n                            </div>\r\n                        </figure>\r\n                    </div>\r\n                )\r\n            )}\r\n        </Carousel>\r\n    );\r\n};\r\nexport default ImageSlider;\r\n"],"names":["responsive","desktop","breakpoint","max","min","items","slidesToSlide","partialVisibilityGutter","tablet","mobile","values","refPlayPause","useRef","refVideo","video","playPause","changeButtonState","type","paused","ended","classList","remove","add","refAquired","setRefAquired","useState","isMobileWidth","setIsMobileWidth","width","useWindowRezise","useEffect","current","play","swipeable","draggable","showDots","containerClass","dotListClass","itemClass","keyBoardControl","partialVisible","beforeChange","nextSlide","currentSlide","onMove","pause","map","value","index","image","onMouseMove","e","bounds","currentTarget","getBoundingClientRect","x","clientX","left","y","clientY","top","target","style","offsetHeight","offsetWidth","getPos","onMouseOut","onMouseOver","className","key","href","url","src","alt","imageAlt","imageFull","split","pop","replace","onPlay","onPause","ref","loop","muted","playsInline","preload","onClick"],"sourceRoot":""}