From 27e0427e963224b697831047442802e15c3366b6 Mon Sep 17 00:00:00 2001 From: Danilo Di Cuia Date: Mon, 8 Apr 2024 17:24:14 +0200 Subject: [PATCH] lots of fixes --- package-lock.json | 46 ++- package.json | 2 + src/App.css | 4 + src/Buttons.js | 18 +- src/Galleria.js | 213 -------------- src/ImageUpload.js | 16 +- src/{ => assets}/logo.svg | 0 src/assets/logo_chat.svg | 22 ++ src/{ => assets}/logo_p.svg | 0 src/index.js | 47 +-- src/logo_chat.svg | 24 -- src/{Admin.js => routes/AdminPage.js} | 4 +- src/routes/GalleryPage.js | 268 ++++++++++++++++++ src/{ListaEventi.js => routes/HomePage.1.js} | 4 +- src/routes/HomePage.js | 86 ++++++ src/{MyForm.js => routes/MyFormPage.js} | 10 +- .../ProjectionPage.js} | 19 +- 17 files changed, 488 insertions(+), 295 deletions(-) delete mode 100644 src/Galleria.js rename src/{ => assets}/logo.svg (100%) create mode 100644 src/assets/logo_chat.svg rename src/{ => assets}/logo_p.svg (100%) delete mode 100644 src/logo_chat.svg rename src/{Admin.js => routes/AdminPage.js} (97%) create mode 100644 src/routes/GalleryPage.js rename src/{ListaEventi.js => routes/HomePage.1.js} (95%) create mode 100644 src/routes/HomePage.js rename src/{MyForm.js => routes/MyFormPage.js} (93%) rename src/{Proiezione.js => routes/ProjectionPage.js} (91%) diff --git a/package-lock.json b/package-lock.json index ad7bde6..2bd30d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "firebase": "^9.17.2", "localforage": "^1.10.0", "match-sorter": "^6.3.1", + "moment": "^2.30.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.41.0", @@ -26,6 +27,7 @@ "react-scripts": "5.0.1", "sass": "^1.60.0", "sort-by": "^1.2.0", + "uuid": "^9.0.1", "web-vitals": "^2.1.4" } }, @@ -13144,6 +13146,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -16402,6 +16412,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/sort-by": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/sort-by/-/sort-by-1.2.0.tgz", @@ -17420,9 +17438,13 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], "bin": { "uuid": "dist/bin/uuid" } @@ -27873,6 +27895,11 @@ "minimist": "^1.2.6" } }, + "moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -30038,6 +30065,13 @@ "faye-websocket": "^0.11.3", "uuid": "^8.3.2", "websocket-driver": "^0.7.4" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } } }, "sort-by": { @@ -30798,9 +30832,9 @@ "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==" }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==" }, "v8-to-istanbul": { "version": "8.1.1", diff --git a/package.json b/package.json index 232154b..44997f4 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "firebase": "^9.17.2", "localforage": "^1.10.0", "match-sorter": "^6.3.1", + "moment": "^2.30.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.41.0", @@ -22,6 +23,7 @@ "react-scripts": "5.0.1", "sass": "^1.60.0", "sort-by": "^1.2.0", + "uuid": "^9.0.1", "web-vitals": "^2.1.4" }, "eslintConfig": { diff --git a/src/App.css b/src/App.css index 2479a2a..8029e04 100644 --- a/src/App.css +++ b/src/App.css @@ -14,6 +14,10 @@ font-style: normal; } +html { + background: black; +} + #myVideo { position: fixed; left: 50%; diff --git a/src/Buttons.js b/src/Buttons.js index ed032e6..8ebaf73 100644 --- a/src/Buttons.js +++ b/src/Buttons.js @@ -2,19 +2,20 @@ import React from "react"; import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import IconButton from "@mui/material/IconButton"; +import CloseIcon from "@mui/icons-material/Close"; import { Stack } from "@mui/system"; -export function Buttons(indiceCorrente, cambiaindiceCorrente, messaggi) { +export function Buttons( + indiceCorrente, + cambiaindiceCorrente, + messaggi, + setMainMessage +) { return ( @@ -32,6 +33,11 @@ export function Buttons(indiceCorrente, cambiaindiceCorrente, messaggi) { )} + + setMainMessage(null)}> + + + {indiceCorrente < messaggi.length - 1 && ( cambiaindiceCorrente(indiceCorrente + 1)}> diff --git a/src/Galleria.js b/src/Galleria.js deleted file mode 100644 index 858be8b..0000000 --- a/src/Galleria.js +++ /dev/null @@ -1,213 +0,0 @@ -import React, { useEffect, useState } from "react"; - -import { useParams } from "react-router-dom"; -import firebase from "firebase/compat/app"; - -import { Stack } from "@mui/system"; -import logoSrc from "./logo_chat.svg"; -import { Box, CircularProgress, Fade, LinearProgress } from "@mui/material"; -import { VideoComponent } from "./Proiezione"; -import { Buttons } from "./Buttons"; - -export const Galleria = () => { - const { evento } = useParams(); - const [messages, setMessages] = useState([]); - const [imgIndex, cambiaimgIndex] = useState(0); - const [images, setImages] = useState([]); - - useEffect(() => { - var messagesRef = firebase.database().ref(`/messaggi/${evento}`); - console.log(`/messaggi/${evento}`); - messagesRef.once("value", function (snapshot) { - const messaggiObject = snapshot.val(); - const messaggi = Object.keys(messaggiObject) - .map((d) => { - return messaggiObject[d]; - }) - .filter((d) => d.approvato) - .sort((a, b) => a.timestamp - b.timestamp); - - setMessages(messaggi); - - // setImages( - // messaggi - // .filter((d) => d.immagineURL != null) - // .map((d) => { - // return d.immagineURL; - // }) - // ); - }); - }, [evento]); - - // useEffect(() => { - // if (images) { - // function loadImage() { - // const img = new Image(); - // img.src = images[imgIndex]; - // img.onload = () => { - // if (imgIndex < images.length) { - // cambiaimgIndex((i) => { - // return i + 1; - // }); - // } - // }; - // } - // loadImage(); - // } - // }, [imgIndex, images]); - - return ( -
- {/* {imgIndex !== images.length && ( - - )} - {imgIndex === images.length && ( */} -
- - {messages.length && } - - -
- {/* )} */} -
- ); -}; - -const ContenitoreMessaggio = ({ messaggi }) => { - const [indiceCorrente, cambiaindiceCorrente] = useState(0); - const messaggioDaMostrare = messaggi[indiceCorrente]; - return ( - -
- - {messaggioDaMostrare.immagineURL && ( - - )} - - -
- - {Buttons(indiceCorrente, cambiaindiceCorrente, messaggi)} - - ); -}; - -function ImagePlaceholder({ messaggioDaMostrare }) { - const [imageLoaded, setImageLoaded] = useState(false); - - useEffect(() => { - console.log("go"); - setImageLoaded(false); - - if (messaggioDaMostrare.immagineURL) { - const image = new Image(); - image.onload = () => { - setImageLoaded(true); - }; - image.src = messaggioDaMostrare.immagineURL; - } else { - setImageLoaded(true); - } - }, [messaggioDaMostrare.immagineURL]); - - if (imageLoaded) { - return ( -
- {messaggioDaMostrare.immagineURL && ( - - )} -
- ); - } else { - return ( - - - - ); - } -} - -const Messaggio = ({ messaggioDaMostrare }) => { - const date = new Date(messaggioDaMostrare.timestamp); - - return ( - <> -

- {messaggioDaMostrare.testo} -

- {messaggioDaMostrare.autore && ( -

- da {messaggioDaMostrare.autore} -

- )} -

- {date.toLocaleString("it-IT", { - timeStyle: "short", - dateStyle: "short", - })} -

- - ); -}; diff --git a/src/ImageUpload.js b/src/ImageUpload.js index 94d0a98..1cd8aaf 100644 --- a/src/ImageUpload.js +++ b/src/ImageUpload.js @@ -4,6 +4,7 @@ import "firebase/compat/storage"; import { Stack } from "@mui/system"; import { Button } from "@mui/material"; import { useParams } from "react-router-dom"; +import { v4 as uuidv4 } from "uuid"; const IDLE = 0; const IMAGE_SET = 1; @@ -18,17 +19,15 @@ function ImageUpload({ onImageURLSet, onImageUploading }) { const [progress, setProgress] = useState(0); const handleChange = (e) => { + const imgRef = `images/${evento}/${uuidv4()}_${image.name}`; if (e.target.files[0]) { // setState(1); let image = e.target.files[0]; onImageUploading(true); - const uploadTask = firebase - .storage() - .ref(`images/${evento}/${image.name}`) - .put(image, { - cacheControl: "public,max-age=3000000", - contentType: "image/jpeg", - }); + const uploadTask = firebase.storage(imgRef).ref().put(image, { + cacheControl: "public,max-age=3000000", + contentType: "image/jpeg", + }); setState(UPLOADING); @@ -46,8 +45,7 @@ function ImageUpload({ onImageURLSet, onImageUploading }) { () => { firebase .storage() - .ref(`images/${evento}/`) - .child(image.name) + .ref(imgRef) .getDownloadURL() .then((url) => { setImageUrl(url); diff --git a/src/logo.svg b/src/assets/logo.svg similarity index 100% rename from src/logo.svg rename to src/assets/logo.svg diff --git a/src/assets/logo_chat.svg b/src/assets/logo_chat.svg new file mode 100644 index 0000000..af7b191 --- /dev/null +++ b/src/assets/logo_chat.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/logo_p.svg b/src/assets/logo_p.svg similarity index 100% rename from src/logo_p.svg rename to src/assets/logo_p.svg diff --git a/src/index.js b/src/index.js index 0d333af..b8a01bc 100644 --- a/src/index.js +++ b/src/index.js @@ -11,26 +11,25 @@ import { import firebase from "firebase/compat/app"; import "firebase/compat/database"; import "firebase/compat/analytics"; -import { Proiezione } from "./Proiezione"; -import { MyForm } from "./MyForm"; -import { Admin } from "./Admin"; -import { Galleria } from "./Galleria"; -import { ListaEventi } from "./ListaEventi"; -import { Button } from "@mui/material"; +import { ProjectionPage } from "./routes/ProjectionPage"; +import { MyFormPage } from "./routes/MyFormPage"; +import { AdminPage } from "./routes/AdminPage"; +import { GalleryPage } from "./routes/GalleryPage"; +import { HomePage } from "./routes/HomePage"; +import { Button, CssBaseline, ThemeProvider, createTheme } from "@mui/material"; import EXIF from "exif-js"; const firebaseConfig = { apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw", authDomain: "messaggiswing.firebaseapp.com", + databaseURL: + "https://messaggiswing-default-rtdb.europe-west1.firebasedatabase.app", projectId: "messaggiswing", storageBucket: "messaggiswing.appspot.com", messagingSenderId: "983131964310", appId: "1:983131964310:web:5ef430e42c42d2dfe253b7", measurementId: "G-1CBJZ3B48E", - databaseURL: - "https://messaggiswing-default-rtdb.europe-west1.firebasedatabase.app", }; - firebase.initializeApp(firebaseConfig); firebase.analytics(); @@ -39,6 +38,13 @@ function parseDate(s) { return new Date(b[0], b[1] - 1, b[2], b[3], b[4], b[5]); } +const darkTheme = createTheme({ + palette: { + mode: "dark", + background: "black", + }, +}); + const Upload = () => { const { evento } = useParams(); const [uploadedFiles, setUploadedFiles] = useState([]); @@ -124,14 +130,17 @@ const Upload = () => { }; ReactDOM.createRoot(document.getElementById("root")).render( - - - } /> - } /> - } /> - } /> - } /> - } /> - - + + + + + } /> + } /> + } /> + } /> + } /> + } /> + + + ); diff --git a/src/logo_chat.svg b/src/logo_chat.svg deleted file mode 100644 index 0aa7a0f..0000000 --- a/src/logo_chat.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/Admin.js b/src/routes/AdminPage.js similarity index 97% rename from src/Admin.js rename to src/routes/AdminPage.js index 6f8edb2..09a0866 100644 --- a/src/Admin.js +++ b/src/routes/AdminPage.js @@ -8,7 +8,7 @@ import { Checkbox } from "@mui/material"; function CheckboxListSecondary({ messaggi, evento, onChecked }) { return ( - + {messaggi.map((m) => { const labelId = `checkbox-list-secondary-label-${m.timestamp}`; return ( @@ -49,7 +49,7 @@ function CheckboxListSecondary({ messaggi, evento, onChecked }) { ); } -export const Admin = () => { +export const AdminPage = () => { const [messaggi, cambiaMessaggi] = useState([]); const { evento } = useParams(); diff --git a/src/routes/GalleryPage.js b/src/routes/GalleryPage.js new file mode 100644 index 0000000..46c7422 --- /dev/null +++ b/src/routes/GalleryPage.js @@ -0,0 +1,268 @@ +import React, { useEffect, useState } from "react"; + +import { useParams } from "react-router-dom"; +import firebase from "firebase/compat/app"; + +import { Stack } from "@mui/system"; +import logoSrc from "../assets/logo_chat.svg"; +import { Box, Button, CircularProgress, Container, Grid } from "@mui/material"; +import { VideoComponent } from "./ProjectionPage"; +import { Buttons } from "../Buttons"; +import moment from "moment"; +import { Logo } from "./HomePage"; + +export const GalleryPage = () => { + const { evento } = useParams(); + const [mainMessage, setMainMessage] = useState(null); + const [messages, setMessages] = useState([]); + const [eventDetails, setEventDetails] = useState(null); + + useEffect(() => { + const eventRef = firebase.database().ref(`/eventi/${evento}`); + eventRef.once("value", function (s) { + setEventDetails(s.val()); + }); + const messagesRef = firebase.database().ref(`/messaggi/${evento}`); + messagesRef.once("value", function (snapshot) { + const messaggiObject = snapshot.val(); + const messaggi = Object.keys(messaggiObject) + .map((d) => { + return messaggiObject[d]; + }) + .filter((d) => d.approvato) + .sort((a, b) => a.timestamp - b.timestamp); + setMessages(messaggi); + }); + }, [evento]); + + if (!eventDetails) return <>; + return ( +
+ + + {mainMessage == null ? ( + + ) : ( + + )} + +
+ ); +}; + +const GridView = ({ eventDetails, messages, setMainMessage }) => { + return ( + <> +

+ {eventDetails.title} +

+ {messages.length && ( + + )} + + ); +}; + +const Timestamp = ({ message }) => { + return

alle {moment(message.timestamp).format("HH:MM")}

; +}; + +const GridThumbs = ({ messages, setMainMessage }) => { + const getElement = (message) => { + let element; + if (message.immagineURL) { + element = ( + { + setMainMessage(message); + }} + width="100%" + height="auto" + sx={{ border: "4px solid white" }} + src={message.immagineURL} + alt={message.message} + /> + ); + } else { + element = ( +

+ {message.testo} +

+ ); + } + + return ( +
+ {element} + {message.autore && ( +
+

+ da {message.autore} +

+
+ )} + +
+ ); + }; + return ( + + {messages.map((message, index) => ( + + + {getElement(message)} + + + ))} + + ); +}; + +const ContenitoreMessaggio = ({ messages, setMainMessage, mainMessage }) => { + const [indiceCorrente, cambiaindiceCorrente] = useState( + messages.findIndex((d) => d === mainMessage) + ); + const messaggioDaMostrare = messages[indiceCorrente]; + return ( + + {messaggioDaMostrare.immagineURL && ( + + )} + + + {Buttons(indiceCorrente, cambiaindiceCorrente, messages, setMainMessage)} + + ); +}; + +function ImagePlaceholder({ messaggioDaMostrare }) { + const [imageLoaded, setImageLoaded] = useState(false); + + useEffect(() => { + console.log("go"); + setImageLoaded(false); + + if (messaggioDaMostrare.immagineURL) { + const image = new Image(); + image.onload = () => { + setImageLoaded(true); + }; + image.src = messaggioDaMostrare.immagineURL; + } else { + setImageLoaded(true); + } + }, [messaggioDaMostrare.immagineURL]); + + if (imageLoaded) { + return ( +
+ {messaggioDaMostrare.immagineURL && ( + + )} +
+ ); + } else { + return ( + + + + ); + } +} + +const Messaggio = ({ messaggioDaMostrare }) => { + return ( + <> +

+ {messaggioDaMostrare.testo} +

+ {messaggioDaMostrare.autore && ( +
+

+ da {messaggioDaMostrare.autore} +

+
+ )} + + + ); +}; diff --git a/src/ListaEventi.js b/src/routes/HomePage.1.js similarity index 95% rename from src/ListaEventi.js rename to src/routes/HomePage.1.js index 15b4607..feb5a96 100644 --- a/src/ListaEventi.js +++ b/src/routes/HomePage.1.js @@ -1,9 +1,9 @@ import React, { useEffect, useState } from "react"; import firebase from "firebase/compat/app"; import { CircularProgress, Container, Stack, Typography } from "@mui/material"; -import logoSrc from "./logo_chat.svg"; +import logoSrc from "../assets/logo_chat.svg"; -export const ListaEventi = () => { +export const HomePage = () => { const [eventi, cambiaEventi] = useState([]); useEffect(() => { diff --git a/src/routes/HomePage.js b/src/routes/HomePage.js new file mode 100644 index 0000000..74745b0 --- /dev/null +++ b/src/routes/HomePage.js @@ -0,0 +1,86 @@ +import React, { useEffect, useState } from "react"; +import firebase from "firebase/compat/app"; +import { CircularProgress, Container, Stack, Typography } from "@mui/material"; +import logoSrc from "../assets/logo_chat.svg"; + +export const HomePage = () => { + const [eventi, cambiaEventi] = useState([]); + + useEffect(() => { + var messagesRef = firebase.database().ref(`/eventi`); + + messagesRef.once("value", function (snapshot) { + const eventiObject = snapshot.val(); + console.log(eventiObject); + const e = Object.keys(eventiObject) + .map((d) => { + return { key: d, ...eventiObject[d] }; + }) + .sort((a, b) => { + return parseInt(a.timestamp) - parseInt(b.timestamp); + }) + .map((d, i) => { + const color = `hsl(${i * 10}, 75%, 70%`; + return ( + + ); + }); + cambiaEventi(e); + }); + }, []); + + if (!eventi) return
; + return ( + + + + + I nostri eventi + + {eventi.length === 0 && } + {eventi} + + + ); +}; + +export const Logo = () => { + return ( + logo + ); +}; diff --git a/src/MyForm.js b/src/routes/MyFormPage.js similarity index 93% rename from src/MyForm.js rename to src/routes/MyFormPage.js index 9b2ef9a..ff1f7b3 100644 --- a/src/MyForm.js +++ b/src/routes/MyFormPage.js @@ -1,15 +1,15 @@ -import logoSrc from "./logo_chat.svg"; +import logoSrc from "../assets/logo_chat.svg"; import React, { useState } from "react"; import firebase from "firebase/compat/app"; import TextField from "@mui/material/TextField"; import { Container, Stack } from "@mui/system"; import { Button, Typography } from "@mui/material"; import { useForm } from "react-hook-form"; -import Countdown from "./Countdown"; -import ImageUpload from "./ImageUpload"; +import Countdown from "../Countdown"; +import ImageUpload from "../ImageUpload"; import { useParams } from "react-router-dom"; -export const MyForm = () => { +export const MyFormPage = () => { const { evento } = useParams(); const [mandato, setMandato] = useState(false); const [imageUploading, setImageUploading] = useState(false); @@ -64,7 +64,7 @@ export const MyForm = () => { ); } return ( - +
logo { +export const ProjectionPage = () => { const { evento } = useParams(); const [messaggi, cambiaMessaggi] = useState([]); const [messaggiApprovati, cambiaMessaggiApprovati] = useState([]); @@ -89,9 +89,9 @@ const Messaggio = ({ messaggiApprovati }) => { const [messaggioDaMostrare, setMessaggioDaMostrare] = useState(null); const [indiceCorrente, cambiaindiceCorrente] = useState(0); const [imageWidth, setImageWidth] = useState(0); + const [rotation, setRotation] = useState(0); const nextMessage = () => { const newIndice = (indiceCorrente + 1) % messaggiApprovati.length; - console.log("newIndice", newIndice); cambiaindiceCorrente(newIndice); }; @@ -99,7 +99,6 @@ const Messaggio = ({ messaggiApprovati }) => { setFadeProp("in"); setMessaggioDaMostrare(newMessage); setTimeout(() => { - console.log("ready for next"); nextMessage(); }, SHOW_MESSAGE_TIME); }; @@ -113,16 +112,15 @@ const Messaggio = ({ messaggiApprovati }) => { if (newMessage.immagineURL) { const img = new Image(); img.onload = (i) => { - console.log("loaded"); - console.log(img.width, img.height); - setImageWidth(img.width > img.height ? 600 : 400); + setImageWidth(img.width > img.height ? 800 : 400); + setRotation(Math.random() * 10 - 5); showNextMessage(newMessage); }; img.src = newMessage.immagineURL; } else { showNextMessage(newMessage); } - }, 1000); + }, 3000); return () => clearTimeout(timeout); } }, [indiceCorrente]); @@ -150,7 +148,10 @@ const Messaggio = ({ messaggiApprovati }) => { )} @@ -186,7 +187,7 @@ const Messaggio = ({ messaggiApprovati }) => { export const VideoComponent = React.memo(() => { return ( ); });