stormcloud-video-player 0.1.10 → 0.1.11

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 (6) hide show
  1. package/dist/stormcloud-vp.min.js +3 -3
  2. package/lib/index.cjs +846 -794
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.js +846 -794
  5. package/lib/index.js.map +1 -1
  6. package/package.json +1 -1
package/lib/index.js CHANGED
@@ -1674,10 +1674,11 @@ var StormcloudVideoPlayerComponent = React.memo(
1674
1674
  const [showVolumeSlider, setShowVolumeSlider] = React.useState(false);
1675
1675
  const [showSpeedMenu, setShowSpeedMenu] = React.useState(false);
1676
1676
  const formatTime = (seconds) => {
1677
- if (!isFinite(seconds)) return "0:00";
1678
- const minutes = Math.floor(seconds / 60);
1677
+ if (!isFinite(seconds)) return "0:00:00";
1678
+ const hours = Math.floor(seconds / 3600);
1679
+ const minutes = Math.floor(seconds % 3600 / 60);
1679
1680
  const remainingSeconds = Math.floor(seconds % 60);
1680
- return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
1681
+ return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
1681
1682
  };
1682
1683
  const handlePlayPause = () => {
1683
1684
  if (videoRef.current) {
@@ -1862,383 +1863,217 @@ var StormcloudVideoPlayerComponent = React.memo(
1862
1863
  video.removeEventListener("canplay", handleLoadedMetadata);
1863
1864
  };
1864
1865
  }, []);
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",
1949
- {
1950
- 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"
1866
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
1867
+ /* @__PURE__ */ jsx("style", { children: `
1868
+ .stormcloud-video-wrapper:fullscreen {
1869
+ border-radius: 0 !important;
1870
+ box-shadow: none !important;
1871
+ width: 100vw !important;
1872
+ height: 100vh !important;
1873
+ max-width: 100vw !important;
1874
+ max-height: 100vh !important;
1875
+ position: fixed !important;
1876
+ top: 0 !important;
1877
+ left: 0 !important;
1878
+ z-index: 999999 !important;
1879
+ background: #000 !important;
1880
+ display: flex !important;
1881
+ align-items: center !important;
1882
+ justify-content: center !important;
1883
+ }
1884
+
1885
+ .stormcloud-video-wrapper:has(*:fullscreen) {
1886
+ border-radius: 0 !important;
1887
+ box-shadow: none !important;
1888
+ width: 100vw !important;
1889
+ height: 100vh !important;
1890
+ max-width: 100vw !important;
1891
+ max-height: 100vh !important;
1892
+ position: fixed !important;
1893
+ top: 0 !important;
1894
+ left: 0 !important;
1895
+ z-index: 999999 !important;
1896
+ background: #000 !important;
1897
+ display: flex !important;
1898
+ align-items: center !important;
1899
+ justify-content: center !important;
1900
+ }
1901
+
1902
+ *:fullscreen {
1903
+ width: 100vw !important;
1904
+ height: 100vh !important;
1905
+ max-width: 100vw !important;
1906
+ max-height: 100vh !important;
1907
+ position: fixed !important;
1908
+ top: 0 !important;
1909
+ left: 0 !important;
1910
+ z-index: 999999 !important;
1911
+ background: #000 !important;
1912
+ }
1913
+ ` }),
1914
+ /* @__PURE__ */ jsxs(
1915
+ "div",
1916
+ {
1917
+ className: `stormcloud-video-wrapper ${wrapperClassName || ""}`,
1918
+ style: {
1919
+ display: "flex",
1920
+ alignItems: "center",
1921
+ justifyContent: "center",
1922
+ position: isFullscreen ? "fixed" : "relative",
1923
+ top: isFullscreen ? 0 : void 0,
1924
+ left: isFullscreen ? 0 : void 0,
1925
+ overflow: "hidden",
1926
+ width: isFullscreen ? "100vw" : "100%",
1927
+ height: isFullscreen ? "100vh" : "auto",
1928
+ minHeight: isFullscreen ? "100vh" : "auto",
1929
+ maxWidth: isFullscreen ? "100vw" : "100%",
1930
+ maxHeight: isFullscreen ? "100vh" : "none",
1931
+ zIndex: isFullscreen ? 999999 : void 0,
1932
+ backgroundColor: isFullscreen ? "#000" : void 0,
1933
+ borderRadius: isFullscreen ? 0 : void 0,
1934
+ boxShadow: isFullscreen ? "none" : void 0,
1935
+ ...wrapperStyle
1936
+ },
1937
+ children: [
1938
+ /* @__PURE__ */ jsx(
1939
+ "video",
1940
+ {
1941
+ ref: videoRef,
1942
+ className,
1943
+ style: {
1944
+ display: "block",
1945
+ width: "100%",
1946
+ height: isFullscreen ? "100%" : "auto",
1947
+ maxWidth: "100%",
1948
+ maxHeight: isFullscreen ? "100%" : "none",
1949
+ objectFit: isFullscreen ? "cover" : "contain",
1950
+ backgroundColor: "#000",
1951
+ aspectRatio: isFullscreen ? "unset" : void 0,
1952
+ ...style
1953
+ },
1954
+ controls: shouldShowNativeControls && controls && !showCustomControls,
1955
+ playsInline,
1956
+ preload,
1957
+ poster,
1958
+ ...restVideoAttrs,
1959
+ children
1960
+ }
1961
+ ),
1962
+ adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ jsxs(
1963
+ "div",
1964
+ {
1965
+ style: {
1966
+ position: "absolute",
1967
+ top: "10px",
1968
+ right: "10px",
1969
+ backgroundColor: "rgba(0, 0, 0, 0.7)",
1970
+ color: "white",
1971
+ padding: "4px 8px",
1972
+ borderRadius: "4px",
1973
+ fontSize: "12px",
1974
+ fontFamily: "Arial, sans-serif",
1975
+ zIndex: 10
1976
+ },
1977
+ children: [
1978
+ "Ad ",
1979
+ adStatus.currentIndex,
1980
+ "/",
1981
+ adStatus.totalAds
1982
+ ]
1983
+ }
1984
+ ),
1985
+ shouldShowEnhancedControls ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
1986
+ "div",
1987
+ {
1988
+ style: {
1989
+ position: "absolute",
1990
+ bottom: 0,
1991
+ left: 0,
1992
+ right: 0,
1993
+ background: "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%)",
1994
+ padding: "20px 16px 16px",
1995
+ zIndex: 10
1996
+ },
1997
+ children: [
1998
+ /* @__PURE__ */ jsxs(
1999
+ "div",
2000
+ {
2001
+ style: {
2002
+ width: "100%",
2003
+ height: "6px",
2004
+ backgroundColor: "rgba(255, 255, 255, 0.3)",
2005
+ borderRadius: "3px",
2006
+ marginBottom: "12px",
2007
+ cursor: "pointer",
2008
+ position: "relative"
2009
+ },
2010
+ onClick: handleTimelineSeek,
2011
+ children: [
2012
+ /* @__PURE__ */ jsx(
2013
+ "div",
2014
+ {
2015
+ style: {
2016
+ height: "100%",
2017
+ backgroundColor: "#ff4444",
2018
+ borderRadius: "3px",
2019
+ width: `${duration > 0 ? currentTime / duration * 100 : 0}%`,
2020
+ transition: "width 0.1s ease"
2021
+ }
1970
2022
  }
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%)"
2023
+ ),
2024
+ /* @__PURE__ */ jsx(
2025
+ "div",
2026
+ {
2027
+ style: {
2028
+ position: "absolute",
2029
+ top: "-4px",
2030
+ right: `${duration > 0 ? 100 - currentTime / duration * 100 : 100}%`,
2031
+ width: "14px",
2032
+ height: "14px",
2033
+ backgroundColor: "#ff4444",
2034
+ borderRadius: "50%",
2035
+ border: "2px solid white",
2036
+ boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
2037
+ transform: "translateX(50%)"
2038
+ }
1987
2039
  }
1988
- }
1989
- )
1990
- ]
1991
- }
1992
- ),
1993
- /* @__PURE__ */ jsxs(
1994
- "div",
1995
- {
1996
- 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(
2040
+ )
2041
+ ]
2042
+ }
2043
+ ),
2044
+ /* @__PURE__ */ jsxs(
2045
+ "div",
2046
+ {
2047
+ style: {
2048
+ display: "flex",
2049
+ alignItems: "center",
2050
+ justifyContent: "space-between",
2051
+ color: "white"
2052
+ },
2053
+ children: [
2054
+ /* @__PURE__ */ jsxs(
2055
+ "div",
2056
+ {
2057
+ style: {
2058
+ display: "flex",
2059
+ alignItems: "center",
2060
+ gap: "12px"
2061
+ },
2062
+ children: [
2063
+ /* @__PURE__ */ jsx(
2230
2064
  "button",
2231
2065
  {
2232
- onClick: () => setShowSpeedMenu(!showSpeedMenu),
2066
+ onClick: handlePlayPause,
2233
2067
  style: {
2234
2068
  background: "transparent",
2235
2069
  border: "none",
2236
2070
  color: "white",
2237
2071
  cursor: "pointer",
2238
- padding: "8px 12px",
2072
+ padding: "8px",
2239
2073
  borderRadius: "4px",
2240
- fontSize: "14px",
2241
- fontFamily: "monospace",
2074
+ display: "flex",
2075
+ alignItems: "center",
2076
+ justifyContent: "center",
2242
2077
  transition: "background-color 0.2s"
2243
2078
  },
2244
2079
  onMouseEnter: (e) => {
@@ -2247,465 +2082,682 @@ var StormcloudVideoPlayerComponent = React.memo(
2247
2082
  onMouseLeave: (e) => {
2248
2083
  e.target.style.backgroundColor = "transparent";
2249
2084
  },
2250
- title: "Playback Speed",
2251
- children: [
2252
- playbackRate,
2253
- "x"
2254
- ]
2085
+ title: isPlaying ? "Pause" : "Play",
2086
+ children: isPlaying ? /* @__PURE__ */ jsx(
2087
+ "svg",
2088
+ {
2089
+ width: "24",
2090
+ height: "24",
2091
+ viewBox: "0 0 24 24",
2092
+ fill: "currentColor",
2093
+ children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
2094
+ }
2095
+ ) : /* @__PURE__ */ jsx(
2096
+ "svg",
2097
+ {
2098
+ width: "24",
2099
+ height: "24",
2100
+ viewBox: "0 0 24 24",
2101
+ fill: "currentColor",
2102
+ children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
2103
+ }
2104
+ )
2255
2105
  }
2256
2106
  ),
2257
- showSpeedMenu && /* @__PURE__ */ jsx(
2107
+ /* @__PURE__ */ jsxs(
2258
2108
  "div",
2259
2109
  {
2260
2110
  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"
2111
+ position: "relative",
2112
+ display: "flex",
2113
+ alignItems: "center"
2269
2114
  },
2270
- children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
2271
- (speed) => /* @__PURE__ */ jsxs(
2115
+ onMouseEnter: () => setShowVolumeSlider(true),
2116
+ onMouseLeave: () => setShowVolumeSlider(false),
2117
+ children: [
2118
+ /* @__PURE__ */ jsx(
2272
2119
  "button",
2273
2120
  {
2274
- onClick: () => handlePlaybackRateChange(speed),
2121
+ onClick: () => {
2122
+ if (onVolumeToggle) {
2123
+ onVolumeToggle();
2124
+ } else if (playerRef.current) {
2125
+ playerRef.current.toggleMute();
2126
+ }
2127
+ },
2275
2128
  style: {
2276
- display: "block",
2277
- width: "100%",
2278
- padding: "8px 12px",
2279
- background: playbackRate === speed ? "rgba(255, 68, 68, 0.8)" : "transparent",
2129
+ background: "transparent",
2280
2130
  border: "none",
2281
2131
  color: "white",
2282
2132
  cursor: "pointer",
2283
- fontSize: "14px",
2284
- fontFamily: "monospace",
2285
- textAlign: "left",
2133
+ padding: "8px",
2134
+ borderRadius: "4px",
2135
+ display: "flex",
2136
+ alignItems: "center",
2137
+ justifyContent: "center",
2286
2138
  transition: "background-color 0.2s"
2287
2139
  },
2288
2140
  onMouseEnter: (e) => {
2289
- if (playbackRate !== speed) {
2290
- e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2291
- }
2141
+ e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2292
2142
  },
2293
2143
  onMouseLeave: (e) => {
2294
- if (playbackRate !== speed) {
2295
- e.target.style.backgroundColor = "transparent";
2144
+ e.target.style.backgroundColor = "transparent";
2145
+ },
2146
+ title: isMuted ? "Unmute" : "Mute",
2147
+ children: isMuted || volume === 0 ? /* @__PURE__ */ jsxs(
2148
+ "svg",
2149
+ {
2150
+ width: "20",
2151
+ height: "20",
2152
+ viewBox: "0 0 24 24",
2153
+ fill: "currentColor",
2154
+ children: [
2155
+ /* @__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" }),
2156
+ /* @__PURE__ */ jsx(
2157
+ "path",
2158
+ {
2159
+ 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",
2160
+ fill: "#ff4444"
2161
+ }
2162
+ )
2163
+ ]
2164
+ }
2165
+ ) : volume < 0.5 ? /* @__PURE__ */ jsxs(
2166
+ "svg",
2167
+ {
2168
+ width: "20",
2169
+ height: "20",
2170
+ viewBox: "0 0 24 24",
2171
+ fill: "currentColor",
2172
+ children: [
2173
+ /* @__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" }),
2174
+ /* @__PURE__ */ jsx(
2175
+ "path",
2176
+ {
2177
+ d: "M15.5 12c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
2178
+ opacity: "0.8"
2179
+ }
2180
+ )
2181
+ ]
2296
2182
  }
2183
+ ) : /* @__PURE__ */ jsxs(
2184
+ "svg",
2185
+ {
2186
+ width: "20",
2187
+ height: "20",
2188
+ viewBox: "0 0 24 24",
2189
+ fill: "currentColor",
2190
+ children: [
2191
+ /* @__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" }),
2192
+ /* @__PURE__ */ jsx(
2193
+ "path",
2194
+ {
2195
+ d: "M15.5 12c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
2196
+ opacity: "0.8"
2197
+ }
2198
+ ),
2199
+ /* @__PURE__ */ jsx(
2200
+ "path",
2201
+ {
2202
+ 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",
2203
+ opacity: "0.6"
2204
+ }
2205
+ )
2206
+ ]
2207
+ }
2208
+ )
2209
+ }
2210
+ ),
2211
+ showVolumeSlider && /* @__PURE__ */ jsx(
2212
+ "div",
2213
+ {
2214
+ style: {
2215
+ position: "absolute",
2216
+ bottom: "100%",
2217
+ left: "50%",
2218
+ transform: "translateX(-50%)",
2219
+ marginBottom: "8px",
2220
+ background: "rgba(0, 0, 0, 0.9)",
2221
+ padding: "8px",
2222
+ borderRadius: "4px",
2223
+ display: "flex",
2224
+ flexDirection: "column",
2225
+ alignItems: "center",
2226
+ height: "100px"
2297
2227
  },
2298
- children: [
2299
- speed,
2300
- "x"
2301
- ]
2302
- },
2303
- speed
2228
+ children: /* @__PURE__ */ jsx(
2229
+ "input",
2230
+ {
2231
+ type: "range",
2232
+ min: "0",
2233
+ max: "1",
2234
+ step: "0.01",
2235
+ value: isMuted ? 0 : volume,
2236
+ onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
2237
+ style: {
2238
+ writingMode: "bt-lr",
2239
+ WebkitAppearance: "slider-vertical",
2240
+ width: "4px",
2241
+ height: "80px",
2242
+ background: "rgba(255, 255, 255, 0.3)",
2243
+ outline: "none"
2244
+ }
2245
+ }
2246
+ )
2247
+ }
2304
2248
  )
2305
- )
2249
+ ]
2250
+ }
2251
+ ),
2252
+ /* @__PURE__ */ jsxs(
2253
+ "div",
2254
+ {
2255
+ style: {
2256
+ fontSize: "14px",
2257
+ fontFamily: "monospace",
2258
+ color: "rgba(255, 255, 255, 0.9)"
2259
+ },
2260
+ children: [
2261
+ formatTime(currentTime),
2262
+ " / ",
2263
+ formatTime(duration)
2264
+ ]
2306
2265
  }
2307
2266
  )
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",
2267
+ ]
2268
+ }
2269
+ ),
2270
+ /* @__PURE__ */ jsxs(
2271
+ "div",
2272
+ {
2273
+ style: {
2274
+ display: "flex",
2275
+ alignItems: "center",
2276
+ gap: "12px"
2277
+ },
2278
+ children: [
2279
+ /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
2280
+ /* @__PURE__ */ jsxs(
2281
+ "button",
2342
2282
  {
2343
- width: "20",
2344
- height: "20",
2345
- viewBox: "0 0 24 24",
2346
- fill: "currentColor",
2283
+ onClick: () => setShowSpeedMenu(!showSpeedMenu),
2284
+ style: {
2285
+ background: "transparent",
2286
+ border: "none",
2287
+ color: "white",
2288
+ cursor: "pointer",
2289
+ padding: "8px 12px",
2290
+ borderRadius: "4px",
2291
+ fontSize: "14px",
2292
+ fontFamily: "monospace",
2293
+ transition: "background-color 0.2s"
2294
+ },
2295
+ onMouseEnter: (e) => {
2296
+ e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2297
+ },
2298
+ onMouseLeave: (e) => {
2299
+ e.target.style.backgroundColor = "transparent";
2300
+ },
2301
+ title: "Playback Speed",
2347
2302
  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" })
2303
+ playbackRate,
2304
+ "x"
2352
2305
  ]
2353
2306
  }
2354
- ) : /* @__PURE__ */ jsxs(
2355
- "svg",
2307
+ ),
2308
+ showSpeedMenu && /* @__PURE__ */ jsx(
2309
+ "div",
2356
2310
  {
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
- ]
2311
+ style: {
2312
+ position: "absolute",
2313
+ bottom: "100%",
2314
+ right: 0,
2315
+ marginBottom: "8px",
2316
+ background: "rgba(0, 0, 0, 0.9)",
2317
+ borderRadius: "4px",
2318
+ overflow: "hidden",
2319
+ minWidth: "80px"
2320
+ },
2321
+ children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
2322
+ (speed) => /* @__PURE__ */ jsxs(
2323
+ "button",
2324
+ {
2325
+ onClick: () => handlePlaybackRateChange(speed),
2326
+ style: {
2327
+ display: "block",
2328
+ width: "100%",
2329
+ padding: "8px 12px",
2330
+ background: playbackRate === speed ? "rgba(255, 68, 68, 0.8)" : "transparent",
2331
+ border: "none",
2332
+ color: "white",
2333
+ cursor: "pointer",
2334
+ fontSize: "14px",
2335
+ fontFamily: "monospace",
2336
+ textAlign: "left",
2337
+ transition: "background-color 0.2s"
2338
+ },
2339
+ onMouseEnter: (e) => {
2340
+ if (playbackRate !== speed) {
2341
+ e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2342
+ }
2343
+ },
2344
+ onMouseLeave: (e) => {
2345
+ if (playbackRate !== speed) {
2346
+ e.target.style.backgroundColor = "transparent";
2347
+ }
2348
+ },
2349
+ children: [
2350
+ speed,
2351
+ "x"
2352
+ ]
2353
+ },
2354
+ speed
2355
+ )
2356
+ )
2367
2357
  }
2368
2358
  )
2359
+ ] }),
2360
+ /* @__PURE__ */ jsx(
2361
+ "button",
2362
+ {
2363
+ onClick: () => {
2364
+ if (onFullscreenToggle) {
2365
+ onFullscreenToggle();
2366
+ } else if (playerRef.current) {
2367
+ playerRef.current.toggleFullscreen().catch((err) => {
2368
+ console.error("Fullscreen error:", err);
2369
+ });
2370
+ }
2371
+ },
2372
+ style: {
2373
+ background: "transparent",
2374
+ border: "none",
2375
+ color: "white",
2376
+ cursor: "pointer",
2377
+ padding: "8px",
2378
+ borderRadius: "4px",
2379
+ display: "flex",
2380
+ alignItems: "center",
2381
+ justifyContent: "center",
2382
+ transition: "background-color 0.2s"
2383
+ },
2384
+ onMouseEnter: (e) => {
2385
+ e.target.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
2386
+ },
2387
+ onMouseLeave: (e) => {
2388
+ e.target.style.backgroundColor = "transparent";
2389
+ },
2390
+ title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
2391
+ children: isFullscreen ? /* @__PURE__ */ jsxs(
2392
+ "svg",
2393
+ {
2394
+ width: "20",
2395
+ height: "20",
2396
+ viewBox: "0 0 24 24",
2397
+ fill: "currentColor",
2398
+ children: [
2399
+ /* @__PURE__ */ jsx("path", { d: "M8 8h3v3l-1-1-2 2-1.5-1.5L8.5 8.5 8 8z" }),
2400
+ /* @__PURE__ */ jsx("path", { d: "M16 8h-3v3l1-1 2 2 1.5-1.5L15.5 8.5 16 8z" }),
2401
+ /* @__PURE__ */ jsx("path", { d: "M8 16h3v-3l-1 1-2-2-1.5 1.5L8.5 15.5 8 16z" }),
2402
+ /* @__PURE__ */ jsx("path", { d: "M16 16h-3v-3l1 1 2-2 1.5 1.5L15.5 15.5 16 16z" })
2403
+ ]
2404
+ }
2405
+ ) : /* @__PURE__ */ jsxs(
2406
+ "svg",
2407
+ {
2408
+ width: "20",
2409
+ height: "20",
2410
+ viewBox: "0 0 24 24",
2411
+ fill: "currentColor",
2412
+ children: [
2413
+ /* @__PURE__ */ jsx("path", { d: "M3 3h6v2H5v4H3V3z" }),
2414
+ /* @__PURE__ */ jsx("path", { d: "M21 3h-6v2h4v4h2V3z" }),
2415
+ /* @__PURE__ */ jsx("path", { d: "M3 21v-6h2v4h4v2H3z" }),
2416
+ /* @__PURE__ */ jsx("path", { d: "M21 21h-6v-2h4v-4h2v6z" })
2417
+ ]
2418
+ }
2419
+ )
2420
+ }
2421
+ )
2422
+ ]
2423
+ }
2424
+ )
2425
+ ]
2426
+ }
2427
+ )
2428
+ ]
2429
+ }
2430
+ ) }) : showCustomControls && /* @__PURE__ */ jsxs(
2431
+ "div",
2432
+ {
2433
+ style: {
2434
+ position: "absolute",
2435
+ bottom: "10px",
2436
+ right: "10px",
2437
+ display: "flex",
2438
+ gap: "8px",
2439
+ zIndex: 10
2440
+ },
2441
+ children: [
2442
+ /* @__PURE__ */ jsx(
2443
+ "button",
2444
+ {
2445
+ onClick: () => {
2446
+ if (onVolumeToggle) {
2447
+ onVolumeToggle();
2448
+ } else if (playerRef.current) {
2449
+ playerRef.current.toggleMute();
2450
+ }
2451
+ },
2452
+ onMouseEnter: (e) => {
2453
+ const target = e.currentTarget;
2454
+ target.style.transform = "translateY(-2px) scale(1.05)";
2455
+ target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2456
+ target.style.background = "linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(60, 60, 60, 0.95) 100%)";
2457
+ },
2458
+ onMouseLeave: (e) => {
2459
+ const target = e.currentTarget;
2460
+ target.style.transform = "translateY(0) scale(1)";
2461
+ target.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
2462
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)";
2463
+ },
2464
+ style: {
2465
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)",
2466
+ color: "white",
2467
+ border: "1px solid rgba(255, 255, 255, 0.2)",
2468
+ borderRadius: "8px",
2469
+ padding: "10px",
2470
+ cursor: "pointer",
2471
+ display: "flex",
2472
+ alignItems: "center",
2473
+ justifyContent: "center",
2474
+ backdropFilter: "blur(10px)",
2475
+ boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
2476
+ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
2477
+ },
2478
+ title: isMuted ? "Unmute" : "Mute",
2479
+ children: isMuted ? /* @__PURE__ */ jsxs(
2480
+ "svg",
2481
+ {
2482
+ width: "18",
2483
+ height: "18",
2484
+ viewBox: "0 0 24 24",
2485
+ fill: "none",
2486
+ xmlns: "http://www.w3.org/2000/svg",
2487
+ children: [
2488
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
2489
+ "linearGradient",
2490
+ {
2491
+ id: "volumeGradient",
2492
+ x1: "0%",
2493
+ y1: "0%",
2494
+ x2: "100%",
2495
+ y2: "100%",
2496
+ children: [
2497
+ /* @__PURE__ */ jsx(
2498
+ "stop",
2499
+ {
2500
+ offset: "0%",
2501
+ stopColor: "#ffffff",
2502
+ stopOpacity: "1"
2503
+ }
2504
+ ),
2505
+ /* @__PURE__ */ jsx(
2506
+ "stop",
2507
+ {
2508
+ offset: "100%",
2509
+ stopColor: "#e0e0e0",
2510
+ stopOpacity: "0.9"
2511
+ }
2512
+ )
2513
+ ]
2514
+ }
2515
+ ) }),
2516
+ /* @__PURE__ */ jsx(
2517
+ "path",
2518
+ {
2519
+ 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",
2520
+ fill: "url(#volumeGradient)",
2521
+ stroke: "rgba(255,255,255,0.3)",
2522
+ strokeWidth: "0.5"
2523
+ }
2524
+ ),
2525
+ /* @__PURE__ */ jsx(
2526
+ "path",
2527
+ {
2528
+ 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",
2529
+ fill: "#ff4444",
2530
+ stroke: "rgba(255,255,255,0.5)",
2531
+ strokeWidth: "0.5"
2532
+ }
2533
+ )
2534
+ ]
2535
+ }
2536
+ ) : /* @__PURE__ */ jsxs(
2537
+ "svg",
2538
+ {
2539
+ width: "18",
2540
+ height: "18",
2541
+ viewBox: "0 0 24 24",
2542
+ fill: "none",
2543
+ xmlns: "http://www.w3.org/2000/svg",
2544
+ children: [
2545
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
2546
+ "linearGradient",
2547
+ {
2548
+ id: "volumeGradient",
2549
+ x1: "0%",
2550
+ y1: "0%",
2551
+ x2: "100%",
2552
+ y2: "100%",
2553
+ children: [
2554
+ /* @__PURE__ */ jsx(
2555
+ "stop",
2556
+ {
2557
+ offset: "0%",
2558
+ stopColor: "#ffffff",
2559
+ stopOpacity: "1"
2560
+ }
2561
+ ),
2562
+ /* @__PURE__ */ jsx(
2563
+ "stop",
2564
+ {
2565
+ offset: "100%",
2566
+ stopColor: "#e0e0e0",
2567
+ stopOpacity: "0.9"
2568
+ }
2569
+ )
2570
+ ]
2571
+ }
2572
+ ) }),
2573
+ /* @__PURE__ */ jsx(
2574
+ "path",
2575
+ {
2576
+ 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",
2577
+ fill: "url(#volumeGradient)",
2578
+ stroke: "rgba(255,255,255,0.3)",
2579
+ strokeWidth: "0.5"
2580
+ }
2581
+ ),
2582
+ /* @__PURE__ */ jsx(
2583
+ "path",
2584
+ {
2585
+ d: "M15.5 12c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z",
2586
+ fill: "url(#volumeGradient)",
2587
+ opacity: "0.8"
2588
+ }
2589
+ ),
2590
+ /* @__PURE__ */ jsx(
2591
+ "path",
2592
+ {
2593
+ 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",
2594
+ fill: "url(#volumeGradient)",
2595
+ opacity: "0.6"
2369
2596
  }
2370
2597
  )
