From c9ebed81c66cdc133559a858573f5fa42b5eed21 Mon Sep 17 00:00:00 2001
From: Danilo Di Cuia <danilo@tezzutezzu.com>
Date: Mon, 27 Mar 2023 09:15:13 +0200
Subject: [PATCH] small fixes

---
 public/index.html | 10 ++-----
 src/Galleria.js   | 67 +++++++++++++++++++++++++----------------------
 src/Proiezione.js |  2 +-
 3 files changed, 39 insertions(+), 40 deletions(-)
diff --git a/public/index.html b/public/index.html
index cf44daf..3bf7554 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Let's swing Chat!" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
@@ -23,8 +20,5 @@
     -->
     <title>Let's swing chat</title>
   </head>
-  <body style="margin: 0">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
+  <body style="margin: 0"></body>
 </html>
diff --git a/src/Galleria.js b/src/Galleria.js
index 5cc6227..c1ae37f 100644
--- a/src/Galleria.js
+++ b/src/Galleria.js
@@ -9,6 +9,7 @@ import IconButton from "@mui/material/IconButton";
 import { Stack } from "@mui/system";
 import logoSrc from "./logo_chat.svg";
 import { Fade, LinearProgress } from "@mui/material";
+import { VideoComponent } from "./Proiezione";
 
 export const Galleria = () => {
   const { evento } = useParams();
@@ -66,36 +67,37 @@ export const Galleria = () => {
           style={{ position: "absolute", width: "100vw", top: "50%" }}
         />
       )}
-      <div
-        style={{
-          margin: "0 auto",
-          fontFamily: "Lineatura",
-          width: "90vw",
-          height: "100vh",
-          fontWeight: "bold",
-          color: "white",
-          display: "flex",
-          justifyContent: "space-around",
-          alignContent: "center",
-          alignItems: "center",
-          textAlign: "center",
-        }}
-      >
-        {imgIndex === images.length && (
-          <ContenitoreMessaggio messaggi={messages} />
-        )}
-
-        <img
-          src={logoSrc}
-          alt=""
+      {imgIndex === images.length && (
+        <div
           style={{
-            width: 120,
-            position: "absolute",
-            top: 20,
-            right: 20,
+            margin: "0 auto",
+            fontFamily: "Lineatura",
+            width: "90vw",
+            height: "100vh",
+            fontWeight: "bold",
+            color: "white",
+            display: "flex",
+            justifyContent: "space-around",
+            alignContent: "center",
+            alignItems: "center",
+            textAlign: "center",
           }}
-        />
-      </div>
+        >
+          <VideoComponent />
+          <ContenitoreMessaggio messaggi={messages} />
+
+          <img
+            src={logoSrc}
+            alt=""
+            style={{
+              width: 120,
+              position: "absolute",
+              top: 20,
+              right: 20,
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };
@@ -105,7 +107,7 @@ const ContenitoreMessaggio = ({ messaggi }) => {
   const messaggioDaMostrare = messaggi[indiceCorrente];
   console.log(indiceCorrente);
   return (
-    <Stack>
+    <Stack sx={{ zIndex: 1 }}>
       <div>
         {messaggioDaMostrare && (
           <ImagePlaceholder
@@ -183,7 +185,7 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
             src={messaggioDaMostrare.immagineURL}
             style={{
               maxWidth: "100%",
-              maxHeight: "80vh",
+              maxHeight: "65vh",
             }}
           />
         )}
@@ -221,7 +223,10 @@ const Messaggio = ({ messaggioDaMostrare }) => {
         </p>
       )}
       <p style={{ fontFamily: "sans-serif", fontSize: ".8rem", color: "#333" }}>
-        {date.toLocaleString("it-IT")}
+        {date.toLocaleString("it-IT", {
+          timeStyle: "short",
+          dateStyle: "short",
+        })}
       </p>
     </>
   );
diff --git a/src/Proiezione.js b/src/Proiezione.js
index ccc530a..35d60ed 100644
--- a/src/Proiezione.js
+++ b/src/Proiezione.js
@@ -184,7 +184,7 @@ const Messaggio = ({ messaggiApprovati }) => {
   );
 };
 
-const VideoComponent = React.memo(() => {
+export const VideoComponent = React.memo(() => {
   return (
     <video autoPlay muted loop id="myVideo">
       <source src={videoSrc} type="video/mp4" />
