relays: add relay pic view for displaying relay icons

damus.xcodeproj/project.pbxproj

@@ -402,6 +402,7 @@
 		5C6E1DAF2A194075008FC15A /* PinkGradient.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5C6E1DAE2A194075008FC15A /* PinkGradient.swift */; };
 		5CC868DD2AA29B3200FB22BA /* NeutralButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5CC868DC2AA29B3200FB22BA /* NeutralButtonStyle.swift */; };
 		5CF2DCCA2AA3A49B00984B8D /* TLDExtract in Frameworks */ = {isa = PBXBuildFile; productRef = 5CF2DCC92AA3A49B00984B8D /* TLDExtract */; };
+		5CF2DCCC2AA3AF0B00984B8D /* RelayPicView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5CF2DCCB2AA3AF0B00984B8D /* RelayPicView.swift */; };
 		5CF2DCCE2AABE1A500984B8D /* DamusLightGradient.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5CF2DCCD2AABE1A500984B8D /* DamusLightGradient.swift */; };
 		5CF72FC229B9142F00124A13 /* ShareAction.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5CF72FC129B9142F00124A13 /* ShareAction.swift */; };
 		6439E014296790CF0020672B /* ProfilePicImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6439E013296790CF0020672B /* ProfilePicImageView.swift */; };
@@ -1082,6 +1083,7 @@
 		5C6E1DAC2A193EC2008FC15A /* GradientButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GradientButtonStyle.swift; sourceTree = "<group>"; };
 		5C6E1DAE2A194075008FC15A /* PinkGradient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PinkGradient.swift; sourceTree = "<group>"; };
 		5CC868DC2AA29B3200FB22BA /* NeutralButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NeutralButtonStyle.swift; sourceTree = "<group>"; };
+		5CF2DCCB2AA3AF0B00984B8D /* RelayPicView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RelayPicView.swift; sourceTree = "<group>"; };
 		5CF2DCCD2AABE1A500984B8D /* DamusLightGradient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DamusLightGradient.swift; sourceTree = "<group>"; };
 		5CF72FC129B9142F00124A13 /* ShareAction.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareAction.swift; sourceTree = "<group>"; };
 		6439E013296790CF0020672B /* ProfilePicImageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProfilePicImageView.swift; sourceTree = "<group>"; };
@@ -1919,6 +1921,7 @@
 				4CE8794F2996B2BD00F758CC /* RelayStatusView.swift */,
 				4CE879512996B68900F758CC /* RelayType.swift */,
 				4CDA128929E9D10C0006FA5A /* SignalView.swift */,
+				5CF2DCCB2AA3AF0B00984B8D /* RelayPicView.swift */,
 			);
 			path = Relays;
 			sourceTree = "<group>";
@@ -2667,6 +2670,7 @@
 				4C32B9602A9AD44700DC3548 /* Struct.swift in Sources */,
 				4CC7AAF0297F11C700430951 /* SelectedEventView.swift in Sources */,
 				4CC7AAF8297F1CEE00430951 /* EventProfile.swift in Sources */,
+				5CF2DCCC2AA3AF0B00984B8D /* RelayPicView.swift in Sources */,
 				4C687C242A5FA86D0092C550 /* SearchHeaderView.swift in Sources */,
 				64FBD06F296255C400D9D3B2 /* Theme.swift in Sources */,
 				4C1A9A2329DDDB8100516EAC /* IconLabel.swift in Sources */,

damus/Views/Relays/RelayPicView.swift

@@ -0,0 +1,100 @@
+//
+//  RelayPicView.swift
+//  damus
+//
+//  Created by eric on 9/2/23.
+//
+
+import SwiftUI
+import Kingfisher
+import TLDExtract
+
+struct InnerRelayPicView: View {
+    let url: URL?
+    let size: CGFloat
+    let highlight: Highlight
+    let disable_animation: Bool
+    @State var failedImage: Bool = false
+    
+    var Placeholder: some View {
+        RoundedRectangle(cornerRadius: 15)
+            .frame(width: size, height: size)
+            .foregroundColor(DamusColors.adaptableGrey)
+            .overlay(RoundedRectangle(cornerRadius: 15).stroke(highlight_color(highlight), lineWidth: pfp_line_width(highlight)))
+            .padding(2)
+    }
+
+    var body: some View {
+        ZStack {
+            Color(uiColor: .secondarySystemBackground)
+
+            KFAnimatedImage(url)
+                .imageContext(.pfp, disable_animation: disable_animation)
+                .onFailure({ result in
+                    failedImage = true
+                })
+                .cancelOnDisappear(true)
+                .configure { view in
+                    view.framePreloadCount = 3
+                }
+                .placeholder { _ in
+                    Placeholder
+                }
+                .scaledToFit()
+            
+            if failedImage {
+                let abbrv = String(url?.hostname?.first?.uppercased() ?? "R")
+                Text("\(abbrv)")
+                    .font(.system(size: 40, weight: .bold))
+            }
+        }
+        .frame(width: size, height: size)
+        .clipShape(RoundedRectangle(cornerRadius: 15))
+        .overlay(RoundedRectangle(cornerRadius: 15).stroke(failedImage ? .gray : highlight_color(highlight), lineWidth: failedImage ? 1 : pfp_line_width(highlight)))
+    }
+}
+
+struct RelayPicView: View {
+    let relay: String
+    let icon: String?
+    let size: CGFloat
+    let highlight: Highlight
+    let disable_animation: Bool
+    
+    init(relay: String, icon: String? = nil, size: CGFloat, highlight: Highlight, disable_animation: Bool) {
+        self.relay = relay
+        self.icon = icon
+        self.size = size
+        self.highlight = highlight
+        self.disable_animation = disable_animation
+    }
+    
+    var body: some View {
+        InnerRelayPicView(url: get_relay_url(relay: relay, icon: icon), size: size, highlight: highlight, disable_animation: disable_animation)
+    }
+}
+
+func get_relay_url(relay: String, icon: String?) -> URL {
+    let extractor = TLDExtract()
+    var favicon = relay + "/favicon.ico"
+    if let parseRelay: TLDResult = extractor.parse(relay) {
+        favicon = "https://" + (parseRelay.rootDomain ?? relay) + "/favicon.ico"
+    }
+    let pic = icon ?? favicon
+    if let url = URL(string: pic) {
+        return url
+    }
+    return URL(string: "")!
+}
+
+struct RelayPicView_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack {
+            RelayPicView(relay: "wss://relay.damus.io", size: 55, highlight: .none, disable_animation: false)
+            RelayPicView(relay: "wss://nostr.wine", size: 55, highlight: .none, disable_animation: false)
+            RelayPicView(relay: "wss://nos.lol", size: 55, highlight: .none, disable_animation: false)
+            RelayPicView(relay: "fail", size: 55, highlight: .none, disable_animation: false)
+        }
+    }
+}
+