stormcloud-video-player 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -18
- package/dist/stormcloud-vp.min.js +3 -3
- package/lib/index.cjs +524 -440
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +533 -440
- package/lib/index.js.map +1 -1
- package/package.json +3 -2
package/lib/index.cjs
CHANGED
|
@@ -844,6 +844,10 @@ var StormcloudVideoPlayer = class {
|
|
|
844
844
|
});
|
|
845
845
|
}
|
|
846
846
|
shouldUseNativeHls() {
|
|
847
|
+
const streamType = this.getStreamType();
|
|
848
|
+
if (streamType === "other") {
|
|
849
|
+
return true;
|
|
850
|
+
}
|
|
847
851
|
const canNative = this.video.canPlayType("application/vnd.apple.mpegURL");
|
|
848
852
|
return !!(this.config.allowNativeHls && canNative);
|
|
849
853
|
}
|
|
@@ -1316,7 +1320,11 @@ var StormcloudVideoPlayer = class {
|
|
|
1316
1320
|
return "other";
|
|
1317
1321
|
}
|
|
1318
1322
|
shouldShowNativeControls() {
|
|
1319
|
-
|
|
1323
|
+
const streamType = this.getStreamType();
|
|
1324
|
+
if (streamType === "other") {
|
|
1325
|
+
return !(this.config.showCustomControls ?? false);
|
|
1326
|
+
}
|
|
1327
|
+
return !!(this.config.allowNativeHls && !(this.config.showCustomControls ?? false));
|
|
1320
1328
|
}
|
|
1321
1329
|
async loadDefaultVastFromAdstorm(adstormApiUrl, params) {
|
|
1322
1330
|
const usp = new URLSearchParams(params || {});
|
|
@@ -1665,6 +1673,7 @@ var StormcloudVideoPlayer = class {
|
|
|
1665
1673
|
|
|
1666
1674
|
// src/ui/StormcloudVideoPlayer.tsx
|
|
1667
1675
|
var import_react = __toESM(require("react"), 1);
|
|
1676
|
+
var import_fa = require("react-icons/fa");
|
|
1668
1677
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
1669
1678
|
var CRITICAL_PROPS = [
|
|
1670
1679
|
"src",
|
|
@@ -1714,6 +1723,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
1714
1723
|
const [playbackRate, setPlaybackRate] = import_react.default.useState(1);
|
|
1715
1724
|
const [showVolumeSlider, setShowVolumeSlider] = import_react.default.useState(false);
|
|
1716
1725
|
const [showSpeedMenu, setShowSpeedMenu] = import_react.default.useState(false);
|
|
1726
|
+
const [isLoading, setIsLoading] = import_react.default.useState(true);
|
|
1727
|
+
const [isBuffering, setIsBuffering] = import_react.default.useState(false);
|
|
1728
|
+
const [showCenterPlay, setShowCenterPlay] = import_react.default.useState(false);
|
|
1717
1729
|
const formatTime = (seconds) => {
|
|
1718
1730
|
if (!isFinite(seconds)) return "0:00:00";
|
|
1719
1731
|
const hours = Math.floor(seconds / 3600);
|
|
@@ -1725,11 +1737,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
1725
1737
|
if (videoRef.current) {
|
|
1726
1738
|
if (videoRef.current.paused) {
|
|
1727
1739
|
videoRef.current.play();
|
|
1740
|
+
setShowCenterPlay(false);
|
|
1728
1741
|
} else {
|
|
1729
1742
|
videoRef.current.pause();
|
|
1743
|
+
setShowCenterPlay(true);
|
|
1730
1744
|
}
|
|
1731
1745
|
}
|
|
1732
1746
|
};
|
|
1747
|
+
const handleCenterPlayClick = () => {
|
|
1748
|
+
if (videoRef.current && videoRef.current.paused) {
|
|
1749
|
+
videoRef.current.play();
|
|
1750
|
+
setShowCenterPlay(false);
|
|
1751
|
+
}
|
|
1752
|
+
};
|
|
1733
1753
|
const handleTimelineSeek = (e) => {
|
|
1734
1754
|
if (videoRef.current && duration > 0 && isFinite(duration)) {
|
|
1735
1755
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
@@ -1754,7 +1774,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
1754
1774
|
}
|
|
1755
1775
|
setShowSpeedMenu(false);
|
|
1756
1776
|
};
|
|
1757
|
-
const
|
|
1777
|
+
const isHlsStream = src?.toLowerCase().includes(".m3u8") || src?.toLowerCase().includes("/hls/");
|
|
1778
|
+
const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
1758
1779
|
const criticalPropsKey = (0, import_react.useMemo)(() => {
|
|
1759
1780
|
return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
|
|
1760
1781
|
}, [src, allowNativeHls, licenseKey, lowLatencyMode, driftToleranceMs]);
|
|
@@ -1894,18 +1915,62 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
1894
1915
|
void video2.offsetHeight;
|
|
1895
1916
|
}
|
|
1896
1917
|
};
|
|
1918
|
+
const handleLoadStart = () => {
|
|
1919
|
+
setIsLoading(true);
|
|
1920
|
+
setIsBuffering(false);
|
|
1921
|
+
};
|
|
1922
|
+
const handleCanPlay = () => {
|
|
1923
|
+
setIsLoading(false);
|
|
1924
|
+
setIsBuffering(false);
|
|
1925
|
+
};
|
|
1926
|
+
const handleWaiting = () => {
|
|
1927
|
+
setIsBuffering(true);
|
|
1928
|
+
};
|
|
1929
|
+
const handlePlaying = () => {
|
|
1930
|
+
setIsLoading(false);
|
|
1931
|
+
setIsBuffering(false);
|
|
1932
|
+
setShowCenterPlay(false);
|
|
1933
|
+
};
|
|
1934
|
+
const handlePause = () => {
|
|
1935
|
+
setShowCenterPlay(true);
|
|
1936
|
+
};
|
|
1937
|
+
const handleEnded = () => {
|
|
1938
|
+
setShowCenterPlay(true);
|
|
1939
|
+
};
|
|
1897
1940
|
const video = videoRef.current;
|
|
1941
|
+
video.addEventListener("loadstart", handleLoadStart);
|
|
1898
1942
|
video.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1899
1943
|
video.addEventListener("loadeddata", handleLoadedMetadata);
|
|
1900
|
-
video.addEventListener("canplay",
|
|
1944
|
+
video.addEventListener("canplay", handleCanPlay);
|
|
1945
|
+
video.addEventListener("waiting", handleWaiting);
|
|
1946
|
+
video.addEventListener("playing", handlePlaying);
|
|
1947
|
+
video.addEventListener("pause", handlePause);
|
|
1948
|
+
video.addEventListener("ended", handleEnded);
|
|
1949
|
+
if (video.paused) {
|
|
1950
|
+
setShowCenterPlay(true);
|
|
1951
|
+
}
|
|
1901
1952
|
return () => {
|
|
1953
|
+
video.removeEventListener("loadstart", handleLoadStart);
|
|
1902
1954
|
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1903
1955
|
video.removeEventListener("loadeddata", handleLoadedMetadata);
|
|
1904
|
-
video.removeEventListener("canplay",
|
|
1956
|
+
video.removeEventListener("canplay", handleCanPlay);
|
|
1957
|
+
video.removeEventListener("waiting", handleWaiting);
|
|
1958
|
+
video.removeEventListener("playing", handlePlaying);
|
|
1959
|
+
video.removeEventListener("pause", handlePause);
|
|
1960
|
+
video.removeEventListener("ended", handleEnded);
|
|
1905
1961
|
};
|
|
1906
1962
|
}, []);
|
|
1907
1963
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
1908
1964
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
|
|
1965
|
+
@keyframes spin {
|
|
1966
|
+
from {
|
|
1967
|
+
transform: rotate(0deg);
|
|
1968
|
+
}
|
|
1969
|
+
to {
|
|
1970
|
+
transform: rotate(360deg);
|
|
1971
|
+
}
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1909
1974
|
.stormcloud-video-wrapper:fullscreen {
|
|
1910
1975
|
border-radius: 0 !important;
|
|
1911
1976
|
box-shadow: none !important;
|
|
@@ -2000,6 +2065,89 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2000
2065
|
children
|
|
2001
2066
|
}
|
|
2002
2067
|
),
|
|
2068
|
+
(isLoading || isBuffering) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2069
|
+
"div",
|
|
2070
|
+
{
|
|
2071
|
+
style: {
|
|
2072
|
+
position: "absolute",
|
|
2073
|
+
top: "50%",
|
|
2074
|
+
left: "50%",
|
|
2075
|
+
transform: "translate(-50%, -50%)",
|
|
2076
|
+
zIndex: 20,
|
|
2077
|
+
display: "flex",
|
|
2078
|
+
alignItems: "center",
|
|
2079
|
+
justifyContent: "center",
|
|
2080
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.6) 100%)",
|
|
2081
|
+
width: "80px",
|
|
2082
|
+
height: "80px",
|
|
2083
|
+
borderRadius: "50%",
|
|
2084
|
+
backdropFilter: "blur(20px)",
|
|
2085
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1)"
|
|
2086
|
+
},
|
|
2087
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2088
|
+
import_fa.FaSpinner,
|
|
2089
|
+
{
|
|
2090
|
+
size: 28,
|
|
2091
|
+
color: "white",
|
|
2092
|
+
style: {
|
|
2093
|
+
animation: "spin 1s linear infinite",
|
|
2094
|
+
filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
|
|
2095
|
+
}
|
|
2096
|
+
}
|
|
2097
|
+
)
|
|
2098
|
+
}
|
|
2099
|
+
),
|
|
2100
|
+
showCenterPlay && !isLoading && !isBuffering && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2101
|
+
"div",
|
|
2102
|
+
{
|
|
2103
|
+
onClick: handleCenterPlayClick,
|
|
2104
|
+
style: {
|
|
2105
|
+
position: "absolute",
|
|
2106
|
+
top: "50%",
|
|
2107
|
+
left: "50%",
|
|
2108
|
+
transform: "translate(-50%, -50%)",
|
|
2109
|
+
zIndex: 15,
|
|
2110
|
+
cursor: "pointer",
|
|
2111
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)",
|
|
2112
|
+
borderRadius: "50%",
|
|
2113
|
+
width: "100px",
|
|
2114
|
+
height: "100px",
|
|
2115
|
+
display: "flex",
|
|
2116
|
+
alignItems: "center",
|
|
2117
|
+
justifyContent: "center",
|
|
2118
|
+
backdropFilter: "blur(20px)",
|
|
2119
|
+
border: "3px solid rgba(255, 255, 255, 0.8)",
|
|
2120
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
|
|
2121
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2122
|
+
},
|
|
2123
|
+
onMouseEnter: (e) => {
|
|
2124
|
+
const target = e.currentTarget;
|
|
2125
|
+
target.style.transform = "translate(-50%, -50%) scale(1.1)";
|
|
2126
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
|
|
2127
|
+
target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
2128
|
+
target.style.borderColor = "rgba(255, 255, 255, 0.9)";
|
|
2129
|
+
},
|
|
2130
|
+
onMouseLeave: (e) => {
|
|
2131
|
+
const target = e.currentTarget;
|
|
2132
|
+
target.style.transform = "translate(-50%, -50%) scale(1)";
|
|
2133
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
|
|
2134
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
2135
|
+
target.style.borderColor = "rgba(255, 255, 255, 0.8)";
|
|
2136
|
+
},
|
|
2137
|
+
title: "Play",
|
|
2138
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2139
|
+
import_fa.FaPlay,
|
|
2140
|
+
{
|
|
2141
|
+
size: 36,
|
|
2142
|
+
color: "white",
|
|
2143
|
+
style: {
|
|
2144
|
+
marginLeft: "6px",
|
|
2145
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))"
|
|
2146
|
+
}
|
|
2147
|
+
}
|
|
2148
|
+
)
|
|
2149
|
+
}
|
|
2150
|
+
),
|
|
2003
2151
|
adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
2004
2152
|
"div",
|
|
2005
2153
|
{
|
|
@@ -2041,12 +2189,15 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2041
2189
|
{
|
|
2042
2190
|
style: {
|
|
2043
2191
|
width: "100%",
|
|
2044
|
-
height: "
|
|
2045
|
-
|
|
2046
|
-
borderRadius: "
|
|
2047
|
-
marginBottom: "
|
|
2192
|
+
height: "8px",
|
|
2193
|
+
background: "linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)",
|
|
2194
|
+
borderRadius: "8px",
|
|
2195
|
+
marginBottom: "16px",
|
|
2048
2196
|
cursor: "pointer",
|
|
2049
|
-
position: "relative"
|
|
2197
|
+
position: "relative",
|
|
2198
|
+
backdropFilter: "blur(5px)",
|
|
2199
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2200
|
+
boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
|
|
2050
2201
|
},
|
|
2051
2202
|
onClick: handleTimelineSeek,
|
|
2052
2203
|
children: [
|
|
@@ -2055,10 +2206,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2055
2206
|
{
|
|
2056
2207
|
style: {
|
|
2057
2208
|
height: "100%",
|
|
2058
|
-
|
|
2059
|
-
borderRadius: "
|
|
2209
|
+
background: "linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(34, 197, 94, 0.9) 100%)",
|
|
2210
|
+
borderRadius: "8px",
|
|
2060
2211
|
width: `${duration > 0 ? currentTime / duration * 100 : 0}%`,
|
|
2061
|
-
transition: "width 0.
|
|
2212
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2213
|
+
boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)"
|
|
2062
2214
|
}
|
|
2063
2215
|
}
|
|
2064
2216
|
),
|
|
@@ -2067,15 +2219,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2067
2219
|
{
|
|
2068
2220
|
style: {
|
|
2069
2221
|
position: "absolute",
|
|
2070
|
-
top: "-
|
|
2222
|
+
top: "-6px",
|
|
2071
2223
|
right: `${duration > 0 ? 100 - currentTime / duration * 100 : 100}%`,
|
|
2072
|
-
width: "
|
|
2073
|
-
height: "
|
|
2074
|
-
|
|
2224
|
+
width: "20px",
|
|
2225
|
+
height: "20px",
|
|
2226
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%)",
|
|
2075
2227
|
borderRadius: "50%",
|
|
2076
|
-
border: "
|
|
2077
|
-
boxShadow: "0
|
|
2078
|
-
transform: "translateX(50%)"
|
|
2228
|
+
border: "3px solid rgba(139, 92, 246, 0.8)",
|
|
2229
|
+
boxShadow: "0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
|
|
2230
|
+
transform: "translateX(50%)",
|
|
2231
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2079
2232
|
}
|
|
2080
2233
|
}
|
|
2081
2234
|
)
|
|
@@ -2106,41 +2259,45 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2106
2259
|
{
|
|
2107
2260
|
onClick: handlePlayPause,
|
|
2108
2261
|
style: {
|
|
2109
|
-
background: "
|
|
2110
|
-
|
|
2111
|
-
|
|
2262
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)",
|
|
2263
|
+
backdropFilter: "blur(10px)",
|
|
2264
|
+
border: "1px solid rgba(255, 255, 255, 0.2)",
|
|
2265
|
+
color: "#ffffff",
|
|
2112
2266
|
cursor: "pointer",
|
|
2113
|
-
padding: "
|
|
2114
|
-
borderRadius: "
|
|
2267
|
+
padding: "12px",
|
|
2268
|
+
borderRadius: "12px",
|
|
2115
2269
|
display: "flex",
|
|
2116
2270
|
alignItems: "center",
|
|
2117
2271
|
justifyContent: "center",
|
|
2118
|
-
transition: "
|
|
2272
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2273
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
|
|
2274
|
+
minWidth: "48px",
|
|
2275
|
+
minHeight: "48px"
|
|
2119
2276
|
},
|
|
2120
2277
|
onMouseEnter: (e) => {
|
|
2121
|
-
|
|
2278
|
+
const target = e.target;
|
|
2279
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%)";
|
|
2280
|
+
target.style.transform = "translateY(-2px) scale(1.05)";
|
|
2281
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
2122
2282
|
},
|
|
2123
2283
|
onMouseLeave: (e) => {
|
|
2124
|
-
|
|
2284
|
+
const target = e.target;
|
|
2285
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
2286
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2287
|
+
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2125
2288
|
},
|
|
2126
2289
|
title: isPlaying ? "Pause" : "Play",
|
|
2127
2290
|
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2128
|
-
|
|
2291
|
+
import_fa.FaPause,
|
|
2129
2292
|
{
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
viewBox: "0 0 24 24",
|
|
2133
|
-
fill: "currentColor",
|
|
2134
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
|
|
2293
|
+
size: 20,
|
|
2294
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2135
2295
|
}
|
|
2136
2296
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2137
|
-
|
|
2297
|
+
import_fa.FaPlay,
|
|
2138
2298
|
{
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
viewBox: "0 0 24 24",
|
|
2142
|
-
fill: "currentColor",
|
|
2143
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 5v14l11-7z" })
|
|
2299
|
+
size: 20,
|
|
2300
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2144
2301
|
}
|
|
2145
2302
|
)
|
|
2146
2303
|
}
|
|
@@ -2151,7 +2308,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2151
2308
|
style: {
|
|
2152
2309
|
position: "relative",
|
|
2153
2310
|
display: "flex",
|
|
2154
|
-
alignItems: "center"
|
|
2311
|
+
alignItems: "center",
|
|
2312
|
+
padding: "8px",
|
|
2313
|
+
margin: "-8px"
|
|
2155
2314
|
},
|
|
2156
2315
|
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2157
2316
|
onMouseLeave: () => setShowVolumeSlider(false),
|
|
@@ -2167,126 +2326,126 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2167
2326
|
}
|
|
2168
2327
|
},
|
|
2169
2328
|
style: {
|
|
2170
|
-
background: "
|
|
2171
|
-
|
|
2172
|
-
|
|
2329
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
|
|
2330
|
+
backdropFilter: "blur(8px)",
|
|
2331
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
2332
|
+
color: isMuted ? "#ff6b6b" : "#ffffff",
|
|
2173
2333
|
cursor: "pointer",
|
|
2174
|
-
padding: "
|
|
2175
|
-
borderRadius: "
|
|
2334
|
+
padding: "10px",
|
|
2335
|
+
borderRadius: "10px",
|
|
2176
2336
|
display: "flex",
|
|
2177
2337
|
alignItems: "center",
|
|
2178
2338
|
justifyContent: "center",
|
|
2179
|
-
transition: "
|
|
2339
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2340
|
+
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2341
|
+
minWidth: "40px",
|
|
2342
|
+
minHeight: "40px"
|
|
2180
2343
|
},
|
|
2181
2344
|
onMouseEnter: (e) => {
|
|
2182
|
-
|
|
2345
|
+
const target = e.target;
|
|
2346
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
|
|
2347
|
+
target.style.transform = "translateY(-1px) scale(1.03)";
|
|
2348
|
+
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2183
2349
|
},
|
|
2184
2350
|
onMouseLeave: (e) => {
|
|
2185
|
-
|
|
2351
|
+
const target = e.target;
|
|
2352
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
|
|
2353
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2354
|
+
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
2186
2355
|
},
|
|
2187
2356
|
title: isMuted ? "Unmute" : "Mute",
|
|
2188
|
-
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2189
|
-
|
|
2357
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2358
|
+
import_fa.FaVolumeMute,
|
|
2190
2359
|
{
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
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
|
-
]
|
|
2360
|
+
size: 16,
|
|
2361
|
+
style: {
|
|
2362
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2363
|
+
}
|
|
2205
2364
|
}
|
|
2206
|
-
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2207
|
-
|
|
2365
|
+
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2366
|
+
import_fa.FaVolumeDown,
|
|
2208
2367
|
{
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
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
|
-
]
|
|
2368
|
+
size: 16,
|
|
2369
|
+
style: {
|
|
2370
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2371
|
+
}
|
|
2223
2372
|
}
|
|
2224
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2225
|
-
|
|
2373
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2374
|
+
import_fa.FaVolumeUp,
|
|
2226
2375
|
{
|
|
2227
|
-
|
|
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"
|
|
2268
|
-
},
|
|
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)),
|
|
2376
|
+
size: 16,
|
|
2278
2377
|
style: {
|
|
2279
|
-
|
|
2280
|
-
WebkitAppearance: "slider-vertical",
|
|
2281
|
-
width: "4px",
|
|
2282
|
-
height: "80px",
|
|
2283
|
-
background: "rgba(255, 255, 255, 0.3)",
|
|
2284
|
-
outline: "none"
|
|
2378
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2285
2379
|
}
|
|
2286
2380
|
}
|
|
2287
2381
|
)
|
|
2288
2382
|
}
|
|
2289
|
-
)
|
|
2383
|
+
),
|
|
2384
|
+
showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
2385
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2386
|
+
"div",
|
|
2387
|
+
{
|
|
2388
|
+
style: {
|
|
2389
|
+
position: "absolute",
|
|
2390
|
+
bottom: "100%",
|
|
2391
|
+
left: "50%",
|
|
2392
|
+
transform: "translateX(-50%)",
|
|
2393
|
+
width: "60px",
|
|
2394
|
+
height: "20px",
|
|
2395
|
+
marginBottom: "-16px",
|
|
2396
|
+
zIndex: 9
|
|
2397
|
+
},
|
|
2398
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2399
|
+
onMouseLeave: () => setShowVolumeSlider(false)
|
|
2400
|
+
}
|
|
2401
|
+
),
|
|
2402
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2403
|
+
"div",
|
|
2404
|
+
{
|
|
2405
|
+
style: {
|
|
2406
|
+
position: "absolute",
|
|
2407
|
+
bottom: "100%",
|
|
2408
|
+
left: "50%",
|
|
2409
|
+
transform: "translateX(-50%)",
|
|
2410
|
+
marginBottom: "4px",
|
|
2411
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 20, 20, 0.9) 100%)",
|
|
2412
|
+
backdropFilter: "blur(15px)",
|
|
2413
|
+
padding: "16px 12px",
|
|
2414
|
+
borderRadius: "12px",
|
|
2415
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2416
|
+
display: "flex",
|
|
2417
|
+
flexDirection: "column",
|
|
2418
|
+
alignItems: "center",
|
|
2419
|
+
height: "130px",
|
|
2420
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2421
|
+
zIndex: 10
|
|
2422
|
+
},
|
|
2423
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2424
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2425
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2426
|
+
"input",
|
|
2427
|
+
{
|
|
2428
|
+
type: "range",
|
|
2429
|
+
min: "0",
|
|
2430
|
+
max: "1",
|
|
2431
|
+
step: "0.01",
|
|
2432
|
+
value: isMuted ? 0 : volume,
|
|
2433
|
+
onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
|
|
2434
|
+
style: {
|
|
2435
|
+
writingMode: "bt-lr",
|
|
2436
|
+
WebkitAppearance: "slider-vertical",
|
|
2437
|
+
width: "6px",
|
|
2438
|
+
height: "90px",
|
|
2439
|
+
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%)",
|
|
2440
|
+
borderRadius: "3px",
|
|
2441
|
+
outline: "none",
|
|
2442
|
+
cursor: "pointer"
|
|
2443
|
+
}
|
|
2444
|
+
}
|
|
2445
|
+
)
|
|
2446
|
+
}
|
|
2447
|
+
)
|
|
2448
|
+
] })
|
|
2290
2449
|
]
|
|
2291
2450
|
}
|
|
2292
2451
|
),
|
|
@@ -2323,21 +2482,31 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2323
2482
|
{
|
|
2324
2483
|
onClick: () => setShowSpeedMenu(!showSpeedMenu),
|
|
2325
2484
|
style: {
|
|
2326
|
-
background: "
|
|
2327
|
-
|
|
2328
|
-
|
|
2485
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)",
|
|
2486
|
+
backdropFilter: "blur(8px)",
|
|
2487
|
+
border: "1px solid rgba(255, 255, 255, 0.12)",
|
|
2488
|
+
color: "#ffffff",
|
|
2329
2489
|
cursor: "pointer",
|
|
2330
|
-
padding: "8px
|
|
2331
|
-
borderRadius: "
|
|
2332
|
-
fontSize: "
|
|
2490
|
+
padding: "8px 14px",
|
|
2491
|
+
borderRadius: "8px",
|
|
2492
|
+
fontSize: "13px",
|
|
2333
2493
|
fontFamily: "monospace",
|
|
2334
|
-
|
|
2494
|
+
fontWeight: "600",
|
|
2495
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2496
|
+
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)",
|
|
2497
|
+
minWidth: "50px"
|
|
2335
2498
|
},
|
|
2336
2499
|
onMouseEnter: (e) => {
|
|
2337
|
-
|
|
2500
|
+
const target = e.target;
|
|
2501
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%)";
|
|
2502
|
+
target.style.transform = "translateY(-1px) scale(1.02)";
|
|
2503
|
+
target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
|
|
2338
2504
|
},
|
|
2339
2505
|
onMouseLeave: (e) => {
|
|
2340
|
-
|
|
2506
|
+
const target = e.target;
|
|
2507
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
|
|
2508
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2509
|
+
target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
|
|
2341
2510
|
},
|
|
2342
2511
|
title: "Playback Speed",
|
|
2343
2512
|
children: [
|
|
@@ -2353,11 +2522,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2353
2522
|
position: "absolute",
|
|
2354
2523
|
bottom: "100%",
|
|
2355
2524
|
right: 0,
|
|
2356
|
-
marginBottom: "
|
|
2357
|
-
background: "rgba(0, 0, 0, 0.9)",
|
|
2358
|
-
|
|
2525
|
+
marginBottom: "12px",
|
|
2526
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
2527
|
+
backdropFilter: "blur(20px)",
|
|
2528
|
+
borderRadius: "12px",
|
|
2529
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2359
2530
|
overflow: "hidden",
|
|
2360
|
-
minWidth: "
|
|
2531
|
+
minWidth: "90px",
|
|
2532
|
+
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
2361
2533
|
},
|
|
2362
2534
|
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
2363
2535
|
(speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -2367,24 +2539,26 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2367
2539
|
style: {
|
|
2368
2540
|
display: "block",
|
|
2369
2541
|
width: "100%",
|
|
2370
|
-
padding: "
|
|
2371
|
-
background: playbackRate === speed ? "rgba(
|
|
2542
|
+
padding: "10px 16px",
|
|
2543
|
+
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
2372
2544
|
border: "none",
|
|
2373
2545
|
color: "white",
|
|
2374
2546
|
cursor: "pointer",
|
|
2375
|
-
fontSize: "
|
|
2547
|
+
fontSize: "13px",
|
|
2376
2548
|
fontFamily: "monospace",
|
|
2377
|
-
|
|
2378
|
-
|
|
2549
|
+
fontWeight: "600",
|
|
2550
|
+
textAlign: "center",
|
|
2551
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2552
|
+
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
2379
2553
|
},
|
|
2380
2554
|
onMouseEnter: (e) => {
|
|
2381
2555
|
if (playbackRate !== speed) {
|
|
2382
|
-
e.target.style.
|
|
2556
|
+
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
2383
2557
|
}
|
|
2384
2558
|
},
|
|
2385
2559
|
onMouseLeave: (e) => {
|
|
2386
2560
|
if (playbackRate !== speed) {
|
|
2387
|
-
e.target.style.
|
|
2561
|
+
e.target.style.background = "transparent";
|
|
2388
2562
|
}
|
|
2389
2563
|
},
|
|
2390
2564
|
children: [
|
|
@@ -2411,51 +2585,45 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2411
2585
|
}
|
|
2412
2586
|
},
|
|
2413
2587
|
style: {
|
|
2414
|
-
background: "
|
|
2415
|
-
|
|
2416
|
-
|
|
2588
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
|
|
2589
|
+
backdropFilter: "blur(8px)",
|
|
2590
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
2591
|
+
color: "#ffffff",
|
|
2417
2592
|
cursor: "pointer",
|
|
2418
|
-
padding: "
|
|
2419
|
-
borderRadius: "
|
|
2593
|
+
padding: "10px",
|
|
2594
|
+
borderRadius: "10px",
|
|
2420
2595
|
display: "flex",
|
|
2421
2596
|
alignItems: "center",
|
|
2422
2597
|
justifyContent: "center",
|
|
2423
|
-
transition: "
|
|
2598
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2599
|
+
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2600
|
+
minWidth: "40px",
|
|
2601
|
+
minHeight: "40px"
|
|
2424
2602
|
},
|
|
2425
2603
|
onMouseEnter: (e) => {
|
|
2426
|
-
|
|
2604
|
+
const target = e.target;
|
|
2605
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
|
|
2606
|
+
target.style.transform = "translateY(-1px) scale(1.03)";
|
|
2607
|
+
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2427
2608
|
},
|
|
2428
2609
|
onMouseLeave: (e) => {
|
|
2429
|
-
|
|
2610
|
+
const target = e.target;
|
|
2611
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
|
|
2612
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2613
|
+
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
2430
2614
|
},
|
|
2431
2615
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
2432
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2433
|
-
|
|
2616
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2617
|
+
import_fa.FaCompress,
|
|
2434
2618
|
{
|
|
2435
|
-
|
|
2436
|
-
|
|
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
|
-
]
|
|
2619
|
+
size: 16,
|
|
2620
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2445
2621
|
}
|
|
2446
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2447
|
-
|
|
2622
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2623
|
+
import_fa.FaExpand,
|
|
2448
2624
|
{
|
|
2449
|
-
|
|
2450
|
-
|
|
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
|
-
]
|
|
2625
|
+
size: 16,
|
|
2626
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2459
2627
|
}
|
|
2460
2628
|
)
|
|
2461
2629
|
}
|
|
@@ -2480,165 +2648,155 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2480
2648
|
zIndex: 10
|
|
2481
2649
|
},
|
|
2482
2650
|
children: [
|
|
2483
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
2484
|
-
"
|
|
2651
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
2652
|
+
"div",
|
|
2485
2653
|
{
|
|
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
2654
|
style: {
|
|
2506
|
-
|
|
2507
|
-
color: "white",
|
|
2508
|
-
border: "1px solid rgba(255, 255, 255, 0.2)",
|
|
2509
|
-
borderRadius: "8px",
|
|
2510
|
-
padding: "10px",
|
|
2511
|
-
cursor: "pointer",
|
|
2655
|
+
position: "relative",
|
|
2512
2656
|
display: "flex",
|
|
2513
2657
|
alignItems: "center",
|
|
2514
|
-
|
|
2515
|
-
|
|
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)"
|
|
2658
|
+
padding: "8px",
|
|
2659
|
+
margin: "-8px"
|
|
2518
2660
|
},
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
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
|
-
]
|
|
2661
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2662
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2663
|
+
children: [
|
|
2664
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2665
|
+
"button",
|
|
2666
|
+
{
|
|
2667
|
+
onClick: () => {
|
|
2668
|
+
if (onVolumeToggle) {
|
|
2669
|
+
onVolumeToggle();
|
|
2670
|
+
} else if (playerRef.current) {
|
|
2671
|
+
playerRef.current.toggleMute();
|
|
2612
2672
|
}
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2673
|
+
},
|
|
2674
|
+
onMouseEnter: (e) => {
|
|
2675
|
+
const target = e.currentTarget;
|
|
2676
|
+
target.style.transform = "translateY(-3px) scale(1.08)";
|
|
2677
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
2678
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
2679
|
+
},
|
|
2680
|
+
onMouseLeave: (e) => {
|
|
2681
|
+
const target = e.currentTarget;
|
|
2682
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2683
|
+
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2684
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
2685
|
+
},
|
|
2686
|
+
style: {
|
|
2687
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
|
|
2688
|
+
color: isMuted ? "#ff6b6b" : "#ffffff",
|
|
2689
|
+
border: "none",
|
|
2690
|
+
borderRadius: "16px",
|
|
2691
|
+
padding: "10px",
|
|
2692
|
+
cursor: "pointer",
|
|
2693
|
+
display: "flex",
|
|
2694
|
+
alignItems: "center",
|
|
2695
|
+
justifyContent: "center",
|
|
2696
|
+
backdropFilter: "blur(20px)",
|
|
2697
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
|
|
2698
|
+
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2699
|
+
minWidth: "44px",
|
|
2700
|
+
minHeight: "44px"
|
|
2701
|
+
},
|
|
2702
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
2703
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2704
|
+
import_fa.FaVolumeMute,
|
|
2616
2705
|
{
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2706
|
+
size: 16,
|
|
2707
|
+
style: {
|
|
2708
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2709
|
+
color: "#ffffff"
|
|
2710
|
+
}
|
|
2621
2711
|
}
|
|
2622
|
-
),
|
|
2623
|
-
|
|
2624
|
-
"path",
|
|
2712
|
+
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2713
|
+
import_fa.FaVolumeDown,
|
|
2625
2714
|
{
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2715
|
+
size: 16,
|
|
2716
|
+
style: {
|
|
2717
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2718
|
+
color: "#ffffff"
|
|
2719
|
+
}
|
|
2629
2720
|
}
|
|
2630
|
-
),
|
|
2631
|
-
|
|
2632
|
-
"path",
|
|
2721
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2722
|
+
import_fa.FaVolumeUp,
|
|
2633
2723
|
{
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2724
|
+
size: 16,
|
|
2725
|
+
style: {
|
|
2726
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2727
|
+
color: "#ffffff"
|
|
2728
|
+
}
|
|
2637
2729
|
}
|
|
2638
2730
|
)
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2731
|
+
}
|
|
2732
|
+
),
|
|
2733
|
+
showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
2734
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2735
|
+
"div",
|
|
2736
|
+
{
|
|
2737
|
+
style: {
|
|
2738
|
+
position: "absolute",
|
|
2739
|
+
bottom: "100%",
|
|
2740
|
+
left: "50%",
|
|
2741
|
+
transform: "translateX(-50%)",
|
|
2742
|
+
width: "60px",
|
|
2743
|
+
height: "20px",
|
|
2744
|
+
marginBottom: "-16px",
|
|
2745
|
+
zIndex: 9
|
|
2746
|
+
},
|
|
2747
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2748
|
+
onMouseLeave: () => setShowVolumeSlider(false)
|
|
2749
|
+
}
|
|
2750
|
+
),
|
|
2751
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2752
|
+
"div",
|
|
2753
|
+
{
|
|
2754
|
+
style: {
|
|
2755
|
+
position: "absolute",
|
|
2756
|
+
bottom: "100%",
|
|
2757
|
+
left: "50%",
|
|
2758
|
+
transform: "translateX(-50%)",
|
|
2759
|
+
marginBottom: "4px",
|
|
2760
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%)",
|
|
2761
|
+
backdropFilter: "blur(20px)",
|
|
2762
|
+
padding: "16px 12px",
|
|
2763
|
+
borderRadius: "12px",
|
|
2764
|
+
border: "2px solid rgba(255, 255, 255, 0.6)",
|
|
2765
|
+
display: "flex",
|
|
2766
|
+
flexDirection: "column",
|
|
2767
|
+
alignItems: "center",
|
|
2768
|
+
height: "130px",
|
|
2769
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
|
|
2770
|
+
zIndex: 10
|
|
2771
|
+
},
|
|
2772
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2773
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2774
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2775
|
+
"input",
|
|
2776
|
+
{
|
|
2777
|
+
type: "range",
|
|
2778
|
+
min: "0",
|
|
2779
|
+
max: "1",
|
|
2780
|
+
step: "0.01",
|
|
2781
|
+
value: isMuted ? 0 : volume,
|
|
2782
|
+
onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
|
|
2783
|
+
style: {
|
|
2784
|
+
writingMode: "bt-lr",
|
|
2785
|
+
WebkitAppearance: "slider-vertical",
|
|
2786
|
+
width: "6px",
|
|
2787
|
+
height: "90px",
|
|
2788
|
+
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%)",
|
|
2789
|
+
borderRadius: "3px",
|
|
2790
|
+
outline: "none",
|
|
2791
|
+
cursor: "pointer",
|
|
2792
|
+
border: "1px solid rgba(255, 255, 255, 0.3)"
|
|
2793
|
+
}
|
|
2794
|
+
}
|
|
2795
|
+
)
|
|
2796
|
+
}
|
|
2797
|
+
)
|
|
2798
|
+
] })
|
|
2799
|
+
]
|
|
2642
2800
|
}
|
|
2643
2801
|
),
|
|
2644
2802
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -2655,124 +2813,50 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2655
2813
|
},
|
|
2656
2814
|
onMouseEnter: (e) => {
|
|
2657
2815
|
const target = e.currentTarget;
|
|
2658
|
-
target.style.transform = "translateY(-
|
|
2659
|
-
target.style.boxShadow = "0
|
|
2660
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
2816
|
+
target.style.transform = "translateY(-3px) scale(1.08)";
|
|
2817
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
2818
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
2661
2819
|
},
|
|
2662
2820
|
onMouseLeave: (e) => {
|
|
2663
2821
|
const target = e.currentTarget;
|
|
2664
2822
|
target.style.transform = "translateY(0) scale(1)";
|
|
2665
|
-
target.style.boxShadow = "0
|
|
2666
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
2823
|
+
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2824
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
2667
2825
|
},
|
|
2668
2826
|
style: {
|
|
2669
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
2670
|
-
color: "
|
|
2671
|
-
border: "
|
|
2672
|
-
borderRadius: "
|
|
2827
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
|
|
2828
|
+
color: "#ffffff",
|
|
2829
|
+
border: "none",
|
|
2830
|
+
borderRadius: "16px",
|
|
2673
2831
|
padding: "10px",
|
|
2674
2832
|
cursor: "pointer",
|
|
2675
2833
|
display: "flex",
|
|
2676
2834
|
alignItems: "center",
|
|
2677
2835
|
justifyContent: "center",
|
|
2678
|
-
backdropFilter: "blur(
|
|
2679
|
-
boxShadow: "0
|
|
2680
|
-
transition: "all 0.
|
|
2836
|
+
backdropFilter: "blur(20px)",
|
|
2837
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
|
|
2838
|
+
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2839
|
+
minWidth: "44px",
|
|
2840
|
+
minHeight: "44px"
|
|
2681
2841
|
},
|
|
2682
2842
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
2683
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2684
|
-
|
|
2843
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2844
|
+
import_fa.FaCompress,
|
|
2685
2845
|
{
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
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
|
-
]
|
|
2846
|
+
size: 16,
|
|
2847
|
+
style: {
|
|
2848
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2849
|
+
color: "#ffffff"
|
|
2850
|
+
}
|
|
2729
2851
|
}
|
|
2730
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2731
|
-
|
|
2852
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2853
|
+
import_fa.FaExpand,
|
|
2732
2854
|
{
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
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
|
-
]
|
|
2855
|
+
size: 16,
|
|
2856
|
+
style: {
|
|
2857
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2858
|
+
color: "#ffffff"
|
|
2859
|
+
}
|
|
2776
2860
|
}
|
|
2777
2861
|
)
|
|
2778
2862
|
}
|