Skip to content
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

Moving forward + better web support #302

Open
sreuter opened this issue Aug 2, 2023 · 7 comments
Open

Moving forward + better web support #302

sreuter opened this issue Aug 2, 2023 · 7 comments

Comments

@sreuter
Copy link

sreuter commented Aug 2, 2023

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: questmate@39074a8

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

@sreuter sreuter changed the title Moving forward + web support Moving forward + better web support Aug 2, 2023
@LonelyCpp
Copy link
Owner

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

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

@sreuter
Copy link
Author

sreuter commented Aug 2, 2023

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

@giona69
Copy link

giona69 commented Sep 11, 2023

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

@bhyoo99
Copy link

bhyoo99 commented Feb 15, 2024

@LonelyCpp @sreuter any update about this?

@junioroga
Copy link

@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
Copy link

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
Copy link
Owner

some updates on this : I've tested play, pause and mute events with post messages - f56441d

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!

@LonelyCpp LonelyCpp pinned this issue Jun 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants