Adds some logging to detect story playback order

ts/components/Stories.tsx

@@ -10,6 +10,7 @@ import type { PropsType as SmartStoryViewerPropsType } from '../state/smart/Stor
 import { StoriesPane } from './StoriesPane';
 import { Theme, themeClassName } from '../util/theme';
 import { getWidthFromPreferredWidth } from '../util/leftPaneWidth';
+import * as log from '../logging/log';
 
 export type PropsType = {
   hiddenStories: Array<ConversationStoryType>;
@@ -48,6 +49,8 @@ export const Stories = ({
       conversationStory.stories.some(story => story.isUnread)
     );
 
+    log.info('stories.onNextUserStories', { nextUnreadIndex });
+
     if (nextUnreadIndex >= 0) {
       const nextStory = stories[nextUnreadIndex];
       setConversationIdToView(nextStory.conversationId);
@@ -59,6 +62,11 @@ export const Stories = ({
       x => x.conversationId === conversationIdToView
     );
 
+    log.info('stories.onNextUserStories', {
+      storyIndex,
+      length: stories.length,
+    });
+
     // If we've reached the end, close the viewer
     if (storyIndex >= stories.length - 1 || storyIndex === -1) {
       setConversationIdToView(undefined);
@@ -72,6 +80,12 @@ export const Stories = ({
     const storyIndex = stories.findIndex(
       x => x.conversationId === conversationIdToView
     );
+
+    log.info('stories.onPrevUserStories', {
+      storyIndex,
+      length: stories.length,
+    });
+
     if (storyIndex <= 0) {
       // Restart playback on the story if it's the oldest
       setConversationIdToView(conversationIdToView);
@@ -95,7 +109,16 @@ export const Stories = ({
           <StoriesPane
             hiddenStories={hiddenStories}
             i18n={i18n}
-            onStoryClicked={setConversationIdToView}
+            onStoryClicked={clickedIdToView => {
+              const storyIndex = stories.findIndex(
+                x => x.conversationId === clickedIdToView
+              );
+              log.info('stories.onStoryClicked', {
+                storyIndex,
+                length: stories.length,
+              });
+              setConversationIdToView(clickedIdToView);
+            }}
             openConversationInternal={openConversationInternal}
             queueStoryDownload={queueStoryDownload}
             stories={stories}

ts/components/StoryViewer.tsx

@@ -33,6 +33,7 @@ import { getStoryDuration } from '../util/getStoryDuration';
 import { graphemeAwareSlice } from '../util/graphemeAwareSlice';
 import { isDownloaded, isDownloading } from '../types/Attachment';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
+import * as log from '../logging/log';
 
 export type PropsType = {
   conversationId: string;
@@ -183,6 +184,10 @@ export const StoryViewer = ({
     const unreadStoryIndex = storiesRef.current.findIndex(
       story => story.isUnread
     );
+    log.info('stories.findUnreadStory', {
+      unreadStoryIndex,
+      stories: storiesRef.current.length,
+    });
     setCurrentStoryIndex(unreadStoryIndex < 0 ? 0 : unreadStoryIndex);
   }, [conversationId]);
 
@@ -221,6 +226,12 @@ export const StoryViewer = ({
       if (shouldCancel) {
         return;
       }
+      log.info('stories.setStoryDuration', {
+        contentType: attachment.textAttachment
+          ? 'text'
+          : attachment.contentType,
+        duration,
+      });
       setStoryDuration(duration);
     })();
 
@@ -286,6 +297,7 @@ export const StoryViewer = ({
 
   useEffect(() => {
     markStoryRead(messageId);
+    log.info('stories.markStoryRead', { messageId });
   }, [markStoryRead, messageId]);
 
   // Queue all undownloaded stories once we're viewing someone's stories