From 46a75a4aa4c9c11e3b10d08dcd0e5b38a19c0937 Mon Sep 17 00:00:00 2001
From: rtritto <ariele.1994@gmail.com>
Date: Tue, 18 Feb 2025 14:49:14 +0100
Subject: [PATCH] Add options to customize the shortcuts value of volume and
 seek

---
 README.md                        |  2 ++
 src/core/vlite.ts                | 10 +++++++---
 src/shared/assets/types/types.ts |  2 ++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 593c5270..a8de2eaa 100644
--- a/README.md
+++ b/README.md
@@ -201,7 +201,9 @@ The player controls can be customized with the following parameters:
 | `playPause`             |   `Boolean`    | `true`  | Display the play/pause button on the control bar     |
 | `progressBar`           |   `Boolean`    | `true`  | Display the progress bar on the control bar          |
 | `time`                  |   `Boolean`    | `true`  | Display the time information on the control bar      |
+| `seekSeconds`           |   `Number`     |  `5`    | Seconds to seek backward/forward with shortcuts      |
 | `volume`                |   `Boolean`    | `true`  | Display the volume button on the control bar         |
+| `volumePercent`         |   `Number`     |  `10`   | Percent to increase/decrease volume with shortcuts   |
 | `fullscreen`&sup1; ⁴    |   `Boolean`    | `true`  | Display the fullscreen button on the control bar     |
 | `poster`&sup1;          | `String\|null` | `null`  | Customize the video poster url                       |
 | `bigPlay`&sup1;         |   `Boolean`    | `true`  | Display the big play button on the poster video      |
diff --git a/src/core/vlite.ts b/src/core/vlite.ts
index 9a33ed3d..d03bd6bc 100644
--- a/src/core/vlite.ts
+++ b/src/core/vlite.ts
@@ -20,7 +20,9 @@ const DEFAULT_OPTIONS: interfaceDefaultOptions = {
 		playPause: true,
 		progressBar: true,
 		time: true,
+		seekSeconds: 5,
 		volume: true,
+		volumePercent: 10,
 		loop: false
 	},
 	video: {
@@ -29,7 +31,9 @@ const DEFAULT_OPTIONS: interfaceDefaultOptions = {
 		playPause: true,
 		progressBar: true,
 		time: true,
+		seekSeconds: 5,
 		volume: true,
+		volumePercent: 10,
 		fullscreen: true,
 		poster: null,
 		bigPlay: true,
@@ -318,7 +322,7 @@ class Vlitejs {
 	 */
 	fastForward(direction: string) {
 		this.player.getCurrentTime().then((seconds: number) => {
-			this.player.seekTo(direction === 'backward' ? seconds - 5 : seconds + 5)
+			this.player.seekTo(direction === 'backward' ? seconds - this.options.seekSeconds : seconds + this.options.seekSeconds)
 		})
 	}
 
@@ -328,7 +332,7 @@ class Vlitejs {
 	increaseVolume() {
 		this.player.isMuted && this.player.unMute()
 		this.player.getVolume().then((volume: number) => {
-			this.player.setVolume(Math.round((volume + 0.1) * 10) / 10)
+			this.player.setVolume(Math.min(volume + this.options.volumePercent, 1))
 		})
 	}
 
@@ -337,7 +341,7 @@ class Vlitejs {
 	 */
 	decreaseVolume() {
 		this.player.getVolume().then((volume: number) => {
-			this.player.setVolume(Math.round((volume - 0.1) * 10) / 10)
+			this.player.setVolume(Math.max(volume - this.options.volumePercent, 0))
 		})
 	}
 
diff --git a/src/shared/assets/types/types.ts b/src/shared/assets/types/types.ts
index 488c0f0f..d41bbbf0 100644
--- a/src/shared/assets/types/types.ts
+++ b/src/shared/assets/types/types.ts
@@ -17,7 +17,9 @@ export type Options = {
 	playPause: boolean
 	progressBar: boolean
 	time: boolean
+	seekSeconds: number
 	volume: boolean
+	volumePercent: number
 	fullscreen: boolean
 	poster: null | string
 	bigPlay: boolean