-
-
Notifications
You must be signed in to change notification settings - Fork 5
Merge new scrolling system to the main codebase branch #5
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
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Refactor `updateLyricsHighlight` to implement "Intelligent Scroll Logic with 'Scroll Ownership Windows'". This improves line synchronization and scrolling accuracy by correctly assigning scroll responsibility. - Introduce separate look-ahead values for scrolling and highlighting. - Update CSS to use variables (`--lyrics-scroll-padding-top`) for scroll padding. - Improve background vocal container transitions using `max-height` for smoother animations. - Adjust general lyrics line transitions for better visual fluidity.
This commit introduces a custom scrolling mechanism for the lyrics display, replacing the browser's native scroll behavior. Key changes include: - **Prevent native scrolling:** Wheel and touch events are now intercepted to prevent the default browser scroll action within the lyrics container. - **Custom `translateY` scrolling:** Lyrics lines are now scrolled by dynamically updating their `transform: translateY` property based on user input. - **User control:** A new `isUserControllingScroll` flag pauses automatic lyrics advancement when the user manually scrolls, allowing them to navigate freely. - **Smooth interaction:** A `user-scrolling` class is added during user interaction to temporarily disable CSS transitions on lyrics lines, preventing jerky movements. - **State management:** Scroll offsets and user control flags are reset when lyrics are cleared or changed. This enhancement provides a more fluid and controllable user experience for interacting with the lyrics.
Overhaul user scroll detection to differentiate between touch and mouse wheel input. This allows for: * Disabling CSS transitions during touch scrolling for immediate, 1:1 feedback. * Applying smooth gliding transitions for mouse wheel scrolling. * Preventing native browser scroll interference during custom scrolling. Also includes: * Performance improvements by adding `will-change` properties to frequently animated elements. * Adjustments to various CSS transition durations for a smoother visual experience. * Simplification of CSS selectors targeting the lyrics container.
Introduce `retimingActiveTimings` function in `lyricsRenderer.js` to accurately adjust lyric end times. This new algorithm uses a forward chain analysis to correctly handle: - Overlapping lines (A->B). - Concurrent triple overlaps (A->B->C where all are active). - Precursor overlaps (A->B->C where A finishes before C starts). - Small gaps between non-overlapping lines by extending the previous line's end time slightly. This improves the visual synchronization and flow of lyrics, especially for complex timing data. Enhance SponsorBlock bypass logic in `lyricsManager.js` to check for the `ignoreSponsorblock` flag within both the main lyrics object and its `metadata` property. This ensures SponsorBlock is correctly ignored for lyrics where the flag might be nested.
Introduce a two-pass system in `retimingActiveTimings` for improved accuracy and clarity. The first forward pass specifically handles a "precursor" overlap pattern (A->B->C where A does not overlap C). The second backward pass then handles general overlaps and extends lines into gaps, respecting lines processed by the first pass.
Implement CSS variable-based scrolling (`--lyrics-scroll-offset`) for smoother line transitions and introduce `var(--lyrics-line-delay)` for staggered animations. Refactor `scrollToActiveLine` to manage programmatic vs. user scrolling states and utilize a new animation method. Remove outdated class-based line positioning. Adjust transition timings for background vocals and translations. Update `cleanupLyrics` to use `LyricsPlusAPI`.
Introduce an automatic revert mechanism for user-controlled scrolling. After 4 seconds of user inactivity, the lyrics will automatically re-sync and scroll to the active line, returning control to the player. This enhances the user experience by ensuring the lyrics always follow the playback after a period of manual interaction.
Change how lyrics lines are marked as `viewport-hidden`. Now uses the `visibleLineIds` set instead of `getBoundingClientRect` calculations. This improves performance and consistency with the internal visibility tracking.
Continuously adjust the scroll position to keep the active lyric line in view when line heights change dynamically (e.g., due to font size or wrapping). This ensures the active line remains visible and only applies when the user is not manually controlling the scroll.
Adjust the calculation of the staggered animation delay for lyrics lines. The delay counter now only increments for lines at or after the first active line within the visible set. This ensures the "follow" animation effect correctly originates from the active line, preventing lines before it from having an unintended delay.
Improve `LyricsPlusRenderer` update efficiency by reducing DOM operations. - Filter active lines and apply `.active` classes only to currently visible lines. - Add an early exit to `_updateSyllables` to prevent processing when no lines are active. This significantly enhances performance, particularly for long lyrics, by minimizing unnecessary DOM manipulations.
Replaces the continuous scroll adjustment logic with a ResizeObserver. This ensures the active lyrics line remains correctly scrolled into view when the lyrics container's parent element resizes, improving the user experience during window resizing or dynamic UI changes.
Introduce `_cachedContainerRect` to store `top` positions of the lyrics container and its scrollable parent. Populate this cache when the parent container resizes via `ResizeObserver`. Utilize the cached values in `_scrollToActiveLine` to reduce redundant `getBoundingClientRect()` calls. Clear the cache after use to ensure fresh values on subsequent scrolls or forced updates. This improves performance by minimizing layout thrashing during scroll and resize events.
Introduce `lastPrimaryActiveLine` to track the previously active lyric line. Modify `_applyStaggeredLineDelays` to use either the current or last active line as the reference point for applying staggered delays. This ensures the visual "follow" effect correctly starts from the active or recently active line, providing a more consistent and smoother animation during line changes and initial rendering.
- Refactor song metadata styling by consolidating `lyrics-song-writters` and `lyrics-source-provider` into a new `.lyrics-plus-metadata` class for cleaner CSS. - Adjust the main lyrics container height to `max-content` to better fit content, with an override for message states to maintain full height. - Implement debounced resize handling for the lyrics container to optimize performance and prevent excessive recalculations during rapid window resizing. - Add new CSS classes for improved styling of empty lyrics states.
Refactor the lyrics scrolling logic in `updateLyricsHighlightAndScroll` to correctly identify the scroll anchor. The new approach finds the earliest starting line within the predictive time window, providing a more stable and accurate scroll position for overlapping lyric lines. Includes a fallback for gaps between lines.
Expanded the `translations` object in `src/localization.js` to include support for a wide range of new languages. This significantly enhances the application's internationalization and accessibility for global users.
Enhance the `getUserLanguage` function to provide a more robust language detection mechanism. It now attempts to find a matching dialect (e.g., 'es-ES' for 'es-MX') if the exact user language or its base language is not directly available in the translations. This reduces the likelihood of defaulting to 'en-US' when a suitable regional variant exists. Additionally, `userLang` now explicitly defaults to 'en-US' if `document.documentElement.lang` is empty.
Adds a `pre-highlight` class and CSS animations to provide a continous visual for syllables just before they become active. This improves the visual flow and anticipation of lyrics, supporting both LTR and RTL text directions.
Adjust the pre-highlight delay for the next syllable to be based on the character count of the current syllable. This ensures the pre-highlight ramp-up begins more accurately as the current syllable's characters are being wiped, providing a smoother visual transition.
Introduce a new "Custom KPoe" lyrics provider, enabling users to specify and use their own KPoe API endpoint. This feature includes: - A new setting for the custom KPoe API URL. - Integration into the lyrics fetching logic, including primary and fallback usage. - UI updates in the popup and settings page for configuration. - Input validation for the custom URL.
Pre-calculate animation properties for syllables to enable smoother and more accurate pre-highlighting transitions. Store `pre-highlight-duration`, `pre-highlight-timing-function`, and `nextSyllableId` directly on syllable elements, allowing for precise control over visual feedback before the next syllable becomes active. Update active lyrics line scaling in CSS to use `matrix3d` for more dynamic control and address layout issues for the integrated lyrics container within tabs by resetting its transform and adjusting its top position.
Introduce a list of KPoe API servers and modify `fetchKPoeLyrics` to iterate through them. This improves the reliability of lyrics fetching by attempting multiple endpoints if the primary one fails. - Define `KPOE_SERVERS` array with multiple API URLs. - Implement a loop in `fetchKPoeLyrics` to try each server sequentially. - Handle 404/403 responses as definitive "lyrics not found" for the current request, preventing further server attempts for that specific lyric. - Log other network or HTTP errors and proceed to the next server. - Update the `source` metadata in the returned lyrics to indicate which server successfully provided the data.
Cache lyric timing, pre-highlight properties, and character span references directly on syllable and word DOM elements. This avoids repeated access to `dataset` attributes and string parsing, improving performance during lyric rendering and animation updates.
Remove the appended hostname from the source metadata for lyrics fetched from KPoe. This simplifies the source string, making it cleaner and less verbose, as the primary source (KPoe) is already indicated.
Pass `fetchAndDisplayLyrics` and `setCurrentDisplayModeAndRefetch` functions to the `LyricsPlusRenderer`. This allows the renderer to store these functions and the current song/display mode state internally. The renderer now uses these stored properties to: - Create and manage the translation, romanization, and reload buttons. - Trigger re-fetches or display mode changes directly from user interactions within the lyrics display. - Improve button placement by appending them to the `#tab-renderer` element. This makes the `LyricsPlusRenderer` more self-contained and capable of handling its interactive elements.
Cache fetched lyrics in the manager to prevent unnecessary re-fetches when switching between translation and romanization modes. When a display mode change occurs, the manager now instructs the renderer to update its display directly using the cached lyrics, improving responsiveness. Refactor the renderer to support direct display mode updates and separate concerns for applying display classes and rendering translation containers.
This commit introduces the ability to display both translated and romanized lyrics concurrently. - **`lyricsManager.js`**: Adds a new 'both' display mode. When enabled, it fetches both translation and romanization data, merging the romanized text into the translated lyrics object for unified rendering. - **`lyricsRenderer.js`**: Updates the rendering logic to display original, translated, and romanized text within the same lyric line, utilizing distinct CSS containers for each. - **`stylesheet.css`**: Extends existing styles to apply to the new romanization container, ensuring consistent appearance and active line effects.
Update dual-side lyrics rendering to dynamically assign singers to left/right sides. Singers with odd 'vX' IDs are now mapped to the left, and even 'vX' IDs to the right. This replaces previous hardcoded checks (e.g., v1, v2), allowing for more flexible configurations. Refine 'isDualSide' detection to only activate when both left and right singers are present.
Update the manifest.json to reflect the new major release version.
Renamed the `compabilityVisibility` setting and its associated CSS class to `hideOffscreen` for better clarity. compabilityVisibility no longer be used post-scrolling system changes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
this update bring internal update & local bug fixes