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"
/>