mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Allow paging through My Stories

Browse source
This commit is contained in:
Josh Perez 2022-08-22 13:44:23 -04:00 committed by GitHub
parent 70bdbe33d5
commit 6f7094bc19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 166 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ts/components/MyStories.tsx
View file

@ -85,7 +85,7 @@ export const MyStories = ({
onClick={() =>
viewStory({
storyId: story.messageId,
storyViewMode: StoryViewModeType.Single,
storyViewMode: StoryViewModeType.User,
})
}
type="button"
@ -148,7 +148,7 @@ export const MyStories = ({
onClick: () => {
viewStory({
storyId: story.messageId,
storyViewMode: StoryViewModeType.Single,
storyViewMode: StoryViewModeType.User,
shouldShowDetailsModal: true,
});
},

7
ts/components/Stories.tsx
View file

@ -16,7 +16,10 @@ import type { LocalizerType } from '../types/Util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { PropsType as SmartStoryCreatorPropsType } from '../state/smart/StoryCreator';
import type { ShowToastActionCreatorType } from '../state/ducks/toast';
import type { ViewStoryActionCreatorType } from '../state/ducks/stories';
import type {
ViewUserStoriesActionCreatorType,
ViewStoryActionCreatorType,
} from '../state/ducks/stories';
import { MyStories } from './MyStories';
import { StoriesPane } from './StoriesPane';
import { Theme, themeClassName } from '../util/theme';
@ -40,7 +43,7 @@ export type PropsType = {
stories: Array<ConversationStoryType>;
toggleHideStories: (conversationId: string) => unknown;
toggleStoriesView: () => unknown;
viewUserStories: (conversationId: string) => unknown;
viewUserStories: ViewUserStoriesActionCreatorType;
viewStory: ViewStoryActionCreatorType;
};

3
ts/components/StoriesPane.tsx
View file

@ -17,6 +17,7 @@ import type {
import type { LocalizerType } from '../types/Util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { ShowToastActionCreatorType } from '../state/ducks/toast';
import type { ViewUserStoriesActionCreatorType } from '../state/ducks/stories';
import { ContextMenu } from './ContextMenu';
import { MyStoriesButton } from './MyStoriesButton';
import { SearchInput } from './SearchInput';
@ -76,7 +77,7 @@ export type PropsType = {
stories: Array<ConversationStoryType>;
toggleHideStories: (conversationId: string) => unknown;
toggleStoriesView: () => unknown;
viewUserStories: (conversationId: string) => unknown;
viewUserStories: ViewUserStoriesActionCreatorType;
};
export const StoriesPane = ({

11
ts/components/StoryListItem.tsx
View file

@ -7,6 +7,7 @@ import type { ConversationType } from '../state/ducks/conversations';
import type { ConversationStoryType, StoryViewType } from '../types/Stories';
import type { LocalizerType } from '../types/Util';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { ViewUserStoriesActionCreatorType } from '../state/ducks/stories';
import { Avatar, AvatarSize } from './Avatar';
import { ConfirmationDialog } from './ConfirmationDialog';
import { ContextMenu } from './ContextMenu';
@ -24,10 +25,7 @@ export type PropsType = Pick<ConversationStoryType, 'group' | 'isHidden'> & {
onHideStory: (conversationId: string) => unknown;
queueStoryDownload: (storyId: string) => unknown;
story: StoryViewType;
viewUserStories: (
conversationId: string,
shouldShowDetailsModal?: boolean
) => unknown;
viewUserStories: ViewUserStoriesActionCreatorType;
};
function StoryListItemAvatar({
@ -138,7 +136,8 @@ export const StoryListItem = ({
{
icon: 'StoryListItem__icon--info',
label: i18n('StoryListItem__info'),
onClick: () => viewUserStories(conversationId, true),
onClick: () =>
viewUserStories({ conversationId, shouldShowDetailsModal: true }),
},
{
icon: 'StoryListItem__icon--chat',
@ -149,7 +148,7 @@ export const StoryListItem = ({
moduleClassName={classNames('StoryListItem', {
'StoryListItem--hidden': isHidden,
})}
onClick={() => viewUserStories(conversationId)}
onClick={() => viewUserStories({ conversationId })}
popperOptions={{
placement: 'bottom',
strategy: 'absolute',

4
ts/components/StoryViewer.stories.tsx
View file

@ -7,6 +7,7 @@ import React from 'react';
import type { PropsType } from './StoryViewer';
import enMessages from '../../_locales/en/messages.json';
import { SendStatus } from '../messages/MessageSendState';
import { StoryViewModeType } from '../types/Stories';
import { StoryViewer } from './StoryViewer';
import { VIDEO_MP4 } from '../types/MIME';
import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
@ -57,6 +58,9 @@ export default {
story: {
defaultValue: getFakeStoryView(),
},
storyViewMode: {
defaultValue: StoryViewModeType.All,
},
toggleHasAllStoriesMuted: { action: true },
viewStory: { action: true },
},

33
ts/components/StoryViewer.tsx
View file

@ -83,7 +83,7 @@ export type PropsType = {
showToast: ShowToastActionCreatorType;
skinTone?: number;
story: StoryViewType;
storyViewMode?: StoryViewModeType;
storyViewMode: StoryViewModeType;
toggleHasAllStoriesMuted: () => unknown;
viewStory: ViewStoryActionCreatorType;
};
@ -303,9 +303,22 @@ export const StoryViewer = ({
log.info('stories.markStoryRead', { messageId });
}, [markStoryRead, messageId]);
const canFreelyNavigateStories =
storyViewMode === StoryViewModeType.All ||
storyViewMode === StoryViewModeType.Unread;
const canNavigateLeft =
(storyViewMode === StoryViewModeType.User && currentIndex > 0) ||
canFreelyNavigateStories;
const canNavigateRight =
(storyViewMode === StoryViewModeType.User &&
currentIndex < numStories - 1) ||
canFreelyNavigateStories;
const navigateStories = useCallback(
(ev: KeyboardEvent) => {
if (ev.key === 'ArrowRight') {
if (canNavigateRight && ev.key === 'ArrowRight') {
viewStory({
storyId: story.messageId,
storyViewMode,
@ -313,7 +326,7 @@ export const StoryViewer = ({
});
ev.preventDefault();
ev.stopPropagation();
} else if (ev.key === 'ArrowLeft') {
} else if (canNavigateLeft && ev.key === 'ArrowLeft') {
viewStory({
storyId: story.messageId,
storyViewMode,
@ -323,7 +336,13 @@ export const StoryViewer = ({
ev.stopPropagation();
}
},
[story.messageId, storyViewMode, viewStory]
[
canNavigateLeft,
canNavigateRight,
story.messageId,
storyViewMode,
viewStory,
]
);
useEffect(() => {
@ -383,8 +402,6 @@ export const StoryViewer = ({
const replyCount = replies.length;
const viewCount = views.length;
const hasPrevNextArrows = storyViewMode !== StoryViewModeType.Single;
const canMuteStory = isVideoAttachment(attachment);
const isStoryMuted = hasAllStoriesMuted || !canMuteStory;
@ -453,7 +470,7 @@ export const StoryViewer = ({
style={{ background: getStoryBackground(attachment) }}
/>
<div className="StoryViewer__content">
{hasPrevNextArrows && (
{canNavigateLeft && (
<button
aria-label={i18n('back')}
className={classNames(
@ -685,7 +702,7 @@ export const StoryViewer = ({
)}
</div>
</div>
{hasPrevNextArrows && (
{canNavigateRight && (
<button
aria-label={i18n('forward')}
className={classNames(

9
ts/components/conversation/ContactModal.tsx
View file

@ -11,6 +11,8 @@ import type {
import type { BadgeType } from '../../badges/types';
import type { HasStories } from '../../types/Stories';
import type { LocalizerType, ThemeType } from '../../types/Util';
import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
import { StoryViewModeType } from '../../types/Stories';
import * as log from '../../logging/log';
import { About } from './About';
import { Avatar } from '../Avatar';
@ -42,7 +44,7 @@ type PropsActionType = {
toggleAdmin: (conversationId: string, contactId: string) => void;
toggleSafetyNumberModal: (conversationId: string) => unknown;
updateConversationModelSharedGroups: (conversationId: string) => void;
viewUserStories: (cid: string) => unknown;
viewUserStories: ViewUserStoriesActionCreatorType;
};
export type PropsType = PropsDataType & PropsActionType;
@ -179,7 +181,10 @@ export const ContactModal = ({
name={contact.name}
onClick={() => {
if (conversation && hasStories) {
viewUserStories(conversation.id);
viewUserStories({
conversationId: conversation.id,
storyViewMode: StoryViewModeType.User,
});
} else {
setView(ContactModalView.ShowingAvatar);
}

9
ts/components/conversation/ConversationHeader.tsx
View file

@ -21,6 +21,8 @@ import type { LocalizerType, ThemeType } from '../../types/Util';
import type { ConversationType } from '../../state/ducks/conversations';
import type { BadgeType } from '../../badges/types';
import type { HasStories } from '../../types/Stories';
import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
import { StoryViewModeType } from '../../types/Stories';
import { getMuteOptions } from '../../util/getMuteOptions';
import * as expirationTimer from '../../util/expirationTimer';
import { missingCaseError } from '../../util/missingCaseError';
@ -90,7 +92,7 @@ export type PropsActionsType = {
onArchive: () => void;
onMarkUnread: () => void;
onMoveToInbox: () => void;
viewUserStories: (cid: string) => unknown;
viewUserStories: ViewUserStoriesActionCreatorType;
};
export type PropsHousekeepingType = {
@ -232,7 +234,10 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
onClick={
hasStories
? () => {
viewUserStories(id);
viewUserStories({
conversationId: id,
storyViewMode: StoryViewModeType.User,
});
}
: undefined
}

9
ts/components/conversation/ConversationHero.tsx
View file

@ -10,6 +10,8 @@ import { GroupDescription } from './GroupDescription';
import { SharedGroupNames } from '../SharedGroupNames';
import type { LocalizerType, ThemeType } from '../../types/Util';
import type { HasStories } from '../../types/Stories';
import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
import { StoryViewModeType } from '../../types/Stories';
import { ConfirmationDialog } from '../ConfirmationDialog';
import { Button, ButtonSize, ButtonVariant } from '../Button';
import { shouldBlurAvatar } from '../../util/shouldBlurAvatar';
@ -30,7 +32,7 @@ export type Props = {
unblurredAvatarPath?: string;
updateSharedGroups: () => unknown;
theme: ThemeType;
viewUserStories: (cid: string) => unknown;
viewUserStories: ViewUserStoriesActionCreatorType;
} & Omit<AvatarProps, 'onClick' | 'size' | 'noteToSelf'>;
const renderMembershipRow = ({
@ -146,7 +148,10 @@ export const ConversationHero = ({
avatarOnClick = unblurAvatar;
} else if (hasStories) {
avatarOnClick = () => {
viewUserStories(id);
viewUserStories({
conversationId: id,
storyViewMode: StoryViewModeType.User,
});
};
}

3
ts/components/conversation/Message.tsx
View file

@ -1556,6 +1556,9 @@ export class Message extends React.PureComponent<Props, State> {
isViewOnce={false}
moduleClassName="StoryReplyQuote"
onClick={() => {
if (!storyReplyContext.storyId) {
return;
}
viewStory({
storyId: storyReplyContext.storyId,
storyViewMode: StoryViewModeType.Single,

169
ts/state/ducks/stories.ts
View file

@ -78,6 +78,7 @@ export type SelectedStoryDataType = {
messageId: string;
numStories: number;
shouldShowDetailsModal: boolean;
storyViewMode: StoryViewModeType;
};
// State
@ -94,7 +95,6 @@ export type StoriesStateType = {
verifiedUuids: Array<string>;
};
readonly stories: Array<StoryDataType>;
readonly storyViewMode?: StoryViewModeType;
};
// Actions
@ -172,12 +172,7 @@ type ToggleViewActionType = {
type ViewStoryActionType = {
type: typeof VIEW_STORY;
payload:
| {
selectedStoryData: SelectedStoryDataType;
storyViewMode: StoryViewModeType;
}
| undefined;
payload: SelectedStoryDataType | undefined;
};
export type StoriesActionType =
@ -787,10 +782,17 @@ const getSelectedStoryDataForConversationId = (
};
};
function viewUserStories(
conversationId: string,
shouldShowDetailsModal = false
): ThunkAction<void, RootStateType, unknown, ViewStoryActionType> {
export type ViewUserStoriesActionCreatorType = (opts: {
conversationId: string;
shouldShowDetailsModal?: boolean;
storyViewMode?: StoryViewModeType;
}) => unknown;
const viewUserStories: ViewUserStoriesActionCreatorType = ({
conversationId,
shouldShowDetailsModal = false,
storyViewMode,
}): ThunkAction<void, RootStateType, unknown, ViewStoryActionType> => {
return (dispatch, getState) => {
const { currentIndex, hasUnread, numStories, storiesByConversationId } =
getSelectedStoryDataForConversationId(dispatch, getState, conversationId);
@ -800,37 +802,36 @@ function viewUserStories(
dispatch({
type: VIEW_STORY,
payload: {
selectedStoryData: {
currentIndex,
messageId: story.messageId,
numStories,
shouldShowDetailsModal,
},
storyViewMode: hasUnread
? StoryViewModeType.Unread
: StoryViewModeType.All,
currentIndex,
messageId: story.messageId,
numStories,
shouldShowDetailsModal,
storyViewMode:
storyViewMode ||
(hasUnread ? StoryViewModeType.Unread : StoryViewModeType.All),
},
});
};
}
};
export type ViewStoryActionCreatorType = (opts: {
closeViewer?: boolean;
storyId?: string;
storyViewMode?: StoryViewModeType;
viewDirection?: StoryViewDirectionType;
shouldShowDetailsModal?: boolean;
}) => unknown;
export type ViewStoryActionCreatorType = (
opts:
| {
closeViewer: true;
}
| {
storyId: string;
storyViewMode: StoryViewModeType;
viewDirection?: StoryViewDirectionType;
shouldShowDetailsModal?: boolean;
}
) => unknown;
const viewStory: ViewStoryActionCreatorType = ({
closeViewer,
shouldShowDetailsModal = false,
storyId,
storyViewMode,
viewDirection,
}): ThunkAction<void, RootStateType, unknown, ViewStoryActionType> => {
const viewStory: ViewStoryActionCreatorType = (
opts
): ThunkAction<void, RootStateType, unknown, ViewStoryActionType> => {
return (dispatch, getState) => {
if (closeViewer || !storyId || !storyViewMode) {
if ('closeViewer' in opts) {
dispatch({
type: VIEW_STORY,
payload: undefined,
@ -838,6 +839,13 @@ const viewStory: ViewStoryActionCreatorType = ({
return;
}
const {
shouldShowDetailsModal = false,
storyId,
storyViewMode,
viewDirection,
} = opts;
const state = getState();
const { stories } = state.stories;
@ -852,6 +860,11 @@ const viewStory: ViewStoryActionCreatorType = ({
);
if (!story) {
log.warn('stories.viewStory: No story found', storyId);
dispatch({
type: VIEW_STORY,
payload: undefined,
});
return;
}
@ -868,12 +881,10 @@ const viewStory: ViewStoryActionCreatorType = ({
dispatch({
type: VIEW_STORY,
payload: {
selectedStoryData: {
currentIndex,
messageId: storyId,
numStories,
shouldShowDetailsModal,
},
currentIndex,
messageId: storyId,
numStories,
shouldShowDetailsModal,
storyViewMode,
},
});
@ -891,12 +902,10 @@ const viewStory: ViewStoryActionCreatorType = ({
dispatch({
type: VIEW_STORY,
payload: {
selectedStoryData: {
currentIndex: nextIndex,
messageId: nextStory.messageId,
numStories,
shouldShowDetailsModal: false,
},
currentIndex: nextIndex,
messageId: nextStory.messageId,
numStories,
shouldShowDetailsModal: false,
storyViewMode,
},
});
@ -911,18 +920,25 @@ const viewStory: ViewStoryActionCreatorType = ({
dispatch({
type: VIEW_STORY,
payload: {
selectedStoryData: {
currentIndex: nextIndex,
messageId: nextStory.messageId,
numStories,
shouldShowDetailsModal: false,
},
currentIndex: nextIndex,
messageId: nextStory.messageId,
numStories,
shouldShowDetailsModal: false,
storyViewMode,
},
});
return;
}
// We were just viewing a single user's stories. Close the viewer.
if (storyViewMode === StoryViewModeType.User) {
dispatch({
type: VIEW_STORY,
payload: undefined,
});
return;
}
// Are there any unviewed stories left? If so we should play the unviewed
// stories first. But only if we're going "next"
if (viewDirection === StoryViewDirectionType.Next) {
@ -940,12 +956,10 @@ const viewStory: ViewStoryActionCreatorType = ({
dispatch({
type: VIEW_STORY,
payload: {
selectedStoryData: {
currentIndex: nextSelectedStoryData.currentIndex,
messageId: unreadStory.messageId,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
},
currentIndex: nextSelectedStoryData.currentIndex,
messageId: unreadStory.messageId,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
storyViewMode,
},
});
@ -959,6 +973,13 @@ const viewStory: ViewStoryActionCreatorType = ({
);
if (conversationStoryIndex < 0) {
log.warn('stories.viewStory: No stories found for conversation', {
storiesLength: conversationStories.length,
});
dispatch({
type: VIEW_STORY,
payload: undefined,
});
return;
}
@ -1001,13 +1022,10 @@ const viewStory: ViewStoryActionCreatorType = ({
dispatch({
type: VIEW_STORY,
payload: {
selectedStoryData: {
currentIndex: 0,
messageId:
nextSelectedStoryData.storiesByConversationId[0].messageId,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
},
currentIndex: 0,
messageId: nextSelectedStoryData.storiesByConversationId[0].messageId,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
storyViewMode,
},
});
@ -1039,13 +1057,10 @@ const viewStory: ViewStoryActionCreatorType = ({
dispatch({
type: VIEW_STORY,
payload: {
selectedStoryData: {
currentIndex: 0,
messageId:
nextSelectedStoryData.storiesByConversationId[0].messageId,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
},
currentIndex: 0,
messageId: nextSelectedStoryData.storiesByConversationId[0].messageId,
numStories: nextSelectedStoryData.numStories,
shouldShowDetailsModal: false,
storyViewMode,
},
});
@ -1105,7 +1120,6 @@ export function reducer(
selectedStoryData: isShowingStoriesView
? undefined
: state.selectedStoryData,
storyViewMode: isShowingStoriesView ? undefined : state.storyViewMode,
};
}
@ -1341,12 +1355,9 @@ export function reducer(
}
if (action.type === VIEW_STORY) {
const { selectedStoryData, storyViewMode } = action.payload || {};
return {
...state,
selectedStoryData,
storyViewMode,
selectedStoryData: action.payload,
};
}

12
ts/state/selectors/stories.ts
View file

@ -263,25 +263,15 @@ export const getStories = createSelector(
getConversationSelector,
getDistributionListSelector,
getStoriesState,
shouldShowStoriesView,
(
conversationSelector,
distributionListSelector,
{ stories }: Readonly<StoriesStateType>,
isShowingStoriesView
{ stories }: Readonly<StoriesStateType>
): {
hiddenStories: Array<ConversationStoryType>;
myStories: Array<MyStoryType>;
stories: Array<ConversationStoryType>;
} => {
if (!isShowingStoriesView) {
return {
hiddenStories: [],
myStories: [],
stories: [],
};
}
const hiddenStoriesById = new Map<string, ConversationStoryType>();
const myStoriesById = new Map<string, MyStoryType>();
const storiesById = new Map<string, ConversationStoryType>();

7
ts/state/smart/StoryViewer.tsx
View file

@ -6,7 +6,6 @@ import { useSelector } from 'react-redux';
import type { GetConversationByIdType } from '../selectors/conversations';
import type { LocalizerType } from '../../types/Util';
import type { StoryViewModeType } from '../../types/Stories';
import type { StateType } from '../reducer';
import type { SelectedStoryDataType } from '../ducks/stories';
import { StoryViewer } from '../../components/StoryViewer';
@ -69,10 +68,6 @@ export function SmartStoryViewer(): JSX.Element | null {
);
const { conversationStory, storyView } = storyInfo;
const storyViewMode = useSelector<StateType, StoryViewModeType | undefined>(
state => state.stories.storyViewMode
);
const recentEmojis = useRecentEmojis();
const skinTone = useSelector<StateType, number>(getEmojiSkinTone);
const replyState = useSelector(getStoryReplies);
@ -120,7 +115,7 @@ export function SmartStoryViewer(): JSX.Element | null {
showToast={showToast}
skinTone={skinTone}
story={storyView}
storyViewMode={storyViewMode}
storyViewMode={selectedStoryData.storyViewMode}
toggleHasAllStoriesMuted={toggleHasAllStoriesMuted}
{...storiesActions}
/>

8
ts/types/Stories.ts
View file

@ -104,10 +104,16 @@ export enum StoryViewDirectionType {
Previous = 'Previous',
}
// Type of stories to view before closing the viewer
// All = All the stories in order
// Single = A single story. Like when clicking on a qouted story
// Unread = View only unread stories
// User = All of a user's stories
export enum StoryViewModeType {
Unread = 'Unread',
All = 'All',
Single = 'Single',
Unread = 'Unread',
User = 'User',
}
export type StoryDistributionListWithMembersDataType = Omit<