feat(android): support hiding Exoplayer video duration on android (#4090)

* feat: support for hiding duration on Android

* docs: add hideDuration property to control styles documentation

android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt

@@ -6,6 +6,7 @@ import com.facebook.react.bridge.ReadableMap
 class ControlsConfig {
     var hideSeekBar: Boolean = false
     var seekIncrementMS: Int = 10000
+    var hideDuration: Boolean = false
 
     companion object {
         @JvmStatic
@@ -15,6 +16,7 @@ class ControlsConfig {
             if (src != null) {
                 config.hideSeekBar = ReactBridgeUtils.safeGetBool(src, "hideSeekBar", false)
                 config.seekIncrementMS = ReactBridgeUtils.safeGetInt(src, "seekIncrementMS", 10000)
+                config.hideDuration = ReactBridgeUtils.safeGetBool(src, "hideDuration", false)
             }
 
             return config

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -554,7 +554,13 @@ public class ReactExoplayerView extends FrameLayout implements
             exoPosition.setLayoutParams(param);
         }else{
             exoProgress.setVisibility(VISIBLE);
+
+            if(controlsConfig.getHideDuration()){
+                exoDuration.setVisibility(GONE);
+            }else{
                 exoDuration.setVisibility(VISIBLE);
+            }
+
             // Reset the layout parameters of exoPosition to their default state
             LinearLayout.LayoutParams defaultParam = new LinearLayout.LayoutParams(
                     LayoutParams.WRAP_CONTENT,

docs/pages/component/props.mdx

@@ -147,6 +147,7 @@ Adjust the control styles. This prop is need only if `controls={true}` and is an
 | Property        | Type    | Description                                                                             |
 |-----------------|---------|-----------------------------------------------------------------------------------------|
 | hideSeekBar     | boolean | The default value is `false`, allowing you to hide the seek bar for live broadcasts.    |
+| hideDuration    | boolean | The default value is `false`, allowing you to hide the duration.                        |
 | seekIncrementMS | number  | The default value is `10000`. You can change the value to increment forward and rewind. |
 
 Example with default values:
@@ -154,6 +155,7 @@ Example with default values:
 ```javascript
 controlsStyles={{
   hideSeekBar: false,
+  hideDuration: false,
   seekIncrementMS: 10000,
 }}
 ```

src/specs/VideoNativeComponent.ts

@@ -284,6 +284,7 @@ export type OnAudioFocusChangedData = Readonly<{
 
 type ControlsStyles = Readonly<{
   hideSeekBar?: boolean;
+  hideDuration?: boolean;
   seekIncrementMS?: Int32;
 }>;
 

src/types/video.ts

@@ -223,6 +223,7 @@ export type AudioOutput = 'speaker' | 'earpiece';
 
 export type ControlsStyles = {
   hideSeekBar?: boolean;
+  hideDuration?: boolean;
   seekIncrementMS?: number;
 };