softbuilders-react-video-player 1.1.70 → 1.1.72

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/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
  {
@@ -677,7 +690,7 @@ var MenuButton = ({
677
690
  var MenuButton_default = MenuButton;
678
691
 
679
692
  // src/components/QualityMenu/index.tsx
680
- import { Fragment, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
693
+ import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
681
694
  var QualityOption = ({
682
695
  isSelected,
683
696
  quality,
@@ -760,8 +773,8 @@ var QualityMenu = ({ width, onClick }) => {
760
773
  }
761
774
  ),
762
775
  /* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
763
- /* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
764
- return /* @__PURE__ */ jsx21(Fragment, { children: /* @__PURE__ */ jsx21(
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) => {
777
+ return /* @__PURE__ */ jsx21(
765
778
  QualityOption,
766
779
  {
767
780
  width,
@@ -781,7 +794,7 @@ var QualityMenu = ({ width, onClick }) => {
781
794
  }
782
795
  },
783
796
  `quality-${q.label}-${i}`
784
- ) });
797
+ );
785
798
  }) })
786
799
  ] })
787
800
  }
@@ -875,23 +888,12 @@ import { useEffect as useEffect5, useState as useState6 } from "react";
875
888
 
876
889
  // src/components/Tooltip/index.tsx
877
890
  import { jsx as jsx23 } from "react/jsx-runtime";
878
- var Tooltip = ({
879
- open,
880
- children,
881
- position = "top"
882
- }) => {
891
+ var Tooltip = ({ open, children }) => {
883
892
  if (!open) return null;
884
- console.log("tool tip");
885
- const positionClasses = {
886
- top: "sb-bottom-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mb-2",
887
- bottom: "sb-top-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mt-2",
888
- left: "sb-right-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-mr-2",
889
- right: "sb-left-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-ml-2"
890
- };
891
893
  return /* @__PURE__ */ jsx23(
892
894
  "div",
893
895
  {
894
- className: `sb-relative sb-bg-black sb-text-white sb-text-sm sb-px-2 sb-py-1 sb-rounded sb-shadow-md sb-z-50 ${positionClasses[position]}`,
896
+ 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",
895
897
  children
896
898
  }
897
899
  );
@@ -1130,7 +1132,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
1130
1132
 
1131
1133
  // src/components/BufferTracker/index.tsx
1132
1134
  import { useEffect as useEffect10 } from "react";
1133
- import { Fragment as Fragment2, jsx as jsx30 } from "react/jsx-runtime";
1135
+ import { Fragment, jsx as jsx30 } from "react/jsx-runtime";
1134
1136
  var BufferTracker = () => {
1135
1137
  const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
1136
1138
  useEffect10(() => {
@@ -1139,13 +1141,13 @@ var BufferTracker = () => {
1139
1141
  }, 1e3);
1140
1142
  return () => clearInterval(intervalId);
1141
1143
  }, [player]);
1142
- return /* @__PURE__ */ jsx30(Fragment2, {});
1144
+ return /* @__PURE__ */ jsx30(Fragment, {});
1143
1145
  };
1144
1146
  var BufferTracker_default = BufferTracker;
1145
1147
 
1146
1148
  // src/components/CurrentTimeTracker/index.tsx
1147
1149
  import { useEffect as useEffect11 } from "react";
1148
- import { Fragment as Fragment3, jsx as jsx31 } from "react/jsx-runtime";
1150
+ import { Fragment as Fragment2, jsx as jsx31 } from "react/jsx-runtime";
1149
1151
  var CurrentTimeTracker = () => {
1150
1152
  const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
1151
1153
  useEffect11(() => {
@@ -1154,7 +1156,7 @@ var CurrentTimeTracker = () => {
1154
1156
  }, 500);
1155
1157
  return () => clearInterval(intervalId);
1156
1158
  }, [player]);
1157
- return /* @__PURE__ */ jsx31(Fragment3, {});
1159
+ return /* @__PURE__ */ jsx31(Fragment2, {});
1158
1160
  };
1159
1161
  var CurrentTimeTracker_default = CurrentTimeTracker;
1160
1162
 
