react-native-jw-media-player icon indicating copy to clipboard operation
react-native-jw-media-player copied to clipboard

[ios] video player keeps playing video in background even after component unmounts

Open HarishJangra opened this issue 2 years ago • 3 comments

When I fullscreen the jwplayer and reset to normal and go back unmounting the component doesn't stop the video and does not unmounts the player. The video keeps playing in the background.

Does anyone face the same issue?

the scenario:

Screen A renders a player Go Into fullscreen Go back to normal screen

Navigate to Screen B and player in Screen A still plays?

Another scenerio: Screen A renders a player Go into fullscreen Go back to normal view rotate the device to landscape player visible in fullscreen go back to previous screen unmounting the screen A player is playing the video in background rotate to landscape the video is visible in fullscreen

Tried with createNativeStackNavigator and createStackNavigator both.

HarishJangra avatar Apr 19 '22 06:04 HarishJangra

@HarishJangra

Can you try latest version 0.2.14, the issue was that I had a strong reference to the playerViewController parent and it caused the controller to not dealloc.

Let me know, Thanks.

chaimPaneth avatar Apr 24 '22 12:04 chaimPaneth

@chaimPaneth I tried again and the issue is still not fixed.

steps to reproduce

  • make 2 screens
  • navigate to the player screen
  • come back to the previous screen
  • rotate the device
  • the player is still visible.

HarishJangra avatar May 24 '22 06:05 HarishJangra

@HarishJangra I was also facing this issue.

For now, I fixed it with useState.

This is all you need to add to your screen which has JWPlayer:

// import statements
import React, { useMemo, useState } from "react";
import { useFocusEffect } from "@react-navigation/native";
import { View } from "react-native";

// put this code inside your function component
const [isScreenVisible, setScreenVisible] = useState(true);

useFocusEffect(
  useCallback(() => {
    setScreenVisible(true);
    return () => setScreenVisible(false);
  }, [])
);

const VideoPlayer = useMemo(() => {
  // once the value of "isScreenVisible" is false, we set VideoPlayer to be null, so
  // it doesn't show up on the screen
  if (liveTvPlaylist === undefined || !isScreenVisible) return null;

  return (
    <JWPlayer
      // set all the props
    />
  );
}, [isScreenVisible]);

// return your JSX
return <View>{VideoPlayer}</View>;

Someone needs to create a sample app for this bug so the maintainer/contributors can fix the issue.

SufianBabri avatar Jan 08 '23 17:01 SufianBabri