Optimize side nav, live dock, and chat.

app/components-react/root/Chat.tsx

@@ -1,41 +1,43 @@
 import * as remote from '@electron/remote';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback, useMemo } from 'react';
 import { Services } from '../service-provider';
 import styles from './Chat.m.less';
 import { OS, getOS } from '../../util/operating-systems';
 import { onUnload } from 'util/unload';
-import { debounce } from 'lodash';
+import { useVuex } from 'components-react/hooks';
 
 export default function Chat(props: {
   restream: boolean;
   visibleChat: string;
   setChat: (key: string) => void;
 }) {
-  const { ChatService, RestreamService } = Services;
+  const { ChatService, RestreamService, WindowsService } = Services;
 
   const chatEl = useRef<HTMLDivElement>(null);
 
-  let currentPosition: IVec2 | null;
-  let currentSize: IVec2 | null;
+  const currentPosition = useRef<IVec2 | null>(null);
+  const currentSize = useRef<IVec2 | null>(null);
+  const mountedRef = useRef<boolean>(true);
+  const service = useMemo(() => (props.restream ? RestreamService : ChatService), [props.restream]);
+  const windowId = useMemo(() => remote.getCurrentWindow().id, []);
 
-  let leaveFullScreenTrigger: Function;
+  const { hideStyleBlockers } = useVuex(() => ({
+    hideStyleBlockers: WindowsService.state.main.hideStyleBlockers,
+  }));
+
+  const leaveFullScreenTrigger = useCallback(() => {
+    setTimeout(() => {
+      setupChat();
+      checkResize();
+    }, 1000);
+  }, []);
 
   useEffect(() => {
-    const service = props.restream ? RestreamService : ChatService;
     const cancelUnload = onUnload(() => service.actions.unmountChat(remote.getCurrentWindow().id));
 
-    window.addEventListener('resize', debounce(checkResize, 100));
-
     // Work around an electron bug on mac where chat is not interactable
     // after leaving fullscreen until chat is remounted.
     if (getOS() === OS.Mac) {
-      leaveFullScreenTrigger = () => {
-        setTimeout(() => {
-          setupChat();
-          checkResize();
-        }, 1000);
-      };
-
       remote.getCurrentWindow().on('leave-full-screen', leaveFullScreenTrigger);
     }
 
@@ -44,52 +46,55 @@ export default function Chat(props: {
     setTimeout(checkResize, 100);
 
     return () => {
-      window.removeEventListener('resize', debounce(checkResize, 100));
-
       if (getOS() === OS.Mac) {
         remote.getCurrentWindow().removeListener('leave-full-screen', leaveFullScreenTrigger);
       }
 
       service.actions.unmountChat(remote.getCurrentWindow().id);
       cancelUnload();
-    };
-  }, [props.restream]);
-
-  function setupChat() {
-    const service = props.restream ? RestreamService : ChatService;
-    const windowId = remote.getCurrentWindow().id;
-
-    ChatService.actions.unmountChat();
-    RestreamService.actions.unmountChat(windowId);
-
-    service.actions.mountChat(windowId);
-    currentPosition = null;
-    currentSize = null;
-  }
 
-  function checkResize() {
-    const service = props.restream ? RestreamService : ChatService;
+      mountedRef.current = false;
+    };
+  }, []);
 
-    if (!chatEl.current) return;
+  const checkResize = useCallback(() => {
+    if (!chatEl.current || !mountedRef.current) return;
 
     const rect = chatEl.current.getBoundingClientRect();
 
-    if (currentPosition == null || currentSize == null || rectChanged(rect)) {
-      currentPosition = { x: rect.left, y: rect.top };
-      currentSize = { x: rect.width, y: rect.height };
+    if (currentPosition.current == null || currentSize == null || rectChanged(rect)) {
+      currentPosition.current = { x: rect.left, y: rect.top };
+      currentSize.current = { x: rect.width, y: rect.height };
 
-      service.actions.setChatBounds(currentPosition, currentSize);
+      service.actions.setChatBounds(currentPosition.current, currentSize.current);
     }
-  }
+  }, [service, hideStyleBlockers]);
 
-  function rectChanged(rect: ClientRect) {
+  const rectChanged = useCallback((rect: DOMRect) => {
+    if (!currentPosition.current || !currentSize.current) return;
     return (
-      rect.left !== currentPosition?.x ||
-      rect.top !== currentPosition?.y ||
-      rect.width !== currentSize?.x ||
-      rect.height !== currentSize?.y
+      rect.left !== currentPosition.current?.x ||
+      rect.top !== currentPosition.current?.y ||
+      rect.width !== currentSize.current?.x ||
+      rect.height !== currentSize.current?.y
     );
-  }
+  }, []);
+
+  useEffect(() => {
+    if (!hideStyleBlockers && mountedRef.current) {
+      // Small delay to ensure DOM has updated after style blockers removed
+      setTimeout(() => checkResize(), 50);
+    }
+  }, [hideStyleBlockers, checkResize]);
+
+  const setupChat = useCallback(() => {
+    ChatService.actions.unmountChat();
+    RestreamService.actions.unmountChat(windowId);
+
+    service.actions.mountChat(windowId);
+    currentPosition.current = null;
+    currentSize.current = null;
+  }, [service, checkResize]);
 
   return <div className={styles.chat} ref={chatEl} />;
 }

