Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement: Inactive activity indicator on progress bar #1039

Merged
merged 15 commits into from
Oct 31, 2022

Conversation

DexxDing
Copy link
Contributor

Before implementing this feature:

There was no way to view which part of the replay is inactive.
before

After implementing this feature:

The part of progress bar that contains non-active user behavior becomes gray so that the user can choose to skip it or not. We have created a function to detect inactive events or cycles and added a div tag to the progress bar within a cycle as an indicator
after

Demonstration video:

The screen on the left is the previous replayer, the one on the right is latest replayer after implementing this feature:

demo_edited.mp4

close #621

fengyun5264 and others added 13 commits October 29, 2022 17:26
update Controller.svelte: add a fixed div element as an indicator
…ods-and-use-util

update Controller.svelte: add a variable inactivePeriods and use util
update Controller.svelte: add width property for inactive activity indicators
…ith-indicator-UI

update Controller.svelte: combine calculation value with indicator UI
update Controller.svelte: apply Zihan's suggestion #5 (comment)
implement inactive activity indicator on progress bar including following features:
 a util function for detecting inactive periods
 implementation of indicator UI on progress bar
 get session events in Control.svelte and invoke util function to get invalid periods
 calculate width of indicator according to the period length
 combine calculation value with indicator UI
 manual test and bug fix
 improved code quality
Copy link
Member

@Yuyz0112 Yuyz0112 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very cool, looks like we can move some utils to a shared package in the future!

packages/rrweb-player/src/Controller.svelte Outdated Show resolved Hide resolved
fengyun5264 and others added 2 commits October 31, 2022 15:26
Copy link
Member

@Yuyz0112 Yuyz0112 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature request: Inactive activity indicator on progressbar
7 participants