ios: make message information on media readable (#4820)

* ios: ensure legibility of elements rendered over media

* reduce diff

* match meta padding

* material play background

* remove circlebadge

* progress circle

* meta color modes

* refactor

* conditional space

* fix

* fix2

* fix3

* revert video buttons

---------

Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>

apps/ios/Shared/Views/Chat/ChatItem/CIGroupInvitationView.swift

@@ -46,7 +46,7 @@ struct CIGroupInvitationView: View {
                                     .foregroundColor(inProgress ? theme.colors.secondary : chatIncognito ? .indigo : theme.colors.primary)
                                     .font(.callout)
                                 + Text("   ")
-                                + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, transparent: true, showStatus: false, showEdited: false, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
+                                + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, colorMode: .transparent, showStatus: false, showEdited: false, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
                             )
                             .overlay(DetermineWidth())
                         }
@@ -54,7 +54,7 @@ struct CIGroupInvitationView: View {
                         (
                             groupInvitationText()
                             + Text("   ")
-                            + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, transparent: true, showStatus: false, showEdited: false, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
+                            + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, colorMode: .transparent, showStatus: false, showEdited: false, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
                         )
                         .overlay(DetermineWidth())
                     }

apps/ios/Shared/Views/Chat/ChatItem/CIImageView.swift

