Merge pull request #357 from edx/fix/announcements-content

[iOS] Some Announcements on iPhone are not fully displayed
openedx · Mar 20, 2024 · 27035d1 · 27035d1
2 parents 3ae346f + d76e793
commit 27035d1
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 43 deletions.
diff --git a/Core/Core/Configuration/CSSInjector.swift b/Core/Core/Configuration/CSSInjector.swift
@@ -95,9 +95,17 @@ public class CSSInjector {
         var maxWidth: String
         switch type {
         case .discovery:
-            maxWidth = "max-width: \(screenWidth)px;"
+            if screenWidth == .infinity {
+                maxWidth = "max-width: 100%;"
+            } else {
+                maxWidth = "max-width: \(screenWidth)px;"
+            }
         case .comment:
-            maxWidth = "width: \(screenWidth / 1.3)px;"
+            if screenWidth == .infinity {
+                maxWidth = "width: 100%;"
+            } else {
+                maxWidth = "width: \(screenWidth / 1.3)px;"
+            }
         }
 
         func currentColor() -> String {

diff --git a/Course/Course/Presentation/Handouts/HandoutsUpdatesDetailView.swift b/Course/Course/Presentation/Handouts/HandoutsUpdatesDetailView.swift
@@ -17,8 +17,8 @@ public struct HandoutsUpdatesDetailView: View {
 
     private var router: CourseRouter
     private let cssInjector: CSSInjector
-    public var handouts: String?
-    public var announcements: [CourseUpdate]?
+    private var handouts: String?
+    private var announcements: [CourseUpdate]?
     private let title: String
 
     public init(
@@ -77,12 +77,9 @@ public struct HandoutsUpdatesDetailView: View {
     public var body: some View {
         ZStack(alignment: .top) {
             Theme.Colors.background
-                                       .ignoresSafeArea()
-            GeometryReader { reader in
-
+                .ignoresSafeArea()
                 // MARK: - Page Body
                 VStack(alignment: .leading) {
-
                     // MARK: - Handouts
                     if let handouts {
                         let formattedHandouts = cssInjector.injectCSS(
@@ -94,52 +91,114 @@ public struct HandoutsUpdatesDetailView: View {
                         )
 
                         WebViewHtml(fixBrokenLinks(in: formattedHandouts))
-                    } else if let announcements {
-
+                    } else if let html = announcemetsHtml() {
                         // MARK: - Announcements
-                        ScrollView {
-                            ForEach(Array(announcements.enumerated()), id: \.offset) { index, ann in
-
-                                Text(ann.date)
-                                    .font(Theme.Fonts.labelSmall)
-                                let formattedAnnouncements = cssInjector.injectCSS(
-                                    colorScheme: colorScheme,
-                                    html: ann.content,
-                                    type: .discovery,
-                                    screenWidth: reader.size.width
-                                )
-                                HStack {
-                                    HTMLFormattedText(formattedAnnouncements)
-                                    Spacer()
-                                }
-
-                                .id(UUID())
-
-                                if index != announcements.count - 1 {
-                                    Divider()
-                                }
-                            }
-                        }.frame(height: reader.size.height - 60)
-                    }
-                }.padding(.top, 8)
-                    .padding(.horizontal, 32)
-                    .frame(
-                        maxHeight: .infinity,
-                        alignment: .topLeading)
-                    .onRightSwipeGesture {
-                        router.back()
+                        WebViewHtml(fixBrokenLinks(in: html))
                     }
+                }
+                .padding(.top, 8)
+                .padding(.horizontal, 32)
+                .frame(
+                    maxHeight: .infinity,
+                    alignment: .topLeading)
+                .onRightSwipeGesture {
+                    router.back()
+                }
                 Spacer(minLength: 84)
-            }
         }
         .navigationBarHidden(false)
         .navigationBarBackButtonHidden(false)
         .navigationTitle(title)
-        .onChange(of: colorSchemeNative) { newValue in
+        .onChange(of: colorSchemeNative) { _ in
             guard UIApplication.shared.applicationState == .active else { return }
             updateColorScheme()
         }
     }
+
+    func fontsCSS(for fontFamily: String) -> String? {
+        if let path = Bundle(for: ThemeBundle.self).path(forResource: "fonts_file", ofType: "ttf"),
+            let data = try? Data(contentsOf: URL(fileURLWithPath: path), options: .mappedIfSafe) {
+            let fontCSS = """
+            @font-face {
+                font-family: \(fontFamily);
+                src: url(data:font/truetype;charset=utf-8;base64,\(data.base64EncodedString())) format('truetype');
+                font-weight: normal;
+                font-style: normal;
+            }
+            """
+            return "<style>\(fontCSS)</style>"
+        }
+        return nil
+    }
+
+    func titleHTML(fontFamily: String, fontSize: CGFloat, title: String) -> String {
+        """
+            <center>
+                <p style = "
+                    font-family: \(fontFamily) !important;
+                    color: inherit !important;
+                    font-weight: normal !important;
+                    font-size: \(fontSize)px !important;
+                    padding: 0 !important;
+                    margin-top: 0px !important;
+                ">
+                    \(title)
+                </p>
+            </center>
+        """
+    }
+
+    func dividerHTML() -> String {
+        """
+            <div style="
+                margin-top: 3px !important;
+                margin-bottom: 3px !important;
+                background-color: \(UIColor.opaqueSeparator.cgColor.hexString ?? "") !important;
+                width: 100%;
+                height: 0.5px;
+            ">
+            </div>
+        """
+    }
+
+    func announcemetsHtml() -> String? {
+        guard let announcements = announcements else {return nil}
+        var html: String = ""
+        let font = Theme.UIFonts.labelSmall()
+        let fontFamily = font.familyName
+        let fontSize = font.pointSize
+
+        if let fontsCSS = fontsCSS(for: fontFamily) {
+            html.append(fontsCSS)
+        }
+
+        for (index, ann) in announcements.enumerated() {
+            let titleHTML = titleHTML(fontFamily: fontFamily, fontSize: fontSize, title: ann.date)
+            html.append("<div>\(titleHTML)\n\(ann.content)</div>")
+
+            if index != announcements.count - 1 {
+                html.append(dividerHTML())
+            }
+        }
+        let formattedAnnouncements = cssInjector.injectCSS(
+            colorScheme: colorScheme,
+            html: html,
+            type: .discovery,
+            fontSize: 100,
+            screenWidth: .infinity
+        )
+
+        return """
+        <html>
+            <head>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+            </head>
+            <body>
+                \(formattedAnnouncements)
+            </body>
+        </html>
+        """
+    }
 }
 
 #if DEBUG