{"version":3,"file":"js/component-details-slide.chunk.js","mappings":"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","sources":["webpack:///./node_modules/classnames/index.js","webpack:///./assets/common/src/components/utils/ThronVideo.tsx","webpack:///./assets/moncler/src/components/experience/EditorialImage.tsx","webpack:///./assets/moncler/src/components/product/experience/DetailSlide.tsx","webpack:///./assets/moncler/src/components/product/experience/Video.tsx","webpack:///./assets/moncler/src/hooks/useInViewport.tsx"],"sourcesContent":["/*!\n  Copyright (c) 2018 Jed Watson.\n  Licensed under the MIT License (MIT), see\n  http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString === Object.prototype.toString) {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ThronIntegrationComponent from './../../scripts/components/thronIntegrationComponent';\nconst ThronVideo = (props) => {\n    const videoRef = useRef();\n    const [thronComponent, setThronComponent] = useState(null);\n    useEffect(() => {\n        if (videoRef.current) {\n            if (thronComponent) {\n                thronComponent.changeContent(props.thronID);\n            }\n            else {\n                const options = {};\n                props.onPauseCallback && (options.onPauseCallback = props.onPauseCallback);\n                props.onPlayCallback && (options.onPlayCallback = props.onPlayCallback);\n                props.onCompleteCallback && (options.onCompleteCallback = props.onCompleteCallback);\n                props.onInitCallback && (options.onInitCallback = props.onInitCallback);\n                props.onTimeUpdate && (options.onTimeUpdate = props.onTimeUpdate);\n                typeof props.loopTimes === 'number' && (options.loopTimes = props.loopTimes);\n                const newThronComponent = new ThronIntegrationComponent(videoRef.current, options);\n                setThronComponent(newThronComponent);\n            }\n        }\n    }, [props.thronID]);\n    return (React.createElement(\"div\", { ref: videoRef, \"aria-hidden\": \"true\", className: classNames('video-wrapper', props.className), \"data-option-id\": props.thronID, \"data-option-mobile-id\": props === null || props === void 0 ? void 0 : props.thronMobileID, \"data-option-muted\": props.muted, \"data-option-autoplay\": props.autoplay, \"data-option-loop\": props.loop, \"data-option-lock-bitrate\": props.lockBitrate, \"data-option-no-skin\": props.noskin, \"data-option-sess-id\": props.sessionId }));\n};\nexport default ThronVideo;\n","import React, { useMemo } from 'react';\nconst Image = (props) => {\n    const { src, desktopsrc, tabletsrc, mobilesrc, mobilesmallsrc, image_alt, className, avoidLazy, avoidMedia } = props;\n    const srcset = useMemo(() => {\n        return `${mobilesmallsrc} 360w, ${mobilesrc} 768w, ${tabletsrc} 1024w, ${desktopsrc} 1571w`;\n    }, [mobilesmallsrc, tabletsrc, mobilesrc]);\n    return (React.createElement(\"picture\", { className: className },\n        React.createElement(\"source\", Object.assign({ srcSet: srcset }, (!avoidMedia && { media: \"(min-width: 768px)\" }), { \"data-srcset\": srcset })),\n        React.createElement(\"img\", { alt: image_alt, src: src, loading: avoidLazy ? 'eager' : 'lazy' })));\n};\nexport default Image;\n","import React from 'react';\nimport Image from '@moncler/components/experience/EditorialImage';\nimport '@moncler/scss/components/product-details-slide/product-details-slide.scss';\nimport Video from './Video';\nconst DetailSlide = (props) => {\n    const { title, src, thronid } = props;\n    return (React.createElement(\"div\", { className: \"details-slider__slide\" },\n        title && React.createElement(\"div\", { className: \"slide_caption\" }, title),\n        src && (React.createElement(\"div\", { className: \"slide_image-container\" },\n            React.createElement(Image, Object.assign({}, props, { className: \"\" })))),\n        thronid && React.createElement(Video, { thronid: thronid })));\n};\nexport default DetailSlide;\n","import React, { useRef, useEffect, useState } from 'react';\nimport ThronVideo from '@components/utils/ThronVideo';\nimport '@moncler/scss/components/editorial-video-pdp/component-editorial-video-pdp.scss';\nimport useInViewport from '@moncler/hooks/useInViewport';\nconst Video = (props) => {\n    const { thronid, thronmobileid } = props;\n    const optionalVideoProps = thronmobileid ? { thronMobileID: thronmobileid } : {};\n    const [onece, setOnce] = useState(true);\n    const videoRef = useRef();\n    const [playing, setPlaying] = useState(false);\n    useEffect(() => {\n        const video = videoRef && videoRef.current ? videoRef.current.querySelector('video') : null;\n        const playButton = videoRef && videoRef.current ? videoRef.current.querySelector('[data-pause]') : null;\n        if (video && playButton) {\n            if (playing) {\n                video.play();\n                playButton.setAttribute('aria-pressed', 'false');\n            }\n            else {\n                video.pause();\n                playButton.setAttribute('aria-pressed', 'true');\n            }\n        }\n    }, [playing, videoRef]);\n    const { inView } = useInViewport({ ref: videoRef });\n    useEffect(() => {\n        if (videoRef && videoRef.current && inView && onece) {\n            setPlaying(true);\n            setOnce(false);\n        }\n    }, [videoRef, inView, onece]);\n    return (React.createElement(\"div\", { ref: videoRef, className: \"slide_video-container video-module simplified video-module-PDP\" },\n        React.createElement(ThronVideo, Object.assign({ thronID: thronid }, optionalVideoProps, { autoplay: false })),\n        React.createElement(\"div\", { className: \"video-module__veil\" }),\n        React.createElement(\"div\", { className: \"video-module__controls\" },\n            React.createElement(\"button\", { \"data-pause\": true, \"aria-pressed\": \"true\", \"aria-label\": \"play-pause\", className: \"play-pause-button\", onClick: () => setPlaying(!playing) }))));\n};\nexport default Video;\n","import { useEffect, useState } from 'react';\nconst useInViewport = (props) => {\n    const { ref } = props;\n    const options = {\n        root: null,\n        rootMargin: '0px',\n    };\n    const [inView, setInView] = useState(false);\n    const callback = (e) => {\n        const [entry] = e;\n        setInView(entry.isIntersecting);\n    };\n    useEffect(() => {\n        const observer = new IntersectionObserver(callback, options);\n        if (ref && ref.current) {\n            observer.observe(ref.current);\n        }\n        return () => {\n            if (ref && ref.current) {\n                observer.unobserve(ref.current);\n            }\n            observer.disconnect();\n        };\n    }, [ref]);\n    return { inView };\n};\nexport default useInViewport;\n"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","argType","push","Array","isArray","inner","apply","toString","Object","prototype","key","call","join","module","exports","default","props","videoRef","useRef","thronComponent","setThronComponent","useState","useEffect","current","changeContent","thronID","options","onPauseCallback","onPlayCallback","onCompleteCallback","onInitCallback","onTimeUpdate","loopTimes","newThronComponent","ref","className","thronMobileID","muted","autoplay","loop","lockBitrate","noskin","sessionId","src","desktopsrc","tabletsrc","mobilesrc","mobilesmallsrc","image_alt","avoidLazy","avoidMedia","srcset","useMemo","assign","srcSet","media","alt","loading","title","thronid","thronmobileid","optionalVideoProps","onece","setOnce","playing","setPlaying","video","querySelector","playButton","play","setAttribute","pause","inView","onClick","root","rootMargin","setInView","callback","e","entry","isIntersecting","observer","IntersectionObserver","observe","unobserve","disconnect"],"sourceRoot":""}