Skip to content

Commit 45b03d7

Browse files
TobiasMue91TobiasMue91
committed
- add modal dialog for playlist import with slider to select number of songs (3-300)
- style range input slider with webkit/moz specific styles matching spotify theme - add z-index to modal to ensure proper stacking - replace prompt with form-based input for better UX - set `songCount` default to 21 tracks
1 parent d242e44 commit 45b03d7

File tree

1 file changed

+100
-5
lines changed

1 file changed

+100
-5
lines changed

‎tools/spotify_music_quiz_cards.html‎

Lines changed: 100 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,36 @@
157157
transform: translateY(1px);
158158
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
159159
}
160+
161+
#playlistModal {
162+
z-index: 1000;
163+
}
164+
165+
input[type="range"] {
166+
-webkit-appearance: none;
167+
height: 8px;
168+
background: #e5e7eb;
169+
border-radius: 4px;
170+
outline: none;
171+
}
172+
173+
input[type="range"]::-webkit-slider-thumb {
174+
-webkit-appearance: none;
175+
width: 20px;
176+
height: 20px;
177+
background: #1DB954;
178+
border-radius: 50%;
179+
cursor: pointer;
180+
}
181+
182+
input[type="range"]::-moz-range-thumb {
183+
width: 20px;
184+
height: 20px;
185+
background: #1DB954;
186+
border-radius: 50%;
187+
cursor: pointer;
188+
border: none;
189+
}
160190
</style>
161191
</head>
162192
<body class="bg-gray-100 min-h-screen">
@@ -181,6 +211,39 @@
181211

182212
<div id="printArea"></div>
183213

214+
<div id="playlistModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
215+
<div class="bg-white p-8 rounded-lg shadow-xl max-w-md w-full">
216+
<h2 class="text-xl font-bold mb-4">Create QR Codes from Playlist</h2>
217+
<input
218+
type="text"
219+
id="playlistUrl"
220+
placeholder="Enter Spotify playlist URL"
221+
class="w-full px-4 py-2 mb-4 border rounded"
222+
>
223+
<div class="mb-4">
224+
<label class="block text-sm font-medium text-gray-700 mb-2">
225+
Number of songs: <span id="songCount">21</span>
226+
</label>
227+
<input
228+
type="range"
229+
id="songSlider"
230+
min="3"
231+
max="300"
232+
step="3"
233+
value="21"
234+
class="w-full"
235+
>
236+
</div>
237+
<div class="flex justify-end gap-4">
238+
<button onclick="closePlaylistModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
239+
Cancel
240+
</button>
241+
<button onclick="processPlaylist()" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
242+
Create
243+
</button>
244+
</div>
245+
</div>
246+
</div>
184247
<script>
185248
let playerInstance = null;
186249
let isPlaying = false;
@@ -267,35 +330,64 @@
267330
return card;
268331
}
269332

270-
async function createQRCodesFromPlaylist() {
271-
const input = prompt("Enter Spotify playlist URL:");
272-
if (!input) return;
333+
function showPlaylistModal() {
334+
document.getElementById('playlistModal').style.display = 'flex';
335+
}
336+
337+
function closePlaylistModal() {
338+
document.getElementById('playlistModal').style.display = 'none';
339+
}
340+
341+
// Add this to initialize the slider
342+
document.getElementById('songSlider').addEventListener('input', function(e) {
343+
document.getElementById('songCount').textContent = e.target.value;
344+
});
345+
346+
async function processPlaylist() {
347+
const playlistUrl = document.getElementById('playlistUrl').value;
348+
const songCount = parseInt(document.getElementById('songSlider').value);
349+
350+
if (!playlistUrl) {
351+
alert('Please enter a playlist URL');
352+
return;
353+
}
354+
273355
try {
274-
const tracks = await getPlaylistTracks(input);
356+
const tracks = await getPlaylistTracks(playlistUrl);
275357
if (tracks.length === 0) {
276358
throw new Error('No valid tracks found in playlist');
277359
}
360+
278361
const printArea = document.getElementById('printArea');
279362
printArea.innerHTML = '';
363+
280364
const qrPage = document.createElement('div');
281365
qrPage.className = 'page';
282366
const qrContainer = document.createElement('div');
283367
qrContainer.className = 'card-container';
284-
const selectedTracks = tracks.slice(0, 21);
368+
369+
const selectedTracks = tracks.slice(0, songCount);
285370
selectedTracks.forEach(track => {
286371
qrContainer.appendChild(createQRCard(track, true));
287372
});
373+
288374
qrPage.appendChild(qrContainer);
289375
printArea.appendChild(qrPage);
376+
290377
const metadataPage = document.createElement('div');
291378
metadataPage.className = 'page';
292379
const metadataContainer = document.createElement('div');
293380
metadataContainer.className = 'card-container';
381+
294382
selectedTracks.forEach(track => {
295383
metadataContainer.appendChild(createQRCard(track, false));
296384
});
385+
297386
metadataPage.appendChild(metadataContainer);
298387
printArea.appendChild(metadataPage);
388+
389+
closePlaylistModal();
390+
299391
setTimeout(() => {
300392
window.print();
301393
}, 1000);
@@ -305,6 +397,9 @@
305397
}
306398
}
307399

400+
// Update the click handler for the createQRButton
401+
document.getElementById('createQRButton').onclick = showPlaylistModal;
402+
308403
function initializePlayer(token) {
309404
document.getElementById('setup').classList.add('hidden');
310405
document.getElementById('player').classList.remove('hidden');

0 commit comments

Comments
 (0)