Skip to content

Commit d324690

Browse files
switzswitz
committed
Update UI, fix minor check
1 parent 27a47a2 commit d324690

File tree

2 files changed

+79
-37
lines changed

2 files changed

+79
-37
lines changed

‎index.html‎

Lines changed: 76 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,27 @@
3737
</style>
3838
</head>
3939
<body class="bg-gray-900 text-white min-h-screen">
40-
<div class="max-w-4xl mx-auto p-6">
40+
<div class="max-w-4xl mx-auto p-4">
4141
<!-- Header -->
42-
<header class="text-center mb-10">
43-
<h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
42+
<header class="text-center mb-6">
43+
<h1 class="text-3xl font-bold mb-1 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
4444
Gapless.js Demo
4545
</h1>
46-
<p class="text-gray-400">Experience seamless audio playback with zero gaps between tracks</p>
46+
<p class="text-gray-400 text-sm">Experience seamless audio playback with zero gaps between tracks</p>
4747
</header>
4848

4949
<!-- Main Player -->
50-
<div class="bg-gray-800 rounded-2xl shadow-2xl p-8 mb-6">
50+
<div class="bg-gray-800 rounded-xl shadow-2xl p-6 mb-4">
5151
<!-- Current Track Info -->
52-
<div class="text-center mb-6">
53-
<h2 id="currentTrackTitle" class="text-2xl font-semibold mb-2">No track loaded</h2>
54-
<div id="trackStatus" class="text-sm text-gray-400 mb-4">
52+
<div class="text-center mb-4">
53+
<h2 id="currentTrackTitle" class="text-xl font-semibold mb-1">No track loaded</h2>
54+
<div id="trackStatus" class="text-sm text-gray-400">
5555
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
5656
</div>
5757
</div>
5858

5959
<!-- Visualizer -->
60-
<div class="flex justify-center items-center h-12 mb-6" id="visualizer">
60+
<div class="flex justify-center items-center h-8 mb-4" id="visualizer">
6161
<div class="flex items-end h-full" id="soundwaveBars" style="display: none;">
6262
<div class="soundwave-bar"></div>
6363
<div class="soundwave-bar"></div>
@@ -68,50 +68,55 @@ <h2 id="currentTrackTitle" class="text-2xl font-semibold mb-2">No track loaded</
6868
</div>
6969

7070
<!-- Progress Bar -->
71-
<div class="mb-6">
72-
<div class="bg-gray-700 rounded-full h-3 overflow-hidden cursor-pointer" id="progressContainer">
71+
<div class="mb-4">
72+
<div class="bg-gray-700 rounded-full h-2 overflow-hidden cursor-pointer" id="progressContainer">
7373
<div class="progress-bar bg-gradient-to-r from-blue-500 to-purple-500 h-full rounded-full" id="progressBar" style="width: 0%"></div>
7474
</div>
7575
</div>
7676

7777
<!-- Controls -->
78-
<div class="flex justify-center items-center space-x-6 mb-6">
79-
<button id="prevBtn" class="p-3 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
80-
<i class="fas fa-backward text-xl"></i>
78+
<div class="flex justify-center items-center space-x-4 mb-4">
79+
<button id="prevBtn" class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
80+
<i class="fas fa-backward text-lg"></i>
8181
</button>
82-
<button id="playPauseBtn" class="p-4 rounded-full bg-blue-600 hover:bg-blue-700 transition-colors playing-indicator">
83-
<i class="fas fa-play text-2xl w-8 text-center" id="playPauseIcon"></i>
82+
<button id="playPauseBtn" class="p-3 rounded-full bg-blue-600 hover:bg-blue-700 transition-colors playing-indicator">
83+
<i class="fas fa-play text-xl w-6 text-center" id="playPauseIcon"></i>
8484
</button>
85-
<button id="nextBtn" class="p-3 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
86-
<i class="fas fa-forward text-xl"></i>
85+
<button id="nextBtn" class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors">
86+
<i class="fas fa-forward text-lg"></i>
8787
</button>
8888
</div>
8989

