react-native-youtube-iframe icon indicating copy to clipboard operation
react-native-youtube-iframe copied to clipboard

Video is not correctly expanding on Android 11 first time

Open VSaulis opened this issue 3 years ago • 1 comments

Describe the bug Video is not correctly expanding on Android 11 first time

To Reproduce Click expand button in youtube controls

Expected behavior Video expand and fill all screen

Screenshots image

Smartphone (please complete the following information):

  • Device: Samsung S20
  • OS + version: Android 11
  • react-native-youtube-iframe 2.2.2
  • react-native-webview 10.10.2

Additional context

<Youtube
        height={(Dimensions.get("screen").width * 0.87 * 9) / 16}
        width={Dimensions.get("screen").width * 0.87}
        videoId={videoId}
      />

VSaulis avatar Mar 17 '22 11:03 VSaulis

The only way I found is to reload video on Expanding to Full Screen

Here is simplified (yet usable) code

It requires changes in source code, but, unfortunately, I do not have time to create a PR You can use patch-package or create a PR yourself

// in PlayerScripts.ts
type TLoadAndPlayVideoByIdParams = {
  videoId: string;
  startSeconds?: number;
  endSeconds?: number;
};
// add to PLAYER_SCRIPTS
loadAndPlayVideoByIdScript: (params: TLoadAndPlayVideoByIdParams) => {
    return `player.loadVideoById(${JSON.stringify(
      params,
    )}); true;`;
  },

// inside YoutubeIframe component
const injectJs = (jsToInject: string) =>
    webViewRef.current?.injectJavaScript(jsToInject);

const reload = async (startTimeInSeconds?: number) => {
    if (!videoId) {
      return;
    }

    const currentTime = await getCurrentTime();
    const _startTimeInSeconds = startTimeInSeconds ?? currentTime ?? 0;
    injectJs(
      PLAYER_SCRIPTS.loadAndPlayVideoByIdScript({
        videoId,
        startSeconds: _startTimeInSeconds,
      }),
    );
  };

Then you can combine it with onFullScreenChange and that's it!

DmitriyGalyanov avatar Apr 08 '22 11:04 DmitriyGalyanov