fix: video blink when toggling mic mute in calls (#277)

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com>
Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>

.dockerignore

@@ -4,7 +4,6 @@ ios
 build
 
 # Git
-.git
 .gitignore
 
 # Env files (keep .env for build; exclude local overrides)

.gitea/workflows/docker-publish.yml

@@ -5,8 +5,8 @@ on:
     branches: [master]
 
 env:
-  REGISTRY: ghcr.io
+  REGISTRY: gitea.coracle.social
-  IMAGE_NAME: coracle-social/flotilla
+  IMAGE_NAME: coracle/flotilla
 
 jobs:
   build-and-push-image:
@@ -23,8 +23,8 @@ jobs:
         uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
-          username: ${{ secrets.REGISTRY_USERNAME }}
+          username: hodlbod
-          password: ${{ secrets.REGISTRY_PASSWORD }}
+          password: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta

Dockerfile

@@ -1,40 +1,27 @@
-# Stage 1: Build
+# Build and run the Flotilla web server.
-# Uses .env from build context for config (logo, branding, etc.)
+#
-# Optional: docker build --build-arg VITE_BUILD_HASH=$(git rev-parse --short HEAD) -t flotilla .
+#   docker build -t flotilla .
+#   docker run -p 3000:3000 flotilla
+#
+# Pass --build-arg VITE_BUILD_HASH=$(git rev-parse --short HEAD) to stamp the build.
+# A .env in the build context is picked up by build.sh for branding config.
 
-FROM node:20-bookworm AS builder
+FROM node:22-bookworm
 
-RUN apt-get update && apt-get install -y --no-install-recommends curl
+RUN npm install -g pnpm@10.33.0
-
-RUN npm install -g pnpm@latest
 
 WORKDIR /app
 
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm i
 
-# Copy everything (including .env when present) - build.sh will source it
+RUN pnpm i --frozen-lockfile
-COPY . .
-
-ARG VITE_BUILD_HASH
-ENV VITE_BUILD_HASH=${VITE_BUILD_HASH}
 
 ENV NODE_OPTIONS=--max_old_space_size=16384
+
+COPY . .
+
 RUN pnpm run build
 
-FROM node:20-alpine
-
-WORKDIR /app
-
-# Install production dependencies needed by the Node server runtime
-RUN npm install -g pnpm@10.33.0
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm i --prod --frozen-lockfile --ignore-scripts
-
-# Copy only the built output and server source - no app source, no .env, no dev deps
-COPY --from=builder /app/build ./build
-COPY --from=builder /app/server.js ./server.js
-
 EXPOSE 3000
 
 CMD ["node", "server.js"]

README.md

@@ -37,12 +37,12 @@ pnpm run start
 Or, if you prefer to use a container:
 
 ```sh
-podman run -d -p 3000:3000 ghcr.io/coracle-social/flotilla:latest
+docker run -d -p 3000:3000 gitea.coracle.social/coracle/flotilla:latest
 ```
 
 Alternatively, you can copy the build files into a directory of your choice and serve it yourself:
 
 ```sh
 mkdir ./mount
-podman run -v ./mount:/app/mount ghcr.io/coracle-social/flotilla:latest bash -c 'cp -r build/* mount'
+docker run -v ./mount:/app/mount gitea.coracle.social/coracle/flotilla:latest bash -c 'cp -r build/* mount'
 ```

server.js

@@ -247,6 +247,14 @@ app.use(
             : "public, max-age=3600"
 
       context.header("Cache-Control", cacheControl)
+
+      // Immutable assets are content-hashed by Vite, so the filename is itself a
+      // stable content identifier. Exposing it as an ETag lets clients that
+      // revalidate explicitly (e.g. emoji-picker-element checks its data source
+      // on every load) skip re-downloading large files when nothing changed.
+      if (isImmutable) {
+        context.header("ETag", `"${path.basename(filePath)}"`)
+      }
     },
   }),
 )

src/app.css

