"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9931],{MAiV:function(e,t,a){a.d(t,{y:function(){return VideoLibrary}});var i=a("BGKE"),r=a("q1tI"),l=a("rEaw");let o=(0,r.createContext)({});var n=a("6HDN"),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:l=0}=e;if(!r||a<=1)return null;let o=(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:l,marginRight:l}),children:(0,i.tZ)(s.x,{h:"100%",sx:e=>({width:"".concat(o,"%"),backgroundColor:e.colors.neutral[4],borderRadius:0,transition:"width .2s ease"})})})};var u=a("G5av"),f=a("iZ8j");let SeeMoreBtnWrapper=e=>{let{onClick:t,children:a,wrapperClassName:l="flex justify-center md:justify-start",color:n}=e,{primaryColor:d}=(0,r.useContext)(o),s=(0,g.d)();return(0,i.tZ)("div",{className:l,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("Sin0");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:l,desktopOnly:o=!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(o&&n){c(t);return}c(d)},[o,n,t,d,l]);let h=(0,r.useCallback)(()=>{c(e=>Math.min(e+i,t))},[i,t]),m=t>a&&s<t&&!(o&&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)(o);return(0,r.useMemo)(()=>e&&0===t.length&&(null==a?void 0:a.length)?a.map(spotlightToVideoItemDataStub):t,[e,t,a])};var y=a("7ihh");let VideoItemWrapper=e=>{let{loading:t}=(0,r.useContext)(o);return(0,i.tZ)(y.V,{...e,loading:t})},FeatureShorts=e=>{let{styles:t,...a}=e,{applyCarousel:l,loading:m,primaryColor:u}=(0,r.useContext)(o),f=useVideoLibraryRows(),x=(0,g.d)(),{formatMessage:y}=(0,h.Z)(),[v,S]=(0,r.useState)(0),{classes:Z}=p(void 0,{name:"ShortReelList",styles:t}),b=(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(b,"-").concat(V),{visibleCount:w,loadMore:I,showSeeMore:k}=useVideoLibraryLoadMore({totalItems:f.length,initialVisible:12,loadMoreStep:12,resetKey:b,desktopOnly:!0}),T=f.slice(0,w),L=k&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:I,children:y({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 l?(0,i.tZ)(s.x,{className:"flex flex-col gap-6",sx:shortsRootSx,children:(0,i.BX)(s.x,{className:Z.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:S,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:v,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:T.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)},"".concat(e.url,"-").concat(t)))}),L]})};var v=a("gPi1"),S=a("iHoF"),Z=a("F/Hd"),b=a("8vDj"),V=a("SPK5"),C=a("RZSM"),w=a("0D4Z"),I=a("OAL+"),k=a("vaps"),T=a("4wSK"),L=(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:l}=e;return t?a?Math.min((r+1)*Math.max(1,l),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:l,itemsPerSlide:o}=t,n=a&&"number"==typeof o&&1>=Math.ceil(r/Math.max(1,o));return(a||i)&&!n?renderTotalVideoText(e,l,r):e({id:"common.currentTotalVideo",defaultMessage:"Total video {count}"},{count:r})};var M=a("gC6A"),N=a("09QT"),B=a("oQBk"),W=a("rIrU");function normalizePreviewImageUrl(e){if(e)return e.replace(/&amp;/g,"&")}let fetchVideoPreview=async e=>{if(!e.length)return[];let t=function(e,t){let a=[];for(let i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a}(e,10),a=await Promise.all(t.map(async e=>{let t=await (0,N.d)(B.y.TOGETHER.FETCH_MULTI_PREVIEW,{method:"POST",data:{links:e.map(e=>e.urlVideo),update:!1}},"together"),a=function(e){if(null==e)return[];if(Array.isArray(e))return e;if("object"==typeof e){if(Array.isArray(e.previews))return e.previews;if(Array.isArray(e.data))return e.data;if(Array.isArray(e.results))return e.results}return[]}(null==t?void 0:t.data);return e.map((e,t)=>(function(e,t){if(!e||"object"!=typeof e)return{title:t.videoTitle||"",url:t.urlVideo};if(e.preview&&"object"==typeof e.preview){let a=e.preview;return{title:t.videoTitle||a.title||"",url:t.urlVideo,image:normalizePreviewImageUrl(a.image)}}return e.data?{...e.data,url:t.urlVideo,title:t.videoTitle||e.title||"",image:normalizePreviewImageUrl("string"==typeof e.data.image?e.data.image:void 0)}:{...e,url:t.urlVideo,title:t.videoTitle||("string"==typeof e.title?e.title:"")||""}})(function(e,t,a){let i=t.urlVideo,r=e[a];if(r&&"object"==typeof r&&r.link===i)return r;let l=e.find(e=>"object"==typeof e&&e&&e.link===i);return null!=l?l:r}(a,e,t),e))}));return[].concat(...a)},VideoItem=e=>{let{title:t,image:a,active:r,url:l,indexNumber:o,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":l,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)(Z.T,{sx:{width:16},size:"s4",weight:"semiBold",children:o})}),(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(W.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)(Z.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)(Z.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:l,loading:m,backgroundColor:p,applyShortVideo:u,applyCarousel:f,primaryColor:x}=(0,r.useContext)(o),y=useVideoLibraryRows(),{formatMessage:M}=(0,h.Z)(),N=y.length>1,{classes:B}=L({bgColor:p,hasOtherList:N},{name:"VideoLibrary",styles:t}),[W,z]=(0,r.useState)([]),[X,G]=(0,r.useState)(null),[R,_]=(0,r.useState)(a),[D,P]=(0,r.useState)(1),[j,E]=(0,r.useState)(0),O=(0,g.d)(),A=(0,b.rZ)(),{ref:Y,entry:F}=(0,T.s)({threshold:1});(0,r.useEffect)(()=>{G((null==y?void 0:y[0])?{title:l[0].videoTitle,url:l[0].urlVideo}:null),z(y)},[y,l]),(0,r.useEffect)(()=>{if(F&&R){var e,t,a;null==F||null===(a=F.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(F.isIntersecting?"playVideo":"pauseVideo",'","args":""}'),"*")}},[F]);let H={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:A.colors.neutral[5],"&[data-active]":{backgroundColor:A.colors.blue[7]},".mantine-Carousel-control[data-inactive]":{opacity:0,cursor:"default"}}})},K=W.length>1,U=W.length>1&&(0,i.tZ)(Z.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===y.length)return null;if(u){let e=y.map(e=>e.url).join("\x00"),t=y.map(e=>e.image?"1":"0").join(""),a="feature-videos-short-carousel-".concat(m?"loading":"loaded","-").concat(y.length,"-").concat(e,"-").concat(t),r=!O&&!m&&y.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:y.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:y.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)))})]}),Q=W.length>0?(0,i.BX)(V.k,{className:B.playerListing,ref:Y,children:[X&&(0,i.BX)(I.K,{className:B.heroVideo,spacing:(0,d.h)(16),children:[(0,i.tZ)(v.S,{url:X.url||"",autoPlay:R},X.url),!K&&(0,i.tZ)(S.H,{tag:"h3",children:X.title})]}),K&&(O?(0,i.BX)(s.x,{sx:{paddingBottom:(0,d.h)(30)},children:[(0,i.tZ)(n.a,{...H,onSlideChange:E,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),G(e)},sx:{cursor:"pointer"}})},String(t)))}),(0,i.tZ)(CarouselProgress,{currentSlide:j,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:()=>{P(t+1),_(!0),G(e)},sx:{cursor:"pointer"}},String(t)))})})})]}))]}):null;return m?q:Q};var z=a("gHFm"),X=(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),WrapperSection=e=>{let{styles:t,className:a,children:l,...n}=e,{applyH1:c,title:h,description:g,backgroundColor:m,applyShortVideo:p}=(0,r.useContext)(o),{classes:u,cx:f}=X({bgColor:m},{name:"VideoLibrary",styles:t});return(0,i.tZ)(s.x,{...n,className:f(a,u.root),children:(0,i.tZ)(z.W,{children:(0,i.BX)(I.K,{spacing:8,sx:e=>({gap:videoLibraryGapRem(p),[e.fn.largerThan("sm")]:{gap:(0,d.h)(40)}}),children:[(h||g)&&(0,i.BX)(I.K,{sx:{gap:(0,d.h)(8)},children:[h&&(0,i.tZ)(Z.T,{size:"h2",as:c?"h1":"h2",className:u.heading,children:h}),g&&(0,i.tZ)(Z.T,{size:"p3",c:"gray.6",children:g})]}),l]})})})},FeatureLayout=()=>{let{applyShortVideo:e,videoList:t}=(0,r.useContext)(o);return 0===t.length?null:(0,i.tZ)(WrapperSection,{children:e?(0,i.tZ)(FeatureShorts,{}):(0,i.tZ)(FeatureVideos,{})})};var G=a("iuhU");let GridLayout=()=>{let{applyShortVideo:e,applyCarousel:t,loading:a,primaryColor:l}=(0,r.useContext)(o),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),y=(0,r.useMemo)(()=>d.map(e=>e.url).join("\x00"),[d]),v=(0,r.useMemo)(()=>d.map(e=>e.image?"1":"0").join(""),[d]),S="grid-carousel-".concat(e?"short":"long","-").concat(a?"loading":"loaded","-").concat(d.length,"-").concat(y,"-").concat(v),{visibleCount:Z,loadMore:b,showSeeMore:V}=useVideoLibraryLoadMore({totalItems:d.length,initialVisible:m,loadMoreStep:p,resetKey:y,desktopOnly:!1});if(!d.length)return null;let C=d.slice(0,Z),w=videoLibraryGapClass(e),I=V&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:b,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:l,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:l},"&:hover":{backgroundColor:l,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,G.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)))},S),(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:l,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:l},"&:hover":{backgroundColor:l,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)))},S),(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,G.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 R=a("taNi");let ListLayout=()=>{let{applyCarousel:e,loading:t,adUnitPath:a,primaryColor:l}=(0,r.useContext)(o),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,y]=(0,r.useState)(0),v=c?4:6,S=(0,r.useMemo)(()=>d.map(e=>e.url).join("\x00"),[d]),Z=(0,r.useMemo)(()=>d.map(e=>"".concat(e.url,"|").concat(e.image?"1":"0","|").concat(e.title)).join("\x00"),[d]),[b,V]=(0,r.useState)(()=>Math.min(p,d.length));(0,r.useEffect)(()=>{V(Math.min(p,d.length))},[S,d.length,p]),(0,r.useEffect)(()=>{y(0)},[Z,v]);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,b),I=!e&&d.length>p&&b<d.length,k=videoLibraryGapClass(!1),T={layout:"horizon",useSquareRatioThumbnail:!0},L=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=!!L&&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,v),r=e.length<=1?"100%":"85%",o=!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:l,transition:"all .2s ease",svg:{width:"18px !important",height:"18px !important",color:l},"&:hover":{backgroundColor:l,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,G.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:o,withIndicators:!1,loop:!0,align:"start",onSlideChange:y,styles:carouselStyles,children:e.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1",k),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{...T,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&&L,(0,i.tZ)(R.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:o,withIndicators:!1,loop:!0,align:"start",onSlideChange:y,styles:carouselStyles,children:e.map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1",k),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{...T,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&&L]})}return(0,i.BX)(WrapperSection,{...N,children:[m?(0,i.BX)("div",{className:(0,G.default)("grid grid-cols-1 lg:grid-cols-[1fr_300px]",k),children:[(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1",k),children:w.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{...T,data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t)))}),M&&L,(0,i.tZ)(R.A,{adUnitPath:a,size:[[300,250],[300,600]],divId:"article-top-banner-desktop",pos:["TopBanner"]})]}):(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1 sm:grid-cols-2",k),children:w.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{...T,data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t)))}),!M&&L]})};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:l,applyShortVideo:c,applyCarousel:m,loading:p,primaryColor:u}=(0,r.useContext)(o),f=useVideoLibraryRows(),x=(0,g.d)(),y=x?m?f.length:4:m?f.length:c?9:12,v=x?m?f.length:4:m?f.length:c?12:8,{formatMessage:S}=(0,h.Z)(),[b,V]=(0,r.useState)(0),C=(0,r.useMemo)(()=>f.map(e=>e.url).join("\x00"),[f]),w=(0,r.useMemo)(()=>f.map(e=>e.image?"1":"0").join(""),[f]),I="split-grid-carousel-".concat(c?"short":"long","-").concat(p?"loading":"loaded","-").concat(f.length,"-").concat(C,"-").concat(w),{visibleCount:k,loadMore:T,showSeeMore:L}=useVideoLibraryLoadMore({totalItems:f.length,initialVisible:y,loadMoreStep:v,resetKey:C,desktopOnly:!1});if(!f.length)return null;let M=a?"h1":"h2",N=f.slice(0,k),B=N.slice(0,4),W=N.slice(4),X=N.slice(0,3),R=N.slice(3),_=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}}}),r=!x&&!p&&N.length>3,o=!x&&!p&&SplitGridLayout_chunkVideos(N,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:l||"#f5f5f5"},sx:e=>({".mantine-VideoItem__VideoItem-title,.mantine-VideoItem__ShortsItem-title":{[e.fn.largerThan("sm")]:{fontSize:(0,d.h)(14)}}}),children:(0,i.tZ)(z.W,{children:(0,i.BX)("div",{className:(0,G.default)("grid grid-cols-1 lg:grid-cols-2","gap-y-6 lg:gap-x-10"),children:[(0,i.BX)("div",{className:(0,G.default)("flex flex-col gap-2","lg:pr-10"),children:[(0,i.tZ)("div",{className:"flex flex-col gap-2 md:flex-row md:items-center md:justify-between",children:e&&(0,i.tZ)(Z.T,{as:a?"h1":"h2",size:"h2",className:(0,G.default)("text-[32px] leading-[42px] md:text-[40px] md:leading-[52px]"),children:e})}),t&&(0,i.tZ)(Z.T,{size:"p3",c:"gray.6",children:t})]}),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:r,withIndicators:!1,loop:!0,align:"start",onSlideChange:V,styles:carouselCommonStyles,children:(x?SplitGridLayout_chunkVideos(N,2):N.map(e=>[e])).map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1",_),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!0)},"".concat(e.url,"-").concat(t,"-").concat(a)))})},String(t)))},I),(0,i.tZ)(CarouselProgress,{currentSlide:b,totalSlides:x?SplitGridLayout_chunkVideos(N,2).length:N.length,show:x,sideSpacing:16})]}):(0,i.tZ)(s.x,{sx:carouselWrapperSx,children:(()=>{let e=N.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:o,withIndicators:!1,loop:!0,align:"start",onSlideChange:V,styles:carouselCommonStyles,children:(x?N.map(e=>[e]):SplitGridLayout_chunkVideos(N,4)).map((e,t)=>(0,i.tZ)(n.a.Slide,{children:(0,i.tZ)("div",{className:(0,G.default)(x?"grid grid-cols-1 gap-4":"grid grid-cols-2 grid-rows-2",!x&&_),children:e.map((e,a)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,!1)},"".concat(e.url,"-").concat(t,"-").concat(a)))})},String(t)))},I),(0,i.tZ)(CarouselProgress,{currentSlide:b,totalSlides:x?N.length:SplitGridLayout_chunkVideos(N,4).length,show:x,sideSpacing:16})]})})()})]})})})}let D=(e||t)&&(0,i.BX)("div",{className:(0,G.default)("flex flex-col gap-2","lg:col-span-3"),children:[(0,i.tZ)("div",{className:"flex flex-col gap-2 md:flex-row md:items-center md:justify-between",children:e&&(0,i.tZ)(Z.T,{as:M,size:"h2",className:(0,G.default)("text-[32px] leading-[42px] md:text-[40px] md:leading-[52px]"),children:e})}),t&&(0,i.tZ)(Z.T,{size:"p3",c:"gray.6",children:t})]});return x&&!m?(0,i.tZ)("section",{className:"py-6 md:py-20",style:{backgroundColor:l||"#f5f5f5"},children:(0,i.tZ)(z.W,{children:(0,i.BX)("div",{className:(0,G.default)("flex flex-col",_),children:[D,(0,i.tZ)("div",{className:(0,G.default)(c?"grid grid-cols-2":"grid grid-cols-1",_),children:N.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t)))}),L&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:T,children:S({id:"videoLibrary.splitGrid.seeMore",defaultMessage:"Xem th\xeam"})})]})})}):(0,i.tZ)(s.x,{className:"py-6 md:py-20",style:{backgroundColor:l||"#f5f5f5"},sx:e=>({".mantine-VideoItem__VideoItem-title,.mantine-VideoItem__ShortsItem-title":{[e.fn.largerThan("sm")]:{fontSize:(0,d.h)(14)}}}),children:(0,i.tZ)(z.W,{children:(0,i.BX)("div",{className:(0,G.default)("flex flex-col",_),children:[c?(0,i.BX)(i.HY,{children:[(0,i.BX)("div",{className:(0,G.default)("grid grid-cols-1 gap-y-4 md:gap-y-6 lg:grid-cols-6 lg:gap-x-10"),children:[D,(0,i.tZ)("div",{className:(0,G.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:X.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t)))})]}),R.length>0&&(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6",_),children:R.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,G.default)("grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-10"),children:[(0,i.BX)("div",{className:(0,G.default)("flex flex-col gap-2"),children:[(0,i.tZ)("div",{className:"flex flex-col gap-2 md:flex-row md:items-center md:justify-between",children:e&&(0,i.tZ)(Z.T,{as:M,size:"h2",className:(0,G.default)("text-[32px] leading-[42px] md:text-[40px] md:leading-[52px]"),children:e})}),t&&(0,i.tZ)(Z.T,{size:"p3",c:"gray.6",children:t})]}),(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1 sm:grid-cols-2",_),children:B.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t)))})]}),W.length>0&&(0,i.tZ)("div",{className:(0,G.default)("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",_),children:W.map((e,t)=>(0,i.tZ)(VideoItemWrapper,{data:toVideoItemData(e,c)},"".concat(e.url,"-").concat(t+4)))})]}),L&&(0,i.tZ)(SeeMoreBtnWrapper,{onClick:T,children:S({id:"videoLibrary.splitGrid.seeMore",defaultMessage:"Xem th\xeam"})})]})})})},VideoLibrary=e=>{let{sessionProps:t,autoPlay:a=!1,applyH1:n,adUnitPath:d,primaryColor:s}=e,{title:c,description:h,videoLayout:g,videoList:m,applyShortVideo:p,applyCarousel:u,backgroundColor:f}=t,[x,y]=(0,r.useState)(!0),[v,S]=(0,r.useState)(m.map(e=>({title:e.videoTitle,url:e.urlVideo}))),Z=(0,r.useCallback)(async()=>{try{y(!0);let e=await fetchVideoPreview(m);S(e||[])}catch(e){console.log(e),S([])}finally{y(!1)}},[m]);return(0,r.useEffect)(()=>{m.length>0&&Z()},[m.length,Z]),(0,i.tZ)(o.Provider,{value:{applyH1:n,title:c,description:h,autoplay:a,videoList:m,videoData:v,applyShortVideo:p,applyCarousel:u,backgroundColor:f,loading:x,adUnitPath:d,primaryColor:s},children:g===l.CY.Feature?(0,i.tZ)(FeatureLayout,{}):g===l.CY.SplitVideoGrid?(0,i.tZ)(SplitGridLayout,{}):g===l.CY.Grid?(0,i.tZ)(GridLayout,{}):g===l.CY.List?(0,i.tZ)(ListLayout,{}):null})}}}]);