softbuilders-react-video-player 1.1.69 → 1.1.71

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. package/dist/components/ControlBar/index.js +23 -34
  2. package/dist/components/ControlBar/index.js.map +1 -1
  3. package/dist/components/ControlBar/index.tsx +70 -68
  4. package/dist/components/CreateNoteMenu/index.d.ts +3 -1
  5. package/dist/components/CreateNoteMenu/index.js +2 -2
  6. package/dist/components/CreateNoteMenu/index.js.map +1 -1
  7. package/dist/components/CreateNoteMenu/index.tsx +6 -0
  8. package/dist/components/MenuButton/index.d.ts +3 -1
  9. package/dist/components/MenuButton/index.js +2 -2
  10. package/dist/components/MenuButton/index.js.map +1 -1
  11. package/dist/components/MenuButton/index.tsx +9 -1
  12. package/dist/components/QualityMenu/index.js +1 -1
  13. package/dist/components/QualityMenu/index.js.map +1 -1
  14. package/dist/components/QualityMenu/index.tsx +1 -1
  15. package/dist/components/SoftBuildersVideoPlayer/index.js +1 -1
  16. package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
  17. package/dist/components/SoftBuildersVideoPlayer/index.tsx +17 -14
  18. package/dist/components/SubtitleMenu/index.d.ts +3 -1
  19. package/dist/components/SubtitleMenu/index.js +2 -2
  20. package/dist/components/SubtitleMenu/index.js.map +1 -1
  21. package/dist/components/SubtitleMenu/index.tsx +10 -1
  22. package/dist/components/Tooltip/GlobalTooltip.d.ts +2 -0
  23. package/dist/components/Tooltip/GlobalTooltip.js +20 -0
  24. package/dist/components/Tooltip/GlobalTooltip.js.map +1 -0
  25. package/dist/components/Tooltip/GlobalTooltip.tsx +53 -0
  26. package/dist/components/VideoPlayerComponent/index.js +2 -1
  27. package/dist/components/VideoPlayerComponent/index.js.map +1 -1
  28. package/dist/components/VideoPlayerComponent/index.tsx +19 -15
  29. package/dist/components/VolumeSlider/index.js +25 -6
  30. package/dist/components/VolumeSlider/index.js.map +1 -1
  31. package/dist/components/VolumeSlider/index.tsx +45 -17
  32. package/dist/index.css +14 -17
  33. package/dist/index.mjs +206 -108
  34. package/dist/styles/tailwind.css +14 -17
  35. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -31,16 +31,16 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
 
33
33
  // src/components/SoftBuildersVideoPlayer/index.tsx
34
- import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState14 } from "react";
34
+ import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState15 } from "react";
35
35
 
36
36
  // src/components/VideoPlayerComponent/index.tsx
37
- import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState13 } from "react";
37
+ import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState14 } from "react";
38
38
  import ReactDOM from "react-dom/client";
39
39
  import videojs from "video.js";
40
40
  import "video.js/dist/video-js.css";
41
41
 
42
42
  // src/components/ControlBar/index.tsx
43
- import { useEffect as useEffect13, useState as useState12 } from "react";
43
+ import { useEffect as useEffect13, useState as useState13 } from "react";
44
44
 
45
45
  // src/utils/index.ts
