Render media captions formatting in the media viewer (#6729)
* Render media captions formatting in the media viewer * Update screenshots * Trigger actions * Remove unused imports and reformat code --------- Co-authored-by: ElementBot <android@element.io> Co-authored-by: Jorge Martín <jorgem@element.io>
This commit is contained in:
bxdxnn
GitHub
parent
4a4b3e07ef
commit
071d98c66b
26 changed files with 182 additions and 22 deletions
|
|
@ -32,6 +32,7 @@ class DefaultMediaViewerEntryPoint : MediaViewerEntryPoint {
|
|||
filename = filename,
|
||||
fileSize = null,
|
||||
caption = null,
|
||||
formattedCaption = null,
|
||||
mimeType = mimeType,
|
||||
formattedFileSize = "",
|
||||
fileExtension = "",
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ class EventItemFactory(
|
|||
filename = type.filename,
|
||||
fileSize = type.info?.size,
|
||||
caption = type.caption,
|
||||
formattedCaption = type.formattedCaption?.body,
|
||||
mimeType = type.info?.mimetype.orEmpty(),
|
||||
formattedFileSize = type.info?.size?.let { fileSizeFormatter.format(it) }.orEmpty(),
|
||||
fileExtension = fileExtensionExtractor.extractFromName(type.filename),
|
||||
|
|
@ -118,6 +119,7 @@ class EventItemFactory(
|
|||
filename = type.filename,
|
||||
fileSize = type.info?.size,
|
||||
caption = type.caption,
|
||||
formattedCaption = type.formattedCaption?.body,
|
||||
mimeType = type.info?.mimetype.orEmpty(),
|
||||
formattedFileSize = type.info?.size?.let { fileSizeFormatter.format(it) }.orEmpty(),
|
||||
fileExtension = fileExtensionExtractor.extractFromName(type.filename),
|
||||
|
|
@ -139,6 +141,7 @@ class EventItemFactory(
|
|||
filename = type.filename,
|
||||
fileSize = type.info?.size,
|
||||
caption = type.caption,
|
||||
formattedCaption = type.formattedCaption?.body,
|
||||
mimeType = type.info?.mimetype.orEmpty(),
|
||||
formattedFileSize = type.info?.size?.let { fileSizeFormatter.format(it) }.orEmpty(),
|
||||
fileExtension = fileExtensionExtractor.extractFromName(type.filename),
|
||||
|
|
@ -160,6 +163,7 @@ class EventItemFactory(
|
|||
filename = type.filename,
|
||||
fileSize = type.info?.size,
|
||||
caption = type.caption,
|
||||
formattedCaption = type.formattedCaption?.body,
|
||||
mimeType = type.info?.mimetype.orEmpty(),
|
||||
formattedFileSize = type.info?.size?.let { fileSizeFormatter.format(it) }.orEmpty(),
|
||||
fileExtension = fileExtensionExtractor.extractFromName(type.filename),
|
||||
|
|
@ -181,6 +185,7 @@ class EventItemFactory(
|
|||
filename = type.filename,
|
||||
fileSize = type.info?.size,
|
||||
caption = type.caption,
|
||||
formattedCaption = type.formattedCaption?.body,
|
||||
mimeType = type.info?.mimetype.orEmpty(),
|
||||
formattedFileSize = type.info?.size?.let { fileSizeFormatter.format(it) }.orEmpty(),
|
||||
fileExtension = fileExtensionExtractor.extractFromName(type.filename),
|
||||
|
|
@ -202,6 +207,7 @@ class EventItemFactory(
|
|||
filename = type.filename,
|
||||
fileSize = type.info?.size,
|
||||
caption = type.caption,
|
||||
formattedCaption = type.formattedCaption?.body,
|
||||
mimeType = type.info?.mimetype.orEmpty(),
|
||||
formattedFileSize = type.info?.size?.let { fileSizeFormatter.format(it) }.orEmpty(),
|
||||
fileExtension = fileExtensionExtractor.extractFromName(type.filename),
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ class AndroidLocalMediaFactory(
|
|||
filename = fileName,
|
||||
fileSize = fileSize,
|
||||
caption = caption,
|
||||
formattedCaption = null,
|
||||
formattedFileSize = calculatedFormattedFileSize,
|
||||
fileExtension = fileExtension,
|
||||
senderId = senderId,
|
||||
|
|
|
|||
|
|
@ -195,6 +195,86 @@ open class MediaViewerStateProvider : PreviewParameterProvider<MediaViewerState>
|
|||
)
|
||||
)
|
||||
},
|
||||
anImageMediaInfo(
|
||||
senderName = "Bob",
|
||||
dateSent = "22 NOV, 2024",
|
||||
formattedCaption = "This is a <strong>bold</strong> caption",
|
||||
).let {
|
||||
aMediaViewerState(
|
||||
listOf(
|
||||
aMediaViewerPageData(
|
||||
downloadedMedia = AsyncData.Success(
|
||||
LocalMedia(Uri.EMPTY, it)
|
||||
),
|
||||
mediaInfo = it,
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
anImageMediaInfo(
|
||||
senderName = "Charlie",
|
||||
dateSent = "23 NOV, 2024",
|
||||
formattedCaption = "This is an <em>italic</em> caption",
|
||||
).let {
|
||||
aMediaViewerState(
|
||||
listOf(
|
||||
aMediaViewerPageData(
|
||||
downloadedMedia = AsyncData.Success(
|
||||
LocalMedia(Uri.EMPTY, it)
|
||||
),
|
||||
mediaInfo = it,
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
anImageMediaInfo(
|
||||
senderName = "Diana",
|
||||
dateSent = "24 NOV, 2024",
|
||||
formattedCaption = "This is a <code>code</code> caption",
|
||||
).let {
|
||||
aMediaViewerState(
|
||||
listOf(
|
||||
aMediaViewerPageData(
|
||||
downloadedMedia = AsyncData.Success(
|
||||
LocalMedia(Uri.EMPTY, it)
|
||||
),
|
||||
mediaInfo = it,
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
anImageMediaInfo(
|
||||
senderName = "Eve",
|
||||
dateSent = "25 NOV, 2024",
|
||||
formattedCaption = "<blockquote>This is a quote caption</blockquote>",
|
||||
).let {
|
||||
aMediaViewerState(
|
||||
listOf(
|
||||
aMediaViewerPageData(
|
||||
downloadedMedia = AsyncData.Success(
|
||||
LocalMedia(Uri.EMPTY, it)
|
||||
),
|
||||
mediaInfo = it,
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
anImageMediaInfo(
|
||||
senderName = "Frank",
|
||||
dateSent = "26 NOV, 2024",
|
||||
formattedCaption = "This caption has <strong>bold</strong>, <em>italic</em>, and <code>code</code> formatting.",
|
||||
).let {
|
||||
aMediaViewerState(
|
||||
listOf(
|
||||
aMediaViewerPageData(
|
||||
downloadedMedia = AsyncData.Success(
|
||||
LocalMedia(Uri.EMPTY, it)
|
||||
),
|
||||
mediaInfo = it,
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,8 +31,11 @@ import androidx.compose.foundation.rememberScrollState
|
|||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.LinearProgressIndicator
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.LocalTextStyle
|
||||
import androidx.compose.material3.TopAppBarDefaults
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.derivedStateOf
|
||||
import androidx.compose.runtime.getValue
|
||||
|
|
@ -59,10 +62,12 @@ import androidx.compose.ui.tooling.preview.Devices
|
|||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.tooling.preview.PreviewParameter
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.core.text.toSpannable
|
||||
import coil3.compose.AsyncImage
|
||||
import io.element.android.compound.theme.ElementTheme
|
||||
import io.element.android.compound.tokens.generated.CompoundIcons
|
||||
import io.element.android.features.viewfolder.api.TextFileViewer
|
||||
import io.element.android.libraries.androidutils.text.safeLinkify
|
||||
import io.element.android.libraries.architecture.AsyncData
|
||||
import io.element.android.libraries.audio.api.AudioFocus
|
||||
import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeVideo
|
||||
|
|
@ -91,7 +96,9 @@ import io.element.android.libraries.mediaviewer.impl.local.LocalMediaView
|
|||
import io.element.android.libraries.mediaviewer.impl.local.PlayableState
|
||||
import io.element.android.libraries.mediaviewer.impl.local.rememberLocalMediaViewState
|
||||
import io.element.android.libraries.mediaviewer.impl.util.bgCanvasWithTransparency
|
||||
import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
import io.element.android.wysiwyg.compose.EditorStyledText
|
||||
import kotlinx.coroutines.delay
|
||||
import me.saket.telephoto.zoomable.OverzoomEffect
|
||||
import me.saket.telephoto.zoomable.ZoomSpec
|
||||
|
|
@ -242,6 +249,7 @@ fun MediaViewerView(
|
|||
MediaViewerBottomBar(
|
||||
showDivider = dataForPage.mediaInfo.mimeType.isMimeTypeVideo(),
|
||||
caption = dataForPage.mediaInfo.caption,
|
||||
formattedCaption = dataForPage.mediaInfo.formattedCaption,
|
||||
onHeightChange = { bottomPaddingInPixels = it },
|
||||
)
|
||||
}
|
||||
|
|
@ -545,6 +553,7 @@ private fun MediaViewerTopBar(
|
|||
@Composable
|
||||
private fun MediaViewerBottomBar(
|
||||
caption: String?,
|
||||
formattedCaption: CharSequence?,
|
||||
showDivider: Boolean,
|
||||
onHeightChange: (Int) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
|
|
@ -557,7 +566,7 @@ private fun MediaViewerBottomBar(
|
|||
onHeightChange(it.height)
|
||||
},
|
||||
) {
|
||||
if (caption != null) {
|
||||
if (caption != null || formattedCaption != null) {
|
||||
if (showDivider) {
|
||||
HorizontalDivider()
|
||||
}
|
||||
|
|
@ -568,15 +577,28 @@ private fun MediaViewerBottomBar(
|
|||
.fillMaxWidth()
|
||||
.heightIn(max = if (hasCompactHeightWindowSize()) maxCaptionHeightLandscape else maxCaptionHeightPortrait),
|
||||
) {
|
||||
Text(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(16.dp)
|
||||
.verticalScroll(scrollState)
|
||||
.navigationBarsPadding(),
|
||||
text = caption,
|
||||
style = ElementTheme.typography.fontBodyLgRegular,
|
||||
)
|
||||
val textToRender = when {
|
||||
formattedCaption != null -> formattedCaption
|
||||
caption != null -> caption.safeLinkify().toSpannable()
|
||||
else -> null
|
||||
}
|
||||
if (textToRender != null) {
|
||||
CompositionLocalProvider(
|
||||
LocalContentColor provides ElementTheme.colors.textPrimary,
|
||||
LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular
|
||||
) {
|
||||
EditorStyledText(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(16.dp)
|
||||
.verticalScroll(scrollState)
|
||||
.navigationBarsPadding(),
|
||||
text = textToRender,
|
||||
style = ElementRichTextEditorStyle.textStyle(),
|
||||
releaseOnDetach = false,
|
||||
)
|
||||
}
|
||||
}
|
||||
if (showBottomShadow) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
|
|
|
|||
|
|
@ -235,6 +235,7 @@ class TimelineMediaGalleryDataSourceTest {
|
|||
filename = "body.jpg",
|
||||
fileSize = 888L,
|
||||
caption = "body.jpg caption",
|
||||
formattedCaption = "formatted",
|
||||
mimeType = MimeTypes.Jpeg,
|
||||
formattedFileSize = "888 Bytes",
|
||||
fileExtension = "jpg",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue