ComposeView: allow deleting media before posting

app/src/main/java/industries/geesawra/monarch/ComposeView.kt

···
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.unit.dp
-import androidx.media3.common.MimeTypes
 import com.atproto.repo.StrongRef
 import industries.geesawra.monarch.datalayer.SkeetData
 import industries.geesawra.monarch.datalayer.TimelineViewModel
-import io.sanghun.compose.video.RepeatMode
-import io.sanghun.compose.video.VideoPlayer
-import io.sanghun.compose.video.controller.VideoPlayerControllerConfig
-import io.sanghun.compose.video.uri.VideoPlayerMediaItem
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 
···
     val composeFieldState = rememberTextFieldState(
         ""
     )
-    val mediaSelected = remember { mutableStateOf(mapOf<Uri, String?>()) }
+    val mediaSelected = remember { mutableStateOf(listOf<Uri>()) }
     val mediaSelectedIsVideo = remember { mutableStateOf(false) }
 
     LaunchedEffect(scaffoldState.bottomSheetState.isVisible) {
···
             charCount.intValue = 0
             inReplyTo.value = null
             isQuotePost.value = false
-            mediaSelected.value = mapOf()
+            mediaSelected.value = listOf()
             mediaSelectedIsVideo.value = false
 
         }
···
                 true -> transferableContent.consume {
                     val uri = it.uri
                     val mimeType: String? = context.contentResolver.getType(uri)
-                    mediaSelected.value = mapOf(Pair(uri, mimeType))
+                    mediaSelected.value = listOf(uri)
                     true
                 }
 
···
             }
 
             mediaSelectedIsVideo.value = containsVideo && urisMap.size == 1
-            mediaSelected.value = urisMap.filterValues { it != null }
+            mediaSelected.value = urisMap.filterValues { it != null }.keys.toList()
         }
 
     val uploadingPost = remember { mutableStateOf(false) }
···
                         when (mediaSelectedIsVideo.value) {
                             false -> PostImageGallery(
                                 modifier = Modifier
-                                    .fillMaxWidth() // Gallery should fill card width
+                                    .fillMaxWidth()
                                     .padding(8.dp),
-                                images = mediaSelected.value.keys.map { uri ->
+                                images = mediaSelected.value.map { uri ->
                                     Image(url = uri.toString(), alt = "Selected media")
                                 },
+                                onCrossClick = {
+                                    val toDelUri = mediaSelected.value[it]
+                                    mediaSelected.value =
+                                        mediaSelected.value.filter { uri ->
+                                            uri != toDelUri
+                                        }
+                                }
                             )
 
-                            true -> VideoPlayer(
-                                mediaItems = listOf(
-                                    VideoPlayerMediaItem.NetworkMediaItem(
-                                        url = mediaSelected.value.keys.first().toString(),
-                                        mimeType = MimeTypes.APPLICATION_M3U8,
-                                    )
-                                ),
-                                handleLifecycle = false,
-                                autoPlay = false,
-                                usePlayerController = true,
-                                enablePip = false,
-                                handleAudioFocus = true,
-                                controllerConfig = VideoPlayerControllerConfig(
-                                    showSpeedAndPitchOverlay = false,
-                                    showSubtitleButton = false,
-                                    showCurrentTimeAndTotalTime = true,
-                                    showBufferingProgress = false,
-                                    showForwardIncrementButton = true,
-                                    showBackwardIncrementButton = true,
-                                    showBackTrackButton = false,
-                                    showNextTrackButton = false,
-                                    showRepeatModeButton = true,
-                                    controllerShowTimeMilliSeconds = 5_000,
-                                    controllerAutoShow = true,
-                                    showFullScreenButton = true,
-                                ),
-                                volume = 0.5f,  // volume 0.0f to 1.0f
-                                repeatMode = RepeatMode.NONE,       // or RepeatMode.ALL, RepeatMode.ONE
-                                modifier = Modifier
-                                    .fillMaxSize()
-                                    .heightIn(max = 500.dp)
-                                    .padding(8.dp),
-                            )
+                            true -> DeletableMediaView(
+                                originalIndex = 0,
+                                onCrossClick = {
+                                    mediaSelected.value = listOf()
+                                },
+                                onMediaClick = { }
+                            ) {
+                                VideoView(uri = mediaSelected.value.first())
+                            }
                         }
                     }
                 }
