refactor(calls): one ScreenshareConfirm and one room-policy hook for both call bars

Fixes #101 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
2026-09-13 00:56:22 -04:00
parent 2ca59be9fc
commit 31b3cf63c6
3 changed files with 123 additions and 163 deletions
@@ -1,18 +1,5 @@
-import {
-  Box,
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-} from 'folds';
-import React, { useCallback, useEffect, useState } from 'react';
+import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
+import React, { useCallback, useState } from 'react';
 import { useSetAtom } from 'jotai';
 import { StatusDivider } from './components';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
@@ -20,6 +7,7 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
+import { ScreenshareConfirm } from '../call/ScreenshareConfirm';

 type MicrophoneButtonProps = {
  enabled: boolean;
@@ -199,14 +187,6 @@ export function CallControl({
  const showCamera = allowCamera || video;
  const showScreenshare = allowScreenshare || screenshare;
  const [shareConfirm, setShareConfirm] = useState(false);
-  useEffect(() => {
-    if (!shareConfirm) return undefined;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setShareConfirm(false);
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [shareConfirm]);

  const handleMicrophoneToggle = useCallback(
    () => callEmbed.control.toggleMicrophone(),
@@ -230,64 +210,15 @@ export function CallControl({

  return (
    <Box shrink="No" alignItems="Center" gap="300" style={{ position: 'relative' }}>
-      {shareConfirm && (
-        <>
-          <div
-            style={{ position: 'fixed', inset: 0, zIndex: 99 }}
-            onClick={() => setShareConfirm(false)}
-            aria-hidden="true"
-          />
-          <Box
-            style={{
-              position: 'absolute',
-              bottom: '110%',
-              left: 0,
-              background: color.Surface.Container,
-              border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-              borderRadius: '0.75rem',
-              padding: '1rem 1.25rem',
-              zIndex: 100,
-              minWidth: '260px',
-              maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
-              boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.75rem',
-            }}
-          >
-            <Text size="T300" style={{ fontWeight: 600 }}>
-              Share your screen?
-            </Text>
-            <Text size="T200" style={{ opacity: 0.75 }}>
-              Your screen will be visible to all participants in this call.
-            </Text>
-            <Box gap="200">
-              <Button
-                size="300"
-                variant="Success"
-                fill="Solid"
-                radii="300"
-                onClick={() => {
-                  callEmbed.control.toggleScreenshare();
-                  setShareConfirm(false);
-                }}
-              >
-                <Text size="B300">Share</Text>
-              </Button>
-              <Button
-                size="300"
-                variant="Secondary"
-                fill="Soft"
-                radii="300"
-                outlined
-                onClick={() => setShareConfirm(false)}
-              >
-                <Text size="B300">Cancel</Text>
-              </Button>
-            </Box>
-          </Box>
-        </>
-      )}
+      <ScreenshareConfirm
+        open={shareConfirm}
+        align="Start"
+        onConfirm={() => {
+          callEmbed.control.toggleScreenshare();
+          setShareConfirm(false);
+        }}
+        onCancel={() => setShareConfirm(false)}
+      />
      <Box alignItems="Inherit" gap="200">
        <MicrophoneButton
          enabled={microphone}
@@ -1,10 +1,9 @@
-import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react';
+import React, { MouseEventHandler, useCallback, useRef, useState, useEffect } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
  Box,
  Button,
  Chip,
-  color,
  config,
  Icon,
  IconButton,
@@ -41,9 +40,8 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useCallEmbedRef } from '../../hooks/useCallEmbed';
 import { pttActiveAtom } from '../../hooks/useCallHotkeys';
 import { CallSoundboard } from './CallSoundboard';
-import { useStateEvent } from '../../hooks/useStateEvent';
-import { StateEvent } from '../../../types/matrix/room';
-import { RoomQualityContent } from '../../utils/callQuality';
+import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
+import { ScreenshareConfirm } from './ScreenshareConfirm';

 type CallControlsProps = {
  callEmbed: CallEmbed;
@@ -90,14 +88,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {

  const [cords, setCords] = useState<RectCords>();
  const [shareConfirm, setShareConfirm] = useState(false);
-  useEffect(() => {
-    if (!shareConfirm) return;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setShareConfirm(false);
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [shareConfirm]);
  const [pttMode] = useSetting(settingsAtom, 'pttMode');
  const [pttKey] = useSetting(settingsAtom, 'pttKey');
  const [soundboardEnabled] = useSetting(settingsAtom, 'soundboardEnabled');
@@ -107,16 +97,15 @@ export function CallControls({ callEmbed }: CallControlsProps) {
  // visual PTT chip remains here.
  const pttActive = useAtomValue(pttActiveAtom);

-  // [P5-31] Hard room publish policy — hide controls the server will refuse so
-  // users don't click dead buttons. Absent/true = allowed.
-  const roomQualityEvent = useStateEvent(callEmbed.room, StateEvent.LotusRoomQuality);
-  const roomQuality = roomQualityEvent?.getContent<RoomQualityContent>();
-  const cameraAllowed = roomQuality?.allow_camera !== false;
-  const screenshareAllowed = roomQuality?.allow_screenshare !== false;
+  // [P5-31 / Gitea #101] Hard room publish policy — hide controls the server
+  // will refuse so users don't click dead buttons. Absent/true = allowed.
+  // Shared with the app-wide CallStatus bar's CallControl via useRoomCallPolicy
+  // so both surfaces apply the same gating.
+  const { allowCamera, allowScreenshare } = useRoomCallPolicy(callEmbed.room);
  // Keep a forbidden control visible while its track is still live (so the user
  // can stop it); otherwise hide it entirely.
-  const showCamera = cameraAllowed || video;
-  const showScreenshare = screenshareAllowed || screenshare;
+  const showCamera = allowCamera || video;
+  const showScreenshare = allowScreenshare || screenshare;
  const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
    setCords(evt.currentTarget.getBoundingClientRect());
@@ -191,67 +180,15 @@ export function CallControls({ callEmbed }: CallControlsProps) {
          </Text>
        </Chip>
      )}
-      {shareConfirm && (
-        <>
-          <div
-            style={{ position: 'fixed', inset: 0, zIndex: 99 }}
-            onClick={() => setShareConfirm(false)}
-            aria-hidden="true"
-          />
-          <Box
-            style={{
-              position: 'absolute',
-              bottom: '110%',
-              left: '50%',
-              transform: 'translateX(-50%)',
-              background: color.Surface.Container,
-              border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-              borderRadius: '0.75rem',
-              padding: '1rem 1.25rem',
-              zIndex: 100,
-              minWidth: '260px',
-              // Don't run past the screen edges on a narrow phone (centered via
-              // translateX(-50%)); clamp to the viewport minus a small margin.
-              maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
-              boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.75rem',
-            }}
-          >
-            <Text size="T300" style={{ fontWeight: 600 }}>
-              Share your screen?
-            </Text>
-            <Text size="T200" style={{ opacity: 0.75 }}>
-              Your screen will be visible to all participants in this call.
-            </Text>
-            <Box gap="200">
-              <Button
-                size="300"
-                variant="Success"
-                fill="Solid"
-                radii="300"
-                onClick={() => {
-                  callEmbed.control.toggleScreenshare();
-                  setShareConfirm(false);
-                }}
-              >
-                <Text size="B300">Share</Text>
-              </Button>
-              <Button
-                size="300"
-                variant="Secondary"
-                fill="Soft"
-                radii="300"
-                outlined
-                onClick={() => setShareConfirm(false)}
-              >
-                <Text size="B300">Cancel</Text>
-              </Button>
-            </Box>
-          </Box>
-        </>
-      )}
+      <ScreenshareConfirm
+        open={shareConfirm}
+        align="Center"
+        onConfirm={() => {
+          callEmbed.control.toggleScreenshare();
+          setShareConfirm(false);
+        }}
+        onCancel={() => setShareConfirm(false)}
+      />
      <SequenceCard
        className={css.ControlCard}
        variant="SurfaceVariant"
@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { Box, Button, Text, color, config } from 'folds';
+
+export type ScreenshareConfirmProps = {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  /**
+   * Horizontal placement relative to the trigger button. `Center` (the
+   * in-call bar's centered layout) transforms to center itself over the
+   * anchor; `Start` (the app-wide status bar, anchored to its own left edge)
+   * hugs the anchor's left edge instead.
+   */
+  align?: 'Center' | 'Start';
+};
+
+/**
+ * [Gitea #101] Shared "Share your screen?" confirmation popover, used by both
+ * the in-call `CallControls` bar and the app-wide `CallStatus` bar's
+ * `CallControl`. Previously each bar carried its own near-identical copy;
+ * hoisted here so their behaviour (Escape / click-outside to close, confirm
+ * starts the share) can't drift apart.
+ */
+export function ScreenshareConfirm({
+  open,
+  onConfirm,
+  onCancel,
+  align = 'Center',
+}: ScreenshareConfirmProps) {
+  useEffect(() => {
+    if (!open) return undefined;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  return (
+    <>
+      <div
+        style={{ position: 'fixed', inset: 0, zIndex: 99 }}
+        onClick={onCancel}
+        aria-hidden="true"
+      />
+      <Box
+        style={{
+          position: 'absolute',
+          bottom: '110%',
+          ...(align === 'Center' ? { left: '50%', transform: 'translateX(-50%)' } : { left: 0 }),
+          background: color.Surface.Container,
+          border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+          borderRadius: '0.75rem',
+          padding: '1rem 1.25rem',
+          zIndex: 100,
+          minWidth: '260px',
+          // Don't run past the screen edges on a narrow phone (centered via
+          // translateX(-50%)); clamp to the viewport minus a small margin.
+          maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.75rem',
+        }}
+      >
+        <Text size="T300" style={{ fontWeight: 600 }}>
+          Share your screen?
+        </Text>
+        <Text size="T200" style={{ opacity: 0.75 }}>
+          Your screen will be visible to all participants in this call.
+        </Text>
+        <Box gap="200">
+          <Button size="300" variant="Success" fill="Solid" radii="300" onClick={onConfirm}>
+            <Text size="B300">Share</Text>
+          </Button>
+          <Button
+            size="300"
+            variant="Secondary"
+            fill="Soft"
+            radii="300"
+            outlined
+            onClick={onCancel}
+          >
+            <Text size="B300">Cancel</Text>
+          </Button>
+        </Box>
+      </Box>
+    </>
+  );
+}