Merge branch 'lotus' into fix/pip-minimise

# Conflicts:
#	src/app/components/CallEmbedProvider.tsx

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.24",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.23",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.24",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.24/element-call-embedded-0.25.0-lotus.24.tgz",
-      "integrity": "sha512-6cMjJ0WCGvZJridoF0YslvF3giYar/uLgc/JAlgLqBg+Irv+Mm/xWuC2bme60BT+f/wmEX30gr7WDeIc4JUL7w==",
+      "version": "0.25.0-lotus.23",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.23/element-call-embedded-0.25.0-lotus.23.tgz",
+      "integrity": "sha512-vRmcWeJcU0Accyl2x3mqNEzrIe8djE5BekyYbYOSCsMflC98rZgD1mO7KOe7bA1cX7gparRf6sAt1fotHoU+bA==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.24",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.23",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/components/CallEmbedProvider.tsx

@@ -90,6 +90,9 @@ import { useDenoiseNotices } from '../hooks/useDenoiseNotices';
 
 const PIP_MIN_W = 200;
 const PIP_MIN_H = 112;
+/** [Gitea #323] Minimised PiP bar size. */
+const PIP_MINI_W = 220;
+const PIP_MINI_H = 40;
 /** Default PiP top: just below the 64px-ish room header. */
 const PIP_DEFAULT_TOP = 72;
 
@@ -1003,6 +1006,28 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   );
 
   const [pipIsFullscreen, setPipIsFullscreen] = useState(false);
+  // [Gitea #323] Minimised PiP: a small draggable bar (room name + expand)
+  // instead of the video. Remembered; phones start minimised.
+  const [pipMinimized, setPipMinimized] = useState<boolean>(() => {
+    try {
+      const v = localStorage.getItem('pip-minimized');
+      if (v !== null) return v === '1';
+    } catch {
+      /* storage unavailable */
+    }
+    return window.innerWidth < 600;
+  });
+  const pipFullSizeRef = React.useRef({ width: 280, height: 158 });
+  const togglePipMinimized = useCallback(() => {
+    setPipMinimized((m) => {
+      try {
+        localStorage.setItem('pip-minimized', m ? '0' : '1');
+      } catch {
+        /* storage unavailable */
+      }
+      return !m;
+    });
+  }, []);
   useEffect(() => {
     const onFsChange = () => setPipIsFullscreen(!!document.fullscreenElement);
     document.addEventListener('fullscreenchange', onFsChange);
@@ -1103,6 +1128,26 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     }
   }, [pipMode, callVisible]);
 
