styling for ipad

This commit is contained in:
balzack 2025-01-29 19:41:04 -08:00
parent b88242fed2
commit 69a19cf8fe
2 changed files with 12 additions and 2 deletions

View File

@ -53,6 +53,13 @@ export const styles = StyleSheet.create({
height: '100%', height: '100%',
borderRadius: 8, borderRadius: 8,
}, },
canvas: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
frame: { frame: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -95,7 +102,6 @@ export const styles = StyleSheet.create({
height: '20%', height: '20%',
}, },
full: { full: {
position: 'absolute',
width: '100%', width: '100%',
height: '100%', height: '100%',
}, },

View File

@ -197,7 +197,7 @@ export function Calling({ callCard }: { callCard: string }) {
)} )}
{ state.calling && ( { state.calling && (
<View style={{ ...styles.container, backgroundColor: surface.base }}> <View style={{ ...styles.container, backgroundColor: surface.base }}>
<View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}> <View style={{ ...styles.frame, top: frameOffset, width: frameWidth > 400 ? 400 : frameWidth, height: frameHeight > 400 ? 400 : frameHeight }}>
<Image <Image
style={{ ...styles.image, opacity: state.loaded ? 1 : 0 }} style={{ ...styles.image, opacity: state.loaded ? 1 : 0 }}
resizeMode="contain" resizeMode="contain"
@ -232,20 +232,24 @@ export function Calling({ callCard }: { callCard: string }) {
</View> </View>
)} )}
{ state.calling && state.loaded && state.remote && ( { state.calling && state.loaded && state.remote && (
<View style={{ ...styles.canvas, backgroundColor: surface.base }}>
<RTCView <RTCView
style={styles.full} style={styles.full}
mirror={true} mirror={true}
objectFit={'contain'} objectFit={'contain'}
streamURL={state.remote.toURL()} streamURL={state.remote.toURL()}
/> />
</View>
)} )}
{ state.calling && state.loaded && state.local && !state.remote && ( { state.calling && state.loaded && state.local && !state.remote && (
<View style={{ ...styles.canvas, backgroundColor: surface.base }}>
<RTCView <RTCView
style={styles.full} style={styles.full}
mirror={true} mirror={true}
objectFit={'contain'} objectFit={'contain'}
streamURL={state.local.toURL()} streamURL={state.local.toURL()}
/> />
</View>
)} )}
{ state.calling && state.loaded && state.local && state.remote && ( { state.calling && state.loaded && state.local && state.remote && (
<RTCView <RTCView