softbuilders-react-video-player 1.1.72 → 1.1.73
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/CurrentTimeLabel/index.tsx +13 -13
- package/dist/components/Menu/index.tsx +49 -49
- package/dist/components/NoteTooltip/index.tsx +46 -46
- package/dist/components/SoftBuildersVideoPlayer/index.js +55 -32
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +80 -40
- package/dist/components/VideoPlayerComponent/index.js +25 -21
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +28 -19
- package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
- package/dist/components/VolumeSlider/index.js +1 -1
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +1 -1
- package/dist/index.mjs +57 -56
- package/dist/styles/tailwind.css +125 -125
- package/package.json +2 -1
package/dist/index.mjs
CHANGED
@@ -31,7 +31,14 @@ var __objRest = (source, exclude) => {
|
|
31
31
|
};
|
32
32
|
|
33
33
|
// src/components/SoftBuildersVideoPlayer/index.tsx
|
34
|
-
import {
|
34
|
+
import {
|
35
|
+
forwardRef as forwardRef2,
|
36
|
+
memo,
|
37
|
+
useCallback as useCallback4,
|
38
|
+
useEffect as useEffect15,
|
39
|
+
useMemo,
|
40
|
+
useState as useState15
|
41
|
+
} from "react";
|
35
42
|
|
36
43
|
// src/components/VideoPlayerComponent/index.tsx
|
37
44
|
import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState14 } from "react";
|
@@ -521,7 +528,7 @@ var VolumeSlider = ({
|
|
521
528
|
const [volume, setVolume] = useState2(0);
|
522
529
|
useEffect2(() => {
|
523
530
|
const updateVolumeState = () => {
|
524
|
-
const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100;
|
531
|
+
const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number((player == null ? void 0 : player.volume()) || 0) * 100;
|
525
532
|
setVolume(currentVolume);
|
526
533
|
};
|
527
534
|
updateVolumeState();
|
@@ -1609,7 +1616,6 @@ var VideoPlayerComponent = forwardRef(
|
|
1609
1616
|
bottomRedBar = true,
|
1610
1617
|
noteButtonClick
|
1611
1618
|
}, ref) => {
|
1612
|
-
var _a;
|
1613
1619
|
const videoRef = useRef2(void 0);
|
1614
1620
|
const playerRef = useRef2(void 0);
|
1615
1621
|
const [isReady, setIsReady] = useState14(false);
|
@@ -1657,6 +1663,8 @@ var VideoPlayerComponent = forwardRef(
|
|
1657
1663
|
}
|
1658
1664
|
return () => {
|
1659
1665
|
if (playerRef.current) {
|
1666
|
+
playerRef.current.dispose();
|
1667
|
+
playerRef.current = void 0;
|
1660
1668
|
setTimeout(() => {
|
1661
1669
|
if (bigPlayButtonRoot[id]) {
|
1662
1670
|
bigPlayButtonRoot[id].unmount();
|
@@ -1744,16 +1752,19 @@ var VideoPlayerComponent = forwardRef(
|
|
1744
1752
|
useEffect14(() => {
|
1745
1753
|
return () => {
|
1746
1754
|
if (playerRef.current) {
|
1747
|
-
|
1748
|
-
|
1749
|
-
|
1750
|
-
|
1751
|
-
|
1752
|
-
|
1753
|
-
|
1754
|
-
|
1755
|
-
|
1756
|
-
|
1755
|
+
setTimeout(() => {
|
1756
|
+
var _a;
|
1757
|
+
if (bigPlayButtonRoot[id]) {
|
1758
|
+
bigPlayButtonRoot[id].unmount();
|
1759
|
+
bigPlayButtonRoot[id] = void 0;
|
1760
|
+
}
|
1761
|
+
if (controlBarRoot[id]) {
|
1762
|
+
controlBarRoot[id].unmount();
|
1763
|
+
controlBarRoot[id] = void 0;
|
1764
|
+
}
|
1765
|
+
(_a = playerRef.current) == null ? void 0 : _a.dispose();
|
1766
|
+
playerRef.current = void 0;
|
1767
|
+
}, 0);
|
1757
1768
|
}
|
1758
1769
|
};
|
1759
1770
|
}, []);
|
@@ -1828,9 +1839,9 @@ var VideoPlayerComponent = forwardRef(
|
|
1828
1839
|
const observer = new IntersectionObserver(
|
1829
1840
|
(entries) => {
|
1830
1841
|
entries.forEach((entry) => {
|
1831
|
-
var
|
1842
|
+
var _a, _b;
|
1832
1843
|
if (entry.isIntersecting === false) {
|
1833
|
-
if (((
|
1844
|
+
if (((_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.paused()) === false) {
|
1834
1845
|
try {
|
1835
1846
|
(_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
|
1836
1847
|
setIsPaused(true);
|
@@ -1858,20 +1869,20 @@ var VideoPlayerComponent = forwardRef(
|
|
1858
1869
|
const [timeSeeker, setTimeSeeker] = useState14("0");
|
1859
1870
|
useEffect14(() => {
|
1860
1871
|
const updateTimeSeeker = () => {
|
1861
|
-
var
|
1872
|
+
var _a;
|
1862
1873
|
if (playerRef == null ? void 0 : playerRef.current) {
|
1863
|
-
const currentTime = (
|
1864
|
-
const duration2 =
|
1874
|
+
const currentTime = (_a = playerRef.current) == null ? void 0 : _a.currentTime();
|
1875
|
+
const duration2 = playerRef.current.duration();
|
1865
1876
|
if (duration2 && currentTime !== void 0) {
|
1866
|
-
|
1867
|
-
setTimeSeeker(value);
|
1877
|
+
setTimeSeeker(`${currentTime / duration2 * 100}%`);
|
1868
1878
|
} else {
|
1869
1879
|
setTimeSeeker("0");
|
1870
1880
|
}
|
1871
1881
|
}
|
1872
1882
|
};
|
1873
|
-
updateTimeSeeker
|
1874
|
-
|
1883
|
+
const interval = setInterval(updateTimeSeeker, 500);
|
1884
|
+
return () => clearInterval(interval);
|
1885
|
+
}, [playerRef]);
|
1875
1886
|
return /* @__PURE__ */ jsxs15(
|
1876
1887
|
"div",
|
1877
1888
|
{
|
@@ -1944,48 +1955,38 @@ var Component = forwardRef2(
|
|
1944
1955
|
bottomRedBar,
|
1945
1956
|
noteButtonClick
|
1946
1957
|
}, ref) => {
|
1947
|
-
|
1948
|
-
|
1949
|
-
|
1950
|
-
|
1951
|
-
navigationUI: "hide"
|
1952
|
-
}
|
1953
|
-
|
1954
|
-
|
1955
|
-
options.autoplay = DEFAULT_OPTIONS.autoplay;
|
1956
|
-
if (options.controls === void 0)
|
1957
|
-
options.controls = DEFAULT_OPTIONS.controls;
|
1958
|
-
if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
|
1959
|
-
if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
|
1960
|
-
if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
|
1961
|
-
if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
|
1958
|
+
const mergedOptions = useMemo(
|
1959
|
+
() => __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options), {
|
1960
|
+
responsive: true,
|
1961
|
+
inactivityTimeout: 0,
|
1962
|
+
fullscreen: { navigationUI: "hide" }
|
1963
|
+
}),
|
1964
|
+
[options]
|
1965
|
+
);
|
1962
1966
|
const [tracks, setTracks] = useState15([]);
|
1963
|
-
|
1964
|
-
|
1965
|
-
|
1966
|
-
|
1967
|
-
|
1968
|
-
|
1969
|
-
|
1970
|
-
let src = s.src;
|
1971
|
-
if (s.memeType == "text/srt") {
|
1972
|
-
src = await convertSRTtoVTT(s.src);
|
1973
|
-
}
|
1974
|
-
newTracks.push(__spreadProps(__spreadValues({}, s), {
|
1975
|
-
src
|
1976
|
-
}));
|
1967
|
+
const getTracks = useCallback4(async () => {
|
1968
|
+
const newTracks = [];
|
1969
|
+
if (Array.isArray(mergedOptions.tracks)) {
|
1970
|
+
for (const s of mergedOptions.tracks) {
|
1971
|
+
let src = s.src;
|
1972
|
+
if (s.memeType === "text/srt") {
|
1973
|
+
src = await convertSRTtoVTT(s.src);
|
1977
1974
|
}
|
1978
|
-
|
1979
|
-
|
1975
|
+
newTracks.push(__spreadProps(__spreadValues({}, s), { src }));
|
1976
|
+
}
|
1977
|
+
}
|
1978
|
+
setTracks(newTracks);
|
1979
|
+
}, [mergedOptions.tracks]);
|
1980
|
+
useEffect15(() => {
|
1980
1981
|
getTracks();
|
1981
|
-
}, [
|
1982
|
-
const id = (Date.now() + Math.random() * 100).toString();
|
1982
|
+
}, [getTracks]);
|
1983
|
+
const id = useMemo(() => (Date.now() + Math.random() * 100).toString(), []);
|
1983
1984
|
return /* @__PURE__ */ jsx37(
|
1984
1985
|
VideoPlayerComponent_default,
|
1985
1986
|
{
|
1986
1987
|
id,
|
1987
1988
|
chapters,
|
1988
|
-
options: __spreadProps(__spreadValues({},
|
1989
|
+
options: __spreadProps(__spreadValues({}, mergedOptions), { tracks }),
|
1989
1990
|
notes,
|
1990
1991
|
poster: "",
|
1991
1992
|
startTime,
|