Skip to content

Commit

Permalink
feat(ui): show full screen image viewer when clicking on images (#578)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JunkFood02 @Ashinch
JunkFood02 authored and Ashinch committed Feb 6, 2024
1 parent 57c1d3a commit 802b149
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 27 deletions.
3 changes: 3 additions & 0 deletions app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,9 @@ dependencies {
implementation("io.coil-kt:coil-svg:$coil")
implementation("io.coil-kt:coil-gif:$coil")

// https://saket.github.io/telephoto/zoomableimage/
implementation("me.saket.telephoto:zoomable:0.7.1")

// Cancel TLSv1.3 support pre Android10
// implementation 'org.conscrypt:conscrypt-android:2.5.2'

Expand Down
99 changes: 82 additions & 17 deletions app/src/main/java/me/ash/reader/ui/component/reader/HtmlToComposable.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ fun LazyListScope.htmlFormattedText(
subheadUpperCase: Boolean = false,
baseUrl: String,
@DrawableRes imagePlaceholder: Int,
onImageClick: ((imgUrl: String, altText: String) -> Unit)? = null,
onLinkClick: (String) -> Unit,
) {
Jsoup.parse(inputStream, null, baseUrl)
Expand All @@ -77,6 +78,7 @@ fun LazyListScope.htmlFormattedText(
element = body,
subheadUpperCase = subheadUpperCase,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -87,6 +89,7 @@ private fun LazyListScope.formatBody(
element: Element,
subheadUpperCase: Boolean = false,
@DrawableRes imagePlaceholder: Int,
onImageClick: ((imgUrl: String, altText: String) -> Unit)? = null,
onLinkClick: (String) -> Unit,
baseUrl: String,
) {
Expand Down Expand Up @@ -129,6 +132,7 @@ private fun LazyListScope.formatBody(
subheadUpperCase = subheadUpperCase,
lazyListScope = this,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -139,6 +143,7 @@ private fun LazyListScope.formatBody(
private fun LazyListScope.formatCodeBlock(
element: Element,
@DrawableRes imagePlaceholder: Int,
onImageClick: ((imgUrl: String, altText: String) -> Unit)?,
onLinkClick: (String) -> Unit,
baseUrl: String,
) {
Expand Down Expand Up @@ -175,6 +180,7 @@ private fun LazyListScope.formatCodeBlock(
element.childNodes(), preFormatted = true,
lazyListScope = this,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -188,6 +194,7 @@ private fun TextComposer.appendTextChildren(
subheadUpperCase: Boolean = false,
lazyListScope: LazyListScope,
@DrawableRes imagePlaceholder: Int,
onImageClick: ((imgUrl: String, altText: String) -> Unit)?,
onLinkClick: (String) -> Unit,
baseUrl: String,
) {
Expand Down Expand Up @@ -225,6 +232,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -234,6 +242,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -247,7 +256,12 @@ private fun TextComposer.appendTextChildren(
withComposableStyle(
style = { h1Style().toSpanStyle() }
) {
append("\n${if (subheadUpperCase) element.text().uppercase() else element.text()}")
append(
"\n${
if (subheadUpperCase) element.text()
.uppercase() else element.text()
}"
)
}
}
}
Expand All @@ -257,7 +271,12 @@ private fun TextComposer.appendTextChildren(
withComposableStyle(
style = { h2Style().toSpanStyle() }
) {
append("\n${if (subheadUpperCase) element.text().uppercase() else element.text()}")
append(
"\n${
if (subheadUpperCase) element.text()
.uppercase() else element.text()
}"
)
}
}
}
Expand All @@ -267,7 +286,12 @@ private fun TextComposer.appendTextChildren(
withComposableStyle(
style = { h3Style().toSpanStyle() }
) {
append("\n${if (subheadUpperCase) element.text().uppercase() else element.text()}")
append(
"\n${
if (subheadUpperCase) element.text()
.uppercase() else element.text()
}"
)
}
}
}
Expand All @@ -277,7 +301,12 @@ private fun TextComposer.appendTextChildren(
withComposableStyle(
style = { h4Style().toSpanStyle() }
) {
append("\n${if (subheadUpperCase) element.text().uppercase() else element.text()}")
append(
"\n${
if (subheadUpperCase) element.text()
.uppercase() else element.text()
}"
)
}
}
}
Expand All @@ -287,7 +316,12 @@ private fun TextComposer.appendTextChildren(
withComposableStyle(
style = { h5Style().toSpanStyle() }
) {
append("\n${if (subheadUpperCase) element.text().uppercase() else element.text()}")
append(
"\n${
if (subheadUpperCase) element.text()
.uppercase() else element.text()
}"
)
}
}
}
Expand All @@ -297,7 +331,12 @@ private fun TextComposer.appendTextChildren(
withComposableStyle(
style = { h6Style().toSpanStyle() }
) {
append("\n${if (subheadUpperCase) element.text().uppercase() else element.text()}")
append(
"\n${
if (subheadUpperCase) element.text()
.uppercase() else element.text()
}"
)
}
}
}
Expand All @@ -310,6 +349,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -322,6 +362,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -334,6 +375,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -346,6 +388,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -358,6 +401,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -370,6 +414,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -383,6 +428,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -395,6 +441,7 @@ private fun TextComposer.appendTextChildren(
preFormatted = true,
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -406,6 +453,7 @@ private fun TextComposer.appendTextChildren(
lazyListScope.formatCodeBlock(
element = element,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -419,6 +467,7 @@ private fun TextComposer.appendTextChildren(
preFormatted = preFormatted,
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -438,6 +487,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -454,6 +504,7 @@ private fun TextComposer.appendTextChildren(
element.childNodes(),
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand All @@ -478,11 +529,11 @@ private fun TextComposer.appendTextChildren(
BoxWithConstraints(
modifier = Modifier
.clip(RectangleShape)
.clickable(
enabled = onClick != null
) {
onClick?.invoke()
}
// .clickable(
// enabled = onClick != null
// ) {
// onClick?.invoke()
// }
.fillMaxWidth()
// This makes scrolling a pain, find a way to solve that
// .pointerInput("imgzoom") {
Expand All @@ -497,17 +548,26 @@ private fun TextComposer.appendTextChildren(
// }
) {
val imageSize = maxImageSize()
val imgUrl = imageCandidates.getBestImageForMaxSize(
pixelDensity = pixelDensity(),
maxSize = imageSize,
)
RYAsyncImage(
modifier = Modifier
.align(Alignment.Center)
.fillMaxWidth()
.padding(horizontal = imageHorizontalPadding().dp)
.clip(imageShape())
.clickable { },
data = imageCandidates.getBestImageForMaxSize(
pixelDensity = pixelDensity(),
maxSize = imageSize,
),
.run {
if (onImageClick != null) {
this.clickable {
onImageClick(imgUrl, alt)
}
} else {
this
}
},
data = imgUrl,
contentDescription = alt,
size = imageSize,
precision = Precision.INEXACT,
Expand Down Expand Up @@ -547,6 +607,7 @@ private fun TextComposer.appendTextChildren(
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onLinkClick = onLinkClick,
onImageClick = onImageClick,
baseUrl = baseUrl,
)
}
Expand All @@ -565,6 +626,7 @@ private fun TextComposer.appendTextChildren(
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onLinkClick = onLinkClick,
onImageClick = onImageClick,
baseUrl = baseUrl,
)
}
Expand All @@ -590,6 +652,7 @@ private fun TextComposer.appendTextChildren(
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onLinkClick = onLinkClick,
onImageClick = onImageClick,
baseUrl = baseUrl,
)
ensureDoubleNewline()
Expand All @@ -608,6 +671,7 @@ private fun TextComposer.appendTextChildren(
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onLinkClick = onLinkClick,
onImageClick = onImageClick,
baseUrl = baseUrl,
)
terminateCurrentText()
Expand Down Expand Up @@ -677,6 +741,7 @@ private fun TextComposer.appendTextChildren(
subheadUpperCase = subheadUpperCase,
lazyListScope = lazyListScope,
imagePlaceholder = imagePlaceholder,
onImageClick = onImageClick,
onLinkClick = onLinkClick,
baseUrl = baseUrl,
)
Expand Down Expand Up @@ -709,7 +774,7 @@ private fun testIt() {
inputStream = stream,
baseUrl = "https://cowboyprogrammer.org",
imagePlaceholder = R.drawable.ic_telegram,
onLinkClick = {}
onLinkClick = {},
)
}
}
Expand Down
2 changes: 2 additions & 0 deletions app/src/main/java/me/ash/reader/ui/component/reader/Reader.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,15 @@ fun LazyListScope.Reader(
subheadUpperCase: Boolean = false,
link: String,
content: String,
onImageClick: ((imgUrl: String, altText: String) -> Unit)? = null,
onLinkClick: (String) -> Unit
) {
Log.i("RLog", "Reader: ")
htmlFormattedText(
inputStream = content.byteInputStream(),
subheadUpperCase = subheadUpperCase,
baseUrl = link,
onImageClick = onImageClick,
imagePlaceholder = R.drawable.ic_launcher_foreground,
onLinkClick = onLinkClick
)
Expand Down
Loading

0 comments on commit 802b149

Please sign in to comment.