From fc901c783b34ab27dd991f74520a274feba4ec5d Mon Sep 17 00:00:00 2001
From: Dong Liu <core@clwy.cn>
Date: Thu, 9 Feb 2023 10:39:45 +0800
Subject: [PATCH] Added controlsStyle props

---
 README.md       |  1 +
 dist/index.d.ts |  1 +
 dist/index.js   |  2 +-
 dist/props.d.ts |  3 ++-
 dist/props.js   | 10 ++++++++++
 dist/utils.d.ts | 10 ----------
 dist/utils.js   | 10 ----------
 lib/index.tsx   |  2 +-
 lib/props.tsx   | 13 ++++++++++++-
 lib/utils.tsx   | 10 ----------
 10 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 6bd52df..cbcbbce 100644
--- a/README.md
+++ b/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 |
diff --git a/dist/index.d.ts b/dist/index.d.ts
index 074cf17..3b34157 100644
--- a/dist/index.d.ts
+++ b/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;
diff --git a/dist/index.js b/dist/index.js
index ecc8cf5..d228731 100644
--- a/dist/index.js
+++ b/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,
             },
diff --git a/dist/props.d.ts b/dist/props.d.ts
index 69a94cd..fc25ecd 100644
--- a/dist/props.d.ts
+++ b/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;
diff --git a/dist/props.js b/dist/props.js
index 0944621..86f759c 100644
--- a/dist/props.js
+++ b/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',
diff --git a/dist/utils.d.ts b/dist/utils.d.ts
index 3c4c7e3..dafbe0f 100644
--- a/dist/utils.d.ts
+++ b/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";
diff --git a/dist/utils.js b/dist/utils.js
index 5b31e74..3b2a1fd 100644
--- a/dist/utils.js
+++ b/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',
diff --git a/lib/index.tsx b/lib/index.tsx
index 5cf37e4..4d553e6 100644
--- a/lib/index.tsx
+++ b/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,
           },
diff --git a/lib/props.tsx b/lib/props.tsx
index 896d976..492d17c 100644
--- a/lib/props.tsx
+++ b/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
diff --git a/lib/utils.tsx b/lib/utils.tsx
index ed15a03..3c1798c 100644
--- a/lib/utils.tsx
+++ b/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',