Allow paging through My Stories

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

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(