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.
Files changed (28) hide show
  1. package/LICENSE +21 -21
  2. package/dist/components/ChapterTooltip/index.tsx +65 -65
  3. package/dist/components/ControlBar/index.js +1 -1
  4. package/dist/components/ControlBar/index.js.map +1 -1
  5. package/dist/components/ControlBar/index.tsx +9 -7
  6. package/dist/components/CurrentTimeLabel/index.tsx +13 -13
  7. package/dist/components/Menu/index.tsx +49 -49
  8. package/dist/components/NoteTooltip/index.tsx +46 -46
  9. package/dist/components/QualityMenu/index.js +11 -11
  10. package/dist/components/QualityMenu/index.js.map +1 -1
  11. package/dist/components/QualityMenu/index.tsx +18 -20
  12. package/dist/components/SoftBuildersVideoPlayer/index.js +55 -32
  13. package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
  14. package/dist/components/SoftBuildersVideoPlayer/index.tsx +80 -40
  15. package/dist/components/Tooltip/GlobalTooltip.js +1 -1
  16. package/dist/components/Tooltip/GlobalTooltip.js.map +1 -1
  17. package/dist/components/Tooltip/GlobalTooltip.tsx +1 -1
  18. package/dist/components/VideoPlayerComponent/index.js +25 -21
  19. package/dist/components/VideoPlayerComponent/index.js.map +1 -1
  20. package/dist/components/VideoPlayerComponent/index.tsx +28 -19
  21. package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
  22. package/dist/components/VolumeSlider/index.js +1 -1
  23. package/dist/components/VolumeSlider/index.js.map +1 -1
  24. package/dist/components/VolumeSlider/index.tsx +1 -1
  25. package/dist/index.css +6 -6
  26. package/dist/index.mjs +69 -67
  27. package/dist/styles/tailwind.css +129 -129
  28. 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":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
@@ -28,7 +28,7 @@ const VolumeSlider = ({
28
28
  const updateVolumeState = () => {
29
29
  const currentVolume = player?.muted()
30
30
  ? 0
31
- : Number(player?.volume()) * 100;
31
+ : Number(player?.volume() || 0) * 100;
32
32
  setVolume(currentVolume);
33
33
  };
34
34
 
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 { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState15 } from "react";
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 { Fragment, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
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(Fragment, { children: /* @__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 as Fragment2, jsx as jsx30 } from "react/jsx-runtime";
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(Fragment2, {});
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 Fragment3, jsx as jsx31 } from "react/jsx-runtime";
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(Fragment3, {});
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: /* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) })
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
- playerRef.current.dispose();
1747
- playerRef.current = void 0;
1748
- if (bigPlayButtonRoot[id]) {
1749
- bigPlayButtonRoot[id].unmount();
1750
- bigPlayButtonRoot[id] = void 0;
1751
- }
1752
- if (controlBarRoot[id]) {
1753
- controlBarRoot[id].unmount();
1754
- controlBarRoot[id] = void 0;
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 _a2, _b;
1842
+ var _a, _b;
1831
1843
  if (entry.isIntersecting === false) {
1832
- if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
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 _a2, _b, _c, _d;
1872
+ var _a;
1861
1873
  if (playerRef == null ? void 0 : playerRef.current) {
1862
- const currentTime = (_b = (_a2 = playerRef.current) == null ? void 0 : _a2.currentTime) == null ? void 0 : _b.call(_a2);
1863
- const duration2 = (_d = (_c = playerRef.current) == null ? void 0 : _c.duration) == null ? void 0 : _d.call(_c);
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
- const value = `${currentTime / duration2 * 100}%`;
1866
- setTimeSeeker(value);
1877
+ setTimeSeeker(`${currentTime / duration2 * 100}%`);
1867
1878
  } else {
1868
1879
  setTimeSeeker("0");
1869
1880
  }
1870
1881
  }
1871
1882
  };
1872
- updateTimeSeeker();
1873
- }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
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
- options = __spreadProps(__spreadValues({}, options), {
1947
- responsive: true,
1948
- inactivityTimeout: 0,
1949
- fullscreen: {
1950
- navigationUI: "hide"
1951
- }
1952
- });
1953
- if (options.autoplay === void 0)
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
- useEffect15(() => {
1963
- }, [isFocused]);
1964
- useEffect15(() => {
1965
- const getTracks = async () => {
1966
- const newTracks = [];
1967
- if (Array.isArray(options == null ? void 0 : options.tracks))
1968
- for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
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
- setTracks(newTracks);
1978
- };
1975
+ newTracks.push(__spreadProps(__spreadValues({}, s), { src }));
1976
+ }
1977
+ }
1978
+ setTracks(newTracks);
1979
+ }, [mergedOptions.tracks]);
1980
+ useEffect15(() => {
1979
1981
  getTracks();
1980
- }, [options == null ? void 0 : options.tracks]);
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({}, options), { tracks }),
1989
+ options: __spreadProps(__spreadValues({}, mergedOptions), { tracks }),
1988
1990
  notes,
1989
1991
  poster: "",
1990
1992
  startTime,