68 lines
1.5 KiB
React
68 lines
1.5 KiB
React
import { useEffect, useState } from "react";
|
|
import { io } from "socket.io-client";
|
|
import "./App.css";
|
|
|
|
const socket = io();
|
|
|
|
export default function App() {
|
|
const [slides, setSlides] = useState([]);
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
const [previousSlide, setPreviousSlide] = useState(null);
|
|
const [mode, setMode] = useState("on");
|
|
|
|
useEffect(() => {
|
|
socket.on("slideshow:state", (state) => {
|
|
setSlides(state.slides || []);
|
|
setMode(state.mode ?? "on");
|
|
|
|
setCurrentSlide((oldSlide) => {
|
|
if (oldSlide !== state.currentSlide) {
|
|
setPreviousSlide(oldSlide);
|
|
}
|
|
|
|
return state.currentSlide;
|
|
});
|
|
|
|
setTimeout(() => {
|
|
setPreviousSlide(null);
|
|
}, 1100);
|
|
});
|
|
|
|
return () => {
|
|
socket.off("slideshow:state");
|
|
};
|
|
}, []);
|
|
|
|
if (mode === "off") {
|
|
return <div className="blank-screen" />;
|
|
}
|
|
|
|
const currentImage = slides[currentSlide];
|
|
const previousImage =
|
|
previousSlide !== null ? slides[previousSlide] : null;
|
|
|
|
if (!currentImage) {
|
|
return <div className="empty">No slides loaded</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="slideshow">
|
|
{previousImage && (
|
|
<img
|
|
key={`previous-${previousImage}`}
|
|
className="slide previous"
|
|
src={previousImage}
|
|
alt=""
|
|
/>
|
|
)}
|
|
|
|
<img
|
|
key={`current-${currentImage}`}
|
|
className="slide current"
|
|
src={currentImage}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
);
|
|
}
|