Show alt text in image viewer

app/src/main/java/com/capyreader/app/common/Media.kt

@@ -0,0 +1,9 @@
+package com.capyreader.app.common
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class Media(
+    val url: String,
+    val altText: String?
+)

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))
         }
     }
 

app/src/main/java/com/capyreader/app/ui/articles/ArticleLayout.kt

@@ -42,6 +42,7 @@ 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.refresher.RefreshInterval
 import com.capyreader.app.ui.articles.detail.ArticleView
 import com.capyreader.app.ui.articles.detail.CapyPlaceholder
@@ -121,7 +122,7 @@ fun ArticleLayout(
         listState = listState,
         scrollBehavior = scrollBehavior
     )
-    var mediaUrl by rememberSaveable { mutableStateOf<String?>(null) }
+    var media by rememberSaveable { mutableStateOf<Media?>(null) }
     val focusManager = LocalFocusManager.current
     val openUpdatePasswordDialog = {
         onUnauthorizedDismissRequest()
@@ -134,7 +135,7 @@ fun ArticleLayout(
 
     val webViewState = rememberWebViewState(
         onNavigateToMedia = {
-            mediaUrl = it
+            media = it
         },
     )
 
@@ -373,7 +374,7 @@ fun ArticleLayout(
                     },
                     onToggleRead = onToggleArticleRead,
                     onToggleStar = onToggleArticleStar,
-                    enableBackHandler = mediaUrl == null,
+                    enableBackHandler = media == null,
                     onRequestArticle = { id ->
                         coroutineScope.launchUI {
                             onSelectArticle(id)
@@ -393,13 +394,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 +429,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
 }

app/src/main/java/com/capyreader/app/ui/articles/media/ArticleMediaView.kt

@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.SideEffect
@@ -23,8 +24,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowCompat
 import coil.request.ImageRequest
+import com.capyreader.app.common.Media
 import com.capyreader.app.ui.components.LoadingView
 import com.capyreader.app.ui.components.Swiper
 import com.capyreader.app.ui.components.rememberSwiperState
@@ -36,9 +39,11 @@ import me.saket.telephoto.zoomable.rememberZoomableState
 @Composable
 fun ArticleMediaView(
     onDismissRequest: () -> Unit,
-    url: String?
+    media: Media?,
 ) {
     val view = LocalView.current
+    val url = media?.url
+    val caption = media?.altText?.ifBlank { null }
 
     var showError by rememberSaveable { mutableStateOf(false) }
 
@@ -87,6 +92,13 @@ fun ArticleMediaView(
                 }
             }
 
+            if (caption != null) {
+                Text(caption,
+                    modifier = Modifier.align(Alignment.BottomStart).padding(16.dp),
+                    color = Color.White
+                )
+            }
+
             CloseButton(
                 onClick = { onDismissRequest() },
                 visible = swiperState.progress == 0f

app/src/main/java/com/capyreader/app/ui/components/WebView.kt

@@ -26,6 +26,7 @@ import coil.executeBlocking
 import coil.imageLoader
 import coil.request.ImageRequest
 import com.capyreader.app.common.AppPreferences
+import com.capyreader.app.common.Media
 import com.capyreader.app.common.WebViewInterface
 import com.capyreader.app.common.openLink
 import com.capyreader.app.ui.articles.detail.articleTemplateColors
@@ -189,7 +190,7 @@ class WebViewState(
 @Composable
 fun rememberWebViewState(
     renderer: ArticleRenderer = koinInject(),
-    onNavigateToMedia: (url: String) -> Unit,
+    onNavigateToMedia: (media: Media) -> Unit,
 ): WebViewState {
     val colors = articleTemplateColors()
     val scope = rememberCoroutineScope()

article_forge/main.rb

@@ -31,11 +31,20 @@
     body: article.body,
     text_size: params["text_size"],
     font_family:,
-    assets_url: "",
-    resource_url: ""
+    debug_script: '<script type="text/javascript" src="/assets/debug.js"></script>'
   }.merge(colors)
 end
 
+get "/image" do
+  image_src = Base64.decode64(params["src"])
+  image_caption = params["caption"].to_s
+
+  liquid :image, locals: {
+    image_src:,
+    image_caption:,
+  }
+end
+
 get "/test-room" do
   colors = ColorPicker.pick(params["theme"])
 

article_forge/script/generate-android-template

@@ -7,9 +7,18 @@ def main
 
   file_content = File.read("./views/#{filename}.liquid")
   file_content = file_content.gsub("{{body}}", "")
+  file_content = file_content.gsub("    {{debug_script}}\n", "")
+
+  assert_clean(file_content)
 
   FileUtils.mkdir_p("dist")
   File.write("dist/#{File.basename("#{filename}.html")}", file_content)
 end
 
+def assert_clean(html)
+  if html.include?("{{debug_script}}")
+    raise "Debug tag detected"
+  end
+end
+
 main

article_forge/views/image.liquid

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html dir="auto">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
+  </head>
+  <body>
+    <figure>
+      <img src="{{image_src}}" />
+      <figcaption>{{image_caption}}</figcaption>
+    </figure>
+  </body>
+</html>

article_forge/views/template.liquid

@@ -17,6 +17,7 @@
         --article-top-margin: {{top_margin}};
       }
     </style>
+    {{debug_script}}
     {{font_preload}}
     <link rel="stylesheet" href="/assets/stylesheet.css">
     <script type="text/javascript" src="/assets/media.js"></script>

article_forge/views/test-room.liquid

@@ -13,6 +13,8 @@
         }
     </style>
     <link href="/stylesheet.css" rel="stylesheet" >
+    <script type="text/javascript" src="/assets/debug.js"></script>
+    <script type="text/javascript" src="/assets/media.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>