softbuilders-react-video-player 1.3.2 → 1.3.3

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/dist/index.mjs CHANGED
@@ -31,11 +31,10 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
 
33
33
  // src/components/SoftBuildersVideoPlayer/index.tsx
34
- import { forwardRef as forwardRef2, memo, useEffect as useEffect16, useState as useState15 } from "react";
34
+ import { memo, useEffect as useEffect16, useState as useState15 } from "react";
35
35
 
36
36
  // src/components/VideoPlayerComponent/index.tsx
37
37
  import {
38
- forwardRef,
39
38
  Suspense,
40
39
  useEffect as useEffect15,
41
40
  useRef as useRef2,
@@ -1879,76 +1878,118 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
1879
1878
  }
1880
1879
  }
1881
1880
  };
1882
- var VideoPlayerComponent = forwardRef(
1883
- ({
1884
- id,
1885
- options,
1886
- notes,
1887
- chapters,
1888
- startTime = 0,
1889
- handleSaveNoteAction,
1890
- poster,
1891
- onPlay,
1892
- onPause,
1893
- disableNote,
1894
- childRef,
1895
- bottomRedBar = true,
1896
- noteButtonClick,
1897
- videoID,
1898
- isTrailer,
1899
- height
1900
- }, ref) => {
1901
- var _a;
1902
- const videoRef = useRef2(void 0);
1903
- const playerRef = useRef2(void 0);
1904
- const idRef = useRef2(void 0);
1905
- const [isReady, setIsReady] = useState14(false);
1906
- const [isPaused, setIsPaused] = useState14(!options.autoplay);
1907
- const [duration, setDuration] = useState14(1);
1908
- const [opacity, setOpacity] = useState14("0");
1909
- const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
1910
- const [bgColor, setBgColor] = useState14("transparent");
1911
- const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
1912
- const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
1913
- const [isHovered, setIsHovered] = useState14(false);
1914
- const [isNoteOpen, setNoteOpen] = useState14(false);
1915
- const [heightValue, setHeightValue] = useState14(0);
1916
- const [isLoading, setIsloading] = useState14(false);
1917
- const onReady = (player) => {
1918
- if (playerRef) {
1919
- playerRef.current = player;
1920
- setIsReady(true);
1921
- player == null ? void 0 : player.currentTime(startTime);
1922
- player.on("waiting", () => {
1923
- });
1924
- player.on("dispose", () => {
1925
- videojs.log("player will dispose");
1926
- setIsReady(false);
1927
- });
1928
- player.on("loadedmetadata", () => {
1929
- const d = player.duration() || 0;
1930
- setDuration(d);
1931
- });
1881
+ var VideoPlayerComponent = ({
1882
+ id,
1883
+ options,
1884
+ notes,
1885
+ chapters,
1886
+ startTime = 0,
1887
+ handleSaveNoteAction,
1888
+ poster,
1889
+ onPlay,
1890
+ onPause,
1891
+ disableNote,
1892
+ childRef,
1893
+ bottomRedBar = true,
1894
+ noteButtonClick,
1895
+ videoID,
1896
+ isTrailer,
1897
+ height
1898
+ }) => {
1899
+ var _a;
1900
+ const videoRef = useRef2(void 0);
1901
+ const playerRef = useRef2(void 0);
1902
+ const idRef = useRef2(void 0);
1903
+ const [isReady, setIsReady] = useState14(false);
1904
+ const [isPaused, setIsPaused] = useState14(!options.autoplay);
1905
+ const [duration, setDuration] = useState14(1);
1906
+ const [opacity, setOpacity] = useState14("0");
1907
+ const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
1908
+ const [bgColor, setBgColor] = useState14("transparent");
1909
+ const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
1910
+ const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
1911
+ const [isHovered, setIsHovered] = useState14(false);
1912
+ const [isNoteOpen, setNoteOpen] = useState14(false);
1913
+ const [heightValue, setHeightValue] = useState14(0);
1914
+ const [isLoading, setIsloading] = useState14(false);
1915
+ const onReady = (player) => {
1916
+ if (playerRef) {
1917
+ playerRef.current = player;
1918
+ setIsReady(true);
1919
+ player == null ? void 0 : player.currentTime(startTime);
1920
+ player.on("waiting", () => {
1921
+ });
1922
+ player.on("dispose", () => {
1923
+ videojs.log("player will dispose");
1924
+ setIsReady(false);
1925
+ });
1926
+ player.on("loadedmetadata", () => {
1927
+ const d = player.duration() || 0;
1928
+ setDuration(d);
1929
+ });
1930
+ }
1931
+ };
1932
+ useEffect15(() => {
1933
+ if (!playerRef.current) {
1934
+ const videoElement = document.createElement("video-js");
1935
+ videoElement.setAttribute("playsinline", "true");
1936
+ videoElement.classList.add("vjs-big-play-centered");
1937
+ if (poster) {
1938
+ videoElement.setAttribute("poster", poster);
1939
+ }
1940
+ videoRef.current.appendChild(videoElement);
1941
+ videoElement.style.width = "100%";
1942
+ videoElement.style.height = "100%";
1943
+ videoElement.style.objectFit = "cover";
1944
+ playerRef.current = videojs(videoElement, options, () => {
1945
+ onReady(playerRef.current);
1946
+ });
1947
+ }
1948
+ return () => {
1949
+ if (playerRef.current) {
1950
+ idRef.current = options;
1951
+ playerRef.current.dispose();
1952
+ playerRef.current = void 0;
1953
+ setTimeout(() => {
1954
+ if (bigPlayButtonRoot[id]) {
1955
+ bigPlayButtonRoot[id].unmount();
1956
+ bigPlayButtonRoot[id] = void 0;
1957
+ }
1958
+ if (controlBarRoot[id]) {
1959
+ controlBarRoot[id].unmount();
1960
+ controlBarRoot[id] = void 0;
1961
+ }
1962
+ }, 0);
1932
1963
  }
1933
1964
  };
1934
- useEffect15(() => {
1935
- if (!playerRef.current) {
1936
- const videoElement = document.createElement("video-js");
1937
- videoElement.setAttribute("playsinline", "true");
1938
- videoElement.classList.add("vjs-big-play-centered");
1939
- if (poster) {
1940
- videoElement.setAttribute("poster", poster);
1941
- }
1942
- videoRef.current.appendChild(videoElement);
1943
- videoElement.style.width = "100%";
1944
- videoElement.style.height = "100%";
1945
- videoElement.style.objectFit = "cover";
1946
- playerRef.current = videojs(videoElement, options, () => {
1947
- onReady(playerRef.current);
1948
- });
1965
+ }, [id]);
1966
+ useEffect15(() => {
1967
+ if (playerRef.current) {
1968
+ const myPlayer = playerRef.current.currentSources();
1969
+ playerRef.current.src(options.sources);
1970
+ playerRef.current.load();
1971
+ }
1972
+ }, [options.sources[0].type]);
1973
+ useEffect15(() => {
1974
+ if (!playerRef.current) {
1975
+ const videoElement = document.createElement("video-js");
1976
+ videoElement.setAttribute("playsinline", "true");
1977
+ videoElement.classList.add("vjs-big-play-centered");
1978
+ if (poster) {
1979
+ videoElement.setAttribute("poster", poster);
1949
1980
  }
1950
- return () => {
1951
- if (playerRef.current) {
1981
+ videoRef.current.appendChild(videoElement);
1982
+ videoElement.style.width = "100%";
1983
+ videoElement.style.height = "100%";
1984
+ videoElement.style.objectFit = "cover";
1985
+ playerRef.current = videojs(videoElement, options, () => {
1986
+ onReady(playerRef.current);
1987
+ });
1988
+ }
1989
+ return () => {
1990
+ var _a2, _b;
1991
+ if (playerRef.current) {
1992
+ if (!isEqual((_b = (_a2 = idRef == null ? void 0 : idRef.current) == null ? void 0 : _a2.sources) != null ? _b : "", options.sources)) {
1952
1993
  idRef.current = options;
1953
1994
  playerRef.current.dispose();
1954
1995
  playerRef.current = void 0;
@@ -1963,323 +2004,279 @@ var VideoPlayerComponent = forwardRef(
1963
2004
  }
1964
2005
  }, 0);
1965
2006
  }
1966
- };
1967
- }, [id]);
1968
- useEffect15(() => {
1969
- if (playerRef.current) {
1970
- const myPlayer = playerRef.current.currentSources();
1971
- playerRef.current.src(options.sources);
1972
- playerRef.current.load();
1973
- }
1974
- }, [options.sources[0].type]);
1975
- useEffect15(() => {
1976
- if (!playerRef.current) {
1977
- const videoElement = document.createElement("video-js");
1978
- videoElement.setAttribute("playsinline", "true");
1979
- videoElement.classList.add("vjs-big-play-centered");
1980
- if (poster) {
1981
- videoElement.setAttribute("poster", poster);
1982
- }
1983
- videoRef.current.appendChild(videoElement);
1984
- videoElement.style.width = "100%";
1985
- videoElement.style.height = "100%";
1986
- videoElement.style.objectFit = "cover";
1987
- playerRef.current = videojs(videoElement, options, () => {
1988
- onReady(playerRef.current);
1989
- });
1990
- }
1991
- return () => {
1992
- var _a2, _b;
1993
- if (playerRef.current) {
1994
- if (!isEqual((_b = (_a2 = idRef == null ? void 0 : idRef.current) == null ? void 0 : _a2.sources) != null ? _b : "", options.sources)) {
1995
- idRef.current = options;
1996
- playerRef.current.dispose();
1997
- playerRef.current = void 0;
1998
- setTimeout(() => {
1999
- if (bigPlayButtonRoot[id]) {
2000
- bigPlayButtonRoot[id].unmount();
2001
- bigPlayButtonRoot[id] = void 0;
2002
- }
2003
- if (controlBarRoot[id]) {
2004
- controlBarRoot[id].unmount();
2005
- controlBarRoot[id] = void 0;
2006
- }
2007
- }, 0);
2008
- }
2009
- }
2010
- };
2011
- }, [options]);
2012
- useEffect15(() => {
2013
- if (playerRef.current) {
2014
- playerRef.current.currentTime(startTime);
2015
2007
  }
2016
- }, [startTime]);
2017
- useEffect15(() => {
2018
- if (playerRef.current && isReady) {
2019
- const currentTime = playerRef.current.currentTime() || 0;
2020
- if (isPaused) {
2021
- if (onPause) onPause(currentTime);
2022
- } else {
2023
- if (onPlay) onPlay(currentTime);
2024
- }
2008
+ };
2009
+ }, [options]);
2010
+ useEffect15(() => {
2011
+ if (playerRef.current) {
2012
+ playerRef.current.currentTime(startTime);
2013
+ }
2014
+ }, [startTime]);
2015
+ useEffect15(() => {
2016
+ if (playerRef.current && isReady) {
2017
+ const currentTime = playerRef.current.currentTime() || 0;
2018
+ if (isPaused) {
2019
+ if (onPause) onPause(currentTime);
2020
+ } else {
2021
+ if (onPlay) onPlay(currentTime);
2025
2022
  }
2026
- }, [isPaused]);
2027
- useEffect15(() => {
2028
- const controlBarTimeout = setTimeout(() => {
2029
- renderControlBar(
2023
+ }
2024
+ }, [isPaused]);
2025
+ useEffect15(() => {
2026
+ const controlBarTimeout = setTimeout(() => {
2027
+ renderControlBar(
2028
+ id,
2029
+ playerRef.current,
2030
+ isPaused,
2031
+ setIsPaused,
2032
+ duration,
2033
+ notes,
2034
+ chapters,
2035
+ 5,
2036
+ handleSaveNoteAction,
2037
+ opacity,
2038
+ (e) => {
2039
+ handlePlayerClick(e, true);
2040
+ },
2041
+ bgColor,
2042
+ setIsQualityMenuOpen,
2043
+ setIsSubtitleMenuOpen,
2044
+ disableNote,
2045
+ setNoteOpen,
2046
+ noteButtonClick,
2047
+ isTrailer
2048
+ );
2049
+ }, 0);
2050
+ return () => clearTimeout(controlBarTimeout);
2051
+ }, [
2052
+ isPaused,
2053
+ setIsPaused,
2054
+ notes,
2055
+ handleSaveNoteAction,
2056
+ duration,
2057
+ opacity,
2058
+ isReady,
2059
+ id,
2060
+ (_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.isFullscreen_
2061
+ ]);
2062
+ useEffect15(() => {
2063
+ if (isReady) {
2064
+ const playButtonTimeout = setTimeout(() => {
2065
+ renderBigPlayButton(
2030
2066
  id,
2031
2067
  playerRef.current,
2032
2068
  isPaused,
2033
2069
  setIsPaused,
2034
- duration,
2035
- notes,
2036
- chapters,
2037
- 5,
2038
- handleSaveNoteAction,
2039
2070
  opacity,
2040
- (e) => {
2041
- handlePlayerClick(e, true);
2042
- },
2043
- bgColor,
2044
- setIsQualityMenuOpen,
2045
- setIsSubtitleMenuOpen,
2046
- disableNote,
2047
- setNoteOpen,
2048
- noteButtonClick,
2049
- isTrailer
2071
+ height,
2072
+ heightValue,
2073
+ isLoading
2050
2074
  );
2051
- }, 0);
2052
- return () => clearTimeout(controlBarTimeout);
2053
- }, [
2054
- isPaused,
2055
- setIsPaused,
2056
- notes,
2057
- handleSaveNoteAction,
2058
- duration,
2059
- opacity,
2060
- isReady,
2061
- id,
2062
- (_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.isFullscreen_
2063
- ]);
2064
- useEffect15(() => {
2065
- if (isReady) {
2066
- const playButtonTimeout = setTimeout(() => {
2067
- renderBigPlayButton(
2068
- id,
2069
- playerRef.current,
2070
- isPaused,
2071
- setIsPaused,
2072
- opacity,
2073
- height,
2074
- heightValue,
2075
- isLoading
2076
- );
2077
- }, 500);
2078
- return () => clearTimeout(playButtonTimeout);
2079
- }
2080
- }, [isPaused, opacity, isReady, id, height, heightValue, isLoading]);
2081
- useEffect15(() => {
2082
- if (playerRef.current) {
2083
- const intervalId = setInterval(() => {
2084
- if (playerRef.current) setIsPaused(playerRef.current.paused());
2085
- }, 500);
2086
- return () => clearInterval(intervalId);
2087
- }
2088
- }, []);
2089
- const timeoutRef = useRef2(null);
2090
- useEffect15(() => {
2091
- if (isQualityMenuOpen || isSubtitleMenuOpen) {
2092
- if (timeoutRef.current) {
2093
- clearTimeout(timeoutRef.current);
2094
- }
2095
- setOpacity("100");
2096
- } else {
2097
- if (timeoutRef.current) {
2098
- clearTimeout(timeoutRef.current);
2099
- }
2100
- setOpacity("0");
2101
- timeoutRef.current = setTimeout(() => {
2102
- setIsControlBarPresent(false);
2103
- }, 3e3);
2104
- }
2105
- }, [isQualityMenuOpen, isSubtitleMenuOpen]);
2106
- useEffect15(() => {
2107
- if (isNoteOpen) {
2108
- if (timeoutRef.current) {
2109
- clearTimeout(timeoutRef.current);
2110
- }
2111
- } else {
2112
- if (timeoutRef.current) {
2113
- clearTimeout(timeoutRef.current);
2114
- }
2115
- timeoutRef.current = setTimeout(() => {
2116
- setIsControlBarPresent(false);
2117
- }, 3e3);
2118
- }
2119
- }, [isNoteOpen]);
2120
- const handlePlayerClick = async (e, isTimerOnly = false) => {
2121
- e.preventDefault();
2075
+ }, 500);
2076
+ return () => clearTimeout(playButtonTimeout);
2077
+ }
2078
+ }, [isPaused, opacity, isReady, id, height, heightValue, isLoading]);
2079
+ useEffect15(() => {
2080
+ if (playerRef.current) {
2081
+ const intervalId = setInterval(() => {
2082
+ if (playerRef.current) setIsPaused(playerRef.current.paused());
2083
+ }, 500);
2084
+ return () => clearInterval(intervalId);
2085
+ }
2086
+ }, []);
2087
+ const timeoutRef = useRef2(null);
2088
+ useEffect15(() => {
2089
+ if (isQualityMenuOpen || isSubtitleMenuOpen) {
2122
2090
  if (timeoutRef.current) {
2123
2091
  clearTimeout(timeoutRef.current);
2124
2092
  }
2125
2093
  setOpacity("100");
2126
- setIsControlBarPresent(true);
2094
+ } else {
2095
+ if (timeoutRef.current) {
2096
+ clearTimeout(timeoutRef.current);
2097
+ }
2098
+ setOpacity("0");
2127
2099
  timeoutRef.current = setTimeout(() => {
2128
- setOpacity("0");
2129
- setBgColor("transparent");
2130
2100
  setIsControlBarPresent(false);
2131
2101
  }, 3e3);
2132
- if (isTimerOnly) {
2133
- return;
2102
+ }
2103
+ }, [isQualityMenuOpen, isSubtitleMenuOpen]);
2104
+ useEffect15(() => {
2105
+ if (isNoteOpen) {
2106
+ if (timeoutRef.current) {
2107
+ clearTimeout(timeoutRef.current);
2134
2108
  }
2135
- if (!isControlBarPresent) {
2136
- return;
2109
+ } else {
2110
+ if (timeoutRef.current) {
2111
+ clearTimeout(timeoutRef.current);
2137
2112
  }
2138
- if (playerRef.current) {
2139
- if (playerRef.current.paused()) {
2140
- try {
2141
- await playerRef.current.play();
2142
- setIsPaused(false);
2143
- } catch (error) {
2144
- console.error("Failed to play video:", error);
2145
- }
2146
- } else {
2147
- playerRef.current.pause();
2148
- setIsPaused(true);
2149
- if (onPause) onPause(playerRef.current.currentTime() || 0);
2113
+ timeoutRef.current = setTimeout(() => {
2114
+ setIsControlBarPresent(false);
2115
+ }, 3e3);
2116
+ }
2117
+ }, [isNoteOpen]);
2118
+ const handlePlayerClick = async (e, isTimerOnly = false) => {
2119
+ e.preventDefault();
2120
+ if (timeoutRef.current) {
2121
+ clearTimeout(timeoutRef.current);
2122
+ }
2123
+ setOpacity("100");
2124
+ setIsControlBarPresent(true);
2125
+ timeoutRef.current = setTimeout(() => {
2126
+ setOpacity("0");
2127
+ setBgColor("transparent");
2128
+ setIsControlBarPresent(false);
2129
+ }, 3e3);
2130
+ if (isTimerOnly) {
2131
+ return;
2132
+ }
2133
+ if (!isControlBarPresent) {
2134
+ return;
2135
+ }
2136
+ if (playerRef.current) {
2137
+ if (playerRef.current.paused()) {
2138
+ try {
2139
+ await playerRef.current.play();
2140
+ setIsPaused(false);
2141
+ } catch (error) {
2142
+ console.error("Failed to play video:", error);
2150
2143
  }
2144
+ } else {
2145
+ playerRef.current.pause();
2146
+ setIsPaused(true);
2147
+ if (onPause) onPause(playerRef.current.currentTime() || 0);
2151
2148
  }
2152
- };
2153
- const videoRefs = useRef2(null);
2154
- useEffect15(() => {
2155
- const observer = new IntersectionObserver(
2156
- (entries) => {
2157
- entries.forEach((entry) => {
2158
- var _a2, _b;
2159
- if (entry.isIntersecting === false) {
2160
- if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
2161
- try {
2162
- (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
2163
- setIsPaused(true);
2164
- } catch (error) {
2165
- console.error("Failed to play video:", error);
2166
- }
2149
+ }
2150
+ };
2151
+ const videoRefs = useRef2(null);
2152
+ useEffect15(() => {
2153
+ const observer = new IntersectionObserver(
2154
+ (entries) => {
2155
+ entries.forEach((entry) => {
2156
+ var _a2, _b;
2157
+ if (entry.isIntersecting === false) {
2158
+ if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
2159
+ try {
2160
+ (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
2161
+ setIsPaused(true);
2162
+ } catch (error) {
2163
+ console.error("Failed to play video:", error);
2167
2164
  }
2168
2165
  }
2169
- });
2170
- },
2171
- {
2172
- threshold: 0.1
2173
- // The amount of the component that must be visible (0.1 means 10% visible)
2174
- }
2175
- );
2166
+ }
2167
+ });
2168
+ },
2169
+ {
2170
+ threshold: 0.1
2171
+ // The amount of the component that must be visible (0.1 means 10% visible)
2172
+ }
2173
+ );
2174
+ if (videoRefs.current) {
2175
+ observer.observe(videoRefs.current);
2176
+ }
2177
+ return () => {
2176
2178
  if (videoRefs.current) {
2177
- observer.observe(videoRefs.current);
2179
+ observer.unobserve(videoRef.current);
2178
2180
  }
2179
- return () => {
2180
- if (videoRefs.current) {
2181
- observer.unobserve(videoRef.current);
2182
- }
2183
- };
2184
- }, []);
2185
- const [timeSeeker, setTimeSeeker] = useState14("0");
2186
- useEffect15(() => {
2187
- const updateTimeSeeker = () => {
2188
- if (playerRef.current && isReady) {
2189
- const currentTime = playerRef.current.currentTime();
2190
- const duration2 = playerRef.current.duration();
2191
- if (duration2 && currentTime !== void 0) {
2192
- setTimeSeeker(`${currentTime / duration2 * 100}%`);
2193
- } else {
2194
- setTimeSeeker("0");
2195
- }
2181
+ };
2182
+ }, []);
2183
+ const [timeSeeker, setTimeSeeker] = useState14("0");
2184
+ useEffect15(() => {
2185
+ const updateTimeSeeker = () => {
2186
+ if (playerRef.current && isReady) {
2187
+ const currentTime = playerRef.current.currentTime();
2188
+ const duration2 = playerRef.current.duration();
2189
+ if (duration2 && currentTime !== void 0) {
2190
+ setTimeSeeker(`${currentTime / duration2 * 100}%`);
2191
+ } else {
2192
+ setTimeSeeker("0");
2196
2193
  }
2197
- };
2198
- const interval = setInterval(updateTimeSeeker, 500);
2199
- return () => clearInterval(interval);
2200
- }, [playerRef]);
2201
- const container = document.getElementById(`video-container-${id}`);
2202
- function handleWidthChange(height2) {
2203
- setHeightValue(height2);
2194
+ }
2195
+ };
2196
+ const interval = setInterval(updateTimeSeeker, 500);
2197
+ return () => clearInterval(interval);
2198
+ }, [playerRef]);
2199
+ const container = document.getElementById(`video-container-${id}`);
2200
+ function handleWidthChange(height2) {
2201
+ setHeightValue(height2);
2202
+ }
2203
+ const resizeObserver = new ResizeObserver((entries) => {
2204
+ for (let entry of entries) {
2205
+ const currentHeight = entry.contentRect.height;
2206
+ handleWidthChange(currentHeight);
2204
2207
  }
2205
- const resizeObserver = new ResizeObserver((entries) => {
2206
- for (let entry of entries) {
2207
- const currentHeight = entry.contentRect.height;
2208
- handleWidthChange(currentHeight);
2208
+ });
2209
+ const controlBar = container == null ? void 0 : container.querySelector(".vjs-control-bar");
2210
+ if (controlBar) {
2211
+ resizeObserver.observe(controlBar);
2212
+ }
2213
+ function debounce(func, delay) {
2214
+ let timeoutId;
2215
+ return function(arg) {
2216
+ if (timeoutId) {
2217
+ clearTimeout(timeoutId);
2209
2218
  }
2219
+ timeoutId = setTimeout(() => {
2220
+ func(arg);
2221
+ }, delay);
2222
+ };
2223
+ }
2224
+ if (playerRef.current) {
2225
+ playerRef.current.on("waiting", function() {
2226
+ debounce((arg) => setIsloading(arg), 300)(true);
2210
2227
  });
2211
- const controlBar = container == null ? void 0 : container.querySelector(".vjs-control-bar");
2212
- if (controlBar) {
2213
- resizeObserver.observe(controlBar);
2214
- }
2215
- function debounce(func, delay) {
2216
- let timeoutId;
2217
- return function(arg) {
2218
- if (timeoutId) {
2219
- clearTimeout(timeoutId);
2228
+ playerRef.current.on("playing", function() {
2229
+ debounce((arg) => setIsloading(arg), 300)(false);
2230
+ });
2231
+ }
2232
+ return /* @__PURE__ */ jsx41(Fragment4, { children: /* @__PURE__ */ jsx41(
2233
+ Suspense,
2234
+ {
2235
+ fallback: /* @__PURE__ */ jsx41(SkillamiIcon_default, { className: " sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 " }),
2236
+ children: /* @__PURE__ */ jsxs19(
2237
+ "div",
2238
+ {
2239
+ ref: videoRefs,
2240
+ id: `video-container-${id}`,
2241
+ onMouseMove: () => {
2242
+ !isNoteOpen ? handlePlayerClick(event, true) : "";
2243
+ },
2244
+ className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
2245
+ onMouseEnter: () => setIsHovered(true),
2246
+ onMouseLeave: () => setIsHovered(false),
2247
+ children: [
2248
+ bottomRedBar && /* @__PURE__ */ jsx41(
2249
+ "div",
2250
+ {
2251
+ ref: childRef,
2252
+ onClick: handlePlayerClick,
2253
+ className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
2254
+ style: {
2255
+ width: timeSeeker
2256
+ }
2257
+ }
2258
+ ),
2259
+ /* @__PURE__ */ jsx41(
2260
+ "div",
2261
+ {
2262
+ className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
2263
+ "data-vjs-player": true,
2264
+ children: /* @__PURE__ */ jsx41(
2265
+ "div",
2266
+ {
2267
+ onClick: handlePlayerClick,
2268
+ ref: videoRef,
2269
+ className: "sb-h-full sb-w-full sb-relative"
2270
+ }
2271
+ )
2272
+ }
2273
+ )
2274
+ ]
2220
2275
  }
2221
- timeoutId = setTimeout(() => {
2222
- func(arg);
2223
- }, delay);
2224
- };
2225
- }
2226
- if (playerRef.current) {
2227
- playerRef.current.on("waiting", function() {
2228
- debounce((arg) => setIsloading(arg), 300)(true);
2229
- });
2230
- playerRef.current.on("playing", function() {
2231
- debounce((arg) => setIsloading(arg), 300)(false);
2232
- });
2276
+ )
2233
2277
  }
2234
- return /* @__PURE__ */ jsx41(Fragment4, { children: /* @__PURE__ */ jsx41(
2235
- Suspense,
2236
- {
2237
- fallback: /* @__PURE__ */ jsx41(SkillamiIcon_default, { className: " sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 " }),
2238
- children: /* @__PURE__ */ jsxs19(
2239
- "div",
2240
- {
2241
- ref: videoRefs,
2242
- id: `video-container-${id}`,
2243
- onMouseMove: () => {
2244
- !isNoteOpen ? handlePlayerClick(event, true) : "";
2245
- },
2246
- className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
2247
- onMouseEnter: () => setIsHovered(true),
2248
- onMouseLeave: () => setIsHovered(false),
2249
- children: [
2250
- bottomRedBar && /* @__PURE__ */ jsx41(
2251
- "div",
2252
- {
2253
- ref: childRef,
2254
- onClick: handlePlayerClick,
2255
- className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
2256
- style: {
2257
- width: timeSeeker
2258
- }
2259
- }
2260
- ),
2261
- /* @__PURE__ */ jsx41(
2262
- "div",
2263
- {
2264
- className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
2265
- "data-vjs-player": true,
2266
- children: /* @__PURE__ */ jsx41(
2267
- "div",
2268
- {
2269
- onClick: handlePlayerClick,
2270
- ref: videoRef,
2271
- className: "sb-h-full sb-w-full sb-relative"
2272
- }
2273
- )
2274
- }
2275
- )
2276
- ]
2277
- }
2278
- )
2279
- }
2280
- ) });
2281
- }
2282
- );
2278
+ ) });
2279
+ };
2283
2280
  var VideoPlayerComponent_default = VideoPlayerComponent;
2284
2281
 
2285
2282
  // src/components/SoftBuildersVideoPlayer/index.tsx
@@ -2296,87 +2293,86 @@ var DEFAULT_OPTIONS = {
2296
2293
  sources: [],
2297
2294
  tracks: []
2298
2295
  };
2299
- var Component = forwardRef2(
2300
- ({
2301
- options,
2302
- notes,
2303
- chapters,
2304
- startTime = 0,
2305
- handleSaveNoteAction,
2306
- onPlay,
2307
- onPause,
2308
- isFocused = true,
2309
- disableNote,
2310
- childRef,
2311
- bottomRedBar,
2312
- noteButtonClick,
2313
- videoId,
2314
- isTrailer = false,
2315
- height
2316
- }) => {
2317
- options = __spreadProps(__spreadValues({}, options), {
2318
- responsive: true,
2319
- inactivityTimeout: 0,
2320
- fullscreen: {
2321
- navigationUI: "hide"
2322
- }
2323
- });
2324
- if (options.autoplay === void 0)
2325
- options.autoplay = DEFAULT_OPTIONS.autoplay;
2326
- if (options.controls === void 0)
2327
- options.controls = DEFAULT_OPTIONS.controls;
2328
- if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
2329
- if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
2330
- if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
2331
- if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
2332
- const [tracks, setTracks] = useState15([]);
2333
- useEffect16(() => {
2334
- }, [isFocused]);
2335
- useEffect16(() => {
2336
- const getTracks = async () => {
2337
- const newTracks = [];
2338
- if (Array.isArray(options == null ? void 0 : options.tracks))
2339
- for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
2340
- let src = s.src;
2341
- if (s.memeType == "text/srt") {
2342
- src = await convertSRTtoVTT(s.src);
2343
- }
2344
- newTracks.push(__spreadProps(__spreadValues({}, s), {
2345
- src
2346
- }));
2296
+ var Component = ({
2297
+ options,
2298
+ notes,
2299
+ chapters,
2300
+ startTime = 0,
2301
+ handleSaveNoteAction,
2302
+ onPlay,
2303
+ onPause,
2304
+ isFocused = true,
2305
+ disableNote,
2306
+ childRef,
2307
+ bottomRedBar,
2308
+ noteButtonClick,
2309
+ videoId,
2310
+ isTrailer = false,
2311
+ height
2312
+ }) => {
2313
+ options = __spreadProps(__spreadValues({}, options), {
2314
+ responsive: true,
2315
+ inactivityTimeout: 0,
2316
+ fullscreen: {
2317
+ navigationUI: "hide"
2318
+ }
2319
+ });
2320
+ if (options.autoplay === void 0)
2321
+ options.autoplay = DEFAULT_OPTIONS.autoplay;
2322
+ if (options.controls === void 0)
2323
+ options.controls = DEFAULT_OPTIONS.controls;
2324
+ if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
2325
+ if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
2326
+ if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
2327
+ if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
2328
+ const [tracks, setTracks] = useState15([]);
2329
+ useEffect16(() => {
2330
+ }, [isFocused]);
2331
+ useEffect16(() => {
2332
+ const getTracks = async () => {
2333
+ const newTracks = [];
2334
+ if (Array.isArray(options == null ? void 0 : options.tracks)) {
2335
+ for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
2336
+ let src = s.src;
2337
+ if (s.memeType == "text/srt") {
2338
+ src = await convertSRTtoVTT(s.src);
2347
2339
  }
2348
- setTracks(newTracks);
2349
- };
2350
- getTracks();
2351
- }, [options == null ? void 0 : options.tracks]);
2352
- console.log("options:===. ", options);
2353
- const id = (Date.now() + Math.random() * 100).toString();
2354
- const [uuid, setUuid] = useState15("");
2355
- useEffect16(() => {
2356
- setUuid(uuidv4());
2357
- }, []);
2358
- return /* @__PURE__ */ jsx42(
2359
- VideoPlayerComponent_default,
2360
- {
2361
- id: uuid,
2362
- chapters,
2363
- options: __spreadProps(__spreadValues({}, options), { tracks }),
2364
- notes,
2365
- poster: "",
2366
- startTime,
2367
- handleSaveNoteAction,
2368
- disableNote,
2369
- onPause,
2370
- onPlay,
2371
- childRef,
2372
- bottomRedBar,
2373
- noteButtonClick,
2374
- isTrailer,
2375
- height
2340
+ newTracks.push(__spreadProps(__spreadValues({}, s), {
2341
+ src
2342
+ }));
2343
+ }
2376
2344
  }
2377
- );
2378
- }
2379
- );
2345
+ setTracks(newTracks);
2346
+ };
2347
+ getTracks();
2348
+ }, [options == null ? void 0 : options.tracks]);
2349
+ console.log("options:===. ", options);
2350
+ const id = (Date.now() + Math.random() * 100).toString();
2351
+ const [uuid, setUuid] = useState15("");
2352
+ useEffect16(() => {
2353
+ setUuid(uuidv4());
2354
+ }, []);
2355
+ return /* @__PURE__ */ jsx42(
2356
+ VideoPlayerComponent_default,
2357
+ {
2358
+ id: uuid,
2359
+ chapters,
2360
+ options: __spreadProps(__spreadValues({}, options), { tracks }),
2361
+ notes,
2362
+ poster: "",
2363
+ startTime,
2364
+ handleSaveNoteAction,
2365
+ disableNote,
2366
+ onPause,
2367
+ onPlay,
2368
+ childRef,
2369
+ bottomRedBar,
2370
+ noteButtonClick,
2371
+ isTrailer,
2372
+ height
2373
+ }
2374
+ );
2375
+ };
2380
2376
  var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
2381
2377
  return isEqual2(prevProps.options, nextProps.options) && prevProps.options.sources[0].type === nextProps.options.sources[0].type && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime && prevProps.height === nextProps.height;
2382
2378
  });