Place calls on top of story viewer, pause stories while in call

stylesheets/_modules.scss

@@ -7482,7 +7482,7 @@ button.module-image__border-overlay:focus {
   left: var(--window-border);
   top: var(--titlebar-height);
   position: fixed;
-  z-index: $z-index-popup-overlay;
+  z-index: $z-index-modal-host;
 }
 
 .module-modal-host__overlay-container {
@@ -7496,7 +7496,7 @@ button.module-image__border-overlay:focus {
   overflow: hidden;
   padding: 20px;
   position: fixed;
-  z-index: $z-index-popup-overlay;
+  z-index: $z-index-modal-host;
 }
 
 .module-modal-host--on-top-of-everything {

stylesheets/_variables.scss

@@ -265,8 +265,9 @@ $z-index-window-controls: 10000;
 // popups, tooltips, toasts, and other items should stack above it.
 $z-index-story-meta: 3;
 $z-index-scroll-down-button: 10;
-$z-index-stories: 97;
-$z-index-calling: 98;
+$z-index-stories: 98;
+$z-index-calling: 100;
+$z-index-modal-host: 101;
 $z-index-above-popup: 101;
 $z-index-calling-pip: 103;
 $z-index-above-context-menu: 126;

ts/components/StoryViewer.tsx

@@ -56,6 +56,7 @@ export type PropsType = {
     | 'sharedGroupNames'
     | 'title'
   >;
+  hasActiveCall?: boolean;
   hasAllStoriesMuted: boolean;
   i18n: LocalizerType;
   loadStoryReplies: (conversationId: string, messageId: string) => unknown;
@@ -103,6 +104,7 @@ export const StoryViewer = ({
   deleteStoryForEveryone,
   getPreferredBadge,
   group,
+  hasActiveCall,
   hasAllStoriesMuted,
   i18n,
   loadStoryReplies,
@@ -276,6 +278,7 @@ export const StoryViewer = ({
   const [pauseStory, setPauseStory] = useState(false);
 
   const shouldPauseViewing =
+    hasActiveCall ||
     hasConfirmHideStory ||
     hasExpandedCaption ||
     hasStoryDetailsModal ||

ts/state/selectors/calling.ts

@@ -59,6 +59,12 @@ export const isInCall = createSelector(
   (call: CallStateType | undefined): boolean => Boolean(call)
 );
 
+export const isInFullScreenCall = createSelector(
+  getCalling,
+  (state: CallingStateType): boolean =>
+    Boolean(state.activeCallState && !state.activeCallState.pip)
+);
+
 export const getIncomingCall = createSelector(
   getCallsByConversation,
   getUserACI,

ts/state/smart/StoryViewer.tsx

@@ -24,6 +24,7 @@ import {
   getStoryReplies,
   getStoryByIdSelector,
 } from '../selectors/stories';
+import { isInFullScreenCall } from '../selectors/calling';
 import { renderEmojiPicker } from './renderEmojiPicker';
 import { strictAssert } from '../../util/assert';
 import { useActions as useEmojisActions } from '../ducks/emojis';
@@ -79,11 +80,14 @@ export function SmartStoryViewer(): JSX.Element | null {
     getHasAllStoriesMuted
   );
 
+  const hasActiveCall = useSelector(isInFullScreenCall);
+
   return (
     <StoryViewer
       currentIndex={selectedStoryData.currentIndex}
       getPreferredBadge={getPreferredBadge}
       group={conversationStory.group}
+      hasActiveCall={hasActiveCall}
       hasAllStoriesMuted={hasAllStoriesMuted}
       i18n={i18n}
       numStories={selectedStoryData.numStories}