Initial support for non-text comments including images and videos

Circles.xcodeproj/project.pbxproj

@@ -172,6 +172,7 @@
 		A57BD8462BD19C1000EC07E9 /* FriendsOfFriendsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = A57BD8452BD19C1000EC07E9 /* FriendsOfFriendsView.swift */; };
 		A57BD8482BD1A6A300EC07E9 /* FollowingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = A57BD8472BD1A6A300EC07E9 /* FollowingView.swift */; };
 		A58E21782C46F344005FF66B /* RelativeTimestampFormatter.swift in Sources */ = {isa = PBXBuildFile; fileRef = A58E21772C46F344005FF66B /* RelativeTimestampFormatter.swift */; };
+		A58E217A2C4AC3CA005FF66B /* CommentCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = A58E21792C4AC3CA005FF66B /* CommentCard.swift */; };
 		A5921EB32AFAA83A00C2331D /* SingleTimelineSettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = A5921EB22AFAA83A00C2331D /* SingleTimelineSettingsView.swift */; };
 		A5921EB72AFAD5E400C2331D /* CircleFollowingRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = A5921EB62AFAD5E400C2331D /* CircleFollowingRow.swift */; };
 		A5921EB92AFAD7F000C2331D /* RoomInvitedMemberRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = A5921EB82AFAD7F000C2331D /* RoomInvitedMemberRow.swift */; };
@@ -427,6 +428,7 @@
 		A57BD8452BD19C1000EC07E9 /* FriendsOfFriendsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FriendsOfFriendsView.swift; sourceTree = "<group>"; };
 		A57BD8472BD1A6A300EC07E9 /* FollowingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FollowingView.swift; sourceTree = "<group>"; };
 		A58E21772C46F344005FF66B /* RelativeTimestampFormatter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RelativeTimestampFormatter.swift; sourceTree = "<group>"; };
+		A58E21792C4AC3CA005FF66B /* CommentCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CommentCard.swift; sourceTree = "<group>"; };
 		A5921EB22AFAA83A00C2331D /* SingleTimelineSettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SingleTimelineSettingsView.swift; sourceTree = "<group>"; };
 		A5921EB62AFAD5E400C2331D /* CircleFollowingRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleFollowingRow.swift; sourceTree = "<group>"; };
 		A5921EB82AFAD7F000C2331D /* RoomInvitedMemberRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomInvitedMemberRow.swift; sourceTree = "<group>"; };
@@ -780,6 +782,7 @@
 				409F439B265DE38200690A61 /* UserAvatarView.swift */,
 				A5487EC62ADC81E500FA16B5 /* UserNameView.swift */,
 				A5BB4EF22BD02FD7001FD0D8 /* VideoContentView.swift */,
+				A58E21792C4AC3CA005FF66B /* CommentCard.swift */,
 			);
 			path = Timeline;
 			sourceTree = "<group>";
@@ -1209,6 +1212,7 @@
 				A521C3F72A68D9390051ED88 /* CircleInvitationsIndicator.swift in Sources */,
 				409F42E9265DE06C00690A61 /* WebView.swift in Sources */,
 				42CCE0CC2C122D7B001B19D2 /* ViewModifier+Extensions.swift in Sources */,
+				A58E217A2C4AC3CA005FF66B /* CommentCard.swift in Sources */,
 				A51ABE6A2B2B7E2000039276 /* FollowingTimelineDetailsView.swift in Sources */,
 				A54A830F2C08B99100CE4000 /* SetupIntroToCircles.swift in Sources */,
 				40878FC72694C00000A66EF0 /* MessageContextMenu.swift in Sources */,

Circles/Views/Timeline/CommentCard.swift

+//
+//  CommentCard.swift
+//  Circles
+//
+//  Created by Charles Wright on 7/19/24.
+//
+
+import SwiftUI
+import Matrix
+
+struct CommentCard: View {
+    @ObservedObject var message: Matrix.Message
+    
+    @ViewBuilder
+    var contents: some View {
+        
+        let width: CGFloat = UIDevice.isPhone ? 300 : 500
+        
+        let latest = message.replacement ?? message
+            
+        if let content = latest.content as? Matrix.MessageContent {
+            switch content.msgtype {
+            case M_TEXT:
+                if let textContent = content as? Matrix.mTextContent {
+                    Text(textContent.body)
+                        .font(
+                            Font.custom("Inter", size: 12)
+                                .weight(.medium)
+                        )
+                        .foregroundColor(Color.greyCool1100)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                }
+            case M_IMAGE:
+                ImageContentView(message: latest, mediaViewWidth: width)
+            case M_VIDEO:
+                VideoContentView(message: latest)
+            case M_ROOM_ENCRYPTED:
+                Text("Error: Failed to decrypt comment")
+                    .font(
+                        Font.custom("Inter", size: 12)
+                            .weight(.medium)
+                    )
+                    .foregroundColor(Color.red)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+            default:
+                Text("Error: This version of Circles does not support this message type")
+                    .font(
+                        Font.custom("Inter", size: 12)
+                            .weight(.medium)
+                    )
+                    .foregroundColor(Color.red)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+            }
+        }
+    }
+    
+    var body: some View {
+        HStack(alignment: .top, spacing: 0) {
+            UserAvatarView(user: message.sender)
+                .frame(width: 24, height: 24)
+                .padding(.trailing, 8)
+            
+            VStack(alignment: .leading, spacing: 4) {
+                UserNameView(user: message.sender)
+                    .font(
+                        Font.custom("Nunito", size: 14)
+                            .weight(.heavy)
+                    )
+                    .foregroundColor(Color.greyCool1100)
+                
+                HStack(alignment: .top, spacing: 0) {
+                    contents
+                        .font(
+                            Font.custom("Inter", size: 12)
+                                .weight(.medium)
+                        )
+                        .foregroundColor(Color.greyCool1100)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                    
+                    Spacer()
+                    
+                    AsyncButton(action: {}) {
+                        Image(systemName: SystemImages.heart.rawValue)
+                            .frame(width: 18, height: 18)
+                    }
+                }
+            }
+            
+        }
+        .padding(.horizontal, 0)
+        .padding(.top, 0)
+        .padding(.bottom, 20)
+        .frame(maxWidth: .infinity, alignment: .topLeading)
+    }
+}
+

Circles/Views/Timeline/CommentsView.swift

@@ -54,10 +54,11 @@ struct CommentsView: View {
             ScrollView {
                 VStack(alignment: .leading, spacing: 4) {
                     ForEach(messages) { message in
-                        MessageCard(message: message, isThreaded: true)
+                        CommentCard(message: message)
                     }
                 }
             }
+            .padding(16)
 
             Divider()
             

Circles/Views/Timeline/MessageCard.swift

@@ -33,7 +33,6 @@ struct TextContentView: View {
         Markdown(markdown)
             .textSelection(.enabled)
             .frame(maxWidth: .infinity, alignment: .leading)
-            .font(Font.custom("Inter", size: 14))
     }
 }
 
@@ -143,6 +142,7 @@ struct MessageCard: MessageView {
                 case M_TEXT:
                     if let textContent = content as? Matrix.mTextContent {
                         TextContentView(textContent.body)
+                            .font(Font.custom("Inter", size: 14))
                             .padding(.horizontal, 3)
                             .padding(.vertical, 5)
                     }