2022-06-06 22:42:48 +02:00
|
|
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
2022-05-04 17:09:48 +01:00
|
|
|
/*
|
|
|
|
Copyright 2022 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.
|
|
|
|
*/
|
|
|
|
|
2022-08-12 16:46:53 -04:00
|
|
|
import { MatrixClient } from "matrix-js-sdk/src/client";
|
2022-06-11 14:29:26 +02:00
|
|
|
import { MediaHandlerEvent } from "matrix-js-sdk/src/webrtc/mediaHandler";
|
2022-02-22 18:32:51 -08:00
|
|
|
import React, {
|
|
|
|
useState,
|
|
|
|
useEffect,
|
|
|
|
useCallback,
|
|
|
|
useMemo,
|
|
|
|
useContext,
|
|
|
|
createContext,
|
2022-08-02 00:46:16 +02:00
|
|
|
ReactNode,
|
2022-02-22 18:32:51 -08:00
|
|
|
} from "react";
|
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
export interface MediaHandlerContextInterface {
|
|
|
|
audioInput: string;
|
|
|
|
audioInputs: MediaDeviceInfo[];
|
|
|
|
setAudioInput: (deviceId: string) => void;
|
|
|
|
videoInput: string;
|
|
|
|
videoInputs: MediaDeviceInfo[];
|
|
|
|
setVideoInput: (deviceId: string) => void;
|
|
|
|
audioOutput: string;
|
|
|
|
audioOutputs: MediaDeviceInfo[];
|
|
|
|
setAudioOutput: (deviceId: string) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const MediaHandlerContext =
|
|
|
|
createContext<MediaHandlerContextInterface>(undefined);
|
2022-02-22 18:32:51 -08:00
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
interface MediaPreferences {
|
|
|
|
audioInput?: string;
|
|
|
|
videoInput?: string;
|
|
|
|
audioOutput?: string;
|
|
|
|
}
|
|
|
|
function getMediaPreferences(): MediaPreferences {
|
2022-02-23 15:07:51 -08:00
|
|
|
const mediaPreferences = localStorage.getItem("matrix-media-preferences");
|
|
|
|
|
|
|
|
if (mediaPreferences) {
|
|
|
|
try {
|
|
|
|
return JSON.parse(mediaPreferences);
|
|
|
|
} catch (e) {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
function updateMediaPreferences(newPreferences: MediaPreferences): void {
|
|
|
|
const oldPreferences = getMediaPreferences();
|
2022-02-23 15:07:51 -08:00
|
|
|
|
|
|
|
localStorage.setItem(
|
|
|
|
"matrix-media-preferences",
|
|
|
|
JSON.stringify({
|
|
|
|
...oldPreferences,
|
|
|
|
...newPreferences,
|
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
2022-06-06 22:42:48 +02:00
|
|
|
interface Props {
|
|
|
|
client: MatrixClient;
|
2022-08-02 00:46:16 +02:00
|
|
|
children: ReactNode;
|
2022-06-06 22:42:48 +02:00
|
|
|
}
|
|
|
|
export function MediaHandlerProvider({ client, children }: Props): JSX.Element {
|
2022-02-22 18:32:51 -08:00
|
|
|
const [
|
|
|
|
{
|
|
|
|
audioInput,
|
|
|
|
videoInput,
|
|
|
|
audioInputs,
|
|
|
|
videoInputs,
|
|
|
|
audioOutput,
|
|
|
|
audioOutputs,
|
|
|
|
},
|
|
|
|
setState,
|
|
|
|
] = useState(() => {
|
2022-02-23 15:07:51 -08:00
|
|
|
const mediaPreferences = getMediaPreferences();
|
2022-02-22 18:32:51 -08:00
|
|
|
const mediaHandler = client.getMediaHandler();
|
|
|
|
|
2022-02-23 15:07:51 -08:00
|
|
|
mediaHandler.restoreMediaSettings(
|
|
|
|
mediaPreferences?.audioInput,
|
|
|
|
mediaPreferences?.videoInput
|
|
|
|
);
|
|
|
|
|
2022-02-22 18:32:51 -08:00
|
|
|
return {
|
2022-06-11 14:29:26 +02:00
|
|
|
// @ts-ignore, ignore that audioInput is a private members of mediaHandler
|
2022-02-22 18:32:51 -08:00
|
|
|
audioInput: mediaHandler.audioInput,
|
2022-06-11 14:29:26 +02:00
|
|
|
// @ts-ignore, ignore that videoInput is a private members of mediaHandler
|
2022-02-22 18:32:51 -08:00
|
|
|
videoInput: mediaHandler.videoInput,
|
|
|
|
audioOutput: undefined,
|
|
|
|
audioInputs: [],
|
|
|
|
videoInputs: [],
|
|
|
|
audioOutputs: [],
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const mediaHandler = client.getMediaHandler();
|
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
function updateDevices(): void {
|
2022-02-22 18:32:51 -08:00
|
|
|
navigator.mediaDevices.enumerateDevices().then((devices) => {
|
2022-02-23 15:07:51 -08:00
|
|
|
const mediaPreferences = getMediaPreferences();
|
|
|
|
|
2022-02-22 18:32:51 -08:00
|
|
|
const audioInputs = devices.filter(
|
|
|
|
(device) => device.kind === "audioinput"
|
|
|
|
);
|
2022-02-23 15:07:51 -08:00
|
|
|
const audioConnected = audioInputs.some(
|
2022-06-06 22:42:48 +02:00
|
|
|
// @ts-ignore
|
2022-02-23 15:07:51 -08:00
|
|
|
(device) => device.deviceId === mediaHandler.audioInput
|
|
|
|
);
|
2022-06-06 22:42:48 +02:00
|
|
|
// @ts-ignore
|
2022-02-23 15:07:51 -08:00
|
|
|
let audioInput = mediaHandler.audioInput;
|
|
|
|
|
|
|
|
if (!audioConnected && audioInputs.length > 0) {
|
|
|
|
audioInput = audioInputs[0].deviceId;
|
|
|
|
}
|
|
|
|
|
2022-02-22 18:32:51 -08:00
|
|
|
const videoInputs = devices.filter(
|
|
|
|
(device) => device.kind === "videoinput"
|
|
|
|
);
|
2022-02-23 15:07:51 -08:00
|
|
|
const videoConnected = videoInputs.some(
|
2022-06-06 22:42:48 +02:00
|
|
|
// @ts-ignore
|
2022-02-23 15:07:51 -08:00
|
|
|
(device) => device.deviceId === mediaHandler.videoInput
|
2022-02-22 18:32:51 -08:00
|
|
|
);
|
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
// @ts-ignore
|
2022-02-23 15:07:51 -08:00
|
|
|
let videoInput = mediaHandler.videoInput;
|
|
|
|
|
|
|
|
if (!videoConnected && videoInputs.length > 0) {
|
|
|
|
videoInput = videoInputs[0].deviceId;
|
|
|
|
}
|
2022-02-22 18:32:51 -08:00
|
|
|
|
2022-02-23 15:07:51 -08:00
|
|
|
const audioOutputs = devices.filter(
|
|
|
|
(device) => device.kind === "audiooutput"
|
2022-02-22 18:32:51 -08:00
|
|
|
);
|
2022-02-23 15:07:51 -08:00
|
|
|
let audioOutput = undefined;
|
2022-02-22 18:32:51 -08:00
|
|
|
|
|
|
|
if (
|
2022-02-23 15:07:51 -08:00
|
|
|
mediaPreferences &&
|
2022-02-22 18:32:51 -08:00
|
|
|
audioOutputs.some(
|
2022-02-23 15:07:51 -08:00
|
|
|
(device) => device.deviceId === mediaPreferences.audioOutput
|
2022-02-22 18:32:51 -08:00
|
|
|
)
|
|
|
|
) {
|
2022-02-23 15:07:51 -08:00
|
|
|
audioOutput = mediaPreferences.audioOutput;
|
2022-02-22 18:32:51 -08:00
|
|
|
}
|
|
|
|
|
2022-02-23 15:07:51 -08:00
|
|
|
if (
|
2022-06-06 22:42:48 +02:00
|
|
|
// @ts-ignore
|
2022-11-02 20:03:56 +00:00
|
|
|
(mediaHandler.videoInput && mediaHandler.videoInput !== videoInput) ||
|
2022-06-06 22:42:48 +02:00
|
|
|
// @ts-ignore
|
2022-02-23 15:07:51 -08:00
|
|
|
mediaHandler.audioInput !== audioInput
|
|
|
|
) {
|
|
|
|
mediaHandler.setMediaInputs(audioInput, videoInput);
|
|
|
|
}
|
|
|
|
|
|
|
|
updateMediaPreferences({ audioInput, videoInput, audioOutput });
|
|
|
|
|
2022-02-22 18:32:51 -08:00
|
|
|
setState({
|
2022-02-23 15:07:51 -08:00
|
|
|
audioInput,
|
|
|
|
videoInput,
|
2022-02-22 18:32:51 -08:00
|
|
|
audioOutput,
|
|
|
|
audioInputs,
|
|
|
|
videoInputs,
|
2022-02-23 15:07:51 -08:00
|
|
|
audioOutputs,
|
2022-02-22 18:32:51 -08:00
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
updateDevices();
|
|
|
|
|
2022-06-11 14:29:26 +02:00
|
|
|
mediaHandler.on(MediaHandlerEvent.LocalStreamsChanged, updateDevices);
|
2022-02-22 18:32:51 -08:00
|
|
|
navigator.mediaDevices.addEventListener("devicechange", updateDevices);
|
|
|
|
|
|
|
|
return () => {
|
2022-06-11 14:29:26 +02:00
|
|
|
mediaHandler.removeListener(
|
|
|
|
MediaHandlerEvent.LocalStreamsChanged,
|
|
|
|
updateDevices
|
|
|
|
);
|
2022-02-22 18:32:51 -08:00
|
|
|
navigator.mediaDevices.removeEventListener("devicechange", updateDevices);
|
2022-02-23 15:07:51 -08:00
|
|
|
mediaHandler.stopAllStreams();
|
2022-02-22 18:32:51 -08:00
|
|
|
};
|
|
|
|
}, [client]);
|
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
const setAudioInput: (deviceId: string) => void = useCallback(
|
|
|
|
(deviceId: string) => {
|
2022-02-23 15:07:51 -08:00
|
|
|
updateMediaPreferences({ audioInput: deviceId });
|
2022-02-22 18:32:51 -08:00
|
|
|
setState((prevState) => ({ ...prevState, audioInput: deviceId }));
|
|
|
|
client.getMediaHandler().setAudioInput(deviceId);
|
|
|
|
},
|
|
|
|
[client]
|
|
|
|
);
|
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
const setVideoInput: (deviceId: string) => void = useCallback(
|
2022-02-22 18:32:51 -08:00
|
|
|
(deviceId) => {
|
2022-02-23 15:07:51 -08:00
|
|
|
updateMediaPreferences({ videoInput: deviceId });
|
2022-02-22 18:32:51 -08:00
|
|
|
setState((prevState) => ({ ...prevState, videoInput: deviceId }));
|
|
|
|
client.getMediaHandler().setVideoInput(deviceId);
|
|
|
|
},
|
|
|
|
[client]
|
|
|
|
);
|
|
|
|
|
2022-06-11 14:29:26 +02:00
|
|
|
const setAudioOutput: (deviceId: string) => void = useCallback((deviceId) => {
|
2022-02-23 15:07:51 -08:00
|
|
|
updateMediaPreferences({ audioOutput: deviceId });
|
2022-02-22 18:32:51 -08:00
|
|
|
setState((prevState) => ({ ...prevState, audioOutput: deviceId }));
|
|
|
|
}, []);
|
|
|
|
|
2022-06-06 22:42:48 +02:00
|
|
|
const context: MediaHandlerContextInterface =
|
|
|
|
useMemo<MediaHandlerContextInterface>(
|
|
|
|
() => ({
|
|
|
|
audioInput,
|
|
|
|
audioInputs,
|
|
|
|
setAudioInput,
|
|
|
|
videoInput,
|
|
|
|
videoInputs,
|
|
|
|
setVideoInput,
|
|
|
|
audioOutput,
|
|
|
|
audioOutputs,
|
|
|
|
setAudioOutput,
|
|
|
|
}),
|
|
|
|
[
|
|
|
|
audioInput,
|
|
|
|
audioInputs,
|
|
|
|
setAudioInput,
|
|
|
|
videoInput,
|
|
|
|
videoInputs,
|
|
|
|
setVideoInput,
|
|
|
|
audioOutput,
|
|
|
|
audioOutputs,
|
|
|
|
setAudioOutput,
|
|
|
|
]
|
|
|
|
);
|
2022-02-22 18:32:51 -08:00
|
|
|
|
|
|
|
return (
|
|
|
|
<MediaHandlerContext.Provider value={context}>
|
|
|
|
{children}
|
|
|
|
</MediaHandlerContext.Provider>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function useMediaHandler() {
|
|
|
|
return useContext(MediaHandlerContext);
|
|
|
|
}
|