https://fti.or.th/_next/static/chunks/6258.edb1dc26df63a7c7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6258],{91677:function(e,l,i){"use strict";i.r(l),i.d(l,{default:function(){return Home_Section9}});var r=i(85893),t=i(67294),o=i(46066);i(69002),i(58798),i(189);var u=i(98741),components_YouTubeVideo=e=>{let{videoUrl:l,thumbnailUrl:i,className:o}=e,[u,a]=(0,t.useState)(!1),n=(0,t.useRef)(null);return(0,t.useEffect)(()=>{let e=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&a(!0)})},{threshold:.25});return n.current&&e.observe(n.current),()=>{n.current&&e.unobserve(n.current)}},[]),(0,r.jsx)("div",{ref:n,className:o,children:u?(0,r.jsx)("iframe",{width:"100%",height:"315",src:l,title:"YouTube video player",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):(0,r.jsx)("img",{src:i,alt:"YouTube thumbnail",width:"100%",height:"315"})})},components_LazyImage=e=>{let{src:l,alt:i,className:o}=e,[u,a]=(0,t.useState)(!1),n=(0,t.useRef)(null);return(0,t.useEffect)(()=>{let e=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&a(!0)})},{threshold:.25});return n.current&&e.observe(n.current),()=>{n.current&&e.unobserve(n.current)}},[]),(0,r.jsx)("img",{ref:n,src:u?l:void 0,alt:i,loading:"lazy",className:o})};function getYoutubeThumbnail(e,l){if(e){let i,r;if((r=e.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/))?i=r[r.length-1]:(r=e.match(/youtu.be\/(.{11})/))&&(i=r[1]),i){let e="maxresdefault";return"low"===l?e="sddefault":"medium"===l?e="mqdefault":"high"===l&&(e="hqdefault"),"http://img.youtube.com/vi/".concat(i,"/").concat(e,".jpg")}}return!1}var Home_Section9=e=>{var l,i,a,n,s,d,c,m;let h=(0,t.useRef)(null),v=(0,t.useRef)(null);return(0,r.jsx)("div",{className:"bg-white py-16 fti-section-9 hidden md:block",children:(0,r.jsxs)("div",{className:"container xl:max-w-6xl lg:max-w-3xl mx-auto",children:[(0,r.jsx)("div",{className:"large-image-slider",children:(0,r.jsxs)(o.Z,{dots:!1,infinite:!1,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!1,beforeChange:(e,l)=>{v.current&&v.current.slickGoTo(l)},ref:h,children:[null===(i=e.widget)||void 0===i?void 0:null===(l=i.videos)||void 0===l?void 0:l.map((e,l)=>(0,r.jsx)("div",{children:(null==e?void 0:e.url)?(0,r.jsx)("div",{className:"iframe-wrapper",style:{backgroundImage:"url(".concat(getYoutubeThumbnail(e.url,"high"),")")},children:(0,r.jsx)(components_YouTubeVideo,{videoUrl:e.url,thumbnailUrl:getYoutubeThumbnail(e.url,"high")})}):(0,r.jsxs)("p",{children:["Video not added ",l+1]})},l)),null===(n=e.widget)||void 0===n?void 0:null===(a=n.images)||void 0===a?void 0:a.map((e,l)=>{var i;return(0,r.jsx)("div",{children:(null===(i=e.image)||void 0===i?void 0:i.data)&&e.image.data.some(e=>{var l;return null===(l=e.attributes)||void 0===l?void 0:l.url})?e.image.data.map((e,i)=>{var t;return(null===(t=e.attributes)||void 0===t?void 0:t.url)?(0,r.jsx)(components_LazyImage,{src:u.T+e.attributes.url,alt:"Image ".concat(l+1),className:"w-full h-auto xl:h-[750px] lg:h-[400px]"},i):(0,r.jsxs)("p",{children:["No URL provided for image ",l+1]},i)}):(0,r.jsxs)("p",{children:["No URL provided for image ",l+1]})},l)})]})}),(0,r.jsx)("div",{className:"thumbnail-slider",children:(0,r.jsxs)(o.Z,{dots:!1,infinite:!0,speed:500,slidesToShow:3,slidesToScroll:1,focusOnSelect:!0,afterChange:e=>{h.current&&h.current.slickGoTo(e)},ref:v,slidesToShow:3,swipeToSlide:!0,focusOnSelect:!0,children:[null===(d=e.widget)||void 0===d?void 0:null===(s=d.videos)||void 0===s?void 0:s.map((e,l)=>(0,r.jsx)("div",{children:(null==e?void 0:e.url)?(0,r.jsx)(components_YouTubeVideo,{videoUrl:e.url,thumbnailUrl:getYoutubeThumbnail(e.url,"high"),className:"w-full h-auto xl:h-[340px] lg:h-[180px]"}):(0,r.jsxs)("p",{children:["Video not added ",l+1]})},l)),null===(m=e.widget)||void 0===m?void 0:null===(c=m.images)||void 0===c?void 0:c.map((e,l)=>{var i;return(0,r.jsx)("div",{children:(null==e?void 0:null===(i=e.image)||void 0===i?void 0:i.data)&&e.image.data.some(e=>{var l;return null===(l=e.attributes)||void 0===l?void 0:l.url})?e.image.data.map((e,i)=>{var t;return(null===(t=e.attributes)||void 0===t?void 0:t.url)?(0,r.jsx)(components_LazyImage,{src:u.T+e.attributes.url,alt:"Image ".concat(l+1),className:"w-full h-auto xl:h-[340px] lg:h-[180px]"},i):null}):(0,r.jsxs)("p",{children:["Image not added ",l+1]})},l)})]})})]})})}},189:function(){}}]);