softbuilders-react-video-player 1.1.73 → 1.1.75

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
@@ -642,8 +642,8 @@ var MenuButton = ({
642
642
  setIsOpen(false);
643
643
  }, []);
644
644
  useEffect3(() => {
645
- const handleClickOutside = (event2) => {
646
- if (buttonRef.current && !buttonRef.current.contains(event2.target) && menuRef.current && !menuRef.current.contains(event2.target)) {
645
+ const handleClickOutside = (event) => {
646
+ if (buttonRef.current && !buttonRef.current.contains(event.target) && menuRef.current && !menuRef.current.contains(event.target)) {
647
647
  setIsOpen(false);
648
648
  }
649
649
  };
@@ -668,10 +668,10 @@ var MenuButton = ({
668
668
  {
669
669
  ref: buttonRef,
670
670
  onClick: (e) => {
671
- isOpen && e.stopPropagation();
671
+ e.stopPropagation();
672
672
  toggleMenu();
673
673
  onClick && onClick(e, !isOpen);
674
- noteButtonClick && noteButtonClick(!isOpen);
674
+ noteButtonClick && noteButtonClick(true);
675
675
  },
676
676
  "aria-haspopup": "true",
677
677
  "aria-expanded": isOpen,
@@ -815,7 +815,7 @@ var QualityMenu = ({ width, onClick }) => {
815
815
  var QualityMenu_default = QualityMenu;
816
816
 
817
817
  // src/components/CreateNoteMenu/index.tsx
818
- import { useState as useState5 } from "react";
818
+ import React5, { useState as useState5 } from "react";
819
819
  import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
820
820
  var CreateNoteMenu = ({
821
821
  handleSaveNoteAction,
@@ -885,13 +885,13 @@ var CreateNoteMenu = ({
885
885
  }
886
886
  );
887
887
  };
888
- var CreateNoteMenu_default = CreateNoteMenu;
888
+ var CreateNoteMenu_default = React5.memo(CreateNoteMenu);
889
889
 
890
890
  // src/components/NotesPanal/index.tsx
891
891
  import { useEffect as useEffect6, useState as useState7 } from "react";
892
892
 
893
893
  // src/components/NoteTooltip/index.tsx
894
- import { useEffect as useEffect5, useState as useState6 } from "react";
894
+ import { useState as useState6 } from "react";
895
895
 
896
896
  // src/components/Tooltip/index.tsx
897
897
  import { jsx as jsx23 } from "react/jsx-runtime";
@@ -911,18 +911,14 @@ var Tooltip_default = Tooltip;
911
911
  import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
912
912
  var NoteTooltip = ({ note }) => {
913
913
  const [open, setOpen] = useState6(false);
914
- const { currentTime } = useSoftBuildersVideoPlayerContext();
915
- useEffect5(() => {
916
- if (currentTime === Math.floor(note.time)) {
917
- setOpen(true);
918
- setTimeout(() => {
919
- setOpen(false);
920
- }, 5e3);
921
- }
922
- }, [currentTime, note.time]);
914
+ const { currentTime, player } = useSoftBuildersVideoPlayerContext();
915
+ const handleValueChange = () => {
916
+ player == null ? void 0 : player.currentTime(note.time);
917
+ };
923
918
  return /* @__PURE__ */ jsx24(
924
919
  "div",
925
920
  {
921
+ onClick: handleValueChange,
926
922
  className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30",
927
923
  style: { left: `${note.percentage}%` },
928
924
  onMouseEnter: () => setOpen(true),
@@ -1479,6 +1475,7 @@ var ControlBar = ({
1479
1475
  time: Number((player == null ? void 0 : player.currentTime()) || 0),
1480
1476
  isOpen: e
1481
1477
  });
1478
+ player.pause();
1482
1479
  }
1483
1480
  }
1484
1481
  ) }),
@@ -1562,19 +1559,22 @@ var controlBarRoot = {};
1562
1559
  var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => {
1563
1560
  }, bgColor = "transparent", setIsQualityMenuOpen, setIsSubtitleMenuOpen, disableNote, setNoteOpen, noteButtonClick) => {
1564
1561
  const container = document.getElementById(`video-container-${id}`);
1562
+ console.log("container: ", container);
1565
1563
  if (container) {
1564
+ console.log("container1: ");
1566
1565
  container.style.height = "100%";
1567
1566
  container.style.aspectRatio = "16 / 9";
1568
1567
  const element = container.querySelector(".vjs-control-bar");
1569
1568
  if (element) {
1569
+ console.log("container2: ");
1570
1570
  if (!controlBarRoot[id]) {
1571
1571
  controlBarRoot[id] = ReactDOM.createRoot(element);
1572
+ element.style.display = "flex";
1573
+ element.style.height = "100%";
1574
+ element.style.alignItems = "flex-end";
1572
1575
  }
1573
- element.style.display = "flex";
1574
1576
  element.style.opacity = opacity;
1575
1577
  element.style.backgroundColor = `${bgColor} !important`;
1576
- element.style.height = "100%";
1577
- element.style.alignItems = "flex-end";
1578
1578
  controlBarRoot[id].render(
1579
1579
  /* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
1580
1580
  ControlBar_default,
@@ -1626,9 +1626,9 @@ var VideoPlayerComponent = forwardRef(
1626
1626
  const [bgColor, setBgColor] = useState14("transparent");
1627
1627
  const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
1628
1628
  const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
1629
- const [isHovered, setIsHovered] = useState14(false);
1630
1629
  const [isNoteOpen, setNoteOpen] = useState14(false);
1631
1630
  const onReady = (player) => {
1631
+ console.log("onReady: ", onReady);
1632
1632
  if (playerRef) {
1633
1633
  playerRef.current = player;
1634
1634
  setIsReady(true);
@@ -1661,22 +1661,6 @@ var VideoPlayerComponent = forwardRef(
1661
1661
  onReady(playerRef.current);
1662
1662
  });
1663
1663
  }
1664
- return () => {
1665
- if (playerRef.current) {
1666
- playerRef.current.dispose();
1667
- playerRef.current = void 0;
1668
- setTimeout(() => {
1669
- if (bigPlayButtonRoot[id]) {
1670
- bigPlayButtonRoot[id].unmount();
1671
- bigPlayButtonRoot[id] = void 0;
1672
- }
1673
- if (controlBarRoot[id]) {
1674
- controlBarRoot[id].unmount();
1675
- controlBarRoot[id] = void 0;
1676
- }
1677
- }, 0);
1678
- }
1679
- };
1680
1664
  }, [options, poster]);
1681
1665
  useEffect14(() => {
1682
1666
  if (playerRef.current && isReady) {
@@ -1712,7 +1696,7 @@ var VideoPlayerComponent = forwardRef(
1712
1696
  setNoteOpen,
1713
1697
  noteButtonClick
1714
1698
  );
1715
- }, 500);
1699
+ }, 0);
1716
1700
  return () => clearTimeout(controlBarTimeout);
1717
1701
  }
1718
1702
  }, [
@@ -1749,6 +1733,14 @@ var VideoPlayerComponent = forwardRef(
1749
1733
  return () => clearInterval(intervalId);
1750
1734
  }
1751
1735
  }, []);
1736
+ useEffect14(() => {
1737
+ var _a, _b;
1738
+ if (playerRef.current) {
1739
+ (_a = playerRef.current) == null ? void 0 : _a.currentTime(startTime);
1740
+ console.log("startTimenotes: ", startTime);
1741
+ (_b = playerRef.current) == null ? void 0 : _b.play();
1742
+ }
1743
+ }, [startTime]);
1752
1744
  useEffect14(() => {
1753
1745
  return () => {
1754
1746
  if (playerRef.current) {
@@ -1786,22 +1778,12 @@ var VideoPlayerComponent = forwardRef(
1786
1778
  }
1787
1779
  }, [isQualityMenuOpen, isSubtitleMenuOpen]);
1788
1780
  useEffect14(() => {
1789
- console.log("isNoteOpen: ", isNoteOpen);
1790
- if (isNoteOpen) {
1791
- if (timeoutRef.current) {
1792
- clearTimeout(timeoutRef.current);
1793
- }
1794
- } else {
1795
- if (timeoutRef.current) {
1796
- clearTimeout(timeoutRef.current);
1797
- }
1798
- timeoutRef.current = setTimeout(() => {
1799
- setIsControlBarPresent(false);
1800
- }, 3e3);
1781
+ if (playerRef.current) {
1801
1782
  }
1802
- }, [isNoteOpen]);
1783
+ }, [notes]);
1803
1784
  const handlePlayerClick = async (e, isTimerOnly = false) => {
1804
1785
  e.preventDefault();
1786
+ console.log("handlePlayerClick: ", isTimerOnly);
1805
1787
  if (timeoutRef.current) {
1806
1788
  clearTimeout(timeoutRef.current);
1807
1789
  }
@@ -1869,9 +1851,8 @@ var VideoPlayerComponent = forwardRef(
1869
1851
  const [timeSeeker, setTimeSeeker] = useState14("0");
1870
1852
  useEffect14(() => {
1871
1853
  const updateTimeSeeker = () => {
1872
- var _a;
1873
- if (playerRef == null ? void 0 : playerRef.current) {
1874
- const currentTime = (_a = playerRef.current) == null ? void 0 : _a.currentTime();
1854
+ if (playerRef.current) {
1855
+ const currentTime = playerRef.current.currentTime();
1875
1856
  const duration2 = playerRef.current.duration();
1876
1857
  if (duration2 && currentTime !== void 0) {
1877
1858
  setTimeSeeker(`${currentTime / duration2 * 100}%`);
@@ -1888,12 +1869,10 @@ var VideoPlayerComponent = forwardRef(
1888
1869
  {
1889
1870
  ref: videoRefs,
1890
1871
  id: `video-container-${id}`,
1891
- onMouseMove: () => {
1892
- !isNoteOpen ? handlePlayerClick(event, true) : "";
1872
+ onMouseMove: (e) => {
1873
+ handlePlayerClick(e, true);
1893
1874
  },
1894
1875
  className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
1895
- onMouseEnter: () => setIsHovered(true),
1896
- onMouseLeave: () => setIsHovered(false),
1897
1876
  children: [
1898
1877
  bottomRedBar && /* @__PURE__ */ jsx36(
1899
1878
  "div",
@@ -2002,7 +1981,8 @@ var Component = forwardRef2(
2002
1981
  }
2003
1982
  );
2004
1983
  var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
2005
- return prevProps.options === nextProps.options && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
1984
+ return prevProps.options === nextProps.options && // prevProps.notes === nextProps.notes &&
1985
+ prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
2006
1986
  });
2007
1987
  var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;
2008
1988