diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css index eb86b316b..8c856a6a1 100644 --- a/src/components/MediaMuteAndSwitchButton.module.css +++ b/src/components/MediaMuteAndSwitchButton.module.css @@ -370,7 +370,10 @@ Please see LICENSE in the repository root for full details. min-inline-size: 0; } -/* Sits under the tiles, inside the same margin they keep from the frame. */ +/* Sits under the tiles, inside the same margin they keep from the frame, and + with the same distance above it as below: the menu's own bottom padding + supplies the lower half, so only the upper half is set here. Without it the + message sits flush against the tiles with a gap twice its size underneath. */ .effectError { - padding: 0 var(--cpd-space-4x) var(--cpd-space-4x); + padding: var(--cpd-space-4x) var(--cpd-space-4x) 0; } diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx index 45cffe8f9..fc78900b6 100644 --- a/src/components/MediaMuteAndSwitchButton.tsx +++ b/src/components/MediaMuteAndSwitchButton.tsx @@ -187,6 +187,12 @@ export const MediaMuteAndSwitchButton: FC = ({ // Held open across the file picker: a native dialog takes the focus, and the // menu would take that as a click elsewhere and close behind it. const [choosingFile, setChoosingFile] = useState(false); + + // The refusal belongs to the attempt that caused it. It stays while the menu + // is open, can be dismissed, and is gone by the time the menu is opened + // again: a message about a file chosen minutes ago explains nothing. + const [refusalSeen, setRefusalSeen] = useState(false); + useEffect(() => setRefusalSeen(false), [backgroundEffectError]); const chooseFile = useRef(null); useEffect(() => { const input = chooseFile.current; @@ -657,6 +663,8 @@ export const MediaMuteAndSwitchButton: FC = ({ onOpenChange={(open) => { // Ignore the close the file picker provokes by taking the focus. if (!open && choosingFile) return; + // A refusal does not outlive the menu it was shown in. + if (!open) setRefusalSeen(true); setMenuOpen(open); }} side="top" @@ -767,11 +775,15 @@ export const MediaMuteAndSwitchButton: FC = ({
{effectTiles()}
- {backgroundEffectError !== undefined && ( + {backgroundEffectError !== undefined && !refusalSeen && ( // Beside the grid rather than over the call: the user is // looking here, having just chosen the file this is about.
- + setRefusalSeen(true)} + />
)}