From a0a2d95bfd11ec97d5cb133f1df5e3d23206ab6d Mon Sep 17 00:00:00 2001
From: shariar-hasan <shariar.hasan@topofstacksoftware.com>
Date: Sat, 11 Oct 2025 21:36:24 +0600
Subject: [PATCH 1/2] [feat] : Add `skipSeconds` prop to ReactNextPlayer for
 customizable skip duration

---
 src/ReactNextPlayer.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/ReactNextPlayer.tsx b/src/ReactNextPlayer.tsx
index f4b9836..551c327 100644
--- a/src/ReactNextPlayer.tsx
+++ b/src/ReactNextPlayer.tsx
@@ -13,6 +13,7 @@ export interface ReactNextPlayerProps {
   height?: string | number;
   className?: string;
   color?: string;
+  skipSeconds?: number;
   onPlay?: () => void;
   onPause?: () => void;
   onTimeUpdate?: (currentTime: number) => void;
@@ -31,6 +32,7 @@ const ReactNextPlayer: React.FC<ReactNextPlayerProps> = ({
   height = "auto",
   className = "",
   color = "#ff0000",
+  skipSeconds = 10,
   onPlay,
   onPause,
   onTimeUpdate,
@@ -115,19 +117,19 @@ const ReactNextPlayer: React.FC<ReactNextPlayerProps> = ({
     if (videoRef.current) {
       videoRef.current.currentTime = Math.max(
         0,
-        videoRef.current.currentTime - 10
+        videoRef.current.currentTime - skipSeconds
       );
     }
-  }, []);
+  }, [skipSeconds]);
 
   const handleSkipForward = useCallback(() => {
     if (videoRef.current) {
       videoRef.current.currentTime = Math.min(
         duration,
-        videoRef.current.currentTime + 10
+        videoRef.current.currentTime + skipSeconds
       );
     }
-  }, [duration]);
+  }, [duration, skipSeconds]);
 
   const handleTimeUpdate = useCallback(() => {
     if (videoRef.current) {
@@ -730,9 +732,8 @@ const ReactNextPlayer: React.FC<ReactNextPlayerProps> = ({
 
       <div
         ref={playerRef}
-        className={`react-vid-player ${className} ${
-          isFullscreen ? "fullscreen" : ""
-        }`}
+        className={`react-vid-player ${className} ${isFullscreen ? "fullscreen" : ""
+          }`}
         style={
           {
             width,
@@ -765,9 +766,8 @@ const ReactNextPlayer: React.FC<ReactNextPlayerProps> = ({
 
         {/* Center play/pause overlay - only show when paused or on hover */}
         <div
-          className={`center-overlay ${
-            !isPlaying || (showControls && isHovering) ? "visible" : ""
-          }`}
+          className={`center-overlay ${!isPlaying || (showControls && isHovering) ? "visible" : ""
+            }`}
           onClick={handlePlayPause}
         >
           {isPlaying ? (
@@ -798,9 +798,8 @@ const ReactNextPlayer: React.FC<ReactNextPlayerProps> = ({
 
         {controls && (
           <div
-            className={`video-controls ${
-              showControls || !isPlaying ? "visible" : "hidden"
-            }`}
+            className={`video-controls ${showControls || !isPlaying ? "visible" : "hidden"
+              }`}
           >
             <div className="progress-container" onClick={handleProgressClick}>
               <div className="progress-bar" ref={progressBarRef}>

From f3997c7df41ffb3c8b1a061617e3dff4a2852cfa Mon Sep 17 00:00:00 2001
From: shariar-hasan <shariar.hasan@topofstacksoftware.com>
Date: Sat, 11 Oct 2025 22:08:35 +0600
Subject: [PATCH 2/2] [feat] : Add `skipSeconds` prop to README for
 customizable skip duration

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 7e2538f..9a4e02e 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ export default function App() {
 | `height`      | `string \| number` | `"auto"`     | Height of player                            |
 | `className`   | `string`           | `""`         | Custom CSS class                            |
 | `color`       | `string`           | `"#ff0000"`  | Primary color (progress, volume, etc.)      |
+| `skipSeconds` | `number`  | `10` | Custom forward and backward skip value (in seconds)
 
 ---