Improve in call display of missing media keys

2024-09-25 06:50:21 -07:00 · 2024-09-25 06:50:21 -07:00 · 01b087f056
commit 01b087f056
parent 5c6a289bb4
5 changed files with 128 additions and 37 deletions
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -1881,6 +1881,10 @@
    "messageformat": "Can't receive audio and video from {name}",
    "description": "When you can't view someone's audio and video in a call because their media keys are unavailable"
  },
+  "icu:calling__missing-media-keys--unknown-contact": {
+    "messageformat": "Can't receive audio and video",
+    "description": "When you can't view someone's audio and video in a call because their media keys are unavailable, and their profile information is not available"
+  },
  "icu:calling__missing-media-keys-info": {
    "messageformat": "This may be because they have not verified your safety number change, there's a problem with their device, or they have blocked you.",
    "description": "Detailed explanation why you can't view someone's audio and video in a call because their media keys are unavailable."
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@ -3873,10 +3873,6 @@ button.module-image__border-overlay:focus {
            padding-inline: 16px;
          }

-          .module-ongoing-call__group-call-remote-participant__error-icon {
-            margin-block-end: 16px;
-          }
-
          .module-ongoing-call__group-call-remote-participant__error {
            display: block;
          }
@ -4099,7 +4095,7 @@ button.module-image__border-overlay:focus {
      // when @container size is big enough
      display: none;

-      margin-block-end: 12px;
+      margin-block-end: 16px;
      margin-inline: 8px;
      font-size: 12px;
      line-height: 16px;
@ -4113,7 +4109,7 @@ button.module-image__border-overlay:focus {
      padding-block: 3px;
      padding-inline: 10px;
      border-radius: 16px;
-      background-color: $color-gray-75;
+      background-color: $color-black-alpha-30;
      color: $color-white;
      font-size: 12px;
      line-height: 16px;
@ -4128,12 +4124,29 @@ button.module-image__border-overlay:focus {
        overflow: hidden;
        text-overflow: ellipsis;
      }
+
+      // Shown in the mini version / overflow sidebar
+      &--icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      &--icon-blocked {
+        @include color-svg('../images/icons/v3/block/block.svg', $color-white);
+      }
+
+      &--icon-missing-media-keys {
+        @include color-svg(
+          '../images/icons/v3/error/error-circle.svg',
+          $color-white
+        );
+      }
    }

    &__error-icon {
-      width: 24px;
-      height: 24px;
-      margin-block-end: 8px;
+      width: 20px;
+      height: 20px;
+      margin-block-end: 12px;

      &--blocked {
        @include color-svg('../images/icons/v3/block/block.svg', $color-white);
@ -4141,7 +4154,7 @@ button.module-image__border-overlay:focus {

      &--missing-media-keys {
        @include color-svg(
-          '../images/icons/v3/error/error-circle-solid.svg',
+          '../images/icons/v3/error/error-circle.svg',
          $color-white
        );
      }
--- a/ts/components/CallScreen.stories.tsx
+++ b/ts/components/CallScreen.stories.tsx
@ -65,8 +65,9 @@ type DirectCallOverrideProps = OverridePropsBase & {
 };

 type GroupCallOverrideProps = OverridePropsBase & {
-  callMode: CallMode.Group;
+  callMode: CallMode.Group | CallMode.Adhoc;
  connectionState?: GroupCallConnectionState;
+  groupMembers?: Array<ConversationType>;
  peekedParticipants?: Array<ConversationType>;
  pendingParticipants?: Array<ConversationType>;
  raisedHands?: Set<number>;
@ -131,7 +132,8 @@ const createActiveGroupCallProp = (overrideProps: GroupCallOverrideProps) => ({
  localDemuxId: LOCAL_DEMUX_ID,
  maxDevices: 5,
  deviceCount: (overrideProps.remoteParticipants || []).length,
-  groupMembers: overrideProps.remoteParticipants || [],
+  groupMembers:
+    overrideProps.groupMembers || overrideProps.remoteParticipants || [],
  // Because remote participants are a superset, we can use them in place of peeked
  //   participants.
  isConversationTooBigToRing: false,
@ -173,6 +175,12 @@ const createActiveCallProp = (
      return { ...baseResult, ...createActiveDirectCallProp(overrideProps) };
    case CallMode.Group:
      return { ...baseResult, ...createActiveGroupCallProp(overrideProps) };
+    case CallMode.Adhoc:
+      return {
+        ...baseResult,
+        ...createActiveGroupCallProp(overrideProps),
+        callMode: CallMode.Adhoc as CallMode.Adhoc,
+      };
    default:
      throw missingCaseError(overrideProps);
  }
@ -872,3 +880,26 @@ export function GroupCallSomeoneBlocked(): JSX.Element {
    />
  );
 }
+
+export function CallLinkUnknownContactMissingMediaKeys(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Adhoc,
+        groupMembers: [],
+        remoteParticipants: allRemoteParticipants
+          .slice(0, 5)
+          .map((participant, index) => ({
+            ...participant,
+            title: index === 1 ? 'Unknown Contact' : participant.title,
+            titleNoDefault:
+              index === 1 ? undefined : participant.titleNoDefault,
+            addedTime: index === 1 ? Date.now() - 60000 : undefined,
+            hasRemoteAudio: false,
+            hasRemoteVideo: false,
+            mediaKeysReceived: index !== 1,
+          })),
+      })}
+    />
+  );
+}
--- a/ts/components/GroupCallOverflowArea.tsx
+++ b/ts/components/GroupCallOverflowArea.tsx
@ -137,6 +137,7 @@ export function GroupCallOverflowArea({
            remoteParticipantsCount={remoteParticipantsCount}
            isActiveSpeakerInSpeakerView={false}
            isCallReconnecting={isCallReconnecting}
+            isInOverflow
          />
        ))}
      </div>
--- a/ts/components/GroupCallRemoteParticipant.tsx
+++ b/ts/components/GroupCallRemoteParticipant.tsx
@ -43,6 +43,7 @@ type BasePropsType = {
  imageDataCache: React.RefObject<CallingImageDataCache>;
  isActiveSpeakerInSpeakerView: boolean;
  isCallReconnecting: boolean;
+  isInOverflow?: boolean;
  onClickRaisedHand?: () => void;
  onVisibilityChanged?: (demuxId: number, isVisible: boolean) => unknown;
  remoteParticipant: GroupCallRemoteParticipantType;
@ -80,6 +81,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
      remoteParticipantsCount,
      isActiveSpeakerInSpeakerView,
      isCallReconnecting,
+      isInOverflow,
    } = props;

    const {
@ -98,6 +100,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
      sharedGroupNames,
      sharingScreen,
      title,
+      titleNoDefault,
      videoAspectRatio,
    } = props.remoteParticipant;

@ -357,26 +360,60 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
          {i18n('icu:moreInfo')}
        </button>
      );
+
      if (isBlocked) {
-        noVideoNode = (
-          <>
-            <i className="module-ongoing-call__group-call-remote-participant__error-icon module-ongoing-call__group-call-remote-participant__error-icon--blocked" />
-            <div className="module-ongoing-call__group-call-remote-participant__error">
-              {i18n('icu:calling__blocked-participant', { name: title })}
-            </div>
-            {showDialogButton}
-          </>
-        );
+        if (isInOverflow) {
+          noVideoNode = (
+            <button
+              type="button"
+              className="module-ongoing-call__group-call-remote-participant__more-info module-ongoing-call__group-call-remote-participant__more-info--icon module-ongoing-call__group-call-remote-participant__more-info--icon-blocked"
+              onClick={() => {
+                setShowErrorDialog(true);
+              }}
+              aria-label={i18n('icu:calling__blocked-participant', {
+                name: title,
+              })}
+            />
+          );
+        } else {
+          noVideoNode = (
+            <>
+              <i className="module-ongoing-call__group-call-remote-participant__error-icon module-ongoing-call__group-call-remote-participant__error-icon--blocked" />
+              <div className="module-ongoing-call__group-call-remote-participant__error">
+                {i18n('icu:calling__blocked-participant', { name: title })}
+              </div>
+              {showDialogButton}
+            </>
+          );
+        }
      } else if (showMissingMediaKeys) {
-        noVideoNode = (
-          <>
-            <i className="module-ongoing-call__group-call-remote-participant__error-icon module-ongoing-call__group-call-remote-participant__error-icon--missing-media-keys" />
-            <div className="module-ongoing-call__group-call-remote-participant__error">
-              {i18n('icu:calling__missing-media-keys', { name: title })}
-            </div>
-            {showDialogButton}
-          </>
-        );
+        const errorMessage = titleNoDefault
+          ? i18n('icu:calling__missing-media-keys', {
+              name: titleNoDefault,
+            })
+          : i18n('icu:calling__missing-media-keys--unknown-contact');
+        if (isInOverflow) {
+          noVideoNode = (
+            <button
+              type="button"
+              className="module-ongoing-call__group-call-remote-participant__more-info module-ongoing-call__group-call-remote-participant__more-info--icon module-ongoing-call__group-call-remote-participant__more-info--icon-missing-media-keys"
+              onClick={() => {
+                setShowErrorDialog(true);
+              }}
+              aria-label={errorMessage}
+            />
+          );
+        } else {
+          noVideoNode = (
+            <>
+              <i className="module-ongoing-call__group-call-remote-participant__error-icon module-ongoing-call__group-call-remote-participant__error-icon--missing-media-keys" />
+              <div className="module-ongoing-call__group-call-remote-participant__error">
+                {errorMessage}
+              </div>
+              {showDialogButton}
+            </>
+          );
+        }
      } else {
        noVideoNode = (
          <Avatar
@ -424,13 +461,17 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
      } else if (showMissingMediaKeys) {
        setErrorDialogTitle(
          <div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
-            <I18n
-              i18n={i18n}
-              id="icu:calling__missing-media-keys"
-              components={{
-                name: <ContactName key="name" title={title} />,
-              }}
-            />
+            {titleNoDefault ? (
+              <I18n
+                i18n={i18n}
+                id="icu:calling__missing-media-keys"
+                components={{
+                  name: <ContactName key="name" title={titleNoDefault} />,
+                }}
+              />
+            ) : (
+              i18n('icu:calling__missing-media-keys--unknown-contact')
+            )}
          </div>
        );
        setErrorDialogBody(i18n('icu:calling__missing-media-keys-info'));
@ -445,6 +486,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
      showErrorDialog,
      showMissingMediaKeys,
      title,
+      titleNoDefault,
    ]);

    return (