feat: implement opacity to control visibility of subtitles (#3583)

* feat: implement opacity to control visibility of subtitles

implemented per discussion on https://github.com/react-native-video/react-native-video/issues/3579

updated docs and linked onTextTrackDataChanged to the subtitle style to clarify intent on how to control visibility.

* chore: update type so that we use a union of 0 1 vs any number

* chore: run ktlint to get rid of white spaces

* feat: add ability to have range of numbers for opacity; while, 0 will still not render the subtitles.

added util function for safeGetFloat

updated types

* feat: add ability to suppress subtitles with opacity 0

add data structure for subtitle styles for extensibility

* chore: run yarn check-ios

* chore: update documentation to clarify differences between android and ios

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

Co-authored-by: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>

---------

Co-authored-by: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>
This commit is contained in:
coofzilla
2024-03-14 19:29:50 +09:00
committed by GitHub
parent 41ac781412
commit f4cce2ecdb
11 changed files with 52 additions and 2 deletions

View File

@@ -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']} />

View File

@@ -748,11 +748,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 with 0 hiding and 1 fully showing them. Android supports float values between 0 and 1 for varying opacity levels, whereas iOS supports only 0 or 1. Default: 1. | Android, iOS |
Example:
```javascript
subtitleStyle={{ paddingBottom: 50, fontSize: 20 }}
subtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}
```
### `textTracks`