Fix audio and video issues

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

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