softbuilders-react-video-player 1.3.2 → 1.3.4

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,
@@ -628,8 +627,10 @@ var VolumeSlider = ({
628
627
  const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number((player == null ? void 0 : player.volume()) || 0) * 100;
629
628
  setVolume(currentVolume);
630
629
  };
631
- updateVolumeState();
632
- player == null ? void 0 : player.on("volumechange", updateVolumeState);
630
+ if (player) {
631
+ updateVolumeState();
632
+ player == null ? void 0 : player.on("volumechange", updateVolumeState);
633
+ }
633
634
  return () => {
634
635
  player == null ? void 0 : player.off("volumechange", updateVolumeState);
635
636
  };
@@ -1879,76 +1880,118 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
1879
1880
  }
1880
1881
  }
1881
1882
  };
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
- });
1883
+ var VideoPlayerComponent = ({
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
+ }) => {
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
+ });
1932
+ }
1933
+ };
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
+ });
1949
+ }
1950
+ return () => {
1951
+ if (playerRef.current) {
1952
+ idRef.current = options;
1953
+ playerRef.current.dispose();
1954
+ playerRef.current = void 0;
1955
+ setTimeout(() => {
1956
+ if (bigPlayButtonRoot[id]) {
1957
+ bigPlayButtonRoot[id].unmount();
1958
+ bigPlayButtonRoot[id] = void 0;
1959
+ }
1960
+ if (controlBarRoot[id]) {
1961
+ controlBarRoot[id].unmount();
1962
+ controlBarRoot[id] = void 0;
1963
+ }
1964
+ }, 0);
1932
1965
  }
1933
1966
  };
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
- });
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);
1949
1982
  }
1950
- return () => {
1951
- if (playerRef.current) {
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)) {
1952
1995
  idRef.current = options;
1953
1996
  playerRef.current.dispose();
1954
1997
  playerRef.current = void 0;
@@ -1963,323 +2006,279 @@ var VideoPlayerComponent = forwardRef(
1963
2006
  }
1964
2007
  }, 0);
1965
2008
  }
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
2009
  }
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
- }
2010
+ };
2011
+ }, [options]);
2012
+ useEffect15(() => {
2013
+ if (playerRef.current) {
2014
+ playerRef.current.currentTime(startTime);
2015
+ }
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);
2025
2024
  }
