softbuilders-react-video-player 1.1.71 → 1.1.73
Sign up to get free protection for your applications and to get access to all the features.
- 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,
|