Annoucements 1.5

client/src/App.jsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+import { io } from "socket.io-client";
+import "./App.css";
+
+const socket = io("http://10.40.0.2:7532");
+
+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>
+  );
+}