https://www.6pm.com/marty-assets/marty-6pm.components-landing-MelodyHero.fd2b79701f3ee2db416d.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[7132],{30626:(e,t,a)=>{a.d(t,{Z:()=>s});var n=a(67294),l=a(70131);const o={triggerOnce:!0,rootMargin:a(13679).lL},s=({forceLoad:e,children:t,makePlaceholder:a,placeholder:s,options:i})=>{const[r,c]=(0,l.YD)({...o,...i});return c||e?n.createElement(n.Fragment,null,t):a?a(r):n.createElement("div",{ref:r},s)}},8838:(e,t,a)=>{a.r(t),a.d(t,{MelodyVideoPlayer:()=>T,default:()=>I});var n=a(67294),l=a(60356),o=a(86706),s=a(91296),i=a.n(s),r=a(70131),c=a(34506),d=a(41487),m=a(13679),u=a(42446),h=a(60950),p=a(70363),y=a(66874);const E="o4-z",b="p4-z",g=({showPlaceholder:e,children:t,widthValue:a="100%",heightValue:l="100%"}={})=>{const[o,s]=(0,n.useState)(!1),i=()=>{s(!0)};return e?n.createElement(n.Fragment,null,o?t:n.createElement("div",{style:{width:a,height:l},className:E},n.createElement("button",{type:"button",className:b,"aria-label":"Play Product Video",onClick:i}))):t};var V=a(12488),P=a(49279),f=a(30626);const v="rM-z",N="sM-z",z="tM-z",C="uM-z",L="vM-z",k="wM-z",D="xM-z";class T extends n.Component{state={isPlaying:!1,intervals:[],source:""};componentDidMount(){const{slotDetails:e,slotName:t,slotIndex:a,isAutoplaying:n,trackInView:l}=this.props,{autoplay:o}=e;this.buildResponsiveVideo(),(0,y.Vl)(window,"resize",this.handleResize,null,this),o&&this.setIsPlaying(n??!0),l||(0,p.j)((()=>[h.Mo,{slotDetails:e,slotName:t,slotIndex:a}]))}componentWillUnmount(){this.handleResize.cancel(),window.removeEventListener("resize",this.handleResize)}buildResponsiveVideo=()=>{const{slotDetails:{mobileVideoSrc:e,tabletVideoSrc:t,src:a}}=this.props,n=(0,V.tE)();e&&"mobile"===n?this.setState({source:e}):t&&"tablet"===n?this.setState({source:t}):this.setState({source:a})};handleResize=i()(this.buildResponsiveVideo,250);onVideoEnded=()=>{this.sendVideoAnalytics("ENDED"),this.setState({ended:!0,isPlaying:!1,lastPlayedTime:void 0,intervals:[]})};onVideoPause=()=>{this.state.isPlaying&&(this.setIsPlaying(!1),this.sendVideoAnalytics("PAUSED"),this.setState({intervals:[]}),(0,p.j)((()=>[h.CV,{...this.props,interactionType:"PAUSE"}])))};onVideoPlay=()=>{const{isPlaying:e}=this.state,t=this.melodyVideoElement,a=this.youTubeVideoElement;e||(this.setIsPlaying(!0),(0,p.j)((()=>[h.CV,{...this.props,interactionType:"PLAY"}]))),t?(t.controls=!0,this.trackVideoPlay(t.currentTime,t.duration)):a&&this.trackVideoPlay(a.getCurrentTime(),a.getDuration())};handlePlayerClick=e=>{e.preventDefault();const t=this.melodyVideoElement,{isPlaying:a}=this.state;t&&(t.muted=!1,a?t.pause():t.play())};onVideoTimeUpdate=()=>{const{isPlaying:e}=this.state;if(e){const e=this.melodyVideoElement,t=this.youTubeVideoElement;e?this.trackCurrentTime(e.currentTime):t&&this.trackCurrentTime(t.getCurrentTime())}};setIsPlaying=e=>{this.setState({isPlaying:e})};makeTextHeading(e){return e&&n.createElement("h2",null,e)}sendVideoAnalytics=(e,t)=>{const{slotDetails:{heading:a,productId:n}}=this.props;n?(0,u.L9)(`TE_PRODUCTVIDEO_${e}`,`${n}${t?`:${t}`:""}`):(0,u.L9)(`TE_MELODYVIDEO_${e}`,`${a}${t?`:${t}`:""}`),this.setState({lastEventName:e})};trackCurrentTime=e=>{const{intervals:t,lastPlayedTime:a}=this.state,n=Math.floor(e);Math.abs(n-a)>1&&(this.sendVideoAnalytics("SOUGHT",`${a}:${n}`),(0,p.j)((()=>[h.CV,{...this.props,interactionType:"SEEKED"}]))),n&&n%5==0&&!t.includes(n)?(this.setState({intervals:t.concat([n]),lastPlayedTime:n}),this.sendVideoAnalytics("TIMEUPDATED",n)):this.setState({lastPlayedTime:n})};trackVideoPlay=(e,t)=>{const{ended:a,lastEventName:n}=this.state,l=!a||0!==Math.floor(e)&&e!==t?"PLAYED":"REPLAYED";"REPLAYED"!==n&&this.sendVideoAnalytics(l)};onInViewChange=e=>{const{slotDetails:t,trackInView:a,slotName:n,slotIndex:l}=this.props;a&&e&&(0,p.j)((()=>[h.Mo,{slotDetails:t,slotName:n,slotIndex:l}]))};render(){const{isPlaying:e,source:t}=this.state,{slotName:a,slotDetails:{className:o,poster:s,heading:i,alt:d,isEmbedded:u,componentName:h,embeddedRatio:p,autoplay:y,type:E,loop:b=!1,tracks:V=[]},heightValue:T,isYouTubeVideo:w,widthValue:I,showPlaceholder:G,isAutoplaying:x,isFullWidth:_,shouldLazyLoad:S}=this.props,A=h===m.Fb,M=x??y,H=s||"",O={file:{attributes:{poster:H,preload:"none"}},youtube:{playerVars:{cc_load_policy:1,cc_lang_pref:"en"}}},$=(0,c.cn)(v,{[z]:"melodyVideoPlayer"===h,[D]:"fullwidth"===E,[N]:_},o),j=_?"100%":I;if(l.ZP.canPlay(t)&&w)return n.createElement(f.Z,{forceLoad:!S},n.createElement(P.E.Consumer,null,(e=>{const{testId:o}=e;return n.createElement(r.df,{onChange:this.onInViewChange,className:$,"data-slot-id":a,"data-test-id":o("youtubeVideoPlayer")},this.makeTextHeading(i),n.createElement(g,{showPlaceholder:G,widthValue:j,heightValue:T},n.createElement(l.ZP,{url:t,playing:!!M,onPlay:this.onVideoPlay,onPause:this.onVideoPause,onEnded:this.onVideoEnded,onProgress:this.onVideoTimeUpdate,playsinline:!0,controls:!0,width:j,height:T,config:O,loop:b,ref:e=>this.youTubeVideoElement=e})))})));if(u){const e={};return p&&(e.paddingBottom=p.endsWith("%")?p:`calc(${p} * 100%)`),n.createElement(f.Z,{forceLoad:!S},n.createElement(r.df,{onChange:this.onInViewChange,className:(0,

