cinny/src/app/features/call/ImmersiveCallOverlay.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useSetAtom } from 'jotai';
import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
import { CallEmbed } from '../../plugins/call';
import { CallControls } from './CallControls';
import { callChatAtom } from '../../state/callEmbed';
import { CONTROLS_AUTOHIDE_MS, wantsBrowserFullscreen } from './landscapeCall';

const isStandalone = (): boolean =>
  window.matchMedia?.('(display-mode: standalone)').matches ||
  (navigator as { standalone?: boolean }).standalone === true;

/**
 * [Gitea #126] Full-screen call controls. Taps inside the call frame never
 * reach us, so while the controls are hidden a transparent layer covers the
 * call: the first tap shows them (and is otherwise swallowed, as in native
 * video apps); with them up the layer is gone, so the call stays usable. They
 * hide again after a few seconds without a touch. The first tap in an Android
 * browser tab also enters the browser's own full screen (hides the address
 * bar); it is left again when this unmounts (rotate back, hang up, exit).
 */
export function ImmersiveCallOverlay({
  callEmbed,
  onExit,
}: {
  callEmbed: CallEmbed;
  onExit: () => void;
}) {
  const [shown, setShown] = useState(false);
  const timer = useRef<number | undefined>(undefined);
  const enteredFullscreen = useRef(false);
  const setChat = useSetAtom(callChatAtom);

  const armHide = useCallback(() => {
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(() => setShown(false), CONTROLS_AUTOHIDE_MS);
  }, []);

  useEffect(
    () => () => {
      window.clearTimeout(timer.current);
      if (enteredFullscreen.current && document.fullscreenElement === document.documentElement) {
        document.exitFullscreen().catch(() => undefined);
      }
    },
    [],
  );

  const reveal = () => {
    if (
      wantsBrowserFullscreen({
        userAgent: navigator.userAgent,
        standalone: isStandalone(),
        fullscreenEnabled: !!document.fullscreenEnabled,
        alreadyFullscreen: !!document.fullscreenElement,
      })
    ) {
      document.documentElement
        .requestFullscreen({ navigationUI: 'hide' })
        .then(() => {
          enteredFullscreen.current = true;
        })
        .catch(() => undefined);
    }
    setShown(true);
    armHide();
  };

  if (!shown) {
    return (
      <div
        role="button"
        tabIndex={0}
        aria-label="Show call controls"
        onClick={reveal}
        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && reveal()}
        style={{ position: 'absolute', inset: 0, pointerEvents: 'auto' }}
      />
    );
  }

  return (
    <Box
      direction="Column"
      // Any touch on the controls keeps them up a little longer.
      onPointerDown={armHide}
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        pointerEvents: 'auto',
        paddingLeft: 'env(safe-area-inset-left)',
        paddingRight: 'env(safe-area-inset-right)',
        paddingBottom: 'env(safe-area-inset-bottom)',
        background: 'linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0))',
      }}
    >
      <Box
        justifyContent="End"
        gap="200"
        style={{ padding: `${config.space.S200} ${config.space.S300} 0` }}
      >
        <Button
          size="300"
          variant="Secondary"
          fill="Soft"
          radii="Pill"
          before={<Icon size="100" src={Icons.Message} />}
          onClick={() => setChat(true)}
        >
          <Text size="B300">Chat</Text>
        </Button>
        <Button
          size="300"
          variant="Secondary"
          fill="Soft"
          radii="Pill"
          before={<Icon size="100" src={Icons.Cross} />}
          onClick={onExit}
          style={{ minWidth: toRem(40) }}
        >
          <Text size="B300">Exit full screen</Text>
        </Button>
      </Box>
      <CallControls callEmbed={callEmbed} />
    </Box>
  );
}