@@ -1263,8 +1265,59 @@ var SubtitleMenu = ({
1263
1265
  };
1264
1266
  var SubtitleMenu_default = SubtitleMenu;
1265
1267
 
1266
- // src/components/ControlBar/index.tsx
1268
+ // src/components/Tooltip/GlobalTooltip.tsx
1269
+ import { useState as useState12 } from "react";
1267
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";
1268
1321
  var ControlBar = ({
1269
1322
  player,
1270
1323
  isPaused,
@@ -1283,24 +1336,14 @@ var ControlBar = ({
1283
1336
  noteButtonClick
1284
1337
  }) => {
1285
1338
  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
1286
- const [width, setWidth] = useState12(0);
1287
- const [isSeeking, setIsSeeking] = useState12(true);
1339
+ const [width, setWidth] = useState13(0);
1340
+ const [isSeeking, setIsSeeking] = useState13(true);
1288
1341
  const seek = (duration2) => {
1289
1342
  const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
1290
1343
  player == null ? void 0 : player.currentTime(currentTime + duration2);
1291
1344
  };
1292
- const [volumeSliderToggler, setVolumeToggler] = useState12(false);
1345
+ const [volumeSliderToggler, setVolumeToggler] = useState13(false);
1293
1346
  const container = document.getElementById(`video-container-${id}`);
1294
- const [isToolTip, setIsToolTip] = useState12({
1295
- sub: false,
1296
- seekForward: false,
1297
- seekBackward: false,
1298
- play: false,
1299
- pause: false,
1300
- volume: false,
1301
- quality: false,
1302
- fullScreen: false
1303
- });
1304
1347
  function handleWidthChange(width2) {
1305
1348
  setWidth(width2);
1306
1349
  }
@@ -1324,40 +1367,64 @@ var ControlBar = ({
1324
1367
  useEffect13(() => {
1325
1368
  setDuration(duration);
1326
1369
  }, [duration]);
1327
- return /* @__PURE__ */ jsxs13(
1370
+ return /* @__PURE__ */ jsxs14(
1328
1371
  "div",
1329
1372
  {
1330
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`,
1331
1374
  children: [
1332
- /* @__PURE__ */ jsx33(BufferTracker_default, {}),
1333
- /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
1334
- /* @__PURE__ */ jsx33(
1375
+ /* @__PURE__ */ jsx34(BufferTracker_default, {}),
1376
+ /* @__PURE__ */ jsx34(CurrentTimeTracker_default, {}),
1377
+ /* @__PURE__ */ jsx34(
1335
1378
  "button",
1336
1379
  {
1337
1380
  onClick: () => {
1338
1381
  seek(-seekStep);
1339
1382
  },
1340
- 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
+ )
1341
1392
  }
1342
1393
  ),
1343
- /* @__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" }) }),
1344
- /* @__PURE__ */ jsx33(
1394
+ /* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx34(
1395
+ GlobalTooltip_default,
1396
+ {
1397
+ width,
1398
+ content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
1399
+ isLeft: true,
1400
+ children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" })
1401
+ }
1402
+ ) }),
1403
+ /* @__PURE__ */ jsx34(
1345
1404
  "button",
1346
1405
  {
1347
1406
  onClick: (e) => {
1348
1407
  e.preventDefault();
1349
1408
  seek(seekStep);
1350
1409
  },
1351
- children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
1410
+ children: /* @__PURE__ */ jsx34(
1411
+ GlobalTooltip_default,
1412
+ {
1413
+ width,
1414
+ content: /* @__PURE__ */ jsx34("p", { children: "Forward 5 sec" }),
1415
+ isLeft: true,
1416
+ children: /* @__PURE__ */ jsx34(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
1417
+ }
1418
+ )
1352
1419
  }
1353
1420
  ),
1354
1421
  // isSeeking ||
1355
1422
  // width > 400 &&
1356
- /* @__PURE__ */ jsx33(
1423
+ /* @__PURE__ */ jsx34(
1357
1424
  "div",
1358
1425
  {
1359
1426
  className: `${width < 400 ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
1360
- children: /* @__PURE__ */ jsxs13(
1427
+ children: /* @__PURE__ */ jsxs14(
1361
1428
  "div",
1362
1429
  {
1363
1430
  style: width < 400 ? {
@@ -1367,15 +1434,15 @@ var ControlBar = ({
1367
1434
  } : { width: "98%" },
1368
1435
  className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
1369
1436
  children: [
1370
- /* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
1371
- /* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
1372
- /* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
1437
+ /* @__PURE__ */ jsx34(CurrentTimeLabel_default, {}),
1438
+ /* @__PURE__ */ jsx34(TimeSliderContainer_default, { chapters, notes }),
1439
+ /* @__PURE__ */ jsx34("p", { children: durationFormater(duration) })
1373
1440
  ]
1374
1441
  }
1375
1442
  )
1376
1443
  }
1377
1444
  ),
1378
- /* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(
1445
+ /* @__PURE__ */ jsx34("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx34(
1379
1446
  VolumeSlider_default,
1380
1447
  {
1381
1448
  volumeSliderToggler,
@@ -1384,7 +1451,7 @@ var ControlBar = ({
1384
1451
  handleControlDisplayTimer
1385
1452
  }
1386
1453
  ) }),
1387
- /* @__PURE__ */ jsx33(
1454
+ /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Quality" }), children: /* @__PURE__ */ jsx34(
1388
1455
  QualityMenu_default,
1389
1456
  {
1390
1457
  width,
@@ -1393,12 +1460,10 @@ var ControlBar = ({
1393
1460
  setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
1394
1461
  }
1395
1462
  }
1396
- ),
1397
- disableNote && /* @__PURE__ */ jsx33(
1463
+ ) }),
1464
+ disableNote && /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Create note" }), children: /* @__PURE__ */ jsx34(
1398
1465
  CreateNoteMenu_default,
1399
1466
  {
1400
- onMouseEnter: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: true })),
1401
- onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: false })),
1402
1467
  handleSaveNoteAction,
1403
1468
  width,
1404
1469
  setNoteOpen,
@@ -1409,23 +1474,18 @@ var ControlBar = ({
1409
1474
  });
1410
1475
  }
1411
1476
  }
1412
- ),
1413
- /* @__PURE__ */ jsx33(
1477
+ ) }),
1478
+ /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx34(
1414
1479
  SubtitleMenu_default,
1415
1480
  {
1416
- onMouseEnter: () => {
1417
- console.log("get well");
1418
- setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: true }));
1419
- },
1420
- onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: false })),
1421
1481
  width,
