@rapidmx/meet-plugin 0.6.0 → 0.8.1

package/README.md

@@ -8,8 +8,21 @@ Private and public WebRTC video meetings for a [RapidMX server](https://github.c
 turns on video conferencing for a calendar event; a private meeting mints one link per invitee (inserted into the
 invite's location and body), a public meeting shares a single link. Joining needs no account: a guest picks a name
 (auto-filled from their RapidMX profile when signed in), checks their camera and microphone, and enters. Calls are
-peer-to-peer WebRTC (no media server), relayed through a configured TURN server only for a participant a direct
-connection can't reach.
+peer-to-peer WebRTC (no media server). Each pair of participants uses the best path that works, tried in order:
+
+1. **Direct peer-to-peer**, the preferred path.
+2. **Relayed through a configured TURN server**, for a participant a direct connection can't reach. A plain `turn:`
+   address is offered over both UDP and TCP, so a network that blocks UDP can still reach it.
+3. **Proxied by the RapidMX server itself over a WebSocket**, the last resort for a participant whose network lets
+   nothing but ordinary HTTPS out. Video is lower quality and sound may lag; it needs a browser with WebCodecs, and
+   can be turned off with the `mail:videoconf:relay:enabled` setting. A tile says when a participant is on the TURN
+   relay or the server relay.
+
+Participants can put **video filters** on their camera from the lobby or during the call: a blurred or custom
+background, black and white / sepia / night vision / pixelate looks, and face accessories. They run entirely in the
+browser (MediaPipe, loaded only when a filter needs it - from public CDNs by default, or from your own server with
+`mail:videoconf:effects:assets_url`), and the devices, on/off state and filters a participant chose are remembered in
+their browser's `localStorage` for next time.
 
 This plugin's `apps/` also ship the public join/lobby/in-call pages and the personal Settings screen - see
 `package.json`'s `rapidmx.plugin.ui` for exactly what's mounted where.
@@ -29,9 +42,9 @@ infrastructure and no UI yet - see `.claude/NOTES.md`'s dated entry for the full
 ## Development
 
 Same layout and tooling as this project's other plugins (`@rapidmx/booking-plugin`, `@rapidmx/mapi-plugin`,
-`@rapidmx/autodiscover-plugin`): `yarn install`, `yarn test:prod`, `yarn build`. `@rapidmx/restapi`,
-`@rapidmx/react-shared` and `@rapidmx/web-client` are portal-linked in `package.json`'s `resolutions` during local
-development against a matching working tree of those repos.
+`@rapidmx/autodiscover-plugin`): `yarn install`, `yarn test:prod`, `yarn build`. `@rapidmx/restapi` and
+`@rapidmx/web-client` are portal-linked in `package.json`'s `resolutions` during local development against a
+matching working tree of those repos.
 
 ## License
 

package/apps/meet/[token].tsx

@@ -10,14 +10,14 @@
  * ## Session-based name prefill - NOT implemented, and why
  *
  * The spec asks this page to prefill the name field from `Profile.givenName` when the visiting browser already
