jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render group stories

This commit is contained in:
Josh Perez 2022-04-14 20:08:46 -04:00 committed by GitHub
parent 14ab7b9e0d
commit e3d537cbd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 527 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
stylesheets/components/StoryViewer.scss
View File

@ -107,11 +107,16 @@
}
&__actions {
margin: 16px 0 32px 0;
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 32px;
min-height: 52px;
}
&__reply {
@include button-reset;
color: $color-gray-05;
@include keyboard-mode {
&:focus {
color: $color-ultramarine;

5
stylesheets/components/StoryViewsNRepliesModal.scss
View File

@ -125,6 +125,11 @@
border-radius: 18px;
margin-left: 8px;
padding: 7px 12px;
&--doe {
background: none;
border: 1px solid $color-gray-75;
}
}
&__quote {

1
stylesheets/components/TextAttachment.scss
View File

@ -73,6 +73,7 @@
&__title {
align-items: flex-start;
color: $color-gray-05;
display: flex;
flex-direction: column;
justify-content: flex-start;

10
ts/components/ModalHost.tsx
View File

@ -86,11 +86,15 @@ export const ModalHost = React.memo(
<animated.div
role="presentation"
className={getClassName('__overlay')}
onMouseDown={noMouseClose ? undefined : handleMouseDown}
onMouseUp={noMouseClose ? undefined : handleMouseUp}
style={overlayStyles}
/>
<div className={getClassName('__overlay-container')}>{children}</div>
<div
className={getClassName('__overlay-container')}
onMouseDown={noMouseClose ? undefined : handleMouseDown}
onMouseUp={noMouseClose ? undefined : handleMouseUp}
>
{children}
</div>
</div>
);

17
ts/components/Stories.stories.tsx
View File

@ -7,6 +7,7 @@ import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import type { AttachmentType } from '../types/Attachment';
import type { ConversationType } from '../state/ducks/conversations';
import type { PropsType } from './Stories';
import { Stories } from './Stories';
import enMessages from '../../_locales/en/messages.json';
@ -28,7 +29,17 @@ function createStory({
timestamp,
}: {
attachment?: AttachmentType;
group?: { title: string };
group?: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'id'
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
>;
timestamp: number;
}) {
const replies = Math.random() > 0.5;
@ -87,7 +98,7 @@ const getDefaultProps = (): PropsType => ({
timestamp: Date.now() - 5 * durations.MINUTE,
}),
createStory({
group: { title: 'BBQ in the park' },
group: getDefaultConversation({ title: 'BBQ in the park' }),
attachment: getAttachmentWithThumbnail(
'/fixtures/nathan-anderson-316188-unsplash.jpg'
),
@ -102,7 +113,7 @@ const getDefaultProps = (): PropsType => ({
timestamp: Date.now() - 164 * durations.MINUTE,
}),
createStory({
group: { title: 'Breaking Signal for Science' },
group: getDefaultConversation({ title: 'Breaking Signal for Science' }),
attachment: getAttachmentWithThumbnail('/fixtures/kitten-2-64-64.jpg'),
timestamp: Date.now() - 380 * durations.MINUTE,
}),

49
ts/components/Stories.tsx
View File

@ -4,7 +4,7 @@
import FocusTrap from 'focus-trap-react';
import React, { useState } from 'react';
import classNames from 'classnames';
import type { ConversationStoryType, StoryViewType } from './StoryListItem';
import type { ConversationStoryType } from './StoryListItem';
import type { LocalizerType } from '../types/Util';
import type { PropsType as SmartStoryViewerPropsType } from '../state/smart/StoryViewer';
import { StoriesPane } from './StoriesPane';
@ -23,11 +23,6 @@ export type PropsType = {
toggleStoriesView: () => unknown;
};
type ViewingStoryType = {
conversationId: string;
stories: Array<StoryViewType>;
};
export const Stories = ({
hiddenStories,
i18n,
@ -39,8 +34,8 @@ export const Stories = ({
toggleHideStories,
toggleStoriesView,
}: PropsType): JSX.Element => {
const [storiesToView, setStoriesToView] = useState<
undefined | ViewingStoryType
const [conversationIdToView, setConversationIdToView] = useState<
undefined | string
>();
const width = getWidthFromPreferredWidth(preferredWidthFromStorage, {
@ -49,42 +44,35 @@ export const Stories = ({
return (
<div className={classNames('Stories', themeClassName(Theme.Dark))}>
{storiesToView &&
{conversationIdToView &&
renderStoryViewer({
conversationId: storiesToView.conversationId,
onClose: () => setStoriesToView(undefined),
conversationId: conversationIdToView,
onClose: () => setConversationIdToView(undefined),
onNextUserStories: () => {
const storyIndex = stories.findIndex(
x => x.conversationId === storiesToView.conversationId
x => x.conversationId === conversationIdToView
);
if (storyIndex >= stories.length - 1) {
setStoriesToView(undefined);
setConversationIdToView(undefined);
return;
}
const nextStory = stories[storyIndex + 1];
setStoriesToView({
conversationId: nextStory.conversationId,
stories: nextStory.stories,
});
setConversationIdToView(nextStory.conversationId);
},
onPrevUserStories: () => {
const storyIndex = stories.findIndex(
x => x.conversationId === storiesToView.conversationId
x => x.conversationId === conversationIdToView
);
if (storyIndex === 0) {
setStoriesToView(undefined);
setConversationIdToView(undefined);
return;
}
const prevStory = stories[storyIndex - 1];
setStoriesToView({
conversationId: prevStory.conversationId,
stories: prevStory.stories,
});
setConversationIdToView(prevStory.conversationId);
},
stories: storiesToView.stories,
})}
<div className="Stories__pane" style={{ width }}>
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<div className="Stories__pane" style={{ width }}>
<StoriesPane
hiddenStories={hiddenStories}
i18n={i18n}
@ -96,10 +84,7 @@ export const Stories = ({
const foundStory = stories[storyIndex];
if (foundStory) {
setStoriesToView({
conversationId,
stories: foundStory.stories,
});
setConversationIdToView(conversationId);
}
}}
openConversationInternal={openConversationInternal}
@ -107,8 +92,8 @@ export const Stories = ({
stories={stories}
toggleHideStories={toggleHideStories}
/>
</FocusTrap>
</div>
</div>
</FocusTrap>
<div className="Stories__placeholder">
<div className="Stories__placeholder__stories" />
{i18n('Stories__placeholder--text')}

3
ts/components/StoriesPane.tsx
View File

@ -111,8 +111,9 @@ export const StoriesPane = ({
>
{renderedStories.map(story => (
<StoryListItem
key={getNewestStory(story).timestamp}
group={story.group}
i18n={i18n}
key={getNewestStory(story).timestamp}
onClick={() => {
onStoryClicked(story.conversationId);
}}

2
ts/components/StoryListItem.stories.tsx
View File

@ -63,7 +63,7 @@ story.add('My Story (many)', () => (
story.add("Someone's story", () => (
<StoryListItem
{...getDefaultProps()}
group={{ title: 'Sports Group' }}
group={getDefaultConversation({ title: 'Sports Group' })}
story={{
attachment: fakeAttachment({
thumbnail: fakeThumbnail('/fixtures/tina-rolf-269345-unsplash.jpg'),

13
ts/components/StoryListItem.tsx
View File

@ -15,7 +15,17 @@ import { getAvatarColor } from '../types/Colors';
export type ConversationStoryType = {
conversationId: string;
group?: Pick<ConversationType, 'title'>;
group?: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'id'
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
>;
hasMultiple?: boolean;
isHidden?: boolean;
searchNames?: string; // This is just here to satisfy Fuse's types
@ -24,6 +34,7 @@ export type ConversationStoryType = {
export type StoryViewType = {
attachment?: AttachmentType;
canReply?: boolean;
hasReplies?: boolean;
hasRepliesFromSelf?: boolean;
isHidden?: boolean;

8
ts/components/StoryViewer.stories.tsx
View File

@ -17,10 +17,14 @@ const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/StoryViewer', module);
function getDefaultProps(): PropsType {
const sender = getDefaultConversation();
return {
conversationId: sender.id,
getPreferredBadge: () => undefined,
group: undefined,
i18n,
loadStoryReplies: action('loadStoryReplies'),
markStoryRead: action('markStoryRead'),
onClose: action('onClose'),
onNextUserStories: action('onNextUserStories'),
@ -33,18 +37,16 @@ function getDefaultProps(): PropsType {
preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
queueStoryDownload: action('queueStoryDownload'),
renderEmojiPicker: () => <div />,
replies: Math.floor(Math.random() * 20),
stories: [
{
attachment: fakeAttachment({
url: '/fixtures/snow.jpg',
}),
messageId: '123',
sender: getDefaultConversation(),
sender,
timestamp: Date.now(),
},
],
views: Math.floor(Math.random() * 20),
};
}

79
ts/components/StoryViewer.tsx
View File

@ -9,6 +9,7 @@ import type { ConversationType } from '../state/ducks/conversations';
import type { EmojiPickDataType } from './emoji/EmojiPicker';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { RenderEmojiPickerProps } from './conversation/ReactionPicker';
import type { ReplyStateType } from '../types/Stories';
import type { StoryViewType } from './StoryListItem';
import { Avatar, AvatarSize } from './Avatar';
import { Intl } from './Intl';
@ -22,9 +23,21 @@ import { isDownloaded, isDownloading } from '../types/Attachment';
import { useEscapeHandling } from '../hooks/useEscapeHandling';
export type PropsType = {
conversationId: string;
getPreferredBadge: PreferredBadgeSelectorType;
group?: ConversationType;
group?: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'id'
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
>;
i18n: LocalizerType;
loadStoryReplies: (conversationId: string, messageId: string) => unknown;
markStoryRead: (mId: string) => unknown;
onClose: () => unknown;
onNextUserStories: () => unknown;
@ -42,11 +55,10 @@ export type PropsType = {
preferredReactionEmoji: Array<string>;
queueStoryDownload: (storyId: string) => unknown;
recentEmojis?: Array<string>;
replies?: number;
renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
replyState?: ReplyStateType;
skinTone?: number;
stories: Array<StoryViewType>;
views?: number;
};
const CAPTION_BUFFER = 20;
@ -54,9 +66,11 @@ const CAPTION_INITIAL_LENGTH = 200;
const CAPTION_MAX_LENGTH = 700;
export const StoryViewer = ({
conversationId,
getPreferredBadge,
group,
i18n,
loadStoryReplies,
markStoryRead,
onClose,
onNextUserStories,
@ -70,17 +84,16 @@ export const StoryViewer = ({
queueStoryDownload,
recentEmojis,
renderEmojiPicker,
replies,
replyState,
skinTone,
stories,
views,
}: PropsType): JSX.Element => {
const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
const [storyDuration, setStoryDuration] = useState<number | undefined>();
const visibleStory = stories[currentStoryIndex];
const { attachment, messageId, timestamp } = visibleStory;
const { attachment, canReply, messageId, timestamp } = visibleStory;
const {
acceptedMessageRequest,
avatarPath,
@ -240,6 +253,20 @@ export const StoryViewer = ({
};
}, [navigateStories]);
const isGroupStory = Boolean(group?.id);
useEffect(() => {
if (!isGroupStory) {
return;
}
loadStoryReplies(conversationId, messageId);
}, [conversationId, isGroupStory, loadStoryReplies, messageId]);
const replies =
replyState && replyState.messageId === messageId ? replyState.replies : [];
const viewCount = 0;
const replyCount = replies.length;
return (
<FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
<div className="StoryViewer">
@ -366,49 +393,51 @@ export const StoryViewer = ({
<div className="StoryViewer__actions">
{isMe ? (
<>
{views &&
(views === 1 ? (
{viewCount &&
(viewCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__views--singular"
components={[<strong>{views}</strong>]}
components={[<strong>{viewCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__views--plural"
components={[<strong>{views}</strong>]}
components={[<strong>{viewCount}</strong>]}
/>
))}
{views && replies && ' '}
{replies &&
(replies === 1 ? (
{viewCount && replyCount && ' '}
{replyCount &&
(replyCount === 1 ? (
<Intl
i18n={i18n}
id="MyStories__replies--singular"
components={[<strong>{replies}</strong>]}
components={[<strong>{replyCount}</strong>]}
/>
) : (
<Intl
i18n={i18n}
id="MyStories__replies--plural"
components={[<strong>{replies}</strong>]}
components={[<strong>{replyCount}</strong>]}
/>
))}
</>
) : (
<button
className="StoryViewer__reply"
onClick={() => setHasReplyModal(true)}
tabIndex={0}
type="button"
>
{i18n('StoryViewer__reply')}
</button>
canReply && (
<button
className="StoryViewer__reply"
onClick={() => setHasReplyModal(true)}
tabIndex={0}
type="button"
>
{i18n('StoryViewer__reply')}
</button>
)
)}
</div>
</div>
{hasReplyModal && (
{hasReplyModal && canReply && (
<StoryViewsNRepliesModal
authorTitle={title}
getPreferredBadge={getPreferredBadge}
@ -428,7 +457,7 @@ export const StoryViewer = ({
preferredReactionEmoji={preferredReactionEmoji}
recentEmojis={recentEmojis}
renderEmojiPicker={renderEmojiPicker}
replies={[]}
replies={replies}
skinTone={skinTone}
storyPreviewAttachment={attachment}
views={[]}

41
ts/components/StoryViewsNRepliesModal.tsx
View File

@ -12,6 +12,7 @@ import type { EmojiPickDataType } from './emoji/EmojiPicker';
import type { InputApi } from './CompositionInput';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { RenderEmojiPickerProps } from './conversation/ReactionPicker';
import type { ReplyType } from '../types/Stories';
import { Avatar, AvatarSize } from './Avatar';
import { CompositionInput } from './CompositionInput';
import { ContactName } from './conversation/ContactName';
@ -23,26 +24,10 @@ import { Modal } from './Modal';
import { Quote } from './conversation/Quote';
import { ReactionPicker } from './conversation/ReactionPicker';
import { Tabs } from './Tabs';
import { Theme } from '../util/theme';
import { ThemeType } from '../types/Util';
import { getAvatarColor } from '../types/Colors';
type ReplyType = Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'isMe'
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
> & {
body?: string;
contactNameColor?: ContactNameColorType;
reactionEmoji?: string;
timestamp: number;
};
type ViewType = Pick<
ConversationType,
| 'acceptedMessageRequest'
@ -223,7 +208,7 @@ export const StoryViewsNRepliesModal = ({
<div className="StoryViewsNRepliesModal__replies">
{replies.map(reply =>
reply.reactionEmoji ? (
<div className="StoryViewsNRepliesModal__reaction">
<div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
<div className="StoryViewsNRepliesModal__reaction--container">
<Avatar
acceptedMessageRequest={reply.acceptedMessageRequest}
@ -257,7 +242,7 @@ export const StoryViewsNRepliesModal = ({
<Emojify text={reply.reactionEmoji} />
</div>
) : (
<div className="StoryViewsNRepliesModal__reply">
<div className="StoryViewsNRepliesModal__reply" key={reply.id}>
<Avatar
acceptedMessageRequest={reply.acceptedMessageRequest}
avatarPath={reply.avatarPath}
@ -272,7 +257,13 @@ export const StoryViewsNRepliesModal = ({
size={AvatarSize.TWENTY_EIGHT}
title={reply.title}
/>
<div className="StoryViewsNRepliesModal__message-bubble">
<div
className={classNames('StoryViewsNRepliesModal__message-bubble', {
'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
reply.deletedForEveryone
),
})}
>
<div className="StoryViewsNRepliesModal__reply--title">
<ContactName
contactNameColor={reply.contactNameColor}
@ -280,7 +271,14 @@ export const StoryViewsNRepliesModal = ({
/>
</div>
<MessageBody i18n={i18n} text={String(reply.body)} />
<MessageBody
i18n={i18n}
text={
reply.deletedForEveryone
? i18n('message--deletedForEveryone')
: String(reply.body)
}
/>
<MessageTimestamp
i18n={i18n}
@ -373,6 +371,7 @@ export const StoryViewsNRepliesModal = ({
})}
onClose={onClose}
useFocusTrap={!hasOnlyViewsElement}
theme={Theme.Dark}
>
{tabsElement || (
<>

12
ts/components/conversation/Quote.tsx
View File

@ -47,7 +47,7 @@ type State = {
export type QuotedAttachmentType = Pick<
AttachmentType,
'contentType' | 'fileName' | 'isVoiceMessage' | 'thumbnail'
'contentType' | 'fileName' | 'isVoiceMessage' | 'thumbnail' | 'textAttachment'
>;
function validateQuote(quote: Props): boolean {
@ -221,10 +221,11 @@ export class Quote extends React.Component<Props, State> {
return null;
}
const { fileName, contentType } = attachment;
const { fileName, contentType, textAttachment } = attachment;
const isGenericFile =
!GoogleChrome.isVideoTypeSupported(contentType) &&
!GoogleChrome.isImageTypeSupported(contentType) &&
!textAttachment &&
!MIME.isAudio(contentType);
if (!isGenericFile) {
@ -257,13 +258,18 @@ export class Quote extends React.Component<Props, State> {
return null;
}
const { contentType, thumbnail } = attachment;
const { contentType, textAttachment, thumbnail } = attachment;
const url = getUrl(thumbnail);
if (isViewOnce) {
return this.renderIcon('view-once');
}
// TODO DESKTOP-3433
if (textAttachment) {
return this.renderIcon('image');
}
if (GoogleChrome.isVideoTypeSupported(contentType)) {
return url && !imageBroken
? this.renderImage(url, 'play')

4
ts/models/conversations.ts
View File

@ -3958,7 +3958,7 @@ export class ConversationModel extends window.Backbone
storyId?: string;
timestamp?: number;
} = {}
): Promise<void> {
): Promise<MessageAttributesType | undefined> {
if (this.isGroupV1AndDisabled()) {
return;
}
@ -4143,6 +4143,8 @@ export class ConversationModel extends window.Backbone
}
window.Signal.Data.updateConversation(this.attributes);
return attributes;
}
// Is this someone who is a contact, or are we sharing our profile with them?

3
ts/services/storyLoader.ts
View File

@ -43,10 +43,13 @@ export function getStoryDataFromMessageAttributes(
selectedReaction,
...pick(message, [
'conversationId',
'deletedForEveryone',
'readStatus',
'sendStateByConversationId',
'source',
'sourceUuid',
'timestamp',
'type',
]),
};
}

2
ts/sql/Client.ts
View File

@ -1238,7 +1238,7 @@ async function getOlderMessagesByConversation(
messageId?: string;
receivedAt?: number;
sentAt?: number;
storyId?: UUIDStringType;
storyId?: string;
}
) {
const messages = await channels.getOlderMessagesByConversation(

4
ts/sql/Interface.ts
View File

@ -617,7 +617,7 @@ export type ServerInterface = DataInterface & {
messageId?: string;
receivedAt?: number;
sentAt?: number;
storyId?: UUIDStringType;
storyId?: string;
}
) => Promise<Array<MessageTypeUnhydrated>>;
getNewerMessagesByConversation: (
@ -687,7 +687,7 @@ export type ClientInterface = DataInterface & {
messageId?: string;
receivedAt?: number;
sentAt?: number;
storyId?: UUIDStringType;
storyId?: string;
}
) => Promise<Array<MessageAttributesType>>;
getNewerMessagesByConversation: (

4
ts/sql/Server.ts
View File

@ -2314,7 +2314,7 @@ async function getOlderMessagesByConversation(
messageId?: string;
receivedAt?: number;
sentAt?: number;
storyId?: UUIDStringType;
storyId?: string;
}
): Promise<Array<MessageTypeUnhydrated>> {
return getOlderMessagesByConversationSync(conversationId, options);
@ -2332,7 +2332,7 @@ function getOlderMessagesByConversationSync(
messageId?: string;
receivedAt?: number;
sentAt?: number;
storyId?: UUIDStringType;
storyId?: string;
} = {}
): Array<MessageTypeUnhydrated> {
const db = getInstance();

157
ts/state/ducks/stories.ts
View File

@ -6,7 +6,10 @@ import { pick } from 'lodash';
import type { AttachmentType } from '../../types/Attachment';
import type { BodyRangeType } from '../../types/Util';
import type { MessageAttributesType } from '../../model-types.d';
import type { MessageDeletedActionType } from './conversations';
import type {
MessageChangedActionType,
MessageDeletedActionType,
} from './conversations';
import type { NoopActionType } from './noop';
import type { StateType as RootStateType } from '../reducer';
import type { StoryViewType } from '../../components/StoryListItem';
@ -33,23 +36,44 @@ export type StoryDataType = {
selectedReaction?: string;
} & Pick<
MessageAttributesType,
'conversationId' | 'readStatus' | 'source' | 'sourceUuid' | 'timestamp'
| 'conversationId'
| 'deletedForEveryone'
| 'readStatus'
| 'sendStateByConversationId'
| 'source'
| 'sourceUuid'
| 'timestamp'
| 'type'
>;
// State
export type StoriesStateType = {
readonly isShowingStoriesView: boolean;
readonly replyState?: {
messageId: string;
replies: Array<MessageAttributesType>;
};
readonly stories: Array<StoryDataType>;
};
// Actions
const LOAD_STORY_REPLIES = 'stories/LOAD_STORY_REPLIES';
const MARK_STORY_READ = 'stories/MARK_STORY_READ';
const REACT_TO_STORY = 'stories/REACT_TO_STORY';
const REPLY_TO_STORY = 'stories/REPLY_TO_STORY';
const STORY_CHANGED = 'stories/STORY_CHANGED';
const TOGGLE_VIEW = 'stories/TOGGLE_VIEW';
type LoadStoryRepliesActionType = {
type: typeof LOAD_STORY_REPLIES;
payload: {
messageId: string;
replies: Array<MessageAttributesType>;
};
};
type MarkStoryReadActionType = {
type: typeof MARK_STORY_READ;
payload: string;
@ -63,6 +87,11 @@ type ReactToStoryActionType = {
};
};
type ReplyToStoryActionType = {
type: typeof REPLY_TO_STORY;
payload: MessageAttributesType;
};
type StoryChangedActionType = {
type: typeof STORY_CHANGED;
payload: StoryDataType;
@ -73,15 +102,19 @@ type ToggleViewActionType = {
};
export type StoriesActionType =
| LoadStoryRepliesActionType
| MarkStoryReadActionType
| MessageChangedActionType
| MessageDeletedActionType
| ReactToStoryActionType
| ReplyToStoryActionType
| StoryChangedActionType
| ToggleViewActionType;
// Action Creators
export const actions = {
loadStoryReplies,
markStoryRead,
queueStoryDownload,
reactToStory,
@ -92,6 +125,26 @@ export const actions = {
export const useStoriesActions = (): typeof actions => useBoundActions(actions);
function loadStoryReplies(
conversationId: string,
messageId: string
): ThunkAction<void, RootStateType, unknown, LoadStoryRepliesActionType> {
return async dispatch => {
const replies = await dataInterface.getOlderMessagesByConversation(
conversationId,
{ limit: 9000, storyId: messageId }
);
dispatch({
type: LOAD_STORY_REPLIES,
payload: {
messageId,
replies,
},
});
};
}
function markStoryRead(
messageId: string
): ThunkAction<void, RootStateType, unknown, MarkStoryReadActionType> {
@ -225,11 +278,16 @@ function replyToStory(
mentions: Array<BodyRangeType>,
timestamp: number,
story: StoryViewType
): NoopActionType {
const conversation = window.ConversationController.get(conversationId);
): ThunkAction<void, RootStateType, unknown, ReplyToStoryActionType> {
return async dispatch => {
const conversation = window.ConversationController.get(conversationId);
if (conversation) {
conversation.enqueueMessageForSend(
if (!conversation) {
log.error('replyToStory: conversation does not exist', conversationId);
return;
}
const messageAttributes = await conversation.enqueueMessageForSend(
{
body: messageBody,
attachments: [],
@ -240,11 +298,13 @@ function replyToStory(
timestamp,
}
);
}
return {
type: 'NOOP',
payload: null,
if (messageAttributes) {
dispatch({
type: REPLY_TO_STORY,
payload: messageAttributes,
});
}
};
}
@ -285,11 +345,17 @@ export function reducer(
}
if (action.type === 'MESSAGE_DELETED') {
const nextStories = state.stories.filter(
story => story.messageId !== action.payload.id
);
if (nextStories.length === state.stories.length) {
return state;
}
return {
...state,
stories: state.stories.filter(
story => story.messageId !== action.payload.id
),
stories: nextStories,
};
}
@ -297,12 +363,15 @@ export function reducer(
const newStory = pick(action.payload, [
'attachment',
'conversationId',
'deletedForEveryone',
'messageId',
'readStatus',
'selectedReaction',
'sendStateByConversationId',
'source',
'sourceUuid',
'timestamp',
'type',
]);
// Stories don't really need to change except for when we don't have the
@ -326,6 +395,10 @@ export function reducer(
existingStory => existingStory.messageId === newStory.messageId
);
if (storyIndex < 0) {
return state;
}
return {
...state,
stories: replaceIndex(state.stories, storyIndex, newStory),
@ -374,5 +447,63 @@ export function reducer(
};
}
if (action.type === LOAD_STORY_REPLIES) {
return {
...state,
replyState: action.payload,
};
}
// For live updating of the story replies
if (
action.type === 'MESSAGE_CHANGED' &&
state.replyState &&
state.replyState.messageId === action.payload.data.storyId
) {
const { replyState } = state;
const messageIndex = replyState.replies.findIndex(
reply => reply.id === action.payload.id
);
// New message
if (messageIndex < 0) {
return {
...state,
replyState: {
messageId: replyState.messageId,
replies: [...replyState.replies, action.payload.data],
},
};
}
// Changed message, also handles DOE
return {
...state,
replyState: {
messageId: replyState.messageId,
replies: replaceIndex(
replyState.replies,
messageIndex,
action.payload.data
),
},
};
}
if (action.type === REPLY_TO_STORY) {
const { replyState } = state;
if (!replyState) {
return state;
}
return {
...state,
replyState: {
messageId: replyState.messageId,
replies: [...replyState.replies, action.payload],
},
};
}
return state;
}

204
ts/state/selectors/stories.ts
View File

@ -4,14 +4,22 @@
import { createSelector } from 'reselect';
import { pick } from 'lodash';
import type { GetConversationByIdType } from './conversations';
import type {
ConversationStoryType,
StoryViewType,
} from '../../components/StoryListItem';
import type { ReplyStateType } from '../../types/Stories';
import type { StateType } from '../reducer';
import type { StoriesStateType } from '../ducks/stories';
import type { StoryDataType, StoriesStateType } from '../ducks/stories';
import { ReadStatus } from '../../messages/MessageReadStatus';
import { getConversationSelector } from './conversations';
import { canReply } from './message';
import {
getContactNameColorSelector,
getConversationSelector,
getMe,
} from './conversations';
import { getUserConversationId } from './user';
export const getStoriesState = (state: StateType): StoriesStateType =>
state.stories;
@ -47,12 +55,148 @@ function sortByRecencyAndUnread(
return storyA.timestamp > storyB.timestamp ? -1 : 1;
}
function getConversationStory(
conversationSelector: GetConversationByIdType,
story: StoryDataType,
ourConversationId?: string
): ConversationStoryType {
const sender = pick(conversationSelector(story.sourceUuid || story.source), [
'acceptedMessageRequest',
'avatarPath',
'color',
'firstName',
'hideStory',
'id',
'isMe',
'name',
'profileName',
'sharedGroupNames',
'title',
]);
const conversation = pick(conversationSelector(story.conversationId), [
'acceptedMessageRequest',
'avatarPath',
'color',
'id',
'name',
'profileName',
'sharedGroupNames',
'title',
]);
const { attachment, timestamp } = pick(story, ['attachment', 'timestamp']);
const storyView: StoryViewType = {
attachment,
canReply: canReply(story, ourConversationId, conversationSelector),
isUnread: story.readStatus === ReadStatus.Unread,
messageId: story.messageId,
selectedReaction: story.selectedReaction,
sender,
timestamp,
};
return {
conversationId: conversation.id,
group: conversation.id !== sender.id ? conversation : undefined,
isHidden: Boolean(sender.hideStory),
stories: [storyView],
};
}
export type GetStoriesByConversationIdType = (
conversationId: string
) => ConversationStoryType;
export const getStoriesSelector = createSelector(
getConversationSelector,
getUserConversationId,
getStoriesState,
(
conversationSelector,
ourConversationId,
{ stories }: Readonly<StoriesStateType>
): GetStoriesByConversationIdType => {
return conversationId => {
const conversationStoryAcc: ConversationStoryType = {
conversationId,
stories: [],
};
return stories.reduce((acc, story) => {
if (story.conversationId !== conversationId) {
return acc;
}
const conversationStory = getConversationStory(
conversationSelector,
story,
ourConversationId
);
return {
...acc,
...conversationStory,
stories: [...acc.stories, ...conversationStory.stories],
};
}, conversationStoryAcc);
};
}
);
export const getStoryReplies = createSelector(
getConversationSelector,
getContactNameColorSelector,
getMe,
getStoriesState,
(
conversationSelector,
contactNameColorSelector,
me,
{ replyState }: Readonly<StoriesStateType>
): ReplyStateType | undefined => {
if (!replyState) {
return;
}
return {
messageId: replyState.messageId,
replies: replyState.replies.map(reply => {
const conversation =
reply.type === 'outgoing'
? me
: conversationSelector(reply.sourceUuid || reply.source);
return {
...pick(conversation, [
'acceptedMessageRequest',
'avatarPath',
'color',
'isMe',
'name',
'profileName',
'sharedGroupNames',
'title',
]),
...pick(reply, ['body', 'deletedForEveryone', 'id', 'timestamp']),
contactNameColor: contactNameColorSelector(
reply.conversationId,
conversation.id
),
};
}),
};
}
);
export const getStories = createSelector(
getConversationSelector,
getUserConversationId,
getStoriesState,
shouldShowStoriesView,
(
conversationSelector,
ourConversationId,
{ stories }: Readonly<StoriesStateType>,
isShowingStoriesView
): {
@ -70,58 +214,30 @@ export const getStories = createSelector(
const hiddenStoriesById = new Map<string, ConversationStoryType>();
stories.forEach(story => {
const sender = pick(
conversationSelector(story.sourceUuid || story.source),
[
'acceptedMessageRequest',
'avatarPath',
'color',
'firstName',
'hideStory',
'id',
'isMe',
'name',
'profileName',
'sharedGroupNames',
'title',
]
const conversationStory = getConversationStory(
conversationSelector,
story,
ourConversationId
);
const conversation = pick(conversationSelector(story.conversationId), [
'id',
'title',
]);
const { attachment, timestamp } = pick(story, [
'attachment',
'timestamp',
]);
let storiesMap: Map<string, ConversationStoryType>;
if (sender.hideStory) {
if (conversationStory.isHidden) {
storiesMap = hiddenStoriesById;
} else {
storiesMap = storiesById;
}
const storyView: StoryViewType = {
attachment,
isUnread: story.readStatus === ReadStatus.Unread,
messageId: story.messageId,
selectedReaction: story.selectedReaction,
sender,
timestamp,
};
const existingConversationStory = storiesMap.get(
conversationStory.conversationId
) || { stories: [] };
const conversationStory = storiesMap.get(conversation.id) || {
conversationId: conversation.id,
group: conversation.id !== sender.id ? conversation : undefined,
isHidden: Boolean(sender.hideStory),
stories: [],
};
storiesMap.set(conversation.id, {
storiesMap.set(conversationStory.conversationId, {
...existingConversationStory,
...conversationStory,
stories: [...conversationStory.stories, storyView],
stories: [
...existingConversationStory.stories,
...conversationStory.stories,
],
});
});

2
ts/state/smart/Stories.tsx
View File

@ -20,7 +20,6 @@ function renderStoryViewer({
onClose,
onNextUserStories,
onPrevUserStories,
stories,
}: SmartStoryViewerPropsType): JSX.Element {
return (
<SmartStoryViewer
@ -28,7 +27,6 @@ function renderStoryViewer({
onClose={onClose}
onNextUserStories={onNextUserStories}
onPrevUserStories={onPrevUserStories}
stories={stories}
/>
);
}

16
ts/state/smart/StoryViewer.tsx
View File

@ -4,15 +4,16 @@
import React from 'react';
import { useSelector } from 'react-redux';
import type { GetStoriesByConversationIdType } from '../selectors/stories';
import type { LocalizerType } from '../../types/Util';
import type { StateType } from '../reducer';
import type { StoryViewType } from '../../components/StoryListItem';
import { StoryViewer } from '../../components/StoryViewer';
import { ToastMessageBodyTooLong } from '../../components/ToastMessageBodyTooLong';
import {
getEmojiSkinTone,
getPreferredReactionEmoji,
} from '../selectors/items';
import { getStoriesSelector, getStoryReplies } from '../selectors/stories';
import { getIntl } from '../selectors/user';
import { getPreferredBadgeSelector } from '../selectors/badges';
import { renderEmojiPicker } from './renderEmojiPicker';
@ -27,7 +28,6 @@ export type PropsType = {
onClose: () => unknown;
onNextUserStories: () => unknown;
onPrevUserStories: () => unknown;
stories: Array<StoryViewType>;
};
export function SmartStoryViewer({
@ -35,7 +35,6 @@ export function SmartStoryViewer({
onClose,
onNextUserStories,
onPrevUserStories,
stories,
}: PropsType): JSX.Element | null {
const storiesActions = useStoriesActions();
const { onSetSkinTone } = useItemsActions();
@ -47,12 +46,22 @@ export function SmartStoryViewer({
getPreferredReactionEmoji
);
const getStoriesByConversationId = useSelector<
StateType,
GetStoriesByConversationIdType
>(getStoriesSelector);
const { group, stories } = getStoriesByConversationId(conversationId);
const recentEmojis = useRecentEmojis();
const skinTone = useSelector<StateType, number>(getEmojiSkinTone);
const replyState = useSelector(getStoryReplies);
return (
<StoryViewer
conversationId={conversationId}
getPreferredBadge={getPreferredBadge}
group={group}
i18n={i18n}
onClose={onClose}
onNextUserStories={onNextUserStories}
@ -76,6 +85,7 @@ export function SmartStoryViewer({
preferredReactionEmoji={preferredReactionEmoji}
recentEmojis={recentEmojis}
renderEmojiPicker={renderEmojiPicker}
replyState={replyState}
stories={stories}
skinTone={skinTone}
{...storiesActions}

18
ts/textsecure/MessageReceiver.ts
View File

@ -60,7 +60,11 @@ import type { UnprocessedType } from '../textsecure.d';
import { deriveGroupFields, MASTER_KEY_LENGTH } from '../groups';
import createTaskWithTimeout from './TaskWithTimeout';
import { processAttachment, processDataMessage } from './processDataMessage';
import {
processAttachment,
processDataMessage,
processGroupV2Context,
} from './processDataMessage';
import { processSyncMessage } from './processSyncMessage';
import type { EventHandler } from './EventTarget';
import EventTarget from './EventTarget';
@ -1813,6 +1817,17 @@ export default class MessageReceiver
});
}
const groupV2 = msg.group ? processGroupV2Context(msg.group) : undefined;
if (groupV2 && this.isGroupBlocked(groupV2.id)) {
log.warn(
`MessageReceiver.handleStoryMessage: envelope ${this.getEnvelopeId(
envelope
)} ignored; destined for blocked group`
);
this.removeFromCache(envelope);
return;
}
const expireTimer = Math.min(
Math.floor(
(envelope.serverTimestamp + durations.DAY - Date.now()) / 1000
@ -1844,6 +1859,7 @@ export default class MessageReceiver
attachments,
expireTimer,
flags: 0,
groupV2,
isStory: true,
isViewOnce: false,
timestamp: envelope.timestamp,

29
ts/types/Stories.ts Normal file
View File

@ -0,0 +1,29 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ContactNameColorType } from './Colors';
import type { ConversationType } from '../state/ducks/conversations';
export type ReplyType = Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'isMe'
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
> & {
body?: string;
contactNameColor?: ContactNameColorType;
deletedForEveryone?: boolean;
id: string;
reactionEmoji?: string;
timestamp: number;
};
export type ReplyStateType = {
messageId: string;
replies: Array<ReplyType>;
};