Fix Circlevideo

Sources/GuideBlocks/CircleVideo/CircleVideoGuide.swift

@@ -1,14 +1,13 @@
 //
 //  CircleVideoGuide.swift
-//  iOS-GuideBlocks
+//  GuideBlocks
 //
 //  Copyright © 2023 Contextual.
 //
 
 import SwiftUI
 import ContextualSDK
 
-
 /// A guide controller for displaying a circle video view.
 public class CircleVideoGuide: CTXBaseGuideController {
 
@@ -42,10 +41,10 @@ public class CircleVideoGuide: CTXBaseGuideController {
 
         let guide = contextualContainer.guidePayload.guide
         let defaultVideoURL = "https://www.youtube.com/embed/Y9ChGCY8Azk?si=aLGas88lnxI6g_jJ?autoplay=1"
-        let vid_url = (guide.extraJson?["vid_url"] as? String) ?? defaultVideoURL
-        let circle_diameter = (guide.extraJson?["circle_diameter"] as? Int) ?? 200
+        let videoUrl = (guide.extraJson?["vid_url"] as? String) ?? defaultVideoURL
+        let circleDiameter = (guide.extraJson?["circle_diameter"] as? Int) ?? 200
 
-        var view = CircleVideoView(vid_url: vid_url, circle_diameter: circle_diameter, dismissbuttonTapped: {
+        var view = CircleVideoView(videoUrl: videoUrl, circleDiameter: circleDiameter, dismissbuttonTapped: {
             self.hostingController?.willMove(toParent: nil)
             self.hostingController?.view.removeFromSuperview()
             self.hostingController?.removeFromParent()

Sources/GuideBlocks/CircleVideo/GuideBlock.yaml

@@ -9,6 +9,6 @@ Screenshot:
 Video: 
 Extensibility: {
     "guideBlockKey": "CircleVideo",
-    "vid_url": "https://www.youtube.com/embed/Y9ChGCY8Azk?si=aLGas88lnxI6g_jJ?autoplay=1",
-    "circle_diameter":200
+    "vid_url": "https://www.youtube.com/embed/Y9ChGCY8Azk?si=aLGas88lnxI6g_jJ?autoplay=1 ",
+    "circle_diameter": 200
 }

Sources/GuideBlocks/CircleVideo/README.md

@@ -17,8 +17,8 @@ Everyone loves Circle Video! This is a simple example to get you started with Co
 `
 {
     "guideBlockKey": "CircleVideo",
-    "vid_url": "https://www.youtube.com/embed/Y9ChGCY8Azk?si=aLGas88lnxI6g_jJ?autoplay=1",
-    "circle_diameter":200
+    "vid_url": "https://www.youtube.com/embed/Y9ChGCY8Azk?si=aLGas88lnxI6g_jJ?autoplay=1 ",
+    "circle_diameter": 200
 }
 `
  * Match the name in the JSON to the name of your wrapper in the code

Sources/GuideBlocks/CircleVideo/Views/CircleVideoView.swift

@@ -12,47 +12,57 @@ import WebKit
 
 // WebView Representable
 struct WebView: UIViewRepresentable {
-    let url: URL
+    let url: URL?
 
     func makeUIView(context: Context) -> WKWebView {
         return WKWebView()
     }
 
     func updateUIView(_ uiView: WKWebView, context: Context) {
-        uiView.load(URLRequest(url: url))
+        if let url {
+            uiView.load(URLRequest(url: url))
+        }
     }
 }
 
 // Round Popup View
 struct CircleVideoView: View {
     var imageElement: SHTipImageElement?
-    var vid_url: String
-    var circle_diameter: Int
+    var videoUrl: String
+    var circleDiameter: Int
     var dismissbuttonTapped: () -> ()
 
     var body: some View {
-        let width = CGFloat(circle_diameter)
-        let height = CGFloat(circle_diameter)
+        let width = CGFloat(circleDiameter)
+        let height = CGFloat(circleDiameter)
         ZStack {
-            Button(action: {self.dismissbuttonTapped()}){
-                Image(systemName: "xmark.circle.fill")
-                    .padding()
-                    .background(Color.red)
-                    .foregroundColor(Color.white)
-                    .clipShape(Circle())
-                    .shadow(radius: 8)
-                    .zIndex(11)
-                    .contextualImageFormat(imageElement)
-            }
-            .offset(x: width/2, y: -1*(height/2))
+            Button(
+                action: {
+                    dismissbuttonTapped()
+                },
+                label: {
+                    Image(systemName: "xmark.circle.fill")
+                        .resizable()
+                        .contextualImageResize(imageElement)
+                        .padding(10)
+                        .contextualImageBackground(imageElement)
+                        .background(.red)
+                        .foregroundColor(.white)
+                        .cornerRadius(width/2)
+                        .clipShape(Circle())
+                        .shadow(radius: 8)
+                        .zIndex(11)
+                }
+            )
+            .offset(
+                x: width/2 - (imageElement?.width ?? 0) / 4,
+                y: -1*(height/2) + (imageElement?.height ?? 0) / 4
+            )
             .zIndex(10)
-            WebView(url: URL(string: vid_url)!)
+            WebView(url: URL(string: videoUrl))
                 .cornerRadius(width/2)
-            //.cornerRadius(10)
                 .frame(width:width, height: height)
         }
-        .frame(width: 100+width, height: 100+height) // Adjust popup size as you need
-        .cornerRadius(width/2) // to get circle these will be smaller once dismiss is visible
         .shadow(radius: width/2)
 
     }
@@ -61,8 +71,8 @@ struct CircleVideoView: View {
 struct CircleVideoView_Previews: PreviewProvider {
     static var previews: some View {
         CircleVideoView(
-            vid_url: "https://www.youtube.com/embed/dQw4w9WgXcQ?si=Wx9SC9sBIU6AlMnz",
-            circle_diameter: 150,
+            videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ?si=Wx9SC9sBIU6AlMnz",
+            circleDiameter: 150,
             dismissbuttonTapped: {
             }
         )

Sources/GuideBlocks/Common/Extensions/View.swift

@@ -33,13 +33,31 @@ extension View {
         )
     }
 
-    func contextualImageFormat(_ imageElement: SHTipImageElement?) -> some View {
+    func contextualImageBackground(_ imageElement: SHTipImageElement?) -> some View {
         modifier(
-            ContextualImageModifier(
-                width: imageElement?.width,
-                height: imageElement?.height,
+            ContextualImageBackgroundModifier(
                 backgroundColor: imageElement?.backgroundColor
             )
         )
     }
+
+    func contextualImageResize(_ imageElement: SHTipImageElement?) -> some View {
+        modifier(
+            ContextualImageResizeModifier(
+                width: imageElement?.width,
+                height: imageElement?.height
+            )
+        )
+    }
+
+    /*func contextualBoxFormat(_ boxElement: SHTipBoxElement?) -> some View {
+        modifier(
+            ContextualBoxModifier(
+                fontName: boxElement?.fontName,
+                fontWeight: boxElement?.fontWeight,
+                fontSize: boxElement?.fontSize,
+                textColor: boxElement?.textColor
+            )
+        )
+    }*/
 }

Sources/GuideBlocks/Common/ViewModifiers/ContextualBoxModifier.swift

@@ -0,0 +1,41 @@
+//
+//  ContextualBoxModifier.swift
+//  GuideBlocks
+//
+//  Created by Amr Aboelela on 2024/2/15.
+//  Copyright © 2024 Contextual.
+//
+
+import ContextualSDK
+import SwiftUI
+
+struct ContextualBoxModifier: ViewModifier {
+    let fontName: String?
+    let fontWeight: String?
+    let fontSize: CGFloat?
+    let textColor: UIColor?
+
+    private var customFont: Font {
+        var font = Font.system(size: fontSize ?? 12.0)
+
+        if let fontName {
+            font = font.fontWith(name: fontName)
+        }
+
+        if let weight = fontWeight {
+            switch weight {
+            case "bold":
+                font = font.weight(.bold)
+            default:
+                font = font.weight(.regular)
+            }
+        }
+        return font
+    }
+
+    func body(content: Content) -> some View {
+        content
+            .font(customFont)
+            .background(textColor.map { Color($0) })
+    }
+}

Sources/GuideBlocks/Common/ViewModifiers/ContextualButtonModifier.swift

@@ -34,27 +34,11 @@ struct ContextualButtonModifier: ViewModifier {
         return font
     }
 
-    private var foregroundColor: Color {
-        if let textColor {
-            return Color(textColor)
-        } else {
-            return Color.black
-        }
-    }
-
-    private var customBackgroundColor: Color {
-        if let backgroundColor {
-            return Color(backgroundColor)
-        } else {
-            return Color.white
-        }
-    }
-
     func body(content: Content) -> some View {
         content
             .font(customFont)
-            .foregroundColor(foregroundColor)
-            .background(customBackgroundColor)
-            .tint(customBackgroundColor)
+            .foregroundColor(textColor.map { Color($0) })
+            .background(backgroundColor.map { Color($0) })
+            .tint(backgroundColor.map { Color($0) })
     }
 }

Sources/GuideBlocks/Common/ViewModifiers/ContextualImageModifier.swift

@@ -9,23 +9,27 @@
 import ContextualSDK
 import SwiftUI
 
-struct ContextualImageModifier: ViewModifier {
-    let width: CGFloat?
-    let height: CGFloat?
+struct ContextualImageBackgroundModifier: ViewModifier {
     let backgroundColor: UIColor?
 
-    private var customBackgroundColor: Color {
-        if let backgroundColor {
-            return Color(backgroundColor)
-        } else {
-            return Color.white
-        }
+    func body(content: Content) -> some View {
+        content
+            .background(backgroundColor.map { Color($0) })
     }
+}
+
+struct ContextualImageResizeModifier: ViewModifier {
+
+    let width: CGFloat?
+    let height: CGFloat?
 
     func body(content: Content) -> some View {
-        content
-            .frame(width: width, height: height)
-            .background(customBackgroundColor)
-            .tint(customBackgroundColor)
+        if let width, let height {
+            content
+                .frame(width: width, height: height)
+        } else {
+            content
+                .frame(width: 35, height: 35)
+        }
     }
 }

Sources/GuideBlocks/Common/ViewModifiers/ContextualTextModifier.swift

@@ -33,17 +33,9 @@ struct ContextualTextModifier: ViewModifier {
         return font
     }
 
-    private var customColor: Color {
-        if let textColor {
-            return Color(textColor)
-        } else {
-            return Color.black
-        }
-    }
-
     func body(content: Content) -> some View {
         content
             .font(customFont)
-            .foregroundColor(customColor)
+            .background(textColor.map { Color($0) })
     }
 }

Tests/GuideBlocksTests/ViewTests.swift

@@ -45,15 +45,24 @@ class ViewTests: XCTestCase {
         XCTAssertTrue("\(modifiedView)".contains("ContextualButtonModifier"))
     }
 
-    func testContextualImageFormat() {
+    func testContextualImageBackground() {
+        let imageElement = SHTipImageElement()
+        imageElement.backgroundColor = .blue
+
+        let view = Image(systemName: "photo")
+
+        let modifiedView = view.contextualImageBackground(imageElement)
+        XCTAssertTrue("\(modifiedView)".contains("ContextualImageBackgroundModifier"))
+    }
+
+    func testContextualImageResize() {
         let imageElement = SHTipImageElement()
         imageElement.width = 200
         imageElement.height = 100
-        imageElement.backgroundColor = .blue
 
         let view = Image(systemName: "photo")
 
-        let modifiedView = view.contextualImageFormat(imageElement)
-        XCTAssertTrue("\(modifiedView)".contains("ContextualImageModifier"))
+        let modifiedView = view.contextualImageResize(imageElement)
+        XCTAssertTrue("\(modifiedView)".contains("ContextualImageResizeModifier"))
     }
 }