Refine offline mode UX for unavailable tracks and playlist filters

- Remove wifi-off icon from unavailable tracks in playlist detail view,
  keeping only the disabled styling for a cleaner look
- Rename "Available Offline" filter to "Fully Available Offline" to
  clarify it shows only playlists where all tracks are available
- Update filter logic to only show all_local playlists in the fully
  available filter, not partially available ones
- Fix visible filter in offline mode to respect showPartialPlaylists
  setting by using isPlaylistAvailableOffline function
This commit is contained in:
vicrodh committed 2026-01-16 09:35:40 -06:00
1 parent 93d886e1dd
commit 9499203c69
4 files changed
+6 -22

No files matched your search

@@ -1,5 +1,5 @@
<script lang="ts">
import { ArrowLeft, Play, Shuffle, ListMusic, Search, X, ChevronDown, ChevronRight, ImagePlus, Edit3, BarChart2, WifiOff } from 'lucide-svelte';
import { ArrowLeft, Play, Shuffle, ListMusic, Search, X, ChevronDown, ChevronRight, ImagePlus, Edit3, BarChart2 } from 'lucide-svelte';
import AlbumMenu from '../AlbumMenu.svelte';
import PlaylistCollage from '../PlaylistCollage.svelte';
import PlaylistModal from '../PlaylistModal.svelte';
@@ -910,11 +910,6 @@
class:unavailable={!available}
title={!available ? $t('offline.trackNotAvailable') : undefined}
>
{#if !available && !track.isLocal}
<div class="unavailable-indicator" title={$t('offline.trackNotAvailable')}>
<WifiOff size={12} />
</div>
{/if}
<TrackRow
trackId={track.isLocal ? undefined : track.id}
number={idx + 1}
@@ -1494,14 +1489,4 @@
filter: grayscale(100%);
}
.unavailable-indicator {
position: absolute;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
color: var(--text-muted);
}
</style>
@@ -129,10 +129,10 @@
if (offlineStatus.isOffline) {
// In offline mode, use offline-specific filters
if (filter === 'offline_all' || filter === 'all') {
// Show all playlists with ANY local content (full or partial)
// Show only playlists where ALL tracks are available offline
result = result.filter(p => {
const localStatus = getLocalContentStatus(p.id);
return localStatus === 'all_local' || localStatus === 'some_local';
return localStatus === 'all_local';
});
} else if (filter === 'offline_partial') {
// Show only playlists with partial local content
@@ -149,8 +149,7 @@
} else if (filter === 'visible') {
result = result.filter(p => {
const settings = playlistSettings.get(p.id);
const localStatus = getLocalContentStatus(p.id);
return !settings?.hidden && (localStatus === 'all_local' || localStatus === 'some_local');
return !settings?.hidden && isPlaylistAvailableOffline(p.id);
});
} else if (filter === 'hidden') {
result = result.filter(p => playlistSettings.get(p.id)?.hidden);
+1 -1
View File
@@ -482,7 +482,7 @@
"startWithoutLogin": "Start in offline mode without logging in",
"noNetworkToast": "No internet connection available",
"checkingNetwork": "Checking network connection...",
"available": "Available Offline",
"available": "Fully Available Offline",
"partiallyAvailable": "Partially Available",
"notAvailableOffline": "Not Available Offline",
"viewOnly": "View Only (Offline)",
+1 -1
View File
@@ -482,7 +482,7 @@
"startWithoutLogin": "Iniciar en modo offline sin autenticacion",
"noNetworkToast": "No hay conexion a internet disponible",
"checkingNetwork": "Verificando conexion a internet...",
"available": "Disponible Offline",
"available": "Totalmente Disponible Offline",
"partiallyAvailable": "Parcialmente Disponible",
"notAvailableOffline": "No Disponible Offline",
"viewOnly": "Solo Ver (Offline)",