Own camera is not mirrored in the large view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-02 00:44:37 +02:00
co-authored by Claude Opus 5.5
parent e41a2cfd70
commit c990593f9f
+3 -2
View File
@@ -267,7 +267,8 @@
{:else} {:else}
<div class="pic" role="presentation" oncontextmenu={streamMenu} <div class="pic" role="presentation" oncontextmenu={streamMenu}
ontouchstart={touchStart} ontouchend={touchEnd} ontouchmove={touchEnd} ontouchcancel={touchEnd}> ontouchstart={touchStart} ontouchend={touchEnd} ontouchmove={touchEnd} ontouchcancel={touchEnd}>
<video bind:this={spotVideo} class:mirror={focus === self.session && share.mirror} use:media={focused} autoplay playsinline muted ondblclick={fullscreen}></video> <!-- Large, your own camera is shown as the others see it; only the small tile is a mirror -->
<video bind:this={spotVideo} use:media={focused} autoplay playsinline muted ondblclick={fullscreen}></video>
{#if focus !== self.session && focusWatch && focusWatch.state !== 'live'} {#if focus !== self.session && focusWatch && focusWatch.state !== 'live'}
<p class="pending" class:bad={focusWatch.state === 'failed'}>{focusWatch.state === 'failed' <p class="pending" class:bad={focusWatch.state === 'failed'}>{focusWatch.state === 'failed'
? 'Could not connect to the stream. Across the internet both of you need a STUN server; networks that block direct connections need a relay. Both are in Settings, Voice.' ? 'Could not connect to the stream. Across the internet both of you need a STUN server; networks that block direct connections need a relay. Both are in Settings, Voice.'
@@ -414,7 +415,7 @@
/* A camera keeps its own shape inside the tile, whatever size the tile is: nothing is cut /* A camera keeps its own shape inside the tile, whatever size the tile is: nothing is cut
off, a phone held upright gets bars at the sides. Your own is mirrored, like a mirror. */ off, a phone held upright gets bars at the sides. Your own is mirrored, like a mirror. */
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tile video.mirror, .spot video.mirror { transform: scaleX(-1); } .tile video.mirror { transform: scaleX(-1); }
.icon-btn.live, .icon-btn.live:hover { color: var(--speaking); } .icon-btn.live, .icon-btn.live:hover { color: var(--speaking); }
.camgrid { position: relative; display: flex; flex-direction: column; flex: none; } .camgrid { position: relative; display: flex; flex-direction: column; flex: none; }
/* Name tag over the lower left corner */ /* Name tag over the lower left corner */