https://www.mkbservicedesk.nl/component---src-pages-shorts-js-45596f642358196735e3.js

1"use strict";(self.webpackChunkmkbservicedesk_gatsby=self.webpackChunkmkbservicedesk_gatsby||[]).push([[9808],{2323:function(e,t,n){n.r(t),n.d(t,{default:function(){return u}});var r=n(6540),o=n(8007),l=n(8154),a=n(3895),s="shorts-module--nav-arrow--0775b";function i(e){if(!e)return null;const t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?|shorts\/)\??v?=?([^#&?]*).*/);return t&&11===t[2].length?t[2]:null}const c=e=>{let{videoId:t,isActive:n,isPreload:o,index:l,isMuted:a}=e;const{0:s,1:i}=(0,r.useState)(n),{0:c,1:u}=(0,r.useState)(a);(0,r.useEffect)((()=>{n&&!s&&i(!0)}),[n,s]),(0,r.useEffect)((()=>{n&&u(a)}),[n,a]);if(!(o||s))return r.createElement("div",{style:{width:"100%",height:"100%",background:"#1a1a1a",display:"flex",alignItems:"center",justifyContent:"center",color:"#666"}},r.createElement("span",null,"Laden..."));const d=`https://www.youtube.com/embed/${t}?autoplay=${n?1:0}&mute=${!n||c?1:0}&loop=1&playlist=${t}&controls=0&modestbranding=1&rel=0&playsinline=1&showinfo=0&iv_load_policy=3&disablekb=1`,m=n?`active-${c?"muted":"unmuted"}-${t}`:`inactive-${t}`;return r.createElement("iframe",{key:m,style:{width:"100%",height:"100%",border:"none"},src:d,title:`Video ${l+1}`,allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})};var u=e=>{var t;let{data:n}=e;const u=(null==n||null===(t=n.allContentfulVideo)||void 0===t?void 0:t.nodes)||[],d=(e=>e.filter((e=>null!==i(e.url))).map((e=>({...e,youtubeId:i(e.url)}))))(u);(0,r.useEffect)((()=>{console.log("All videos from Contentful:",u),console.log("Filtered YouTube videos:",d)}),[u,d]);const m=(0,r.useRef)(null),{0:h,1:v}=(0,r.useState)(0),{0:k,1:w}=(0,r.useState)(!0),{0:p,1:g}=(0,r.useState)(!0),E=(0,r.useCallback)((()=>{if(!m.current)return;const e=m.current,t=e.scrollTop,n=e.clientHeight,r=Math.round(t/n)%d.length;v(r>=0?r:0)}),[d.length]);(0,r.useEffect)((()=>{const e=m.current;if(e)return e.addEventListener("scroll",E),()=>e.removeEventListener("scroll",E)}),[E]),(0,r.useEffect)((()=>{const e=()=>w(!1);return window.addEventListener("touchstart",e,{once:!0}),window.addEventListener("wheel",e,{once:!0}),()=>{window.removeEventListener("touchstart",e),window.removeEventListener("wheel",e)}}),[]);const b=(0,r.useCallback)((e=>{if(!m.current||0===d.length)return;let t=e;e<0?t=d.length-1:e>=d.length&&(t=0);const n=m.current,r=n.clientHeight;n.scrollTo({top:t*r,behavior:"smooth"}),v(t)}),[d.length]),f=(0,r.useCallback)((()=>{b(h-1)}),[h,b]),L=(0,r.useCallback)((()=>{b(h+1)}),[h,b]);return(0,r.useEffect)((()=>{const e=e=>{"ArrowUp"===e.key||"k"===e.key?(e.preventDefault(),f()):"ArrowDown"!==e.key&&"j"!==e.key||(e.preventDefault(),L())};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)}),[f,L]),(0,r.useEffect)((()=>{const e=m.current;if(!e||0===d.length)return;let t;const n=()=>{clearTimeout(t),t=setTimeout((()=>{e.scrollTop>=e.clientHeight*d.length-10&&(e.scrollTo({top:0,behavior:"auto"}),v(0))}),150)};return e.addEventListener("scroll",n),()=>{e.removeEventListener("scroll",n),clearTimeout(t)}}),[d.length]),0===d.length?r.createElement(a.A,null,r.createElement(l.m,null,r.createElement("title",null,"Shorts | MKB Servicedesk"),r.createElement("meta",{name:"robots",content:"noindex"})),r.createElement("div",{className:"shorts-module--loading-wrapper--879e6"},r.createElement("p",null,"Geen video's beschikbaar"),r.createElement("p",{style:{fontSize:"12px",marginTop:"10px",color:"#888"}},u.length," video's gevonden, ",d.length," YouTube video's"))):r.createElement(a.A,null,r.createElement(l.m,null,r.createElement("title",null,"Shorts | MKB Servicedesk"),r.createElement("meta",{name:"description",content:"Bekijk korte video's van MKB Servicedesk"}),r.createElement("meta",{name:"theme-color",content:"#000000"})),r.createElement("div",{className:"shorts-module--shorts-page--6bada"},r.createElement(o.Link,{to:"/",className:"shorts-module--home-button--4751e","aria-label":"Terug naar home"},r.createElement("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{d:"M15 19L8 12L15 5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))),r.createElement(o.Link,{to:"/",className:"shorts-module--logo--32a5a","aria-label":"MKB Servicedesk"},r.createElement("img",{src:"/icons/icon-256x256.png",alt:"MKB Servicedesk Logo"})),r.createElement("button",{className:"shorts-module--mute-button--496ca",onClick:()=>g(!p),"aria-label":p?"Geluid aan":"Geluid uit"},p?r.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{d:"M11 5L6 9H2V15H6L11 19V5Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("line",{x1:"23",y1:"9",x2:"17",y2:"15",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),r.createElement("line",{x1:"17",y1:"9",x2:"23",y2:"15",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})):r.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{d:"M11 5L6 9H2V15H6L11 19V5Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M15.54 8.46C16.4774 9.39764 17.0039 10.6692 17.0039 11.995C17.0039 13.3208 16.4774 14.5924 15.54 15.53",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M19.07 4.93C20.9447 6.80528 21.9979 9.34836 21.9979 12C21.9979 

114.6516 20.9447 17.1947 19.07 19.07",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))),r.createElement("div",{className:"shorts-module--shorts-container--9917c",ref:m},d.map(((e,t)=>{const n=Math.min(Math.abs(t-h),Math.abs(t-h+d.length),Math.abs(t-h-d.length))<=2,l=t===h;return r.createElement("div",{key:e.contentful_id,className:"shorts-module--short-wrapper--01026"},r.createElement("div",{className:"shorts-module--video-wrapper--56246"},r.createElement(c,{videoId:e.youtubeId,isActive:l,isPreload:n,index:t,isMuted:p}),r.createElement(o.Link,{to:"/",className:"shorts-module--video-overlay--877ee","aria-label":"Ga naar artikel"},r.createElement("span",{style:{opacity:0}},"Klik om naar home te gaan"))))}))),r.createElement("div",{className:"shorts-module--navigation-arrows--1b415"},r.createElement("button",{className:s,onClick:f,"aria-label":"Vorige video"},r.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{d:"M18 15L12 9L6 15",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))),r.createElement("button",{className:s,onClick:L,"aria-label":"Volgende video"},r.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.createElement("path",{d:"M6 9L12 15L18 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})))),k&&r.createElement("div",{className:"shorts-module--swipe-hint--14b00"},"↕ Swipe om te navigeren")))}}}]);
2//# sourceMappingURL=component---src-pages-shorts-js-45596f642358196735e3.js.map