diff --git a/js/app.js b/js/app.js
index 52ee288..f9b175f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,7 +5,7 @@ import { apiSettings, themeManager, nowPlayingSettings, trackListSettings } from
import { UIRenderer } from './ui.js';
import { Player } from './player.js';
import { LastFMScrobbler } from './lastfm.js';
-import { LyricsManager, createLyricsPanel, showKaraokeView, showSyncedLyricsPanel, clearLyricsPanelSync } from './lyrics.js';
+import { LyricsManager, createLyricsPanel, showSyncedLyricsPanel, clearLyricsPanelSync } from './lyrics.js';
import { createRouter, updateTabTitle } from './router.js';
import { initializeSettings } from './settings.js';
import { initializePlayerEvents, initializeTrackInteractions, handleTrackAction } from './events.js';
@@ -143,10 +143,6 @@ function initializeKeyboardShortcuts(player, audioPlayer, lyricsPanel) {
lyricsPanel.classList.add('hidden');
clearLyricsPanelSync(audioPlayer, lyricsPanel);
}
- const karaokeView = document.getElementById('karaoke-view');
- if (karaokeView) {
- karaokeView.remove();
- }
break;
case 'l':
document.querySelector('.now-playing-bar .cover')?.click();
@@ -220,10 +216,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const mode = nowPlayingSettings.getMode();
- if (mode === 'karaoke') {
- alert('We have updated how lyrics work, with this, we have unfortunately disabled karaoke for the time being.')
-
- } else if (mode === 'lyrics') {
+ if (mode === 'lyrics') {
const isHidden = lyricsPanel.classList.contains('hidden');
lyricsPanel.classList.toggle('hidden');
diff --git a/js/lyrics.js b/js/lyrics.js
index b6cc304..d7d52d0 100644
--- a/js/lyrics.js
+++ b/js/lyrics.js
@@ -318,109 +318,3 @@ export function clearLyricsPanelSync(audioPlayer, panel) {
panel.lyricsCleanup = null;
}
}
-
-export function showKaraokeView(track, lyricsData, audioPlayer) {
- const view = document.createElement('div');
- view.id = 'karaoke-view';
- view.className = 'karaoke-view';
-
- const syncedLyrics = lyricsData.subtitles
- ? parseSyncedLyricsSimple(lyricsData.subtitles)
- : [];
-
- view.innerHTML = `
-
-
-
${getTrackTitle(track)}
-
${getTrackArtists(track)}
-
-
- `;
-
- document.body.appendChild(view);
-
- const lyricsContainer = view.querySelector('#karaoke-lyrics');
- syncedLyrics.forEach((line, index) => {
- const lineEl = document.createElement('div');
- lineEl.className = 'karaoke-line';
- lineEl.textContent = line.text;
- lineEl.dataset.index = index;
- lineEl.dataset.time = line.time;
- lyricsContainer.appendChild(lineEl);
- });
-
- let currentLineIndex = -1;
-
- const updateLyrics = () => {
- const currentTime = audioPlayer.currentTime;
- const newIndex = getCurrentLineIndex(syncedLyrics, currentTime);
-
- if (newIndex !== currentLineIndex) {
- currentLineIndex = newIndex;
-
- document.querySelectorAll('.karaoke-line').forEach((line, index) => {
- line.classList.remove('active', 'upcoming', 'past');
-
- if (index === currentLineIndex) {
- line.classList.add('active');
- } else if (index === currentLineIndex + 1) {
- line.classList.add('upcoming');
- } else if (index < currentLineIndex) {
- line.classList.add('past');
- }
- });
-
- if (currentLineIndex >= 0) {
- const activeLine = lyricsContainer.children[currentLineIndex];
- if (activeLine) {
- activeLine.scrollIntoView({ behavior: 'smooth', block: 'center' });
- }
- }
- }
- };
-
- // Use timeupdate event for better sync
- audioPlayer.addEventListener('timeupdate', updateLyrics);
-
- // Initial update
- updateLyrics();
-
- view.querySelector('#close-karaoke-btn').addEventListener('click', () => {
- audioPlayer.removeEventListener('timeupdate', updateLyrics);
- view.remove();
- });
-
- return view;
-}
-
-function parseSyncedLyricsSimple(subtitles) {
- const lines = subtitles.split('\n').filter(line => line.trim());
- return lines.map(line => {
- const match = line.match(/\[(\d+):(\d+)\.(\d+)\]\s*(.+)/);
- if (match) {
- const [, minutes, seconds, centiseconds, text] = match;
- const timeInSeconds = parseInt(minutes) * 60 + parseInt(seconds) + parseInt(centiseconds) / 100;
- return { time: timeInSeconds, text };
- }
- return null;
- }).filter(Boolean);
-}
-
-function getCurrentLineIndex(syncedLyrics, currentTime) {
- let currentIndex = -1;
- for (let i = 0; i < syncedLyrics.length; i++) {
- if (currentTime >= syncedLyrics[i].time) {
- currentIndex = i;
- } else {
- break;
- }
- }
- return currentIndex;
-}
diff --git a/styles.css b/styles.css
index 59d5406..a6af0c7 100644
--- a/styles.css
+++ b/styles.css
@@ -2827,12 +2827,7 @@ input:checked + .slider::before {
scroll-behavior: smooth;
}
-.lyrics-line {
- margin: 0.75rem 0;
- line-height: 1.6;
- color: var(--foreground);
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
+
/* Synced lyrics styling with Apple Music animations */
.synced-line {
@@ -2875,87 +2870,6 @@ input:checked + .slider::before {
color: var(--muted-foreground);
}
-/* Karaoke View */
-.karaoke-view {
- position: fixed;
- inset: 0;
- background: var(--background);
- z-index: 4000;
- display: flex;
- flex-direction: column;
- animation: fadeIn 0.3s ease;
-}
-
-.karaoke-header {
- padding: 1rem;
- display: flex;
- justify-content: flex-end;
-}
-
-.karaoke-track-info {
- text-align: center;
- padding: 2rem 1rem;
-}
-
-.karaoke-title {
- font-size: 2rem;
- font-weight: 700;
- margin-bottom: 0.5rem;
-}
-
-.karaoke-artist {
- font-size: 1.25rem;
- color: var(--muted-foreground);
-}
-
-.karaoke-lyrics-container {
- flex: 1;
- overflow-y: auto;
- padding: 2rem;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 1rem;
- scroll-behavior: smooth;
-}
-
-.karaoke-line {
- font-size: 1.5rem;
- line-height: 1.8;
- color: var(--muted-foreground);
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
- text-align: center;
- max-width: 800px;
- opacity: 0.35;
- transform: scale(0.92);
- filter: blur(1px);
- padding: 0.5rem 1rem;
-}
-
-.karaoke-line.active {
- color: var(--highlight);
- font-size: 2.25rem;
- font-weight: 700;
- opacity: 1;
- transform: scale(1.05);
- filter: blur(0);
- text-shadow: 0 0 30px rgba(var(--highlight-rgb), 0.4),
- 0 0 60px rgba(var(--highlight-rgb), 0.2);
- letter-spacing: 0.02em;
-}
-
-.karaoke-line.upcoming {
- opacity: 0.55;
- transform: scale(0.96);
- filter: blur(0.5px);
-}
-
-.karaoke-line.past {
- opacity: 0.25;
- transform: scale(0.88);
- filter: blur(1.5px);
-}
-
/* Mobile adjustments */
@media (max-width: 768px) {
.lyrics-panel {