danilo/letsswingchat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

small fixes

Browse Source
This commit is contained in:
Danilo Di Cuia
2023-03-27 09:15:13 +02:00
parent 2be0829d35
commit c9ebed81c6
3 changed files with 39 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+2 -8
View File
@@ -5,10 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta name="description" content="Let's swing Chat!" />
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
@@ -23,8 +20,5 @@
--> -->
<title>Let's swing chat</title> <title>Let's swing chat</title>
</head> </head>
<body style="margin: 0"> <body style="margin: 0"></body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html> </html>
src/Galleria.js
+36 -31
View File
@@ -9,6 +9,7 @@ import IconButton from "@mui/material/IconButton";
import { Stack } from "@mui/system"; import { Stack } from "@mui/system";
import logoSrc from "./logo_chat.svg"; import logoSrc from "./logo_chat.svg";
import { Fade, LinearProgress } from "@mui/material"; import { Fade, LinearProgress } from "@mui/material";
import { VideoComponent } from "./Proiezione";
export const Galleria = () => { export const Galleria = () => {
const { evento } = useParams(); const { evento } = useParams();
@@ -66,36 +67,37 @@ export const Galleria = () => {
style={{ position: "absolute", width: "100vw", top: "50%" }} style={{ position: "absolute", width: "100vw", top: "50%" }}
/> />
)} )}
<div {imgIndex === images.length && (
style={{ <div
margin: "0 auto",
fontFamily: "Lineatura",
width: "90vw",
height: "100vh",
fontWeight: "bold",
color: "white",
display: "flex",
justifyContent: "space-around",
alignContent: "center",
alignItems: "center",
textAlign: "center",
}}
>
{imgIndex === images.length && (
<ContenitoreMessaggio messaggi={messages} />
)}
<img
src={logoSrc}
alt=""
style={{ style={{
width: 120, margin: "0 auto",
position: "absolute", fontFamily: "Lineatura",
top: 20, width: "90vw",
right: 20, height: "100vh",
fontWeight: "bold",
color: "white",
display: "flex",
justifyContent: "space-around",
alignContent: "center",
alignItems: "center",
textAlign: "center",
}} }}
/> >
</div> <VideoComponent />
<ContenitoreMessaggio messaggi={messages} />
<img
src={logoSrc}
alt=""
style={{
width: 120,
position: "absolute",
top: 20,
right: 20,
}}
/>
</div>
)}
</div> </div>
); );
}; };
@@ -105,7 +107,7 @@ const ContenitoreMessaggio = ({ messaggi }) => {
const messaggioDaMostrare = messaggi[indiceCorrente]; const messaggioDaMostrare = messaggi[indiceCorrente];
console.log(indiceCorrente); console.log(indiceCorrente);
return ( return (
<Stack> <Stack sx={{ zIndex: 1 }}>
<div> <div>
{messaggioDaMostrare && ( {messaggioDaMostrare && (
<ImagePlaceholder <ImagePlaceholder
@@ -183,7 +185,7 @@ function ImagePlaceholder({ messaggioDaMostrare }) {
src={messaggioDaMostrare.immagineURL} src={messaggioDaMostrare.immagineURL}
style={{ style={{
maxWidth: "100%", maxWidth: "100%",
maxHeight: "80vh", maxHeight: "65vh",
}} }}
/> />
)} )}
@@ -221,7 +223,10 @@ const Messaggio = ({ messaggioDaMostrare }) => {
</p> </p>
)} )}
<p style={{ fontFamily: "sans-serif", fontSize: ".8rem", color: "#333" }}> <p style={{ fontFamily: "sans-serif", fontSize: ".8rem", color: "#333" }}>
{date.toLocaleString("it-IT")} {date.toLocaleString("it-IT", {
timeStyle: "short",
dateStyle: "short",
})}
</p> </p>
</> </>
); );
src/Proiezione.js
+1 -1
View File
@@ -184,7 +184,7 @@ const Messaggio = ({ messaggiApprovati }) => {
); );
}; };
const VideoComponent = React.memo(() => { export const VideoComponent = React.memo(() => {
return ( return (
<video autoPlay muted loop id="myVideo"> <video autoPlay muted loop id="myVideo">
<source src={videoSrc} type="video/mp4" /> <source src={videoSrc} type="video/mp4" />