From b64c7dbea5f0d9479267e10d1c125dc26cb66dd8 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Tue, 5 Jul 2022 23:58:30 +0200 Subject: [PATCH 1/2] feat: add support of subtitles style configuration --- API.md | 18 +++++++++ Video.js | 7 ++++ .../java/com/brentvatne/ReactBridgeUtils.java | 22 +++++++++++ .../brentvatne/exoplayer/ExoPlayerView.java | 11 ++++++ .../exoplayer/ReactExoplayerView.java | 4 ++ .../exoplayer/ReactExoplayerViewManager.java | 7 ++++ .../brentvatne/exoplayer/SubtitleStyle.java | 38 +++++++++++++++++++ 7 files changed, 107 insertions(+) create mode 100644 android/src/main/java/com/brentvatne/ReactBridgeUtils.java create mode 100644 android/src/main/java/com/brentvatne/exoplayer/SubtitleStyle.java diff --git a/API.md b/API.md index 9ac52616..eb1f2eb0 100644 --- a/API.md +++ b/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: diff --git a/Video.js b/Video.js index dad262b9..f3d96278 100644 --- a/Video.js +++ b/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, diff --git a/android/src/main/java/com/brentvatne/ReactBridgeUtils.java b/android/src/main/java/com/brentvatne/ReactBridgeUtils.java new file mode 100644 index 00000000..c3391283 --- /dev/null +++ b/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; + } +} diff --git a/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.java index a6cd1c4f..8c97298a 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.java +++ b/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; diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index 3dccad93..7e77c4e9 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java @@ -1838,4 +1838,8 @@ class ReactExoplayerView extends FrameLayout implements } } } + + public void setSubtitleStyle(SubtitleStyle style) { + exoPlayerView.setSubtitleStyle(style); + } } diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java index 3744fcae..ce1d6a8c 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java @@ -79,6 +79,8 @@ public class ReactExoplayerViewManager extends ViewGroupManager Date: Sat, 20 Aug 2022 14:31:15 +0200 Subject: [PATCH 2/2] doc: update changeLog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1968e293..95b2a97e 100644 --- a/CHANGELOG.md +++ b/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)