Improvements to sound on/off in story viewer

This commit is contained in:
Josh Perez 2022-07-29 15:27:02 -04:00 committed by GitHub
parent f1c9db543e
commit 58aaf1d0e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 71 additions and 23 deletions

View file

@ -37,6 +37,7 @@ import { ToastType } from '../state/ducks/toast';
import { getAvatarColor } from '../types/Colors';
import { getStoryBackground } from '../util/getStoryBackground';
import { getStoryDuration } from '../util/getStoryDuration';
import { isVideoAttachment } from '../types/Attachment';
import { graphemeAwareSlice } from '../util/graphemeAwareSlice';
import { useEscapeHandling } from '../hooks/useEscapeHandling';
@ -378,6 +379,24 @@ export const StoryViewer = ({
const hasPrevNextArrows = storyViewMode !== StoryViewModeType.Single;
const canMuteStory = isVideoAttachment(attachment);
const isStoryMuted = hasAllStoriesMuted || !canMuteStory;
let muteClassName: string;
let muteAriaLabel: string;
if (canMuteStory) {
muteAriaLabel = hasAllStoriesMuted
? i18n('StoryViewer__unmute')
: i18n('StoryViewer__mute');
muteClassName = hasAllStoriesMuted
? 'StoryViewer__unmute'
: 'StoryViewer__mute';
} else {
muteAriaLabel = i18n('Stories__toast--hasNoSound');
muteClassName = 'StoryViewer__soundless';
}
const contextMenuOptions: ReadonlyArray<ContextMenuOptionType<unknown>> =
sendState
? [
@ -454,7 +473,7 @@ export const StoryViewer = ({
attachment={attachment}
i18n={i18n}
isPaused={shouldPauseViewing}
isMuted={hasAllStoriesMuted}
isMuted={isStoryMuted}
label={i18n('lightboxImageAlt')}
moduleClassName="StoryViewer__story"
queueStoryDownload={queueStoryDownload}
@ -565,17 +584,13 @@ export const StoryViewer = ({
type="button"
/>
<button
aria-label={
hasAllStoriesMuted
? i18n('StoryViewer__unmute')
: i18n('StoryViewer__mute')
aria-label={muteAriaLabel}
className={muteClassName}
onClick={
canMuteStory
? toggleHasAllStoriesMuted
: () => showToast(ToastType.StoryMuted)
}
className={
hasAllStoriesMuted
? 'StoryViewer__unmute'
: 'StoryViewer__mute'
}
onClick={toggleHasAllStoriesMuted}
type="button"
/>
<ContextMenu