app/components-react/shared/AuthModal.tsx

@@ -1,13 +1,14 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useMemo } from 'react';
 import { Button, Form, Modal } from 'antd';
 import styles from './AuthModal.m.less';
 import { $t } from 'services/i18n';
 import { Services } from 'components-react/service-provider';
 import cx from 'classnames';
+import { useVuex } from 'components-react/hooks';
 
 interface AuthModalProps {
   showModal: boolean;
-  prompt: string;
+  prompt?: string;
   handleAuth: () => void;
   handleShowModal: (status: boolean) => void;
   title?: string;
@@ -19,11 +20,30 @@ interface AuthModalProps {
 }
 
 export function AuthModal(p: AuthModalProps) {
-  const title = p?.title || Services.UserService.isLoggedIn ? $t('Log Out') : $t('Login');
-  const prompt = p?.prompt;
+  const { UserService } = Services;
+
+  const { isLoggedIn, primaryPlatform, name } = useVuex(() => ({
+    isLoggedIn: UserService.views.isLoggedIn,
+    primaryPlatform: UserService.views.auth?.primaryPlatform,
+    name: UserService.views.username,
+  }));
+
+  const title = p?.title || isLoggedIn ? $t('Log Out') : $t('Login');
   const confirm = p?.confirm || $t('Yes');
   const cancel = p?.cancel || $t('No');
 
+  const prompt = useMemo(() => {
+    if (p.prompt) return p.prompt;
+
+    // Instagram doesn't provide a username, since we're not really linked, pass undefined for a generic logout msg w/o it
+    const username =
+      isLoggedIn && primaryPlatform && primaryPlatform !== 'instagram' ? name : undefined;
+
+    return username
+      ? $t('Are you sure you want to log out %{username}?', { username })
+      : $t('Are you sure you want to log out?');
+  }, [p.prompt, name, isLoggedIn, primaryPlatform]);
+
   return (
     <Modal
       footer={null}

app/components-react/shared/TitleBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import cx from 'classnames';
 import { useVuex } from '../hooks';
 import { Services } from '../service-provider';
@@ -30,35 +30,47 @@ export default function TitleBar(props: { windowId: string; className?: string }
   const primeTheme = /prime/.test(theme);
   const [errorState, setErrorState] = useState(false);
 
-  useEffect(lifecycle, []);
+  useEffect(() => {
+    lifecycle();
 
-  function lifecycle() {
-    if (Utils.isDevMode()) {
+    return () => {
+      if (Utils.isDevMode() && Utils.isMainWindow()) {
+        ipcRenderer.removeAllListeners('unhandledErrorState');
+      }
+
+      if (Utils.isDevMode() && Utils.isChildWindow()) {
+        ipcRenderer.removeListener('unhandledErrorState', () => setErrorState(true));
+      }
+    };
+  }, []);
+
+  const lifecycle = useCallback(() => {
+    if (Utils.isDevMode() && Utils.isMainWindow()) {
       ipcRenderer.on('unhandledErrorState', () => setErrorState(true));
     }
-  }
+  }, []);
 
-  function minimize() {
+  const minimize = useCallback(() => {
     remote.getCurrentWindow().minimize();
-  }
+  }, []);
 
-  function maximize() {
+  const maximize = useCallback(() => {
     const win = remote.getCurrentWindow();
 
     if (win.isMaximized()) {
       win.unmaximize();
     } else {
       win.maximize();
     }
-  }
+  }, []);
 
-  function close() {
+  const close = useCallback(() => {
     if (Utils.isMainWindow() && StreamingService.isStreaming) {
       if (!confirm($t('Are you sure you want to exit while live?'))) return;
     }
 
     remote.getCurrentWindow().close();
-  }
+  }, []);
 
   return (
     <>

app/components-react/sidebar/NavTools.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import cx from 'classnames';
 import electron from 'electron';
 import Utils from 'services/utils';
@@ -63,65 +63,58 @@ export default function SideNav() {
   const [dashboardOpening, setDashboardOpening] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
-  function openSettingsWindow(category?: TCategoryName) {
+  const openSettingsWindow = useCallback((category?: TCategoryName) => {
     SettingsService.actions.showSettings(category);
-  }
+  }, []);
 
-  function openDevTools() {
+  const openDevTools = useCallback(() => {
     electron.ipcRenderer.send('openDevTools');
-  }
+  }, []);
 
-  async function openDashboard(page?: string) {
-    UsageStatisticsService.actions.recordClick('SideNav2', page || 'dashboard');
-    if (dashboardOpening) return;
-    setDashboardOpening(true);
+  const openDashboard = useCallback(
+    async (page?: string) => {
+      UsageStatisticsService.actions.recordClick('SideNav2', page || 'dashboard');
+      if (dashboardOpening) return;
+      setDashboardOpening(true);
 
-    try {
-      const link = await MagicLinkService.getDashboardMagicLink(page);
-      remote.shell.openExternal(link);
-    } catch (e: unknown) {
-      console.error('Error generating dashboard magic link', e);
-    }
+      try {
+        const link = await MagicLinkService.getDashboardMagicLink(page);
+        remote.shell.openExternal(link);
+      } catch (e: unknown) {
+        console.error('Error generating dashboard magic link', e);
+      }
 
-    setDashboardOpening(false);
-  }
+      setDashboardOpening(false);
+    },
+    [dashboardOpening],
+  );
 
   const throttledOpenDashboard = throttle(openDashboard, 2000, { trailing: false });
 
-  // Instagram doesn't provide a username, since we're not really linked, pass undefined for a generic logout msg w/o it
-  const username =
-    isLoggedIn && UserService.views.auth!.primaryPlatform !== 'instagram'
-      ? UserService.username
-      : undefined;
-
-  const confirmMsg = username
-    ? $t('Are you sure you want to log out %{username}?', { username })
-    : $t('Are you sure you want to log out?');
-
-  function openHelp() {
+  const openHelp = useCallback(() => {
     UsageStatisticsService.actions.recordClick('SideNav2', 'help');
     remote.shell.openExternal(UrlService.supportLink);
-  }
+  }, []);
 
-  async function upgradeToPrime() {
+  const upgradeToPrime = useCallback(async () => {
     UsageStatisticsService.actions.recordClick('SideNav2', 'prime');
     MagicLinkService.linkToPrime('slobs-side-nav');
-  }
+  }, []);
 
-  const handleAuth = () => {
+  const handleAuth = useCallback(() => {
     if (isLoggedIn) {
       Services.DualOutputService.actions.setDualOutputModeIfPossible(false, true);
       UserService.actions.logOut();
     } else {
       WindowsService.actions.closeChildWindow();
       UserService.actions.showLogin();
     }
-  };
+  }, [isLoggedIn]);
 
-  const handleShowModal = (status: boolean) => {
-    updateStyleBlockers('main', status);
+  const handleShowModal = useCallback((status: boolean) => {
     setShowModal(status);
-  };
+    updateStyleBlockers('main', status);
+  }, []);
 
   return (
     <>
@@ -222,7 +215,6 @@ export default function SideNav() {
       </Menu>
       <AuthModal
         title={$t('Confirm')}
-        prompt={confirmMsg}
         showModal={showModal}
         handleAuth={handleAuth}
         handleShowModal={handleShowModal}