cinny/src/app/features/call-status/CallControl.tsx

import {
  Box,
  Button,
  Chip,
  color,
  config,
  Icon,
  IconButton,
  Icons,
  Spinner,
  Text,
  Tooltip,
  TooltipProvider,
} from 'folds';
import React, { useCallback, useEffect, useState } from 'react';
import { useSetAtom } from 'jotai';
import { StatusDivider } from './components';
import { CallEmbed, useCallControlState } from '../../plugins/call';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { callEmbedAtom } from '../../state/callEmbed';
import { MobileTouchTarget } from '../../styles/mobile.css';
import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';

type MicrophoneButtonProps = {
  enabled: boolean;
  onToggle: () => Promise<unknown>;
  disabled?: boolean;
};
function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
  const [micState, toggleMic] = useAsyncCallback(onToggle);
  const loading = micState.status === AsyncStatus.Loading;

  return (
    <TooltipProvider
      position="Top"
      tooltip={
        <Tooltip>
          <Text size="T200">{enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}</Text>
        </Tooltip>
      }
    >
      {(anchorRef) => (
        <IconButton
          ref={anchorRef}
          variant={enabled ? 'Surface' : 'Warning'}
          fill="Soft"
          radii="300"
          size="300"
          className={MobileTouchTarget}
          onClick={toggleMic}
          outlined
          disabled={disabled || loading}
          aria-label={enabled ? 'Turn off microphone' : 'Turn on microphone'}
          aria-pressed={enabled}
        >
          <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
        </IconButton>
      )}
    </TooltipProvider>
  );
}

type SoundButtonProps = {
  enabled: boolean;
  onToggle: () => void;
  disabled?: boolean;
};
function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
  return (
    <TooltipProvider
      position="Top"
      tooltip={
        <Tooltip>
          <Text size="T200">{enabled ? 'Turn Off Sound' : 'Turn On Sound'}</Text>
        </Tooltip>
      }
    >
      {(anchorRef) => (
        <IconButton
          ref={anchorRef}
          variant={enabled ? 'Surface' : 'Warning'}
          fill="Soft"
          radii="300"
          size="300"
          className={MobileTouchTarget}
          onClick={() => onToggle()}
          aria-label={enabled ? 'Deafen' : 'Undeafen'}
          aria-pressed={enabled}
          outlined
          disabled={disabled}
        >
          <Icon
            size="100"
            src={enabled ? Icons.Headphone : Icons.HeadphoneMute}
            filled={!enabled}
          />
        </IconButton>
      )}
    </TooltipProvider>
  );
}

type VideoButtonProps = {
  enabled: boolean;
  onToggle: () => Promise<unknown>;
  disabled?: boolean;
};
function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
  const [videoState, toggleVideo] = useAsyncCallback(onToggle);
  const loading = videoState.status === AsyncStatus.Loading;

  return (
    <TooltipProvider
      position="Top"
      tooltip={
        <Tooltip>
          <Text size="T200">{enabled ? 'Stop Camera' : 'Start Camera'}</Text>
        </Tooltip>
      }
    >
      {(anchorRef) => (
        <IconButton
          ref={anchorRef}
          variant={enabled ? 'Success' : 'Surface'}
          fill="Soft"
          radii="300"
          size="300"
          className={MobileTouchTarget}
          onClick={toggleVideo}
          aria-label={enabled ? 'Stop Video' : 'Start Video'}
          aria-pressed={enabled}
          outlined
          disabled={disabled || loading}
        >
          <Icon
            size="100"
            src={enabled ? Icons.VideoCamera : Icons.VideoCameraMute}
            filled={enabled}
          />
        </IconButton>
      )}
    </TooltipProvider>
  );
}

type ScreenShareButtonProps = {
  enabled: boolean;
  onToggle: () => void;
  disabled?: boolean;
};
function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonProps) {
  return (
    <TooltipProvider
      position="Top"
      tooltip={
        <Tooltip>
          <Text size="T200">{enabled ? 'Stop Screenshare' : 'Start Screenshare'}</Text>
        </Tooltip>
      }
    >
      {(anchorRef) => (
        <IconButton
          ref={anchorRef}
          variant={enabled ? 'Success' : 'Surface'}
          fill="Soft"
          radii="300"
          size="300"
          className={MobileTouchTarget}
          onClick={onToggle}
          aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
          aria-pressed={enabled}
          outlined
          disabled={disabled}
        >
          <Icon size="100" src={Icons.ScreenShare} filled={enabled} />
        </IconButton>
      )}
    </TooltipProvider>
  );
}

export function CallControl({
  callEmbed,
  compact,
  callJoined,
}: {
  callEmbed: CallEmbed;
  compact: boolean;
  callJoined: boolean;
}) {
  const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
  const setCallEmbed = useSetAtom(callEmbedAtom);

  // [Gitea #26] Apply the same room-level camera/screenshare policy as the
  // in-room CallControls bar, so the status bar can't be used to bypass it.
  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 = 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(),
    [callEmbed],
  );
  const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);

  const [hangupState, hangup] = useAsyncCallback(
    useCallback(() => callEmbed.hangup(), [callEmbed]),
  );
  const exiting =
    hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;

  const handleHangup = () => {
    if (!callJoined) {
      setCallEmbed(undefined);
      return;
    }
    hangup();
  };

  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>
        </>
      )}
      <Box alignItems="Inherit" gap="200">
        <MicrophoneButton
          enabled={microphone}
          onToggle={handleMicrophoneToggle}
          disabled={!callJoined}
        />
        <SoundButton
          enabled={sound}
          onToggle={() => callEmbed.control.toggleSound()}
          disabled={!callJoined}
        />
        {!compact && (showCamera || showScreenshare) && <StatusDivider />}
        {showCamera && (
          <VideoButton enabled={video} onToggle={handleVideoToggle} disabled={!callJoined} />
        )}
        {!compact && showScreenshare && (
          <ScreenShareButton
            enabled={screenshare}
            onToggle={() =>
              screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
            }
            disabled={!callJoined}
          />
        )}
      </Box>
      <StatusDivider />
      <Chip
        variant="Critical"
        radii="Pill"
        fill="Soft"
        before={
          exiting ? (
            <Spinner variant="Critical" fill="Soft" size="50" />
          ) : (
            <Icon size="50" src={Icons.PhoneDown} filled />
          )
        }
        disabled={exiting}
        outlined
        onClick={handleHangup}
      >
        {!compact && (
          <Text as="span" size="L400">
            End
          </Text>
        )}
      </Chip>
    </Box>
  );
}