martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding fullscreen support to video calls

Browse Source
This commit is contained in:
Roland Osborne 2024-03-06 13:34:00 -08:00
parent 48baa779fb
commit f03ca2dbe0
3 changed files with 147 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
net/web/src/session/Session.jsx
View File

@ -14,11 +14,13 @@ import { Account } from './account/Account';
import { Welcome } from './welcome/Welcome';
import { BottomNav } from './bottomNav/BottomNav';
import { Logo } from 'logo/Logo';
import { EyeInvisibleOutlined, PhoneOutlined } from '@ant-design/icons';
import { EyeInvisibleOutlined, PhoneOutlined, ShrinkOutlined, ArrowsAltOutlined } from '@ant-design/icons';
import { IoVideocamOffOutline, IoVideocamOutline, IoMicOffOutline, IoMicOutline, IoCallOutline } from "react-icons/io5";
import { ThemeProvider } from "styled-components";
import { SettingsContext } from 'context/SettingsContext';
import avatar from 'images/avatar.png';
export function Session() {
const { state, actions } = useSession();
@ -347,16 +349,25 @@ export function Session() {
</Modal>
<Modal centered visible={state.callStatus} footer={null} closable={false} width={callModal.width} height={callModal.height} bodyStyle={{ padding: 6 }}>
<CallingWrapper>
<div className={ state.fullscreen ? 'fullscreen' : 'modal' }>
<div className="window">
{ !state.remoteVideo && (
<Logo url={state.callLogo} width={256} height={256} radius={8} />
<div className="logo">
{ state.callLogo && (
<img className="image" src={state.callLogo} alt="logo" width="100%" height="100%" />
)}
{ !state.callLogo && (
<img className="image" src={avatar} alt="default logo" width="100%" height="100%" />
)}
</div>
)}
{ state.remoteStream && (
<video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%' }}
<video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%', height: '100%' }}
complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
)}
{ state.localStream && (
<div className="calling-local">
<video ref={local} disablepictureinpicture playsInline autoPlay muted style={{ width: '100%', display: 'block' }}
<video ref={local} disablepictureinpicture playsInline autoPlay muted style={{ width: '100%', height: '100%', display: 'block' }}
complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
</div>
)}
@ -381,10 +392,22 @@ export function Session() {
<IoMicOffOutline />
</div>
)}
{ state.fullscreen && (
<div className="calling-option" onClick={() => actions.setFullscreen(false)}>
<ShrinkOutlined />
</div>
<div className="calling-end calling-hovered" onClick={actions.end}>
)}
{ !state.fullscreen && (
<div className="calling-option" onClick={() => actions.setFullscreen(true)}>
<ArrowsAltOutlined />
</div>
)}
<div className="calling-end" onClick={actions.end}>
<IoCallOutline />
</div>
</div>
</div>
</div>
</CallingWrapper>
</Modal>
</SessionWrapper>

62
net/web/src/session/Session.styled.js
View File

@ -73,14 +73,42 @@ export const RingingWrapper = styled.div`
`;
export const CallingWrapper = styled.div`
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: ${props => props.theme.frameArea};
}
.modal {
background-color: ${props => props.theme.frameArea};
}
.window {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
&:hover .calling-hovered {
display: flex;
}
.logo {
width: 100%;
height: 100%;
border-radius: 4px;
}
.image {
object-fit: contain;
}
.calling-local {
width: 33%;
bottom: 16px;
@ -97,32 +125,32 @@ export const CallingWrapper = styled.div`
background-color: yellow;
}
.calling-end {
position: absolute;
bottom: 16px;
color: ${Colors.white};
font-size: 24px;
background-color: ${Colors.alert};
display: none;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 20px;
cursor: pointer;
transform: rotate(135deg);
}
.calling-options {
display: none;
position: absolute;
top: 16px;
bottom: 16px;
flex-direction: row;
}
.calling-option {
color: ${Colors.white};
font-size: 24px;
background-color: ${Colors.primary};
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 20px;
cursor: pointer;
margin-left: 8px;
margin-right: 8px;
}
.calling-end {
color: ${Colors.white};
background-color: ${Colors.alert};
transform: rotate(135deg);
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;

9
net/web/src/session/useSession.hook.js
View File

@ -34,6 +34,7 @@ export function useSession() {
remoteAudio: false,
audioId: null,
videoId: null,
fullscreen: false,
});
const app = useContext(AppContext);
@ -78,6 +79,11 @@ export function useSession() {
const { callStatus, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio } = ring.state;
updateState({ ringing, callStatus, callLogo, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio });
if (!callStatus && state.fullscreen) {
updateState({ fullscreen: false });
}
// eslint-disable-next-line
}, [ring.state]);
@ -120,6 +126,9 @@ export function useSession() {
}, [store]);
const actions = {
setFullscreen: (fullscreen) => {
updateState({ fullscreen });
},
openCards: () => {
updateState({ cards: true });
},