Show alt text in image viewer (#513)

* Show alt text in image viewer * Revert JS image cleaner code * Add toggleable media overlay
jocmp · Nov 17, 2024 · 5e39e46 · 5e39e46
1 parent 50d5e23
commit 5e39e46
Show file tree

Hide file tree

Showing 13 changed files with 273 additions and 92 deletions.
diff --git a/app/src/main/java/com/capyreader/app/common/Media.kt b/app/src/main/java/com/capyreader/app/common/Media.kt
@@ -0,0 +1,24 @@
+package com.capyreader.app.common
+
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.Saver
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.encodeToString
+import kotlinx.serialization.json.Json
+
+@Serializable
+data class Media(
+    val url: String,
+    val altText: String?
+)
+
+val Media.Companion.Saver
+    get() = Saver<MutableState<Media?>, String>(
+        save = { state ->
+            Json.encodeToString(state.value)
+        },
+        restore = { jsonString ->
+            mutableStateOf(Json.decodeFromString(jsonString))
+        }
+    )
diff --git a/app/src/main/java/com/capyreader/app/common/WebViewInterface.kt b/app/src/main/java/com/capyreader/app/common/WebViewInterface.kt
@@ -4,12 +4,12 @@ import android.webkit.JavascriptInterface
 import com.jocmp.capy.common.optionalURL
 
 class WebViewInterface(
-    private val navigateToMedia: (url: String) -> Unit,
+    private val navigateToMedia: (media: Media) -> Unit,
 ) {
     @JavascriptInterface
-    fun openImage(src: String) {
+    fun openImage(src: String, altText: String?) {
         optionalURL(src)?.let {
-            navigateToMedia(it.toString())
+            navigateToMedia(Media(url = src, altText = altText))
         }
     }
 

diff --git a/app/src/main/java/com/capyreader/app/ui/articles/ArticleLayout.kt b/app/src/main/java/com/capyreader/app/ui/articles/ArticleLayout.kt
@@ -42,6 +42,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.paging.PagingData
 import androidx.paging.compose.collectAsLazyPagingItems
 import com.capyreader.app.R
+import com.capyreader.app.common.Media
+import com.capyreader.app.common.Saver
 import com.capyreader.app.refresher.RefreshInterval
 import com.capyreader.app.ui.articles.detail.ArticleView
 import com.capyreader.app.ui.articles.detail.CapyPlaceholder
@@ -121,7 +123,7 @@ fun ArticleLayout(
         listState = listState,
         scrollBehavior = scrollBehavior
     )
-    var mediaUrl by rememberSaveable { mutableStateOf<String?>(null) }
+    var media by rememberSaveable(saver = Media.Saver) { mutableStateOf(null) }
     val focusManager = LocalFocusManager.current
     val openUpdatePasswordDialog = {
         onUnauthorizedDismissRequest()
@@ -134,7 +136,7 @@ fun ArticleLayout(
 
     val webViewState = rememberWebViewState(
         onNavigateToMedia = {
-            mediaUrl = it
+            media = it
         },
     )
 
@@ -373,7 +375,7 @@ fun ArticleLayout(
                     },
                     onToggleRead = onToggleArticleRead,
                     onToggleStar = onToggleArticleStar,
-                    enableBackHandler = mediaUrl == null,
+                    enableBackHandler = media == null,
                     onRequestArticle = { id ->
                         coroutineScope.launchUI {
                             onSelectArticle(id)
@@ -393,13 +395,13 @@ fun ArticleLayout(
     AnimatedVisibility(
         enter = fadeIn(),
         exit = fadeOut(),
-        visible = mediaUrl != null
+        visible = media != null
     ) {
         ArticleMediaView(
             onDismissRequest = {
-                mediaUrl = null
+                media = null
             },
-            url = mediaUrl,
+            media = media
         )
     }
 
@@ -428,27 +430,27 @@ fun ArticleLayout(
         }
     }
 
-    BackHandler(mediaUrl != null) {
-        mediaUrl = null
+    BackHandler(media != null) {
+        media = null
     }
 
-    BackHandler(mediaUrl == null && search.isActive && article == null) {
+    BackHandler(media == null && search.isActive && article == null) {
         search.clear()
     }
 
     ArticleListBackHandler(
-        enabled = isFeedActive(mediaUrl, article, search)
+        enabled = isFeedActive(media, article, search)
     ) {
         toggleDrawer()
     }
 }
 
 fun isFeedActive(
-    mediaURL: String?,
+    media: Media?,
     article: Article?,
     search: ArticleSearch
 ): Boolean {
-    return mediaURL == null &&
+    return media == null &&
             article == null &&
             !search.isActive
 }