Danilo Di Cuia
3 years ago
6 changed files with 220 additions and 4 deletions
@ -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 ( |
||||
<div> |
||||
<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", |
||||
}} |
||||
> |
||||
<Stack> |
||||
<div> |
||||
{messaggioDaMostrare && ( |
||||
<ImagePlaceholder |
||||
messaggioDaMostrare={messaggioDaMostrare} |
||||
style={{ |
||||
maxWidth: "100%", |
||||
maxHeight: "80vh", |
||||
}} |
||||
/> |
||||
)} |
||||
</div> |
||||
|
||||
<Stack |
||||
style={{ |
||||
display: "flex", |
||||
width: "100%", |
||||
position: "absolute", |
||||
top: "50%", |
||||
left: 0, |
||||
alignItems: "center", |
||||
justifyContent: "space-between", |
||||
padding: 20, |
||||
boxSizing: "border-box", |
||||
}} |
||||
direction="row" |
||||
> |
||||
{indiceCorrente > 0 && ( |
||||
<IconButton |
||||
onClick={() => cambiaindiceCorrente(indiceCorrente + 1)} |
||||
> |
||||
<ArrowBackIcon style={{ fontSize: "3rem" }} /> |
||||
</IconButton> |
||||
)} |
||||
{indiceCorrente > 0 && ( |
||||
<IconButton |
||||
onClick={() => cambiaindiceCorrente(indiceCorrente + 1)} |
||||
> |
||||
<ArrowForwardIcon style={{ fontSize: "3rem" }} /> |
||||
</IconButton> |
||||
)} |
||||
</Stack> |
||||
</Stack> |
||||
<img |
||||
src={logoSrc} |
||||
style={{ |
||||
width: 120, |
||||
position: "absolute", |
||||
top: 20, |
||||
right: 20, |
||||
}} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
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 ( |
||||
<Fade in={imageLoaded}> |
||||
<div> |
||||
{messaggioDaMostrare.immagineURL && ( |
||||
<img |
||||
alt="" |
||||
src={messaggioDaMostrare.immagineURL} |
||||
style={{ |
||||
maxWidth: "100%", |
||||
maxHeight: "80vh", |
||||
}} |
||||
/> |
||||
)} |
||||
<Messaggio messaggioDaMostrare={messaggioDaMostrare} /> |
||||
</div> |
||||
</Fade> |
||||
); |
||||
} |
||||
|
||||
const Messaggio = ({ messaggioDaMostrare }) => { |
||||
return ( |
||||
<> |
||||
<h1 |
||||
style={{ |
||||
fontSize: messaggioDaMostrare.immagineURL ? 20 : 50, |
||||
textShadow: |
||||
"0px 0px 10px rgba(0,0,0,100), 0px 0px 10px rgba(0,0,0,100), 0px 0px 10px rgba(0,0,0,100)", |
||||
}} |
||||
> |
||||
{messaggioDaMostrare.testo} |
||||
</h1> |
||||
{messaggioDaMostrare.autore && ( |
||||
<p |
||||
style={{ |
||||
fontSize: 20, |
||||
display: "inline-block", |
||||
background: "black", |
||||
padding: "0px 6px", |
||||
paddingBottom: "4px", |
||||
}} |
||||
> |
||||
da {messaggioDaMostrare.autore} |
||||
</p> |
||||
)} |
||||
</> |
||||
); |
||||
}; |
||||
Binary file not shown.
Loading…
Reference in new issue