Improvements to sound on/off in story viewer

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',

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

ts/components/ToastManager.tsx

@@ -55,6 +55,14 @@ export const ToastManager = ({
     );
   }
 
+  if (toastType === ToastType.StoryMuted) {
+    return (
+      <Toast onClose={hideToast} timeout={3 * SECOND}>
+        {i18n('Stories__toast--hasNoSound')}
+      </Toast>
+    );
+  }
+
   strictAssert(
     toastType === undefined,
     `Unhandled toast of type: ${toastType}`

ts/state/ducks/toast.ts

@@ -6,6 +6,7 @@ import { useBoundActions } from '../../hooks/useBoundActions';
 export enum ToastType {
   Error = 'Error',
   MessageBodyTooLong = 'MessageBodyTooLong',
+  StoryMuted = 'StoryMuted',
   StoryReact = 'StoryReact',
   StoryReply = 'StoryReply',
 }