Start migration

site/components/common/Room/ResourceCardContent/AudioCardContent.tsx

@@ -0,0 +1,44 @@
+import { Box, Stack, Button, Text } from "@chakra-ui/react";
+import { createRef } from "react";
+import H5AudioPlayer from "react-h5-audio-player";
+
+export default function AudioCardContent(props: {
+    style: any
+    resourcePath: string,
+    resourceCaption: string,
+    onPlay: (player: HTMLAudioElement) => void,
+    onPause: () => void,
+    onClose: () => void
+  }) { 
+
+    const player = createRef<H5AudioPlayer>()
+
+    return (
+        <>
+            <Box
+                className={props.style.imageContainer}
+                w={'full'}
+                >
+                <H5AudioPlayer
+                    src={props.resourcePath}
+                    ref={player}
+                    onCanPlay={e => props.onPlay(player.current?.audio.current!)}
+                />
+            </Box>
+            
+            <Box 
+                p={5}
+                className={props.style.captionContainer}>
+                
+                <Stack align={'center'}>
+                    <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
+                        {props.resourceCaption}
+                    </Text>
+                    <Button mt={5} onClick={(e) => {props.onClose();props.onPause();}} colorScheme='teal' variant='solid'>
+                        BACKGROUND AUDIO
+                    </Button>
+                </Stack>
+            </Box>
+        </>
+    )
+};

site/components/common/Room/ResourceCardContent/ImageCardContent.tsx

@@ -0,0 +1,40 @@
+import { Box, Stack, Image, Text } from "@chakra-ui/react";
+import screenfull from "screenfull";
+
+export default function ImageCardContent(props: {
+    style: any
+    resourcePath: string
+    resourceCaption: string
+  }) { 
+
+    return (
+        <>
+            <Box
+              className={props.style.imageContainer}
+              w={'full'}
+              height={'220px'}
+              >
+                
+                <Image cursor={'pointer'} onClick={() => openFullScreen('resource-image')} id='resource-image' alt='Resource Image Not Found' src={props.resourcePath} />
+            
+            </Box>
+            
+            <Box 
+              p={5}
+              className={props.style.captionContainer}>
+              
+              <Stack mt={6} align={'center'}>
+                <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
+                  {props.resourceCaption}
+                </Text>
+              </Stack>
+            </Box>
+        </>
+    )
+};
+
+const openFullScreen = (imageId: string) => {
+    if (screenfull.isEnabled) {
+        screenfull.request(document.getElementById(imageId)!);
+    }
+}

site/components/common/Room/ResourceCardContent/VideoCardContent.tsx

@@ -0,0 +1,35 @@
+import { Box, Stack, Image, Text } from "@chakra-ui/react";
+
+export default function VideoCardContent(props: {
+    style: any
+    resourcePath: string
+    resourceCaption: string
+  }) { 
+
+    return (
+        <>
+            <Box
+              className={props.style.imageContainer}
+              w={'full'}
+              height={'220px'}
+              >
+                
+                <video controls >
+                    <source src={props.resourcePath} type="video/mp4"/>
+                </video>
+                
+            </Box>
+            
+            <Box 
+              p={5}
+              className={props.style.captionContainer}>
+              
+              <Stack mt={6} align={'center'}>
+                <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
+                  {props.resourceCaption}
+                </Text>
+              </Stack>
+            </Box>
+        </>
+    )
+};