feat: added default layout when starting first time

Author: olzzon

src/client/Components/Overlay.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { io } from "socket.io-client";
-import { ILabelAndTallyState, ISource } from "../../sharedcode/interfaces";
+import { IGlobalSettings, ILabelAndTallyState, ISettings, ISource } from "../../sharedcode/interfaces";
 import * as IO from "../../sharedcode/IO_CONSTANTS";
 import "../style/app.css";
 import { SourceOverlay } from "./SourceOverlay";
 
 const Overlay = () => {
   const [sources, setSources] = useState<ISource[]>([]);
+  const [globalSettings, setGlobalSettings] = useState<IGlobalSettings>({} as IGlobalSettings);
   const [labelAndTallyState, setLabelAndTallyState] = useState<
     ILabelAndTallyState[]
   >([]);
@@ -16,8 +17,9 @@ const Overlay = () => {
     console.log("socketClient :", socketClient);
     socketClient.emit(IO.GET_SETTINGS);
     socketClient
-      .on(IO.SEND_SETTINGS, (receivedSources: ISource[]) => {
-        setSources(receivedSources);
+      .on(IO.SEND_SETTINGS, (receivedSettings: ISettings) => {
+        setSources(receivedSettings.sources);
+        setGlobalSettings(receivedSettings.globalSettings);
       })
       .on(IO.SEND_STATE, (receivedState: ILabelAndTallyState[]) => {
         setLabelAndTallyState(receivedState);
@@ -31,6 +33,7 @@ const Overlay = () => {
           <SourceOverlay
             key={index}
             source={source}
+            globalSettings={globalSettings}
             labelAndTallyState={labelAndTallyState[source.emberStateIndex]}
           />
         ))}

src/client/Components/SourceOverlay.tsx

@@ -1,17 +1,20 @@
 import React from "react";
 import {
+  IGlobalSettings,
   ILabelAndTallyState,
   ISource,
   ISourceElement,
 } from "../../sharedcode/interfaces";
 
 interface ISourceOverlayProps {
   source: ISource;
+  globalSettings: IGlobalSettings;
   labelAndTallyState: ILabelAndTallyState;
 }
 
 const windowStyling = (
   source: ISource,
+  globalSettings: IGlobalSettings,
   tally: boolean,
   tallyColor: string
 ): React.CSSProperties => {
@@ -21,14 +24,17 @@ const windowStyling = (
     left: source.positionX,
     width: source.width,
     height: source.height,
-    border: "solid 3px " + (tally ? tallyColor : "grey"),
+    border: "solid " + globalSettings.borderWidth + " " + (tally ? tallyColor : "grey"),
+    borderRadius: globalSettings.borderRadius,
     color: "red",
     fontSize: "1.5rem",
+    fontFamily: globalSettings.fontFamily,
   };
 };
 
 const labelStyling = (
   element: ISourceElement,
+  globalSettings: IGlobalSettings,
   tallyValue: boolean,
   tallyColor: string
 ): React.CSSProperties => {
@@ -42,6 +48,9 @@ const labelStyling = (
     height: element.height || 50,
     color: element.color || "white",
     backgroundColor: backgroundColor,
+    fontFamily: globalSettings.fontFamily,
+    border: "solid " + globalSettings.borderWidth + " " + (tally ? tallyColor : "grey"),
+    borderRadius: globalSettings.borderRadius,
   };
 };
 
@@ -50,6 +59,7 @@ export const SourceOverlay = (props: ISourceOverlayProps) => {
     <div
       style={windowStyling(
         props.source,
+        props.globalSettings,
         props.labelAndTallyState?.tally[0],
         props.source.tallyColors[0]
       )}
@@ -60,6 +70,7 @@ export const SourceOverlay = (props: ISourceOverlayProps) => {
             key={index}
             style={labelStyling(
               element,
+              props.globalSettings,
               props.labelAndTallyState.tally[element.tallyIndex],
               props.source.tallyColors[element.tallyIndex]
             )}

src/server/index.ts

@@ -4,14 +4,14 @@ const server = require("http").Server(app);
 const io = require("socket.io")(server);
 const path = require("path");
 import * as IO from "../sharedcode/IO_CONSTANTS";
-import { ILabelAndTallyState, ISource } from "../sharedcode/interfaces";
+import { ILabelAndTallyState, ISettings, ISource } from "../sharedcode/interfaces";
 import {
   getSettings,
   saveLabelTallyState,
 } from "./utils/storage";
 import { HandleEmberServer } from "./emberserver";
 
-let sources: ISource[] = getSettings();
+let settings: ISettings = getSettings();
 let labelAndTallyState: ILabelAndTallyState[] = [];
 
 const handleEmberServer = new HandleEmberServer();
@@ -25,7 +25,7 @@ app.get("/", (req: any, res: any) => {
 io.on("connection", (socket: any) => {
   console.log("User connected :", socket.id);
   const clientTimerState = setInterval(() => {
-    sources = getSettings();
+    settings = getSettings();
     let oldState = labelAndTallyState
     labelAndTallyState = handleEmberServer.getEmberState();
     if (JSON.stringify(oldState) !== JSON.stringify(labelAndTallyState)) {
@@ -35,15 +35,15 @@ io.on("connection", (socket: any) => {
     }
   }, 100);
   const clientTimerSettings = setInterval(
-    () => socket.emit(IO.SEND_SETTINGS, sources),
+    () => socket.emit(IO.SEND_SETTINGS, settings),
     2000
   );
 
   socket
     .on(IO.GET_SETTINGS, () => {
       console.log("Client requested Source list");
       socket.emit(IO.SEND_STATE, labelAndTallyState);
-      socket.emit(IO.SEND_SETTINGS, sources)
+      socket.emit(IO.SEND_SETTINGS, settings)
     })
     .on("disconnect", () => {
       console.log("User disconnected");