feat(components): ✨ Add iframe to Grid

not completed yet
mini-mirana · Mar 8, 2022 · 4e7399c · 4e7399c
1 parent 6025fab
commit 4e7399c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 49 deletions.
diff --git a/src/components/Stack/index.jsx b/src/components/Stack/index.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useThree } from '@react-three/fiber'
-import { useAspect } from '@react-three/drei'
+import { useAspect /* Html */ } from '@react-three/drei'
 import { Flex, Box } from '@react-three/flex'
 import { Text } from '../Text'
 
@@ -25,54 +25,63 @@ export function Stack({ width = 6, height = 4, distance = 8, content = [] }) {
   return (
     <>
       {content.map((c, i) => (
-        <Flex
-          size={[vpWidth, vpHeight, 0]}
-          position={[-vpWidth / 2, vpHeight / 2, 144 - i * distance]}
-          alignItems='center'
-          justifyContent='center'
-          name={i === 0 ? '.Stack' : ''}>
-          <Box
-            key={`${c.title}${c.titleFont}`}
-            width={width}
-            onClick={(e) => {
-              if (e.distance < distance) {
-                setClicked(clicked.map((click, j) => (i === j ? !click : false)))
-              }
-            }}>
-            <mesh position={[width / 2, -height / 2, 0]}>
-              <planeBufferGeometry args={[width, height]} />
-              <meshBasicMaterial>
-                <videoTexture attach='map' args={[videos[i]]} />
-              </meshBasicMaterial>
-            </mesh>
-            {!clicked[i] && (
-              <Text
-                font='https://fonts.gstatic.com/s/materialicons/v125/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff'
-                fontSize={1}
-                letterSpacing={0.01}
-                textAlign='center'
-                anchorX='center'
-                position-x={width / 2}
-                anchorY='middle'
-                position-y={-height / 2}>
-                {'\ue038'}
-                <meshStandardMaterial color='white' />
-              </Text>
-            )}
-            <Text
-              font={c.titleFont}
-              fontSize={c.titleFontSize}
-              letterSpacing={0.1}
-              textAlign='center'
-              anchorX='center'
-              position-x={width / 2}
-              anchorY='middle'
-              position-y={-height / 20}>
-              {c.title}
-              <meshStandardMaterial color='white' />
-            </Text>
-          </Box>
-        </Flex>
+        <>
+          {/* {c.type === 'iframe' &&
+            <Html center transform position={[0, 0, 144 - i * distance]}>
+              <iframe width={`500vw`} height={`80`} src={'http://www.weather.gov/'} />
+            </Html>
+          } */}
+          {c.type === 'video' && (
+            <Flex
+              size={[vpWidth, vpHeight, 0]}
+              position={[-vpWidth / 2, vpHeight / 2, 144 - i * distance]}
+              alignItems='center'
+              justifyContent='center'
+              name={i === 0 ? '.Stack' : ''}>
+              <Box
+                key={`${c.title}${c.titleFont}`}
+                width={width}
+                onClick={(e) => {
+                  if (e.distance < distance) {
+                    setClicked(clicked.map((click, j) => (i === j ? !click : false)))
+                  }
+                }}>
+                <mesh position={[width / 2, -height / 2, 0]}>
+                  <planeBufferGeometry args={[width, height]} />
+                  <meshBasicMaterial>
+                    <videoTexture attach='map' args={[videos[i]]} />
+                  </meshBasicMaterial>
+                </mesh>
+                {!clicked[i] && (
+                  <Text
+                    font='https://fonts.gstatic.com/s/materialicons/v125/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff'
+                    fontSize={1}
+                    letterSpacing={0.01}
+                    textAlign='center'
+                    anchorX='center'
+                    position-x={width / 2}
+                    anchorY='middle'
+                    position-y={-height / 2}>
+                    {'\ue038'}
+                    <meshStandardMaterial color='white' />
+                  </Text>
+                )}
+                <Text
+                  font={c.titleFont}
+                  fontSize={c.titleFontSize}
+                  letterSpacing={0.1}
+                  textAlign='center'
+                  anchorX='center'
+                  position-x={width / 2}
+                  anchorY='middle'
+                  position-y={-height / 20}>
+                  {c.title}
+                  <meshStandardMaterial color='white' />
+                </Text>
+              </Box>
+            </Flex>
+          )}
+        </>
       ))}
     </>
   )

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -133,6 +133,13 @@ function Page(/* { onChangePages } */) {
             titleFont: 'https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvao7CIPrcVIT9d0c8.woff',
             titleFontSize: '0.1'
           },
+          // {
+          //   source: 'https://www.htmlgoodies.com/',
+          //   type: 'iframe',
+          //   title: 'MEDICAL STRUCTURED REPORTING',
+          //   titleFont: 'https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvao7CIPrcVIT9d0c8.woff',
+          //   titleFontSize: '0.1'
+          // },
           {
             source: './a.mp4',
             type: 'video',