Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2022-07-15 11:22:13 +02:00
parent eda8404144
commit d5375ca9ed
No known key found for this signature in database
GPG key ID: D1D45825D60C24D2
3 changed files with 20 additions and 11 deletions

View file

@ -23,7 +23,6 @@ import { VideoTile } from "./VideoTile";
import { VideoTileSettingsModal } from "./VideoTileSettingsModal"; import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
import { useModalTriggerState } from "../Modal"; import { useModalTriggerState } from "../Modal";
export function VideoTileContainer({ export function VideoTileContainer({
item, item,
width, width,
@ -56,11 +55,13 @@ export function VideoTileContainer({
isLocal, isLocal,
localVolume localVolume
); );
const { modalState: videoTileSettingsModalState, modalProps: videoTileSettingsModalProps } = const {
useModalTriggerState(); modalState: videoTileSettingsModalState,
modalProps: videoTileSettingsModalProps,
} = useModalTriggerState();
const onOptionsPress = () => { const onOptionsPress = () => {
videoTileSettingsModalState.open(); videoTileSettingsModalState.open();
} };
// Firefox doesn't respect the disablePictureInPicture attribute // Firefox doesn't respect the disablePictureInPicture attribute
// https://bugzilla.mozilla.org/show_bug.cgi?id=1611831 // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
@ -83,7 +84,12 @@ export function VideoTileContainer({
showOptions={!item.callFeed.isLocal()} showOptions={!item.callFeed.isLocal()}
{...rest} {...rest}
/> />
{videoTileSettingsModalState.isOpen && <VideoTileSettingsModal {...videoTileSettingsModalProps} feed={item.callFeed} />} {videoTileSettingsModalState.isOpen && (
<VideoTileSettingsModal
{...videoTileSettingsModalProps}
feed={item.callFeed}
/>
)}
</> </>
); );
} }

View file

@ -46,7 +46,7 @@ export function useCallFeed(callFeed) {
} }
function onLocalVolumeChanged(localVolume) { function onLocalVolumeChanged(localVolume) {
setState((prevState) => ({ ...prevState, localVolume })) setState((prevState) => ({ ...prevState, localVolume }));
} }
function onUpdateCallFeed() { function onUpdateCallFeed() {
@ -69,7 +69,10 @@ export function useCallFeed(callFeed) {
CallFeedEvent.MuteStateChanged, CallFeedEvent.MuteStateChanged,
onMuteStateChanged onMuteStateChanged
); );
callFeed.removeListener(CallFeedEvent.LocalVolumeChanged, onLocalVolumeChanged); callFeed.removeListener(
CallFeedEvent.LocalVolumeChanged,
onLocalVolumeChanged
);
callFeed.removeListener(CallFeedEvent.NewStream, onUpdateCallFeed); callFeed.removeListener(CallFeedEvent.NewStream, onUpdateCallFeed);
} }
}; };

View file

@ -34,7 +34,7 @@ export const useMediaStream = (
stream: MediaStream, stream: MediaStream,
audioOutputDevice: string, audioOutputDevice: string,
mute = false, mute = false,
localVolume: number, localVolume: number
): RefObject<MediaElement> => { ): RefObject<MediaElement> => {
const mediaRef = useRef<MediaElement>(); const mediaRef = useRef<MediaElement>();
@ -90,7 +90,7 @@ export const useMediaStream = (
if (localVolume === null || localVolume === undefined) return; if (localVolume === null || localVolume === undefined) return;
mediaRef.current.volume = localVolume; mediaRef.current.volume = localVolume;
}, [localVolume]) }, [localVolume]);
useEffect(() => { useEffect(() => {
const mediaEl = mediaRef.current; const mediaEl = mediaRef.current;
@ -196,7 +196,7 @@ export const useSpatialMediaStream = (
audioContext: AudioContext, audioContext: AudioContext,
audioDestination: AudioNode, audioDestination: AudioNode,
mute = false, mute = false,
localVolume: number, localVolume: number
): [RefObject<Element>, RefObject<MediaElement>] => { ): [RefObject<Element>, RefObject<MediaElement>] => {
const tileRef = useRef<Element>(); const tileRef = useRef<Element>();
const [spatialAudio] = useSpatialAudio(); const [spatialAudio] = useSpatialAudio();
@ -205,7 +205,7 @@ export const useSpatialMediaStream = (
stream, stream,
audioOutputDevice, audioOutputDevice,
spatialAudio || mute, spatialAudio || mute,
localVolume, localVolume
); );
const pannerNodeRef = useRef<PannerNode>(); const pannerNodeRef = useRef<PannerNode>();