2026
- }, [isPaused]);
2027
- useEffect15(() => {
2028
- const controlBarTimeout = setTimeout(() => {
2029
- renderControlBar(
2025
+ }
2026
+ }, [isPaused]);
2027
+ useEffect15(() => {
2028
+ const controlBarTimeout = setTimeout(() => {
2029
+ renderControlBar(
2030
+ id,
2031
+ playerRef.current,
2032
+ isPaused,
2033
+ setIsPaused,
2034
+ duration,
2035
+ notes,
2036
+ chapters,
2037
+ 5,
2038
+ handleSaveNoteAction,
2039
+ opacity,
2040
+ (e) => {
2041
+ handlePlayerClick(e, true);
2042
+ },
2043
+ bgColor,
2044
+ setIsQualityMenuOpen,
2045
+ setIsSubtitleMenuOpen,
2046
+ disableNote,
2047
+ setNoteOpen,
2048
+ noteButtonClick,
2049
+ isTrailer
2050
+ );
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(
2030
2068
  id,
2031
2069
  playerRef.current,
2032
2070
  isPaused,
2033
2071
  setIsPaused,
2034
- duration,
2035
- notes,
2036
- chapters,
2037
- 5,
2038
- handleSaveNoteAction,
2039
2072
  opacity,
2040
- (e) => {
2041
- handlePlayerClick(e, true);
2042
- },
2043
- bgColor,
2044
- setIsQualityMenuOpen,
2045
- setIsSubtitleMenuOpen,
2046
- disableNote,
2047
- setNoteOpen,
2048
- noteButtonClick,
2049
- isTrailer
2073
+ height,
2074
+ heightValue,
2075
+ isLoading
2050
2076
  );
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();
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) {
2122
2092
  if (timeoutRef.current) {
2123
2093
  clearTimeout(timeoutRef.current);
2124
2094
  }
2125
2095
  setOpacity("100");
2126
- setIsControlBarPresent(true);
2096
+ } else {
2097
+ if (timeoutRef.current) {
2098
+ clearTimeout(timeoutRef.current);
2099
+ }
2100
+ setOpacity("0");
2127
2101
  timeoutRef.current = setTimeout(() => {
2128
- setOpacity("0");
2129
- setBgColor("transparent");
2130
2102
  setIsControlBarPresent(false);
2131
2103
  }, 3e3);
2132
- if (isTimerOnly) {
2133
- return;
2104
+ }
2105
+ }, [isQualityMenuOpen, isSubtitleMenuOpen]);
2106
+ useEffect15(() => {
2107
+ if (isNoteOpen) {
2108
+ if (timeoutRef.current) {
2109
+ clearTimeout(timeoutRef.current);
2134
2110
  }
2135
- if (!isControlBarPresent) {
2136
- return;
2111
+ } else {
2112
+ if (timeoutRef.current) {
2113
+ clearTimeout(timeoutRef.current);
2137
2114
  }
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);
2115
+ timeoutRef.current = setTimeout(() => {
2116
+ setIsControlBarPresent(false);
2117
+ }, 3e3);
2118
+ }
2119
+ }, [isNoteOpen]);
2120
+ const handlePlayerClick = async (e, isTimerOnly = false) => {
2121
+ e.preventDefault();
2122
+ if (timeoutRef.current) {
2123
+ clearTimeout(timeoutRef.current);
2124
+ }
2125
+ setOpacity("100");
2126
+ setIsControlBarPresent(true);
2127
+ timeoutRef.current = setTimeout(() => {
2128
+ setOpacity("0");
2129
+ setBgColor("transparent");
2130
+ setIsControlBarPresent(false);
2131
+ }, 3e3);
2132
+ if (isTimerOnly) {
2133
+ return;
2134
+ }
2135
+ if (!isControlBarPresent) {
2136
+ return;
2137
+ }
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);
2150
2145
  }
2146
+ } else {
2147
+ playerRef.current.pause();
2148
+ setIsPaused(true);
2149
+ if (onPause) onPause(playerRef.current.currentTime() || 0);
2151
2150
  }
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
- }
2151
+ }
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);
2167
2166
  }
2168
2167
  }
2169
- });
2170
- },
2171
- {
2172
- threshold: 0.1
2173
- // The amount of the component that must be visible (0.1 means 10% visible)
2174
- }
2175
- );
2168
+ }
2169
+ });
2170
+ },
2171
+ {
2172
+ threshold: 0.1
2173
+ // The amount of the component that must be visible (0.1 means 10% visible)
2174
+ }
2175
+ );
2176
+ if (videoRefs.current) {
2177
+ observer.observe(videoRefs.current);
2178
+ }
2179
+ return () => {
2176
2180
  if (videoRefs.current) {
2177
- observer.observe(videoRefs.current);
2181
+ observer.unobserve(videoRef.current);
2178
2182
  }
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
- }
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");
2196
2195
  }
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);
2196
+ }
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);
2204
+ }
2205
+ const resizeObserver = new ResizeObserver((entries) => {
2206
+ for (let entry of entries) {
2207
+ const currentHeight = entry.contentRect.height;
2208
+ handleWidthChange(currentHeight);
2204
2209
  }
2205
- const resizeObserver = new ResizeObserver((entries) => {
2206
- for (let entry of entries) {
2207
- const currentHeight = entry.contentRect.height;
2208
- handleWidthChange(currentHeight);
2210
+ });
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);
2209
2220
  }
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);
2210
2229
  });
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);
2230
+ playerRef.current.on("playing", function() {
2231
+ debounce((arg) => setIsloading(arg), 300)(false);
2232
+ });
2233
+ }
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
+ ]
2220
2277
  }
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
- });
2278
+ )
2233
2279
  }
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
- );
2280
+ ) });
2281
+ };
2283
2282
  var VideoPlayerComponent_default = VideoPlayerComponent;
