ios: add material background to elements over image and video messages

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

@@ -167,8 +167,9 @@ struct CIImageView: View {
             .resizable()
             .aspectRatio(contentMode: .fit)
             .frame(width: size, height: size)
-            .foregroundColor(.white)
             .padding(padding)
+            .modifier(CircleBackground())
+
     }
 
     private func progressView() -> some View {

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

@@ -11,6 +11,8 @@ import AVKit
 import SimpleXChat
 import Combine
 
+let onMediaMaterial = Material.thin
+
 struct CIVideoView: View {
     @EnvironmentObject var m: ChatModel
     private let chatItem: ChatItem
@@ -270,46 +272,44 @@ struct CIVideoView: View {
     }
 
 
-    private func playPauseIcon(_ image: String, _ color: Color = .white) -> some View {
+    private func playPauseIcon(_ image: String) -> some View {
         Image(systemName: image)
         .resizable()
         .aspectRatio(contentMode: .fit)
         .frame(width: smallView ? 12 * sizeMultiplier * 1.6 : 12, height: smallView ? 12 * sizeMultiplier * 1.6 : 12)
-        .foregroundColor(color)
+        .foregroundColor(.primary)
         .padding(.leading, smallView ? 0 : 4)
         .frame(width: 40 * sizeMultiplier, height: 40 * sizeMultiplier)
-        .background(Color.black.opacity(0.35))
+        .background(onMediaMaterial)
         .clipShape(Circle())
     }
 
-    private func videoDecryptionProgress(_ color: Color = .white) -> some View {
+    private func videoDecryptionProgress() -> some View {
         ProgressView()
             .progressViewStyle(.circular)
             .frame(width: smallView ? 12 * sizeMultiplier : 12, height: smallView ? 12 * sizeMultiplier : 12)
-            .tint(color)
+            .tint(.primary)
             .frame(width: smallView ? 40 * sizeMultiplier * 0.9 : 40, height: smallView ? 40 * sizeMultiplier * 0.9 : 40)
-            .background(Color.black.opacity(0.35))
+            .background(onMediaMaterial)
             .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))
+            .background(onMediaMaterial)
             .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))
+                .background(onMediaMaterial)
                 .cornerRadius(10)
                 .padding(.top, 6)
             }
@@ -413,8 +413,9 @@ struct CIVideoView: View {
             .resizable()
             .aspectRatio(contentMode: .fit)
             .frame(width: size, height: size)
-            .foregroundColor(.white)
+//            .foregroundColor(.white)
             .padding(smallView ? 0 : padding)
+            .modifier(CircleBackground())
     }
 
     private func progressView() -> some View {
@@ -423,18 +424,17 @@ struct CIVideoView: View {
         .frame(width: 16, height: 16)
         .tint(.white)
         .padding(smallView ? 0 : 11)
+        .modifier(CircleBackground())
     }
 
     private func progressCircle(_ progress: Int64, _ total: Int64) -> some View {
         Circle()
         .trim(from: 0, to: Double(progress) / Double(total))
-        .stroke(
+        .stroke(style: StrokeStyle(lineWidth: 2))
-            Color(uiColor: .white),
-            style: StrokeStyle(lineWidth: 2)
-        )
         .rotationEffect(.degrees(-90))
         .frame(width: 16, height: 16)
         .padding([.trailing, .top], smallView ? 0 : 11)
+        .modifier(CircleBackground())
     }
 
     // TODO encrypt: where file size is checked?

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

@@ -66,8 +66,16 @@ struct FramedItemView: View {
 
             if chatItem.content.msgContent != nil {
                 CIMetaView(chat: chat, chatItem: chatItem, metaColor: useWhiteMetaColor ? Color.white : theme.colors.secondary)
-                    .padding(.horizontal, 12)
+                    .padding(.horizontal, 4)
-                    .padding(.bottom, 6)
+                    .padding(.vertical, 2)
+                    .background {
+                        if let mc = chatItem.content.msgContent, mc.isImageOrVideo && mc.text.isEmpty  {
+                            Color.clear.background(onMediaMaterial)
+                        }
+                    }
+                    .clipShape(Capsule())
+                    .padding(.horizontal, 8)
+                    .padding(.bottom, 4)
                     .overlay(DetermineWidth())
                     .accessibilityLabel("")
             }
@@ -321,6 +329,17 @@ struct FramedItemView: View {
     }
 }
 
+struct CircleBackground: ViewModifier {
+    func body(content: Content) -> some View {
+        ZStack {
+            Color.clear.background(onMediaMaterial)
+                .frame(width: 20, height: 20)
+                .clipShape(Circle())
+            content
+        }
+    }
+}
+
 @ViewBuilder func toggleSecrets<V: View>(_ ft: [FormattedText]?, _ showSecrets: Binding<Bool>, _ v: V) -> some View {
     if let ft = ft, ft.contains(where: { $0.isSecret }) {
         v.onTapGesture { showSecrets.wrappedValue.toggle() }