fix duplicate subscription, make reel items have same height

OpenDonationAssistant · May 13, 2024 · b9564c3 · b9564c3
1 parent 8761c11
commit b9564c3
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 44 deletions.
diff --git a/src/components/DonatersTopList/DonatersTopList.tsx b/src/components/DonatersTopList/DonatersTopList.tsx
@@ -4,7 +4,7 @@ import axios from "axios";
 import "./DonatersTopList.css";
 import { useLoaderData, useNavigate } from "react-router";
 import { findSetting } from "../utils";
-import { setupCommandListener, subscribe } from "../../socket";
+import { cleanupCommandListener, setupCommandListener, subscribe, unsubscribe } from "../../socket";
 import FontImport from "../FontImport/FontImport";
 
 const overflowHiddenForRootElement = (
@@ -73,6 +73,10 @@ export default function DonatersTopList({}: {}) {
     });
     setupCommandListener(widgetId, () => navigate(0));
     updateDonaters();
+    return () => {
+      unsubscribe(widgetId, conf.topic.alerts);
+      cleanupCommandListener(widgetId);
+    };
   }, [recipientId]);
 
   const type = findSetting(settings, "type", "All");

diff --git a/src/components/DonationGoal/DonationGoal.tsx b/src/components/DonationGoal/DonationGoal.tsx
@@ -1,7 +1,12 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useLoaderData, useNavigate } from "react-router";
 import { WidgetData } from "../../types/WidgetData";
-import { setupCommandListener, subscribe } from "../../socket";
+import {
+  cleanupCommandListener,
+  setupCommandListener,
+  subscribe,
+  unsubscribe,
+} from "../../socket";
 import { log } from "../../logging";
 import classes from "./DonationGoal.module.css";
 import { findSetting } from "../utils";
@@ -23,6 +28,10 @@ export default function DonationGoal({}) {
       navigate(0);
     });
     setupCommandListener(widgetId, () => navigate(0));
