feat: implement opacity to control visibility of subtitles

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

@@ -17,13 +17,16 @@ class SubtitleStyle private constructor() {
         private set
     var paddingBottom = 0
         private set
+    var opacity = 1
+        private set
 
     companion object {
         private const val PROP_FONT_SIZE_TRACK = "fontSize"
         private const val PROP_PADDING_BOTTOM = "paddingBottom"
         private const val PROP_PADDING_TOP = "paddingTop"
         private const val PROP_PADDING_LEFT = "paddingLeft"
         private const val PROP_PADDING_RIGHT = "paddingRight"
+        private const val PROP_OPACITY = "opacity"
 
         @JvmStatic
         fun parse(src: ReadableMap?): SubtitleStyle {
@@ -33,6 +36,7 @@ class SubtitleStyle private constructor() {
             subtitleStyle.paddingTop = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_TOP, 0)
             subtitleStyle.paddingLeft = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_LEFT, 0)
             subtitleStyle.paddingRight = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_RIGHT, 0)
+            subtitleStyle.opacity = ReactBridgeUtils.safeGetInt(src, PROP_OPACITY, 1)
             return subtitleStyle
         }
     }

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

@@ -117,6 +117,7 @@ public void setSubtitleStyle(SubtitleStyle style) {
             subtitleLayout.setFixedTextSize(TypedValue.COMPLEX_UNIT_SP, style.getFontSize());
         }
         subtitleLayout.setPadding(style.getPaddingLeft(), style.getPaddingTop(), style.getPaddingRight(), style.getPaddingBottom());
+        subtitleLayout.setVisibility(style.getOpacity() == 0 ? View.GONE : View.VISIBLE);
     }
 
     public void setShutterColor(Integer color) {

docs/pages/component/events.mdx

@@ -534,6 +534,8 @@ Example:
 }
 ```
 
+For details on how to control the visibility of subtitles, see the [subtitleStyle](./props.mdx#subtitleStyle) section.
+
 ### `onVideoTracks`
 
 <PlatformsList types={['Android']} />

docs/pages/component/props.mdx

@@ -739,11 +739,12 @@ source={{
 | paddingBottom | Adjust the bottom padding of the subtitles. Default: 0                  | Android   |
 | paddingLeft   | Adjust the left padding of the subtitles. Default: 0                    | Android   |
 | paddingRight  | Adjust the right padding of the subtitles. Default: 0                   | Android   |
+| opacity       | Adjust the visibility of subtitles. `0` will not render the subtitles, while `1` will make them fully visible. Default: 1. | Android   |
 
 Example:
 
 ```javascript
-subtitleStyle={{ paddingBottom: 50, fontSize: 20 }}
+subtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}
 ```
 
 ### `textTracks`

src/specs/VideoNativeComponent.ts

@@ -118,6 +118,7 @@ type SubtitleStyle = Readonly<{
   paddingBottom?: WithDefault<Float, 0>;
   paddingLeft?: WithDefault<Float, 0>;
   paddingRight?: WithDefault<Float, 0>;
+  opacity?: WithDefault<0 | 1, 1>;
 }>;
 
 export type OnLoadData = Readonly<{

src/types/video.ts

@@ -101,6 +101,7 @@ export type SubtitleStyle = {
   paddingBottom?: number;
   paddingLeft?: number;
   paddingRight?: number;
+  opacity?: 0 | 1;
 };
 
 export enum TextTracksType {