softbuilders-react-video-player 1.1.68 → 1.1.70

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.
Files changed (33) hide show
  1. package/LICENSE +21 -21
  2. package/dist/components/ChapterTooltip/index.tsx +65 -65
  3. package/dist/components/ControlBar/index.js +15 -2
  4. package/dist/components/ControlBar/index.js.map +1 -1
  5. package/dist/components/ControlBar/index.tsx +32 -1
  6. package/dist/components/CreateNoteMenu/index.d.ts +3 -1
  7. package/dist/components/CreateNoteMenu/index.js +2 -2
  8. package/dist/components/CreateNoteMenu/index.js.map +1 -1
  9. package/dist/components/CreateNoteMenu/index.tsx +6 -0
  10. package/dist/components/CurrentTimeLabel/index.tsx +13 -13
  11. package/dist/components/Menu/index.tsx +49 -49
  12. package/dist/components/MenuButton/index.d.ts +3 -1
  13. package/dist/components/MenuButton/index.js +2 -2
  14. package/dist/components/MenuButton/index.js.map +1 -1
  15. package/dist/components/MenuButton/index.tsx +9 -1
  16. package/dist/components/NoteTooltip/index.tsx +46 -46
  17. package/dist/components/SubtitleMenu/index.d.ts +3 -1
  18. package/dist/components/SubtitleMenu/index.js +2 -2
  19. package/dist/components/SubtitleMenu/index.js.map +1 -1
  20. package/dist/components/SubtitleMenu/index.tsx +10 -1
  21. package/dist/components/TimeSliderContainer/index.tsx +1 -1
  22. package/dist/components/Tooltip/index.d.ts +3 -2
  23. package/dist/components/Tooltip/index.js +10 -2
  24. package/dist/components/Tooltip/index.js.map +1 -1
  25. package/dist/components/Tooltip/index.tsx +34 -16
  26. package/dist/components/VideoPlayerComponent/index.js +3 -2
  27. package/dist/components/VideoPlayerComponent/index.js.map +1 -1
  28. package/dist/components/VideoPlayerComponent/index.tsx +3 -2
  29. package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
  30. package/dist/index.css +52 -4
  31. package/dist/index.mjs +90 -36
  32. package/dist/styles/tailwind.css +175 -130
  33. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -460,21 +460,33 @@ video {
460
460
  .sb-left-1\/2 {
461
461
  left: 50%;
462
462
  }
463
+ .sb-left-full {
464
+ left: 100%;
465
+ }
463
466
  .sb-right-0 {
464
467
  right: 0px;
465
468
  }
469
+ .sb-right-full {
470
+ right: 100%;
471
+ }
466
472
  .sb-top-0 {
467
473
  top: 0px;
468
474
  }
469
475
  .sb-top-1 {
470
476
  top: 0.25rem;
471
477
  }
478
+ .sb-top-1\/2 {
479
+ top: 50%;
480
+ }
472
481
  .sb-top-2 {
473
482
  top: 0.5rem;
474
483
  }
475
484
  .sb-top-\[27\%\] {
476
485
  top: 27%;
477
486
  }
487
+ .sb-top-full {
488
+ top: 100%;
489
+ }
478
490
  .sb-z-10 {
479
491
  z-index: 10;
480
492
  }
@@ -484,6 +496,9 @@ video {
484
496
  .sb-z-30 {
485
497
  z-index: 30;
486
498
  }
499
+ .sb-z-50 {
500
+ z-index: 50;
501
+ }
487
502
  .sb-col-span-3 {
488
503
  grid-column: span 3 / span 3;
489
504
  }
@@ -499,9 +514,18 @@ video {
499
514
  .sb-ml-0 {
500
515
  margin-left: 0px;
501
516
  }
517
+ .sb-ml-2 {
518
+ margin-left: 0.5rem;
519
+ }
502
520
  .sb-mr-0 {
503
521
  margin-right: 0px;
504
522
  }
523
+ .sb-mr-2 {
524
+ margin-right: 0.5rem;
525
+ }
526
+ .sb-mt-2 {
527
+ margin-top: 0.5rem;
528
+ }
505
529
  .sb-flex {
506
530
  display: flex;
507
531
  }
@@ -575,6 +599,10 @@ video {
575
599
  --tw-border-spacing-x: 0.5rem;
576
600
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
577
601
  }
602
+ .-sb-translate-x-1\/2 {
603
+ --tw-translate-x: -50%;
604
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
605
+ }
578
606
  .-sb-translate-y-0 {
579
607
  --tw-translate-y: -0px;
580
608
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -583,8 +611,8 @@ video {
583
611
  --tw-translate-y: -0.25rem;
584
612
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
585
613
  }
586
- .sb--translate-x-1\/2 {
587
- --tw-translate-x: -50%;
614
+ .-sb-translate-y-1\/2 {
615
+ --tw-translate-y: -50%;
588
616
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
589
617
  }
590
618
  .sb-translate-y-0 {
@@ -669,8 +697,8 @@ video {
669
697
  .sb-overflow-hidden {
670
698
  overflow: hidden;
671
699
  }
672
- .sb-whitespace-nowrap {
673
- white-space: nowrap;
700
+ .sb-rounded {
701
+ border-radius: 0.25rem;
674
702
  }
675
703
  .sb-rounded-full {
676
704
  border-radius: 9999px;
@@ -700,6 +728,10 @@ video {
700
728
  --tw-bg-opacity: 1;
701
729
  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
702
730
  }
731
+ .sb-bg-black {
732
+ --tw-bg-opacity: 1;
733
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
734
+ }
703
735
  .sb-bg-orange-500 {
704
736
  --tw-bg-opacity: 1;
705
737
  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
@@ -731,6 +763,10 @@ video {
731
763
  padding-left: 1rem !important;
732
764
  padding-right: 1rem !important;
733
765
  }
766
+ .sb-px-2 {
767
+ padding-left: 0.5rem;
768
+ padding-right: 0.5rem;
769
+ }
734
770
  .sb-px-4 {
735
771
  padding-left: 1rem;
736
772
  padding-right: 1rem;
@@ -763,6 +799,10 @@ video {
763
799
  .sb-text-center {
764
800
  text-align: center;
765
801
  }
802
+ .sb-text-sm {
803
+ font-size: 0.875rem;
804
+ line-height: 1.25rem;
805
+ }
766
806
  .sb-font-bold {
767
807
  font-weight: 700;
768
808
  }
@@ -784,6 +824,14 @@ video {
784
824
  var(--tw-ring-shadow, 0 0 #0000),
785
825
  var(--tw-shadow);
786
826
  }
827
+ .sb-shadow-md {
828
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
829
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
830
+ box-shadow:
831
+ var(--tw-ring-offset-shadow, 0 0 #0000),
832
+ var(--tw-ring-shadow, 0 0 #0000),
833
+ var(--tw-shadow);
834
+ }
787
835
  .sb-backdrop-blur-lg {
788
836
  --tw-backdrop-blur: blur(16px);
789
837
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
package/dist/index.mjs CHANGED
@@ -610,7 +610,9 @@ var MenuButton = ({
610
610
  onClick,
611
611
  setNoteOpen,
612
612
  noteButtonClick,
613
- disablePopUp = false
613
+ disablePopUp = false,
614
+ onMouseEnter,
615
+ onMouseLeave
614
616
  }) => {
615
617
  const [isOpen, setIsOpen] = useState3(false);
616
618
  const buttonRef = useRef(null);
@@ -634,35 +636,43 @@ var MenuButton = ({
634
636
  useEffect3(() => {
635
637
  setNoteOpen && setNoteOpen(isOpen);
636
638
  }, [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
- ] });
639
+ return /* @__PURE__ */ jsxs5(
640
+ "div",
641
+ {
642
+ onMouseEnter,
643
+ onMouseLeave,
644
+ className: "sb-relative sb-flex sb-items-end",
645
+ children: [
646
+ /* @__PURE__ */ jsx20(
647
+ "button",
648
+ {
649
+ ref: buttonRef,
650
+ onClick: (e) => {
651
+ isOpen && e.stopPropagation();
652
+ toggleMenu();
653
+ onClick && onClick(e, !isOpen);
654
+ noteButtonClick && noteButtonClick(!isOpen);
655
+ },
656
+ "aria-haspopup": "true",
657
+ "aria-expanded": isOpen,
658
+ "aria-label": "Open menu",
659
+ children: buttonContent
660
+ }
661
+ ),
662
+ !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
663
+ "div",
664
+ {
665
+ ref: menuRef,
666
+ role: "menu",
667
+ "aria-orientation": "vertical",
668
+ "aria-labelledby": "Open menu",
669
+ className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
670
+ children: menuContent
671
+ }
672
+ )
673
+ ]
674
+ }
675
+ );
666
676
  };
667
677
  var MenuButton_default = MenuButton;
668
678
 
@@ -791,7 +801,9 @@ var CreateNoteMenu = ({
791
801
  handleSaveNoteAction,
792
802
  width,
793
803
  setNoteOpen,
794
- noteButtonClick
804
+ noteButtonClick,
805
+ onMouseEnter,
806
+ onMouseLeave
795
807
  }) => {
796
808
  const { player } = useSoftBuildersVideoPlayerContext();
797
809
  const [note, setNote] = useState5("");
@@ -810,6 +822,8 @@ var CreateNoteMenu = ({
810
822
  return /* @__PURE__ */ jsx22(
811
823
  MenuButton_default,
812
824
  {
825
+ onMouseEnter,
826
+ onMouseLeave,
813
827
  disablePopUp: true,
814
828
  noteButtonClick,
815
829
  setNoteOpen,
@@ -861,9 +875,26 @@ import { useEffect as useEffect5, useState as useState6 } from "react";
861
875
 
862
876
  // src/components/Tooltip/index.tsx
863
877
  import { jsx as jsx23 } from "react/jsx-runtime";
864
- var Tooltip = ({ open, children }) => {
878
+ var Tooltip = ({
879
+ open,
880
+ children,
881
+ position = "top"
882
+ }) => {
865
883
  if (!open) return null;
866
- return /* @__PURE__ */ jsx23("div", { 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", children });
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
+ return /* @__PURE__ */ jsx23(
892
+ "div",
893
+ {
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]}`,
895
+ children
896
+ }
897
+ );
867
898
  };
868
899
  var Tooltip_default = Tooltip;
869
900
 
@@ -1150,7 +1181,12 @@ var SubtitleOption = ({
1150
1181
  }
1151
1182
  );
1152
1183
  };
1153
- var SubtitleMenu = ({ width, onClick }) => {
1184
+ var SubtitleMenu = ({
1185
+ width,
1186
+ onClick,
1187
+ onMouseEnter,
1188
+ onMouseLeave
1189
+ }) => {
1154
1190
  const { player } = useSoftBuildersVideoPlayerContext();
1155
1191
  const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
1156
1192
  const [subtitles, setSubtitles] = useState11([]);
@@ -1175,6 +1211,8 @@ var SubtitleMenu = ({ width, onClick }) => {
1175
1211
  return /* @__PURE__ */ jsx32(
1176
1212
  MenuButton_default,
1177
1213
  {
1214
+ onMouseEnter,
1215
+ onMouseLeave,
1178
1216
  onClick: (e, isOpen) => {
1179
1217
  onClick && onClick(e, isOpen);
1180
1218
  },
@@ -1253,6 +1291,16 @@ var ControlBar = ({
1253
1291
  };
1254
1292
  const [volumeSliderToggler, setVolumeToggler] = useState12(false);
1255
1293
  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
+ });
1256
1304
  function handleWidthChange(width2) {
1257
1305
  setWidth(width2);
1258
1306
  }
@@ -1349,6 +1397,8 @@ var ControlBar = ({
1349
1397
  disableNote && /* @__PURE__ */ jsx33(
1350
1398
  CreateNoteMenu_default,
1351
1399
  {
1400
+ onMouseEnter: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: true })),
1401
+ onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: false })),
1352
1402
  handleSaveNoteAction,
1353
1403
  width,
1354
1404
  setNoteOpen,
@@ -1363,6 +1413,11 @@ var ControlBar = ({
1363
1413
  /* @__PURE__ */ jsx33(
1364
1414
  SubtitleMenu_default,
1365
1415
  {
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 })),
1366
1421
  width,
1367
1422
  onClick: (e, isOpen) => {
1368
1423
  setVolumeToggler(!volumeSliderToggler);
@@ -1542,8 +1597,6 @@ var VideoPlayerComponent = forwardRef(
1542
1597
  }
1543
1598
  return () => {
1544
1599
  if (playerRef.current) {
1545
- playerRef.current.dispose();
1546
- playerRef.current = void 0;
1547
1600
  setTimeout(() => {
1548
1601
  if (bigPlayButtonRoot[id]) {
1549
1602
  bigPlayButtonRoot[id].unmount();
@@ -1697,6 +1750,7 @@ var VideoPlayerComponent = forwardRef(
1697
1750
  if (playerRef.current) {
1698
1751
  if (playerRef.current.paused()) {
1699
1752
  try {
1753
+ startTime && playerRef.current.currentTime(startTime);
1700
1754
  await playerRef.current.play();
1701
1755
  setIsPaused(false);
1702
1756
  } catch (error) {