90-
<!-- Volume Control -->
91-
<div class="flex items-center justify-center space-x-3">
92-
<i class="fas fa-volume-down text-gray-400"></i>
93-
<input type="range" id="volumeSlider" min="0" max="100" value="70"
94-
class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
95-
<i class="fas fa-volume-up text-gray-400"></i>
90+
<!-- Volume Control and Test Button -->
91+
<div class="flex items-center justify-center space-x-6">
92+
<div class="flex items-center space-x-2">
93+
<i class="fas fa-volume-down text-gray-400 text-sm"></i>
94+
<input type="range" id="volumeSlider" min="0" max="100" value="70"
95+
class="w-24 h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer">
96+
<i class="fas fa-volume-up text-gray-400 text-sm"></i>
97+
</div>
98+
<button id="skipToEndBtn" class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-sm rounded-full transition-colors">
99+
Skip to End (-5s)
100+
</button>
96101
</div>
97102
</div>
98103

99104
<!-- Playlist -->
100-
<div class="bg-gray-800 rounded-2xl shadow-2xl p-6">
101-
<h3 class="text-xl font-semibold mb-4 flex items-center">
105+
<div class="bg-gray-800 rounded-xl shadow-2xl p-4">
106+
<h3 class="text-lg font-semibold mb-3 flex items-center">
102107
<i class="fas fa-list-music mr-2"></i> Playlist
103108
</h3>
104-
<div id="playlist" class="space-y-2">
109+
<div id="playlist" class="space-y-1">
105110
<!-- Tracks will be inserted here -->
106111
</div>
107112
</div>
108113

109114
<!-- Status Information -->
110-
<div class="mt-6 bg-gray-800 rounded-2xl shadow-2xl p-6">
111-
<h3 class="text-xl font-semibold mb-4 flex items-center">
115+
<div class="mt-4 bg-gray-800 rounded-xl shadow-2xl p-4">
116+
<h3 class="text-lg font-semibold mb-3 flex items-center">
112117
<i class="fas fa-info-circle mr-2"></i> Technical Status
113118
</h3>
114-
<div class="grid grid-cols-2 gap-4 text-sm">
119+
<div class="grid grid-cols-2 gap-3 text-sm">
115120
<div>
116121
<span class="text-gray-400">WebAudio Status:</span>
117122
<span id="webAudioStatus" class="ml-2 font-mono">Checking...</span>
@@ -178,15 +183,36 @@ <h3 class="text-xl font-semibold mb-4 flex items-center">
178183
const soundwaveBars = document.getElementById('soundwaveBars');
179184
const currentTrackTitle = document.getElementById('currentTrackTitle');
180185
const playlist = document.getElementById('playlist');
186+
const skipToEndBtn = document.getElementById('skipToEndBtn');
181187

182188
// Event listeners
183189
playPauseBtn.addEventListener('click', () => {
184190
player.togglePlayPause();
185191
updatePlayPauseButton(!player.currentTrack?.isPaused);
186192
});
187193

188-
prevBtn.addEventListener('click', () => player.playPrevious());
189-
nextBtn.addEventListener('click', () => player.playNext());
194+
prevBtn.addEventListener('click', () => {
195+
player.playPrevious();
196+
// Ensure the track starts playing
197+
if (player.currentTrack && player.currentTrack.isPaused) {
198+
player.play();
199+
}
200+
});
201+
202+
nextBtn.addEventListener('click', () => {
203+
player.playNext();
204+
// Ensure the track starts playing
205+
if (player.currentTrack && player.currentTrack.isPaused) {
206+
player.play();
207+
}
208+
});
209+
210+
skipToEndBtn.addEventListener('click', () => {
211+
if (player.currentTrack) {
212+
player.currentTrack.seekToEnd(5); // Skip to 5 seconds before end
213+
console.log('Skipping to end of track for gapless test');
214+
}
215+
});
190216

