Add basic screen sharing

src/app/components/VideoCallContent.svelte

@@ -27,6 +27,7 @@
     isLocal: boolean
     trackSid: string
     attachable: Track | undefined
+    source: Track.Source.Camera | Track.Source.ScreenShare
   }
 
   const {variant, url, h, visible = true, class: className = ""}: Props = $props()
@@ -60,17 +61,40 @@
         isLocal: true,
         trackSid: localPub?.trackSid ?? "local-camera",
         attachable: localPub?.track,
+        source: Track.Source.Camera,
+      })
+    }
+
+    if (session.screenShareOn) {
+      const localPub = lp.getTrackPublication(Track.Source.ScreenShare)
+      out.push({
+        identity: lp.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-screen",
+        attachable: localPub?.track,
+        source: Track.Source.ScreenShare,
       })
     }
 
     for (const rp of room.remoteParticipants.values()) {
-      const pub = rp.getTrackPublication(Track.Source.Camera)
-      if (pub?.isSubscribed && pub.track) {
+      const camPub = rp.getTrackPublication(Track.Source.Camera)
+      if (camPub?.isSubscribed && camPub.track) {
         out.push({
           identity: rp.identity,
           isLocal: false,
-          trackSid: pub.trackSid,
-          attachable: pub.track,
+          trackSid: camPub.trackSid,
+          attachable: camPub.track,
+          source: Track.Source.Camera,
+        })
+      }
+      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
+      if (screenPub?.isSubscribed && screenPub.track) {
+        out.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: screenPub.trackSid,
+          attachable: screenPub.track,
+          source: Track.Source.ScreenShare,
         })
       }
     }
@@ -85,9 +109,10 @@
     }
   })
 
-  const labelFor = (identity: string) => {
+  const labelFor = (identity: string, source: Tile["source"]) => {
     const pk = pubkeyFromLiveKitIdentity(identity)
-    return pk ? displayProfileByPubkey(pk) : "Unknown"
+    const name = pk ? displayProfileByPubkey(pk) : "Unknown"
+    return source === Track.Source.ScreenShare ? `${name} · screen` : name
   }
 
   const showTileGrid = $derived(tiles.length > 0)
@@ -106,9 +131,17 @@
     )}>
     {#if showTileGrid}
       {#each tiles as tile (tile.trackSid + tile.identity)}
-        <div class="relative aspect-video overflow-hidden rounded-box bg-base-100 shadow-sm">
+        <div
+          class={cx(
+            "relative aspect-video overflow-hidden rounded-box shadow-sm",
+            tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
+          )}>
           {#if tile.attachable}
-            <VideoCallVideo track={tile.attachable} muted={tile.isLocal} class="absolute inset-0" />
+            <VideoCallVideo
+              track={tile.attachable}
+              muted={tile.isLocal}
+              fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
+              class="absolute inset-0" />
           {:else}
             <div class="absolute inset-0 flex items-center justify-center">
               <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
@@ -116,15 +149,17 @@
           {/if}
           <span
             class="absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
-            {labelFor(tile.identity)}{tile.isLocal ? " (you)" : ""}
+            {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
           </span>
         </div>
       {/each}
     {:else}
       <div
         class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-100/50 p-4 text-center text-sm opacity-80">
-        <p>No camera video yet.</p>
-        <p class="text-xs">Use the camera control in the voice widget to share video.</p>
+        <p>No camera or screen share yet.</p>
+        <p class="text-xs">
+          Use the camera or screen share control in the voice widget to share video.
+        </p>
       </div>
     {/if}
   </div>

src/app/components/VideoCallVideo.svelte

@@ -5,10 +5,11 @@
   type Props = {
     track: Track
     muted?: boolean
+    fit?: "cover" | "contain"
     class?: string
   }
 
-  const {track, muted = true, class: className = ""}: Props = $props()
+  const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()
 
   let el = $state<HTMLVideoElement | undefined>()
 
@@ -23,5 +24,8 @@
   })
 </script>
 
-<video bind:this={el} class={cx("h-full w-full object-cover", className)} playsinline {muted}
-></video>
+<video
+  bind:this={el}
+  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
+  playsinline
+  {muted}></video>

src/app/components/VoiceWidget.svelte

@@ -8,6 +8,8 @@
   import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
   import Videocamera from "@assets/icons/videocamera.svg?dataurl"
   import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
+  import ScreenShare from "@assets/icons/screen-share.svg?dataurl"
+  import Screencast from "@assets/icons/screencast.svg?dataurl"
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@@ -34,6 +36,7 @@
     leaveVoiceRoom,
     toggleMute,
     toggleCamera,
+    toggleScreenShare,
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
@@ -122,6 +125,14 @@
           btn-ghost" onclick={openAudioSettings}>
           <Icon icon={Settings} size={4} />
         </Button>
+        <Button
+          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleScreenShare}>
+          <Icon icon={$currentVoiceSession.screenShareOn ? Screencast : ScreenShare} size={4} />
+        </Button>
         <Button
           data-tip="Leave room"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-error"