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