From 7db0871c8da3ece170cb74b2a65c566114cf0414 Mon Sep 17 00:00:00 2001
From: Daniele Pancottini <daniele.pancottini@studio.unibo.it>
Date: Fri, 7 Jul 2023 17:23:23 +0200
Subject: [PATCH] Fix audio and video issues

---
 .../ResourceCardContent/VideoCardContent.tsx  | 58 +++++++++----------
 site/pages/[region]/[decade]/[start].tsx      |  9 +--
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/site/components/common/Room/ResourceCardContent/VideoCardContent.tsx b/site/components/common/Room/ResourceCardContent/VideoCardContent.tsx
index d6f0772b5..05e30dd76 100644
--- a/site/components/common/Room/ResourceCardContent/VideoCardContent.tsx
+++ b/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
-    resourcePath: string
-    resourceCaption: string
-  }) { 
+  style: any
+  resourcePath: 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
-              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>
-        </>
-    )
-};
\ No newline at end of file
+      <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>
+    </>
+  )
+}
diff --git a/site/pages/[region]/[decade]/[start].tsx b/site/pages/[region]/[decade]/[start].tsx
index b7deb95e4..32e0f6e44 100644
--- a/site/pages/[region]/[decade]/[start].tsx
+++ b/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])