https://www.marshall.com/mobify/bundle/3581/listening-experience.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[4555],{62930(e,t,i){i.r(t),i.d(t,{default:()=>C});var n=i(64180),l=i(77810),o=i(75826),r=i.n(o),a=i(54443),u=i(11692),d=i(62539),s=i(27821),c=i(14085),m=i(20888),v=i(25199),p=i(54235),g=i(68352),E=i(98713),f=i(31041),x=i(15426),y=i(87433),h=i(34302),b=i(89278),w=i(92893),A=i(71863);const T=e=>.5-Math.cos(e*Math.PI)/2,V=(e,t,{duration:i=1e3,easing:n=T,interval:l=13}={})=>{const o=e.volume,r=t-o;if(!(r&&i&&n&&l))return e.volume=t,Promise.resolve();const a=Math.floor(i/l);let u=1;return new Promise(t=>{const i=setInterval(()=>{e.volume=o+n(u/a)*r,++u===a+1&&(clearInterval(i),t())},l)})},_=({data:e,colorMode:t,fonts:i,animationDuration:o=750})=>{var r,f,_,C,k,z,L,M,S,O,P,D,B,I,W,$,R,j,X,F,H,N,U,G;const K=(0,a.o5)("ListeningExperience",{variant:t}),q=(0,l.useRef)(null),J=(0,l.useRef)(null),{push:Q}=(0,v.W)(),[Y,Z]=(0,l.useState)(),[ee,te]=(0,l.useState)(),[ie,ne]=(0,l.useState)(!0),{isDesktop:le}=(0,m.G)(),{isPlaying:oe,isMuted:re,isStartVideoPlaying:ae,playVideo:ue,pauseVideo:de,muteVideo:se,unMuteVideo:ce,playStartVideo:me,pauseStartVideo:ve}=(({videoRef:e,startVideoRef:t,showWidgetStart:i,currentVideo:n,animationDuration:o=750})=>{const r=(0,l.useRef)(!1),[a,u]=(0,l.useState)(!1),[d,s]=(0,l.useState)(!1),[c,m]=(0,l.useState)(!0);return(0,l.useEffect)(()=>{if(!e.current)return;const t=e.current,i=()=>s(!0),n=()=>s(!1),l=()=>u(!r.current&&t.muted);return s(!t.paused),u(!!t.muted),t.addEventListener("play",i),t.addEventListener("pause",n),t.addEventListener("volumechange",l),()=>{t.removeEventListener("play",i),t.removeEventListener("pause",n),t.removeEventListener("volumechange",l)}},[e,i]),(0,l.useEffect)(()=>{if(!n||!e.current)return;const t=e.current,i=()=>{t.load(),t.addEventListener("canplaythrough",()=>{[null==n?void 0:n.text,null==n?void 0:n.textMobile].includes(t.currentSrc)&&(t.play(),V(t,1,{duration:o,easing:T,interval:13}),t.animate([{opacity:0},{opacity:1}],{duration:o,fill:"both"}))},{once:!0})};if(t.currentSrc&&t.checkVisibility({opacityProperty:!0})){var l;const e=null===(l=t.getAnimations())||void 0===l?void 0:l.find(e=>{e.id});e?e.finished.then(i):(V(t,0,{duration:o,easing:T,interval:13}),t.animate([{opacity:1},{opacity:0}],{duration:o,fill:"both",id:"fadeOutVideo"}).finished.then(i))}else i()},[n,e,i]),(0,l.useEffect)(()=>{const t=e.current;if(!t)return;const i=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(r.current&&(e.target.muted=!1,r.current=!1),V(t,a?0:1,{duration:o,easing:T,interval:13})):V(t,0,{duration:o,easing:T,interval:13}).then(()=>{a||(r.current=!0,e.target.muted=!0)})})},{threshold:[0]});return i.observe(t),()=>i.disconnect()},[e,a,i]),{isPlaying:d,isMuted:a,isStartVideoPlaying:c,playVideo:()=>{var t;null==e||null===(t=e.current)||void 0===t||t.play()},pauseVideo:()=>{var t;null==e||null===(t=e.current)||void 0===t||t.pause()},muteVideo:()=>{null!=e&&e.current&&(e.current.muted=!0)},unMuteVideo:()=>{null!=e&&e.current&&(e.current.muted=!1)},playStartVideo:()=>{null!=t&&t.current&&t.current.play().then(()=>m(!0))},pauseStartVideo:()=>{null!=t&&t.current&&(t.current.pause(),m(!1))}}})({videoRef:q,startVideoRef:J,showWidgetStart:ie,currentVideo:Y,animationDuration:o}),pe=(0,l.useCallback)(()=>{((e,t)=>

