Skip to content

Commit 1406795

Browse files
adimiz1adimiz1
committed
Fix lanscape buttons alignment issue
1 parent 37530ab commit 1406795

File tree

3 files changed

+67
-25
lines changed

3 files changed

+67
-25
lines changed

‎src/widgets/video/layer/components/TopControls.tsx‎

Lines changed: 60 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,69 @@ export const TopControls: React.FC<TopControlsProps> = ({
3232
(backButtonPosition && backButtonPosition !== ButtonPosition.SE) ||
3333
(shareButtonPosition && shareButtonPosition !== ButtonPosition.SE);
3434

35-
// If we have top-positioned buttons, render them with absolute positioning
35+
// If we have top-positioned buttons, render them within the bar
3636
if (hasTopPositionedButtons) {
3737
return (
3838
<View style={responsiveStyles.topControlsBar}>
39-
{/* Invisible spacer to maintain layout */}
40-
{onBack && backButtonPosition && backButtonPosition !== ButtonPosition.SE && (
41-
<TouchableOpacity
42-
style={[responsiveStyles.topButton, getPositionStyle(backButtonPosition)]}
43-
onPress={onBack}
44-
>
45-
<Ionicons name="close" size={ICON_SIZES.top} color="white" />
46-
</TouchableOpacity>
47-
)}
48-
{shareButtonPosition && shareButtonPosition !== ButtonPosition.SE && (
49-
<TouchableOpacity
50-
style={[responsiveStyles.topButton, getPositionStyle(shareButtonPosition)]}
51-
onPress={onShare}
52-
>
53-
<Ionicons name="share-outline" size={ICON_SIZES.top} color="white" />
54-
</TouchableOpacity>
55-
)}
39+
{/* Left side - NW positioned button */}
40+
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start' }}>
41+
{onBack && backButtonPosition === ButtonPosition.NW && (
42+
<TouchableOpacity
43+
style={responsiveStyles.topButton}
44+
onPress={onBack}
45+
>
46+
<Ionicons name="close" size={ICON_SIZES.top} color="white" />
47+
</TouchableOpacity>
48+
)}
49+
{shareButtonPosition === ButtonPosition.NW && (
50+
<TouchableOpacity
51+
style={responsiveStyles.topButton}
52+
onPress={onShare}
53+
>
54+
<Ionicons name="share-outline" size={ICON_SIZES.top} color="white" />
55+
</TouchableOpacity>
56+
)}
57+
</View>
58+
59+
{/* Center - N positioned button */}
60+
<View style={{ flexDirection: 'row' }}>
61+
{onBack && backButtonPosition === ButtonPosition.N && (
62+
<TouchableOpacity
63+
style={responsiveStyles.topButton}
64+
onPress={onBack}
65+
>
66+
<Ionicons name="close" size={ICON_SIZES.top} color="white" />
67+
</TouchableOpacity>
68+
)}
69+
{shareButtonPosition === ButtonPosition.N && (
70+
<TouchableOpacity
71+
style={responsiveStyles.topButton}
72+
onPress={onShare}
73+
>
74+
<Ionicons name="share-outline" size={ICON_SIZES.top} color="white" />
75+
</TouchableOpacity>
76+
)}
77+
</View>
78+
79+
{/* Right side - NE positioned button */}
80+
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
81+
{onBack && backButtonPosition === ButtonPosition.NE && (
82+
<TouchableOpacity
83+
style={responsiveStyles.topButton}
84+
onPress={onBack}
85+
>
86+
<Ionicons name="close" size={ICON_SIZES.top} color="white" />
87+
</TouchableOpacity>
88+
)}
89+
{shareButtonPosition === ButtonPosition.NE && (
90+
<TouchableOpacity
91+
style={responsiveStyles.topButton}
92+
onPress={onShare}
93+
>
94+
<Ionicons name="share-outline" size={ICON_SIZES.top} color="white" />
95+
</TouchableOpacity>
96+
)}
97+
</View>
5698
</View>
5799
);
58100
}

‎src/widgets/video/layer/constants.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ export const LEGACY_TOP_PADDING_IOS = 50;
3232
export const LEGACY_TOP_PADDING_ANDROID = 20;
3333

3434
// Landscape-specific padding (reduced for landscape mode)
35-
export const TOP_PADDING_IOS_LANDSCAPE = 40;
36-
export const TOP_PADDING_ANDROID_LANDSCAPE = 20;
35+
export const TOP_PADDING_IOS_LANDSCAPE = 20;
36+
export const TOP_PADDING_ANDROID_LANDSCAPE = 6;
3737

3838
// Get responsive top padding based on orientation
3939
export const getTopPadding = (isLandscape: boolean = false) => {
@@ -109,7 +109,7 @@ export const SHADOW_VALUES = {
109109
export const COLORS = {
110110
overlay: 'rgba(0, 0, 0, 0.4)',
111111
loadingBackground: 'rgba(0, 0, 0, 0.8)',
112-
topControlsBackground: 'rgba(0, 0, 0, 0.4)',
112+
topControlsBackground: 'rgba(0, 0, 0, 0.6)',
113113
bottomControlsBackground: 'rgba(0, 0, 0, 0.6)',
114114
topButtonBackground: 'rgba(0, 0, 0, 0.7)',
115115
centerButtonBackground: 'rgba(255, 255, 255, 0.95)',

‎src/widgets/video/layer/styles.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export const getResponsiveStyles = (isLandscape: boolean = false) => {
117117
alignItems: 'center',
118118
paddingHorizontal: 20,
119119
paddingTop: topPadding,
120-
paddingBottom: isLandscape ? 8 : 10,
120+
paddingBottom: (bottomPadding || 15) * 2,
121121
backgroundColor: COLORS.topControlsBackground,
122122
},
123123
topButton: {
@@ -133,17 +133,17 @@ export const getResponsiveStyles = (isLandscape: boolean = false) => {
133133
// Button positioning styles
134134
buttonPositionNE: {
135135
position: 'absolute',
136-
top: topPadding,
136+
top: topPadding + (isLandscape ? 6 : 8),
137137
right: 20,
138138
},
139139
buttonPositionNW: {
140140
position: 'absolute',
141-
top: topPadding,
141+
top: topPadding + (isLandscape ? 6 : 8),
142142
left: 20,
143143
},
144144
buttonPositionN: {
145145
position: 'absolute',
146-
top: topPadding,
146+
top: topPadding + (isLandscape ? 6 : 8),
147147
alignSelf: 'center',
148148
},
149149
buttonPositionSE: {

0 commit comments

Comments
 (0)