From 58aaf1d0e78ded79d2d94a35c32de5d4e5879955 Mon Sep 17 00:00:00 2001 From: Josh Perez <60019601+josh-signal@users.noreply.github.com> Date: Fri, 29 Jul 2022 15:27:02 -0400 Subject: [PATCH] Improvements to sound on/off in story viewer --- _locales/en/messages.json | 4 +++ images/icons/v2/sound-none.svg | 1 + images/icons/v2/sound-off.svg | 3 ++ images/icons/v2/sound-on.svg | 1 + images/icons/v2/speaker-off-solid-20.svg | 1 - images/icons/v2/speaker-on-solid-20.svg | 1 - stylesheets/components/StoryViewer.scss | 25 ++++++++++------ ts/components/StoryViewer.stories.tsx | 12 +++++++- ts/components/StoryViewer.tsx | 37 +++++++++++++++++------- ts/components/ToastManager.tsx | 8 +++++ ts/state/ducks/toast.ts | 1 + 11 files changed, 71 insertions(+), 23 deletions(-) create mode 100644 images/icons/v2/sound-none.svg create mode 100644 images/icons/v2/sound-off.svg create mode 100644 images/icons/v2/sound-on.svg delete mode 100644 images/icons/v2/speaker-off-solid-20.svg delete mode 100644 images/icons/v2/speaker-on-solid-20.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 910da28f6..41db0e642 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -7213,6 +7213,10 @@ "message": "Sending reaction...", "description": "Toast message" }, + "Stories__toast--hasNoSound": { + "message": "This story has no sound", + "description": "Toast message" + }, "StoriesSettings__title": { "message": "Story settings", "description": "Title for the story settings modal" diff --git a/images/icons/v2/sound-none.svg b/images/icons/v2/sound-none.svg new file mode 100644 index 000000000..dffdf4bbc --- /dev/null +++ b/images/icons/v2/sound-none.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v2/sound-off.svg b/images/icons/v2/sound-off.svg new file mode 100644 index 000000000..e1fb487dc --- /dev/null +++ b/images/icons/v2/sound-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/v2/sound-on.svg b/images/icons/v2/sound-on.svg new file mode 100644 index 000000000..c72d50c26 --- /dev/null +++ b/images/icons/v2/sound-on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v2/speaker-off-solid-20.svg b/images/icons/v2/speaker-off-solid-20.svg deleted file mode 100644 index b97d7264c..000000000 --- a/images/icons/v2/speaker-off-solid-20.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/icons/v2/speaker-on-solid-20.svg b/images/icons/v2/speaker-on-solid-20.svg deleted file mode 100644 index 56f9b24cc..000000000 --- a/images/icons/v2/speaker-on-solid-20.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss index 0dab72690..8a090672c 100644 --- a/stylesheets/components/StoryViewer.scss +++ b/stylesheets/components/StoryViewer.scss @@ -175,10 +175,7 @@ height: 20px; margin: 0 24px; width: 20px; - @include color-svg( - '../images/icons/v2/speaker-on-solid-20.svg', - $color-white - ); + @include color-svg('../images/icons/v2/sound-on.svg', $color-white); @include keyboard-mode { &:focus { background-color: $color-white-alpha-80; @@ -213,12 +210,22 @@ &__unmute { @include button-reset; height: 20px; - margin: 0 18px; + margin: 0 24px; width: 20px; - @include color-svg( - '../images/icons/v2/speaker-off-solid-20.svg', - $color-white - ); + @include color-svg('../images/icons/v2/sound-off.svg', $color-white); + @include keyboard-mode { + &:focus { + background-color: $color-white-alpha-80; + } + } + } + + &__soundless { + @include button-reset; + height: 20px; + margin: 0 24px; + width: 20px; + @include color-svg('../images/icons/v2/sound-none.svg', $color-white); @include keyboard-mode { &:focus { background-color: $color-white-alpha-80; diff --git a/ts/components/StoryViewer.stories.tsx b/ts/components/StoryViewer.stories.tsx index 0d992ddf5..adf82ff14 100644 --- a/ts/components/StoryViewer.stories.tsx +++ b/ts/components/StoryViewer.stories.tsx @@ -8,6 +8,7 @@ import type { PropsType } from './StoryViewer'; import enMessages from '../../_locales/en/messages.json'; import { SendStatus } from '../messages/MessageSendState'; import { StoryViewer } from './StoryViewer'; +import { VIDEO_MP4 } from '../types/MIME'; import { fakeAttachment } from '../test-both/helpers/fakeAttachment'; import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation'; import { getFakeStoryView } from '../test-both/helpers/getFakeStory'; @@ -49,6 +50,7 @@ export default { }, queueStoryDownload: { action: true }, renderEmojiPicker: { action: true }, + showToast: { action: true }, skinTone: { defaultValue: 0, }, @@ -92,7 +94,15 @@ export const MultiStory = Template.bind({}); MultiStory.args = { currentIndex: 2, numStories: 7, - story: getFakeStoryView('/fixtures/snow.jpg'), + story: { + ...getFakeStoryView(), + attachment: fakeAttachment({ + contentType: VIDEO_MP4, + fileName: 'pixabay-Soap-Bubble-7141.mp4', + url: '/fixtures/kitten-4-112-112.jpg', + screenshotPath: '/fixtures/kitten-4-112-112.jpg', + }), + }, }; MultiStory.story = { name: 'Multi story', diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx index 1df3967ff..0459324e8 100644 --- a/ts/components/StoryViewer.tsx +++ b/ts/components/StoryViewer.tsx @@ -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> = 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" />