💡 [REQUEST] - Pause the story if user changes browser's tab

[Gauravdarkslayer]

Start Date

No response

Implementation PR

No response

Reference Issues

No response

Summary

To enhance the user experience when watching stories, we want to implement a feature where the story playback is automatically paused if the user switches to another browser tab or window. This ensures that no part of the story is missed during an inactive state. When the browser tab becomes active again, the story should automatically resume from where it was paused, without requiring manual intervention from the user.

This feature can be implemented by utilizing the visibilitychange event provided by the Page Visibility API. The event detects when the browser tab becomes hidden (indicating a tab switch or window minimization) and triggers actions based on the visibility state.

In this context:

• When the visibilitychange event is fired and the document becomes hidden, the story should pause, and any ongoing progress (like a progress bar) should also stop.
• When the document visibility changes back to visible (when the user switches back to the tab), the story should automatically resume from where it paused, including the progress bar.

This provides a seamless and intuitive experience for users who navigate away from the tab, ensuring they don’t miss any content while keeping the interaction effortless.

Basic Example

No response

Drawbacks

No response

Unresolved questions

No response

[Piyush-Goenka]

Hey , @Gauravdarkslayer I’m excited to implement the story playback pause feature using the Page Visibility API. We’ll listen for the visibilitychange event to pause playback and progress when the tab is hidden, resuming seamlessly when it’s active. Please assign this issue to me!

[Gauravdarkslayer]

Sure @Piyush-Goenka , Hoping for a great contribution from your end !!

[Gauravdarkslayer]

@Piyush-Goenka Any update on this issue ? Let me know if you're facing any challenges around the same.