[PR #2162] [MERGED] feat: improvements for plain-text and LRC lyrics #2118

New issue

Closed

opened 2026-02-26 03:33:19 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 03:33:19 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/koel/koel/pull/2162
Author: @phanan
Created: 10/30/2025
Status: ✅ Merged
Merged: 10/30/2025
Merged by: @phanan

Base: master ← Head: lrc-imprv

📝 Commits (1)

ec83db8 feat: improvements for plain-text and LRC lyrics

📊 Changes

22 files changed (+510 additions, -453 deletions)

View changed files

📝 resources/assets/js/components/album/__snapshots__/AlbumContextMenu.spec.ts.snap (+5 -5)
📝 resources/assets/js/components/artist/__snapshots__/ArtistContextMenu.spec.ts.snap (+5 -5)
📝 resources/assets/js/components/genre/__snapshots__/GenreContextMenu.spec.ts.snap (+3 -3)
📝 resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.vue (+7 -7)
📝 resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetPanelLazyWrapper.vue (+1 -5)
📝 resources/assets/js/components/podcast/__snapshots__/PodcastContextMenu.spec.ts.snap (+5 -5)
➖ resources/assets/js/components/ui/LyricsPane.spec.ts (+0 -140)
➖ resources/assets/js/components/ui/LyricsPane.vue (+0 -141)
➖ resources/assets/js/components/ui/SyncLyricsLine.spec.ts (+0 -31)
➖ resources/assets/js/components/ui/SyncLyricsLine.vue (+0 -38)
➖ resources/assets/js/components/ui/SyncLyricsPane.spec.ts (+0 -50)
➕ resources/assets/js/components/ui/lyrics/LrcLyricsLine.spec.ts (+32 -0)
➕ resources/assets/js/components/ui/lyrics/LrcLyricsLine.vue (+23 -0)
➕ resources/assets/js/components/ui/lyrics/LrcLyricsPane.spec.ts (+38 -0)
📝 resources/assets/js/components/ui/lyrics/LrcLyricsPane.vue (+52 -23)
➕ resources/assets/js/components/ui/lyrics/LyricsPane.spec.ts (+72 -0)
➕ resources/assets/js/components/ui/lyrics/LyricsPane.vue (+63 -0)
➕ resources/assets/js/components/ui/lyrics/__snapshots__/LrcLyricsPane.spec.ts.snap (+9 -0)
➕ resources/assets/js/components/ui/lyrics/__snapshots__/LyricsPane.spec.ts.snap (+7 -0)
➕ resources/assets/js/composables/useLyrics.spec.ts (+82 -0)

...and 2 more files

📄 Description

Description

Add a couple of improvements to lyrics handling:

A dedicated, well-tested useLyricscomposable
Better look-and-feel for LRC lyrics
Clicking on an LRC line seeks the audio to the corresponding timestamp
Hide the scrollbar while scrolling the active line to view

Motivation

Screenshots (if applicable)

Checklist

I've tested my changes thoroughly and added tests where applicable
I've updated relevant documentation (if any)
My code follows the project's conventions

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/koel/koel/pull/2162 **Author:** [@phanan](https://github.com/phanan) **Created:** 10/30/2025 **Status:** ✅ Merged **Merged:** 10/30/2025 **Merged by:** [@phanan](https://github.com/phanan) **Base:** `master` ← **Head:** `lrc-imprv` --- ### 📝 Commits (1) - [`ec83db8`](https://github.com/koel/koel/commit/ec83db82d2fcda7c303b9404fc526047e96d63ed) feat: improvements for plain-text and LRC lyrics ### 📊 Changes **22 files changed** (+510 additions, -453 deletions) <details> <summary>View changed files</summary> 📝 `resources/assets/js/components/album/__snapshots__/AlbumContextMenu.spec.ts.snap` (+5 -5) 📝 `resources/assets/js/components/artist/__snapshots__/ArtistContextMenu.spec.ts.snap` (+5 -5) 📝 `resources/assets/js/components/genre/__snapshots__/GenreContextMenu.spec.ts.snap` (+3 -3) 📝 `resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.vue` (+7 -7) 📝 `resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetPanelLazyWrapper.vue` (+1 -5) 📝 `resources/assets/js/components/podcast/__snapshots__/PodcastContextMenu.spec.ts.snap` (+5 -5) ➖ `resources/assets/js/components/ui/LyricsPane.spec.ts` (+0 -140) ➖ `resources/assets/js/components/ui/LyricsPane.vue` (+0 -141) ➖ `resources/assets/js/components/ui/SyncLyricsLine.spec.ts` (+0 -31) ➖ `resources/assets/js/components/ui/SyncLyricsLine.vue` (+0 -38) ➖ `resources/assets/js/components/ui/SyncLyricsPane.spec.ts` (+0 -50) ➕ `resources/assets/js/components/ui/lyrics/LrcLyricsLine.spec.ts` (+32 -0) ➕ `resources/assets/js/components/ui/lyrics/LrcLyricsLine.vue` (+23 -0) ➕ `resources/assets/js/components/ui/lyrics/LrcLyricsPane.spec.ts` (+38 -0) 📝 `resources/assets/js/components/ui/lyrics/LrcLyricsPane.vue` (+52 -23) ➕ `resources/assets/js/components/ui/lyrics/LyricsPane.spec.ts` (+72 -0) ➕ `resources/assets/js/components/ui/lyrics/LyricsPane.vue` (+63 -0) ➕ `resources/assets/js/components/ui/lyrics/__snapshots__/LrcLyricsPane.spec.ts.snap` (+9 -0) ➕ `resources/assets/js/components/ui/lyrics/__snapshots__/LyricsPane.spec.ts.snap` (+7 -0) ➕ `resources/assets/js/composables/useLyrics.spec.ts` (+82 -0) _...and 2 more files_ </details> ### 📄 Description  ## Description Add a couple of improvements to lyrics handling: * A dedicated, well-tested `useLyrics`composable * Better look-and-feel for LRC lyrics * Clicking on an LRC line seeks the audio to the corresponding timestamp * Hide the scrollbar while scrolling the active line to view ## Motivation  ## Screenshots (if applicable) ## Checklist - [x] I've tested my changes thoroughly and added tests where applicable - [x] I've updated relevant documentation (if any) - [x] My code follows the project's conventions --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-02-26 03:33:19 +03:00

closed this issue
added the
pull-request
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/koel-koel#2118

No description provided.

Rows
Columns