···
     uploadingPost: MutableState<Boolean>,
     pickMedia: ManagedActivityResultLauncher<PickVisualMediaRequest, List<@JvmSuppressWildcards Uri>>,
     postText: String,
-    mediaSelected: MutableState<Map<Uri, String?>>,
+    mediaSelected: MutableState<List<Uri>>,
     mediaSelectedIsVideo: MutableState<Boolean>,
     coroutineScope: CoroutineScope,
     maxChars: Int,
···
                         uploadingPost.value = true // Show progress immediately
                         timelineViewModel.post(
                             content = postText,
-                            images = if (!mediaSelectedIsVideo.value) mediaSelected.value.keys.toList()
+                            images = if (!mediaSelectedIsVideo.value) mediaSelected.value
                                 .ifEmpty { null } else null,
-                            video = if (mediaSelectedIsVideo.value) mediaSelected.value.keys.firstOrNull() else null,
+                            video = if (mediaSelectedIsVideo.value) mediaSelected.value.firstOrNull() else null,
                             replyRef = if (!isQuotePost) {
                                 inReplyToData?.replyRef()
                             } else {

app/src/main/java/industries/geesawra/monarch/PostImageGallery.kt

···
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize // Added import
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxHeight // Added import
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height // Added import
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
···
 fun PostImageGallery(
     modifier: Modifier = Modifier,
     images: List<Image>,
+    onCrossClick: ((Int) -> Unit)? = null
 ) {
     val galleryVisible = remember { mutableStateOf<Int?>(null) }
 
···
                 modifier = modifier
                     .fillMaxWidth()
             ) {
-                AsyncImage(
-                    model = ImageRequest.Builder(LocalContext.current)
-                        .data(imagesToDisplay[0].url)
-                        .crossfade(true)
-                        .build(),
-                    contentDescription = imagesToDisplay[0].alt,
-                    contentScale = ContentScale.Crop,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .aspectRatio(1f) // Added aspect ratio for defined height
-                        .clip(RoundedCornerShape(12.dp))
-                        .clickable { galleryVisible.value = 0 } // Index in original list
-                )
+                DeletableImageView(
+                    modifier = Modifier.weight(1f),
+                    image = imagesToDisplay[0],
+                    originalIndex = 0,
+                    onCrossClick = onCrossClick,
+                    onMediaClick = { galleryVisible.value = 0 })
             }
         }
 
···
                 modifier = modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.spacedBy(8.dp)
             ) {
-                GalleryImageCell(
+                DeletableImageView(
+                    modifier = Modifier.weight(1f),
                     image = imagesToDisplay[0],
                     originalIndex = 0,
-                    onImageClick = { galleryVisible.value = it })
-                GalleryImageCell(
+                    onCrossClick = onCrossClick,
+                    onMediaClick = { galleryVisible.value = it })
+                DeletableImageView(
+                    modifier = Modifier.weight(1f),
+
                     image = imagesToDisplay[1],
                     originalIndex = 1,
-                    onImageClick = { galleryVisible.value = it })
+                    onCrossClick = onCrossClick,
+                    onMediaClick = { galleryVisible.value = it })
             }
         }
 
