Added controlsStyle props

README.md

@@ -43,6 +43,7 @@ For default prop values, please visit [/lib/props.tsx](https://github.com/ihmpav
 | **defaultControlsVisible** | `boolean` | Show controls on darker overlay when video starts playing. Default is `false` |
 | **timeVisible** | `boolean` | Show current time and final length in the bottom. Default is `true` |
 | **textStyle** | `TextStyle` | Object containing `<Text />` styling |
+| **controlsStyle** | `FlexStyle` | Basic styling of `Controls` |
 | **slider** | `{ visible?: boolean } & SliderProps` | Object containing any of [@react-native-community/slider](https://github.com/callstack/react-native-slider) props. Your styling may break default layout. Also hide slider by providing `visible: false` prop. You are unable to overwrite `ref`, `value`, `onSlidingStart` and `onSlidingComplete` |
 | **activityIndicator** | `ActivityIndicatorProps` | Any values from [ActivityIndicator](https://reactnative.dev/docs/activityindicator) |
 | **animation** | `{ fadeInDuration?: number, fadeOutDuration?: number }` | Duration of animations in milliseconds |

dist/index.d.ts

@@ -9,6 +9,7 @@ declare const VideoPlayer: {
         defaultControlsVisible: boolean;
         timeVisible: boolean;
         textStyle: import("react-native").TextStyle;
+        controlsStyle: import("react-native").FlexStyle;
         slider: {
             visible?: boolean | undefined;
         } & import("@react-native-community/slider").SliderProps;

dist/index.js

@@ -215,7 +215,7 @@ const VideoPlayer = (tempProps) => {
       </TouchableWithoutFeedback>
 
       <Animated.View pointerEvents={controlsState === ControlStates.Visible ? 'auto' : 'none'} style={[
-            styles.bottomInfoWrapper,
+            props.controlsStyle,
             {
                 opacity: controlsOpacity,
             },

dist/props.d.ts

@@ -1,5 +1,5 @@
 import { AVPlaybackStatus, Video, VideoProps } from 'expo-av';
-import { ActivityIndicatorProps, TextStyle } from 'react-native';
+import { ActivityIndicatorProps, TextStyle, FlexStyle } from 'react-native';
 import { ColorValue } from 'react-native';
 import { ErrorType } from './constants';
 import { MutableRefObject, ReactNode } from 'react';
@@ -17,6 +17,7 @@ declare type DefaultProps = {
     defaultControlsVisible: boolean;
     timeVisible: boolean;
     textStyle: TextStyle;
+    controlsStyle: FlexStyle;
     slider: {
         visible?: boolean;
     } & SliderProps;

dist/props.js

@@ -13,6 +13,16 @@ export const defaultProps = {
         fontSize: 12,
         textAlign: 'center',
     },
+    controlsStyle: {
+        position: 'absolute',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
     activityIndicator: {
         size: 'large',
         color: '#999',

dist/utils.d.ts

@@ -35,16 +35,6 @@ export declare const styles: {
         overflow: "hidden";
         padding: number;
     };
-    bottomInfoWrapper: {
-        position: "absolute";
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "space-between";
-        flex: number;
-        bottom: number;
-        left: number;
-        right: number;
-    };
     topInfoWrapper: {
         position: "absolute";
         flexDirection: "row";

dist/utils.js

@@ -35,16 +35,6 @@ export const styles = StyleSheet.create({
         overflow: 'hidden',
         padding: 10,
     },
-    bottomInfoWrapper: {
-        position: 'absolute',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        flex: 1,
-        bottom: 0,
-        left: 0,
-        right: 0,
-    },
     topInfoWrapper: {
         position: 'absolute',
         flexDirection: 'row',

lib/index.tsx

@@ -306,7 +306,7 @@ const VideoPlayer = (tempProps: Props) => {
       <Animated.View
           pointerEvents={controlsState === ControlStates.Visible ? 'auto' : 'none'}
           style={[
-          styles.bottomInfoWrapper,
+          props.controlsStyle,
           {
             opacity: controlsOpacity,
           },

lib/props.tsx

@@ -1,5 +1,5 @@
 import { AVPlaybackStatus, Video, VideoProps } from 'expo-av'
-import { ActivityIndicatorProps, Dimensions, Platform, TextStyle } from 'react-native'
+import { ActivityIndicatorProps, Dimensions, Platform, TextStyle, FlexStyle } from 'react-native'
 import { ColorValue } from 'react-native'
 import { ErrorType } from './constants'
 import { MutableRefObject, ReactNode } from 'react'
@@ -23,6 +23,16 @@ export const defaultProps = {
     fontSize: 12,
     textAlign: 'center',
   },
+  controlsStyle: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flex: 1,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
   activityIndicator: {
     size: 'large',
     color: '#999',
@@ -80,6 +90,7 @@ type DefaultProps = {
   defaultControlsVisible: boolean
   timeVisible: boolean
   textStyle: TextStyle
+  controlsStyle: FlexStyle
   slider: {
     visible?: boolean
   } & SliderProps

lib/utils.tsx

@@ -69,16 +69,6 @@ export const styles = StyleSheet.create({
     overflow: 'hidden',
     padding: 10,
   },
-  bottomInfoWrapper: {
-    position: 'absolute',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    flex: 1,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
   topInfoWrapper: {
     position: 'absolute',
     flexDirection: 'row',