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