1422
1482
  onClick: (e, isOpen) => {
1423
1483
  setVolumeToggler(!volumeSliderToggler);
1424
1484
  setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
1425
1485
  }
1426
1486
  }
1427
- ),
1428
- /* @__PURE__ */ jsx33(
1487
+ ) }),
1488
+ /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx34(
1429
1489
  "button",
1430
1490
  {
1431
1491
  onClick: (e) => {
@@ -1437,9 +1497,9 @@ var ControlBar = ({
1437
1497
  player == null ? void 0 : player.requestFullscreen();
1438
1498
  }
1439
1499
  },
1440
- children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
1500
+ children: /* @__PURE__ */ jsx34(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
1441
1501
  }
1442
- )
1502
+ ) })
1443
1503
  ]
1444
1504
  }
1445
1505
  );
@@ -1447,26 +1507,26 @@ var ControlBar = ({
1447
1507
  var ControlBar_default = ControlBar;
1448
1508
 
1449
1509
  // src/components/BigPlayButton/index.tsx
1450
- import { jsx as jsx34 } from "react/jsx-runtime";
1510
+ import { jsx as jsx35 } from "react/jsx-runtime";
1451
1511
  var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
1452
1512
  const togglePlay = () => {
1453
1513
  if (isPaused) player == null ? void 0 : player.play();
1454
1514
  else player == null ? void 0 : player.pause();
1455
1515
  setIsPaused(!isPaused);
1456
1516
  };
1457
- return /* @__PURE__ */ jsx34(
1517
+ return /* @__PURE__ */ jsx35(
1458
1518
  "div",
1459
1519
  {
1460
1520
  onClick: togglePlay,
1461
1521
  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 ",
1462
- children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
1522
+ children: isPaused ? /* @__PURE__ */ jsx35(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx35(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
1463
1523
  }
1464
1524
  );
1465
1525
  };
1466
1526
  var BigPlayButton_default = BigPlayButton;
1467
1527
 
1468
1528
  // src/components/VideoPlayerComponent/index.tsx
1469
- import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
1529
+ import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
1470
1530
  var bigPlayButtonRoot = {};
1471
1531
  var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
1472
1532
  const container = document.getElementById(`video-container-${id}`);
@@ -1479,7 +1539,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
1479
1539
  bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
1480
1540
  }
1481
1541
  bigPlayButtonRoot[id].render(
1482
- /* @__PURE__ */ jsx35(
1542
+ /* @__PURE__ */ jsx36(
1483
1543
  BigPlayButton_default,
1484
1544
  {
1485
1545
  player,
@@ -1509,7 +1569,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
1509
1569
  element.style.height = "100%";
1510
1570
  element.style.alignItems = "flex-end";
1511
1571
  controlBarRoot[id].render(
1512
- /* @__PURE__ */ jsx35(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx35(
1572
+ /* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
1513
1573
  ControlBar_default,
1514
1574
  {
1515
1575
  id,
@@ -1548,20 +1608,20 @@ var VideoPlayerComponent = forwardRef(
1548
1608
  childRef,
1549
1609
  bottomRedBar = true,
1550
1610
  noteButtonClick
1551
- }) => {
1611
+ }, ref) => {
1552
1612
  var _a;
1553
1613
  const videoRef = useRef2(void 0);
1554
1614
  const playerRef = useRef2(void 0);
1555
- const [isReady, setIsReady] = useState13(false);
1556
- const [isPaused, setIsPaused] = useState13(!options.autoplay);
1557
- const [duration, setDuration] = useState13(1);
1558
- const [opacity, setOpacity] = useState13("0");
1559
- const [isControlBarPresent, setIsControlBarPresent] = useState13(true);
1560
- const [bgColor, setBgColor] = useState13("transparent");
1561
- const [isQualityMenuOpen, setIsQualityMenuOpen] = useState13(false);
1562
- const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState13(false);
1563
- const [isHovered, setIsHovered] = useState13(false);
1564
- const [isNoteOpen, setNoteOpen] = useState13(false);
1615
+ const [isReady, setIsReady] = useState14(false);
1616
+ const [isPaused, setIsPaused] = useState14(!options.autoplay);
1617
+ const [duration, setDuration] = useState14(1);
1618
+ const [opacity, setOpacity] = useState14("0");
1619
+ const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
1620
+ const [bgColor, setBgColor] = useState14("transparent");
1621
+ const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
1622
+ const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
1623
+ const [isHovered, setIsHovered] = useState14(false);
1624
+ const [isNoteOpen, setNoteOpen] = useState14(false);
1565
1625
  const onReady = (player) => {
1566
1626
  if (playerRef) {
1567
1627
  playerRef.current = player;
@@ -1795,7 +1855,7 @@ var VideoPlayerComponent = forwardRef(
1795
1855
  }
1796
1856
  };
1797
1857
  }, []);
1798
- const [timeSeeker, setTimeSeeker] = useState13("0");
1858
+ const [timeSeeker, setTimeSeeker] = useState14("0");
1799
1859
  useEffect14(() => {
1800
1860
  const updateTimeSeeker = () => {
1801
1861
  var _a2, _b, _c, _d;
@@ -1812,7 +1872,7 @@ var VideoPlayerComponent = forwardRef(
1812
1872
  };
1813
1873
  updateTimeSeeker();
1814
1874
  }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
1815
- return /* @__PURE__ */ jsxs14(
1875
+ return /* @__PURE__ */ jsxs15(
1816
1876
  "div",
1817
1877
  {
1818
1878
  ref: videoRefs,
@@ -1824,7 +1884,7 @@ var VideoPlayerComponent = forwardRef(
1824
1884
  onMouseEnter: () => setIsHovered(true),
1825
1885
  onMouseLeave: () => setIsHovered(false),
1826
1886
  children: [
1827
- bottomRedBar && /* @__PURE__ */ jsx35(
1887
+ bottomRedBar && /* @__PURE__ */ jsx36(
1828
1888
  "div",
1829
1889
  {
1830
1890
  ref: childRef,
@@ -1835,12 +1895,12 @@ var VideoPlayerComponent = forwardRef(
1835
1895
  }
1836
1896
  }
1837
1897
  ),
1838
- /* @__PURE__ */ jsx35(
1898
+ /* @__PURE__ */ jsx36(
1839
1899
  "div",
1840
1900
  {
1841
1901
  className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
1842
1902
  "data-vjs-player": true,
1843
- children: /* @__PURE__ */ jsx35(
1903
+ children: /* @__PURE__ */ jsx36(
1844
1904
  "div",
1845
1905
  {
1846
1906
  onClick: handlePlayerClick,
@@ -1858,7 +1918,7 @@ var VideoPlayerComponent = forwardRef(
1858
1918
  var VideoPlayerComponent_default = VideoPlayerComponent;
1859
1919
 
1860
1920
  // src/components/SoftBuildersVideoPlayer/index.tsx
1861
- import { jsx as jsx36 } from "react/jsx-runtime";
1921
+ import { jsx as jsx37 } from "react/jsx-runtime";
1862
1922
  var DEFAULT_OPTIONS = {
1863
1923
  autoplay: false,
1864
1924
  controls: true,
@@ -1883,7 +1943,7 @@ var Component = forwardRef2(
1883
1943
  childRef,
1884
1944
  bottomRedBar,
1885
1945
  noteButtonClick
1886
- }) => {
1946
+ }, ref) => {
1887
1947
  options = __spreadProps(__spreadValues({}, options), {
1888
1948
  responsive: true,
1889
1949
  inactivityTimeout: 0,
@@ -1899,7 +1959,7 @@ var Component = forwardRef2(
1899
1959
  if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
1900
1960
  if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
1901
1961
  if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
1902
- const [tracks, setTracks] = useState14([]);
1962
+ const [tracks, setTracks] = useState15([]);
1903
1963
  useEffect15(() => {
1904
1964
  }, [isFocused]);
1905
1965
  useEffect15(() => {
@@ -1920,7 +1980,7 @@ var Component = forwardRef2(
1920
1980
  getTracks();
1921
1981
  }, [options == null ? void 0 : options.tracks]);
1922
1982
  const id = (Date.now() + Math.random() * 100).toString();
1923
- return /* @__PURE__ */ jsx36(
1983
+ return /* @__PURE__ */ jsx37(
1924
1984
  VideoPlayerComponent_default,
1925
1985
  {
1926
1986
  id,