|
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 |
|
0 commit comments