191217
volumeSlider.addEventListener('input', (e) => {
192218
player.setVolume(e.target.value / 100);
@@ -211,7 +237,7 @@ <h3 class="text-xl font-semibold mb-4 flex items-center">
211237
}
212238

213239
function updatePlayPauseButton(isPlaying) {
214-
playPauseIcon.className = isPlaying ? 'fas fa-pause text-2xl w-8 text-center' : 'fas fa-play text-2xl w-8 text-center';
240+
playPauseIcon.className = isPlaying ? 'fas fa-pause text-xl w-6 text-center' : 'fas fa-play text-xl w-6 text-center';
215241
if (isPlaying) {
216242
playPauseBtn.classList.add('playing-indicator');
217243
soundwaveBars.style.display = 'flex';
@@ -235,8 +261,14 @@ <h3 class="text-xl font-semibold mb-4 flex items-center">
235261
}
236262

237263
// Update technical status
238-
document.getElementById('webAudioStatus').textContent = track.isUsingWebAudio ? 'Enabled' : 'Disabled';
239-
document.getElementById('webAudioStatus').className = track.isUsingWebAudio ? 'ml-2 font-mono text-green-400' : 'ml-2 font-mono text-yellow-400';
264+
const webAudioEnabled = track.isUsingWebAudio || (track.webAudioLoadingState === 'LOADED');
265+
document.getElementById('webAudioStatus').textContent = webAudioEnabled ? 'Enabled' : 'Disabled';
266+
document.getElementById('webAudioStatus').className = webAudioEnabled ? 'ml-2 font-mono text-green-400' : 'ml-2 font-mono text-yellow-400';
267+
268+
// Log WebAudio state for debugging
269+
if (track.webAudioLoadingState) {
270+
console.log('WebAudio Loading State:', track.webAudioLoadingState);
271+
}
240272

241273
document.getElementById('bufferStatus').textContent = track.isLoaded ? 'Ready' : 'Loading...';
242274
document.getElementById('bufferStatus').className = track.isLoaded ? 'ml-2 font-mono text-green-400' : 'ml-2 font-mono text-yellow-400';
@@ -269,7 +301,7 @@ <h3 class="text-xl font-semibold mb-4 flex items-center">
269301
const isActive = player.currentTrack?.idx === idx;
270302

271303
const trackEl = document.createElement('div');
272-
trackEl.className = `track-item p-3 rounded-lg cursor-pointer flex items-center space-x-3 ${
304+
trackEl.className = `track-item p-2 rounded-lg cursor-pointer flex items-center space-x-3 ${
273305
isActive ? 'bg-blue-600 bg-opacity-20 border border-blue-500' : 'bg-gray-700 hover:bg-gray-600'
274306
}`;
275307

@@ -300,6 +332,14 @@ <h3 class="text-xl font-semibold mb-4 flex items-center">
300332

301333
// Auto-play on load
302334
player.play();
335+
336+
// Debug WebAudio status
337+
console.log('Player initialized. WebAudio disabled?', player.webAudioIsDisabled);
338+
339+
// Also update display for initial track
340+
if (player.currentTrack) {
341+
updateTrackDisplay(player.currentTrack);
342+
}
303343
</script>
304344
</body>
305345
</html>

‎src/Queue.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ const PRELOAD_NUM_TRACKS = 2;
44

55
const isBrowser: boolean = typeof window !== 'undefined';
66
const audioContext: AudioContext | null =
7-
isBrowser && typeof window.AudioContext !== 'undefined' ? new window.AudioContext() : null;
7+
isBrowser && (window.AudioContext || (window as any).webkitAudioContext)
8+
? new (window.AudioContext || (window as any).webkitAudioContext)()
9+
: null;
810

911
// Define interfaces for props and state
1012
interface QueueProps {

0 commit comments

Comments
 (0)