@@ -423,10 +423,18 @@ progress[value]::-webkit-progress-value {
 
 /* Keyboard open state adjustments */
 
+body.keyboard-open {
+  --saib: 0px;
+}
+
 body.keyboard-open .hide-on-keyboard {
   display: none;
 }
 
+body.keyboard-open .chat__compose {
+  margin-bottom: 0;
+}
+
 /* chat view */
 
 .chat__compose {

src/app/call/stores.ts

@@ -6,11 +6,13 @@ export type VoiceSession = {
   url: string
   h: string
   room: LiveKitRoom
-  muted: boolean
   cameraOn: boolean
   screenShareOn: boolean
 }
 
+/** Mic mute state is separate so toggling it does not re-render video tiles. */
+export const voiceMicMuted = writable(true)
+
 export type Pubkey = string
 
 export type VoiceParticipant = {pubkey?: Pubkey; identity: string}

src/app/call/voice.ts

@@ -13,7 +13,7 @@ import {
   type AudioCaptureOptions,
 } from "livekit-client"
 import {derived, get} from "svelte/store"
-import {map, removeUndefined, uniqBy} from "@welshman/lib"
+import {map, not, removeUndefined, uniqBy} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {makeHttpAuth, makeHttpAuthHeader, getTags} from "@welshman/util"
 import {signer} from "@welshman/app"
@@ -22,6 +22,7 @@ import {AbortError, whenAborted, whenTimeout} from "$lib/util"
 import {
   currentVoiceRoom,
   currentVoiceSession,
+  voiceMicMuted,
   participantFromLiveKitIdentity,
   participantKey,
   participantPubkeyMap,
@@ -173,6 +174,7 @@ const setUpMicrophone = async (
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
   videoPrimaryTileKey.set(undefined)
+  voiceMicMuted.set(true)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
@@ -295,11 +297,11 @@ export const joinVoiceRoom = async (
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
+    voiceMicMuted.set(muted)
     currentVoiceSession.set({
       url,
       h,
       room: liveKitRoom,
-      muted,
       cameraOn: false,
       screenShareOn: false,
     })
@@ -339,6 +341,7 @@ export const leaveVoiceRoom = async () => {
 
   voiceState.set(VoiceState.Disconnected)
   videoPrimaryTileKey.set(undefined)
+  voiceMicMuted.set(true)
   currentVoiceSession.set(undefined)
   resetVideoCallLayout()
   session.room.disconnect()
@@ -356,18 +359,17 @@ export const toggleMute = async () => {
   const session = get(currentVoiceSession)
   if (!session) return
 
-  const muted = !session.muted
+  voiceMicMuted.update(not)
-  if (muted) {
+  if (get(voiceMicMuted)) {
     // Disable and re-enable microphone to trigger permission prompt
     session.room.localParticipant.setMicrophoneEnabled(false)
-    currentVoiceSession.set({...session, muted})
     return
   }
 
   try {
     await session.room.localParticipant.setMicrophoneEnabled(true)
-    currentVoiceSession.set({...session, muted})
   } catch (e) {
+    voiceMicMuted.set(true)
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }

src/app/components/VideoCallContent.svelte

@@ -144,6 +144,9 @@
 
   const useSpotlightLayout = $derived(primaryTile !== undefined)
   const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 2)
+  const multiGridClass = $derived(
+    layout === VideoCallLayout.Split ? "grid-cols-1" : "grid-cols-1 sm:grid-cols-2",
+  )
 
   $effect(() => {
     const k = $videoPrimaryTileKey
@@ -213,8 +216,8 @@
         data-tip={pinned ? "Exit spotlight" : "Spotlight"}
         aria-pressed={pinned}
         class={cx(
-          "absolute right-1 top-1 z-20 btn btn-xs btn-square btn-ghost",
+          "absolute right-1 top-1 z-20 btn btn-xs btn-square",
-          pinned ? "btn-active bg-primary/25 text-primary" : "bg-base-100/70",
+          pinned ? "btn-primary" : "btn-ghost bg-base-100",
         )}
         onclick={spotlightHandlerFor(tileKey(tile))}>
         <Icon icon={Pin} size={3} />
@@ -238,8 +241,7 @@
         {/if}
       </div>
     {:else if useMultiGrid}
-      <div
+      <div class={cx("grid min-h-0 flex-1 content-start gap-2 overflow-y-auto", multiGridClass)}>
-        class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
         {#each videoTiles as tile (tileKey(tile))}
           {@render videoTile(tile, "default")}
         {/each}

src/app/components/VoiceWidget.svelte

@@ -41,6 +41,7 @@
     VoiceState,
     currentVoiceSession,
     currentVoiceRoom,
+    voiceMicMuted,
     voiceState,
     isLocalSpeaking,
   } from "@app/call/stores"
@@ -183,18 +184,17 @@
         </Button>
       {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
-          data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
+          data-tip={$voiceMicMuted ? "Unmute" : "Mute"}
           class={cx(
             mediaToggleClass,
             "overflow-visible",
-            !$currentVoiceSession.muted && $isLocalSpeaking && "text-primary",
+            !$voiceMicMuted && $isLocalSpeaking && "text-primary",
-            $currentVoiceSession.muted &&
+            $voiceMicMuted && "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
-              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
           )}
           onclick={toggleMute}>
           <span class="relative inline-flex items-center justify-center overflow-visible">
             <Icon icon={Microphone} size={4} />
-            {#if $currentVoiceSession.muted}
+            {#if $voiceMicMuted}
               <span
                 class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
                 aria-hidden="true">

src/app/util/notifications.ts

@@ -1,4 +1,4 @@
-import {derived} from "svelte/store"
+import {derived, get, writable} from "svelte/store"
 import {Badge} from "@capawesome/capacitor-badge"
 import {synced, throttled, withGetter} from "@welshman/store"
 import {pubkey, tracker, repository, relaysByUrl} from "@welshman/app"
@@ -36,6 +36,9 @@ export const deriveChecked = (key: string) => derived(checked, prop<number>(key)
 
 export const setChecked = (key: string) => checked.update(assoc(key, now()))
 
+/** Room path while video call UI hides chat; checked + badge stay active until chat is shown. */
+export const deferredRoomPath = writable<string | undefined>(undefined)
+
 export const syncChecked = () => {
   let prev = ""
 
@@ -57,8 +60,11 @@ export const syncChecked = () => {
 
     // Set checked when we visit a given page - but delay it a tad
     setTimeout(() => {
+      const defer = get(deferredRoomPath)
+
       checked.update($checked => {
         for (const path of getPaths($page.url.pathname)) {
+          if (defer && path === defer) continue
           $checked[path] = now()
         }
 
@@ -151,9 +157,17 @@ export const allNotifications = derived(
   },
 )
 
-export const notifications = derived([page, allNotifications], ([$page, $allNotifications]) => {
+export const notifications = derived(
-  return new Set([...$allNotifications].filter(p => !$page.url.pathname.startsWith(p)))
+  [page, allNotifications, deferredRoomPath],
-})
+  ([$page, $allNotifications, $deferredRoomPath]) =>
+    new Set(
+      [...$allNotifications].filter(p => {
+        if (!$page.url.pathname.startsWith(p)) return true
+        if ($deferredRoomPath && p === $deferredRoomPath) return true
+        return false
+      }),
+    ),
+)
 
 // Badges
 

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount} from "svelte"
+  import {onDestroy, onMount} from "svelte"
   import {readable} from "svelte/store"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
@@ -49,7 +49,8 @@
   import {VideoCallLayout, videoCallLayout, videoTileCount} from "@app/call/video"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
-  import {checked} from "@app/util/notifications"
+  import {checked, deferredRoomPath, setChecked} from "@app/util/notifications"
+  import {makeRoomPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -77,6 +78,21 @@
     voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video,
   )
 
+  const roomPath = makeRoomPath(url, h)
+
+  const videoCallChatHidden = $derived(
+    voiceConnectedHere && $videoCallLayout === VideoCallLayout.Video,
+  )
+
+  $effect(() => {
+    deferredRoomPath.set(videoCallChatHidden ? roomPath : undefined)
+    if (voiceConnectedHere && !videoCallChatHidden) {
+      setChecked(roomPath)
+    }
+  })
+
+  onDestroy(() => deferredRoomPath.set(undefined))
+
   let prevVideoTileCount = $state(0)
 
   $effect(() => {