1{t({event:"listening_experience_start",video_name:null==e?void 0:e.video_name})})({video_name:null==e?void 0:e.title},Q)},[e,Q]),ge=(0,l.useCallback)(()=>{J.current?J.current.animate([{opacity:1},{opacity:0}],{duration:o,fill:"both"}).finished.then(()=>{ve(),ne(!1),te("group1")}):(ne(!1),te("group1")),pe()},[o,ve,pe]);return(0,l.useEffect)(()=>{var t;const i=null==e||null===(t=e[`${ee}Videos`])||void 0===t?void 0:t[0];i&&Z(i)},[ee,e]),l.createElement(u.s,{flexDirection:"row",justifyContent:"center",paddingTop:"24"===(null==e?void 0:e.paddingAbove)?g.x.medium:"40"===(null==e?void 0:e.paddingAbove)?g.x.large:"80"===(null==e?void 0:e.paddingAbove)?g.x.extraLarge:"0rem",paddingBottom:"24"===(null==e?void 0:e.paddingBelow)?g.x.medium:"40"===(null==e?void 0:e.paddingBelow)?g.x.large:"80"===(null==e?void 0:e.paddingBelow)?g.x.extraLarge:"0rem",background:(0,p.$)(t,null==e?void 0:e.widgetsBackground)},l.createElement(d.az,{width:{base:"100%",lg:"120rem",xl:"140rem"},background:E.T.marshall_colors.containers.container_primary_dark},ie?l.createElement(d.az,{position:"relative"},l.createElement(d.az,(0,n.A)({position:"absolute",top:"0",left:"0",zIndex:"1"},K.contentContainer),l.createElement(s.E,(0,n.A)({textStyle:le?"sex-pistols"===i?"sexPistolsLarge":"header3":"sex-pistols"===i?"sexPistolsLarge":"header2"},K.title),null==e?void 0:e.title),(null==e?void 0:e.description)&&l.createElement(d.az,{marginTop:{base:"1.6rem",lg:"2.4rem"}},l.createElement(x.j,{colorMode:t,json:null==e?void 0:e.description,parentEntryId:"widgetListeningExperience"})),l.createElement(d.az,(0,n.A)({marginTop:{base:"1.6rem",lg:"2.4rem"},onClick:()=>{ge()}},K.buttonTextWrapper),l.createElement(s.E,K.buttonText,null==e?void 0:e.buttonText))),l.createElement(d.az,{position:"relative"},l.createElement(A.A,{ratio:{base:9/16,lg:16/9},h:"100%",w:"100%"},l.createElement(l.Fragment,null,((null==e||null===(r=e.image)||void 0===r?void 0:r.imageDesktop)||(null==e||null===(f=e.image)||void 0===f?void 0:f.imageMobile))&&l.createElement(b.A,{sourceConfigs:[{file:null==e||null===(_=e.image)||void 0===_||null===(C=_.imageDesktop)||void 0===C?void 0:C.file,media:"(min-width: 1281px)",widths:[320,375,425,520,640,768,960,1024,1200,1440,1920],aspectRatio:[1,1],sizes:"100vw",alt:null==e||null===(k=e.image)||void 0===k?void 0:k.altText},{file:null==e||null===(z=e.image)||void 0===z||null===(L=z.imageMobile)||void 0===L?void 0:L.file,widths:[320,375,425,520,640,768,960,1024,1200,1440],aspectRatio:[1,1],sizes:"100vw",alt:null==e||null===(M=e.image)||void 0===M?void 0:M.altText}]}),((null==e||null===(S=e.image)||void 0===S?void 0:S.text)||(null==e||null===(O=e.image)||void 0===O?void 0:O.textMobile))&&l.createElement(l.Fragment,null,(null==e||null===(P=e.image)||void 0===P||null===(D=P.text)||void 0===D?void 0:D.includes("<iframe"))&&l.createElement(w.A,{iframe:le?null==e||null===(B=e.image)||void 0===B?void 0:B.text:null==e||null===(I=e.image)||void 0===I?void 0:I.textMobile,altText:null==e||null===(W=e.image)||void 0===W?void 0:W.title})||l.createElement("video",{loop:!0,muted:!0,autoPlay:!0,playsInline:!0,width:"100%",height:"100%",ref:J,crossOrigin:"anonymous",style:{opacity:1}},l.createElement("source",{media:"(min-width: 1281px)",src:null==e||null===($=e.image)||void 0===$?void 0:$.text,type:"video/mp4"}),l.createElement("source",{src:null==e||null===(R=e.image)||void 0===R?void 0:R.textMobile,type:"video/mp4"}))))),((null==e||null===(j=e.image)||void 0===j?void 0:j.text)||(null==e||null===(X=e.image)||void 0===X?void 0:X.textMobile))&&l.createElement(u.s,K.videoButtonsContainer,l.createElement(d.az,(0,n.A)({as:"button"},K.iconWrapper,{onClick:ae?ve:me,title:ae?"Pause button":"Play button"}),ae?l.createElement(y.X,K.icon):l.createElement(y.Xz,K.icon))))):l.createElement(d.az,{position:"relative"}

1,l.createElement(d.az,null,l.createElement(u.s,(0,n.A)({gap:"1.6rem",flexDirection:{base:"column",lg:"row"}},K.videoGroupButtonsContainer),[1,2,3].map(t=>(null==e?void 0:e[`group${t}Text`])&&l.createElement(d.az,(0,n.A)({key:t,onClick:()=>{ee!==`group${t}`&&te(`group${t}`)}},ee===`group${t}`?K.buttonActiveWrapper:K.buttonWrapper),l.createElement(s.E,(0,n.A)({color:E.T.marshall_colors.primitives.primitive_0},K.buttonText),null==e?void 0:e[`group${t}Text`])))),l.createElement(u.s,(0,n.A)({flexDirection:{base:"column",lg:"row"},gap:"1.6rem"},K.videoTypeButtonsContainer),null==e||null===(F=e[`${ee}Videos`])||void 0===F?void 0:F.map((e,t)=>(null==e?void 0:e.title)&&l.createElement(d.az,(0,n.A)({key:`${ee}-video--${t}`,onClick:()=>{e!==Y&&Z(e)}},e===Y?K.buttonActiveWrapper:K.buttonWrapper),l.createElement(s.E,(0,n.A)({color:E.T.marshall_colors.primitives.primitive_0},K.buttonText),null==e?void 0:e.title))))),l.createElement(c.g,{ratio:{base:9/16,lg:16/9},h:"100%",w:"100%"},l.createElement("video",{loop:!0,playsInline:!0,width:"100%",height:"100%",autoPlay:!1,ref:q,muted:re,style:{opacity:0}},l.createElement("source",{src:null==Y?void 0:Y.text,media:"(min-width: 1200px)",type:"video/mp4"}),l.createElement("source",{src:null==Y?void 0:Y.textMobile,type:"video/mp4"}))),(null==Y||null===(H=Y.icon)||void 0===H?void 0:H.file)&&l.createElement(d.az,K.videoIconContainer,l.createElement(h.A,{src:null==Y||null===(N=Y.icon)||void 0===N||null===(U=N.file)||void 0===U?void 0:U.url,widths:[115,180,240,320,375,425,520,640],imageProps:{alt:null==Y||null===(G=Y.icon)||void 0===G?void 0:G.title,sizes:"(min-width: 1281px) 190px, 115px",loading:"lazy",style:{objectFit:"cover",width:"100%",height:"100%"}}})),Y&&l.createElement(u.s,K.videoButtonsContainer,l.createElement(d.az,(0,n.A)({as:"button"},K.iconWrapper,{onClick:oe?de:ue,"aria-label":oe?"Pause":"Play"}),oe?l.createElement(y.X,K.icon):l.createElement(y.Xz,K.icon)),l.createElement(d.az,(0,n.A)({as:"button"},K.iconWrapper,{onClick:re?ce:se,"aria-label":re?"Unmute":"Mute"}),re?l.createElement(y.HE,K.audioIcon):l.createElement(y.W_,K.audioIcon))))))};_.propTypes={data:r().shape({id:r().string,internalName:r().string,buttonText:r().string,contentType:r().oneOf(["widgetListeningExperience"]),description:r().object,group1Text:r().string,group1Videos:r().arrayOf(f.Cg),group2Text:r().string,group2Videos:r().arrayOf(f.Cg),group3Text:r().string,group3Videos:r().arrayOf(f.Cg),image:r().oneOfType([f.yj,f.Cg]),paddingAbove:r().oneOf(["0","24","40","80"]),paddingBelow:r().oneOf(["0","24","40","80"]),title:r().string,widgetsBackground:r().oneOf(["dark","light","grain","extra-dark-grain"])}),pageContentType:r().string,priority:r().bool,fonts:r().oneOf(["neue-helvetica","sex-pistols"]),colorMode:r().oneOf(["light","dark","yellow-leather"]),animationDuration:r().number};const C=_}}]);