VideoView does not render video when scaleType="fit"

[dannyBies]

In my app I'm listening to a conference and showing the videos and screenshares of participants.

On iOS everything works as expected, on Android (physical device and emulators) I seem to be running into a scenario where the video element is not rendered.

This is my video element:

<VideoView
  scaleType="fit"
  key={`video-${tile.dolbyParticipant.id}`}
  style={{
    height: tileSize.videoHeight,
    width: tileSize.videoWidth,
    borderRadius: isSingleTile ? 0 : 6,
    overflow: "hidden",
  }}
  ref={(element) => {
    async function attachElement(particpant: Participant,stream: MediaStream) {
      try {
        await element?.attach(particpant, stream);
      } catch (error) {
        logger.error(error);
      }
    }
    void attachElement(tile.dolbyParticipant, tile.dolbyStream);
  }}
/>

When I set scaleType={"fit"} the video element is not rendered when I open this screen.

If I inspect the rendered output on Android I can see that the <VideoView> correctly fill the black container

However the FrameLayout does not seem to have the correct width set:

If I set scaleType={"fit"} it correctly renders the output

Inspecting the rendered output again, it shows that the FrameLayout has the correct width set:

To make it even more interesting changing the device orientation seems to trigger the <VideoView> to correctly render even when scaleType is set to fit

https://github.com/DolbyIO/comms-sdk-react-native/assets/3967506/e06c6dc8-a2fc-4b60-a630-773d5bec593d

Unfortunately I can't really use scaleType={'fill'} as this won't work great when displaying a screenshare that's very long, but not wide as it would cut off part of the video.

Screenshare as I want it with fit:

Screenshare with fill (showing 20% of the actual screen:

Extra info: If the Video element has a height that's greater than it's width the issue doesn't happen even when I set the scaleType to fit.

Any idea on how to fix this or if there are any workarounds for this? Screensharing is a very common usecase in my app and this is somewhat blocking this functionality on Android

[kbetl-dlb]

We could not fully reproduce the issue, but we may well have found the cause. @dannyBies before releasing this as a beta, perhaps you could try the attached beta preview and let us know if the issue has been fixed. dolbyio-comms-sdk-react-native-3.10.0-beta.3-preview.1.tgz

[graduad]

@dannyBies , thank you very much for reporting this issue. We really appreciate your feedback.

The tgz file from the previous comment can be used by replacing the comms-idk-react-native dependency from package.json with following: "@dolbyio/comms-sdk-react-native": "file:<path_to_where_the_tgz_is_stored>/dolbyio-comms-sdk-react-native-3.10.0-beta.3-preview.1.tgz" .

@kbetl-dlb , thank you very much for posting the beta preview.

[dannyBies]

Hey @graduad thanks for looking into this issue and fixing it so quickly, much appreciated!

Unfortunately due to unrelated circumstances we won't be continuing development on our app and I'm not able to test this beta version.

I appreciate all the time you and the team has spent answering and fixing the issues I've reported!

[graduad]

For escapes used during internal testing this has proven to work. If more issues are observed please reopen this ticket.