💡 [REQUEST] - Add onStoryChange event emitter

[Gauravdarkslayer]

Referenced Issue:
24

Summary

This request proposes the introduction of an onStoryChange event emitter in the ngx-stories component to notify developers when a user navigates from one story to another within a person’s story group.

Event Triggering:

The onStoryChange event should fire every time a user moves to a different story within the same person’s story group.
This event should also be triggered when the story changes automatically due to the built-in autoplay feature.
It should provide details about the newly active story, including the story index and the currently active person.
Event Payload:

The event should emit an object containing the following information:
currentPerson: Person: The person whose story is currently being viewed.
currentPersonIndex: number: The index of the currently active person in the list.
currentStory: Story: The specific story being viewed in the person’s story group.
currentStoryIndex: number: The index of the currently active story in the person’s story array.
previousStory?: Story (optional): The story that was previously viewed before the current one.
previousStoryIndex?: number (optional): The index of the previously viewed story.
Use Cases:

Story-based Analytics: Track which specific stories within a person’s group are being viewed, and for how long.
UI Updates: Modify on-screen information, such as captions, controls, or overlays, based on the currently active story type (e.g., image or video).
Autoplay Actions: Developers can respond to autoplay events and detect when a story automatically changes due to the timer.

Use Cases:

Analytics: Track how many users view specific story groups, or record the time spent on each person’s stories.
Custom UI Updates: Modify UI elements or display additional information based on the currently active person’s stories.
Conditional Logic: Trigger actions such as loading new data when a user navigates to a specific story group.

Acceptance Criteria:
The onStoryChange event is emitted every time a user moves to a different story within a person’s story group.
The event payload contains details about the currently active person, their current story, and optionally the previous story.
The event can be subscribed to and used to trigger custom logic such as analytics, dynamic content, or UI updates.

Basic Example

handleStoryChange(event: {
  currentPerson: Person,
  currentPersonIndex: number,
  currentStory: Story,
  currentStoryIndex: number,
  previousStory?: Story,
  previousStoryIndex?: number
}) {
  console.log('Current person:', event.currentPerson);
  console.log('Current story:', event.currentStory);
  console.log('Previous story:', event.previousStory);
}

Drawbacks

No response

Unresolved questions

No response

[github-actions]

Hey @Gauravdarkslayer, Thanks for contributing and Congrats on opening Issue 🎉

We will try to review as soon as possible and a maintainer will get back to you soon!

[Ashu1823]

Hi..
Intrested to work in this issue.
Can you please assign it to me?

[Gauravdarkslayer]

Sure, Assigned @Ashu1823

[Gauravdarkslayer]

Hi @Ashu1823 ,
I've implemented onStoryGroupChange event emitter, so you can take reference from there.

[Ashu1823]

Hi @Gauravdarkslayer sure I will through your modifications and I will follow the same way.

[Gauravdarkslayer]

Closing this issue as it's now implemented successfully !