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

fix(downloads): don't disable hi-res downloads on iOS or Safari

Browse source 
Just because the browser can't play them doesn't mean the user may not want to download them
This commit is contained in:
Daniel 2026-03-18 12:26:17 -05:00
parent 393491e2c8
commit b7cac5724d
4 changed files with 37 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -5150,17 +5150,27 @@
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Download Quality</span>
<span class="description">Quality for track downloads</span>
<div>
<div class="setting-item">
<div class="info">
<span class="label">Download Quality</span>
<span class="description">Quality for track downloads</span>
</div>
<select id="download-quality-setting">
<option value="HI_RES_LOSSLESS">Hi-Res Lossless (24-bit)</option>
<option value="LOSSLESS">Lossless (16-bit)</option>
<option value="HIGH">AAC 320kbps</option>
<option value="LOW">AAC 96kbps</option>
</select>
</div>
<div class="setting-item" id="hi-res-download-warning" style="display: none">
<div class="info setting-details">
<span class="description">
24-bit downloads may crash the browser on some devices, or be missing
metadata.
</span>
</div>
</div>
<select id="download-quality-setting">
<option value="HI_RES_LOSSLESS">Hi-Res Lossless (24-bit)</option>
<option value="LOSSLESS">Lossless (16-bit)</option>
<option value="HIGH">AAC 320kbps</option>
<option value="LOW">AAC 96kbps</option>
</select>
</div>
<div class="setting-item">
<div class="info">

9
js/app.js
View file

@ -385,11 +385,11 @@ document.addEventListener('DOMContentLoaded', async () => {
const api = new MusicAPI(apiSettings);
const audioPlayer = document.getElementById('audio-player');
// i love ios and macos!!!! webkit fucking SUCKS BULLSHIT sorry ios/macos heads yall getting lossless only
// i love ios and macos!!!! webkit fucking SUCKS BULLSHIT sorry ios/macos heads yall getting lossless only playback
// Use isIos from platform-detection (set before UA spoof in index.html) so detection works on real iOS.
if (isIos || isSafari) {
const qualitySelect = document.getElementById('streaming-quality-setting');
const downloadSelect = document.getElementById('download-quality-setting');
const downloadQualitySelect = document.getElementById('download-quality-setting');
const removeHiRes = (select) => {
if (!select) return;
@ -398,7 +398,10 @@ document.addEventListener('DOMContentLoaded', async () => {
};
removeHiRes(qualitySelect);
removeHiRes(downloadSelect);
if (isIos) {
document.querySelector('#hi-res-download-warning').style.display = '';
}
const currentQualitySetting = localStorage.getItem('playback-quality');
if (!currentQualitySetting || currentQualitySetting === 'HI_RES_LOSSLESS') {

4
js/platform-detection.ts
View file

@ -4,9 +4,9 @@ export const originalUserAgent = navigator.userAgent;
/** A lowercase version of the original user agent string. */
const lowerCaseOriginalUserAgent = originalUserAgent.toLowerCase();
/** If the device is an iOS device. */
/** If the device is an iOS device. (iPhone, iPad, iPod, or Apple Vision) */
export const isIos =
/iphone|ipad|ipod/.test(lowerCaseOriginalUserAgent) ||
/iphone|ipad|ipod|applevision/.test(lowerCaseOriginalUserAgent) ||
(lowerCaseOriginalUserAgent.includes('mac') && navigator.maxTouchPoints > 1);
/** If the browser is Safari (excluding Chrome, Chromium-based browsers, and Android browsers). */

10
styles.css
View file

@ -2737,6 +2737,15 @@ input[type='search']::-webkit-search-cancel-button {
color: var(--muted-foreground);
}
.setting-item .info.setting-details {
width: 100%;
display: block;
}
.setting-item .info.setting-details .description {
font-size: 0.8rem;
}
.setting-item select,
.setting-item input[type='number'] {
background-color: var(--input);
@ -4936,7 +4945,6 @@ input:checked + .slider::before {
margin-bottom: 1rem;
}
.customize-shortcut-item {
display: flex;
justify-content: space-between;