+ {title &&
+ );
+}
export function ContextMenu{title}
}
+ {menuOptions.map((option, index) => (
+
+ ))}
+
@@ -132,55 +205,22 @@ export function ContextMenu({
ref={setReferenceElement}
type="button"
/>
- {menuShowing && (
-
+ setMenuShowing(false)}
+ popperOptions={popperOptions}
+ referenceElement={referenceElement}
+ title={title}
+ value={value}
+ />
+
);
}
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index 419ade824..4cdc2223c 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -28,10 +28,15 @@ import { ScrollBehavior } from '../types/Util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import { usePrevious } from '../hooks/usePrevious';
import { missingCaseError } from '../util/missingCaseError';
-import { strictAssert } from '../util/assert';
-import { isSorted } from '../util/isSorted';
import type { WidthBreakpoint } from './_util';
import { getConversationListWidthBreakpoint } from './_util';
+import {
+ MIN_WIDTH,
+ SNAP_WIDTH,
+ MIN_FULL_WIDTH,
+ MAX_WIDTH,
+ getWidthFromPreferredWidth,
+} from '../util/leftPaneWidth';
import { ConversationList } from './ConversationList';
import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
@@ -42,15 +47,6 @@ import type {
SaveAvatarToDiskActionType,
} from '../types/Avatar';
-const MIN_WIDTH = 97;
-const SNAP_WIDTH = 200;
-const MIN_FULL_WIDTH = 280;
-const MAX_WIDTH = 380;
-strictAssert(
- isSorted([MIN_WIDTH, SNAP_WIDTH, MIN_FULL_WIDTH, MAX_WIDTH]),
- 'Expected widths to be in the right order'
-);
-
export enum LeftPaneMode {
Inbox,
Search,
@@ -499,13 +495,6 @@ export const LeftPane: React.FC
- {title &&
- )}
+ {title}
}
- {menuOptions.map((option, index) => (
-
- ))}
-
+ {areStoriesEnabled && (
+
+ )}
+
+
);
}
diff --git a/ts/components/MediaEditor.tsx b/ts/components/MediaEditor.tsx
index 0d3fcb6b4..dd5e44e13 100644
--- a/ts/components/MediaEditor.tsx
+++ b/ts/components/MediaEditor.tsx
@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import Measure from 'react-measure';
@@ -582,20 +582,22 @@ export const MediaEditor = ({
{
icon: 'MediaEditor__icon--text-regular',
label: i18n('MediaEditor__text--regular'),
+ onClick: () => setTextStyle(TextStyle.Regular),
value: TextStyle.Regular,
},
{
icon: 'MediaEditor__icon--text-highlight',
label: i18n('MediaEditor__text--highlight'),
+ onClick: () => setTextStyle(TextStyle.Highlight),
value: TextStyle.Highlight,
},
{
icon: 'MediaEditor__icon--text-outline',
label: i18n('MediaEditor__text--outline'),
+ onClick: () => setTextStyle(TextStyle.Outline),
value: TextStyle.Outline,
},
]}
- onChange={value => setTextStyle(value)}
theme={Theme.Dark}
value={textStyle}
/>
@@ -636,15 +638,16 @@ export const MediaEditor = ({
{
icon: 'MediaEditor__icon--draw-pen',
label: i18n('MediaEditor__draw--pen'),
+ onClick: () => setDrawTool(DrawTool.Pen),
value: DrawTool.Pen,
},
{
icon: 'MediaEditor__icon--draw-highlighter',
label: i18n('MediaEditor__draw--highlighter'),
+ onClick: () => setDrawTool(DrawTool.Highlighter),
value: DrawTool.Highlighter,
},
]}
- onChange={value => setDrawTool(value)}
theme={Theme.Dark}
value={drawTool}
/>
@@ -664,25 +667,28 @@ export const MediaEditor = ({
{
icon: 'MediaEditor__icon--width-thin',
label: i18n('MediaEditor__draw--thin'),
+ onClick: () => setDrawWidth(DrawWidth.Thin),
value: DrawWidth.Thin,
},
{
icon: 'MediaEditor__icon--width-regular',
label: i18n('MediaEditor__draw--regular'),
+ onClick: () => setDrawWidth(DrawWidth.Regular),
value: DrawWidth.Regular,
},
{
icon: 'MediaEditor__icon--width-medium',
label: i18n('MediaEditor__draw--medium'),
+ onClick: () => setDrawWidth(DrawWidth.Medium),
value: DrawWidth.Medium,
},
{
icon: 'MediaEditor__icon--width-heavy',
label: i18n('MediaEditor__draw--heavy'),
+ onClick: () => setDrawWidth(DrawWidth.Heavy),
value: DrawWidth.Heavy,
},
]}
- onChange={value => setDrawWidth(value)}
theme={Theme.Dark}
value={drawWidth}
/>
diff --git a/ts/components/Modal.tsx b/ts/components/Modal.tsx
index 639c34253..7423f03e2 100644
--- a/ts/components/Modal.tsx
+++ b/ts/components/Modal.tsx
@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactElement, ReactNode } from 'react';
@@ -25,6 +25,7 @@ type PropsType = {
moduleClassName?: string;
onClose?: () => void;
title?: ReactNode;
+ useFocusTrap?: boolean;
};
type ModalPropsType = PropsType & {
@@ -44,6 +45,7 @@ export function Modal({
onClose = noop,
title,
theme,
+ useFocusTrap,
}: Readonly
+
+ );
return root
? createPortal(
- {children}
+
-
- {children}
-
+ {storiesToView &&
+ renderStoryViewer({
+ conversationId: storiesToView.conversationId,
+ onClose: () => setStoriesToView(undefined),
+ onNextUserStories: () => {
+ const storyIndex = stories.findIndex(
+ x => x.conversationId === storiesToView.conversationId
+ );
+ if (storyIndex >= stories.length - 1) {
+ setStoriesToView(undefined);
+ return;
+ }
+ const nextStory = stories[storyIndex + 1];
+ setStoriesToView({
+ conversationId: nextStory.conversationId,
+ stories: nextStory.stories,
+ });
+ },
+ onPrevUserStories: () => {
+ const storyIndex = stories.findIndex(
+ x => x.conversationId === storiesToView.conversationId
+ );
+ if (storyIndex === 0) {
+ setStoriesToView(undefined);
+ return;
+ }
+ const prevStory = stories[storyIndex - 1];
+ setStoriesToView({
+ conversationId: prevStory.conversationId,
+ stories: prevStory.stories,
+ });
+ },
+ stories: storiesToView.stories,
+ })}
+
+ );
+};
diff --git a/ts/components/StoriesPane.tsx b/ts/components/StoriesPane.tsx
new file mode 100644
index 000000000..94b6aa5f8
--- /dev/null
+++ b/ts/components/StoriesPane.tsx
@@ -0,0 +1,124 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { FuseOptions } from 'fuse.js';
+import Fuse from 'fuse.js';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import type { ConversationStoryType, StoryViewType } from './StoryListItem';
+import type { LocalizerType } from '../types/Util';
+import { SearchInput } from './SearchInput';
+import { StoryListItem } from './StoryListItem';
+
+const FUSE_OPTIONS: FuseOptions
+ {
+ const storyIndex = stories.findIndex(
+ x => x.conversationId === conversationId
+ );
+ const foundStory = stories[storyIndex];
+
+ if (foundStory) {
+ setStoriesToView({
+ conversationId,
+ stories: foundStory.stories,
+ });
+ }
+ }}
+ openConversationInternal={openConversationInternal}
+ stories={stories}
+ toggleHideStories={toggleHideStories}
+ />
+
+
+
+ {i18n('Stories__placeholder--text')}
+
+
+
+
+
+ {i18n('Stories__title')}
+
+
+ {renderedStories.map(story => (
+ {
+ onStoryClicked(story.conversationId);
+ }}
+ onHideStory={() => {
+ toggleHideStories(story.stories[0].sender.id);
+ }}
+ onGoToConversation={conversationId => {
+ openConversationInternal({ conversationId });
+ }}
+ story={story.stories[0]}
+ />
+ ))}
+ {!stories.length && i18n('Stories__list-empty')}
+
+
+ );
+};
diff --git a/ts/components/StoryListItem.stories.tsx b/ts/components/StoryListItem.stories.tsx
new file mode 100644
index 000000000..df918d678
--- /dev/null
+++ b/ts/components/StoryListItem.stories.tsx
@@ -0,0 +1,77 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import type { PropsType } from './StoryListItem';
+import { StoryListItem } from './StoryListItem';
+import enMessages from '../../_locales/en/messages.json';
+import { setupI18n } from '../util/setupI18n';
+import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
+import {
+ fakeAttachment,
+ fakeThumbnail,
+} from '../test-both/helpers/fakeAttachment';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/StoryListItem', module);
+
+function getDefaultProps(): PropsType {
+ return {
+ i18n,
+ onClick: action('onClick'),
+ story: {
+ messageId: '123',
+ sender: getDefaultConversation(),
+ timestamp: Date.now(),
+ },
+ };
+}
+
+story.add('My Story', () => (
+
+
+ setHasReplyModal(false)}
+ onReact={emoji => {
+ onReactToStory(emoji, visibleStory);
+ }}
+ onReply={(message, mentions, timestamp) => {
+ setHasReplyModal(false);
+ onReplyToStory(message, mentions, timestamp, visibleStory);
+ }}
+ onSetSkinTone={onSetSkinTone}
+ onTextTooLong={onTextTooLong}
+ onUseEmoji={onUseEmoji}
+ preferredReactionEmoji={preferredReactionEmoji}
+ recentEmojis={recentEmojis}
+ renderEmojiPicker={renderEmojiPicker}
+ replies={[]}
+ skinTone={skinTone}
+ storyPreviewAttachment={visibleStory.attachment}
+ views={[]}
+ />
+ )}
+
+ );
+};
diff --git a/ts/components/StoryViewsNRepliesModal.stories.tsx b/ts/components/StoryViewsNRepliesModal.stories.tsx
new file mode 100644
index 000000000..a7faa3fe3
--- /dev/null
+++ b/ts/components/StoryViewsNRepliesModal.stories.tsx
@@ -0,0 +1,125 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import type { PropsType } from './StoryViewsNRepliesModal';
+import * as durations from '../util/durations';
+import enMessages from '../../_locales/en/messages.json';
+import { IMAGE_JPEG } from '../types/MIME';
+import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
+import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
+import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
+import { setupI18n } from '../util/setupI18n';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/StoryViewsNRepliesModal', module);
+
+function getDefaultProps(): PropsType {
+ return {
+ authorTitle: getDefaultConversation().title,
+ getPreferredBadge: () => undefined,
+ i18n,
+ isMyStory: false,
+ onClose: action('onClose'),
+ onSetSkinTone: action('onSetSkinTone'),
+ onReact: action('onReact'),
+ onReply: action('onReply'),
+ onTextTooLong: action('onTextTooLong'),
+ onUseEmoji: action('onUseEmoji'),
+ preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
+ renderEmojiPicker: () => ,
+ replies: [],
+ storyPreviewAttachment: fakeAttachment({
+ thumbnail: {
+ contentType: IMAGE_JPEG,
+ height: 64,
+ objectUrl: '/fixtures/nathan-anderson-316188-unsplash.jpg',
+ path: '',
+ width: 40,
+ },
+ }),
+ views: [],
+ };
+}
+
+function getViewsAndReplies() {
+ const p1 = getDefaultConversation();
+ const p2 = getDefaultConversation();
+ const p3 = getDefaultConversation();
+ const p4 = getDefaultConversation();
+ const p5 = getDefaultConversation();
+
+ const views = [
+ {
+ ...p1,
+ timestamp: Date.now() - 20 * durations.MINUTE,
+ },
+ {
+ ...p2,
+ timestamp: Date.now() - 25 * durations.MINUTE,
+ },
+ {
+ ...p3,
+ timestamp: Date.now() - 15 * durations.MINUTE,
+ },
+ {
+ ...p4,
+ timestamp: Date.now() - 5 * durations.MINUTE,
+ },
+ {
+ ...p5,
+ timestamp: Date.now() - 30 * durations.MINUTE,
+ },
+ ];
+
+ const replies = [
+ {
+ ...p2,
+ body: 'So cute ❤️',
+ timestamp: Date.now() - 24 * durations.MINUTE,
+ },
+ {
+ ...p3,
+ body: "That's awesome",
+ timestamp: Date.now() - 13 * durations.MINUTE,
+ },
+ {
+ ...p4,
+ reactionEmoji: '❤️',
+ timestamp: Date.now() - 5 * durations.MINUTE,
+ },
+ ];
+
+ return {
+ views,
+ replies,
+ };
+}
+
+story.add('Can reply', () => (
+
+
+
+
+ {hasReplyModal && (
+
+ {visibleStory.attachment && (
+ 
+ )}
+
+
+
+
+ {group
+ ? i18n('Stories__from-to-group', {
+ name: title,
+ group: group.title,
+ })
+ : title}
+
+
+ {stories.map((story, index) => (
+
+
+ {currentStoryIndex === index ? (
+ `${width}%`),
+ }}
+ />
+ ) : (
+
+ )}
+
+ ))}
+
+ {isMe ? (
+ <>
+ {views &&
+ (views === 1 ? (
+ {views}]}
+ />
+ ) : (
+ {views}]}
+ />
+ ))}
+ {views && replies && ' '}
+ {replies &&
+ (replies === 1 ? (
+ {replies}]}
+ />
+ ) : (
+ {replies}]}
+ />
+ ))}
+
+ ) : (
+
+ )}
+
+
+
+ );
+ }
+
+ const repliesElement = replies.length ? (
+
+ {!replies.length && (
+ {
+ setMessageBodyText(messageText);
+ }}
+ onPickEmoji={insertEmoji}
+ onSubmit={onReply}
+ onTextTooLong={onTextTooLong}
+ placeholder={i18n('StoryViewsNRepliesModal__placeholder')}
+ theme={ThemeType.dark}
+ >
+
+
+ + )} +
+ {replies.map(reply =>
+ reply.reactionEmoji ? (
+
+ ) : undefined;
+
+ const viewsElement = views.length ? (
+
+
+ ) : (
+
+
+
+
+
+
+ {i18n('StoryViewsNRepliesModal__reacted')}
+
+
+ )
+ )}
+
+
+
+
+
+
+ {views.map(view => (
+
+ ) : undefined;
+
+ const tabsElement =
+ views.length && replies.length ? (
+
+
+ ))}
+
+
+
- {tabs.map(({ id, label }) => (
-
+ {tabsHeaderElement}
{children({ selectedTab })}
);
diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx
index 8c4dd2187..a57858620 100644
--- a/ts/components/conversation/Quote.stories.tsx
+++ b/ts/components/conversation/Quote.stories.tsx
@@ -213,6 +213,9 @@ story.add('Image Only', () => {
isVoiceMessage: false,
thumbnail: {
contentType: IMAGE_PNG,
+ height: 100,
+ width: 100,
+ path: pngUrl,
objectUrl: pngUrl,
},
},
@@ -228,6 +231,9 @@ story.add('Image Attachment', () => {
isVoiceMessage: false,
thumbnail: {
contentType: IMAGE_PNG,
+ height: 100,
+ width: 100,
+ path: pngUrl,
objectUrl: pngUrl,
},
},
@@ -270,6 +276,9 @@ story.add('Video Only', () => {
isVoiceMessage: false,
thumbnail: {
contentType: IMAGE_PNG,
+ height: 100,
+ width: 100,
+ path: pngUrl,
objectUrl: pngUrl,
},
},
@@ -288,6 +297,9 @@ story.add('Video Attachment', () => {
isVoiceMessage: false,
thumbnail: {
contentType: IMAGE_PNG,
+ height: 100,
+ width: 100,
+ path: pngUrl,
objectUrl: pngUrl,
},
},
diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
index ebea8bd1c..695f0f102 100644
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -1,4 +1,4 @@
-// Copyright 2018-2021 Signal Messenger, LLC
+// Copyright 2018-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode } from 'react';
@@ -10,6 +10,7 @@ import * as MIME from '../../types/MIME';
import * as GoogleChrome from '../../util/GoogleChrome';
import { MessageBody } from './MessageBody';
+import type { AttachmentType, ThumbnailType } from '../../types/Attachment';
import type { BodyRangesType, LocalizerType } from '../../types/Util';
import type {
ConversationColorType,
@@ -40,19 +41,10 @@ type State = {
imageBroken: boolean;
};
-export type QuotedAttachmentType = {
- contentType: MIME.MIMEType;
- fileName?: string;
- /** Not included in protobuf */
- isVoiceMessage: boolean;
- thumbnail?: Attachment;
-};
-
-type Attachment = {
- contentType: MIME.MIMEType;
- /** Not included in protobuf, and is loaded asynchronously */
- objectUrl?: string;
-};
+export type QuotedAttachmentType = Pick<
+ AttachmentType,
+ 'contentType' | 'fileName' | 'isVoiceMessage' | 'thumbnail'
+>;
function validateQuote(quote: Props): boolean {
if (quote.text) {
@@ -75,12 +67,12 @@ function getAttachment(
: undefined;
}
-function getObjectUrl(thumbnail: Attachment | undefined): string | undefined {
- if (thumbnail && thumbnail.objectUrl) {
- return thumbnail.objectUrl;
+function getUrl(thumbnail?: ThumbnailType): string | undefined {
+ if (!thumbnail) {
+ return;
}
- return undefined;
+ return thumbnail.objectUrl || thumbnail.url;
}
function getTypeLabel({
@@ -92,7 +84,7 @@ function getTypeLabel({
i18n: LocalizerType;
isViewOnce?: boolean;
contentType: MIME.MIMEType;
- isVoiceMessage: boolean;
+ isVoiceMessage?: boolean;
}): string | undefined {
if (GoogleChrome.isVideoTypeSupported(contentType)) {
if (isViewOnce) {
@@ -249,20 +241,20 @@ export class Quote extends React.Component {
- setSelectedTab(id);
- onTabChange?.(id);
- }}
- onKeyUp={(e: KeyboardEvent) => {
- if (e.target === e.currentTarget && e.keyCode === 13) {
- setSelectedTab(id);
- e.preventDefault();
- e.stopPropagation();
- }
- }}
- role="tab"
- tabIndex={0}
- >
- {label}
-
- ))}
-
+ {tabs.map(({ id, label }) => (
+
+ );
+
+ return {
+ selectedTab,
+ tabsHeaderElement,
+ };
+}
diff --git a/ts/jobs/helpers/sendNormalMessage.ts b/ts/jobs/helpers/sendNormalMessage.ts
index f336a1b47..763a2775e 100644
--- a/ts/jobs/helpers/sendNormalMessage.ts
+++ b/ts/jobs/helpers/sendNormalMessage.ts
@@ -141,6 +141,7 @@ export async function sendNormalMessage(
preview,
quote,
sticker,
+ storyContextTimestamp,
} = await getMessageSendData({ log, message });
let messageSendPromise: Promise {
+ setSelectedTab(id);
+ onTabChange?.(id);
+ }}
+ onKeyUp={(e: KeyboardEvent) => {
+ if (e.target === e.currentTarget && e.keyCode === 13) {
+ setSelectedTab(id);
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }}
+ role="tab"
+ tabIndex={0}
+ >
+ {label}
+
+ ))}
+