improvements

src/Proiezione.js

@@ -3,14 +3,14 @@ import firebase from "firebase/app";
 import { Button, Grid, Stack } from "@mui/material";
 import videoSrc from "./video.mp4";
 import logoSrc from "./logo.svg";
-import { useInterval } from "./Countdown";
+
+const SHOW_MESSAGE_TIME = 6000;
 
 window.debug = false;
 
 export const Proiezione = () => {
   const [messaggi, cambiaMessaggi] = useState([]);
   const [messaggiApprovati, cambiaMessaggiApprovati] = useState([]);
-  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
 
   useEffect(() => {
     var messagesRef = firebase.database().ref("/messaggi");
@@ -41,33 +41,18 @@ export const Proiezione = () => {
     });
   }, []);
 
-  const nextMessage = () => {
-    if (!messaggiApprovati.length) return;
-    const newIndice = (indiceCorrente + 1) % messaggiApprovati.length;
-    cambiaindiceCorrente(newIndice);
-  };
-
-  const ContainerMessaggio = ({ messaggiApprovati, indiceCorrente }) => {
+  const ContainerMessaggio = ({ messaggiApprovati }) => {
     if (!messaggiApprovati.length) {
       return <div>nessun messaggio</div>;
     } else {
-      return (
-        <Messaggio
-          messaggiApprovati={messaggiApprovati}
-          indiceCorrente={indiceCorrente}
-          nextMessage={nextMessage}
-        />
-      );
+      return <Messaggio messaggiApprovati={messaggiApprovati} />;
     }
   };
 
   return (
     <div>
       <VideoComponent />
-      <ContainerMessaggio
-        messaggiApprovati={messaggiApprovati}
-        indiceCorrente={indiceCorrente}
-      />
+      <ContainerMessaggio messaggiApprovati={messaggiApprovati} />
       <img
         src={logoSrc}
         style={{
@@ -80,47 +65,48 @@ export const Proiezione = () => {
     </div>
   );
 };
-const Immagine = ({ url }) => {
-  return (
-    <div
-      style={{
-        height: 400,
-        width: 400,
-        borderRadius: "50%",
-        backgroundSize: "cover",
-        backgroundImage: `url("${url}")`,
-        backgroundPositionX: "center",
-      }}
-    ></div>
-  );
-};
 
-const Messaggio = ({ nextMessage, messaggiApprovati, indiceCorrente }) => {
-  const [timeLeft, setTimeLeft] = useState(6);
+const Messaggio = ({ messaggiApprovati }) => {
   const [fadeProp, setFadeProp] = useState("in");
   const [messaggioDaMostrare, setMessaggioDaMostrare] = useState(null);
+  const [indiceCorrente, cambiaindiceCorrente] = useState(0);
+
+  const nextMessage = () => {
+    const newIndice = (indiceCorrente + 1) % messaggiApprovati.length;
+    console.log("newIndice", newIndice);
+    cambiaindiceCorrente(newIndice);
+  };
+
+  const showNextMessage = (newMessage) => {
+    setFadeProp("in");
+    setMessaggioDaMostrare(newMessage);
+    setTimeout(() => {
+      console.log("ready for next");
+      nextMessage();
+    }, SHOW_MESSAGE_TIME);
+  };
 
   useEffect(() => {
-    if (messaggiApprovati[indiceCorrente] != messaggioDaMostrare) {
+    const newMessage = messaggiApprovati[indiceCorrente];
+    if (newMessage != messaggioDaMostrare) {
       setFadeProp("out");
-      setTimeout(() => {
-        setMessaggioDaMostrare(messaggiApprovati[indiceCorrente]);
-        setFadeProp("in");
+      const timeout = setTimeout(() => {
+        if (newMessage.immagineURL) {
+          const img = new Image();
+          img.onload = (img) => {
+            console.log("loaded");
+            showNextMessage(newMessage);
+          };
+          img.src = newMessage.immagineURL;
+        } else {
+          showNextMessage(newMessage);
+        }
       }, 1000);
+      return () => clearTimeout(timeout);
     }
-  }, [messaggiApprovati, indiceCorrente]);
-
-  useInterval(() => {
-    if (timeLeft === 1) {
-      setFadeProp("out");
-      setTimeout(() => {
-        nextMessage();
-      }, 2000);
-    } else {
-      setTimeLeft(timeLeft - 1);
-    }
-  }, 1000);
+  }, [indiceCorrente]);
 
+  console.log(messaggioDaMostrare);
   return (
     <div className={"fade-" + fadeProp}>
       <div
@@ -141,7 +127,12 @@ const Messaggio = ({ nextMessage, messaggiApprovati, indiceCorrente }) => {
         {messaggioDaMostrare && (
           <div>
             {messaggioDaMostrare.immagineURL && (
-              <Immagine url={messaggioDaMostrare.immagineURL} />
+              <img
+                src={messaggioDaMostrare.immagineURL}
+                style={{
+                  width: 200,
+                }}
+              />
             )}
             <h1
               style={{
@@ -161,13 +152,6 @@ const Messaggio = ({ nextMessage, messaggiApprovati, indiceCorrente }) => {
             >
               da {messaggioDaMostrare.autore}
             </p>
-
-            {debug && (
-              <div>
-                <Button onClick={() => nextMessage()}>next</Button>
-                {timeLeft}
-              </div>
-            )}
           </div>
         )}
       </div>