-
Notifications
You must be signed in to change notification settings - Fork 292
feat: introduce centralized audio playback #2880
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: introduce centralized audio playback #2880
Conversation
…h the same asset url
|
Size Change: +19.5 kB (+1.65%) Total Size: 1.2 MB
ℹ️ View Unchanged
|
…hen no player is available
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #2880 +/- ##
==========================================
- Coverage 81.55% 81.06% -0.50%
==========================================
Files 499 506 +7
Lines 10105 10523 +418
Branches 2310 2406 +96
==========================================
+ Hits 8241 8530 +289
- Misses 1744 1870 +126
- Partials 120 123 +3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…ingPreview are unmounted
d432c06 to
cf6a67e
Compare
|
🎉 This PR is included in version 13.12.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🎯 Goal
Closes REACT-597
This PR is introducing
useAudioPlayerhook to SDK components that replacesuseAudioControllerhook. All the audio playback is centralized usinguseAudioPlayer. The originaluseAudioControllerhook has been deprecated but still exported. Should be removed with the next major release.For proper cleanup component
WithAudioPlaybackhas been introduced. It removes all the subscriptions and audio elements when unmounted. It is rendered within theChannelcomponent. That means that upon navigation to another channel, the audio is stopped, event listeners removed, state subscriptions unsubscribed and audio elements are removed from the pool to allow them to be garbage collected. It is possible to play audios in the following modes:<audio/>element is shared among all the players. This is the default mode.allowConcurrentAudioPlaybackprop toChannelor in general by rendering<WithAudioPlayback allowConcurrentPlayback>{children}</<WithAudioPlayback allowConcurrentPlayback>The integrators have available the following utilities:
useAudioPlayerhookWithAudioPlaybackuseActiveAudioPlayerhook (relevant when allowConcurrentPlayback === false)Useful for central audio player widget that shows reproduction of the active audio player:
🛠 Implementation details
I had to introduce message context dependency to attachment widgets
Audio,Card,VoiceRecordingPlayerin order to be able to provide separate audio resource to each widget even though the widget request playback of the same asset URL.The component props have not been changed.
Out of scope
A
BaseAudioPlayerReact component that would be just a UI component gettingaudioPlayerprop and would serve to interact with the audio playback (would be used internally inAudioandVoiceRecordingcomponents.🎨 UI Changes
No changes
Docs
https://github.com/GetStream/docs-content/pull/750