mirror of
https://github.com/element-hq/element-web
synced 2024-11-21 16:55:34 +03:00
Prevent Element appearing in system media controls (#10995)
* Use WebAudio API to play notification sound So that it won't appear in system media control. * Run prettier * Chosse from mp3 and ogg * Run prettier * Use WebAudioAPI everywhere There's still one remoteAudio. I'm not sure what it does. It seems it's only used in tests... * Run prettier * Eliminate a stupid error * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update setupManualMocks.ts * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * mocks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * mocks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Simplify Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * covg Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
SuperKenVery
GitHub
parent
c61eca8c24
commit
e288f61f0a
12 changed files with 255 additions and 164 deletions
|
|
@ -22,7 +22,7 @@ const config: Config = {
|
|||
testEnvironment: "jsdom",
|
||||
testMatch: ["<rootDir>/test/**/*-test.[jt]s?(x)"],
|
||||
globalSetup: "<rootDir>/test/globalSetup.ts",
|
||||
setupFiles: ["jest-canvas-mock"],
|
||||
setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
|
||||
setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
|
||||
moduleNameMapper: {
|
||||
"\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
|
||||
|
|
|
|||
|
|
@ -227,7 +227,8 @@
|
|||
"stylelint-config-standard": "^36.0.0",
|
||||
"stylelint-scss": "^6.0.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "5.5.2"
|
||||
"typescript": "5.5.2",
|
||||
"web-streams-polyfill": "^4.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.4.19",
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ import { localNotificationsAreSilenced } from "./utils/notifications";
|
|||
import { SdkContextClass } from "./contexts/SDKContext";
|
||||
import { showCantStartACallDialog } from "./voice-broadcast/utils/showCantStartACallDialog";
|
||||
import { isNotNull } from "./Typeguards";
|
||||
import { BackgroundAudio } from "./audio/BackgroundAudio";
|
||||
|
||||
export const PROTOCOL_PSTN = "m.protocol.pstn";
|
||||
export const PROTOCOL_PSTN_PREFIXED = "im.vector.protocol.pstn";
|
||||
|
|
@ -157,8 +158,6 @@ export default class LegacyCallHandler extends EventEmitter {
|
|||
// Calls started as an attended transfer, ie. with the intention of transferring another
|
||||
// call with a different party to this one.
|
||||
private transferees = new Map<string, MatrixCall>(); // callId (target) -> call (transferee)
|
||||
private audioPromises = new Map<AudioID, Promise<void>>();
|
||||
private audioElementsWithListeners = new Map<HTMLMediaElement, boolean>();
|
||||
private supportsPstnProtocol: boolean | null = null;
|
||||
private pstnSupportPrefixed: boolean | null = null; // True if the server only support the prefixed pstn protocol
|
||||
private supportsSipNativeVirtual: boolean | null = null; // im.vector.protocol.sip_virtual and im.vector.protocol.sip_native
|
||||
|
|
@ -170,6 +169,9 @@ export default class LegacyCallHandler extends EventEmitter {
|
|||
|
||||
private silencedCalls = new Set<string>(); // callIds
|
||||
|
||||
private backgroundAudio = new BackgroundAudio();
|
||||
private playingSources: Record<string, AudioBufferSourceNode> = {}; // Record them for stopping
|
||||
|
||||
public static get instance(): LegacyCallHandler {
|
||||
if (!window.mxLegacyCallHandler) {
|
||||
window.mxLegacyCallHandler = new LegacyCallHandler();
|
||||
|
|
@ -199,33 +201,11 @@ export default class LegacyCallHandler extends EventEmitter {
|
|||
}
|
||||
|
||||
public start(): void {
|
||||
// add empty handlers for media actions, otherwise the media keys
|
||||
// end up causing the audio elements with our ring/ringback etc
|
||||
// audio clips in to play.
|
||||
if (navigator.mediaSession) {
|
||||
navigator.mediaSession.setActionHandler("play", function () {});
|
||||
navigator.mediaSession.setActionHandler("pause", function () {});
|
||||
navigator.mediaSession.setActionHandler("seekbackward", function () {});
|
||||
navigator.mediaSession.setActionHandler("seekforward", function () {});
|
||||
navigator.mediaSession.setActionHandler("previoustrack", function () {});
|
||||
navigator.mediaSession.setActionHandler("nexttrack", function () {});
|
||||
}
|
||||
|
||||
if (SettingsStore.getValue(UIFeature.Voip)) {
|
||||
MatrixClientPeg.safeGet().on(CallEventHandlerEvent.Incoming, this.onCallIncoming);
|
||||
}
|
||||
|
||||
this.checkProtocols(CHECK_PROTOCOLS_ATTEMPTS);
|
||||
|
||||
// Add event listeners for the <audio> elements
|
||||
Object.values(AudioID).forEach((audioId) => {
|
||||
const audioElement = document.getElementById(audioId) as HTMLMediaElement;
|
||||
if (audioElement) {
|
||||
this.addEventListenersForAudioElement(audioElement);
|
||||
} else {
|
||||
logger.warn(`LegacyCallHandler: missing <audio id="${audioId}"> from page`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public stop(): void {
|
||||
|
|
@ -233,27 +213,6 @@ export default class LegacyCallHandler extends EventEmitter {
|
|||
if (cli) {
|
||||
cli.removeListener(CallEventHandlerEvent.Incoming, this.onCallIncoming);
|
||||
}
|
||||
|
||||
// Remove event listeners for the <audio> elements
|
||||
Array.from(this.audioElementsWithListeners.keys()).forEach((audioElement) => {
|
||||
this.removeEventListenersForAudioElement(audioElement);
|
||||
});
|
||||
}
|
||||
|
||||
private addEventListenersForAudioElement(audioElement: HTMLMediaElement): void {
|
||||
// Only need to setup the listeners once
|
||||
if (!this.audioElementsWithListeners.get(audioElement)) {
|
||||
MEDIA_EVENT_TYPES.forEach((errorEventType) => {
|
||||
audioElement.addEventListener(errorEventType, this);
|
||||
this.audioElementsWithListeners.set(audioElement, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private removeEventListenersForAudioElement(audioElement: HTMLMediaElement): void {
|
||||
MEDIA_EVENT_TYPES.forEach((errorEventType) => {
|
||||
audioElement.removeEventListener(errorEventType, this);
|
||||
});
|
||||
}
|
||||
|
||||
/* istanbul ignore next (remove if we start using this function for things other than debug logging) */
|
||||
|
|
@ -465,74 +424,37 @@ export default class LegacyCallHandler extends EventEmitter {
|
|||
return this.transferees.get(callId);
|
||||
}
|
||||
|
||||
public play(audioId: AudioID): void {
|
||||
public async play(audioId: AudioID): Promise<void> {
|
||||
const logPrefix = `LegacyCallHandler.play(${audioId}):`;
|
||||
logger.debug(`${logPrefix} beginning of function`);
|
||||
// TODO: Attach an invisible element for this instead
|
||||
// which listens?
|
||||
const audio = document.getElementById(audioId) as HTMLMediaElement;
|
||||
if (audio) {
|
||||
this.addEventListenersForAudioElement(audio);
|
||||
const playAudio = async (): Promise<void> => {
|
||||
try {
|
||||
if (audio.muted) {
|
||||
logger.error(
|
||||
`${logPrefix} <audio> element was unexpectedly muted but we recovered ` +
|
||||
`gracefully by unmuting it`,
|
||||
);
|
||||
// Recover gracefully
|
||||
audio.muted = false;
|
||||
}
|
||||
|
||||
// This still causes the chrome debugger to break on promise rejection if
|
||||
// the promise is rejected, even though we're catching the exception.
|
||||
logger.debug(`${logPrefix} attempting to play audio at volume=${audio.volume}`);
|
||||
await audio.play();
|
||||
logger.debug(`${logPrefix} playing audio successfully`);
|
||||
} catch (e) {
|
||||
// This is usually because the user hasn't interacted with the document,
|
||||
// or chrome doesn't think so and is denying the request. Not sure what
|
||||
// we can really do here...
|
||||
// https://github.com/vector-im/element-web/issues/7657
|
||||
logger.warn(`${logPrefix} unable to play audio clip`, e);
|
||||
}
|
||||
};
|
||||
if (this.audioPromises.has(audioId)) {
|
||||
this.audioPromises.set(
|
||||
audioId,
|
||||
this.audioPromises.get(audioId)!.then(() => {
|
||||
audio.load();
|
||||
return playAudio();
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
this.audioPromises.set(audioId, playAudio());
|
||||
}
|
||||
} else {
|
||||
logger.warn(`${logPrefix} unable to find <audio> element for ${audioId}`);
|
||||
}
|
||||
const audioInfo: Record<AudioID, [prefix: string, loop: boolean]> = {
|
||||
[AudioID.Ring]: [`./media/ring`, true],
|
||||
[AudioID.Ringback]: [`./media/ringback`, true],
|
||||
[AudioID.CallEnd]: [`./media/callend`, false],
|
||||
[AudioID.Busy]: [`./media/busy`, false],
|
||||
};
|
||||
|
||||
const [urlPrefix, loop] = audioInfo[audioId];
|
||||
const source = await this.backgroundAudio.pickFormatAndPlay(urlPrefix, ["mp3", "ogg"], loop);
|
||||
this.playingSources[audioId] = source;
|
||||
logger.debug(`${logPrefix} playing audio successfully`);
|
||||
}
|
||||
|
||||
public pause(audioId: AudioID): void {
|
||||
const logPrefix = `LegacyCallHandler.pause(${audioId}):`;
|
||||
logger.debug(`${logPrefix} beginning of function`);
|
||||
// TODO: Attach an invisible element for this instead
|
||||
// which listens?
|
||||
const audio = document.getElementById(audioId) as HTMLMediaElement;
|
||||
const pauseAudio = (): void => {
|
||||
logger.debug(`${logPrefix} pausing audio`);
|
||||
// pause doesn't return a promise, so just do it
|
||||
audio.pause();
|
||||
};
|
||||
if (audio) {
|
||||
if (this.audioPromises.has(audioId)) {
|
||||
this.audioPromises.set(audioId, this.audioPromises.get(audioId)!.then(pauseAudio));
|
||||
} else {
|
||||
pauseAudio();
|
||||
}
|
||||
} else {
|
||||
logger.warn(`${logPrefix} unable to find <audio> element for ${audioId}`);
|
||||
|
||||
const source = this.playingSources[audioId];
|
||||
if (!source) {
|
||||
logger.debug(`${logPrefix} audio not playing`);
|
||||
return;
|
||||
}
|
||||
|
||||
source.stop();
|
||||
delete this.playingSources[audioId];
|
||||
|
||||
logger.debug(`${logPrefix} paused audio`);
|
||||
}
|
||||
|
||||
private matchesCallForThisRoom(call: MatrixCall): boolean {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ import ToastStore from "./stores/ToastStore";
|
|||
import { VoiceBroadcastChunkEventType, VoiceBroadcastInfoEventType } from "./voice-broadcast";
|
||||
import { getSenderName } from "./utils/event/getSenderName";
|
||||
import { stripPlainReply } from "./utils/Reply";
|
||||
import { BackgroundAudio } from "./audio/BackgroundAudio";
|
||||
|
||||
/*
|
||||
* Dispatches:
|
||||
|
|
@ -112,6 +113,8 @@ class NotifierClass {
|
|||
private toolbarHidden?: boolean;
|
||||
private isSyncing?: boolean;
|
||||
|
||||
private backgroundAudio = new BackgroundAudio();
|
||||
|
||||
public notificationMessageForEvent(ev: MatrixEvent): string | null {
|
||||
const msgType = ev.getContent().msgtype;
|
||||
if (msgType && msgTypeHandlers.hasOwnProperty(msgType)) {
|
||||
|
|
@ -226,28 +229,14 @@ class NotifierClass {
|
|||
return;
|
||||
}
|
||||
|
||||
// Play notification sound here
|
||||
const sound = this.getSoundForRoom(room.roomId);
|
||||
logger.log(`Got sound ${(sound && sound.name) || "default"} for ${room.roomId}`);
|
||||
|
||||
try {
|
||||
const selector = document.querySelector<HTMLAudioElement>(
|
||||
sound ? `audio[src='${sound.url}']` : "#messageAudio",
|
||||
);
|
||||
let audioElement = selector;
|
||||
if (!audioElement) {
|
||||
if (!sound) {
|
||||
logger.error("No audio element or sound to play for notification");
|
||||
return;
|
||||
}
|
||||
audioElement = new Audio(sound.url);
|
||||
if (sound.type) {
|
||||
audioElement.type = sound.type;
|
||||
}
|
||||
document.body.appendChild(audioElement);
|
||||
}
|
||||
await audioElement.play();
|
||||
} catch (ex) {
|
||||
logger.warn("Caught error when trying to fetch room notification sound:", ex);
|
||||
if (sound) {
|
||||
await this.backgroundAudio.play(sound.url);
|
||||
} else {
|
||||
await this.backgroundAudio.pickFormatAndPlay("media/message", ["mp3", "ogg"]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
74
src/audio/BackgroundAudio.ts
Normal file
74
src/audio/BackgroundAudio.ts
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/*
|
||||
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 { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { createAudioContext } from "./compat";
|
||||
|
||||
const formatMap = {
|
||||
mp3: "audio/mpeg",
|
||||
ogg: "audio/ogg",
|
||||
};
|
||||
|
||||
export class BackgroundAudio {
|
||||
private audioContext = createAudioContext();
|
||||
private sounds: Record<string, AudioBuffer> = {};
|
||||
|
||||
public async pickFormatAndPlay<F extends Array<keyof typeof formatMap>>(
|
||||
urlPrefix: string,
|
||||
formats: F,
|
||||
loop = false,
|
||||
): Promise<AudioBufferSourceNode> {
|
||||
const format = this.pickFormat(...formats);
|
||||
if (!format) {
|
||||
console.log("Browser doesn't support any of the formats", formats);
|
||||
// Will probably never happen. If happened, format="" and will fail to load audio. Who cares...
|
||||
}
|
||||
|
||||
return this.play(`${urlPrefix}.${format}`, loop);
|
||||
}
|
||||
|
||||
public async play(url: string, loop = false): Promise<AudioBufferSourceNode> {
|
||||
if (!this.sounds.hasOwnProperty(url)) {
|
||||
// No cache, fetch it
|
||||
const response = await fetch(url);
|
||||
if (response.status != 200) {
|
||||
logger.warn("Failed to fetch error audio");
|
||||
}
|
||||
const buffer = await response.arrayBuffer();
|
||||
const sound = await this.audioContext.decodeAudioData(buffer);
|
||||
this.sounds[url] = sound;
|
||||
}
|
||||
const source = this.audioContext.createBufferSource();
|
||||
source.buffer = this.sounds[url];
|
||||
source.loop = loop;
|
||||
source.connect(this.audioContext.destination);
|
||||
source.start();
|
||||
return source;
|
||||
}
|
||||
|
||||
private pickFormat<F extends Array<keyof typeof formatMap>>(...formats: F): F[number] | null {
|
||||
// Detect supported formats
|
||||
const audioElement = document.createElement("audio");
|
||||
|
||||
for (const format of formats) {
|
||||
if (audioElement.canPlayType(formatMap[format])) {
|
||||
return format;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
|
@ -47,6 +47,7 @@ import { VoiceBroadcastChunkEvents } from "../utils/VoiceBroadcastChunkEvents";
|
|||
import { RelationsHelper, RelationsHelperEvent } from "../../events/RelationsHelper";
|
||||
import { createReconnectedListener } from "../../utils/connection";
|
||||
import { localNotificationsAreSilenced } from "../../utils/notifications";
|
||||
import { BackgroundAudio } from "../../audio/BackgroundAudio";
|
||||
|
||||
export enum VoiceBroadcastRecordingEvent {
|
||||
StateChanged = "liveness_changed",
|
||||
|
|
@ -75,6 +76,7 @@ export class VoiceBroadcastRecording
|
|||
private reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
|
||||
private roomId: string;
|
||||
private infoEventId: string;
|
||||
private backgroundAudio = new BackgroundAudio();
|
||||
|
||||
/**
|
||||
* Broadcast chunks have a sequence number to bring them in the correct order and to know if a message is missing.
|
||||
|
|
@ -346,15 +348,7 @@ export class VoiceBroadcastRecording
|
|||
return;
|
||||
}
|
||||
|
||||
// Audio files are added to the document in Element Web.
|
||||
// See <audio> elements in https://github.com/vector-im/element-web/blob/develop/src/vector/index.html
|
||||
const audioElement = document.querySelector<HTMLAudioElement>("audio#errorAudio");
|
||||
|
||||
try {
|
||||
await audioElement?.play();
|
||||
} catch (e) {
|
||||
logger.warn("error playing 'errorAudio'", e);
|
||||
}
|
||||
await this.backgroundAudio.pickFormatAndPlay("./media/error", ["mp3", "ogg"]);
|
||||
}
|
||||
|
||||
private async uploadFile(chunk: ChunkRecordedPayload): ReturnType<typeof uploadFile> {
|
||||
|
|
|
|||
|
|
@ -28,16 +28,18 @@ import { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/we
|
|||
import EventEmitter from "events";
|
||||
import { mocked } from "jest-mock";
|
||||
import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
|
||||
import fetchMock from "fetch-mock-jest";
|
||||
import { waitFor } from "@testing-library/react";
|
||||
|
||||
import LegacyCallHandler, {
|
||||
LegacyCallHandlerEvent,
|
||||
AudioID,
|
||||
LegacyCallHandlerEvent,
|
||||
PROTOCOL_PSTN,
|
||||
PROTOCOL_PSTN_PREFIXED,
|
||||
PROTOCOL_SIP_NATIVE,
|
||||
PROTOCOL_SIP_VIRTUAL,
|
||||
} from "../src/LegacyCallHandler";
|
||||
import { stubClient, mkStubRoom, untilDispatch } from "./test-utils";
|
||||
import { mkStubRoom, stubClient, untilDispatch } from "./test-utils";
|
||||
import { MatrixClientPeg } from "../src/MatrixClientPeg";
|
||||
import DMRoomMap from "../src/utils/DMRoomMap";
|
||||
import SdkConfig from "../src/SdkConfig";
|
||||
|
|
@ -49,6 +51,7 @@ import { VoiceBroadcastInfoState, VoiceBroadcastPlayback, VoiceBroadcastRecordin
|
|||
import { mkVoiceBroadcastInfoStateEvent } from "./voice-broadcast/utils/test-utils";
|
||||
import { SdkContextClass } from "../src/contexts/SDKContext";
|
||||
import Modal from "../src/Modal";
|
||||
import { createAudioContext } from "../src/audio/compat";
|
||||
|
||||
jest.mock("../src/Modal");
|
||||
|
||||
|
|
@ -72,6 +75,11 @@ jest.mock("../src/utils/room/getFunctionalMembers", () => ({
|
|||
getFunctionalMembers: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("../src/audio/compat", () => ({
|
||||
...jest.requireActual("../src/audio/compat"),
|
||||
createAudioContext: jest.fn(),
|
||||
}));
|
||||
|
||||
// The Matrix IDs that the user sees when talking to Alice & Bob
|
||||
const NATIVE_ALICE = "@alice:example.org";
|
||||
const NATIVE_BOB = "@bob:example.org";
|
||||
|
|
@ -449,6 +457,20 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
let audioElement: HTMLAudioElement;
|
||||
let fakeCall: MatrixCall | null;
|
||||
|
||||
const mockAudioBufferSourceNode = {
|
||||
addEventListener: jest.fn(),
|
||||
connect: jest.fn(),
|
||||
start: jest.fn(),
|
||||
stop: jest.fn(),
|
||||
};
|
||||
const mockAudioContext = {
|
||||
decodeAudioData: jest.fn().mockResolvedValue({}),
|
||||
suspend: jest.fn(),
|
||||
resume: jest.fn(),
|
||||
createBufferSource: jest.fn().mockReturnValue(mockAudioBufferSourceNode),
|
||||
currentTime: 1337,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
stubClient();
|
||||
fakeCall = null;
|
||||
|
|
@ -464,6 +486,7 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
throw new Error("Endpoint unsupported.");
|
||||
};
|
||||
|
||||
mocked(createAudioContext).mockReturnValue(mockAudioContext as unknown as AudioContext);
|
||||
callHandler = new LegacyCallHandler();
|
||||
callHandler.start();
|
||||
|
||||
|
|
@ -506,6 +529,12 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
|
||||
SdkContextClass.instance.voiceBroadcastPlaybacksStore.clearCurrent();
|
||||
SdkContextClass.instance.voiceBroadcastRecordingsStore.clearCurrent();
|
||||
|
||||
fetchMock.get(
|
||||
"/media/ring.mp3",
|
||||
{ body: new Blob(["1", "2", "3", "4"], { type: "audio/mpeg" }) },
|
||||
{ sendAsJson: false },
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
|
@ -520,6 +549,20 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
SdkConfig.reset();
|
||||
});
|
||||
|
||||
it("should cache sounds between playbacks", async () => {
|
||||
await callHandler.play(AudioID.Ring);
|
||||
expect(mockAudioBufferSourceNode.start).toHaveBeenCalled();
|
||||
expect(fetchMock.calls("/media/ring.mp3")).toHaveLength(1);
|
||||
await callHandler.play(AudioID.Ring);
|
||||
expect(fetchMock.calls("/media/ring.mp3")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("should allow silencing an incoming call ring", async () => {
|
||||
await callHandler.play(AudioID.Ring);
|
||||
await callHandler.silenceCall("call123");
|
||||
expect(mockAudioBufferSourceNode.stop).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should still start a native call", async () => {
|
||||
callHandler.placeCall(NATIVE_ROOM_ALICE, CallType.Voice);
|
||||
|
||||
|
|
@ -537,13 +580,6 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
describe("incoming calls", () => {
|
||||
const roomId = "test-room-id";
|
||||
|
||||
const mockAudioElement = {
|
||||
play: jest.fn(),
|
||||
pause: jest.fn(),
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
muted: false,
|
||||
} as unknown as HTMLMediaElement;
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => setting === UIFeature.Voip);
|
||||
|
|
@ -571,8 +607,6 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
},
|
||||
};
|
||||
|
||||
jest.spyOn(document, "getElementById").mockReturnValue(mockAudioElement);
|
||||
|
||||
// silence local notifications by default
|
||||
jest.spyOn(MatrixClientPeg.safeGet(), "getAccountData").mockImplementation((eventType) => {
|
||||
if (eventType.includes(LOCAL_NOTIFICATION_SETTINGS_PREFIX.name)) {
|
||||
|
|
@ -586,19 +620,6 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("should unmute <audio> before playing", () => {
|
||||
// Test setup: set the audio element as muted
|
||||
mockAudioElement.muted = true;
|
||||
expect(mockAudioElement.muted).toStrictEqual(true);
|
||||
|
||||
callHandler.play(AudioID.Ring);
|
||||
|
||||
// Ensure audio is no longer muted
|
||||
expect(mockAudioElement.muted).toStrictEqual(false);
|
||||
// Ensure the audio was played
|
||||
expect(mockAudioElement.play).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("listens for incoming call events when voip is enabled", () => {
|
||||
const call = new MatrixCall({
|
||||
client: MatrixClientPeg.safeGet(),
|
||||
|
|
@ -612,7 +633,7 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
expect(callHandler.getCallForRoom(roomId)).toEqual(call);
|
||||
});
|
||||
|
||||
it("rings when incoming call state is ringing and notifications set to ring", () => {
|
||||
it("rings when incoming call state is ringing and notifications set to ring", async () => {
|
||||
// remove local notification silencing mock for this test
|
||||
jest.spyOn(MatrixClientPeg.safeGet(), "getAccountData").mockReturnValue(undefined);
|
||||
const call = new MatrixCall({
|
||||
|
|
@ -627,8 +648,8 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
expect(callHandler.getCallForRoom(roomId)).toEqual(call);
|
||||
call.emit(CallEvent.State, CallState.Ringing, CallState.Connected, fakeCall!);
|
||||
|
||||
// ringer audio element started
|
||||
expect(mockAudioElement.play).toHaveBeenCalled();
|
||||
// ringer audio started
|
||||
await waitFor(() => expect(mockAudioBufferSourceNode.start).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it("does not ring when incoming call state is ringing but local notifications are silenced", () => {
|
||||
|
|
@ -645,7 +666,7 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
call.emit(CallEvent.State, CallState.Ringing, CallState.Connected, fakeCall!);
|
||||
|
||||
// ringer audio element started
|
||||
expect(mockAudioElement.play).not.toHaveBeenCalled();
|
||||
expect(mockAudioBufferSourceNode.start).not.toHaveBeenCalled();
|
||||
expect(callHandler.isCallSilenced(call.callId)).toEqual(true);
|
||||
});
|
||||
|
||||
|
|
@ -679,7 +700,7 @@ describe("LegacyCallHandler without third party protocols", () => {
|
|||
// call still silenced
|
||||
expect(callHandler.isCallSilenced(call.callId)).toEqual(true);
|
||||
// ringer not played
|
||||
expect(mockAudioElement.play).not.toHaveBeenCalled();
|
||||
expect(mockAudioBufferSourceNode.start).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -60,6 +60,11 @@ jest.mock("../src/utils/notifications", () => ({
|
|||
createLocalNotificationSettingsIfNeeded: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("../src/audio/compat", () => ({
|
||||
...jest.requireActual("../src/audio/compat"),
|
||||
createAudioContext: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("Notifier", () => {
|
||||
const roomId = "!room1:server";
|
||||
const testEvent = mkEvent({
|
||||
|
|
@ -103,6 +108,19 @@ describe("Notifier", () => {
|
|||
});
|
||||
};
|
||||
|
||||
const mockAudioBufferSourceNode = {
|
||||
addEventListener: jest.fn(),
|
||||
connect: jest.fn(),
|
||||
start: jest.fn(),
|
||||
};
|
||||
const mockAudioContext = {
|
||||
decodeAudioData: jest.fn(),
|
||||
suspend: jest.fn(),
|
||||
resume: jest.fn(),
|
||||
createBufferSource: jest.fn().mockReturnValue(mockAudioBufferSourceNode),
|
||||
currentTime: 1337,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
accountDataStore = {};
|
||||
mockClient = getMockClientWithEventEmitter({
|
||||
|
|
@ -144,6 +162,9 @@ describe("Notifier", () => {
|
|||
if (id) return new Room(id, mockClient, mockClient.getSafeUserId());
|
||||
return null;
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
Notifier.backgroundAudio.audioContext = mockAudioContext;
|
||||
});
|
||||
|
||||
describe("triggering notification from events", () => {
|
||||
|
|
|
|||
35
test/setup/mocks.ts
Normal file
35
test/setup/mocks.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
export const mocks = {
|
||||
AudioBufferSourceNode: {
|
||||
connect: jest.fn(),
|
||||
start: jest.fn(),
|
||||
} as unknown as AudioBufferSourceNode,
|
||||
AudioContext: {
|
||||
close: jest.fn(),
|
||||
createMediaElementSource: jest.fn(),
|
||||
createMediaStreamDestination: jest.fn(),
|
||||
createMediaStreamSource: jest.fn(),
|
||||
createStreamTrackSource: jest.fn(),
|
||||
createBufferSource: jest.fn((): AudioBufferSourceNode => ({ ...mocks.AudioBufferSourceNode })),
|
||||
getOutputTimestamp: jest.fn(),
|
||||
resume: jest.fn(),
|
||||
setSinkId: jest.fn(),
|
||||
suspend: jest.fn(),
|
||||
decodeAudioData: jest.fn(),
|
||||
},
|
||||
};
|
||||
|
|
@ -18,6 +18,8 @@ import fetchMock from "fetch-mock-jest";
|
|||
import { TextDecoder, TextEncoder } from "util";
|
||||
import { Response } from "node-fetch";
|
||||
|
||||
import { mocks } from "./mocks";
|
||||
|
||||
// Stub ResizeObserver
|
||||
// @ts-ignore - we know it's a duplicate (that's why we're stubbing it)
|
||||
class ResizeObserver {
|
||||
|
|
@ -76,6 +78,7 @@ global.TextDecoder = TextDecoder;
|
|||
|
||||
// prevent errors whenever a component tries to manually scroll.
|
||||
window.HTMLElement.prototype.scrollIntoView = jest.fn();
|
||||
window.HTMLAudioElement.prototype.canPlayType = jest.fn((format) => (format === "audio/mpeg" ? "probably" : ""));
|
||||
|
||||
// set up fetch API mock
|
||||
fetchMock.config.overwriteRoutes = false;
|
||||
|
|
@ -87,3 +90,6 @@ window.fetch = fetchMock.sandbox();
|
|||
|
||||
// @ts-ignore
|
||||
window.Response = Response;
|
||||
|
||||
// set up AudioContext API mock
|
||||
global.AudioContext = jest.fn().mockImplementation(() => ({ ...mocks.AudioContext }));
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ import {
|
|||
SyncState,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { EncryptedFile } from "matrix-js-sdk/src/types";
|
||||
import fetchMock from "fetch-mock-jest";
|
||||
|
||||
import { uploadFile } from "../../../src/ContentMessages";
|
||||
import { createVoiceMessageContent } from "../../../src/utils/createVoiceMessageContent";
|
||||
|
|
@ -49,6 +50,7 @@ import {
|
|||
import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
|
||||
import dis from "../../../src/dispatcher/dispatcher";
|
||||
import { VoiceRecording } from "../../../src/audio/VoiceRecording";
|
||||
import { createAudioContext } from "../../../src/audio/compat";
|
||||
|
||||
jest.mock("../../../src/voice-broadcast/audio/VoiceBroadcastRecorder", () => ({
|
||||
...(jest.requireActual("../../../src/voice-broadcast/audio/VoiceBroadcastRecorder") as object),
|
||||
|
|
@ -79,6 +81,11 @@ jest.mock("../../../src/utils/createVoiceMessageContent", () => ({
|
|||
createVoiceMessageContent: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("../../../src/audio/compat", () => ({
|
||||
...jest.requireActual("../../../src/audio/compat"),
|
||||
createAudioContext: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("VoiceBroadcastRecording", () => {
|
||||
const roomId = "!room:example.com";
|
||||
const uploadedUrl = "mxc://example.com/vb";
|
||||
|
|
@ -198,6 +205,19 @@ describe("VoiceBroadcastRecording", () => {
|
|||
});
|
||||
};
|
||||
|
||||
const mockAudioBufferSourceNode = {
|
||||
addEventListener: jest.fn(),
|
||||
connect: jest.fn(),
|
||||
start: jest.fn(),
|
||||
};
|
||||
const mockAudioContext = {
|
||||
decodeAudioData: jest.fn(),
|
||||
suspend: jest.fn(),
|
||||
resume: jest.fn(),
|
||||
createBufferSource: jest.fn().mockReturnValue(mockAudioBufferSourceNode),
|
||||
currentTime: 1337,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
client = stubClient();
|
||||
room = mkStubRoom(roomId, "Test Room", client);
|
||||
|
|
@ -265,6 +285,8 @@ describe("VoiceBroadcastRecording", () => {
|
|||
|
||||
return null;
|
||||
});
|
||||
|
||||
mocked(createAudioContext).mockReturnValue(mockAudioContext as unknown as AudioContext);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
|
@ -546,12 +568,13 @@ describe("VoiceBroadcastRecording", () => {
|
|||
beforeEach(() => {
|
||||
mocked(client.sendMessage).mockRejectedValue("Error");
|
||||
emitFirsChunkRecorded();
|
||||
fetchMock.get("media/error.mp3", 200);
|
||||
});
|
||||
|
||||
itShouldBeInState("connection_error");
|
||||
|
||||
it("should play a notification", () => {
|
||||
expect(audioElement.play).toHaveBeenCalled();
|
||||
expect(mockAudioBufferSourceNode.start).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe("and the connection is back", () => {
|
||||
|
|
|
|||
|
|
@ -9230,6 +9230,11 @@ walker@^1.0.8:
|
|||
dependencies:
|
||||
makeerror "1.0.12"
|
||||
|
||||
web-streams-polyfill@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-4.0.0.tgz#74cedf168339ee6e709532f76c49313a8c7acdac"
|
||||
integrity sha512-0zJXHRAYEjM2tUfZ2DiSOHAa2aw1tisnnhU3ufD57R8iefL+DcdJyRBRyJpG+NUimDgbTI/lH+gAE1PAvV3Cgw==
|
||||
|
||||
web-vitals@^4.0.1:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.0.tgz#008949ab79717a68ccaaa3c4371cbc7bbbd78a92"
|
||||
|
|
|
|||
Loading…
Reference in a new issue