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
navigation.setOptions({ headerShown: !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
});
}),
).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.
Updated about 2 months ago