softbuilders-react-video-player 1.1.8 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +126 -126
- package/dist/components/BigPlayButton/index.js +1 -1
- package/dist/components/BigPlayButton/index.js.map +1 -1
- package/dist/components/BigPlayButton/index.tsx +33 -31
- package/dist/components/BufferTracker/index.tsx +19 -19
- package/dist/components/ChapterTooltip/index.tsx +65 -65
- package/dist/components/ChaptersPanal/index.tsx +40 -40
- package/dist/components/ControlBar/index.d.ts +2 -1
- package/dist/components/ControlBar/index.js +21 -6
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +150 -127
- package/dist/components/CreateNoteMenu/index.tsx +61 -61
- package/dist/components/CurrentTimeLabel/index.tsx +13 -13
- package/dist/components/CurrentTimeTracker/index.tsx +18 -18
- package/dist/components/Menu/index.tsx +49 -49
- package/dist/components/MenuButton/index.js +1 -1
- package/dist/components/MenuButton/index.js.map +1 -1
- package/dist/components/MenuButton/index.tsx +67 -67
- package/dist/components/NoteTooltip/index.tsx +46 -46
- package/dist/components/NotesPanal/index.tsx +34 -34
- package/dist/components/QualityMenu/index.js +2 -2
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +122 -122
- package/dist/components/Slider/index.d.ts +1 -1
- package/dist/components/Slider/index.js +3 -3
- package/dist/components/Slider/index.js.map +1 -1
- package/dist/components/Slider/index.tsx +36 -37
- package/dist/components/Slider/style.css +49 -15
- package/dist/components/SoftBuildersVideoPlayer/index.js +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +110 -109
- package/dist/components/SubtitleMenu/index.js +2 -2
- package/dist/components/SubtitleMenu/index.js.map +1 -1
- package/dist/components/SubtitleMenu/index.tsx +107 -108
- package/dist/components/TimeSlider/index.js +13 -13
- package/dist/components/TimeSlider/index.tsx +107 -107
- package/dist/components/TimeSliderContainer/index.tsx +35 -35
- package/dist/components/Tooltip/index.tsx +16 -16
- package/dist/components/VideoPlayerComponent/index.d.ts +2 -1
- package/dist/components/VideoPlayerComponent/index.js +54 -38
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +271 -249
- package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
- package/dist/components/VideoPlayerComponent/style/style.css +36 -36
- package/dist/components/VolumeSlider/index.d.ts +4 -2
- package/dist/components/VolumeSlider/index.js +12 -2
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +91 -52
- package/dist/components/icons/SubIcon.d.ts +3 -0
- package/dist/components/icons/SubIcon.js +4 -0
- package/dist/components/icons/SubIcon.js.map +1 -0
- package/dist/components/icons/SubIcon.tsx +28 -0
- package/dist/components/icons/index.d.ts +1 -0
- package/dist/components/icons/index.js +1 -0
- package/dist/components/icons/index.js.map +1 -1
- package/dist/components/icons/index.ts +15 -14
- package/dist/images/index.d.ts +1 -0
- package/dist/images/index.js +1 -0
- package/dist/images/index.js.map +1 -1
- package/dist/index.css +78 -3
- package/dist/index.mjs +276 -169
- package/dist/styles/tailwind.css +140 -87
- package/package.json +45 -45
@@ -44,20 +44,20 @@ const TimeSlider = ({ chapters }) => {
|
|
44
44
|
return (_jsxs("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [_jsx("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: _jsx(Slider, { value: timeSlider, handleValueChange: handleValueChange, min: MIN, max: MAX, style: {
|
45
45
|
background: "transparent",
|
46
46
|
} }) }), _jsx("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md", style: {
|
47
|
-
background: `
|
48
|
-
linear-gradient(to right,
|
49
|
-
#f97316 0%,
|
50
|
-
#f97316 ${timeSlider}%,
|
51
|
-
#f9731640 ${timeSlider}%,
|
52
|
-
#f9731640 ${downloadedBufferPercentage}%,
|
53
|
-
#30303030 ${timeSlider}%,
|
54
|
-
#30303030 100%
|
55
|
-
)
|
47
|
+
background: `
|
48
|
+
linear-gradient(to right,
|
49
|
+
#f97316 0%,
|
50
|
+
#f97316 ${timeSlider}%,
|
51
|
+
#f9731640 ${timeSlider}%,
|
52
|
+
#f9731640 ${downloadedBufferPercentage}%,
|
53
|
+
#30303030 ${timeSlider}%,
|
54
|
+
#30303030 100%
|
55
|
+
)
|
56
56
|
`,
|
57
|
-
maskImage: `
|
58
|
-
linear-gradient(to right,
|
59
|
-
${maskCuttes}
|
60
|
-
)
|
57
|
+
maskImage: `
|
58
|
+
linear-gradient(to right,
|
59
|
+
${maskCuttes}
|
60
|
+
)
|
61
61
|
`,
|
62
62
|
maskSize: "100% 100%",
|
63
63
|
maskRepeat: "no-repeat",
|
@@ -1,107 +1,107 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
2
|
-
import Slider from "../Slider";
|
3
|
-
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
4
|
-
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
5
|
-
|
6
|
-
const MIN = 0,
|
7
|
-
MAX = 100;
|
8
|
-
const DEFERENCE = Math.abs(MAX - MIN);
|
9
|
-
const BAR_PERCENTAGE_WIDTH = 0.5;
|
10
|
-
|
11
|
-
type Props = {
|
12
|
-
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
-
};
|
14
|
-
|
15
|
-
const TimeSlider = ({ chapters }: Props) => {
|
16
|
-
const [timeSlider, setTimeSlider] = useState(0);
|
17
|
-
|
18
|
-
const { player, duration, downloadedBufferPercentage } =
|
19
|
-
useSoftBuildersVideoPlayerContext();
|
20
|
-
|
21
|
-
const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
22
|
-
const newTimeSlider = Number(e.target.value);
|
23
|
-
setTimeSlider(newTimeSlider);
|
24
|
-
|
25
|
-
const time = (newTimeSlider * duration) / DEFERENCE;
|
26
|
-
|
27
|
-
player?.currentTime(time);
|
28
|
-
};
|
29
|
-
|
30
|
-
useEffect(() => {
|
31
|
-
const intervalId = setInterval(() => {
|
32
|
-
const currentTime = player?.currentTime() || 0;
|
33
|
-
|
34
|
-
const time = (currentTime * DEFERENCE) / duration;
|
35
|
-
|
36
|
-
setTimeSlider(time);
|
37
|
-
}, 1000);
|
38
|
-
|
39
|
-
// Cleanup function to clear the interval
|
40
|
-
return () => clearInterval(intervalId);
|
41
|
-
}, [player, duration]);
|
42
|
-
|
43
|
-
const [maskCuttes, setMaskCuttes] = useState("");
|
44
|
-
|
45
|
-
useEffect(() => {
|
46
|
-
const arr: string[] = ["black 0%"];
|
47
|
-
chapters.forEach((c) => {
|
48
|
-
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
49
|
-
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
50
|
-
arr.push(`black ${startPercentage}%`);
|
51
|
-
arr.push(`transparent ${startPercentage}%`);
|
52
|
-
arr.push(`transparent ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
53
|
-
|
54
|
-
arr.push(`black ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
55
|
-
arr.push(`black ${endPercentage}%`);
|
56
|
-
|
57
|
-
arr.push(`transparent ${endPercentage}%`);
|
58
|
-
arr.push(`transparent ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
59
|
-
|
60
|
-
arr.push(`black ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
61
|
-
});
|
62
|
-
arr.push(`black 100%`);
|
63
|
-
|
64
|
-
setMaskCuttes(arr.toString());
|
65
|
-
}, [chapters, duration]);
|
66
|
-
|
67
|
-
return (
|
68
|
-
<div className=" sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center">
|
69
|
-
<div className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10">
|
70
|
-
<Slider
|
71
|
-
value={timeSlider}
|
72
|
-
handleValueChange={handleValueChange}
|
73
|
-
min={MIN}
|
74
|
-
max={MAX}
|
75
|
-
style={{
|
76
|
-
background: "transparent",
|
77
|
-
}}
|
78
|
-
/>
|
79
|
-
</div>
|
80
|
-
|
81
|
-
<div
|
82
|
-
className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md"
|
83
|
-
style={{
|
84
|
-
background: `
|
85
|
-
linear-gradient(to right,
|
86
|
-
#f97316 0%,
|
87
|
-
#f97316 ${timeSlider}%,
|
88
|
-
#f9731640 ${timeSlider}%,
|
89
|
-
#f9731640 ${downloadedBufferPercentage}%,
|
90
|
-
#30303030 ${timeSlider}%,
|
91
|
-
#30303030 100%
|
92
|
-
)
|
93
|
-
`,
|
94
|
-
maskImage: `
|
95
|
-
linear-gradient(to right,
|
96
|
-
${maskCuttes}
|
97
|
-
)
|
98
|
-
`,
|
99
|
-
maskSize: "100% 100%",
|
100
|
-
maskRepeat: "no-repeat",
|
101
|
-
}}
|
102
|
-
></div>
|
103
|
-
</div>
|
104
|
-
);
|
105
|
-
};
|
106
|
-
|
107
|
-
export default TimeSlider;
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import Slider from "../Slider";
|
3
|
+
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
4
|
+
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
5
|
+
|
6
|
+
const MIN = 0,
|
7
|
+
MAX = 100;
|
8
|
+
const DEFERENCE = Math.abs(MAX - MIN);
|
9
|
+
const BAR_PERCENTAGE_WIDTH = 0.5;
|
10
|
+
|
11
|
+
type Props = {
|
12
|
+
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
+
};
|
14
|
+
|
15
|
+
const TimeSlider = ({ chapters }: Props) => {
|
16
|
+
const [timeSlider, setTimeSlider] = useState(0);
|
17
|
+
|
18
|
+
const { player, duration, downloadedBufferPercentage } =
|
19
|
+
useSoftBuildersVideoPlayerContext();
|
20
|
+
|
21
|
+
const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
22
|
+
const newTimeSlider = Number(e.target.value);
|
23
|
+
setTimeSlider(newTimeSlider);
|
24
|
+
|
25
|
+
const time = (newTimeSlider * duration) / DEFERENCE;
|
26
|
+
|
27
|
+
player?.currentTime(time);
|
28
|
+
};
|
29
|
+
|
30
|
+
useEffect(() => {
|
31
|
+
const intervalId = setInterval(() => {
|
32
|
+
const currentTime = player?.currentTime() || 0;
|
33
|
+
|
34
|
+
const time = (currentTime * DEFERENCE) / duration;
|
35
|
+
|
36
|
+
setTimeSlider(time);
|
37
|
+
}, 1000);
|
38
|
+
|
39
|
+
// Cleanup function to clear the interval
|
40
|
+
return () => clearInterval(intervalId);
|
41
|
+
}, [player, duration]);
|
42
|
+
|
43
|
+
const [maskCuttes, setMaskCuttes] = useState("");
|
44
|
+
|
45
|
+
useEffect(() => {
|
46
|
+
const arr: string[] = ["black 0%"];
|
47
|
+
chapters.forEach((c) => {
|
48
|
+
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
49
|
+
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
50
|
+
arr.push(`black ${startPercentage}%`);
|
51
|
+
arr.push(`transparent ${startPercentage}%`);
|
52
|
+
arr.push(`transparent ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
53
|
+
|
54
|
+
arr.push(`black ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
55
|
+
arr.push(`black ${endPercentage}%`);
|
56
|
+
|
57
|
+
arr.push(`transparent ${endPercentage}%`);
|
58
|
+
arr.push(`transparent ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
59
|
+
|
60
|
+
arr.push(`black ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
61
|
+
});
|
62
|
+
arr.push(`black 100%`);
|
63
|
+
|
64
|
+
setMaskCuttes(arr.toString());
|
65
|
+
}, [chapters, duration]);
|
66
|
+
|
67
|
+
return (
|
68
|
+
<div className=" sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center">
|
69
|
+
<div className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10">
|
70
|
+
<Slider
|
71
|
+
value={timeSlider}
|
72
|
+
handleValueChange={handleValueChange}
|
73
|
+
min={MIN}
|
74
|
+
max={MAX}
|
75
|
+
style={{
|
76
|
+
background: "transparent",
|
77
|
+
}}
|
78
|
+
/>
|
79
|
+
</div>
|
80
|
+
|
81
|
+
<div
|
82
|
+
className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md"
|
83
|
+
style={{
|
84
|
+
background: `
|
85
|
+
linear-gradient(to right,
|
86
|
+
#f97316 0%,
|
87
|
+
#f97316 ${timeSlider}%,
|
88
|
+
#f9731640 ${timeSlider}%,
|
89
|
+
#f9731640 ${downloadedBufferPercentage}%,
|
90
|
+
#30303030 ${timeSlider}%,
|
91
|
+
#30303030 100%
|
92
|
+
)
|
93
|
+
`,
|
94
|
+
maskImage: `
|
95
|
+
linear-gradient(to right,
|
96
|
+
${maskCuttes}
|
97
|
+
)
|
98
|
+
`,
|
99
|
+
maskSize: "100% 100%",
|
100
|
+
maskRepeat: "no-repeat",
|
101
|
+
}}
|
102
|
+
></div>
|
103
|
+
</div>
|
104
|
+
);
|
105
|
+
};
|
106
|
+
|
107
|
+
export default TimeSlider;
|
@@ -1,35 +1,35 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import NotesPanal from "../NotesPanal";
|
3
|
-
import ChaptersPanal from "../ChaptersPanal";
|
4
|
-
import TimeSlider from "../TimeSlider";
|
5
|
-
import {
|
6
|
-
SoftBuildersVideoPlayerChapter,
|
7
|
-
SoftBuildersVideoPlayerNote,
|
8
|
-
} from "../../types";
|
9
|
-
|
10
|
-
type Props = {
|
11
|
-
notes: SoftBuildersVideoPlayerNote[];
|
12
|
-
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
-
};
|
14
|
-
const TimeSliderContainer = ({ notes, chapters }: Props) => {
|
15
|
-
return (
|
16
|
-
<div
|
17
|
-
id="time-slider-container"
|
18
|
-
className="sb-w-full sb-relative sb-flex sb-items-center sb-justify-center"
|
19
|
-
>
|
20
|
-
<div
|
21
|
-
id="notes-panal"
|
22
|
-
className="sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0"
|
23
|
-
>
|
24
|
-
<NotesPanal notes={notes} />
|
25
|
-
</div>
|
26
|
-
|
27
|
-
<div className="sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0">
|
28
|
-
<ChaptersPanal chapters={chapters} />
|
29
|
-
</div>
|
30
|
-
<TimeSlider chapters={chapters} />
|
31
|
-
</div>
|
32
|
-
);
|
33
|
-
};
|
34
|
-
|
35
|
-
export default TimeSliderContainer;
|
1
|
+
import React from "react";
|
2
|
+
import NotesPanal from "../NotesPanal";
|
3
|
+
import ChaptersPanal from "../ChaptersPanal";
|
4
|
+
import TimeSlider from "../TimeSlider";
|
5
|
+
import {
|
6
|
+
SoftBuildersVideoPlayerChapter,
|
7
|
+
SoftBuildersVideoPlayerNote,
|
8
|
+
} from "../../types";
|
9
|
+
|
10
|
+
type Props = {
|
11
|
+
notes: SoftBuildersVideoPlayerNote[];
|
12
|
+
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
+
};
|
14
|
+
const TimeSliderContainer = ({ notes, chapters }: Props) => {
|
15
|
+
return (
|
16
|
+
<div
|
17
|
+
id="time-slider-container"
|
18
|
+
className="sb-w-full sb-relative sb-flex sb-items-center sb-justify-center"
|
19
|
+
>
|
20
|
+
<div
|
21
|
+
id="notes-panal"
|
22
|
+
className="sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0"
|
23
|
+
>
|
24
|
+
<NotesPanal notes={notes} />
|
25
|
+
</div>
|
26
|
+
|
27
|
+
<div className="sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0">
|
28
|
+
<ChaptersPanal chapters={chapters} />
|
29
|
+
</div>
|
30
|
+
<TimeSlider chapters={chapters} />
|
31
|
+
</div>
|
32
|
+
);
|
33
|
+
};
|
34
|
+
|
35
|
+
export default TimeSliderContainer;
|
@@ -1,16 +1,16 @@
|
|
1
|
-
import React from "react";
|
2
|
-
|
3
|
-
type Props = {
|
4
|
-
open: boolean;
|
5
|
-
children: React.ReactNode;
|
6
|
-
};
|
7
|
-
const Tooltip = ({ open, children }: Props) => {
|
8
|
-
if (!open) return null;
|
9
|
-
return (
|
10
|
-
<div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
|
11
|
-
{children}
|
12
|
-
</div>
|
13
|
-
);
|
14
|
-
};
|
15
|
-
|
16
|
-
export default Tooltip;
|
1
|
+
import React from "react";
|
2
|
+
|
3
|
+
type Props = {
|
4
|
+
open: boolean;
|
5
|
+
children: React.ReactNode;
|
6
|
+
};
|
7
|
+
const Tooltip = ({ open, children }: Props) => {
|
8
|
+
if (!open) return null;
|
9
|
+
return (
|
10
|
+
<div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
|
11
|
+
{children}
|
12
|
+
</div>
|
13
|
+
);
|
14
|
+
};
|
15
|
+
|
16
|
+
export default Tooltip;
|
@@ -8,9 +8,10 @@ export type Props<T = any> = {
|
|
8
8
|
notes: SoftBuildersVideoPlayerNote[];
|
9
9
|
chapters: SoftBuildersVideoPlayerChapter[];
|
10
10
|
startTime?: number;
|
11
|
+
poster?: string;
|
11
12
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
12
13
|
onPlay?: (time: number) => void;
|
13
14
|
onPause?: (time: number) => void;
|
14
15
|
};
|
15
|
-
declare const VideoPlayerComponent: <T>({ id, options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
16
|
+
declare const VideoPlayerComponent: <T>({ id, options, notes, chapters, startTime, handleSaveNoteAction, poster, onPlay, onPause, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
16
17
|
export default VideoPlayerComponent;
|
@@ -15,7 +15,6 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
15
15
|
const element = container.querySelector(".vjs-big-play-button");
|
16
16
|
if (element) {
|
17
17
|
if (!bigPlayButtonRoot[id]) {
|
18
|
-
// If bigPlayButtonRoot hasn't been created, create it
|
19
18
|
bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
|
20
19
|
}
|
21
20
|
bigPlayButtonRoot[id].render(_jsx(BigPlayButton, { player: player, isPaused: isPaused, setIsPaused: setIsPaused }));
|
@@ -29,20 +28,21 @@ const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, ch
|
|
29
28
|
const element = container.querySelector(".vjs-control-bar");
|
30
29
|
if (element) {
|
31
30
|
if (!controlBarRoot[id]) {
|
32
|
-
// If controlBarRoot hasn't been created, create it
|
33
31
|
controlBarRoot[id] = ReactDOM.createRoot(element);
|
34
32
|
}
|
35
|
-
element.style.display = "
|
36
|
-
|
33
|
+
element.style.display = "flex";
|
34
|
+
element.style.height = "100%";
|
35
|
+
element.style.alignItems = "flex-end";
|
36
|
+
controlBarRoot[id].render(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { id: id, player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction }) }));
|
37
37
|
}
|
38
38
|
}
|
39
39
|
};
|
40
|
-
const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, }) => {
|
40
|
+
const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, poster, onPlay, onPause, }) => {
|
41
41
|
const videoRef = useRef(undefined);
|
42
42
|
const playerRef = useRef(undefined);
|
43
43
|
const [isReady, setIsReady] = useState(false);
|
44
44
|
const [isPaused, setIsPaused] = useState(!options.autoplay);
|
45
|
-
const [duration,
|
45
|
+
const [duration, setDuration] = useState(1);
|
46
46
|
const onReady = (player) => {
|
47
47
|
if (playerRef) {
|
48
48
|
playerRef.current = player;
|
@@ -55,7 +55,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
55
55
|
});
|
56
56
|
player.on("loadedmetadata", () => {
|
57
57
|
const d = player.duration() || 0;
|
58
|
-
|
58
|
+
setDuration(d);
|
59
59
|
});
|
60
60
|
}
|
61
61
|
};
|
@@ -63,33 +63,34 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
63
63
|
if (!playerRef.current) {
|
64
64
|
const videoElement = document.createElement("video-js");
|
65
65
|
videoElement.classList.add("vjs-big-play-centered");
|
66
|
+
// Set the poster attribute here
|
67
|
+
if (poster) {
|
68
|
+
videoElement.setAttribute("poster", poster);
|
69
|
+
}
|
66
70
|
videoRef.current.appendChild(videoElement);
|
67
71
|
playerRef.current = videojs(videoElement, options, () => {
|
68
72
|
onReady(playerRef.current);
|
69
73
|
});
|
70
74
|
}
|
71
75
|
return () => {
|
72
|
-
if (playerRef)
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
}
|
87
|
-
}, 0);
|
88
|
-
}
|
76
|
+
if (playerRef.current) {
|
77
|
+
playerRef.current.dispose();
|
78
|
+
playerRef.current = undefined;
|
79
|
+
setTimeout(() => {
|
80
|
+
if (bigPlayButtonRoot[id]) {
|
81
|
+
bigPlayButtonRoot[id].unmount();
|
82
|
+
bigPlayButtonRoot[id] = undefined;
|
83
|
+
}
|
84
|
+
if (controlBarRoot[id]) {
|
85
|
+
controlBarRoot[id].unmount();
|
86
|
+
controlBarRoot[id] = undefined;
|
87
|
+
}
|
88
|
+
}, 0);
|
89
|
+
}
|
89
90
|
};
|
90
|
-
}, [options]);
|
91
|
+
}, [options, poster]); // Added poster to dependency array
|
91
92
|
useEffect(() => {
|
92
|
-
if (playerRef
|
93
|
+
if (playerRef.current && isReady) {
|
93
94
|
const currentTime = playerRef.current.currentTime() || 0;
|
94
95
|
if (isPaused) {
|
95
96
|
if (onPause)
|
@@ -106,7 +107,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
106
107
|
const controlBarTimeout = setTimeout(() => {
|
107
108
|
renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction);
|
108
109
|
}, 500);
|
109
|
-
return () => clearTimeout(controlBarTimeout);
|
110
|
+
return () => clearTimeout(controlBarTimeout);
|
110
111
|
}
|
111
112
|
}, [
|
112
113
|
id,
|
@@ -120,25 +121,40 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
120
121
|
duration,
|
121
122
|
]);
|
122
123
|
useEffect(() => {
|
123
|
-
if (isReady
|
124
|
+
if (isReady) {
|
124
125
|
const playButtonTimeout = setTimeout(() => {
|
125
126
|
renderBigPlayButton(id, playerRef.current, isPaused, setIsPaused);
|
126
127
|
}, 500);
|
127
|
-
return () => clearTimeout(playButtonTimeout);
|
128
|
+
return () => clearTimeout(playButtonTimeout);
|
128
129
|
}
|
129
130
|
}, [id, isPaused, isReady]);
|
130
131
|
useEffect(() => {
|
131
|
-
if (playerRef) {
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
return () => clearInterval(intervalId);
|
138
|
-
}
|
132
|
+
if (playerRef.current) {
|
133
|
+
const intervalId = setInterval(() => {
|
134
|
+
if (playerRef.current)
|
135
|
+
setIsPaused(playerRef.current.paused());
|
136
|
+
}, 500);
|
137
|
+
return () => clearInterval(intervalId);
|
139
138
|
}
|
140
139
|
}, []);
|
141
|
-
|
140
|
+
const handlePlayerClick = () => {
|
141
|
+
if (playerRef.current) {
|
142
|
+
if (playerRef.current.paused()) {
|
143
|
+
playerRef.current.play();
|
144
|
+
setIsPaused(false);
|
145
|
+
}
|
146
|
+
else {
|
147
|
+
playerRef.current.pause();
|
148
|
+
setIsPaused(true);
|
149
|
+
if (onPause)
|
150
|
+
onPause(playerRef.current.currentTime());
|
151
|
+
}
|
152
|
+
}
|
153
|
+
};
|
154
|
+
return (_jsx("div", { id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden hover:sb-cursor-pointer", onClick: handlePlayerClick, children: _jsx("div", { "data-vjs-player": true, style: {
|
155
|
+
height: "100%",
|
156
|
+
position: "relative",
|
157
|
+
}, children: _jsx("div", { ref: videoRef }) }) }));
|
142
158
|
};
|
143
159
|
export default VideoPlayerComponent;
|
144
160
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,UAAU,CAAC;AAE/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,UAAU,MAAM,eAAe,CAAC;AAOvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,+BAA+B,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,IAAI,iBAAiB,GAEjB,EAAE,CAAC;AAEP,MAAM,mBAAmB,GAAG,CAC1B,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACrE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC3B,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":"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"}
|