mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Adds keyboard support to the media quality selector

Browse source
This commit is contained in:
Josh Perez 2021-07-07 13:05:03 -04:00 • committed by GitHub
parent 3827f05db9
commit a73d7b42cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

39
ts/components/MediaQualitySelector.tsx
View file

@ -21,6 +21,9 @@ export const MediaQualitySelector = ({
}: PropsType): JSX.Element => {
const [menuShowing, setMenuShowing] = useState(false);
const [popperRoot, setPopperRoot] = useState<HTMLElement | null>(null);
const [focusedOption, setFocusedOption] = useState<0 | 1 | undefined>(
undefined
);
// We use regular MouseEvent below, and this one uses React.MouseEvent
const handleClick = (ev: KeyboardEvent | React.MouseEvent) => {
@ -29,8 +32,31 @@ export const MediaQualitySelector = ({
ev.preventDefault();
};
const handleKeyDown = (ev: KeyboardEvent) => {
if (!popperRoot) {
if (ev.key === 'Enter') {
setFocusedOption(isHighQuality ? 1 : 0);
}
return;
}
if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
setFocusedOption(oldFocusedOption => (oldFocusedOption === 1 ? 0 : 1));
ev.stopPropagation();
ev.preventDefault();
}
if (ev.key === 'Enter') {
onSelectQuality(Boolean(focusedOption));
setMenuShowing(false);
ev.stopPropagation();
ev.preventDefault();
}
};
const handleClose = useCallback(() => {
setMenuShowing(false);
setFocusedOption(undefined);
}, [setMenuShowing]);
useEffect(() => {
@ -69,6 +95,7 @@ export const MediaQualitySelector = ({
'MediaQualitySelector__button--active': menuShowing,
})}
onClick={handleClick}
onKeyDown={handleKeyDown}
ref={ref}
type="button"
/>
@ -91,7 +118,11 @@ export const MediaQualitySelector = ({
aria-label={i18n(
'MediaQualitySelector--standard-quality-title'
)}
className="MediaQualitySelector__option"
className={classNames({
MediaQualitySelector__option: true,
'MediaQualitySelector__option--focused':
focusedOption === 0,
})}
type="button"
onClick={() => {
onSelectQuality(false);
@ -119,7 +150,11 @@ export const MediaQualitySelector = ({
aria-label={i18n(
'MediaQualitySelector--high-quality-title'
)}
className="MediaQualitySelector__option"
className={classNames({
MediaQualitySelector__option: true,
'MediaQualitySelector__option--focused':
focusedOption === 1,
})}
type="button"
onClick={() => {
onSelectQuality(true);