Add options to customize the shortcuts value of volume and seek

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`¹ ⁴    |   `Boolean`    | `true`  | Display the fullscreen button on the control bar     |
 | `poster`¹          | `String\|null` | `null`  | Customize the video poster url                       |
 | `bigPlay`¹         |   `Boolean`    | `true`  | Display the big play button on the poster video      |

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))
 		})
 	}
 

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