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, // show/hide top bar
autoHideHomeIndicator: isFullscreen, // show/hide home indicator on iOS
});
// 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}
// Listen to fullscreen specific events
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',
},
});
The above code snippet will:
- expand the
PlayerView
to the full screen or transition back to normal layout - enter immersive mode on Android when entering full screen and leave again when leaving
- hide the status bar on iOS when entering full screen and show it again when leaving
- enable auto-hiding of the home indicator on iOS devices without a home button when entering full screen
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.
Updated 7 months ago