- updated README.md with latest UI images!

- added a way to press and hold on MangaWorld manga to see more info and the full name when on recent or all
jakepurple13 · Oct 22, 2021 · 2624ca9 · 2624ca9
1 parent 1694ade
commit 2624ca9
Show file tree

Hide file tree

Showing 39 changed files with 103 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -34,22 +34,22 @@ A combined version of my [MangaWorld](https://github.com/jakepurple13/MangaWorld
 
 ### MangaWorld
 <p align="center">
-  <img src="/ss/s1.png" width="32%"/>
-  <img src="/ss/s2.png" width="32%"/>
-  <img src="/ss/s3.png" width="32%"/>
-  <img src="/ss/s4.png" width="32%"/>
-  <img src="/ss/s5.png" width="32%"/>
-  <img src="/ss/s6.png" width="32%"/>
+  <img src="/ss/mw_recent.png" width="32%"/>
+  <img src="/ss/mw_all.png" width="32%"/>
+  <img src="/ss/mw_details.png" width="32%"/>
+  <img src="/ss/mw_notifications.png" width="32%"/>
+  <img src="/ss/mw_top_settings.png" width="32%"/>
+  <img src="/ss/mw_more_settings.png" width="32%"/>
 </p>
 
 ### AnimeWorld
 <p align="center">
-  <img src="/ss/s7.png" width="32%"/>
-  <img src="/ss/s8.png" width="32%"/>
-  <img src="/ss/s9.png" width="32%"/>
-  <img src="/ss/s10.png" width="32%"/>
-  <img src="/ss/s11.png" width="32%"/>
-  <img src="/ss/s12.png" width="32%"/>
+  <img src="/ss/aw_recent.png" width="32%"/>
+  <img src="/ss/aw_all.png" width="32%"/>
+  <img src="/ss/aw_details.png" width="32%"/>
+  <img src="/ss/aw_history.png" width="32%"/>
+  <img src="/ss/aw_top_settings.png" width="32%"/>
+  <img src="/ss/aw_more_settings.png" width="32%"/>
 </p>
 
 ### AnimeWorldTV
@@ -64,12 +64,12 @@ A combined version of my [MangaWorld](https://github.com/jakepurple13/MangaWorld
 
 ### NovelWorld
 <p align="center">
-  <img src="/ss/novel_ss13.png" width="32%"/>
-  <img src="/ss/novel_ss14.png" width="32%"/>
-  <img src="/ss/novel_ss15.png" width="32%"/>
-  <img src="/ss/novel_ss16.png" width="32%"/>
-  <img src="/ss/novel_ss17.png" width="32%"/>
-  <img src="/ss/novel_ss18.png" width="32%"/>
+  <img src="/ss/nw_recent.png" width="32%"/>
+  <img src="/ss/nw_all.png" width="32%"/>
+  <img src="/ss/nw_details.png" width="32%"/>
+  <img src="/ss/nw_global_search.png" width="32%"/>
+  <img src="/ss/nw_favorites.png" width="32%"/>
+  <img src="/ss/nw_settings.png" width="32%"/>
 </p>
 
 ### Otaku Manager

diff --git a/UIViews/src/main/java/com/programmersbox/uiviews/utils/ComposableUtils.kt b/UIViews/src/main/java/com/programmersbox/uiviews/utils/ComposableUtils.kt
@@ -11,9 +11,11 @@ import androidx.appcompat.content.res.AppCompatResources
 import androidx.compose.animation.*
 import androidx.compose.animation.core.*
 import androidx.compose.foundation.*
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.gestures.rememberTransformableState
 import androidx.compose.foundation.gestures.transformable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.*
 import androidx.compose.foundation.shape.CornerSize
@@ -37,6 +39,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.NestedScrollSource
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.Placeable
@@ -331,28 +334,48 @@ suspend fun calculateDiff(
     DiffUtil.calculateDiff(diffCb, detectMoves)
 }
 
+enum class ComponentState { Pressed, Released }
+
 @ExperimentalMaterialApi
 @Composable
 fun CoverCard(
+    modifier: Modifier = Modifier,
     imageUrl: String,
     name: String,
     placeHolder: Int,
     error: Int = placeHolder,
+    onLongPress: (ComponentState) -> Unit = {},
     favoriteIcon: @Composable BoxScope.() -> Unit = {},
     onClick: () -> Unit = {}
 ) {
     val context = LocalContext.current
+    val interactionSource = remember { MutableInteractionSource() }
 
     Card(
-        onClick = onClick,
         modifier = Modifier
             .padding(4.dp)
             .size(
                 ComposableUtils.IMAGE_WIDTH,
                 ComposableUtils.IMAGE_HEIGHT
-            ),
-        indication = rememberRipple(),
-        onClickLabel = name,
+            )
+            .indication(
+                interactionSource = interactionSource,
+                indication = rememberRipple()
+            )
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onLongPress = { onLongPress(ComponentState.Pressed) },
+                    onPress = {
+                        val press = PressInteraction.Press(it)
+                        interactionSource.tryEmit(press)
+                        tryAwaitRelease()
+                        onLongPress(ComponentState.Released)
+                        interactionSource.tryEmit(PressInteraction.Release(press))
+                    },
+                    onTap = { _ -> onClick() }
+                )
+            }
+            .then(modifier)
     ) {
         Box {
             GlideImage(

diff --git a/mangaworld/src/main/java/com/programmersbox/mangaworld/GenericManga.kt b/mangaworld/src/main/java/com/programmersbox/mangaworld/GenericManga.kt
@@ -5,22 +5,28 @@ import android.app.DownloadManager
 import android.content.Context
 import android.content.Intent
 import android.os.Environment
+import androidx.appcompat.content.res.AppCompatResources
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.GridCells
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.LazyVerticalGrid
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material.icons.filled.FavoriteBorder
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.util.fastAny
 import androidx.compose.ui.util.fastForEach
+import androidx.compose.ui.window.DialogProperties
 import androidx.core.content.ContextCompat
+import androidx.core.graphics.drawable.toBitmap
 import androidx.core.net.toUri
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
@@ -42,6 +48,7 @@ import com.programmersbox.sharedutils.MainLogo
 import com.programmersbox.uiviews.GenericInfo
 import com.programmersbox.uiviews.SettingsDsl
 import com.programmersbox.uiviews.utils.*
+import com.skydoves.landscapist.glide.GlideImage
 import io.reactivex.disposables.CompositeDisposable
 import io.reactivex.rxkotlin.addTo
 import io.reactivex.rxkotlin.subscribeBy
@@ -214,6 +221,7 @@ class GenericManga(val context: Context) : GenericInfo {
         }
     }
 
+    @ExperimentalComposeUiApi
     @ExperimentalMaterialApi
     @ExperimentalFoundationApi
     @Composable
@@ -229,7 +237,53 @@ class GenericManga(val context: Context) : GenericInfo {
         ) {
             items(list.size) { i ->
                 list.getOrNull(i)?.let {
+                    var toState by remember { mutableStateOf(ComponentState.Released) }
+
+                    if (toState == ComponentState.Pressed) {
+                        AlertDialog(
+                            properties = DialogProperties(usePlatformDefaultWidth = false),
+                            onDismissRequest = { toState = ComponentState.Released },
+                            buttons = {},
+                            text = {
+                                ListItem(
+                                    icon = {
+                                        val placeholder = remember {
+                                            AppCompatResources
+                                                .getDrawable(context, R.drawable.manga_world_round_logo)!!
+                                                .toBitmap().asImageBitmap()
+                                        }
+
+                                        GlideImage(
+                                            imageModel = it.imageUrl,
+                                            contentDescription = null,
+                                            contentScale = ContentScale.Crop,
+                                            modifier = Modifier.size(ComposableUtils.IMAGE_WIDTH, ComposableUtils.IMAGE_HEIGHT),
+                                            loading = {
+                                                Image(
+                                                    bitmap = placeholder,
+                                                    contentDescription = null,
+                                                    modifier = Modifier.size(ComposableUtils.IMAGE_WIDTH, ComposableUtils.IMAGE_HEIGHT)
+                                                )
+                                            },
+                                            failure = {
+                                                Image(
+                                                    bitmap = placeholder,
+                                                    contentDescription = null,
+                                                    modifier = Modifier.size(ComposableUtils.IMAGE_WIDTH, ComposableUtils.IMAGE_HEIGHT)
+                                                )
+                                            }
+                                        )
+                                    },
+                                    overlineText = { Text(it.source.serviceName) },
+                                    text = { Text(it.title) },
+                                    secondaryText = { Text(it.description) }
+                                )
+                            }
+                        )
+                    }
+
                     CoverCard(
+                        onLongPress = { c -> toState = c },
                         imageUrl = it.imageUrl,
                         name = it.title,
                         placeHolder = R.drawable.manga_world_round_logo,

diff --git a/ss/aw_all.png b/ss/aw_all.png
diff --git a/ss/aw_details.png b/ss/aw_details.png
diff --git a/ss/aw_history.png b/ss/aw_history.png
diff --git a/ss/aw_more_settings.png b/ss/aw_more_settings.png
diff --git a/ss/aw_recent.png b/ss/aw_recent.png
diff --git a/ss/aw_top_settings.png b/ss/aw_top_settings.png
diff --git a/ss/mw_all.png b/ss/mw_all.png
diff --git a/ss/mw_details.png b/ss/mw_details.png
diff --git a/ss/mw_more_settings.png b/ss/mw_more_settings.png
diff --git a/ss/mw_notifications.png b/ss/mw_notifications.png
diff --git a/ss/mw_recent.png b/ss/mw_recent.png
diff --git a/ss/mw_top_settings.png b/ss/mw_top_settings.png
diff --git a/ss/novel_ss13.png b/ss/novel_ss13.png
diff --git a/ss/novel_ss14.png b/ss/novel_ss14.png
diff --git a/ss/novel_ss15.png b/ss/novel_ss15.png
diff --git a/ss/novel_ss16.png b/ss/novel_ss16.png
diff --git a/ss/novel_ss17.png b/ss/novel_ss17.png
diff --git a/ss/novel_ss18.png b/ss/novel_ss18.png
diff --git a/ss/nw_all.png b/ss/nw_all.png
diff --git a/ss/nw_details.png b/ss/nw_details.png
diff --git a/ss/nw_favorites.png b/ss/nw_favorites.png
diff --git a/ss/nw_global_search.png b/ss/nw_global_search.png
diff --git a/ss/nw_recent.png b/ss/nw_recent.png
diff --git a/ss/nw_settings.png b/ss/nw_settings.png
diff --git a/ss/s1.png b/ss/s1.png
diff --git a/ss/s10.png b/ss/s10.png
diff --git a/ss/s11.png b/ss/s11.png
diff --git a/ss/s12.png b/ss/s12.png
diff --git a/ss/s2.png b/ss/s2.png
diff --git a/ss/s3.png b/ss/s3.png
diff --git a/ss/s4.png b/ss/s4.png
diff --git a/ss/s5.png b/ss/s5.png
diff --git a/ss/s6.png b/ss/s6.png
diff --git a/ss/s7.png b/ss/s7.png
diff --git a/ss/s8.png b/ss/s8.png
diff --git a/ss/s9.png b/ss/s9.png