https://stridee.com/_next/static/chunks/6747.99ffbf050df622dc.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6747],{86747:(e,t,s)=>{s.r(t),s.d(t,{default:()=>j});var a=s(73365),n=s(1521),o=s(77213),r=s(19650),i=s(99212),l=s(22557),c=s(26494),u=s(10612),h=s(58532);function d(e,t,s){let a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,n=new h.ypk,o=-e/2,r=-t/2;n.moveTo(o+s,r),n.lineTo(o+e-s,r),n.quadraticCurveTo(o+e,r,o+e,r+s),n.lineTo(o+e,r+t-s),n.quadraticCurveTo(o+e,r+t,o+e-s,r+t),n.lineTo(o+s,r+t),n.quadraticCurveTo(o,r+t,o,r+t-s),n.lineTo(o,r+s),n.quadraticCurveTo(o,r,o+s,r);let i=new h.MSw(n,a);i.computeBoundingBox();let l=i.boundingBox,c=1/(l.max.x-l.min.x),u=1/(l.max.y-l.min.y),d=i.attributes.position,m=i.attributes.uv;for(let e=0;e<d.count;e++)m.setXY(e,(d.getX(e)-l.min.x)*c,(d.getY(e)-l.min.y)*u);return m.needsUpdate=!0,i}let m=.8919999999999999,p=1.9819999999999998,g=.126;function x(e){let{frame:t,screenSrc:s,showPlaceholder:o}=e,r=(0,n.useMemo)(()=>d(m,p,g,10),[]),l=(0,n.useMemo)(()=>d(.948,2.038,.154,10),[]),c=(0,n.useMemo)(()=>(function(){let e=Math.round(p/m*620),t=document.createElement("canvas");t.width=620,t.height=e;let s=t.getContext("2d"),a=s.createLinearGradient(0,0,310,e);a.addColorStop(0,"#e8618c"),a.addColorStop(.52,"#c65a97"),a.addColorStop(1,"#8b52c9"),s.fillStyle=a,s.fillRect(0,0,620,e);let n=.46*e;s.strokeStyle="rgba(255,255,255,0.75)",s.lineWidth=6,s.beginPath(),s.arc(310,n-70,44,0,2*Math.PI),s.stroke(),s.beginPath(),s.moveTo(288,n-70),s.lineTo(332,n-70),s.moveTo(310,n-92),s.lineTo(310,n-48),s.stroke(),s.textAlign="center",s.fillStyle="#ffffff",s.font="800 46px system-ui, -apple-system, sans-serif",s.fillText("Drag & Drop",310,n+18),s.fillStyle="rgba(255,255,255,0.75)",s.font="400 42px system-ui, -apple-system, sans-serif",s.fillText("Image or Video",310,n+66),s.fillStyle="#ffffff",s.font="700 30px system-ui, -apple-system, sans-serif",s.fillText("Screen Placeholder",310,.88*e);let o=new h.GOR(t);return o.colorSpace=h.er$,o.anisotropy=8,o})(),[]),[u,x]=n.useState(null);(0,n.useEffect)(()=>{if(!s)return void x(null);let e=!1,t=new Image;return t.crossOrigin="anonymous",t.onload=()=>{if(e)return;let s=new h.gPd(t);

