remove broken karaoke mode
This commit is contained in:
Julien Maille
parent
9699c511ec
commit
7892bc53fc
4 changed files with 3 additions and 203 deletions
|
|
@ -356,7 +356,6 @@
|
|||
<option value="album">Show Album</option>
|
||||
<option value="cover">Enlarged Cover</option>
|
||||
<option value="lyrics">Lyrics Panel</option>
|
||||
<option value="karaoke">Karaoke Mode</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
|
|
|
|||
11
js/app.js
11
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');
|
||||
|
||||
|
|
|
|||
106
js/lyrics.js
106
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 = `
|
||||
<div class="karaoke-header">
|
||||
<button id="close-karaoke-btn" class="btn-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="karaoke-track-info">
|
||||
<div class="karaoke-title">${getTrackTitle(track)}</div>
|
||||
<div class="karaoke-artist">${getTrackArtists(track)}</div>
|
||||
</div>
|
||||
<div class="karaoke-lyrics-container" id="karaoke-lyrics"></div>
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
88
styles.css
88
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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue