Moving forward + better web support

[sreuter]

Describe the bug The current state of YouTube embedding across ReactNative iOS, Android & Web is pretty sad. Either libraries have bad quality, are incomplete, or are simply not maintained anymore. Of all the ones we checked out, this one is the most promising. Unfortunately, it also doesn't seem to get a lot of love these days anymore tho. And while web support is generally there, non of the external controls or events work. Let's change that!

To Reproduce Steps to reproduce the behavior:

Do some research on all available YouTube embedding libraries + their activity (commits/open issues & replies) .. It's not great.

Expected behavior

As a first proposal, we'd like to suggest removing the dependency on injectJavascript. This, in return, will make this library work for both, native and web.

To give you a first idea, here's a WIP commit: https://github.com/questmate/react-native-youtube-iframe/commit/39074a8029e3e6e12797a22969ac99ce46e4746c

This, combined with the following part changed/added to the iframe.html made things work fine in our limited testing so far.

function sendMessageToRN(msg) {
  (window.ReactNativeWebView || window.parent).postMessage(
    JSON.stringify(msg),
    "http://localhost:19006"
  );
}
window.addEventListener("message", (message) => {
  console.log("Received Message in iFrame", message);
  const { eventType, data } = JSON.parse(message.data);
  console.log("Received Message in iFrame parsed:", eventType, data);
  switch (eventType) {
    case "getVideoUrl":
      sendMessageToRN({
        eventType: "getVideoUrl",
        data: player.getVideoUrl(),
      });
      break;
  }
});

@LonelyCpp Any thoughts on this? Maybe there was a good reason for not simply relying on postMessage & onMessage and instead working with injectJavascript? Also, do you have any interest in work resuming on the library, or would you instead recommend forking it or starting from scratch?

Screenshots N/A

Smartphone (please complete the following information): N/A

Additional context N/A

[LonelyCpp]

Heya @sreuter, I'd love to help :)

post messages as an alternate to injectJs sounds fine on initial impressions.

[sreuter]

Awesome, we'll push a bit further on this then and hopefully have a first PR up and ready soon :)

[giona69]

@sreuter @LonelyCpp how is the situation on this? I'd like to contribute, for example adding progress event

[bhyoo99]

@LonelyCpp @sreuter any update about this?

[junioroga]

@sreuter @LonelyCpp how can we help you on this challenge? im need this feature too. I have an app working in all platforms, but in web this lib not work.

[kirill-konshin]

Consider using react-youtube for web, it seems it provides similar functionality, but works on Web with all bells and whistles. Even the interface is very similar.

[LonelyCpp]

some updates on this : I've tested play, pause and mute events with post messages - https://github.com/LonelyCpp/react-native-youtube-iframe/commit/f56441dd71b92e165666c323c3fc704f284eb4d7

works quite well!

I'll start moving other things to post messages as well & hopefully we'll have full support on rn-web too. Stay tuned!