create a hook for listening for video call events
+ wip fullscreen video callspull/2015/head
Audric Ackermann
3 years ago
parent
a45f5f520a
commit
6a1f575c46
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
import { setFullScreenCall } from '../../../state/ducks/conversations';
|
||||
import {
|
||||
getCallIsInFullScreen,
|
||||
getHasOngoingCall,
|
||||
getHasOngoingCallWith,
|
||||
} from '../../../state/selectors/conversations';
|
||||
|
||||
const CallInFullScreenVisible = styled.div`
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-modal-background);
|
||||
border: var(--session-border);
|
||||
opacity: 0.9;
|
||||
`;
|
||||
|
||||
export const CallInFullScreenContainer = () => {
|
||||
const dispatch = useDispatch();
|
||||
const ongoingCallProps = useSelector(getHasOngoingCallWith);
|
||||
// const selectedConversationKey = useSelector(getSelectedConversationKey);
|
||||
const hasOngoingCall = useSelector(getHasOngoingCall);
|
||||
const hasOngoingCallFullScreen = useSelector(getCallIsInFullScreen);
|
||||
|
||||
// const ongoingCallPubkey = ongoingCallProps?.id;
|
||||
// const ongoingCallUsername = ongoingCallProps?.profileName || ongoingCallProps?.name;
|
||||
// const videoRefRemote = useRef<any>();
|
||||
// const videoRefLocal = useRef<any>();
|
||||
// const mountedState = useMountedState();
|
||||
|
||||
function toggleFullScreenOFF() {
|
||||
dispatch(setFullScreenCall(false));
|
||||
}
|
||||
|
||||
if (!hasOngoingCall || !ongoingCallProps || !hasOngoingCallFullScreen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <CallInFullScreenVisible onClick={toggleFullScreenOFF} />;
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,68 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
// tslint:disable-next-line: no-submodule-imports
|
||||
import useMountedState from 'react-use/lib/useMountedState';
|
||||
import { CallManager } from '../session/utils';
|
||||
import { CallManagerOptionsType, InputItem } from '../session/utils/CallManager';
|
||||
import {
|
||||
getCallIsInFullScreen,
|
||||
getHasOngoingCallWithPubkey,
|
||||
getSelectedConversationKey,
|
||||
} from '../state/selectors/conversations';
|
||||
|
||||
export function useVideoCallEventsListener(uniqueId: string) {
|
||||
const selectedConversationKey = useSelector(getSelectedConversationKey);
|
||||
const ongoingCallPubkey = useSelector(getHasOngoingCallWithPubkey);
|
||||
const isFullScreen = useSelector(getCallIsInFullScreen);
|
||||
|
||||
const [localStream, setLocalStream] = useState<MediaStream | null>(null);
|
||||
const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
|
||||
const [localStreamVideoIsMuted, setLocalStreamVideoIsMuted] = useState(true);
|
||||
const [ourAudioIsMuted, setOurAudioIsMuted] = useState(false);
|
||||
const [remoteStreamVideoIsMuted, setRemoteStreamVideoIsMuted] = useState(true);
|
||||
const mountedState = useMountedState();
|
||||
|
||||
const [currentConnectedCameras, setCurrentConnectedCameras] = useState<Array<InputItem>>([]);
|
||||
const [currentConnectedAudioInputs, setCurrentConnectedAudioInputs] = useState<Array<InputItem>>(
|
||||
[]
|
||||
);
|
||||
useEffect(() => {
|
||||
if (ongoingCallPubkey === selectedConversationKey) {
|
||||
CallManager.addVideoEventsListener(uniqueId, (options: CallManagerOptionsType) => {
|
||||
const {
|
||||
audioInputsList,
|
||||
camerasList,
|
||||
isLocalVideoStreamMuted,
|
||||
isRemoteVideoStreamMuted,
|
||||
localStream: lLocalStream,
|
||||
remoteStream: lRemoteStream,
|
||||
isAudioMuted,
|
||||
} = options;
|
||||
if (mountedState()) {
|
||||
setLocalStream(lLocalStream);
|
||||
setRemoteStream(lRemoteStream);
|
||||
setRemoteStreamVideoIsMuted(isRemoteVideoStreamMuted);
|
||||
setLocalStreamVideoIsMuted(isLocalVideoStreamMuted);
|
||||
setOurAudioIsMuted(isAudioMuted);
|
||||
|
||||
setCurrentConnectedCameras(camerasList);
|
||||
setCurrentConnectedAudioInputs(audioInputsList);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
CallManager.removeVideoEventsListener(uniqueId);
|
||||
};
|
||||
}, [ongoingCallPubkey, selectedConversationKey, isFullScreen]);
|
||||
|
||||
return {
|
||||
currentConnectedAudioInputs,
|
||||
currentConnectedCameras,
|
||||
localStreamVideoIsMuted,
|
||||
remoteStreamVideoIsMuted,
|
||||
localStream,
|
||||
remoteStream,
|
||||
isAudioMuted: ourAudioIsMuted,
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue