syncDelta.availableBytes + syncDelta.delBytes ? 'var(--danger)' : 'inherit', marginTop: '10px' }}>
{t('deviceSync.availableSpace')}
- {(syncDelta.availableBytes / 1_048_576).toFixed(1)} MB
+ {formatMb(syncDelta.availableBytes)}
{syncDelta.addBytes > syncDelta.availableBytes + syncDelta.delBytes && (
diff --git a/src/components/queuePanel/QueueHeader.tsx b/src/components/queuePanel/QueueHeader.tsx
index ab51a416..c5be0c33 100644
--- a/src/components/queuePanel/QueueHeader.tsx
+++ b/src/components/queuePanel/QueueHeader.tsx
@@ -5,6 +5,7 @@ import { usePlayerStore } from '../../store/playerStore';
import type { Track } from '../../store/playerStoreTypes';
import type { DurationMode } from '../../utils/componentHelpers/queuePanelHelpers';
import { formatLongDuration } from '../../utils/format/formatDuration';
+import { formatClockTime } from '../../utils/format/formatClockTime';
interface Props {
queue: Track[];
@@ -35,16 +36,11 @@ export function QueueHeader({
const remainingSecs = Math.max(0, (queue[queueIndex]?.duration ?? 0) - currentTime + futureTracksDuration);
- const fmtEta = (secs: number) => {
- const finishTime = new Date(Date.now() + secs * 1000);
- return new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit' }).format(finishTime);
- };
-
let dur: string | null = null;
if (queue.length > 0) {
if (durationMode === 'total') dur = formatLongDuration(Math.floor(totalSecs));
else if (durationMode === 'remaining') dur = `-${formatLongDuration(Math.floor(remainingSecs))}`;
- else dur = fmtEta(remainingSecs);
+ else dur = formatClockTime(Date.now() + remainingSecs * 1000);
}
const nextMode: DurationMode =
diff --git a/src/pages/ArtistDetail.tsx b/src/pages/ArtistDetail.tsx
index c78c2b02..0d8c0a65 100644
--- a/src/pages/ArtistDetail.tsx
+++ b/src/pages/ArtistDetail.tsx
@@ -28,7 +28,7 @@ import { extractCoverColors } from '../utils/ui/dynamicColors';
import StarRating from '../components/StarRating';
import { useArtistLayoutStore, type ArtistSectionId } from '../store/artistLayoutStore';
-import { sanitizeHtml } from '../utils/componentHelpers/artistDetailHelpers';
+import { sanitizeHtml } from '../utils/sanitizeHtml';
import { useArtistDetailData } from '../hooks/useArtistDetailData';
import { useArtistSimilarArtists } from '../hooks/useArtistSimilarArtists';
import {
diff --git a/src/pages/ComposerDetail.tsx b/src/pages/ComposerDetail.tsx
index a1f4dcfd..ef662bb5 100644
--- a/src/pages/ComposerDetail.tsx
+++ b/src/pages/ComposerDetail.tsx
@@ -15,25 +15,7 @@ import { useAuthStore } from '../store/authStore';
import { useTranslation } from 'react-i18next';
import { copyEntityShareLink } from '../utils/share/copyEntityShareLink';
import { showToast } from '../utils/ui/toast';
-
-/** Strip dangerous tags/attributes from server-provided HTML. Mirrors the
- * ArtistDetail sanitiser — kept inline because it's a 10-liner not worth a
- * separate util module. */
-function sanitizeHtml(html: string): string {
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, 'text/html');
- doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
- doc.querySelectorAll('*').forEach(el => {
- Array.from(el.attributes).forEach(attr => {
- const name = attr.name.toLowerCase();
- const val = attr.value.toLowerCase().trim();
- if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
- el.removeAttribute(attr.name);
- }
- });
- });
- return doc.body.innerHTML;
-}
+import { sanitizeHtml } from '../utils/sanitizeHtml';
export default function ComposerDetail() {
const { t } = useTranslation();
diff --git a/src/utils/componentHelpers/appUpdaterHelpers.ts b/src/utils/componentHelpers/appUpdaterHelpers.ts
index 3098551d..3872b08e 100644
--- a/src/utils/componentHelpers/appUpdaterHelpers.ts
+++ b/src/utils/componentHelpers/appUpdaterHelpers.ts
@@ -13,11 +13,6 @@ export function isNewer(a: string, b: string): boolean {
return false;
}
-export function fmtBytes(n: number): string {
- if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
- return `${(n / 1024 / 1024).toFixed(1)} MB`;
-}
-
export interface GithubAsset {
name: string;
browser_download_url: string;
diff --git a/src/utils/componentHelpers/nowPlayingHelpers.ts b/src/utils/componentHelpers/nowPlayingHelpers.ts
index c7cf8931..7947f2e0 100644
--- a/src/utils/componentHelpers/nowPlayingHelpers.ts
+++ b/src/utils/componentHelpers/nowPlayingHelpers.ts
@@ -1,4 +1,5 @@
import type { SubsonicSong } from '../../api/subsonicTypes';
+import { sanitizeHtml as sanitizeHtmlBase } from '../sanitizeHtml';
export function formatTime(s: number): string {
if (!s || isNaN(s)) return '0:00';
@@ -22,21 +23,10 @@ export function formatTotalDuration(s: number): string {
return `${sec}s`;
}
+/** Shared HTML sanitiser plus a now-playing-specific tweak: strip the trailing
+ * "Read more on Last.fm" style link so clamped bios end cleanly. */
export function sanitizeHtml(html: string): string {
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, 'text/html');
- doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
- doc.querySelectorAll('*').forEach(el => {
- Array.from(el.attributes).forEach(attr => {
- const name = attr.name.toLowerCase();
- const val = attr.value.toLowerCase().trim();
- if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
- el.removeAttribute(attr.name);
- }
- });
- });
- // Strip trailing "Read more on Last.fm" style links for cleaner clamped bios.
- return doc.body.innerHTML.replace(/
]*>.*?<\/a>\.?\s*$/i, '').trim();
+ return sanitizeHtmlBase(html).replace(/]*>.*?<\/a>\.?\s*$/i, '').trim();
}
export function isoToParts(iso: string): { month: string; day: string; weekday: string; time: string } | null {
diff --git a/src/utils/componentHelpers/playlistDetailHelpers.ts b/src/utils/componentHelpers/playlistDetailHelpers.ts
index da984860..7e86a3b6 100644
--- a/src/utils/componentHelpers/playlistDetailHelpers.ts
+++ b/src/utils/componentHelpers/playlistDetailHelpers.ts
@@ -1,5 +1,6 @@
import type { SubsonicSong } from '../../api/subsonicTypes';
import { formatHumanHoursMinutes } from '../format/formatHumanDuration';
+import { formatMb } from '../format/formatBytes';
export function sanitizeFilename(name: string): string {
return name
@@ -10,8 +11,7 @@ export function sanitizeFilename(name: string): string {
}
export function formatSize(bytes?: number): string {
- if (!bytes) return '';
- return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+ return bytes ? formatMb(bytes) : '';
}
export function totalDurationLabel(songs: SubsonicSong[]): string {
diff --git a/src/utils/format/formatBytes.ts b/src/utils/format/formatBytes.ts
index 885a3826..5f1cc098 100644
--- a/src/utils/format/formatBytes.ts
+++ b/src/utils/format/formatBytes.ts
@@ -4,6 +4,12 @@ export function formatBytes(bytes: number): string {
return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
}
+/** Always-MB variant for size totals that are conventionally shown in MB
+ * regardless of magnitude (album / playlist / device-sync totals). */
+export function formatMb(bytes: number): string {
+ return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
/** Align hot-cache size slider (step 32 MB) to valid values. */
export function snapHotCacheMb(v: number): number {
const x = Math.min(20000, Math.max(32, Math.round(v)));
diff --git a/src/utils/format/formatClockTime.ts b/src/utils/format/formatClockTime.ts
new file mode 100644
index 00000000..2557a0b0
--- /dev/null
+++ b/src/utils/format/formatClockTime.ts
@@ -0,0 +1,4 @@
+/** Localized wall-clock `HH:MM` for a timestamp (sleep-timer / queue-ETA labels). */
+export function formatClockTime(timestampMs: number): string {
+ return new Date(timestampMs).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
diff --git a/src/utils/componentHelpers/artistDetailHelpers.ts b/src/utils/sanitizeHtml.ts
similarity index 54%
rename from src/utils/componentHelpers/artistDetailHelpers.ts
rename to src/utils/sanitizeHtml.ts
index 93a5196a..78d80168 100644
--- a/src/utils/componentHelpers/artistDetailHelpers.ts
+++ b/src/utils/sanitizeHtml.ts
@@ -1,4 +1,8 @@
-/** Strip dangerous tags/attributes from server-provided HTML */
+/**
+ * Strip dangerous tags / attributes from server-provided HTML (artist & album
+ * biographies). Removes embedded/active elements and `on*` / `javascript:` /
+ * `data:` handlers before the result is fed to `dangerouslySetInnerHTML`.
+ */
export function sanitizeHtml(html: string): string {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
@@ -7,7 +11,11 @@ export function sanitizeHtml(html: string): string {
Array.from(el.attributes).forEach(attr => {
const name = attr.name.toLowerCase();
const val = attr.value.toLowerCase().trim();
- if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
+ if (
+ name.startsWith('on') ||
+ (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) ||
+ (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))
+ ) {
el.removeAttribute(attr.name);
}
});