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 React, { useEffect, useState } from "react"; |
||||||
import firebase from "firebase/compat/app"; |
import firebase from "firebase/compat/app"; |
||||||
import { CircularProgress, Container, Stack, Typography } from "@mui/material"; |
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([]); |
const [eventi, cambiaEventi] = useState([]); |
||||||
|
|
||||||
useEffect(() => { |
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