From 53379b3aa08a88bc6f510dfb897e9d11522da3db Mon Sep 17 00:00:00 2001 From: Balazs Perlaki-Horvath Date: Fri, 9 Aug 2024 01:09:59 +0200 Subject: [PATCH 1/6] Remove poster attribute on iOS 17, to fix the black screen start --- Support/injection.js | 9 +++++++++ ViewModel/BrowserViewModel.swift | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/Support/injection.js b/Support/injection.js index b721694e..55dc2cc9 100644 --- a/Support/injection.js +++ b/Support/injection.js @@ -86,3 +86,12 @@ function disableVideoContextMenu() { video.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false); }); } + +// for iOS 17 we need to remove the poster +// to solve the issue with the video play starting +// in a full black screen +function removeVideoPosterOniOS17() { + document.querySelectorAll("video").forEach((video) => { + video.attributes.removeNamedItem("poster"); + }); +} diff --git a/ViewModel/BrowserViewModel.swift b/ViewModel/BrowserViewModel.swift index fedf5050..f881e7bc 100644 --- a/ViewModel/BrowserViewModel.swift +++ b/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("removeVideoPosterOniOS17();") + } webView.adjustTextSize() #else persistState() From 8887eac90292fa03f82044204a51c7cea6204182 Mon Sep 17 00:00:00 2001 From: Balazs Perlaki-Horvath Date: Fri, 9 Aug 2024 01:14:58 +0200 Subject: [PATCH 2/6] Remove poster attribute on iOS 17, to fix the black screen start --- Support/injection.js | 5 +---- ViewModel/BrowserViewModel.swift | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/Support/injection.js b/Support/injection.js index 55dc2cc9..4fe10517 100644 --- a/Support/injection.js +++ b/Support/injection.js @@ -87,10 +87,7 @@ function disableVideoContextMenu() { }); } -// for iOS 17 we need to remove the poster -// to solve the issue with the video play starting -// in a full black screen -function removeVideoPosterOniOS17() { +function removeVideoPosters() { document.querySelectorAll("video").forEach((video) => { video.attributes.removeNamedItem("poster"); }); diff --git a/ViewModel/BrowserViewModel.swift b/ViewModel/BrowserViewModel.swift index f881e7bc..68e1d621 100644 --- a/ViewModel/BrowserViewModel.swift +++ b/ViewModel/BrowserViewModel.swift @@ -402,7 +402,7 @@ final class BrowserViewModel: NSObject, ObservableObject, // 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("removeVideoPosterOniOS17();") + webView.evaluateJavaScript("removeVideoPosters();") } webView.adjustTextSize() #else From fef8d6a9322bb3f1e595d483b8e80f3c4e79a222 Mon Sep 17 00:00:00 2001 From: Balazs Perlaki-Horvath Date: Thu, 15 Aug 2024 15:07:02 +0200 Subject: [PATCH 3/6] Remove video poster attributes, even after DOM updates (eg. via VUE.js) --- Support/injection.js | 45 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/Support/injection.js b/Support/injection.js index 4fe10517..bdbb740d 100644 --- a/Support/injection.js +++ b/Support/injection.js @@ -88,7 +88,48 @@ function disableVideoContextMenu() { } function removeVideoPosters() { - document.querySelectorAll("video").forEach((video) => { - video.attributes.removeNamedItem("poster"); + + function removePosterAttributes(element) { + element.querySelectorAll("video").forEach((video) => { + const attributes = video.attributes + if(attributes.getNamedItem('poster')) { + attributes.removeNamedItem("poster"); + } + }); + } + + // remove from the current document + removePosterAttributes(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) { + removePosterAttributes(addedNode); + } + } + } + } }); } From a61d2e3cf8c9cc132ee0d6f174eb3689796fb88d Mon Sep 17 00:00:00 2001 From: Balazs Perlaki-Horvath Date: Sun, 18 Aug 2024 20:03:12 +0200 Subject: [PATCH 4/6] Rename function --- Support/injection.js | 12 ++++++------ ViewModel/BrowserViewModel.swift | 1 + 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/Support/injection.js b/Support/injection.js index bdbb740d..716b52ce 100644 --- a/Support/injection.js +++ b/Support/injection.js @@ -89,19 +89,19 @@ function disableVideoContextMenu() { function removeVideoPosters() { - function removePosterAttributes(element) { + function fixVideoAttributes(element) { element.querySelectorAll("video").forEach((video) => { const attributes = video.attributes if(attributes.getNamedItem('poster')) { - attributes.removeNamedItem("poster"); + attributes.removeNamedItem('poster'); } }); } - // remove from the current document - removePosterAttributes(document); + // fix in the currently loaded DOM + fixVideoAttributes(document); - // observe the dom, if video content is added, fix that as well + // observe the DOM, if video content is added, fix that as well var observeDOM = (function() { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; @@ -126,7 +126,7 @@ function removeVideoPosters() { if (mutation.type === 'childList' & mutation.addedNodes.length) { for (const addedNode of mutation.addedNodes) { if(addedNode.querySelectorAll) { - removePosterAttributes(addedNode); + fixVideoAttributes(addedNode); } } } diff --git a/ViewModel/BrowserViewModel.swift b/ViewModel/BrowserViewModel.swift index 68e1d621..32ad279a 100644 --- a/ViewModel/BrowserViewModel.swift +++ b/ViewModel/BrowserViewModel.swift @@ -114,6 +114,7 @@ final class BrowserViewModel: NSObject, ObservableObject, // configure web view webView.allowsBackForwardNavigationGestures = true + webView.configuration.allowsInlineMediaPlayback = true webView.configuration.defaultWebpagePreferences.preferredContentMode = .mobile // for font adjustment to work webView.configuration.userContentController.removeScriptMessageHandler(forName: "headings") webView.configuration.userContentController.add(self, name: "headings") From e0db10d9653e4c048df1b46c524280975caef503 Mon Sep 17 00:00:00 2001 From: Balazs Perlaki-Horvath Date: Sun, 18 Aug 2024 20:06:41 +0200 Subject: [PATCH 5/6] Rename function --- Support/injection.js | 2 +- ViewModel/BrowserViewModel.swift | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Support/injection.js b/Support/injection.js index 716b52ce..15ed0989 100644 --- a/Support/injection.js +++ b/Support/injection.js @@ -87,7 +87,7 @@ function disableVideoContextMenu() { }); } -function removeVideoPosters() { +function fixVideoElements() { function fixVideoAttributes(element) { element.querySelectorAll("video").forEach((video) => { diff --git a/ViewModel/BrowserViewModel.swift b/ViewModel/BrowserViewModel.swift index 32ad279a..05be75f1 100644 --- a/ViewModel/BrowserViewModel.swift +++ b/ViewModel/BrowserViewModel.swift @@ -403,7 +403,7 @@ final class BrowserViewModel: NSObject, ObservableObject, // 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("removeVideoPosters();") + webView.evaluateJavaScript("fixVideoElements();") } webView.adjustTextSize() #else From 78e3d723138a08dcaa5f8abcbc733b70a5529ab3 Mon Sep 17 00:00:00 2001 From: Balazs Perlaki-Horvath Date: Sun, 18 Aug 2024 20:22:24 +0200 Subject: [PATCH 6/6] Remove non mac property --- ViewModel/BrowserViewModel.swift | 1 - 1 file changed, 1 deletion(-) diff --git a/ViewModel/BrowserViewModel.swift b/ViewModel/BrowserViewModel.swift index 05be75f1..f6eff687 100644 --- a/ViewModel/BrowserViewModel.swift +++ b/ViewModel/BrowserViewModel.swift @@ -114,7 +114,6 @@ final class BrowserViewModel: NSObject, ObservableObject, // configure web view webView.allowsBackForwardNavigationGestures = true - webView.configuration.allowsInlineMediaPlayback = true webView.configuration.defaultWebpagePreferences.preferredContentMode = .mobile // for font adjustment to work webView.configuration.userContentController.removeScriptMessageHandler(forName: "headings") webView.configuration.userContentController.add(self, name: "headings")