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

scaling video calls

Browse Source
This commit is contained in:
Roland Osborne 2024-03-06 22:37:11 -08:00
parent f03ca2dbe0
commit 7e39f05491
3 changed files with 40 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
net/web/src/constants/Colors.js
View File

@ -40,6 +40,8 @@ export const Colors = {
};
export const LightTheme = {
remoteArea: '#080808',
localArea: '#888888',
splashArea: '#8fbea7',
baseArea: '#8fbea7',
frameArea: '#e4e4e4',
@ -77,6 +79,8 @@ export const LightTheme = {
};
export const DarkTheme = {
remoteArea: '#080808',
localArea: '#888888',
splashArea: '#4c4c4c',
baseArea: '#080808',
frameArea: '#0a0a0a',

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

@ -21,14 +21,18 @@ import { SettingsContext } from 'context/SettingsContext';
import avatar from 'images/avatar.png';
function getDim() {
if (window.innerWidth > window.innerHeight) {
return window.innerHeight / 2;
}
return window.innerWidth / 2;
}
export function Session() {
const { state, actions } = useSession();
const settings = useContext(SettingsContext);
const [ringing, setRinging] = useState([]);
const [callWidth, setCallWidth] = useState(256);
const [callHeight, setCallHeight] = useState(256);
const [callModal, setCallModal] = useState({ width: 256, height: 256, offset: 0 });
const remote = useRef();
const local = useRef();
@ -61,48 +65,8 @@ export function Session() {
// eslint-disable-next-line
}, [state.ringing]);
useEffect(() => {
if (!state.remoteVideo) {
setCallModal({ width: 256 + 12, height: 256 + 12, offset: 0 });
}
else {
setCallModal({ width: callWidth + 12, height: callHeight + 12, offset: ((268 - callHeight) / 2) });
}
}, [callWidth, callHeight, state.remoteVideo])
useEffect(() => {
if (remote.current) {
remote.current.onloadedmetadata = (ev) => {
const { videoWidth, videoHeight } = ev.target || { videoWidth: 256, videoHeight: 256 }
if ((window.innerWidth * 8) / 10 < videoWidth) {
const scaledWidth = window.innerWidth * 8 / 10;
const scaledHeight = videoHeight * (scaledWidth / videoWidth)
if ((window.innerHeight * 8) / 10 < scaledHeight) {
const height = (window.innerHeight * 8) / 10;
setCallHeight(height);
setCallWidth(videoWidth * (height / videoHeight));
}
else {
setCallHeight(scaledHeight);
setCallWidth(scaledWidth);
}
}
else if ((window.innerHeight * 8) / 10 < videoHeight) {
const height = (window.innerHeight * 8) / 10;
setCallHeight(height);
setCallWidth(videoWidth * (height / videoHeight));
}
else if (videoHeight < 72 || videoWidth < 72) {
setCallHeight(72);
setCallWidth(72);
}
else {
setCallHeight(videoHeight);
setCallWidth(videoWidth);
}
};
remote.current.srcObject = state.remoteStream;
remote.current.load();
remote.current.play();
@ -119,10 +83,6 @@ export function Session() {
}
}, [state.localStream]);
useEffect(() => {
console.log("DIM: ", callWidth, callHeight);
}, [callWidth, callHeight]);
const closeAccount = () => {
actions.closeProfile();
actions.closeAccount();
@ -347,7 +307,7 @@ export function Session() {
</div>
</RingingWrapper>
</Modal>
<Modal centered visible={state.callStatus} footer={null} closable={false} width={callModal.width} height={callModal.height} bodyStyle={{ padding: 6 }}>
<Modal centered visible={state.callStatus} footer={null} closable={false} width={getDim() + 12} height={getDim()} bodyStyle={{ padding: 6 }}>
<CallingWrapper>
<div className={ state.fullscreen ? 'fullscreen' : 'modal' }>
<div className="window">
@ -362,14 +322,18 @@ export function Session() {
</div>
)}
{ state.remoteStream && (
<video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%', height: '100%' }}
<video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: state.fullscreen ? '100%' : getDim(), height: state.fullscreen ? '100%' : getDim() }}
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%', height: '100%', display: 'block' }}
<div className="local-position">
<div className="local-frame">
<video ref={local} disablepictureinpicture playsInline autoPlay muted style={{ maxWidth: '100%', maxHeight: '100%', display: 'block' }}
complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
</div>
</div>
</div>
)}
<div className="calling-options calling-hovered">
{ state.localVideo && (

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

@ -80,11 +80,11 @@ export const CallingWrapper = styled.div`
left: 0;
width: 100vw;
height: 100vh;
background-color: ${props => props.theme.frameArea};
background-color: ${props => props.theme.remoteArea};
}
.modal {
background-color: ${props => props.theme.frameArea};
background-color: ${props => props.theme.remoteArea};
}
.window {
@ -110,10 +110,27 @@ export const CallingWrapper = styled.div`
}
.calling-local {
width: 33%;
bottom: 16px;
left: 16px;
position: absolute;
border-radius: 4px;
width: 33%;
height: 33%;
.local-position {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-start;
.local-frame {
padding: 4px;
border-radius: 2px;
background-color: ${props => props.theme.localArea};
}
}
}
.calling-logo {
@ -128,7 +145,7 @@ export const CallingWrapper = styled.div`
.calling-options {
display: none;
position: absolute;
bottom: 16px;
top: 16px;
flex-direction: row;
}