Support for react-native-web?

[shrirambalaji]

Hey,

Found this library to be really helpful, are there any plans of porting this to react-native-web now?

[Guichaguri]

I have worked on a port for react-native-web a long time ago, but I've never published. I might update it and push it.

[shrirambalaji]

@Guichaguri That's great! Waiting for this 😄

[shrirambalaji]

Hey, @Guichaguri Did you get a chance to publish the react-native-web port?

[Guichaguri]

Before publishing, I think we should discuss about implementation details:

• Although it shares the same API, it is another module, separated from react-native-track-player, which means it would work pretty similar to react-router-dom and react-router-native.
• I've built three media button extensions: (which can be selected through imports, e.g. import TrackPlayer from 'react-track-player/electron';)
  • DOM (default, uses window keydown event for media shortcuts)
  • Electron (global media shortcuts, thumbar media buttons on Windows)
  • NW.js (global media shortcuts)
• Metadata is done through MediaSession, which only seem to be supported by Chrome and Firefox on Android at the moment.
• The player is built on top of HTML5 Audio. It doesn't support adaptive streaming (DASH, HLS and SmoothStreaming), although it could through libraries such as shaka-player.
• I've created an implementation for Google Cast (that would only work on Chrome), but I've never tested it. There's also the support for AirPlay (that would only work on Safari).
• The code is unfinished. There is a lot of stuff that needs to be implemented, I'm also not really sure about browser compatibility.

Let me know what do you think

[shrirambalaji]

Most cross platform libraries, that support react-native-web have a necessity to add a separate module with the same API, so I believe that's what suits us as well.

It seems to me that HTML5 Audio is the way to go for web, because of obvious reasons. Although it doesn't support adaptive streaming immediately, I see it as a feature that's implemented after we have identified that rn-track-player works well enough on HTML5 Audio in Web.

I have limited understanding of the MediaSession API, but it looks like an interface for browser to know about the audio track currently playing, along with some extra information. Afaik, this also doesn't feel like a huge priority for RN-Web initially. Also with such limited browser support now, I personally feel like its best to defer this feature until there's better support or if there's an alternative way to do the same.

Cast and Airplay do seem like important features, although not the top most in the priority list imho.

If there are any unfinished parts that require contributions from the community, please do let me know and I will try to see if I can also contribute in some way, especially in adding support for web. I'm building an open-source, cross-platform podcast app for developers, and I'm keen on using react-native-track-player for all the platforms 😄

[alburdette619]

Hey, my team is heavily using this library and we're going to be adding support for RN Web to our project soon. Has this gone anywhere? Do y'all need some help?

[shamoons]

Before publishing, I think we should discuss about implementation details:

• Although it shares the same API, it is another module, separated from react-native-track-player, which means it would work pretty similar to react-router-dom and react-router-native.

• I've built three media button extensions: (which can be selected through imports, e.g. import TrackPlayer from 'react-track-player/electron';)

  • DOM (default, uses window keydown event for media shortcuts)
  • Electron (global media shortcuts, thumbar media buttons on Windows)
  • NW.js (global media shortcuts)

• Metadata is done through MediaSession, which only seem to be supported by Chrome and Firefox on Android at the moment.

• The player is built on top of HTML5 Audio. It doesn't support adaptive streaming (DASH, HLS and SmoothStreaming), although it could through libraries such as shaka-player.

• I've created an implementation for Google Cast (that would only work on Chrome), but I've never tested it. There's also the support for AirPlay (that would only work on Safari).

• The code is unfinished. There is a lot of stuff that needs to be implemented, I'm also not really sure about browser compatibility.

Let me know what do you think

Can we publish as a beta or another package for now? Then the community can aid in testing and development.

[sonnysantino]

@Guichaguri it would be nice if you can push your work so we can contribute and move forward :)

[sonnysantino]

Hola @Guichaguri sorry to be insistent on this, i've start to work on a web version of the project, but it would be nice if you can share what you've done before and the discus what the next steps are as you asked :) please let us know if you have some time for this, thank you :)

[rdhox]

@Guichaguri A little update to this post! Also interested to see a possibility of integration with RN-web, especially that the V2 of react-native-track-player is on!

[andordavoti]

Any news on this?

[jspizziri]

@andordavoti , I've created a PR for this here #1886 that you can take a look at. That fork is also published here https://www.npmjs.com/package/@5stones/react-native-track-player/v/4.0.0-web.9

The core team has had a bit of discussion about merging it into the repo at some point, however we haven't had the time to seriously discuss it yet. Generally, there is interest in doing so I think and I think it probably will happen someday.

Please test it out and give feedback!

[andordavoti]

@jspizziri Thanks for the quick reply! Will definitely take a look at it, would be awesome for simplifying migration of my native app to web:)