Merge pull request #924 from kiwix/916-iphone-video-starts-with-a-black-screen

Fix iPhone video starting with a black screen on iOS 17 iPhone

Support/injection.js

@@ -86,3 +86,50 @@ function disableVideoContextMenu() {
         video.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
     });
 }
+
+function fixVideoElements() {
+
+    function fixVideoAttributes(element) {
+        element.querySelectorAll("video").forEach((video) => {
+            const attributes = video.attributes
+            if(attributes.getNamedItem('poster')) {
+                attributes.removeNamedItem('poster');
+            }
+        });
+    }
+
+    // fix in the currently loaded DOM
+    fixVideoAttributes(document);
+
+    // observe the DOM, if video content is added, fix that as well
+    var observeDOM = (function() {
+        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+
+        return function(obj, callback) {
+            if (!obj || obj.nodeType !== 1) {
+                return;
+            }
+
+            if (MutationObserver) {
+                // define a new observer
+                var mutationObserver = new MutationObserver(callback);
+                // have the observer observe for changes in children
+                mutationObserver.observe(obj, {attributes: false, childList: true, subtree: true});
+                return mutationObserver;
+            }
+        }
+    })();
+
+    // Observe the body DOM element:
+    observeDOM(document.querySelector('body'), function(mutationList) {
+        for (const mutation of mutationList) {
+            if (mutation.type === 'childList' & mutation.addedNodes.length) {
+                for (const addedNode of mutation.addedNodes) {
+                    if(addedNode.querySelectorAll) {
+                        fixVideoAttributes(addedNode);
+                    }
+                }
+            }
+        }
+    });
+}

ViewModel/BrowserViewModel.swift

@@ -395,9 +395,15 @@ final class BrowserViewModel: NSObject, ObservableObject,
         decisionHandler(.allow)
     }
 
+    @MainActor
     func webView(_ webView: WKWebView, didFinish _: WKNavigation!) {
         webView.evaluateJavaScript("expandAllDetailTags(); getOutlineItems();")
 #if os(iOS)
+        // on iOS 17 on the iPhone, the video starts with a black screen
+        // if there's a poster attribute
+        if #available(iOS 17, *), Device.current == .iPhone {
+            webView.evaluateJavaScript("fixVideoElements();")
+        }
         webView.adjustTextSize()
 #else
         persistState()