1s.colorSpace=h.er$,s.anisotropy=8,s.wrapS=h.ghU,s.wrapT=h.ghU;let a=m/p,n=t.width/t.height;n>a?(s.repeat.set(a/n,1),s.offset.set((1-a/n)/2,0)):(s.repeat.set(1,n/a),s.offset.set(0,(1-n/a)/2)),s.needsUpdate=!0,x(s)},t.src=s,()=>{e=!0}},[s]);let f=null!=u?u:o?c:null;return(0,a.jsxs)("group",{rotation:[.06,-.48,-.16],children:[(0,a.jsx)(i.b,{args:[.96,2.05,.12],radius:.16,smoothness:12,steps:2,children:(0,a.jsx)("meshPhysicalMaterial",{color:t.base,metalness:1,roughness:.3,clearcoat:.5,clearcoatRoughness:.3,envMapIntensity:1.15})}),(0,a.jsx)("mesh",{position:[0,0,-.12/2-.001],rotation:[0,Math.PI,0],geometry:l,children:(0,a.jsx)("meshPhysicalMaterial",{color:t.back,metalness:.1,roughness:.45,clearcoat:.6,clearcoatRoughness:.25})}),(0,a.jsx)("mesh",{position:[0,0,.0606],geometry:l,children:(0,a.jsx)("meshPhysicalMaterial",{color:"#050506",metalness:.2,roughness:.25,clearcoat:1,clearcoatRoughness:.15})}),(0,a.jsxs)("group",{position:[-.28,.66,-.12/2-.03],children:[(0,a.jsx)(i.b,{args:[.42,.42,.05],radius:.1,smoothness:6,children:(0,a.jsx)("meshPhysicalMaterial",{color:t.back,metalness:.3,roughness:.4,clearcoat:.5})}),[[-.09,.09],[.09,.09],[0,-.1]].map((e,t)=>{let[s,n]=e;return(0,a.jsxs)("mesh",{position:[s,n,-.04],rotation:[Math.PI/2,0,0],children:[(0,a.jsx)("cylinderGeometry",{args:[.075,.075,.05,24]}),(0,a.jsx)("meshPhysicalMaterial",{color:"#0a0a0b",metalness:.6,roughness:.15,clearcoat:1})]},t)})]}),(0,a.jsx)("mesh",{position:[0,0,.0618],geometry:r,children:f?(0,a.jsx)("meshBasicMaterial",{map:f,toneMapped:!1}):(0,a.jsx)("meshBasicMaterial",{color:"#050505",toneMapped:!1})}),(0,a.jsx)("mesh",{position:[0,0,.066],geometry:l,children:(0,a.jsx)("meshPhysicalMaterial",{transparent:!0,opacity:.05,color:"#ffffff",metalness:0,roughness:.05,clearcoat:1,clearcoatRoughness:.04,envMapIntensity:1.5})}),(0,a.jsx)("mesh",{position:[0,p/2-.085,.064],children:(0,a.jsx)(i.b,{args:[.2,.058,.012],radius:.029,smoothness:8,children:(0,a.jsx)("meshPhysicalMaterial",{color:"#000000",metalness:.4,roughness:.2,clearcoat:1})})}),(0,a.jsx)(i.b,{args:[.02,.1,.05],radius:.008,position:[-.96/2-.006,.5,0],children:(0,a.jsx)("meshStandardMaterial",{color:t.button,metalness:1,roughness:.4})}),(0,a.jsx)(i.b,{args:[.02,.16,.05],radius:.008,position:[-.96/2-.006,.22,0],children:(0,a.jsx)("meshStandardMaterial",{color:t.button,metalness:1,roughness:.4})}),(0,a.jsx)(i.b,{args:[.02,.16,.05],radius:.008,position:[-.96/2-.006,0,0],children:(0,a.jsx)("meshStandardMaterial",{color:t.button,metalness:1,roughness:.4})}),(0,a.jsx)(i.b,{args:[.02,.24,.05],radius:.008,position:[.486,.28,0],children:(0,a.jsx)("meshStandardMaterial",{color:t.button,metalness:1,roughness:.4})})]})}function f(e){let{exportRef:t}=e,{gl:s,scene:a,camera:r}=(0,o.C)();return(0,n.useEffect)(()=>(t.current=e=>{let{width:t,height:n,transparent:o,bg:i}=e,l=new h.I9Y;s.getSize(l);let c=s.getPixelRatio(),u=r.aspect,d=a.background;s.setPixelRatio(1),s.setSize(t,n,!1),r.aspect=t/n,r.updateProjectionMatrix(),s.setClearAlpha(+!o),a.background=o?null:new h.Q1f(i),s.render(a,r);let m=s.domElement.toDataURL("image/png");return s.setPixelRatio(c),s.setSize(l.x,l.y,!1),r.aspect=u,r.updateProjectionMatrix(),a.background=d,s.render(a,r),m},()=>{t.current=null}),[s,a,r,t]),null}function j(e){let{frame:t,screenSrc:s,showPlaceholder:n,transparent:o,bgColor:i,exportRef:h}=e;return(0,a.jsxs)(r.Hl,{shadows:!0,dpr:[1,2],gl:{preserveDrawingBuffer:!0,antialias:!0,alpha:!0,powerPreference:"high-performance"},camera:{position:[0,0,6.4],fov:20},style:{background:o?"transparent":i},onCreated:e=>{let{gl:t}=e;return t.setClearAlpha(+!o)},children:[(0,a.jsx)("ambientLight",{intensity:.55}),(0,a.jsx)("directionalLight",{position:[3,5,4],intensity:1.3,castShadow:!0}),(0,a.jsx)("directionalLight",{position:[-4,2,-2],intensity:.5}),(0,a.jsx)(x,{frame:t,screenSrc:s,showPlaceholder:n}),(0,a.jsx)(f,{exportRef:h}),(0,a.jsxs)(l.OH,{resolution:256,frames:1,children:[(0,a.jsx)(c.O,{intensity:2.2,position:[0,2.5,2],scale:[4,4,1]}),(0,a.jsx)(c.O,{intensity:1.4,position:[-3,1,1],scale:[3,6,1]}),(0,a.jsx)(c.O,{intensity:1.2,position:[3,1,1],scale:[3,6,1]}),(0,a.jsx)(c.O,{intensity:.8,position:[0,-3,2],scale:[6,3,1],color:"#c9d4ff"})]}),(0,a.jsx)(u.N,{makeDefault:!0,enablePan:!1,minDistance:4,maxDistance:9,enableDamping:!0,dampingFactor:.08})]})}}}]);