diff --git a/package.json b/package.json index ecae3bb..ed71367 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,11 @@ "sort-by": "^1.2.0", "web-vitals": "^2.1.4" }, + "eslintConfig": { + "extends": [ + "react-app" + ] + }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", diff --git a/src/Galleria.js b/src/Galleria.js new file mode 100644 index 0000000..060f648 --- /dev/null +++ b/src/Galleria.js @@ -0,0 +1,171 @@ +import React, { useEffect, useState } from "react"; + +import { useParams } from "react-router-dom"; +import firebase from "firebase/app"; +import { Button, CircularProgress, Fade } from "@mui/material"; +import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import IconButton from "@mui/material/IconButton"; +import { Stack } from "@mui/system"; +import logoSrc from "./logo_chat.svg"; + +export const Galleria = () => { + const { evento } = useParams(); + const [messaggi, cambiaMessaggi] = useState([]); + const [loading, cambialoading] = useState(false); + const [indiceCorrente, cambiaindiceCorrente] = useState(1); + + useEffect(() => { + var messagesRef = firebase.database().ref(`/messaggi/${evento}`); + + messagesRef.on("value", function (snapshot) { + var messaggi = snapshot.val(); + + cambiaMessaggi( + Object.keys(messaggi) + .map((d) => { + return messaggi[d]; + }) + .filter((d) => d.approvato) + .sort((a, b) => a.timestamp - b.timestamp) + ); + }); + }, [evento]); + + const messaggioDaMostrare = messaggi[indiceCorrente]; + return ( +
+
+ +
+ {messaggioDaMostrare && ( + + )} +
+ + + {indiceCorrente > 0 && ( + cambiaindiceCorrente(indiceCorrente + 1)} + > + + + )} + {indiceCorrente > 0 && ( + cambiaindiceCorrente(indiceCorrente + 1)} + > + + + )} + + + +
+
+ ); +}; + +function ImagePlaceholder({ messaggioDaMostrare }) { + const [imageLoaded, setImageLoaded] = useState(false); + + useEffect(() => { + if (messaggioDaMostrare.immagineURL) { + const image = new Image(); + image.onload = () => { + setImageLoaded(true); + }; + image.src = messaggioDaMostrare.immagineURL; + } else { + setImageLoaded(true); + } + }, [messaggioDaMostrare.immagineURL]); + + return ( + +
+ {messaggioDaMostrare.immagineURL && ( + + )} + +
+ + ); +} + +const Messaggio = ({ messaggioDaMostrare }) => { + return ( + <> +

+ {messaggioDaMostrare.testo} +

+ {messaggioDaMostrare.autore && ( +

+ da {messaggioDaMostrare.autore} +

+ )} + + ); +}; diff --git a/src/Proiezione.js b/src/Proiezione.js index 314c973..01f8a57 100644 --- a/src/Proiezione.js +++ b/src/Proiezione.js @@ -27,6 +27,22 @@ export const Proiezione = () => { }); }); + messagesRef.on("child_removed", function (snapshot) { + console.log("child_removed"); + var messaggio = snapshot.val(); + cambiaMessaggi((oldArray) => { + const newArray = []; + oldArray.forEach((d) => { + if (d.id !== messaggio.id) { + newArray.push(d); + } + }); + newArray.sort((a, b) => b.timestamp - a.timestamp); + cambiaMessaggiApprovati(newArray.filter((d) => d.approvato)); + return newArray; + }); + }); + messagesRef.on("child_changed", function (snapshot) { console.log("child_changed"); const messaggio = snapshot.val(); @@ -108,7 +124,6 @@ const Messaggio = ({ messaggiApprovati }) => { } }, [indiceCorrente]); - console.log(imageWidth); return (
{ )}

{ {messaggioDaMostrare.autore && (

} /> - } /> - } /> + } /> + } /> + } /> ); diff --git a/src/logo_chat.svg b/src/logo_chat.svg new file mode 100644 index 0000000..e631ca8 --- /dev/null +++ b/src/logo_chat.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/video.mp4 b/src/video.mp4 index e9bcaff..9c40a9d 100644 Binary files a/src/video.mp4 and b/src/video.mp4 differ