react-nativeiframesoundcloudreact-native-webview

What is the best way to embed a SoundCloud widget in react-native-webview?

So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.

Option 1:

The source prop that I pass to the WebView is a static HTML string:

<html>
        <head>
          <script src="https://w.soundcloud.com/player/api.js"></script>
        </head>
        <body>
          <iframe
            id="sound-cloud-iframe"
            src="${finalUri}"
          >
          </iframe>
        </body>
      </html>

That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:

enter image description here

The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here: enter image description here

If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.

Option 2:

The source prop that I pass to the WebView is a SoundCloud link, for example:

source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}

That makes the video player look just right:

enter image description here

But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.

So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.

Solution

  • Solved, used this static HTML:

    <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="https://w.soundcloud.com/player/api.js"></script>
        </head>
        <body>
          <iframe
            id="sound-cloud-iframe"
            src="${finalUri}"
            scrolling="no"
            style="width: 100%; height: 100%;"
          >
          </iframe>
        </body>
      </html>

    The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)