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 (
<>
Share your screen?
Your screen will be visible to all participants in this call.
);
}