Skip to content

Commit f9223e0

Browse files
SrirangKSrirangK
committed
fix: add mxoverlay to video player
1 parent 9542e9f commit f9223e0

8 files changed

Lines changed: 193 additions & 87 deletions

File tree

‎packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.notch.spec.tsx.snap‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ exports[`Intro Screen renders 1`] = `
7373
"backgroundColor": "transparent",
7474
"bottom": 0,
7575
"left": 0,
76-
"opacity": 1,
7776
"position": "absolute",
7877
"right": 0,
7978
"top": 0,
@@ -88,12 +87,6 @@ exports[`Intro Screen renders 1`] = `
8887
style={
8988
{
9089
"flex": 1,
91-
"opacity": 1,
92-
"transform": [
93-
{
94-
"translateY": 0,
95-
},
96-
],
9790
}
9891
}
9992
>
@@ -385,7 +378,6 @@ exports[`Intro Screen renders with 1 bottom button 1`] = `
385378
"backgroundColor": "transparent",
386379
"bottom": 0,
387380
"left": 0,
388-
"opacity": 1,
389381
"position": "absolute",
390382
"right": 0,
391383
"top": 0,
@@ -400,12 +392,6 @@ exports[`Intro Screen renders with 1 bottom button 1`] = `
400392
style={
401393
{
402394
"flex": 1,
403-
"opacity": 1,
404-
"transform": [
405-
{
406-
"translateY": 0,
407-
},
408-
],
409395
}
410396
}
411397
>
@@ -711,7 +697,6 @@ exports[`Intro Screen renders with 2 bottom button 1`] = `
711697
"backgroundColor": "transparent",
712698
"bottom": 0,
713699
"left": 0,
714-
"opacity": 1,
715700
"position": "absolute",
716701
"right": 0,
717702
"top": 0,
@@ -726,12 +711,6 @@ exports[`Intro Screen renders with 2 bottom button 1`] = `
726711
style={
727712
{
728713
"flex": 1,
729-
"opacity": 1,
730-
"transform": [
731-
{
732-
"translateY": 0,
733-
},
734-
],
735714
}
736715
}
737716
>
@@ -1037,7 +1016,6 @@ exports[`Intro Screen renders with active slide attribute 1`] = `
10371016
"backgroundColor": "transparent",
10381017
"bottom": 0,
10391018
"left": 0,
1040-
"opacity": 1,
10411019
"position": "absolute",
10421020
"right": 0,
10431021
"top": 0,
@@ -1052,12 +1030,6 @@ exports[`Intro Screen renders with active slide attribute 1`] = `
10521030
style={
10531031
{
10541032
"flex": 1,
1055-
"opacity": 1,
1056-
"transform": [
1057-
{
1058-
"translateY": 0,
1059-
},
1060-
],
10611033
}
10621034
}
10631035
>
@@ -1349,7 +1321,6 @@ exports[`Intro Screen renders with async storage identifier 1`] = `
13491321
"backgroundColor": "transparent",
13501322
"bottom": 0,
13511323
"left": 0,
1352-
"opacity": 1,
13531324
"position": "absolute",
13541325
"right": 0,
13551326
"top": 0,
@@ -1364,12 +1335,6 @@ exports[`Intro Screen renders with async storage identifier 1`] = `
13641335
style={
13651336
{
13661337
"flex": 1,
1367-
"opacity": 1,
1368-
"transform": [
1369-
{
1370-
"translateY": 0,
1371-
},
1372-
],
13731338
}
13741339
}
13751340
>

