Skip to content

Commit d1aa48f

Browse files
TobiasMue91TobiasMue91
committed
- playing around with the spotify API
1 parent 5fdc80a commit d1aa48f

File tree

1 file changed

+159
-7
lines changed

1 file changed

+159
-7
lines changed

‎tools/spotify_test.html‎

Lines changed: 159 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,109 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Spotify Player</title>
4+
<title>Spotify Player & QR Generator</title>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
6+
<script src="https://cdn.tailwindcss.com"></script>
57
<style>
6-
.hidden { display: none; }
8+
@media print {
9+
body * {
10+
visibility: hidden;
11+
}
12+
#printArea, #printArea * {
13+
visibility: visible;
14+
}
15+
#printArea {
16+
position: absolute;
17+
left: 0;
18+
top: 0;
19+
}
20+
.card {
21+
break-inside: avoid;
22+
page-break-inside: avoid;
23+
}
24+
}
25+
26+
.card {
27+
width: 6cm;
28+
height: 6cm;
29+
position: relative;
30+
perspective: 1000px;
31+
}
32+
33+
.card-inner {
34+
position: relative;
35+
width: 100%;
36+
height: 100%;
37+
text-align: center;
38+
transition: transform 0.8s;
39+
transform-style: preserve-3d;
40+
}
41+
42+
.card:hover .card-inner {
43+
transform: rotateY(180deg);
44+
}
45+
46+
.card-front, .card-back {
47+
position: absolute;
48+
width: 100%;
49+
height: 100%;
50+
backface-visibility: hidden;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
border: 1px solid #e5e7eb;
55+
border-radius: 8px;
56+
background: white;
57+
}
58+
59+
.card-back {
60+
transform: rotateY(180deg);
61+
}
62+
63+
.hidden {
64+
display: none;
65+
}
66+
67+
#pauseResumeButton {
68+
width: 80vmin;
69+
height: 80vmin;
70+
font-size: 40vmin;
71+
border: none;
72+
border-radius: 10px;
73+
background-color: #1DB954;
74+
color: white;
75+
cursor: pointer;
76+
transition: transform 0.1s;
77+
}
78+
79+
#pauseResumeButton:active {
80+
transform: scale(0.98);
81+
}
82+
83+
#player {
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
height: 100vh;
88+
margin: 0;
89+
}
790
</style>
891
</head>
9-
<body>
10-
<div id="setup">
11-
<input type="text" id="clientId" placeholder="Enter Spotify Client ID">
12-
<button onclick="startAuth()">Initialize</button>
92+
<body class="bg-gray-100 min-h-screen">
93+
<div id="setup" class="max-w-md mx-auto p-6">
94+
<div class="bg-white rounded-lg shadow-xl p-8">
95+
<input type="text" id="clientId" placeholder="Enter Spotify Client ID" class="w-full px-4 py-2 mb-4 border rounded">
96+
<button onclick="startAuth()" class="w-full bg-green-500 text-white py-2 px-4 rounded">Initialize</button>
97+
</div>
1398
</div>
99+
14100
<div id="player" class="hidden">
15101
<button id="pauseResumeButton">⏸️</button>
102+
<button id="createQRButton" class="fixed top-4 right-4 bg-green-500 text-white py-2 px-4 rounded">Create QR codes from Playlist</button>
16103
</div>
17104

105+
<div id="printArea" class="grid grid-cols-3 gap-4 p-4"></div>
106+
18107
<script>
19108
let playerInstance = null;
20109
let isPlaying = false;
@@ -42,7 +131,7 @@
42131
function startAuth() {
43132
const clientId = document.getElementById('clientId').value;
44133
localStorage.setItem('spotify_client_id', clientId);
45-
const scope = 'streaming user-read-email user-read-private user-modify-playback-state';
134+
const scope = 'streaming user-read-email user-read-private user-modify-playback-state playlist-read-private';
46135
window.location.href = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}`;
47136
}
48137

@@ -55,10 +144,72 @@
55144
return hashParams;
56145
}
57146

147+
async function getPlaylistTracks(playlistUrl) {
148+
const playlistId = playlistUrl.split('/playlist/')[1].split('?')[0];
149+
const response = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks`, {
150+
headers: {
151+
'Authorization': `Bearer ${localStorage.getItem('spotify_access_token')}`
152+
}
153+
});
154+
const data = await response.json();
155+
return data.items.map(item => ({
156+
id: item.track.id,
157+
name: item.track.name,
158+
artist: item.track.artists[0].name,
159+
year: item.track.album.release_date.split('-')[0]
160+
}));
161+
}
162+
163+
function createQRCard(track) {
164+
const card = document.createElement('div');
165+
card.className = 'card';
166+
card.innerHTML = `
167+
<div class="card-inner">
168+
<div class="card-front" id="qr-${track.id}"></div>
169+
<div class="card-back">
170+
<div class="p-4">
171+
<h3 class="text-xl font-bold">${track.name}</h3>
172+
<p class="text-gray-600">${track.artist}</p>
173+
<p class="text-gray-500">${track.year}</p>
174+
</div>
175+
</div>
176+
</div>
177+
`;
178+
179+
new QRCode(document.getElementById(`qr-${track.id}`), {
180+
text: `https://www.gptgames.dev/tools/spotify_test.html?track=${track.id}`,
181+
width: 200,
182+
height: 200
183+
});
184+
185+
return card;
186+
}
187+
188+
async function createQRCodesFromPlaylist() {
189+
const playlistUrl = prompt("Enter Spotify playlist URL:");
190+
if (!playlistUrl) return;
191+
192+
try {
193+
const tracks = await getPlaylistTracks(playlistUrl);
194+
const printArea = document.getElementById('printArea');
195+
printArea.innerHTML = '';
196+
197+
tracks.forEach(track => {
198+
printArea.appendChild(createQRCard(track));
199+
});
200+
201+
window.print();
202+
} catch (error) {
203+
alert('Error processing playlist: ' + error.message);
204+
}
205+
}
206+
58207
function initializePlayer(token) {
59208
document.getElementById('setup').classList.add('hidden');
60209
document.getElementById('player').classList.remove('hidden');
61210

211+
localStorage.setItem('spotify_access_token', token);
212+
62213
playerInstance = new Spotify.Player({
63214
name: 'Development Player',
64215
getOAuthToken: cb => { cb(token); }
@@ -88,6 +239,7 @@
88239
});
89240

90241
document.getElementById('pauseResumeButton').onclick = togglePauseResume;
242+
document.getElementById('createQRButton').onclick = createQRCodesFromPlaylist;
91243
playerInstance.connect();
92244
}
93245
</script>

0 commit comments

Comments
 (0)