bouzidanas / lyr-ix

A component for displaying synced song lyrics.

Hi there, I'm Anas 👋

A little about me...

• 🔭 I’m currently exploring the exciting realms of React and UI design, combining my passion for frontend development with creating beautiful and intuitive user interfaces.
• 🌱 I’m currently learning about the various ways other creative minds are using threejs to create fresh and engaging user experiences.
• 👯 I’m looking to collaborate on further developing rhp, a charting component library built entirely in React and designed with web devs in mind.
• 💬 Ask me about designing and developing in-house and open-source tools for developers and scientists alike, with a focus on Data Visualization 📊.

Languages and tools I have used before (or am currently using) include...

Backend

Frontend

Packaging

---

My Github stats...

lyr-ix's Issues

lyrics do not properly scroll to start position after mount

Scrolling to position works in after subsequent rerenders, but does not scroll to correct starting place right after component mounts.

The issue is likely related to changing dimensions. The only thing that comes to mind is the loading of fonts which can change div heights which can result in improper calculation of scroll distance.

Add a way to play/pause/goToLine from outside the component

The <Lyrics> component contains an internal timer that dictates the timing of the line-by-line highlighting. The component also has built-in interactivity and keyboard controls. However, there currently isnt any way to control the components line-by-line highlighting programmatically from outside the component.

This is an important feature that is required for actual syncing with music and thus, should to be implemented and tested before the first release.

Module '"lyr-ix"' has no exported member 'ActionsHandle'

somehow when I use npm install bouzidanas/lyr-ix to install and follow <LyrixCard> component in src/components/LyrixCard.js It's missing:

export type ActionsHandle = {
    play: () => void;
    pause: () => void;
    isPlaying: () => boolean;
  }

but in node-module: 

Although adding it solves the problem but it won't work in production. Can you have a check on it again?

stabilize inner timer

The logic around the handling of the inner timer needs to be improved.

Timer should be recreated/updated before every call of the timers play function. Since the timer needs to exist between renders, it will probably have to be stored in a ref. Note also, that the timer's delay needs to be updated to the next delay value before the execution of the next callback. The timing of this requirement is important and what poses a challenge.

The current approach is to recreate/update the timer on every render and prepare the delays for the next callback and the one after that. This ends up being problematic when the number of renders between timer callbacks varies. The latter has resulted in many conditionals surrounding the delay value.

Ultimately, I believe the best solution is neither of the above actually. I believe adding a couple of features to react-use-precision-timer will work best long term. The features to add are:

• ability to pass an array for the delay prop
• new starting index prop for the delay array whose value can be changed after creation of the timer.