diff --git a/src/components/Stack/index.jsx b/src/components/Stack/index.jsx index 4d88c26..91a20af 100644 --- 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({ )} - {c.type === 'video' && videos && ( + {c.type === 'video' && ( { @@ -282,31 +283,34 @@ export function Stack({ { - 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) + } + } }}>