fix(components): 🐛 Remove on promise for video

mini-mirana · Mar 30, 2022 · db25f16 · db25f16
1 parent 53958e5
commit db25f16
Showing 1 changed file with 38 additions and 34 deletions.
diff --git a/src/components/Stack/index.jsx b/src/components/Stack/index.jsx
@@ -8,7 +8,6 @@ import { BleepsProvider } from '@arwes/sounds'
 import { AnimatorGeneralProvider } from '@arwes/animation'
 import { animated, useSprings } from '@react-spring/three'
 import { Text } from '../Text'
-import { loadVideo } from '../../utils/loadVideo'
 
 const AnimatedText = animated(Text)
 
@@ -39,16 +38,18 @@ export function Stack({
     config: { mass: 5, tension: 350, friction: 40 }
   }))
 
-  const [videos, setVideos] = useState(null)
-  useEffect(async () => {
-    const videoUrls = content.map((c) => (c.type.includes('video') ? c.source : ''))
-    setVideos(await Promise.all(videoUrls.map(loadVideo)))
-  }, [])
   const [clicked, setClicked] = useState(Array(content.length).fill(false))
+  const [videos] = useState(() => {
+    return content.reduce((p, c) => {
+      const vid = document.createElement('video')
+      vid.src = c.source
+      vid.crossOrigin = 'Anonymous'
+      vid.loop = true
+      return p.concat(vid)
+    }, [])
+  })
   useEffect(() => {
-    if (videos) {
-      clicked.map((c, i) => videos[i] !== '' && ((c && videos[i].play()) || videos[i].pause()))
-    }
+    clicked.map((c, i) => (c && videos[i].play()) || videos[i].pause())
   }, [videos, clicked])
 
   const addGlow = (index) => {
@@ -268,7 +269,7 @@ export function Stack({
                 </Text>
               </Box>
             )}
-            {c.type === 'video' && videos && (
+            {c.type === 'video' && (
               <Box
                 width={width}
                 onClick={(e) => {
@@ -282,31 +283,34 @@ export function Stack({
                 </mesh>
                 <mesh
                   position={[0.5 * width, -0.5 * height + (c?.videoY || 0), 0]}
-                  ref={c.ref}
                   onUpdate={(mesh) => {
-                    const { videoWidth } = mesh.material.map.image
-                    const { videoHeight } = mesh.material.map.image
-                    const w = width
-                    const h = height - 2 * (0.1 + (c?.titleFontSize || 0.1) + 0.1)
-                    const ratio = w / h
-                    const adaptedWidth =
-                      videoWidth * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
-                    const adaptedHeight =
-                      videoHeight * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
-                    // console.log(adaptedWidth)
-                    // console.log(adaptedHeight)
-                    // console.log(adaptedWidth / adaptedHeight)
-                    // console.log(ratio)
-                    // console.log(videoWidth / videoHeight)
-                    // if(adaptedHeight < height) {
-                    //   console.log('HI')
-                    //   w = width
-                    //   h = 0.8 * height
-                    //   ratio = w / h
-                    //   adaptedWidth = videoWidth * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
-                    //   adaptedHeight = videoHeight * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
-                    // }
-                    mesh.scale.set(adaptedWidth, adaptedHeight, 1)
+                    if (mesh.material.map) {
+                      const { videoWidth } = mesh.material.map.image
+                      const { videoHeight } = mesh.material.map.image
+                      const w = width
+                      const h = height - 2 * (0.1 + (c?.titleFontSize || 0.1) + 0.1)
+                      const ratio = w / h
+                      const adaptedWidth =
+                        videoWidth * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
+                      const adaptedHeight =
+                        videoHeight * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
+                      // console.log(adaptedWidth)
+                      // console.log(adaptedHeight)
+                      // console.log(adaptedWidth / adaptedHeight)
+                      // console.log(ratio)
+                      // console.log(videoWidth / videoHeight)
+                      // if(adaptedHeight < height) {
+                      //   console.log('HI')
+                      //   w = width
+                      //   h = 0.8 * height
+                      //   ratio = w / h
+                      //   adaptedWidth = videoWidth * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
+                      //   adaptedHeight = videoHeight * (ratio < videoWidth / videoHeight ? w / videoWidth : h / videoHeight)
+                      // }
+                      if (adaptedWidth !== 0) {
+                        mesh.scale.set(adaptedWidth, adaptedHeight, 1)
+                      }
+                    }
                   }}>
                   <planeBufferGeometry />
                   <meshStandardMaterial attach='material'>