Alexandria commented 2 years ago

Feature Request

Why it is needed

Would love to be able to change the styling of the controls to better match the theme or branding of an app.

For example I would want to lower the opacity of the controls so that just the speaker icon is visible. Or change the color of the play bar etc.

Possible implementation

Just at a quick glance of the code I saw styles for seekbarFill and seekbarHandle in the VideoPlayer.andriod.tsx file. Would it be possible to have the option to override the default styles here? (as well as with ios )

Code sample

Ideally it could look something like this when implmented

// Load the module
import Video from 'react-native-video';
<Video source={{uri: "background"}}   
       ref={(ref) => {
         this.player = ref
       }}                                      
       onBuffer={this.onBuffer}              
       onError={this.videoError}               
       style={styles.backgroundVideo} />
       controls
       styleControls={
              seekbarTrackColor: "green",   // This would override seekbarTrack.backgroundColor: '#333',
              seekbarTrackWidth: "100%"    // This would override seekbarTrack.Width
              seekbarHandleColor: "black"  // This would override seekbarHandle.backgroundColor: '#333',
              topControls:"row"  // This could also be column left aligned or column right aligned. 
       }
/>
// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
   ......
  },
});

Alexandria commented 2 years ago

Im happy to submit a PR and work on this.