{"version":3,"file":"static/js/VideoList.cc9d6ef5.js","mappings":"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","sources":["components/Image/ImageLoader.tsx","components/Video/Video.styled.ts","components/Video/Video.tsx","components/VideoList/VideoList.styled.ts","components/VideoList/VideoList.tsx"],"sourcesContent":["import loadable, { DefaultComponent } from \"@loadable/component\";\nimport React, { ReactElement } from \"react\";\n\nimport ImageProps from \"./ImageProps\";\n\nconst Image = loadable(\n    (): Promise<DefaultComponent<ImageProps>> =>\n        import(/* webpackChunkName: \"Image\" */ \"./Image\"),\n);\nconst ImageLoader = (props: ImageProps): ReactElement => <Image {...props} />;\nexport default ImageLoader;\n","import { styled } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { styleHeadingL, styleHeadingXL } from \"style/components/Typography\";\nimport { GUTTER, columnGap } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\nimport { overlay } from \"style/overlay\";\n\nexport const PlayIconWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    inset: 0;\n    justify-content: center;\n    position: absolute;\n    z-index: 2;\n`;\n\nexport const TitleWrapper = styled(GridContainer)`\n    ${columnGap}\n    display: grid;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    padding: ${theme(\"size\", {\n        small: `0.875rem`,\n        large: `1.75rem ${GUTTER.SM}`,\n    })};\n    z-index: 2;\n\n    ${MQ.FROM_M} {\n        grid-template-columns: ${theme(\"size\", {\n            small: \"repeat(8, [col-start] 1fr)\",\n            large: \"repeat(12, [col-start] 1fr)\",\n        })};\n        padding: ${theme(\"size\", {\n            small: `0.875rem`,\n            large: `3.5rem ${GUTTER.MD}`,\n        })};\n    }\n\n    ${MQ.FROM_L} {\n        grid-template-columns: ${theme(\"size\", {\n            small: \"repeat(6, [col-start] 1fr)\",\n            large: \"repeat(12, [col-start] 1fr)\",\n        })};\n        padding: ${theme(\"size\", {\n            small: `1.3125rem`,\n            large: `3.5rem ${GUTTER.MD}`,\n        })};\n    }\n\n    ${MQ.FROM_XL} {\n        grid-template-columns: ${theme(\"size\", {\n            small: \"repeat(6, [col-start] 1fr)\",\n            large: \"repeat(12, [col-start] 1fr)\",\n        })};\n        padding: ${theme(\"size\", {\n            small: `1.75rem`,\n            large: `4.375rem ${GUTTER.XL}`,\n        })};\n    }\n`;\n\nexport const Title = styled.h2`\n    && {\n        ${theme(\"size\", {\n            large: styleHeadingXL,\n            small: styleHeadingL,\n        })}\n        color: var(--text-on-image-primary);\n        grid-column: col-start 1 / span 4;\n        margin-top: 0;\n        text-align: left;\n\n        ${MQ.FROM_M} {\n            grid-column: ${theme(\"size\", {\n                small: \"col-start 1 / span 6\",\n                large: \"col-start 1 / span 9\",\n            })};\n        }\n\n        ${MQ.FROM_L} {\n            grid-column: ${theme(\"size\", {\n                small: \"col-start 1 / span 5\",\n                large: \"col-start 1 / span 6\",\n            })};\n        }\n\n        ${MQ.FROM_XL} {\n            grid-column: ${theme(\"size\", {\n                small: \"col-start 1 / span 5\",\n                large: \"col-start 1 / span 6\",\n            })};\n        }\n    }\n`;\n\nexport const VideoWrapper = styled.div`\n    border: none;\n    height: auto;\n    width: 100%;\n`;\n\nexport const VideoContainer = styled.div`\n    height: 0;\n    overflow: hidden;\n    padding-bottom: 56.25%;\n    position: relative;\n\n    & > div,\n    & > video {\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n    }\n`;\n\nexport const Overlay = styled.div`\n    inset: 0;\n    position: absolute;\n    z-index: 1;\n\n    &::before {\n        ${overlay(\"UpLeft\")};\n    }\n`;\n\nexport const PlayIcon = styled.div`\n    backdrop-filter: blur(2px);\n    border: 1px solid var(--button-on-image-outline-border);\n    border-radius: 0.25rem;\n    padding: 0.375rem;\n    transition: all 0.2s ease-in-out;\n    z-index: 3;\n\n    ${MQ.FROM_XL} {\n        padding: 1.25rem;\n    }\n`;\n\nexport const ButtonWrapper = styled.div`\n    align-items: center;\n    background: var(--block-blue-default);\n    border: none;\n    color: var(--text-on-image-primary);\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-width: 100%;\n    padding: 0;\n    position: relative;\n    width: 100%;\n\n    &:focus-visible {\n        ${PlayIcon} {\n            outline: 7px solid var(--button-focus);\n            outline-offset: 7px;\n        }\n    }\n\n    &:hover {\n        ${PlayIcon} {\n            background: var(--button-on-image-outline-hover);\n            border-color: var(--button-on-image-outline-hover);\n            color: var(--text-on-neutral-primary);\n        }\n    }\n`;\n","import React, { ReactElement } from \"react\";\nimport ReactPlayer from \"react-player/lazy\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport Icon from \"components/Icon\";\nimport Image from \"components/Image\";\nimport { useBreakpoint } from \"hooks\";\nimport { A11y } from \"style/components/A11Y\";\nimport generateSrcSet, { commonSourceSets } from \"style/generateSrcSet\";\n\nimport {\n    VideoWrapper,\n    VideoContainer,\n    ButtonWrapper,\n    Title,\n    TitleWrapper,\n    PlayIcon,\n    PlayIconWrapper,\n    Overlay,\n} from \"./Video.styled\";\nimport VideoProps, { PlayButtonProps } from \"./VideoProps\";\n\nconst Play = ({\n    image,\n    title,\n    l18nPlayVideo,\n    imageAlt,\n}: PlayButtonProps): ReactElement => {\n    if (image && image.url)\n        image.srcSet = generateSrcSet({\n            image: image.url,\n            focalPoint: image.focalPoint,\n            content: commonSourceSets.large,\n            maxWidth: image.uploadedWidth,\n            maxHeight: image.uploadedHeight,\n            format: \"jpg\",\n        });\n\n    let iconSize: string;\n    switch (useBreakpoint()) {\n        case \"XL\":\n            iconSize = \"70\";\n            break;\n        case \"L\":\n            iconSize = \"56\";\n            break;\n        case \"M\":\n            iconSize = \"56\";\n            break;\n        default:\n            iconSize = \"28\";\n    }\n\n    return (\n        <ButtonWrapper role=\"button\" tabIndex={0}>\n            {title && (\n                <TitleWrapper>\n                    <Title dangerouslySetInnerHTML={{ __html: title }} />\n                </TitleWrapper>\n            )}\n            <PlayIconWrapper>\n                <PlayIcon>\n                    <Icon\n                        key={`Icon-play${iconSize || \"\"}`}\n                        icon={`play${iconSize}`}\n                    />\n                    <A11y>{l18nPlayVideo}</A11y>\n                </PlayIcon>\n            </PlayIconWrapper>\n            {image ? (\n                <Image\n                    {...image}\n                    overlay={image.overlay || \"UpLeft\"}\n                    alt={image.alt || imageAlt || \"\"}\n                    cover={true}\n                    caption={undefined}\n                    darken={true}\n                />\n            ) : (\n                <Overlay />\n            )}\n        </ButtonWrapper>\n    );\n};\n\nconst Video = ({\n    identifier,\n    url,\n    title,\n    image,\n    className,\n    anchorName,\n    playing = false,\n    size = \"large\",\n    l18nPlayVideo,\n    imageAlt,\n}: VideoProps): ReactElement => {\n    if (url?.includes(\"youtube.com\"))\n        url = url.replace(\"youtube.com\", \"youtube-nocookie.com\");\n\n    if (className?.includes(\"embedded\")) size = \"small\";\n\n    return (\n        <ThemeProvider theme={{ hasImage: !!image, size: size }}>\n            <VideoWrapper\n                className={className}\n                id={anchorName}\n                key={identifier || `VideoContent`}\n            >\n                <ReactPlayer\n                    url={url}\n                    title={title}\n                    light={!playing} // Show overlay when playing isnt set\n                    playing={true}\n                    playIcon={\n                        <Play\n                            image={image}\n                            imageAlt={imageAlt}\n                            title={title}\n                            l18nPlayVideo={l18nPlayVideo}\n                        />\n                    }\n                    wrapper={VideoContainer}\n                    width=\"100%\"\n                    height=\"100%\"\n                    controls={true}\n                    previewTabIndex={null}\n                />\n            </VideoWrapper>\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(Video);\n","import { styled } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport { VideoWrapper as Video } from \"components/Video/Video.styled\";\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { columnGap } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\n\nconst textColor = theme(\"theme\", {\n    lightgray: \"--text-on-neutral-primary\",\n    cyan: \"--text-on-cyan-primary\",\n    blue: \"--text-on-blue-primary\",\n});\n\nexport const Container = styled(GridContainer)`\n    display: flex;\n    flex-flow: column;\n    justify-content: flex-start;\n    padding-bottom: 4.375rem;\n    padding-top: 2.1875rem;\n    position: relative;\n\n    ${MQ.FROM_M} {\n        padding-bottom: 6.125rem;\n        padding-top: 3.5rem;\n    }\n\n    ${MQ.FROM_XL} {\n        padding-bottom: 8.75rem;\n        padding-top: 4.375rem;\n    }\n`;\n\nexport const Videos = styled.div.attrs<{\n    $count: number;\n}>(() => ({}))`\n    ${columnGap};\n    color: var(${textColor});\n    display: grid;\n    grid-template-columns: repeat(1, [col-start] 1fr);\n    row-gap: 1.75rem;\n\n    ${MQ.FROM_M} {\n        grid-template-columns: repeat(3, [col-start] 1fr);\n        row-gap: 2.1875rem;\n\n        ${Video} {\n            grid-column: 1 / span 2;\n\n            &:nth-child(even) {\n                grid-column: 2 / span 2;\n            }\n        }\n    }\n\n    ${MQ.FROM_L} {\n        row-gap: 2.1875rem;\n        grid-template-columns: repeat(2, [col-start] 1fr);\n\n        ${Video} {\n            grid-column: auto;\n\n            &:nth-child(even) {\n                grid-column: auto;\n            }\n        }\n    }\n\n    ${MQ.FROM_XL} {\n        row-gap: 3.5rem;\n    }\n`;\n","import React, { ReactElement } from \"react\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport Section from \"components/Section\";\nimport Video from \"components/Video/Video\";\nimport { addEditAttributes } from \"utils/episerver\";\n\nimport { Container, Videos } from \"./VideoList.styled\";\nimport VideoListProps from \"./VideoListProps\";\n\nconst VideoList = ({\n    identifier,\n    theme,\n    videos,\n    anchorName,\n}: VideoListProps): ReactElement => {\n    return (\n        <Section id={anchorName} theme={theme} alignItems=\"center\">\n            <ThemeProvider\n                theme={{\n                    theme: theme,\n                }}\n            >\n                <Container\n                    key={identifier || `VideoListContent`}\n                    {...addEditAttributes(\"VideoList\")}\n                >\n                    <Videos $count={videos ? videos.length : 0}>\n                        {videos?.map((video, index) => (\n                            <Video\n                                key={`video${index}`}\n                                {...video}\n                                size=\"small\"\n                            />\n                        ))}\n                    </Videos>\n                </Container>\n            </ThemeProvider>\n        </Section>\n    );\n};\n\nexport default React.memo(VideoList);\n"],"names":["Image","loadable","resolved","chunkName","isReady","props","key","resolve","__webpack_modules__","importAsync","requireAsync","then","requireSync","id","__webpack_require__","ImageLoader","_jsx","PlayIconWrapper","styled","div","withConfig","componentId","TitleWrapper","GridContainer","columnGap","theme","small","large","GUTTER","SM","MQ","FROM_M","MD","FROM_L","FROM_XL","XL","Title","h2","styleHeadingXL","styleHeadingL","VideoWrapper","VideoContainer","Overlay","overlay","PlayIcon","ButtonWrapper","Play","image","title","l18nPlayVideo","imageAlt","iconSize","url","srcSet","generateSrcSet","focalPoint","content","commonSourceSets","maxWidth","uploadedWidth","maxHeight","uploadedHeight","format","useBreakpoint","_jsxs","role","tabIndex","children","dangerouslySetInnerHTML","__html","Icon","icon","A11y","alt","cover","caption","undefined","darken","Video","identifier","className","anchorName","playing","size","_url","includes","replace","ThemeProvider","hasImage","ReactPlayer","light","playIcon","wrapper","width","height","controls","previewTabIndex","React","textColor","lightgray","cyan","blue","Container","Videos","attrs","VideoList","videos","Section","alignItems","addEditAttributes","$count","length","map","video","index"],"sourceRoot":""}