Skip to content

Commit 715c42e

Browse files
adimiz1adimiz1
committed
Fix constants file
1 parent cfa445f commit 715c42e

File tree

6 files changed

+194
-163
lines changed

6 files changed

+194
-163
lines changed

‎src/widgets/video/layer/CLDVideoLayer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { formatTime, handleDefaultShare, isHLSVideo, parseHLSManifest, parseHLSQ
88
import { SubtitleCue, fetchSubtitleFile, findActiveSubtitle } from './utils/subtitleUtils';
99
import { styles, getResponsiveStyles } from './styles';
1010
import { TopControls, CenterControls, BottomControls, SubtitleDisplay, AbsoluteButtons, TitleSubtitle, BottomButtonBar } from './components';
11-
import { ICON_SIZES, calculateButtonPosition, getTopPadding } from './constants';
11+
import { ICON_SIZES } from './constants';
12+
import { calculateButtonPosition, getTopPadding } from './utils';
1213
import { parseHLSSubtitlesIfNeeded, parseHLSQualityLevelsIfNeeded } from './helpers/hlsHelpers';
1314

1415
// Import the organized logic functions

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React from 'react';
22
import { TouchableOpacity } from 'react-native';
33
import { Ionicons } from '@expo/vector-icons';
44
import { ButtonPosition, ButtonLayoutDirection } from '../types';
5-
import { ICON_SIZES, calculateButtonPosition } from '../constants';
5+
import { ICON_SIZES } from '../constants';
6+
import { calculateButtonPosition } from '../utils';
67
import { getResponsiveStyles } from '../styles';
78
import { CustomButton } from './CustomButton';
89

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { View, Text } from 'react-native';
33
import { ButtonPosition } from '../types';
4-
import { getTopPadding } from '../constants';
4+
import { getTopPadding } from '../utils';
55

66
interface TitleSubtitleProps {
77
isControlsVisible: boolean;

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

Lines changed: 2 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
1-
import { Platform, Dimensions } from 'react-native';
2-
import { ButtonLayoutDirection } from './types';
1+
import { Platform } from 'react-native';
32

4-
// Get device dimensions for responsive calculations
5-
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
6-
7-
// Helper function to determine if device is in landscape
8-
export const isLandscapeOrientation = () => {
9-
const { width, height } = Dimensions.get('window');
10-
return width > height;
11-
};
123

134
// Animation and timing constants
145
export const CONTROLS_AUTO_HIDE_DELAY = 3000; // 3 seconds
@@ -20,7 +11,7 @@ export const SEEK_BUFFER_MS = 100; // 100ms buffer from end
2011

2112
// Responsive UI dimensions - now orientation-aware
2213
export const TOP_BUTTON_SIZE = Platform.select({ ios: 44, android: 48 });
23-
export const CENTER_PLAY_BUTTON_SIZE = Math.min(SCREEN_WIDTH * 0.15, 72); // Responsive center button
14+
export const CENTER_PLAY_BUTTON_SIZE = 72; // Center button size
2415
export const BOTTOM_BUTTON_SIZE = Platform.select({ ios: 40, android: 44 });
2516
export const SEEKBAR_HEIGHT = 20;
2617
export const SEEKBAR_TRACK_HEIGHT = 3;
@@ -36,13 +27,6 @@ export const LEGACY_TOP_PADDING_ANDROID = 20;
3627
export const TOP_PADDING_IOS_LANDSCAPE = 20;
3728
export const TOP_PADDING_ANDROID_LANDSCAPE = 6;
3829

39-
// Get responsive top padding based on orientation
40-
export const getTopPadding = (isLandscape: boolean = false) => {
41-
if (Platform.OS === 'ios') {
42-
return isLandscape ? TOP_PADDING_IOS_LANDSCAPE : TOP_PADDING_IOS;
43-
}
44-
return isLandscape ? TOP_PADDING_ANDROID_LANDSCAPE : TOP_PADDING_ANDROID;
45-
};
4630

4731
// Bottom controls alignment constants (responsive and orientation-aware)
4832
export const BOTTOM_CONTROLS_PADDING = Platform.select({ ios: 15, android: 12 });
@@ -55,150 +39,11 @@ export const SE_BUTTON_RIGHT_OFFSET = 28; // Align with volume button
5539
export const SE_BUTTON_BOTTOM_OFFSET = Platform.select({ ios: 32, android: 28 }); // Platform-specific bottom offset
5640
export const SE_BUTTON_BOTTOM_OFFSET_LANDSCAPE = Platform.select({ ios: 20, android: 18 });
5741

58-
// Get responsive bottom controls padding
59-
export const getBottomControlsPadding = (isLandscape: boolean = false) => {
60-
return isLandscape ? BOTTOM_CONTROLS_PADDING_LANDSCAPE : BOTTOM_CONTROLS_PADDING;
61-
};
62-
63-
// Get responsive seekbar alignment offset
64-
export const getSeekbarAlignmentOffset = (isLandscape: boolean = false) => {
65-
return isLandscape ? SEEKBAR_ALIGNMENT_OFFSET_LANDSCAPE : SEEKBAR_ALIGNMENT_OFFSET;
66-
};
67-
68-
// Get responsive SE button bottom offset
69-
export const getSEButtonBottomOffset = (isLandscape: boolean = false) => {
70-
return isLandscape ? SE_BUTTON_BOTTOM_OFFSET_LANDSCAPE : SE_BUTTON_BOTTOM_OFFSET;
71-
};
7242

7343
// Button spacing constants for multiple buttons in the same position
7444
export const BUTTON_SPACING = Platform.select({ ios: 8, android: 6 }); // Space between buttons
7545
export const BUTTON_MARGIN = Platform.select({ ios: 4, android: 3 }); // Margin from edge
7646

77-
// Calculate button positions with automatic spacing and layout direction support
78-
export const calculateButtonPosition = (
79-
position: string,
80-
index: number,
81-
totalButtons: number,
82-
isLandscape: boolean = false,
83-
layoutDirection: ButtonLayoutDirection = ButtonLayoutDirection.VERTICAL
84-
) => {
85-
const buttonSize = TOP_BUTTON_SIZE ?? 44;
86-
const spacing = BUTTON_SPACING ?? 8;
87-
const margin = BUTTON_MARGIN ?? 4;
88-
89-
// Helper function to calculate horizontal layout
90-
const getHorizontalLayout = () => {
91-
const horizontalCenterOffset = ((totalButtons - 1) * (buttonSize + spacing)) / 2;
92-
return {
93-
marginLeft: (index * (buttonSize + spacing)) - horizontalCenterOffset,
94-
};
95-
};
96-
97-
// Helper function to calculate vertical layout
98-
const getVerticalLayout = (baseOffset: number = 0) => {
99-
const verticalCenterOffset = ((totalButtons - 1) * (buttonSize + spacing)) / 2;
100-
return {
101-
marginTop: baseOffset + (index * (buttonSize + spacing)) - verticalCenterOffset,
102-
};
103-
};
104-
105-
switch (position) {
106-
case 'SE':
107-
// For SE position, account for volume button
108-
const seBaseOffset = (getSEButtonBottomOffset(isLandscape) ?? 32) + (buttonSize + spacing);
109-
if (layoutDirection === 'horizontal') {
110-
return {
111-
bottom: seBaseOffset,
112-
...getHorizontalLayout(),
113-
};
114-
}
115-
// Default to vertical stacking upward
116-
return {
117-
bottom: seBaseOffset + (index * (buttonSize + spacing)),
118-
};
119-
120-
case 'SW':
121-
// For SW position
122-
const swBaseOffset = (getSEButtonBottomOffset(isLandscape) ?? 32);
123-
if (layoutDirection === 'horizontal') {
124-
return {
125-
bottom: swBaseOffset,
126-
...getHorizontalLayout(),
127-
};
128-
}
129-
// Default to vertical stacking upward
130-
return {
131-
bottom: swBaseOffset + (index * (buttonSize + spacing)),
132-
};
133-
134-
case 'S':
135-
// For South position
136-
const sBaseOffset = (getSEButtonBottomOffset(isLandscape) ?? 32);
137-
if (layoutDirection === 'vertical') {
138-
return {
139-
bottom: sBaseOffset + (index * (buttonSize + spacing)),
140-
alignSelf: 'center',
141-
};
142-
}
143-
// Default to horizontal stacking
144-
return {
145-
bottom: sBaseOffset,
146-
alignSelf: 'center',
147-
...getHorizontalLayout(),
148-
};
149-
150-
case 'NE':
151-
case 'NW':
152-
// For top positions
153-
const topBaseOffset = (getTopPadding(isLandscape) ?? 60) + (isLandscape ? 6 : 8);
154-
if (layoutDirection === 'horizontal') {
155-
return {
156-
top: topBaseOffset,
157-
...getHorizontalLayout(),
158-
};
159-
}
160-
// Default to vertical stacking downward
161-
return {
162-
top: topBaseOffset + (index * (buttonSize + spacing)),
163-
};
164-
165-
case 'N':
166-
// For North position
167-
const nBaseOffset = (getTopPadding(isLandscape) ?? 60) + (isLandscape ? 6 : 8);
168-
if (layoutDirection === 'vertical') {
169-
return {
170-
top: nBaseOffset + (index * (buttonSize + spacing)),
171-
alignSelf: 'center',
172-
};
173-
}
174-
// Default to horizontal stacking
175-
return {
176-
top: nBaseOffset,
177-
alignSelf: 'center',
178-
...getHorizontalLayout(),
179-
};
180-
181-
case 'E':
182-
case 'W':
183-
// For middle positions
184-
if (layoutDirection === 'horizontal') {
185-
return {
186-
top: '50%',
187-
marginTop: -22,
188-
...getHorizontalLayout(),
189-
};
190-
}
191-
// Default to vertical stacking around center
192-
const centerOffset = ((totalButtons - 1) * (buttonSize + spacing)) / 2;
193-
return {
194-
top: '50%',
195-
marginTop: -22 + (index * (buttonSize + spacing)) - centerOffset,
196-
};
197-
198-
default:
199-
return {};
200-
}
201-
};
20247

20348
// Visual styling constants
20449
export const BORDER_RADIUS = {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,13 @@ import {
1717
SEEKBAR_ALIGNMENT_OFFSET,
1818
SE_BUTTON_RIGHT_OFFSET,
1919
SE_BUTTON_BOTTOM_OFFSET,
20+
} from './constants';
21+
import {
2022
getTopPadding,
2123
getBottomControlsPadding,
2224
getSeekbarAlignmentOffset,
2325
getSEButtonBottomOffset,
24-
} from './constants';
26+
} from './utils';
2527

2628
// Base styles (orientation-independent)
2729
export const styles = StyleSheet.create({

0 commit comments

Comments
 (0)