Video in calls #135

Merged
hodlbod merged 20 commits from feature/134-video-in-calls into dev 2026-04-08 17:10:21 +00:00
Collaborator

#135

This PR adds basic video functionality to our voice rooms. Again I followed the Discord UX for inspiration, so all video calls start as voice-only calls that gracefully upgrade (and downgrade) when someone turns on a video or starts screen sharing.

When a video feed is detected the Room page will change to display a grid of feeds. The grid logic is very basic, that's definitely an area to improve in the future. You can open the chat part of the room with a new button on the VoiceWidget - on the desktop layout this creates a split view with video on the left and chat on the right, but on mobile it switches to chat fullscreen. I also added a little pin icon you can use to focus on a single video feed (useful for screen sharing). There is a lot of tailwind I don't understand here, but it seems to work well enough.

I moved voice.ts into a new call folder and moved some of its stores into call/stores.ts which allowed me to keep most of the video logic in call/video.ts. It's not a perfect encapsulation as voice.ts does subscribe to some of the hooks for the livekit calls and passes some of the signals onto video.ts. This could probably be broken up better but for this PR I'd rather not focus on making it perfect if that's ok. Partly for the sake of time but also because I envision another PR that renames/reorganizes things and I think a larger UX evaluation is necessary and should include real user feedback. I'm not confident tha""t the Voice Room concept as a whole will stick going forward. Maybe all rooms in a livekit enabled server should be able to host a call (like a slack huddle), maybe users want to be able to schedule calls as events, or even have them start with an ad-hoc set of participants completely outside of a NIP-29 group, etc.

#135 This PR adds basic video functionality to our voice rooms. Again I followed the Discord UX for inspiration, so all video calls start as voice-only calls that gracefully upgrade (and downgrade) when someone turns on a video or starts screen sharing. When a video feed is detected the Room page will change to display a grid of feeds. The grid logic is very basic, that's definitely an area to improve in the future. You can open the chat part of the room with a new button on the VoiceWidget - on the desktop layout this creates a split view with video on the left and chat on the right, but on mobile it switches to chat fullscreen. I also added a little pin icon you can use to focus on a single video feed (useful for screen sharing). There is a lot of tailwind I don't understand here, but it seems to work well enough. I moved voice.ts into a new `call` folder and moved some of its stores into `call/stores.ts` which allowed me to keep most of the video logic in `call/video.ts`. It's not a perfect encapsulation as voice.ts does subscribe to some of the hooks for the livekit calls and passes some of the signals onto `video.ts`. This could probably be broken up better but for this PR I'd rather not focus on making it perfect if that's ok. Partly for the sake of time but also because I envision another PR that renames/reorganizes things and I think a larger UX evaluation is necessary and should include real user feedback. I'm not confident tha""t the Voice Room concept as a whole will stick going forward. Maybe all rooms in a livekit enabled server should be able to host a call (like a slack huddle), maybe users want to be able to schedule calls as events, or even have them start with an ad-hoc set of participants completely outside of a NIP-29 group, etc.
mplorentz marked the pull request as ready for review 2026-04-08 15:27:16 +00:00
mplorentz reviewed 2026-04-08 15:28:50 +00:00
@@ -0,0 +1,58 @@
import {Room as LiveKitRoom} from "livekit-client"
Author
Collaborator

I think this whole file was extracted unchanged from voice.ts.

I think this whole file was extracted unchanged from `voice.ts`.
mplorentz reviewed 2026-04-08 15:30:31 +00:00
@@ -4,3 +11,3 @@
{#key $page.url.searchParams.get("at")}
<slot />
{@render children?.()}
Author
Collaborator

The AI said this is the right way to do things now in Svelte 5, and the AI never lies.

The AI said this is the right way to do things now in Svelte 5, and the AI never lies.
mplorentz requested review from hodlbod 2026-04-08 15:31:56 +00:00
Owner

LGTM

LGTM
hodlbod added 20 commits 2026-04-08 17:10:16 +00:00
hodlbod force-pushed feature/134-video-in-calls from 288bcfe5d7 to 81ab03311a 2026-04-08 17:10:16 +00:00 Compare
hodlbod merged commit f4ebc4e99e into dev 2026-04-08 17:10:21 +00:00
hodlbod deleted branch feature/134-video-in-calls 2026-04-08 17:10:21 +00:00
hodlbod referenced this issue from a commit 2026-04-08 17:10:23 +00:00
Owner

I merged this, but wasn't able to test it due to a pre-existing bug causing voice calls to timeout. I don't know where or why it's happening, see #174. Once that's merged I'll test more closely and open new issues.

I merged this, but wasn't able to test it due to a pre-existing bug causing voice calls to timeout. I don't know where or why it's happening, see #174. Once that's merged I'll test more closely and open new issues.
Sign in to join this conversation.