Add Support for Tracking and Prioritizing Unseen Stories

[Adil7767]

Title: Add Support for Tracking and Prioritizing Unseen Stories Across Devices

Issue Text:

Enhance the story playback functionality to prioritize unseen stories and maintain a persistent record of seen stories across devices.

Current Behavior:

• When new stories are added, the playback starts from the first story, regardless of whether it has been seen before.
• The library does not support passing already seen stories, leading to a non-optimal user experience when switching devices.

Expected Behavior:

• Stories with is_seen: true should be considered as already seen.
• Unseen stories (is_seen: false) should be played first.
• If all stories are seen, playback should start from the first story.
• The status of seen stories should be consistent across devices by leveraging server-side storage.

Steps to Reproduce:

1. Add 4 stories and view all of them.
2. Add a new story and observe that playback starts from the first story instead of the unseen one.
3. Save the status of seen stories on one device and log in on another device to see that the status is not retained.

Possible Solution:

1. Introduce a mechanism to pass a list of stories with a key is_seen indicating whether the story has been seen.
2. Modify the playback logic to prioritize unseen stories.
3. Ensure that the status of seen stories can be fetched from and saved to the server, allowing for a consistent experience across devices.

Data Structure Example:

const stories = [{
  id: 'user1',
  name: 'User 1',
  imgUrl: 'user1-profile-image-url',
  stories: [
    { id: 'story1', is_seen: true, source: { uri: 'story1-image-url' } },
    { id: 'story2', is_seen: false, source: { uri: 'story2-video-url' }, mediaType: 'video' },
    // ...
  ]
}, 
// ...
];

• If is_seen is not passed, consider it as false.

Alternative Approach:

Pass a separate array for seen stories:

const seenStories = [{
  id: 'user1',
  name: 'User 1',
  imgUrl: 'user1-profile-image-url',
  stories: [
    { id: 'story1', is_seen: true, source: { uri: 'story1-image-url' } },
    { id: 'story2', is_seen: false, source: { uri: 'story2-video-url' }, mediaType: 'video' },
    // ...
  ]
},
// ...
];

<InstagramStories
  ref={instagramStoriesRef}
  isVisible={isVisible}
  stories={stories}
  saveProgress={true}
  seenStories={seenStories}
/>

Additional Note:

The saveProgress prop is suitable for device-oriented usage but not for multiple users.

[Adil7767]

@LukasFridmansky