1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[232],{3232:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return E}});var i=r(5944),a=r(7294),n=r(1998),o=r(917);let l=(0,n.Z)("div",{target:"e1v23aa50"})(e=>e.styles," svg{transform:rotate(0deg);animation:",e=>e.rotate," 500ms infinite linear;}"),d=(0,n.Z)("svg",{target:"e1v23aa51"})("width:100%;height:100%;"),u=(0,o.F4)("0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"),c=e=>{let{color:t="#fff"}=e;return(0,i.tZ)(l,{rotate:u,...e,children:(0,i.tZ)(d,{x:"0px",y:"0px",viewBox:"0 0 100 100",children:(0,i.tZ)("path",{fill:t,d:"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"})})})},s=async e=>new Promise(t=>{let r=new Image;r.onload=()=>{r.naturalWidth>120?t(!0):t(!1)},r.onerror=()=>{t(!1)},r.src=e}),p=(0,n.Z)("div",{target:"e1dd29bl0"})("opacity:",e=>{let{hide:t}=e;return t?"0":"1"},";pointer-events:",e=>{let{hide:t}=e;return t?"none":"all"},";transition:opacity 500ms ease-in;position:absolute;transform:translate3d(0,0,0);top:0px;width:100%;height:100%;cursor:",e=>{let{clickable:t}=e;return t?"pointer":"default"},";background:black;background-size:cover;background-repeat:no-repeat;background-position:center;background-image:",e=>{let{imgSrc:t}=e;return"url(".concat(t,")")},";@media (min-width:500px){background-size:",e=>{let{backgroundSize:t}=e;return t},";}"),g=(0,n.Z)("div",{target:"e1dd29bl1"})("position:absolute;transform:translate3d(0,0,0);top:0px;width:100%;height:100%;background-image:linear-gradient(to top,rgba(0,0,0,0.75),rgba(0,0,0,0) 72px);"),h=(0,n.Z)("svg",{target:"e1dd29bl2"})("width:40px;height:40px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;opacity:0.9;filter:drop-shadow(0 1px 14px rgba(0,0,0,0.8));"),f=(0,n.Z)("div",{target:"e1dd29bl3"})("font-family:system-ui;font-size:12pt;color:#ffffff;opacity:0.85;position:absolute;left:8px;right:8px;bottom:8px;white-space:nowrap;"),w=(0,n.Z)("div",{target:"e1dd29bl4"})("font-weight:bold;overflow:hidden;textoverflow:ellipsis;"),m=(0,n.Z)("div",{target:"e1dd29bl5"})("display:flex;justify-content:center;align-items:center;height:100%;max-width:100px;aspect-ratio:1;margin:0 auto;");var v=e=>{let{imgUrl:t,videoTitle:r,creatorName:n,onClick:o,videoStatus:l}=e,[d,u]=(0,a.useState)(t);(0,a.useEffect)(()=>{(async()=>{let e=t.replace("hqdefault","maxresdefault");await s(e)&&u(e)})()},[]);let v=t!==d;return(0,i.tZ)(p,{imgSrc:d,clickable:"idle"===l,hide:"playing"===l,backgroundSize:v?"contain":"cover",onClick:o,children:(0,i.BX)(g,{children:["loading"===l&&(0,i.tZ)(m,{children:(0,i.tZ)(c,{})}),"idle"===l&&(0,i.tZ)(h,{width:"229",height:"229",viewBox:"0 0 229 229",xmlns:"http://www.w3.org/2000/svg",children:(0,i.tZ)("path",{d:"M20 0l188.2 114.5L20 229",fill:"#FFF",fillRule:"evenodd"})}),(0,i.BX)(f,{children:[(0,i.tZ)(w,{children:r}),(0,i.tZ)("div",{children:n})]})]})})},b=r(5934);let y=!1;var x=()=>new Promise((e,t)=>{var r;if(null===(r=window.YT)||void 0===r?void 0:r.Player){e(window.YT);return}if(!y){let e=document.createElement("script");e.async=!0,e.src="https://www.youtube.com/iframe_api",e.onerror=t,document.body.appendChild(e),y=!0}let i=window.onYouTubeIframeAPIReady;window.onYouTubeIframeAPIReady=()=>{i&&i(),e(window.YT)}}),Z=e=>{let{videoId:t,shouldPlay:r,updateStatus:n}=e,o=(0,a.useRef)(null),l=(0,a.useMemo)(()=>(0,b.Z)(),[]),d=async()=>{new(await x()).Player(l,{width:"100%",height:"100%",videoId:t,events:{onReady:u,onError:c}})},u=e=>{o.current=e.target,n("idle")},c=()=>{n("error")};return(0,a.useEffect)(()=>{d()},[]),(0,a.useEffect)(()=>{r&&(null==o?void 0:o.current)&&(o.current.playVideo(),n("playing"))},[r,o.current]),(0,i.tZ)("div",{id:l})};r(3092);var k=r(6450);let S=e=>{let t=e.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/);return null!==t?t[1]:null};var E=e=>{let{data:t}=e,[r,n]=(0,a.useState)("loading"),[o,l]=(0,a.useState)("idle"),{artworkUrl:d,contentHeight:u,contentUrl:c,creatorName:s,title:p}=t,g=(0,a.useMemo)(()=>S(c),[c]);if(!g)return null;let h=(0,k.K)(u),f=p&&p.replace(/'/,"'").replace(/"/g,'"');return(0,i.BX)("div",{className:"youtube-block",style:h,children:[(0,i.tZ)(Z,{videoId:g,shouldPlay:("idle"===r||"playing"===r)&&"clicked"===o,updateStatus:e=>n(e)}),!!d&&(0,i.tZ)(v,{imgUrl:d,videoTitle:f,creatorName:s,onClick:()=>l("clicked"),videoStatus:r})]})}},3092:function(){}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.