46
46
  var durationFormater = (seconds) => {
@@ -520,13 +520,21 @@ var VolumeSlider = ({
520
520
  const [isVisible, setVisible] = useState2(false);
521
521
  const [volume, setVolume] = useState2(0);
522
522
  useEffect2(() => {
523
- setVolume((player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100 || 0);
523
+ const updateVolumeState = () => {
524
+ const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100;
525
+ setVolume(currentVolume);
526
+ };
527
+ updateVolumeState();
528
+ player == null ? void 0 : player.on("volumechange", updateVolumeState);
529
+ return () => {
530
+ player == null ? void 0 : player.off("volumechange", updateVolumeState);
531
+ };
524
532
  }, [player]);
525
533
  const timeoutRef = React2.useRef(null);
526
534
  useEffect2(() => {
527
535
  setVisible(false);
528
536
  }, [volumeSliderToggler]);
529
- const toggleVisiblity = (e) => {
537
+ const toggleVisibility = (e) => {
530
538
  e.preventDefault();
531
539
  e.stopPropagation();
532
540
  handleControlDisplayTimer(e);
@@ -534,6 +542,11 @@ var VolumeSlider = ({
534
542
  if (timeoutRef.current) {
535
543
  clearTimeout(timeoutRef.current);
536
544
  }
545
+ if (volume == 0 && !isVisible) {
546
+ setVolume(60);
547
+ player == null ? void 0 : player.volume(0.6);
548
+ player == null ? void 0 : player.muted(false);
549
+ }
537
550
  setVisible((prev) => !prev);
538
551
  timeoutRef.current = setTimeout(() => {
539
552
  setVisible(false);
@@ -554,17 +567,17 @@ var VolumeSlider = ({
554
567
  return /* @__PURE__ */ jsxs4(
555
568
  "div",
556
569
  {
557
- className: `sb-flex ${isVisible ? "" : ""} ${width > 400 ? "sb-flex-col-reverse " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`,
570
+ className: `sb-flex ${isVisible ? "" : ""} ${width > 400 ? "sb-flex-col-reverse" : "sb-flex-col !sb-justify-start"} sb-items-center sb-gap-1 sb-h-full`,
558
571
  children: [
559
572
  /* @__PURE__ */ jsx19(
560
573
  "div",
561
574
  {
562
- className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"} `,
563
- onClick: toggleVisiblity,
564
- children: volume === 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
575
+ className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}`,
576
+ onClick: toggleVisibility,
577
+ children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
565
578
  MuteIcon_default,
566
579
  {
567
- className: `sb-w-3 sb-h-3 ${width < 400 ? " " : ""} sb-h-5 sb-w-5`
580
+ className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`
568
581
  }
569
582
  ) : /* @__PURE__ */ jsx19(
570
583
  UnmuteIcon_default,
@@ -574,10 +587,10 @@ var VolumeSlider = ({
574
587
  )
575
588
  }
576
589
  ),
577
- /* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
590
+ /* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
578
591
  "div",
579
592
  {
580
- className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : " sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
593
+ className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative`,
581
594
  children: /* @__PURE__ */ jsx19(
582
595
  Slider_default,
583
596
  {
@@ -610,7 +623,9 @@ var MenuButton = ({
610
623
  onClick,
611
624
  setNoteOpen,
612
625
  noteButtonClick,
613
- disablePopUp = false
626
+ disablePopUp = false,
627
+ onMouseEnter,
628
+ onMouseLeave
614
629
  }) => {
615
630
  const [isOpen, setIsOpen] = useState3(false);
616
631
  const buttonRef = useRef(null);
@@ -634,35 +649,43 @@ var MenuButton = ({
634
649
  useEffect3(() => {
635
650
  setNoteOpen && setNoteOpen(isOpen);
636
651
  }, [isOpen]);
637
- return /* @__PURE__ */ jsxs5("div", { className: "sb-relative sb-flex sb-items-end", children: [
638
- /* @__PURE__ */ jsx20(
639
- "button",
640
- {
641
- ref: buttonRef,
642
- onClick: (e) => {
643
- isOpen && e.stopPropagation();
644
- toggleMenu();
645
- onClick && onClick(e, !isOpen);
646
- noteButtonClick && noteButtonClick(!isOpen);
647
- },
648
- "aria-haspopup": "true",
649
- "aria-expanded": isOpen,
650
- "aria-label": "Open menu",
651
- children: buttonContent
652
- }
653
- ),
654
- !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
655
- "div",
656
- {
657
- ref: menuRef,
658
- role: "menu",
659
- "aria-orientation": "vertical",
660
- "aria-labelledby": "Open menu",
661
- className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
662
- children: menuContent
663
- }
664
- )
665
- ] });
652
+ return /* @__PURE__ */ jsxs5(
653
+ "div",
654
+ {
655
+ onMouseEnter,
656
+ onMouseLeave,
657
+ className: "sb-relative sb-flex sb-items-end",
658
+ children: [
659
+ /* @__PURE__ */ jsx20(
660
+ "button",
661
+ {
662
+ ref: buttonRef,
663
+ onClick: (e) => {
664
+ isOpen && e.stopPropagation();
665
+ toggleMenu();
666
+ onClick && onClick(e, !isOpen);
667
+ noteButtonClick && noteButtonClick(!isOpen);
668
+ },
669
+ "aria-haspopup": "true",
670
+ "aria-expanded": isOpen,
671
+ "aria-label": "Open menu",
672
+ children: buttonContent
673
+ }
674
+ ),
675
+ !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
676
+ "div",
677
+ {
678
+ ref: menuRef,
679
+ role: "menu",
680
+ "aria-orientation": "vertical",
681
+ "aria-labelledby": "Open menu",
682
+ className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
683
+ children: menuContent
684
+ }
685
+ )
686
+ ]
687
+ }
688
+ );
666
689
  };
667
690
  var MenuButton_default = MenuButton;
668
691
 
@@ -750,7 +773,7 @@ var QualityMenu = ({ width, onClick }) => {
750
773
  }
751
774
  ),
752
775
  /* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
753
- /* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
776
+ /* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities == null ? void 0 : qualities.map((q, i) => {
754
777
  return /* @__PURE__ */ jsx21(Fragment, { children: /* @__PURE__ */ jsx21(
755
778
  QualityOption,
756
779
  {
@@ -791,7 +814,9 @@ var CreateNoteMenu = ({
791
814
  handleSaveNoteAction,
792
815
  width,
793
816
  setNoteOpen,
794
- noteButtonClick
817
+ noteButtonClick,
818
+ onMouseEnter,
819
+ onMouseLeave
795
820
  }) => {
796
821
  const { player } = useSoftBuildersVideoPlayerContext();
797
822
  const [note, setNote] = useState5("");
@@ -810,6 +835,8 @@ var CreateNoteMenu = ({
810
835
  return /* @__PURE__ */ jsx22(
811
836
  MenuButton_default,
812
837
  {
838
+ onMouseEnter,
839
+ onMouseLeave,
813
840
  disablePopUp: true,
814
841
  noteButtonClick,
815
842
  setNoteOpen,
@@ -1156,7 +1183,12 @@ var SubtitleOption = ({
1156
1183
  }
1157
1184
  );
1158
1185
  };
1159
- var SubtitleMenu = ({ width, onClick }) => {
1186
+ var SubtitleMenu = ({
1187
+ width,
1188
+ onClick,
1189
+ onMouseEnter,
1190
+ onMouseLeave
1191
+ }) => {
1160
1192
  const { player } = useSoftBuildersVideoPlayerContext();
1161
1193
  const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
1162
1194
  const [subtitles, setSubtitles] = useState11([]);
@@ -1181,6 +1213,8 @@ var SubtitleMenu = ({ width, onClick }) => {
1181
1213
  return /* @__PURE__ */ jsx32(
1182
1214
  MenuButton_default,
1183
1215
  {
1216
+ onMouseEnter,
1217
+ onMouseLeave,
1184
1218
  onClick: (e, isOpen) => {
1185
1219
  onClick && onClick(e, isOpen);
1186
1220
  },
@@ -1231,8 +1265,59 @@ var SubtitleMenu = ({ width, onClick }) => {
1231
1265
  };
1232
1266
  var SubtitleMenu_default = SubtitleMenu;
1233
1267
 
1234
- // src/components/ControlBar/index.tsx
1268
+ // src/components/Tooltip/GlobalTooltip.tsx
1269
+ import { useState as useState12 } from "react";
1235
1270
  import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
1271
+ var TooltipModal = ({
1272
+ content,
1273
+ children,
1274
+ isLeft = false,
1275
+ width = 0
1276
+ }) => {
1277
+ const [isOpen, setIsOpen] = useState12(false);
1278
+ const showTooltip = () => setIsOpen(true);
1279
+ const hideTooltip = () => setIsOpen(false);
1280
+ return /* @__PURE__ */ jsxs13(
1281
+ "div",
1282
+ {
1283
+ className: "tooltip-container",
1284
+ style: { position: "relative", display: "inline-block" },
1285
+ children: [
1286
+ /* @__PURE__ */ jsx33(
1287
+ "div",
1288
+ {
1289
+ onMouseEnter: showTooltip,
1290
+ onMouseLeave: hideTooltip,
1291
+ style: { cursor: "pointer" },
1292
+ children
1293
+ }
1294
+ ),
1295
+ isOpen && /* @__PURE__ */ jsx33(
1296
+ "div",
1297
+ {
1298
+ className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "sb-bottom-[105]" : "sb-top-[105%]"}`,
1299
+ style: {
1300
+ position: "absolute",
1301
+ left: !isLeft ? "-100%" : "100%",
1302
+ transform: !isLeft ? "translateX(-50%)" : "translateX(0%)",
1303
+ backgroundColor: "white",
1304
+ padding: "8px",
1305
+ borderRadius: "4px",
1306
+ whiteSpace: "nowrap",
1307
+ boxShadow: "0px 0px 5px grey",
1308
+ zIndex: 1e3
1309
+ },
1310
+ children: content
1311
+ }
1312
+ )
1313
+ ]
1314
+ }
1315
+ );
1316
+ };
1317
+ var GlobalTooltip_default = TooltipModal;
1318
+
1319
+ // src/components/ControlBar/index.tsx
1320
+ import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
1236
1321
  var ControlBar = ({
1237
1322
  player,
1238
1323
  isPaused,
@@ -1250,26 +1335,15 @@ var ControlBar = ({
1250
1335
  disableNote,
1251
1336
  noteButtonClick
1252
1337
  }) => {
1253
- console.log("432", notes);
1254
1338
  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
1255
- const [width, setWidth] = useState12(0);
1256
- const [isSeeking, setIsSeeking] = useState12(true);
1339
+ const [width, setWidth] = useState13(0);
1340
+ const [isSeeking, setIsSeeking] = useState13(true);
1257
1341
  const seek = (duration2) => {
1258
1342
  const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
1259
1343
  player == null ? void 0 : player.currentTime(currentTime + duration2);
1260
1344
  };
1261
- const [volumeSliderToggler, setVolumeToggler] = useState12(false);
1345
+ const [volumeSliderToggler, setVolumeToggler] = useState13(false);
1262
1346
  const container = document.getElementById(`video-container-${id}`);
1263
- const [isToolTip, setIsToolTip] = useState12({
1264
- sub: false,
1265
- seekForward: false,
1266
- seekBackward: false,
1267
- play: false,
1268
- pause: false,
1269
- volume: false,
1270
- quality: false,
1271
- fullScreen: false
1272
- });
1273
1347
  function handleWidthChange(width2) {
1274
1348
  setWidth(width2);
1275
1349
  }
@@ -1293,40 +1367,63 @@ var ControlBar = ({
1293
1367
  useEffect13(() => {
1294
1368
  setDuration(duration);
1295
1369
  }, [duration]);
1296
- return /* @__PURE__ */ jsxs13(
1370
+ return /* @__PURE__ */ jsxs14(
1297
1371
  "div",
1298
1372
  {
1299
1373
  className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full ${width > 400 ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 " : "sb-items-start"} sb-pb-2`,
1300
1374
  children: [
1301
- /* @__PURE__ */ jsx33(BufferTracker_default, {}),
1302
- /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
1303
- /* @__PURE__ */ jsx33(
1375
+ /* @__PURE__ */ jsx34(BufferTracker_default, {}),
1376
+ /* @__PURE__ */ jsx34(CurrentTimeTracker_default, {}),
1377
+ /* @__PURE__ */ jsx34(
1304
1378
  "button",
1305
1379
  {
1306
1380
  onClick: () => {
1307
1381
  seek(-seekStep);
1308
1382
  },
1309
- children: /* @__PURE__ */ jsx33(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
1383
+ children: /* @__PURE__ */ jsx34(
1384
+ GlobalTooltip_default,
1385
+ {
1386
+ width,
1387
+ content: /* @__PURE__ */ jsx34("p", { children: "Backward 5 sec" }),
1388
+ isLeft: true,
1389
+ children: /* @__PURE__ */ jsx34(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
1390
+ }
1391
+ )
1310
1392
  }
1311
1393
  ),
1312
- /* @__PURE__ */ jsx33("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx33(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx33(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) }),
1313
- /* @__PURE__ */ jsx33(
1394
+ /* @__PURE__ */ jsx34(
1395
+ GlobalTooltip_default,
1396
+ {
1397
+ content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
1398
+ isLeft: true,
1399
+ children: /* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) })
1400
+ }
1401
+ ),
1402
+ /* @__PURE__ */ jsx34(
1314
1403
  "button",
1315
1404
  {
1316
1405
  onClick: (e) => {
1317
1406
  e.preventDefault();
1318
1407
  seek(seekStep);
1319
1408
  },
1320
- children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
1409
+ children: /* @__PURE__ */ jsx34(
1410
+ GlobalTooltip_default,
1411
+ {
1412
+ width,
1413
+ content: /* @__PURE__ */ jsx34("p", { children: "Forward 5 sec" }),
1414
+ isLeft: true,
1415
+ children: /* @__PURE__ */ jsx34(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
1416
+ }
1417
+ )
1321
1418
  }
1322
1419
  ),
1323
1420
  // isSeeking ||
1324
1421
  // width > 400 &&
1325
- /* @__PURE__ */ jsx33(
1422
+ /* @__PURE__ */ jsx34(
1326
1423
  "div",
1327
1424
  {
1328
1425
  className: `${width < 400 ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
1329
- children: /* @__PURE__ */ jsxs13(
1426
+ children: /* @__PURE__ */ jsxs14(
1330
1427
  "div",
1331
1428
  {
1332
1429
  style: width < 400 ? {
@@ -1336,15 +1433,15 @@ var ControlBar = ({
1336
1433
  } : { width: "98%" },
1337
1434
  className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
1338
1435
  children: [
1339
- /* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
1340
- /* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
1341
- /* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
1436
+ /* @__PURE__ */ jsx34(CurrentTimeLabel_default, {}),
1437
+ /* @__PURE__ */ jsx34(TimeSliderContainer_default, { chapters, notes }),
1438
+ /* @__PURE__ */ jsx34("p", { children: durationFormater(duration) })
1342
1439
  ]
1343
1440
  }
1344
1441
  )
1345
1442
  }
1346
1443
  ),
1347
- /* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(
1444
+ /* @__PURE__ */ jsx34("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx34(
1348
1445
  VolumeSlider_default,
1349
1446
  {
1350
1447
  volumeSliderToggler,
@@ -1353,7 +1450,7 @@ var ControlBar = ({
1353
1450
  handleControlDisplayTimer
1354
1451
  }
1355
1452
  ) }),
1356
- /* @__PURE__ */ jsx33(
1453
+ /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Quality" }), children: /* @__PURE__ */ jsx34(
1357
1454
  QualityMenu_default,
1358
1455
  {
1359
1456
  width,
@@ -1362,8 +1459,8 @@ var ControlBar = ({
1362
1459
  setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
1363
1460
  }
1364
1461
  }
1365
- ),
1366
- disableNote && /* @__PURE__ */ jsx33(
1462
+ ) }),
1463
+ disableNote && /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Create note" }), children: /* @__PURE__ */ jsx34(
1367
1464
  CreateNoteMenu_default,
1368
1465
  {
1369
1466
  handleSaveNoteAction,
@@ -1376,8 +1473,8 @@ var ControlBar = ({
1376
1473
  });
1377
1474
  }
1378
1475
  }
1379
- ),
1380
- /* @__PURE__ */ jsx33(Tooltip_default, { open: isToolTip.sub == true, children: /* @__PURE__ */ jsx33(
1476
+ ) }),
1477
+ /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx34(
1381
1478
  SubtitleMenu_default,
1382
1479
  {
1383
1480
  width,
@@ -1387,7 +1484,7 @@ var ControlBar = ({
1387
1484
  }
1388
1485
  }
1389
1486
  ) }),
1390
- /* @__PURE__ */ jsx33(
1487
+ /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx34(
1391
1488
  "button",
1392
1489
  {
1393
1490
  onClick: (e) => {
@@ -1399,9 +1496,9 @@ var ControlBar = ({
1399
1496
  player == null ? void 0 : player.requestFullscreen();
1400
1497
  }
1401
1498
  },
1402
- children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
1499
+ children: /* @__PURE__ */ jsx34(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
1403
1500
  }
1404
- )
1501
+ ) })
1405
1502
  ]
1406
1503
  }
1407
1504
  );
@@ -1409,26 +1506,26 @@ var ControlBar = ({
1409
1506
  var ControlBar_default = ControlBar;
1410
1507
 
1411
1508
  // src/components/BigPlayButton/index.tsx
1412
- import { jsx as jsx34 } from "react/jsx-runtime";
1509
+ import { jsx as jsx35 } from "react/jsx-runtime";
1413
1510
  var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
1414
1511
  const togglePlay = () => {
1415
1512
  if (isPaused) player == null ? void 0 : player.play();
1416
1513
  else player == null ? void 0 : player.pause();
1417
1514
  setIsPaused(!isPaused);
1418
1515
  };
1419
- return /* @__PURE__ */ jsx34(
1516
+ return /* @__PURE__ */ jsx35(
1420
1517
  "div",
1421
1518
  {
1422
1519
  onClick: togglePlay,
1423
1520
  className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ",
1424
- children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
1521
+ children: isPaused ? /* @__PURE__ */ jsx35(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx35(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
1425
1522
  }
1426
1523
  );
1427
1524
  };
1428
1525
  var BigPlayButton_default = BigPlayButton;
1429
1526
 
1430
1527
  // src/components/VideoPlayerComponent/index.tsx
1431
- import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
1528
+ import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
1432
1529
  var bigPlayButtonRoot = {};
1433
1530
  var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
1434
1531
  const container = document.getElementById(`video-container-${id}`);
@@ -1441,7 +1538,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
1441
1538
  bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
1442
1539
  }
1443
1540
  bigPlayButtonRoot[id].render(
1444
- /* @__PURE__ */ jsx35(
1541
+ /* @__PURE__ */ jsx36(
1445
1542
  BigPlayButton_default,
1446
1543
  {
1447
1544
  player,
@@ -1471,7 +1568,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
1471
1568
  element.style.height = "100%";
1472
1569
  element.style.alignItems = "flex-end";
1473
1570
  controlBarRoot[id].render(
1474
- /* @__PURE__ */ jsx35(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx35(
1571
+ /* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
1475
1572
  ControlBar_default,
1476
1573
  {
1477
1574
  id,
@@ -1510,20 +1607,20 @@ var VideoPlayerComponent = forwardRef(
1510
1607
  childRef,
1511
1608
  bottomRedBar = true,
1512
1609
  noteButtonClick
1513
- }) => {
1610
+ }, ref) => {
1514
1611
  var _a;
1515
1612
  const videoRef = useRef2(void 0);
1516
1613
  const playerRef = useRef2(void 0);
1517
- const [isReady, setIsReady] = useState13(false);
1518
- const [isPaused, setIsPaused] = useState13(!options.autoplay);
1519
- const [duration, setDuration] = useState13(1);
1520
- const [opacity, setOpacity] = useState13("0");
1521
- const [isControlBarPresent, setIsControlBarPresent] = useState13(true);
1522
- const [bgColor, setBgColor] = useState13("transparent");
1523
- const [isQualityMenuOpen, setIsQualityMenuOpen] = useState13(false);
1524
- const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState13(false);
1525
- const [isHovered, setIsHovered] = useState13(false);
1526
- const [isNoteOpen, setNoteOpen] = useState13(false);
1614
+ const [isReady, setIsReady] = useState14(false);
1615
+ const [isPaused, setIsPaused] = useState14(!options.autoplay);
1616
+ const [duration, setDuration] = useState14(1);
1617
+ const [opacity, setOpacity] = useState14("0");
1618
+ const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
1619
+ const [bgColor, setBgColor] = useState14("transparent");
1620
+ const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
1621
+ const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
1622
+ const [isHovered, setIsHovered] = useState14(false);
1623
+ const [isNoteOpen, setNoteOpen] = useState14(false);
1527
1624
  const onReady = (player) => {
1528
1625
  if (playerRef) {
1529
1626
  playerRef.current = player;
@@ -1712,6 +1809,7 @@ var VideoPlayerComponent = forwardRef(
1712
1809
  if (playerRef.current) {
1713
1810
  if (playerRef.current.paused()) {
1714
1811
  try {
1812
+ startTime && playerRef.current.currentTime(startTime);
1715
1813
  await playerRef.current.play();
1716
1814
  setIsPaused(false);
1717
1815
  } catch (error) {
@@ -1756,7 +1854,7 @@ var VideoPlayerComponent = forwardRef(
1756
1854
  }
1757
1855
  };
1758
1856
  }, []);
1759
- const [timeSeeker, setTimeSeeker] = useState13("0");
1857
+ const [timeSeeker, setTimeSeeker] = useState14("0");
1760
1858
  useEffect14(() => {
1761
1859
  const updateTimeSeeker = () => {
1762
1860
  var _a2, _b, _c, _d;
@@ -1773,7 +1871,7 @@ var VideoPlayerComponent = forwardRef(
1773
1871
  };
1774
1872
  updateTimeSeeker();
1775
1873
  }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
1776
- return /* @__PURE__ */ jsxs14(
1874
+ return /* @__PURE__ */ jsxs15(
1777
1875
  "div",
1778
1876
  {
1779
1877
  ref: videoRefs,
@@ -1785,7 +1883,7 @@ var VideoPlayerComponent = forwardRef(
1785
1883
  onMouseEnter: () => setIsHovered(true),
1786
1884
  onMouseLeave: () => setIsHovered(false),
1787
1885
  children: [
1788
- bottomRedBar && /* @__PURE__ */ jsx35(
1886
+ bottomRedBar && /* @__PURE__ */ jsx36(
1789
1887
  "div",
1790
1888
  {
1791
1889
  ref: childRef,
@@ -1796,12 +1894,12 @@ var VideoPlayerComponent = forwardRef(
1796
1894
  }
1797
1895
  }
1798
1896
  ),
1799
- /* @__PURE__ */ jsx35(
1897
+ /* @__PURE__ */ jsx36(
1800
1898
  "div",
1801
1899
  {
1802
1900
  className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
1803
1901
  "data-vjs-player": true,
1804
- children: /* @__PURE__ */ jsx35(
1902
+ children: /* @__PURE__ */ jsx36(
1805
1903
  "div",
1806
1904
  {
1807
1905
  onClick: handlePlayerClick,
@@ -1819,7 +1917,7 @@ var VideoPlayerComponent = forwardRef(
1819
1917
  var VideoPlayerComponent_default = VideoPlayerComponent;
1820
1918
 
1821
1919
  // src/components/SoftBuildersVideoPlayer/index.tsx
1822
- import { jsx as jsx36 } from "react/jsx-runtime";
1920
+ import { jsx as jsx37 } from "react/jsx-runtime";
1823
1921
  var DEFAULT_OPTIONS = {
1824
1922
  autoplay: false,
1825
1923
  controls: true,
@@ -1844,7 +1942,7 @@ var Component = forwardRef2(
1844
1942
  childRef,
1845
1943
  bottomRedBar,
1846
1944
  noteButtonClick
1847
- }) => {
1945
+ }, ref) => {
1848
1946
  options = __spreadProps(__spreadValues({}, options), {
1849
1947
  responsive: true,
1850
1948
  inactivityTimeout: 0,
@@ -1860,7 +1958,7 @@ var Component = forwardRef2(
1860
1958
  if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
1861
1959
  if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
1862
1960
  if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
1863
- const [tracks, setTracks] = useState14([]);
1961
+ const [tracks, setTracks] = useState15([]);
1864
1962
  useEffect15(() => {
1865
1963
  }, [isFocused]);
1866
1964
  useEffect15(() => {
@@ -1881,7 +1979,7 @@ var Component = forwardRef2(
1881
1979
  getTracks();
1882
1980
  }, [options == null ? void 0 : options.tracks]);
1883
1981
  const id = (Date.now() + Math.random() * 100).toString();
1884
- return /* @__PURE__ */ jsx36(
1982
+ return /* @__PURE__ */ jsx37(
1885
1983
  VideoPlayerComponent_default,
1886
1984
  {
1887
1985
  id,