Fix orientation issue in Calls screen (#8873)

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Claudio Costa 2025-06-10 13:56:11 -06:00 committed by GitHub
parent 9fcc6e580d
commit 9b1d8cccee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -371,20 +371,22 @@ const CallScreen = ({
const hideCCTitle = intl.formatMessage({id: 'mobile.calls_hide_cc', defaultMessage: 'Hide live captions'});
useEffect(() => {
mergeNavigationOptions('Call', {
layout: {
componentBackgroundColor: callsTheme.callsBg,
orientation: allOrientations,
},
topBar: {
visible: false,
},
});
if (Platform.OS === 'ios') {
RNUtils.unlockOrientation();
}
const setOrientation = () => {
mergeNavigationOptions('Call', {
layout: {
componentBackgroundColor: callsTheme.callsBg,
orientation: allOrientations,
},
topBar: {
visible: false,
},
});
if (Platform.OS === 'ios') {
RNUtils.unlockOrientation();
}
};
return () => {
const unsetOrientation = () => {
setScreensOrientation(isTablet);
if (Platform.OS === 'ios' && !isTablet) {
// We need both the navigation & the module
@ -392,6 +394,30 @@ const CallScreen = ({
}
freezeOtherScreens(false);
};
// Handle component disappearing (e.g. device is locked)
const didDismissListener = Navigation.events().registerComponentDidDisappearListener(async ({componentId: screen}) => {
if (componentId === screen) {
unsetOrientation();
}
});
// Handle component re-appearing (e.g. device is unlocked)
const didAppearListener = Navigation.events().registerComponentWillAppearListener(async ({componentId: screen}) => {
if (componentId === screen) {
setOrientation();
}
});
// Set orientation on component mount.
setOrientation();
return () => {
didDismissListener.remove();
didAppearListener.remove();
unsetOrientation();
};
}, []);
const leaveCallHandler = useCallback(() => {
@ -566,16 +592,6 @@ const CallScreen = ({
useAndroidHardwareBackHandler(componentId, collapse);
useEffect(() => {
const didDismissListener = Navigation.events().registerComponentDidDisappearListener(async ({componentId: screen}) => {
if (componentId === screen) {
setScreensOrientation(isTablet);
}
});
return () => didDismissListener.remove();
}, [isTablet]);
useEffect(() => {
if (!layout || !layout.height || !layout.width) {
return;