refack PaymentAlerts, use different voices for alert title and message

package.json

@@ -12,6 +12,9 @@
     "@types/node": "^20.8.4",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
+    "@types/react-toggle": "^4.0.5",
+    "@types/uuid": "^9.0.7",
+    "@types/video.js": "^7.3.56",
     "axios": "^1.5.1",
     "bootstrap": "^5.3.1",
     "howler": "^2.2.3",
@@ -24,6 +27,7 @@
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "react-stomp": "^5.1.0",
+    "react-toggle": "^4.1.3",
     "stomp-client": "^0.9.0",
     "stompjs": "^2.3.3",
     "talkify-tts": "^3.9.3",

src/components/ConfigurationPage/ConfigurationPage.tsx

@@ -36,6 +36,7 @@ const types = [
   { name: "payments", description: "Payment History" },
   { name: "player-control", description: "Music Player Remote Control" },
   { name: "donation-timer", description: "Donation Timer" },
+  { name: "donation-timer", description: "Donation Timer" },
 ];
 
 export default function ConfigurationPage({}: {}) {

src/components/ConfigurationPage/WidgetSettings.ts

@@ -134,6 +134,9 @@ const defaultSettings = {
   "player-control": {
     properties: [],
   },
+  "player-popup": {
+    properties: [],
+  },
   payments: {
     properties: [
       {

src/components/FontLoader/FontLoader.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import FontImport from "../FontImport/FontImport";
+import { IFontProvider } from "./IFontLoader";
+
+export default function FontLoader({
+  fontProvider,
+}: {
+  fontProvider: IFontProvider;
+}) {
+  const [fonts, setFonts] = useState<string[]>([]);
+
+  useEffect(() => {
+    fontProvider.addFontLoader({
+      addFont: (font) => {
+        setFonts((oldFonts) => {
+          return Array.from(new Set(oldFonts).add(font));
+        });
+      },
+    });
+  }, [fontProvider]);
+
+  return (
+    <>
+      {fonts.map((font) => (
+        <FontImport key={font} font={font} />
+      ))}
+    </>
+  );
+}

src/components/FontLoader/IFontLoader.tsx

@@ -0,0 +1,6 @@
+export interface IFontLoader {
+  addFont(font: string):void;
+}
+export interface IFontProvider {
+  addFontLoader(loader: IFontLoader):void;
+}

src/components/ImageCache/IImageProvider.ts

@@ -0,0 +1,3 @@
+interface IImageProvider {
+  addImageLoader(loader: IImageLoader): void;
+}

src/components/ImageCache/ImageCache.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from "react";
+
+export default function ImageCache({
+  imageProvider,
+}: {
+  imageProvider: IImageProvider;
+}) {
+  const [images, setImages] = useState<string[]>([]);
+
+  useEffect(() => {
+    imageProvider.addImageLoader({
+      addImage: (image) => {
+        setImages((oldImages) => {
+          return Array.from(new Set(oldImages).add(image));
+        });
+      },
+    });
+  }, [imageProvider]);
+
+  return (
+    <>
+      {images.map((image) => (
+        <img
+          key={image}
+          style={{ display: "none" }}
+          src={`${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${image}`}
+        />
+      ))}
+    </>
+  );
+}

src/components/PaymentAlerts/PaymentAlerts.module.css

@@ -0,0 +1,11 @@
+.message {
+	width: 100%;
+	flex-grow: 0;
+}
+
+.paymentAlerts {
+  height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}