dylan/vod-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD normal slider connected to range slider

Browse Source
This commit is contained in:
Dylan De Faoite
2025-05-23 00:20:28 +02:00
parent 318fbe84f6
commit 6bd5b517f6
3 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "VoD-System",
"name": "vodSystem",
"lockfileVersion": 3,
"requires": true,
"packages": {
@@ -32,7 +32,8 @@
"react-player": "^2.16.0",
"react-range-slider-input": "^3.2.1",
"react-router": "7.5.2",
"react-router-dom": "^7.6.0"
"react-router-dom": "^7.6.0",
"react-slider": "^2.0.6"
},
"devDependencies": {
"@babel/preset-react": "7.26.3",
@@ -41,6 +42,7 @@
"@rollup/pluginutils": "5.1.4",
"@types/react": "18.3.20",
"@types/react-dom": "18.3.6",
"@types/react-slider": "^1.3.6",
"@vaadin/hilla-generator-cli": "24.7.3",
"@vaadin/hilla-generator-core": "24.7.3",
"@vaadin/hilla-generator-plugin-backbone": "24.7.3",
@@ -3143,6 +3145,16 @@
"@types/react": "^18.0.0"
}
},
"node_modules/@types/react-slider": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@types/react-slider/-/react-slider-1.3.6.tgz",
"integrity": "sha512-RS8XN5O159YQ6tu3tGZIQz1/9StMLTg/FCIPxwqh2gwVixJnlfIodtVx+fpXVMZHe7A58lAX1Q4XTgAGOQaCQg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -8521,6 +8533,18 @@
"react-dom": ">=18"
}
},
"node_modules/react-slider": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.6.tgz",
"integrity": "sha512-gJxG1HwmuMTJ+oWIRCmVWvgwotNCbByTwRkFZC6U4MBsHqJBmxwbYRJUmxy4Tke1ef8r9jfXjgkmY/uHOCEvbA==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"react": "^16 || ^17 || ^18"
}
},
"node_modules/readable-stream": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",

4
package.json
View File

@@ -6,6 +6,7 @@
"@rollup/pluginutils": "5.1.4",
"@types/react": "18.3.20",
"@types/react-dom": "18.3.6",
"@types/react-slider": "^1.3.6",
"@vaadin/hilla-generator-cli": "24.7.3",
"@vaadin/hilla-generator-core": "24.7.3",
"@vaadin/hilla-generator-plugin-backbone": "24.7.3",
@@ -61,7 +62,8 @@
"react-player": "^2.16.0",
"react-range-slider-input": "^3.2.1",
"react-router": "7.5.2",
"react-router-dom": "^7.6.0"
"react-router-dom": "^7.6.0",
"react-slider": "^2.0.6"
},
"vaadin": {
"dependencies": {

47
src/main/frontend/views/video/{id}.tsx
View File

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
import RangeSlider from 'react-range-slider-input';
import 'react-range-slider-input/dist/style.css';
export type VideoMetadata = {
startPoint: number,
endPoint: number,
@@ -24,20 +25,32 @@ export default function video() {
const videoUrl = "api/v1/download/input/" + id;
const [metadata, setMetadata] = useState<VideoMetadata | null>(null);
const [sliderValue, setSliderValue] = useState(0);
let previousInput = [0, 0];
const handleInput = (val: [number, number]) => {
let previousRangeSliderInput = [0, 0];
const handleRangeSliderInput = (val: [number, number]) => {
if (!videoRef.current) {
return;
}
if (previousInput[0] != val[0]) {
if (previousRangeSliderInput[0] != val[0]) {
videoRef.current.currentTime = val[0];
} else if (previousInput[1] != val[1]) {
setSliderValue(val[0]);
} else if (previousRangeSliderInput[1] != val[1]) {
videoRef.current.currentTime = val[1];
setSliderValue(val[1]);
}
previousInput = val;
previousRangeSliderInput = val;
};
const updateVideoTag = (e: React.ChangeEvent<HTMLInputElement>) => {
if (!videoRef.current) {
return;
}
setSliderValue(parseFloat(e.target.value));
//videoRef.current.currentTime = parseFloat(e.target.value);
};
useEffect(() => {
@@ -60,16 +73,28 @@ export default function video() {
<source src={videoUrl} type="video/mp4" />
<source src={videoUrl} type="video/webm" />
<source src={videoUrl} type="video/ogg" />
Your browser does not support the video tag.
Your browser does not support the video tag. Bzzzz.
</video>
{metadata &&
<RangeSlider className={"w-600px"}
min={0}
max={metadata.endPoint}
step={0.1}
onInput={handleInput}/>
<div>
<input
className={"w-full"}
type="range"
min={0}
max={metadata.endPoint}
value={sliderValue}
onChange={updateVideoTag}
step={0.1}
/>
<RangeSlider
min={0}
max={metadata.endPoint}
step={0.1}
onInput={handleRangeSliderInput}/>
</div>
}
</div>
);