Update TimelineMediaPreviewDetailsView to match the latest design. (#5513)

Update the TimelineMediaPreviewDetailsView design.

ElementX/Resources/Localizations/en-US.lproj/Localizable.strings

@@ -7,6 +7,7 @@
 "a11y_edit_room_address_hint" = "The full address will be %1$@";
 "a11y_expand_message_text_field" = "Expand message text field";
 "a11y_hide_password" = "Hide password";
+"a11y_info" = "Info";
 "a11y_join_call" = "Join call";
 "a11y_jump_to_bottom" = "Jump to bottom";
 "a11y_notifications_mentions_only" = "Mentions only";
@@ -36,6 +37,7 @@
 "a11y_send_files" = "Send files";
 "a11y_sender_location" = "Sender location";
 "a11y_session_verification_time_limited_action_required" = "Time limited action required, you have one minute to verify";
+"a11y_settings_with_required_action" = "Settings, action required";
 "a11y_show_password" = "Show password";
 "a11y_start_call" = "Start a call";
 "a11y_start_video_call" = "Start a video call";
@@ -88,6 +90,7 @@
 "action_discard" = "Discard";
 "action_dismiss" = "Dismiss";
 "action_done" = "Done";
+"action_download" = "Download";
 "action_edit" = "Edit";
 "action_edit_caption" = "Edit caption";
 "action_edit_poll" = "Edit poll";
@@ -204,7 +207,9 @@
 "common_beta" = "Beta";
 "common_blocked_users" = "Blocked users";
 "common_bubbles" = "Bubbles";
+"common_call_declined" = "Call declined";
 "common_call_started" = "Call started";
+"common_call_you_declined" = "You declined a call";
 "common_chat_backup" = "Chat backup";
 "common_copied_to_clipboard" = "Copied to clipboard";
 "common_copyright" = "Copyright";
@@ -942,10 +947,11 @@
 "screen_media_browser_media_empty_state_subtitle" = "Images and videos uploaded to this room will be shown here.";
 "screen_media_browser_media_empty_state_title" = "No media uploaded yet";
 "screen_media_browser_title" = "Media and files";
-"screen_media_details_file_format" = "File format";
-"screen_media_details_filename" = "File name";
+"screen_media_details_file_format" = "Format";
+"screen_media_details_filename" = "Name";
 "screen_media_details_no_more_files_to_show" = "No more files to show";
 "screen_media_details_no_more_media_to_show" = "No more media to show";
+"screen_media_details_title" = "File info";
 "screen_media_details_uploaded_by" = "Uploaded by";
 "screen_media_details_uploaded_on" = "Uploaded on";
 "screen_media_picker_error_failed_selection" = "Failed selecting media, please try again.";

ElementX/Resources/Localizations/en.lproj/Localizable.strings

@@ -7,6 +7,7 @@
 "a11y_edit_room_address_hint" = "The full address will be %1$@";
 "a11y_expand_message_text_field" = "Expand message text field";
 "a11y_hide_password" = "Hide password";
+"a11y_info" = "Info";
 "a11y_join_call" = "Join call";
 "a11y_jump_to_bottom" = "Jump to bottom";
 "a11y_notifications_mentions_only" = "Mentions only";
@@ -36,6 +37,7 @@
 "a11y_send_files" = "Send files";
 "a11y_sender_location" = "Sender location";
 "a11y_session_verification_time_limited_action_required" = "Time limited action required, you have one minute to verify";
+"a11y_settings_with_required_action" = "Settings, action required";
 "a11y_show_password" = "Show password";
 "a11y_start_call" = "Start a call";
 "a11y_start_video_call" = "Start a video call";
@@ -88,6 +90,7 @@
 "action_discard" = "Discard";
 "action_dismiss" = "Dismiss";
 "action_done" = "Done";
+"action_download" = "Download";
 "action_edit" = "Edit";
 "action_edit_caption" = "Edit caption";
 "action_edit_poll" = "Edit poll";
@@ -204,7 +207,9 @@
 "common_beta" = "Beta";
 "common_blocked_users" = "Blocked users";
 "common_bubbles" = "Bubbles";
+"common_call_declined" = "Call declined";
 "common_call_started" = "Call started";
+"common_call_you_declined" = "You declined a call";
 "common_chat_backup" = "Chat backup";
 "common_copied_to_clipboard" = "Copied to clipboard";
 "common_copyright" = "Copyright";
@@ -942,10 +947,11 @@
 "screen_media_browser_media_empty_state_subtitle" = "Images and videos uploaded to this room will be shown here.";
 "screen_media_browser_media_empty_state_title" = "No media uploaded yet";
 "screen_media_browser_title" = "Media and files";
-"screen_media_details_file_format" = "File format";
-"screen_media_details_filename" = "File name";
+"screen_media_details_file_format" = "Format";
+"screen_media_details_filename" = "Name";
 "screen_media_details_no_more_files_to_show" = "No more files to show";
 "screen_media_details_no_more_media_to_show" = "No more media to show";
+"screen_media_details_title" = "File info";
 "screen_media_details_uploaded_by" = "Uploaded by";
 "screen_media_details_uploaded_on" = "Uploaded on";
 "screen_media_picker_error_failed_selection" = "Failed selecting media, please try again.";

ElementX/Sources/Generated/Strings.swift

@@ -36,6 +36,8 @@ internal enum L10n {
   internal static var a11yExpandMessageTextField: String { return L10n.tr("Localizable", "a11y_expand_message_text_field") }
   /// Hide password
   internal static var a11yHidePassword: String { return L10n.tr("Localizable", "a11y_hide_password") }
+  /// Info
+  internal static var a11yInfo: String { return L10n.tr("Localizable", "a11y_info") }
   /// Join call
   internal static var a11yJoinCall: String { return L10n.tr("Localizable", "a11y_join_call") }
   /// Jump to bottom
@@ -116,6 +118,8 @@ internal enum L10n {
   internal static var a11ySenderLocation: String { return L10n.tr("Localizable", "a11y_sender_location") }
   /// Time limited action required, you have one minute to verify
   internal static var a11ySessionVerificationTimeLimitedActionRequired: String { return L10n.tr("Localizable", "a11y_session_verification_time_limited_action_required") }
+  /// Settings, action required
+  internal static var a11ySettingsWithRequiredAction: String { return L10n.tr("Localizable", "a11y_settings_with_required_action") }
   /// Show password
   internal static var a11yShowPassword: String { return L10n.tr("Localizable", "a11y_show_password") }
   /// Start a call
@@ -210,6 +214,8 @@ internal enum L10n {
   internal static var actionDismiss: String { return L10n.tr("Localizable", "action_dismiss") }
   /// Done
   internal static var actionDone: String { return L10n.tr("Localizable", "action_done") }
+  /// Download
+  internal static var actionDownload: String { return L10n.tr("Localizable", "action_download") }
   /// Edit
   internal static var actionEdit: String { return L10n.tr("Localizable", "action_edit") }
   /// Edit caption
@@ -448,8 +454,12 @@ internal enum L10n {
   internal static var commonBlockedUsers: String { return L10n.tr("Localizable", "common_blocked_users") }
   /// Bubbles
   internal static var commonBubbles: String { return L10n.tr("Localizable", "common_bubbles") }
+  /// Call declined
+  internal static var commonCallDeclined: String { return L10n.tr("Localizable", "common_call_declined") }
   /// Call started
   internal static var commonCallStarted: String { return L10n.tr("Localizable", "common_call_started") }
+  /// You declined a call
+  internal static var commonCallYouDeclined: String { return L10n.tr("Localizable", "common_call_you_declined") }
   /// Chat backup
   internal static var commonChatBackup: String { return L10n.tr("Localizable", "common_chat_backup") }
   /// Copied to clipboard
@@ -2200,14 +2210,16 @@ internal enum L10n {
   internal static var screenMediaBrowserMediaEmptyStateTitle: String { return L10n.tr("Localizable", "screen_media_browser_media_empty_state_title") }
   /// Media and files
   internal static var screenMediaBrowserTitle: String { return L10n.tr("Localizable", "screen_media_browser_title") }
-  /// File format
+  /// Format
   internal static var screenMediaDetailsFileFormat: String { return L10n.tr("Localizable", "screen_media_details_file_format") }
-  /// File name
+  /// Name
   internal static var screenMediaDetailsFilename: String { return L10n.tr("Localizable", "screen_media_details_filename") }
   /// No more files to show
   internal static var screenMediaDetailsNoMoreFilesToShow: String { return L10n.tr("Localizable", "screen_media_details_no_more_files_to_show") }
   /// No more media to show
   internal static var screenMediaDetailsNoMoreMediaToShow: String { return L10n.tr("Localizable", "screen_media_details_no_more_media_to_show") }
+  /// File info
+  internal static var screenMediaDetailsTitle: String { return L10n.tr("Localizable", "screen_media_details_title") }
   /// Uploaded by
   internal static var screenMediaDetailsUploadedBy: String { return L10n.tr("Localizable", "screen_media_details_uploaded_by") }
   /// Uploaded on

ElementX/Sources/Other/Avatars.swift

@@ -100,15 +100,14 @@ enum UserAvatarSizeOnScreen {
             28
         case .chats, .spaces, .map,
              .timeline, .readReceiptSheet, .completionSuggestions,
-             .blockedUsers, .roomMembersList, .knockingUserBanner,
-             .mediaPreviewDetails:
+             .blockedUsers, .roomMembersList, .knockingUserBanner:
             32
         case .startChat:
             36
         case .roomDetails:
             44
         case .inviteUsers, .knockingUserList, .sessionVerification,
-             .settings, .threadList:
+             .settings, .threadList, .mediaPreviewDetails:
             52
         case .roomChangeRoles:
             56

ElementX/Sources/Screens/FilePreviewScreen/View/TimelineMediaPreviewDetailsView.swift

@@ -13,8 +13,8 @@ struct TimelineMediaPreviewDetailsView: View {
     let item: TimelineMediaPreviewItem.Media
     @ObservedObject var context: TimelineMediaPreviewViewModel.Context
     var preferredColorScheme: ColorScheme? = .dark
-    
     @Binding var sheetHeight: CGFloat
+    
     private let topPadding: CGFloat = 19
     
     var body: some View {
@@ -40,9 +40,9 @@ struct TimelineMediaPreviewDetailsView: View {
     }
     
     private var details: some View {
-        VStack(alignment: .leading, spacing: 24) {
+        VStack(alignment: .leading, spacing: 20) {
             DetailsRow(title: L10n.screenMediaDetailsUploadedBy) {
-                HStack(spacing: 8) {
+                HStack(spacing: 12) {
                     LoadableAvatarImage(url: item.sender.avatarURL,
                                         name: item.sender.displayName,
                                         contentID: item.sender.id,
@@ -50,22 +50,22 @@ struct TimelineMediaPreviewDetailsView: View {
                                         mediaProvider: context.mediaProvider)
                         .accessibilityHidden(true)
                     
-                    VStack(alignment: .leading, spacing: 0) {
+                    VStack(alignment: .leading, spacing: 2) {
                         if let displayName = item.sender.displayName {
                             Text(displayName)
-                                .font(.compound.bodyMDSemibold)
+                                .font(.compound.bodyLGSemibold)
                                 .foregroundStyle(.compound.decorativeColor(for: item.sender.id).text)
                         }
                         
                         Text(item.sender.id)
-                            .font(.compound.bodySM)
+                            .font(.compound.bodyMD)
                             .foregroundStyle(.compound.textSecondary)
                     }
                 }
             }
             
             DetailsRow(title: L10n.screenMediaDetailsUploadedOn) {
-                Text(item.timestamp.formatted(date: .abbreviated, time: .shortened))
+                Text(item.timestamp.formatted(date: .long, time: .shortened))
                     .font(.compound.bodyMD)
                     .foregroundStyle(.compound.textPrimary)
             }
@@ -80,7 +80,7 @@ struct TimelineMediaPreviewDetailsView: View {
                 DetailsRow(title: L10n.screenMediaDetailsFileFormat) {
                     Group {
                         if let fileSize = item.fileSize {
-                            Text(contentType) + Text(" – ") + Text(UInt(fileSize).formatted(.byteCount(style: .file)))
+                            Text(contentType) + Text(" • ") + Text(UInt(fileSize).formatted(.byteCount(style: .file)))
                         } else {
                             Text(contentType)
                         }
@@ -127,9 +127,9 @@ struct TimelineMediaPreviewDetailsView: View {
         var body: some View {
             VStack(alignment: .leading, spacing: 8) {
                 Text(title)
-                    .font(.compound.bodyXS)
+                    .font(Compound.supportsGlass ? .compound.bodyMDSemibold : .compound.bodyXS)
                     .foregroundStyle(.compound.textSecondary)
-                    .textCase(.uppercase)
+                    .textCase(Compound.supportsGlass ? nil : .uppercase)
                 
                 content()
             }

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dfe7dfa9584bf529fd44ac12184aee1ec65208822499efd4a22362ee1ae31f37
-size 130114
+oid sha256:b93c230eb1ec5fb47b7f32255185f1a31be9e63cd2ebdb48d71609ac84fe5070
+size 150251

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6ef2890759c94279735a1b56a038402c4e8262f6cb17cefa834611aa3e16766a
-size 139919
+oid sha256:47e8cbbf2361f846f528033e2f3162dd5f20297f45d0b36d7602c6d389d698f9
+size 161620

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:908c6346c67237fac4c521b6bea847fc69e6f37ed1f3af8fa2df74182f535077
-size 81832
+oid sha256:835404f0d0a173ad4ddbabc68aeda3d7a231fbcfdd457f5d713aef6ef2ea61aa
+size 99521

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Image-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0114d05e30c175113cc236dcffc587c260327a948d3f1d1c3a3eef5e66afc56f
-size 92749
+oid sha256:26b50e2f7f07b3ae738c756f1ab208b56bafc459cbab2c9e8db117702a99f39f
+size 111277

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:056cd98fea9e111f92fcd14016d5f02d1c5b0030341bf54d47b5a05192451fb7
-size 112722
+oid sha256:22fe6462eb9de68f8c6ce02a1362f45a3768db86553a1f38b0858e7e318ec9c6
+size 133349

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:761842c756c51639a05c0d06520761ba2f4f009fb72c36b81633e807d29ce3c5
-size 119906
+oid sha256:f62126e11f38027fb92b1c75ece757864541966e46c5130ab1bd45a4a528a969
+size 141902

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6fb17b7d7328e46cc53db7d554006ac26188b35c42334eb0fffd82b0a20adf8b
-size 66273
+oid sha256:8628e42e49b2a5b373f058da0f5fb6bac6e011de8bf2835e16c382ff815a2b34
+size 84460

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Incoming-on-Room-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dd0ca45510bd9bf23c070542fb5758a1f694add85560bfa2b01e3afdea4e9545
-size 74268
+oid sha256:bb4052cffcf38fa40f413a6599e51daa49821e97f29d775d169f45e03cdf08e1
+size 92649

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b17c46a0f4343cb40be75caa46ed687c75b5588d0c06f0003f34c9f5eb567bab
-size 123673
+oid sha256:671dccc688b9336ec9671f1b63bcbd927a016755cb600c2defd01d952d30f60a
+size 143766

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bbc2866882c27ddea5bcce1ca012e60351d6cb144b2560011824d40dd0826138
-size 133034
+oid sha256:d5229168916a4d0676a23785f57e5af8897f4f8bece9d3510f3643bd7bca4075
+size 154702

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:03ec88b697490faadd8d6f502ac1e1e36c13d9a9469e6c949ebbb9efd575015a
-size 76360
+oid sha256:59571f97f5b4f09e15ed059a14c9c72c58d30af8a2ad7e6a110235614dbcf4f1
+size 93988

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Loading-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f2056d3832873a78f4460def078662b735cf867efe0e7f4e3d3b4fdc5062c7f
-size 86055
+oid sha256:65e890e9425ce674577c84682d62697b0a6cc47e894c5433f16c94833eb00022
+size 104635

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPad-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f67712975bcadd446206574c418fa52b58281af52a65d375bc7dae52ba3d92e
-size 117232
+oid sha256:3075970e4d04aa2db2771e1caee5c63c54cf33d069cf2189397b0ef2d67ff437
+size 137869

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPad-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a2d67d0bfc3a9f5e8b3daa3bb58ca438d4e2493c96f2b0558f81ace1269f9935
-size 125213
+oid sha256:5a523979a533adc0c496285891b4905a919e53fa90961c74a513d5f01eb61a9e
+size 147167

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:29039b3fad4839f03c046dc17e6d196522869c97cc318af119c4380bb6080c1c
-size 70829
+oid sha256:08c83c0e9300a75f8554421a08ec714169bce0f093d67a289e368cb53aa5049a
+size 89039

PreviewTests/Sources/__Snapshots__/PreviewTests/timelineMediaPreviewDetailsView.Unknown-type-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a68001215263a9f2685f40f134f7529aca8bae2379f6b09b82be01e4bdf83e6f
-size 79490
+oid sha256:7b549e6644d2f59e571093bd2b694d36e68bf485dabf96ed8deeaef79575ca3e
+size 97781