- * holds a RapidMX session (investigating `@rapidmx/react-shared`'s `profileApi.ts`/`session.ts` was part of this
- * plugin's Phase 2 work). That turned out not to be wireable from here: `profileApi.ts`'s `getMyProfile()` needs
+ * holds a RapidMX session (investigating `@rapidmx/web-client`'s `lib/profileApi.ts`/`lib/session.ts` was part of
+ * this plugin's Phase 2 work). That turned out not to be wireable from here: `profileApi.ts`'s `getMyProfile()` needs
  * an `authServerUrl` to call auth-server (a *different* origin) with, and `session.ts`'s own doc comment confirms
  * `userUid`/`authServerUrl` are supplied only via server-side `fetchProps` on the `www`/admin console hosts
  * (`wwwRoute`/`AdminConsoleRoute` in `@rapidmx/server`) - never on the `public` host this page is mounted on.
  * `PublicPageRoute` (`@rapidmx/server`, this page's actual host route) returns only branding props; it has no
  * concept of the caller's session at all. There is, today, no public-host plugin page anywhere in this codebase
- * that does this, so there was no convention to extend - only two, cross-repo (`@rapidmx/server`/`react-shared`)
+ * that does this, so there was no convention to extend - only two, cross-repo (`@rapidmx/server`/`web-client`)
  * ways to add one (flagged in this plugin's Phase 2 report rather than built here, both out of this frontend-only
  * phase's scope):
  *
@@ -30,11 +30,11 @@
  * invitees have no RapidMX account at all), just never prefilled even for a mailbox owner testing their own link.
  */
 import React, { useState } from "react";
-import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
-import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import useBranding from "@rapidmx/web-client/lib/branding/useBranding.js";
+import { Branding } from "@rapidmx/web-client/lib/branding/brandingApi.js";
+import { ApiRequestError } from "@rapidmx/web-client/lib/util/api.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
 import { MeetCard, MeetPageShell } from "./_MeetChrome.js";
 import { useLocalMedia } from "../shared/media/useLocalMedia.js";
 import MeetLobby from "./_MeetLobby.js";
@@ -53,10 +53,10 @@ export default function MeetJoinPage({ params }: { params: { token: string } })
  * window instead (see `_CallView.tsx`). */
 function MeetJoinContent({ token, branding }: { token: string; branding: Branding | null }) {
     const [phase, setPhase] = useState<Phase>("loading");
-    const [joinResult, setJoinResult] = useState<VideoMeetingJoinResult | null>(null);
     const [name, setName] = useState("");
     const [loadError, setLoadError] = useState<string | null>(null);
-    const media = useLocalMedia();
+    const [joinResult, setJoinResult] = useState<VideoMeetingJoinResult | null>(null);
+    const media = useLocalMedia({ effectsAssetsUrl: joinResult?.effectsAssetsUrl });
     const { release } = media;
 
     React.useEffect(() => {
@@ -108,6 +108,7 @@ function MeetJoinContent({ token, branding }: { token: string; branding: Brandin
                 selfName={name}
                 meetingTitle={joinResult.meeting.title}
                 iceServers={joinResult.iceServers}
+                relayEnabled={joinResult.relayEnabled}
                 media={media}
                 onLeave={handleLeave}
             />

package/apps/meet/_CallControls.tsx

@@ -6,17 +6,21 @@
  * The in-call control bar, fixed to the bottom of the call (`_CallView.tsx` lays it out below the tiles, never over
  * them). Its menus open upward, centered on the whole bar on a phone (where the bar wraps onto two rows and a menu
  * hung from its own button would run off the edge) and from their own button on a wider window: microphone and camera (each a mute/unmute or on/off button next to a menu that picks the device), share
- * screen, reactions, raise hand, grid/focus and leave.
+ * screen, reactions, raise hand, grid/focus and leave. The effects button opens the video filter picker
+ * (`_EffectsPanel.tsx`) and lights up while any filter is on.
  *
  * The microphone button shows a live level while it is unmuted - bars that move with the sound the microphone is
  * picking up, so a participant can see their audio is being sent - and the camera button shows a green dot while a
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`).
  */
 import React, { useEffect, useRef, useState } from "react";
+import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import type { LocalMedia, MediaKind } from "../shared/media/useLocalMedia.js";
 import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
+import EffectsPanel from "./_EffectsPanel.js";
 import {
     ChevronUpIcon,
+    EffectsIcon,
     EmojiIcon,
     FocusIcon,
     GridIcon,
@@ -45,7 +49,7 @@ export interface CallControlsProps {
     onLeave: () => void;
 }
 
-type OpenMenu = MediaKind | "emoji" | null;
+type OpenMenu = MediaKind | "emoji" | "effects" | null;
 
 const BUTTON = "flex items-center justify-center h-12 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
 const NEUTRAL = "bg-[#3c4043] text-white hover:bg-[#4b4f53]";
@@ -166,6 +170,28 @@ export default function CallControls({
                 {openMenu === "video" && <DeviceMenu kind="video" media={media} onClose={() => setOpenMenu(null)} />}
             </div>
 
+            <div className="sm:relative">
+                <button
+                    type="button"
+                    className={`${BUTTON} w-12 ${filtersActive(media.filters) ? ACTIVE : NEUTRAL}`}
+                    aria-label="Video effects"
+                    aria-haspopup="dialog"
+                    aria-expanded={openMenu === "effects"}
+                    onClick={() => toggleMenu("effects")}
+                >
+                    <EffectsIcon />
+                </button>
+                {openMenu === "effects" && (
+                    <div
+                        role="dialog"
+                        aria-label="Video effects"
+                        className="absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-96 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl"
+                    >
+                        <EffectsPanel media={media} tone="dark" />
+                    </div>
+                )}
+            </div>
+
             <button
                 type="button"
                 className={`${BUTTON} w-12 ${isPresenting ? ACTIVE : NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`}

package/apps/meet/_CallView.tsx

@@ -42,7 +42,8 @@ import { requestDisplayMedia, stopStream } from "../shared/media/deviceMedia.js"
 import type { LocalMedia } from "../shared/media/useLocalMedia.js";
 import { createBrowserPeerConnection } from "../shared/webrtc/realPeerConnection.js";
 import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js";
-import type { MeshParticipant } from "../shared/webrtc/types.js";
+import type { MeshParticipant, RelayTransportLike } from "../shared/webrtc/types.js";
+import { createRelayTransport } from "../shared/relay/RelayTransport.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
 import CallControls, { type CallViewMode } from "./_CallControls.js";
 import ParticipantTile from "./_ParticipantTile.js";
@@ -57,6 +58,9 @@ export interface CallViewProps {
     selfName: string;
     meetingTitle: string;
     iceServers: RTCIceServer[];
+    /** Whether the server offers the WebSocket media relay, the last-resort path for a participant neither a direct
+     * connection nor the TURN server can reach - `VideoMeetingJoinResult.relayEnabled`. Off when absent. */
+    relayEnabled?: boolean;
     /** The camera and microphone, owned by the page (`[token].tsx`) - the lobby's tracks carried into the call. */
     media: LocalMedia;
     onLeave: () => void;
@@ -100,7 +104,7 @@ export function newPeerId(selfUid: string): string {
     return `${selfUid}~${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
 }
 
-export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, media, onLeave }: CallViewProps) {
+export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, media, onLeave }: CallViewProps) {
     const [peerId] = useState(() => newPeerId(selfUid));
     const [connectError, setConnectError] = useState<string | null>(null);
     const [participants, setParticipants] = useState<MeshParticipant[]>([]);
@@ -116,6 +120,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [announcement, setAnnouncement] = useState("");
     const [audioBlocked, setAudioBlocked] = useState(false);
     const [audioNonce, setAudioNonce] = useState(0);
+    const [signalingReady, setSignalingReady] = useState(false);
 
     const managerRef = useRef<MeshConnectionManager | null>(null);
     const screenStreamRef = useRef<MediaStream | null>(null);
@@ -144,6 +149,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             iceServers,
             channel: client,
             createPeerConnection: createBrowserPeerConnection,
+            relay: relayEnabled ? createRelay(channel, peerId) : undefined,
             localAudioTrack: media.audioTrack,
             localVideoTrack: media.videoTrack,
             localState: { audioOn: media.micOn, videoOn: media.cameraOn },
@@ -200,6 +206,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             .then(() => {
                 if (!cancelled) {
                     manager.start();
+                    setSignalingReady(true);
                 }
             })
             .catch((err: Error) => {
@@ -316,6 +323,10 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const presenterName = presenterUid ? (presenterUid === peerId ? selfName : (participants.find((p) => p.uid === presenterUid)?.name ?? "Someone")) : undefined;
     const raisedNames = [...(handRaised ? ["You"] : []), ...participants.filter((p) => p.handRaised).map((p) => p.name)];
     const alone = participants.length === 0;
+    // This participant has no working link yet: the signaling channel is still opening, or there is someone in the call
+    // and every connection to them is still being made. Once any one is up (or nobody else is here) it is not shown,
+    // so someone already in the call is not told they are "connecting" each time a newcomer arrives.
+    const selfConnecting = !connectError && (!signalingReady || (!alone && participants.every((p) => p.transport === "connecting")));
 
     const remoteTile = (p: MeshParticipant, className?: string) => (
         <ParticipantTile
@@ -325,6 +336,8 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             cameraOff={!p.videoOn}
             micMuted={!p.audioOn}
             handRaised={p.handRaised}
+            transport={p.transport}
+            status={p.transport === "connecting" ? "Awaiting connection…" : undefined}
             isFocused={mainUid === p.uid}
             contain={presenterUid === p.uid}
             className={className}
@@ -340,6 +353,10 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             cameraOff={!media.cameraOn}
             micMuted={!media.micOn}
             handRaised={handRaised}
+            status={selfConnecting ? "Connecting…" : undefined}
+            // A custom background is a fixed picture, not a live reflection - mirroring it would show it backwards
+            // to no one but the participant themselves (see `_ParticipantTile.tsx`'s doc comment).
+            mirrored={media.filters.background !== "image"}
             className={className}
         />
     );
@@ -481,6 +498,13 @@ function RemoteAudio({ stream, onBlocked }: { stream: MediaStream; onBlocked: ()
     return <audio ref={audioRef} autoPlay data-testid="remote-audio" />;
 }
 
+/** The WebSocket media relay for this call, or `undefined` when this browser cannot run it (no WebCodecs) - the
+ * mesh then never falls back to it, and says so by marking an unreachable participant `"failed"`. */
+function createRelay(meetingUid: string, peerId: string): RelayTransportLike | undefined {
+    const relay = createRelayTransport({ meetingUid, peerId });
+    return relay.supported ? relay : undefined;
+}
+
 function stopLevelMeter(ref: React.MutableRefObject<Record<string, LevelMeterHandle>>, uid: string): void {
     ref.current[uid]?.stop();
     delete ref.current[uid];

package/apps/meet/_EffectsPanel.tsx

@@ -0,0 +1,134 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The picker for the video filters (`apps/shared/media/filters/`): a background, a colour effect and a face accessory,
+ * each one of a short list, chosen independently so they combine. Shared by the lobby (on the page's light theme) and
+ * the in-call control bar (on its dark one) - `tone` picks the colours, nothing else differs.
+ *
+ * The background can also be a picture from the participant's own device: choosing "Custom image" with none picked yet
+ * opens the file picker, and once one is picked "Change image" is offered beside the options. The picture is read and
+ * kept in the browser (`filters/backgroundImage.ts`) - it is never uploaded.
+ */
+import React, { useRef, useState } from "react";
+import type { LocalMedia } from "../shared/media/useLocalMedia.js";
+import {
+    ACCESSORY_OPTIONS,
+    BACKGROUND_OPTIONS,
+    EFFECT_OPTIONS,
+    type FilterOption,
+    type VideoFilters,
+} from "../shared/media/filters/filterTypes.js";
+
+export type EffectsTone = "light" | "dark";
+
+const CHIP = "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm transition-colors focus:outline-none focus-visible:ring-2";
+const TONES: Record<EffectsTone, { idle: string; selected: string; muted: string; ring: string; link: string }> = {
+    light: {
+        idle: "border border-border bg-surface text-text hover:bg-surface-alt",
+        selected: "border border-primary bg-surface-alt text-text font-semibold",
+        muted: "text-text-muted",
+        ring: "focus-visible:ring-primary",
+        link: "text-primary",
+    },
+    dark: {
+        idle: "bg-[#3c4043] text-white hover:bg-[#4b4f53]",
+        selected: "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]",
+        muted: "text-white/70",
+        ring: "focus-visible:ring-white/80",
+        link: "text-[#8ab4f8]",
+    },
+};
+
+export interface EffectsPanelProps {
+    media: LocalMedia;
+    tone: EffectsTone;
+}
+
+export default function EffectsPanel({ media, tone }: EffectsPanelProps) {
+    const colors = TONES[tone];
+    const fileInput = useRef<HTMLInputElement>(null);
+    const [fileError, setFileError] = useState<string | null>(null);
+    const { filters, filterStatus } = media;
+
+    function group<K extends keyof VideoFilters>(
+        key: K,
+        label: string,
+        options: FilterOption<VideoFilters[K]>[],
+        onChoose: (id: VideoFilters[K]) => void,
+    ) {
+        return (
+            <div role="group" aria-label={label} className="mt-3 first:mt-0">
+                <p className={`text-xs font-semibold uppercase tracking-wide mb-1.5 ${colors.muted}`}>{label}</p>
+                <div className="flex flex-wrap gap-1.5">
+                    {options.map((option) => (
+                        <button
+                            key={option.id}
+                            type="button"
+                            className={`${CHIP} ${colors.ring} ${filters[key] === option.id ? colors.selected : colors.idle}`}
+                            aria-pressed={filters[key] === option.id}
+                            onClick={() => onChoose(option.id)}
+                        >
+                            <span aria-hidden="true">{option.emoji}</span>
+                            {option.label}
+                        </button>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    async function handleFile(event: React.ChangeEvent<HTMLInputElement>) {
+        const input = event.target;
+        const file = input.files?.[0];
+        // Cleared so picking the same file again still counts as a change.
+        input.value = "";
+        if (file) {
+            setFileError(await media.chooseBackgroundImage(file));
+        }
+    }
+
+    function chooseBackground(id: VideoFilters["background"]) {
+        setFileError(null);
+        if (id === "image" && !media.hasBackgroundImage) {
+            fileInput.current?.click();
+            return;
+        }
+        media.setFilters({ background: id });
+    }
+
+    return (
+        <div>
+            {group("background", "Background", BACKGROUND_OPTIONS, chooseBackground)}
+            {media.hasBackgroundImage && (
+                <button
+                    type="button"
+                    className={`mt-1.5 text-sm underline ${colors.link} focus:outline-none focus-visible:ring-2 ${colors.ring}`}
+                    onClick={() => fileInput.current?.click()}
+                >
+                    Change image
+                </button>
+            )}
+            <input ref={fileInput} type="file" accept="image/*" className="hidden" aria-label="Background image" onChange={handleFile} />
+            {fileError && (
+                <p role="alert" className="mt-1.5 text-sm text-[#d93025]">
+                    {fileError}
+                </p>
+            )}
+            {group("effect", "Look", EFFECT_OPTIONS, (id) => media.setFilters({ effect: id }))}
+            {group("accessory", "Fun", ACCESSORY_OPTIONS, (id) => media.setFilters({ accessory: id }))}
+            {filterStatus.loading && (
+                <p role="status" className={`mt-3 text-sm ${colors.muted}`}>
+                    Loading effects…
+                </p>
+            )}
+            {filterStatus.error && (
+                <p role="alert" className="mt-3 text-sm text-[#d93025]">
+                    {filterStatus.error}
+                </p>
+            )}
+            {!media.cameraOn && <p className={`mt-3 text-sm ${colors.muted}`}>Turn on your camera to see effects.</p>}
+        </div>
+    );
+}

package/apps/meet/_MeetChrome.tsx

@@ -6,7 +6,7 @@
  * same `booking-plugin`'s `_BookingChrome.tsx` shell-component pattern this plugin's Phase 2 spec calls for. Not a
  * page itself: `_`-prefixed files in `apps/` aren't routed. */
 import React, { PropsWithChildren } from "react";
-import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { Branding } from "@rapidmx/web-client/lib/branding/brandingApi.js";
 import { BrandingFooter, BrandingHeader } from "@rapidmx/web-client/shared/components/layout/BrandingChrome.js";
 
 export function MeetPageShell({ branding, children }: PropsWithChildren<{ branding: Branding | null }>) {

package/apps/meet/_MeetLobby.tsx

@@ -8,22 +8,32 @@
  * the page (`[token].tsx`) rather than by this component - the tracks previewed here are the tracks the call sends,
  * so leaving the lobby for the call must not (and does not) stop them.
  *
+ * The "Effects" section opens the video filter picker (`_EffectsPanel.tsx`), so the participant sees themselves with
+ * a blurred or replaced background, or a fun accessory, before anyone else does. What they chose last time is
+ * already applied when the lobby opens (`useLocalMedia()` remembers it).
+ *
  * Access is requested when the lobby opens, and again from the "Allow" / "Try again" button: a click is a user
  * gesture, which some browsers require before they will show a permission prompt at all. When access is refused, or
  * there is no camera or microphone, the lobby says so and why, and joining is still allowed - a participant with
  * nothing to send can still see and hear the call, and turn a camera or microphone on later from the call controls.
  *
+ * The preview is mirrored, like a real mirror, so it feels natural - except with a custom background image, a fixed
+ * picture rather than a live reflection: mirroring it would show it backwards to no one but the participant
+ * themselves (see `_ParticipantTile.tsx`'s doc comment, which the in-call tile follows for the same reason).
+ *
  * Per this plugin's Phase 2 spec, the name field is always editable - it is only ever *prefilled* when a session is
  * genuinely known (see this component's `initialName` prop and `[token].tsx`'s own doc comment on why that never
  * actually happens on this page today).
  */
 import React, { useEffect, useRef, useState } from "react";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
 import type { LocalMedia, TrackStatus } from "../shared/media/useLocalMedia.js";
 import type { PublicVideoMeeting } from "./_meetApi.js";
 import { LevelBars } from "./_CallControls.js";
+import EffectsPanel from "./_EffectsPanel.js";
+import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "./_icons.js";
 
 const INPUT_CLASS =
@@ -65,6 +75,7 @@ function previewMessage(media: LocalMedia): string {
 
 export default function MeetLobby({ meeting, media, initialName, onJoin }: MeetLobbyProps) {
     const [name, setName] = useState(initialName ?? "");
+    const [showEffects, setShowEffects] = useState(false);
     const videoRef = useRef<HTMLVideoElement>(null);
     const { requestAccess } = media;
 
@@ -94,7 +105,13 @@ export default function MeetLobby({ meeting, media, initialName, onJoin }: MeetL
                 <div>
                     <div className="relative aspect-video bg-[#202124] rounded-lg overflow-hidden flex items-center justify-center">
                         {media.videoStream ? (
-                            <video ref={videoRef} autoPlay playsInline muted className="w-full h-full object-cover [transform:scaleX(-1)]" />
+                            <video
+                                ref={videoRef}
+                                autoPlay
+                                playsInline
+                                muted
+                                className={`w-full h-full object-cover ${media.filters.background !== "image" ? "[transform:scaleX(-1)]" : ""}`}
+                            />
                         ) : (
                             <p className="px-4 text-center text-white/70 text-sm">{previewMessage(media)}</p>
                         )}
@@ -152,6 +169,21 @@ export default function MeetLobby({ meeting, media, initialName, onJoin }: MeetL
                             </select>
                         </label>
                     )}
+                    <div className="mt-3">
+                        <button
+                            type="button"
+                            className="text-sm text-primary underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                            aria-expanded={showEffects}
+                            onClick={() => setShowEffects((shown) => !shown)}
+                        >
+                            {filtersActive(media.filters) ? "Effects (on)" : "Effects"}
+                        </button>
+                        {showEffects && (
+                            <div className="mt-2">
+                                <EffectsPanel media={media} tone="light" />
+                            </div>
+                        )}
+                    </div>
                     {media.devices.microphones.length > 1 && (
                         <label className="block text-sm mt-3">
                             Microphone

package/apps/meet/_ParticipantTile.tsx

@@ -8,10 +8,44 @@
  *
  * A tile never plays sound: its `<video>` is always muted, and what a participant says is played by the call view's
  * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
- * in the current layout - can never silence anyone. */
+ * in the current layout - can never silence anyone.
+ *
+ * The local tile is shown mirrored (`scaleX(-1)`), like a real mirror, so a participant's own movements feel
+ * natural - this is a local display transform only, never applied to the video actually sent to anyone, so
+ * everyone else always sees the participant the right way round. `mirrored={false}` (`_CallView.tsx`, when a custom
+ * background image is on) turns that off: the picture the participant chose is a fixed reference, not a live
+ * reflection, and mirroring it would show it backwards to no one but themselves. */
 import React, { useEffect, useRef } from "react";
+import type { MediaTransport } from "../shared/webrtc/types.js";
 import { MicOffIcon } from "./_icons.js";
 
+/** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
+ * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess. */
+const TRANSPORT_BADGES: Partial<Record<MediaTransport, { label: string; title: string }>> = {
+    turn: { label: "Relayed", title: "Connected through the relay server, because a direct connection was not possible." },
+    websocket: {
+        label: "Server relay",
+        title: "Sent through the server as a last resort, because no other connection was possible. Video is lower quality and sound may lag.",
+    },
+    failed: { label: "Can't connect", title: "This participant could not be reached from your network." },
+};
+
+/** A short line saying the connection is still being made, with a spinner - a polite live region (not `role="status"`,
+ * which the call view's own announcement region already is), so a participant who cannot see the tile still learns
+ * why nothing is happening yet. */
+function StatusPill({ status, className }: { status: string; className?: string }) {
+    return (
+        <span
+            aria-live="polite"
+            data-testid="tile-status"
+            className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/60 text-white text-xs ${className ?? ""}`}
+        >
+            <span className="inline-block w-3 h-3 rounded-full border-2 border-white/30 border-t-white animate-spin" aria-hidden="true" />
+            {status}
+        </span>
+    );
+}
+
 export interface ParticipantTileProps {
     name: string;
     stream?: MediaStream | null;
@@ -20,10 +54,18 @@ export interface ParticipantTileProps {
     cameraOff?: boolean;
     micMuted?: boolean;
     handRaised?: boolean;
+    /** How this participant's media reaches you - a badge is shown for everything but a direct or still-connecting one. */
+    transport?: MediaTransport;
+    /** Says the connection is still being made, e.g. "Connecting..." on the local tile and "Awaiting connection..." on a
+     * participant's - shown with a spinner until the caller clears it. */
+    status?: string;
     /** Highlights this tile as the current presenter/focus. */
     isFocused?: boolean;
     /** Fits the whole picture inside the tile instead of filling it - a shared screen must not be cropped. */
     contain?: boolean;
+    /** Whether the local tile is shown mirrored, like a real mirror - ignored for a remote tile, which is never
+     * mirrored. Default `true`; see this module's doc comment. */
+    mirrored?: boolean;
     onClick?: () => void;
     className?: string;
 }
@@ -39,11 +81,15 @@ export default function ParticipantTile({
     cameraOff,
     micMuted,
     handRaised,
+    transport,
+    status,
     isFocused,
     contain,
+    mirrored = true,
     onClick,
     className,
 }: ParticipantTileProps) {
+    const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
     const videoRef = useRef<HTMLVideoElement>(null);
     const showVideo = !!stream && !cameraOff;
 
@@ -65,16 +111,22 @@ export default function ParticipantTile({
             aria-label={onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined}
         >
             {showVideo ? (
-                <video
-                    ref={videoRef}
-                    autoPlay
-                    playsInline
-                    muted
-                    className={`w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain ? "[transform:scaleX(-1)]" : ""}`}
-                />
+                <>
+                    <video
+                        ref={videoRef}
+                        autoPlay
+                        playsInline
+                        muted
+                        className={`w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain && mirrored ? "[transform:scaleX(-1)]" : ""}`}
+                    />
+                    {status && <StatusPill status={status} className="absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" />}
+                </>
             ) : (
-                <div className="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold" aria-hidden="true">
-                    {initialOf(name)}
+                <div className="flex flex-col items-center gap-2 max-w-full px-1">
+                    <div className="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold" aria-hidden="true">
+                        {initialOf(name)}
+                    </div>
+                    {status && <StatusPill status={status} />}
                 </div>
             )}
             {handRaised && (
@@ -89,6 +141,17 @@ export default function ParticipantTile({
                     </span>
                 </span>
             )}
+            {badge && (
+                <span
+                    className={`absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${
+                        transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"
+                    }`}
+                    title={badge.title}
+                    data-testid="transport-badge"
+                >
+                    {badge.label}
+                </span>
+            )}
             <div className="absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm">
                 {name}
                 {isLocal ? " (you)" : ""}

package/apps/meet/_icons.tsx

@@ -52,3 +52,7 @@ export const HandIcon = () => (
         ✋
     </span>
 );
+
+export const EffectsIcon = () => (
+    <Icon path="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" />
+);

package/apps/meet/_layout.tsx

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { PropsWithChildren } from "react";
-import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
-import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+import { Branding } from "@rapidmx/web-client/lib/branding/brandingApi.js";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/web-client/lib/branding/useBranding.js";
 
 export interface LayoutProps {
     /** Supplied by the server's public page route (`PublicPageRoute`), which every `public` plugin app's route