Call link call history

ts/components/CallingAdhocCallInfo.stories.tsx

@@ -49,8 +49,10 @@ function getCallLink(overrideProps: Partial<CallLinkType> = {}): CallLinkType {
   return {
     roomId: 'abcd1234abcd1234abcd1234abcd1234abcd1234',
     rootKey: 'abcd-abcd-abcd-abcd-abcd-abcd-abcd-abcd',
+    adminKey: null,
     name: 'Axolotl Discuss',
     restrictions: CallLinkRestrictions.None,
+    revoked: false,
     expiration: Date.now() + 30 * 24 * 60 * 60 * 1000,
     ...overrideProps,
   };

ts/components/CallingLobby.tsx

@@ -206,7 +206,7 @@ export function CallingLobby({
     callingLobbyJoinButtonVariant = CallingLobbyJoinButtonVariant.CallIsFull;
   } else if (isCallConnecting) {
     callingLobbyJoinButtonVariant = CallingLobbyJoinButtonVariant.Loading;
-  } else if (peekedParticipants.length) {
+  } else if (peekedParticipants.length || callMode === CallMode.Adhoc) {
     callingLobbyJoinButtonVariant = CallingLobbyJoinButtonVariant.Join;
   } else {
     callingLobbyJoinButtonVariant = CallingLobbyJoinButtonVariant.Start;

ts/components/CallsList.tsx

@@ -43,6 +43,10 @@ import { formatCallHistoryGroup } from '../util/callDisposition';
 import { CallsNewCallButton } from './CallsNewCall';
 import { Tooltip, TooltipPlacement } from './Tooltip';
 import { Theme } from '../util/theme';
+import type { CallingConversationType } from '../types/Calling';
+import { CallMode } from '../types/Calling';
+import type { CallLinkType } from '../types/CallLink';
+import { callLinkToConversation } from '../util/callLinks';
 
 function Timestamp({
   i18n,
@@ -112,6 +116,7 @@ type CallsListProps = Readonly<{
     pagination: CallHistoryPagination
   ) => Promise<Array<CallHistoryGroup>>;
   callHistoryEdition: number;
+  getCallLink: (id: string) => CallLinkType | undefined;
   getConversation: (id: string) => ConversationType | void;
   i18n: LocalizerType;
   selectedCallHistoryGroup: CallHistoryGroup | null;
@@ -121,6 +126,7 @@ type CallsListProps = Readonly<{
     conversationId: string,
     selectedCallHistoryGroup: CallHistoryGroup
   ) => void;
+  startCallLinkLobbyByRoomId: (roomId: string) => void;
 }>;
 
 const CALL_LIST_ITEM_ROW_HEIGHT = 62;
@@ -141,12 +147,14 @@ export function CallsList({
   getCallHistoryGroupsCount,
   getCallHistoryGroups,
   callHistoryEdition,
+  getCallLink,
   getConversation,
   i18n,
   selectedCallHistoryGroup,
   onOutgoingAudioCallInConversation,
   onOutgoingVideoCallInConversation,
   onSelectCallHistoryGroup,
+  startCallLinkLobbyByRoomId,
 }: CallsListProps): JSX.Element {
   const infiniteLoaderRef = useRef<InfiniteLoader>(null);
   const listRef = useRef<List>(null);
@@ -301,7 +309,16 @@ export function CallsList({
   const rowRenderer = useCallback(
     ({ key, index, style }: ListRowProps) => {
       const item = searchState.results?.items.at(index) ?? null;
-      const conversation = item != null ? getConversation(item.peerId) : null;
+      const isAdhoc = item?.mode === CallMode.Adhoc;
+      const callLink = isAdhoc ? getCallLink(item.peerId) : null;
+
+      const conversation: CallingConversationType | null =
+        // eslint-disable-next-line no-nested-ternary
+        item
+          ? callLink
+            ? callLinkToConversation(callLink, i18n)
+            : getConversation(item.peerId) ?? null
+          : null;
 
       if (
         searchState.state === 'pending' ||
@@ -337,6 +354,8 @@ export function CallsList({
       let statusText;
       if (wasMissed) {
         statusText = i18n('icu:CallsList__ItemCallInfo--Missed');
+      } else if (callLink) {
+        statusText = i18n('icu:CallsList__ItemCallInfo--CallLink');
       } else if (item.type === CallType.Group) {
         statusText = i18n('icu:CallsList__ItemCallInfo--GroupCall');
       } else if (item.direction === CallDirection.Outgoing) {
@@ -363,7 +382,7 @@ export function CallsList({
               <Avatar
                 acceptedMessageRequest
                 avatarPath={conversation.avatarPath}
-                conversationType="group"
+                conversationType={conversation.type}
                 i18n={i18n}
                 isMe={false}
                 title={conversation.title}
@@ -378,10 +397,14 @@ export function CallsList({
                 callType={item.type}
                 hasActiveCall={hasActiveCall}
                 onClick={() => {
-                  if (item.type === CallType.Audio) {
-                    onOutgoingAudioCallInConversation(conversation.id);
-                  } else {
-                    onOutgoingVideoCallInConversation(conversation.id);
+                  if (callLink) {
+                    startCallLinkLobbyByRoomId(callLink.roomId);
+                  } else if (conversation) {
+                    if (item.type === CallType.Audio) {
+                      onOutgoingAudioCallInConversation(conversation.id);
+                    } else {
+                      onOutgoingVideoCallInConversation(conversation.id);
+                    }
                   }
                 }}
               />
@@ -403,6 +426,10 @@ export function CallsList({
               </span>
             }
             onClick={() => {
+              if (callLink) {
+                return;
+              }
+
               onSelectCallHistoryGroup(conversation.id, item);
             }}
           />
@@ -412,11 +439,13 @@ export function CallsList({
     [
       hasActiveCall,
       searchState,
+      getCallLink,
       getConversation,
       selectedCallHistoryGroup,
       onSelectCallHistoryGroup,
       onOutgoingAudioCallInConversation,
       onOutgoingVideoCallInConversation,
+      startCallLinkLobbyByRoomId,
       i18n,
     ]
   );

ts/components/CallsTab.tsx

@@ -18,6 +18,7 @@ import { ContextMenu } from './ContextMenu';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import type { UnreadStats } from '../util/countUnreadStats';
 import type { WidthBreakpoint } from './_util';
+import type { CallLinkType } from '../types/CallLink';
 
 enum CallsTabSidebarView {
   CallsListView,
@@ -36,6 +37,7 @@ type CallsTabProps = Readonly<{
     pagination: CallHistoryPagination
   ) => Promise<Array<CallHistoryGroup>>;
   callHistoryEdition: number;
+  getCallLink: (id: string) => CallLinkType | undefined;
   getConversation: (id: string) => ConversationType | void;
   hasFailedStorySends: boolean;
   hasPendingUpdate: boolean;
@@ -56,6 +58,7 @@ type CallsTabProps = Readonly<{
   }) => JSX.Element;
   regionCode: string | undefined;
   savePreferredLeftPaneWidth: (preferredLeftPaneWidth: number) => void;
+  startCallLinkLobbyByRoomId: (roomId: string) => void;
 }>;
 
 export function CallsTab({
@@ -65,6 +68,7 @@ export function CallsTab({
   getCallHistoryGroupsCount,
   getCallHistoryGroups,
   callHistoryEdition,
+  getCallLink,
   getConversation,
   hasFailedStorySends,
   hasPendingUpdate,
@@ -80,6 +84,7 @@ export function CallsTab({
   renderToastManager,
   regionCode,
   savePreferredLeftPaneWidth,
+  startCallLinkLobbyByRoomId,
 }: CallsTabProps): JSX.Element {
   const [sidebarView, setSidebarView] = useState(
     CallsTabSidebarView.CallsListView
@@ -230,6 +235,7 @@ export function CallsTab({
               getCallHistoryGroupsCount={getCallHistoryGroupsCount}
               getCallHistoryGroups={getCallHistoryGroups}
               callHistoryEdition={callHistoryEdition}
+              getCallLink={getCallLink}
               getConversation={getConversation}
               i18n={i18n}
               selectedCallHistoryGroup={selected?.callHistoryGroup ?? null}
@@ -240,6 +246,7 @@ export function CallsTab({
               onOutgoingVideoCallInConversation={
                 handleOutgoingVideoCallInConversation
               }
+              startCallLinkLobbyByRoomId={startCallLinkLobbyByRoomId}
             />
           )}
           {sidebarView === CallsTabSidebarView.NewCallView && (