softbuilders-react-video-player 1.1.71 → 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/ControlBar/index.js +1 -1
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +9 -7
- 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/QualityMenu/index.js +11 -11
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +18 -20
- 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/Tooltip/GlobalTooltip.js +1 -1
- package/dist/components/Tooltip/GlobalTooltip.js.map +1 -1
- package/dist/components/Tooltip/GlobalTooltip.tsx +1 -1
- 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.css +6 -6
- package/dist/index.mjs +69 -67
- package/dist/styles/tailwind.css +129 -129
- package/package.json +2 -1
@@ -1,82 +1,82 @@
|
|
1
|
-
import React, {
|
2
|
-
createContext,
|
3
|
-
useContext,
|
4
|
-
useState,
|
5
|
-
ReactNode,
|
6
|
-
useEffect,
|
7
|
-
} from "react";
|
8
|
-
import Player from "video.js/dist/types/player";
|
9
|
-
|
10
|
-
interface SoftBuildersVideoPlayerContextType {
|
11
|
-
player: Player | undefined;
|
12
|
-
setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
|
13
|
-
|
14
|
-
currentTime: number;
|
15
|
-
setCurrentTime: (value: number) => void;
|
16
|
-
|
17
|
-
duration: number;
|
18
|
-
setDuration: React.Dispatch<React.SetStateAction<number>>;
|
19
|
-
|
20
|
-
// isPaused: boolean;
|
21
|
-
// setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
22
|
-
|
23
|
-
downloadedBufferPercentage: number;
|
24
|
-
downloadedBufferTime: number;
|
25
|
-
setDownloadedBufferTimeufferTime: React.Dispatch<
|
26
|
-
React.SetStateAction<number>
|
27
|
-
>;
|
28
|
-
}
|
29
|
-
|
30
|
-
const SoftBuildersVideoPlayerContext = createContext<
|
31
|
-
SoftBuildersVideoPlayerContextType | undefined
|
32
|
-
>(undefined);
|
33
|
-
|
34
|
-
// Create a provider component
|
35
|
-
export const SoftBuildersVideoPlayerProvider = ({
|
36
|
-
children,
|
37
|
-
}: {
|
38
|
-
children: ReactNode;
|
39
|
-
}) => {
|
40
|
-
const [player, setPlayer] = useState<Player | undefined>(undefined);
|
41
|
-
const [currentTime, setCurrentTime] = useState<number>(0);
|
42
|
-
const [duration, setDuration] = useState<number>(1);
|
43
|
-
// const [isPaused, setIsPaused] = useState(false);
|
44
|
-
const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
|
45
|
-
const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
|
46
|
-
useState(0);
|
47
|
-
|
48
|
-
useEffect(() => {
|
49
|
-
setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
|
50
|
-
}, [downloadedBufferTime]);
|
51
|
-
|
52
|
-
return (
|
53
|
-
<SoftBuildersVideoPlayerContext.Provider
|
54
|
-
value={{
|
55
|
-
player,
|
56
|
-
setPlayer,
|
57
|
-
duration,
|
58
|
-
setDuration,
|
59
|
-
currentTime,
|
60
|
-
setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
|
61
|
-
// isPaused,
|
62
|
-
// setIsPaused,
|
63
|
-
downloadedBufferTime,
|
64
|
-
setDownloadedBufferTimeufferTime,
|
65
|
-
downloadedBufferPercentage,
|
66
|
-
}}
|
67
|
-
>
|
68
|
-
{children}
|
69
|
-
</SoftBuildersVideoPlayerContext.Provider>
|
70
|
-
);
|
71
|
-
};
|
72
|
-
|
73
|
-
// Custom hook to use the context
|
74
|
-
export const useSoftBuildersVideoPlayerContext = () => {
|
75
|
-
const context = useContext(SoftBuildersVideoPlayerContext);
|
76
|
-
if (!context) {
|
77
|
-
throw new Error(
|
78
|
-
"useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
|
79
|
-
);
|
80
|
-
}
|
81
|
-
return context;
|
82
|
-
};
|
1
|
+
import React, {
|
2
|
+
createContext,
|
3
|
+
useContext,
|
4
|
+
useState,
|
5
|
+
ReactNode,
|
6
|
+
useEffect,
|
7
|
+
} from "react";
|
8
|
+
import Player from "video.js/dist/types/player";
|
9
|
+
|
10
|
+
interface SoftBuildersVideoPlayerContextType {
|
11
|
+
player: Player | undefined;
|
12
|
+
setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
|
13
|
+
|
14
|
+
currentTime: number;
|
15
|
+
setCurrentTime: (value: number) => void;
|
16
|
+
|
17
|
+
duration: number;
|
18
|
+
setDuration: React.Dispatch<React.SetStateAction<number>>;
|
19
|
+
|
20
|
+
// isPaused: boolean;
|
21
|
+
// setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
22
|
+
|
23
|
+
downloadedBufferPercentage: number;
|
24
|
+
downloadedBufferTime: number;
|
25
|
+
setDownloadedBufferTimeufferTime: React.Dispatch<
|
26
|
+
React.SetStateAction<number>
|
27
|
+
>;
|
28
|
+
}
|
29
|
+
|
30
|
+
const SoftBuildersVideoPlayerContext = createContext<
|
31
|
+
SoftBuildersVideoPlayerContextType | undefined
|
32
|
+
>(undefined);
|
33
|
+
|
34
|
+
// Create a provider component
|
35
|
+
export const SoftBuildersVideoPlayerProvider = ({
|
36
|
+
children,
|
37
|
+
}: {
|
38
|
+
children: ReactNode;
|
39
|
+
}) => {
|
40
|
+
const [player, setPlayer] = useState<Player | undefined>(undefined);
|
41
|
+
const [currentTime, setCurrentTime] = useState<number>(0);
|
42
|
+
const [duration, setDuration] = useState<number>(1);
|
43
|
+
// const [isPaused, setIsPaused] = useState(false);
|
44
|
+
const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
|
45
|
+
const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
|
46
|
+
useState(0);
|
47
|
+
|
48
|
+
useEffect(() => {
|
49
|
+
setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
|
50
|
+
}, [downloadedBufferTime]);
|
51
|
+
|
52
|
+
return (
|
53
|
+
<SoftBuildersVideoPlayerContext.Provider
|
54
|
+
value={{
|
55
|
+
player,
|
56
|
+
setPlayer,
|
57
|
+
duration,
|
58
|
+
setDuration,
|
59
|
+
currentTime,
|
60
|
+
setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
|
61
|
+
// isPaused,
|
62
|
+
// setIsPaused,
|
63
|
+
downloadedBufferTime,
|
64
|
+
setDownloadedBufferTimeufferTime,
|
65
|
+
downloadedBufferPercentage,
|
66
|
+
}}
|
67
|
+
>
|
68
|
+
{children}
|
69
|
+
</SoftBuildersVideoPlayerContext.Provider>
|
70
|
+
);
|
71
|
+
};
|
72
|
+
|
73
|
+
// Custom hook to use the context
|
74
|
+
export const useSoftBuildersVideoPlayerContext = () => {
|
75
|
+
const context = useContext(SoftBuildersVideoPlayerContext);
|
76
|
+
if (!context) {
|
77
|
+
throw new Error(
|
78
|
+
"useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
|
79
|
+
);
|
80
|
+
}
|
81
|
+
return context;
|
82
|
+
};
|
@@ -13,7 +13,7 @@ const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, volu
|
|
13
13
|
const updateVolumeState = () => {
|
14
14
|
const currentVolume = (player === null || player === void 0 ? void 0 : player.muted())
|
15
15
|
? 0
|
16
|
-
: Number(player === null || player === void 0 ? void 0 : player.volume()) * 100;
|
16
|
+
: Number((player === null || player === void 0 ? void 0 : player.volume()) || 0) * 100;
|
17
17
|
setVolume(currentVolume);
|
18
18
|
};
|
19
19
|
// Initial volume setup
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,GAAG,GAAG,CAAC,EACX,GAAG,GAAG,GAAG,CAAC;AASZ,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,GAAG,CAAC,EACT,YAAY,EACZ,yBAAyB,EACzB,mBAAmB,GACb,EAAE,EAAE;IACV,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IACvD,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExC,yDAAyD;IACzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,MAAM,aAAa,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE;gBACnC,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE,CAAC,GAAG,GAAG,CAAC;
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.css
CHANGED
@@ -424,9 +424,15 @@ video {
|
|
424
424
|
.sb-relative {
|
425
425
|
position: relative;
|
426
426
|
}
|
427
|
+
.\!sb-bottom-\[105\%\] {
|
428
|
+
bottom: 105% !important;
|
429
|
+
}
|
427
430
|
.\!sb-top-8 {
|
428
431
|
top: 2rem !important;
|
429
432
|
}
|
433
|
+
.\!sb-top-\[105\%\] {
|
434
|
+
top: 105% !important;
|
435
|
+
}
|
430
436
|
.-sb-left-9 {
|
431
437
|
left: -2.25rem;
|
432
438
|
}
|
@@ -448,9 +454,6 @@ video {
|
|
448
454
|
.sb-bottom-2 {
|
449
455
|
bottom: 0.5rem;
|
450
456
|
}
|
451
|
-
.sb-bottom-\[105\] {
|
452
|
-
bottom: 105;
|
453
|
-
}
|
454
457
|
.sb-bottom-full {
|
455
458
|
bottom: 100%;
|
456
459
|
}
|
@@ -472,9 +475,6 @@ video {
|
|
472
475
|
.sb-top-2 {
|
473
476
|
top: 0.5rem;
|
474
477
|
}
|
475
|
-
.sb-top-\[105\%\] {
|
476
|
-
top: 105%;
|
477
|
-
}
|
478
478
|
.sb-top-\[27\%\] {
|
479
479
|
top: 27%;
|
480
480
|
}
|
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();
|
@@ -690,7 +697,7 @@ var MenuButton = ({
|
|
690
697
|
var MenuButton_default = MenuButton;
|
691
698
|
|
692
699
|
// src/components/QualityMenu/index.tsx
|
693
|
-
import {
|
700
|
+
import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
|
694
701
|
var QualityOption = ({
|
695
702
|
isSelected,
|
696
703
|
quality,
|
@@ -774,7 +781,7 @@ var QualityMenu = ({ width, onClick }) => {
|
|
774
781
|
),
|
775
782
|
/* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
|
776
783
|
/* @__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(
|
784
|
+
return /* @__PURE__ */ jsx21(
|
778
785
|
QualityOption,
|
779
786
|
{
|
780
787
|
width,
|
@@ -794,7 +801,7 @@ var QualityMenu = ({ width, onClick }) => {
|
|
794
801
|
}
|
795
802
|
},
|
796
803
|
`quality-${q.label}-${i}`
|
797
|
-
)
|
804
|
+
);
|
798
805
|
}) })
|
799
806
|
] })
|
800
807
|
}
|
@@ -1132,7 +1139,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
|
|
1132
1139
|
|
1133
1140
|
// src/components/BufferTracker/index.tsx
|
1134
1141
|
import { useEffect as useEffect10 } from "react";
|
1135
|
-
import { Fragment
|
1142
|
+
import { Fragment, jsx as jsx30 } from "react/jsx-runtime";
|
1136
1143
|
var BufferTracker = () => {
|
1137
1144
|
const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
|
1138
1145
|
useEffect10(() => {
|
@@ -1141,13 +1148,13 @@ var BufferTracker = () => {
|
|
1141
1148
|
}, 1e3);
|
1142
1149
|
return () => clearInterval(intervalId);
|
1143
1150
|
}, [player]);
|
1144
|
-
return /* @__PURE__ */ jsx30(
|
1151
|
+
return /* @__PURE__ */ jsx30(Fragment, {});
|
1145
1152
|
};
|
1146
1153
|
var BufferTracker_default = BufferTracker;
|
1147
1154
|
|
1148
1155
|
// src/components/CurrentTimeTracker/index.tsx
|
1149
1156
|
import { useEffect as useEffect11 } from "react";
|
1150
|
-
import { Fragment as
|
1157
|
+
import { Fragment as Fragment2, jsx as jsx31 } from "react/jsx-runtime";
|
1151
1158
|
var CurrentTimeTracker = () => {
|
1152
1159
|
const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
|
1153
1160
|
useEffect11(() => {
|
@@ -1156,7 +1163,7 @@ var CurrentTimeTracker = () => {
|
|
1156
1163
|
}, 500);
|
1157
1164
|
return () => clearInterval(intervalId);
|
1158
1165
|
}, [player]);
|
1159
|
-
return /* @__PURE__ */ jsx31(
|
1166
|
+
return /* @__PURE__ */ jsx31(Fragment2, {});
|
1160
1167
|
};
|
1161
1168
|
var CurrentTimeTracker_default = CurrentTimeTracker;
|
1162
1169
|
|
@@ -1295,7 +1302,7 @@ var TooltipModal = ({
|
|
1295
1302
|
isOpen && /* @__PURE__ */ jsx33(
|
1296
1303
|
"div",
|
1297
1304
|
{
|
1298
|
-
className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "sb-bottom-[105]" : "sb-top-[105%]"}`,
|
1305
|
+
className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "!sb-bottom-[105%]" : "!sb-top-[105%]"}`,
|
1299
1306
|
style: {
|
1300
1307
|
position: "absolute",
|
1301
1308
|
left: !isLeft ? "-100%" : "100%",
|
@@ -1391,14 +1398,15 @@ var ControlBar = ({
|
|
1391
1398
|
)
|
1392
1399
|
}
|
1393
1400
|
),
|
1394
|
-
/* @__PURE__ */ jsx34(
|
1401
|
+
/* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx34(
|
1395
1402
|
GlobalTooltip_default,
|
1396
1403
|
{
|
1404
|
+
width,
|
1397
1405
|
content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
|
1398
1406
|
isLeft: true,
|
1399
|
-
children:
|
1407
|
+
children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" })
|
1400
1408
|
}
|
1401
|
-
),
|
1409
|
+
) }),
|
1402
1410
|
/* @__PURE__ */ jsx34(
|
1403
1411
|
"button",
|
1404
1412
|
{
|
@@ -1608,7 +1616,6 @@ var VideoPlayerComponent = forwardRef(
|
|
1608
1616
|
bottomRedBar = true,
|
1609
1617
|
noteButtonClick
|
1610
1618
|
}, ref) => {
|
1611
|
-
var _a;
|
1612
1619
|
const videoRef = useRef2(void 0);
|
1613
1620
|
const playerRef = useRef2(void 0);
|
1614
1621
|
const [isReady, setIsReady] = useState14(false);
|
@@ -1656,6 +1663,8 @@ var VideoPlayerComponent = forwardRef(
|
|
1656
1663
|
}
|
1657
1664
|
return () => {
|
1658
1665
|
if (playerRef.current) {
|
1666
|
+
playerRef.current.dispose();
|
1667
|
+
playerRef.current = void 0;
|
1659
1668
|
setTimeout(() => {
|
1660
1669
|
if (bigPlayButtonRoot[id]) {
|
1661
1670
|
bigPlayButtonRoot[id].unmount();
|
@@ -1743,16 +1752,19 @@ var VideoPlayerComponent = forwardRef(
|
|
1743
1752
|
useEffect14(() => {
|
1744
1753
|
return () => {
|
1745
1754
|
if (playerRef.current) {
|
1746
|
-
|
1747
|
-
|
1748
|
-
|
1749
|
-
|
1750
|
-
|
1751
|
-
|
1752
|
-
|
1753
|
-
|
1754
|
-
|
1755
|
-
|
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);
|
1756
1768
|
}
|
1757
1769
|
};
|
1758
1770
|
}, []);
|
@@ -1827,9 +1839,9 @@ var VideoPlayerComponent = forwardRef(
|
|
1827
1839
|
const observer = new IntersectionObserver(
|
1828
1840
|
(entries) => {
|
1829
1841
|
entries.forEach((entry) => {
|
1830
|
-
var
|
1842
|
+
var _a, _b;
|
1831
1843
|
if (entry.isIntersecting === false) {
|
1832
|
-
if (((
|
1844
|
+
if (((_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.paused()) === false) {
|
1833
1845
|
try {
|
1834
1846
|
(_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
|
1835
1847
|
setIsPaused(true);
|
@@ -1857,20 +1869,20 @@ var VideoPlayerComponent = forwardRef(
|
|
1857
1869
|
const [timeSeeker, setTimeSeeker] = useState14("0");
|
1858
1870
|
useEffect14(() => {
|
1859
1871
|
const updateTimeSeeker = () => {
|
1860
|
-
var
|
1872
|
+
var _a;
|
1861
1873
|
if (playerRef == null ? void 0 : playerRef.current) {
|
1862
|
-
const currentTime = (
|
1863
|
-
const duration2 =
|
1874
|
+
const currentTime = (_a = playerRef.current) == null ? void 0 : _a.currentTime();
|
1875
|
+
const duration2 = playerRef.current.duration();
|
1864
1876
|
if (duration2 && currentTime !== void 0) {
|
1865
|
-
|
1866
|
-
setTimeSeeker(value);
|
1877
|
+
setTimeSeeker(`${currentTime / duration2 * 100}%`);
|
1867
1878
|
} else {
|
1868
1879
|
setTimeSeeker("0");
|
1869
1880
|
}
|
1870
1881
|
}
|
1871
1882
|
};
|
1872
|
-
updateTimeSeeker
|
1873
|
-
|
1883
|
+
const interval = setInterval(updateTimeSeeker, 500);
|
1884
|
+
return () => clearInterval(interval);
|
1885
|
+
}, [playerRef]);
|
1874
1886
|
return /* @__PURE__ */ jsxs15(
|
1875
1887
|
"div",
|
1876
1888
|
{
|
@@ -1943,48 +1955,38 @@ var Component = forwardRef2(
|
|
1943
1955
|
bottomRedBar,
|
1944
1956
|
noteButtonClick
|
1945
1957
|
}, ref) => {
|
1946
|
-
|
1947
|
-
|
1948
|
-
|
1949
|
-
|
1950
|
-
navigationUI: "hide"
|
1951
|
-
}
|
1952
|
-
|
1953
|
-
|
1954
|
-
options.autoplay = DEFAULT_OPTIONS.autoplay;
|
1955
|
-
if (options.controls === void 0)
|
1956
|
-
options.controls = DEFAULT_OPTIONS.controls;
|
1957
|
-
if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
|
1958
|
-
if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
|
1959
|
-
if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
|
1960
|
-
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
|
+
);
|
1961
1966
|
const [tracks, setTracks] = useState15([]);
|
1962
|
-
|
1963
|
-
|
1964
|
-
|
1965
|
-
|
1966
|
-
|
1967
|
-
|
1968
|
-
|
1969
|
-
let src = s.src;
|
1970
|
-
if (s.memeType == "text/srt") {
|
1971
|
-
src = await convertSRTtoVTT(s.src);
|
1972
|
-
}
|
1973
|
-
newTracks.push(__spreadProps(__spreadValues({}, s), {
|
1974
|
-
src
|
1975
|
-
}));
|
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);
|
1976
1974
|
}
|
1977
|
-
|
1978
|
-
|
1975
|
+
newTracks.push(__spreadProps(__spreadValues({}, s), { src }));
|
1976
|
+
}
|
1977
|
+
}
|
1978
|
+
setTracks(newTracks);
|
1979
|
+
}, [mergedOptions.tracks]);
|
1980
|
+
useEffect15(() => {
|
1979
1981
|
getTracks();
|
1980
|
-
}, [
|
1981
|
-
const id = (Date.now() + Math.random() * 100).toString();
|
1982
|
+
}, [getTracks]);
|
1983
|
+
const id = useMemo(() => (Date.now() + Math.random() * 100).toString(), []);
|
1982
1984
|
return /* @__PURE__ */ jsx37(
|
1983
1985
|
VideoPlayerComponent_default,
|
1984
1986
|
{
|
1985
1987
|
id,
|
1986
1988
|
chapters,
|
1987
|
-
options: __spreadProps(__spreadValues({},
|
1989
|
+
options: __spreadProps(__spreadValues({}, mergedOptions), { tracks }),
|
1988
1990
|
notes,
|
1989
1991
|
poster: "",
|
1990
1992
|
startTime,
|