From 665406196a738916172d7ccfb6c53ef313853293 Mon Sep 17 00:00:00 2001 From: Levitating Pineapple Date: Thu, 29 Aug 2024 18:57:04 +0300 Subject: [PATCH] ios: add material background to elements over image and video messages --- .../Views/Chat/ChatItem/CIImageView.swift | 3 +- .../Views/Chat/ChatItem/CIVideoView.swift | 30 +++++++++---------- .../Views/Chat/ChatItem/FramedItemView.swift | 23 ++++++++++++-- 3 files changed, 38 insertions(+), 18 deletions(-) diff --git a/apps/ios/Shared/Views/Chat/ChatItem/CIImageView.swift b/apps/ios/Shared/Views/Chat/ChatItem/CIImageView.swift index 3966d7e258..33fc155c19 100644 --- a/apps/ios/Shared/Views/Chat/ChatItem/CIImageView.swift +++ b/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 { diff --git a/apps/ios/Shared/Views/Chat/ChatItem/CIVideoView.swift b/apps/ios/Shared/Views/Chat/ChatItem/CIVideoView.swift index 4670fc685f..9955d355fd 100644 --- a/apps/ios/Shared/Views/Chat/ChatItem/CIVideoView.swift +++ b/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( - Color(uiColor: .white), - style: StrokeStyle(lineWidth: 2) - ) + .stroke(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? diff --git a/apps/ios/Shared/Views/Chat/ChatItem/FramedItemView.swift b/apps/ios/Shared/Views/Chat/ChatItem/FramedItemView.swift index e70f891302..02e0d3f1e3 100644 --- a/apps/ios/Shared/Views/Chat/ChatItem/FramedItemView.swift +++ b/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(.bottom, 6) + .padding(.horizontal, 4) + .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(_ ft: [FormattedText]?, _ showSecrets: Binding, _ v: V) -> some View { if let ft = ft, ft.contains(where: { $0.isSecret }) { v.onTapGesture { showSecrets.wrappedValue.toggle() }