https://www.marshall.com/mobify/bundle/3581/1516.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[1516],{71516(e,t,n){n.d(t,{A:()=>W});var r=n(64180),i=n(68175),a=n(77810),o=n(75826),l=n.n(o),s=n(31041),c=n(54443),m=n(77355),g=n(14085),d=n(62539),u=n(20888),p=n(70300),h=n(94615);const E=(0,a.createContext)({action:"",setGlobalAction:()=>{}}),b=({children:e})=>{const[t,n]=(0,a.useState)("");return a.createElement(E.Provider,{value:{action:t,setGlobalAction:e=>{n(e)}}},e)};var f=n(87433),v=n(18801),w=n(9267),y=n(34636),k=n(14774),A=n(27409),x=n(57562),S=n(69061);const P=["src","srcDesktop","widths","imageProps","imageWrapperProps","action"],O={width:"100%",height:"100%"},D=(e,t,n,r,i,a)=>{if(!e)return{srcSet:""};const o=["w={width}"],l=(()=>{if("undefined"!=typeof window&&"undefined"!=typeof navigator)return/iPad|Macintosh/.test(navigator.userAgent)&&"ontouchend"in document})()||"undefined"!=typeof navigator&&/^((?!chrome|android).)*safari/i.test(navigator.userAgent)&&a;e.indexOf("images.ctfassets.net")&&(e.includes("gif")||l?t&&n&&o.push("fm=png"):(o.push("fm=avif"),o.push("q=100")));let s=`${e}[?${o.join("&")}]`;return(0,k.e)({src:s,widths:r,breakpoints:i.breakpoints})},j=e=>{let{src:t,srcDesktop:n,widths:i,imageProps:o,imageWrapperProps:l,action:s}=e,m=(0,v.A)(e,P);const{breakpoints:g}=(0,w.D)(),[u,p]=(0,a.useState)(!1),h=null==t?void 0:t.endsWith(".gif"),E=(0,c.o5)("DynamicImage"),b=(0,a.useMemo)(()=>({mobileSrcSet:D(t,h,u,i,{breakpoints:g},!1).srcSet,desktopSrcSet:n?D(n,h,u,i,{breakpoints:g},!0).srcSet:""}),[t,n,i,g,h,u]),k=()=>{p(!u)};return o&&!o.loading&&(o.loading="lazy"),o&&!o.fetchpriority&&(o.fetchpriority="low"),o&&!o.decoding&&(o.decoding="auto"),a.createElement(d.az,(0,r.A)({},l,m,{width:"100%",height:"100%"}),s&&null!=s&&s.linkUrl?a.createElement(S.A,{width:"100%",to:"linkProduct"===s.actionType?`/product/${null==s?void 0:s.linkUrl}`:null==s?void 0:s.linkUrl,isExternal:"linkProduct"===s.actionType?(0,x.J)(`/product/${null==s?void 0:s.linkUrl}`):(0,x.J)(null==s?void 0:s.linkUrl),target:(0,A.$)(null==s?void 0:s.target)},a.createElement("picture",{style:O},n&&a.createElement("source",{media:"(min-width: 1281px)",srcSet:b.desktopSrcSet}),a.createElement("source",{media:"(max-width: 1280px)",srcSet:b.mobileSrcSet}),a.createElement(y.E,(0,r.A)({src:t,srcSet:b.mobileSrcSet,sizes:"100vw",width:"100%",height:"100%",objectFit:"cover"},o))),h&&a.createElement(d.az,(0,r.A)({as:"button",onClick:k},E.iconWrapper,{title:u?"Play button":"Pause button"}),u?a.createElement(f.Xz,E.icon):a.createElement(f.X,E.icon))):a.createElement(a.Fragment,null,a.createElement("picture",{style:O},n&&a.createElement("source",{media:"(min-width: 1281px)",srcSet:b.desktopSrcSet}),t&&a.createElement("source",{media:"(max-width: 1280px)",srcSet:b.mobileSrcSet}),b.mobileSrcSet&&a.createElement(y.E,(0,r.A)({src:t,srcSet:b.mobileSrcSet,sizes:"100vw",width:"100%",height:"100%",objectFit:"cover"},o)),b.desktopSrcSet&&a.createElement(y.E,(0,r.A)({src:n,srcSet:b.desktopSrcSet,sizes:"100vw",width:"100%",height:"100%",objectFit:"cover"},o))),h&&a.createElement(d.az,(0,r.A)({as:"button",onClick:k},E.iconWrapper,{title:u?"Play button":"Pause button"}),u?a.createElement(f.Xz,E.icon):a.createElement(f.X,E.icon))))};j.propTypes={src:l().string,srcDesktop:l().string,widths:l().oneOfType([l().array,l().object]),imageProps:l().object,imageWrapperProps:l().object,action:l().object};const U=j;var C=n(58107);function z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function L(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?z(Object(n),!0).forEach(function(t){(0,i.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):z(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}const M=({asset:e,magnifierLink:t,showMagnifier:n,aspectRatioDesktop:i,aspectRatioMobile:o})=>{var l,s;const E=(0,c.o5)("HomeMagnifier"),v=(0,a.useRef)(null),w=(0,a.useRef)(),y=(0,a.useRef)(),k=(0,a.useRef)(),A=(0,a.useRef)(),{isDesktop:x}=(0,u.G)(),[P,O]=(0,a.useState)(!0),[D,j]=(0,a.useState)(!0),[z,M]=(0,a.useState)("translate(-50%, -50%) scale(1.33)"),[W,B]=(0,a.useState)(x),F="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";let I=4/3;"4/3"==i?I=4/3:"16/9"==i&&(I=16/9);let N=.5;"4/5"===o&&(N=.8);const _=(0,m.A)({base:"4/5"===o?"125vw":"200vw",lg:"4/3"===i?"75vw":"56.25vw"}),R=(e,t)=>{if(!e||!t)return;var n=t.getContext("2d"),r=Math.floor(t.clientWidth),i=Math.floor(t.clientHeight);t.width=r,t.height=i;const a=()=>{n.drawImage(e,0,0,t.width,t.height),window.requestAnimationFrame(a)};window.requestAnimationFrame(a)},$=()=>{window.innerWidth>=1025?R(k.current,A.current):R(w.current,y.current)},T=(e,t)=>

