💡 [REQUEST] - Add onStoryGroupChange event emitter

Start Date

No response

Implementation PR

No response

Reference Issues

Summary

There is currently no way for developers to detect when a user navigates from one group of stories (a person’s story set) to another. Having an event emitter for such changes would be highly beneficial for cases where custom actions are required when transitioning between different story groups.

Proposed Solution:

Event Triggering:

The onStoryGroupChange event should fire whenever a user moves to a different person’s story set, either by swiping to the next group or navigating back to the previous one. The event should provide details about the newly active person and their story group, enabling developers to react accordingly.

Event Payload:

The event should emit an object containing at least the following information: currentPerson: Person: The person whose story group is currently active. currentPersonIndex: number: The index of the currently active person in the list. previousPerson?: Person (optional): The person whose stories were previously displayed (for tracking navigation history). previousPersonIndex?: number (optional): The index of the previously active person.

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 onStoryGroupChange event is emitted every time the user transitions from one person’s story group to another. The event payload contains the currently active person, their index, and optionally the previously active person and their index. The event can be subscribed to and used to trigger custom logic in the consuming application.

Basic Example

Example usage

<ngx-stories
  [persons]="persons"
  (onStoryGroupChange)="handleGroupChange($event)"
></ngx-stories>

handleGroupChange(event: {
  currentPerson: Person,
  currentPersonIndex: number,
  previousPerson?: Person,
  previousPersonIndex?: number,
}) {
  console.log('Current person:', event.currentPerson);
  console.log('Current story:', event.currentStory);
  console.log('Current person index:', event.currentPersonIndex);
  console.log('Previous person:', event.previousPerson);
}

Drawbacks

No response

Unresolved questions

No response

Gauravdarkslayer / ngx-stories