Fix Livestream Popout Chat not refreshing when closed (#1797)

ui/component/livestreamChatLayout/livestream-menu.jsx

@@ -34,17 +34,32 @@ export default function LivestreamMenu(props: Props) {
     location: { pathname },
   } = useHistory();
 
+  const initialPopoutUnload = React.useRef(false);
+
   const [showTimestamps, setShowTimestamps] = usePersistedState('live-timestamps', false);
 
   function handlePopout() {
     if (setPopoutWindow) {
-      const newWindow = window.open('/$/popout' + pathname, 'Popout Chat', 'height=700,width=400');
+      const popoutWindow = window.open('/$/popout' + pathname, 'Popout Chat', 'height=700,width=400');
 
-      // Add function to newWindow when closed (either manually or from button component)
+      // Adds function to popoutWindow when unloaded and verify if it was closed
-      newWindow.onbeforeunload = () => setPopoutWindow(undefined);
+      const handleUnload = (e) => {
+        if (!initialPopoutUnload.current) {
+          initialPopoutUnload.current = true;
+        } else {
+          const timer = setInterval((a, b) => {
+            if (popoutWindow.closed) {
+              clearInterval(timer);
+              setPopoutWindow(undefined);
+            }
+          }, 300);
+        }
+      };
 
-      if (window.focus) newWindow.focus();
+      popoutWindow.onunload = handleUnload;
-      setPopoutWindow(newWindow);
+
+      if (window.focus) popoutWindow.focus();
+      setPopoutWindow(popoutWindow);
     }
   }
 

ui/component/livestreamChatLayout/view.jsx

@@ -266,7 +266,14 @@ export default function LivestreamChatLayout(props: Props) {
               actions={
                 <div className="section__actions">
                   {openedPopoutWindow && (
-                    <Button button="secondary" label={__('Close Popout')} onClick={() => openedPopoutWindow.close()} />
+                    <Button
+                      button="secondary"
+                      label={__('Close Popout')}
+                      onClick={() => {
+                        openedPopoutWindow.close();
+                        setPopoutWindow(undefined);
+                      }}
+                    />
                   )}
 
                   {chatHidden && (