"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9931],{i9y0:function(e,t,a){a.d(t,{y:function(){return VideoLibrary}});var i=a("BGKE"),r=a("q1tI"),o=a("rEaw");let l=(0,r.createContext)({});var n=a("u5t1"),d=a("mYVa"),s=a("Eso5"),c=a("KeOA"),h=a("dDsW"),g=a("hXNO"),m=a("/npG"),p=(0,m.k)(e=>({root:{[e.fn.smallerThan("sm")]:{marginLeft:-16,marginRight:-16}}}));let CarouselProgress=e=>{let{currentSlide:t,totalSlides:a,show:r,sideSpacing:o=0}=e;if(!r||a<=1)return null;let l=(Math.min(Math.max(t,0),a-1)+1)/a*100;return(0,i.tZ)(s.x,{mt:24,h:4,sx:e=>({backgroundColor:e.colors.neutral[1],borderRadius:0,marginLeft:o,marginRight:o}),children:(0,i.tZ)(s.x,{h:"100%",sx:e=>({width:"".concat(l,"%"),backgroundColor:e.colors.neutral[4],borderRadius:0,transition:"width .2s ease"})})})};var u=a("mH4H"),f=a("iZ8j");let SeeMoreBtnWrapper=e=>{let{onClick:t,children:a,wrapperClassName:o="flex justify-center md:justify-start",color:n}=e,{primaryColor:d}=(0,r.useContext)(l),s=(0,g.d)();return(0,i.tZ)("div",{className:o,children:(0,i.tZ)(u.B,{variant:"secondary",className:"w-full sm:w-auto",fullWidth:s,rightIcon:(0,i.tZ)(f.Z,{color:"currentColor",size:18}),onClick:t,color:null!=n?n:d,children:a})})};var x=a("evbj");let toVideoItemData=(e,t)=>({...e,image:e.image,imageMedium:e.image,imageThumbnail:e.image,url:e.url,title:e.title,type:t?x.V.SHORTS:x.V.VIDEO}),useVideoLibraryLoadMore=e=>{let{totalItems:t,initialVisible:a,loadMoreStep:i,resetKey:o,desktopOnly:l=!0}=e,n=(0,g.d)(),d=(0,r.useMemo)(()=>Math.min(a,t),[a,t]),[s,c]=(0,r.useState)(d);(0,r.useEffect)(()=>{if(l&&n){c(t);return}c(d)},[l,n,t,d,o]);let h=(0,r.useCallback)(()=>{c(e=>Math.min(e+i,t))},[i,t]),m=t>a&&s<t&&!(l&&n);return{visibleCount:s,loadMore:h,showSeeMore:m}},spotlightToVideoItemDataStub=e=>({url:e.urlVideo,title:e.videoTitle||""}),useVideoLibraryRows=()=>{let{loading:e,videoData:t,videoList:a}=(0,r.useContext)(l);return(0,r.useMemo)(()=>e&&0===t.length&&(null==a?void 0:a.length)?a.map(spotlightToVideoItemDataStub):t,[e,t,a])};var S=a("tkAF");let VideoItemWrapper=e=>{let{loading:t}=(0,r.useContext)(l);return(0,i.tZ)(S.V,{...e,loading:t})},FeatureShorts=e=>{let{styles:t,...a}=e,{applyCarousel:o,loading:m,primaryColor:u}=(0,r.useContext)(l),f=useVideoLibraryRows(),x=(0,g.d)(),{formatMessage:S}=(0,h.Z)(),[y,Z]=(0,r.useState)(0),{classes:b}=p(void 0,{name:"ShortReelList",styles:t}),v=(0,r.useMemo)(()=>f.map(e=>e.url).join("\x00"),[f]),V=(0,r.useMemo)(()=>f.map(e=>e.image?"1":"0").join(""),[f]),C="feature-shorts-carousel-".concat(m?"loading":"loaded","-").concat(f.length,"-").concat(v,"-").concat(V),{visibleCount:w,loadMore:I,showSeeMore:k}=useVideoLibraryLoadMore({totalItems:f.length,initialVisible:12,loadMoreStep:12,resetKey:v,desktopOnly:!0}),L=f.slice(0,w),T=k&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:I,children:S({id:"videoLibrary.featureShorts.seeMore",defaultMessage:"Xem th\xeam"})}),M=!x&&!m&&f.length>6,shortsRootSx=e=>({marginTop:(0,d.h)(-16),[e.fn.largerThan("sm")]:{marginTop:0}});return o?(0,i.tZ)(s.x,{className:"flex flex-col gap-6",sx:shortsRootSx,children:(0,i.BX)(s.x,{className:b.root,...a,children:[(0,i.tZ)(n.a,{slideSize:"16.67%",slideGap:8,breakpoints:[{maxWidth:"sm",slideSize:"16.67%",slideGap:8}],withControls:M,withIndicators:!1,loop:!0,align:"start",onSlideChange:Z,styles:e=>({indicators:{bottom:"auto",top:"calc(100% + 30px - 8px)"},indicator:{width:"8px",height:"8px",opacity:1,backgroundColor:e.colors.neutral[5],"&[data-active]":{backgroundColor:e.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}},control:{width:40,height:40,opacity:1,borderColor:u,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:u},"&:hover":{backgroundColor:u,svg:{color:"#fff"}}},controls:{padding:0,marginLeft:-60,marginRight:-60,top:"50%",transform:"translateY(-50%)"},viewport:{[e.fn.smallerThan("sm")]:{paddingLeft:8,paddingRight:8}}}),children:f.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)})},"".concat(e.url,"-").concat(t)))},C),(0,i.tZ)(CarouselProgress,{currentSlide:y,totalSlides:f.length,show:x})]})}):(0,i.BX)(s.x,{className:"flex flex-col gap-6",sx:shortsRootSx,children:[(0,i.tZ)(c.M,{spacing:8,verticalSpacing:24,cols:x?2:6,children:L.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)},"".concat(e.url,"-").concat(t)))}),T]})};var y=a("Ckaz"),Z=a("J1dS"),b=a("UldL"),v=a("8vDj"),V=a("SPK5"),C=a("RZSM"),w=a("0D4Z"),I=a("OAL+"),k=a("vaps"),L=a("4wSK"),T=(0,m.k)((e,t)=>{let{bgColor:a,hasOtherList:i}=t;return{root:{backgroundColor:a||e.colors.neutral[0],padding:"".concat((0,d.h)(24)," 0"),[e.fn.largerThan("sm")]:{padding:"".concat((0,d.h)(80)," 0")}},heading:{},playerListing:{gap:24,[e.fn.smallerThan("sm")]:{flexDirection:"column",gap:8}},heroVideo:{[e.fn.largerThan("sm")]:{width:i?"65%":"100%"}},otherListDesktop:{position:"relative",display:"flex",[e.fn.smallerThan("sm")]:{gap:8,".video-item-skeleton":{width:"45%",display:"none","&:nth-child(1),&:nth-child(2)":{display:"flex"}}},[e.fn.largerThan("sm")]:{width:"35%",flexDirection:"column",gap:24}},otherListMobile:{},videoItemSkeleton:{}}});let getTotalVideoNumber=e=>{let{totalVideos:t,applyCarousel:a,visibleCount:i,currentSlide:r,itemsPerSlide:o}=e;return t?a?Math.min((r+1)*Math.max(1,o),t):Math.min(i,t):0},renderTotalVideoText=(e,t,a)=>e({id:"common.currentOnTotalVideo",defaultMessage:"Total video {number}/{count}"},{number:t,count:a}),renderVideoTotalText=(e,t)=>{let{applyCarousel:a,showLoadMore:i,totalVideos:r,number:o,itemsPerSlide:l}=t,n=a&&"number"==typeof l&&1>=Math.ceil(r/Math.max(1,l));return(a||i)&&!n?renderTotalVideoText(e,o,r):e({id:"common.currentTotalVideo",defaultMessage:"Total video {count}"},{count:r})};var M=a("5SVV"),N=a("rIrU"),B=a("bflR");let VideoItem=e=>{let{title:t,image:a,active:r,url:o,indexNumber:l,showIndex:n,...c}=e,{formatMessage:g}=(0,h.Z)();return(0,i.tZ)(s.x,{...c,children:(0,i.BX)(V.k,{className:"pointer-event-child-none","data-event-category":"Service Connection","data-event-action":"Video List  Click","data-event-label":o,gap:(0,d.h)(8),align:"center",sx:e=>({[e.fn.smallerThan("sm")]:{flexDirection:"column",alignItems:"stretch"}}),children:[n&&(0,i.tZ)(s.x,{children:(0,i.tZ)(b.T,{sx:{width:16},size:"s4",weight:"semiBold",children:l})}),(0,i.BX)(s.x,{sx:e=>({position:"relative",[e.fn.largerThan("sm")]:{width:(0,d.h)(120)}}),children:[(0,i.tZ)(C.o,{ratio:120/68,children:(0,i.tZ)("img",{loading:"lazy",src:a,alt:t,onError:e=>{e.currentTarget.src="".concat(N.Nr,"/default-image.jpg")}})}),(0,i.tZ)(V.k,{align:"center",justify:"center",sx:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:r?"rgba(0, 0, 0, .5)":"transparent",transition:"all .2s ease"},children:r?(0,i.tZ)(b.T,{size:"s4",weight:"semiBold",color:"#fff",children:g({id:"common.playing",defaultMessage:"Playing ..."})}):(0,i.tZ)("img",{src:M.C.getAssetPath("play-circle-bg.svg"),alt:"play",loading:"lazy"})})]}),(0,i.tZ)(s.x,{sx:e=>({[e.fn.largerThan("sm")]:{width:"calc(100% - 128px)"}}),children:(0,i.tZ)(b.T,{size:"s3",weight:"semiBold",color:r?"blue.6":void 0,sx:e=>({display:"-webkit-box","-webkit-line-clamp":"2","-webkit-box-orient":"vertical",overflow:"hidden",[e.fn.largerThan("sm")]:{fontSize:(0,d.h)(14)}}),children:t})})]})})},VideoItemSkeleton=()=>(0,i.BX)(V.k,{align:"center",gap:8,className:"video-item-skeleton",sx:e=>({[e.fn.smallerThan("sm")]:{flexDirection:"column"}}),children:[(0,i.tZ)(s.x,{sx:e=>({flexShrink:0,width:"100%",[e.fn.largerThan("sm")]:{width:120}}),children:(0,i.tZ)(C.o,{ratio:16/9,children:(0,i.tZ)(w.O,{})})}),(0,i.BX)(I.K,{spacing:4,w:"100%",children:[(0,i.tZ)(w.O,{width:"100%",height:12}),(0,i.tZ)(w.O,{width:"100%",height:12}),(0,i.tZ)(w.O,{width:"70%",height:12})]})]}),FeatureVideos=e=>{let{styles:t}=e,{autoplay:a,videoList:o,loading:m,backgroundColor:p,applyShortVideo:u,applyCarousel:f,primaryColor:x}=(0,r.useContext)(l),S=useVideoLibraryRows(),{formatMessage:M}=(0,h.Z)(),N=S.length>1,{classes:B}=T({bgColor:p,hasOtherList:N},{name:"VideoLibrary",styles:t}),[W,G]=(0,r.useState)([]),[X,z]=(0,r.useState)(null),[R,_]=(0,r.useState)(a),[D,j]=(0,r.useState)(1),[P,H]=(0,r.useState)(0),O=(0,g.d)(),Y=(0,v.rZ)(),{ref:E,entry:A}=(0,L.s)({threshold:1});(0,r.useEffect)(()=>{z((null==S?void 0:S[0])?{title:o[0].videoTitle,url:o[0].urlVideo}:null),G(S)},[S,o]),(0,r.useEffect)(()=>{if(A&&R){var e,t,a;null==A||null===(a=A.target)||void 0===a||null===(t=a.querySelector("iframe"))||void 0===t||null===(e=t.contentWindow)||void 0===e||e.postMessage('{"event":"command","func":"'.concat(A.isIntersecting?"playVideo":"pauseVideo",'","args":""}'),"*")}},[A]);let K={slidesToScroll:1,slideSize:"45%",slideGap:(0,d.h)(8),withIndicators:!1,withControls:!1,align:"start",loop:!0,styles:()=>({indicators:{bottom:"auto",top:"calc(100% + 30px - 8px)"},indicator:{width:"8px",height:"8px",opacity:1,backgroundColor:Y.colors.neutral[5],"&[data-active]":{backgroundColor:Y.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}}})},F=W.length>1,U=W.length>1&&(0,i.tZ)(b.T,{size:"s4",children:renderVideoTotalText(M,{applyCarousel:!1,showLoadMore:!1,totalVideos:W.length,number:getTotalVideoNumber({totalVideos:W.length,applyCarousel:!1,visibleCount:D,currentSlide:0,itemsPerSlide:1}),itemsPerSlide:1})});if(0===S.length)return null;if(u){let e=S.map(e=>e.url).join("\x00"),t=S.map(e=>e.image?"1":"0").join(""),a="feature-videos-short-carousel-".concat(m?"loading":"loaded","-").concat(S.length,"-").concat(e,"-").concat(t),r=!O&&!m&&S.length>6;return f?(0,i.tZ)(s.x,{sx:{paddingBottom:(0,d.h)(30)},children:(0,i.tZ)(n.a,{slideSize:"16.67%",slideGap:8,breakpoints:[{maxWidth:"sm",slideSize:"16.67%",slideGap:8}],withControls:r,withIndicators:!1,loop:!0,align:"start",styles:e=>({indicators:{bottom:"auto",top:"calc(100% + 30px - 8px)"},indicator:{width:"8px",height:"8px",opacity:1,backgroundColor:e.colors.neutral[5],"&[data-active]":{backgroundColor:e.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}},control:{width:40,height:40,opacity:1,borderColor:x,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:x},"&:hover":{backgroundColor:x,svg:{color:"#fff"}}},controls:{padding:0,marginLeft:-60,marginRight:-60,top:"50%",transform:"translateY(-50%)"},viewport:{[e.fn.smallerThan("sm")]:{paddingLeft:8,paddingRight:8}}}),children:S.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)})},"".concat(e.url,"-").concat(t)))},a)}):(0,i.tZ)(c.M,{spacing:8,verticalSpacing:24,cols:O?2:6,children:S.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)},"".concat(e.url,"-").concat(t)))})}let q=(0,i.BX)(V.k,{className:B.playerListing,children:[(0,i.tZ)(s.x,{className:B.heroVideo,children:(0,i.tZ)(C.o,{ratio:16/9,children:(0,i.tZ)(w.O,{})})}),N&&(0,i.tZ)(s.x,{className:B.otherListDesktop,children:[,,,,].fill("").map((e,t)=>(0,i.tZ)(VideoItemSkeleton,{},String(t)))})]}),J=W.length>0?(0,i.BX)(V.k,{className:B.playerListing,ref:E,children:[X&&(0,i.BX)(I.K,{className:B.heroVideo,spacing:(0,d.h)(16),children:[(0,i.tZ)(y.S,{url:X.url||"",autoPlay:R},X.url),!F&&(0,i.tZ)(Z.H,{tag:"h3",children:X.title})]}),F&&(O?(0,i.BX)(s.x,{sx:{paddingBottom:(0,d.h)(30)},children:[(0,i.tZ)(n.a,{...K,onSlideChange:H,children:W.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)(VideoItem,{title:e.title,url:e.url,image:e.image,active:e.url===(null==X?void 0:X.url),onClick:()=>{_(!0),z(e)},sx:{cursor:"pointer"}})},String(t)))}),(0,i.tZ)(CarouselProgress,{currentSlide:P,totalSlides:W.length,show:O})]}):(0,i.BX)(s.x,{className:B.otherListDesktop,children:[U,(0,i.tZ)(s.x,{sx:e=>({[e.fn.largerThan("sm")]:{position:"absolute",top:(0,d.h)(30),left:0,right:0,bottom:0}}),children:(0,i.tZ)(k.x,{h:"100%",type:"always",offsetScrollbars:!0,scrollbarSize:8,children:(0,i.tZ)(V.k,{sx:{flexDirection:"column",gap:(0,d.h)(24)},children:W.map((e,t)=>(0,i.tZ)(VideoItem,{indexNumber:t+1,showIndex:!O,title:e.title,url:e.url,image:e.image,active:e.url===(null==X?void 0:X.url),onClick:()=>{j(t+1),_(!0),z(e)},sx:{cursor:"pointer"}},String(t)))})})})]}))]}):null;return m?q:J};var W=a("gHFm"),G=(0,m.k)((e,t)=>{let{bgColor:a}=t;return{root:{backgroundColor:a||e.colors.neutral[0],padding:"".concat((0,d.h)(24)," 0"),".mantine-VideoItem__VideoItem-title,.mantine-VideoItem__ShortsItem-title":{[e.fn.largerThan("sm")]:{fontSize:(0,d.h)(14)}},[e.fn.largerThan("sm")]:{padding:"".concat((0,d.h)(80)," 0")}},heading:{}}});let videoLibraryGapClass=e=>e?"gap-y-4 md:gap-y-6 gap-x-2":"gap-6",videoLibraryGapRem=e=>(0,d.h)(24);var X=a("iuhU");let VideoLibraryIcon=e=>{let{src:t,alt:a="",isNestle:r}=e;return(0,i.tZ)("div",{className:(0,X.default)("flex h-16 w-full items-center md:h-20 md:justify-start",r?"justify-center":"justify-start"),children:(0,i.tZ)("img",{src:t,alt:a,className:(0,X.default)("h-full max-h-16 w-full object-contain md:max-h-20 md:object-left",r?"object-center":"object-left"),loading:"lazy"})})},VideoLibraryIconAbove=e=>{let{icon:t,alt:a,isNestle:r,children:o}=e;return t||o?(0,i.BX)("div",{className:"flex flex-col gap-6 md:gap-10",children:[t&&(0,i.tZ)(VideoLibraryIcon,{src:t,alt:a,isNestle:r}),o]}):null},VideoLibrarySectionHeader=e=>{let{icon:t,title:a,description:r,isNestle:o,className:l,iconAlt:n=""}=e;return t||a||r?(0,i.BX)("div",{className:(0,X.default)("flex flex-col gap-2",l),children:[(0,i.tZ)(VideoLibraryIconAbove,{icon:t,alt:n,isNestle:o,children:a}),r&&(0,i.tZ)(b.T,{size:"p3",c:"gray.6",children:r})]}):null},WrapperSection=e=>{let{styles:t,className:a,children:o,...n}=e,{applyH1:c,title:h,description:g,backgroundColor:m,applyShortVideo:p,icon:u,isNestle:f}=(0,r.useContext)(l),{classes:x,cx:S}=G({bgColor:m},{name:"VideoLibrary",styles:t});return(0,i.tZ)(s.x,{...n,className:S(a,x.root),children:(0,i.tZ)(W.W,{children:(0,i.BX)(I.K,{spacing:8,sx:e=>({gap:videoLibraryGapRem(p),[e.fn.largerThan("sm")]:{gap:(0,d.h)(40)}}),children:[(0,i.tZ)(VideoLibrarySectionHeader,{icon:u,iconAlt:h,isNestle:f,description:g,title:h?(0,i.tZ)(b.T,{size:"h2",as:c?"h1":"h2",className:x.heading,children:h}):void 0}),o]})})})},FeatureLayout=()=>{let{applyShortVideo:e,videoList:t}=(0,r.useContext)(l);return 0===t.length?null:(0,i.tZ)(WrapperSection,{children:e?(0,i.tZ)(FeatureShorts,{}):(0,i.tZ)(FeatureVideos,{})})},GridLayout=()=>{let{applyShortVideo:e,applyCarousel:t,loading:a,primaryColor:o}=(0,r.useContext)(l),d=useVideoLibraryRows(),c=(0,g.d)(),m=!t&&c?4:t?d.length:e?12:8,p=!t&&c?4:t?d.length:e?12:8,{formatMessage:u}=(0,h.Z)(),[f,x]=(0,r.useState)(0),S=(0,r.useMemo)(()=>d.map(e=>e.url).join("\x00"),[d]),y=(0,r.useMemo)(()=>d.map(e=>e.image?"1":"0").join(""),[d]),Z="grid-carousel-".concat(e?"short":"long","-").concat(a?"loading":"loaded","-").concat(d.length,"-").concat(S,"-").concat(y),{visibleCount:b,loadMore:v,showSeeMore:V}=useVideoLibraryLoadMore({totalItems:d.length,initialVisible:m,loadMoreStep:p,resetKey:S,desktopOnly:!1});if(!d.length)return null;let C=d.slice(0,b),w=videoLibraryGapClass(e),I=V&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:v,children:u({id:"videoLibrary.grid.seeMore",defaultMessage:"Xem th\xeam"})});if(t&&e){let e=c?C.reduce((e,t,a,i)=>(a%2==0&&e.push(i.slice(a,a+2)),e),[]):C.map(e=>[e]),t=!c&&!a&&e.length>6;return(0,i.BX)(WrapperSection,{children:[(0,i.BX)(s.x,{sx:e=>({[e.fn.smallerThan("sm")]:{marginLeft:-16,marginRight:-16}}),children:[(0,i.tZ)(n.a,{slideSize:"16.67%",slideGap:8,breakpoints:[{maxWidth:"sm",slideSize:e.length<=1?"100%":"45%",slideGap:8}],withControls:t,withIndicators:!1,loop:!0,align:"start",onSlideChange:x,styles:e=>({indicators:{bottom:"auto",top:"calc(100% + 30px - 8px)"},indicator:{width:"8px",height:"8px",opacity:1,backgroundColor:e.colors.neutral[5],"&[data-active]":{backgroundColor:e.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}},control:{width:40,height:40,opacity:1,borderColor:o,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:o},"&:hover":{backgroundColor:o,svg:{color:"#fff"}}},controls:{padding:0,marginLeft:-60,marginRight:-60,top:"50%",transform:"translateY(-50%)"},viewport:{[e.fn.smallerThan("sm")]:{paddingLeft:16,paddingRight:16}}}),children:e.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1",w),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)},"".concat(e.url,"-").concat(t,"-").concat(a)))})},String(t)))},Z),(0,i.tZ)(CarouselProgress,{currentSlide:f,totalSlides:e.length,show:c,sideSpacing:16})]}),I]})}if(t&&!e){let e=C.length<=1?"100%":"85%",t=!c&&!a&&C.length>4;return(0,i.BX)(WrapperSection,{children:[(0,i.BX)(s.x,{sx:e=>({[e.fn.smallerThan("sm")]:{marginLeft:-16,marginRight:-16}}),children:[(0,i.tZ)(n.a,{slideSize:"25%",slideGap:24,breakpoints:[{maxWidth:"sm",slideSize:e,slideGap:16}],withControls:t,withIndicators:!1,loop:!0,align:"start",onSlideChange:x,styles:e=>({indicators:{bottom:"auto",top:"calc(100% + 30px - 8px)"},indicator:{width:"8px",height:"8px",opacity:1,backgroundColor:e.colors.neutral[5],"&[data-active]":{backgroundColor:e.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}},control:{width:40,height:40,opacity:1,borderColor:o,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:o},"&:hover":{backgroundColor:o,svg:{color:"#fff"}}},controls:{padding:0,marginLeft:-60,marginRight:-60,top:"50%",transform:"translateY(-50%)"},viewport:{[e.fn.smallerThan("sm")]:{paddingLeft:16,paddingRight:16}}}),children:C.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!1)})},"".concat(e.url,"-").concat(t)))},Z),(0,i.tZ)(CarouselProgress,{currentSlide:f,totalSlides:C.length,show:c,sideSpacing:16})]}),I]})}return(0,i.BX)(WrapperSection,{children:[(0,i.tZ)("div",{className:(0,X.default)(e?"grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-6":"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",w),children:C.map((t,a)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(t,e)},"".concat(t.url,"-").concat(a)))}),I]})};var z=a("Liyb");let ListLayout=()=>{let{applyCarousel:e,loading:t,adUnitPath:a,primaryColor:o}=(0,r.useContext)(l),d=useVideoLibraryRows(),c=(0,g.d)(),m=!!a,p=e?d.length:c?6:m?6:12,u=e?d.length:c?6:m?6:12,{formatMessage:f}=(0,h.Z)(),[x,S]=(0,r.useState)(0),y=c?4:6,Z=(0,r.useMemo)(()=>d.map(e=>e.url).join("\x00"),[d]),b=(0,r.useMemo)(()=>d.map(e=>"".concat(e.url,"|").concat(e.image?"1":"0","|").concat(e.title)).join("\x00"),[d]),[v,V]=(0,r.useState)(()=>Math.min(p,d.length));(0,r.useEffect)(()=>{V(Math.min(p,d.length))},[Z,d.length,p]),(0,r.useEffect)(()=>{S(0)},[b,y]);let C=(0,r.useCallback)(()=>{V(e=>Math.min(e+u,d.length))},[u,d.length]);if(!d.length)return null;let w=d.slice(0,v),I=!e&&d.length>p&&v<d.length,k=videoLibraryGapClass(!1),L={layout:"horizon",useVideoTypeThumbnail:!0},T=I&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:C,wrapperClassName:"flex justify-center md:justify-start",children:f({id:"videoLibrary.grid.seeMore",defaultMessage:"Xem th\xeam"})}),M=!!T&&m&&c,N={sx:e=>({".video-info":{justifyContent:"center"},".mantine-VideoItem__VideoItem-inner":{gap:8},".mantine-VideoItem__VideoItem-thumb":{width:120},".mantine-VideoItem__VideoItem-overlay":{svg:{width:32,height:32}},[e.fn.smallerThan("sm")]:{marginLeft:0,marginRight:0}})};if(e){let e=function(e,t){let a=[];for(let i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a}(w,y),r=e.length<=1?"100%":"85%",l=!c&&!t&&(m?e.length>1:e.length>2),carouselStyles=e=>{var t,a;let i=e.colors,r=null!==(a=null===(t=i.neutral)||void 0===t?void 0:t[5])&&void 0!==a?a:e.colors.gray[5];return{indicators:{bottom:"auto",top:"calc(100% + 30px - 8px)"},indicator:{width:"8px",height:"8px",opacity:1,backgroundColor:r,"&[data-active]":{backgroundColor:e.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}},control:{width:40,height:40,opacity:1,borderColor:o,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:o},"&:hover":{backgroundColor:o,svg:{color:"#fff"}}},controls:{padding:0,marginLeft:-60,marginRight:-60,top:"50%",transform:"translateY(-50%)"},viewport:{[e.fn.smallerThan("sm")]:{paddingLeft:16,paddingRight:16}}}};return(0,i.BX)(WrapperSection,{...N,children:[m?(0,i.BX)("div",{className:(0,X.default)("grid grid-cols-1 lg:grid-cols-[1fr_300px]",k),children:[(0,i.BX)(s.x,{sx:e=>({[e.fn.smallerThan("sm")]:{marginLeft:-16,marginRight:-16}}),children:[(0,i.tZ)(n.a,{slideSize:"100%",slideGap:24,breakpoints:[{maxWidth:"sm",slideSize:r,slideGap:24}],withControls:l,withIndicators:!1,loop:!0,align:"start",onSlideChange:S,styles:carouselStyles,children:e.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1",k),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{...L,data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t,"-").concat(a)))})},String(t)))}),(0,i.tZ)(CarouselProgress,{currentSlide:x,totalSlides:e.length,show:c,sideSpacing:16})]}),M&&T,(0,i.tZ)(z.A,{adUnitPath:a,size:[[300,250],[300,600]],divId:"article-top-banner-desktop",pos:["TopBanner"]})]}):(0,i.BX)(s.x,{sx:e=>({[e.fn.smallerThan("sm")]:{marginLeft:-16,marginRight:-16}}),children:[(0,i.tZ)(n.a,{slideSize:"50%",slideGap:24,breakpoints:[{maxWidth:"sm",slideSize:r,slideGap:24}],withControls:l,withIndicators:!1,loop:!0,align:"start",onSlideChange:S,styles:carouselStyles,children:e.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1",k),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{...L,data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t,"-").concat(a)))})},String(t)))}),(0,i.tZ)(CarouselProgress,{currentSlide:x,totalSlides:e.length,show:c,sideSpacing:16})]}),!M&&T]})}return(0,i.BX)(WrapperSection,{...N,children:[m?(0,i.BX)("div",{className:(0,X.default)("grid grid-cols-1 lg:grid-cols-[1fr_300px]",k),children:[(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1",k),children:w.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{...L,data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t)))}),M&&T,(0,i.tZ)(z.A,{adUnitPath:a,size:[[300,250],[300,600]],divId:"article-top-banner-desktop",pos:["TopBanner"]})]}):(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1 sm:grid-cols-2",k),children:w.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{...L,data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t)))}),!M&&T]})};function SplitGridLayout_chunkVideos(e,t){let a=[];for(let i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a}let SplitGridLayout=()=>{let{title:e,description:t,applyH1:a,backgroundColor:o,applyShortVideo:c,applyCarousel:m,loading:p,primaryColor:u,icon:f,isNestle:x}=(0,r.useContext)(l),S=useVideoLibraryRows(),y=(0,g.d)(),Z=y?m?S.length:4:m?S.length:c?9:12,v=y?m?S.length:4:m?S.length:c?12:8,{formatMessage:V}=(0,h.Z)(),[C,w]=(0,r.useState)(0),I=(0,r.useMemo)(()=>S.map(e=>e.url).join("\x00"),[S]),k=(0,r.useMemo)(()=>S.map(e=>e.image?"1":"0").join(""),[S]),L="split-grid-carousel-".concat(c?"short":"long","-").concat(p?"loading":"loaded","-").concat(S.length,"-").concat(I,"-").concat(k),{visibleCount:T,loadMore:M,showSeeMore:N}=useVideoLibraryLoadMore({totalItems:S.length,initialVisible:Z,loadMoreStep:v,resetKey:I,desktopOnly:!1});if(!S.length)return null;let B=a?"h1":"h2",G=(0,X.default)("text-[32px] leading-[42px] md:text-[40px] md:leading-[52px]"),splitGridHeaderBlock=a=>(0,i.tZ)(VideoLibrarySectionHeader,{icon:f,iconAlt:e,isNestle:x,description:t,className:a,title:e?(0,i.tZ)("div",{className:"flex flex-col gap-2 md:flex-row md:items-center md:justify-between",children:(0,i.tZ)(b.T,{as:B,size:"h2",className:G,children:e})}):void 0}),z=S.slice(0,T),R=z.slice(0,4),_=z.slice(4),D=z.slice(0,3),j=z.slice(3),P=videoLibraryGapClass(c);if(m){let carouselCommonStyles=e=>({indicators:{bottom:"auto",top:"calc(100% + 30px - 8px)"},indicator:{width:"8px",height:"8px",opacity:1,backgroundColor:e.colors.neutral[5],"&[data-active]":{backgroundColor:e.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}},control:{width:40,height:40,opacity:1,borderColor:u,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:u},"&:hover":{backgroundColor:u,svg:{color:"#fff"}}},controls:{padding:0,marginLeft:-60,marginRight:-60,top:"50%",transform:"translateY(-50%)"},viewport:{[e.fn.smallerThan("sm")]:{paddingLeft:16,paddingRight:16}}}),e=!y&&!p&&z.length>3,t=!y&&!p&&SplitGridLayout_chunkVideos(z,4).length>1,carouselWrapperSx=e=>({[e.fn.smallerThan("sm")]:{marginLeft:-16,marginRight:-16},".mantine-VideoItem__VideoItem-title,.mantine-VideoItem__ShortsItem-title":{[e.fn.largerThan("sm")]:{fontSize:(0,d.h)(14)}}});return(0,i.tZ)(s.x,{className:"py-6 md:py-20",style:{backgroundColor:o||"#f5f5f5"},sx:e=>({".mantine-VideoItem__VideoItem-title,.mantine-VideoItem__ShortsItem-title":{[e.fn.largerThan("sm")]:{fontSize:(0,d.h)(14)}}}),children:(0,i.tZ)(W.W,{children:(0,i.BX)("div",{className:(0,X.default)("grid grid-cols-1 lg:grid-cols-2","gap-y-6 lg:gap-x-10"),children:[splitGridHeaderBlock("lg:pr-10"),c?(0,i.BX)(s.x,{sx:carouselWrapperSx,children:[(0,i.tZ)(n.a,{slideSize:"33.33%",slideGap:8,breakpoints:[{maxWidth:"sm",slideSize:"45%",slideGap:8}],withControls:e,withIndicators:!1,loop:!0,align:"start",onSlideChange:w,styles:carouselCommonStyles,children:(y?SplitGridLayout_chunkVideos(z,2):z.map(e=>[e])).map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1",P),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)},"".concat(e.url,"-").concat(t,"-").concat(a)))})},String(t)))},L),(0,i.tZ)(CarouselProgress,{currentSlide:C,totalSlides:y?SplitGridLayout_chunkVideos(z,2).length:z.length,show:y,sideSpacing:16})]}):(0,i.tZ)(s.x,{sx:carouselWrapperSx,children:(()=>{let e=z.length<=1?"100%":"85%";return(0,i.BX)(i.HY,{children:[(0,i.tZ)(n.a,{slideSize:"100%",slideGap:16,breakpoints:[{maxWidth:"sm",slideSize:e,slideGap:16}],withControls:t,withIndicators:!1,loop:!0,align:"start",onSlideChange:w,styles:carouselCommonStyles,children:(y?z.map(e=>[e]):SplitGridLayout_chunkVideos(z,4)).map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,X.default)(y?"grid grid-cols-1 gap-4":"grid grid-cols-2 grid-rows-2",!y&&P),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t,"-").concat(a)))})},String(t)))},L),(0,i.tZ)(CarouselProgress,{currentSlide:C,totalSlides:y?z.length:SplitGridLayout_chunkVideos(z,4).length,show:y,sideSpacing:16})]})})()})]})})})}let H=splitGridHeaderBlock("lg:col-span-3");return y&&!m?(0,i.tZ)("section",{className:"py-6 md:py-20",style:{backgroundColor:o||"#f5f5f5"},children:(0,i.tZ)(W.W,{children:(0,i.BX)("div",{className:(0,X.default)("flex flex-col",P),children:[H,(0,i.tZ)("div",{className:(0,X.default)(c?"grid grid-cols-2":"grid grid-cols-1",P),children:z.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t)))}),N&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:M,children:V({id:"videoLibrary.splitGrid.seeMore",defaultMessage:"Xem th\xeam"})})]})})}):(0,i.tZ)(s.x,{className:"py-6 md:py-20",style:{backgroundColor:o||"#f5f5f5"},sx:e=>({".mantine-VideoItem__VideoItem-title,.mantine-VideoItem__ShortsItem-title":{[e.fn.largerThan("sm")]:{fontSize:(0,d.h)(14)}}}),children:(0,i.tZ)(W.W,{children:(0,i.BX)("div",{className:(0,X.default)("flex flex-col",P),children:[c?(0,i.BX)(i.HY,{children:[(0,i.BX)("div",{className:(0,X.default)("grid grid-cols-1 gap-y-4 md:gap-y-6 lg:grid-cols-6 lg:gap-x-10"),children:[H,(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1 sm:grid-cols-2","gap-y-4 md:gap-y-6 gap-x-2","lg:col-span-3 lg:grid-cols-3"),children:D.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t)))})]}),j.length>0&&(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6",P),children:j.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t+3)))})]}):(0,i.BX)(i.HY,{children:[(0,i.BX)("div",{className:(0,X.default)("grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-10"),children:[splitGridHeaderBlock(),(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1 sm:grid-cols-2",P),children:R.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t)))})]}),_.length>0&&(0,i.tZ)("div",{className:(0,X.default)("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",P),children:_.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t+4)))})]}),N&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:M,children:V({id:"videoLibrary.splitGrid.seeMore",defaultMessage:"Xem th\xeam"})})]})})})},VideoLibrary=e=>{let{sessionProps:t,autoPlay:a=!1,applyH1:n,adUnitPath:d,primaryColor:s,isNestle:c}=e,{title:h,description:g,videoLayout:m,videoList:p,applyShortVideo:u,applyCarousel:f,backgroundColor:x,icon:S}=t,[y,Z]=(0,r.useState)(!0),[b,v]=(0,r.useState)(p.map(e=>({title:e.videoTitle,url:e.urlVideo}))),V=(0,r.useCallback)(async()=>{try{Z(!0);let e=await (0,B.$W)(p);v(e||[])}catch(e){console.log(e),v([])}finally{Z(!1)}},[p]);return(0,r.useEffect)(()=>{p.length>0&&V()},[p.length,V]),(0,i.tZ)(l.Provider,{value:{applyH1:n,title:h,description:g,autoplay:a,videoList:p,videoData:b,applyShortVideo:u,applyCarousel:f,backgroundColor:x,loading:y,adUnitPath:d,primaryColor:s,icon:S,isNestle:c},children:m===o.CY.Feature?(0,i.tZ)(FeatureLayout,{}):m===o.CY.SplitVideoGrid?(0,i.tZ)(SplitGridLayout,{}):m===o.CY.Grid?(0,i.tZ)(GridLayout,{}):m===o.CY.List?(0,i.tZ)(ListLayout,{}):null})}}}]);