vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tilt settings

Browse source
This commit is contained in:
edideaur 2026-04-02 16:09:44 +00:00 committed by GitHub
parent e375fb7692
commit 8ceaffe757
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 115 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -2978,6 +2978,32 @@
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Tilt Distance</span>
<span class="description">Max tilt distance (default: 10)</span>
</div>
<input
type="range"
id="fullscreen-cover-tilt-distance"
min="0"
max="30"
value="10"
/>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Tilt Speed</span>
<span class="description">Tilt animation speed in ms (default: 240)</span>
</div>
<input
type="range"
id="fullscreen-cover-tilt-speed"
min="50"
max="1000"
value="240"
/>
</div>
</div>
<div class="settings-group">

22
js/settings.js
View file

@ -37,6 +37,8 @@ import {
preferDolbyAtmosSettings,
fullscreenCoverNoRoundSettings,
fullscreenCoverVanillaTiltSettings,
fullscreenCoverTiltDistanceSettings,
fullscreenCoverTiltSpeedSettings,
} from './storage.js';
import { audioContextManager, getPresetsForBandCount } from './audio-context.js';
import { calculateBiquadResponse, interpolate, getNormalizationOffset, runAutoEqAlgorithm } from './autoeq-engine.js';
@ -4626,6 +4628,26 @@ export async function initializeSettings(scrobbler, player, api, ui) {
});
}
// Fullscreen Cover Tilt Distance
const fullscreenCoverTiltDistanceSlider = document.getElementById('fullscreen-cover-tilt-distance');
if (fullscreenCoverTiltDistanceSlider) {
fullscreenCoverTiltDistanceSlider.value = fullscreenCoverTiltDistanceSettings.getValue();
fullscreenCoverTiltDistanceSlider.addEventListener('input', (e) => {
fullscreenCoverTiltDistanceSettings.setValue(parseInt(e.target.value));
window.dispatchEvent(new CustomEvent('fullscreen-cover-settings-changed'));
});
}
// Fullscreen Cover Tilt Speed
const fullscreenCoverTiltSpeedSlider = document.getElementById('fullscreen-cover-tilt-speed');
if (fullscreenCoverTiltSpeedSlider) {
fullscreenCoverTiltSpeedSlider.value = fullscreenCoverTiltSpeedSettings.getValue();
fullscreenCoverTiltSpeedSlider.addEventListener('input', (e) => {
fullscreenCoverTiltSpeedSettings.setValue(parseInt(e.target.value));
window.dispatchEvent(new CustomEvent('fullscreen-cover-settings-changed'));
});
}
// Waveform Toggle
const waveformToggle = document.getElementById('waveform-toggle');
if (waveformToggle) {

34
js/storage.js
View file

@ -622,6 +622,40 @@ export const fullscreenCoverVanillaTiltSettings = {
},
};
export const fullscreenCoverTiltDistanceSettings = {
STORAGE_KEY: 'fullscreen-cover-tilt-distance',
getValue() {
try {
const val = parseInt(localStorage.getItem(this.STORAGE_KEY));
return val !== null && !isNaN(val) ? val : 10;
} catch {
return 10;
}
},
setValue(value) {
localStorage.setItem(this.STORAGE_KEY, value);
},
};
export const fullscreenCoverTiltSpeedSettings = {
STORAGE_KEY: 'fullscreen-cover-tilt-speed',
getValue() {
try {
const val = parseInt(localStorage.getItem(this.STORAGE_KEY));
return val !== null && !isNaN(val) ? val : 240;
} catch {
return 240;
}
},
setValue(value) {
localStorage.setItem(this.STORAGE_KEY, value);
},
};
export const cardSettings = {
COMPACT_ARTIST_KEY: 'card-compact-artist',
COMPACT_ALBUM_KEY: 'card-compact-album',

13
js/ui.js
View file

@ -28,6 +28,8 @@ import {
settingsUiState,
fullscreenCoverNoRoundSettings,
fullscreenCoverVanillaTiltSettings,
fullscreenCoverTiltDistanceSettings,
fullscreenCoverTiltSpeedSettings,
} from './storage.js';
import { db } from './db.js';
import { getVibrantColorFromImage } from './vibrant-color.js';
@ -179,9 +181,12 @@ export class UIRenderer {
}
if (coverImage) {
if (fullscreenCoverVanillaTiltSettings.isEnabled() && window.VanillaTilt) {
if (coverImage.vanillaTilt) {
coverImage.vanillaTilt.destroy();
}
window.VanillaTilt.init(coverImage, {
max: 15,
speed: 400,
max: fullscreenCoverTiltDistanceSettings.getValue(),
speed: fullscreenCoverTiltSpeedSettings.getValue(),
glare: true,
'max-glare': 0.3,
});
@ -1267,8 +1272,8 @@ export class UIRenderer {
const coverImage = document.getElementById('fullscreen-cover-image');
if (fullscreenCoverVanillaTiltSettings.isEnabled() && coverImage && window.VanillaTilt) {
window.VanillaTilt.init(coverImage, {
max: 15,
speed: 400,
max: fullscreenCoverTiltDistanceSettings.getValue(),
speed: fullscreenCoverTiltSpeedSettings.getValue(),
glare: true,
'max-glare': 0.3,
});

24
styles.css
View file

@ -2950,6 +2950,30 @@ body.multi-select-mode .track-item:hover {
width: 100px;
}
.setting-item input[type='range'] {
width: 120px;
accent-color: var(--accent);
appearance: none;
height: 6px;
background: var(--border);
border-radius: var(--radius-full);
outline: none;
}
.setting-item input[type='range']::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
background: var(--primary);
border-radius: var(--radius-full);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.setting-item input[type='range']::-webkit-slider-thumb:hover {
background: var(--highlight);
}
.playback-speed-control {
display: flex;
align-items: center;