[fix&optimize] Fix the issue of element teleportation in ComicScreen pages

app/src/main/java/com/acitelight/aether/view/components/ComicCard.kt

@@ -64,11 +64,11 @@ fun ComicCard(
                         .diskCacheKey("${comic.id}/cover")
                         .build(),
                     contentDescription = null,
-                    imageLoader = comicScreenViewModel.imageLoader!!,
                     modifier = Modifier
                         .fillMaxSize()
                         .clip(RoundedCornerShape(8.dp)),
-                    contentScale = ContentScale.Crop,
+                    contentScale = ContentScale.Fit,
+                    imageLoader = comicScreenViewModel.imageLoader!!,
                 )
 
                 Box(
@@ -100,22 +100,21 @@ fun ComicCard(
             }
             Text(
                 text = comic.comic.comic_name,
-                fontSize = 14.sp,
-                lineHeight = 17.sp,
-                fontWeight = FontWeight.Bold,
-                maxLines = 2,
-                modifier = Modifier.padding(4.dp)
-            )
-
-            Box(Modifier.padding(4.dp).fillMaxWidth()){
-                Text(
-                    text = "Id: ${comic.id}",
                 fontSize = 12.sp,
                 lineHeight = 14.sp,
-                    maxLines = 1,
+                fontWeight = FontWeight.Bold,
-                    modifier = Modifier.align(Alignment.CenterStart)
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(4.dp)
+                    .heightIn(min = 14.dp)
+            )
+            Text(
+                text = "Id: ${comic.id}",
+                fontSize = 10.sp,
+                lineHeight = 12.sp,
+                maxLines = 1,
+                modifier = Modifier.padding(4.dp)
             )
-            }
         }
     }
 }

app/src/main/java/com/acitelight/aether/view/components/VideoPlayerLandscape.kt

@@ -229,7 +229,9 @@ fun VideoPlayerLandscape(videoPlayerViewModel: VideoPlayerViewModel) {
                             }
                         }
                     },
-                    modifier = Modifier.fillMaxWidth()
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .fillMaxWidth()
                 )
             }
 

app/src/main/java/com/acitelight/aether/view/pages/ComicGridView.kt

@@ -96,7 +96,7 @@ fun ComicGridView(
     }
 
     LaunchedEffect(comicGridViewModel) {
-        comicGridViewModel.coverHeight = screenHeight * 0.4f
+        comicGridViewModel.coverHeight = screenHeight * 0.3f
         if(comicGridViewModel.maxHeight == 0.dp)
             comicGridViewModel.maxHeight = screenHeight * 0.8f
     }
@@ -252,7 +252,7 @@ fun ComicGridView(
                             fontSize = 11.sp,
                             lineHeight = 15.sp,
                             maxLines = 3,
-                            modifier = Modifier.padding(horizontal = 16.dp).padding(bottom = 4.dp)
+                            modifier = Modifier.padding(horizontal = 16.dp).padding(bottom = 4.dp).align(Alignment.CenterStart)
                         )
 
                         Button(onClick = {
@@ -379,10 +379,10 @@ fun ChapterCard(
         {
             Text(
                 text = chapter.name,
-                fontSize = 14.sp,
+                fontSize = 16.sp,
                 fontWeight = FontWeight.Bold,
                 maxLines = 2,
-                lineHeight = 16.sp,
+                lineHeight = 18.sp,
                 modifier = Modifier
                     .padding(horizontal = 8.dp).padding(vertical = 4.dp)
                     .background(Color.Transparent)
@@ -391,7 +391,6 @@ fun ChapterCard(
                 text = "${comic.getChapterLength(chapter.page)} Pages",
                 fontSize = 14.sp,
                 lineHeight = 16.sp,
-                fontWeight = FontWeight.Bold,
                 maxLines = 1,
                 modifier = Modifier
                     .padding(horizontal = 8.dp)

app/src/main/java/com/acitelight/aether/view/pages/ComicPageView.kt

@@ -243,7 +243,15 @@ fun ComicPageView(
             {
                 val k = it.getPageChapterIndex(pagerState.currentPage)
                 Column(Modifier
-                    .padding(bottom = 24.dp)) {
+                    .background(
+                        brush = Brush.verticalGradient(
+                            colors = listOf(
+                                Color.Transparent,
+                                Color.Black.copy(alpha = 0.9f),
+                            )
+                        )
+                    )) {
+                    Spacer(Modifier.height(42.dp))
                     LazyRow(
                         horizontalArrangement = Arrangement.spacedBy(5.dp),
                         state = comicPageViewModel.listState!!, modifier = Modifier
@@ -266,7 +274,7 @@ fun ComicPageView(
                                     pagerState.requestScrollToPage(page = r)
                                 }
                             ) {
-                                Box(Modifier.padding(1.dp))
+                                Box(Modifier.padding(0.dp))
                                 {
                                     AsyncImage(
                                         model = ImageRequest.Builder(LocalContext.current)
@@ -321,6 +329,9 @@ fun ComicPageView(
 
                         }
                     )
+
+
+                    Spacer(Modifier.height(24.dp))
                 }
             }
         }

app/src/main/java/com/acitelight/aether/view/pages/ComicScreen.kt

@@ -133,9 +133,11 @@ fun ComicScreen(
     var searchFilter by comicScreenViewModel.searchFilter
 
     Column {
-        Row(Modifier
+        Row(
+            Modifier
                 .padding(4.dp)
-            .align(Alignment.CenterHorizontally)) {
+                .align(Alignment.CenterHorizontally)
+        ) {
             Text(
                 text = "Comics",
                 style = MaterialTheme.typography.headlineMedium,
@@ -189,7 +191,8 @@ fun ComicScreen(
                             if (included.contains(i)) Color.Green.copy(alpha = 0.65f) else colorScheme.surface,
                             shape = RoundedCornerShape(4.dp)
                         )
-                        .height(32.dp).widthIn(max = 72.dp)
+                        .height(32.dp)
+                        .widthIn(max = 72.dp)
                         .clickable {
                             if (included.contains(i))
                                 included.remove(i)
@@ -221,12 +224,15 @@ fun ComicScreen(
             modifier = Modifier.fillMaxSize()
         ) {
             items(
-                items = comicScreenViewModel.comics.filter { searchFilter.isEmpty() || searchFilter in it.comic.comic_name }.filter { x ->
+                items = comicScreenViewModel.comics
+                    .filter { searchFilter.isEmpty() || searchFilter in it.comic.comic_name }
+                    .filter { x ->
                         included.all { y -> y in x.comic.tags } || included.isEmpty()
                     },
                 key = { it.id }
             ) { comic ->
-                Box(modifier = Modifier
+                Box(
+                    modifier = Modifier
                         .fillMaxWidth()
                         .wrapContentHeight()
                 ) {