2371
2598
  ]
2372
2599
  }
2373
2600
  )
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
- ) }),
2465
- /* @__PURE__ */ jsx(
2466
- "path",
2467
- {
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"
2472
- }
2473
- ),
2474
- /* @__PURE__ */ jsx(
2475
- "path",
2476
- {
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"
2517
- }
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"
2681
- }
2682
- )
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"
2601
+ }
2602
+ ),
2603
+ /* @__PURE__ */ jsx(
2604
+ "button",
2605
+ {
2606
+ onClick: () => {
2607
+ if (onFullscreenToggle) {
2608
+ onFullscreenToggle();
2609
+ } else if (playerRef.current) {
2610
+ playerRef.current.toggleFullscreen().catch((err) => {
2611
+ console.error("Fullscreen error:", err);
2612
+ });
2613
+ }
2614
+ },
2615
+ onMouseEnter: (e) => {
2616
+ const target = e.currentTarget;
2617
+ target.style.transform = "translateY(-2px) scale(1.05)";
2618
+ target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
2619
+ target.style.background = "linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(60, 60, 60, 0.95) 100%)";
2620
+ },
2621
+ onMouseLeave: (e) => {
2622
+ const target = e.currentTarget;
2623
+ target.style.transform = "translateY(0) scale(1)";
2624
+ target.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
2625
+ target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)";
2626
+ },
2627
+ style: {
2628
+ background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.9) 100%)",
2629
+ color: "white",
2630
+ border: "1px solid rgba(255, 255, 255, 0.2)",
2631
+ borderRadius: "8px",
2632
+ padding: "10px",
2633
+ cursor: "pointer",
2634
+ display: "flex",
2635
+ alignItems: "center",
2636
+ justifyContent: "center",
2637
+ backdropFilter: "blur(10px)",
2638
+ boxShadow: "0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
2639
+ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
2640
+ },
2641
+ title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
2642
+ children: isFullscreen ? /* @__PURE__ */ jsxs(
2643
+ "svg",
2644
+ {
2645
+ width: "20",
2646
+ height: "20",
2647
+ viewBox: "0 0 24 24",
2648
+ fill: "none",
2649
+ xmlns: "http://www.w3.org/2000/svg",
2650
+ children: [
2651
+ /* @__PURE__ */ jsx(
2652
+ "path",
2653
+ {
2654
+ d: "M8 8h3v3l-1-1-2 2-1.5-1.5L8.5 8.5 8 8z",
2655
+ fill: "white",
2656
+ stroke: "rgba(255,255,255,0.8)",
2657
+ strokeWidth: "0.5"
2658
+ }
2659
+ ),
2660
+ /* @__PURE__ */ jsx(
2661
+ "path",
2662
+ {
2663
+ d: "M16 8h-3v3l1-1 2 2 1.5-1.5L15.5 8.5 16 8z",
2664
+ fill: "white",
2665
+ stroke: "rgba(255,255,255,0.8)",
2666
+ strokeWidth: "0.5"
2667
+ }
2668
+ ),
2669
+ /* @__PURE__ */ jsx(
2670
+ "path",
2671
+ {
2672
+ d: "M8 16h3v-3l-1 1-2-2-1.5 1.5L8.5 15.5 8 16z",
2673
+ fill: "white",
2674
+ stroke: "rgba(255,255,255,0.8)",
2675
+ strokeWidth: "0.5"
2676
+ }
2677
+ ),
2678
+ /* @__PURE__ */ jsx(
2679
+ "path",
2680
+ {
2681
+ d: "M16 16h-3v-3l1 1 2-2 1.5 1.5L15.5 15.5 16 16z",
2682
+ fill: "white",
2683
+ stroke: "rgba(255,255,255,0.8)",
2684
+ strokeWidth: "0.5"
2685
+ }
2686
+ )
2687
+ ]
2688
+ }
2689
+ ) : /* @__PURE__ */ jsxs(
2690
+ "svg",
2691
+ {
2692
+ width: "20",
2693
+ height: "20",
2694
+ viewBox: "0 0 24 24",
2695
+ fill: "none",
2696
+ xmlns: "http://www.w3.org/2000/svg",
2697
+ children: [
2698
+ /* @__PURE__ */ jsx(
2699
+ "path",
2700
+ {
2701
+ d: "M3 3h6v2H5v4H3V3z",
2702
+ fill: "white",
2703
+ stroke: "rgba(255,255,255,0.8)",
2704
+ strokeWidth: "0.5"
2705
+ }
2706
+ ),
2707
+ /* @__PURE__ */ jsx(
2708
+ "path",
2709
+ {
2710
+ d: "M21 3h-6v2h4v4h2V3z",
2711
+ fill: "white",
2712
+ stroke: "rgba(255,255,255,0.8)",
2713
+ strokeWidth: "0.5"
2714
+ }
2715
+ ),
2716
+ /* @__PURE__ */ jsx(
2717
+ "path",
2718
+ {
2719
+ d: "M3 21v-6h2v4h4v2H3z",
2720
+ fill: "white",
2721
+ stroke: "rgba(255,255,255,0.8)",
2722
+ strokeWidth: "0.5"
2723
+ }
2724
+ ),
2725
+ /* @__PURE__ */ jsx(
2726
+ "path",
2727
+ {
2728
+ d: "M21 21h-6v-2h4v-4h2v6z",
2729
+ fill: "white",
2730
+ stroke: "rgba(255,255,255,0.8)",
2731
+ strokeWidth: "0.5"
2732
+ }
2733
+ )
2734
+ ]
2735
+ }
2736
+ )
2737
+ }
2738
+ )
2739
+ ]
2703
2740
  }
2704
- }
2705
- )
2706
- ]
2707
- }
2708
- );
2741
+ ),
2742
+ onControlClick && /* @__PURE__ */ jsx(
2743
+ "div",
2744
+ {
2745
+ onClick: onControlClick,
2746
+ style: {
2747
+ position: "absolute",
2748
+ top: 0,
2749
+ left: 0,
2750
+ right: 0,
2751
+ bottom: 0,
2752
+ zIndex: 1,
2753
+ cursor: "pointer"
2754
+ }
2755
+ }
2756
+ )
2757
+ ]
2758
+ }
2759
+ )
2760
+ ] });
2709
2761
  },
2710
2762
  (prevProps, nextProps) => {
2711
2763
  for (const prop of CRITICAL_PROPS) {