deepgeek/gradio-webrtc
2
0
Fork 0
mirror of https://github.com/HumanAIGC-Engineering/gradio-webrtc.git synced 2026-02-04 17:39:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

update mobile view (#3)

Browse Source 
* Update VideoChat.svelte
* Delete frontend/package-lock.json
This commit is contained in:
bingochaos
2025-02-18 14:50:33 +08:00
committed by GitHub
parent 7b71eda153
commit f0b43b63cd
3 changed files with 15 additions and 6279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl vendored
View File

Binary file not shown.

6276
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
frontend/shared/VideoChat.svelte
View File

@@ -282,6 +282,7 @@
wrapperRef.getBoundingClientRect()
wrapperRect.width = wrapperRef.clientWidth
wrapperRect.height = wrapperRef.clientHeight
isLandScape = wrapperRect.width * 1.5 > wrapperRect.height
console.log(wrapperRect)
})
@@ -350,11 +351,12 @@
e.preventDefault()
e.stopPropagation()
}
export let isLandScape = true
window.addEventListener('resize', () => {
wrapperRef.getBoundingClientRect()
wrapperRect.width = wrapperRef.clientWidth
wrapperRect.height = wrapperRef.clientHeight
isLandScape = wrapperRect.width * 1.5 > wrapperRect.height
computeLocalPosition()
computeRemotePosition()
})
@@ -371,7 +373,7 @@
<WebcamPermissions on:click={async () => access_webcam()} />
</div>
{/if}
<div class="video-container" bind:this={wrapperRef} class:picture-in-picture={videoShowType === 'picture-in-picture'} class:side-by-side={videoShowType === 'side-by-side'} style:visibility="{webcam_accessed ? 'visible' : 'hidden'}">
<div class="video-container" bind:this={wrapperRef} class:vertical={!isLandScape} class:picture-in-picture={videoShowType === 'picture-in-picture'} class:side-by-side={videoShowType === 'side-by-side'} style:visibility="{webcam_accessed ? 'visible' : 'hidden'}">
<div class=local-video-container bind:this={localVideoContainerRef}
style:left={localVideoPosition.width < 10 ? '50%' :localVideoPosition.left + 'px'}
style:top={localVideoPosition.height < 10 ? '50%' : localVideoPosition.top + 'px'}
@@ -512,6 +514,16 @@
backdrop-filter: blur(20px);
border-radius: 32px;
transition: all 0.3s linear;
overflow: hidden;
}
&.vertical {
flex-direction: column-reverse;
.local-video-container, .remote-video-container {
width: 100%;
height: 49%;
}
}
.local-video, .remote-video {
width: 100%;
@@ -676,4 +688,4 @@
}
}
</style>
</style>