View next unread story improvements

ts/components/Stories.tsx

@@ -43,9 +43,23 @@ export const Stories = ({
   });
 
   const onNextUserStories = useCallback(() => {
+    // First find the next unread story if there are any
+    const nextUnreadIndex = stories.findIndex(conversationStory =>
+      conversationStory.stories.some(story => story.isUnread)
+    );
+
+    if (nextUnreadIndex >= 0) {
+      const nextStory = stories[nextUnreadIndex];
+      setConversationIdToView(nextStory.conversationId);
+      return;
+    }
+
+    // If not then play the next available story
     const storyIndex = stories.findIndex(
       x => x.conversationId === conversationIdToView
     );
+
+    // If we've reached the end, close the viewer
     if (storyIndex >= stories.length - 1 || storyIndex === -1) {
       setConversationIdToView(undefined);
       return;
@@ -59,7 +73,8 @@ export const Stories = ({
       x => x.conversationId === conversationIdToView
     );
     if (storyIndex <= 0) {
-      setConversationIdToView(undefined);
+      // Restart playback on the story if it's the oldest
+      setConversationIdToView(conversationIdToView);
       return;
     }
     const prevStory = stories[storyIndex - 1];

ts/components/StoryViewer.stories.tsx

@@ -37,6 +37,7 @@ function getDefaultProps(): PropsType {
     preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
     queueStoryDownload: action('queueStoryDownload'),
     renderEmojiPicker: () => <div />,
+    selectedStoryIndex: 0,
     stories: [
       {
         attachment: fakeAttachment({
@@ -106,11 +107,12 @@ story.add('Multi story', () => {
   );
 });
 
-story.add('So many stories', () => {
+story.add('So many stories (start on story 4)', () => {
   const sender = getDefaultConversation();
   return (
     <StoryViewer
       {...getDefaultProps()}
+      selectedStoryIndex={5}
       stories={Array(20).fill({
         attachment: fakeAttachment({
           url: '/fixtures/snow.jpg',

ts/components/StoryViewer.tsx

@@ -58,6 +58,7 @@ export type PropsType = {
   recentEmojis?: Array<string>;
   renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
   replyState?: ReplyStateType;
+  selectedStoryIndex: number;
   skinTone?: number;
   stories: Array<StoryViewType>;
   views?: Array<string>;
@@ -87,11 +88,13 @@ export const StoryViewer = ({
   recentEmojis,
   renderEmojiPicker,
   replyState,
+  selectedStoryIndex,
   skinTone,
   stories,
   views,
 }: PropsType): JSX.Element => {
-  const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
+  const [currentStoryIndex, setCurrentStoryIndex] =
+    useState(selectedStoryIndex);
   const [storyDuration, setStoryDuration] = useState<number | undefined>();
 
   const visibleStory = stories[currentStoryIndex];
@@ -140,6 +143,13 @@ export const StoryViewer = ({
     setHasExpandedCaption(false);
   }, [messageId]);
 
+  // In case we want to change the story we're viewing from 0 -> N
+  useEffect(() => {
+    if (selectedStoryIndex) {
+      setCurrentStoryIndex(selectedStoryIndex);
+    }
+  }, [selectedStoryIndex]);
+
   // Either we show the next story in the current user's stories or we ask
   // for the next user's stories.
   const showNextStory = useCallback(() => {