‎packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.spec.tsx.snap‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ exports[`Intro Screen renders 1`] = `
7373
"backgroundColor": "transparent",
7474
"bottom": 0,
7575
"left": 0,
76-
"opacity": 1,
7776
"position": "absolute",
7877
"right": 0,
7978
"top": 0,
@@ -88,12 +87,6 @@ exports[`Intro Screen renders 1`] = `
8887
style={
8988
{
9089
"flex": 1,
91-
"opacity": 1,
92-
"transform": [
93-
{
94-
"translateY": 0,
95-
},
96-
],
9790
}
9891
}
9992
>
@@ -385,7 +378,6 @@ exports[`Intro Screen renders with 1 bottom button 1`] = `
385378
"backgroundColor": "transparent",
386379
"bottom": 0,
387380
"left": 0,
388-
"opacity": 1,
389381
"position": "absolute",
390382
"right": 0,
391383
"top": 0,
@@ -400,12 +392,6 @@ exports[`Intro Screen renders with 1 bottom button 1`] = `
400392
style={
401393
{
402394
"flex": 1,
403-
"opacity": 1,
404-
"transform": [
405-
{
406-
"translateY": 0,
407-
},
408-
],
409395
}
410396
}
411397
>
@@ -711,7 +697,6 @@ exports[`Intro Screen renders with 2 bottom button 1`] = `
711697
"backgroundColor": "transparent",
712698
"bottom": 0,
713699
"left": 0,
714-
"opacity": 1,
715700
"position": "absolute",
716701
"right": 0,
717702
"top": 0,
@@ -726,12 +711,6 @@ exports[`Intro Screen renders with 2 bottom button 1`] = `
726711
style={
727712
{
728713
"flex": 1,
729-
"opacity": 1,
730-
"transform": [
731-
{
732-
"translateY": 0,
733-
},
734-
],
735714
}
736715
}
737716
>
@@ -1037,7 +1016,6 @@ exports[`Intro Screen renders with active slide attribute 1`] = `
10371016
"backgroundColor": "transparent",
10381017
"bottom": 0,
10391018
"left": 0,
1040-
"opacity": 1,
10411019
"position": "absolute",
10421020
"right": 0,
10431021
"top": 0,
@@ -1052,12 +1030,6 @@ exports[`Intro Screen renders with active slide attribute 1`] = `
10521030
style={
10531031
{
10541032
"flex": 1,
1055-
"opacity": 1,
1056-
"transform": [
1057-
{
1058-
"translateY": 0,
1059-
},
1060-
],
10611033
}
10621034
}
10631035
>
@@ -1349,7 +1321,6 @@ exports[`Intro Screen renders with async storage identifier 1`] = `
13491321
"backgroundColor": "transparent",
13501322
"bottom": 0,
13511323
"left": 0,
1352-
"opacity": 1,
13531324
"position": "absolute",
13541325
"right": 0,
13551326
"top": 0,
@@ -1364,12 +1335,6 @@ exports[`Intro Screen renders with async storage identifier 1`] = `
13641335
style={
13651336
{
13661337
"flex": 1,
1367-
"opacity": 1,
1368-
"transform": [
1369-
{
1370-
"translateY": 0,
1371-
},
1372-
],
13731338
}
13741339
}
13751340
>

‎packages/pluggableWidgets/video-player-native/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1010

1111
- We added mendix-native as a dependency to provide platform utilities.
1212

13+
### Changed
14+
15+
- The Android fullscreen video is now presented through the shared MxOverlay component. Screen readers now treat it as a modal, and focus returns to the fullscreen button when you leave fullscreen.
16+
1317
## [6.4.1] - 2026-6-10
1418

1519
### Changed

‎packages/pluggableWidgets/video-player-native/src/VideoPlayer.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { flattenStyles } from "@mendix/piw-native-utils-internal";
1+
import { flattenStyles, MxOverlay } from "@mendix/piw-native-utils-internal";
22
import { AndroidNavigationBar } from "mendix-native";
33
import { ReactElement, useEffect, useRef, useState, Fragment, useCallback, useMemo } from "react";
44
import {
@@ -9,7 +9,6 @@ import {
99
TouchableOpacity,
1010
View,
1111
Appearance,
12-
Modal,
1312
Pressable
1413
} from "react-native";
1514
import Video, { OnProgressData, ReactVideoProps, VideoRef } from "react-native-video";
@@ -51,6 +50,7 @@ export function VideoPlayer(props: VideoPlayerProps<VideoStyle>): ReactElement {
5150
const timeoutRef = useRef<NodeJS.Timeout>(null);
5251
const playerRef = useRef<VideoRef>(null);
5352
const fullScreenPlayerRef = useRef<VideoRef>(null);
53+
const fullScreenButtonRef = useRef<View>(null);
5454
const [status, setStatus] = useState(StatusEnum.NOT_READY);
5555
const [fullScreen, setFullScreen] = useState(false);
5656
const [showControls, setShowControls] = useState(false);
@@ -117,11 +117,16 @@ export function VideoPlayer(props: VideoPlayerProps<VideoStyle>): ReactElement {
117117
return (
118118
<Fragment>
119119
{isAndroid && (
120-
<Modal
120+
<MxOverlay
121121
visible={fullScreen}
122122
onRequestClose={() => fullScreenHandler(false)}
123+
placement="fullscreen"
124+
transparent={false}
125+
respectSafeArea={false}
126+
animationDuration={0}
127+
dismissOnBackdropPress={false}
128+
returnFocusRef={fullScreenButtonRef}
123129
testID="fullscreen-modal"
124-
statusBarTranslucent
125130
>
126131
<View style={styles.fullScreenVideoPlayer}>
127132
<Pressable onPress={onVideoPressHandler} testID="fullscreen-overlay">
@@ -156,7 +161,7 @@ export function VideoPlayer(props: VideoPlayerProps<VideoStyle>): ReactElement {
156161
)}
157162
{errorText}
158163
</View>
159-
</Modal>
164+
</MxOverlay>
160165
)}
161166
<View style={styles.container}>
162167
{status === StatusEnum.LOADING && <ActivityIndicator color={styles.indicator.color} size="large" />}
@@ -179,6 +184,7 @@ export function VideoPlayer(props: VideoPlayerProps<VideoStyle>): ReactElement {
179184
)}
180185
{isAndroid && showControls && (
181186
<TouchableOpacity
187+
ref={fullScreenButtonRef}
182188
onPress={() => fullScreenHandler(true)}
183189
style={styles.controlBtnContainerStyle}
184190
testID="btn-fullscreen"

0 commit comments

Comments
 (0)