Danilo Di Cuia
2 years ago
17 changed files with 488 additions and 295 deletions
@ -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 ( |
||||
<div> |
||||
{/* {imgIndex !== images.length && ( |
||||
<LinearProgress |
||||
variant="determinate" |
||||
value={(imgIndex / images.length) * 100} |
||||
style={{ position: "absolute", width: "100vw", top: "50%" }} |
||||
/> |
||||
)} |
||||
{imgIndex === images.length && ( */} |
||||
<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", |
||||
}} |
||||
> |
||||
<VideoComponent /> |
||||
{messages.length && <ContenitoreMessaggio messaggi={messages} />} |
||||
|
||||
<img |
||||
src={logoSrc} |
||||
alt="" |
||||
style={{ |
||||
width: 120, |
||||
position: "absolute", |
||||
top: 20, |
||||
right: 20, |
||||
}} |
||||
/> |
||||
</div> |
||||
{/* )} */} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const ContenitoreMessaggio = ({ messaggi }) => { |
||||
const [indiceCorrente, cambiaindiceCorrente] = useState(0); |
||||
const messaggioDaMostrare = messaggi[indiceCorrente]; |
||||
return ( |
||||
<Stack sx={{ zIndex: 1 }}> |
||||
<div> |
||||
<Stack> |
||||
{messaggioDaMostrare.immagineURL && ( |
||||
<ImagePlaceholder |
||||
messaggioDaMostrare={messaggioDaMostrare} |
||||
style={{ |
||||
maxWidth: "100%", |
||||
maxHeight: "80vh", |
||||
}} |
||||
/> |
||||
)} |
||||
<Messaggio messaggioDaMostrare={messaggioDaMostrare} /> |
||||
</Stack> |
||||
</div> |
||||
|
||||
{Buttons(indiceCorrente, cambiaindiceCorrente, messaggi)} |
||||
</Stack> |
||||
); |
||||
}; |
||||
|
||||
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 ( |
||||
<div> |
||||
{messaggioDaMostrare.immagineURL && ( |
||||
<img |
||||
alt="" |
||||
src={messaggioDaMostrare.immagineURL} |
||||
style={{ |
||||
maxWidth: "100%", |
||||
maxHeight: "65vh", |
||||
}} |
||||
/> |
||||
)} |
||||
</div> |
||||
); |
||||
} else { |
||||
return ( |
||||
<Box |
||||
sx={{ |
||||
display: "flex", |
||||
alignItems: "center", |
||||
justifyContent: "space-around", |
||||
width: "100%", |
||||
}} |
||||
> |
||||
<CircularProgress /> |
||||
</Box> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const Messaggio = ({ messaggioDaMostrare }) => { |
||||
const date = new Date(messaggioDaMostrare.timestamp); |
||||
|
||||
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, |
||||
margin: 0, |
||||
display: "inline-block", |
||||
background: "black", |
||||
padding: "0px 6px", |
||||
paddingBottom: "4px", |
||||
}} |
||||
> |
||||
da {messaggioDaMostrare.autore} |
||||
</p> |
||||
)} |
||||
<p style={{ fontFamily: "sans-serif", fontSize: ".8rem", color: "#ddd" }}> |
||||
{date.toLocaleString("it-IT", { |
||||
timeStyle: "short", |
||||
dateStyle: "short", |
||||
})} |
||||
</p> |
||||
</> |
||||
); |
||||
}; |
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
@ -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 ( |
||||
<div style={{ background: "black" }}> |
||||
<Logo /> |
||||
<Container |
||||
style={{ |
||||
fontFamily: "Lineatura", |
||||
fontWeight: "bold", |
||||
color: "white", |
||||
zIndex: 1, |
||||
position: "relative", |
||||
top: 0, |
||||
}} |
||||
> |
||||
{mainMessage == null ? ( |
||||
<GridView |
||||
eventDetails={eventDetails} |
||||
setMainMessage={setMainMessage} |
||||
messages={messages} |
||||
/> |
||||
) : ( |
||||
<ContenitoreMessaggio |
||||
messages={messages} |
||||
setMainMessage={setMainMessage} |
||||
mainMessage={mainMessage} |
||||
/> |
||||
)} |
||||
</Container> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const GridView = ({ eventDetails, messages, setMainMessage }) => { |
||||
return ( |
||||
<> |
||||
<h1 |
||||
style={{ |
||||
fontSize: "4.6rem", |
||||
}} |
||||
> |
||||
{eventDetails.title} |
||||
</h1> |
||||
{messages.length && ( |
||||
<GridThumbs messages={messages} setMainMessage={setMainMessage} /> |
||||
)} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const Timestamp = ({ message }) => { |
||||
return <p>alle {moment(message.timestamp).format("HH:MM")}</p>; |
||||
}; |
||||
|
||||
const GridThumbs = ({ messages, setMainMessage }) => { |
||||
const getElement = (message) => { |
||||
let element; |
||||
if (message.immagineURL) { |
||||
element = ( |
||||
<img |
||||
onClick={() => { |
||||
setMainMessage(message); |
||||
}} |
||||
width="100%" |
||||
height="auto" |
||||
sx={{ border: "4px solid white" }} |
||||
src={message.immagineURL} |
||||
alt={message.message} |
||||
/> |
||||
); |
||||
} else { |
||||
element = ( |
||||
<h1 |
||||
style={{ |
||||
fontSize: "1.2rem", |
||||
textAlign: "center", |
||||
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)", |
||||
}} |
||||
> |
||||
{message.testo} |
||||
</h1> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div style={{ textAlign: "center" }}> |
||||
{element} |
||||
{message.autore && ( |
||||
<div> |
||||
<p |
||||
style={{ |
||||
fontSize: 20, |
||||
margin: 0, |
||||
display: "inline-block", |
||||
background: "black", |
||||
padding: "0px 6px", |
||||
paddingBottom: "4px", |
||||
}} |
||||
> |
||||
da {message.autore} |
||||
</p> |
||||
</div> |
||||
)} |
||||
<Timestamp message={message} /> |
||||
</div> |
||||
); |
||||
}; |
||||
return ( |
||||
<Grid xs={12} sm={12} container spacing={2}> |
||||
{messages.map((message, index) => ( |
||||
<Grid item xs={6} sm={4} key={index}> |
||||
<Box |
||||
my={4} |
||||
p={2} |
||||
sx={{ overflow: "hidden", height: "100%" }} |
||||
display="flex" |
||||
alignItems="center" |
||||
justifyContent="center" |
||||
> |
||||
{getElement(message)} |
||||
</Box> |
||||
</Grid> |
||||
))} |
||||
</Grid> |
||||
); |
||||
}; |
||||
|
||||
const ContenitoreMessaggio = ({ messages, setMainMessage, mainMessage }) => { |
||||
const [indiceCorrente, cambiaindiceCorrente] = useState( |
||||
messages.findIndex((d) => d === mainMessage) |
||||
); |
||||
const messaggioDaMostrare = messages[indiceCorrente]; |
||||
return ( |
||||
<Stack sx={{ zIndex: 1 }} alignItems={"center"} justifyContent={"center"}> |
||||
{messaggioDaMostrare.immagineURL && ( |
||||
<ImagePlaceholder |
||||
messaggioDaMostrare={messaggioDaMostrare} |
||||
style={{ |
||||
maxWidth: "100%", |
||||
maxHeight: "80vh", |
||||
}} |
||||
/> |
||||
)} |
||||
<Messaggio messaggioDaMostrare={messaggioDaMostrare} /> |
||||
|
||||
{Buttons(indiceCorrente, cambiaindiceCorrente, messages, setMainMessage)} |
||||
</Stack> |
||||
); |
||||
}; |
||||
|
||||
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 ( |
||||
<div> |
||||
{messaggioDaMostrare.immagineURL && ( |
||||
<img |
||||
alt="" |
||||
src={messaggioDaMostrare.immagineURL} |
||||
style={{ |
||||
maxWidth: "100%", |
||||
maxHeight: "65vh", |
||||
}} |
||||
/> |
||||
)} |
||||
</div> |
||||
); |
||||
} else { |
||||
return ( |
||||
<Box |
||||
sx={{ |
||||
display: "flex", |
||||
alignItems: "center", |
||||
justifyContent: "space-around", |
||||
width: "100%", |
||||
}} |
||||
> |
||||
<CircularProgress /> |
||||
</Box> |
||||
); |
||||
} |
||||
} |
||||
|
||||
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 && ( |
||||
<div> |
||||
<p |
||||
style={{ |
||||
fontSize: 20, |
||||
margin: 0, |
||||
display: "inline-block", |
||||
background: "black", |
||||
padding: "0px 6px", |
||||
paddingBottom: "4px", |
||||
}} |
||||
> |
||||
da {messaggioDaMostrare.autore} |
||||
</p> |
||||
</div> |
||||
)} |
||||
<Timestamp message={messaggioDaMostrare} /> |
||||
</> |
||||
); |
||||
}; |
||||
@ -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(() => { |
||||
@ -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 ( |
||||
<div key={d.key}> |
||||
<a |
||||
style={{ |
||||
textDecoration: "none", |
||||
display: "inline-block", |
||||
color, |
||||
fontSize: "1.5rem", |
||||
fontFamily: "Lineatura", |
||||
borderBottom: `2px solid ${color}`, |
||||
}} |
||||
href={`/eventi/${d.key}`} |
||||
> |
||||
{d.title} |
||||
</a> |
||||
</div> |
||||
); |
||||
}); |
||||
cambiaEventi(e); |
||||
}); |
||||
}, []); |
||||
|
||||
if (!eventi) return <div></div>; |
||||
return ( |
||||
<Container maxWidth="md"> |
||||
<Logo /> |
||||
<Stack |
||||
spacing={2} |
||||
sx={{ |
||||
paddingTop: 20, |
||||
}} |
||||
> |
||||
<Typography |
||||
variant="p" |
||||
style={{ |
||||
color: "white", |
||||
fontFamily: "Lineatura", |
||||
}} |
||||
> |
||||
I nostri eventi |
||||
</Typography> |
||||
{eventi.length === 0 && <CircularProgress size={20} />} |
||||
{eventi} |
||||
</Stack> |
||||
</Container> |
||||
); |
||||
}; |
||||
|
||||
export const Logo = () => { |
||||
return ( |
||||
<img |
||||
alt="logo" |
||||
src={logoSrc} |
||||
style={{ |
||||
width: 120, |
||||
position: "absolute", |
||||
zIndex: 2, |
||||
top: 20, |
||||
right: 20, |
||||
}} |
||||
/> |
||||
); |
||||
}; |
||||
Loading…
Reference in new issue