+  // [Gitea #323] Apply the minimised / full PiP size (after the entry effect
+  // below has positioned and sized it). Keeps the bar on screen.
+  React.useEffect(() => {
+    const el = callEmbedRef.current;
+    if (!el || !pipMode) return;
+    if (pipMinimized) {
+      if (el.offsetHeight > PIP_MINI_H) {
+        pipFullSizeRef.current = { width: el.offsetWidth, height: el.offsetHeight };
+      }
+      el.style.width = `${PIP_MINI_W}px`;
+      el.style.height = `${PIP_MINI_H}px`;
+    } else {
+      el.style.width = `${pipFullSizeRef.current.width}px`;
+      el.style.height = `${pipFullSizeRef.current.height}px`;
+    }
+    const rect = el.getBoundingClientRect();
+    el.style.left = `${Math.max(0, Math.min(rect.left, window.innerWidth - el.offsetWidth))}px`;
+    el.style.top = `${Math.max(0, Math.min(rect.top, window.innerHeight - el.offsetHeight))}px`;
+  }, [pipMode, pipMinimized, callEmbedRef]);
+
   React.useEffect(() => {
     if (!pipMode) return;
     const onPipWindowResize = (): void => {
@@ -1421,19 +1466,50 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 position: 'absolute',
                 inset: 0,
                 zIndex: 1,
-                background: 'transparent',
+                // Minimised: cover the frame so only the bar shows.
+                background: pipMinimized ? color.Surface.Container : 'transparent',
                 cursor: 'grab',
                 // [Gitea #43] The call's "Share your screen?" prompt is drawn
                 // inside the frame: let the click reach its Share button.
                 pointerEvents: pipPromptOpen ? 'none' : undefined,
                 display: 'flex',
-                alignItems: 'flex-start',
                 justifyContent: 'flex-end',
+                alignItems: pipMinimized ? 'center' : 'flex-start',
                 padding: '6px',
               }}
             >
-              <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
-                {document.fullscreenEnabled && (
+              <div
+                style={{
+                  display: 'flex',
+                  gap: config.space.S100,
+                  alignItems: 'center',
+                  ...(pipMinimized ? { width: '100%' } : {}),
+                }}
+              >
+                {/* Leftmost: the top-right corner is a resize handle. */}
+                <IconButton
+                  type="button"
+                  size="300"
+                  radii="300"
+                  variant="Surface"
+                  fill="None"
+                  aria-label={pipMinimized ? 'Expand call' : 'Minimise call'}
+                  aria-pressed={pipMinimized}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    togglePipMinimized();
+                  }}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onTouchStart={(e) => e.stopPropagation()}
+                  style={{
+                    background: 'rgba(0,0,0,0.65)',
+                    backdropFilter: 'blur(4px)',
+                    color: '#fff',
+                  }}
+                >
+                  <Icon size="100" src={pipMinimized ? Icons.ChevronTop : Icons.Minus} />
+                </IconButton>
+                {!pipMinimized && document.fullscreenEnabled && (
                   <IconButton
                     type="button"
                     size="300"
@@ -1465,14 +1541,23 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                     fontSize: '11px',
                     fontWeight: 600,
                     pointerEvents: 'none',
+                    ...(pipMinimized
+                      ? {
+                          flexGrow: 1,
+                          minWidth: 0,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }
+                      : {}),
                   }}
                 >
-                  ↗ Return to call
+                  {pipMinimized ? `↗ ${callEmbed.room.name ?? 'Call'}` : '↗ Return to call'}
                 </div>
               </div>
             </div>
-            <PipMuteOverlay callEmbed={callEmbed} />
-            {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => {
+            {!pipMinimized && <PipMuteOverlay callEmbed={callEmbed} />}
+            {(pipMinimized ? [] : (['se', 'sw', 'ne', 'nw'] as Corner[])).map((corner) => {
               const s = corner.includes('s');
               const e2 = corner.includes('e');
               const dots = [

src/app/features/call-status/AudioOutputButton.tsx

@@ -16,7 +16,6 @@ import {
   toRem,
 } from 'folds';
 import { CallEmbed } from '../../plugins/call';
-import { AUDIO_OUTPUT_STATE } from '../../plugins/call/CallControl';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { stopPropagation } from '../../utils/keyboard';
 
@@ -40,21 +39,6 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
   const [devices, setDevices] = useState<OutputDevice[]>([]);
   const [selected, setSelected] = useState<string | undefined>(embed.control.audioOutputId);
 
-  // [Gitea #310] Prefer the fork's list: its ids are the ones valid inside
-  // the call iframe. Older forks don't report one; fall back to our own.
-  const [forkDevices, setForkDevices] = useState(embed.control.audioOutputs);
-  useEffect(() => {
-    const onState = () => {
-      setForkDevices(embed.control.audioOutputs);
-      setSelected(embed.control.audioOutputId);
-    };
-    onState();
-    embed.control.on(AUDIO_OUTPUT_STATE, onState);
-    return () => {
-      embed.control.off(AUDIO_OUTPUT_STATE, onState);
-    };
-  }, [embed]);
-
   const refresh = useCallback(async () => {
     try {
       const all = await navigator.mediaDevices.enumerateDevices();
@@ -69,13 +53,11 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
   }, []);
 
   useEffect(() => {
-    if (!anchor || forkDevices) return undefined;
+    if (!anchor) return undefined;
     refresh();
     navigator.mediaDevices.addEventListener('devicechange', refresh);
     return () => navigator.mediaDevices.removeEventListener('devicechange', refresh);
-  }, [anchor, refresh, forkDevices]);
-
-  const shown = forkDevices ?? devices;
+  }, [anchor, refresh]);
 
   const choose = (id: string) => {
     embed.control.setAudioOutput(id);
@@ -108,14 +90,13 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
             aria-label="Audio output"
           >
             <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-              {shown.length === 0 && (
+              {devices.length === 0 && (
                 <Text size="T200" priority="300" style={{ padding: config.space.S200 }}>
                   No audio outputs found.
                 </Text>
               )}
-              {shown.map((d) => {
-                const isSelected =
-                  selected !== undefined ? d.id === selected : d.id === 'default' || d.id === '';
+              {devices.map((d) => {
+                const isSelected = selected ? d.id === selected : d.id === 'default';
                 return (
                   <MenuItem
                     key={d.id}

src/app/plugins/call/CallControl.ts

@@ -54,27 +54,6 @@ export function parseForkHotkeyReport(data: unknown): ForkHotkeyReport | null {
   };
 }
 
-export type AudioOutputOption = { id: string; label: string };
-export const AUDIO_OUTPUT_STATE = 'audio_output_state';
-
-/** Pure: parse the fork's `io.lotus.audio_output_state` (#310). */
-export function parseAudioOutputState(
-  data: unknown,
-): { deviceId?: string; available?: AudioOutputOption[] } | undefined {
-  if (typeof data !== 'object' || data === null) return undefined;
-  const { deviceId, available } = data as { deviceId?: unknown; available?: unknown };
-  const list = Array.isArray(available)
-    ? available.filter(
-        (o): o is AudioOutputOption =>
-          typeof o === 'object' &&
-          o !== null &&
-          typeof (o as AudioOutputOption).id === 'string' &&
-          typeof (o as AudioOutputOption).label === 'string',
-      )
-    : undefined;
-  return { deviceId: typeof deviceId === 'string' ? deviceId : undefined, available: list };
-}
-
 export class CallControl extends EventEmitter implements CallControlState {
   private state: CallControlState;
 
@@ -238,25 +217,6 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.sendAudioOutput(deviceId);
   }
 
-  // [Gitea #310] deviceIds are hashed per frame/origin, so ids from the
-  // host's own enumerateDevices() mean nothing inside the call iframe. The
-  // fork reports its outputs (ids valid in the frame) and its effective
-  // selection; the call bar's menu uses those when present.
-  private _audioOutputs: AudioOutputOption[] | undefined;
-
-  public get audioOutputs(): AudioOutputOption[] | undefined {
-    return this._audioOutputs;
-  }
-
-  /** The fork's `io.lotus.audio_output_state` report. */
-  public onAudioOutputState(data: unknown) {
-    const report = parseAudioOutputState(data);
-    if (!report) return;
-    this._audioOutputs = report.available;
-    if (report.deviceId !== undefined) this._audioOutputId = report.deviceId;
-    this.emit(AUDIO_OUTPUT_STATE);
-  }
-
   private sendAudioOutput(deviceId: string): void {
     if (!this.joined) return;
     this.call.transport.send('io.lotus.set_audio_output', { deviceId }).catch(() => undefined);

src/app/plugins/call/CallEmbed.ts

@@ -453,12 +453,6 @@ export class CallEmbed {
         this.control.onControlsState((evt.detail as { data?: unknown } | undefined)?.data);
       }),
     );
-    // [Gitea #310] The fork's own output list + selection (frame-valid ids).
-    this.disposables.push(
-      this.listenAction('io.lotus.audio_output_state', (evt) => {
-        this.control.onAudioOutputState((evt.detail as { data?: unknown } | undefined)?.data);
-      }),
-    );
     // [Gitea #43] PTT / deafen keys pressed while focus is inside the frame.
     this.disposables.push(
       this.listenAction('io.lotus.hotkey', (evt) => {

src/app/plugins/call/audioOutputState.test.ts

@@ -1,24 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { parseAudioOutputState } from './CallControl';
-
-test('parseAudioOutputState: keeps valid options, tolerates garbage (#310)', () => {
-  assert.deepEqual(
-    parseAudioOutputState({
-      deviceId: 'f2',
-      available: [{ id: '', label: 'Default' }, { id: 'f2', label: 'Headset' }, { id: 3 }, null],
-    }),
-    {
-      deviceId: 'f2',
-      available: [
-        { id: '', label: 'Default' },
-        { id: 'f2', label: 'Headset' },
-      ],
-    },
-  );
-  assert.deepEqual(parseAudioOutputState({ deviceId: null }), {
-    deviceId: undefined,
-    available: undefined,
-  });
-  assert.equal(parseAudioOutputState('x'), undefined);
-});