stormcloud-video-player 0.1.10 → 0.1.12

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 (7) hide show
  1. package/README.md +77 -18
  2. package/dist/stormcloud-vp.min.js +3 -3
  3. package/lib/index.cjs +937 -801
  4. package/lib/index.cjs.map +1 -1
  5. package/lib/index.js +946 -801
  6. package/lib/index.js.map +1 -1
  7. package/package.json +3 -2
package/lib/index.cjs CHANGED
@@ -844,6 +844,10 @@ var StormcloudVideoPlayer = class {
844
844
  });
845
845
  }
846
846
  shouldUseNativeHls() {
847
+ const streamType = this.getStreamType();
848
+ if (streamType === "other") {
849
+ return true;
850
+ }
847
851
  const canNative = this.video.canPlayType("application/vnd.apple.mpegURL");
848
852
  return !!(this.config.allowNativeHls && canNative);
849
853
  }
@@ -1316,7 +1320,11 @@ var StormcloudVideoPlayer = class {
1316
1320
  return "other";
1317
1321
  }
1318
1322
  shouldShowNativeControls() {
1319
- return this.getStreamType() !== "hls";
1323
+ const streamType = this.getStreamType();
1324
+ if (streamType === "other") {
1325
+ return !(this.config.showCustomControls ?? false);
1326
+ }
1327
+ return !!(this.config.allowNativeHls && !(this.config.showCustomControls ?? false));
1320
1328
  }
1321
1329
  async loadDefaultVastFromAdstorm(adstormApiUrl, params) {
1322
1330
  const usp = new URLSearchParams(params || {});
@@ -1665,6 +1673,7 @@ var StormcloudVideoPlayer = class {
1665
1673
 
1666
1674
  // src/ui/StormcloudVideoPlayer.tsx
1667
1675
  var import_react = __toESM(require("react"), 1);
1676
+ var import_fa = require("react-icons/fa");
1668
1677
  var import_jsx_runtime = require("react/jsx-runtime");
1669
1678
  var CRITICAL_PROPS = [
1670
1679
  "src",
@@ -1714,21 +1723,33 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
1714
1723
  const [playbackRate, setPlaybackRate] = import_react.default.useState(1);
1715
1724
  const [showVolumeSlider, setShowVolumeSlider] = import_react.default.useState(false);
1716
1725
  const [showSpeedMenu, setShowSpeedMenu] = import_react.default.useState(false);
1726
+ const [isLoading, setIsLoading] = import_react.default.useState(true);
1727
+ const [isBuffering, setIsBuffering] = import_react.default.useState(false);
1728
+ const [showCenterPlay, setShowCenterPlay] = import_react.default.useState(false);
1717
1729
  const formatTime = (seconds) => {
1718
- if (!isFinite(seconds)) return "0:00";
1719
- const minutes = Math.floor(seconds / 60);
1730
+ if (!isFinite(seconds)) return "0:00:00";
1731
+ const hours = Math.floor(seconds / 3600);
1732
+ const minutes = Math.floor(seconds % 3600 / 60);
1720
1733
  const remainingSeconds = Math.floor(seconds % 60);
1721
- return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
1734
+ return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
1722
1735
  };
1723
1736
  const handlePlayPause = () => {
1724
1737
  if (videoRef.current) {
1725
1738
  if (videoRef.current.paused) {
1726
1739
  videoRef.current.play();
1740
+ setShowCenterPlay(false);
1727
1741
  } else {
1728
1742
  videoRef.current.pause();
1743
+ setShowCenterPlay(true);
1729
1744
  }
1730
1745
  }
1731
1746
  };
1747
+ const handleCenterPlayClick = () => {
1748
+ if (videoRef.current && videoRef.current.paused) {
1749
+ videoRef.current.play();
1750
+ setShowCenterPlay(false);
1751
+ }
1752
+ };
1732
1753
  const handleTimelineSeek = (e) => {
1733
1754
  if (videoRef.current && duration > 0 && isFinite(duration)) {
1734
1755
  const rect = e.currentTarget.getBoundingClientRect();
@@ -1753,7 +1774,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
1753
1774
  }
1754
1775
  setShowSpeedMenu(false);
1755
1776
  };
1756
- const shouldShowEnhancedControls = allowNativeHls && showCustomControls;
1777
+ const isHlsStream = src?.toLowerCase().includes(".m3u8") || src?.toLowerCase().includes("/hls/");
1778
+ const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
1757
1779
  const criticalPropsKey = (0, import_react.useMemo)(() => {
1758
1780
  return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
1759
1781
  }, [src, allowNativeHls, licenseKey, lowLatencyMode, driftToleranceMs]);
@@ -1893,860 +1915,974 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
1893
1915
  void video2.offsetHeight;
1894
1916
  }
1895
1917
  };
1918
+ const handleLoadStart = () => {
1919
+ setIsLoading(true);
1920
+ setIsBuffering(false);
1921
+ };
1922
+ const handleCanPlay = () => {
1923
+ setIsLoading(false);
1924
+ setIsBuffering(false);
1925
+ };
1926
+ const handleWaiting = () => {
1927
+ setIsBuffering(true);
1928
+ };
1929
+ const handlePlaying = () => {
1930
+ setIsLoading(false);
1931
+ setIsBuffering(false);
1932
+ setShowCenterPlay(false);
1933
+ };
1934
+ const handlePause = () => {
1935
+ setShowCenterPlay(true);
1936
+ };
1937
+ const handleEnded = () => {
1938
+ setShowCenterPlay(true);
1939
+ };
1896
1940
  const video = videoRef.current;
1941
+ video.addEventListener("loadstart", handleLoadStart);
1897
1942
  video.addEventListener("loadedmetadata", handleLoadedMetadata);
1898
1943
  video.addEventListener("loadeddata", handleLoadedMetadata);
1899
- video.addEventListener("canplay", handleLoadedMetadata);
1944
+ video.addEventListener("canplay", handleCanPlay);
1945
+ video.addEventListener("waiting", handleWaiting);
1946
+ video.addEventListener("playing", handlePlaying);
1947
+ video.addEventListener("pause", handlePause);
1948
+ video.addEventListener("ended", handleEnded);
1949
+ if (video.paused) {
1950
+ setShowCenterPlay(true);
1951
+ }
1900
1952
  return () => {
1953
+ video.removeEventListener("loadstart", handleLoadStart);
1901
1954
  video.removeEventListener("loadedmetadata", handleLoadedMetadata);
1902
1955
  video.removeEventListener("loadeddata", handleLoadedMetadata);
1903
- video.removeEventListener("canplay", handleLoadedMetadata);
1956
+ video.removeEventListener("canplay", handleCanPlay);
1957
+ video.removeEventListener("waiting", handleWaiting);
1958
+ video.removeEventListener("playing", handlePlaying);
1959
+ video.removeEventListener("pause", handlePause);
1960
+ video.removeEventListener("ended", handleEnded);
1904
1961
  };
1905
1962
  }, []);
