Add new compose library screen (WIP)

app/src/main/java/io/github/drumber/kitsune/data/presentation/model/library/LibraryEntryWithModificationAndNextUnit.kt

@@ -0,0 +1,8 @@
+package io.github.drumber.kitsune.data.presentation.model.library
+
+import io.github.drumber.kitsune.data.presentation.model.media.unit.MediaUnit
+
+data class LibraryEntryWithModificationAndNextUnit(
+    val libraryEntryWithModification: LibraryEntryWithModification,
+    val nextUnit: MediaUnit?
+)

app/src/main/java/io/github/drumber/kitsune/ui/composables/Poster.kt

@@ -0,0 +1,35 @@
+package io.github.drumber.kitsune.ui.composables
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
+import com.bumptech.glide.integration.compose.GlideImage
+
+@OptIn(ExperimentalGlideComposeApi::class)
+@Composable
+fun Poster(
+    imageUrl: String?,
+    modifier: Modifier,
+    elevated: Boolean = false,
+    contentDescription: String? = null
+) {
+    Card(
+        modifier,
+        elevation = if (elevated) CardDefaults.elevatedCardElevation() else CardDefaults.cardElevation()
+    ) {
+        GlideImage(imageUrl, contentDescription)
+    }
+}
+
+@Composable
+fun SmallPoster(
+    imageUrl: String?,
+    elevated: Boolean = false,
+    contentDescription: String? = null
+) {
+    Poster(imageUrl, Modifier.size(106.dp, 150.dp), elevated, contentDescription)
+}

app/src/main/java/io/github/drumber/kitsune/ui/library_new/LibraryContent.kt

