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/LICENSE +21 -21
- package/dist/components/ChapterTooltip/index.tsx +65 -65
- package/dist/components/ControlBar/index.js +1 -0
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +1 -0
- package/dist/components/CreateNoteMenu/index.d.ts +3 -2
- package/dist/components/CreateNoteMenu/index.js +2 -2
- package/dist/components/CreateNoteMenu/index.js.map +1 -1
- package/dist/components/CreateNoteMenu/index.tsx +1 -1
- package/dist/components/CurrentTimeLabel/index.tsx +13 -13
- package/dist/components/Menu/index.tsx +49 -49
- package/dist/components/MenuButton/index.js +2 -2
- package/dist/components/MenuButton/index.js.map +1 -1
- package/dist/components/MenuButton/index.tsx +2 -2
- package/dist/components/NoteTooltip/index.js +14 -11
- package/dist/components/NoteTooltip/index.js.map +1 -1
- package/dist/components/NoteTooltip/index.tsx +50 -46
- package/dist/components/SoftBuildersVideoPlayer/index.js +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +1 -1
- package/dist/components/VideoPlayerComponent/index.js +24 -42
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +31 -43
- package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
- package/dist/index.mjs +38 -58
- package/dist/styles/tailwind.css +125 -125
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -642,8 +642,8 @@ var MenuButton = ({
|
|
642
642
|
setIsOpen(false);
|
643
643
|
}, []);
|
644
644
|
useEffect3(() => {
|
645
|
-
const handleClickOutside = (
|
646
|
-
if (buttonRef.current && !buttonRef.current.contains(
|
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
|
-
|
671
|
+
e.stopPropagation();
|
672
672
|
toggleMenu();
|
673
673
|
onClick && onClick(e, !isOpen);
|
674
|
-
noteButtonClick && noteButtonClick(
|
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 {
|
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
|
-
|
916
|
-
|
917
|
-
|
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
|
-
},
|
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
|
-
|
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
|
-
}, [
|
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
|
-
|
1873
|
-
|
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
|
-
|
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 &&
|
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
|
|