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