@blateral/b.kit 2.7.2 → 2.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";var n=require("./ClockFilled-2483aa4a.js"),e=require("react"),t=require("styled-components"),o=require("./styles-3a495a2d.js"),a=require("./useCookieConsent-aa9f1104.js"),i=require("./Copy-ea6ab025.js"),r=require("./ButtonGhost-628bbd60.js"),l=require("./LibThemeProvider-4823de57.js");function s(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var c,u,d,m,g,p,b=s(e),f=s(t),v=f.default.div.withConfig({displayName:"VideoCard__View",componentId:"sc-7e1mvm-0"})(c||(c=n.__makeTemplateObject(["\n text-align: center;\n\n cursor: ",";\n position: relative;\n\n padding-bottom: 56.25%;\n\n background-image: url('","');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n\n border-radius: ",";\n overflow: hidden;\n\n @media "," {\n text-align: left;\n\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n &:before {\n content: ",";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-color: ",";\n opacity: ",";\n\n pointer-events: none;\n }\n\n &:after {\n content: ",";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n pointer-events: none;\n\n background: linear-gradient(\n 358.19deg,\n rgba(29, 34, 35, 0.52) 12.37%,\n rgba(29, 34, 35, 0) 59.02%\n );\n }\n"],["\n text-align: center;\n\n cursor: ",";\n position: relative;\n\n padding-bottom: 56.25%;\n\n background-image: url('","');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n\n border-radius: ",";\n overflow: hidden;\n\n @media "," {\n text-align: left;\n\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n &:before {\n content: ",";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-color: ",";\n opacity: ",";\n\n pointer-events: none;\n }\n\n &:after {\n content: ",";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n pointer-events: none;\n\n background: linear-gradient(\n 358.19deg,\n rgba(29, 34, 35, 0.52) 12.37%,\n rgba(29, 34, 35, 0) 59.02%\n );\n }\n"])),(function(n){return n.onClick&&"pointer"}),(function(n){var e=n.bgImage;return e?e.small:""}),(function(n){var e=n.theme;return o.getGlobals(e).sections.edgeRadius}),o.mq.medium,(function(n){var e=n.bgImage;return(null==e?void 0:e.medium)&&'url("'.concat(e.medium,'")')}),o.mq.semilarge,(function(n){var e=n.bgImage;return(null==e?void 0:e.semilarge)&&'url("'.concat(e.semilarge,'")')}),o.mq.large,(function(n){var e=n.bgImage;return(null==e?void 0:e.large)&&'url("'.concat(e.large,'")')}),o.mq.xlarge,(function(n){var e=n.bgImage;return(null==e?void 0:e.xlarge)&&'url("'.concat(e.xlarge,'")')}),(function(n){var e=n.isActive,t=n.bgImage;return!e&&t&&'""'}),(function(n){var e=n.theme;return o.getColors(e).elementBg.medium}),(function(n){return n.bgImage?"0.3":"0"}),(function(n){var e=n.isActive,t=n.bgImage;return!e&&t&&'""'})),y=f.default.button.withConfig({displayName:"VideoCard__VideoControls",componentId:"sc-7e1mvm-1"})(u||(u=n.__makeTemplateObject(["\n display: block;\n border: none;\n background: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ",";\n z-index: 1;\n padding: 0;\n\n cursor: pointer;\n\n & > * {\n opacity: 0.8;\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n height: 80px;\n width: 80px;\n\n color: ",";\n }\n\n ",":hover > & > * {\n transform: scale(1.05);\n opacity: 1;\n }\n\n ",":active > & > * {\n transform: scale(0.95);\n opacity: 1;\n }\n\n &:focus {\n outline: 2px solid ",";\n border-radius: 50%;\n opacity: 1;\n\n & > * {\n color: ",";\n }\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n }\n"],["\n display: block;\n border: none;\n background: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ",";\n z-index: 1;\n padding: 0;\n\n cursor: pointer;\n\n & > * {\n opacity: 0.8;\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n height: 80px;\n width: 80px;\n\n color: ",";\n }\n\n ",":hover > & > * {\n transform: scale(1.05);\n opacity: 1;\n }\n\n ",":active > & > * {\n transform: scale(0.95);\n opacity: 1;\n }\n\n &:focus {\n outline: 2px solid ",";\n border-radius: 50%;\n opacity: 1;\n\n & > * {\n color: ",";\n }\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n }\n"])),(function(n){var e=n.theme;return o.getColors(e).elementBg.light}),(function(n){var e=n.theme;return o.getColors(e).elementBg.dark}),v,v,(function(n){var e=n.theme;return o.getColors(e).primary.default}),(function(n){var e=n.theme;return o.getColors(e).primary.default})),h=f.default.div.withConfig({displayName:"VideoCard__ConsentOverlay",componentId:"sc-7e1mvm-2"})(d||(d=n.__makeTemplateObject(["\n display: ",";\n justify-content: center;\n align-items: center;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n background-color: rgba(0, 0, 0, 0.6);\n pointer-events: ",";\n"],["\n display: ",";\n justify-content: center;\n align-items: center;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n background-color: rgba(0, 0, 0, 0.6);\n pointer-events: ",";\n"])),(function(n){return n.isVisible?"flex":"none"}),(function(n){return n.isVisible?"all":"none"})),k=f.default.div.withConfig({displayName:"VideoCard__ConsentContent",componentId:"sc-7e1mvm-3"})(m||(m=n.__makeTemplateObject(["\n max-width: 330px;\n text-align: center;\n\n & > * + * {\n margin-top: ","px;\n }\n"],["\n max-width: 330px;\n text-align: center;\n\n & > * + * {\n margin-top: ","px;\n }\n"])),3*o.spacings.nudge),C=f.default(i.Copy).withConfig({displayName:"VideoCard__ConsentText",componentId:"sc-7e1mvm-4"})(g||(g=n.__makeTemplateObject([""],[""]))),x=f.default.iframe.withConfig({displayName:"VideoCard__Iframe",componentId:"sc-7e1mvm-5"})(p||(p=n.__makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n border: none;\n"],["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n border: none;\n"])));exports.VideoCard=function(t){var o,i=t.bgImage,s=t.embedId,c=t.playIcon,u=t.consentText,d=void 0===u?"Für die Wiedergabe von Videos muss der Nutzung von Cookies & Daten zugestimmt werden.":u,m=t.consentAction,g=t.onPlay,p=t.className,f=l.useLibTheme().globals,_=e.useState(!1),w=_[0],I=_[1],j=e.useState(!1),V=j[0],q=j[1],T=function(){q(!1)};return b.default.createElement(v,{onClick:V?void 0:function(){var n=!1;if(g)n=g();else{var e=a.getCookie(f.cookie.name);n=f.cookie.videoCookieTypeRestrictions.reduce((function(n,t){var o,a;return n?!(!e||!(null==e?void 0:e.data.types))&&(n=!!(null===(a=null===(o=null==e?void 0:e.data)||void 0===o?void 0:o.types)||void 0===a?void 0:a[t])):n}),!0)}n?(I(!0),q(!1)):q(!0)},bgImage:w?void 0:i,isActive:w,className:p},!w&&!V&&b.default.createElement(y,null,c||b.default.createElement(n.Play,{iconColor:"#000"})),w&&b.default.createElement(x,{id:"ytplayer",src:"https://www.youtube.com/embed/".concat(s,"?autoplay=1"),allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"}),b.default.createElement(h,{isVisible:V},b.default.createElement(k,null,d&&b.default.createElement(C,{isInverted:!0},d),m?m({handleClick:T,consentProps:(o={},o[a.selectors.buttons.attribute]="",o)}):b.default.createElement(r.ButtonGhost.View,{as:"button",isInverted:!0,onClick:T,className:a.selectors.buttons.class},b.default.createElement(r.ButtonGhost.Label,null,"Zustimmung ändern")))))};
2
- //# sourceMappingURL=VideoCard-a51690c9.js.map
1
+ "use strict";var n=require("./ClockFilled-2483aa4a.js"),e=require("react"),t=require("styled-components"),o=require("./styles-3a495a2d.js"),a=require("./useCookieConsent-aa9f1104.js"),i=require("./Copy-ea6ab025.js"),r=require("./ButtonGhost-628bbd60.js"),l=require("./LibThemeProvider-4823de57.js");function s(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var c,u,d,m,g,p,b=s(e),f=s(t),v=f.default.div.withConfig({displayName:"VideoCard__View",componentId:"sc-7e1mvm-0"})(c||(c=n.__makeTemplateObject(["\n text-align: center;\n\n cursor: ",";\n position: relative;\n\n padding-bottom: 56.25%;\n\n background-image: url('","');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n\n border-radius: ",";\n overflow: hidden;\n\n @media "," {\n text-align: left;\n\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n &:before {\n content: ",";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-color: ",";\n opacity: ",";\n\n pointer-events: none;\n }\n\n &:after {\n content: ",";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n pointer-events: none;\n\n background: linear-gradient(\n 358.19deg,\n rgba(29, 34, 35, 0.52) 12.37%,\n rgba(29, 34, 35, 0) 59.02%\n );\n }\n"],["\n text-align: center;\n\n cursor: ",";\n position: relative;\n\n padding-bottom: 56.25%;\n\n background-image: url('","');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n\n border-radius: ",";\n overflow: hidden;\n\n @media "," {\n text-align: left;\n\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n @media "," {\n background-image: ",";\n }\n\n &:before {\n content: ",";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-color: ",";\n opacity: ",";\n\n pointer-events: none;\n }\n\n &:after {\n content: ",";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n pointer-events: none;\n\n background: linear-gradient(\n 358.19deg,\n rgba(29, 34, 35, 0.52) 12.37%,\n rgba(29, 34, 35, 0) 59.02%\n );\n }\n"])),(function(n){return n.onClick&&"pointer"}),(function(n){var e=n.bgImage;return e?e.small:""}),(function(n){var e=n.theme;return o.getGlobals(e).sections.edgeRadius}),o.mq.medium,(function(n){var e=n.bgImage;return(null==e?void 0:e.medium)&&'url("'.concat(e.medium,'")')}),o.mq.semilarge,(function(n){var e=n.bgImage;return(null==e?void 0:e.semilarge)&&'url("'.concat(e.semilarge,'")')}),o.mq.large,(function(n){var e=n.bgImage;return(null==e?void 0:e.large)&&'url("'.concat(e.large,'")')}),o.mq.xlarge,(function(n){var e=n.bgImage;return(null==e?void 0:e.xlarge)&&'url("'.concat(e.xlarge,'")')}),(function(n){var e=n.isActive,t=n.bgImage;return!e&&t&&'""'}),(function(n){var e=n.theme;return o.getColors(e).elementBg.medium}),(function(n){return n.bgImage?"0.3":"0"}),(function(n){var e=n.isActive,t=n.bgImage;return!e&&t&&'""'})),k=f.default.button.withConfig({displayName:"VideoCard__VideoControls",componentId:"sc-7e1mvm-1"})(u||(u=n.__makeTemplateObject(["\n display: block;\n border: none;\n background: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ",";\n z-index: 1;\n padding: 0;\n\n cursor: pointer;\n\n & > * {\n opacity: 0.8;\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n height: 80px;\n width: 80px;\n\n color: ",";\n }\n\n ",":hover > & > * {\n transform: scale(1.05);\n opacity: 1;\n }\n\n ",":active > & > * {\n transform: scale(0.95);\n opacity: 1;\n }\n\n &:focus {\n outline: 2px solid ",";\n border-radius: 50%;\n opacity: 1;\n\n & > * {\n color: ",";\n }\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n }\n"],["\n display: block;\n border: none;\n background: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ",";\n z-index: 1;\n padding: 0;\n\n cursor: pointer;\n\n & > * {\n opacity: 0.8;\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n height: 80px;\n width: 80px;\n\n color: ",";\n }\n\n ",":hover > & > * {\n transform: scale(1.05);\n opacity: 1;\n }\n\n ",":active > & > * {\n transform: scale(0.95);\n opacity: 1;\n }\n\n &:focus {\n outline: 2px solid ",";\n border-radius: 50%;\n opacity: 1;\n\n & > * {\n color: ",";\n }\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n }\n"])),(function(n){var e=n.theme;return o.getColors(e).elementBg.light}),(function(n){var e=n.theme;return o.getColors(e).elementBg.dark}),v,v,(function(n){var e=n.theme;return o.getColors(e).primary.default}),(function(n){var e=n.theme;return o.getColors(e).primary.default})),y=f.default.div.withConfig({displayName:"VideoCard__ConsentOverlay",componentId:"sc-7e1mvm-2"})(d||(d=n.__makeTemplateObject(["\n display: ",";\n justify-content: center;\n align-items: center;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n background-color: rgba(0, 0, 0, 0.6);\n pointer-events: ",";\n"],["\n display: ",";\n justify-content: center;\n align-items: center;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n background-color: rgba(0, 0, 0, 0.6);\n pointer-events: ",";\n"])),(function(n){return n.isVisible?"flex":"none"}),(function(n){return n.isVisible?"all":"none"})),h=f.default.div.withConfig({displayName:"VideoCard__ConsentContent",componentId:"sc-7e1mvm-3"})(m||(m=n.__makeTemplateObject(["\n max-width: 330px;\n text-align: center;\n\n & > * + * {\n margin-top: ","px;\n }\n"],["\n max-width: 330px;\n text-align: center;\n\n & > * + * {\n margin-top: ","px;\n }\n"])),3*o.spacings.nudge),C=f.default(i.Copy).withConfig({displayName:"VideoCard__ConsentText",componentId:"sc-7e1mvm-4"})(g||(g=n.__makeTemplateObject([""],[""]))),x=f.default.iframe.withConfig({displayName:"VideoCard__Iframe",componentId:"sc-7e1mvm-5"})(p||(p=n.__makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n border: none;\n"],["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n border: none;\n"])));exports.VideoCard=function(t){var o,i=t.bgImage,s=t.embedId,c=t.playIcon,u=t.consentText,d=void 0===u?"Für die Wiedergabe von Videos muss der Nutzung von Cookies & Daten zugestimmt werden.":u,m=t.consentAction,g=t.onPlayClick,p=t.className,f=l.useLibTheme().globals,_=e.useState(!1),w=_[0],I=_[1],j=e.useState(!1),V=j[0],q=j[1],T=function(){q(!1)};return b.default.createElement(v,{onClick:V?void 0:function(){var n=!1;if(g)n=g();else{var e=a.getCookie(f.cookie.name);n=f.cookie.videoCookieTypeRestrictions.reduce((function(n,t){var o,a;return n?!(!e||!(null==e?void 0:e.data.types))&&(n=!!(null===(a=null===(o=null==e?void 0:e.data)||void 0===o?void 0:o.types)||void 0===a?void 0:a[t])):n}),!0)}n?(I(!0),q(!1)):q(!0)},bgImage:w?void 0:i,isActive:w,className:p},!w&&!V&&b.default.createElement(k,null,c||b.default.createElement(n.Play,{iconColor:"#000"})),w&&b.default.createElement(x,{id:"ytplayer",src:"https://www.youtube.com/embed/".concat(s,"?autoplay=1"),allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"}),b.default.createElement(y,{isVisible:V},b.default.createElement(h,null,d&&b.default.createElement(C,{isInverted:!0},d),m?m({handleClick:T,consentProps:(o={},o[a.selectors.buttons.attribute]="",o)}):b.default.createElement(r.ButtonGhost.View,{as:"button",isInverted:!0,onClick:T,className:a.selectors.buttons.class},b.default.createElement(r.ButtonGhost.Label,null,"Zustimmung ändern")))))};
2
+ //# sourceMappingURL=VideoCard-4b737f05.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VideoCard-4b737f05.js","sources":["../src/components/blocks/VideoCard.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { ImageProps } from 'components/blocks/Image';\nimport {\n mq,\n getColors as color,\n getGlobals as global,\n spacings,\n} from 'utils/styles';\nimport Play from 'components/base/icons/Play';\nimport {\n CookieConsentData,\n selectors,\n} from 'utils/cookie-consent/useCookieConsent';\nimport { Cookie, getCookie } from 'utils/cookie-consent/cookie';\nimport Copy from 'components/typography/Copy';\nimport ButtonGhost from 'components/buttons/ButtonGhost';\nimport { useLibTheme } from 'utils/LibThemeProvider';\n\nconst View = styled.div<{\n bgImage?: ImageProps;\n isActive?: boolean;\n onClick?: () => void;\n}>`\n text-align: center;\n\n cursor: ${({ onClick }) => onClick && 'pointer'};\n position: relative;\n\n padding-bottom: 56.25%;\n\n background-image: url('${({ bgImage }) => (bgImage ? bgImage.small : '')}');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n\n border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n overflow: hidden;\n\n @media ${mq.medium} {\n text-align: left;\n\n background-image: ${({ bgImage }) =>\n bgImage?.medium && `url(\"${bgImage.medium}\")`};\n }\n\n @media ${mq.semilarge} {\n background-image: ${({ bgImage }) =>\n bgImage?.semilarge && `url(\"${bgImage.semilarge}\")`};\n }\n\n @media ${mq.large} {\n background-image: ${({ bgImage }) =>\n bgImage?.large && `url(\"${bgImage.large}\")`};\n }\n\n @media ${mq.xlarge} {\n background-image: ${({ bgImage }) =>\n bgImage?.xlarge && `url(\"${bgImage.xlarge}\")`};\n }\n\n &:before {\n content: ${({ isActive, bgImage }) => !isActive && bgImage && '\"\"'};\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background-color: ${({ theme }) => color(theme).elementBg.medium};\n opacity: ${({ bgImage }) => (bgImage ? '0.3' : '0')};\n\n pointer-events: none;\n }\n\n &:after {\n content: ${({ isActive, bgImage }) => !isActive && bgImage && '\"\"'};\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n pointer-events: none;\n\n background: linear-gradient(\n 358.19deg,\n rgba(29, 34, 35, 0.52) 12.37%,\n rgba(29, 34, 35, 0) 59.02%\n );\n }\n`;\n\nconst VideoControls = styled.button`\n display: block;\n border: none;\n background: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ${({ theme }) => color(theme).elementBg.light};\n z-index: 1;\n padding: 0;\n\n cursor: pointer;\n\n & > * {\n opacity: 0.8;\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n height: 80px;\n width: 80px;\n\n color: ${({ theme }) => color(theme).elementBg.dark};\n }\n\n ${View}:hover > & > * {\n transform: scale(1.05);\n opacity: 1;\n }\n\n ${View}:active > & > * {\n transform: scale(0.95);\n opacity: 1;\n }\n\n &:focus {\n outline: 2px solid ${({ theme }) => color(theme).primary.default};\n border-radius: 50%;\n opacity: 1;\n\n & > * {\n color: ${({ theme }) => color(theme).primary.default};\n }\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n }\n`;\n\nconst ConsentOverlay = styled.div<{ isVisible?: boolean }>`\n display: ${({ isVisible }) => (isVisible ? 'flex' : 'none')};\n justify-content: center;\n align-items: center;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n background-color: rgba(0, 0, 0, 0.6);\n pointer-events: ${({ isVisible }) => (isVisible ? 'all' : 'none')};\n`;\n\nconst ConsentContent = styled.div`\n max-width: 330px;\n text-align: center;\n\n & > * + * {\n margin-top: ${spacings.nudge * 3}px;\n }\n`;\n\nconst ConsentText = styled(Copy)``;\n\nconst Iframe = styled.iframe`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n border: none;\n`;\n\nexport interface VideoCardProps {\n bgImage: ImageProps;\n embedId: string;\n playIcon?: React.ReactNode;\n consentText?: string;\n consentAction?: (props: {\n handleClick?: () => void;\n consentProps: Record<string, string>;\n }) => React.ReactNode;\n /**\n * Custom handler for play button click\n * @returns true if video should be played\n */\n onPlayClick?: () => boolean;\n}\n\nconst VideoCard: FC<VideoCardProps & { className?: string }> = ({\n bgImage,\n embedId,\n playIcon,\n consentText = 'Für die Wiedergabe von Videos muss der Nutzung von Cookies & Daten zugestimmt werden.',\n consentAction,\n onPlayClick,\n className,\n}) => {\n const { globals } = useLibTheme();\n const [isActive, setIsActive] = useState(false);\n const [showConsent, setShowConsent] = useState(false);\n\n const handlePlayClick = () => {\n let isAccepted = false;\n\n if (onPlayClick) {\n isAccepted = onPlayClick();\n } else {\n const cookie = getCookie(\n globals.cookie.name\n ) as Cookie<CookieConsentData>;\n\n isAccepted =\n globals.cookie.videoCookieTypeRestrictions.reduce<boolean>(\n (acc, current) => {\n if (!acc) return acc;\n if (!cookie || !cookie?.data.types) return false;\n\n // set acc to false if type is not defined or set to false\n acc = !!cookie?.data?.types?.[current];\n return acc;\n },\n true\n );\n }\n\n if (isAccepted) {\n setIsActive(true);\n setShowConsent(false);\n } else {\n setShowConsent(true);\n }\n };\n\n const handleConsentActionClick = () => {\n setShowConsent(false);\n };\n\n return (\n <View\n onClick={!showConsent ? handlePlayClick : undefined}\n bgImage={isActive ? undefined : bgImage}\n isActive={isActive}\n className={className}\n >\n {!isActive && !showConsent && (\n <VideoControls>\n {playIcon || <Play iconColor=\"#000\" />}\n </VideoControls>\n )}\n {isActive && (\n <Iframe\n id=\"ytplayer\"\n src={`https://www.youtube.com/embed/${embedId}?autoplay=1`}\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n />\n )}\n <ConsentOverlay isVisible={showConsent}>\n <ConsentContent>\n {consentText && (\n <ConsentText isInverted>{consentText}</ConsentText>\n )}\n {consentAction ? (\n consentAction({\n handleClick: handleConsentActionClick,\n consentProps: {\n [selectors.buttons.attribute]: '',\n },\n })\n ) : (\n <ButtonGhost.View\n as=\"button\"\n isInverted\n onClick={handleConsentActionClick}\n className={selectors.buttons.class}\n >\n <ButtonGhost.Label>\n Zustimmung ändern\n </ButtonGhost.Label>\n </ButtonGhost.View>\n )}\n </ConsentContent>\n </ConsentOverlay>\n </View>\n );\n};\n\nexport default VideoCard;\n"],"names":["View","styled","div","withConfig","displayName","componentId","_a","onClick","bgImage","small","theme","global","sections","edgeRadius","mq","medium","concat","semilarge","large","xlarge","isActive","color","elementBg","VideoControls","button","templateObject_2","__makeTemplateObject","light","dark","primary","default","ConsentOverlay","templateObject_3","isVisible","ConsentContent","spacings","nudge","ConsentText","Copy","templateObject_5","Iframe","iframe","templateObject_6","embedId","playIcon","_c","consentText","consentAction","onPlayClick","className","globals","useLibTheme","_d","useState","setIsActive","_e","showConsent","setShowConsent","handleConsentActionClick","React","createElement","undefined","isAccepted","cookie_1","getCookie","cookie","name","videoCookieTypeRestrictions","reduce","acc","current","data","types","_b","Play","iconColor","id","src","allow","isInverted","handleClick","consentProps","selectors","buttons","attribute","ButtonGhost","as","class","Label"],"mappings":"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"}