Skip to content

Add feature: allow the option to pass an array of consecutive delay values to the delay option of useTimer#22

Open
bouzidanas wants to merge 16 commits intojustinmahar:masterfrom
bouzidanas:master
Open

Add feature: allow the option to pass an array of consecutive delay values to the delay option of useTimer#22
bouzidanas wants to merge 16 commits intojustinmahar:masterfrom
bouzidanas:master

Conversation

@bouzidanas
Copy link
Copy Markdown

Many playback elements (that might have use for a precision timer) have a set of fixed known timestamps where events or UI changes are triggered. Things like slides, carousels, video sections, etc. Setting up the timer so that delay changes while the timer is playing (without interrupting the timer) can create challenges and code/render overhead.

For example, in one of my projects, I tried various options and I did end up with working solutions. However, I realized that all the code I added to my components render functions really belong inside of the useTimer! My solution looked a lot like I was working around the constraints/limitations of useTimer instead of my application. My workaround also made my code harder to maintain and harder to follow, etc.

So I solved my issues in a better way by adding a couple of features to useTimer:

  1. Added the option to pass an array of values to options.delay. So now:
export interface TimerOptions {
  /** Amount of time to wait before firing the timer, in milliseconds. Use `undefined` or `0` if you'd like the timer to behave as a stopwatch, never firing. */
  delay?: number | number[];
//...
}

This required changes to how delay is set and changes to the useEffect that fires the callback.
2. Added an argument to the start() function to allow changing starting position in the delay array. This allows for navigating to different timestamps in my app.
Note: I originally also added a startIndex to TimerOptions but later removed it because it promotes poor/inefficient solutions such as creating a new useTimer (with new startIndex) just to change play position. The better way is to provide a delayIndex value to the start function. Like for example,

timer.start(undefined, 2); //start at 3rd position (start with 3rd value in delay array)

With these added features I was able to maintain a single stable timer object while changing delays during uninterupted play.

Because this was useful to me and likely useful in many other scenerios, I thought I would make this pull request so that others may benefit from this open-source react utility library.

@bouzidanas
Copy link
Copy Markdown
Author

bouzidanas commented Dec 28, 2023

I forgot to mention that the changes I made (additions) should not be breaking changes. In fact, I structured the code I added so that it is clear the previous code gets executed when the new options are not used.

I also updated a bunch of packages so there should be 0 vulnerabilities.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant