Fixed story replies modal and calling pip interactions

This commit is contained in:
Alvaro 2022-10-17 10:58:49 -06:00 committed by GitHub
parent 0aa9351d4f
commit bf4e697a0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 92 additions and 19 deletions

View file

@ -3634,6 +3634,18 @@ button.module-image__border-overlay:focus {
// Module: Calling // Module: Calling
.module-calling { .module-calling {
// creates a new independent stacking context that includes modals
//
// container has no width/height, direct children need to:
// - size themselves explicitly (no percentage width/height or top/bottom or left/right)
// - size themselves in relation to viewport (position: fixed)
&__modal-container {
position: fixed;
top: 0;
left: 0;
z-index: $z-index-on-top-of-everything;
}
&__container { &__container {
align-items: center; align-items: center;
background-color: $calling-background-color; background-color: $calling-background-color;
@ -3641,7 +3653,7 @@ button.module-image__border-overlay:focus {
flex-direction: column; flex-direction: column;
height: var(--window-height); height: var(--window-height);
justify-content: center; justify-content: center;
position: absolute; position: fixed;
width: 100%; width: 100%;
z-index: $z-index-calling; z-index: $z-index-calling;
} }
@ -4097,7 +4109,7 @@ button.module-image__border-overlay:focus {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 8px 20px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 8px 20px rgba(0, 0, 0, 0.3);
cursor: grab; cursor: grab;
height: 158px; height: 158px;
position: absolute; position: fixed;
width: 120px; width: 120px;
z-index: $z-index-calling-pip; z-index: $z-index-calling-pip;

View file

@ -3,7 +3,7 @@
/* eslint-disable react/no-array-index-key */ /* eslint-disable react/no-array-index-key */
import React from 'react'; import React, { useContext } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
@ -14,6 +14,7 @@ import type { LocalizerType } from '../types/Util';
import { sortByTitle } from '../util/sortByTitle'; import { sortByTitle } from '../util/sortByTitle';
import type { ConversationType } from '../state/ducks/conversations'; import type { ConversationType } from '../state/ducks/conversations';
import { isInSystemContacts } from '../util/isInSystemContacts'; import { isInSystemContacts } from '../util/isInSystemContacts';
import { ModalContainerContext } from './ModalHost';
type ParticipantType = ConversationType & { type ParticipantType = ConversationType & {
hasRemoteAudio?: boolean; hasRemoteAudio?: boolean;
@ -32,6 +33,8 @@ export const CallingParticipantsList = React.memo(
({ i18n, onClose, ourUuid, participants }: PropsType) => { ({ i18n, onClose, ourUuid, participants }: PropsType) => {
const [root, setRoot] = React.useState<HTMLElement | null>(null); const [root, setRoot] = React.useState<HTMLElement | null>(null);
const modalContainer = useContext(ModalContainerContext) ?? document.body;
const sortedParticipants = React.useMemo<Array<ParticipantType>>( const sortedParticipants = React.useMemo<Array<ParticipantType>>(
() => sortByTitle(participants), () => sortByTitle(participants),
[participants] [participants]
@ -39,14 +42,14 @@ export const CallingParticipantsList = React.memo(
React.useEffect(() => { React.useEffect(() => {
const div = document.createElement('div'); const div = document.createElement('div');
document.body.appendChild(div); modalContainer.appendChild(div);
setRoot(div); setRoot(div);
return () => { return () => {
document.body.removeChild(div); modalContainer.removeChild(div);
setRoot(null); setRoot(null);
}; };
}, []); }, [modalContainer]);
const handleCancel = React.useCallback( const handleCancel = React.useCallback(
(e: React.MouseEvent) => { (e: React.MouseEvent) => {

View file

@ -82,7 +82,7 @@ export const CallingPip = ({
switchToPresentationView, switchToPresentationView,
switchFromPresentationView, switchFromPresentationView,
togglePip, togglePip,
}: PropsType): JSX.Element | null => { }: PropsType): JSX.Element => {
const videoContainerRef = React.useRef<null | HTMLDivElement>(null); const videoContainerRef = React.useRef<null | HTMLDivElement>(null);
const localVideoRef = React.useRef(null); const localVideoRef = React.useRef(null);

View file

@ -0,0 +1,30 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import type { ReactNode } from 'react';
import ReactDOM from 'react-dom';
import { ModalContainerContext } from './ModalHost';
type Props = {
children: ReactNode;
className?: string;
};
/**
* Provide a div directly under the document.body that Modals can use as a DOM parent.
*
* Useful when you want to control the stacking context of all children, by customizing
* the styles of the container in way that also applies to modals.
*/
export const ModalContainer = ({ children, className }: Props): JSX.Element => {
const containerRef = React.useRef<HTMLDivElement | null>(null);
return ReactDOM.createPortal(
<div ref={containerRef} className={className}>
<ModalContainerContext.Provider value={containerRef.current}>
{children}
</ModalContainerContext.Provider>
</div>,
document.body
);
};

View file

@ -1,7 +1,7 @@
// Copyright 2019-2022 Signal Messenger, LLC // Copyright 2019-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import React, { useEffect } from 'react'; import React, { useContext, useEffect } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import type { SpringValues } from '@react-spring/web'; import type { SpringValues } from '@react-spring/web';
@ -19,6 +19,10 @@ import { usePrevious } from '../hooks/usePrevious';
import { handleOutsideClick } from '../util/handleOutsideClick'; import { handleOutsideClick } from '../util/handleOutsideClick';
import * as log from '../logging/log'; import * as log from '../logging/log';
export const ModalContainerContext = React.createContext<HTMLElement | null>(
null
);
export type PropsType = Readonly<{ export type PropsType = Readonly<{
children: React.ReactElement; children: React.ReactElement;
modalName: string; modalName: string;
@ -48,6 +52,7 @@ export const ModalHost = React.memo(
const [root, setRoot] = React.useState<HTMLElement | null>(null); const [root, setRoot] = React.useState<HTMLElement | null>(null);
const containerRef = React.useRef<HTMLDivElement | null>(null); const containerRef = React.useRef<HTMLDivElement | null>(null);
const previousModalName = usePrevious(modalName, modalName); const previousModalName = usePrevious(modalName, modalName);
const modalContainer = useContext(ModalContainerContext) ?? document.body;
if (previousModalName !== modalName) { if (previousModalName !== modalName) {
log.error( log.error(
@ -59,14 +64,14 @@ export const ModalHost = React.memo(
useEffect(() => { useEffect(() => {
const div = document.createElement('div'); const div = document.createElement('div');
document.body.appendChild(div); modalContainer.appendChild(div);
setRoot(div); setRoot(div);
return () => { return () => {
document.body.removeChild(div); modalContainer.removeChild(div);
setRoot(null); setRoot(null);
}; };
}, []); }, [modalContainer]);
useEscapeHandling(onEscape || onClose); useEscapeHandling(onEscape || onClose);
useEffect(() => { useEffect(() => {
@ -74,13 +79,22 @@ export const ModalHost = React.memo(
return noop; return noop;
} }
return handleOutsideClick( return handleOutsideClick(
() => { node => {
// ignore clicks that originate in the calling/pip
// when we're not handling a component in the calling/pip
if (
modalContainer === document.body &&
node instanceof Element &&
node.closest('.module-calling__modal-container')
) {
return false;
}
onClose(); onClose();
return true; return true;
}, },
{ containerElements: [containerRef], name: modalName } { containerElements: [containerRef], name: modalName }
); );
}, [noMouseClose, onClose, containerRef, modalName]); }, [noMouseClose, onClose, containerRef, modalName, modalContainer]);
const className = classNames([ const className = classNames([
theme ? themeClassName(theme) : undefined, theme ? themeClassName(theme) : undefined,
@ -113,12 +127,14 @@ export const ModalHost = React.memo(
return false; return false;
} }
// TitleBar should always receive clicks. Quill suggestions // Exemptions:
// are placed in the document.body so they should be exempt // - TitleBar should always receive clicks.
// too. // - Quill suggestions since they are placed in the document.body
// - Calling module (and pip) are always above everything else
const exemptParent = target.closest( const exemptParent = target.closest(
'.TitleBarContainer__title, ' + '.TitleBarContainer__title, ' +
'.module-composition-input__suggestions' '.module-composition-input__suggestions, ' +
'.module-calling__modal-container'
); );
if (exemptParent) { if (exemptParent) {
return true; return true;

View file

@ -487,7 +487,7 @@ export const StoryViewer = ({
]; ];
return ( return (
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}> <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
<div className="StoryViewer"> <div className="StoryViewer">
<div <div
className="StoryViewer__overlay" className="StoryViewer__overlay"

View file

@ -30,6 +30,7 @@ import { getHideMenuBar } from '../selectors/items';
import { getIsCustomizingPreferredReactions } from '../selectors/preferredReactions'; import { getIsCustomizingPreferredReactions } from '../selectors/preferredReactions';
import { mapDispatchToProps } from '../actions'; import { mapDispatchToProps } from '../actions';
import { ErrorBoundary } from '../../components/ErrorBoundary'; import { ErrorBoundary } from '../../components/ErrorBoundary';
import { ModalContainer } from '../../components/ModalContainer';
const mapStateToProps = (state: StateType) => { const mapStateToProps = (state: StateType) => {
const i18n = getIntl(state); const i18n = getIntl(state);
@ -44,7 +45,11 @@ const mapStateToProps = (state: StateType) => {
menuOptions: getMenuOptions(state), menuOptions: getMenuOptions(state),
hasCustomTitleBar: window.SignalContext.OS.hasCustomTitleBar(), hasCustomTitleBar: window.SignalContext.OS.hasCustomTitleBar(),
hideMenuBar: getHideMenuBar(state), hideMenuBar: getHideMenuBar(state),
renderCallManager: () => <SmartCallManager />, renderCallManager: () => (
<ModalContainer className="module-calling__modal-container">
<SmartCallManager />
</ModalContainer>
),
renderCustomizingPreferredReactionsModal: () => ( renderCustomizingPreferredReactionsModal: () => (
<SmartCustomizingPreferredReactionsModal /> <SmartCustomizingPreferredReactionsModal />
), ),

View file

@ -22,6 +22,13 @@
"reasonCategory": "falseMatch", "reasonCategory": "falseMatch",
"updated": "2018-09-19T18:13:29.628Z" "updated": "2018-09-19T18:13:29.628Z"
}, },
{
"rule": "React-useRef",
"path": "ts/components/ModalContainer.tsx",
"line": " const containerRef = React.useRef<HTMLDivElement | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2022-10-14T16:39:48.461Z"
},
{ {
"rule": "jQuery-globalEval(", "rule": "jQuery-globalEval(",
"path": "components/mp3lameencoder/lib/Mp3LameEncoder.js", "path": "components/mp3lameencoder/lib/Mp3LameEncoder.js",