{"version":3,"file":"static/js/6020.ff358e21.chunk.js","mappings":"oNAIe,SAASA,EAAmBC,GAAiD,IAAhD,IAAEC,EAAG,QAAEC,EAAUA,SAAQ,SAAEC,GAAW,GAAOH,EACrF,MAAOI,EAAOC,IAAYC,EAAAA,EAAAA,UAAS,IAC5BC,EAAQC,IAAaF,EAAAA,EAAAA,UAAS,GAOrC,OACIG,EAAAA,EAAAA,KAAA,OACIC,IAAKC,IAPb,IAAsBC,EAQND,IAPZN,GADkBO,EASOD,GARXE,aACdL,EAAUI,EAAKE,cAQP,EAEJC,IAAKC,IAELP,EAAAA,EAAAA,KAAA,UACIQ,IAAG,oDAAAC,OAAsDd,EAAK,YAAAc,OAAWX,EAAM,UAAAW,OAASjB,EAAG,8BAAAiB,OAA6Bf,GACxHC,MAAOA,EACPG,OAAQA,EACRY,MAAOlB,EACPc,IAAKK,EACLC,OAAQnB,EACRoB,UAAU,KACVC,YAAY,IACZC,iBAAiB,EACjBC,MAAM,8EAItB,CAQA,MAAMT,EAAc,CAAAU,KAAA,SAAAC,OAAA,6CAMdP,EAAW,CAAAM,KAAA,UAAAC,OAAA,0DCtCjB,MAAMC,EAAc,2BAEL,SAASC,EAAW7B,GAA0D,IAAzD,gBAAE8B,GAAkB,EAAI,eAAEC,EAAc,IAAE9B,EAAG,MAAE+B,GAAOhC,EACtF,MAAOiC,EAASC,IAAc5B,EAAAA,EAAAA,WAAS,GACjC6B,EAAcP,EAAYQ,KAAKnC,IAC/B,IAAES,EAAG,OAAE2B,IAAWC,EAAAA,EAAAA,IAAU,CAC9BC,aAAa,EACbC,WAAY,WACZC,MAAOV,IAGX,OACItB,EAAAA,EAAAA,KAAA,OAAKC,IAAKA,EAAKK,KAAG2B,EAAAA,EAAAA,KAAE,CAAC1B,GAAgBD,EAAAA,EAAAA,KAAIiB,EAAK,KAAE,MAC1CC,IAAWxB,EAAAA,EAAAA,KAACkC,EAAAA,EAAgB,CAAC5B,IAAK6B,IACnCd,KAAqBC,GAAkBM,KACpC5B,EAAAA,EAAAA,KAAAoC,EAAAA,SAAA,KACKV,GACG1B,EAAAA,EAAAA,KAACV,EAAmB,CAACE,IAAKA,EAAKC,QAASA,IAAMgC,GAAW,GAAO/B,UAAQ,KAExEM,EAAAA,EAAAA,KAACqC,IAAW,CACR5C,QAASA,IAAMgC,GAAW,GAC1BjC,IAAKA,EACLG,MAAM,OACNG,OAAO,OACPJ,UAAQ,KAOpC,CAOA,MAAMa,GAAiBD,EAAAA,EAAAA,KAAG,2CAGFgC,EAAAA,GAAUC,MAAK,uBAIjCJ,EAAa,CAAAlB,KAAA,UAAAC,OAAA,+D","sources":["components/VideoPlayerFacebook.js","components/VideoPlayer.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { css } from '@emotion/core';\n\nexport default function VideoPlayerFacebook({ url, onReady = () => {}, controls = false }) {\n    const [width, setWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    function setDimension(elem) {\n        setWidth(elem.offsetWidth);\n        setHeight(elem.offsetHeight);\n    }\n\n    return (\n        <div\n            ref={node => {\n                if (node) {\n                    setDimension(node);\n                }\n            }}\n            css={containerStyle}\n        >\n            <iframe\n                src={`https://www.facebook.com/plugins/video.php?width=${width}&height=${height}&href=${url}&show_text=false&controls=${controls}`}\n                width={width}\n                height={height}\n                title={url}\n                css={iframeStyle}\n                onLoad={onReady}\n                scrolling=\"no\"\n                frameBorder=\"0\"\n                allowFullScreen={true}\n                allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"\n            />\n        </div>\n    );\n}\n\nVideoPlayerFacebook.propTypes = {\n    url: PropTypes.string,\n    onReady: PropTypes.func,\n    controls: PropTypes.bool\n};\n\nconst containerStyle = css`\n    width: 100%;\n    height: 100%;\n    position: relative;\n`;\n\nconst iframeStyle = css`\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n`;\n","import React, { useState } from 'react';\nimport ReactPlayer from 'react-player/lazy';\nimport PropTypes from 'prop-types';\nimport { css } from '@emotion/core';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { useInView } from 'react-intersection-observer';\n\nimport { system100 } from 'Mui/styles/color';\nimport { stylePropType } from 'utils/propTypes';\n\nimport VideoPlayerFacebook from 'components/VideoPlayerFacebook';\n\nconst fbUrlRegexp = /facebook\\.com|fb\\.watch/i;\n\nexport default function VideoPlayer({ canStartLoading = true, enableLazyLoad, url, style }) {\n    const [isReady, setIsReady] = useState(false);\n    const isFbTypeUrl = fbUrlRegexp.test(url);\n    const { ref, inView } = useInView({\n        triggerOnce: true,\n        rootMargin: '100px 0%',\n        skip: !enableLazyLoad\n    });\n\n    return (\n        <div ref={ref} css={[containerStyle, css(style)]}>\n            {!isReady && <CircularProgress css={progressStyle} />}\n            {canStartLoading && (!enableLazyLoad || inView) && (\n                <>\n                    {isFbTypeUrl ? (\n                        <VideoPlayerFacebook url={url} onReady={() => setIsReady(true)} controls />\n                    ) : (\n                        <ReactPlayer\n                            onReady={() => setIsReady(true)}\n                            url={url}\n                            width=\"100%\"\n                            height=\"100%\"\n                            controls\n                        />\n                    )}\n                </>\n            )}\n        </div>\n    );\n}\n\nVideoPlayer.propTypes = {\n    url: PropTypes.string,\n    style: stylePropType\n};\n\nconst containerStyle = css`\n    width: 100%;\n    height: 100%;\n    background-color: ${system100.color};\n    position: relative;\n`;\n\nconst progressStyle = css`\n    position: absolute;\n    margin: auto;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n`;\n"],"names":["VideoPlayerFacebook","_ref","url","onReady","controls","width","setWidth","useState","height","setHeight","___EmotionJSX","ref","node","elem","offsetWidth","offsetHeight","css","containerStyle","src","concat","title","iframeStyle","onLoad","scrolling","frameBorder","allowFullScreen","allow","name","styles","fbUrlRegexp","VideoPlayer","canStartLoading","enableLazyLoad","style","isReady","setIsReady","isFbTypeUrl","test","inView","useInView","triggerOnce","rootMargin","skip","_css","CircularProgress","progressStyle","React","ReactPlayer","system100","color"],"sourceRoot":""}