Skip to content

Commit

Permalink
Add sections for new library layout (still work in progress)
Browse files Browse the repository at this point in the history
  • Loading branch information
Drumber committed Dec 22, 2024
1 parent 35b4989 commit ab36131
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
package io.github.drumber.kitsune.ui.library_new

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
Expand All @@ -15,6 +17,7 @@ import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
Expand All @@ -32,7 +35,9 @@ import androidx.paging.compose.itemKey
import io.github.drumber.kitsune.R
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.data.presentation.model.library.LibraryStatus
import io.github.drumber.kitsune.ui.library_new.composables.LibraryEntryWithNextUnitItem
import io.github.drumber.kitsune.ui.library_new.composables.LibraryNavigationActions
import io.github.drumber.kitsune.ui.library_new.composables.toLibraryEntryWithNextUnitData
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.emptyFlow
Expand All @@ -44,7 +49,9 @@ fun LibraryContent(
onItemClick: (LibraryEntryWithModification) -> Unit = {},
onIncrementProgress: (LibraryEntryWithModification) -> Unit = {},
onRatingClick: (LibraryEntryWithModification) -> Unit = {},
onEditClick: (LibraryEntryWithModification) -> Unit = {}
onEditClick: (LibraryEntryWithModification) -> Unit = {},
onNavigateToStatus: (LibraryStatus) -> Unit = {},
onNavigateToWholeLibrary: () -> Unit = {},
) {
Column(
modifier = Modifier
Expand All @@ -59,11 +66,18 @@ fun LibraryContent(
onRatingClick = onRatingClick,
onEditClick = onEditClick
)
Spacer(Modifier.height(16.dp))
// upcoming media calendar/list
// want to watch shelf
// recently watched shelf
// links to on-hold, dropped
Spacer(Modifier.height(8.dp))
RecentlyCompletedShelf(Modifier.padding(16.dp))
Spacer(Modifier.height(8.dp))
UpcomingLibraryMediaShelf(Modifier.padding(16.dp))
Spacer(Modifier.height(8.dp))
PlannedLibraryEntriesShelf(Modifier.padding(16.dp))
Spacer(Modifier.height(8.dp))
LibraryNavigationActions(
modifier = Modifier.padding(16.dp),
onActionClick = onNavigateToStatus,
onWholeLibraryClick = onNavigateToWholeLibrary
)
}
}

