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