Disable animations for users that prefer reduced motion

This commit is contained in:
Robin Townsend 2022-10-31 11:46:17 -04:00
commit 7932d7a471
3 changed files with 58 additions and 2 deletions

View file

@ -60,6 +60,7 @@ import { useAudioOutputDevice } from "../video-grid/useAudioOutputDevice";
import { widget, ElementWidgetActions } from "../widget";
import { useJoinRule } from "./useJoinRule";
import { useUrlParams } from "../UrlParams";
import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
// There is currently a bug in Safari our our code with cloning and sending MediaStreams
@ -265,6 +266,8 @@ export function InCallView({
[]
);
const prefersReducedMotion = usePrefersReducedMotion();
const renderContent = (): JSX.Element => {
if (items.length === 0) {
return (
@ -292,7 +295,11 @@ export function InCallView({
}
return (
<VideoGrid items={items} layout={layout} disableAnimations={isSafari}>
<VideoGrid
items={items}
layout={layout}
disableAnimations={prefersReducedMotion || isSafari}
>
{({
item,
...rest

View file

@ -22,6 +22,7 @@ import styles from "./PTTButton.module.css";
import { ReactComponent as MicIcon } from "../icons/Mic.svg";
import { useEventTarget } from "../useEvents";
import { Avatar } from "../Avatar";
import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
interface Props {
enabled: boolean;
@ -159,8 +160,14 @@ export const PTTButton: React.FC<Props> = ({
// TODO: We will need to disable this for a global PTT hotkey to work
useEventTarget(window, "blur", unhold);
const prefersReducedMotion = usePrefersReducedMotion();
const { shadow } = useSpring({
shadow: (Math.max(activeSpeakerVolume, -70) + 70) * 0.6,
immediate: prefersReducedMotion,
shadow: prefersReducedMotion
? activeSpeakerUserId
? 17
: 0
: (Math.max(activeSpeakerVolume, -70) + 70) * 0.6,
config: {
clamp: true,
tension: 300,