1906
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1907
- "div",
1908
- {
1909
- className: wrapperClassName,
1910
- style: {
1911
- display: "flex",
1912
- alignItems: "center",
1913
- justifyContent: "center",
1914
- position: isFullscreen ? "fixed" : "relative",
1915
- top: isFullscreen ? 0 : void 0,
1916
- left: isFullscreen ? 0 : void 0,
1917
- overflow: "hidden",
1918
- width: isFullscreen ? "100vw" : "100%",
1919
- height: isFullscreen ? "100vh" : "auto",
1920
- minHeight: isFullscreen ? "100vh" : "auto",
1921
- maxWidth: isFullscreen ? "100vw" : "100%",
1922
- maxHeight: isFullscreen ? "100vh" : "none",
1923
- zIndex: isFullscreen ? 9999 : void 0,
1924
- backgroundColor: isFullscreen ? "#000" : void 0,
1925
- ...wrapperStyle
1926
- },
1927
- children: [
1928
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1929
- "video",
1930
- {
1931
- ref: videoRef,
1932
- className,
1933
- style: {
1934
- display: "block",
1935
- width: "100%",
1936
- height: isFullscreen ? "100%" : "auto",
1937
- maxWidth: "100%",
1938
- maxHeight: isFullscreen ? "100%" : "none",
1939
- objectFit: isFullscreen ? "cover" : "contain",
1940
- backgroundColor: "#000",
1941
- aspectRatio: isFullscreen ? "unset" : void 0,
1942
- ...style
1943
- },
1944
- controls: shouldShowNativeControls && controls && !showCustomControls,
1945
- playsInline,
1946
- preload,
1947
- poster,
1948
- ...restVideoAttrs,
1949
- children
1950
- }
1951
- ),
1952
- adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1953
- "div",
1954
- {
1955
- style: {
1956
- position: "absolute",
1957
- top: "10px",
1958
- right: "10px",
1959
- backgroundColor: "rgba(0, 0, 0, 0.7)",
1960
- color: "white",
1961
- padding: "4px 8px",
1962
- borderRadius: "4px",
1963
- fontSize: "12px",
1964
- fontFamily: "Arial, sans-serif",
1965
- zIndex: 10
1966
- },
1967
- children: [
1968
- "Ad ",
1969
- adStatus.currentIndex,
1970
- "/",
1971
- adStatus.totalAds
1972
- ]
1973
- }
1974
- ),
1975
- shouldShowEnhancedControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1976
- "div",
1977
- {
1978
- style: {
1979
- position: "absolute",
1980
- bottom: 0,
1981
- left: 0,
1982
- right: 0,
1983
- background: "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%)",
1984
- padding: "20px 16px 16px",
1985
- zIndex: 10
1986
- },
1987
- children: [
1988
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1989
- "div",
1963
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1964
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
1965
+ @keyframes spin {
1966
+ from {
1967
+ transform: rotate(0deg);
1968
+ }
1969
+ to {
1970
+ transform: rotate(360deg);
1971
+ }
1972
+ }
1973
+
1974
+ .stormcloud-video-wrapper:fullscreen {
1975
+ border-radius: 0 !important;
1976
+ box-shadow: none !important;
1977
+ width: 100vw !important;
1978
+ height: 100vh !important;
1979
+ max-width: 100vw !important;
1980
+ max-height: 100vh !important;
1981
+ position: fixed !important;
1982
+ top: 0 !important;
1983
+ left: 0 !important;
1984
+ z-index: 999999 !important;
1985
+ background: #000 !important;
1986
+ display: flex !important;
1987
+ align-items: center !important;
1988
+ justify-content: center !important;
1989
+ }
1990
+
1991
+ .stormcloud-video-wrapper:has(*:fullscreen) {
1992
+ border-radius: 0 !important;
1993
+ box-shadow: none !important;
1994
+ width: 100vw !important;
1995
+ height: 100vh !important;
1996
+ max-width: 100vw !important;
1997
+ max-height: 100vh !important;
1998
+ position: fixed !important;
1999
+ top: 0 !important;
2000
+ left: 0 !important;
2001
+ z-index: 999999 !important;
2002
+ background: #000 !important;
2003
+ display: flex !important;
2004
+ align-items: center !important;
2005
+ justify-content: center !important;
2006
+ }
2007
+
2008
+ *:fullscreen {
2009
+ width: 100vw !important;
2010
+ height: 100vh !important;
2011
+ max-width: 100vw !important;
2012
+ max-height: 100vh !important;
2013
+ position: fixed !important;
2014
+ top: 0 !important;
2015
+ left: 0 !important;
2016
+ z-index: 999999 !important;
2017
+ background: #000 !important;
2018
+ }
2019
+ ` }),
2020
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2021
+ "div",
2022
+ {
2023
+ className: `stormcloud-video-wrapper ${wrapperClassName || ""}`,
2024
+ style: {
2025
+ display: "flex",
2026
+ alignItems: "center",
2027
+ justifyContent: "center",
2028
+ position: isFullscreen ? "fixed" : "relative",
2029
+ top: isFullscreen ? 0 : void 0,
2030
+ left: isFullscreen ? 0 : void 0,
2031
+ overflow: "hidden",
2032
+ width: isFullscreen ? "100vw" : "100%",
2033
+ height: isFullscreen ? "100vh" : "auto",
2034
+ minHeight: isFullscreen ? "100vh" : "auto",
2035
+ maxWidth: isFullscreen ? "100vw" : "100%",
2036
+ maxHeight: isFullscreen ? "100vh" : "none",
2037
+ zIndex: isFullscreen ? 999999 : void 0,
2038
+ backgroundColor: isFullscreen ? "#000" : void 0,
2039
+ borderRadius: isFullscreen ? 0 : void 0,
2040
+ boxShadow: isFullscreen ? "none" : void 0,
2041
+ ...wrapperStyle
2042
+ },
2043
+ children: [
2044
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2045
+ "video",
2046
+ {
2047
+ ref: videoRef,
2048
+ className,
2049
+ style: {
2050
+ display: "block",
2051
+ width: "100%",
2052
+ height: isFullscreen ? "100%" : "auto",
2053
+ maxWidth: "100%",
2054
+ maxHeight: isFullscreen ? "100%" : "none",
2055
+ objectFit: isFullscreen ? "cover" : "contain",
2056
+ backgroundColor: "#000",
2057
+ aspectRatio: isFullscreen ? "unset" : void 0,
2058
+ ...style
2059
+ },
2060
+ controls: shouldShowNativeControls && controls && !showCustomControls,
2061
+ playsInline,
2062
+ preload,
2063
+ poster,
2064
+ ...restVideoAttrs,
2065
+ children
2066
+ }
2067
+ ),
2068
+ (isLoading || isBuffering) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2069
+ "div",
2070
+ {
2071
+ style: {
2072
+ position: "absolute",
2073
+ top: "50%",
2074
+ left: "50%",
2075
+ transform: "translate(-50%, -50%)",
2076
+ zIndex: 20,
2077
+ display: "flex",
2078
+ alignItems: "center",
2079
+ justifyContent: "center",
2080
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.6) 100%)",
2081
+ width: "80px",
2082
+ height: "80px",
2083
+ borderRadius: "50%",
2084
+ backdropFilter: "blur(20px)",
2085
+ boxShadow: "0 12px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1)"
2086
+ },
2087
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2088
+ import_fa.FaSpinner,
1990
2089
  {
2090
+ size: 28,
2091
+ color: "white",
1991
2092
  style: {
1992
- width: "100%",
1993
- height: "6px",
1994
- backgroundColor: "rgba(255, 255, 255, 0.3)",
1995
- borderRadius: "3px",
1996
- marginBottom: "12px",
1997
- cursor: "pointer",
1998
- position: "relative"
1999
- },
2000
- onClick: handleTimelineSeek,
2001
- children: [
2002
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2003
- "div",
2004
- {
2005
- style: {
2006
- height: "100%",
2007
- backgroundColor: "#ff4444",
2008
- borderRadius: "3px",
2009
- width: `${duration > 0 ? currentTime / duration * 100 : 0}%`,
2010
- transition: "width 0.1s ease"
2011
- }
2012
- }
2013
- ),
2014
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2015
- "div",
2016
- {
2017
- style: {
2018
- position: "absolute",
2019
- top: "-4px",
2020
- right: `${duration > 0 ? 100 - currentTime / duration * 100 : 100}%`,
2021
- width: "14px",
2022
- height: "14px",
2023
- backgroundColor: "#ff4444",
2024
- borderRadius: "50%",
2025
- border: "2px solid white",
2026
- boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
2027
- transform: "translateX(50%)"
2028
- }
2029
- }
2030
- )
2031
- ]
2093
+ animation: "spin 1s linear infinite",
2094
+ filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
2095
+ }
2032
2096
  }
2033
- ),
2034
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2035
- "div",
2097
+ )
2098
+ }
2099
+ ),
2100
+ showCenterPlay && !isLoading && !isBuffering && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2101
+ "div",
2102
+ {
2103
+ onClick: handleCenterPlayClick,
2104
+ style: {
2105
+ position: "absolute",
2106
+ top: "50%",
2107
+ left: "50%",
2108
+ transform: "translate(-50%, -50%)",
2109
+ zIndex: 15,
2110
+ cursor: "pointer",
2111
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)",
2112
+ borderRadius: "50%",
2113
+ width: "100px",
2114
+ height: "100px",
2115
+ display: "flex",
2116
+ alignItems: "center",
2117
+ justifyContent: "center",
2118
+ backdropFilter: "blur(20px)",
2119
+ border: "3px solid rgba(255, 255, 255, 0.8)",
2120
+ boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
2121
+ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
2122
+ },
2123
+ onMouseEnter: (e) => {
2124
+ const target = e.currentTarget;
2125
+ target.style.transform = "translate(-50%, -50%) scale(1.1)";
2126
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
2127
+ target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
2128
+ target.style.borderColor = "rgba(255, 255, 255, 0.9)";
2129
+ },
2130
+ onMouseLeave: (e) => {
2131
+ const target = e.currentTarget;
2132
+ target.style.transform = "translate(-50%, -50%) scale(1)";
2133
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
2134
+ target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
2135
+ target.style.borderColor = "rgba(255, 255, 255, 0.8)";
2136
+ },
2137
+ title: "Play",
2138
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2139
+ import_fa.FaPlay,
2036
2140
  {
2141
+ size: 36,
2142
+ color: "white",
2037
2143
  style: {
2038
- display: "flex",
2039
- alignItems: "center",
2040
- justifyContent: "space-between",
2041
- color: "white"
2042
- },
2043
- children: [
2044
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2045
- "div",
2046
- {
2047
- style: {
2048
- display: "flex",
2049
- alignItems: "center",
2050
- gap: "12px"
2051
- },
2052
- children: [
2053
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2054
- "button",
2055
- {
2056
- onClick: handlePlayPause,
2057
- style: {
2058
- background: "transparent",
2059
- border: "none",
2060
- color: "white",
2061
- cursor: "pointer",
2062
- padding: "8px",
2063
- borderRadius: "4px",
2064
- display: "flex",
2065
- alignItems: "center",
2066
- justifyContent: "center",
2067
- transition: "background-color 0.2s"
2068
- },
2069
- onMouseEnter: (e) => {
2070
- e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2071
- },
2072
- onMouseLeave: (e) => {
2073
- e.target.style.backgroundColor = "transparent";
2074
- },
2075
- title: isPlaying ? "Pause" : "Play",
2076
- children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2077
- "svg",
2078
- {
2079
- width: "24",
2080
- height: "24",
2081
- viewBox: "0 0 24 24",
2082
- fill: "currentColor",
2083
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
2084
- }
2085
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2086
- "svg",
2087
- {
2088
- width: "24",
2089
- height: "24",
2090
- viewBox: "0 0 24 24",
2091
- fill: "currentColor",
2092
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 5v14l11-7z" })
2093
- }
2094
- )
2095
- }
2096
- ),
2097
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2098
- "div",
2099
- {
2100
- style: {
2101
- position: "relative",
2102
- display: "flex",
2103
- alignItems: "center"
2104
- },
2105
- onMouseEnter: () => setShowVolumeSlider(true),
2106
- onMouseLeave: () => setShowVolumeSlider(false),
2107
- children: [
2108
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2109
- "button",
2110
- {
2111
- onClick: () => {
2112
- if (onVolumeToggle) {
2113
- onVolumeToggle();
2114
- } else if (playerRef.current) {
2115
- playerRef.current.toggleMute();
2116
- }
2117
- },
2118
- style: {
2119
- background: "transparent",
2120
- border: "none",
2121
- color: "white",
2122
- cursor: "pointer",
2123
- padding: "8px",
2124
- borderRadius: "4px",
2125
- display: "flex",
2126
- alignItems: "center",
2127
- justifyContent: "center",
2128
- transition: "background-color 0.2s"
2129
- },
2130
- onMouseEnter: (e) => {
2131
- e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2132
- },
2133
- onMouseLeave: (e) => {
2134
- e.target.style.backgroundColor = "transparent";
2135
- },
2136
- title: isMuted ? "Unmute" : "Mute",
2137
- children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2138
- "svg",
2139
- {
2140
- width: "20",
2141
- height: "20",
2142
- viewBox: "0 0 24 24",
2143
- fill: "currentColor",
2144
- children: [
2145
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 8.5v7c0 .28.22.5.5.5H7l4.29 4.29c.63.63 1.71.18 1.71-.71V4.41c0-.89-1.08-1.34-1.71-.71L7 8H3.5c-.28 0-.5.22-.5.5z" }),
2146
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2147
- "path",
2148
- {
2149
- d: "M16.5 8.5l-1.41-1.41L12 10.18 8.91 7.09 7.5 8.5l3.09 3.09L7.5 14.68l1.41 1.41L12 13l3.09 3.09 1.41-1.41L13.41 12l3.09-3.5z",
2150
- fill: "#ff4444"
2151
- }
2152
- )
2153
- ]
2154
- }
2155
- ) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2156
- "svg",
2157
- {
2158
- width: "20",
2159
- height: "20",
2160
- viewBox: "0 0 24 24",
2161
- fill: "currentColor",
2162
- children: [
2163
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 8.5v7c0 .28.22.5.5.5H7l4.29 4.29c.63.63 1.71.18 1.71-.71V4.41c0-.89-1.08-1.34-1.71-.71L7 8H3.5c-.28 0-.5.22-.5.5z" }),
2164
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2165
- "path",
2166
- {
2167
- d: "M15.5 12c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
2168
- opacity: "0.8"
2169
- }
2170
- )
2171
- ]
2172
- }
2173
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2174
- "svg",
2175
- {
2176
- width: "20",
2177
- height: "20",
2178
- viewBox: "0 0 24 24",
2179
- fill: "currentColor",
2180
- children: [
2181
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 8.5v7c0 .28.22.5.5.5H7l4.29 4.29c.63.63 1.71.18 1.71-.71V4.41c0-.89-1.08-1.34-1.71-.71L7 8H3.5c-.28 0-.5.22-.5.5z" }),
2182
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2183
- "path",
2184
- {
2185
- d: "M15.5 12c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
2186
- opacity: "0.8"
2187
- }
2188
- ),
2189
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2190
- "path",
2191
- {
2192
- d: "M14 4.45v1.75c2.01.91 3.5 3.02 3.5 5.3 0 2.28-1.49 4.39-3.5 5.3v1.75c2.89-.86 5-3.54 5-7.05s-2.11-6.19-5-7.05z",
2193
- opacity: "0.6"
2194
- }
2195
- )
2196
- ]
2197
- }
2198
- )
2199
- }
2200
- ),
2201
- showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2202
- "div",
2203
- {
2204
- style: {
2205
- position: "absolute",
2206
- bottom: "100%",
2207
- left: "50%",
2208
- transform: "translateX(-50%)",
2209
- marginBottom: "8px",
2210
- background: "rgba(0, 0, 0, 0.9)",
2211
- padding: "8px",
2212
- borderRadius: "4px",
2213
- display: "flex",
2214
- flexDirection: "column",
2215
- alignItems: "center",
2216
- height: "100px"
2217
- },
2218
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2219
- "input",
2220
- {
2221
- type: "range",
2222
- min: "0",
2223
- max: "1",
2224
- step: "0.01",
2225
- value: isMuted ? 0 : volume,
2226
- onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
2227
- style: {
2228
- writingMode: "bt-lr",
2229
- WebkitAppearance: "slider-vertical",
2230
- width: "4px",
2231
- height: "80px",
2232
- background: "rgba(255, 255, 255, 0.3)",
2233
- outline: "none"
2234
- }
2235
- }
2236
- )
2237
- }
2238
- )
2239
- ]
2240
- }
2241
- ),
2242
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2243
- "div",
2244
- {
2245
- style: {
2246
- fontSize: "14px",
2247
- fontFamily: "monospace",
2248
- color: "rgba(255, 255, 255, 0.9)"
2249
- },
2250
- children: [
2251
- formatTime(currentTime),
2252
- " / ",
2253
- formatTime(duration)
2254
- ]
2255
- }
2256
- )
2257
- ]
2258
- }
2259
- ),
2260
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2261
- "div",
2262
- {
2263
- style: {
2264
- display: "flex",
2265
- alignItems: "center",
2266
- gap: "12px"
2267
- },
2268
- children: [
2269
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
2270
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2144
+ marginLeft: "6px",
2145
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))"
2146
+ }
2147
+ }
2148
+ )
2149
+ }
2150
+ ),
2151
+ adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2152
+ "div",
2153
+ {
2154
+ style: {
2155
+ position: "absolute",
2156
+ top: "10px",
2157
+ right: "10px",
2158
+ backgroundColor: "rgba(0, 0, 0, 0.7)",
2159
+ color: "white",
2160
+ padding: "4px 8px",
2161
+ borderRadius: "4px",
2162
+ fontSize: "12px",
2163
+ fontFamily: "Arial, sans-serif",
2164
+ zIndex: 10
2165
+ },
2166
+ children: [
2167
+ "Ad ",
2168
+ adStatus.currentIndex,
2169
+ "/",
2170
+ adStatus.totalAds
2171
+ ]
2172
+ }
2173
+ ),
2174
+ shouldShowEnhancedControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2175
+ "div",
2176
+ {
2177
+ style: {
2178
+ position: "absolute",
2179
+ bottom: 0,
2180
+ left: 0,
2181
+ right: 0,
2182
+ background: "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%)",
2183
+ padding: "20px 16px 16px",
2184
+ zIndex: 10
2185
+ },
2186
+ children: [
2187
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2188
+ "div",
2189
+ {
2190
+ style: {
2191
+ width: "100%",
2192
+ height: "8px",
2193
+ background: "linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)",
2194
+ borderRadius: "8px",
2195
+ marginBottom: "16px",
2196
+ cursor: "pointer",
2197
+ position: "relative",
2198
+ backdropFilter: "blur(5px)",
2199
+ border: "1px solid rgba(255, 255, 255, 0.1)",
2200
+ boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
2201
+ },
2202
+ onClick: handleTimelineSeek,
2203
+ children: [
2204
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2205
+ "div",
2206
+ {
2207
+ style: {
2208
+ height: "100%",
2209
+ background: "linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(34, 197, 94, 0.9) 100%)",
2210
+ borderRadius: "8px",
2211
+ width: `${duration > 0 ? currentTime / duration * 100 : 0}%`,
2212
+ transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
2213
+ boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)"
2214
+ }
2215
+ }
2216
+ ),
2217
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2218
+ "div",
2219
+ {
2220
+ style: {
2221
+ position: "absolute",
2222
+ top: "-6px",
2223
+ right: `${duration > 0 ? 100 - currentTime / duration * 100 : 100}%`,
2224
+ width: "20px",
2225
+ height: "20px",
2226
+ background: "linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%)",
2227
+ borderRadius: "50%",
2228
+ border: "3px solid rgba(139, 92, 246, 0.8)",
2229
+ boxShadow: "0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
2230
+ transform: "translateX(50%)",
2231
+ transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
2232
+ }
2233
+ }
2234
+ )
2235
+ ]
2236
+ }
2237
+ ),
2238
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2239
+ "div",
2240
+ {
2241
+ style: {
2242
+ display: "flex",
2243
+ alignItems: "center",
2244
+ justifyContent: "space-between",
2245
+ color: "white"
2246
+ },
2247
+ children: [
2248
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2249
+ "div",
2250
+ {
2251
+ style: {
2252
+ display: "flex",
2253
+ alignItems: "center",
2254
+ gap: "12px"
2255
+ },
2256
+ children: [
2257
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2271
2258
  "button",
2272
2259
  {
2273
- onClick: () => setShowSpeedMenu(!showSpeedMenu),
2260
+ onClick: handlePlayPause,
2274
2261
  style: {
2275
- background: "transparent",
2276
- border: "none",
2277
- color: "white",
2262
+ background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)",
2263
+ backdropFilter: "blur(10px)",
2264
+ border: "1px solid rgba(255, 255, 255, 0.2)",
2265
+ color: "#ffffff",
2278
2266
  cursor: "pointer",
2279
- padding: "8px 12px",
2280
- borderRadius: "4px",
2281
- fontSize: "14px",
2282
- fontFamily: "monospace",
2283
- transition: "background-color 0.2s"
2267
+ padding: "12px",
2268
+ borderRadius: "12px",
2269
+ display: "flex",
2270
+ alignItems: "center",
2271
+ justifyContent: "center",
2272
+ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
2273
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
2274
+ minWidth: "48px",
2275
+ minHeight: "48px"
2284
2276
  },
2285
2277
  onMouseEnter: (e) => {
2286
- e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2278
+ const target = e.target;
2279
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%)";
2280
+ target.style.transform = "translateY(-2px) scale(1.05)";
2281
+ target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
2287
2282
  },
2288
2283
  onMouseLeave: (e) => {
2289
- e.target.style.backgroundColor = "transparent";
2284
+ const target = e.target;
2285
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
2286
+ target.style.transform = "translateY(0) scale(1)";
2287
+ target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2290
2288
  },
2291
- title: "Playback Speed",
2292
- children: [
2293
- playbackRate,
2294
- "x"
2295
- ]
2289
+ title: isPlaying ? "Pause" : "Play",
2290
+ children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2291
+ import_fa.FaPause,
2292
+ {
2293
+ size: 20,
2294
+ style: { filter: "drop-shadow(0 0 0 transparent)" }
2295
+ }
2296
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2297
+ import_fa.FaPlay,
2298
+ {
2299
+ size: 20,
2300
+ style: { filter: "drop-shadow(0 0 0 transparent)" }
2301
+ }
2302
+ )
2296
2303
  }
2297
2304
  ),
2298
- showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2305
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2299
2306
  "div",
2300
2307
  {
2301
2308
  style: {
2302
- position: "absolute",
2303
- bottom: "100%",
2304
- right: 0,
2305
- marginBottom: "8px",
2306
- background: "rgba(0, 0, 0, 0.9)",
2307
- borderRadius: "4px",
2308
- overflow: "hidden",
2309
- minWidth: "80px"
2309
+ position: "relative",
2310
+ display: "flex",
2311
+ alignItems: "center",
2312
+ padding: "8px",
2313
+ margin: "-8px"
2310
2314
  },
2311
- children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
2312
- (speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2315
+ onMouseEnter: () => setShowVolumeSlider(true),
2316
+ onMouseLeave: () => setShowVolumeSlider(false),
2317
+ children: [
2318
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2313
2319
  "button",
2314
2320
  {
2315
- onClick: () => handlePlaybackRateChange(speed),
2321
+ onClick: () => {
2322
+ if (onVolumeToggle) {
2323
+ onVolumeToggle();
2324
+ } else if (playerRef.current) {
2325
+ playerRef.current.toggleMute();
2326
+ }
2327
+ },
2316
2328
  style: {
2317
- display: "block",
2318
- width: "100%",
2319
- padding: "8px 12px",
2320
- background: playbackRate === speed ? "rgba(255, 68, 68, 0.8)" : "transparent",
2321
- border: "none",
2322
- color: "white",
2329
+ background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
2330
+ backdropFilter: "blur(8px)",
2331
+ border: "1px solid rgba(255, 255, 255, 0.15)",
2332
+ color: isMuted ? "#ff6b6b" : "#ffffff",
2323
2333
  cursor: "pointer",
2324
- fontSize: "14px",
2325
- fontFamily: "monospace",
2326
- textAlign: "left",
2327
- transition: "background-color 0.2s"
2334
+ padding: "10px",
2335
+ borderRadius: "10px",
2336
+ display: "flex",
2337
+ alignItems: "center",
2338
+ justifyContent: "center",
2339
+ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
2340
+ boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
2341
+ minWidth: "40px",
2342
+ minHeight: "40px"
2328
2343
  },
2329
2344
  onMouseEnter: (e) => {
2330
- if (playbackRate !== speed) {
2331
- e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2332
- }
2345
+ const target = e.target;
2346
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
2347
+ target.style.transform = "translateY(-1px) scale(1.03)";
2348
+ target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2333
2349
  },
2334
2350
  onMouseLeave: (e) => {
2335
- if (playbackRate !== speed) {
2336
- e.target.style.backgroundColor = "transparent";
2337
- }
2351
+ const target = e.target;
2352
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
2353
+ target.style.transform = "translateY(0) scale(1)";
2354
+ target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
2338
2355
  },
2339
- children: [
2340
- speed,
2341
- "x"
2342
- ]
2343
- },
2344
- speed
2345
- )
2346
- )
2356
+ title: isMuted ? "Unmute" : "Mute",
2357
+ children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2358
+ import_fa.FaVolumeMute,
2359
+ {
2360
+ size: 16,
2361
+ style: {
2362
+ filter: "drop-shadow(0 0 0 transparent)"
2363
+ }
2364
+ }
2365
+ ) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2366
+ import_fa.FaVolumeDown,
2367
+ {
2368
+ size: 16,
2369
+ style: {
2370
+ filter: "drop-shadow(0 0 0 transparent)"
2371
+ }
2372
+ }
2373
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2374
+ import_fa.FaVolumeUp,
2375
+ {
2376
+ size: 16,
2377
+ style: {
2378
+ filter: "drop-shadow(0 0 0 transparent)"
2379
+ }
2380
+ }
2381
+ )
2382
+ }
2383
+ ),
2384
+ showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
2385
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2386
+ "div",
2387
+ {
2388
+ style: {
2389
+ position: "absolute",
2390
+ bottom: "100%",
2391
+ left: "50%",
2392
+ transform: "translateX(-50%)",
2393
+ width: "60px",
2394
+ height: "20px",
2395
+ marginBottom: "-16px",
2396
+ zIndex: 9
2397
+ },
2398
+ onMouseEnter: () => setShowVolumeSlider(true),
2399
+ onMouseLeave: () => setShowVolumeSlider(false)
2400
+ }
2401
+ ),
2402
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2403
+ "div",
2404
+ {
2405
+ style: {
2406
+ position: "absolute",
2407
+ bottom: "100%",
2408
+ left: "50%",
2409
+ transform: "translateX(-50%)",
2410
+ marginBottom: "4px",
2411
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 20, 20, 0.9) 100%)",
2412
+ backdropFilter: "blur(15px)",
2413
+ padding: "16px 12px",
2414
+ borderRadius: "12px",
2415
+ border: "1px solid rgba(255, 255, 255, 0.1)",
2416
+ display: "flex",
2417
+ flexDirection: "column",
2418
+ alignItems: "center",
2419
+ height: "130px",
2420
+ boxShadow: "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
2421
+ zIndex: 10
2422
+ },
2423
+ onMouseEnter: () => setShowVolumeSlider(true),
2424
+ onMouseLeave: () => setShowVolumeSlider(false),
2425
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2426
+ "input",
2427
+ {
2428
+ type: "range",
2429
+ min: "0",
2430
+ max: "1",
2431
+ step: "0.01",
2432
+ value: isMuted ? 0 : volume,
2433
+ onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
2434
+ style: {
2435
+ writingMode: "bt-lr",
2436
+ WebkitAppearance: "slider-vertical",
2437
+ width: "6px",
2438
+ height: "90px",
2439
+ background: "linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%)",
2440
+ borderRadius: "3px",
2441
+ outline: "none",
2442
+ cursor: "pointer"
2443
+ }
2444
+ }
2445
+ )
2446
+ }
2447
+ )
2448
+ ] })
2449
+ ]
2450
+ }
2451
+ ),
2452
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2453
+ "div",
2454
+ {
2455
+ style: {
2456
+ fontSize: "14px",
2457
+ fontFamily: "monospace",
2458
+ color: "rgba(255, 255, 255, 0.9)"
2459
+ },
2460
+ children: [
2461
+ formatTime(currentTime),
2462
+ " / ",
2463
+ formatTime(duration)
2464
+ ]
2347
2465
  }
2348
2466
  )
2349
- ] }),
2350
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2351
- "button",
2352
- {
2353
- onClick: () => {
2354
- if (onFullscreenToggle) {
2355
- onFullscreenToggle();
2356
- } else if (playerRef.current) {
2357
- playerRef.current.toggleFullscreen().catch((err) => {
2358
- console.error("Fullscreen error:", err);
2359
- });
2360
- }
2361
- },
2362
- style: {
2363
- background: "transparent",
2364
- border: "none",
2365
- color: "white",
2366
- cursor: "pointer",
2367
- padding: "8px",
2368
- borderRadius: "4px",
2369
- display: "flex",
2370
- alignItems: "center",
2371
- justifyContent: "center",
2372
- transition: "background-color 0.2s"
2373
- },
2374
- onMouseEnter: (e) => {
2375
- e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2376
- },
2377
- onMouseLeave: (e) => {
2378
- e.target.style.backgroundColor = "transparent";
2379
- },
2380
- title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
2381
- children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2382
- "svg",
2467
+ ]
2468
+ }
2469
+ ),
2470
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2471
+ "div",
2472
+ {
2473
+ style: {
2474
+ display: "flex",
2475
+ alignItems: "center",
2476
+ gap: "12px"
2477
+ },
2478
+ children: [
2479
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
2480
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2481
+ "button",
2383
2482
  {
2384
- width: "20",
2385
- height: "20",
2386
- viewBox: "0 0 24 24",
2387
- fill: "currentColor",
2483
+ onClick: () => setShowSpeedMenu(!showSpeedMenu),
2484
+ style: {
2485
+ background: "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)",
2486
+ backdropFilter: "blur(8px)",
2487
+ border: "1px solid rgba(255, 255, 255, 0.12)",
2488
+ color: "#ffffff",
2489
+ cursor: "pointer",
2490
+ padding: "8px 14px",
2491
+ borderRadius: "8px",
2492
+ fontSize: "13px",
2493
+ fontFamily: "monospace",
2494
+ fontWeight: "600",
2495
+ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
2496
+ boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)",
2497
+ minWidth: "50px"
2498
+ },
2499
+ onMouseEnter: (e) => {
2500
+ const target = e.target;
2501
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%)";
2502
+ target.style.transform = "translateY(-1px) scale(1.02)";
2503
+ target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
2504
+ },
2505
+ onMouseLeave: (e) => {
2506
+ const target = e.target;
2507
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
2508
+ target.style.transform = "translateY(0) scale(1)";
2509
+ target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
2510
+ },
2511
+ title: "Playback Speed",
2388
2512
  children: [
2389
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 8h3v3l-1-1-2 2-1.5-1.5L8.5 8.5 8 8z" }),
2390
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 8h-3v3l1-1 2 2 1.5-1.5L15.5 8.5 16 8z" }),
2391
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 16h3v-3l-1 1-2-2-1.5 1.5L8.5 15.5 8 16z" }),
2392
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 16h-3v-3l1 1 2-2 1.5 1.5L15.5 15.5 16 16z" })
2513
+ playbackRate,
2514
+ "x"
2393
2515
  ]
2394
2516
  }
2395
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2396
- "svg",
2517
+ ),
2518
+ showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2519
+ "div",
2397
2520
  {
2398
- width: "20",
2399
- height: "20",
2400
- viewBox: "0 0 24 24",
2401
- fill: "currentColor",
2402
- children: [
2403
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 3h6v2H5v4H3V3z" }),
2404
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 3h-6v2h4v4h2V3z" }),
2405
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 21v-6h2v4h4v2H3z" }),
2406
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 21h-6v-2h4v-4h2v6z" })
2407
- ]
2521
+ style: {
2522
+ position: "absolute",
2523
+ bottom: "100%",
2524
+ right: 0,
2525
+ marginBottom: "12px",
2526
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
2527
+ backdropFilter: "blur(20px)",
2528
+ borderRadius: "12px",
2529
+ border: "1px solid rgba(255, 255, 255, 0.1)",
2530
+ overflow: "hidden",
2531
+ minWidth: "90px",
2532
+ boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
2533
+ },
2534
+ children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
2535
+ (speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2536
+ "button",
2537
+ {
2538
+ onClick: () => handlePlaybackRateChange(speed),
2539
+ style: {
2540
+ display: "block",
2541
+ width: "100%",
2542
+ padding: "10px 16px",
2543
+ background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
2544
+ border: "none",
2545
+ color: "white",
2546
+ cursor: "pointer",
2547
+ fontSize: "13px",
2548
+ fontFamily: "monospace",
2549
+ fontWeight: "600",
2550
+ textAlign: "center",
2551
+ transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
2552
+ borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
2553
+ },
2554
+ onMouseEnter: (e) => {
2555
+ if (playbackRate !== speed) {
2556
+ e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
2557
+ }
2558
+ },
2559
+ onMouseLeave: (e) => {
2560
+ if (playbackRate !== speed) {
2561
+ e.target.style.background = "transparent";
2562
+ }
2563
+ },
2564
+ children: [
2565
+ speed,
2566
+ "x"
2567
+ ]
2568
+ },
2569
+ speed
2570
+ )
2571
+ )
2408
2572
  }
2409
2573
  )
2574
+ ] }),
2575
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2576
+ "button",
2577
+ {
2578
+ onClick: () => {
2579
+ if (onFullscreenToggle) {
2580
+ onFullscreenToggle();
2581
+ } else if (playerRef.current) {
2582
+ playerRef.current.toggleFullscreen().catch((err) => {
2583
+ console.error("Fullscreen error:", err);
2584
+ });
2585
+ }
2586
+ },
2587
+ style: {
2588
+ background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
2589
+ backdropFilter: "blur(8px)",
2590
+ border: "1px solid rgba(255, 255, 255, 0.15)",
2591
+ color: "#ffffff",
2592
+ cursor: "pointer",
2593
+ padding: "10px",
2594
+ borderRadius: "10px",
2595
+ display: "flex",
2596
+ alignItems: "center",
2597
+ justifyContent: "center",
2598
+ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
2599
+ boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
2600
+ minWidth: "40px",
2601
+ minHeight: "40px"
2602
+ },
2603
+ onMouseEnter: (e) => {
2604
+ const target = e.target;
2605
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
2606
+ target.style.transform = "translateY(-1px) scale(1.03)";
2607
+ target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2608
+ },
2609
+ onMouseLeave: (e) => {
2610
+ const target = e.target;
2611
+ target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
2612
+ target.style.transform = "translateY(0) scale(1)";
2613
+ target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
2614
+ },
2615
+ title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
2616
+ children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2617
+ import_fa.FaCompress,
2618
+ {
2619
+ size: 16,
2620
+ style: { filter: "drop-shadow(0 0 0 transparent)" }
2621
+ }
2622
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2623
+ import_fa.FaExpand,
2624
+ {
2625
+ size: 16,
2626
+ style: { filter: "drop-shadow(0 0 0 transparent)" }
2627
+ }
2628
+ )
2629
+ }
2630
+ )
2631
+ ]
2632
+ }
2633
+ )
2634
+ ]
2635
+ }
2636
+ )
2637
+ ]
2638
+ }
2639
+ ) }) : showCustomControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2640
+ "div",
2641
+ {
2642
+ style: {
2643
+ position: "absolute",
2644
+ bottom: "10px",
2645
+ right: "10px",
2646
+ display: "flex",
2647
+ gap: "8px",
2648
+ zIndex: 10
2649
+ },
2650
+ children: [
2651
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2652
+ "div",
2653
+ {
2654
+ style: {
2655
+ position: "relative",
2656
+ display: "flex",
2657
+ alignItems: "center",
2658
+ padding: "8px",
2659
+ margin: "-8px"
2660
+ },
2661
+ onMouseEnter: () => setShowVolumeSlider(true),
2662
+ onMouseLeave: () => setShowVolumeSlider(false),
2663
+ children: [
2664
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2665
+ "button",
2666
+ {
2667
+ onClick: () => {
2668
+ if (onVolumeToggle) {
2669
+ onVolumeToggle();
2670
+ } else if (playerRef.current) {
2671
+ playerRef.current.toggleMute();
2672
+ }
2673
+ },
2674
+ onMouseEnter: (e) => {
2675
+ const target = e.currentTarget;
2676
+ target.style.transform = "translateY(-3px) scale(1.08)";
2677
+ target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
2678
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
2679
+ },
2680
+ onMouseLeave: (e) => {
2681
+ const target = e.currentTarget;
2682
+ target.style.transform = "translateY(0) scale(1)";
2683
+ target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2684
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
2685
+ },
2686
+ style: {
2687
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
2688
+ color: isMuted ? "#ff6b6b" : "#ffffff",
2689
+ border: "none",
2690
+ borderRadius: "16px",
2691
+ padding: "10px",
2692
+ cursor: "pointer",
2693
+ display: "flex",
2694
+ alignItems: "center",
2695
+ justifyContent: "center",
2696
+ backdropFilter: "blur(20px)",
2697
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
2698
+ transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
2699
+ minWidth: "44px",
2700
+ minHeight: "44px"
2701
+ },
2702
+ title: isMuted ? "Unmute" : "Mute",
2703
+ children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2704
+ import_fa.FaVolumeMute,
2705
+ {
2706
+ size: 16,
2707
+ style: {
2708
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
2709
+ color: "#ffffff"
2710
+ }
2711
+ }
2712
+ ) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2713
+ import_fa.FaVolumeDown,
2714
+ {
2715
+ size: 16,
2716
+ style: {
2717
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
2718
+ color: "#ffffff"
2719
+ }
2720
+ }
2721
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2722
+ import_fa.FaVolumeUp,
2723
+ {
2724
+ size: 16,
2725
+ style: {
2726
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
2727
+ color: "#ffffff"
2728
+ }
2410
2729
  }
2411
2730
  )
2412
- ]
2413
- }
2414
- )
2415
- ]
2416
- }
2417
- )
2418
- ]
2419
- }
2420
- ) }) : showCustomControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2421
- "div",
2422
- {
2423
- style: {
2424
- position: "absolute",
2425
- bottom: "10px",
2426
- right: "10px",
2427
- display: "flex",
2428
- gap: "8px",
2429
- zIndex: 10
2430
- },
2431
- children: [
2432
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2433
- "button",
2434
- {
2435
- onClick: () => {
2436
- if (onVolumeToggle) {
2437
- onVolumeToggle();
2438
- } else if (playerRef.current) {
2439
- playerRef.current.toggleMute();
2440
- }
2441
- },
2442
- onMouseEnter: (e) => {
2443
- const target = e.currentTarget;
2444
- target.style.transform = "translateY(-2px) scale(1.05)";
2445
- target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2446
- target.style.background = "linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(60, 60, 60, 0.95) 100%)";
2447
- },
2448
- onMouseLeave: (e) => {
2449
- const target = e.currentTarget;
2450
- target.style.transform = "translateY(0) scale(1)";
2451
- target.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
2452
- target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)";
2453
- },
2454
- style: {
2455
- background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)",
2456
- color: "white",
2457
- border: "1px solid rgba(255, 255, 255, 0.2)",
2458
- borderRadius: "8px",
2459
- padding: "10px",
2460
- cursor: "pointer",
2461
- display: "flex",
2462
- alignItems: "center",
2463
- justifyContent: "center",
2464
- backdropFilter: "blur(10px)",
2465
- boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
2466
- transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
2467
- },
2468
- title: isMuted ? "Unmute" : "Mute",
2469
- children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2470
- "svg",
2471
- {
2472
- width: "18",
2473
- height: "18",
2474
- viewBox: "0 0 24 24",
2475
- fill: "none",
2476
- xmlns: "http://www.w3.org/2000/svg",
2477
- children: [
2478
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2479
- "linearGradient",
2480
- {
2481
- id: "volumeGradient",
2482
- x1: "0%",
2483
- y1: "0%",
2484
- x2: "100%",
2485
- y2: "100%",
2486
- children: [
2487
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2488
- "stop",
2489
- {
2490
- offset: "0%",
2491
- stopColor: "#ffffff",
2492
- stopOpacity: "1"
2493
- }
2494
- ),
2495
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2496
- "stop",
2497
- {
2498
- offset: "100%",
2499
- stopColor: "#e0e0e0",
2500
- stopOpacity: "0.9"
2501
- }
2502
- )
2503
- ]
2504
- }
2505
- ) }),
2731
+ }
2732
+ ),
2733
+ showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
2506
2734
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2507
- "path",
2735
+ "div",
2508
2736
  {
2509
- d: "M3 8.5v7c0 .28.22.5.5.5H7l4.29 4.29c.63.63 1.71.18 1.71-.71V4.41c0-.89-1.08-1.34-1.71-.71L7 8H3.5c-.28 0-.5.22-.5.5z",
2510
- fill: "url(#volumeGradient)",
2511
- stroke: "rgba(255,255,255,0.3)",
2512
- strokeWidth: "0.5"
2737
+ style: {
2738
+ position: "absolute",
2739
+ bottom: "100%",
2740
+ left: "50%",
2741
+ transform: "translateX(-50%)",
2742
+ width: "60px",
2743
+ height: "20px",
2744
+ marginBottom: "-16px",
2745
+ zIndex: 9
2746
+ },
2747
+ onMouseEnter: () => setShowVolumeSlider(true),
2748
+ onMouseLeave: () => setShowVolumeSlider(false)
2513
2749
  }
2514
2750
  ),
2515
2751
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2516
- "path",
2752
+ "div",
2517
2753
  {
2518
- d: "M16.5 8.5l-1.41-1.41L12 10.18 8.91 7.09 7.5 8.5l3.09 3.09L7.5 14.68l1.41 1.41L12 13l3.09 3.09 1.41-1.41L13.41 12l3.09-3.5z",
2519
- fill: "#ff4444",
2520
- stroke: "rgba(255,255,255,0.5)",
2521
- strokeWidth: "0.5"
2522
- }
2523
- )
2524
- ]
2525
- }
2526
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2527
- "svg",
2528
- {
2529
- width: "18",
2530
- height: "18",
2531
- viewBox: "0 0 24 24",
2532
- fill: "none",
2533
- xmlns: "http://www.w3.org/2000/svg",
2534
- children: [
2535
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2536
- "linearGradient",
2537
- {
2538
- id: "volumeGradient",
2539
- x1: "0%",
2540
- y1: "0%",
2541
- x2: "100%",
2542
- y2: "100%",
2543
- children: [
2544
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2545
- "stop",
2546
- {
2547
- offset: "0%",
2548
- stopColor: "#ffffff",
2549
- stopOpacity: "1"
2550
- }
2551
- ),
2552
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2553
- "stop",
2554
- {
2555
- offset: "100%",
2556
- stopColor: "#e0e0e0",
2557
- stopOpacity: "0.9"
2754
+ style: {
2755
+ position: "absolute",
2756
+ bottom: "100%",
2757
+ left: "50%",
2758
+ transform: "translateX(-50%)",
2759
+ marginBottom: "4px",
2760
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%)",
2761
+ backdropFilter: "blur(20px)",
2762
+ padding: "16px 12px",
2763
+ borderRadius: "12px",
2764
+ border: "2px solid rgba(255, 255, 255, 0.6)",
2765
+ display: "flex",
2766
+ flexDirection: "column",
2767
+ alignItems: "center",
2768
+ height: "130px",
2769
+ boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
2770
+ zIndex: 10
2771
+ },
2772
+ onMouseEnter: () => setShowVolumeSlider(true),
2773
+ onMouseLeave: () => setShowVolumeSlider(false),
2774
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2775
+ "input",
2776
+ {
2777
+ type: "range",
2778
+ min: "0",
2779
+ max: "1",
2780
+ step: "0.01",
2781
+ value: isMuted ? 0 : volume,
2782
+ onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
2783
+ style: {
2784
+ writingMode: "bt-lr",
2785
+ WebkitAppearance: "slider-vertical",
2786
+ width: "6px",
2787
+ height: "90px",
2788
+ background: "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%)",
2789
+ borderRadius: "3px",
2790
+ outline: "none",
2791
+ cursor: "pointer",
2792
+ border: "1px solid rgba(255, 255, 255, 0.3)"
2558
2793
  }
2559
- )
2560
- ]
2561
- }
2562
- ) }),
2563
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2564
- "path",
2565
- {
2566
- d: "M3 8.5v7c0 .28.22.5.5.5H7l4.29 4.29c.63.63 1.71.18 1.71-.71V4.41c0-.89-1.08-1.34-1.71-.71L7 8H3.5c-.28 0-.5.22-.5.5z",
2567
- fill: "url(#volumeGradient)",
2568
- stroke: "rgba(255,255,255,0.3)",
2569
- strokeWidth: "0.5"
2570
- }
2571
- ),
2572
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2573
- "path",
2574
- {
2575
- d: "M15.5 12c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
2576
- fill: "url(#volumeGradient)",
2577
- opacity: "0.8"
2578
- }
2579
- ),
2580
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2581
- "path",
2582
- {
2583
- d: "M14 4.45v1.75c2.01.91 3.5 3.02 3.5 5.3 0 2.28-1.49 4.39-3.5 5.3v1.75c2.89-.86 5-3.54 5-7.05s-2.11-6.19-5-7.05z",
2584
- fill: "url(#volumeGradient)",
2585
- opacity: "0.6"
2586
- }
2587
- )
2588
- ]
2589
- }
2590
- )
2591
- }
2592
- ),
2593
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2594
- "button",
2595
- {
2596
- onClick: () => {
2597
- if (onFullscreenToggle) {
2598
- onFullscreenToggle();
2599
- } else if (playerRef.current) {
2600
- playerRef.current.toggleFullscreen().catch((err) => {
2601
- console.error("Fullscreen error:", err);
2602
- });
2603
- }
2604
- },
2605
- onMouseEnter: (e) => {
2606
- const target = e.currentTarget;
2607
- target.style.transform = "translateY(-2px) scale(1.05)";
2608
- target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2609
- target.style.background = "linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(60, 60, 60, 0.95) 100%)";
2610
- },
2611
- onMouseLeave: (e) => {
2612
- const target = e.currentTarget;
2613
- target.style.transform = "translateY(0) scale(1)";
2614
- target.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
2615
- target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)";
2616
- },
2617
- style: {
2618
- background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)",
2619
- color: "white",
2620
- border: "1px solid rgba(255, 255, 255, 0.2)",
2621
- borderRadius: "8px",
2622
- padding: "10px",
2623
- cursor: "pointer",
2624
- display: "flex",
2625
- alignItems: "center",
2626
- justifyContent: "center",
2627
- backdropFilter: "blur(10px)",
2628
- boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
2629
- transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
2630
- },
2631
- title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
2632
- children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2633
- "svg",
2634
- {
2635
- width: "20",
2636
- height: "20",
2637
- viewBox: "0 0 24 24",
2638
- fill: "none",
2639
- xmlns: "http://www.w3.org/2000/svg",
2640
- children: [
2641
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2642
- "path",
2643
- {
2644
- d: "M8 8h3v3l-1-1-2 2-1.5-1.5L8.5 8.5 8 8z",
2645
- fill: "white",
2646
- stroke: "rgba(255,255,255,0.8)",
2647
- strokeWidth: "0.5"
2648
- }
2649
- ),
2650
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2651
- "path",
2652
- {
2653
- d: "M16 8h-3v3l1-1 2 2 1.5-1.5L15.5 8.5 16 8z",
2654
- fill: "white",
2655
- stroke: "rgba(255,255,255,0.8)",
2656
- strokeWidth: "0.5"
2657
- }
2658
- ),
2659
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2660
- "path",
2661
- {
2662
- d: "M8 16h3v-3l-1 1-2-2-1.5 1.5L8.5 15.5 8 16z",
2663
- fill: "white",
2664
- stroke: "rgba(255,255,255,0.8)",
2665
- strokeWidth: "0.5"
2666
- }
2667
- ),
2668
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2669
- "path",
2670
- {
2671
- d: "M16 16h-3v-3l1 1 2-2 1.5 1.5L15.5 15.5 16 16z",
2672
- fill: "white",
2673
- stroke: "rgba(255,255,255,0.8)",
2674
- strokeWidth: "0.5"
2675
- }
2676
- )
2677
- ]
2678
- }
2679
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2680
- "svg",
2681
- {
2682
- width: "20",
2683
- height: "20",
2684
- viewBox: "0 0 24 24",
2685
- fill: "none",
2686
- xmlns: "http://www.w3.org/2000/svg",
2687
- children: [
2688
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2689
- "path",
2690
- {
2691
- d: "M3 3h6v2H5v4H3V3z",
2692
- fill: "white",
2693
- stroke: "rgba(255,255,255,0.8)",
2694
- strokeWidth: "0.5"
2695
- }
2696
- ),
2697
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2698
- "path",
2699
- {
2700
- d: "M21 3h-6v2h4v4h2V3z",
2701
- fill: "white",
2702
- stroke: "rgba(255,255,255,0.8)",
2703
- strokeWidth: "0.5"
2704
- }
2705
- ),
2706
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2707
- "path",
2708
- {
2709
- d: "M3 21v-6h2v4h4v2H3z",
2710
- fill: "white",
2711
- stroke: "rgba(255,255,255,0.8)",
2712
- strokeWidth: "0.5"
2713
- }
2714
- ),
2715
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2716
- "path",
2717
- {
2718
- d: "M21 21h-6v-2h4v-4h2v6z",
2719
- fill: "white",
2720
- stroke: "rgba(255,255,255,0.8)",
2721
- strokeWidth: "0.5"
2794
+ }
2795
+ )
2722
2796
  }
2723
2797
  )
2724
- ]
2725
- }
2726
- )
2727
- }
2728
- )
2729
- ]
2730
- }
2731
- ),
2732
- onControlClick && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2733
- "div",
2734
- {
2735
- onClick: onControlClick,
2736
- style: {
2737
- position: "absolute",
2738
- top: 0,
2739
- left: 0,
2740
- right: 0,
2741
- bottom: 0,
2742
- zIndex: 1,
2743
- cursor: "pointer"
2798
+ ] })
2799
+ ]
2800
+ }
2801
+ ),
2802
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2803
+ "button",
2804
+ {
2805
+ onClick: () => {
2806
+ if (onFullscreenToggle) {
2807
+ onFullscreenToggle();
2808
+ } else if (playerRef.current) {
2809
+ playerRef.current.toggleFullscreen().catch((err) => {
2810
+ console.error("Fullscreen error:", err);
2811
+ });
2812
+ }
2813
+ },
2814
+ onMouseEnter: (e) => {
2815
+ const target = e.currentTarget;
2816
+ target.style.transform = "translateY(-3px) scale(1.08)";
2817
+ target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
2818
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
2819
+ },
2820
+ onMouseLeave: (e) => {
2821
+ const target = e.currentTarget;
2822
+ target.style.transform = "translateY(0) scale(1)";
2823
+ target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2824
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
2825
+ },
2826
+ style: {
2827
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
2828
+ color: "#ffffff",
2829
+ border: "none",
2830
+ borderRadius: "16px",
2831
+ padding: "10px",
2832
+ cursor: "pointer",
2833
+ display: "flex",
2834
+ alignItems: "center",
2835
+ justifyContent: "center",
2836
+ backdropFilter: "blur(20px)",
2837
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
2838
+ transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
2839
+ minWidth: "44px",
2840
+ minHeight: "44px"
2841
+ },
2842
+ title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
2843
+ children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2844
+ import_fa.FaCompress,
2845
+ {
2846
+ size: 16,
2847
+ style: {
2848
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
2849
+ color: "#ffffff"
2850
+ }
2851
+ }
2852
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2853
+ import_fa.FaExpand,
2854
+ {
2855
+ size: 16,
2856
+ style: {
2857
+ filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
2858
+ color: "#ffffff"
2859
+ }
2860
+ }
2861
+ )
2862
+ }
2863
+ )
2864
+ ]
2744
2865
  }
2745
- }
2746
- )
2747
- ]
2748
- }
2749
- );
2866
+ ),
2867
+ onControlClick && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2868
+ "div",
2869
+ {
2870
+ onClick: onControlClick,
2871
+ style: {
2872
+ position: "absolute",
2873
+ top: 0,
2874
+ left: 0,
2875
+ right: 0,
2876
+ bottom: 0,
2877
+ zIndex: 1,
2878
+ cursor: "pointer"
2879
+ }
2880
+ }
2881
+ )
2882
+ ]
2883
+ }
2884
+ )
2885
+ ] });
2750
2886
  },
2751
2887
  (prevProps, nextProps) => {
2752
2888
  for (const prop of CRITICAL_PROPS) {