Expand All @@ -78,7 +92,7 @@ private fun CurrentLibraryEntriesShelf(
) {
val lazyPagingItems = libraryEntries.collectAsLazyPagingItems()

Box(modifier = modifier.height(230.dp)) {
Box(modifier = modifier.height(220.dp)) {
when {
lazyPagingItems.loadState.refresh == LoadState.Loading -> {
CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
Expand All @@ -95,12 +109,19 @@ private fun CurrentLibraryEntriesShelf(

else -> {
BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
val horizontalPadding = 16.dp
val spaceBetweenItems = 8.dp
// preferred item width is 380dp,
// but can shrink to parent width (maxWidth from BoxWithConstraints)
// with a minimum of 350dp
val itemWidth = max(350.dp, min(380.dp, maxWidth))
val itemWidth =
max(350.dp, min(380.dp, maxWidth)) - horizontalPadding - spaceBetweenItems

LazyRow(modifier = Modifier.fillMaxSize()) {
LazyRow(
modifier = Modifier.fillMaxSize(),
horizontalArrangement = Arrangement.spacedBy(spaceBetweenItems),
contentPadding = PaddingValues(horizontal = horizontalPadding)
) {
items(
count = lazyPagingItems.itemCount,
key = lazyPagingItems.itemKey { it.libraryEntryWithModification.id },
Expand All @@ -120,7 +141,6 @@ private fun CurrentLibraryEntriesShelf(
modifier = Modifier
.width(itemWidth)
.fillMaxHeight()
.padding(8.dp)
.animateItem()
)
}
Expand All @@ -142,6 +162,54 @@ private fun CurrentLibraryEntriesShelf(
}
}

@Composable
private fun RecentlyCompletedShelf(modifier: Modifier = Modifier) {
Column(modifier) {
Text(
text = "Recently Completed",
style = MaterialTheme.typography.titleMedium,
)

LazyRow {
item {
Text("TODO", Modifier.padding(16.dp))
}
}
}
}

@Composable
private fun UpcomingLibraryMediaShelf(modifier: Modifier = Modifier) {
Column(modifier) {
Text(
text = "Upcoming",
style = MaterialTheme.typography.titleMedium,
)

LazyRow {
item {
Text("TODO", Modifier.padding(16.dp))
}
}
}
}

@Composable
private fun PlannedLibraryEntriesShelf(modifier: Modifier = Modifier) {
Column(modifier) {
Text(
text = "Watch next",
style = MaterialTheme.typography.titleMedium,
)

LazyRow {
item {
Text("TODO", Modifier.padding(16.dp))
}
}
}
}

@Preview(showBackground = true)
@Composable
private fun LibraryContentPreview() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import androidx.fragment.app.setFragmentResultListener
import androidx.lifecycle.asFlow
import androidx.navigation.findNavController
import com.chibatching.kotpref.livedata.asLiveData
import io.github.drumber.kitsune.R
import io.github.drumber.kitsune.data.presentation.dto.toMediaDto
import io.github.drumber.kitsune.preference.KitsunePref
import io.github.drumber.kitsune.ui.library.RatingBottomSheet
Expand Down Expand Up @@ -66,7 +67,9 @@ class NewLibraryFragment : Fragment() {
topBar = { LibraryTopBar(modifier = Modifier.padding(horizontal = 8.dp)) }
) { innerPadding ->
LibraryContent(
modifier = Modifier.padding(innerPadding),
modifier = Modifier
.padding(innerPadding)
.padding(top = 8.dp),
currentLibraryEntries = viewModel.currentLibraryEntriesPager,
onItemClick = { libraryEntry ->
val mediaDto =
Expand Down Expand Up @@ -99,6 +102,10 @@ class NewLibraryFragment : Fragment() {
},
onIncrementProgress = { libraryEntryWithModification ->
viewModel.incrementProgress(libraryEntryWithModification)
},
onNavigateToStatus = { /* TODO */ },
onNavigateToWholeLibrary = {
findNavController().navigate(R.id.library_fragment)
}
)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
package io.github.drumber.kitsune.ui.library_new.composables

import androidx.annotation.StringRes
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
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.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
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 io.github.drumber.kitsune.R
import io.github.drumber.kitsune.data.presentation.model.library.LibraryStatus

@Composable
fun LibraryNavigationActions(
modifier: Modifier = Modifier,
onActionClick: (LibraryStatus) -> Unit = {},
onWholeLibraryClick: () -> Unit = {}
) {
val actions = listOf(
LibraryAction(
icon = painterResource(R.drawable.ic_incomplete_circle_24),
status = LibraryStatus.Current,
labelAnime = R.string.library_status_watching,
labelManga = R.string.library_status_reading
),
LibraryAction(
icon = painterResource(R.drawable.ic_bookmark_added_24),
status = LibraryStatus.Planned,
labelAnime = R.string.library_status_planned,
labelManga = R.string.library_status_planned_manga
),
LibraryAction(
icon = painterResource(R.drawable.ic_done_24),
status = LibraryStatus.Completed,
labelAnime = R.string.library_status_completed
),
LibraryAction(
icon = painterResource(R.drawable.ic_watch_later_24),
status = LibraryStatus.OnHold,
labelAnime = R.string.library_status_on_hold
),
LibraryAction(
icon = painterResource(R.drawable.ic_cancel_presentation_24),
status = LibraryStatus.Dropped,
labelAnime = R.string.library_status_dropped
)
)

Card(modifier) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min)
.padding(horizontal = 8.dp)
.padding(top = 4.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = stringResource(R.string.anime),
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.weight(1f)
)
Text(
text = stringResource(R.string.manga),
style = MaterialTheme.typography.titleMedium,
modifier = Modifier.weight(1f)
)
}

actions.forEach { action ->
Row(
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Min),
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically
) {
LibraryActionCard(
modifier = Modifier
.weight(1f)
.fillMaxHeight(),
painter = action.icon,
text = stringResource(action.labelAnime),
onClick = { onActionClick(action.status) }
)
LibraryActionCard(
modifier = Modifier
.weight(1f)
.fillMaxHeight(),
painter = action.icon,
text = stringResource(action.labelManga),
onClick = { onActionClick(action.status) }
)
}
}

LibraryActionCard(
modifier = Modifier.height(IntrinsicSize.Min),
painter = painterResource(R.drawable.ic_outline_bookmarks_24),
text = "View your whole library",
onClick = onWholeLibraryClick
)
}
}
}

@Composable
private fun LibraryActionCard(
modifier: Modifier = Modifier,
painter: Painter,
text: String,
onClick: () -> Unit
) {
ElevatedCard(
modifier = modifier,
shape = CardDefaults.elevatedShape,
onClick = onClick,
) {
Row(
modifier = Modifier
.fillMaxSize()
.padding(8.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Icon(painter, null)
Text(
text = text,
style = MaterialTheme.typography.labelLarge
)
}
}
}

private data class LibraryAction(
val icon: Painter,
val status: LibraryStatus,
@StringRes val labelAnime: Int,
@StringRes val labelManga: Int = labelAnime
)

@Preview(showBackground = true)
@Composable
private fun LibraryNavigationActionsPreview() {
LibraryNavigationActions()
}

0 comments on commit ab36131

Please sign in to comment.