{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/SharedComponents/molecules/ImageVideoBackground.tsx","webpack:///./Avensia.Common/Features/Shared/Icons/Play.tsx","webpack:///./Avensia.Common/Features/Shared/Icons/Sound.tsx","webpack:///./Avensia.Common/Features/Shared/SharedComponents/atoms/Slider.tsx","webpack:///./Avensia.Common/Features/Shared/Video/SoundControls.tsx","webpack:///./Avensia.Common/Features/Shared/Video/TimeControls.tsx","webpack:///./Avensia.Common/Features/Shared/Icons/Pause.tsx","webpack:///./Avensia.Common/Features/Shared/Video/PlayControls.tsx","webpack:///./Avensia.Common/Features/Shared/Icons/Maximize.tsx","webpack:///./Avensia.Common/Features/Shared/Icons/Minimize.tsx","webpack:///./Avensia.Common/Features/Shared/Video/MaximizeControls.tsx","webpack:///./Avensia.Common/Features/Shared/Video/Video.tsx","webpack:///./Avensia.Common/Features/Shared/Icons/glyphs/Play_12x12.svg","webpack:///./Avensia.Common/Features/Shared/Icons/glyphs/Play_24x24.svg","webpack:///./Avensia.Common/Features/Shared/Icons/glyphs/Sound_34x24.svg","webpack:///./Avensia.Common/Features/Shared/Icons/glyphs/SoundMuted_34x24.svg","webpack:///./Avensia.Common/Features/Shared/Icons/glyphs/Pause_24x24.svg","webpack:///./Avensia.Common/Features/Shared/Icons/glyphs/Maximize_24x24.svg","webpack:///./Avensia.Common/Features/Shared/Icons/glyphs/Minimize_24x24.svg","webpack:///./Avensia.Common/Features/Shared/QuickShopProductModal/index.tsx","webpack:///./Avensia.Common/Features/Shared/Blocks/Video/VideoProductsBlock.tsx"],"names":["AspectImageVideoBackground","props","children","image","paddingTop","videoSources","borderRadius","breakPoint","className","preset","isMobile","gotVideo","length","css","background","url","size","position","autoPlay","loop","muted","playsInline","coverContent","sources","ViewportSizeVideoBackground","fixedVideo","height","compose","hasVideo","Div","width","clipPath","overflow","AutoSizeVideoBackground","Play12x12","Play24x24","Sound34x24","SoundMuted34x24","SliderInput","input","appearance","backgroundColor","monochrome","white","cursor","padding","y","x","min","max","value","updateValue","type","onChange","e","parseFloat","target","Wrap","div","display","alignItems","gap","Sound","Muted","mediaRef","setMuted","volume","setVolume","current","onClick","selectedValue","selectedVolume","newVolume","Math","adjustVolume","currentTime","setCurrentTime","duration","setDuration","interval","setInterval","readyState","clearInterval","selectedTime","newTime","skipToTime","Pause24x24","Play","Pause","isPlaying","play","pause","Maximize24x24","Minimize24x24","isMaximized","updateIsMaximized","document","onfullscreenchange","fullscreenElement","exitFullscreen","parentElement","requestFullscreen","alignSelf","VideoStopped","top","flexDirection","color","VideoStartedWrap","paddingBottom","justifyContent","VideoStartedWrapDesktop","TimeControlWrapMobile","ButtonsWrapDesktop","ButtonsWrapMobile","PlusIcon","Plus","marginLeft","OuterBase","OuterMobile","OuterDesktop","Inner","previewImage","previewImagePreset","previewVideoSources","isCompact","videoStarted","stopVideo","buttonsInControls","videoRef","setIsPlaying","setIsMaximized","VideoStartedWrapElement","Outer","VideoPlayer","onEnded","id","event","currentTarget","map","buttonInControls","index","key","text","iconAfter","Video","theme","TransparentWhite","React","createElement","defaultProps","module","exports","default","BaseSpan","span","fontStyle","fontWeight","textTransform","lineHeight","ProductLabel","fontSize","ProductCount","letterSpacing","Heading","xy","TopContent","TopContentClose","ProductCardWrap","marginBottom","products","modalIsShown","hideModal","zIndex","Overlay","marginTop","cellSpacing","quickAddToCart","product","itemNumber","listIndex","TextElement","textAlign","GridWrapExtended","transition","property","timingFunction","Label","ButtonWrap","CenterContent","VideoProductsBlock","state","currentBreakpoint","setVideoStarted","setModalIsShown","imagePreview","imagePreviewSmallScreen","productItems","heading","label","seeProductsButtonText","playButtonText","FullWidth","videoPreviewSources","D96_M40","WhiteBorderToBlack","Big"],"mappings":"yQA6BaA,EAA6B,SAEtCC,G,UAEQC,EAAA,EAAAA,SACNC,EAAA,EAAAA,MACAC,EAAA,EAAAA,WACAC,EAAA,EAAAA,aACAC,EAAA,EAAAA,aACAC,EAAA,EAAAA,WACAC,EAAA,EAAAA,UACAC,EAAA,EAAAA,OAEIC,EAAW,YAAUH,GACrBI,GAAgC,OAApB,EAAY,QAAb,EAACN,SAAY,eAAEO,QAAM,EAAI,GAAK,EAC/C,OACE,kBAAC,IAAgB,CACfJ,UAAWA,EACXK,IAAK,CACHT,WAAYA,IAGd,kBAAC,IAAgB,CACfS,IAAK,CACHC,WAAY,gBACLH,GAAYR,GAAS,CACxBA,MAAO,YAAwB,QAAN,EAACA,SAAK,eAAEY,IAAKN,GACtCO,KAAM,QACNC,SAAU,kBAGdX,aAAcA,GAAgBA,EAAe,EAAOA,EAAY,KAAO,QAGxEK,GACC,kBAAC,IAAmB,KAClB,kBAAC,IAAW,CACVO,UAAQ,EACRC,MAAI,EACJC,OAAK,EACLC,aAAW,EACXC,cAAY,EACZZ,SAAUA,EACVa,QAASlB,KAIdH,KAOEsB,EAA8B,aACzC,SACEvB,G,UAEQC,EAAA,EAAAA,SACNC,EAAA,EAAAA,MACAE,EAAA,EAAAA,aACAE,EAAA,EAAAA,WACA,IAAAkB,kBAAA,IAAa,GAAb,EAEAnB,EAAA,EAAAA,aACAG,EAAA,EAAAA,OACA,IAAAiB,cAAA,IAAS,EAAT,SACAC,EAAA,EAAAA,QAEIC,GAAgC,OAApB,EAAY,QAAb,EAACvB,SAAY,eAAEO,QAAM,EAAI,GAAK,EACzCF,EAAW,YAAUH,GAC3B,OACE,kBAAC,IAAOsB,IAAG,CACThB,IAAKc,EAAQ,qCACXD,OAAQA,EACRI,MAAO,OACPb,SAAU,YACNd,IAAUyB,GAAY,CACxBd,WAAY,CACVX,MAAO,YAAwB,QAAN,EAACA,SAAK,eAAEY,IAAKN,GACtCO,KAAM,QACNC,SAAU,oBAGTW,GAAY,CACftB,aAAcA,GAAgBA,EAAe,EAAOA,EAAY,KAAO,QAErEmB,GAAc,CAChBM,SAAU,iBACVC,SAAU,aAIbJ,GACC,kBAAC,IAAmB,KAClB,kBAAC,IAAW,CACVV,UAAQ,EACRC,MAAI,EACJC,OAAK,EACLE,cAAY,EACZD,aAAW,EACXI,WAAYA,EACZf,SAAUA,EACVa,QAASlB,KAIdH,MAWI+B,EAA0B,aACrC,SACEhC,GAEQ,IAAAC,EAAA,EAAAA,SACNC,EAAA,EAAAA,MACAE,EAAA,EAAAA,aACAE,EAAA,EAAAA,WACAD,EAAA,EAAAA,aACAG,EAAA,EAAAA,OACAkB,EAAA,EAAAA,QAEF,OACE,kBAACH,EAA2B,CAACrB,MAAOA,EAAOG,aAAcA,EAAcD,aAAcA,EAAcI,OAAQA,EAAQF,WAAYA,EAAYM,IAAKc,EAAQ,CAAED,OAAQ,SAAWD,YAAU,GACpLvB,O,iCCjKT,mHAIagC,EAAY,YAAQ,IAAU,GAAI,IAClCC,EAAY,YAAQ,IAAU,GAAI,K,8ICDlCC,EAAa,YAAQ,IAAU,GAAI,IACnCC,EAAkB,YAAQ,IAAe,GAAI,ICOpDC,EAAc,IAAOC,MAAM,CAC/BC,WAAY,OACZd,OAAQ,MACRpB,aAAc,MACdmC,gBAAiB,IAAaC,WAAWC,MACzC,yBAA0B,CACxBH,WAAY,OACZV,MAAO,MACPJ,OAAQ,MACRpB,aAAc,MACdmC,gBAAiB,IAAaC,WAAWC,MACzCC,OAAQ,UACRC,QAAS,CACPC,EAAG,MACHC,EAAG,UAoBM,EAfA,SAAC,G,IAAEC,EAAA,EAAAA,IAAKC,EAAA,EAAAA,IAAKC,EAAA,EAAAA,MAAOC,EAAA,EAAAA,YAAarB,EAAA,EAAAA,MAC9C,OACE,kBAACQ,EAAW,CACVc,KAAK,QACLJ,IAAKA,EACLC,IAAKA,EACLC,MAAOA,EACPG,SAAU,SAACC,GAAM,OAAAH,EAAYI,WAAWD,EAAEE,OAAON,SACjDrC,IAAK,CACHiB,MAAOA,EAAWA,EAAK,KAAO,WC/BhC2B,EAAO,IAAOC,IAAI,CACtBzC,SAAU,WAAYS,OAAQ,OAAQiC,QAAS,OAAQC,WAAY,SAAUC,IAAK,QAG9EC,EAAQ,YAAO1B,EAAY,CAC/BQ,OAAQ,YAGJmB,EAAQ,YAAO1B,EAAiB,CACpCO,OAAQ,YAgEK,EA7DO,SAAC,G,IAAEoB,EAAA,EAAAA,SACjB,wCAAC5C,EAAA,KAAO6C,EAAA,KACR,uCAACC,EAAA,KAAQC,EAAA,KAEf,qBAAU,W,OACI,QAAZ,EAAIH,SAAQ,eAAEI,WACZH,EAASD,EAASI,QAAQhD,OAC1B+C,EAAUH,EAASI,QAAQF,WAE5B,CAACF,IAgCJ,OACE,kBAACP,EAAI,KACFrC,EACC,kBAAC2C,EAAK,CAACM,QA1BE,W,OACD,QAAZ,EAAIL,SAAQ,eAAEI,WACZJ,EAASI,QAAQhD,OAAQ,EACzB6C,GAAS,GACM,IAAXC,GACFC,EAAU,QAuBV,kBAACL,EAAK,CAACO,QAnCA,W,OACC,QAAZ,EAAIL,SAAQ,eAAEI,WACZJ,EAASI,QAAQhD,OAAQ,EACzB6C,GAAS,OAkCT,kBAAC,EAAM,CACLjB,IAAK,EACLC,IAAK,GACLC,MAAO9B,EAAQ,EAAI,GAAK8C,EACxBf,YAAa,SAACmB,IAxBC,SAACC,G,MAChBC,EAAYC,KAAKzB,IAAIyB,KAAKxB,IAAIsB,EAAgB,GAAI,IAC1C,QAAZ,EAAIP,SAAQ,eAAEI,WACZJ,EAASI,QAAQF,OAASM,EAC1BL,EAAUK,GACQ,IAAdA,EACFP,GAAS,GACA7C,GACT6C,GAAS,IAiBPS,CAAaJ,EAAgB,KAE/BxC,MAAO,OCpCA,EAjCM,SAAC,G,IAAEkC,EAAA,EAAAA,SAChB,uCAACW,EAAA,KAAaC,EAAA,KACd,uCAACC,EAAA,KAAUC,EAAA,KAEXC,EAAWC,aAAY,WACvBhB,EAASI,SAAWJ,EAASI,QAAQa,WAAa,IACpDL,EAAeZ,EAASI,QAAQO,aAChCG,EAAYd,EAASI,QAAQS,UAE7BK,cAAcH,MAEf,KAUH,OACE,kBAAC,EAAM,CACL/B,IAAK,EACLC,IAAK,IACLC,MAAsB,IAAdyB,EAAsBE,EAC9B1B,YAAa,SAACmB,IAbC,SAACa,GAClB,GAAInB,EAASI,QAAS,CACpB,IAAMgB,EAAUX,KAAKzB,IAAIyB,KAAKxB,IAAIkC,EAAc,GAAIN,GACpDb,EAASI,QAAQO,YAAcS,EAC/BR,EAAeQ,IAUbC,CAAYf,EAAgBO,EAAY,S,kBC/BnCS,EAAa,YAAQ,IAAU,GAAI,I,SCE1C,EAAO,YAAOC,EAAA,EAAW,CAC7B3C,OAAQ,YAGJ4C,EAAQ,YAAOF,EAAY,CAC/B1C,OAAQ,YAiBK,EARM,SAAC,G,IAAE6C,EAAA,EAAAA,UAAWC,EAAA,EAAAA,KAAMC,EAAA,EAAAA,MACvC,OAAOF,EACL,kBAACD,EAAK,CAACnB,QAASsB,IAEhB,kBAAC,EAAI,CAACtB,QAASqB,K,kBCpBNE,EAAgB,YAAQ,IAAU,GAAI,I,kBCAtCC,EAAgB,YAAQ,IAAU,GAAI,ICqCpC,EA9BU,SAAC,G,IAAE7B,EAAA,EAAAA,SAAU8B,EAAA,EAAAA,YAAaC,EAAA,EAAAA,kBACjD,2BAAgB,WAOd,OANAC,SAASC,mBAAqB,WACO,OAA/BD,SAASE,mBACXH,GAAkB,IAIf,WACLC,SAASC,mBAAqB,SAclC,OAAOH,EACL,kBAACD,EAAa,CAACxB,QANA,WACf2B,SAASG,iBACTJ,GAAkB,IAIgBlF,IAAG,IAErC,kBAAC+E,EAAa,CAACvB,QAbA,W,UAC+B,QAA9C,EAA+B,QAA/B,EAAgB,QAAhB,EAAAL,EAASI,eAAO,eAAEgC,qBAAa,eAAEA,qBAAa,SAAEC,oBAChDN,GAAkB,IAWgBlF,IAAG,K,EAFE,CAAE+B,OAAQ,W,EAEV,CAAEA,OAAQ,W,iBCP/C,EAAO,IAAOc,IAAI,CACtBzC,SAAU,WAAYS,OAAQ,OAAQM,SAAU,SAAUsE,UAAW,WAGjEC,EAAe,IAAO7C,IAAI,CAC9BC,QAAS,OACTjC,OAAQ,OACRI,MAAO,OACPb,SAAU,WACVuF,IAAK,EACLC,cAAe,SACfC,MAAO,IAAahE,WAAWC,QAG3BgE,EAAmB,IAAOjD,IAAI,CAClChC,OAAQ,OACRI,MAAO,OACPb,SAAU,WACVuF,IAAK,EACLI,cAAe,OACfjD,QAAS,OACT8C,cAAe,SACfI,eAAgB,MAChBH,MAAO,IAAahE,WAAWC,MAC/BkB,IAAK,SAGDiD,EAA0B,YAAOH,EAAkB,CACvD9C,IAAK,SAGDkD,EAAwB,IAAOrD,IAAI,CACvC5B,MAAO,OACPe,QAAS,CAAEE,EAAG,QACdY,QAAS,OACT8C,cAAe,MACf7C,WAAY,WAGRoD,EAAqB,IAAOtD,IAAI,CACpC5B,MAAO,OACPe,QAAS,CAAEE,EAAG,QACdY,QAAS,OACT8C,cAAe,MACf5C,IAAK,MACLD,WAAY,SACZiD,eAAgB,QAGZI,EAAoB,IAAOvD,IAAI,CACnCC,QAAS,OACT8C,cAAe,MACf5C,IAAK,QAGDqD,EAAW,YAAOC,EAAA,EAAW,CACjCC,WAAY,QAGRC,EAAY,IAAO3D,IAAI,CAC3B5B,MAAO,OACP6B,QAAS,OACT8C,cAAe,MACf5C,IAAK,OACLD,WAAY,WAGR0D,EAAc,YAAOD,EAAW,CACpCxE,QAAS,CAAEE,EAAG,QACd8D,eAAgB,kBAGZU,EAAe,YAAOF,EAAW,CACrCxE,QAAS,CAAEE,EAAG,UAGVyE,GAAQ,IAAO9D,IAAI,CACvBC,QAAS,OACT8C,cAAe,MACf5C,IAAK,OACLD,WAAY,WAuIC,IApID,SAAC,G,IACbvD,EAAA,EAAAA,aACAoH,EAAA,EAAAA,aACAC,EAAA,EAAAA,mBACAC,EAAA,EAAAA,oBACAC,EAAA,EAAAA,UACAC,EAAA,EAAAA,aACA,IAAAC,iBAAA,IAAY,EAAZ,eACA5H,EAAA,EAAAA,SACA,IAAAiB,YAAA,IAAO,GAAP,EACA,IAAAC,aAAA,IAAQ,GAAR,EACA2G,EAAA,EAAAA,kBAEMC,EAAW,iBAAyB,MACpC,wCAACvC,EAAA,KAAWwC,EAAA,KACZ,wCAACnC,EAAA,KAAaoC,EAAA,KAEdxC,EAAO,W,MACK,QAAhB,EAAAsC,EAAS5D,eAAO,SAAEsB,OAClBuC,GAAa,IAGTtC,EAAQ,W,MACI,QAAhB,EAAAqC,EAAS5D,eAAO,SAAEuB,QAClBsC,GAAa,IAGf,qBAAU,WACJJ,GACFnC,MAED,CAACmC,IAEJ,IAAMM,EAA0BP,EAAYjB,EAAmBG,EACzDsB,EAAQR,EAAYN,EAAcC,EACxC,OACE,kBAAC,EAAI,KACH,kBAAC,IAA2B,CAC1BpH,MAAOsH,EACPhH,OAAQiH,EACRrH,aAAcwH,EAAe,KAAOF,EACpCpH,WAAYqH,EAAY,EAAI,EAC5BlG,OAAQ,QAEPmG,GACC,kBAAC,IAAmB,KAClB,kBAACQ,EAAA,EAAW,CACVnH,UAAQ,EACR8G,SAAUA,EACV7G,KAAMA,EACNC,MAAOA,EACPE,cAAY,EACZD,YAAauG,EACblH,SAAUkH,EACVrG,QAASlB,EACTiI,QAAS,WAAM,OAAAR,SAInBD,GACA,kBAACtB,EAAY,KACVrG,GAGJ2H,IAAiB1G,GAChB,kBAACgH,EAAuB,CACtBI,GAAG,iBACH/H,UAAU,WACV6D,QAAS,SAACmE,GACJA,EAAMhF,SAAWgF,EAAMC,gBACrBhD,EACFE,IAEAD,QAKJkC,GAAaG,GAAqBA,EAAkBnH,OAAS,GAC7D,kBAACoG,EAAkB,KAChBe,EAAkBW,KAAI,SAACC,EAAkBC,GACxC,OACE,kBAAC,IAAW,CACVC,IAAKD,EACLE,KAAMH,EAAiBG,KACvBzE,QAAS,WAAM,OAAAsE,EAAiBtE,WAChC0E,UAAW,kBAAC7B,EAAQ,MACpBrE,QAAS,CAAEE,EAAG,IACdrB,OAAQ,IAAasH,MACrBC,MAAO,IAAYC,uBAM7B,kBAACd,EAAK,KACJ,kBAACZ,GAAK,KACJ,kBAAC,EAAY,CAAC/B,UAAWA,EAAWC,KAAMA,EAAMC,MAAOA,IACvD,kBAAC,EAAa,CAAC3B,SAAUgE,IACxBJ,GAAaG,GAAqBA,EAAkBnH,OAAS,GAC5D,kBAACqG,EAAiB,KACfc,EAAkBW,KAAI,SAACC,EAAkBC,GACxC,OACE,kBAAC,IAAW,CACVC,IAAKD,EACLE,KAAMH,EAAiBG,KACvBzE,QAAS,WAAM,OAAAsE,EAAiBtE,WAChC0E,UAAW,kBAAC7B,EAAQ,MACpBrE,QAAS,CAAEE,EAAG,IACdrB,OAAQ,IAAasH,MACrBC,MAAO,IAAYC,yBAO7BtB,GAAa,kBAAC,EAAY,CAAC5D,SAAUgE,IACvC,kBAAC,EAAgB,CAAChE,SAAUgE,EAAUlC,YAAaA,EAAaC,kBAAmBmC,KAEpFN,GACC,kBAACb,EAAqB,KACpB,kBAAC,EAAY,CAAC/C,SAAUgE,U,oBC1OxC,IAAImB,EAAQ,EAAQ,GAEpB,SAASjH,EAAWjC,GAChB,OAAOkJ,EAAMC,cAAc,MAAMnJ,EAAMkJ,EAAMC,cAAc,IAAI,CAAC,GAAK,4BAA4BD,EAAMC,cAAc,OAAO,CAAC,GAAK,YAAY,EAAI,sEAAsE,OAAS,eAAe,YAAc,IAAI,eAAiB,YAGvRlH,EAAUmH,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,QAElFC,EAAOC,QAAUrH,EAEjBA,EAAUsH,QAAUtH,G,oBCVpB,IAAIiH,EAAQ,EAAQ,GAEpB,SAAShH,EAAWlC,GAChB,OAAOkJ,EAAMC,cAAc,MAAMnJ,EAAMkJ,EAAMC,cAAc,IAAI,CAAC,GAAK,4BAA4BD,EAAMC,cAAc,OAAO,CAAC,GAAK,YAAY,EAAI,kIAAkI,OAAS,eAAe,YAAc,QAG9TjH,EAAUkH,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,QAElFC,EAAOC,QAAUpH,EAEjBA,EAAUqH,QAAUrH,G,oBCVpB,IAAIgH,EAAQ,EAAQ,GAEpB,SAAS/G,EAAYnC,GACjB,OAAOkJ,EAAMC,cAAc,MAAMnJ,EAAM,CAACkJ,EAAMC,cAAc,OAAO,CAAC,EAAI,uCAAuC,OAAS,eAAe,YAAc,IAAI,cAAgB,QAAQ,IAAM,IAAID,EAAMC,cAAc,OAAO,CAAC,GAAK,gCAAgC,UAAY,iBAAiB,EAAI,IAAI,EAAI,OAAO,MAAQ,KAAK,OAAS,KAAK,KAAO,OAAO,IAAM,GAAG,CAACD,EAAMC,cAAc,OAAO,CAAC,KAAO,OAAO,EAAI,mBAAmB,IAAM,IAAID,EAAMC,cAAc,OAAO,CAAC,SAAW,UAAU,SAAW,UAAU,EAAI,uGAAuG,IAAM,MAAMD,EAAMC,cAAc,OAAO,CAAC,EAAI,2iBAA2iB,KAAO,eAAe,KAAO,sCAAsC,IAAM,MAG/vChH,EAAWiH,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,QAEnFC,EAAOC,QAAUnH,EAEjBA,EAAWoH,QAAUpH,G,oBCVrB,IAAI+G,EAAQ,EAAQ,GAEpB,SAAS9G,EAAiBpC,GACtB,OAAOkJ,EAAMC,cAAc,MAAMnJ,EAAM,CAACkJ,EAAMC,cAAc,OAAO,CAAC,GAAK,gCAAgC,UAAY,iBAAiB,EAAI,IAAI,EAAI,OAAO,MAAQ,KAAK,OAAS,KAAK,KAAO,OAAO,IAAM,GAAG,CAACD,EAAMC,cAAc,OAAO,CAAC,KAAO,OAAO,EAAI,mBAAmB,IAAM,IAAID,EAAMC,cAAc,OAAO,CAAC,SAAW,UAAU,SAAW,UAAU,EAAI,uGAAuG,IAAM,MAAMD,EAAMC,cAAc,OAAO,CAAC,EAAI,2iBAA2iB,KAAO,OAAO,KAAO,sCAAsC,IAAM,IAAID,EAAMC,cAAc,OAAO,CAAC,EAAI,uCAAuC,OAAS,OAAO,YAAc,IAAI,cAAgB,QAAQ,IAAM,MAG/uC/G,EAAgBgH,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,QAExFC,EAAOC,QAAUlH,EAEjBA,EAAgBmH,QAAUnH,G,oBCV1B,IAAI8G,EAAQ,EAAQ,GAEpB,SAAS7D,EAAYrF,GACjB,OAAOkJ,EAAMC,cAAc,MAAMnJ,EAAMkJ,EAAMC,cAAc,OAAO,CAAC,EAAI,kBAAkB,OAAS,eAAe,YAAc,IAAI,cAAgB,WAGvJ9D,EAAW+D,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,QAEnFC,EAAOC,QAAUjE,EAEjBA,EAAWkE,QAAUlE,G,oBCVrB,IAAI6D,EAAQ,EAAQ,GAEpB,SAASvD,EAAe3F,GACpB,OAAOkJ,EAAMC,cAAc,MAAMnJ,EAAMkJ,EAAMC,cAAc,OAAO,CAAC,EAAI,2FAA2F,OAAS,eAAe,YAAc,IAAI,cAAgB,WAGhOxD,EAAcyD,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,QAEtFC,EAAOC,QAAU3D,EAEjBA,EAAc4D,QAAU5D,G,oBCVxB,IAAIuD,EAAQ,EAAQ,GAEpB,SAAStD,EAAe5F,GACpB,OAAOkJ,EAAMC,cAAc,MAAMnJ,EAAMkJ,EAAMC,cAAc,OAAO,CAAC,EAAI,0FAA0F,OAAS,eAAe,YAAc,IAAI,cAAgB,WAG/NvD,EAAcwD,aAAe,CAAC,MAAQ,KAAK,OAAS,KAAK,QAAU,YAAY,KAAO,QAEtFC,EAAOC,QAAU1D,EAEjBA,EAAc2D,QAAU3D,G,iCCVxB,2EAkBM4D,EAAW,IAAOC,KAAK,CAC3BC,UAAW,SACXC,WAAY,IACZC,cAAe,YACfC,WAAY,SAGRC,EAAe,YAAON,EAAU,CACpC7F,WAAY,SACZoG,SAAU,OACVrG,QAAS,SAGLsG,EAAe,YAAOR,EAAU,CACpCO,SAAU,OACVE,cAAe,WAGXC,EAAU,IAAOzG,IAAI,CACzBC,QAAS,OACT8C,cAAe,MACf7C,WAAY,gBACZf,QAAS,CAAEuH,GAAI,GACfvG,IAAK,QAGDwG,EAAa,IAAO3G,IAAI,CAC5BC,QAAS,OACTkD,eAAgB,gBAChB/E,MAAO,SAGHwI,EAAkB,YAAO,IAAY,CACzC1H,OAAQ,YAGJ2H,EAAkB,IAAO7G,IAAI,CACjC8G,aAAc,SA0CD,IAvCuB,SAAC,G,QACrCC,EAAA,EAAAA,SACAC,EAAA,EAAAA,aACAC,EAAA,EAAAA,UACAjK,EAAA,EAAAA,SAGA,OACE,kBAAC,IAAK,CAACgK,aAAcA,EAAcC,UAAWA,EAAWC,OAAQ,IAAaC,SAC5E,kBAAC,IAAe,KACd,kBAACR,EAAU,KACT,kBAACF,EAAO,KACN,kBAACJ,EAAY,KAAE,aAAU,0BACzB,kBAACE,EAAY,K,IAAW,Q,EAARQ,SAAQ,a,EAAE7J,O,MAE5B,kBAAC0J,EAAe,CAACjG,QAASsG,MAG9B,kBAAC,IAAsB,CAAC9J,IAAK,CAAEiK,UAAWpK,EAAW,MAAQ,SAC1DA,GACC,kBAAC,IAAe,CACd+J,SAAUA,EACV7C,UAAWlH,EACXqK,YAAa,EACbC,gBAAgB,KAGlBtK,GAAY,oCACH,QADG,EACX+J,SAAQ,eAAE/B,KAAI,SAACuC,EAASrC,GAAU,OACjC,kBAAC2B,EAAe,CAAC1B,IAAKD,EAAQ,IAAMqC,EAAQC,YAC1C,kBAAC,IAAW,CAACD,QAASA,EAASE,UAAWvC,EAAOoC,gBAAgB,a,gQC9DzEvH,EAAO,IAAOC,MAAG,GACrB5B,MAAO,OACPJ,OAAQ,iBAAgB,IAAgB,KAAuB,QAC9D,UAAY,KAAsB,CACjCA,OAAQ,iBAAgB,IAAwB,KAAwB,O,IAItE0J,EAAc,IAAO1B,KAAK,CAC9B/F,QAAS,QACT7B,MAAO,OACP6H,UAAW,SACXC,WAAY,IACZE,WAAY,OACZuB,UAAW,SACXxB,cAAe,cAGXyB,EAAmB,YAAO,IAAU,CACxCC,WAAY,CACVC,SAAU,UACVC,eAAgB,cAChB5G,SAAU,QAEZnD,OAAQ,OACRT,SAAU,WACVuF,IAAK,IAGDkF,EAAQ,YAAON,EAAa,CAChC9E,UAAW,MACX0D,SAAU,OACVE,cAAe,SACfM,aAAc,OACd9D,MAAO,IAAahE,WAAWC,MAC/BiI,OAAQ,IAGJT,EAAU,YAAO,IAAI,CACzB7D,UAAW,QACXI,MAAO,IAAahE,WAAWC,MAC/BiI,OAAQ,EACRS,UAAW,WAGPM,EAAa,IAAOjI,IAAI,CAC5BC,QAAS,OACT8C,cAAe,SACfI,eAAgB,MAChBD,cAAe,OACflF,OAAQ,SAGJkK,EAAgB,IAAOlI,IAAI,CAC/B2H,UAAW,WAGPlE,EAAO,YAAO,IAAW,CAC7BC,WAAY,QAGR7B,EAAO,YAAO,IAAW,CAC7B6B,WAAY,QAGDyE,EAAqB,aAChC,SAACC,GAAU,OACTC,kBAAmBD,EAAMC,qBAFK,EAIhC,SAAC9L,G,QACK,wCAAC4H,EAAA,KAAcmE,EAAA,KACf,wCAACtB,EAAA,KAAcuB,EAAA,KACfvL,EAAW,YAAkBT,EAAM8L,mBAGvCG,EAAA,EAAAA,aACAC,EAAA,EAAAA,wBACAC,EAAA,EAAAA,aACAC,EAAA,EAAAA,QACAC,EAAA,EAAAA,MACA,IAAAC,6BAAA,IAAwB,EAAxB,KACA,IAAAC,sBAAA,IAAiB,EAAjB,KAGF,OACE,oCACE,kBAAC/I,EAAI,KACH,kBAAC,IAAK,CACJpD,aAAcJ,EAAMI,aACpBoH,aAAc,YAAkByE,EAAcC,EAAyBzL,GACvEgH,mBAAoB,IAAO+E,UAC3B9E,oBAAqB1H,EAAMyM,oBAC3B9E,UAAWlH,EACXmH,aAAcA,EACdC,UAAW,WAAM,OAAAkE,GAAgB,IACjCjE,mBACc,QAAZ,EAAAqE,SAAY,eAAExL,QAAS,EACnB,CACA,CACEkI,KAAMpI,EACF,IAAI0L,EAAaxL,OAAM,IACpB2L,EAAqB,KAAKH,EAAaxL,OAAM,IACpDyD,QAAS,WAAM,OAAA4H,GAAgB,MAGjC,IAGN,kBAACX,EAAgB,CAAC9K,UAAU,QAC1B,kBAACkL,EAAK,CAAClL,UAAW,YAAkB,GAAI,EAAG,YAA2B,KACnE8L,GAEH,kBAACnC,EAAO,CACN3J,UAAW,YAAkB,GAAI,EAAG,YAA2B,IAC/DwJ,SAAU,IAAe2C,SAExBN,GAEH,kBAACV,EAAU,CAACnL,UAAW,YAAkB,GAAI,KAC3C,kBAACoL,EAAa,KACZ,kBAAC,IAAW,CACV9C,KAAM0D,EACNnI,QAAS,WAAM,OAAA2H,GAAgB,IAC/B/C,MAAO,IAAY2D,mBACnB7D,UAAW,kBAACxD,EAAI,MAChB7D,OAAQ,IAAamL,OAEV,QAAZ,EAAAT,SAAY,eAAExL,QAAS,GACtB,kBAAC,IAAW,CACVkI,MAASpI,EAAW,GAAQ6L,EAAqB,KAAG,IAAIH,EAAaxL,OAAM,IAC3EyD,QAAS,WAAM,OAAA4H,GAAgB,IAC/BlD,UAAW,kBAAC5B,EAAI,MAChBzF,OAAQ,IAAamL,IACrBhM,IAAG,SAQjB,kBAAC,IAAqB,CAACH,SAAUA,EAAUgK,aAAcA,EAAcC,UAAW,WAAM,OAAAsB,GAAgB,IAAQxB,SAAU2B,QAKjH,Y,MAbU,CAAEhF,WAAY","file":"assets/18.chunk.95690200c6763d5ca85f.js","sourcesContent":["import React from 'react';\r\nimport { AspectRatioInner, AspectRatioOuter, OverlayNotABackdrop } from 'Shared/SharedComponents/atoms/AspectRatio';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { setImageBackground, Preset } from 'Shared/image-background';\r\nimport VideoSourceType from 'Shared/ViewModels/VideoSourceViewModel.type';\r\nimport VideoPlayer from 'Shared/Video/VideoPlayer'\r\nimport { isCompact } from 'Shared/Viewport';\r\n\r\ntype BasePropTypes = {\r\n  children?: React.ReactNode;\r\n  image?: { url?: string };\r\n  videoSources?: VideoSourceType[];\r\n  breakPoint: number;\r\n  preset?: Preset;\r\n};\r\n\r\ntype ImageVideoBackgroundPropTypes = BasePropTypes & {\r\n  borderRadius?: number;\r\n  paddingTop: string;\r\n  className?: string;\r\n};\r\n\r\ntype ViewportSizeVideoBackgroundPropTypes = BasePropTypes & {\r\n  fixedVideo?: boolean;\r\n  borderRadius?: number;\r\n  height?: string;\r\n  gradientBg?: boolean;\r\n};\r\n\r\nexport const AspectImageVideoBackground = (\r\n  (\r\n    props: ImageVideoBackgroundPropTypes & {},\r\n  ) => {\r\n    const { children,\r\n      image,\r\n      paddingTop,\r\n      videoSources,\r\n      borderRadius,\r\n      breakPoint,\r\n      className,\r\n      preset } = props;\r\n\r\n    const isMobile = isCompact(breakPoint);\r\n    const gotVideo = (videoSources?.length ?? 0) > 0;\r\n    return (\r\n      <AspectRatioOuter\r\n        className={className}\r\n        css={{\r\n          paddingTop: paddingTop,\r\n        }}\r\n      >\r\n        <AspectRatioInner\r\n          css={{\r\n            background: {\r\n              ...(!gotVideo && image && {\r\n                image: setImageBackground(image?.url, preset),\r\n                size: 'cover',\r\n                position: 'center center',\r\n              }),\r\n            },\r\n            borderRadius: borderRadius && borderRadius > 0 ? `${borderRadius}px` : '0px'\r\n          }}\r\n        >\r\n          {gotVideo && (\r\n            <OverlayNotABackdrop>\r\n              <VideoPlayer\r\n                autoPlay\r\n                loop\r\n                muted\r\n                playsInline\r\n                coverContent\r\n                isMobile={isMobile}\r\n                sources={videoSources}\r\n              />\r\n            </OverlayNotABackdrop>\r\n          )}\r\n          {children}\r\n        </AspectRatioInner>\r\n      </AspectRatioOuter>\r\n    );\r\n  }\r\n);\r\n\r\nexport const ViewportSizeVideoBackground = styled(\r\n  (\r\n    props: ViewportSizeVideoBackgroundPropTypes & StyledProps,\r\n  ) => {\r\n    const { children,\r\n      image,\r\n      videoSources,\r\n      breakPoint,\r\n      fixedVideo = false,\r\n      //css,\r\n      borderRadius,\r\n      preset,\r\n      height = '100%',\r\n      compose,\r\n    } = props;\r\n    const hasVideo = (videoSources?.length ?? 0) > 0;\r\n    const isMobile = isCompact(breakPoint);\r\n    return (\r\n      <styled.Div\r\n        css={compose({\r\n          height: height,\r\n          width: '100%',\r\n          position: 'relative',\r\n          ...(image && !hasVideo && {\r\n            background: {\r\n              image: setImageBackground(image?.url, preset),\r\n              size: 'cover',\r\n              position: 'center center',\r\n            },\r\n          }),\r\n          ...(!hasVideo && {\r\n            borderRadius: borderRadius && borderRadius > 0 ? `${borderRadius}px` : '0px'\r\n          }),\r\n          ...(fixedVideo && {\r\n            clipPath: 'inset(0 0 0 0)',\r\n            overflow: 'hidden',\r\n          }),\r\n        })}\r\n      >\r\n        {hasVideo && (\r\n          <OverlayNotABackdrop>\r\n            <VideoPlayer\r\n              autoPlay\r\n              loop\r\n              muted\r\n              coverContent\r\n              playsInline\r\n              fixedVideo={fixedVideo}\r\n              isMobile={isMobile}\r\n              sources={videoSources}\r\n            />\r\n          </OverlayNotABackdrop>\r\n        )}\r\n        {children}\r\n      </styled.Div>\r\n    );\r\n  }\r\n);\r\n\r\ntype AutoSizeVideoBackgroundPropTypes = BasePropTypes & {\r\n  borderRadius: number;\r\n  gradientBg?: boolean;\r\n};\r\n\r\nexport const AutoSizeVideoBackground = styled(\r\n  (\r\n    props: AutoSizeVideoBackgroundPropTypes & StyledProps,\r\n  ) => {\r\n    const { children,\r\n      image,\r\n      videoSources,\r\n      breakPoint,\r\n      borderRadius,\r\n      preset,\r\n      compose,\r\n    } = props;\r\n    return (\r\n      <ViewportSizeVideoBackground image={image} borderRadius={borderRadius} videoSources={videoSources} preset={preset} breakPoint={breakPoint} css={compose({ height: 'auto' })} fixedVideo>\r\n        {children}\r\n      </ViewportSizeVideoBackground>\r\n    );\r\n  });\r\n","import factory from './icon';\r\nimport Svg12x12 from './glyphs/Play_12x12.svg';\r\nimport Svg24x24 from './glyphs/Play_24x24.svg';\r\n\r\nexport const Play12x12 = factory(Svg12x12, 12, 12);\r\nexport const Play24x24 = factory(Svg24x24, 24, 24);\r\n","import factory from './icon';\r\nimport Svg34x24 from './glyphs/Sound_34x24.svg';\r\nimport SvgMuted34x24 from './glyphs/SoundMuted_34x24.svg';\r\n\r\nexport const Sound34x24 = factory(Svg34x24, 34, 24);\r\nexport const SoundMuted34x24 = factory(SvgMuted34x24, 34, 24);\r\n","import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport * as style from 'Shared/Style';\r\n\r\ntype PropType = {\r\n  min: number;\r\n  max: number;\r\n  value: number;\r\n  updateValue: (selectedValue: number) => void;\r\n  width?: number;\r\n};\r\n\r\nconst SliderInput = styled.input({\r\n  appearance: 'none',\r\n  height: '2px',\r\n  borderRadius: '1px',\r\n  backgroundColor: style.colors.monochrome.white,\r\n  '::-webkit-slider-thumb': {\r\n    appearance: 'none',\r\n    width: '4px',\r\n    height: '4px',\r\n    borderRadius: '8px',\r\n    backgroundColor: style.colors.monochrome.white,\r\n    cursor: 'pointer',\r\n    padding: {\r\n      y: '4px',\r\n      x: '4px',\r\n    },\r\n  },\r\n})\r\n\r\nconst Slider = ({ min, max, value, updateValue, width }: PropType) => {\r\n  return (\r\n    <SliderInput\r\n      type=\"range\"\r\n      min={min}\r\n      max={max}\r\n      value={value}\r\n      onChange={(e) => updateValue(parseFloat(e.target.value))}\r\n      css={{\r\n        width: width ? `${width}px` : '100%',\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Slider;\r\n","import React, { RefObject, useEffect, useState } from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { Sound34x24, SoundMuted34x24 } from 'Shared/Icons/Sound';\r\nimport Slider from 'Shared/SharedComponents/atoms/Slider';\r\n\r\ntype PropType = {\r\n  mediaRef: RefObject<HTMLMediaElement>;\r\n};\r\n\r\nconst Wrap = styled.div({\r\n  position: 'relative', height: '100%', display: 'flex', alignItems: 'center', gap: '8px'\r\n})\r\n\r\nconst Sound = styled(Sound34x24, {\r\n  cursor: 'pointer'\r\n})\r\n\r\nconst Muted = styled(SoundMuted34x24, {\r\n  cursor: 'pointer'\r\n})\r\n\r\nconst SoundControls = ({ mediaRef }: PropType) => {\r\n  const [muted, setMuted] = useState(false);\r\n  const [volume, setVolume] = useState(0);\r\n\r\n  useEffect(() => {\r\n    if (mediaRef?.current) {\r\n      setMuted(mediaRef.current.muted);\r\n      setVolume(mediaRef.current.volume);\r\n    }\r\n  }, [mediaRef]);\r\n\r\n  const mute = () => {\r\n    if (mediaRef?.current) {\r\n      mediaRef.current.muted = true;\r\n      setMuted(true);\r\n    }\r\n  };\r\n\r\n  const unmute = () => {\r\n    if (mediaRef?.current) {\r\n      mediaRef.current.muted = false;\r\n      setMuted(false);\r\n      if (volume === 0) {\r\n        setVolume(0.5);\r\n      }\r\n    }\r\n  };\r\n\r\n  const adjustVolume = (selectedVolume: number) => {\r\n    let newVolume = Math.min(Math.max(selectedVolume, 0), 1);\r\n    if (mediaRef?.current) {\r\n      mediaRef.current.volume = newVolume;\r\n      setVolume(newVolume);\r\n      if (newVolume === 0) {\r\n        setMuted(true);\r\n      } else if (muted) {\r\n        setMuted(false);\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Wrap>\r\n      {muted ? (\r\n        <Muted onClick={unmute} />\r\n      ) : (\r\n        <Sound onClick={mute} />\r\n      )}\r\n      <Slider\r\n        min={0}\r\n        max={48}\r\n        value={muted ? 0 : 48 * volume}\r\n        updateValue={(selectedValue) => {\r\n          adjustVolume(selectedValue / 48);\r\n        }}\r\n        width={48}\r\n      />\r\n    </Wrap>\r\n  );\r\n};\r\n\r\nexport default SoundControls;\r\n","import React, { RefObject, useState } from 'react';\r\nimport Slider from 'Shared/SharedComponents/atoms/Slider';\r\n\r\ntype PropType = {\r\n  mediaRef: RefObject<HTMLMediaElement>;\r\n};\r\n\r\nconst TimeControls = ({ mediaRef }: PropType) => {\r\n  const [currentTime, setCurrentTime] = useState(0);\r\n  const [duration, setDuration] = useState(1);\r\n\r\n  const interval = setInterval(() => {\r\n    if (mediaRef.current && mediaRef.current.readyState > 0) {\r\n      setCurrentTime(mediaRef.current.currentTime);\r\n      setDuration(mediaRef.current.duration);\r\n\r\n      clearInterval(interval);\r\n    }\r\n  }, 200);\r\n\r\n  const skipToTime = (selectedTime: number) => {\r\n    if (mediaRef.current) {\r\n      const newTime = Math.min(Math.max(selectedTime, 0), duration);\r\n      mediaRef.current.currentTime = newTime;\r\n      setCurrentTime(newTime);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Slider\r\n      min={0}\r\n      max={1000}\r\n      value={(currentTime * 1000) / duration}\r\n      updateValue={(selectedValue) => {\r\n        skipToTime((selectedValue * duration) / 1000);\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nexport default TimeControls;\r\n","import factory from './icon';\r\nimport Svg24x24 from './glyphs/Pause_24x24.svg';\r\n\r\nexport const Pause24x24 = factory(Svg24x24, 24, 24);\r\n","import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { Pause24x24 } from 'Shared/Icons/Pause';\r\nimport { Play24x24 } from 'Shared/Icons/Play';\r\n\r\nconst Play = styled(Play24x24, {\r\n  cursor: 'pointer'\r\n})\r\n\r\nconst Pause = styled(Pause24x24, {\r\n  cursor: 'pointer'\r\n})\r\n\r\ntype PropType = {\r\n  isPlaying: boolean;\r\n  play: () => void;\r\n  pause: () => void;\r\n};\r\n\r\nconst PlayControls = ({ isPlaying, play, pause }: PropType) => {\r\n  return isPlaying ? (\r\n    <Pause onClick={pause} />\r\n  ) : (\r\n    <Play onClick={play} />\r\n  );\r\n};\r\n\r\nexport default PlayControls;\r\n","import factory from './icon';\r\nimport Svg24x24 from './glyphs/Maximize_24x24.svg';\r\n\r\nexport const Maximize24x24 = factory(Svg24x24, 24, 24);\r\n","import factory from './icon';\r\nimport Svg24x24 from './glyphs/Minimize_24x24.svg';\r\n\r\nexport const Minimize24x24 = factory(Svg24x24, 24, 24);\r\n","import React, { RefObject, useLayoutEffect } from 'react';\r\nimport { Maximize24x24 } from 'Shared/Icons/Maximize';\r\nimport { Minimize24x24 } from 'Shared/Icons/Minimize';\r\n\r\ntype PropType = {\r\n  mediaRef: RefObject<HTMLMediaElement>;\r\n  isMaximized: boolean;\r\n  updateIsMaximized: (selectedValue: boolean) => void;\r\n};\r\n\r\nconst MaximizeControls = ({ mediaRef, isMaximized, updateIsMaximized }: PropType) => {\r\n  useLayoutEffect(() => {\r\n    document.onfullscreenchange = () => {\r\n      if (document.fullscreenElement === null) {\r\n        updateIsMaximized(false);\r\n      }\r\n    };\r\n\r\n    return () => {\r\n      document.onfullscreenchange = null;\r\n    };\r\n  });\r\n\r\n  const maximize = () => {\r\n    mediaRef.current?.parentElement?.parentElement?.requestFullscreen();\r\n    updateIsMaximized(true);\r\n  };\r\n\r\n  const minimize = () => {\r\n    document.exitFullscreen();\r\n    updateIsMaximized(false);\r\n  };\r\n\r\n  return isMaximized ? (\r\n    <Minimize24x24 onClick={minimize} css={{ cursor: 'pointer' }} />\r\n  ) : (\r\n    <Maximize24x24 onClick={maximize} css={{ cursor: 'pointer' }} />\r\n  );\r\n};\r\n\r\nexport default MaximizeControls;\r\n","import React, { ReactNode, useEffect, useRef, useState } from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { ButtonHeight, ButtonTheme, SolidButton } from 'Shared/TextButtons';\r\nimport VideoSourceType from 'Shared/ViewModels/VideoSourceViewModel.type';\r\nimport * as style from 'Shared/Style';\r\nimport { ViewportSizeVideoBackground } from 'Shared/SharedComponents/molecules/ImageVideoBackground';\r\nimport { OverlayNotABackdrop } from 'Shared/SharedComponents/atoms/AspectRatio';\r\nimport SoundControls from './SoundControls';\r\nimport TimeControls from './TimeControls';\r\nimport PlayControls from './PlayControls';\r\nimport MaximizeControls from './MaximizeControls';\r\nimport { Plus12x12 } from 'Shared/Icons/Plus';\r\nimport VideoPlayer from 'Shared/Video/VideoPlayer'\r\nimport { Preset } from 'Shared/image-sizes';\r\n\r\ntype PropType = {\r\n  videoSources: VideoSourceType[];\r\n  previewImage: { url?: string };\r\n  previewImagePreset?: Preset;\r\n  previewVideoSources?: VideoSourceType[];\r\n  isCompact: boolean;\r\n  children?: ReactNode;\r\n  videoStarted: boolean;\r\n  stopVideo?: () => void;\r\n  loop?: boolean;\r\n  muted?: boolean;\r\n  buttonsInControls?: { text: string; onClick: () => void }[];\r\n};\r\n\r\nconst Wrap = styled.div({\r\n  position: 'relative', height: '100%', overflow: 'hidden', alignSelf: 'normal'\r\n})\r\n\r\nconst VideoStopped = styled.div({\r\n  display: 'flex',\r\n  height: '100%',\r\n  width: '100%',\r\n  position: 'absolute',\r\n  top: 0,\r\n  flexDirection: 'column',\r\n  color: style.colors.monochrome.white,\r\n})\r\n\r\nconst VideoStartedWrap = styled.div({\r\n  height: '100%',\r\n  width: '100%',\r\n  position: 'absolute',\r\n  top: 0,\r\n  paddingBottom: '40px',\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'end',\r\n  color: style.colors.monochrome.white,\r\n  gap: '32px',\r\n})\r\n\r\nconst VideoStartedWrapDesktop = styled(VideoStartedWrap, {\r\n  gap: '16px',\r\n})\r\n\r\nconst TimeControlWrapMobile = styled.div({\r\n  width: '100%',\r\n  padding: { x: '24px' },\r\n  display: 'flex',\r\n  flexDirection: 'row',\r\n  alignItems: 'center',\r\n})\r\n\r\nconst ButtonsWrapDesktop = styled.div({\r\n  width: '100%',\r\n  padding: { x: '40px' },\r\n  display: 'flex',\r\n  flexDirection: 'row',\r\n  gap: '8px',\r\n  alignItems: 'center',\r\n  justifyContent: 'end',\r\n})\r\n\r\nconst ButtonsWrapMobile = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'row',\r\n  gap: '8px',\r\n})\r\n\r\nconst PlusIcon = styled(Plus12x12, {\r\n  marginLeft: '8px'\r\n})\r\n\r\nconst OuterBase = styled.div({\r\n  width: '100%',\r\n  display: 'flex',\r\n  flexDirection: 'row',\r\n  gap: '24px',\r\n  alignItems: 'center',\r\n})\r\n\r\nconst OuterMobile = styled(OuterBase, {\r\n  padding: { x: '32px' },\r\n  justifyContent: 'space-between',\r\n})\r\n\r\nconst OuterDesktop = styled(OuterBase, {\r\n  padding: { x: '40px' },\r\n})\r\n\r\nconst Inner = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'row',\r\n  gap: '24px',\r\n  alignItems: 'center',\r\n})\r\n\r\nconst Video = ({\r\n  videoSources,\r\n  previewImage,\r\n  previewImagePreset,\r\n  previewVideoSources,\r\n  isCompact,\r\n  videoStarted,\r\n  stopVideo = () => { },\r\n  children,\r\n  loop = false,\r\n  muted = false,\r\n  buttonsInControls,\r\n}: PropType) => {\r\n  const videoRef = useRef<HTMLVideoElement>(null);\r\n  const [isPlaying, setIsPlaying] = useState(false);\r\n  const [isMaximized, setIsMaximized] = useState(false);\r\n\r\n  const play = () => {\r\n    videoRef.current?.play();\r\n    setIsPlaying(true);\r\n  };\r\n\r\n  const pause = () => {\r\n    videoRef.current?.pause();\r\n    setIsPlaying(false);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (videoStarted) {\r\n      play();\r\n    }\r\n  }, [videoStarted]);\r\n\r\n  const VideoStartedWrapElement = isCompact ? VideoStartedWrap : VideoStartedWrapDesktop;\r\n  const Outer = isCompact ? OuterMobile : OuterDesktop;\r\n  return (\r\n    <Wrap>\r\n      <ViewportSizeVideoBackground\r\n        image={previewImage}\r\n        preset={previewImagePreset}\r\n        videoSources={videoStarted ? null : previewVideoSources}\r\n        breakPoint={isCompact ? 0 : 1}\r\n        height={'100%'}\r\n      >\r\n        {videoStarted && (\r\n          <OverlayNotABackdrop>\r\n            <VideoPlayer\r\n              autoPlay\r\n              videoRef={videoRef}\r\n              loop={loop}\r\n              muted={muted}\r\n              coverContent\r\n              playsInline={isCompact}\r\n              isMobile={isCompact}\r\n              sources={videoSources}\r\n              onEnded={() => stopVideo()}\r\n            />\r\n          </OverlayNotABackdrop>\r\n        )}\r\n        {!videoStarted && (\r\n          <VideoStopped>\r\n            {children}\r\n          </VideoStopped>\r\n        )}\r\n        {videoStarted && !loop && (\r\n          <VideoStartedWrapElement\r\n            id=\"video-controls\"\r\n            className=\"controls\"\r\n            onClick={(event) => {\r\n              if (event.target === event.currentTarget) {\r\n                if (isPlaying) {\r\n                  pause();\r\n                } else {\r\n                  play();\r\n                }\r\n              }\r\n            }}\r\n          >\r\n            {!isCompact && buttonsInControls && buttonsInControls.length > 0 && (\r\n              <ButtonsWrapDesktop>\r\n                {buttonsInControls.map((buttonInControls, index) => {\r\n                  return (\r\n                    <SolidButton\r\n                      key={index}\r\n                      text={buttonInControls.text}\r\n                      onClick={() => buttonInControls.onClick()}\r\n                      iconAfter={<PlusIcon />}\r\n                      padding={{ x: 16 }}\r\n                      height={ButtonHeight.Video}\r\n                      theme={ButtonTheme.TransparentWhite}\r\n                    />\r\n                  );\r\n                })}\r\n              </ButtonsWrapDesktop>\r\n            )}\r\n            <Outer>\r\n              <Inner>\r\n                <PlayControls isPlaying={isPlaying} play={play} pause={pause} />\r\n                <SoundControls mediaRef={videoRef} />\r\n                {isCompact && buttonsInControls && buttonsInControls.length > 0 && (\r\n                  <ButtonsWrapMobile>\r\n                    {buttonsInControls.map((buttonInControls, index) => {\r\n                      return (\r\n                        <SolidButton\r\n                          key={index}\r\n                          text={buttonInControls.text}\r\n                          onClick={() => buttonInControls.onClick()}\r\n                          iconAfter={<PlusIcon />}\r\n                          padding={{ x: 16 }}\r\n                          height={ButtonHeight.Video}\r\n                          theme={ButtonTheme.TransparentWhite}\r\n                        />\r\n                      );\r\n                    })}\r\n                  </ButtonsWrapMobile>\r\n                )}\r\n              </Inner>\r\n              {!isCompact && <TimeControls mediaRef={videoRef} />}\r\n              <MaximizeControls mediaRef={videoRef} isMaximized={isMaximized} updateIsMaximized={setIsMaximized} />\r\n            </Outer>\r\n            {isCompact && (\r\n              <TimeControlWrapMobile>\r\n                <TimeControls mediaRef={videoRef} />\r\n              </TimeControlWrapMobile>\r\n            )}\r\n          </VideoStartedWrapElement>\r\n        )}\r\n      </ViewportSizeVideoBackground>\r\n    </Wrap>\r\n  );\r\n};\r\n\r\nexport default Video;","var React = require('react');\n\nfunction Play12x12 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"g\",{\"id\":\"Inverted=off, Size=12x12\"},React.createElement(\"path\",{\"id\":\"Polygon 2\",\"d\":\"M10.496 6.868L12.016 6l-1.52-.868-7-4L2 .277v11.446l1.496-.855 7-4z\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinejoin\":\"round\"})));\n}\n\nPlay12x12.defaultProps = {\"width\":\"12\",\"height\":\"12\",\"viewBox\":\"0 0 12 12\",\"fill\":\"none\"};\n\nmodule.exports = Play12x12;\n\nPlay12x12.default = Play12x12;\n","var React = require('react');\n\nfunction Play24x24 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"g\",{\"id\":\"Inverted=off, Size=24x24\"},React.createElement(\"path\",{\"id\":\"Polygon 2\",\"d\":\"M21.784 13.77c1.425-.75 1.425-2.79 0-3.54L5.932 1.887C4.6 1.186 3 2.15 3 3.657v16.687c0 1.505 1.6 2.47 2.931 1.77l15.853-8.344z\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\"})));\n}\n\nPlay24x24.defaultProps = {\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\"};\n\nmodule.exports = Play24x24;\n\nPlay24x24.default = Play24x24;\n","var React = require('react');\n\nfunction Sound34x24 (props) {\n    return React.createElement(\"svg\",props,[React.createElement(\"path\",{\"d\":\"M21 21a9 9 0 100-18m0 13a4 4 0 000-8\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"key\":0}),React.createElement(\"mask\",{\"id\":\"path-3-outside-1_19324_440601\",\"maskUnits\":\"userSpaceOnUse\",\"x\":\"0\",\"y\":\".133\",\"width\":\"17\",\"height\":\"23\",\"fill\":\"#000\",\"key\":1},[React.createElement(\"path\",{\"fill\":\"#fff\",\"d\":\"M0 .133h17v23H0z\",\"key\":0}),React.createElement(\"path\",{\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M6.6 9H3a1 1 0 00-1 1v4a1 1 0 001 1h3.6l6.76 5.633a1 1 0 001.64-.768V4.135a1 1 0 00-1.64-.768L6.6 9z\",\"key\":1})]),React.createElement(\"path\",{\"d\":\"M6.6 9v2h.724l.557-.464L6.6 9zm0 6l1.28-1.537L7.324 13H6.6v2zm6.76 5.633l-1.28 1.536 1.28-1.536zM15 4.135h2-2zm-1.64-.768l1.28 1.536-1.28-1.536zM3 10.998h3.6V7H3v4zm1-1a1 1 0 01-1 1V7a3 3 0 00-3 3h4zm0 4v-4H0v4h4zm-1-1a1 1 0 011 1H0a3 3 0 003 3v-4zm3.6 0H3v4h3.6v-4zm-1.28 3.537l6.76 5.633 2.56-3.073-6.76-5.633-2.56 3.073zm6.76 5.633c1.953 1.629 4.92.24 4.92-2.304h-4a1 1 0 011.64-.769l-2.56 3.073zM17 19.865V4.135h-4v15.73h4zm0-15.73C17 1.59 14.033.202 12.08 1.83l2.56 3.073A1 1 0 0113 4.135h4zM12.08 1.83L5.32 7.463l2.56 3.073 6.76-5.633-2.56-3.073z\",\"fill\":\"currentColor\",\"mask\":\"url(#path-3-outside-1_19324_440601)\",\"key\":2})]);\n}\n\nSound34x24.defaultProps = {\"width\":\"34\",\"height\":\"24\",\"viewBox\":\"0 0 34 24\",\"fill\":\"none\"};\n\nmodule.exports = Sound34x24;\n\nSound34x24.default = Sound34x24;\n","var React = require('react');\n\nfunction SoundMuted34x24 (props) {\n    return React.createElement(\"svg\",props,[React.createElement(\"mask\",{\"id\":\"path-1-outside-1_19324_440678\",\"maskUnits\":\"userSpaceOnUse\",\"x\":\"0\",\"y\":\".133\",\"width\":\"17\",\"height\":\"23\",\"fill\":\"#000\",\"key\":0},[React.createElement(\"path\",{\"fill\":\"#fff\",\"d\":\"M0 .133h17v23H0z\",\"key\":0}),React.createElement(\"path\",{\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M6.6 9H3a1 1 0 00-1 1v4a1 1 0 001 1h3.6l6.76 5.633a1 1 0 001.64-.768V4.135a1 1 0 00-1.64-.768L6.6 9z\",\"key\":1})]),React.createElement(\"path\",{\"d\":\"M6.6 9v2h.724l.557-.464L6.6 9zm0 6l1.28-1.537L7.324 13H6.6v2zm6.76 5.633l-1.28 1.536 1.28-1.536zM15 4.135h2-2zm-1.64-.768l1.28 1.536-1.28-1.536zM3 10.998h3.6V7H3v4zm1-1a1 1 0 01-1 1V7a3 3 0 00-3 3h4zm0 4v-4H0v4h4zm-1-1a1 1 0 011 1H0a3 3 0 003 3v-4zm3.6 0H3v4h3.6v-4zm-1.28 3.537l6.76 5.633 2.56-3.073-6.76-5.633-2.56 3.073zm6.76 5.633c1.953 1.629 4.92.24 4.92-2.304h-4a1 1 0 011.64-.769l-2.56 3.073zM17 19.865V4.135h-4v15.73h4zm0-15.73C17 1.59 14.033.202 12.08 1.83l2.56 3.073A1 1 0 0113 4.135h4zM12.08 1.83L5.32 7.463l2.56 3.073 6.76-5.633-2.56-3.073z\",\"fill\":\"#fff\",\"mask\":\"url(#path-1-outside-1_19324_440678)\",\"key\":1}),React.createElement(\"path\",{\"d\":\"M21 18l6-6m0 0l6-6m-6 6l-6-6m6 6l6 6\",\"stroke\":\"#fff\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"key\":2})]);\n}\n\nSoundMuted34x24.defaultProps = {\"width\":\"34\",\"height\":\"24\",\"viewBox\":\"0 0 34 24\",\"fill\":\"none\"};\n\nmodule.exports = SoundMuted34x24;\n\nSoundMuted34x24.default = SoundMuted34x24;\n","var React = require('react');\n\nfunction Pause24x24 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"path\",{\"d\":\"M8 1v22m8-22v22\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\"}));\n}\n\nPause24x24.defaultProps = {\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\"};\n\nmodule.exports = Pause24x24;\n\nPause24x24.default = Pause24x24;\n","var React = require('react');\n\nfunction Maximize24x24 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"path\",{\"d\":\"M8 2H4a2 2 0 00-2 2v4m6 14H4a2 2 0 01-2-2v-4M16 2h4a2 2 0 012 2v4m-6 14h4a2 2 0 002-2v-4\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\"}));\n}\n\nMaximize24x24.defaultProps = {\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\"};\n\nmodule.exports = Maximize24x24;\n\nMaximize24x24.default = Maximize24x24;\n","var React = require('react');\n\nfunction Minimize24x24 (props) {\n    return React.createElement(\"svg\",props,React.createElement(\"path\",{\"d\":\"M2 8h4a2 2 0 002-2V2M2 16h4a2 2 0 012 2v4M22 8h-4a2 2 0 01-2-2V2m6 14h-4a2 2 0 00-2 2v4\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\"}));\n}\n\nMinimize24x24.defaultProps = {\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\"};\n\nmodule.exports = Minimize24x24;\n\nMinimize24x24.default = Minimize24x24;\n","import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { translate } from '@polarnopyret/scope/index';\r\nimport ProductListItemViewModel from '../../Product/ProductListing/ProductListItemViewModel.type';\r\nimport { Close16x16 } from '../Icons/Close';\r\nimport ProductCard from '../../Product/ProductCard';\r\nimport ProductCardList from '../../Product/SwipeableList';\r\nimport { StyleOrStyleArray } from '@glitz/type';\r\nimport Modal, { ModalScrollableContent, ModalTopContent } from '../SharedComponents/atoms/Modal';\r\nimport * as style from 'Shared/Style';\r\n\r\ntype RequiredPropType = {\r\n  modalIsShown: boolean;\r\n  hideModal: () => void;\r\n  products: ProductListItemViewModel[];\r\n  isMobile: boolean;\r\n};\r\n\r\nconst BaseSpan = styled.span({\r\n  fontStyle: 'normal',\r\n  fontWeight: 500,\r\n  textTransform: 'uppercase',\r\n  lineHeight: '100%',\r\n});\r\n\r\nconst ProductLabel = styled(BaseSpan, {\r\n  alignItems: 'center',\r\n  fontSize: '40px',\r\n  display: 'flex',\r\n});\r\n\r\nconst ProductCount = styled(BaseSpan, {\r\n  fontSize: '14px',\r\n  letterSpacing: '0.01em',\r\n});\r\n\r\nconst Heading = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'row',\r\n  alignItems: 'space-between',\r\n  padding: { xy: 0 },\r\n  gap: '8px',\r\n});\r\n\r\nconst TopContent = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  width: '100%'\r\n})\r\n\r\nconst TopContentClose = styled(Close16x16, {\r\n  cursor: 'pointer'\r\n})\r\n\r\nconst ProductCardWrap = styled.div({\r\n  marginBottom: '24px'\r\n})\r\n\r\nexport const QuickShopProductsModal = ({\r\n  products,\r\n  modalIsShown,\r\n  hideModal,\r\n  isMobile\r\n}: RequiredPropType & { css?: StyleOrStyleArray; }) => {\r\n\r\n  return (\r\n    <Modal modalIsShown={modalIsShown} hideModal={hideModal} zIndex={style.ZIndex.Overlay}>\r\n      <ModalTopContent>\r\n        <TopContent>\r\n          <Heading>\r\n            <ProductLabel>{translate('/site/shared/products')}</ProductLabel>\r\n            <ProductCount>({products?.length})</ProductCount>\r\n          </Heading>\r\n          <TopContentClose onClick={hideModal} />\r\n        </TopContent>\r\n      </ModalTopContent>\r\n      <ModalScrollableContent css={{ marginTop: isMobile ? '8px' : '16px' }}>\r\n        {isMobile &&\r\n          <ProductCardList\r\n            products={products}\r\n            isCompact={isMobile}\r\n            cellSpacing={8}\r\n            quickAddToCart={true}\r\n          />\r\n        }\r\n        {!isMobile && <>\r\n          {products?.map((product, index) => (\r\n            <ProductCardWrap key={index + '-' + product.itemNumber}>\r\n              <ProductCard product={product} listIndex={index} quickAddToCart={true} />\r\n            </ProductCardWrap>\r\n          ))}\r\n        </>}\r\n      </ModalScrollableContent>\r\n    </Modal>\r\n  );\r\n};\r\n\r\nexport default QuickShopProductsModal;","/**\r\n * @ComponentFor VideoProductsBlockViewModel\r\n */\r\nimport React, { useState } from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { default as VideoProductsBlockType } from './VideoProductsBlockViewModel.type';\r\nimport { Play12x12 } from 'Shared/Icons/Play';\r\nimport Video from 'Shared/Video/Video';\r\nimport { HEIGHT as DESKTOP_HEADER_HEIGHT } from 'SiteLayout/Header/DesktopHeader';\r\nimport { BLACK_TOP_MOBILE_HEIGHT, BLACK_TOP_DESKTOP_HEIGHT } from 'SiteLayout/Header';\r\nimport { HEIGHT as MOBILE_HEIGHT } from 'SiteLayout/Header/MobileHeader';\r\nimport { ButtonHeight, ButtonTheme, SolidButton } from 'Shared/TextButtons';\r\nimport { Plus12x12 } from 'Shared/Icons/Plus';\r\nimport connect from 'Shared/connect';\r\nimport { createGridClasses, createOffsetGridClassLarge } from 'Shared/grid';\r\nimport { GridWrap } from 'Shared/PageLayout';\r\nimport { selectDeviceImage } from 'Shared/utils';\r\nimport { isCompact as functionIsCompact } from 'Shared/Viewport';\r\nimport { H2, ResponsiveSize } from 'Shared/SharedComponents/atoms/Typography';\r\nimport * as style from 'Shared/Style';\r\nimport QuickShopProductModal from 'Shared/QuickShopProductModal';\r\nimport { Preset } from 'Shared/image-sizes';\r\n\r\ntype PropTypes = VideoProductsBlockType & {\r\n};\r\n\r\nconst Wrap = styled.div({\r\n  width: '100%',\r\n  height: `calc(100vh - ${MOBILE_HEIGHT + BLACK_TOP_MOBILE_HEIGHT}px)`,\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    height: `calc(100vh - ${DESKTOP_HEADER_HEIGHT + BLACK_TOP_DESKTOP_HEIGHT}px)`,\r\n  },\r\n})\r\n\r\nconst TextElement = styled.span({\r\n  display: 'block',\r\n  width: '100%',\r\n  fontStyle: 'normal',\r\n  fontWeight: 500,\r\n  lineHeight: '100%',\r\n  textAlign: 'center',\r\n  textTransform: 'uppercase',\r\n});\r\n\r\nconst GridWrapExtended = styled(GridWrap, {\r\n  transition: {\r\n    property: 'opacity',\r\n    timingFunction: 'ease-in-out',\r\n    duration: '0.3s',\r\n  },\r\n  height: '100%',\r\n  position: 'absolute',\r\n  top: 0,\r\n})\r\n\r\nconst Label = styled(TextElement, {\r\n  alignSelf: 'end',\r\n  fontSize: '14px',\r\n  letterSpacing: '0.01em',\r\n  marginBottom: '16px',\r\n  color: style.colors.monochrome.white,\r\n  zIndex: 1,\r\n})\r\n\r\nconst Heading = styled(H2, {\r\n  alignSelf: 'start',\r\n  color: style.colors.monochrome.white,\r\n  zIndex: 1,\r\n  textAlign: 'center',\r\n})\r\n\r\nconst ButtonWrap = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'end',\r\n  paddingBottom: '40px',\r\n  height: '100%',\r\n})\r\n\r\nconst CenterContent = styled.div({\r\n  textAlign: 'center',\r\n})\r\n\r\nconst Plus = styled(Plus12x12, {\r\n  marginLeft: '8px'\r\n})\r\n\r\nconst Play = styled(Play12x12, {\r\n  marginLeft: '8px'\r\n})\r\n\r\nexport const VideoProductsBlock = connect(\r\n  (state) => ({\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  })\r\n)((props: PropTypes & { currentBreakpoint: number }) => {\r\n  const [videoStarted, setVideoStarted] = useState(false);\r\n  const [modalIsShown, setModalIsShown] = useState<boolean>(false);\r\n  const isMobile = functionIsCompact(props.currentBreakpoint);\r\n\r\n  const {\r\n    imagePreview,\r\n    imagePreviewSmallScreen,\r\n    productItems,\r\n    heading,\r\n    label,\r\n    seeProductsButtonText = '',\r\n    playButtonText = '',\r\n  } = props;\r\n\r\n  return (\r\n    <>\r\n      <Wrap>\r\n        <Video\r\n          videoSources={props.videoSources}\r\n          previewImage={selectDeviceImage(imagePreview, imagePreviewSmallScreen, isMobile)}\r\n          previewImagePreset={Preset.FullWidth}\r\n          previewVideoSources={props.videoPreviewSources}\r\n          isCompact={isMobile}\r\n          videoStarted={videoStarted}\r\n          stopVideo={() => setVideoStarted(false)}\r\n          buttonsInControls={\r\n            productItems?.length > 0\r\n              ? [\r\n                {\r\n                  text: isMobile\r\n                    ? `(${productItems.length})`\r\n                    : `${seeProductsButtonText} (${productItems.length})`,\r\n                  onClick: () => setModalIsShown(true),\r\n                },\r\n              ]\r\n              : []\r\n          }\r\n        >\r\n          <GridWrapExtended className=\"grid\">\r\n            <Label className={createGridClasses(12, 4, createOffsetGridClassLarge(5))}>\r\n              {label}\r\n            </Label>\r\n            <Heading\r\n              className={createGridClasses(12, 8, createOffsetGridClassLarge(3))}\r\n              fontSize={ResponsiveSize.D96_M40}\r\n            >\r\n              {heading}\r\n            </Heading>\r\n            <ButtonWrap className={createGridClasses(12, 12)}>\r\n              <CenterContent>\r\n                <SolidButton\r\n                  text={playButtonText}\r\n                  onClick={() => setVideoStarted(true)}\r\n                  theme={ButtonTheme.WhiteBorderToBlack}\r\n                  iconAfter={<Play />}\r\n                  height={ButtonHeight.Big}\r\n                />\r\n                {productItems?.length > 0 && (\r\n                  <SolidButton\r\n                    text={`${isMobile ? '' : `${seeProductsButtonText} `}(${productItems.length})`}\r\n                    onClick={() => setModalIsShown(true)}\r\n                    iconAfter={<Plus />}\r\n                    height={ButtonHeight.Big}\r\n                    css={{ marginLeft: '8px' }}\r\n                  />\r\n                )}\r\n              </CenterContent>\r\n            </ButtonWrap>\r\n          </GridWrapExtended>\r\n        </Video>\r\n      </Wrap>\r\n      <QuickShopProductModal isMobile={isMobile} modalIsShown={modalIsShown} hideModal={() => setModalIsShown(false)} products={productItems} />\r\n    </>\r\n  );\r\n});\r\n\r\nexport default VideoProductsBlock;\r\n"],"sourceRoot":""}