From dd34985d6ce18b9e661dbeba82f154dbc5fd2e88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8D=E8=B6=85?= Date: Thu, 6 Feb 2025 16:31:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=BA=A2=E5=87=BA=E5=B1=8F=E5=B9=95=E5=88=99?= =?UTF-8?q?=E7=A7=BB=E5=88=B0=E5=B7=A6=E8=BE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/shared/VideoChat.svelte | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/frontend/shared/VideoChat.svelte b/frontend/shared/VideoChat.svelte index b358a16..7c8ea52 100644 --- a/frontend/shared/VideoChat.svelte +++ b/frontend/shared/VideoChat.svelte @@ -249,7 +249,7 @@ let localVideoRef: HTMLVideoElement let localVideoContainerRef: HTMLDivElement let localVideoPosition = { - left: 0, + left: 10, top: 0, width: 1, height: 1, @@ -267,7 +267,8 @@ let actionsPosition = { left: 0, bottom: 0, - init: false + init: false, + isOverflow: false } // const computeVideoPosition = () => { @@ -289,7 +290,6 @@ videoShowType = 'picture-in-picture' } } - function computeLocalPosition() { if (!localVideoRef || !localVideoContainerRef || !localVideoRef.videoHeight) return if (remoteVideoPosition.init) { @@ -302,8 +302,9 @@ localVideoPosition.height = height actionsPosition.left = remoteVideoPosition.left + remoteVideoPosition.width + 10 + actionsPosition.left = actionsPosition.left > wrapperRect.width ? actionsPosition.left - 60 : actionsPosition.left actionsPosition.bottom = wrapperRect.height - remoteVideoPosition.top - remoteVideoPosition.height + 5 - + actionsPosition.isOverflow = actionsPosition.left + 80 > wrapperRect.width } else { // 否则则占用全屏 let height = wrapperRect.height - 24 @@ -315,7 +316,10 @@ localVideoPosition.height = height actionsPosition.left = localVideoPosition.left + localVideoPosition.width + 10 + actionsPosition.left = actionsPosition.left > wrapperRect.width ? actionsPosition.left-60 : actionsPosition.left actionsPosition.bottom = wrapperRect.height - localVideoPosition.top - localVideoPosition.height + 5 + actionsPosition.isOverflow = actionsPosition.left + 100 > wrapperRect.width + } } function computeRemotePosition() { @@ -393,7 +397,7 @@ {/if} {#if stream_state === "closed"}
{/if} -
+
{#each available_video_devices as device, i}
handle_device_change(device.deviceId)}>{device.label} {#if selected_video_device && device.deviceId === selected_video_device.deviceId}
@@ -408,7 +412,7 @@ {:else} {/if} {#if stream_state === "closed"}
{/if} -
+
{#each available_audio_devices as device, i}
handle_device_change(device.deviceId)}>{device.label} {#if selected_audio_device && device.deviceId === selected_audio_device.deviceId}
@@ -480,7 +484,7 @@ height: 10px; border-radius: 32px; overflow: hidden; - transition: all 0.3s; + transition: all 0.3s ; } .local-video-container { z-index: 1; @@ -513,6 +517,8 @@ } .actions { position: absolute; + z-index: 2; + left:10px; .action-group { border-radius: 12px; background: rgba(88, 87, 87, 0.5); @@ -550,6 +556,11 @@ top: 0; left: calc(100%); margin-left: 3px; + &.left { + left: 0; + margin-left: -3px; + transform: translateX(-100%); + } border-radius: 12px; width: max-content; overflow: hidden;