https://www.opi.com/_next/static/chunks/2856.9414601884b62167.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2856,1386],{1386:function(e,o,s){"use strict";s.r(o),s.d(o,{VideoPlaceholder:function(){return h},VideoPlayer:function(){return x}});var i,l,n=s(52322),t=s(63792),r=s(6277),a=s(96577),d=s.n(a),_=s(45847),c=s.n(_),v=s(2784);function u(){return(u=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var s=arguments[o];for(var i in s)({}).hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e}).apply(null,arguments)}var y=e=>v.createElement("svg",u({viewBox:"0 0 122 122",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),i||(i=v.createElement("path",{d:"m84.346 61.753-33.89 19.566V42.187l33.89 19.566Z",fill:"#fff"})),l||(l=v.createElement("circle",{cx:61,cy:61,r:60.5,stroke:"#fff"}))),p=s(15826),m=s.n(p);function f({video:e,poster:o,className:s,onPlay:i,coverPoster:l,fillHero:t}){let[a,d]=(0,v.useState)(!1),_=(0,v.useRef)(null);return(0,n.jsx)("section",{className:(0,r.Z)(m().videoPlayer,t&&m().fillHero),ref:_,style:t?void 0:{aspectRatio:o.width/o.height},children:a?(0,n.jsx)("video",{className:m().videoPlayer__el,controls:!0,playsInline:!0,onCanPlay:e=>{e.target.play(),i?.()},children:(0,n.jsx)("source",{src:e.url,type:e.contentType})}):(0,n.jsx)(h,{playHandler:()=>d(!0),poster:o,className:s,coverPoster:l,posterQuality:l?90:void 0})})}function P({youtubeVideoId:e,vimeoVideoId:o,poster:s,className:i,onPlay:l,coverPoster:t,fillHero:a}){let[d,_]=(0,v.useState)(!1),[u,y]=(0,v.useState)(!1),p=(0,v.useId)(),f=(0,v.useRef)(null),P=(0,v.useRef)(!0);(0,v.useEffect)(()=>(P.current=!0,()=>{P.current=!1}),[]);let x=!!e;return(0,n.jsx)("section",{className:(0,r.Z)(m().videoPlayer,a&&m().fillHero,d&&u&&"is-loading"),ref:f,style:a?void 0:{aspectRatio:s.width/s.height},children:d?(0,n.jsxs)("div",{className:(0,r.Z)(m().videoPlayer__embed,a&&m().videoPlayer__embedHeroContain),children:[(0,n.jsx)("div",{id:`${p}-external_video`}),(0,n.jsx)(c(),{src:x?"https://www.youtube.com/iframe_api":"https://player.vimeo.com/api/player.js",onReady:()=>{let s=()=>{P.current&&y(!1)};e?function(e,o,s,i){let l=`${e}-external_video`,n=()=>{new YT.Player(l,{videoId:o,playerVars:{playsinline:1},events:{onReady:e=>{e.target.playVideo(),s(),i?.()}}})};if("object"==typeof YT&&"function"==typeof YT.Player){n();return}let t=window.onYouTubeIframeAPIReady;window.onYouTubeIframeAPIReady=()=>{"function"==typeof t&&t(),n()}}(p,e,s,l):o&&function(e,o,s,i){let l=new Vimeo.Player(`${e}-external_video`,{id:o});l.ready().then(()=>{l.play(),s(),i?.()})}(p,o,s,l)}})]}):(0,n.jsx)(h,{playHandler:()=>{_(!0),y(!0)},poster:s,className:i,coverPoster:t,posterQuality:t?90:void 0})})}let x=({video:e,youtubeVideoId:o,vimeoVideoId:s,poster:i,className:l,onPlay:t,isLoading:r,coverPoster:a,fillHero:d})=>r?(0,n.jsx)("section",{className:[m().videoPlayer,"is-loading"].join(" ")}):e?.url?(0,n.jsx)(f,{video:e,poster:i,className:l,onPlay:t,coverPoster:a,fillHero:d}):o||s?(0,n.jsx)(P,{youtubeVideoId:o,vimeoVideoId:s,poster:i,className:l,onPlay:t,coverPoster:a,fillHero:d}):null,h=({playHandler:e,poster:o,className:s,coverPoster:i,posterQuality:l})=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("button",{type:"button",className:(0,r.Z)(m().videoPlayer__button,s),"aria-label":t.ag._({id:"accessibility.playVideo",message:"Click to play video"}),onClick:e,children:(0,n.jsx)(y,{})}),(0,n.jsx)(d(),{src:o.url,fill:!0,alt:o.title,title:o.title,sizes:"(max-width: 1024px) 100vw, 887px",quality:l,className:(0,r.Z)(m().videoPlayer__poster,i&&m()["videoPlayer__poster--cover"])})]})},82856:function(e,o,s){"use strict";s.r(o),s.d(o,{VideoLesson:function(){return _}});var i=s(52322),l=s(15832),n=s(6277),t=s(1386),r=s(74826),a=s(40025),d=s.n(a);let _=({video:e,title:o,content:s,buttonLabel:a,buttonLink:_,newTab:c,lessonNumber:v})=>(0,i.jsx)("section",{className:d().videoLesson,children:(0,i.jsxs)("div",{className:(0,n.Z)(d().videoLesson__grid,"grid"),children:[(0,i.jsx)("div",{className:(0,n.Z)(d().videoLesson__column,"col xs4 l5-12"),children:e&&(0,i.jsx)("div",{className:d().videoLesson__video,children:(0,i.jsx)(t.VideoPlayer,{...e})})}),(0,i.jsx)("div",{className:(0,n.Z)(d().videoLesson__column,"col xs4 l4"),children:(0,i.jsxs)("div",{className:d().videoLesson__content,children:[v&&(0,i.jsxs)("span",{className:(0,n.Z)(d().videoLesson__lesson,"text-utility-utility-mobile","text-utility-utility-desktop"),children:[(0,i.jsx)(l.cC,{id:"videoLesson.step"}),(0,i.jsx)("span",{className:d().videoLesson__counter,children:v})]}),o&&(0,i.jsx)("h2",{className:"text-blog-heading-h2-mobile text-blog-heading-h2-desktop",children:o}),s&&(0,i.jsx)("p",{className:"text-blog-body-mobile text-blog-body-desktop",children:s}),a&&_&&(0,i.jsx)(r.z,{className:d().videoLesson__button,href:_,target:c?"_blank":void 0,children:a})]})})]})})},15826:function(e){e.exports={videoPlayer:"VideoPlayer_videoPlayer__OuRIB",pulse:"VideoPlayer_pulse__213aD",videoPlayer__button:"VideoPlayer_videoPlayer__button__kO0Hv",videoPlayer__poster:"VideoPlayer_videoPlayer__poster__BglYD","videoPlayer__poster--cover":"VideoPlayer_videoPlayer__poster--cover__trI_k",videoPlayer__el:"VideoPlayer_videoPlayer__el__jfU3N",fillHero:"VideoPlayer_fillHero__z_0qA",videoPlayer__embed:"VideoPlayer_videoPlayer__embed__2ecU6",videoPlayer__embedHeroContain:"VideoPlayer_videoPlayer__embedHeroContain__A7dKY"}},40025:function(e){e.exports={videoLesson:"VideoLesson_videoLesson__dRu_v",videoLesson__video:"VideoLesson_videoLesson__video__EUtcv",videoLesson__content:"VideoLesson_videoLesson__content__IqnRB",videoLesson__button:"VideoLesson_videoLesson__button__r0rwP",videoLesson__lesson:"VideoLesson_videoLesson__lesson__btiTd",videoLesson__counter:"VideoLesson_videoLesson__counter__DMopT",videoLesson__grid:"VideoLesson_videoLesson__grid__IuZP6",videoLesson__column:"VideoLesson_videoLesson__column__FQ7un"}}}]);
2//# sourceMappingURL=2856.9414601884b62167.js.map