improved instructions
This commit is contained in:
coolgitternotin
95
README.md
95
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"
|
||||
|
||||
|
||||
|
||||
Expand Cookies section and select the "https://www.deezer.com". Find the "arl" cookie and double-click the "Cookie Value" tab's text.
|
||||
|
||||
|
||||
|
||||
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"
|
||||
|
||||
|
||||
|
||||
Click the cookies host "https://www.deezer.com" and find the "arl" cookie.
|
||||
|
||||
|
||||
|
||||
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"
|
||||
|
||||
|
||||
|
||||
Expand Cookies section and select the "https://www.deezer.com". Find the "arl" cookie and double-click the "Cookie Value" tab's text.
|
||||
|
||||
|
||||
|
||||
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"
|
||||
|
||||
|
||||
|
||||
Click the cookies host "https://www.deezer.com" and find the "arl" cookie.
|
||||
|
||||
|
||||
|
||||
Copy that value and paste it into the correspondant setting in Spotizerr
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Operations
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -109,6 +109,50 @@
|
||||
placeholder="e.g. %artist%/%album%"
|
||||
class="form-input"
|
||||
/>
|
||||
<div class="format-help">
|
||||
<select id="dirFormatHelp" class="format-selector">
|
||||
<option value="">-- Select placeholder --</option>
|
||||
<optgroup label="Common">
|
||||
<option value="%music%">%music% - Track title</option>
|
||||
<option value="%artist%">%artist% - Track artist</option>
|
||||
<option value="%album%">%album% - Album name</option>
|
||||
<option value="%album_artist%">%album_artist% - Album artist</option>
|
||||
<option value="%tracknum%">%tracknum% - Track number</option>
|
||||
<option value="%year%">%year% - Year of release</option>
|
||||
</optgroup>
|
||||
<optgroup label="Additional">
|
||||
<option value="%discnum%">%discnum% - Disc number</option>
|
||||
<option value="%date%">%date% - Release date</option>
|
||||
<option value="%genre%">%genre% - Music genre</option>
|
||||
<option value="%isrc%">%isrc% - International Standard Recording Code</option>
|
||||
<option value="%explicit%">%explicit% - Explicit content flag</option>
|
||||
<option value="%duration%">%duration% - Track duration (seconds)</option>
|
||||
</optgroup>
|
||||
<optgroup label="Metadata">
|
||||
<option value="%publisher%">%publisher% - Publisher information</option>
|
||||
<option value="%composer%">%composer% - Track composer</option>
|
||||
<option value="%copyright%">%copyright% - Copyright information</option>
|
||||
<option value="%author%">%author% - Author information</option>
|
||||
<option value="%lyricist%">%lyricist% - Lyricist information</option>
|
||||
<option value="%version%">%version% - Version information</option>
|
||||
<option value="%comment%">%comment% - Comment field</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other">
|
||||
<option value="%encodedby%">%encodedby% - Encoded by information</option>
|
||||
<option value="%language%">%language% - Language information</option>
|
||||
<option value="%lyrics%">%lyrics% - Track lyrics</option>
|
||||
<option value="%mood%">%mood% - Mood information</option>
|
||||
<option value="%rating%">%rating% - Track rating</option>
|
||||
<option value="%website%">%website% - Website information</option>
|
||||
</optgroup>
|
||||
<optgroup label="ReplayGain">
|
||||
<option value="%replaygain_album_gain%">%replaygain_album_gain% - Album gain</option>
|
||||
<option value="%replaygain_album_peak%">%replaygain_album_peak% - Album peak</option>
|
||||
<option value="%replaygain_track_gain%">%replaygain_track_gain% - Track gain</option>
|
||||
<option value="%replaygain_track_peak%">%replaygain_track_peak% - Track peak</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<label>Custom Track Format:</label>
|
||||
@@ -118,6 +162,53 @@
|
||||
placeholder="e.g. %tracknum% - %music%"
|
||||
class="form-input"
|
||||
/>
|
||||
<div class="format-help">
|
||||
<select id="trackFormatHelp" class="format-selector">
|
||||
<option value="">-- Select placeholder --</option>
|
||||
<optgroup label="Common">
|
||||
<option value="%music%">%music% - Track title</option>
|
||||
<option value="%artist%">%artist% - Track artist</option>
|
||||
<option value="%album%">%album% - Album name</option>
|
||||
<option value="%album_artist%">%album_artist% - Album artist</option>
|
||||
<option value="%tracknum%">%tracknum% - Track number</option>
|
||||
<option value="%year%">%year% - Year of release</option>
|
||||
</optgroup>
|
||||
<optgroup label="Additional">
|
||||
<option value="%discnum%">%discnum% - Disc number</option>
|
||||
<option value="%date%">%date% - Release date</option>
|
||||
<option value="%genre%">%genre% - Music genre</option>
|
||||
<option value="%isrc%">%isrc% - International Standard Recording Code</option>
|
||||
<option value="%explicit%">%explicit% - Explicit content flag</option>
|
||||
<option value="%duration%">%duration% - Track duration (seconds)</option>
|
||||
</optgroup>
|
||||
<optgroup label="Metadata">
|
||||
<option value="%publisher%">%publisher% - Publisher information</option>
|
||||
<option value="%composer%">%composer% - Track composer</option>
|
||||
<option value="%copyright%">%copyright% - Copyright information</option>
|
||||
<option value="%author%">%author% - Author information</option>
|
||||
<option value="%lyricist%">%lyricist% - Lyricist information</option>
|
||||
<option value="%version%">%version% - Version information</option>
|
||||
<option value="%comment%">%comment% - Comment field</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other">
|
||||
<option value="%encodedby%">%encodedby% - Encoded by information</option>
|
||||
<option value="%language%">%language% - Language information</option>
|
||||
<option value="%lyrics%">%lyrics% - Track lyrics</option>
|
||||
<option value="%mood%">%mood% - Mood information</option>
|
||||
<option value="%rating%">%rating% - Track rating</option>
|
||||
<option value="%website%">%website% - Website information</option>
|
||||
</optgroup>
|
||||
<optgroup label="ReplayGain">
|
||||
<option value="%replaygain_album_gain%">%replaygain_album_gain% - Album gain</option>
|
||||
<option value="%replaygain_album_peak%">%replaygain_album_peak% - Album peak</option>
|
||||
<option value="%replaygain_track_gain%">%replaygain_track_gain% - Track gain</option>
|
||||
<option value="%replaygain_track_peak%">%replaygain_track_peak% - Track peak</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-description">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<!-- New Track Number Padding Toggle -->
|
||||
<div class="config-item">
|
||||
|
||||
Reference in New Issue
Block a user