Make media captions scrollable (#6498)

This commit is contained in:
bxdxnn 2026-04-15 10:46:18 +03:00 committed by Jorge Martin Espinosa
parent 0058de9bca
commit f389eae868
3 changed files with 63 additions and 7 deletions

View file

@ -29,6 +29,14 @@ import io.element.android.libraries.mediaviewer.impl.details.aMediaDeleteConfirm
import io.element.android.libraries.mediaviewer.impl.details.aMediaDetailsBottomSheetState
import kotlinx.collections.immutable.toImmutableList
private const val LONG_CAPTION = "This is a very long caption that should be scrollable in the media viewer. " +
"It contains multiple lines of text to demonstrate the scrolling behavior. " +
"Line 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
"Line 2: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
"Line 3: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. " +
"Line 4: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. " +
"Line 5: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."
open class MediaViewerStateProvider : PreviewParameterProvider<MediaViewerState> {
override val values: Sequence<MediaViewerState>
get() = sequenceOf(
@ -170,6 +178,22 @@ open class MediaViewerStateProvider : PreviewParameterProvider<MediaViewerState>
)
)
),
anImageMediaInfo(
senderName = "Alice",
dateSent = "21 NOV, 2024",
caption = LONG_CAPTION,
).let {
aMediaViewerState(
listOf(
aMediaViewerPageData(
downloadedMedia = AsyncData.Success(
LocalMedia(Uri.EMPTY, it)
),
mediaInfo = it,
)
)
)
},
)
}

View file

@ -20,10 +20,13 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.TopAppBarDefaults
@ -39,6 +42,7 @@ import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.onSizeChanged
@ -538,19 +542,44 @@ private fun MediaViewerBottomBar(
if (showDivider) {
HorizontalDivider()
}
Text(
val scrollState = rememberScrollState()
val showBottomShadow = scrollState.value < scrollState.maxValue
Box(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
text = caption,
maxLines = 5,
overflow = TextOverflow.Ellipsis,
style = ElementTheme.typography.fontBodyLgRegular,
)
.heightIn(max = maxCaptionHeight),
) {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.verticalScroll(scrollState),
text = caption,
style = ElementTheme.typography.fontBodyLgRegular,
)
if (showBottomShadow) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(48.dp)
.align(Alignment.BottomCenter)
.background(
brush = Brush.verticalGradient(
colors = listOf(
Color.Transparent,
bgCanvasWithTransparency,
),
),
),
)
}
}
}
}
}
private val maxCaptionHeight = 200.dp
@Composable
private fun ThumbnailView(
thumbnailSource: MediaSource?,