Fix overlapping FXL pages in landscape orientation (#637)

Author: mickael-menu

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to this project will be documented in this file. Take a look
 * EPUB vertical text in scrolling mode:
     * [#556](https://github.com/readium/swift-toolkit/issues/556) Fixed reporting and restoring the reading progression.
     * Added support for decorations (highlights).
+* [#635](https://github.com/readium/swift-toolkit/issues/635) Fixed overlapping FXL pages in landscape orientation.
 
 
 ## [3.3.0]

Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-one.js

@@ -77,8 +77,18 @@ final class EPUBFixedSpreadView: EPUBSpreadView {
         guard isWrapperLoaded else {
             return
         }
-        // Insets the bounds by the notch area (eg. iPhone X) to make sure that the content is not overlapped by the screen notch.
-        let insets = notchAreaInsets
+
+        // Insets the bounds by the notch area (eg. iPhone X) to make sure that
+        // the content is not overlapped by the screen notch.
+        var insets = notchAreaInsets
+
+        // Use the same insets on the left and right side (the largest one) to
+        // keep the pages centered on the screen even if the notches are not
+        // symmetrical.
+        let horizontalInsets = max(insets.left, insets.right)
+        insets.left = horizontalInsets
+        insets.right = horizontalInsets
+
         let viewportSize = bounds.inset(by: insets).size
 
         webView.evaluateJavaScript("""

Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-two.js

@@ -52,8 +52,6 @@ export function FixedPage(iframeId) {
     _iframe.style.height = _pageSize.height + "px";
     _iframe.style.marginTop =
       _safeAreaInsets.top - _safeAreaInsets.bottom + "px";
-    _iframe.style.marginLeft =
-      _safeAreaInsets.left - _safeAreaInsets.right + "px";
 
     // Calculates the zoom scale required to fit the content to the viewport.
     var widthRatio = _viewportSize.width / _pageSize.width;

Sources/Navigator/EPUB/EPUBFixedSpreadView.swift

@@ -1,5 +1,5 @@
 # XCODEGEN VERSION
-2.43.0
+2.44.1
 
 # SPEC
 {
@@ -408,11 +408,9 @@
 ../../Sources/Navigator/EditingAction.swift
 ../../Sources/Navigator/EPUB
 ../../Sources/Navigator/EPUB/Assets
-../../Sources/Navigator/EPUB/Assets/.DS_Store
 ../../Sources/Navigator/EPUB/Assets/fxl-spread-one.html
 ../../Sources/Navigator/EPUB/Assets/fxl-spread-two.html
 ../../Sources/Navigator/EPUB/Assets/Static
-../../Sources/Navigator/EPUB/Assets/Static/.DS_Store
 ../../Sources/Navigator/EPUB/Assets/Static/fonts
 ../../Sources/Navigator/EPUB/Assets/Static/fonts/OpenDyslexic-Bold.otf
 ../../Sources/Navigator/EPUB/Assets/Static/fonts/OpenDyslexic-BoldItalic.otf
@@ -470,6 +468,7 @@
 ../../Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift
 ../../Sources/Navigator/EPUB/Preferences/EPUBSettings.swift
 ../../Sources/Navigator/EPUB/Scripts
+../../Sources/Navigator/EPUB/Scripts/.DS_Store
 ../../Sources/Navigator/EPUB/Scripts/.eslintrc.json
 ../../Sources/Navigator/EPUB/Scripts/.gitignore
 ../../Sources/Navigator/EPUB/Scripts/.prettierignore

Sources/Navigator/EPUB/Scripts/src/fixed-page.js

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 54;
+	objectVersion = 77;
 	objects = {
 
 /* Begin PBXBuildFile section */
@@ -2289,8 +2289,6 @@
 			attributes = {
 				BuildIndependentTargetsInParallel = YES;
 				LastUpgradeCheck = 1250;
-				TargetAttributes = {
-				};
 			};
 			buildConfigurationList = 5A872BCD95ECE5673BC89051 /* Build configuration list for PBXProject "Readium" */;
 			compatibilityVersion = "Xcode 14.0";
@@ -2303,7 +2301,7 @@
 			);
 			mainGroup = 2C63ECC3CC1230CCA416F55F;
 			minimizedProjectReferenceProxies = 1;
-			preferredProjectObjectVersion = 54;
+			preferredProjectObjectVersion = 77;
 			projectDirPath = "";
 			projectRoot = "";
 			targets = (