android: update video item layout, add video behind experimental toggle (#2109)

* android: update video item layout, add video behind experimental toggle

* video duration / size design

* refactor, fix duration box size

* more readable

* reuse box modifier

* Revert "reuse box modifier"

This reverts commit d0d2d3e402.

apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt

@@ -134,6 +134,7 @@ fun ChatView(chatId: String, chatModel: ChatModel, onComposed: () -> Unit) {
       searchText,
       useLinkPreviews = useLinkPreviews,
       linkMode = chatModel.simplexLinkMode.value,
+      allowVideoAttachment = chatModel.controller.appPrefs.xftpSendEnabled.get(),
       chatModelIncognito = chatModel.incognito.value,
       back = {
         hideKeyboard(view)
@@ -307,6 +308,7 @@ fun ChatLayout(
   searchValue: State<String>,
   useLinkPreviews: Boolean,
   linkMode: SimplexLinkMode,
+  allowVideoAttachment: Boolean,
   chatModelIncognito: Boolean,
   back: () -> Unit,
   info: () -> Unit,
@@ -338,6 +340,7 @@ fun ChatLayout(
         sheetContent = {
           ChooseAttachmentView(
             attachmentOption,
+            allowVideoAttachment,
             hide = { scope.launch { attachmentBottomSheetState.hide() } }
           )
         },
@@ -1078,6 +1081,7 @@ fun PreviewChatLayout() {
       searchValue,
       useLinkPreviews = true,
       linkMode = SimplexLinkMode.DESCRIPTION,
+      allowVideoAttachment = true,
       chatModelIncognito = false,
       back = {},
       info = {},
@@ -1138,6 +1142,7 @@ fun PreviewGroupChatLayout() {
       searchValue,
       useLinkPreviews = true,
       linkMode = SimplexLinkMode.DESCRIPTION,
+      allowVideoAttachment = true,
       chatModelIncognito = false,
       back = {},
       info = {},

apps/android/app/src/main/java/chat/simplex/app/views/chat/item/CIVideoView.kt

@@ -150,7 +150,7 @@ private fun VideoView(uri: Uri, file: CIFile, defaultPreview: Bitmap, defaultDur
 private fun BoxScope.PlayButton(error: Boolean = false, onLongClick: () -> Unit, onClick: () -> Unit) {
   Surface(
     Modifier.align(Alignment.Center),
-    color = Color.White.copy(alpha = 0.8f),
+    color = Color.Black.copy(alpha = 0.25f),
     shape = RoundedCornerShape(percent = 50)
   ) {
     Box(
@@ -163,7 +163,7 @@ private fun BoxScope.PlayButton(error: Boolean = false, onLongClick: () -> Unit,
         imageVector = Icons.Filled.PlayArrow,
         contentDescription = null,
         Modifier.size(25.dp),
-        tint = if (error) WarningOrange else MaterialTheme.colors.primary
+        tint = if (error) WarningOrange else Color.White
       )
     }
   }
@@ -176,15 +176,15 @@ private fun DurationProgress(file: CIFile, playing: MutableState<Boolean>, durat
       Box(
         Modifier
           .padding(DEFAULT_PADDING_HALF)
-          .background(Color.Black.copy(alpha = 0.4f), MaterialTheme.shapes.small)
+          .background(Color.Black.copy(alpha = 0.35f), RoundedCornerShape(percent = 50))
           .padding(vertical = 2.dp, horizontal = 4.dp)
       ) {
-        val time = (if (progress.value > 0) durationText((progress.value / 1000).toInt()) else durationText((duration.value / 1000).toInt()))
-        val sp30 = with(LocalDensity.current) { 30.sp.toDp() }
-        val sp45 = with(LocalDensity.current) { 45.sp.toDp() }
+        val time = if (progress.value > 0) progress.value else duration.value
+        val timeStr = durationText((time / 1000).toInt())
+        val width = if (timeStr.length <= 5) 44 else 50
         Text(
-          time,
-          Modifier.widthIn(min = if (time.length <= 5) sp30 else sp45),
+          timeStr,
+          Modifier.widthIn(min = with(LocalDensity.current) { width.sp.toDp() }).padding(horizontal = 4.dp),
           fontSize = 13.sp,
           color = Color.White
         )
@@ -199,11 +199,12 @@ private fun DurationProgress(file: CIFile, playing: MutableState<Boolean>, durat
         Box(
           Modifier
             .padding(top = DEFAULT_PADDING_HALF)
-            .background(Color.Black.copy(alpha = 0.4f), MaterialTheme.shapes.small)
+            .background(Color.Black.copy(alpha = 0.35f), RoundedCornerShape(percent = 50))
             .padding(vertical = 2.dp, horizontal = 4.dp)
         ) {
           Text(
             formatBytes(file.fileSize),
+            Modifier.padding(horizontal = 4.dp),
             fontSize = 13.sp,
             color = Color.White
           )

apps/android/app/src/main/java/chat/simplex/app/views/helpers/ChooseAttachmentView.kt

@@ -22,6 +22,7 @@ sealed class AttachmentOption {
 @Composable
 fun ChooseAttachmentView(
   attachmentOption: MutableState<AttachmentOption?>,
+  allowVideoAttachment: Boolean,
   hide: () -> Unit
 ) {
   Box(
@@ -46,9 +47,11 @@ fun ChooseAttachmentView(
         attachmentOption.value = AttachmentOption.PickImage
         hide()
       }
-      ActionButton(null, stringResource(R.string.from_gallery_button), icon = Icons.Outlined.Videocam) {
-        attachmentOption.value = AttachmentOption.PickVideo
-        hide()
+      if (allowVideoAttachment) {
+        ActionButton(null, stringResource(R.string.from_gallery_button), icon = Icons.Outlined.Videocam) {
+          attachmentOption.value = AttachmentOption.PickVideo
+          hide()
+        }
       }
       ActionButton(null, stringResource(R.string.choose_file), icon = Icons.Outlined.InsertDriveFile) {
         attachmentOption.value = AttachmentOption.PickFile

apps/android/app/src/main/res/values/strings.xml

@@ -736,7 +736,7 @@
   <string name="settings_section_title_calls">CALLS</string>
   <string name="settings_section_title_incognito">Incognito mode</string>
   <string name="settings_section_title_experimenta">EXPERIMENTAL</string>
-  <string name="settings_send_files_via_xftp">Send files via XFTP</string>
+  <string name="settings_send_files_via_xftp">Send videos and files via XFTP</string>
   <string name="xftp_requires_v461">v4.6.1+ is required to receive via XFTP.</string>
 
   <!-- DatabaseView.kt -->