+    return () => {
+      unsubscribe(widgetId, conf.topic.goal);
+      cleanupCommandListener(widgetId);
+    };
   }, [recipientId]);
 
   useEffect(() => {
@@ -63,9 +72,6 @@ export default function DonationGoal({}) {
   };
 
   const filledColor = findSetting(settings, "filledColor", "green");
-  const filledStyle = {
-    backgroundColor: filledColor,
-  };
   const filledTextColor = findSetting(settings, "filledTextColor", "white");
   const filledFontSize = findSetting(settings, "filledFontSize", "24");
   const filledFont = findSetting(settings, "font", "Russo One");
@@ -86,17 +92,16 @@ export default function DonationGoal({}) {
               {goal.briefDescription}
             </div>
             <div
-              style={{
-                backgroundColor: backgroundColor,
-              }}
+              style={ progressbarStyle }
               className={`${classes.goalprogressbar}`}
             ></div>
             <div
               style={{
                 width: `${
-                  goal.accumulatedAmount.major / goal.requiredAmount.major * 100
+                  (goal.accumulatedAmount.major / goal.requiredAmount.major) *
+                  100
                 }%`,
-                backgroundColor: filledColor
+                backgroundColor: filledColor,
               }}
               className={`${classes.goalfilled}`}
             ></div>

diff --git a/src/components/DonationTimer/DonationTimer.tsx b/src/components/DonationTimer/DonationTimer.tsx
@@ -4,12 +4,13 @@ import axios from "axios";
 import "./DonationTimer.css";
 import { useLoaderData, useNavigate } from "react-router";
 import { findSetting } from "../utils";
-import { setupCommandListener, subscribe } from "../../socket";
+import { cleanupCommandListener, setupCommandListener, subscribe, unsubscribe } from "../../socket";
 import FontImport from "../FontImport/FontImport";
 import { log } from "../../logging";
+import { WidgetData } from "../../types/WidgetData";
 
 export default function DonationTimer({}: {}) {
-  const { recipientId, settings, conf, widgetId } = useLoaderData();
+  const { recipientId, settings, conf, widgetId } = useLoaderData() as WidgetData;
   const navigate = useNavigate();
   const [lastDonationTime, setLastDonationTime] = useState<number | null>(null);
   const [time, setTime] = useState<String>("");
@@ -22,6 +23,10 @@ export default function DonationTimer({}: {}) {
       message.ack();
     });
     setupCommandListener(widgetId, () => navigate(0));
+    return () => {
+      unsubscribe(widgetId, conf.topic.alerts);
+      cleanupCommandListener(widgetId);
+    };
   }, [recipientId]);
 
   useEffect(() => {

diff --git a/src/components/MediaWidget/MediaWidget.tsx b/src/components/MediaWidget/MediaWidget.tsx
@@ -4,7 +4,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import { useLoaderData, useNavigate } from "react-router";
 import "./MediaWidget.css";
 import { PlaylistController } from "./PlaylistController";
-import { publish, setupCommandListener } from "../../socket";
+import { cleanupCommandListener, publish, setupCommandListener } from "../../socket";
 import Menu from "../Menu/Menu";
 import { PaymentPageConfig } from "./PaymentPageConfig";
 import RequestsDisabledWarning from "./RequestsDisabledWarning";
@@ -65,6 +65,9 @@ export default function MediaWidget({}: {}) {
       },
       playlistController: playlistController.current,
     });
+    return () => {
+      cleanupCommandListener(widgetId);
+    };
   }, [recipientId, widgetId]);
 
   useEffect(() => {

diff --git a/src/components/MediaWidget/VideoJSComponent.tsx b/src/components/MediaWidget/VideoJSComponent.tsx
@@ -112,7 +112,7 @@ export default function VideoJSComponent({
 
   useEffect(() => {
     subscribe(widgetId, conf.topic.playerCommands, (message) => {
-      log.debug(`message: ${JSON.stringify(message)}`);
+      log.debug({message: message}, "Received player command");
       if (commandHandler.current) {
         commandHandler.current(message);
       }

diff --git a/src/components/PaymentAlerts/PaymentAlerts.tsx b/src/components/PaymentAlerts/PaymentAlerts.tsx
@@ -3,7 +3,7 @@ import classes from "./PaymentAlerts.module.css";
 import { useLoaderData, useNavigate } from "react-router";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { log } from "../../logging";
-import { setupCommandListener, subscribe } from "../../socket";
+import { cleanupCommandListener, setupCommandListener, subscribe, unsubscribe } from "../../socket";
 import { AlertController } from "../../logic/alert/AlertController";
 import MessageBody from "./sections/MessageBody";
 import MessageTitle from "./sections/MessageTitle";
@@ -41,6 +41,10 @@ function PaymentAlerts({}: {}) {
       message.ack();
     });
     setupCommandListener(widgetId, () => navigate(0));
+    return () => {
+      unsubscribe(widgetId, conf.topic.alertWidgetCommans);
+      cleanupCommandListener(widgetId);
+    }
   }, [widgetId]);
 
   return (

diff --git a/src/components/Payments/Payments.tsx b/src/components/Payments/Payments.tsx
@@ -6,7 +6,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import axios from "axios";
 import Menu from "../Menu/Menu";
 import { findSetting } from "../utils";
-import { publish, setupCommandListener, subscribe } from "../../socket";
+import { cleanupCommandListener, publish, setupCommandListener, subscribe, unsubscribe } from "../../socket";
 import { log } from "../../logging";
 import TestAlertPopup from "../TestAlertPopup/TestAlertPopup";
 import MenuEventButton from "../Menu/MenuEventButton";
@@ -55,6 +55,11 @@ function Payments({}: {}) {
       message.ack();
     });
     setupCommandListener(widgetId, () => navigate(0));
+    return () => {
+      unsubscribe(widgetId, conf.topic.alertStatus);
+      unsubscribe(widgetId, conf.topic.alerts);
+      cleanupCommandListener(widgetId);
+    };
   }, [recipientId]);
 
   function setDisplayedTimeForTodayPayments(todayPayments) {

diff --git a/src/components/PlayerInfo/PlayerInfo.tsx b/src/components/PlayerInfo/PlayerInfo.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { useLoaderData, useNavigate } from "react-router";
 import { findSetting } from "../utils";
-import { setupCommandListener, subscribe } from "../../socket";
+import { cleanupCommandListener, setupCommandListener, subscribe, unsubscribe } from "../../socket";
 import { log } from "../../logging";
 import FontImport from "../FontImport/FontImport";
 
@@ -27,6 +27,10 @@ function PlayerInfo() {
       message.ack();
     });
 		setupCommandListener(widgetId, () => navigate(0));
+    return () => {
+      unsubscribe(widgetId, conf.topic.player);
+      cleanupCommandListener(widgetId);
+    };
   }, [widgetId]);
 
   const fontSize = findSetting(settings, "fontSize", "24px");

diff --git a/src/pages/Reel/ReelWidget.module.css b/src/pages/Reel/ReelWidget.module.css
@@ -1,10 +1,17 @@
 .reelitem {
-  border: 1px solid;
   text-align: center;
   padding-top: 20px;
   padding-bottom: 20px;
   font-size: 30px;
+  height: min-content;
+}
+
+.reelitemcontainer {
+  border: 1px solid;
   border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
 .active {

diff --git a/src/pages/Reel/ReelWidget.tsx b/src/pages/Reel/ReelWidget.tsx
@@ -4,7 +4,12 @@ import "@glidejs/glide/dist/css/glide.theme.min.css";
 
 import React, { useEffect, useRef, useState } from "react";
 import { useLoaderData, useNavigate } from "react-router-dom";
-import { setupCommandListener, subscribe } from "../../socket";
+import {
+  cleanupCommandListener,
+  setupCommandListener,
+  subscribe,
+  unsubscribe,
+} from "../../socket";
 import classes from "./ReelWidget.module.css";
 import { log } from "../../logging";
 import { findSetting } from "../../components/utils";
@@ -18,28 +23,32 @@ export default function ReelWidget({}) {
   const [active, setActive] = useState<string | null>(null);
   const [highlight, setHighlight] = useState<boolean>(false);
 
-  function handleSelection(selection: string){
-      if (!glideRef.current?.classList.contains("hidden")) {
-        setTimeout(() => handleSelection(selection), 40000);
-        return;
-      }
-      setActive(selection);
-      setTimeout(() => {
-        log.debug(`clear active and highlight`);
-        setActive(null);
-        setHighlight(false);
-        glideRef.current?.classList.add("hidden");
-      }, 20000);
+  function handleSelection(selection: string) {
+    if (!glideRef.current?.classList.contains("hidden")) {
+      setTimeout(() => handleSelection(selection), 40000);
+      return;
+    }
+    setActive(selection);
+    setTimeout(() => {
+      log.debug(`clear active and highlight`);
+      setActive(null);
+      setHighlight(false);
+      glideRef.current?.classList.add("hidden");
+    }, 20000);
   }
 
   useEffect(() => {
     subscribe(widgetId, conf.topic.reel, (message) => {
-      log.info(`Received reel command: ${message.body}`);
+      log.info({ message: message }, "Received reel command");
       let json = JSON.parse(message.body);
       handleSelection(json.selection);
       message.ack();
     });
     setupCommandListener(widgetId, () => navigate(0));
+    return () => {
+      unsubscribe(widgetId, conf.topic.reel);
+      cleanupCommandListener(widgetId);
+    };
   }, [widgetId]);
 
   useEffect(() => {
@@ -89,7 +98,7 @@ export default function ReelWidget({}) {
     const scroll = () => {
       glide.go(">");
       glide.go(">");
-    }
+    };
     console.log(`selected: ${selected}`);
     if (iteration === 1) {
       console.log(`setActive to ${selected}`);
@@ -117,21 +126,22 @@ export default function ReelWidget({}) {
   const selectionColor = findSetting(settings, "selectionColor", "green");
   const slideStyle = {
     borderColor: borderColor,
+    alignItems: "stretch",
   };
   const backgroundImage = findSetting(settings, "backgroundImage", "");
 
-  function calcItemStyle(option: string){
+  function calcItemStyle(option: string) {
     const style = {};
     style.borderColor = borderColor;
-    if (highlight && active === option){
+    if (highlight && active === option) {
       style.backgroundColor = selectionColor;
     } else {
       if (backgroundImage) {
         style.backgroundSize = "cover";
         style.backgroundImage = `url(${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${backgroundImage})`;
       }
     }
-    log.debug({style}, "calculated style for slide item");
+    log.debug({ style }, "calculated style for slide item");
     return style;
   }
 
@@ -149,16 +159,14 @@ export default function ReelWidget({}) {
               {options.map((option) => (
                 <div
                   key={option}
-                  style={{
-                    backgroundImage: `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${backgroundImage}`,
-                  }}
+                  style={calcItemStyle(option)}
+                  className={`${classes.reelitemcontainer} ${
+                    highlight && active === option ? classes.active : ""
+                  }`}
                 >
                   <li
                     key={option}
-                    style={calcItemStyle(option)}
-                    className={`glide__slide ${classes.reelitem} ${
-                      highlight && active === option ? classes.active : ""
-                    }`}
+                    className={`glide__slide ${classes.reelitem}`}
                   >
                     {option}
                   </li>

diff --git a/src/socket.ts b/src/socket.ts
@@ -47,6 +47,8 @@ function subscribe(id: string, topic: string, onMessage: messageCallbackType) {
 function unsubscribe(id: string, topic: string){
   log.info(`Deleting subscription ${id} with topic ${topic}`);
   socket.unsubscribe(`${id}-${topic}`);
+  const existingListenerIndex = listeners.findIndex(listener => listener.id === id && listener.topic === topic);
+  listeners.splice(existingListenerIndex, 1);
 }
 
 function setupCommandListener(widgetId: string, reloadFn: Function) {
@@ -61,11 +63,17 @@ function setupCommandListener(widgetId: string, reloadFn: Function) {
     }
   });
 }
+
+function cleanupCommandListener(widgetId: string){
+  unsubscribe(widgetId, "/topic/commands");
+}
+
+
 function publish(topic: string, payload: any) {
   socket.publish({
     destination: topic,
     body: JSON.stringify(payload),
   });
 }
 
-export { socket, subscribe, unsubscribe, setupCommandListener, publish };
+export { socket, subscribe, unsubscribe, setupCommandListener, cleanupCommandListener, publish };