From 7cfff326d7a420b336cceb7ea84551a8d344d348 Mon Sep 17 00:00:00 2001 From: coolgitternotin Date: Mon, 24 Mar 2025 15:08:21 -0600 Subject: [PATCH] improved instructions --- README.md | 95 ++++++++++++++++++------------------ static/css/config/config.css | 60 +++++++++++++++++++++++ static/js/config.js | 62 +++++++++++++++++++++++ templates/config.html | 91 ++++++++++++++++++++++++++++++++++ 4 files changed, 260 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 40fc00e..a45e7cd 100755 --- a/README.md +++ b/README.md @@ -69,54 +69,6 @@ Access at: `http://localhost:7171` _Note: If you want Spotify-only mode, just keep "Download fallback" setting disabled and don't bother adding Deezer credentials. Deezer-only mode is not, and will not be supported since there already is a much better tool for that called "Deemix"_ -### Spotify Developer Setup - -Due to Spotify's ToS changes, anonymous API calls are now more limited. You need to set up your own Spotify Developer application: - -1. Visit the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/) -2. Log in with your Spotify account -3. Click "Create app" -4. Fill in: - - App name (e.g., "My Spotizerr App") - - App description - - Redirect URI: `http://localhost:7171/callback` (or your custom domain if exposed) - - Check the Developer Terms agreement box -5. Click "Create" -6. On your app page, note your "Client ID" -7. Click "Show client secret" to reveal your "Client Secret" -8. Add these credentials in Spotizerr's settings page under the Spotify service section - -### Deezer ARL Setup - -#### Chrome-based browsers - -Open the [web player](https://www.deezer.com/) - -There, press F12 and select "Application" - -![image](https://github.com/user-attachments/assets/22e61d91-50b4-48f2-bba7-28ef45b45ee5) - -Expand Cookies section and select the "https://www.deezer.com". Find the "arl" cookie and double-click the "Cookie Value" tab's text. - -![image](https://github.com/user-attachments/assets/75a67906-596e-42a0-beb0-540f2748b16e) - -Copy that value and paste it into the correspondant setting in Spotizerr - -#### Firefox-based browsers - -Open the [web player](https://www.deezer.com/) - -There, press F12 and select "Storage" - -![image](https://github.com/user-attachments/assets/601be3fb-1ec9-44d9-be4f-28b1d853df2f) - -Click the cookies host "https://www.deezer.com" and find the "arl" cookie. - -![image](https://github.com/user-attachments/assets/ef8ea256-2c13-4780-ae9f-71527466df56) - -Copy that value and paste it into the correspondant setting in Spotizerr - - ### Spotify Credentials Setup First create a Spotify credentials file using the 3rd-party `librespot-auth` tool, this step has to be done in a PC/Laptop that has the Spotify desktop app installed. @@ -201,6 +153,53 @@ In the terminal, you can directly print these parameters using jq: jq -r '.username, .auth_data' credentials.json ``` +### Spotify Developer Setup + +In order for searching to work, you need to set up your own Spotify Developer application: + +1. Visit the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/) +2. Log in with your Spotify account +3. Click "Create app" +4. Fill in: + - App name (e.g., "My Spotizerr App") + - App description + - Redirect URI: `http://localhost:7171/callback` (or your custom domain if exposed) + - Check the Developer Terms agreement box +5. Click "Create" +6. On your app page, note your "Client ID" +7. Click "Show client secret" to reveal your "Client Secret" +8. Add these credentials in Spotizerr's settings page under the Spotify service section + +### Deezer ARL Setup + +#### Chrome-based browsers + +Open the [web player](https://www.deezer.com/) + +There, press F12 and select "Application" + +![image](https://github.com/user-attachments/assets/22e61d91-50b4-48f2-bba7-28ef45b45ee5) + +Expand Cookies section and select the "https://www.deezer.com". Find the "arl" cookie and double-click the "Cookie Value" tab's text. + +![image](https://github.com/user-attachments/assets/75a67906-596e-42a0-beb0-540f2748b16e) + +Copy that value and paste it into the correspondant setting in Spotizerr + +#### Firefox-based browsers + +Open the [web player](https://www.deezer.com/) + +There, press F12 and select "Storage" + +![image](https://github.com/user-attachments/assets/601be3fb-1ec9-44d9-be4f-28b1d853df2f) + +Click the cookies host "https://www.deezer.com" and find the "arl" cookie. + +![image](https://github.com/user-attachments/assets/ef8ea256-2c13-4780-ae9f-71527466df56) + +Copy that value and paste it into the correspondant setting in Spotizerr + ## Usage ### Basic Operations diff --git a/static/css/config/config.css b/static/css/config/config.css index 8770f46..23e7b57 100644 --- a/static/css/config/config.css +++ b/static/css/config/config.css @@ -868,3 +868,63 @@ input:checked + .slider:before { line-height: 20px; } } + +/* Format help styles */ +.format-help { + display: flex; + margin-top: 8px; + align-items: center; +} + +.format-selector { + width: 100%; + padding: 6px; + border-radius: 4px; + border: 1px solid #404040; + background-color: #2a2a2a; + color: #ffffff; +} + +.format-selector:focus { + outline: none; + border-color: #1db954; + box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.2); +} + +.setting-description { + margin-top: 8px; + font-size: 0.9em; + color: #b3b3b3; +} + +/* Copy notification styles */ +#copyNotificationContainer { + position: fixed; + bottom: 20px; + left: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + z-index: 1000; + pointer-events: none; +} + +.copy-notification { + background-color: rgba(0, 0, 0, 0.8); + color: white; + padding: 10px 20px; + border-radius: 4px; + margin-top: 5px; + opacity: 0; + transform: translateY(20px); + transition: opacity 0.3s, transform 0.3s; + max-width: 90%; + text-align: center; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.copy-notification.show { + opacity: 1; + transform: translateY(0); +} diff --git a/static/js/config.js b/static/js/config.js index 706b9b6..87ca997 100644 --- a/static/js/config.js +++ b/static/js/config.js @@ -104,6 +104,14 @@ function setupEventListeners() { // Formatting settings document.getElementById('customDirFormat').addEventListener('change', saveConfig); document.getElementById('customTrackFormat').addEventListener('change', saveConfig); + + // Copy to clipboard when selecting placeholders + document.getElementById('dirFormatHelp').addEventListener('change', function() { + copyPlaceholderToClipboard(this); + }); + document.getElementById('trackFormatHelp').addEventListener('change', function() { + copyPlaceholderToClipboard(this); + }); // Max concurrent downloads change listener document.getElementById('maxConcurrentDownloads').addEventListener('change', saveConfig); @@ -699,3 +707,57 @@ function showConfigSuccess(message) { successDiv.textContent = message; setTimeout(() => (successDiv.textContent = ''), 5000); } + +// Function to copy the selected placeholder to clipboard +function copyPlaceholderToClipboard(select) { + const placeholder = select.value; + + if (!placeholder) return; // If nothing selected + + // Copy to clipboard + navigator.clipboard.writeText(placeholder) + .then(() => { + // Show success notification + showCopyNotification(`Copied ${placeholder} to clipboard`); + + // Reset select to default after a short delay + setTimeout(() => { + select.selectedIndex = 0; + }, 500); + }) + .catch(err => { + console.error('Failed to copy: ', err); + }); +} + +// Function to show a notification when copying +function showCopyNotification(message) { + // Check if notification container exists, create if not + let notificationContainer = document.getElementById('copyNotificationContainer'); + if (!notificationContainer) { + notificationContainer = document.createElement('div'); + notificationContainer.id = 'copyNotificationContainer'; + document.body.appendChild(notificationContainer); + } + + // Create notification element + const notification = document.createElement('div'); + notification.className = 'copy-notification'; + notification.textContent = message; + + // Add to container + notificationContainer.appendChild(notification); + + // Trigger animation + setTimeout(() => { + notification.classList.add('show'); + }, 10); + + // Remove after animation completes + setTimeout(() => { + notification.classList.remove('show'); + setTimeout(() => { + notificationContainer.removeChild(notification); + }, 300); + }, 2000); +} diff --git a/templates/config.html b/templates/config.html index 4a0cf7c..a15f67b 100644 --- a/templates/config.html +++ b/templates/config.html @@ -109,6 +109,50 @@ placeholder="e.g. %artist%/%album%" class="form-input" /> +
+ +
@@ -118,6 +162,53 @@ placeholder="e.g. %tracknum% - %music%" class="form-input" /> +
+ +
+
+ Note that these placeholder depend on the metadata of the track, if one entry is not available in a track, the placeholder will be replaced with an empty string. +