diff --git a/src/components/DonatersTopList/DonatersTopList.tsx b/src/components/DonatersTopList/DonatersTopList.tsx
index bba4de5..5b21cbf 100644
--- 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
index 3214f19..0131182 100644
--- 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}
diff --git a/src/components/DonationTimer/DonationTimer.tsx b/src/components/DonationTimer/DonationTimer.tsx
index db2b17c..3b72483 100644
--- 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(null);
const [time, setTime] = useState("");
@@ -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
index 702ac75..b08bb14 100644
--- 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
index 7d07750..b8cef3c 100644
--- 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
index 8d3c046..8d09ab8 100644
--- 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
index 49418f4..fe4f295 100644
--- 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
index 9f3d3e2..adccad6 100644
--- 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
index 45199e8..423c981 100644
--- 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
index cc51056..5f696c7 100644
--- 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(null);
const [highlight, setHighlight] = useState(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,13 +126,14 @@ 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) {
@@ -131,7 +141,7 @@ export default function ReelWidget({}) {
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) => (
{option}
diff --git a/src/socket.ts b/src/socket.ts
index 27f877c..7c5fced 100644
--- 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,6 +63,12 @@ function setupCommandListener(widgetId: string, reloadFn: Function) {
}
});
}
+
+function cleanupCommandListener(widgetId: string){
+ unsubscribe(widgetId, "/topic/commands");
+}
+
+
function publish(topic: string, payload: any) {
socket.publish({
destination: topic,
@@ -68,4 +76,4 @@ function publish(topic: string, payload: any) {
});
}
-export { socket, subscribe, unsubscribe, setupCommandListener, publish };
+export { socket, subscribe, unsubscribe, setupCommandListener, cleanupCommandListener, publish };