1c.cn)(L,o),"data-slot-id":a,style:e},this.makeTextHeading(i),n.createElement("iframe",{src:t,title:i?`${i} video`:d||"Video Content",allowFullScreen:!0})))}return n.createElement(f.Z,{forceLoad:!S},n.createElement(P.E.Consumer,null,(l=>{const{testId:o}=l;return n.createElement(r.df,{onChange:this.onInViewChange,className:$,"data-slot-id":a,"data-test-id":o("melodyVideoPlayer")},this.makeTextHeading(i),n.createElement("video",{onClick:this.handlePlayerClick,ref:e=>this.melodyVideoElement=e,src:t,poster:H,autoPlay:!!M,preload:M?"auto":"metadata",muted:M&&!A,"data-test-muted":M&&!A,height:T,controls:!1,playsInline:!0,onPlay:this.onVideoPlay,onPause:this.onVideoPause,onEnded:this.onVideoEnded,loop:b,crossOrigin:"anonymous",onTimeUpdate:this.onVideoTimeUpdate},V.map((({src:e,label:t,kind:a,srclang:l="en",default:o})=>n.createElement("track",{key:e,src:e,kind:a,label:t,srcLang:l,default:o})))),n.createElement("button",{type:"button",onClick:this.handlePlayerClick,className:(0,c.cn)(C,{[k]:e})},"Play Video"))})))}}T.defaultProps={isYouTubeVideo:!1,heightValue:"auto",showPlaceholder:!1,shouldLazyLoad:!1};const w=(0,o.$j)((e=>({product:e.product})),{})(T),I=(0,d.P)("ConnectedMelodyVideoPlayer",w)},8259:(e,t,a)=>{a.d(t,{Z:()=>i});var n=a(67294),l=a(73727),o=a(41487),s=a(45803);const i=(0,o.P)("LandingPageLink",(({url:e,newWindow:t,children:a,fallbackNode:o,...i})=>{if(e){let o=l.rU;return(0,s.n_)(e)?i.to=e:(o="a",i.href=e),t&&(i.target="_blank",i.rel="noopener noreferrer"),n.createElement(o,i,a)}return o?n.createElement(o,i,a):null}))},2515:(e,t,a)=>{a.r(t),a.d(t,{MelodyHero:()=>D,default:()=>T});var n=a(67294),l=a(45697),o=a.n(l),s=a(34506),i=a(95418),r=a(8259),c=a(23699),d=a(8838),m=a(41487),u=a(60950),h=a(70363),p=a(42446);const y="kG-z",E="lG-z",b="mG-z",g="nG-z",V="oG-z",P="pG-z",f="qG-z",v="sG-z",N="tG-z",z="uG-z",C="vG-z",L="wG-z";function k(){return k=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},k.apply(this,arguments)}const D=({slotName:e,slotIndex:t,slotDetails:a,onComponentClick:l,shouldLazyLoad:o},{testId:m})=>{const{heading:D,src:T,mobilesrc:w,retina:I,link:G,alt:x,gae:_,copy:S,subtext:A,cta:M,flip:H,bgcolor:O,textcolor:$,brandsrc:j,brandretina:Z,brandalt:R,videoSrc:F,poster:U,isEmbedded:X,autoplay:Y,loop:B,mobileVideoSrc:K,tabletVideoSrc:W}=a;(0,n.useEffect)((()=>{(0,h.j)((()=>[u.wN,{slotDetails:a,slotIndex:t,slotName:e,heroCount:1}]))}),[a,t,e]);const q=(0,n.useCallback)((n=>{l&&l(n),(0,h.j)((()=>[u.qm,{slotDetails:a,slotIndex:t,slotName:e,heroCount:1}])),(0,p.L9)("TE_LANDING_HERO_CLICK",_||a.componentName)}),[l,a,t,e,_]),J="white"===$?v:P,Q=(0,i.h1)(O),ee="true"===H?.toLowerCase(),te={className:(0,s.cn)(y,"heroComponent",J,{[V]:ee}),style:Q,onClick:q,"data-eventlabel":"melodyHero","data-slotindex":t,"data-eventvalue":_},ae={...te,className:(0,s.cn)(b,J),"data-test-id":m("melodyHero")},ne=n.createElement("div",{className:g},(()=>{const a={src:F,alt:x,poster:U,isEmbedded:X,autoplay:Y,loop:B,mobileVideoSrc:K,tabletVideoSrc:W};return F&&n.createElement(d.default,{slotDetails:a,slotIndex:t,slotName:e})})()||n.createElement(c.Z,{src:T,mobilesrc:w,retina:I,alt:x,shouldLazyLoad:o,className:L})),le=n.createElement(n.Fragment,null,(()=>{const t=n.createElement(n.Fragment,null,D&&n.createElement("h2",{style:(0,i.Xb)($)},D),j&&n.createElement(c.Z,{src:j,retina:Z,alt:R,shouldLazyLoad:o,className:C}),S&&n.createElement("p",{style:(0,i.Xb)($),className:N},S),A&&n.createElement("p",{className:z},A),M?n.createElement("p",{className:f},M):null);return F&&G?n.createElement(r.Z,k({url:G},ae),t):n.createElement("div",{className:b,style:Q,"data-test-id":m("melodyHero"),"data-slot-id":e},t)})(),ne);return!F&&G?n.createElement(r.Z,k({url:G},te),le):n.createElement("div",{className:(0,s.cn)(y,J,{[E]:F,[V]:ee},"heroComponent"),"data-slot-id":e},le)};D.contextTypes={testId:o().func};const T=(0,m.P)("MelodyHero",D)},80977:(e,t,a)=>{a.r(t),a.d(t,{MelodyHeroFull:()=>x,default:()=>_});var n=a(67294),l=a(45697),o=a.n(l),s=a(34506),i=a(95418),r=a(8259),c=a(23699),d=a(8838),m=a(41487),u=a(60950),h=a(70363),p=a(42446);const y="yG-z",E="zG-z",b="AG-z",g="BG-z",V="CG-z",P="DG-z",f="EG-z",v="FG-z",N="GG-z",z="HG-z",C="IG-z",L="JG-z",k="KG-z",D="LG-z",T="MG-z",w="NG-z",I="PG-z";function G(){return G=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},G.apply(this,arguments)}const x=({slotName:e,slotIndex:t,slotDetails:a,onComponentClick:l,shouldLazyLoad:o},{testId:m})=>{const{heading:x,src:_,mobilesrc:S,tabletsrc:A,retina:M,mobileretina:H,tabletretina:O,link:$,link2:j,alt:Z,gae:R,copy:F,subtext:U,cta:X,cta2:Y,bgcolor:B,textcolor:K,brandsr

1c:W,brandretina:q,brandalt:J,xaxis:Q,yaxis:ee,contentwidth:te,transparent:ae,alwaysoverlay:ne,newwindow:le,videoSrc:oe,poster:se,isEmbedded:ie,autoplay:re,loop:ce,mobileVideoSrc:de,tabletVideoSrc:me}=a;(0,n.useEffect)((()=>{(0,h.j)((()=>[u.wN,{slotDetails:a,slotIndex:t,slotName:e,heroCount:1}]))}),[a,t,e]);const ue=(0,n.useCallback)((n=>{l&&l(n),(0,h.j)((()=>[u.qm,{slotDetails:a,slotIndex:t,slotName:e,heroCount:1,linkText:n.target.innerText}])),(0,p.L9)("TE_LANDING_HERO_CLICK",R||a.componentName)}),[l,a,t,e,R]),he={className:(0,s.cn)(y,"heroComponent"),onClick:ue,"data-eventlabel":"melodyHeroFull","data-eventvalue":R,"data-slotindex":t},pe={"data-slot-id":e};le&&(he.target="_blank",he.rel="noopener noreferrer");const ye=j||!$?pe:null,Ee="white"===K?T:D,be={src:_,mobilesrc:S,tabletsrc:A,retina:M,mobileretina:H,tabletretina:O,alt:Z,shouldLazyLoad:o},ge=n.createElement("div",G({className:(0,s.cn)(Ee,E,{heroComponent:ye})},ye,{"data-test-id":m("melodyHeroFullContentImg")}),(()=>{const e={src:oe,poster:se,isEmbedded:ie,autoplay:re,loop:ce,mobileVideoSrc:de,tabletVideoSrc:me};return oe&&n.createElement(d.default,{slotDetails:e})})()||n.createElement(c.Z,be),(()=>{const e={background:B,width:te},t={left:v,center:k,right:f},a={top:N,center:L,bottom:z};return(x||W||F||X)&&n.createElement("div",{style:e,className:(0,s.cn)(P,{[b]:"true"===ne,[C]:"true"===ae,[t[Q]||""]:Q,[a[ee]||""]:ee})},x&&n.createElement("h2",{className:V,style:(0,i.Xb)(K)},x),W&&n.createElement(c.Z,{src:W,retina:q,alt:J,shouldLazyLoad:o}),F&&n.createElement("p",{style:(0,i.Xb)(K)},F),U&&n.createElement("p",{className:g},U),n.createElement("span",{className:I},(()=>{const e={"data-eventvalue":`${R}-${X}`};return X&&(Y&&j?n.createElement("div",G({style:(0,i.Xb)(K)},he),n.createElement(r.Z,G({url:$},e),X)):n.createElement("div",{style:(0,i.Xb)(K),className:w,"data-test-id":m("melodyHeroFullCtaBtn")},X))})(),(()=>{const e={"data-eventvalue":`${R}-${Y}`};return Y&&j&&n.createElement("div",G({style:(0,i.Xb)(K)},he),n.createElement(r.Z,G({url:j},e),Y))})()))})());return $&&!j&&n.createElement(r.Z,G({url:$},pe,he),ge)||ge};x.contextTypes={testId:o().func,marketplace:o().object};const _=(0,m.P)("MelodyHeroFull",x)},95418:(e,t,a)=>{a.d(t,{$d:()=>u,Dn:()=>h,Ho:()=>p,L_:()=>E,Xb:()=>d,h1:()=>c,ir:()=>m});var n=a(67294),l=a(13416),o=a(72138),s=a(66874),i=a(42446),r=a(26887);function c(e){return e?{background:e}:null}function d(e){return e?{color:e}:null}function m(e){return e?{color:e,borderBottom:`1px solid ${e}`}:null}function u(e,t){const{chatWindowName:a}=l;t=t||(0,r.zz)(a),(0,s.Vl)(document.body,"click",(e=>{const a=e.target;if("A"===a.tagName){const n=a.getAttribute("data-application-action")||"",[,l]=n.match(o.C$)||[];"livechat-popup"===l&&(t(e),(0,i.L9)("TE_PV_LANDINGPAGE","Live Help"),(0,i.RF)("Main-Nav","CustomerService","Live-Help"))}}),void 0,e)}function h(e){return e>1}const p=({heading:e,className:t})=>e&&n.createElement("h2",{className:t},e),y=e=>()=>e;function E(e,t){if(e&&t&&"string"==typeof e){if(!o.m7.test(e))return e;if(("string"==typeof t||"number"==typeof t||1===t?.length)&&o.m7.test(e))return e.replace(o.m7,y(t));if("object"==typeof t&&t?.length>1){const a=e.match(RegExp(o.m7,"g"));return a?.forEach(((a,n)=>{e=e.replace(a,y(t[n]))})),e}}}}}]);
2//# sourceMappingURL=marty-6pm.components-landing-MelodyHero.fd2b79701f3ee2db416d.js.map