[optimize] UI optimizition

This commit is contained in:
acite
2025-09-18 00:11:25 +08:00
parent c402e18206
commit a15325deeb
4 changed files with 355 additions and 202 deletions

View File

@@ -17,6 +17,7 @@ import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@@ -41,9 +42,13 @@ import com.acitelight.aether.model.Comic
import com.acitelight.aether.viewModel.ComicGridViewModel import com.acitelight.aether.viewModel.ComicGridViewModel
@Composable @Composable
fun ComicGridView(comicId: String, navController: NavHostController, comicGridViewModel: ComicGridViewModel = hiltViewModel<ComicGridViewModel>()) { fun ComicGridView(
comicId: String,
navController: NavHostController,
comicGridViewModel: ComicGridViewModel = hiltViewModel<ComicGridViewModel>()
) {
comicGridViewModel.resolve(comicId.hexToString()) comicGridViewModel.resolve(comicId.hexToString())
comicGridViewModel.updateProcess(comicId.hexToString()){} comicGridViewModel.updateProcess(comicId.hexToString()) {}
ToggleFullScreen(false) ToggleFullScreen(false)
val colorScheme = MaterialTheme.colorScheme val colorScheme = MaterialTheme.colorScheme
@@ -52,47 +57,89 @@ fun ComicGridView(comicId: String, navController: NavHostController, comicGridVi
if (comic != null) { if (comic != null) {
Column { Column {
Box( Card(
Modifier Modifier
.padding(horizontal = 16.dp).padding(top = 36.dp) .padding(horizontal = 16.dp)
.background(colorScheme.surfaceContainerHighest, shape = RoundedCornerShape(12.dp)) .padding(top = 36.dp)
.heightIn(min = 42.dp),
colors = CardDefaults.cardColors(containerColor = colorScheme.primary),
shape = RoundedCornerShape(12.dp)
) )
{ {
Text( Box(
text = comic!!.comic.comic_name, Modifier
fontSize = 18.sp, .heightIn(min = 42.dp)
fontWeight = FontWeight.Bold, .fillMaxWidth()
maxLines = 1,
modifier = Modifier.padding(4.dp))
}
Box(
Modifier
.padding(horizontal = 16.dp).padding(top = 4.dp)
.background(colorScheme.surfaceContainerHighest, shape = RoundedCornerShape(12.dp))
) {
Text(
text = comic!!.comic.author,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
maxLines = 1,
modifier = Modifier.padding(4.dp)
) )
{
Text(
text = comic!!.comic.comic_name,
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
maxLines = 1,
modifier = Modifier.padding(4.dp).align(Alignment.CenterStart)
)
}
} }
Box( Card(
Modifier Modifier
.padding(horizontal = 16.dp).padding(top = 4.dp) .padding(horizontal = 16.dp)
.background(colorScheme.surfaceContainerHighest, shape = RoundedCornerShape(12.dp)) .padding(top = 4.dp)
.heightIn(min = 42.dp),
colors = CardDefaults.cardColors(containerColor = colorScheme.primary),
shape = RoundedCornerShape(12.dp)
) { ) {
Text( Box(
text = "Tags : ${comic!!.comic.tags.joinToString(", ")}", Modifier
fontSize = 16.sp, .heightIn(min = 42.dp)
fontWeight = FontWeight.Bold, .fillMaxWidth()
maxLines = 5,
modifier = Modifier.padding(4.dp)
) )
{
Text(
text = comic!!.comic.author,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
maxLines = 1,
modifier = Modifier
.padding(4.dp)
.align(Alignment.CenterStart)
)
}
} }
LazyColumn(modifier = Modifier.fillMaxWidth().weight(1f).padding(top = 6.dp).clip(RoundedCornerShape(6.dp)))
Card(
Modifier
.padding(horizontal = 16.dp)
.padding(top = 4.dp)
.heightIn(min = 42.dp),
colors = CardDefaults.cardColors(containerColor = colorScheme.primary),
shape = RoundedCornerShape(12.dp)
) {
Box(
Modifier
.heightIn(min = 42.dp)
.fillMaxWidth()
)
{
Text(
text = "Tags : ${comic!!.comic.tags.joinToString(", ")}",
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
maxLines = 5,
modifier = Modifier
.padding(4.dp)
.align(Alignment.CenterStart)
)
}
}
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.weight(1f)
.padding(top = 6.dp)
.clip(RoundedCornerShape(6.dp))
)
{ {
items(comicGridViewModel.chapterList) items(comicGridViewModel.chapterList)
{ c -> { c ->
@@ -100,48 +147,65 @@ fun ComicGridView(comicId: String, navController: NavHostController, comicGridVi
} }
} }
Box( Card(
Modifier Modifier
.padding(horizontal = 16.dp).padding(top = 6.dp).padding(bottom = 20.dp).heightIn(min = 42.dp) .padding(horizontal = 16.dp)
.background(colorScheme.surfaceContainerHighest, shape = RoundedCornerShape(12.dp)) .padding(top = 6.dp)
.clickable{ .padding(bottom = 20.dp)
.height(42.dp)
.clickable {
comicGridViewModel.updateProcess(comicId.hexToString()) comicGridViewModel.updateProcess(comicId.hexToString())
{ {
if(record != null) { if (record != null) {
val k = comic!!.getPageChapterIndex(record!!.position) val k = comic!!.getPageChapterIndex(record!!.position)
val route = "comic_page_route/${comic!!.id.toHex()}/${ val route = "comic_page_route/${comic!!.id.toHex()}/${
record!!.position record!!.position
}" }"
navController.navigate(route) navController.navigate(route)
}else } else {
{
val route = "comic_page_route/${comic!!.id.toHex()}/${0}" val route = "comic_page_route/${comic!!.id.toHex()}/${0}"
navController.navigate(route) navController.navigate(route)
} }
} }
} },
colors = CardDefaults.cardColors(containerColor = colorScheme.primary),
shape = RoundedCornerShape(12.dp)
) )
{ {
Row(Modifier.fillMaxWidth().align(Alignment.Center).padding(horizontal = 8.dp)) { Box(Modifier.fillMaxSize()) {
if(record != null) Row(
{ Modifier
val k = comic!!.getPageChapterIndex(record!!.position) .fillMaxWidth()
.align(Alignment.Center)
.padding(horizontal = 8.dp)
) {
if (record != null) {
val k = comic!!.getPageChapterIndex(record!!.position)
Text( Text(
text = "Last Read Position: ${k.first.name} ${k.second}/${comic!!.getChapterLength(k.first.page)}", text = "Last Read Position: ${k.first.name} ${k.second}/${
fontSize = 20.sp, comic!!.getChapterLength(
fontWeight = FontWeight.Bold, k.first.page
maxLines = 1, )
modifier = Modifier.padding(4.dp).weight(1f) }",
) fontSize = 20.sp,
}else{ fontWeight = FontWeight.Bold,
Text( maxLines = 1,
text = "Read from scratch", modifier = Modifier
fontSize = 20.sp, .padding(4.dp)
fontWeight = FontWeight.Bold, .weight(1f)
maxLines = 1, )
modifier = Modifier.padding(4.dp).weight(1f) } else {
) Text(
text = "Read from scratch",
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
maxLines = 1,
modifier = Modifier
.padding(4.dp)
.weight(1f)
)
}
} }
} }
} }
@@ -150,8 +214,12 @@ fun ComicGridView(comicId: String, navController: NavHostController, comicGridVi
} }
@Composable @Composable
fun ChapterCard(comic: Comic, navController: NavHostController, chapter: BookMark, comicGridViewModel: ComicGridViewModel = hiltViewModel<ComicGridViewModel>()) fun ChapterCard(
{ comic: Comic,
navController: NavHostController,
chapter: BookMark,
comicGridViewModel: ComicGridViewModel = hiltViewModel<ComicGridViewModel>()
) {
val c = chapter val c = chapter
val iv = comic.getPageIndex(c.page) val iv = comic.getPageIndex(c.page)
@@ -160,7 +228,8 @@ fun ChapterCard(comic: Comic, navController: NavHostController, chapter: BookMar
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.wrapContentHeight() .wrapContentHeight()
.padding(horizontal = 16.dp).padding(vertical = 6.dp), .padding(horizontal = 16.dp)
.padding(vertical = 6.dp),
onClick = { onClick = {
val route = "comic_page_route/${comic.id.toHex()}/${comic.getPageIndex(chapter.page)}" val route = "comic_page_route/${comic.id.toHex()}/${comic.getPageIndex(chapter.page)}"
navController.navigate(route) navController.navigate(route)
@@ -170,10 +239,12 @@ fun ChapterCard(comic: Comic, navController: NavHostController, chapter: BookMar
{ {
Row(Modifier.padding(6.dp)) Row(Modifier.padding(6.dp))
{ {
Box(Modifier Box(
.heightIn(max = 170.dp) Modifier
.clip(RoundedCornerShape(8.dp)) .heightIn(max = 170.dp)
.background(Color(0x44FFFFFF))) .clip(RoundedCornerShape(8.dp))
.background(Color(0x44FFFFFF))
)
{ {
AsyncImage( AsyncImage(
model = ImageRequest.Builder(LocalContext.current) model = ImageRequest.Builder(LocalContext.current)
@@ -183,7 +254,9 @@ fun ChapterCard(comic: Comic, navController: NavHostController, chapter: BookMar
.build(), .build(),
contentDescription = null, contentDescription = null,
imageLoader = comicGridViewModel.imageLoader!!, imageLoader = comicGridViewModel.imageLoader!!,
modifier = Modifier.padding(8.dp).widthIn(max = 170.dp), modifier = Modifier
.padding(8.dp)
.widthIn(max = 170.dp),
contentScale = ContentScale.Fit, contentScale = ContentScale.Fit,
) )
} }
@@ -194,23 +267,30 @@ fun ChapterCard(comic: Comic, navController: NavHostController, chapter: BookMar
fontSize = 18.sp, fontSize = 18.sp,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
maxLines = 5, maxLines = 5,
modifier = Modifier.padding(8.dp).background(Color.Transparent) modifier = Modifier
.padding(8.dp)
.background(Color.Transparent)
) )
Text( Text(
text = "${comic.getChapterLength(chapter.page)} Pages", text = "${comic.getChapterLength(chapter.page)} Pages",
fontSize = 14.sp, fontSize = 14.sp,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
maxLines = 1, maxLines = 1,
modifier = Modifier.padding(8.dp).background(Color.Transparent) modifier = Modifier
.padding(8.dp)
.background(Color.Transparent)
) )
} }
} }
val r = comic.comic.list.subList(iv, iv + comic.getChapterLength(c.page)) val r = comic.comic.list.subList(iv, iv + comic.getChapterLength(c.page))
LazyRow(modifier = Modifier.fillMaxWidth().padding(6.dp)) { LazyRow(
modifier = Modifier
.fillMaxWidth()
.padding(6.dp)
) {
items(r) items(r)
{ { r ->
r ->
Card( Card(
shape = RoundedCornerShape(12.dp), shape = RoundedCornerShape(12.dp),
modifier = Modifier modifier = Modifier
@@ -219,10 +299,11 @@ fun ChapterCard(comic: Comic, navController: NavHostController, chapter: BookMar
.height(140.dp) .height(140.dp)
.padding(horizontal = 6.dp), .padding(horizontal = 6.dp),
onClick = { onClick = {
val route = "comic_page_route/${"${comic.id}".toHex()}/${comic.getPageIndex(r)}" val route =
"comic_page_route/${"${comic.id}".toHex()}/${comic.getPageIndex(r)}"
navController.navigate(route) navController.navigate(route)
} }
){ ) {
AsyncImage( AsyncImage(
model = ImageRequest.Builder(LocalContext.current) model = ImageRequest.Builder(LocalContext.current)
.data(comic.getPage(r)) .data(comic.getPage(r))

View File

@@ -29,7 +29,9 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Bookmarks import androidx.compose.material.icons.filled.Bookmarks
import androidx.compose.material.icons.filled.Key import androidx.compose.material.icons.filled.Key
import androidx.compose.material3.Card import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
@@ -62,13 +64,20 @@ import com.acitelight.aether.viewModel.ComicPageViewModel
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@Composable @Composable
fun ComicPageView(comicId: String, page: String, navController: NavHostController, comicPageViewModel: ComicPageViewModel = hiltViewModel<ComicPageViewModel>()) fun ComicPageView(
{ comicId: String,
page: String,
navController: NavHostController,
comicPageViewModel: ComicPageViewModel = hiltViewModel<ComicPageViewModel>()
) {
val colorScheme = MaterialTheme.colorScheme
comicPageViewModel.SetupClient() comicPageViewModel.SetupClient()
comicPageViewModel.Resolve(comicId.hexToString(), page.toInt()) comicPageViewModel.Resolve(comicId.hexToString(), page.toInt())
val title by comicPageViewModel.title val title by comicPageViewModel.title
val pagerState = rememberPagerState(initialPage = page.toInt(), pageCount = { comicPageViewModel.pageList.size }) val pagerState = rememberPagerState(
initialPage = page.toInt(),
pageCount = { comicPageViewModel.pageList.size })
var showPlane by comicPageViewModel.showPlane var showPlane by comicPageViewModel.showPlane
var showBookMarkPop by remember { mutableStateOf(false) } var showBookMarkPop by remember { mutableStateOf(false) }
@@ -80,17 +89,19 @@ fun ComicPageView(comicId: String, page: String, navController: NavHostControll
{ {
HorizontalPager( HorizontalPager(
state = pagerState, state = pagerState,
modifier = Modifier.fillMaxSize().align(Alignment.Center).background(Color.Black).clickable{ modifier = Modifier
showPlane = !showPlane .fillMaxSize()
if(showPlane) .align(Alignment.Center)
{ .background(Color.Black)
comicPageViewModel.coroutineScope?.launch { .clickable {
comicPageViewModel.listState?.scrollToItem(index = pagerState.currentPage) showPlane = !showPlane
if (showPlane) {
comicPageViewModel.coroutineScope?.launch {
comicPageViewModel.listState?.scrollToItem(index = pagerState.currentPage)
}
} }
} }
} ) { page ->
) {
page ->
AsyncImage( AsyncImage(
model = ImageRequest.Builder(LocalContext.current) model = ImageRequest.Builder(LocalContext.current)
.data(it.getPage(page)) .data(it.getPage(page))
@@ -99,7 +110,9 @@ fun ComicPageView(comicId: String, page: String, navController: NavHostControll
.build(), .build(),
contentDescription = null, contentDescription = null,
imageLoader = comicPageViewModel.imageLoader!!, imageLoader = comicPageViewModel.imageLoader!!,
modifier = Modifier.padding(8.dp).fillMaxSize(), modifier = Modifier
.padding(8.dp)
.fillMaxSize(),
contentScale = ContentScale.Fit, contentScale = ContentScale.Fit,
) )
} }
@@ -110,86 +123,107 @@ fun ComicPageView(comicId: String, page: String, navController: NavHostControll
exit = slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight }), exit = slideOutVertically(targetOffsetY = { fullHeight -> -fullHeight }),
modifier = Modifier modifier = Modifier
.align(Alignment.TopCenter) .align(Alignment.TopCenter)
){ ) {
Box() Box()
{ {
Box(modifier = Modifier.height(160.dp).align(Alignment.TopCenter).fillMaxWidth().background( Column(Modifier
brush = Brush.verticalGradient( .align(Alignment.TopCenter)
colors = listOf( .fillMaxWidth())
Color.Black.copy(alpha = 0.75f),
Color.Transparent,
))))
Column(Modifier.align(Alignment.TopCenter).fillMaxWidth())
{ {
Row(modifier = Modifier Card(
.fillMaxWidth() colors = CardDefaults.cardColors(containerColor = colorScheme.primary),
.padding(top = 18.dp).padding(horizontal = 12.dp) shape = RoundedCornerShape(12.dp),
.height(42.dp) modifier = Modifier
.background(Color(0x90FFFFFF), shape = RoundedCornerShape(12.dp))) .fillMaxWidth()
{ .padding(top = 18.dp)
Text( .padding(horizontal = 12.dp)
text = title,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
color = Color.Black,
maxLines = 1,
modifier = Modifier.padding(8.dp).padding(horizontal = 10.dp).weight(1f).align(Alignment.CenterVertically)
)
Text(
text = "${pagerState.currentPage + 1}/${pagerState.pageCount}",
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
color = Color.Black,
maxLines = 1,
modifier = Modifier.padding(8.dp).widthIn(min = 60.dp).align(Alignment.CenterVertically)
)
}
Row {
Row(modifier = Modifier
.padding(top = 6.dp).padding(horizontal = 12.dp)
.height(42.dp) .height(42.dp)
.background(Color(0x90FFFFFF), shape = RoundedCornerShape(12.dp))) )
{
Row(modifier = Modifier.fillMaxSize())
{ {
val k = it.getPageChapterIndex(pagerState.currentPage)
Text( Text(
text = k.first.name, text = title,
fontSize = 16.sp, fontSize = 16.sp,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
color = Color.Black,
maxLines = 1, maxLines = 1,
modifier = Modifier.padding(8.dp).padding(horizontal = 10.dp).align(Alignment.CenterVertically) modifier = Modifier
.padding(8.dp)
.padding(horizontal = 10.dp)
.weight(1f)
.align(Alignment.CenterVertically)
) )
Text( Text(
text = "${k.second}/${it.getChapterLength(k.first.page)}", text = "${pagerState.currentPage + 1}/${pagerState.pageCount}",
fontSize = 18.sp, fontSize = 18.sp,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
color = Color.Black,
maxLines = 1, maxLines = 1,
modifier = Modifier.padding(8.dp).widthIn(min = 60.dp).align(Alignment.CenterVertically) modifier = Modifier
.padding(8.dp)
.widthIn(min = 60.dp)
.align(Alignment.CenterVertically)
) )
} }
}
Spacer(Modifier.weight(1f)) Box(Modifier.fillMaxWidth()) {
Card(
Row(modifier = Modifier modifier = Modifier
.padding(top = 6.dp).padding(horizontal = 12.dp) .align(Alignment.CenterStart)
.height(42.dp).width(42.dp) .padding(top = 6.dp)
.background(Color(0x90FFFFFF), shape = RoundedCornerShape(12.dp))) .padding(horizontal = 12.dp)
.height(42.dp),
colors = CardDefaults.cardColors(containerColor = colorScheme.primary),
shape = RoundedCornerShape(12.dp)
)
{ {
Box (Modifier.clickable { Row {
val k = it.getPageChapterIndex(pagerState.currentPage)
Text(
text = k.first.name,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
maxLines = 1,
modifier = Modifier
.padding(8.dp)
.padding(horizontal = 10.dp)
.align(Alignment.CenterVertically)
)
Text(
text = "${k.second}/${it.getChapterLength(k.first.page)}",
fontSize = 18.sp,
fontWeight = FontWeight.Bold,
maxLines = 1,
modifier = Modifier
.padding(8.dp)
.widthIn(min = 60.dp)
.align(Alignment.CenterVertically)
)
}
}
Card(
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(top = 6.dp)
.padding(horizontal = 12.dp)
.height(42.dp),
colors = CardDefaults.cardColors(containerColor = colorScheme.primary),
shape = RoundedCornerShape(12.dp)
)
{
Box(Modifier.clickable {
showBookMarkPop = true showBookMarkPop = true
}){ }) {
Icon( Icon(
Icons.Filled.Bookmarks, Icons.Filled.Bookmarks,
tint = Color.Black,
modifier = Modifier modifier = Modifier
.fillMaxSize()
.padding(8.dp), .padding(8.dp),
contentDescription = "Bookmark") contentDescription = "Bookmark"
)
} }
} }
} }
@@ -205,35 +239,31 @@ fun ComicPageView(comicId: String, page: String, navController: NavHostControll
.align(Alignment.BottomCenter) .align(Alignment.BottomCenter)
) )
{ {
Box{ Box {
Box(modifier = Modifier.height(360.dp).align(Alignment.BottomCenter).fillMaxWidth().background( LazyRow(
brush = Brush.verticalGradient( horizontalArrangement = Arrangement.spacedBy(5.dp),
colors = listOf( state = comicPageViewModel.listState!!, modifier = Modifier
Color.Transparent, .fillMaxWidth()
Color.Black.copy(alpha = 0.90f), .padding(bottom = 18.dp)
)))) .padding(horizontal = 12.dp)
.height(240.dp)
LazyRow (state = comicPageViewModel.listState!!, modifier = Modifier .align(Alignment.BottomCenter)
.fillMaxWidth() )
.padding(bottom = 18.dp).padding(horizontal = 12.dp)
.height(240.dp)
.align(Alignment.BottomCenter)
.background(Color(0x90999999), shape = RoundedCornerShape(12.dp)))
{ {
items(comicPageViewModel.pageList.size) items(comicPageViewModel.pageList.size)
{ { r ->
r ->
Card( Card(
colors = CardDefaults.cardColors(containerColor = colorScheme.primary.copy(0.8f)),
shape = RoundedCornerShape(12.dp), shape = RoundedCornerShape(12.dp),
modifier = Modifier modifier = Modifier
.fillMaxHeight() .fillMaxHeight()
.wrapContentHeight() .wrapContentHeight()
.padding(horizontal = 6.dp).padding(vertical = 6.dp), .padding(vertical = 8.dp),
onClick = { onClick = {
pagerState.requestScrollToPage(page = r) pagerState.requestScrollToPage(page = r)
} }
){ ) {
Box() Box(Modifier.padding(4.dp))
{ {
AsyncImage( AsyncImage(
model = ImageRequest.Builder(LocalContext.current) model = ImageRequest.Builder(LocalContext.current)
@@ -250,19 +280,27 @@ fun ComicPageView(comicId: String, page: String, navController: NavHostControll
contentScale = ContentScale.Fit, contentScale = ContentScale.Fit,
) )
val k = it.getPageChapterIndex(r) val k = it.getPageChapterIndex(r)
Box(Modifier Box(
.align(Alignment.TopEnd) Modifier
.padding(6.dp) .align(Alignment.TopEnd)
.background(Color.Black.copy(alpha = 0.65f), shape = RoundedCornerShape(12.dp))) .padding(6.dp)
.background(
Color.Black.copy(alpha = 0.65f),
shape = RoundedCornerShape(12.dp)
)
)
{ {
Row{ Row {
Text( Text(
text = k.first.name, text = k.first.name,
fontSize = 14.sp, fontSize = 14.sp,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
color = Color.White, color = Color.White,
maxLines = 1, maxLines = 1,
modifier = Modifier.padding(2.dp).widthIn(max = 100.dp).align(Alignment.CenterVertically) modifier = Modifier
.padding(2.dp)
.widthIn(max = 200.dp)
.align(Alignment.CenterVertically)
) )
Text( Text(
@@ -271,7 +309,9 @@ fun ComicPageView(comicId: String, page: String, navController: NavHostControll
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
color = Color.White, color = Color.White,
maxLines = 1, maxLines = 1,
modifier = Modifier.padding(2.dp).align(Alignment.CenterVertically) modifier = Modifier
.padding(2.dp)
.align(Alignment.CenterVertically)
) )
} }
} }
@@ -284,16 +324,18 @@ fun ComicPageView(comicId: String, page: String, navController: NavHostControll
} }
} }
if(showBookMarkPop) if (showBookMarkPop) {
{
BookmarkPop({ BookmarkPop({
showBookMarkPop = false showBookMarkPop = false
}, { }, { s ->
s ->
showBookMarkPop = false showBookMarkPop = false
comicPageViewModel.coroutineScope?.launch { comicPageViewModel.coroutineScope?.launch {
comicPageViewModel.mediaManager.postBookmark(comicId.hexToString(), BookMark(name = s, page = comicPageViewModel.pageList[pagerState.currentPage])) comicPageViewModel.mediaManager.postBookmark(
comicPageViewModel.comic.value = comicPageViewModel.mediaManager.queryComicInfoSingle(comicId.hexToString()) comicId.hexToString(),
BookMark(name = s, page = comicPageViewModel.pageList[pagerState.currentPage])
)
comicPageViewModel.comic.value =
comicPageViewModel.mediaManager.queryComicInfoSingle(comicId.hexToString())
} }
}); });
} }

View File

@@ -20,6 +20,10 @@ import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.grid.rememberLazyGridState import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
@@ -139,7 +143,7 @@ fun ComicScreen(
comicScreenViewModel: ComicScreenViewModel = hiltViewModel<ComicScreenViewModel>() comicScreenViewModel: ComicScreenViewModel = hiltViewModel<ComicScreenViewModel>()
) { ) {
val included = comicScreenViewModel.included val included = comicScreenViewModel.included
val state = rememberLazyGridState() val state = rememberLazyStaggeredGridState()
val colorScheme = MaterialTheme.colorScheme val colorScheme = MaterialTheme.colorScheme
Column { Column {
@@ -156,7 +160,7 @@ fun ComicScreen(
Box( Box(
Modifier Modifier
.background( .background(
if (included.contains(i)) Color.Green.copy(alpha = 0.65f) else colorScheme.surfaceContainerHighest, if (included.contains(i)) Color.Green.copy(alpha = 0.65f) else colorScheme.primary,
shape = RoundedCornerShape(4.dp) shape = RoundedCornerShape(4.dp)
) )
.height(32.dp).widthIn(max = 72.dp) .height(32.dp).widthIn(max = 72.dp)
@@ -182,19 +186,26 @@ fun ComicScreen(
HorizontalDivider(thickness = 1.5.dp) HorizontalDivider(thickness = 1.5.dp)
LazyVerticalGrid( LazyVerticalStaggeredGrid(
columns = GridCells.Adaptive(128.dp), columns = StaggeredGridCells.Adaptive(128.dp),
contentPadding = PaddingValues(8.dp), contentPadding = PaddingValues(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalItemSpacing = 8.dp,
horizontalArrangement = Arrangement.spacedBy(8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp),
state = state state = state,
) modifier = Modifier.fillMaxSize()
{ ) {
items(comicScreenViewModel.comics.filter { x -> items(
included.all { y -> y in x.comic.tags } || included.isEmpty() items = comicScreenViewModel.comics.filter { x ->
}) included.all { y -> y in x.comic.tags } || included.isEmpty()
{ comic -> },
ComicCard(comic, navController, comicScreenViewModel) key = { it.id }
) { comic ->
Box(modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
ComicCard(comic, navController, comicScreenViewModel)
}
} }
} }
} }

View File

@@ -30,6 +30,10 @@ import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
@@ -109,6 +113,7 @@ fun VideoScreen(
videoScreenViewModel: VideoScreenViewModel = hiltViewModel<VideoScreenViewModel>(), videoScreenViewModel: VideoScreenViewModel = hiltViewModel<VideoScreenViewModel>(),
navController: NavHostController navController: NavHostController
) { ) {
val state = rememberLazyStaggeredGridState()
val colorScheme = MaterialTheme.colorScheme val colorScheme = MaterialTheme.colorScheme
val tabIndex by videoScreenViewModel.tabIndex val tabIndex by videoScreenViewModel.tabIndex
var menuVisibility by videoScreenViewModel.menuVisibility var menuVisibility by videoScreenViewModel.menuVisibility
@@ -172,13 +177,19 @@ fun VideoScreen(
} }
} }
Box( Row(
modifier = Modifier modifier = Modifier
.height(36.dp).widthIn(max = 240.dp) .height(36.dp).widthIn(max = 240.dp)
.background(colorScheme.primary, RoundedCornerShape(8.dp)) .background(colorScheme.primary, RoundedCornerShape(8.dp))
.padding(horizontal = 6.dp), .padding(horizontal = 6.dp)
contentAlignment = Alignment.CenterStart
) { ) {
Icon(
modifier = Modifier
.size(30.dp).align(Alignment.CenterVertically),
imageVector = Icons.Default.Search,
contentDescription = "Catalogue"
)
Spacer(Modifier.width(4.dp))
BasicTextField( BasicTextField(
value = searchFilter, value = searchFilter,
onValueChange = { searchFilter = it }, onValueChange = { searchFilter = it },
@@ -188,26 +199,34 @@ fun VideoScreen(
textAlign = TextAlign.Start textAlign = TextAlign.Start
), ),
singleLine = true, singleLine = true,
modifier = Modifier modifier = Modifier.align(Alignment.CenterVertically)
) )
} }
} }
HorizontalDivider(Modifier.padding(bottom = 8.dp), 1.5.dp, DividerDefaults.color) HorizontalDivider(Modifier.padding(bottom = 8.dp), 1.5.dp, DividerDefaults.color)
LazyVerticalGrid( LazyVerticalStaggeredGrid(
columns = GridCells.Adaptive(160.dp), columns = StaggeredGridCells.Adaptive(160.dp),
contentPadding = PaddingValues(8.dp), contentPadding = PaddingValues(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp), verticalItemSpacing = 8.dp,
horizontalArrangement = Arrangement.spacedBy(8.dp) horizontalArrangement = androidx.compose.foundation.layout.Arrangement.spacedBy(8.dp),
) state = state,
{ modifier = Modifier.fillMaxSize()
) {
items( items(
videoScreenViewModel.videoLibrary.classesMap.getOrDefault( items = videoScreenViewModel.videoLibrary.classesMap.getOrDefault(
videoScreenViewModel.videoLibrary.classes.getOrNull( videoScreenViewModel.videoLibrary.classes.getOrNull(
tabIndex tabIndex
), listOf() ), listOf()
).filter { it.video.name.contains(searchFilter) } ).filter { it.video.name.contains(searchFilter) },
key = { "${it.klass}/${it.id}" }
) { video -> ) { video ->
VideoCard(video, navController, videoScreenViewModel) androidx.compose.foundation.layout.Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
VideoCard(video, navController, videoScreenViewModel)
}
} }
} }
} }