Fix GroupCallRemoteParticipant error dialog to retain error message

ts/components/GroupCallRemoteParticipant.stories.tsx

@@ -192,3 +192,43 @@ export function NoMediaKeys(): JSX.Element {
     />
   );
 }
+
+export function NoMediaKeysBlockedIntermittent(): JSX.Element {
+  const [isBlocked, setIsBlocked] = React.useState(false);
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setIsBlocked(value => !value);
+    }, 6000);
+
+    return () => clearInterval(interval);
+  }, [isBlocked]);
+
+  const [mediaKeysReceived, setMediaKeysReceived] = React.useState(false);
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setMediaKeysReceived(value => !value);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [mediaKeysReceived]);
+
+  return (
+    <GroupCallRemoteParticipant
+      {...createProps(
+        {
+          isInPip: false,
+          height: 120,
+          left: 0,
+          top: 0,
+          width: 120,
+        },
+        {
+          addedTime: Date.now() - 60 * 1000,
+          hasRemoteAudio: true,
+          mediaKeysReceived,
+          isBlocked,
+        }
+      )}
+    />
+  );
+}

ts/components/GroupCallRemoteParticipant.tsx

@@ -304,8 +304,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
     }
 
     let noVideoNode: ReactNode;
-    let errorDialogTitle: ReactNode;
-    let errorDialogBody = '';
     if (!hasVideoToShow) {
       const showDialogButton = (
         <button
@@ -325,18 +323,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
             {showDialogButton}
           </>
         );
-        errorDialogTitle = (
-          <div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
-            <Intl
-              i18n={i18n}
-              id="icu:calling__you-have-blocked"
-              components={{
-                name: <ContactName key="name" title={title} />,
-              }}
-            />
-          </div>
-        );
-        errorDialogBody = i18n('icu:calling__block-info');
       } else if (showMissingMediaKeys) {
         noVideoNode = (
           <>
@@ -347,18 +333,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
             {showDialogButton}
           </>
         );
-        errorDialogTitle = (
-          <div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
-            <Intl
-              i18n={i18n}
-              id="icu:calling__missing-media-keys"
-              components={{
-                name: <ContactName key="name" title={title} />,
-              }}
-            />
-          </div>
-        );
-        errorDialogBody = i18n('icu:calling__missing-media-keys-info');
       } else {
         noVideoNode = (
           <Avatar
@@ -379,6 +353,56 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
       }
     }
 
+    // Error dialog maintains state, so if you have it open and the underlying
+    // error changes or resolves, you can keep reading the same dialog info.
+    const [errorDialogTitle, setErrorDialogTitle] = useState<ReactNode | null>(
+      null
+    );
+    const [errorDialogBody, setErrorDialogBody] = useState<string>('');
+    useEffect(() => {
+      if (hasVideoToShow || showErrorDialog) {
+        return;
+      }
+
+      if (isBlocked) {
+        setErrorDialogTitle(
+          <div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
+            <Intl
+              i18n={i18n}
+              id="icu:calling__you-have-blocked"
+              components={{
+                name: <ContactName key="name" title={title} />,
+              }}
+            />
+          </div>
+        );
+        setErrorDialogBody(i18n('icu:calling__block-info'));
+      } else if (showMissingMediaKeys) {
+        setErrorDialogTitle(
+          <div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
+            <Intl
+              i18n={i18n}
+              id="icu:calling__missing-media-keys"
+              components={{
+                name: <ContactName key="name" title={title} />,
+              }}
+            />
+          </div>
+        );
+        setErrorDialogBody(i18n('icu:calling__missing-media-keys-info'));
+      } else {
+        setErrorDialogTitle(null);
+        setErrorDialogBody('');
+      }
+    }, [
+      hasVideoToShow,
+      i18n,
+      isBlocked,
+      showErrorDialog,
+      showMissingMediaKeys,
+      title,
+    ]);
+
     return (
       <>
         {showErrorDialog && (