From 0ed807bd63481cad23b7f51bc2b7c5ab7a66b8f5 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 2 May 2024 17:46:49 +0200 Subject: [PATCH 1/4] Move to `AccessibilityButton` --- .../views/audio_messages/PlayPauseButton.tsx | 9 ++---- .../LegacyCallView/LegacyCallViewButtons.tsx | 29 ++++++++++--------- .../LegacyCallView/LegacyCallViewHeader.tsx | 8 ++--- src/toasts/IncomingCallToast.tsx | 5 ++-- src/toasts/IncomingLegacyCallToast.tsx | 3 +- .../components/atoms/VoiceBroadcastHeader.tsx | 5 ++-- .../molecules/VoiceBroadcastRecordingPip.tsx | 6 ++-- 7 files changed, 31 insertions(+), 34 deletions(-) diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index 63f266fbf74..c49fd2e74c7 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -17,14 +17,11 @@ limitations under the License. import React, { ComponentProps, ReactNode } from "react"; import classNames from "classnames"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { _t } from "../../../languageHandler"; import { Playback, PlaybackState } from "../../../audio/Playback"; +import AccessibleButton from "../elements/AccessibleButton"; -type Props = Omit< - ComponentProps, - "title" | "onClick" | "disabled" | "element" | "ref" -> & { +type Props = Omit, "title" | "onClick" | "disabled" | "element" | "ref"> & { // Playback instance to manipulate. Cannot change during the component lifecycle. playback: Playback; @@ -61,7 +58,7 @@ export default class PlayPauseButton extends React.PureComponent { }); return ( - , "title" | "element"> & { +type ButtonProps = Omit, "title" | "element"> & { state: boolean; onLabel?: string; offLabel?: string; + forceHide?: boolean; + onHover?: (hovering: boolean) => void; }; const LegacyCallViewToggleButton = forwardRef( - ({ children, state: isOn, className, onLabel, offLabel, ...props }, ref) => { + ({ children, state: isOn, className, onLabel, offLabel, forceHide, onHover, ...props }, ref) => { const classes = classNames("mx_LegacyCallViewButtons_button", className, { mx_LegacyCallViewButtons_button_on: isOn, mx_LegacyCallViewButtons_button_off: !isOn, }); + const title = forceHide ? undefined : isOn ? onLabel : offLabel; + return ( - {children} - + ); }, ); @@ -265,7 +268,7 @@ export default class LegacyCallViewButtons extends React.Component )} )} - ); diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx index 33484eb3ced..c60b70c932b 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx @@ -19,7 +19,7 @@ import React from "react"; import { _t } from "../../../../languageHandler"; import RoomAvatar from "../../avatars/RoomAvatar"; -import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; +import AccessibleButton from "../../elements/AccessibleButton"; interface LegacyCallControlsProps { onExpand?: () => void; @@ -31,21 +31,21 @@ const LegacyCallViewHeaderControls: React.FC = ({ onExp return (
{onMaximize && ( - )} {onPin && ( - )} {onExpand && ( - `call_${callId}_${roomId}`; @@ -195,7 +194,7 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element { disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined} />
- `call_${callId}`; @@ -136,7 +135,7 @@ export default class IncomingLegacyCallToast extends React.Component - = ({ }); const microphoneLine = microphoneLabel && ( - {microphoneLabel} - + ); const onRoomAvatarOrNameClick = (): void => { diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx index 026cf40ce13..46ca3f9319e 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx @@ -32,7 +32,7 @@ import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.sv import { _t } from "../../../languageHandler"; import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection"; import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu"; -import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton"; +import AccessibleButton from "../../../components/views/elements/AccessibleButton"; interface VoiceBroadcastRecordingPipProps { recording: VoiceBroadcastRecording; @@ -92,12 +92,12 @@ export const VoiceBroadcastRecordingPip: React.FC {toggleControl} - setShowDeviceSelect(true)} title={_t("voip|change_input_device")} > - + } label="Stop Recording" From a04b9cef18bce661c9b393e5936f67ecc695d308 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 2 May 2024 17:48:27 +0200 Subject: [PATCH 2/4] Update snapshots --- .../__snapshots__/IncomingLegacyCallToast-test.tsx.snap | 3 +++ .../atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap | 4 ++++ .../__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap | 7 +++++++ .../VoiceBroadcastPreRecordingPip-test.tsx.snap | 1 + .../VoiceBroadcastRecordingBody-test.tsx.snap | 2 ++ .../__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap | 2 ++ .../VoiceBroadcastSmallPlaybackBody-test.tsx.snap | 5 +++++ 7 files changed, 24 insertions(+) diff --git a/test/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap b/test/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap index 55252462bdf..72544ff9371 100644 --- a/test/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap +++ b/test/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap @@ -5,6 +5,7 @@ exports[` renders disabled silenced button when call aria-disabled="true" aria-label="Notifications silenced" class="mx_AccessibleButton mx_IncomingLegacyCallToast_iconButton mx_IncomingLegacyCallToast_unSilence mx_AccessibleButton_disabled" + data-state="closed" disabled="" role="button" tabindex="0" @@ -15,6 +16,7 @@ exports[` renders sound on button when call is silenc
@@ -24,6 +26,7 @@ exports[` renders when silence button when call is no
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap index c378b9737d4..82cb2d93b5a 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap @@ -26,6 +26,7 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
@@ -83,6 +84,7 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
@@ -140,6 +142,7 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
@@ -213,6 +216,7 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index 722f44886bd..ff1f215d080 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -29,6 +29,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
@@ -159,6 +160,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
@@ -285,6 +287,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
@@ -399,6 +402,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
@@ -513,6 +517,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
@@ -635,6 +640,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
@@ -729,6 +735,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap index c630405fba7..9f6fa94daaa 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap @@ -41,6 +41,7 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap index 799af889bc9..aa1e9ba17d3 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap @@ -29,6 +29,7 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
@@ -82,6 +83,7 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap index 043dd0bbc83..e1a22126450 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap @@ -80,6 +80,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
@@ -182,6 +183,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap index 3daf466827f..bf342409fb8 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap @@ -41,6 +41,7 @@ exports[` when rendering a { state: 'pause',
@@ -117,6 +118,7 @@ exports[` when rendering a { state: 'playing'
@@ -212,6 +214,7 @@ exports[` when rendering a buffering broadcas
@@ -296,6 +299,7 @@ exports[` when rendering a playing broadcast
@@ -372,6 +376,7 @@ exports[` when rendering a stopped broadcast
From cb194c6293e532ab892557133cad095322d6c247 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 2 May 2024 18:39:22 +0200 Subject: [PATCH 3/4] Add tests --- .../LegacyCallViewButtons-test.tsx | 67 +++++++++++++++++ .../LegacyCallViewButtons-test.tsx.snap | 73 +++++++++++++++++++ test/test-utils/test-utils.ts | 1 + 3 files changed, 141 insertions(+) create mode 100644 test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx create mode 100644 test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap diff --git a/test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx b/test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx new file mode 100644 index 00000000000..5f0541fccf5 --- /dev/null +++ b/test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx @@ -0,0 +1,67 @@ +/* + * + * Copyright 2024 The Matrix.org Foundation C.I.C. + * + * 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 React from "react"; +import { render } from "@testing-library/react"; +import { MatrixCall } from "matrix-js-sdk/src/webrtc/call"; + +import LegacyCallViewButtons from "../../../../../src/components/views/voip/LegacyCallView/LegacyCallViewButtons"; +import { createTestClient } from "../../../../test-utils"; + +describe("LegacyCallViewButtons", () => { + const matrixClient = createTestClient(); + const roomId = "test-room-id"; + + const renderButtons = () => { + const call = new MatrixCall({ + client: matrixClient, + roomId, + }); + + return render( + , + ); + }; + + it("should render the buttons", () => { + const { container } = renderButtons(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap b/test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap new file mode 100644 index 00000000000..1ef2285c102 --- /dev/null +++ b/test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LegacyCallViewButtons should render the buttons 1`] = ` +
+
+