Enabling fullscreen playback

In order to enable the player to support fullscreen and show the fullscreen button when using the Bitmovin Player Web UI, a FullscreenHandler needs to be implemented. Its responsibility is to update the UI when transitioning between fullscreen and non-fullscreen states. The player view itself does not update its presentation as the meaning of fullscreen is determined by the application integrating our library.

Here are the basics of enabling fullscreen support:

// Define a handler to take care of fullscreen transitions
class SampleFullscreenHandler implements FullscreenHandler {
  isFullscreenActive: boolean = true;
  onFullscreen: (fullscreenMode: boolean) => void;

  constructor(
    isFullscreenActive: boolean,
    onFullscreen: (fullscreenMode: boolean) => void
  ) {
    this.isFullscreenActive = isFullscreenActive;
    this.onFullscreen = onFullscreen;
  }

  enterFullscreen(): void {
    // Update UI state for fullscreen mode
    this.isFullscreenActive = true;
    this.onFullscreen(true);
    if (Platform.OS === 'android') {
      // Hides navigation and status bar on Android using 'react-native-system-navigation-bar' package
      SystemNavigationBar.stickyImmersive(true);
    } else {
      // Hides status bar on iOS
      StatusBar.setHidden(true);
    }
    // If landscape mode during fullscreen is preferred
    // this should be handled here as well 
    // by integrating integrating 'react-native-orientation-locker' package
    // and uncommenting the next line:
    // Orientation.lockToLandscape();
    console.log('enter fullscreen');
  }

  exitFullscreen(): void {
    // Update UI state for non-fullscreen mode
    this.isFullscreenActive = false;
    this.onFullscreen(false);
    if (Platform.OS === 'android') {
      // shows navigation and status bar on Android using 'react-native-system-navigation-bar' package
      SystemNavigationBar.stickyImmersive(false);
    } else {
      // shows status bar on iOS
      StatusBar.setHidden(false);
    }
    // If landscape mode during fullscreen is preferred
    // this should be handled here as well
    // by integrating integrating 'react-native-orientation-locker' package
    // and uncommenting the next line:
    // Orientation.unlockAllOrientations();
    console.log('exit fullscreen');
  }
}

export default function BasicFullscreenHandling({navigation}) {
  // Set up player and other components...

  // State to reflect current fullscreen state.
  const [fullscreenMode, setFullscreenMode] = useState(false);
  // Create SampleFullscreenHandler instance and enable it to update state
  const fullscreenHandler = useRef(
    new SampleFullscreenHandler(fullscreenMode, (isFullscreen: boolean) => {
      setFullscreenMode(isFullscreen);

      // In case of native stack navigation show/hide top bar with showing/hiding home indicator on iOS
      navigation.setOptions({
        headerShown: !isFullscreen,
        autoHideHomeIndicator: isFullscreen
      });

      // In case of bottom tabs navigation show/hide top and bottom bars
      navigation.setOptions({
        headerShown: !isFullscreen, // show/hide top bar
        tabBarStyle: {display: isFullscreen ? 'none' : 'flex'}, // show/hide bottom bar
        autoHideHomeIndicator: isFullscreen, // show/hide home indicator on iOS
      });
    }),
  ).current;

  return (
    <View>
      <PlayerView
        player={player}
        // Apply style based on `fullscreenMode` state value
        style={fullscreenMode ? styles.playerFullscreen : styles.player}
        fullscreenHandler={fullscreenHandler}
        onFullscreenEnter={onFullscreenEnter}
        onFullscreenExit={onFullscreenExit}
        onFullscreenEnabled={onFullscreenEnabled}
        onFullscreenDisabled={onFullscreenDisabled}
      />
    </View>
  );
}

// Define your styles
const styles = StyleSheet.create({
  player: {
    flex: 1,
    backgroundColor: 'black',
  },
  playerFullscreen: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'black',
  },
});

See BasicFullscreenHandling.tsx for a full example implementation.

Supported fullscreen-related events

The supported fullscreen events on PlayerView are:

  • onFullscreenEnter
  • onFullscreenExit
  • onFullscreenEnabled
  • onFullscreenDisabled

Refer to events.ts for more details.