diff --git a/android/app/src/main/kotlin/com/novasonic/app/ui/AppNavigation.kt b/android/app/src/main/kotlin/com/novasonic/app/ui/AppNavigation.kt index 4684604..e504d40 100644 --- a/android/app/src/main/kotlin/com/novasonic/app/ui/AppNavigation.kt +++ b/android/app/src/main/kotlin/com/novasonic/app/ui/AppNavigation.kt @@ -464,6 +464,7 @@ fun AppNavigation() { PlaylistPickerSheet( song = song, loadPlaylists = { repo.getPlaylists() }, + coverUrl = { id -> coverUrl(id) }, onAdd = { pl -> playlistPickerSong = null scope.launch { diff --git a/android/app/src/main/kotlin/com/novasonic/app/ui/component/PlaylistPickerSheet.kt b/android/app/src/main/kotlin/com/novasonic/app/ui/component/PlaylistPickerSheet.kt index 91f82bd..27acfd2 100644 --- a/android/app/src/main/kotlin/com/novasonic/app/ui/component/PlaylistPickerSheet.kt +++ b/android/app/src/main/kotlin/com/novasonic/app/ui/component/PlaylistPickerSheet.kt @@ -1,9 +1,11 @@ package com.novasonic.app.ui.component +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.QueueMusic import androidx.compose.material.icons.filled.Add @@ -11,9 +13,12 @@ import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import coil.compose.AsyncImage import com.novasonic.app.api.model.Playlist import com.novasonic.app.api.model.Song import com.novasonic.app.ui.theme.* @@ -23,6 +28,7 @@ import com.novasonic.app.ui.theme.* fun PlaylistPickerSheet( song: Song, loadPlaylists: suspend () -> List, + coverUrl: (String?) -> String?, onAdd: (Playlist) -> Unit, onCreate: (String) -> Unit, onDismiss: () -> Unit, @@ -117,8 +123,22 @@ fun PlaylistPickerSheet( .padding(horizontal = 20.dp, vertical = 14.dp), verticalAlignment = Alignment.CenterVertically, ) { - Icon(Icons.AutoMirrored.Filled.QueueMusic, null, - tint = NsOnSurface2, modifier = Modifier.size(20.dp)) + val cv = coverUrl(pl.coverArt) + Box( + Modifier.size(40.dp).clip(RoundedCornerShape(6.dp)).background(NsSurface2), + contentAlignment = Alignment.Center, + ) { + if (cv != null) { + AsyncImage( + model = cv, contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier.fillMaxSize(), + ) + } else { + Icon(Icons.AutoMirrored.Filled.QueueMusic, null, + tint = NsOnSurface2, modifier = Modifier.size(20.dp)) + } + } Spacer(Modifier.width(14.dp)) Text( pl.name, diff --git a/src/ui/modals.js b/src/ui/modals.js index 54b6405..10de8bf 100644 --- a/src/ui/modals.js +++ b/src/ui/modals.js @@ -87,7 +87,11 @@ export async function openPlModal(songs) { } S.cachedPlaylists.forEach(pl => { const row = document.createElement('div'); row.className = 'pl-row'; - row.innerHTML = ` + const cv = pl.coverArt ? coverUrl(pl.coverArt, 96) : null; + const inner = cv + ? `` + : ''; + row.innerHTML = `${inner} ${esc(pl.name)}${pl.songCount} Titel`; row.onclick = () => addSongsToPlaylist(pl.id, pl.name); list.appendChild(row);