softbuilders-react-video-player 1.1.14 → 1.1.15
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/ControlBar/index.js +1 -2
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +2 -3
- package/dist/components/VideoPlayerComponent/index.js +1 -1
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +2 -33
- package/dist/components/VolumeSlider/index.js +1 -1
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +2 -12
- package/dist/index.mjs +3 -4
- package/package.json +1 -1
@@ -13,7 +13,7 @@ import SubtitleMenu from "../SubtitleMenu";
|
|
13
13
|
import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon, } from "../../images";
|
14
14
|
const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, }) => {
|
15
15
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
16
|
-
const [width, setwidth] = useState(
|
16
|
+
const [width, setwidth] = useState(0);
|
17
17
|
const seek = (duration) => {
|
18
18
|
const currentTime = Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0);
|
19
19
|
player === null || player === void 0 ? void 0 : player.currentTime(currentTime + duration);
|
@@ -33,7 +33,6 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
33
33
|
const togglePlay = (e) => {
|
34
34
|
e.preventDefault();
|
35
35
|
e.stopPropagation();
|
36
|
-
console.log("ok");
|
37
36
|
if (isPaused)
|
38
37
|
player === null || player === void 0 ? void 0 : player.play();
|
39
38
|
else
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AACzD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAKvD,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,SAAS,EACT,QAAQ,GACT,MAAM,cAAc,CAAC;AAatB,MAAM,UAAU,GAAG,CAAK,EACtB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,CAAC,EACZ,EAAE,EACF,oBAAoB,GACX,EAAE,EAAE;IACb,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,iCAAiC,EAAE,CAAC;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
|
@@ -47,14 +47,14 @@ const ControlBar = <T,>({
|
|
47
47
|
handleSaveNoteAction,
|
48
48
|
}: Props<T>) => {
|
49
49
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
50
|
-
const [width, setwidth] = useState(
|
50
|
+
const [width, setwidth] = useState<number>(0);
|
51
51
|
|
52
52
|
const seek = (duration: number) => {
|
53
53
|
const currentTime = Number(player?.currentTime() || 0);
|
54
54
|
player?.currentTime(currentTime + duration);
|
55
55
|
};
|
56
56
|
const container = document.getElementById(`video-container-${id}`);
|
57
|
-
function handleWidthChange(width) {
|
57
|
+
function handleWidthChange(width: any) {
|
58
58
|
setwidth(width);
|
59
59
|
}
|
60
60
|
const resizeObserver = new ResizeObserver((entries) => {
|
@@ -69,7 +69,6 @@ const ControlBar = <T,>({
|
|
69
69
|
const togglePlay = (e) => {
|
70
70
|
e.preventDefault();
|
71
71
|
e.stopPropagation();
|
72
|
-
console.log("ok");
|
73
72
|
|
74
73
|
if (isPaused) player?.play();
|
75
74
|
else player?.pause();
|
@@ -149,7 +149,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
149
149
|
playerRef.current.pause();
|
150
150
|
setIsPaused(true);
|
151
151
|
if (onPause)
|
152
|
-
onPause(playerRef.current.currentTime());
|
152
|
+
onPause(playerRef.current.currentTime() || 0);
|
153
153
|
}
|
154
154
|
}
|
155
155
|
};
|
@@ -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;
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":"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"}
|
@@ -9,16 +9,13 @@ import {
|
|
9
9
|
SoftBuildersVideoPlayerNote,
|
10
10
|
SoftBuildersVideoPlayerOptions,
|
11
11
|
} from "../../types";
|
12
|
-
|
13
12
|
import "./style/style.css";
|
14
13
|
import "../../styles/tailwind.css";
|
15
14
|
import { SoftBuildersVideoPlayerProvider } from "./provider";
|
16
15
|
import BigPlayButton from "../BigPlayButton";
|
17
|
-
|
18
16
|
let bigPlayButtonRoot: {
|
19
17
|
[key: string]: ReactDOM.Root | undefined;
|
20
18
|
} = {};
|
21
|
-
|
22
19
|
const renderBigPlayButton = (
|
23
20
|
id: string,
|
24
21
|
player: Player | undefined,
|
@@ -32,7 +29,6 @@ const renderBigPlayButton = (
|
|
32
29
|
if (!bigPlayButtonRoot[id]) {
|
33
30
|
bigPlayButtonRoot[id] = ReactDOM.createRoot(element as HTMLElement);
|
34
31
|
}
|
35
|
-
|
36
32
|
bigPlayButtonRoot[id].render(
|
37
33
|
<BigPlayButton
|
38
34
|
player={player}
|
@@ -43,11 +39,9 @@ const renderBigPlayButton = (
|
|
43
39
|
}
|
44
40
|
}
|
45
41
|
};
|
46
|
-
|
47
42
|
let controlBarRoot: {
|
48
43
|
[key: string]: ReactDOM.Root | undefined;
|
49
44
|
} = {};
|
50
|
-
|
51
45
|
const renderControlBar = <T,>(
|
52
46
|
id: string,
|
53
47
|
player: Player | undefined,
|
@@ -60,14 +54,12 @@ const renderControlBar = <T,>(
|
|
60
54
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>
|
61
55
|
) => {
|
62
56
|
const container = document.getElementById(`video-container-${id}`);
|
63
|
-
|
64
57
|
if (container) {
|
65
58
|
const element: any = container.querySelector(".vjs-control-bar");
|
66
59
|
if (element) {
|
67
60
|
if (!controlBarRoot[id]) {
|
68
61
|
controlBarRoot[id] = ReactDOM.createRoot(element as HTMLElement);
|
69
62
|
}
|
70
|
-
|
71
63
|
element.style.display = "flex";
|
72
64
|
element.style.height = "100%";
|
73
65
|
element.style.alignItems = "flex-end";
|
@@ -89,7 +81,6 @@ const renderControlBar = <T,>(
|
|
89
81
|
}
|
90
82
|
}
|
91
83
|
};
|
92
|
-
|
93
84
|
export type Props<T = any> = {
|
94
85
|
id: string;
|
95
86
|
options: SoftBuildersVideoPlayerOptions;
|
@@ -101,7 +92,6 @@ export type Props<T = any> = {
|
|
101
92
|
onPlay?: (time: number) => void;
|
102
93
|
onPause?: (time: number) => void;
|
103
94
|
};
|
104
|
-
|
105
95
|
const VideoPlayerComponent = <T,>({
|
106
96
|
id,
|
107
97
|
options,
|
@@ -115,31 +105,25 @@ const VideoPlayerComponent = <T,>({
|
|
115
105
|
}: Props<T>) => {
|
116
106
|
const videoRef = useRef<any>(undefined);
|
117
107
|
const playerRef = useRef<Player | undefined>(undefined);
|
118
|
-
|
119
108
|
const [isReady, setIsReady] = useState(false);
|
120
109
|
const [isPaused, setIsPaused] = useState(!options.autoplay);
|
121
110
|
const [duration, setDuration] = useState(1);
|
122
|
-
|
123
111
|
const onReady = (player: Player) => {
|
124
112
|
if (playerRef) {
|
125
113
|
playerRef.current = player;
|
126
114
|
setIsReady(true);
|
127
115
|
player.currentTime(startTime);
|
128
|
-
|
129
116
|
player.on("waiting", () => {});
|
130
|
-
|
131
117
|
player.on("dispose", () => {
|
132
118
|
videojs.log("player will dispose");
|
133
119
|
setIsReady(false);
|
134
120
|
});
|
135
|
-
|
136
121
|
player.on("loadedmetadata", () => {
|
137
122
|
const d = player.duration() || 0;
|
138
123
|
setDuration(d);
|
139
124
|
});
|
140
125
|
}
|
141
126
|
};
|
142
|
-
|
143
127
|
useEffect(() => {
|
144
128
|
if (!playerRef.current) {
|
145
129
|
const videoElement = document.createElement("video-js");
|
@@ -149,17 +133,14 @@ const VideoPlayerComponent = <T,>({
|
|
149
133
|
videoElement.setAttribute("poster", poster);
|
150
134
|
}
|
151
135
|
videoRef.current.appendChild(videoElement);
|
152
|
-
|
153
136
|
playerRef.current = videojs(videoElement, options, () => {
|
154
137
|
onReady(playerRef.current as Player);
|
155
138
|
});
|
156
139
|
}
|
157
|
-
|
158
140
|
return () => {
|
159
141
|
if (playerRef.current) {
|
160
142
|
playerRef.current.dispose();
|
161
143
|
playerRef.current = undefined;
|
162
|
-
|
163
144
|
setTimeout(() => {
|
164
145
|
if (bigPlayButtonRoot[id]) {
|
165
146
|
bigPlayButtonRoot[id].unmount();
|
@@ -173,11 +154,9 @@ const VideoPlayerComponent = <T,>({
|
|
173
154
|
}
|
174
155
|
};
|
175
156
|
}, [options, poster]); // Added poster to dependency array
|
176
|
-
|
177
157
|
useEffect(() => {
|
178
158
|
if (playerRef.current && isReady) {
|
179
159
|
const currentTime = playerRef.current.currentTime() || 0;
|
180
|
-
|
181
160
|
if (isPaused) {
|
182
161
|
if (onPause) onPause(currentTime);
|
183
162
|
} else {
|
@@ -185,7 +164,6 @@ const VideoPlayerComponent = <T,>({
|
|
185
164
|
}
|
186
165
|
}
|
187
166
|
}, [isPaused, isReady]);
|
188
|
-
|
189
167
|
useEffect(() => {
|
190
168
|
if (isReady) {
|
191
169
|
const controlBarTimeout = setTimeout(() => {
|
@@ -201,7 +179,6 @@ const VideoPlayerComponent = <T,>({
|
|
201
179
|
handleSaveNoteAction
|
202
180
|
);
|
203
181
|
}, 500);
|
204
|
-
|
205
182
|
return () => clearTimeout(controlBarTimeout);
|
206
183
|
}
|
207
184
|
}, [
|
@@ -215,31 +192,25 @@ const VideoPlayerComponent = <T,>({
|
|
215
192
|
handleSaveNoteAction,
|
216
193
|
duration,
|
217
194
|
]);
|
218
|
-
|
219
195
|
useEffect(() => {
|
220
196
|
if (isReady) {
|
221
197
|
const playButtonTimeout = setTimeout(() => {
|
222
198
|
renderBigPlayButton(id, playerRef.current, isPaused, setIsPaused);
|
223
199
|
}, 500);
|
224
|
-
|
225
200
|
return () => clearTimeout(playButtonTimeout);
|
226
201
|
}
|
227
202
|
}, [id, isPaused, isReady]);
|
228
|
-
|
229
203
|
useEffect(() => {
|
230
204
|
if (playerRef.current) {
|
231
205
|
const intervalId = setInterval(() => {
|
232
206
|
if (playerRef.current) setIsPaused(playerRef.current.paused());
|
233
207
|
}, 500);
|
234
|
-
|
235
208
|
return () => clearInterval(intervalId);
|
236
209
|
}
|
237
210
|
}, []);
|
238
|
-
|
239
|
-
const handlePlayerClick = (e) => {
|
211
|
+
const handlePlayerClick = (e: any) => {
|
240
212
|
e.preventDefault();
|
241
213
|
console.log("all");
|
242
|
-
|
243
214
|
if (playerRef.current) {
|
244
215
|
if (playerRef.current.paused()) {
|
245
216
|
playerRef.current.play();
|
@@ -247,11 +218,10 @@ const VideoPlayerComponent = <T,>({
|
|
247
218
|
} else {
|
248
219
|
playerRef.current.pause();
|
249
220
|
setIsPaused(true);
|
250
|
-
if (onPause) onPause(playerRef.current.currentTime());
|
221
|
+
if (onPause) onPause(playerRef.current.currentTime() || 0);
|
251
222
|
}
|
252
223
|
}
|
253
224
|
};
|
254
|
-
|
255
225
|
return (
|
256
226
|
<div
|
257
227
|
id={`video-container-${id}`}
|
@@ -271,5 +241,4 @@ const VideoPlayerComponent = <T,>({
|
|
271
241
|
</div>
|
272
242
|
);
|
273
243
|
};
|
274
|
-
|
275
244
|
export default VideoPlayerComponent;
|
@@ -4,7 +4,7 @@ import Slider from "../Slider";
|
|
4
4
|
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
5
5
|
import { MuteIcon, UnmuteIcon } from "../../images";
|
6
6
|
const MIN = 0, MAX = 100;
|
7
|
-
const VolumeSlider = ({ width }) => {
|
7
|
+
const VolumeSlider = ({ width = 0 }) => {
|
8
8
|
const { player } = useSoftBuildersVideoPlayerContext();
|
9
9
|
const [isVisible, setVisible] = useState(false);
|
10
10
|
const [volume, setVolume] = useState(0);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
|
@@ -2,44 +2,35 @@ import React, { useEffect, useState } from "react";
|
|
2
2
|
import Slider from "../Slider";
|
3
3
|
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
4
4
|
import { MuteIcon, UnmuteIcon } from "../../images";
|
5
|
-
|
6
5
|
const MIN = 0,
|
7
6
|
MAX = 100;
|
8
|
-
|
9
7
|
type Props = {
|
10
8
|
width?: number;
|
11
9
|
};
|
12
|
-
|
13
|
-
const VolumeSlider = ({ width }: Props) => {
|
10
|
+
const VolumeSlider = ({ width = 0 }: Props) => {
|
14
11
|
const { player } = useSoftBuildersVideoPlayerContext();
|
15
12
|
const [isVisible, setVisible] = useState(false);
|
16
13
|
const [volume, setVolume] = useState(0);
|
17
|
-
|
18
14
|
useEffect(() => {
|
19
15
|
setVolume(player?.muted() ? 0 : Number(player?.volume()) * 100 || 0);
|
20
16
|
}, [player]);
|
21
|
-
const toggleVisiblity = (e) => {
|
17
|
+
const toggleVisiblity = (e: any) => {
|
22
18
|
e.preventDefault();
|
23
19
|
e.stopPropagation();
|
24
20
|
setVisible((prev) => !prev);
|
25
21
|
};
|
26
|
-
|
27
22
|
const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
28
23
|
e.preventDefault();
|
29
24
|
e.stopPropagation();
|
30
25
|
const newVolume = Number(e.target.value);
|
31
|
-
|
32
26
|
setVolume(newVolume);
|
33
|
-
|
34
27
|
player?.volume(newVolume / 100);
|
35
|
-
|
36
28
|
if (newVolume === 0) {
|
37
29
|
player?.muted(true);
|
38
30
|
} else {
|
39
31
|
player?.muted(false);
|
40
32
|
}
|
41
33
|
};
|
42
|
-
|
43
34
|
return (
|
44
35
|
<div
|
45
36
|
className={`sb-flex sb-flex-col-reverse ${
|
@@ -91,5 +82,4 @@ const VolumeSlider = ({ width }: Props) => {
|
|
91
82
|
</div>
|
92
83
|
);
|
93
84
|
};
|
94
|
-
|
95
85
|
export default VolumeSlider;
|
package/dist/index.mjs
CHANGED
@@ -510,7 +510,7 @@ var SubIcon_default = SvgSubIcon;
|
|
510
510
|
import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
|
511
511
|
var MIN = 0;
|
512
512
|
var MAX = 100;
|
513
|
-
var VolumeSlider = ({ width }) => {
|
513
|
+
var VolumeSlider = ({ width = 0 }) => {
|
514
514
|
const { player } = useSoftBuildersVideoPlayerContext();
|
515
515
|
const [isVisible, setVisible] = useState2(false);
|
516
516
|
const [volume, setVolume] = useState2(0);
|
@@ -1129,7 +1129,7 @@ var ControlBar = ({
|
|
1129
1129
|
handleSaveNoteAction
|
1130
1130
|
}) => {
|
1131
1131
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
1132
|
-
const [width, setwidth] = useState12(
|
1132
|
+
const [width, setwidth] = useState12(0);
|
1133
1133
|
const seek = (duration2) => {
|
1134
1134
|
const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
|
1135
1135
|
player == null ? void 0 : player.currentTime(currentTime + duration2);
|
@@ -1148,7 +1148,6 @@ var ControlBar = ({
|
|
1148
1148
|
const togglePlay = (e) => {
|
1149
1149
|
e.preventDefault();
|
1150
1150
|
e.stopPropagation();
|
1151
|
-
console.log("ok");
|
1152
1151
|
if (isPaused) player == null ? void 0 : player.play();
|
1153
1152
|
else player == null ? void 0 : player.pause();
|
1154
1153
|
setIsPaused(!isPaused);
|
@@ -1408,7 +1407,7 @@ var VideoPlayerComponent = ({
|
|
1408
1407
|
} else {
|
1409
1408
|
playerRef.current.pause();
|
1410
1409
|
setIsPaused(true);
|
1411
|
-
if (onPause) onPause(playerRef.current.currentTime());
|
1410
|
+
if (onPause) onPause(playerRef.current.currentTime() || 0);
|
1412
1411
|
}
|
1413
1412
|
}
|
1414
1413
|
};
|