Fix audio and video issues

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

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

site/pages/[region]/[decade]/[start].tsx

@@ -239,9 +239,10 @@ export default function RoomPage({
             startNodeId: startNode,
             markerStyle: {
               style: {
-                color: decadesManifest[decade as keyof typeof decadesManifest].color
+                color:
-              }
+                  decadesManifest[decade as keyof typeof decadesManifest].color,
-            }
+              },
+            },
           },
         ],
       ],
@@ -319,7 +320,7 @@ export default function RoomPage({
       setTimeout(() => {
         audioPlayer?.pause()
         setIsAudioInBackground(false)
-      }, audioPlayer!.duration - audioPlayer!.currentTime)
+      }, (audioPlayer!.duration - audioPlayer!.currentTime) * 1000)
     }
   }, [isAudioInBackground])