2284
2283
 
2285
2284
  // src/components/SoftBuildersVideoPlayer/index.tsx
@@ -2296,89 +2295,89 @@ var DEFAULT_OPTIONS = {
2296
2295
  sources: [],
2297
2296
  tracks: []
2298
2297
  };
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
- }));
2298
+ var Component = ({
2299
+ options,
2300
+ notes,
2301
+ chapters,
2302
+ startTime = 0,
2303
+ handleSaveNoteAction,
2304
+ onPlay,
2305
+ onPause,
2306
+ isFocused = true,
2307
+ disableNote,
2308
+ childRef,
2309
+ bottomRedBar,
2310
+ noteButtonClick,
2311
+ videoId,
2312
+ isTrailer = false,
2313
+ height
2314
+ }) => {
2315
+ options = __spreadProps(__spreadValues({}, options), {
2316
+ responsive: true,
2317
+ inactivityTimeout: 0,
2318
+ fullscreen: {
2319
+ navigationUI: "hide"
2320
+ }
2321
+ });
2322
+ if (options.autoplay === void 0)
2323
+ options.autoplay = DEFAULT_OPTIONS.autoplay;
2324
+ if (options.controls === void 0)
2325
+ options.controls = DEFAULT_OPTIONS.controls;
2326
+ if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
2327
+ if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
2328
+ if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
2329
+ if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
2330
+ const [tracks, setTracks] = useState15([]);
2331
+ useEffect16(() => {
2332
+ }, [isFocused]);
2333
+ useEffect16(() => {
2334
+ const getTracks = async () => {
2335
+ const newTracks = [];
2336
+ if (Array.isArray(options == null ? void 0 : options.tracks)) {
2337
+ for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
2338
+ let src = s.src;
2339
+ if (s.memeType == "text/srt") {
2340
+ src = await convertSRTtoVTT(s.src);
2347
2341
  }
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
2342
+ newTracks.push(__spreadProps(__spreadValues({}, s), {
2343
+ src
2344
+ }));
2345
+ }
2376
2346
  }
2377
- );
2378
- }
2379
- );
2347
+ setTracks(newTracks);
2348
+ };
2349
+ getTracks();
2350
+ }, [options == null ? void 0 : options.tracks]);
2351
+ console.log("options:===. ", options);
2352
+ const id = (Date.now() + Math.random() * 100).toString();
2353
+ const [uuid, setUuid] = useState15("");
2354
+ useEffect16(() => {
2355
+ setUuid(uuidv4());
2356
+ }, []);
2357
+ return /* @__PURE__ */ jsx42(
2358
+ VideoPlayerComponent_default,
2359
+ {
2360
+ id: uuid,
2361
+ chapters,
2362
+ options: __spreadProps(__spreadValues({}, options), { tracks }),
2363
+ notes,
2364
+ poster: "",
2365
+ startTime,
2366
+ handleSaveNoteAction,
2367
+ disableNote,
2368
+ onPause,
2369
+ onPlay,
2370
+ childRef,
2371
+ bottomRedBar,
2372
+ noteButtonClick,
2373
+ isTrailer,
2374
+ height
2375
+ }
2376
+ );
2377
+ };
2380
2378
  var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
2381
- 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;
2379
+ var _a, _b, _c, _d, _e;
2380
+ return isEqual2(prevProps.options, nextProps.options) && ((_b = (_a = prevProps == null ? void 0 : prevProps.options.sources) == null ? void 0 : _a[0]) == null ? void 0 : _b.type) === ((_e = (_d = (_c = nextProps == null ? void 0 : nextProps.options) == null ? void 0 : _c.sources) == null ? void 0 : _d[0]) == null ? void 0 : _e.type) && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime && prevProps.height === nextProps.height;
2382
2381
  });
2383
2382
  var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;
2384
2383