small fixes

2023-03-27 09:15:13 +02:00
parent 2be0829d35
commit c9ebed81c6
3 changed files with 39 additions and 40 deletions
@@ -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>
@@ -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>
    </>
  );
@@ -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" />