Merge pull request #2759 from iFeelSmart/feat/subtitles_style

feat(android): add support of subtitles style configuration

API.md

@@ -304,6 +304,7 @@ var styles = StyleSheet.create({
 |[selectedTextTrack](#selectedtexttrack)|Android, iOS|
 |[selectedVideoTrack](#selectedvideotrack)|Android|
 |[source](#source)|All|
+|[subtitleStyle](#subtitleStyle)|Android|
 |[textTracks](#texttracks)|Android, iOS|
 |[trackId](#trackId)|Android|
 |[useTextureView](#usetextureview)|Android|
@@ -835,6 +836,23 @@ The following other types are supported on some platforms, but aren't fully docu
 `content://, ms-appx://, ms-appdata://, assets-library://`
 
 
+#### subtitleStyle
+
+Property | Description | Platforms
+--- | --- | ---
+fontSizeTrack | Adjust the font size of the subtitles. Default: font size of the device | Android
+paddingTop | Adjust the top padding of the subtitles. Default: 0| Android
+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
+
+
+Example:
+
+```
+subtitleStyle={{ paddingBottom: 50, fontSize: 20 }}
+```
+
 #### textTracks
 Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:
 

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Version 6.0.0-alpha.2
 
+- Feature add support of subtitle styling on android [#2759](https://github.com/react-native-video/react-native-video/pull/2759)
 - Fix Android #2690 ensure onEnd is not sent twice [#2690](https://github.com/react-native-video/react-native-video/issues/2690)
 - Fix Exoplayer progress not reported when paused [#2664](https://github.com/react-native-video/react-native-video/pull/2664)
 - Call playbackRateChange onPlay and onPause [#1493](https://github.com/react-native-video/react-native-video/pull/1493)

Video.js

@@ -489,6 +489,13 @@ Video.propTypes = {
   fullscreenAutorotate: PropTypes.bool,
   fullscreenOrientation: PropTypes.oneOf(['all', 'landscape', 'portrait']),
   progressUpdateInterval: PropTypes.number,
+  subtitleStyle: PropTypes.shape({
+    paddingTop: PropTypes.number,
+    paddingBottom: PropTypes.number,
+    paddingLeft: PropTypes.number,
+    paddingRight: PropTypes.number,
+    fontSize: PropTypes.number,
+  }),
   useTextureView: PropTypes.bool,
   useSecureView: PropTypes.bool,
   hideShutterView: PropTypes.bool,

android/src/main/java/com/brentvatne/ReactBridgeUtils.java

@@ -0,0 +1,22 @@
+package com.brentvatne;
+
+import com.facebook.react.bridge.ReadableMap;
+
+/*
+* This file define static helpers to parse in an easier way input props
+ */
+public class ReactBridgeUtils {
+    /*
+    retrieve key from map as int. fallback is returned if not available
+     */
+    static public int safeGetInt(ReadableMap map, String key, int fallback) {
+        return map != null && map.hasKey(key) && !map.isNull(key) ? map.getInt(key) : fallback;
+    }
+
+    /*
+    retrieve key from map as double. fallback is returned if not available
+     */
+    static public double safeGetDouble(ReadableMap map, String key, double fallback) {
+        return map != null && map.hasKey(key) && !map.isNull(key) ? map.getDouble(key) : fallback;
+    }
+}

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

@@ -5,6 +5,7 @@ import android.content.Context;
 import androidx.core.content.ContextCompat;
 import android.util.AttributeSet;
 import android.util.Log;
+import android.util.TypedValue;
 import android.view.Gravity;
 import android.view.SurfaceView;
 import android.view.TextureView;
@@ -100,6 +101,16 @@ public final class ExoPlayerView extends FrameLayout {
             player.setVideoSurfaceView((SurfaceView) surfaceView);
         }
     }
+    public void setSubtitleStyle(SubtitleStyle style) {
+        // ensure we reset subtile style before reapplying it
+        subtitleLayout.setUserDefaultStyle();
+        subtitleLayout.setUserDefaultTextSize();
+
+        if (style.getFontSize() > 0) {
+            subtitleLayout.setFixedTextSize(TypedValue.COMPLEX_UNIT_SP, style.getFontSize());
+        }
+        subtitleLayout.setPadding(style.getPaddingLeft(), style.getPaddingTop(), style.getPaddingRight(), style.getPaddingBottom());
+    }
 
     private void updateSurfaceView() {
         View view;

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

@@ -1856,4 +1856,8 @@ class ReactExoplayerView extends FrameLayout implements
             }
         }
     }
+
+    public void setSubtitleStyle(SubtitleStyle style) {
+        exoPlayerView.setSubtitleStyle(style);
+    }
 }

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

@@ -79,6 +79,8 @@ public class ReactExoplayerViewManager extends ViewGroupManager<ReactExoplayerVi
     private static final String PROP_HIDE_SHUTTER_VIEW = "hideShutterView";
     private static final String PROP_CONTROLS = "controls";
 
+    private static final String PROP_SUBTITLE_STYLE = "subtitleStyle";
+
     private ReactExoplayerConfig config;
 
     public ReactExoplayerViewManager(ReactExoplayerConfig config) {
@@ -347,6 +349,11 @@ public class ReactExoplayerViewManager extends ViewGroupManager<ReactExoplayerVi
         videoView.setControls(controls);
     }
 
+    @ReactProp(name = PROP_SUBTITLE_STYLE)
+    public void setSubtitleStyle(final ReactExoplayerView videoView, @Nullable final ReadableMap src) {
+        videoView.setSubtitleStyle(SubtitleStyle.parse(src));
+    }
+
     @ReactProp(name = PROP_BUFFER_CONFIG)
     public void setBufferConfig(final ReactExoplayerView videoView, @Nullable ReadableMap bufferConfig) {
         int minBufferMs = DefaultLoadControl.DEFAULT_MIN_BUFFER_MS;

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

@@ -0,0 +1,38 @@
+package com.brentvatne.exoplayer;
+import com.brentvatne.ReactBridgeUtils;
+import com.facebook.react.bridge.ReadableMap;
+
+/**
+ * Helper file to parse SubtitleStyle prop and build a dedicated class
+ */
+public class SubtitleStyle {
+    private static final String PROP_FONT_SIZE_TRACK = "fontSize";
+    private static final String PROP_PADDING_BOTTOM = "paddingBottom";
+    private static final String PROP_PADDING_TOP = "paddingTop";
+    private static final String PROP_PADDING_LEFT = "paddingLeft";
+    private static final String PROP_PADDING_RIGHT = "paddingRight";
+
+    private int fontSize = -1;
+    private int paddingLeft = 0;
+    private int paddingRight = 0;
+    private int paddingTop = 0;
+    private int paddingBottom = 0;
+
+    private SubtitleStyle() {}
+
+    int getFontSize() {return fontSize;}
+    int getPaddingBottom() {return paddingBottom;}
+    int getPaddingTop() {return paddingTop;}
+    int getPaddingLeft() {return paddingLeft;}
+    int getPaddingRight() {return paddingRight;}
+
+    public static SubtitleStyle parse(ReadableMap src) {
+        SubtitleStyle subtitleStyle = new SubtitleStyle();
+        subtitleStyle.fontSize = ReactBridgeUtils.safeGetInt(src, PROP_FONT_SIZE_TRACK, -1);
+        subtitleStyle.paddingBottom = ReactBridgeUtils.safeGetInt(src, PROP_PADDING_BOTTOM, 0);
+        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);
+        return subtitleStyle;
+    }
+}