[Feature Request] Add support for ResizeObserver to old browsers

[Richard602]

What feature should be added to Suwayomi?

Please consider providing legacy support for the ResizeObserver in old browsers. Whether by polyfill or through some other method.

Why/Project's Benefit/Existing Problem

This will continue support for old browsers that do not yet have ResizeObserver.

On a iPad stuck at version 12, the browsers (Safari, Chrome, Firefox) cannot be updated to a version that supports this feature, and instead the error Can't find variable: ResizeObserver will pop up.

I've tried rebuilding the v1.1.0 release with polyfill from @juggle/resize-observer , and this seems to have successfully added it to the version of Safari i'm running, so I believe only the ResizeObserver feature is missing to run the WebUI on old browsers.

[schroda]

I don't have a way to test this myself, but prs are always welcome
preferably via using vite plugin legacy instead of using the polyfill directly

[Richard602]

Hi. I was also hoping to use vite plugin legacy. While assuming I can just add a line into vite.config.ts to get it, I'm not sure what to put inside modernPolyfills: [], I don't how to look for the string value that I can put in there to get ResizeObserver. From the little searching I did, I can't seem to find or see vite plugin legacy being able to provide ResizeObserver.

Also, I instead end up finding this dev.to post/article which said ResizeObserver needs additionalLegacyPolyfills: [] instead.

Sorry for bringing up this hassle. I've only looked into vite the day I made the feature request, but If you can point me towards where I need to properly look to get vite plugin legacy to provide ResizeObserver, I'll be happy to try it out and see if it can work.

[schroda]

from my understanding additionalLegacyPolyfills takes npm package names (e.g. additionalLegacyPolyfills: ['@juggle/resize-observer', ...]) which need to auto polyfill, which, from what I've seen, @juggle/resize-observer does not do, so I guess vite won't work and you have to manually polyfill it

[Richard602]

A pity. Oh well. My feature request still stands, in hopes of a method other than using @juggle/resize-observer appears.

[schroda]

I've just added @juggle/resize-observer manually without vite (f7e5388)

[Richard602]

Pardon me for the late response. tried building from source to see if it works, but it seems I can't get past the login on my ipad. I guess I'll try again once the new UI is released in a major release.
Edit: With the stable server, I can see the UI loaded after logging in using a PC browser. On the ipad, after logging in, only a white page is displayed.

[schroda]

are you using the stable server?
for the latest webUI version you have to use the servers preview version, so this could be the problem

[Richard602]

I was using the stable version indeed. I'll try again at some point with the server preview version. For now, i'll edit my previous comment to describe what happens when using the stable server.

[Richard602]

Hello,
Took me some time to get the little bit of free time to try out the preview versions.
This time, I am Running Suwayomi-Server v1.1.1 revision r1599, both docker and... dev run?

With the docker server, I switched the WebUI to the preview channel in the GUI, which made it use (version= r1923, flavor= WebUI) according to the terminal.
This still has the same issue; works great on pc browser, white screen on ipad

Also tried cloning the server repo and running it with ./gradlew server:run --stacktrace, then building the webui with yarn build after cloning the repo. Same result; works great on pc browser, white screen on ipad

Happy to try again if I missed something, though again, might take time for me to try it out.

P.S. New WebUI is looking pretty good~ Feels a touch more modern compared to the current stable version
P.P.S I probably don't need to say it here, but just wanna say that I had switch com.github.inorichi.injekt:injekt-core:65b0440 to uy.kohesive.injekt:injekt-core:1.16.1 to successfully run the server after cloning the server repo.
P.P.P.S A bit of a pointless info: I tried to see if what I did with v1.1.0 can translate to the preview build (check this message's edits?) but that also didn't work.

[schroda]

from what I've found, the safari version, that comes with iOS 12, only supports ES5, which should prevent the app from being usable at all
I've found my old iPhone 5s which also runs iOS 12 and there it's not even able to execute the index.tsx file

what I don't understand is that you were apparently able to run the app with just adding a polyfill for the ResizeObserver while using an iPad which also runs iOS 12?

[Richard602]

Yep, not quite sure how to check the exact model, but in Settings it says it's an iPad Air with software version 12.5.7.

It was a bit weird as well. If I recall correctly, only using the code snippet in juggle's page didn't work, and neither did using the snippet from that dev.to article. Combining the two however (as you may or may not have seen in my comment's edit history), for some reason worked and is what I'm using at the moment. So yeah, it for some reason just works by adding those lines into App.tsx for me.

A bit unrelated but correct me if i'm wrong, the device shouldn't be running any .tsx files yeah? at least I don't see any .tsx files inside the build or webUI folder after running yarn build...

Edit: So I tried git reset to a commit before you added polyfill and tried it out on the iPad. It's a white screen instead of the webUI partly loading. The login prompt is showing up, but after that just white screen...

[schroda]

tsx gets compiled to javascript, and the version it gets compiled to is not supported by safari of iOS 12, so it shouldn't be possible to be running on these systems

to get it to work you'll have to change the config so that vite compiles to ES5