https://www.victronenergy.co.za/static/build/assets/ConnectConfigureSlider-2b99af9a.js

1import{r as g,j as r}from"./index-c1926ae5.js";import{g as s}from"./index-10963069.js";import{a as f}from"./ScrollTrigger-a7418eb8.js";import{i as L}from"./imagesloaded-41204dfa.js";import{F as u}from"./message-8cbef400.js";const x="/static/build/assets/config-01-7f74d633.mov",b="/static/build/assets/config-01-1b99b872.webm",q="/static/build/assets/config-02-da058d7c.mov",A="/static/build/assets/config-02-5d504a77.webm",X="/static/build/assets/config-03-6c3ef712.mov",T="/static/build/assets/config-03-f9ebcea9.webm",I="/static/build/assets/config-01-bd569217.webp",C="/static/build/assets/config-02-69413b2b.webp",V="/static/build/assets/config-03-e2f7af5f.webp",B="/static/build/assets/features-slide-03-3ea2e76d.webp";s.registerPlugin(f.ScrollTrigger);function z(){const o=g.useRef(null),[j,y]=g.useState(0);let h=!1,m=!1;const _=(e,i)=>{const n=o.current.querySelector(".fullscreen-video-slider__content-navigation-item--active"),c=[...o.current.querySelectorAll(".fullscreen-video-slider__content-videos-video")],t=c[i],a=c[n.dataset.video];if(s.killTweensOf(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator")),s.set(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0}),n.dataset.video===i)return;if(n.classList.remove("fullscreen-video-slider__content-navigation-item--active"),a.pause(),a.currentTime=0,a.style.display="none",window.matchMedia("(max-width: 1024px)").matches&&!t.getElementsByTagName("source")[0].getAttribute("src")){const d=[x,q,X],v=[b,A,T],w=[...o.current.querySelectorAll(".fullscreen-video-slider__content-navigation-item")];w[i].classList.add("fullscreen-video-slider__content-navigation-item--active"),t.getElementsByTagName("source")[0].setAttribute("src",d[i]),t.getElementsByTagName("source")[1].setAttribute("src",v[i]),t.load(),t.oncanplaythrough=()=>{w[i].classList.contains("fullscreen-video-slider__content-navigation-item--active")&&(t.style.display="block",t.ontimeupdate=()=>{window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,ease:"none"}),t.ontimeupdate=void 0},t.play())};return}t.style.display="block";const l=()=>{t.readyState>=2&&(window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,ease:"none"}),t.play(),t.removeEventListener("loadeddata",l))};t.readyState>=2?(t.ontimeupdate=()=>{window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,ease:"none"}),t.ontimeupdate=void 0},t.play()):t.addEventListener("loadeddata",l),e.target.classList.add("fullscreen-video-slider__content-navigation-item--active")},S=()=>{const e=o.current.querySelector(".fullscreen-video-slider__content-navigation-item--active"),n=[...o.current.querySelectorAll(".fullscreen-video-slider__content-videos-video")][e.dataset.video];n.pause(),s.killTweensOf(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator")),n.currentTime=0,s.set(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{clearProps:"all"})},p=()=>{const e=o.current.querySelector(".fullscreen-video-slider__content-navigation-item--active"),n=[...o.current.querySelectorAll(".fullscreen-video-slider__content-videos-video")][e.dataset.video],c=n.duration;window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:c,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:c,scaleX:1,ease:"none"}),n.play()},N=()=>{const e=o.current.querySelector(".fullscreen-video-slider__content-videos-video--01"),i=b,

1n=x;function c(a){a.map(async l=>{l.isIntersecting&&(e.getElementsByTagName("source")[0].setAttribute("src",n),e.getElementsByTagName("source")[1].setAttribute("src",i),e.setAttribute("poster",I),o.current.querySelector(".fullscreen-video-slider__content-videos-video--02").setAttribute("poster",C),o.current.querySelector(".fullscreen-video-slider__content-videos-video--03").setAttribute("poster",V),e.load(),e.oncanplaythrough=()=>{if(h)return;if(h=!0,t.unobserve(e),window.matchMedia("(min-width: 1025px)").matches&&(k(),M()),!j){s.delayedCall(3,()=>{e.play();const v=e.duration;window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:v,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:v,scaleX:1,ease:"none"})});return}e.play();const d=e.duration;window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:d,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:d,scaleX:1,ease:"none"})})})}const t=new IntersectionObserver(c);t.observe(e)},k=()=>{const e=[q,X],i=[A,T];[...o.current.querySelectorAll(".fullscreen-video-slider__content-videos-video:not(.fullscreen-video-slider__content-videos-video--01)")].forEach((c,t)=>{c.getElementsByTagName("source")[0].setAttribute("src",e[t]),c.getElementsByTagName("source")[1].setAttribute("src",i[t]),c.load()})},M=()=>{const e=[...o.current.querySelectorAll(".fullscreen-video-slider__content-videos-video")],i=[...o.current.querySelectorAll(".fullscreen-video-slider__content-navigation-item")];for(let n=0;n<e.length;n++){const c=e[n];c.onended=()=>{if(c.style.display="none",i[n].classList.remove("fullscreen-video-slider__content-navigation-item--active"),n===2){const l=e[0];l.style.display="block";const d=()=>{l.readyState>=2&&(window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:l.duration,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:l.duration,scaleX:1,ease:"none"}),l.play(),l.removeEventListener("loadeddata",d))};l.readyState>=2?(l.ontimeupdate=()=>{window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:l.duration,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:l.duration,scaleX:1,ease:"none"}),l.ontimeupdate=void 0},l.play()):l.addEventListener("loadeddata",d),i[0].classList.add("fullscreen-video-slider__content-navigation-item--active");return}const t=e[n+1];t.style.display="block";const a=()=>{t.readyState>=2&&(window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,ease:"none"}),t.play(),t.removeEventListener("loadeddata",a))};t.readyState>=2?(t.ontimeupdate=()=>{window.matchMedia("(max-width: 1024px)").matches?s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,repeat:-1,ease:"none"}):s.fromTo(o.current.querySelectorAll(".fullscreen-video-slider__content-progress-indicator"),{scaleX:0},{duration:t.duration,scaleX:1,ease:"none"}),t.ontimeupdate=void 0},t.play()):t.addEventListener("loadeddata",a),i[n+1].classList.add("fullscreen-video-slider__content-navigation-item--active")}}},E=()=>{const e=o.current,i=s.timeline({paused:!0,onComplete:()=>{y(!0),m&&p(),m=!0}});i.to(e.querySelector(".fullscreen-video-slider__intro-title"),{duration:1.5,autoAlpha:1,ease:"power2.out"},0),i.to(e.querySelector(".fullscreen-video-slider__intro-title"),{duration:1.5,y:"0%",ease:"power4.out"},0),i.to(e.querySelector(".fullscreen-video-slider__intro-text"),{duration:1.5,autoAlpha:1,ease:"power2.out"},.1),i.to(e.querySelector(".fullscreen-video-slider__intro-text"),{duration:1.5,y:"0%",ease:"power4.out"},.1),i.to(e.querySelector(".fullscreen-video-slider__content-navigation"),{duration:1.5,autoAlpha:1,ease:"power2.out"},.3),i.to(e.querySelector(".fullscreen-video-slider__content-navigation"),{duration:1.5,y:"0%",ease:"power4.out"},.3),i.to(e.querySelector(".fullscreen-video-slider__content-videos"),{duration:1.5,autoAlpha:1,ease:"power2.out"},.4),i.to(e.querySelector(".fullscreen-video-slider__content-videos"),{duration:1.5,y:"0%",ease:"power4.out"},.4),i.to(e.querySelector(".fullscreen-video-slider__content-progress"),{duration:1.5,autoAlpha:1,ease:"power2.out"},.5),i.to(e.querySelector(".fullscreen-video-slider__content-progress"),{duration:1.5,y:"0%",ease:"power4.out"},.5),f.ScrollTrigger.create({trigger:e.querySelector(".image-title-block__image"),start:"top 50%",once:!0,onEnter:()=>{i.play(0),m&&p()}}),f.ScrollTrigger.create({trigger:e.querySelector(".image-title-block__image"),start:"top 55%",onLeaveBack:()=>{S(),y(!0)}})};return g.useEffect(function(){const e=o.current;N(),L(e,()=>{window.matchMedia("(max-width: 1024px)").matches&&[...o.current.querySelectorAll(".fullscreen-video-slider__content-videos-video")].forEac

1h(n=>{n.loop=!0}),f.ScrollTrigger.create({trigger:e.querySelector(".fullscreen-video-slider__content-videos"),start:"center top",onEnter:()=>{S()},onLeaveBack:()=>{p()}}),E()})},[]),r.jsx("div",{className:"image-title-block image-title-block--desktop bg-pattern--dark",ref:o,children:r.jsxs("div",{className:"image-title-block__image-holder",children:[r.jsx("img",{src:B,className:"image-title-block__image",loading:"lazy"}),r.jsxs("div",{className:"fullscreen-video-slider",children:[r.jsxs("div",{className:"fullscreen-video-slider__intro",children:[r.jsx("h2",{className:"fullscreen-video-slider__intro-title",children:r.jsx(u,{id:"+kra/A",defaultMessage:[{type:0,value:"Configure & Update"}]})}),r.jsx("p",{className:"fullscreen-video-slider__intro-text",children:r.jsx(u,{id:"DXpHTw",defaultMessage:[{type:0,value:"Configure devices, set intelligent alarms and safe firmware updating."}]})})]}),r.jsxs("div",{className:"fullscreen-video-slider__lower",children:[r.jsxs("div",{className:"fullscreen-video-slider__content",children:[r.jsxs("ul",{className:"fullscreen-video-slider__content-navigation",children:[r.jsx("li",{onClick:e=>_(e,0),"data-video":"0",className:"fullscreen-video-slider__content-navigation-item fullscreen-video-slider__content-navigation-item--active",children:r.jsx(u,{id:"/uyjwh",defaultMessage:[{type:0,value:"Configure devices"}]})}),r.jsx("li",{onClick:e=>_(e,1),"data-video":"1",className:"fullscreen-video-slider__content-navigation-item",children:r.jsx(u,{id:"UJffY6",defaultMessage:[{type:0,value:"Set alarms"}]})}),r.jsx("li",{onClick:e=>_(e,2),"data-video":"2",className:"fullscreen-video-slider__content-navigation-item",children:r.jsx(u,{id:"fUge7a",defaultMessage:[{type:0,value:"Update firmware"}]})})]}),r.jsxs("div",{className:"fullscreen-video-slider__content-videos fullscreen-video-slider__content-videos--connect",children:[r.jsxs("div",{className:"image-title-block__preloader preloader",children:[r.jsx("div",{}),r.jsx("div",{}),r.jsx("div",{}),r.jsx("div",{})]}),r.jsxs("video",{"data-id":"0",className:"fullscreen-video-slider__content-videos-video fullscreen-video-slider__content-videos-video--01",playsInline:!0,muted:!0,children:[r.jsx("source",{type:'video/mp4; codecs="hvc1"'}),r.jsx("source",{type:"video/webm"})]}),r.jsxs("video",{"data-id":"1",className:"fullscreen-video-slider__content-videos-video fullscreen-video-slider__content-videos-video--02",playsInl

1ine:!0,muted:!0,children:[r.jsx("source",{type:'video/mp4; codecs="hvc1"'}),r.jsx("source",{type:"video/webm"})]}),r.jsxs("video",{"data-id":"2",className:"fullscreen-video-slider__content-videos-video fullscreen-video-slider__content-videos-video--03",playsInline:!0,muted:!0,children:[r.jsx("source",{type:'video/mp4; codecs="hvc1"'}),r.jsx("source",{type:"video/webm"})]})]})]}),r.jsx("div",{className:"fullscreen-video-slider__content-progress fullscreen-video-slider__content-progress--connect",children:r.jsx("div",{className:"fullscreen-video-slider__content-progress-indicator"})})]})]})]})})}export{z as default};