[iOS] ui: Left-edge swipe shouldn't "overwrite" persistent header and footer

[johnpyp]

Steps to reproduce

1. Have something playing / paused at the bottom of the app
2. Go to any page
3. Swipe from the left edge to "go back"

Expected behaviour

• iOS standard behavior here is that the "header and footer" elements should stay stable as the swipe back happens.

Example behavior from Prologue:

Actual behaviour

• The header and footer move along with the rest of the page, as in this screenshot:

Environment data

Audiobookshelf Version: 0.9.70-beta

• Android App?
• iOS App?

iOS Issue

iOS Version: 17.1.2

iPhone model: iPhone 15 Pro

[benonymity]

Being a UI stickler I am totally on board with this, but I don't know that there is a way we could implement this easily. Right now the swipe back gesture is handled completely by iOS as if the app is a webpage in Safari. Unless we can somehow track the users finger and update the positioning of the audio player with relation to the screen size every frame when swiping in real time... might be challenging

[johnpyp]

Hmm I see, I thought the app was using ionic components but it doesn't look like it. Ionic components make this possible and handle the native-feeling animations I believe, but it would be a tall order to integrate them.

[benonymity]

Yeah, sadly not. Most of it is code written for the server's UI that got copied into the app, so rewriting would be a monumental effort. It would probably be easier to write a custom swipe handler, but I imagine that would also be a large undertaking

[advplyr]

Ionic is using webview so are they disabling the swipe back altogether?

I'm pretty sure we can disable the swipe back across the entire app but we can't disable it for specific pages/displays. If we disable it across the entire app we have to write our own swipe right events if we want to keep the navigating back on swipe action

[benonymity]

Yeah, I think that with both Ionic and Capacitor the native swipe back gesture is entirely disabled. In Ionic it makes sense to always have it disabled, as they seem to have a custom gesture controller (nice not to be beholden to webView for configuration, but I imagine creating it was a lot of effort). But it does mean they can do nice things like

this.routerOutlet.swipeGesture = false

for individual pages. Doing something like that seems pretty far beyond the app's currently (esp. as Ionic is in Angular unlike the framework-agnostic Capacitor). But if someone goes to the effort of building a similar UI layer for Vue and tweaking the router that'd solve this issue, but I imagine that won't happen anytime soon.

But in looking around just now I did stumble on this Capacitor swipe back plugin which might make disabling the swipe back on specific pages easier than my hacky touch intercept. Though look like it hasn't been maintained for 5 years...

Regardless, this issue doesn't seem very simple to implement yet, as much as I would love the UI consistency.

[advplyr]

I'm pretty sure I tried the solution they implemented and it wasn't working but that was a while ago so who knows what I might have missed. We don't need to use their plugin since the code change is a simple one-liner for iOS

self.bridge.getWebView()?.allowsBackForwardNavigationGestures = true

We don't need this for Android