diff --git a/package.json b/package.json index b0027cc..21b6a10 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "messaggi", "version": "0.1.0", "private": true, + "homepage": "https://letsswing.it/messaggi", "dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", diff --git a/public/index.html b/public/index.html index 6798c03..f1a95b2 100644 --- a/public/index.html +++ b/public/index.html @@ -10,10 +10,7 @@ content="Web site created using create-react-app" /> - + - React App + Let's swing chat diff --git a/src/App.css b/src/App.css index e69de29..2479a2a 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,50 @@ +@font-face { + font-family: "LineaturaLight"; + src: url("./fonts/Lineatura-Light.woff") format("woff"), + url("./fonts/Lineatura-Light.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Lineatura"; + src: url("./fonts/Lineatura.woff") format("woff"), + url("./fonts/Lineatura.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +#myVideo { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + min-width: 100%; + min-height: 100%; +} + +.fade-in { + transition: opacity 1s ease; +} +.fade-out { + opacity: 0; + transition: opacity 1s ease; +} + +.okbutton { + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} diff --git a/src/ImageUpload.js b/src/ImageUpload.js index 27aed9d..f9217bd 100644 --- a/src/ImageUpload.js +++ b/src/ImageUpload.js @@ -2,6 +2,7 @@ import React, { useState } from "react"; import firebase from "firebase/app"; import "firebase/storage"; import { Stack } from "@mui/system"; +import { Button } from "@mui/material"; const IDLE = 0; const IMAGE_SET = 1; @@ -16,66 +17,88 @@ function ImageUpload({ onImageURLSet }) { const handleChange = (e) => { if (e.target.files[0]) { - setImage(e.target.files[0]); - setState(1); - } - }; + // setState(1); + let image = e.target.files[0]; - const handleUpload = () => { - const uploadTask = firebase - .storage() - .ref(`images/${image.name}`) - .put(image); + const uploadTask = firebase + .storage() + .ref(`images/${image.name}`) + .put(image); - setState(2); + setState(UPLOADING); - uploadTask.on( - "state_changed", - (snapshot) => { - const progress = Math.round( - (snapshot.bytesTransferred / snapshot.totalBytes) * 100 - ); - setProgress(progress); - }, - (error) => { - console.log(error); - }, - () => { - firebase - .storage() - .ref("images") - .child(image.name) - .getDownloadURL() - .then((url) => { - setImageUrl(url); - setProgress(0); - setImage(null); - onImageURLSet(url); - setState(3); - }); - } - ); + uploadTask.on( + "state_changed", + (snapshot) => { + const progress = Math.round( + (snapshot.bytesTransferred / snapshot.totalBytes) * 100 + ); + setProgress(progress); + }, + (error) => { + console.log(error); + }, + () => { + firebase + .storage() + .ref("images") + .child(image.name) + .getDownloadURL() + .then((url) => { + setImageUrl(url); + setProgress(0); + setImage(null); + onImageURLSet(url); + setState(3); + }); + } + ); + } }; let componente; switch (state) { default: case IDLE: - componente = ; + componente = ( + <> + + + + ); break; case IMAGE_SET: componente = ( - + - - - + riprova + + ); @@ -83,9 +106,8 @@ function ImageUpload({ onImageURLSet }) { case UPLOADING: componente = ( -
- - +
+
); break; @@ -98,7 +120,7 @@ function ImageUpload({ onImageURLSet }) { ); } - return {componente}; + return componente; } export default ImageUpload; diff --git a/src/MyForm.js b/src/MyForm.js index c3fdbfa..d060b34 100644 --- a/src/MyForm.js +++ b/src/MyForm.js @@ -1,8 +1,9 @@ +import logoSrc from "./logo_p.svg"; import React, { useState } from "react"; import firebase from "firebase/app"; import TextField from "@mui/material/TextField"; import { Container, Stack } from "@mui/system"; -import { Button } from "@mui/material"; +import { Button, Typography } from "@mui/material"; import { useForm } from "react-hook-form"; import Countdown from "./Countdown"; import ImageUpload from "./ImageUpload"; @@ -39,11 +40,26 @@ export const MyForm = () => { ); } return ( - + +
+ + + Manda un messaggio! + +
- { label="da" variant="outlined" /> -
diff --git a/src/Proiezione.js b/src/Proiezione.js index cc7dc67..a49318a 100644 --- a/src/Proiezione.js +++ b/src/Proiezione.js @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import firebase from "firebase/app"; -import { Button, Grid } from "@mui/material"; -import { Admin } from "./Admin"; -import { MyForm } from "./MyForm"; +import { Button, Grid, Stack } from "@mui/material"; +import videoSrc from "./video.mp4"; +import logoSrc from "./logo.svg"; import { useInterval } from "./Countdown"; window.debug = false; @@ -16,8 +16,8 @@ export const Proiezione = () => { var messagesRef = firebase.database().ref("/messaggi"); messagesRef.on("child_added", function (snapshot) { + console.log("child_added"); var messaggio = snapshot.val(); - console.log(messaggio); cambiaMessaggi((oldArray) => { const newArray = [...oldArray, messaggio].sort( (a, b) => b.timestamp - a.timestamp @@ -28,6 +28,7 @@ export const Proiezione = () => { }); messagesRef.on("child_changed", function (snapshot) { + console.log("child_changed"); const messaggio = snapshot.val(); cambiaMessaggi((oldArray) => { const newArray = [...oldArray]; @@ -46,15 +47,14 @@ export const Proiezione = () => { cambiaindiceCorrente(newIndice); }; - const ContainerMessaggio = () => { + const ContainerMessaggio = ({ messaggiApprovati, indiceCorrente }) => { if (!messaggiApprovati.length) { return
nessun messaggio
; } else { - const messaggioCorrente = messaggiApprovati[indiceCorrente]; - return ( ); @@ -63,23 +63,20 @@ export const Proiezione = () => { return (
- + + - - + />
); }; @@ -97,31 +94,91 @@ const Immagine = ({ url }) => { >
); }; -const Messaggio = ({ nextMessage, messaggioCorrente }) => { - const [timeLeft, setTimeLeft] = useState(5); + +const Messaggio = ({ nextMessage, messaggiApprovati, indiceCorrente }) => { + const [timeLeft, setTimeLeft] = useState(6); + const [fadeProp, setFadeProp] = useState("in"); + const [messaggioDaMostrare, setMessaggioDaMostrare] = useState(null); + + useEffect(() => { + if (messaggiApprovati[indiceCorrente] != messaggioDaMostrare) { + setFadeProp("out"); + setTimeout(() => { + setMessaggioDaMostrare(messaggiApprovati[indiceCorrente]); + setFadeProp("in"); + }, 1000); + } + }, [messaggiApprovati, indiceCorrente]); useInterval(() => { if (timeLeft === 1) { - nextMessage(); + setFadeProp("out"); + setTimeout(() => { + nextMessage(); + }, 2000); } else { setTimeLeft(timeLeft - 1); } }, 1000); return ( -
- {messaggioCorrente.immagineURL && ( - - )} -

{messaggioCorrente.testo}

-

da {messaggioCorrente.autore}

+
+
+ {messaggioDaMostrare && ( +
+ {messaggioDaMostrare.immagineURL && ( + + )} +

+ {messaggioDaMostrare.testo} +

+

+ da {messaggioDaMostrare.autore} +

- {debug && ( -
- - {timeLeft} -
- )} + {debug && ( +
+ + {timeLeft} +
+ )} +
+ )} +
); }; + +const VideoComponent = React.memo(() => { + return ( + + ); +}); diff --git a/src/fonts/Lineatura-Light.ttf b/src/fonts/Lineatura-Light.ttf new file mode 100644 index 0000000..4b45d96 Binary files /dev/null and b/src/fonts/Lineatura-Light.ttf differ diff --git a/src/fonts/Lineatura-Light.woff b/src/fonts/Lineatura-Light.woff new file mode 100644 index 0000000..69d9fe1 Binary files /dev/null and b/src/fonts/Lineatura-Light.woff differ diff --git a/src/fonts/Lineatura.ttf b/src/fonts/Lineatura.ttf new file mode 100644 index 0000000..0eff2f0 Binary files /dev/null and b/src/fonts/Lineatura.ttf differ diff --git a/src/fonts/Lineatura.woff b/src/fonts/Lineatura.woff new file mode 100644 index 0000000..ec1c051 Binary files /dev/null and b/src/fonts/Lineatura.woff differ diff --git a/src/index.js b/src/index.js index 6b34db0..dea9004 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +import "./App.css"; import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; diff --git a/src/logo.svg b/src/logo.svg index 9dfc1c0..4e0dfce 100644 --- a/src/logo.svg +++ b/src/logo.svg @@ -1 +1,19 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + diff --git a/src/logo_p.svg b/src/logo_p.svg new file mode 100644 index 0000000..a7f9d52 --- /dev/null +++ b/src/logo_p.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/video.mp4 b/src/video.mp4 new file mode 100644 index 0000000..e9bcaff Binary files /dev/null and b/src/video.mp4 differ