@@ -165,9 +165,9 @@ struct CIImageView: View {
     private func fileIcon(_ icon: String, _ size: CGFloat, _ padding: CGFloat) -> some View {
         Image(systemName: icon)
             .resizable()
+            .invertedForegroundStyle()
             .aspectRatio(contentMode: .fit)
             .frame(width: size, height: size)
-            .foregroundColor(.white)
             .padding(padding)
     }
 

apps/ios/Shared/Views/Chat/ChatItem/CIMetaView.swift

@@ -18,6 +18,7 @@ struct CIMetaView: View {
     var paleMetaColor = Color(UIColor.tertiaryLabel)
     var showStatus = true
     var showEdited = true
+    var invertedMaterial = false
 
     @AppStorage(DEFAULT_SHOW_SENT_VIA_RPOXY) private var showSentViaProxy = false
 
@@ -25,18 +26,59 @@ struct CIMetaView: View {
         if chatItem.isDeletedContent {
             chatItem.timestampText.font(.caption).foregroundColor(metaColor)
         } else {
-            ciMetaText(
-                chatItem.meta,
-                chatTTL: chat.chatInfo.timedMessagesTTL,
-                encrypted: chatItem.encryptedFile,
-                color: chatItem.meta.itemStatus.sndProgress == .partial
-                    ? paleMetaColor
-                    : metaColor,
-                showStatus: showStatus,
-                showEdited: showEdited,
-                showViaProxy: showSentViaProxy,
-                showTimesamp: showTimestamp
-            )
+            ZStack {
+                ciMetaText(
+                    chatItem.meta,
+                    chatTTL: chat.chatInfo.timedMessagesTTL,
+                    encrypted: chatItem.encryptedFile,
+                    color: metaColor,
+                    paleColor: paleMetaColor,
+                    colorMode: invertedMaterial
+                        ? .invertedMaterial
+                        : .normal,
+                    showStatus: showStatus,
+                    showEdited: showEdited,
+                    showViaProxy: showSentViaProxy,
+                    showTimesamp: showTimestamp
+                ).invertedForegroundStyle(enabled: invertedMaterial)
+                if invertedMaterial {
+                    ciMetaText(
+                        chatItem.meta,
+                        chatTTL: chat.chatInfo.timedMessagesTTL,
+                        encrypted: chatItem.encryptedFile,
+                        colorMode: .normal,
+                        onlyOverrides: true,
+                        showStatus: showStatus,
+                        showEdited: showEdited,
+                        showViaProxy: showSentViaProxy,
+                        showTimesamp: showTimestamp
+                    )
+                }
+            }
+        }
+    }
+}
+
+enum MetaColorMode {
+    // Renders provided colours
+    case normal
+    // Fully transparent meta - used for reserving space
+    case transparent
+    // Renders white on dark backgrounds and black on light ones
+    case invertedMaterial
+
+    func resolve(_ c: Color?) -> Color? {
+        switch self {
+        case .normal: c
+        case .transparent: .clear
+        case .invertedMaterial: nil
+        }
+    }
+
+    var statusSpacer: Text {
+        switch self {
+        case .normal, .transparent: Text(Image(systemName: "circlebadge.fill")).foregroundColor(.clear)
+        case .invertedMaterial: Text(" ").kerning(13)
         }
     }
 }
@@ -45,47 +87,77 @@ func ciMetaText(
     _ meta: CIMeta,
     chatTTL: Int?,
     encrypted: Bool?,
-    color: Color = .clear,
+    color: Color = .clear, // we use this function to reserve space without rendering meta
+    paleColor: Color? = nil,
     primaryColor: Color = .accentColor,
-    transparent: Bool = false,
+    colorMode: MetaColorMode = .normal,
+    onlyOverrides: Bool = false, // only render colors that differ from base
     showStatus: Bool = true,
     showEdited: Bool = true,
     showViaProxy: Bool,
     showTimesamp: Bool
 ) -> Text {
     var r = Text("")
+    var space: Text? = nil
+    let appendSpace = {
+        if let sp = space {
+            r = r + sp
+            space = nil
+        }
+    }
+    let resolved = colorMode.resolve(color)
     if showEdited, meta.itemEdited {
-        r = r + statusIconText("pencil", color)
+        r = r + statusIconText("pencil", resolved)
     }
     if meta.disappearing {
-        r = r + statusIconText("timer", color).font(.caption2)
+        r = r + statusIconText("timer", resolved).font(.caption2)
         let ttl = meta.itemTimed?.ttl
         if ttl != chatTTL {
-            r = r + Text(shortTimeText(ttl)).foregroundColor(color)
+            r = r + colored(Text(shortTimeText(ttl)), resolved)
         }
-        r = r + Text(" ")
+        space = Text(" ")
     }
     if showViaProxy, meta.sentViaProxy == true {
-        r = r + statusIconText("arrow.forward", color.opacity(0.67)).font(.caption2)
+        appendSpace()
+        r = r + statusIconText("arrow.forward", resolved?.opacity(0.67)).font(.caption2)
     }
     if showStatus {
-        if let (image, statusColor) = meta.itemStatus.statusIcon(color, primaryColor) {
-            r = r + Text(image).foregroundColor(transparent ? .clear : statusColor) + Text(" ")
+        appendSpace()
+        if let (image, statusColor) = meta.itemStatus.statusIcon(color, paleColor ?? color, primaryColor) {
+            let metaColor = if onlyOverrides && statusColor == color {
+                Color.clear
+            } else {
+                colorMode.resolve(statusColor)
+            }
+            r = r + colored(Text(image), metaColor)
+            space = Text(" ")
         } else if !meta.disappearing {
-            r = r + statusIconText("circlebadge.fill", .clear) + Text(" ")
+            space = colorMode.statusSpacer + Text(" ")
         }
     }
     if let enc = encrypted {
-        r = r + statusIconText(enc ? "lock" : "lock.open", color) + Text(" ")
+        appendSpace()
+        r = r + statusIconText(enc ? "lock" : "lock.open", resolved)
+        space = Text(" ")
     }
     if showTimesamp {
-        r = r + meta.timestampText.foregroundColor(color)
+        appendSpace()
+        r = r + colored(meta.timestampText, resolved)
     }
     return r.font(.caption)
 }
 
-private func statusIconText(_ icon: String, _ color: Color) -> Text {
-    Text(Image(systemName: icon)).foregroundColor(color)
+private func statusIconText(_ icon: String, _ color: Color?) -> Text {
+    colored(Text(Image(systemName: icon)), color)
+}
+
+// Applying `foregroundColor(nil)` breaks `.invertedForegroundStyle` modifier
+private func colored(_ t: Text, _ color: Color?) -> Text {
+    if let color {
+        t.foregroundColor(color)
+    } else {
+        t
+    }
 }
 
 struct CIMetaView_Previews: PreviewProvider {

apps/ios/Shared/Views/Chat/ChatItem/CIRcvDecryptionError.swift

@@ -126,7 +126,7 @@ struct CIRcvDecryptionError: View {
                         .foregroundColor(syncSupported ? theme.colors.primary : theme.colors.secondary)
                         .font(.callout)
                     + Text("   ")
-                    + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, transparent: true, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
+                    + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, colorMode: .transparent, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
                 )
             }
             .padding(.horizontal, 12)
@@ -145,7 +145,7 @@ struct CIRcvDecryptionError: View {
                     .foregroundColor(.red)
                     .italic()
                 + Text("   ")
-                + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, transparent: true, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
+                + ciMetaText(chatItem.meta, chatTTL: nil, encrypted: nil, colorMode: .transparent, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
             }
             .padding(.horizontal, 12)
             CIMetaView(chat: chat, chatItem: chatItem, metaColor: theme.colors.secondary)

apps/ios/Shared/Views/Chat/ChatItem/CIVideoView.swift

@@ -292,30 +292,22 @@ struct CIVideoView: View {
             .clipShape(Circle())
     }
 
-    private func durationProgress() -> some View {
-        HStack {
-            Text("\(durationText(videoPlaying ? progress : duration))")
-            .foregroundColor(.white)
-            .font(.caption)
-            .padding(.vertical, 3)
-            .padding(.horizontal, 6)
-            .background(Color.black.opacity(0.35))
-            .cornerRadius(10)
-            .padding([.top, .leading], 6)
-
-            if let file = chatItem.file, !videoPlaying {
-                Text("\(ByteCountFormatter.string(fromByteCount: file.fileSize, countStyle: .binary))")
-                .foregroundColor(.white)
-                .font(.caption)
-                .padding(.vertical, 3)
-                .padding(.horizontal, 6)
-                .background(Color.black.opacity(0.35))
-                .cornerRadius(10)
-                .padding(.top, 6)
-            }
+    private var fileSizeString: String {
+        if let file = chatItem.file, !videoPlaying {
+            "  " + ByteCountFormatter.string(fromByteCount: file.fileSize, countStyle: .binary)
+        } else {
+            ""
         }
     }
 
+    private func durationProgress() -> some View {
+        Text((durationText(videoPlaying ? progress : duration)) + fileSizeString)
+            .invertedForegroundStyle()
+            .font(.caption)
+            .padding(.vertical, 6)
+            .padding(.horizontal, 12)
+    }
+
     private func imageView(_ img: UIImage) -> some View {
         let w = img.size.width <= img.size.height ? maxWidth * 0.75 : maxWidth
         return ZStack(alignment: .topTrailing) {
@@ -411,9 +403,9 @@ struct CIVideoView: View {
     private func fileIcon(_ icon: String, _ size: CGFloat, _ padding: CGFloat) -> some View {
         Image(systemName: icon)
             .resizable()
+            .invertedForegroundStyle()
             .aspectRatio(contentMode: .fit)
             .frame(width: size, height: size)
-            .foregroundColor(.white)
             .padding(smallView ? 0 : padding)
     }
 
@@ -428,10 +420,8 @@ struct CIVideoView: View {
     private func progressCircle(_ progress: Int64, _ total: Int64) -> some View {
         Circle()
         .trim(from: 0, to: Double(progress) / Double(total))
-        .stroke(
-            Color(uiColor: .white),
-            style: StrokeStyle(lineWidth: 2)
-        )
+        .stroke(style: StrokeStyle(lineWidth: 2))
+        .invertedForegroundStyle()
         .rotationEffect(.degrees(-90))
         .frame(width: 16, height: 16)
         .padding([.trailing, .top], smallView ? 0 : 11)

apps/ios/Shared/Views/Chat/ChatItem/FramedItemView.swift

@@ -64,12 +64,17 @@ struct FramedItemView: View {
                     .overlay(DetermineWidth())
             }
 
-            if chatItem.content.msgContent != nil {
-                CIMetaView(chat: chat, chatItem: chatItem, metaColor: useWhiteMetaColor ? Color.white : theme.colors.secondary)
-                    .padding(.horizontal, 12)
-                    .padding(.bottom, 6)
-                    .overlay(DetermineWidth())
-                    .accessibilityLabel("")
+            if let content = chatItem.content.msgContent {
+                CIMetaView(
+                    chat: chat,
+                    chatItem: chatItem,
+                    metaColor: theme.colors.secondary,
+                    invertedMaterial: useWhiteMetaColor
+                )
+                .padding(.horizontal, 12)
+                .padding(.bottom, 6)
+                .overlay(DetermineWidth())
+                .accessibilityLabel("")
             }
         }   
             .background { chatItemFrameColorMaybeImageOrVideo(chatItem, theme).modifier(ChatTailPadding()) }

apps/ios/Shared/Views/Chat/ChatItem/MsgContentView.swift

@@ -85,7 +85,7 @@ struct MsgContentView: View {
     }
 
     private func reserveSpaceForMeta(_ mt: CIMeta) -> Text {
-        (rightToLeft ? Text("\n") : Text("   ")) + ciMetaText(mt, chatTTL: chat.chatInfo.timedMessagesTTL, encrypted: nil, transparent: true, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
+        (rightToLeft ? Text("\n") : Text("   ")) + ciMetaText(mt, chatTTL: chat.chatInfo.timedMessagesTTL, encrypted: nil, colorMode: .transparent, showViaProxy: showSentViaProxy, showTimesamp: showTimestamp)
     }
 }
 

apps/ios/Shared/Views/Helpers/InvertedForegroundStyle.swift

@@ -0,0 +1,21 @@
+//
+//  Test.swift
+//  SimpleX (iOS)
+//
+//  Created by Levitating Pineapple on 31/08/2024.
+//  Copyright © 2024 SimpleX Chat. All rights reserved.
+//
+
+import SwiftUI
+
+extension View {
+    @ViewBuilder
+    func invertedForegroundStyle(enabled: Bool = true) -> some View {
+        if enabled {
+            foregroundStyle(Material.ultraThin)
+                .environment(\.colorScheme, .dark)
+                .grayscale(1)
+                .contrast(-20)
+        } else { self }
+    }
+}

apps/ios/SimpleX.xcodeproj/project.pbxproj

@@ -194,6 +194,7 @@
 		8CC956EE2BC0041000412A11 /* NetworkObserver.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8CC956ED2BC0041000412A11 /* NetworkObserver.swift */; };
 		8CE848A32C5A0FA000D5C7C8 /* SelectableChatItemToolbars.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8CE848A22C5A0FA000D5C7C8 /* SelectableChatItemToolbars.swift */; };
 		B76E6C312C5C41D900EC11AA /* ContactListNavLink.swift in Sources */ = {isa = PBXBuildFile; fileRef = B76E6C302C5C41D900EC11AA /* ContactListNavLink.swift */; };
+		CE176F202C87014C00145DBC /* InvertedForegroundStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE176F1F2C87014C00145DBC /* InvertedForegroundStyle.swift */; };
 		CE1EB0E42C459A660099D896 /* ShareAPI.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE1EB0E32C459A660099D896 /* ShareAPI.swift */; };
 		CE2AD9CE2C452A4D00E844E3 /* ChatUtils.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE2AD9CD2C452A4D00E844E3 /* ChatUtils.swift */; };
 		CE3097FB2C4C0C9F00180898 /* ErrorAlert.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE3097FA2C4C0C9F00180898 /* ErrorAlert.swift */; };
@@ -532,6 +533,7 @@
 		8CC956ED2BC0041000412A11 /* NetworkObserver.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NetworkObserver.swift; sourceTree = "<group>"; };
 		8CE848A22C5A0FA000D5C7C8 /* SelectableChatItemToolbars.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelectableChatItemToolbars.swift; sourceTree = "<group>"; };
 		B76E6C302C5C41D900EC11AA /* ContactListNavLink.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContactListNavLink.swift; sourceTree = "<group>"; };
+		CE176F1F2C87014C00145DBC /* InvertedForegroundStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InvertedForegroundStyle.swift; sourceTree = "<group>"; };
 		CE1EB0E32C459A660099D896 /* ShareAPI.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAPI.swift; sourceTree = "<group>"; };
 		CE2AD9CD2C452A4D00E844E3 /* ChatUtils.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatUtils.swift; sourceTree = "<group>"; };
 		CE3097FA2C4C0C9F00180898 /* ErrorAlert.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ErrorAlert.swift; sourceTree = "<group>"; };
@@ -789,6 +791,7 @@
 				8C9BC2642C240D5100875A27 /* ThemeModeEditor.swift */,
 				CE984D4A2C36C5D500E3AEFF /* ChatItemClipShape.swift */,
 				CE7548092C622630009579B7 /* SwipeLabel.swift */,
+				CE176F1F2C87014C00145DBC /* InvertedForegroundStyle.swift */,
 			);
 			path = Helpers;
 			sourceTree = "<group>";
@@ -1489,6 +1492,7 @@
 				5C9CC7A928C532AB00BEF955 /* DatabaseErrorView.swift in Sources */,
 				5C1A4C1E27A715B700EAD5AD /* ChatItemView.swift in Sources */,
 				64AA1C6927EE10C800AC7277 /* ContextItemView.swift in Sources */,
+				CE176F202C87014C00145DBC /* InvertedForegroundStyle.swift in Sources */,
 				5CEBD7482A5F115D00665FE2 /* SetDeliveryReceiptsView.swift in Sources */,
 				5C9C2DA7289957AE00CC63B1 /* AdvancedNetworkSettings.swift in Sources */,
 				5CADE79A29211BB900072E13 /* PreferencesView.swift in Sources */,

apps/ios/SimpleXChat/ChatTypes.swift

@@ -2790,13 +2790,14 @@ public enum CIStatus: Decodable, Hashable {
         }
     }
 
-    public func statusIcon(_ metaColor: Color, _ primaryColor: Color = .accentColor) -> (Image, Color)? {
+    public func statusIcon(_ metaColor: Color, _ paleMetaColor: Color, _ primaryColor: Color = .accentColor) -> (Image, Color)? {
         switch self {
         case .sndNew: nil
-        case .sndSent: (Image("checkmark.wide"),  metaColor)
-        case let .sndRcvd(msgRcptStatus, _):
+        case let .sndSent(sndProgress):
+            (Image("checkmark.wide"),  sndProgress == .partial ? paleMetaColor : metaColor)
+        case let .sndRcvd(msgRcptStatus, sndProgress):
             switch msgRcptStatus {
-            case .ok: (Image("checkmark.2"), metaColor)
+            case .ok: (Image("checkmark.2"), sndProgress == .partial ? paleMetaColor : metaColor)
             case .badMsgHash: (Image("checkmark.2"), .red)
             }
         case .sndErrorAuth: (Image(systemName: "multiply"), .red)
@@ -2808,14 +2809,6 @@ public enum CIStatus: Decodable, Hashable {
         }
     }
 
-    public var sndProgress: SndCIStatusProgress? {
-        switch self {
-        case let .sndSent(sndProgress): sndProgress
-        case let .sndRcvd(_ , sndProgress): sndProgress
-        default: nil
-        }
-    }
-
     public var statusInfo: (String, String)? {
         switch self {
         case .sndNew: return nil