···
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
-                    GalleryImageCell(
+                    DeletableImageView(
+                        modifier = Modifier.weight(1f),
                         image = imagesToDisplay[0],
                         originalIndex = 0,
-                        onImageClick = { galleryVisible.value = it })
-                    GalleryImageCell(
+                        onCrossClick = onCrossClick,
+                        onMediaClick = { galleryVisible.value = it })
+                    DeletableImageView(
+                        modifier = Modifier.weight(1f),
                         image = imagesToDisplay[1],
                         originalIndex = 1,
-                        onImageClick = { galleryVisible.value = it })
+                        onCrossClick = onCrossClick,
+                        onMediaClick = { galleryVisible.value = it })
                 }
                 Row(
                     modifier = Modifier
···
                         .height(IntrinsicSize.Min), // Apply IntrinsicSize.Min to the Row
                     horizontalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
-                    GalleryImageCell(
+                    DeletableImageView(
+                        modifier = Modifier.weight(1f),
                         image = imagesToDisplay[2],
                         originalIndex = 2,
-                        onImageClick = { galleryVisible.value = it })
+                        onCrossClick = onCrossClick,
+                        onMediaClick = { galleryVisible.value = it })
                     Spacer(
                         Modifier
                             .weight(1f)
···
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
-                    GalleryImageCell(
+                    DeletableImageView(
+                        modifier = Modifier.weight(1f),
                         image = imagesToDisplay[0],
                         originalIndex = 0,
-                        onImageClick = { galleryVisible.value = it })
-                    GalleryImageCell(
+                        onCrossClick = onCrossClick,
+                        onMediaClick = { galleryVisible.value = it })
+                    DeletableImageView(
+                        modifier = Modifier.weight(1f),
                         image = imagesToDisplay[1],
                         originalIndex = 1,
-                        onImageClick = { galleryVisible.value = it })
+                        onCrossClick = onCrossClick,
+                        onMediaClick = { galleryVisible.value = it })
                 }
                 Row(
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
-                    GalleryImageCell(
+                    DeletableImageView(
+                        modifier = Modifier.weight(1f),
                         image = imagesToDisplay[2],
                         originalIndex = 2,
-                        onImageClick = { galleryVisible.value = it })
-                    GalleryImageCell(
+                        onCrossClick = onCrossClick,
+                        onMediaClick = { galleryVisible.value = it })
+                    DeletableImageView(
+                        modifier = Modifier.weight(1f),
                         image = imagesToDisplay[3],
                         originalIndex = 3,
-                        onImageClick = { galleryVisible.value = it })
+                        onCrossClick = onCrossClick,
+                        onMediaClick = { galleryVisible.value = it })
                 }
             }
         }
···
 }
 
 @Composable
-private fun RowScope.GalleryImageCell(
+private fun DeletableImageView(
+    modifier: Modifier = Modifier,
     image: Image,
-    originalIndex: Int, // Index in the original `images` list
-    onImageClick: (Int) -> Unit
+    originalIndex: Int,
+    onCrossClick: ((Int) -> Unit)? = null,
+    onMediaClick: (Int) -> Unit,
+) {
+    DeletableMediaView(
+        modifier = modifier,
+        originalIndex = originalIndex,
+        onCrossClick = onCrossClick,
+        onMediaClick = onMediaClick,
+    ) {
+        AsyncImage(
+            model = ImageRequest.Builder(LocalContext.current)
+                .data(image.url)
+                .crossfade(true)
+                .build(),
+            contentDescription = image.alt,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .aspectRatio(1f) // Changed from fillMaxSize() to make it square
+                .clip(RoundedCornerShape(12.dp))
+                .clickable { onMediaClick(originalIndex) }
+        )
+    }
+}
+
+@Composable
+fun DeletableMediaView(
+    modifier: Modifier = Modifier,
+    originalIndex: Int,
+    onCrossClick: ((Int) -> Unit)? = null,
+    onMediaClick: (Int) -> Unit,
+    mediaView: @Composable () -> Unit,
 ) {
-    AsyncImage(
-        model = ImageRequest.Builder(LocalContext.current)
-            .data(image.url)
-            .crossfade(true)
-            .build(),
-        contentDescription = image.alt,
-        contentScale = ContentScale.Crop,
-        modifier = Modifier
-            .weight(1f)
+    Box(
+        modifier = modifier
             .aspectRatio(1f) // Changed from fillMaxSize() to make it square
             .clip(RoundedCornerShape(12.dp))
-            .clickable { onImageClick(originalIndex) }
-    )
-}
+            .clickable { onMediaClick(originalIndex) }
+    ) {
 
-// Placeholder for GalleryViewer - ensure it's defined elsewhere
-/*
-@Composable
-fun GalleryViewer(imageUrls: List<Image>, initialPage: Int, onDismiss: () -> Unit) {
-    // ... your GalleryViewer implementation ...
+        mediaView()
+
+        if (onCrossClick != null) {
+            Button(
+                modifier = Modifier.padding(start = 8.dp, top = 4.dp),
+                onClick = {
+                    onCrossClick(originalIndex)
+                }
+            ) {
+                Icon(
+                    imageVector = Icons.Default.Close,
+                    contentDescription = "Remove embed",
+                )
+            }
+        }
+    }
 }
-*/

app/src/main/java/industries/geesawra/monarch/SkeetView.kt

···
 }
 
 @Composable
-private fun VideoView(uri: Uri) {
+fun VideoView(uri: Uri) {
     Card(
         modifier = Modifier
             .heightIn(max = 500.dp)