[WIP][Android] rework media screen

DimensionDev · Feb 5, 2024 · 46e99d7 · 46e99d7
1 parent 108d287
commit 46e99d7
Show file tree

Hide file tree

Showing 28 changed files with 650 additions and 332 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -128,7 +128,6 @@ dependencies {
     ksp(libs.compose.destinations.ksp)
     lintChecks(libs.compose.lint.checks)
     implementation(libs.androidx.credentials)
-    implementation(libs.zoomable)
     implementation(libs.bundles.compose.richtext)
     implementation(libs.composeIcons.fontAwesome)
     implementation(libs.datastore)
@@ -137,6 +136,7 @@ dependencies {
     implementation(libs.material3.adaptive)
     implementation(libs.bundles.media3)
     implementation(libs.compose.placeholder.material3)
+    implementation(libs.swiper)
     coreLibraryDesugaring(libs.desugar.jdk.libs)
 
     implementation(projects.shared)

diff --git a/app/src/main/java/dev/dimension/flare/ui/component/VideoPlayer.kt b/app/src/main/java/dev/dimension/flare/ui/component/VideoPlayer.kt
@@ -1,9 +1,10 @@
 package dev.dimension.flare.ui.component
 
 import android.view.ViewGroup
-import android.widget.FrameLayout
 import androidx.annotation.OptIn
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.runtime.Composable
@@ -14,6 +15,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.viewinterop.AndroidView
+import androidx.media3.common.C
 import androidx.media3.common.MediaItem
 import androidx.media3.common.Player
 import androidx.media3.common.util.UnstableApi
@@ -30,6 +32,7 @@ fun VideoPlayer(
     muted: Boolean = false,
     showControls: Boolean = false,
     keepScreenOn: Boolean = false,
+    aspectRatio: Float? = null,
 ) {
     var isLoaded by remember { mutableStateOf(false) }
     Box(modifier = modifier) {
@@ -54,12 +57,15 @@ fun VideoPlayer(
                                     }
                                 },
                             )
+                            if (aspectRatio == null) {
+                                this.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING
+                            }
                         }
                 PlayerView(context).apply {
                     useController = showControls
                     player = exoPlayer
                     layoutParams =
-                        FrameLayout.LayoutParams(
+                        ViewGroup.LayoutParams(
                             ViewGroup.LayoutParams.MATCH_PARENT,
                             ViewGroup.LayoutParams.MATCH_PARENT,
                         )
@@ -71,11 +77,29 @@ fun VideoPlayer(
             },
         )
         if (!isLoaded && previewUri != null) {
-            NetworkImage(
-                model = previewUri,
-                contentDescription = contentDescription,
-                modifier = Modifier.matchParentSize(),
-            )
+            Box(
+                modifier =
+                    Modifier
+                        .fillMaxSize(),
+                contentAlignment = Alignment.Center,
+            ) {
+                NetworkImage(
+                    model = previewUri,
+                    contentDescription = contentDescription,
+                    modifier =
+                        Modifier
+                            .let {
+                                if (aspectRatio != null) {
+                                    it.aspectRatio(
+                                        aspectRatio,
+                                        matchHeightConstraintsFirst = aspectRatio > 1f,
+                                    )
+                                } else {
+                                    it
+                                }
+                            },
+                )
+            }
             LinearProgressIndicator(
                 modifier =
                     Modifier

diff --git a/app/src/main/java/dev/dimension/flare/ui/component/status/CommonStatusComponent.kt b/app/src/main/java/dev/dimension/flare/ui/component/status/CommonStatusComponent.kt
@@ -54,6 +54,7 @@ import dev.dimension.flare.ui.model.UiMedia
 import dev.dimension.flare.ui.model.UiPoll
 import dev.dimension.flare.ui.model.UiStatus
 import dev.dimension.flare.ui.model.UiUser
+import dev.dimension.flare.ui.model.medias
 import dev.dimension.flare.ui.theme.MediumAlpha
 import dev.dimension.flare.ui.theme.screenHorizontalPadding
 import kotlinx.collections.immutable.ImmutableList
@@ -63,13 +64,14 @@ import moe.tlaster.ktml.dom.Element
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun CommonStatusComponent(
+    statusKey: MicroBlogKey,
     rawContent: String,
     content: Element,
     contentDirection: LayoutDirection,
     user: UiUser,
     medias: ImmutableList<UiMedia>,
     humanizedTime: String,
-    onMediaClick: (UiMedia) -> Unit,
+    onMediaClick: (statusKey: MicroBlogKey, index: Int) -> Unit,
     onUserClick: (MicroBlogKey) -> Unit,
     modifier: Modifier = Modifier,
     sensitive: Boolean = false,
@@ -186,7 +188,12 @@ fun CommonStatusComponent(
                 if (appearanceSettings.showMedia || showMedia) {
                     StatusMediaComponent(
                         data = medias,
-                        onMediaClick = onMediaClick,
+                        onMediaClick = {
+                            onMediaClick.invoke(
+                                statusKey,
+                                medias.indexOf(it),
+                            )
+                        },
                         sensitive = sensitive,
                     )
                 } else {
@@ -230,7 +237,12 @@ fun CommonStatusComponent(
                 Spacer(modifier = Modifier.height(4.dp))
                 UiStatusQuoted(
                     quotedStatus,
-                    onMediaClick,
+                    onMediaClick = {
+                        onMediaClick.invoke(
+                            quotedStatus.statusKey,
+                            quotedStatus.medias.indexOf(it),
+                        )
+                    },
                     onClick = {
                         onQuotedStatusClick?.invoke(quotedStatus)
                     },

diff --git a/app/src/main/java/dev/dimension/flare/ui/component/status/LazyStatusItems.kt b/app/src/main/java/dev/dimension/flare/ui/component/status/LazyStatusItems.kt
@@ -43,19 +43,17 @@ import dev.dimension.flare.ui.component.status.misskey.MisskeyStatusEvent
 import dev.dimension.flare.ui.component.status.xqt.XQTStatusComponent
 import dev.dimension.flare.ui.component.status.xqt.XQTStatusEvent
 import dev.dimension.flare.ui.model.UiAccount
-import dev.dimension.flare.ui.model.UiMedia
 import dev.dimension.flare.ui.model.UiState
 import dev.dimension.flare.ui.model.UiStatus
 import dev.dimension.flare.ui.model.onError
 import dev.dimension.flare.ui.model.onLoading
 import dev.dimension.flare.ui.model.onSuccess
 import dev.dimension.flare.ui.screen.destinations.BlueskyReportStatusRouteDestination
 import dev.dimension.flare.ui.screen.destinations.DeleteStatusConfirmRouteDestination
-import dev.dimension.flare.ui.screen.destinations.MediaRouteDestination
 import dev.dimension.flare.ui.screen.destinations.ProfileRouteDestination
 import dev.dimension.flare.ui.screen.destinations.ReplyRouteDestination
+import dev.dimension.flare.ui.screen.destinations.StatusMediaRouteDestination
 import dev.dimension.flare.ui.screen.destinations.StatusRouteDestination
-import dev.dimension.flare.ui.screen.destinations.VideoRouteDestination
 import dev.dimension.flare.ui.theme.DisabledAlpha
 import dev.dimension.flare.ui.theme.screenHorizontalPadding
 import kotlinx.coroutines.CoroutineScope
@@ -363,35 +361,37 @@ internal class DefaultStatusEvent(
     }
 
     override fun onMediaClick(
-        media: UiMedia,
+        statusKey: MicroBlogKey,
+        index: Int,
         uriHandler: UriHandler,
     ) {
-        when (media) {
-            is UiMedia.Image -> {
-                uriHandler.openUri(MediaRouteDestination(media.url).deeplink())
-            }
-
-            is UiMedia.Audio -> Unit
-            is UiMedia.Gif -> {
-                uriHandler.openUri(
-                    VideoRouteDestination(
-                        media.url,
-                        previewUri = media.previewUrl,
-                        contentDescription = media.description,
-                    ).deeplink(),
-                )
-            }
-
-            is UiMedia.Video -> {
-                uriHandler.openUri(
-                    VideoRouteDestination(
-                        media.url,
-                        previewUri = media.thumbnailUrl,
-                        contentDescription = media.description,
-                    ).deeplink(),
-                )
-            }
-        }
+        uriHandler.openUri(StatusMediaRouteDestination(statusKey, index).deeplink())
+//        when (media) {
+//            is UiMedia.Image -> {
+//                uriHandler.openUri(MediaRouteDestination(media.url).deeplink())
+//            }
+//
+//            is UiMedia.Audio -> Unit
+//            is UiMedia.Gif -> {
+//                uriHandler.openUri(
+//                    VideoRouteDestination(
+//                        media.url,
+//                        previewUri = media.previewUrl,
+//                        contentDescription = media.description,
+//                    ).deeplink(),
+//                )
+//            }
+//
+//            is UiMedia.Video -> {
+//                uriHandler.openUri(
+//                    VideoRouteDestination(
+//                        media.url,
+//                        previewUri = media.thumbnailUrl,
+//                        contentDescription = media.description,
+//                    ).deeplink(),
+//                )
+//            }
+//        }
     }
 
     override fun onDeleteClick(
@@ -700,7 +700,8 @@ internal data object EmptyStatusEvent : StatusEvent {
     override fun onBookmarkClick(data: UiStatus.XQT) = Unit
 
     override fun onMediaClick(
-        media: UiMedia,
+        statusKey: MicroBlogKey,
+        index: Int,
         uriHandler: UriHandler,
     ) = Unit
 

diff --git a/app/src/main/java/dev/dimension/flare/ui/component/status/QuotedStatus.kt b/app/src/main/java/dev/dimension/flare/ui/component/status/QuotedStatus.kt
@@ -30,6 +30,7 @@ internal fun UiStatusQuoted(
     onMediaClick: (UiMedia) -> Unit,
     modifier: Modifier = Modifier,
     onClick: () -> Unit = {},
+    showMedia: Boolean = true,
 ) {
     when (status) {
         is UiStatus.Mastodon -> {
@@ -45,6 +46,7 @@ internal fun UiStatusQuoted(
                 modifier = modifier,
                 onClick = onClick,
                 sensitive = status.sensitive,
+                showMedia = showMedia,
             )
         }
         is UiStatus.MastodonNotification -> Unit
@@ -61,6 +63,7 @@ internal fun UiStatusQuoted(
                 modifier = modifier,
                 onClick = onClick,
                 sensitive = status.sensitive,
+                showMedia = showMedia,
             )
 
         is UiStatus.MisskeyNotification -> Unit
@@ -77,6 +80,7 @@ internal fun UiStatusQuoted(
                 modifier = modifier,
                 onClick = onClick,
                 sensitive = false,
+                showMedia = showMedia,
             )
         is UiStatus.BlueskyNotification -> Unit
         is UiStatus.XQT ->
@@ -92,6 +96,7 @@ internal fun UiStatusQuoted(
                 modifier = modifier,
                 onClick = onClick,
                 sensitive = status.sensitive,
+                showMedia = showMedia,
             )
     }
 }
@@ -107,6 +112,7 @@ private fun QuotedStatus(
     sensitive: Boolean,
     createdAt: String,
     onMediaClick: (UiMedia) -> Unit,
+    showMedia: Boolean,
     modifier: Modifier = Modifier,
     onClick: () -> Unit = {},
 ) {
@@ -162,7 +168,7 @@ private fun QuotedStatus(
                 }
                 HtmlText2(element = contentElement, layoutDirection = contentLayoutDirection)
             }
-            if (!medias.isNullOrEmpty() && LocalAppearanceSettings.current.showMedia) {
+            if (!medias.isNullOrEmpty() && LocalAppearanceSettings.current.showMedia && showMedia) {
                 StatusMediaComponent(
                     data = medias,
                     onMediaClick = onMediaClick,

diff --git a/app/src/main/java/dev/dimension/flare/ui/component/status/bluesky/BlueskyStatusComponent.kt b/app/src/main/java/dev/dimension/flare/ui/component/status/bluesky/BlueskyStatusComponent.kt
@@ -29,7 +29,6 @@ import dev.dimension.flare.model.MicroBlogKey
 import dev.dimension.flare.ui.component.status.CommonStatusComponent
 import dev.dimension.flare.ui.component.status.StatusActionButton
 import dev.dimension.flare.ui.component.status.StatusActionGroup
-import dev.dimension.flare.ui.model.UiMedia
 import dev.dimension.flare.ui.model.UiStatus
 import dev.dimension.flare.ui.model.contentDirection
 
@@ -48,8 +47,13 @@ internal fun BlueskyStatusComponent(
                     event.onStatusClick(data, uriHandler)
                 }
                 .then(modifier),
-        onMediaClick = {
-            event.onMediaClick(it, uriHandler)
+        statusKey = data.statusKey,
+        onMediaClick = { statusKey, index ->
+            event.onMediaClick(
+                statusKey = statusKey,
+                index = index,
+                uriHandler = uriHandler,
+            )
         },
         onUserClick = {
             event.onUserClick(it, uriHandler)
@@ -250,7 +254,8 @@ internal interface BlueskyStatusEvent {
     )
 
     fun onMediaClick(
-        media: UiMedia,
+        statusKey: MicroBlogKey,
+        index: Int,
         uriHandler: UriHandler,
     )
 

diff --git a/...src/main/java/dev/dimension/flare/ui/component/status/mastodon/MastodonStatusComponent.kt b/...src/main/java/dev/dimension/flare/ui/component/status/mastodon/MastodonStatusComponent.kt
@@ -46,7 +46,6 @@ import dev.dimension.flare.model.MicroBlogKey
 import dev.dimension.flare.ui.component.status.CommonStatusComponent
 import dev.dimension.flare.ui.component.status.StatusActionButton
 import dev.dimension.flare.ui.component.status.StatusActionGroup
-import dev.dimension.flare.ui.model.UiMedia
 import dev.dimension.flare.ui.model.UiStatus
 import dev.dimension.flare.ui.model.contentDirection
 import dev.dimension.flare.ui.theme.MediumAlpha
@@ -121,8 +120,13 @@ internal fun MastodonStatusComponent(
                     event.onStatusClick(data, uriHandler)
                 }
                 .then(modifier),
-        onMediaClick = {
-            event.onMediaClick(it, uriHandler)
+        statusKey = actualData.statusKey,
+        onMediaClick = { statusKey, index ->
+            event.onMediaClick(
+                statusKey = statusKey,
+                index = index,
+                uriHandler = uriHandler,
+            )
         },
         headerTrailing = {
             if (appearanceSettings.mastodon.showVisibility) {
@@ -362,7 +366,8 @@ internal interface MastodonStatusEvent {
     fun onBookmarkClick(status: UiStatus.Mastodon)
 
     fun onMediaClick(
-        media: UiMedia,
+        statusKey: MicroBlogKey,
+        index: Int,
         uriHandler: UriHandler,
     )