Make media captions scrollable (#6498)
This commit is contained in:
parent
0058de9bca
commit
f389eae868
3 changed files with 63 additions and 7 deletions
|
|
@ -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,
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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?,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue