Graphical Bugs (Backdrop and some FontAwesome-Icons) on Safari 😕

[PangomNet]

Draft. Report will follow soon.

[PangomNet]

The player cannot be loaded correctly in Safari.

Request in the laut..fm forum:

“Unfortunately I can't get it to work on iphone and ipad or Macbook. I always get this:

On “Check” it goes to the correct website. The player does not load to the end, it always shows the spinning circle. Is this a Safari browser specific feature? It works with Google Chrome on the Mac.”

The player cannot be loaded correctly in Safari on Mac.

Request in the laut..fm forum:
“Unfortunately I can't get it to work on iphone and ipad or Macbook. I always get this:

On “Check” it goes to the correct website. The player does not load to the end, it always shows the spinning circle. Is this a Safari browser specific feature? It works with Google Chrome on the Mac.”

Observation:

The preloader circle does not disappear. Instead, only the modal for interrupted playback appears and indicates that everything is OK. No further details can be taken from the image.

Initial analysis:

The fact that the preloader (rotating circle) takes so long to disappear or does not disappear indicates that elements are not loading or are loading very slowly. It may also be a rendering error (caused by a bug in Safari or oOPLayer) that does not load the script that hides the loader. Unfortunately, as a small independent developer, it is very difficult to provide support for Apple devices without owning at least one of their products. In my case, we are even “only” talking about a website that only works with their browser, Safari, which is only available for their products. I don't own an Apple device and therefore can't search for the cause of the error in Safari. An initial test of the problem using the unfortunately very limited free version of browserstack.com revealed the following:

• https://oop.ownonline.eu/play/?lfmstream=radio-rotter-see resulted in an infinitely spinning circle, a very slow loading bar in the Safari browser.
• https://oop.ownonline.eu/play/?webstream=https://oop.ownonline.eu/samples/This%20is%20a%20freakin%20Sample.mp3 resulted in error-free loading (with the exception of unrendered FontAwesome icons in the Safari browser.
• https://oop.ownonline.eu/play/?webstream=https://stream.laut.fm/radio-rotter-see resulted in an infinitely spinning circle, a very slow loading bar in the Safari browser.

This suggests that there is a bug in the basic code of oOPlayer that causes the loading of Laut.Fm streams to cause Safari to render incorrectly. However, it is also possible that Safari has (loading) difficulties with the playout technique used by Laut.

Further analysis, which is absolutely necessary for troubleshooting, unfortunately is not possible at this time. The reason for this is Apple's closed ecosystem. The situation here is that in order to fix a bug in my free service - which currently only exists in the Apple ecosystem and apparently nowhere else - first I have to get access to this ecosystem somehow - flexible in terms of time.

However, as I don't own an Apple device, I currently have no environment available to reproduce and fix the bug. This requires access to Safari, which requires access to MacOS, which legally requires me to have an Apple Developer membership or a Mac. As I am not planning to join the Apple ecosystem, the purchase of a Mac can be ruled out. Other solutions are of course also being considered. However, the use of services such as browserstacks.com is excluded here. Since MacOS is the only system that I could currently only test there (I can test everything else myself on my own systems), I would only have to buy the subscription to use the app - which also includes many other systems - for MacOS Safari. With the cheapest subscription of 29$ with annual billing, that would be around 420$ - under these circumstances - that's way too expensive.

But in conclusion, I must ask for your patience until I can pass this barrier.

[PangomNet]

Dear Macis, please try it out: https://oop.ownonline.eu/play/0-0-1-5/?lfmstream=eins

There are minor display bugs to fix, but the version currently being developed is loaded and played by Safari 15.1 on MacOS.

I am now downgrading the ticket and renaming it, but will not close it yet, as there are still graphical bug fixes to be done.

[PangomNet]

Reply for: #6 (comment)

But there are still problems:

• As already mentioned - Backdrop background is not rendered correctly
• As already mentioned - Not all Font Awesome symbols in the buttons etc. are loaded
• The update of the info from the API is not yet automatic here. It loads the first song, but doesn't update anything else. Safari also "never finishes" loading the website. If you cancel the loading, this reactivates the script that activates the track updates, but it also interrupts the loading of the stream of Laut. Suboptimal. Keep at it.

Translated with DeepL.com (free version)

[PangomNet]

Just finished six hours of uninterrupted operation in Safari 15.1 with 0.0.1.5 Eucalyptus.

No performance problems with playback were detected. What remains are the graphical errors (missing backdrop, support and background cover as well as partial errors when loading Font Awesome symbols).

https://oop.ownonline.eu/play/0-0-1-5/?lfmstream=radio-rotter-see

Reply for: #6 (comment)

But there are still problems:

• As already mentioned - Backdrop background is not rendered correctly
• As already mentioned - Not all Font Awesome symbols in the buttons etc. are loaded
• The update of the info from the API is not yet automatic here. It loads the first song, but doesn't update anything else. Safari also "never finishes" loading the website. If you cancel the loading, this reactivates the script that activates the track updates, but it also interrupts the loading of the stream of Laut. Suboptimal. Keep at it.

Translated with DeepL.com (free version)
The last point in this post is now closed.

But Eucalyptus is a test release. There are a few other necessary bugfixes before there is a stable release following Eucalyptus..

What remains are the graphical downgrades in Saffari, but I will deal with these in the future. I'll rename this issue appropriately and leave it open.