#179 [Feature] Viewing Stories

[Anonymous]

Originally created by: supreme-gg-gg

Summary

This PR closes [#87] by adding a instagram-cli stories command that renders the new stories view. The behaviour should closely mimic Instagram web / mobile. This feature is experimental, see the first comment below Bumps version to 1.3.0.

Data flow

This happens after running the command:

• Use the reelsTray endpoint for recommended stories from Meta, this builds the initial unread stories list (this list is usually extremely large! For example, on my personal account this is nearly 100 items! It contains all the unread stories that your account has, fetching everything at once is suicidal 💀 ). reelsTray is quite lightweight because it only contains "metadata" instead of the actual story content (as opposed to the documentation 😭), we use this to get a list of users whom we need to check, this is ALSO ranked (it returns a list of ranked scores)
• The useStories hook will then fetch and populate one story, then prefetch two more using (not awaited) the getStoryFromUser function that calls the userStory endpoint, this returns the actual story content and we cache it by userID so navigating back is fast
• Lazy loading is implemented by returning a loadMore(index) callback from the hook, this loads the next 3 stories but two of them should be prefetched already so it load the 3rd story from current index. Prefetching will help reduce loading time
• The Story View will call loadMore whenever the user navigates the list of stories, we group story items by user to display it like a Carousel. Meanwhile, we send read status for the story by building a local set of read story IDs, this operation is not awaited.
• s key enters Search Mode, where the user types an username (NOT display name) and we search for the corresponding userId then stories for that user, which gets prepended to the top of the list
• Videos can be opened in the browser as usual

Unironically, the reelsTray endpoint name very well describes what Instagram does and we shall illustrate it with a little bit of AI slop here. Another piece of daily motivation to migrate to Instagram CLI and save yourself 😄:

Type Definitions

• Story is an object that carries image and/or video and metadata
• StoryReel is a "Story" that you see as a circle object that you can click open, it associates a User with a list of Stories
• ReelMentions is Users[] that indicate the users being mentioned in the story, monkey patched!

Chore

• Moved all logger usage to outside of the component and removed all logger references from useEffect dep list
• Renamed and combined a few CI, made sure that Typescript CI runs on pushes to main
• Removed all console.xxx statements and turned on warning in the linter, use logger whenever possible!
• Refactored media components -- media pane and Split View, shared them over feed and the new stories view

Todo

• Add option to refresh the reelsTray, this updates for example when new stories appears, we can partially refresh (i.e. keeping the existing cache) or totally refresh (discard everything), when refreshing we would use pull_refresh instead of cold_start (handled already by the client) so we get the latest recommendations -- I don't think this is really necessary in most cases unless you are a supercalifragilisticexpialidocious brainrotter

[Anonymous]

Originally posted by: supreme-gg-gg

@endernoke there are two outstanding issues that I could not really figure out why:

1. (CRITICAL) Somehow this is very likely to get flagged by Instagram... Instagrapi also uses reels_tray and it's a standard post-login flow, so that shouldn't be causing the problem. Then the only cause would be getting user stories, instagrapi indeed uses a different GraphQL (public API) endpoint first before using the private one see here. Their private endpoint is identical to what I currently use. Not sure how big an impact this is, but let's be cautious and mark this as experimental for now!

2. (NOT URGENT) Most strong flickering and lagging are gone 🥳 , but from time to time on certain reels you get a very long loading time with "loading media..." placeholder then the entire screen just blanks for 2-3 seconds before returning with rendered story. I investigated all possible causes known to me, like Ink redrawing, React state updates, awaiting for API, but even after fixing a few and checking the rest this is persistent. From my experience this does not seriously affect usability

If you have any idea what's going on for either one lmk, otherwise it's usable for now I would suggest just merging this, however we should definitely mark this as an experimental and risky feature because of the first issue I described...

[Anonymous]

Originally posted by: endernoke

(CRITICAL) Somehow this is very likely to get flagged by Instagram... Instagrapi also uses reels_tray and it's a standard post-login flow, so that shouldn't be causing the problem. Then the only cause would be getting user stories, instagrapi indeed uses a different GraphQL (public API) endpoint first before using the private one see here. Their private endpoint is identical to what I currently use. Not sure how big an impact this is, but let's be cautious and mark this as experimental for now!

I don't think trying public request first makes any difference. In the official clients it's always private request only for private profiles

[Anonymous]

Ticket changed by: supreme-gg-gg

• status: open --> closed