[Feature]: Add ability to show/hide subtitles while still selecting a text track.

[coofzilla]

Description

Introduce the ability to independently select and hide text tracks, enabling developers to access subtitle data without displaying it during playback.

Why it is needed ?

This feature is crucial for apps that use subtitles to overlay additional information ( e.g., sports scores ) on videos without showing the subtitle text itself. Currently, disabling the selectedTextTrack also stops the subtitle data from being accessible; which, limits the creative use of subtitles for overlays.

1. Increases the flexibility and utility of the react-native-video package, aligning with web standards that recommend using subtitles for more than just language support.

2. Allows developers to create a more tailored viewing experience, especially in sports and educational content, where additional information needs to be displayed without interfering with the video content.

The primary purpose of WebVTT files is to add text overlays to a <video>

Possible implementation

<Video
  source={{uri: "video-url"}}
  selectedTextTrack={{
    type: "title",
    value: "English",
  }}
  showSelectedTextTrack={true} // New prop to control subtitle rendering
  onTextTrackDataChanged={event => {
    // Handle the subtitle data
  }}
/>

Code sample

📲 iOS

// Inside the AVPlayerItem setup
let legibleOutput = AVPlayerItemLegibleOutput()
legibleOutput.suppressesPlayerRendering = !showSelectedTextTrack // Conditional based on the new prop

🤖 Android

private void updateSubtitleViewVisibility() {
    subtitleLayout.setVisibility(this.showSelectedTextTrack ? View.VISIBLE : View.GONE);
}

[freeboub]

Now I correctly understand your use case :) BTW, I confirm that it would be better in terms of api to use subtitleStyle.opacity to achieve that feature. you need to:

• add links in the documentation to onTextData -> the goal is to understand the link between features.
• in case of opacity 0 you can put tracks as not rendered like in your sample code.
• if opacity cannot be changed (on ios), you can precise that it must be 0 or 1

[coofzilla]

Thank you for the response! once https://github.com/react-native-video/react-native-video/pull/3566 gets merged, I'll work on getting that implemented :)

Do you think we can add this to the roadmap?

[freeboub]

@coofzilla no need to add it in the roadmap :) these are isolated changes, not problem to merge it on the flow ! (the other PR will be merged soon I think !)

[coofzilla]

PR submitted for ios/android https://github.com/react-native-video/react-native-video/pull/3583

[coofzilla]

https://github.com/react-native-video/react-native-video/pull/3583 has been merged :)