1{R(e,t),e.play()};(0,a.useEffect)(()=>{const e=()=>{if(!v.current)return;const{bottom:e}=v.current.getBoundingClientRect(),t=window.innerHeight;if(j(e>t),(window.scrollY||window.pageYOffset)<=500){const e=window.scrollY||window.pageYOffset;let t=e/12;e<10&&(t=0),M(`translate(-50%, -50%) translateY(-${t}%) scale(1.33)`)}};return window.addEventListener("scroll",e),window.addEventListener("resize",$),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",$)}},[]),(0,a.useEffect)(()=>{$()},[x]),(0,a.useEffect)(()=>{W!==x&&(B(x),x?k.current&&k.current.load():w.current&&w.current.load())},[x,W]);const V=null==e||null===(l=e.imageMobile)||void 0===l?void 0:l.file.url,G=null==e||null===(s=e.imageDesktop)||void 0===s?void 0:s.file.url;return a.createElement(a.Fragment,null,V||G?a.createElement("div",{className:"container",ref:v,style:L(L({},E.container),{},{height:_})},a.createElement("div",{className:"background-video",style:L(L({},E.backgroundVideo),{},{height:_,backgroundImage:`image-set(\n                                url("${(0,h.getAssetUrl)("static/img/extra-dark-grain.webp")}") type("image/webp"),\n                                url("${(0,h.getAssetUrl)("static/img/extra-dark-grain.png")}") type("image/png")\n                            )`,backgroundPosition:"center"})},a.createElement(g.g,{ratio:{base:N,lg:I},className:"mainVideo"},a.createElement(U,{src:(0,C.l)(V),srcDesktop:(0,C.l)(G),widths:[325,450,520,640,768,968,1024,1200,1440],imageProps:{alt:null==e?void 0:e.altText,objectFit:"cover",align:"center",width:"100%",height:"100%"},imageWrapperProps:{width:"100%",height:"100%"}}))),n&&a.createElement("div",{style:L(L(L({},E.magnifyingBox),E.magnifyingBoxGrow),{},{pointerEvents:null!=t&&t.linkUrl?"all":"none"})},null!=t&&t.linkUrl?a.createElement(S.A,{tabIndex:0,width:"100%",height:"100%",position:"absolute",display:"inline-block",action:t,"aria-label":"Marshall Logo"},a.createElement(f.x8,{tabIndex:0,style:L(L({},E.svgElement),{},{cursor:"pointer"})})):a.createElement(f.x8,{style:E.svgElement}),a.createElement("div",{className:"magnifying-video-container",style:L({},E.magnifyingVideoContainer)},a.createElement(g.g,{ratio:{base:.5,lg:I}},a.createElement(U,{src:(0,C.l)(V),srcDesktop:(0,C.l)(G),widths:[325,450,520,640,768,968,1024,1200,1440],imageProps:{alt:null==e?void 0:e.altText,objectFit:"cover",align:"center",width:"100%",height:"100%"},imageWrapperProps:{width:"100%",height:"100%",transform:z}}))))):a.createElement(b,null,a.createElement("div",{className:"container",ref:v,style:L(L({},E.container),{},{height:_})},a.createElement(p.mg,null,a.createElement("link",{rel:"preload",as:"image",href:F,fetchPriority:"high"})),x?a.createElement(a.Fragment,null,a.createElement("div",{className:"desktop-video background-video",style:L({},E.backgroundVideo)},a.createElement(g.g,{ratio:I},a.createElement("video",{placeholder:F,onCanPlay:e=>T(e.target,A.current),crossOrigin:"anonymous",ref:k,width:"100%",height:"100%",muted:!0,loop:!0,autoPlay:!0,playsInline:!0},a.createElement("source",{src:null==e?void 0:e.text,type:"video/mp4"})))),n&&a.createElement("div",{style:L(L(L({},E.magnifyingBox),E.magnifyingBoxGrow),{},{pointerEvents:null!=t&&t.linkUrl?"all":"none"})},null!=t&&t.linkUrl?a.createElement(S.A,{tabIndex:0,width:"100%",height:"100%",position:"absolute",display:"inline-block",action:t},a.createElement(f.x8,{tabIndex:0,style:L(L({},E.svgElement),{},{cursor:"pointer"})})):a.createElement(f.x8,{style:E.svgElement}),a.createElement("div",{className:"magnifying-video-container",style:E.magnifyingVideoContainer},a.createElement(g.g,{ratio:I},a.createElement("canvas",{ref:A,width:"100%",height:"100%",style:{transform:"translate(-50%, -50%)"}}))))):a.createElement(a.Fragment,null,a.createElement("div",{className:"background-video",style:L(L({},E.backgroundVideo),{},{backgroundColor:"black",backgroundImage:`image-set(\n                                            url("${(0,h.getAssetUrl)("static/img/extra-dark-grain.webp")}") type("image/webp"),\n                                            url("${(0,h.getAssetUrl)("static/img/extra-dark-grain.png")}") type("image/png")\n                                        )`,backgroundPosition:"center"})},a.createElement(g.g,{ratio:{base:.5,lg:I},className:"mainVideo"},a.createElement("video",{placeholder:F,onCanPlay:e=>T(e.target,y.current),"data-target":y,crossOrigin:"anonymous",ref:w,width:"100%",height:"100%",autoPlay:!0,muted:!0,loop:!0,playsInl

1ine:!0},a.createElement("source",{media:"(min-width: 1281px)",src:null==e?void 0:e.text,type:"video/mp4"}),a.createElement("source",{src:null==e?void 0:e.textMobile,type:"video/mp4"})))),n&&a.createElement("div",{style:L(L(L({},E.magnifyingBox),E.magnifyingBoxGrow),{},{pointerEvents:null!=t&&t.linkUrl?"all":"none"})},null!=t&&t.linkUrl?a.createElement(S.A,{tabIndex:0,width:"100%",height:"100%",position:"absolute",display:"inline-block",action:t},a.createElement(f.x8,{tabIndex:0,style:L(L({},E.svgElement),{},{cursor:"pointer"})})):a.createElement(f.x8,{style:E.svgElement}),a.createElement("div",{className:"magnifying-video-container",style:L(L({},E.magnifyingVideoContainer),E.mobileHeight)},a.createElement(g.g,{ratio:.5},a.createElement("canvas",{ref:y,width:"100%",height:"100%",style:{transform:"translate(-50%, -50%)"}}))))),P?a.createElement(d.az,(0,r.A)({as:"button"},D?E.iconWrapperFixed:E.iconWrapper,{onClick:()=>{(x?k:w).current.pause(),O(!1)},title:"Pause button"}),a.createElement(f.X,E.icon)):a.createElement(d.az,(0,r.A)({as:"button"},D?E.iconWrapperFixed:E.iconWrapper,{onClick:()=>{(x?k:w).current.play(),O(!0)},title:"Play button"}),a.createElement(f.Xz,E.icon)))))};M.propTypes={asset:l().shape({contentType:l().oneOf(["image","textLong"]),imageDesktop:l().shape({file:l().shape({url:l().string})}),imageMobile:l().shape({file:l().shape({url:l().string})}),text:l().string,textMobile:l().string,altText:l().string}),magnifierLink:s.X2,showMagnifier:l().bool,aspectRatioDesktop:l().oneOf(["16/9","4/3"]),aspectRatioMobile:l().string};const W=M}}]);