teal.fm
[WIP] music platform user data scraper
teal-fm
atproto
correctly unauthorize via musickit
matt.evil.gay
+54
-10
+54
-10
pages/templates/applemusic_link.gohtml
+54
-10
pages/templates/applemusic_link.gohtml
···
16
16
></script>
17
17
</head>
18
18
<body>
19
-
<main style="max-width: 720px; margin: 4rem auto; padding: 0 1.5rem;">
20
-
<h1 style="font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.75rem; background: linear-gradient(135deg, #fa2d48, #fc5c7d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Link Apple Music</h1>
21
-
<p style="font-size: 1.125rem; color: #8e8e93; max-width: 480px;">Authorize with Apple Music to enable MusicKit features and sync your library.</p>
19
+
<main style="max-width: 720px; margin: 4rem auto; padding: 0 1.5rem">
20
+
<h1
21
+
style="
22
+
font-size: 2.5rem;
23
+
font-weight: 700;
24
+
letter-spacing: -0.03em;
25
+
margin-bottom: 0.75rem;
26
+
background: linear-gradient(135deg, #fa2d48, #fc5c7d);
27
+
-webkit-background-clip: text;
28
+
-webkit-text-fill-color: transparent;
29
+
background-clip: text;
30
+
"
31
+
>
32
+
Link Apple Music
33
+
</h1>
34
+
<p style="font-size: 1.125rem; color: #8e8e93; max-width: 480px">
35
+
Authorize with Apple Music to enable MusicKit features and sync your
36
+
library.
37
+
</p>
22
38
<div
23
-
style="display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-top: 2rem;"
39
+
style="
40
+
display: flex;
41
+
gap: 1.5rem;
42
+
align-items: center;
43
+
flex-wrap: wrap;
44
+
margin-top: 2rem;
45
+
"
24
46
>
25
47
<button id="authorizeBtn" class="am-btn am-btn-primary">
26
48
🎵 Authorize Apple Music
···
29
51
id="unlinkForm"
30
52
method="post"
31
53
action="/api/v1/applemusic/unlink"
32
-
onsubmit="handleUnlink(event)"
54
+
onsubmit="
55
+
(async () => {
56
+
const music = window.MusicKit.getInstance();
57
+
await music.unauthorize();
58
+
handleUnlink(event);
59
+
})()
60
+
"
33
61
>
34
62
<button type="submit" class="am-btn am-btn-danger">
35
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;">
36
-
<path d="M18 6L6 18M6 6l12 12"/>
63
+
<svg
64
+
xmlns="http://www.w3.org/2000/svg"
65
+
width="24"
66
+
height="24"
67
+
viewBox="0 0 24 24"
68
+
fill="none"
69
+
stroke="currentColor"
70
+
stroke-width="2.5"
71
+
stroke-linecap="round"
72
+
stroke-linejoin="round"
73
+
style="flex-shrink: 0"
74
+
>
75
+
<path d="M18 6L6 18M6 6l12 12" />
37
76
</svg>
38
77
Unlink Apple Music
39
78
</button>
···
56
95
letter-spacing: -0.01em;
57
96
}
58
97
.am-btn-primary {
59
-
background: linear-gradient(135deg, #fa2d48 0%, #fc5c7d 50%, #fa2d48 100%);
98
+
background: linear-gradient(
99
+
135deg,
100
+
#fa2d48 0%,
101
+
#fc5c7d 50%,
102
+
#fa2d48 100%
103
+
);
60
104
background-size: 200% 200%;
61
105
color: white;
62
106
}
···
146
190
music.addEventListener("authorizationStatusDidChange", (e) => {
147
191
console.debug(
148
192
"authorizationStatusDidChange",
149
-
e && e.authorizationStatus
193
+
e && e.authorizationStatus,
150
194
);
151
195
});
152
196
music.addEventListener("userTokenDidChange", (e) => {
···
161
205
} catch (evtErr) {
162
206
console.warn(
163
207
"Failed to attach some MusicKit event listeners",
164
-
evtErr
208
+
evtErr,
165
209
);
166
210
}
167
211
document