feat: thumbnail image custom styles

docs/docs/api/styles.md

@@ -49,7 +49,10 @@ The `react-native-video-player` component allows you to customize its appearance
 - **Description**: Styles the background of the seek bar.
 
 ### `thumbnail`
-- **Description**: Styles the video thumbnail shown before playback starts.
+- **Description**: Styles the video thumbnail container shown before playback starts.
+
+### `thumbnailImage`
+- **Description**: Styles the video thumbnail image shown before playback starts.
 
 ### `playButton`
 - **Description**: Styles the start button overlaying the thumbnail.
@@ -81,6 +84,7 @@ const App = () => (
         wrapper: styles.wrapper,
         playControl: styles.playControl,
         seekBarKnob: styles.seekBarKnob,
+        thumbnailImage: styles.thumbnailImage
       }}
     />
   </View>
@@ -96,6 +100,10 @@ const styles = StyleSheet.create({
   seekBarKnob: {
     // ...
   },
+  thumbnailImage: {
+    resizeMode: 'contain',
+    // ...
+  },
 });
 
 export default App;

example/src/App.tsx

@@ -21,7 +21,7 @@
           enabled: false,
         }}
       >
         <Text style={{ fontSize: 22, marginTop: 22 }}>
           React Native Video Player
         </Text>
         <VideoPlayer
@@ -29,6 +29,11 @@
           thumbnail={{
             uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
           }}
+          customStyles={{
+            thumbnailImage: {
+              resizeMode: 'cover',
+            },
+          }}
           // pauseOnPress={true}
           // autoplay={true}
           // repeat={true}
@@ -37,7 +42,7 @@
           }}
           renderLoader={() => (
             <View
               style={{
                 flex: 1,
                 backgroundColor: 'black',
                 justifyContent: 'center',

src/Thumbnail.tsx

@@ -20,6 +20,7 @@ interface ThumbnailProps extends StartButtonProps {
   sizeStyles: { height: number; width: number };
   onStart: () => void;
   customStylesThumbnail: CustomStyles['thumbnail'];
+  customStylesThumbnailImage: CustomStyles['thumbnailImage'];
   customStylesPlayButton: CustomStyles['playButton'];
   customStylesPlayArrow: CustomStyles['playArrow'];
 }
@@ -49,12 +50,14 @@ export const Thumbnail = memo(
     sizeStyles,
     onStart,
     customStylesThumbnail,
+    customStylesThumbnailImage,
     customStylesPlayButton,
     customStylesPlayArrow,
   }: ThumbnailProps) => {
     return (
       <ImageBackground
         source={thumbnailSource}
+        imageStyle={customStylesThumbnailImage}
         style={[styles.thumbnail, sizeStyles, style, customStylesThumbnail]}
       >
         <StartButton

src/index.tsx

@@ -47,6 +47,7 @@ export interface CustomStyles {
   seekBarKnobSeeking?: StyleProp<ViewStyle>;
   seekBarBackground?: StyleProp<ViewStyle>;
   thumbnail?: StyleProp<ViewStyle>;
+  thumbnailImage?: StyleProp<ImageStyle>;
   playButton?: StyleProp<ViewStyle>;
   playArrow?: StyleProp<ImageStyle>;
   durationText?: StyleProp<TextStyle>;
@@ -146,8 +147,8 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
     }, [onEnd, endWithThumbnail, endThumbnail, setIsStarted, setHasEnded]);
 
     const onLayout = useCallback((event: LayoutChangeEvent) => {
-      const { width } = event.nativeEvent.layout;
-      setWidth(width);
+      const { width: containerWidth } = event.nativeEvent.layout;
+      setWidth(containerWidth);
     }, []);
 
     const renderContent = useCallback(() => {
@@ -161,6 +162,7 @@ const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
             sizeStyles={sizeStyles}
             onStart={_onStart}
             customStylesThumbnail={customStyles.thumbnail}
+            customStylesThumbnailImage={customStyles.thumbnailImage}
             customStylesPlayButton={customStyles.playButton}
             customStylesPlayArrow={customStyles.playArrow}
           />