Improvements to sound on/off in story viewer
This commit is contained in:
Josh Perez
GitHub
parent
f1c9db543e
commit
58aaf1d0e7
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m18.775 7.94165-.8833-.88334-2.0583 2.0575-2.0584-2.0575-.8833.88334 2.0575 2.05833-2.0575 2.05832.8833.8833 2.0584-2.0575 2.0583 2.0575.8833-.8833-2.0575-2.05832zm-7.1083-5.3275v14.77165c.0001.0809-.0234.1601-.0676.2279-.0441.0678-.1071.1213-.1812.1539-.074.0326-.156.043-.2358.0298s-.1541-.0494-.2137-.1041l-4.30171-3.9433h-3.33334c-.44202 0-.86595-.1756-1.17851-.4882-.31256-.3125-.48815-.7365-.48815-1.1785v-4.16665c0-.44203.17559-.86595.48815-1.17851.31256-.31257.73649-.48816 1.17851-.48816h3.33334l4.30171-3.94333c.0596-.05471.1339-.09086.2137-.10405.0798-.0132.1618-.00286.2358.02975.0741.03261.1371.08608.1812.15388.0442.0678.0677.147.0676.22792z" fill="#000"/></svg>
|
||||
|
After Width: | Height: | Size: 780 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4817 3.51831L15.5983 4.40165C17.0808 5.88764 17.9133 7.90096 17.9133 9.99998C17.9133 11.7099 17.3609 13.3629 16.3546 14.7203L14.7565 13.3794C15.0104 13.0234 15.2237 12.6391 15.3919 12.2333C15.6853 11.5254 15.8353 10.7663 15.8333 9.99998C15.8352 9.23357 15.6852 8.47438 15.3918 7.76634C15.0984 7.05829 14.6676 6.41545 14.1242 5.87498L13.2408 6.75915C14.1003 7.61868 14.5832 8.78444 14.5832 9.99998C14.5832 10.9234 14.3045 11.818 13.7938 12.5716L11.6667 10.7867V2.61415C11.6668 2.53323 11.6433 2.45403 11.5991 2.38623C11.5549 2.31843 11.492 2.26496 11.4179 2.23235C11.3439 2.19974 11.2619 2.1894 11.1821 2.2026C11.1022 2.21579 11.028 2.25194 10.9683 2.30665L6.66667 6.24998H6.26005L2.12624 2.7813L1.55171 2.29921L0.587524 3.44828L1.16206 3.93037L18.015 18.0717L18.5896 18.5538L19.5538 17.4047L18.9792 16.9226L17.313 15.5245C18.5063 13.9419 19.1622 12.0047 19.1622 9.99998C19.1622 7.56971 18.1982 5.23868 16.4817 3.51831ZM1.66667 7.91665C1.66667 7.52358 1.80552 7.14483 2.05605 6.84597L11.6667 14.9102V17.3858C11.6668 17.4667 11.6433 17.5459 11.5991 17.6137C11.5549 17.6815 11.492 17.735 11.4179 17.7676C11.3439 17.8002 11.2619 17.8106 11.1821 17.7974C11.1022 17.7842 11.028 17.748 10.9683 17.6933L6.66667 13.75H3.33334C2.89131 13.75 2.46739 13.5744 2.15483 13.2618C1.84227 12.9493 1.66667 12.5253 1.66667 12.0833V7.91665Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m16.4817 3.51831-.8833.88334c1.4824 1.48599 2.315 3.49931 2.315 5.59833s-.8326 4.11232-2.315 5.59832l.8833.8833c1.7165-1.7203 2.6806-4.0514 2.6806-6.48162 0-2.43027-.9641-4.7613-2.6806-6.48167zm-.6483 6.48167c.0019-.76641-.1482-1.5256-.4416-2.23364-.2934-.70805-.7242-1.35089-1.2676-1.89136l-.8833.88417c.8595.85953 1.3423 2.02529 1.3423 3.24083 0 1.21552-.4828 2.38132-1.3423 3.24082l.8833.8833c.5434-.5402.9743-1.1829 1.2677-1.8908s.4434-1.467.4415-2.23332zm-4.1667-7.38583v14.77165c.0001.0809-.0234.1601-.0676.2279-.0441.0678-.1071.1213-.1812.1539-.074.0326-.156.043-.2358.0298s-.1541-.0494-.2137-.1041l-4.30171-3.9433h-3.33334c-.44202 0-.86595-.1756-1.17851-.4882-.31256-.3125-.48815-.7365-.48815-1.1785v-4.16665c0-.44203.17559-.86595.48815-1.17851.31256-.31257.73649-.48816 1.17851-.48816h3.33334l4.30171-3.94333c.0596-.05471.1339-.09086.2137-.10405.0798-.0132.1618-.00286.2358.02975.0741.03261.1371.08608.1812.15388.0442.0678.0677.147.0676.22792z" fill="#000"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m18.775 7.94166-.8833-.88333-2.0584 2.0575-2.0583-2.0575-.8833.88333 2.0575 2.05833-2.0575 2.05831.8833.8834 2.0583-2.0575 2.0584 2.0575.8833-.8834-2.0575-2.05831zm-7.1083-5.3275v14.77164c.0001.0809-.0234.1601-.0676.2279s-.1071.1213-.1812.1539c-.074.0326-.156.043-.2358.0298-.0799-.0132-.1541-.0494-.2138-.1041l-4.30164-3.9433h-3.33333c-.44203 0-.86595-.1756-1.17851-.4882-.31256-.3125-.48816-.7364-.48816-1.1785v-4.16664c0-.44203.1756-.86595.48816-1.17851s.73648-.48816 1.17851-.48816h3.33333l4.30164-3.94333c.0597-.0547.1339-.09086.2138-.10405.0798-.01319.1618-.00285.2358.02976.0741.03261.137.08608.1812.15388s.0677.14699.0676.22791z" fill="#000"/></svg>
|
||||
|
Before Width: | Height: | Size: 761 B |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h20v20h-20z"/></clipPath><g clip-path="url(#a)"><path d="m16.4817 4.51833-.8834.88333c1.4825 1.48599 2.315 3.49932 2.315 5.59834 0 2.099-.8325 4.1123-2.315 5.5983l.8834.8834c1.7165-1.7204 2.6805-4.0514 2.6805-6.4817 0-2.43027-.964-4.7613-2.6805-6.48167zm-.6484 6.48167c.0019-.7664-.1481-1.52561-.4415-2.23365s-.7242-1.35089-1.2676-1.89136l-.8834.88417c.8595.85954 1.3424 2.02529 1.3424 3.24084 0 1.2155-.4829 2.3813-1.3424 3.2408l.8834.8834c.5434-.5403.9743-1.183 1.2677-1.8909s.4434-1.467.4414-2.2333zm-4.1666-7.38584v14.77164c.0001.0809-.0234.1601-.0676.2279s-.1071.1213-.1812.1539c-.074.0326-.156.043-.2358.0298-.0799-.0132-.1541-.0494-.2138-.1041l-4.30163-3.9433h-3.33334c-.44202 0-.86595-.1756-1.17851-.4882-.31256-.3125-.48815-.7364-.48815-1.1785v-4.16664c0-.44203.17559-.86595.48815-1.17851s.73649-.48816 1.17851-.48816h3.33334l4.30163-3.94333c.0597-.0547.1339-.09086.2138-.10405.0798-.01319.1618-.00285.2358.02976.0741.03261.137.08608.1812.15388s.0677.14699.0676.22791z" fill="#000"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useBoundActions } from '../../hooks/useBoundActions';
|
|||
export enum ToastType {
|
||||
Error = 'Error',
|
||||
MessageBodyTooLong = 'MessageBodyTooLong',
|
||||
StoryMuted = 'StoryMuted',
|
||||
StoryReact = 'StoryReact',
|
||||
StoryReply = 'StoryReply',
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue