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.
@@ -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 { isEqual } from "lodash";
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?: any
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
- const initializePlayer = () => {
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
- playerRef.current = videojs(videoElement, options, () => {
196
- playerRef.current?.currentTime(startTime);
197
- });
198
- onReady(playerRef.current);
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
- console.log(playerRef.current, options, "jk");
215
- if (!isEqual(playerRef.current.poster_, poster)) {
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, isReady]);
251
+ }, [isPaused]);
243
252
 
244
253
  useEffect(() => {
245
- if (isReady) {
246
- const controlBarTimeout = setTimeout(() => {
247
- console.log("isReady: ", isReady);
248
-
249
- renderControlBar(
250
- id,
251
- playerRef.current,
252
- isPaused,
253
- setIsPaused,
254
- duration,
255
- notes,
256
- chapters,
257
- 5,
258
- handleSaveNoteAction,
259
- opacity,
260
- (e: any) => {
261
- handlePlayerClick(e, true);
262
- },
263
- bgColor,
264
- setIsQualityMenuOpen,
265
- setIsSubtitleMenuOpen,
266
- disableNote,
267
- setNoteOpen,
268
- noteButtonClick
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
- }, [id, isPaused, isReady, opacity, options, notes]);
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
- if (playerRef.current) {
322
- playerRef.current?.currentTime(startTime);
323
- console.log("startTimenotes: ", startTime);
324
- playerRef.current?.play();
325
- }
326
- }, [startTime]);
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("notes: ", notes);
349
- }, [notes]);
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={(e) => {
449
- handlePlayerClick(e, true);
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