Allow paging through My Stories
This commit is contained in:
parent
70bdbe33d5
commit
6f7094bc19
14 changed files with 166 additions and 122 deletions
|
@ -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(
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue