softbuilders-react-video-player 1.2.4 → 1.2.6
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/dist/components/NoteTooltip/index.js +1 -1
- package/dist/components/NoteTooltip/index.js.map +1 -1
- package/dist/components/NoteTooltip/index.tsx +2 -2
- package/dist/components/QualityMenu/index.js +8 -6
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +8 -7
- package/dist/components/SoftBuildersVideoPlayer/index.d.ts +1 -0
- package/dist/components/SoftBuildersVideoPlayer/index.js +34 -58
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +58 -101
- package/dist/components/SubtitleMenu/index.js +1 -1
- package/dist/components/SubtitleMenu/index.js.map +1 -1
- package/dist/components/SubtitleMenu/index.tsx +1 -1
- package/dist/components/TimeSlider/index.js +8 -2
- package/dist/components/TimeSlider/index.js.map +1 -1
- package/dist/components/TimeSlider/index.tsx +102 -93
- package/dist/components/VideoPlayerComponent/index.d.ts +1 -0
- package/dist/components/VideoPlayerComponent/index.js +91 -82
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +121 -111
- package/dist/index.d.mts +1 -0
- package/dist/index.mjs +135 -147
- package/package.json +1 -1
@@ -4,6 +4,8 @@ import videojs from "video.js";
|
|
4
4
|
import Player from "video.js/dist/types/player";
|
5
5
|
import "video.js/dist/video-js.css";
|
6
6
|
import ControlBar from "../ControlBar";
|
7
|
+
import { isEqual } from "lodash";
|
8
|
+
|
7
9
|
import {
|
8
10
|
SoftBuildersVideoPlayerChapter,
|
9
11
|
SoftBuildersVideoPlayerNote,
|
@@ -13,8 +15,7 @@ import "./style/style.css";
|
|
13
15
|
import "../../styles/tailwind.css";
|
14
16
|
import { SoftBuildersVideoPlayerProvider } from "./provider";
|
15
17
|
import BigPlayButton from "../BigPlayButton";
|
16
|
-
import {
|
17
|
-
|
18
|
+
import { use } from "video.js/dist/types/tech/middleware";
|
18
19
|
let bigPlayButtonRoot: {
|
19
20
|
[key: string]: ReactDOM.Root | undefined;
|
20
21
|
} = {};
|
@@ -69,27 +70,21 @@ const renderControlBar = <T,>(
|
|
69
70
|
noteButtonClick?: (e: any) => void
|
70
71
|
) => {
|
71
72
|
const container = document.getElementById(`video-container-${id}`);
|
72
|
-
console.log("container: ", container);
|
73
|
-
|
74
73
|
if (container) {
|
75
|
-
console.log("container1: ");
|
76
|
-
|
77
74
|
container.style.height = "100%";
|
78
75
|
container.style.aspectRatio = "16 / 9";
|
79
76
|
const element: any = container.querySelector(".vjs-control-bar");
|
80
77
|
if (element) {
|
81
|
-
console.log("container2: ");
|
82
|
-
|
83
78
|
if (!controlBarRoot[id]) {
|
79
|
+
console.log("pooklo");
|
80
|
+
|
84
81
|
controlBarRoot[id] = ReactDOM.createRoot(element as HTMLElement);
|
85
|
-
element.style.display = "flex";
|
86
|
-
element.style.height = "100%";
|
87
|
-
element.style.alignItems = "flex-end";
|
88
82
|
}
|
89
|
-
|
83
|
+
element.style.display = "flex";
|
90
84
|
element.style.opacity = opacity;
|
91
85
|
element.style.backgroundColor = `${bgColor} !important`;
|
92
|
-
|
86
|
+
element.style.height = "100%";
|
87
|
+
element.style.alignItems = "flex-end";
|
93
88
|
controlBarRoot[id].render(
|
94
89
|
<SoftBuildersVideoPlayerProvider>
|
95
90
|
<ControlBar
|
@@ -128,8 +123,8 @@ export type Props<T = any> = {
|
|
128
123
|
bottomRedBar?: boolean;
|
129
124
|
childRef?: React.Ref<HTMLDivElement>;
|
130
125
|
noteButtonClick?: (e: any) => void;
|
126
|
+
videoID?: string;
|
131
127
|
};
|
132
|
-
|
133
128
|
const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
134
129
|
(
|
135
130
|
{
|
@@ -146,11 +141,14 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
146
141
|
childRef,
|
147
142
|
bottomRedBar = true,
|
148
143
|
noteButtonClick,
|
144
|
+
videoID,
|
149
145
|
}: Props,
|
150
|
-
ref
|
146
|
+
ref: any
|
151
147
|
) => {
|
152
148
|
const videoRef = useRef<any>(undefined);
|
153
149
|
const playerRef = useRef<Player | undefined>(undefined);
|
150
|
+
const idRef = useRef<any | undefined>(undefined);
|
151
|
+
|
154
152
|
const [isReady, setIsReady] = useState(false);
|
155
153
|
const [isPaused, setIsPaused] = useState(!options.autoplay);
|
156
154
|
const [duration, setDuration] = useState(1);
|
@@ -159,15 +157,15 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
159
157
|
const [bgColor, setBgColor] = useState("transparent");
|
160
158
|
const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false);
|
161
159
|
const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
|
160
|
+
const [isHovered, setIsHovered] = useState(false);
|
162
161
|
const [isNoteOpen, setNoteOpen] = useState(false);
|
163
|
-
console.log("notes", notes);
|
164
|
-
|
165
162
|
const onReady = (player: Player) => {
|
166
|
-
console.log("onReady: ", onReady);
|
167
163
|
if (playerRef) {
|
168
164
|
playerRef.current = player;
|
169
165
|
setIsReady(true);
|
166
|
+
|
170
167
|
player?.currentTime(startTime);
|
168
|
+
console.log("startTime: ", startTime);
|
171
169
|
|
172
170
|
player.on("waiting", () => {});
|
173
171
|
player.on("dispose", () => {
|
@@ -180,42 +178,32 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
180
178
|
});
|
181
179
|
}
|
182
180
|
};
|
181
|
+
useEffect(() => {
|
182
|
+
if (!playerRef.current) {
|
183
|
+
const videoElement = document.createElement("video-js");
|
183
184
|
|
184
|
-
|
185
|
-
const videoElement = document.createElement("video-js");
|
186
|
-
videoElement.setAttribute("playsinline", "true");
|
187
|
-
videoElement.classList.add("vjs-big-play-centered");
|
188
|
-
if (poster) {
|
189
|
-
videoElement.setAttribute("poster", poster);
|
190
|
-
}
|
191
|
-
videoRef.current.appendChild(videoElement);
|
192
|
-
videoElement.style.width = "100%";
|
193
|
-
videoElement.style.height = "100%";
|
185
|
+
videoElement.setAttribute("playsinline", "true");
|
194
186
|
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
};
|
200
|
-
useEffect(() => {
|
201
|
-
if (playerRef.current) {
|
202
|
-
if (!isEqual(playerRef.current.poster_, poster)) {
|
203
|
-
playerRef.current.dispose();
|
204
|
-
console.log("dispose: ");
|
205
|
-
playerRef.current = undefined;
|
187
|
+
videoElement.classList.add("vjs-big-play-centered");
|
188
|
+
// Set the poster attribute here
|
189
|
+
if (poster) {
|
190
|
+
videoElement.setAttribute("poster", poster);
|
206
191
|
}
|
192
|
+
videoRef.current.appendChild(videoElement);
|
193
|
+
videoElement.style.width = "100%";
|
194
|
+
videoElement.style.height = "100%";
|
195
|
+
videoElement.style.objectFit = "cover";
|
196
|
+
playerRef.current = videojs(videoElement, options, () => {
|
197
|
+
onReady(playerRef.current as Player);
|
198
|
+
});
|
207
199
|
}
|
208
|
-
initializePlayer();
|
209
|
-
console.log("initializePlayer: ghhh");
|
210
|
-
}, [options]);
|
211
|
-
useEffect(() => {
|
212
200
|
return () => {
|
213
201
|
if (playerRef.current) {
|
214
|
-
|
215
|
-
|
202
|
+
if (!isEqual(idRef?.current?.sources ?? "", options.sources)) {
|
203
|
+
idRef.current = options;
|
216
204
|
playerRef.current.dispose();
|
217
|
-
console.log("dispose7: ");
|
218
205
|
playerRef.current = undefined;
|
206
|
+
console.log("dispose8: ");
|
219
207
|
setTimeout(() => {
|
220
208
|
if (bigPlayButtonRoot[id]) {
|
221
209
|
bigPlayButtonRoot[id].unmount();
|
@@ -227,60 +215,74 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
227
215
|
}
|
228
216
|
}, 0);
|
229
217
|
}
|
218
|
+
|
219
|
+
// setTimeout(() => {
|
220
|
+
// if (bigPlayButtonRoot[id]) {
|
221
|
+
// bigPlayButtonRoot[id].unmount();
|
222
|
+
// bigPlayButtonRoot[id] = undefined;
|
223
|
+
// }
|
224
|
+
// if (controlBarRoot[id]) {
|
225
|
+
// controlBarRoot[id].unmount();
|
226
|
+
// controlBarRoot[id] = undefined;
|
227
|
+
// }
|
228
|
+
// }, 0);
|
230
229
|
}
|
231
230
|
};
|
232
231
|
}, [options]);
|
232
|
+
// Added poster to dependency array
|
233
|
+
|
234
|
+
useEffect(() => {
|
235
|
+
if (playerRef.current) {
|
236
|
+
console.log("time");
|
237
|
+
|
238
|
+
playerRef.current.currentTime(startTime);
|
239
|
+
}
|
240
|
+
}, [startTime]);
|
233
241
|
useEffect(() => {
|
234
242
|
if (playerRef.current && isReady) {
|
235
243
|
const currentTime = playerRef.current.currentTime() || 0;
|
244
|
+
console.log("currentTime: ", currentTime);
|
236
245
|
if (isPaused) {
|
237
246
|
if (onPause) onPause(currentTime);
|
238
247
|
} else {
|
239
248
|
if (onPlay) onPlay(currentTime);
|
240
249
|
}
|
241
250
|
}
|
242
|
-
}, [isPaused
|
251
|
+
}, [isPaused]);
|
243
252
|
|
244
253
|
useEffect(() => {
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
);
|
270
|
-
}, 0);
|
271
|
-
return () => clearTimeout(controlBarTimeout);
|
272
|
-
}
|
254
|
+
const controlBarTimeout = setTimeout(() => {
|
255
|
+
renderControlBar(
|
256
|
+
id,
|
257
|
+
playerRef.current,
|
258
|
+
isPaused,
|
259
|
+
setIsPaused,
|
260
|
+
duration,
|
261
|
+
notes,
|
262
|
+
chapters,
|
263
|
+
5,
|
264
|
+
handleSaveNoteAction,
|
265
|
+
opacity,
|
266
|
+
(e: any) => {
|
267
|
+
handlePlayerClick(e, true);
|
268
|
+
},
|
269
|
+
bgColor,
|
270
|
+
setIsQualityMenuOpen,
|
271
|
+
setIsSubtitleMenuOpen,
|
272
|
+
disableNote,
|
273
|
+
setNoteOpen,
|
274
|
+
noteButtonClick
|
275
|
+
);
|
276
|
+
}, 0);
|
277
|
+
return () => clearTimeout(controlBarTimeout);
|
273
278
|
}, [
|
274
|
-
id,
|
275
|
-
playerRef,
|
276
279
|
isPaused,
|
277
280
|
setIsPaused,
|
278
281
|
notes,
|
279
|
-
chapters,
|
280
|
-
isReady,
|
281
282
|
handleSaveNoteAction,
|
282
283
|
duration,
|
283
284
|
opacity,
|
285
|
+
isReady,
|
284
286
|
]);
|
285
287
|
useEffect(() => {
|
286
288
|
if (isReady) {
|
@@ -295,36 +297,32 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
295
297
|
}, 500);
|
296
298
|
return () => clearTimeout(playButtonTimeout);
|
297
299
|
}
|
298
|
-
}, [
|
300
|
+
}, [isPaused, opacity, isReady, options]);
|
299
301
|
useEffect(() => {
|
300
302
|
if (playerRef.current) {
|
301
|
-
playerRef.current.dispose();
|
302
|
-
console.log("dispose7: ");
|
303
|
-
playerRef.current = undefined;
|
304
|
-
setTimeout(() => {
|
305
|
-
if (bigPlayButtonRoot[id]) {
|
306
|
-
bigPlayButtonRoot[id].unmount();
|
307
|
-
bigPlayButtonRoot[id] = undefined;
|
308
|
-
}
|
309
|
-
if (controlBarRoot[id]) {
|
310
|
-
controlBarRoot[id].unmount();
|
311
|
-
controlBarRoot[id] = undefined;
|
312
|
-
}
|
313
|
-
}, 0);
|
314
303
|
const intervalId = setInterval(() => {
|
315
304
|
if (playerRef.current) setIsPaused(playerRef.current.paused());
|
316
305
|
}, 500);
|
317
306
|
return () => clearInterval(intervalId);
|
318
307
|
}
|
319
308
|
}, []);
|
320
|
-
useEffect(() => {
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
309
|
+
// useEffect(() => {
|
310
|
+
// return () => {
|
311
|
+
// if (playerRef.current) {
|
312
|
+
// playerRef.current.dispose();
|
313
|
+
// playerRef.current = undefined;
|
314
|
+
// // Cleanup play button and control bar renders
|
315
|
+
// if (bigPlayButtonRoot[id]) {
|
316
|
+
// bigPlayButtonRoot[id].unmount();
|
317
|
+
// bigPlayButtonRoot[id] = undefined;
|
318
|
+
// }
|
319
|
+
// if (controlBarRoot[id]) {
|
320
|
+
// controlBarRoot[id].unmount();
|
321
|
+
// controlBarRoot[id] = undefined;
|
322
|
+
// }
|
323
|
+
// }
|
324
|
+
// };
|
325
|
+
// }, []);
|
328
326
|
const timeoutRef = useRef<any>(null);
|
329
327
|
useEffect(() => {
|
330
328
|
if (isQualityMenuOpen || isSubtitleMenuOpen) {
|
@@ -343,14 +341,26 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
343
341
|
}, 3000);
|
344
342
|
}
|
345
343
|
}, [isQualityMenuOpen, isSubtitleMenuOpen]);
|
346
|
-
|
347
344
|
useEffect(() => {
|
348
|
-
console.log("
|
349
|
-
|
345
|
+
console.log("isNoteOpen: ", isNoteOpen);
|
346
|
+
|
347
|
+
if (isNoteOpen) {
|
348
|
+
if (timeoutRef.current) {
|
349
|
+
clearTimeout(timeoutRef.current);
|
350
|
+
}
|
351
|
+
} else {
|
352
|
+
if (timeoutRef.current) {
|
353
|
+
clearTimeout(timeoutRef.current);
|
354
|
+
}
|
355
|
+
|
356
|
+
timeoutRef.current = setTimeout(() => {
|
357
|
+
setIsControlBarPresent(false);
|
358
|
+
}, 3000);
|
359
|
+
}
|
360
|
+
}, [isNoteOpen]);
|
350
361
|
|
351
362
|
const handlePlayerClick = async (e: any, isTimerOnly = false) => {
|
352
363
|
e.preventDefault();
|
353
|
-
|
354
364
|
if (timeoutRef.current) {
|
355
365
|
clearTimeout(timeoutRef.current);
|
356
366
|
}
|
@@ -372,8 +382,6 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
372
382
|
if (playerRef.current) {
|
373
383
|
if (playerRef.current.paused()) {
|
374
384
|
try {
|
375
|
-
// startTime && playerRef.current.currentTime(startTime);
|
376
|
-
console.log("startTime: ", startTime);
|
377
385
|
await playerRef.current.play();
|
378
386
|
setIsPaused(false);
|
379
387
|
} catch (error) {
|
@@ -421,12 +429,12 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
421
429
|
}, []);
|
422
430
|
|
423
431
|
const [timeSeeker, setTimeSeeker] = useState<string>("0");
|
424
|
-
|
425
432
|
useEffect(() => {
|
426
433
|
const updateTimeSeeker = () => {
|
427
|
-
if (playerRef.current) {
|
434
|
+
if (playerRef.current && isReady) {
|
428
435
|
const currentTime = playerRef.current.currentTime();
|
429
436
|
const duration = playerRef.current.duration();
|
437
|
+
console.log("duration: ", duration, currentTime);
|
430
438
|
|
431
439
|
if (duration && currentTime !== undefined) {
|
432
440
|
setTimeSeeker(`${(currentTime / duration) * 100}%`);
|
@@ -445,10 +453,12 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
|
|
445
453
|
<div
|
446
454
|
ref={videoRefs}
|
447
455
|
id={`video-container-${id}`}
|
448
|
-
onMouseMove={(
|
449
|
-
handlePlayerClick(
|
456
|
+
onMouseMove={() => {
|
457
|
+
!isNoteOpen ? handlePlayerClick(event, true) : "";
|
450
458
|
}}
|
451
459
|
className="sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 "
|
460
|
+
onMouseEnter={() => setIsHovered(true)}
|
461
|
+
onMouseLeave={() => setIsHovered(false)}
|
452
462
|
>
|
453
463
|
{bottomRedBar && (
|
454
464
|
<div
|
package/dist/index.d.mts
CHANGED
@@ -52,6 +52,7 @@ type Props<T = any> = {
|
|
52
52
|
bottomRedBar?: boolean;
|
53
53
|
childRef?: React$1.Ref<HTMLDivElement>;
|
54
54
|
noteButtonClick?: (e: any) => void;
|
55
|
+
videoId?: string;
|
55
56
|
};
|
56
57
|
declare const SoftBuildersVideoPlayer: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Props<any> & React$1.RefAttributes<HTMLDivElement>>>;
|
57
58
|
|