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.
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,