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(() => {

ts/models/messages.ts

@@ -2437,9 +2437,10 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
 
           if (isStory(message.attributes)) {
             attributes.hasPostedStory = true;
+          } else {
+            attributes.active_at = now;
           }
 
-          attributes.active_at = now;
           conversation.set(attributes);
 
           if (
@@ -2542,6 +2543,7 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
         const isGroupStoryReply =
           isGroup(conversation.attributes) && message.get('storyId');
         if (
+          !isStory(message.attributes) &&
           !isGroupStoryReply &&
           (!conversationTimestamp ||
             message.get('sent_at') > conversationTimestamp)

ts/state/smart/StoryViewer.tsx

@@ -52,6 +52,8 @@ export function SmartStoryViewer({
   >(getStoriesSelector);
 
   const { group, stories } = getStoriesByConversationId(conversationId);
+  const unreadStoryIndex = stories.findIndex(story => story.isUnread);
+  const selectedStoryIndex = unreadStoryIndex > 0 ? unreadStoryIndex : 0;
 
   const recentEmojis = useRecentEmojis();
   const skinTone = useSelector<StateType, number>(getEmojiSkinTone);
@@ -86,6 +88,7 @@ export function SmartStoryViewer({
       recentEmojis={recentEmojis}
       renderEmojiPicker={renderEmojiPicker}
       replyState={replyState}
+      selectedStoryIndex={selectedStoryIndex}
       stories={stories}
       skinTone={skinTone}
       {...storiesActions}