diff --git a/package.json b/package.json index 77c8cf2a..7cfd7337 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-visually-hidden": "^1.0.3", "@react-aria/button": "^3.3.4", - "@react-aria/dialog": "^3.1.4", "@react-aria/focus": "^3.5.0", "@react-aria/menu": "^3.3.0", "@react-aria/overlays": "^3.7.3", @@ -42,7 +41,6 @@ "@react-aria/utils": "^3.10.0", "@react-spring/web": "^9.4.4", "@react-stately/collections": "^3.3.4", - "@react-stately/overlays": "^3.1.3", "@react-stately/select": "^3.1.3", "@react-stately/tooltip": "^3.0.5", "@react-stately/tree": "^3.2.0", @@ -84,6 +82,7 @@ "devDependencies": { "@babel/core": "^7.16.5", "@react-spring/rafz": "^9.7.3", + "@react-types/dialog": "^3.5.5", "@sentry/vite-plugin": "^0.3.0", "@storybook/react": "^6.5.0-alpha.5", "@testing-library/jest-dom": "^5.16.5", diff --git a/src/Modal.module.css b/src/Modal.module.css index 19c2ce72..12d8853c 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -1,5 +1,5 @@ /* -Copyright 2022 New Vector Ltd +Copyright 2022 - 2023 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,77 +14,204 @@ See the License for the specific language governing permissions and limitations under the License. */ -.modalOverlay { +.overlay { position: fixed; z-index: 100; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: rgba(23, 25, 28, 0.5); - display: flex; - align-items: center; - justify-content: center; + inset: 0; + background: rgba(3, 12, 27, 0.528); +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.dialogOverlay[data-state="open"] { + animation: fade-in 200ms; +} + +@keyframes fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +.dialogOverlay[data-state="closed"] { + animation: fade-out 130ms; } .modal { - background: var(--cpd-color-bg-subtle-secondary); - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); - border-radius: 8px; - max-width: 90vw; - width: 600px; + position: fixed; + z-index: 101; display: flex; flex-direction: column; } -.modalHeader { - display: flex; - justify-content: space-between; - padding: 34px 32px 0 32px; +.dialog { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + inline-size: 520px; + max-inline-size: 90%; + max-block-size: 600px; } -.modalHeader h3 { - font-weight: 600; - font-size: var(--font-size-title); - margin: 0; +@keyframes zoom-in { + from { + opacity: 0; + transform: translate(-50%, -50%) scale(80%); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(100%); + } } -.closeButton { - position: relative; - display: flex; - justify-content: center; - align-items: center; - background-color: transparent; - padding: 0; - border: none; - cursor: pointer; +@keyframes zoom-out { + from { + opacity: 1; + transform: translate(-50%, -50%) scale(100%); + } + to { + opacity: 0; + transform: translate(-50%, -50%) scale(80%); + } +} + +.dialog[data-state="open"] { + animation: zoom-in 200ms; +} + +.dialog[data-state="closed"] { + animation: zoom-out 130ms; +} + +@media (prefers-reduced-motion) { + .dialog[data-state="open"] { + animation-name: fade-in; + } + + .dialog[data-state="closed"] { + animation-name: fade-out; + } } .content { - padding: 24px 32px; + display: flex; + flex-direction: column; + overflow: hidden; } -.content p { - margin-top: 0; +.dialog .content { + flex-grow: 1; + background: var(--cpd-color-bg-canvas-default); } -@media (max-width: 799px) { - .modalHeader { - display: flex; - justify-content: space-between; - padding: 32px 20px 0 20px; - } +.drawer .content { + overflow: auto; +} - .modal.mobileFullScreen { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - width: 100%; - height: 100%; - max-width: none; - max-height: none; - border-radius: 0; +.drawer { + background: var(--cpd-color-bg-canvas-default); + inset-block-end: 0; + inset-inline: max(0px, calc((100% - 520px) / 2)); + max-block-size: 90%; + border-start-start-radius: 20px; + border-start-end-radius: 20px; + /* Drawer handle comes in the Android style by default */ + --handle-block-size: 4px; + --handle-inline-size: 32px; + --handle-inset-block-start: var(--cpd-space-4x); + --handle-inset-block-end: var(--cpd-space-4x); +} + +body[data-platform="ios"] .drawer { + --handle-block-size: 5px; + --handle-inline-size: 36px; + --handle-inset-block-start: var(--cpd-space-1-5x); + --handle-inset-block-end: calc(var(--cpd-space-1x) / 4); +} + +.close { + cursor: pointer; + color: var(--cpd-color-icon-secondary); + border-radius: var(--cpd-radius-pill-effect); + padding: var(--cpd-space-1x); + background: var(--cpd-color-bg-subtle-secondary); + border: none; +} + +.close svg { + display: block; +} + +@media (hover: hover) { + .close:hover { + background: var(--cpd-color-bg-subtle-primary); + color: var(--cpd-color-icon-primary); } } + +.close:active { + background: var(--cpd-color-bg-subtle-primary); + color: var(--cpd-color-icon-primary); +} + +.header { + background: var(--cpd-color-bg-subtle-secondary); + display: grid; +} + +.dialog .header { + padding-block-start: var(--cpd-space-4x); + grid-template-columns: + var(--cpd-space-10x) 1fr minmax(var(--cpd-space-6x), auto) + var(--cpd-space-4x); + grid-template-rows: auto minmax(var(--cpd-space-4x), auto); + /* TODO: Support tabs */ + grid-template-areas: ". title close ." "tabs tabs tabs tabs"; + align-items: center; +} + +.dialog .header h2 { + grid-area: title; + margin: 0; +} + +.drawer .header { + grid-template-areas: "tabs"; + position: relative; +} + +.close { + grid-area: close; +} + +.dialog .body { + padding-inline: var(--cpd-space-10x); + padding-block: var(--cpd-space-10x) var(--cpd-space-12x); + overflow: auto; +} + +.drawer .body { + padding-inline: var(--cpd-space-4x); + padding-block: var(--cpd-space-9x) var(--cpd-space-10x); +} + +.handle { + content: ""; + position: absolute; + block-size: var(--handle-block-size); + inset-inline: calc((100% - var(--handle-inline-size)) / 2); + inset-block-start: var(--handle-inset-block-start); + background: var(--cpd-color-icon-secondary); + border-radius: var(--cpd-radius-pill-effect); +} diff --git a/src/Modal.tsx b/src/Modal.tsx index 56db481e..8c97ca31 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -1,5 +1,5 @@ /* -Copyright 2022 New Vector Ltd +Copyright 2023 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,123 +14,128 @@ See the License for the specific language governing permissions and limitations under the License. */ -/* eslint-disable jsx-a11y/no-autofocus */ - -import { useRef, useMemo, ReactNode } from "react"; -import { - useOverlay, - usePreventScroll, - useModal, - OverlayContainer, - OverlayProps, -} from "@react-aria/overlays"; -import { - OverlayTriggerState, - useOverlayTriggerState, -} from "@react-stately/overlays"; -import { useDialog } from "@react-aria/dialog"; -import { FocusScope } from "@react-aria/focus"; -import { useButton } from "@react-aria/button"; -import classNames from "classnames"; +import { ReactNode, useCallback } from "react"; import { AriaDialogProps } from "@react-types/dialog"; import { useTranslation } from "react-i18next"; +import { + Root as DialogRoot, + Portal as DialogPortal, + Overlay as DialogOverlay, + Content as DialogContent, + Title as DialogTitle, + Close as DialogClose, +} from "@radix-ui/react-dialog"; +import { Drawer } from "vaul"; +import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; +import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg"; +import classNames from "classnames"; +import { Heading } from "@vector-im/compound-web"; -import { ReactComponent as CloseIcon } from "./icons/Close.svg"; import styles from "./Modal.module.css"; +import { useMediaQuery } from "./useMediaQuery"; +import { Glass } from "./Glass"; -export interface ModalProps extends OverlayProps, AriaDialogProps { +// TODO: Support tabs +export interface ModalProps extends AriaDialogProps { title: string; children: ReactNode; className?: string; - mobileFullScreen?: boolean; - onClose: () => void; + /** + * The controlled open state of the modal. + */ + // An option to leave the open state uncontrolled is intentionally not + // provided, since modals are always opened due to external triggers, and it + // is the author's belief that controlled components lead to more obvious code + open: boolean; + /** + * Callback for when the user dismisses the modal. If undefined, the modal + * will be non-dismissable. + */ + onDismiss?: () => void; } +/** + * A modal, taking the form of a drawer / bottom sheet on touchscreen devices, + * and a dialog box on desktop. + */ export function Modal({ title, children, className, - mobileFullScreen, - onClose, + open, + onDismiss, ...rest }: ModalProps) { const { t } = useTranslation(); - const modalRef = useRef(null); - const { overlayProps, underlayProps } = useOverlay( - { ...rest, onClose }, - modalRef - ); - usePreventScroll(); - const { modalProps } = useModal(); - const { dialogProps, titleProps } = useDialog(rest, modalRef); - const closeButtonRef = useRef(null); - const { buttonProps: closeButtonProps } = useButton( - { - onPress: () => onClose(), + const touchscreen = useMediaQuery("(hover: none)"); + const onOpenChange = useCallback( + (open: boolean) => { + if (!open) onDismiss?.(); }, - closeButtonRef + [onDismiss] ); - return ( - -
- -
+ + + -
-

{title}

- +
+
+
+ + {title} + +
+
{children}
- {children} -
- -
- - ); -} - -interface ModalContentProps { - children: ReactNode; - className?: string; -} - -export function ModalContent({ - children, - className, - ...rest -}: ModalContentProps) { - return ( -
- {children} -
- ); -} - -export function useModalTriggerState(): { - modalState: OverlayTriggerState; - modalProps: { isOpen: boolean; onClose: () => void }; -} { - const modalState = useOverlayTriggerState({}); - const modalProps = useMemo( - () => ({ isOpen: modalState.isOpen, onClose: modalState.close }), - [modalState] - ); - return { modalState, modalProps }; + + + + ); + } else { + return ( + + + + + +
+
+ + + {title} + + + {onDismiss !== undefined && ( + + + + )} +
+
{children}
+
+ + + + + ); + } } diff --git a/src/NewModal.module.css b/src/NewModal.module.css deleted file mode 100644 index 12d8853c..00000000 --- a/src/NewModal.module.css +++ /dev/null @@ -1,217 +0,0 @@ -/* -Copyright 2022 - 2023 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - -http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.overlay { - position: fixed; - z-index: 100; - inset: 0; - background: rgba(3, 12, 27, 0.528); -} - -@keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.dialogOverlay[data-state="open"] { - animation: fade-in 200ms; -} - -@keyframes fade-out { - from { - opacity: 1; - } - to { - opacity: 0; - } -} - -.dialogOverlay[data-state="closed"] { - animation: fade-out 130ms; -} - -.modal { - position: fixed; - z-index: 101; - display: flex; - flex-direction: column; -} - -.dialog { - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - box-sizing: border-box; - inline-size: 520px; - max-inline-size: 90%; - max-block-size: 600px; -} - -@keyframes zoom-in { - from { - opacity: 0; - transform: translate(-50%, -50%) scale(80%); - } - to { - opacity: 1; - transform: translate(-50%, -50%) scale(100%); - } -} - -@keyframes zoom-out { - from { - opacity: 1; - transform: translate(-50%, -50%) scale(100%); - } - to { - opacity: 0; - transform: translate(-50%, -50%) scale(80%); - } -} - -.dialog[data-state="open"] { - animation: zoom-in 200ms; -} - -.dialog[data-state="closed"] { - animation: zoom-out 130ms; -} - -@media (prefers-reduced-motion) { - .dialog[data-state="open"] { - animation-name: fade-in; - } - - .dialog[data-state="closed"] { - animation-name: fade-out; - } -} - -.content { - display: flex; - flex-direction: column; - overflow: hidden; -} - -.dialog .content { - flex-grow: 1; - background: var(--cpd-color-bg-canvas-default); -} - -.drawer .content { - overflow: auto; -} - -.drawer { - background: var(--cpd-color-bg-canvas-default); - inset-block-end: 0; - inset-inline: max(0px, calc((100% - 520px) / 2)); - max-block-size: 90%; - border-start-start-radius: 20px; - border-start-end-radius: 20px; - /* Drawer handle comes in the Android style by default */ - --handle-block-size: 4px; - --handle-inline-size: 32px; - --handle-inset-block-start: var(--cpd-space-4x); - --handle-inset-block-end: var(--cpd-space-4x); -} - -body[data-platform="ios"] .drawer { - --handle-block-size: 5px; - --handle-inline-size: 36px; - --handle-inset-block-start: var(--cpd-space-1-5x); - --handle-inset-block-end: calc(var(--cpd-space-1x) / 4); -} - -.close { - cursor: pointer; - color: var(--cpd-color-icon-secondary); - border-radius: var(--cpd-radius-pill-effect); - padding: var(--cpd-space-1x); - background: var(--cpd-color-bg-subtle-secondary); - border: none; -} - -.close svg { - display: block; -} - -@media (hover: hover) { - .close:hover { - background: var(--cpd-color-bg-subtle-primary); - color: var(--cpd-color-icon-primary); - } -} - -.close:active { - background: var(--cpd-color-bg-subtle-primary); - color: var(--cpd-color-icon-primary); -} - -.header { - background: var(--cpd-color-bg-subtle-secondary); - display: grid; -} - -.dialog .header { - padding-block-start: var(--cpd-space-4x); - grid-template-columns: - var(--cpd-space-10x) 1fr minmax(var(--cpd-space-6x), auto) - var(--cpd-space-4x); - grid-template-rows: auto minmax(var(--cpd-space-4x), auto); - /* TODO: Support tabs */ - grid-template-areas: ". title close ." "tabs tabs tabs tabs"; - align-items: center; -} - -.dialog .header h2 { - grid-area: title; - margin: 0; -} - -.drawer .header { - grid-template-areas: "tabs"; - position: relative; -} - -.close { - grid-area: close; -} - -.dialog .body { - padding-inline: var(--cpd-space-10x); - padding-block: var(--cpd-space-10x) var(--cpd-space-12x); - overflow: auto; -} - -.drawer .body { - padding-inline: var(--cpd-space-4x); - padding-block: var(--cpd-space-9x) var(--cpd-space-10x); -} - -.handle { - content: ""; - position: absolute; - block-size: var(--handle-block-size); - inset-inline: calc((100% - var(--handle-inline-size)) / 2); - inset-block-start: var(--handle-inset-block-start); - background: var(--cpd-color-icon-secondary); - border-radius: var(--cpd-radius-pill-effect); -} diff --git a/src/NewModal.tsx b/src/NewModal.tsx deleted file mode 100644 index 02e77b47..00000000 --- a/src/NewModal.tsx +++ /dev/null @@ -1,141 +0,0 @@ -/* -Copyright 2023 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { ReactNode, useCallback } from "react"; -import { AriaDialogProps } from "@react-types/dialog"; -import { useTranslation } from "react-i18next"; -import { - Root as DialogRoot, - Portal as DialogPortal, - Overlay as DialogOverlay, - Content as DialogContent, - Title as DialogTitle, - Close as DialogClose, -} from "@radix-ui/react-dialog"; -import { Drawer } from "vaul"; -import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; -import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg"; -import classNames from "classnames"; -import { Heading } from "@vector-im/compound-web"; - -import styles from "./NewModal.module.css"; -import { useMediaQuery } from "./useMediaQuery"; -import { Glass } from "./Glass"; - -// TODO: Support tabs -export interface ModalProps extends AriaDialogProps { - title: string; - children: ReactNode; - className?: string; - /** - * The controlled open state of the modal. - */ - // An option to leave the open state uncontrolled is intentionally not - // provided, since modals are always opened due to external triggers, and it - // is the author's belief that controlled components lead to more obvious code - open: boolean; - /** - * Callback for when the user dismisses the modal. If undefined, the modal - * will be non-dismissable. - */ - onDismiss?: () => void; -} - -/** - * A modal, taking the form of a drawer / bottom sheet on touchscreen devices, - * and a dialog box on desktop. - */ -export function Modal({ - title, - children, - className, - open, - onDismiss, - ...rest -}: ModalProps) { - const { t } = useTranslation(); - const touchscreen = useMediaQuery("(hover: none)"); - const onOpenChange = useCallback( - (open: boolean) => { - if (!open) onDismiss?.(); - }, - [onDismiss] - ); - - if (touchscreen) { - return ( - - - - -
-
-
- - {title} - -
-
{children}
-
- - - - ); - } else { - return ( - - - - - -
-
- - - {title} - - - {onDismiss !== undefined && ( - - - - )} -
-
{children}
-
- - - - - ); - } -} diff --git a/src/UserMenuContainer.tsx b/src/UserMenuContainer.tsx index a03e5b5a..359f75f6 100644 --- a/src/UserMenuContainer.tsx +++ b/src/UserMenuContainer.tsx @@ -19,7 +19,6 @@ import { useHistory, useLocation } from "react-router-dom"; import { useClientLegacy } from "./ClientContext"; import { useProfile } from "./profile/useProfile"; -import { useModalTriggerState } from "./Modal"; import { SettingsModal } from "./settings/SettingsModal"; import { UserMenu } from "./UserMenu"; @@ -32,7 +31,11 @@ export function UserMenuContainer({ preventNavigation = false }: Props) { const history = useHistory(); const { client, logout, authenticated, passwordlessUser } = useClientLegacy(); const { displayName, avatarUrl } = useProfile(client); - const { modalState, modalProps } = useModalTriggerState(); + const [settingsModalOpen, setSettingsModalOpen] = useState(false); + const onDismissSettingsModal = useCallback( + () => setSettingsModalOpen(false), + [setSettingsModalOpen] + ); const [defaultSettingsTab, setDefaultSettingsTab] = useState(); @@ -41,11 +44,11 @@ export function UserMenuContainer({ preventNavigation = false }: Props) { switch (value) { case "user": setDefaultSettingsTab("profile"); - modalState.open(); + setSettingsModalOpen(true); break; case "settings": setDefaultSettingsTab("audio"); - modalState.open(); + setSettingsModalOpen(true); break; case "logout": logout?.(); @@ -55,7 +58,7 @@ export function UserMenuContainer({ preventNavigation = false }: Props) { break; } }, - [history, location, logout, modalState] + [history, location, logout, setSettingsModalOpen] ); const userName = client?.getUserIdLocalpart() ?? ""; @@ -70,11 +73,12 @@ export function UserMenuContainer({ preventNavigation = false }: Props) { userId={client?.getUserId() ?? ""} displayName={displayName || (userName ? userName.replace("@", "") : "")} /> - {modalState.isOpen && client && ( + {client && ( )} diff --git a/src/home/JoinExistingCallModal.tsx b/src/home/JoinExistingCallModal.tsx index dfa6b095..35672295 100644 --- a/src/home/JoinExistingCallModal.tsx +++ b/src/home/JoinExistingCallModal.tsx @@ -17,36 +17,29 @@ limitations under the License. import { PressEvent } from "@react-types/shared"; import { useTranslation } from "react-i18next"; -import { Modal, ModalContent } from "../Modal"; +import { Modal } from "../Modal"; import { Button } from "../button"; import { FieldRow } from "../input/Input"; import styles from "./JoinExistingCallModal.module.css"; interface Props { + open: boolean; + onDismiss: () => void; onJoin: (e: PressEvent) => void; - onClose: () => void; - // TODO: add used parameters for - [index: string]: unknown; } -export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) { + +export function JoinExistingCallModal({ onJoin, open, onDismiss }: Props) { const { t } = useTranslation(); return ( - - -

{t("This call already exists, would you like to join?")}

- - - - - + +

{t("This call already exists, would you like to join?")}

+ + + + ); } diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx index 0f8cc93c..b77369b4 100644 --- a/src/home/RegisteredView.tsx +++ b/src/home/RegisteredView.tsx @@ -33,7 +33,6 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input"; import { Button } from "../button"; import { CallList } from "./CallList"; import { UserMenuContainer } from "../UserMenuContainer"; -import { useModalTriggerState } from "../Modal"; import { JoinExistingCallModal } from "./JoinExistingCallModal"; import { Caption, Title } from "../typography/Typography"; import { Form } from "../form/Form"; @@ -56,7 +55,12 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) { const [optInAnalytics] = useOptInAnalytics(); const history = useHistory(); const { t } = useTranslation(); - const { modalState, modalProps } = useModalTriggerState(); + const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] = + useState(false); + const onDismissJoinExistingCallModal = useCallback( + () => setJoinExistingCallModalOpen(false), + [setJoinExistingCallModalOpen] + ); const [e2eeEnabled] = useEnableE2EE(); const onSubmit: FormEventHandler = useCallback( @@ -93,7 +97,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) { setExistingAlias(roomAliasLocalpartFromRoomName(roomName)); setLoading(false); setError(undefined); - modalState.open(); + setJoinExistingCallModalOpen(true); } else { console.error(error); setLoading(false); @@ -101,7 +105,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) { } }); }, - [client, history, modalState, callType, e2eeEnabled] + [client, history, setJoinExistingCallModalOpen, callType, e2eeEnabled] ); const recentRooms = useGroupCallRooms(client); @@ -175,9 +179,11 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) { )}
- {modalState.isOpen && ( - - )} + ); } diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx index 721c56d1..a65fe3e1 100644 --- a/src/home/UnauthenticatedView.tsx +++ b/src/home/UnauthenticatedView.tsx @@ -30,7 +30,6 @@ import { sanitiseRoomNameInput, } from "../matrix-utils"; import { useInteractiveRegistration } from "../auth/useInteractiveRegistration"; -import { useModalTriggerState } from "../Modal"; import { JoinExistingCallModal } from "./JoinExistingCallModal"; import { useRecaptcha } from "../auth/useRecaptcha"; import { Body, Caption, Link } from "../typography/Typography"; @@ -55,7 +54,12 @@ export const UnauthenticatedView: FC = () => { const { recaptchaKey, register } = useInteractiveRegistration(); const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey); - const { modalState, modalProps } = useModalTriggerState(); + const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] = + useState(false); + const onDismissJoinExistingCallModal = useCallback( + () => setJoinExistingCallModalOpen(false), + [setJoinExistingCallModalOpen] + ); const [onFinished, setOnFinished] = useState<() => void>(); const history = useHistory(); const { t } = useTranslation(); @@ -110,7 +114,7 @@ export const UnauthenticatedView: FC = () => { }); setLoading(false); - modalState.open(); + setJoinExistingCallModalOpen(true); return; } else { throw error; @@ -139,7 +143,7 @@ export const UnauthenticatedView: FC = () => { execute, history, callType, - modalState, + setJoinExistingCallModalOpen, setClient, e2eeEnabled, ] @@ -235,8 +239,12 @@ export const UnauthenticatedView: FC = () => {
- {modalState.isOpen && onFinished && ( - + {onFinished && ( + )} ); diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx index c99eada8..b109d3b9 100644 --- a/src/livekit/MediaDevicesContext.tsx +++ b/src/livekit/MediaDevicesContext.tsx @@ -200,8 +200,10 @@ export const useMediaDevices = () => useContext(MediaDevicesContext); * default because it may involve requesting additional permissions from the * user. */ -export const useMediaDeviceNames = (context: MediaDevices) => +export const useMediaDeviceNames = (context: MediaDevices, enabled = true) => useEffect(() => { - context.startUsingDeviceNames(); - return context.stopUsingDeviceNames; - }, [context]); + if (enabled) { + context.startUsingDeviceNames(); + return context.stopUsingDeviceNames; + } + }, [context, enabled]); diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index ac0ae17d..e7807bda 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -45,7 +45,6 @@ import { import { useEnableE2EE } from "../settings/useSetting"; import { useRoomAvatar } from "./useRoomAvatar"; import { useRoomName } from "./useRoomName"; -import { useModalTriggerState } from "../Modal"; import { useJoinRule } from "./useJoinRule"; import { ShareModal } from "./ShareModal"; @@ -286,12 +285,15 @@ export function GroupCallView({ const joinRule = useJoinRule(rtcSession.room); - const { modalState: shareModalState, modalProps: shareModalProps } = - useModalTriggerState(); + const [shareModalOpen, setShareModalOpen] = useState(false); + const onDismissShareModal = useCallback( + () => setShareModalOpen(false), + [setShareModalOpen] + ); const onShareClickFn = useCallback( - () => shareModalState.open(), - [shareModalState] + () => setShareModalOpen(true), + [setShareModalOpen] ); const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null; @@ -311,8 +313,12 @@ export function GroupCallView({ return ; } - const shareModal = shareModalState.isOpen && ( - + const shareModal = ( + ); if (isJoined) { diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 8e396841..707eb5d8 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -30,7 +30,6 @@ import { Room as MatrixRoom } from "matrix-js-sdk/src/models/room"; import { Ref, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import useMeasure from "react-use-measure"; -import { OverlayTriggerState } from "@react-stately/overlays"; import { logger } from "matrix-js-sdk/src/logger"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession"; @@ -51,7 +50,6 @@ import { VideoGrid, } from "../video-grid/VideoGrid"; import { useShowConnectionStats } from "../settings/useSetting"; -import { useModalTriggerState } from "../Modal"; import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { useUrlParams } from "../UrlParams"; import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts"; @@ -313,25 +311,20 @@ export function InCallView({ ); }; - const { - modalState: rageshakeRequestModalState, - modalProps: rageshakeRequestModalProps, - } = useRageshakeRequestModal(rtcSession.room.roomId); + const rageshakeRequestModalProps = useRageshakeRequestModal( + rtcSession.room.roomId + ); - const { - modalState: settingsModalState, - modalProps: settingsModalProps, - }: { - modalState: OverlayTriggerState; - modalProps: { - isOpen: boolean; - onClose: () => void; - }; - } = useModalTriggerState(); + const [settingsModalOpen, setSettingsModalOpen] = useState(false); - const openSettings = useCallback(() => { - settingsModalState.open(); - }, [settingsModalState]); + const openSettings = useCallback( + () => setSettingsModalOpen(true), + [setSettingsModalOpen] + ); + const closeSettings = useCallback( + () => setSettingsModalOpen(false), + [setSettingsModalOpen] + ); const toggleScreensharing = useCallback(async () => { exitFullscreen(); @@ -442,19 +435,13 @@ export function InCallView({ show={showInspector} /> )*/} - {rageshakeRequestModalState.isOpen && !noControls && ( - - )} - {settingsModalState.isOpen && ( - - )} + {!noControls && } +
); } diff --git a/src/room/RageshakeRequestModal.tsx b/src/room/RageshakeRequestModal.tsx index 479ff280..ed9acbcb 100644 --- a/src/room/RageshakeRequestModal.tsx +++ b/src/room/RageshakeRequestModal.tsx @@ -17,7 +17,7 @@ limitations under the License. import { FC, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { Modal, ModalContent, ModalProps } from "../Modal"; +import { Modal, ModalProps } from "../Modal"; import { Button } from "../button"; import { FieldRow, ErrorMessage } from "../input/Input"; import { useSubmitRageshake } from "../settings/submit-rageshake"; @@ -26,51 +26,49 @@ import { Body } from "../typography/Typography"; interface Props extends Omit { rageshakeRequestId: string; roomId: string; - onClose: () => void; + open: boolean; + onDismiss: () => void; } export const RageshakeRequestModal: FC = ({ rageshakeRequestId, roomId, - ...rest + open, + onDismiss, }) => { const { t } = useTranslation(); const { submitRageshake, sending, sent, error } = useSubmitRageshake(); useEffect(() => { - if (sent) { - rest.onClose(); - } - }, [sent, rest]); + if (sent) onDismiss(); + }, [sent, onDismiss]); return ( - - - - {t( - "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log." - )} - - - - - {error && ( - - - + + + {t( + "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log." )} - + + + + + {error && ( + + + + )} ); }; diff --git a/src/room/ShareModal.module.css b/src/room/ShareModal.module.css index 75ae26a9..dec0c304 100644 --- a/src/room/ShareModal.module.css +++ b/src/room/ShareModal.module.css @@ -14,10 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.inviteModal { - max-width: 413px; -} - .copyButton { width: 100%; } diff --git a/src/room/ShareModal.tsx b/src/room/ShareModal.tsx index 520ab855..b9adc8e0 100644 --- a/src/room/ShareModal.tsx +++ b/src/room/ShareModal.tsx @@ -17,35 +17,30 @@ limitations under the License. import { FC } from "react"; import { useTranslation } from "react-i18next"; -import { Modal, ModalContent, ModalProps } from "../Modal"; +import { Modal } from "../Modal"; import { CopyButton } from "../button"; import { getRoomUrl } from "../matrix-utils"; import styles from "./ShareModal.module.css"; import { useRoomSharedKey } from "../e2ee/sharedKeyManagement"; -interface Props extends Omit { +interface Props { roomId: string; + open: boolean; + onDismiss: () => void; } -export const ShareModal: FC = ({ roomId, ...rest }) => { +export const ShareModal: FC = ({ roomId, open, onDismiss }) => { const { t } = useTranslation(); const roomSharedKey = useRoomSharedKey(roomId); return ( - - -

{t("Copy and share this call link")}

- - + +

{t("Copy and share this call link")}

+ ); }; diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index 37e997dc..5385ee73 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -14,10 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useEffect, useCallback, useMemo, useRef, FC } from "react"; +import { useEffect, useCallback, useMemo, useRef, FC, useState } from "react"; import useMeasure from "react-use-measure"; import { ResizeObserver } from "@juggle/resize-observer"; -import { OverlayTriggerState } from "@react-stately/overlays"; import { usePreviewTracks } from "@livekit/components-react"; import { CreateLocalTracksOptions, @@ -28,7 +27,6 @@ import { import { MicButton, SettingsButton, VideoButton } from "../button"; import { Avatar } from "../Avatar"; import styles from "./VideoPreview.module.css"; -import { useModalTriggerState } from "../Modal"; import { SettingsModal } from "../settings/SettingsModal"; import { useClient } from "../ClientContext"; import { useMediaDevices } from "../livekit/MediaDevicesContext"; @@ -54,20 +52,16 @@ export const VideoPreview: FC = ({ matrixInfo, muteStates }) => { const { client } = useClient(); const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver }); - const { - modalState: settingsModalState, - modalProps: settingsModalProps, - }: { - modalState: OverlayTriggerState; - modalProps: { - isOpen: boolean; - onClose: () => void; - }; - } = useModalTriggerState(); + const [settingsModalOpen, setSettingsModalOpen] = useState(false); - const openSettings = useCallback(() => { - settingsModalState.open(); - }, [settingsModalState]); + const openSettings = useCallback( + () => setSettingsModalOpen(true), + [setSettingsModalOpen] + ); + const closeSettings = useCallback( + () => setSettingsModalOpen(false), + [setSettingsModalOpen] + ); const devices = useMediaDevices(); @@ -153,8 +147,12 @@ export const VideoPreview: FC = ({ matrixInfo, muteStates }) => { - {settingsModalState.isOpen && client && ( - + {client && ( + )} ); diff --git a/src/settings/SettingsModal.module.css b/src/settings/SettingsModal.module.css index 692c48ae..d7b06f5a 100644 --- a/src/settings/SettingsModal.module.css +++ b/src/settings/SettingsModal.module.css @@ -1,5 +1,5 @@ /* -Copyright 2022 New Vector Ltd +Copyright 2022 - 2023 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,18 +15,13 @@ limitations under the License. */ .settingsModal { - width: 774px; - height: 480px; + block-size: 550px; } .settingsModal p { color: var(--cpd-color-text-secondary); } -.tabContainer { - padding: 27px 20px; -} - .fieldRowText { margin-bottom: 0; } diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 0d4983ed..39c3789a 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -51,11 +51,11 @@ import { } from "../livekit/MediaDevicesContext"; interface Props { - isOpen: boolean; + open: boolean; + onDismiss: () => void; client: MatrixClient; roomId?: string; defaultTab?: string; - onClose: () => void; } export const SettingsModal = (props: Props) => { @@ -119,7 +119,7 @@ export const SettingsModal = (props: Props) => { ); const devices = useMediaDevices(); - useMediaDeviceNames(devices); + useMediaDeviceNames(devices, props.open); const audioTab = ( { return ( { // encode as UTF-8 @@ -343,22 +348,12 @@ export function useRageshakeRequest(): ( return sendRageshakeRequest; } -interface ModalProps { - isOpen: boolean; - onClose: () => void; -} -interface ModalPropsWithId extends ModalProps { - rageshakeRequestId: string; -} -export function useRageshakeRequestModal(roomId: string): { - modalState: OverlayTriggerState; - modalProps: ModalPropsWithId; -} { - const { modalState, modalProps } = useModalTriggerState() as { - modalState: OverlayTriggerState; - modalProps: ModalProps; - }; +export function useRageshakeRequestModal( + roomId: string +): ComponentProps { + const [open, setOpen] = useState(false); + const onDismiss = useCallback(() => setOpen(false), [setOpen]); const { client } = useClient(); const [rageshakeRequestId, setRageshakeRequestId] = useState(); @@ -374,7 +369,7 @@ export function useRageshakeRequestModal(roomId: string): { client.getUserId() !== event.getSender() ) { setRageshakeRequestId(event.getContent().request_id); - modalState.open(); + setOpen(true); } }; @@ -383,10 +378,12 @@ export function useRageshakeRequestModal(roomId: string): { return () => { client.removeListener(ClientEvent.Event, onEvent); }; - }, [modalState.open, roomId, client, modalState]); + }, [setOpen, roomId, client]); return { - modalState, - modalProps: { ...modalProps, rageshakeRequestId: rageshakeRequestId ?? "" }, + rageshakeRequestId: rageshakeRequestId ?? "", + roomId, + open, + onDismiss, }; } diff --git a/src/tabs/Tabs.module.css b/src/tabs/Tabs.module.css index dfee8b3a..d0b37d50 100644 --- a/src/tabs/Tabs.module.css +++ b/src/tabs/Tabs.module.css @@ -78,32 +78,3 @@ limitations under the License. padding: 0; overflow-y: auto; } - -@media (min-width: 800px) { - .tab { - width: 200px; - padding: 0 16px; - } - - .tab > * { - margin: 0 12px 0 0; - } - - .tabContainer { - width: 100%; - flex-direction: row; - padding: 20px 18px; - box-sizing: border-box; - overflow: hidden; - } - - .tabList { - flex-direction: column; - margin-bottom: 0; - gap: 0; - } - - .tabPanel { - padding: 0 40px; - } -} diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx index 04d1b297..5d8d1987 100644 --- a/src/video-grid/VideoTile.tsx +++ b/src/video-grid/VideoTile.tsx @@ -14,7 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { ComponentProps, forwardRef, useCallback, useEffect } from "react"; +import { + ComponentProps, + forwardRef, + useCallback, + useEffect, + useState, +} from "react"; import { animated } from "@react-spring/web"; import classNames from "classnames"; import { useTranslation } from "react-i18next"; @@ -36,7 +42,6 @@ import { Avatar } from "../Avatar"; import styles from "./VideoTile.module.css"; import { useReactiveState } from "../useReactiveState"; import { AudioButton, FullscreenButton } from "../button/Button"; -import { useModalTriggerState } from "../Modal"; import { VideoTileSettingsModal } from "./VideoTileSettingsModal"; export interface ItemData { @@ -117,11 +122,16 @@ export const VideoTile = forwardRef( onToggleFullscreen(data.id); }, [data, onToggleFullscreen]); - const { - modalState: videoTileSettingsModalState, - modalProps: videoTileSettingsModalProps, - } = useModalTriggerState(); - const onOptionsPress = videoTileSettingsModalState.open; + const [videoTileSettingsModalOpen, setVideoTileSettingsModalOpen] = + useState(false); + const openVideoTileSettingsModal = useCallback( + () => setVideoTileSettingsModalOpen(true), + [setVideoTileSettingsModalOpen] + ); + const closeVideoTileSettingsModal = useCallback( + () => setVideoTileSettingsModalOpen(false), + [setVideoTileSettingsModalOpen] + ); const toolbarButtons: JSX.Element[] = []; if (!sfuParticipant.isLocal) { @@ -130,7 +140,7 @@ export const VideoTile = forwardRef( key="localVolume" className={styles.button} volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0} - onPress={onOptionsPress} + onPress={openVideoTileSettingsModal} /> ); @@ -208,10 +218,11 @@ export const VideoTile = forwardRef( : Track.Source.ScreenShare } /> - {videoTileSettingsModalState.isOpen && !maximised && ( + {!maximised && ( )} diff --git a/src/video-grid/VideoTileSettingsModal.tsx b/src/video-grid/VideoTileSettingsModal.tsx index 0c77075a..06d1170d 100644 --- a/src/video-grid/VideoTileSettingsModal.tsx +++ b/src/video-grid/VideoTileSettingsModal.tsx @@ -66,23 +66,21 @@ const LocalVolume: React.FC = ({ ); }; -// TODO: Extend ModalProps interface Props { data: ItemData; - onClose: () => void; + open: boolean; + onDismiss: () => void; } -export const VideoTileSettingsModal = ({ data, onClose, ...rest }: Props) => { +export const VideoTileSettingsModal = ({ data, open, onDismiss }: Props) => { const { t } = useTranslation(); return (