@@ -0,0 +1,213 @@
+package io.github.drumber.kitsune.ui.library_new
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.FilledIconButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedIconButton
+import androidx.compose.material3.ProgressIndicatorDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
+import com.bumptech.glide.integration.compose.GlideImage
+import io.github.drumber.kitsune.R
+import io.github.drumber.kitsune.data.presentation.model.library.LibraryEntry
+import io.github.drumber.kitsune.data.presentation.model.library.LibraryEntryWithModification
+import io.github.drumber.kitsune.data.presentation.model.library.LibraryEntryWithModificationAndNextUnit
+import io.github.drumber.kitsune.ui.composables.SmallPoster
+
+@Composable
+fun LibraryContent(modifier: Modifier = Modifier) {
+    Column(
+        modifier = Modifier
+            .verticalScroll(rememberScrollState())
+            .then(modifier)
+    ) {
+        CurrentLibraryEntriesShelf()
+        Spacer(Modifier.height(16.dp))
+        // upcoming media calendar/list
+        // want to watch shelf
+        // recently watched shelf
+        // links to on-hold, dropped
+    }
+}
+
+@Composable
+private fun CurrentLibraryEntriesShelf(
+    modifier: Modifier = Modifier,
+    libraryEntries: List<LibraryEntryWithModificationAndNextUnit> = emptyList()
+) {
+    LazyRow(modifier) {
+        items(libraryEntries) {
+            LibraryEntryWithNextUnitItem(libraryEntryWrapper = it)
+        }
+    }
+}
+
+@OptIn(ExperimentalGlideComposeApi::class)
+@Composable
+private fun LibraryEntryWithNextUnitItem(
+    modifier: Modifier = Modifier,
+    libraryEntryWrapper: LibraryEntryWithModificationAndNextUnit
+) {
+    val libraryEntry = libraryEntryWrapper.libraryEntryWithModification
+    val nextUnit = libraryEntryWrapper.nextUnit
+    val media = libraryEntry.libraryEntry.media
+
+    val coverImage = libraryEntryWrapper.nextUnit?.thumbnail?.originalOrDown()
+        ?: media?.coverImageUrl
+    val nextUnitText = when (nextUnit != null && nextUnit.hasValidTitle()) {
+        true -> nextUnit.title(LocalContext.current)
+        false -> nextUnit?.numberText(LocalContext.current)
+    }
+
+    val animatedProgress by animateFloatAsState(
+        targetValue = (libraryEntry.progress ?: 0) / (libraryEntry.episodeCount ?: 1).toFloat(),
+        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec,
+        label = "animatedLibraryProgress"
+    )
+
+    val overlayGradient = listOf(
+        CardDefaults.cardColors().containerColor.copy(alpha = 0.75f),
+        CardDefaults.cardColors().containerColor
+    )
+
+    Card(modifier) {
+        Box {
+            GlideImage(coverImage, contentDescription = null, modifier = Modifier.fillMaxSize())
+            Column(
+                Modifier
+                    .fillMaxSize()
+                    .background(Brush.verticalGradient(overlayGradient)),
+                verticalArrangement = Arrangement.Bottom
+            ) {
+                Row(
+                    Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp)
+                ) {
+                    SmallPoster(media?.posterImageUrl, elevated = true)
+                    Spacer(Modifier.width(16.dp))
+                    Column(
+                        Modifier
+                            .fillMaxWidth()
+                            .align(Alignment.Bottom)
+                    ) {
+                        Text(
+                            media?.title ?: stringResource(R.string.no_information),
+                            style = MaterialTheme.typography.titleMedium
+                        )
+                        Spacer(Modifier.height(4.dp))
+                        if (nextUnitText != null) {
+                            Text(
+                                nextUnitText,
+                                style = MaterialTheme.typography.bodyMedium
+                            )
+                        }
+                        LibraryEntryProgressAction(libraryEntry)
+                    }
+                }
+                if (libraryEntry.hasEpisodesCount) {
+                    LinearProgressIndicator(
+                        progress = { animatedProgress }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun LibraryEntryProgressAction(libraryEntry: LibraryEntryWithModification) {
+    Row(
+        Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            if (libraryEntry.hasStartedWatching)
+                (libraryEntry.progress
+                    ?: 0).toString() + "/" + libraryEntry.episodeCountFormatted
+            else stringResource(R.string.library_not_started)
+        )
+        Spacer(Modifier.weight(1f))
+        OutlinedIconButton(
+            onClick = { /* TODO */ },
+            shape = MaterialTheme.shapes.small
+        ) {
+            Icon(
+                painterResource(R.drawable.ic_remove_24),
+                contentDescription = stringResource(R.string.hint_mark_watched)
+            )
+        }
+        FilledIconButton(
+            onClick = { /* TODO */ },
+            shape = MaterialTheme.shapes.small
+        ) {
+            Icon(
+                painterResource(R.drawable.ic_add_24),
+                contentDescription = stringResource(R.string.hint_mark_watched)
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun LibraryContentPreview() {
+    LibraryContent()
+}
+
+@Preview(heightDp = 200)
+@Composable
+fun LibraryEntryWithNextUnitItemPreview() {
+    LibraryEntryWithNextUnitItem(
+        libraryEntryWrapper = LibraryEntryWithModificationAndNextUnit(
+            LibraryEntryWithModification(
+                LibraryEntry(
+                    id = "1",
+                    media = null,
+                    progress = 0,
+                    ratingTwenty = 0,
+                    status = null,
+                    reconsumeCount = 0,
+                    privateEntry = false,
+                    reactionSkipped = null,
+                    notes = null,
+                    volumesOwned = 0,
+                    updatedAt = null,
+                    startedAt = null,
+                    finishedAt = null,
+                    progressedAt = null,
+                    reconsuming = false
+                ), null
+            ), null
+        )
+    )
+}

app/src/main/java/io/github/drumber/kitsune/ui/library_new/LibraryTopBar.kt

@@ -0,0 +1,61 @@
+package io.github.drumber.kitsune.ui.library_new
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import io.github.drumber.kitsune.data.presentation.model.library.LibraryEntry
+
+data class LibraryTopBarState(
+    val isSearching: Boolean = false,
+    val query: String = "",
+    val suggestions: List<LibraryEntry> = emptyList()
+)
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun LibraryTopBar(
+    modifier: Modifier = Modifier,
+    state: LibraryTopBarState = LibraryTopBarState(),
+    onSearchQueryChange: (String) -> Unit = { },
+    onSearchSubmit: (String) -> Unit = { },
+    onSearchToggle: (Boolean) -> Unit = { }
+) {
+    SearchBar(
+        modifier = modifier.fillMaxWidth(),
+        inputField = {
+            SearchBarDefaults.InputField(
+                query = state.query,
+                onQueryChange = onSearchQueryChange,
+                onSearch = onSearchSubmit,
+                expanded = state.isSearching,
+                onExpandedChange = onSearchToggle,
+                placeholder = { Text("Search in your library") }
+            )
+        },
+        expanded = state.isSearching,
+        onExpandedChange = onSearchToggle
+    ) {
+        LazyColumn {
+            items(state.suggestions) {
+                ListItem(
+                    headlineContent = { Text(it.media?.title ?: "-") },
+                    supportingContent = { Text(it.media?.subtypeFormatted ?: "") }
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun LibraryTopBarPreview() {
+    LibraryTopBar()
+}

app/src/main/java/io/github/drumber/kitsune/ui/library_new/NewLibraryFragment.kt

@@ -0,0 +1,60 @@
+package io.github.drumber.kitsune.ui.library_new
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.appcompat.app.AppCompatDelegate
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawing
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.fragment.app.Fragment
+import androidx.lifecycle.asFlow
+import com.chibatching.kotpref.livedata.asLiveData
+import io.github.drumber.kitsune.preference.KitsunePref
+import io.github.drumber.kitsune.ui.theme.KitsuneTheme
+
+class NewLibraryFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        return ComposeView(requireContext()).apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+            setContent {
+                val useDynamicColorTheme by KitsunePref.asLiveData(KitsunePref::useDynamicColorTheme)
+                    .asFlow()
+                    .collectAsState(initial = KitsunePref.useDynamicColorTheme)
+                val darkModePreference by KitsunePref.asLiveData(KitsunePref::darkMode)
+                    .asFlow()
+                    .collectAsState(initial = KitsunePref.darkMode)
+
+                val isDarkModeEnabled = when (darkModePreference.toInt()) {
+                    AppCompatDelegate.MODE_NIGHT_NO -> false
+                    AppCompatDelegate.MODE_NIGHT_YES -> true
+                    else -> isSystemInDarkTheme()
+                }
+
+                KitsuneTheme(dynamicColor = useDynamicColorTheme, darkTheme = isDarkModeEnabled) {
+                    Scaffold(
+                        modifier = Modifier.fillMaxSize(),
+                        contentWindowInsets = WindowInsets.safeDrawing,
+                        topBar = { LibraryTopBar() }
+                    ) { innerPadding ->
+                        LibraryContent(modifier = Modifier.padding(innerPadding))
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/io/github/drumber/kitsune/ui/library_new/NewLibraryViewModel.kt

@@ -0,0 +1,9 @@
+package io.github.drumber.kitsune.ui.library_new
+
+import androidx.lifecycle.ViewModel
+
+class NewLibraryViewModel : ViewModel() {
+
+
+
+}