Fixing hydration and race issues

src/components/LoadingPage.tsx

@@ -9,7 +9,7 @@ export const LoadingPage: React.FC<Props> = (props) => {
   const imgSrc = AppearanceHelper.getLogoLight(props.config?.appearance, "/images/logo.png")
   return (
     <div className="smallCenterBlock" style={{ marginTop: 100 }}>
-      <img src={imgSrc} alt="logo" style={{ marginBottom: 50 }} />
+      {imgSrc && <img src={imgSrc} alt="logo" style={{ marginBottom: 50 }} />}
       <Loading />
     </div>
   )

src/components/layouts/Footer.tsx

@@ -18,8 +18,8 @@ export function Footer(props: Props) {
     return <Zone church={props.config?.church} sections={props.footerSections} zone="siteFooter" churchSettings={props.config?.appearance} />
   }
   else {
-    let logoUrl = AppearanceHelper.getLogoDark(props.config?.appearance, "/images/logo.png");
-    const photo = <img src={logoUrl} className="img-fluid" id={"el-footer-logo"} alt={props.config?.church.name} style={{ maxWidth: "200px" }} />
+    const logoUrl = AppearanceHelper.getLogoDark(props.config?.appearance, "/images/logo.png");
+    const photo = logoUrl ? <img src={logoUrl} className="img-fluid" id={"el-footer-logo"} alt={props.config?.church.name} style={{ maxWidth: "200px" }} /> : null;
 
     return (
       <>

src/components/video/LiveStream.tsx

@@ -27,18 +27,28 @@ export const LiveStream: React.FC<Props> = (props) => {
   const [currentService, setCurrentService] = React.useState<StreamingServiceExtendedInterface | null>(null);
   const [overlayContent, setOverlayContent] = React.useState(false);
   const [isClient, setIsClient] = React.useState(false);
+  const [chatReady, setChatReady] = React.useState(false);
+  const joinedServiceIdRef = React.useRef<string | null>(null);
 
   const loadData = async (keyName: string) => {
     let result: StreamConfigInterface = await fetch(`${EnvironmentHelper.Common.ContentApi}/preview/data/${keyName}`).then((response: Response) => response.json());
     StreamingServiceHelper.updateServiceTimes(result);
     result.keyName = keyName;
     ChatConfigHelper.current = result;
-    if (props.includeInteraction) await ChatHelper.initChat();
+    if (props.includeInteraction) {
+      await ChatHelper.initChat();
+      setChatReady(true);
+    }
     setConfig(result);
   }
 
   const checkJoinRooms = () => {
-    if (props.includeInteraction && currentService && config) {
+    // Only join rooms after chat is fully initialized
+    if (props.includeInteraction && currentService && config && chatReady) {
+      // Prevent duplicate joins for the same service
+      if (joinedServiceIdRef.current === currentService.id) return;
+      joinedServiceIdRef.current = currentService.id;
+
       StreamChatManager.joinMainRoom(ChatConfigHelper.current.churchId, currentService, setChatState);
       StreamChatManager.checkHost(config, currentService.id, chatState, setChatState);
     }
@@ -59,7 +69,7 @@ export const LiveStream: React.FC<Props> = (props) => {
     loadData(props.keyName);
   }, []);
 
-  React.useEffect(checkJoinRooms, [currentService]); //eslint-disable-line
+  React.useEffect(checkJoinRooms, [currentService, chatReady, config]); //eslint-disable-line
 
   let result = (<div id="liveContainer">
     {(props.includeHeader) && <StreamingHeader user={chatState?.user} config={config} appearance={props.appearance} isHost={UserHelper.checkAccess(Permissions.contentApi.chat.host)} />}

src/components/video/StreamingHeader.tsx

@@ -74,6 +74,8 @@ export const StreamingHeader: React.FC<Props> = (props) => {
   let imgSrc = (props.appearance)
     ? AppearanceHelper.getLogo(props.appearance, "images/logo-header.png", "/images/logo.png", "#FFF")
     : "";
+  // Guard against the string "null" being stored in the database
+  if (imgSrc === "null") imgSrc = "";
 
   React.useEffect(() => {
     if (!props.appearance) {

src/components/video/VideoContainer.tsx

@@ -87,12 +87,17 @@ export const VideoContainer: React.FC<Props> = (props) => {
   }
 
   const getLogo = () => {
+    let logo: string | null = null;
     if (transparent) {
       const textColor = StyleHelper.getTextColor(props.sections[0]?.textColor, config?.globalStyles, config?.appearance);
-      const logo = AppearanceHelper.getLogoByTextColor(config?.appearance?.logoLight || null, config?.appearance?.logoDark || null, textColor);
-      return logo !== "" ? logo : null;
+      logo = AppearanceHelper.getLogoByTextColor(config?.appearance?.logoLight || null, config?.appearance?.logoDark || null, textColor);
     }
-    else return config?.appearance?.logoDark || null;
+    else {
+      logo = config?.appearance?.logoDark || null;
+    }
+    // Return null for any falsy value or the string "null"
+    if (!logo || logo === "null") return null;
+    return logo;
   }
 
   const contentType = React.useMemo(() => {

src/helpers/ChatHelper.ts

@@ -22,19 +22,24 @@ export class ChatHelper {
     blockedIps: []
   })
 
-  private static initialized = false;
+  private static initializing = false;
 
   static initChat = async () => {
-    // Prevent double initialization
-    if (ChatHelper.initialized) return;
-    ChatHelper.initialized = true;
+    // If socket is already connected and has a socketId, no need to reinitialize
+    if (SocketHelper.isConnected?.() && SocketHelper.socketId) {
+      return;
+    }
+
+    // Prevent concurrent initialization attempts
+    if (ChatHelper.initializing) return;
+    ChatHelper.initializing = true;
 
     // Init socket first - catch errors so they don't break the page
     try {
       await SocketHelper.init();
     } catch {
-      // Socket init failed - reset initialized flag so it can be retried
-      ChatHelper.initialized = false;
+      // Socket init failed - allow retry
+      ChatHelper.initializing = false;
       return;
     }
 
@@ -49,6 +54,8 @@ export class ChatHelper {
     SocketHelper.addHandler("videoChatInvite", "chatVideoChatInvite", ChatHelper.handleVideoChatInvite);
     SocketHelper.addHandler("reconnect", "chatReconnect", ChatHelper.handleReconnect);
     SocketHelper.addHandler("blockedIp", "chatBlockedIp", ChatHelper.handleBlockedIps);
+
+    ChatHelper.initializing = false;
   }
 
   static handleReconnect = () => {