Skip to content

Fix various UI and Playback issues on mobile browser#38

Merged
cwilvx merged 8 commits intoswingmx:masterfrom
Type-Delta:mobile-fix
Nov 21, 2024
Merged

Fix various UI and Playback issues on mobile browser#38
cwilvx merged 8 commits intoswingmx:masterfrom
Type-Delta:mobile-fix

Conversation

@Type-Delta
Copy link
Copy Markdown
Contributor

@Type-Delta Type-Delta commented Nov 20, 2024 •
edited
Loading

What this PR does

Fix various UI issues and make background playback on mobile possible.

Fixes

  • <body> sizing error: vh, vw works like lvh, lvw in Safari which makes part of <body> appears behind browser UI
  • scrolling bug cause by uneven elements size in <DynamicScroller>: for touch screen, where scrolling up cause the page to jump back to item (index) 1. fixed for Artist and NowPlaying view
  • dropdown arrow icon wrong sizing in safari
  • playback won’t automatically continue/start when loading next song (pause then unpause fix it): this issue caused by Autoplay Policy. see #229, #212
  • .profiledrop display behind .smdropdown element
  • now playing on Tablet didn't show playback slide

Known Issues (that I can't/didn't fix)

  • mediaSession in Safari will track the fading-out song and misunderstood that the playback has ended (and pause the mediaSession), manually set it as "playing" did nothing.
  • when seeking to the last 30 seconds of the song, Safari would misunderstood that the playback has stopped.

Testing

Tested on Android, IOS and Desktop devices I have, with the following browsers:

  • Google Chrome (Android)
  • Google Chrome (IOS)
  • Safari (IOS)
  • Arc Search (IOS)
  • Arc (Windows)
  • Microsoft Edge (Windows)

@cwilvx
Copy link
Copy Markdown
Member

cwilvx commented Nov 21, 2024

Hi @Type-Delta

Thank you very much for opening this PR. I really appreciate the fixes you have done.

I've pulled your branch and tested the playback on Chrome for Android and it's working fine even on a locked screen. Amazing. I wasn't using the web client on mobile that much so I hadn't experienced some of the other issues you have fixed.

Thanks again for the fixes. Merging ...

About the 30 seconds thing. Might it be an issue with the silence padding removal feature? See swingmx/swingmusic#231. Can you please try disabling that feature as mentioned on the issue and see whether it fixes it?

Please let me know whether it works.

@cwilvx cwilvx merged commit ea48380 into swingmx:master Nov 21, 2024
@Type-Delta
Copy link
Copy Markdown
Contributor Author

Type-Delta commented Nov 21, 2024

Hi, @cwilvx

After a bit more testing, turns out it has something to do with how Safari tracks Audio elements.

The issue occurred from the changed in value of audio.src which caused the playback state of said
Audio element to be "paused" and confused the mediaSession.

And No, this had nothing to do with silence padding removal feature.

From my understanding, Safari tracks audio.src changes along with user interaction,
if the changes came from or right around user interaction events it would track the
changed Audio, recognize it as "paused" (it haven't been played yet) and update mediaSession accordingly.

Since preloading function is set up to run when the playback position of the current track is more than
the last 30 seconds, the moment user seek to that portion, the preload function would immediately fired, changing audio.src
of the standbySource to a new URL, triggering Safari to do its thing.

For the fix: I've tried preventing preload function from firing immediately with setTimeout(), but to no avail. :(

I'll came back to this problem later if I got any new ideas to try, though.

@cwilvx
Copy link
Copy Markdown
Member

cwilvx commented Nov 21, 2024

@Type-Delta

Thank you very much for looking into that issue. Let me know if you get any fixes.

Regarding the silence padding removal related issue, it happened when the silence data returns too late and the player module didn't handle that problem. It happened when the track happened when the track has a silence padding of more than 30s at the end of the file or when the network is slow (mostly on remotely selfhosted instances)

I've fixed that with this commit on a feature branch I'm working on.

Thank you again. Your contributions are welcome and very much appreciated.

@Simonh2o
Copy link
Copy Markdown
Contributor

Simonh2o commented Nov 21, 2024

Hey @Type-Delta
I went ahead and overwrote your commit with this one.

As the viewport shrinks, the bottom bar area is moved to the now-playing page gradually. Hope that's alright.

@Type-Delta
Copy link
Copy Markdown
Contributor Author

Type-Delta commented Nov 22, 2024

@Simonh2o
I don't mind at all, plus it makes the UX a bit smoother for everyone.
I have nothing complaints but, thanks for making it better! 😄

@cwilvx cwilvx mentioned this pull request Dec 30, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Type-Delta @cwilvx @Simonh2o