pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 21:15:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): show a still ban image under reduced motion or data saver (#1909)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:43:47 +02:00
1 parent 97eb84fd46
commit 4ee1b2294a
1 file changed
+15 -1
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/moderation/components/modals/BanMemberModal.tsx
+15 -1
View File
@@ -1,7 +1,9 @@
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
import Accessibility from '@app/features/accessibility/state/Accessibility';
import * as Modal from '@app/features/app/components/dialogs/Modal'; import * as Modal from '@app/features/app/components/dialogs/Modal';
import {useAnimatedMediaVideoPlayback} from '@app/features/app/hooks/useAnimatedMediaPlayback'; import {useAnimatedMediaVideoPlayback} from '@app/features/app/hooks/useAnimatedMediaPlayback';
import {useSaveData} from '@app/features/app/hooks/useSaveData';
import * as GuildCommands from '@app/features/guild/commands/GuildCommands'; import * as GuildCommands from '@app/features/guild/commands/GuildCommands';
import { import {
CUSTOM_ELLIPSIS_DESCRIPTOR, CUSTOM_ELLIPSIS_DESCRIPTOR,
@@ -124,7 +126,9 @@ interface ComboboxOption {
export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = observer(({guildId, targetUser}) => { export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = observer(({guildId, targetUser}) => {
const {i18n} = useLingui(); const {i18n} = useLingui();
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const videoPlaybackAllowed = useAnimatedMediaVideoPlayback(videoRef); const dataSaverOn = useSaveData();
const motionArtworkAllowed = !Accessibility.useReducedMotion && !dataSaverOn;
const videoPlaybackAllowed = useAnimatedMediaVideoPlayback(videoRef, {enabled: motionArtworkAllowed});
const [reason, setReason] = useState(''); const [reason, setReason] = useState('');
const [deleteMessageDays, setDeleteMessageDays] = useState<number>(1); const [deleteMessageDays, setDeleteMessageDays] = useState<number>(1);
const [banDuration, setBanDuration] = useState<number>(0); const [banDuration, setBanDuration] = useState<number>(0);
@@ -175,6 +179,7 @@ export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = obs
/> />
<Modal.Content data-flx="moderation.ban-member-modal.modal-content"> <Modal.Content data-flx="moderation.ban-member-modal.modal-content">
<div className={styles.content} data-flx="moderation.ban-member-modal.content"> <div className={styles.content} data-flx="moderation.ban-member-modal.content">
{motionArtworkAllowed ? (
<video <video
ref={videoRef} ref={videoRef}
autoPlay={videoPlaybackAllowed} autoPlay={videoPlaybackAllowed}
@@ -188,6 +193,15 @@ export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = obs
<source src={bannedWebm} type="video/webm" data-flx="moderation.ban-member-modal.source.video-webm" /> <source src={bannedWebm} type="video/webm" data-flx="moderation.ban-member-modal.source.video-webm" />
<source src={bannedMp4} type="video/mp4" data-flx="moderation.ban-member-modal.source.video-mp4" /> <source src={bannedMp4} type="video/mp4" data-flx="moderation.ban-member-modal.source.video-mp4" />
</video> </video>
) : (
<img
src={bannedPoster}
alt=""
aria-hidden={true}
className={styles.video}
data-flx="moderation.ban-member-modal.video-still"
/>
)}
<div data-flx="moderation.ban-member-modal.div"> <div data-flx="moderation.ban-member-modal.div">
<FormCombobox<number> <FormCombobox<number>
label={i18n._(BAN_DURATION_DESCRIPTOR)} label={i18n._(BAN_DURATION_DESCRIPTOR)}