I have an interesting use case I’m exploring at the moment with media playback. Basically have a bunch of media I want users to be able to interact with. I created a few livewire components to emit events which are interpreted by my backend code to retrieve the media source URL (e.g. an audio file URL). I then use livewire to emit back to my client side code a payload with the data, which is interpreted and the audio is loaded and played for example.
This works great for the most part until my testing today on Safari on iPhone. It seems Apple have introduced a policy that all media events must be mapped directly to user interaction. In this case, my users click of a play button isn’t directly tied to playing the media, since that event chain ends once we emit, and a new one is started when listening for a different emit. Is there anyway we can provide an optional callback for emitted functions so they can still form part of the same event chain? Our callback could take some parameters, such as the public properties of our component.
User click’s play button -> fires event with wire:click -> listener setup in livewire component -> loads some data (server side) and emits second event back -> client side JS listens for second event and tries to initiate audio playback (and fails in Safari iPhone).
What do you guys think about it?