stormcloud-video-player 0.1.11 → 0.1.13
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 +2 -11
- package/lib/index.cjs +522 -457
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +531 -457
- package/lib/index.js.map +1 -1
- package/package.json +4 -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]);
|
|
@@ -1833,7 +1854,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
1833
1854
|
});
|
|
1834
1855
|
}
|
|
1835
1856
|
};
|
|
1836
|
-
const interval = setInterval(checkAdStatus,
|
|
1857
|
+
const interval = setInterval(checkAdStatus, 100);
|
|
1837
1858
|
return () => clearInterval(interval);
|
|
1838
1859
|
}, []);
|
|
1839
1860
|
(0, import_react.useEffect)(() => {
|
|
@@ -1894,18 +1915,66 @@ 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
|
+
if (playerRef.current && !playerRef.current.isShowingAds()) {
|
|
1936
|
+
setShowCenterPlay(true);
|
|
1937
|
+
} else {
|
|
1938
|
+
setShowCenterPlay(false);
|
|
1939
|
+
}
|
|
1940
|
+
};
|
|
1941
|
+
const handleEnded = () => {
|
|
1942
|
+
setShowCenterPlay(true);
|
|
1943
|
+
};
|
|
1897
1944
|
const video = videoRef.current;
|
|
1945
|
+
video.addEventListener("loadstart", handleLoadStart);
|
|
1898
1946
|
video.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1899
1947
|
video.addEventListener("loadeddata", handleLoadedMetadata);
|
|
1900
|
-
video.addEventListener("canplay",
|
|
1948
|
+
video.addEventListener("canplay", handleCanPlay);
|
|
1949
|
+
video.addEventListener("waiting", handleWaiting);
|
|
1950
|
+
video.addEventListener("playing", handlePlaying);
|
|
1951
|
+
video.addEventListener("pause", handlePause);
|
|
1952
|
+
video.addEventListener("ended", handleEnded);
|
|
1953
|
+
if (video.paused) {
|
|
1954
|
+
setShowCenterPlay(true);
|
|
1955
|
+
}
|
|
1901
1956
|
return () => {
|
|
1957
|
+
video.removeEventListener("loadstart", handleLoadStart);
|
|
1902
1958
|
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1903
1959
|
video.removeEventListener("loadeddata", handleLoadedMetadata);
|
|
1904
|
-
video.removeEventListener("canplay",
|
|
1960
|
+
video.removeEventListener("canplay", handleCanPlay);
|
|
1961
|
+
video.removeEventListener("waiting", handleWaiting);
|
|
1962
|
+
video.removeEventListener("playing", handlePlaying);
|
|
1963
|
+
video.removeEventListener("pause", handlePause);
|
|
1964
|
+
video.removeEventListener("ended", handleEnded);
|
|
1905
1965
|
};
|
|
1906
1966
|
}, []);
|
|
1907
1967
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
1908
1968
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
|
|
1969
|
+
@keyframes spin {
|
|
1970
|
+
from {
|
|
1971
|
+
transform: rotate(0deg);
|
|
1972
|
+
}
|
|
1973
|
+
to {
|
|
1974
|
+
transform: rotate(360deg);
|
|
1975
|
+
}
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1909
1978
|
.stormcloud-video-wrapper:fullscreen {
|
|
1910
1979
|
border-radius: 0 !important;
|
|
1911
1980
|
box-shadow: none !important;
|
|
@@ -2000,27 +2069,87 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2000
2069
|
children
|
|
2001
2070
|
}
|
|
2002
2071
|
),
|
|
2003
|
-
|
|
2072
|
+
(isLoading || isBuffering) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2004
2073
|
"div",
|
|
2005
2074
|
{
|
|
2006
2075
|
style: {
|
|
2007
2076
|
position: "absolute",
|
|
2008
|
-
top: "
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2077
|
+
top: "50%",
|
|
2078
|
+
left: "50%",
|
|
2079
|
+
transform: "translate(-50%, -50%)",
|
|
2080
|
+
zIndex: 20,
|
|
2081
|
+
display: "flex",
|
|
2082
|
+
alignItems: "center",
|
|
2083
|
+
justifyContent: "center",
|
|
2084
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.6) 100%)",
|
|
2085
|
+
width: "80px",
|
|
2086
|
+
height: "80px",
|
|
2087
|
+
borderRadius: "50%",
|
|
2088
|
+
backdropFilter: "blur(20px)",
|
|
2089
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1)"
|
|
2017
2090
|
},
|
|
2018
|
-
children:
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2091
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2092
|
+
import_fa.FaSpinner,
|
|
2093
|
+
{
|
|
2094
|
+
size: 28,
|
|
2095
|
+
color: "white",
|
|
2096
|
+
style: {
|
|
2097
|
+
animation: "spin 1s linear infinite",
|
|
2098
|
+
filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
|
|
2099
|
+
}
|
|
2100
|
+
}
|
|
2101
|
+
)
|
|
2102
|
+
}
|
|
2103
|
+
),
|
|
2104
|
+
showCenterPlay && !isLoading && !isBuffering && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2105
|
+
"div",
|
|
2106
|
+
{
|
|
2107
|
+
onClick: handleCenterPlayClick,
|
|
2108
|
+
style: {
|
|
2109
|
+
position: "absolute",
|
|
2110
|
+
top: "50%",
|
|
2111
|
+
left: "50%",
|
|
2112
|
+
transform: "translate(-50%, -50%)",
|
|
2113
|
+
zIndex: 15,
|
|
2114
|
+
cursor: "pointer",
|
|
2115
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)",
|
|
2116
|
+
borderRadius: "50%",
|
|
2117
|
+
width: "100px",
|
|
2118
|
+
height: "100px",
|
|
2119
|
+
display: "flex",
|
|
2120
|
+
alignItems: "center",
|
|
2121
|
+
justifyContent: "center",
|
|
2122
|
+
backdropFilter: "blur(20px)",
|
|
2123
|
+
border: "3px solid rgba(255, 255, 255, 0.8)",
|
|
2124
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
|
|
2125
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2126
|
+
},
|
|
2127
|
+
onMouseEnter: (e) => {
|
|
2128
|
+
const target = e.currentTarget;
|
|
2129
|
+
target.style.transform = "translate(-50%, -50%) scale(1.1)";
|
|
2130
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
|
|
2131
|
+
target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
2132
|
+
target.style.borderColor = "rgba(255, 255, 255, 0.9)";
|
|
2133
|
+
},
|
|
2134
|
+
onMouseLeave: (e) => {
|
|
2135
|
+
const target = e.currentTarget;
|
|
2136
|
+
target.style.transform = "translate(-50%, -50%) scale(1)";
|
|
2137
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
|
|
2138
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
2139
|
+
target.style.borderColor = "rgba(255, 255, 255, 0.8)";
|
|
2140
|
+
},
|
|
2141
|
+
title: "Play",
|
|
2142
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2143
|
+
import_fa.FaPlay,
|
|
2144
|
+
{
|
|
2145
|
+
size: 36,
|
|
2146
|
+
color: "white",
|
|
2147
|
+
style: {
|
|
2148
|
+
marginLeft: "6px",
|
|
2149
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))"
|
|
2150
|
+
}
|
|
2151
|
+
}
|
|
2152
|
+
)
|
|
2024
2153
|
}
|
|
2025
2154
|
),
|
|
2026
2155
|
shouldShowEnhancedControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -2041,12 +2170,15 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2041
2170
|
{
|
|
2042
2171
|
style: {
|
|
2043
2172
|
width: "100%",
|
|
2044
|
-
height: "
|
|
2045
|
-
|
|
2046
|
-
borderRadius: "
|
|
2047
|
-
marginBottom: "
|
|
2173
|
+
height: "8px",
|
|
2174
|
+
background: "linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)",
|
|
2175
|
+
borderRadius: "8px",
|
|
2176
|
+
marginBottom: "16px",
|
|
2048
2177
|
cursor: "pointer",
|
|
2049
|
-
position: "relative"
|
|
2178
|
+
position: "relative",
|
|
2179
|
+
backdropFilter: "blur(5px)",
|
|
2180
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2181
|
+
boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
|
|
2050
2182
|
},
|
|
2051
2183
|
onClick: handleTimelineSeek,
|
|
2052
2184
|
children: [
|
|
@@ -2055,10 +2187,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2055
2187
|
{
|
|
2056
2188
|
style: {
|
|
2057
2189
|
height: "100%",
|
|
2058
|
-
|
|
2059
|
-
borderRadius: "
|
|
2190
|
+
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%)",
|
|
2191
|
+
borderRadius: "8px",
|
|
2060
2192
|
width: `${duration > 0 ? currentTime / duration * 100 : 0}%`,
|
|
2061
|
-
transition: "width 0.
|
|
2193
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2194
|
+
boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)"
|
|
2062
2195
|
}
|
|
2063
2196
|
}
|
|
2064
2197
|
),
|
|
@@ -2067,15 +2200,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2067
2200
|
{
|
|
2068
2201
|
style: {
|
|
2069
2202
|
position: "absolute",
|
|
2070
|
-
top: "-
|
|
2203
|
+
top: "-6px",
|
|
2071
2204
|
right: `${duration > 0 ? 100 - currentTime / duration * 100 : 100}%`,
|
|
2072
|
-
width: "
|
|
2073
|
-
height: "
|
|
2074
|
-
|
|
2205
|
+
width: "20px",
|
|
2206
|
+
height: "20px",
|
|
2207
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%)",
|
|
2075
2208
|
borderRadius: "50%",
|
|
2076
|
-
border: "
|
|
2077
|
-
boxShadow: "0
|
|
2078
|
-
transform: "translateX(50%)"
|
|
2209
|
+
border: "3px solid rgba(139, 92, 246, 0.8)",
|
|
2210
|
+
boxShadow: "0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
|
|
2211
|
+
transform: "translateX(50%)",
|
|
2212
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2079
2213
|
}
|
|
2080
2214
|
}
|
|
2081
2215
|
)
|
|
@@ -2106,41 +2240,45 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2106
2240
|
{
|
|
2107
2241
|
onClick: handlePlayPause,
|
|
2108
2242
|
style: {
|
|
2109
|
-
background: "
|
|
2110
|
-
|
|
2111
|
-
|
|
2243
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)",
|
|
2244
|
+
backdropFilter: "blur(10px)",
|
|
2245
|
+
border: "1px solid rgba(255, 255, 255, 0.2)",
|
|
2246
|
+
color: "#ffffff",
|
|
2112
2247
|
cursor: "pointer",
|
|
2113
|
-
padding: "
|
|
2114
|
-
borderRadius: "
|
|
2248
|
+
padding: "12px",
|
|
2249
|
+
borderRadius: "12px",
|
|
2115
2250
|
display: "flex",
|
|
2116
2251
|
alignItems: "center",
|
|
2117
2252
|
justifyContent: "center",
|
|
2118
|
-
transition: "
|
|
2253
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2254
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
|
|
2255
|
+
minWidth: "48px",
|
|
2256
|
+
minHeight: "48px"
|
|
2119
2257
|
},
|
|
2120
2258
|
onMouseEnter: (e) => {
|
|
2121
|
-
|
|
2259
|
+
const target = e.target;
|
|
2260
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%)";
|
|
2261
|
+
target.style.transform = "translateY(-2px) scale(1.05)";
|
|
2262
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
2122
2263
|
},
|
|
2123
2264
|
onMouseLeave: (e) => {
|
|
2124
|
-
|
|
2265
|
+
const target = e.target;
|
|
2266
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
2267
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2268
|
+
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2125
2269
|
},
|
|
2126
2270
|
title: isPlaying ? "Pause" : "Play",
|
|
2127
2271
|
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2128
|
-
|
|
2272
|
+
import_fa.FaPause,
|
|
2129
2273
|
{
|
|
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" })
|
|
2274
|
+
size: 20,
|
|
2275
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2135
2276
|
}
|
|
2136
2277
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2137
|
-
|
|
2278
|
+
import_fa.FaPlay,
|
|
2138
2279
|
{
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
viewBox: "0 0 24 24",
|
|
2142
|
-
fill: "currentColor",
|
|
2143
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 5v14l11-7z" })
|
|
2280
|
+
size: 20,
|
|
2281
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2144
2282
|
}
|
|
2145
2283
|
)
|
|
2146
2284
|
}
|
|
@@ -2151,7 +2289,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2151
2289
|
style: {
|
|
2152
2290
|
position: "relative",
|
|
2153
2291
|
display: "flex",
|
|
2154
|
-
alignItems: "center"
|
|
2292
|
+
alignItems: "center",
|
|
2293
|
+
padding: "8px",
|
|
2294
|
+
margin: "-8px"
|
|
2155
2295
|
},
|
|
2156
2296
|
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2157
2297
|
onMouseLeave: () => setShowVolumeSlider(false),
|
|
@@ -2167,126 +2307,126 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2167
2307
|
}
|
|
2168
2308
|
},
|
|
2169
2309
|
style: {
|
|
2170
|
-
background: "
|
|
2171
|
-
|
|
2172
|
-
|
|
2310
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
|
|
2311
|
+
backdropFilter: "blur(8px)",
|
|
2312
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
2313
|
+
color: isMuted ? "#ff6b6b" : "#ffffff",
|
|
2173
2314
|
cursor: "pointer",
|
|
2174
|
-
padding: "
|
|
2175
|
-
borderRadius: "
|
|
2315
|
+
padding: "10px",
|
|
2316
|
+
borderRadius: "10px",
|
|
2176
2317
|
display: "flex",
|
|
2177
2318
|
alignItems: "center",
|
|
2178
2319
|
justifyContent: "center",
|
|
2179
|
-
transition: "
|
|
2320
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2321
|
+
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2322
|
+
minWidth: "40px",
|
|
2323
|
+
minHeight: "40px"
|
|
2180
2324
|
},
|
|
2181
2325
|
onMouseEnter: (e) => {
|
|
2182
|
-
|
|
2326
|
+
const target = e.target;
|
|
2327
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
|
|
2328
|
+
target.style.transform = "translateY(-1px) scale(1.03)";
|
|
2329
|
+
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2183
2330
|
},
|
|
2184
2331
|
onMouseLeave: (e) => {
|
|
2185
|
-
|
|
2332
|
+
const target = e.target;
|
|
2333
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
|
|
2334
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2335
|
+
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
2186
2336
|
},
|
|
2187
2337
|
title: isMuted ? "Unmute" : "Mute",
|
|
2188
|
-
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2189
|
-
|
|
2338
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2339
|
+
import_fa.FaVolumeMute,
|
|
2190
2340
|
{
|
|
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
|
-
]
|
|
2341
|
+
size: 16,
|
|
2342
|
+
style: {
|
|
2343
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2344
|
+
}
|
|
2205
2345
|
}
|
|
2206
|
-
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2207
|
-
|
|
2346
|
+
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2347
|
+
import_fa.FaVolumeDown,
|
|
2208
2348
|
{
|
|
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
|
-
]
|
|
2349
|
+
size: 16,
|
|
2350
|
+
style: {
|
|
2351
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2352
|
+
}
|
|
2223
2353
|
}
|
|
2224
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2225
|
-
|
|
2354
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2355
|
+
import_fa.FaVolumeUp,
|
|
2226
2356
|
{
|
|
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)),
|
|
2357
|
+
size: 16,
|
|
2278
2358
|
style: {
|
|
2279
|
-
|
|
2280
|
-
WebkitAppearance: "slider-vertical",
|
|
2281
|
-
width: "4px",
|
|
2282
|
-
height: "80px",
|
|
2283
|
-
background: "rgba(255, 255, 255, 0.3)",
|
|
2284
|
-
outline: "none"
|
|
2359
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2285
2360
|
}
|
|
2286
2361
|
}
|
|
2287
2362
|
)
|
|
2288
2363
|
}
|
|
2289
|
-
)
|
|
2364
|
+
),
|
|
2365
|
+
showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
2366
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2367
|
+
"div",
|
|
2368
|
+
{
|
|
2369
|
+
style: {
|
|
2370
|
+
position: "absolute",
|
|
2371
|
+
bottom: "100%",
|
|
2372
|
+
left: "50%",
|
|
2373
|
+
transform: "translateX(-50%)",
|
|
2374
|
+
width: "60px",
|
|
2375
|
+
height: "20px",
|
|
2376
|
+
marginBottom: "-16px",
|
|
2377
|
+
zIndex: 9
|
|
2378
|
+
},
|
|
2379
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2380
|
+
onMouseLeave: () => setShowVolumeSlider(false)
|
|
2381
|
+
}
|
|
2382
|
+
),
|
|
2383
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2384
|
+
"div",
|
|
2385
|
+
{
|
|
2386
|
+
style: {
|
|
2387
|
+
position: "absolute",
|
|
2388
|
+
bottom: "100%",
|
|
2389
|
+
left: "50%",
|
|
2390
|
+
transform: "translateX(-50%)",
|
|
2391
|
+
marginBottom: "4px",
|
|
2392
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 20, 20, 0.9) 100%)",
|
|
2393
|
+
backdropFilter: "blur(15px)",
|
|
2394
|
+
padding: "16px 12px",
|
|
2395
|
+
borderRadius: "12px",
|
|
2396
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2397
|
+
display: "flex",
|
|
2398
|
+
flexDirection: "column",
|
|
2399
|
+
alignItems: "center",
|
|
2400
|
+
height: "130px",
|
|
2401
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2402
|
+
zIndex: 10
|
|
2403
|
+
},
|
|
2404
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2405
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2406
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2407
|
+
"input",
|
|
2408
|
+
{
|
|
2409
|
+
type: "range",
|
|
2410
|
+
min: "0",
|
|
2411
|
+
max: "1",
|
|
2412
|
+
step: "0.01",
|
|
2413
|
+
value: isMuted ? 0 : volume,
|
|
2414
|
+
onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
|
|
2415
|
+
style: {
|
|
2416
|
+
writingMode: "bt-lr",
|
|
2417
|
+
WebkitAppearance: "slider-vertical",
|
|
2418
|
+
width: "6px",
|
|
2419
|
+
height: "90px",
|
|
2420
|
+
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%)",
|
|
2421
|
+
borderRadius: "3px",
|
|
2422
|
+
outline: "none",
|
|
2423
|
+
cursor: "pointer"
|
|
2424
|
+
}
|
|
2425
|
+
}
|
|
2426
|
+
)
|
|
2427
|
+
}
|
|
2428
|
+
)
|
|
2429
|
+
] })
|
|
2290
2430
|
]
|
|
2291
2431
|
}
|
|
2292
2432
|
),
|
|
@@ -2323,21 +2463,31 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2323
2463
|
{
|
|
2324
2464
|
onClick: () => setShowSpeedMenu(!showSpeedMenu),
|
|
2325
2465
|
style: {
|
|
2326
|
-
background: "
|
|
2327
|
-
|
|
2328
|
-
|
|
2466
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)",
|
|
2467
|
+
backdropFilter: "blur(8px)",
|
|
2468
|
+
border: "1px solid rgba(255, 255, 255, 0.12)",
|
|
2469
|
+
color: "#ffffff",
|
|
2329
2470
|
cursor: "pointer",
|
|
2330
|
-
padding: "8px
|
|
2331
|
-
borderRadius: "
|
|
2332
|
-
fontSize: "
|
|
2471
|
+
padding: "8px 14px",
|
|
2472
|
+
borderRadius: "8px",
|
|
2473
|
+
fontSize: "13px",
|
|
2333
2474
|
fontFamily: "monospace",
|
|
2334
|
-
|
|
2475
|
+
fontWeight: "600",
|
|
2476
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2477
|
+
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)",
|
|
2478
|
+
minWidth: "50px"
|
|
2335
2479
|
},
|
|
2336
2480
|
onMouseEnter: (e) => {
|
|
2337
|
-
|
|
2481
|
+
const target = e.target;
|
|
2482
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%)";
|
|
2483
|
+
target.style.transform = "translateY(-1px) scale(1.02)";
|
|
2484
|
+
target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
|
|
2338
2485
|
},
|
|
2339
2486
|
onMouseLeave: (e) => {
|
|
2340
|
-
|
|
2487
|
+
const target = e.target;
|
|
2488
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
|
|
2489
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2490
|
+
target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
|
|
2341
2491
|
},
|
|
2342
2492
|
title: "Playback Speed",
|
|
2343
2493
|
children: [
|
|
@@ -2353,11 +2503,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2353
2503
|
position: "absolute",
|
|
2354
2504
|
bottom: "100%",
|
|
2355
2505
|
right: 0,
|
|
2356
|
-
marginBottom: "
|
|
2357
|
-
background: "rgba(0, 0, 0, 0.9)",
|
|
2358
|
-
|
|
2506
|
+
marginBottom: "12px",
|
|
2507
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
2508
|
+
backdropFilter: "blur(20px)",
|
|
2509
|
+
borderRadius: "12px",
|
|
2510
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2359
2511
|
overflow: "hidden",
|
|
2360
|
-
minWidth: "
|
|
2512
|
+
minWidth: "90px",
|
|
2513
|
+
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
2361
2514
|
},
|
|
2362
2515
|
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
2363
2516
|
(speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -2367,24 +2520,26 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2367
2520
|
style: {
|
|
2368
2521
|
display: "block",
|
|
2369
2522
|
width: "100%",
|
|
2370
|
-
padding: "
|
|
2371
|
-
background: playbackRate === speed ? "rgba(
|
|
2523
|
+
padding: "10px 16px",
|
|
2524
|
+
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
2372
2525
|
border: "none",
|
|
2373
2526
|
color: "white",
|
|
2374
2527
|
cursor: "pointer",
|
|
2375
|
-
fontSize: "
|
|
2528
|
+
fontSize: "13px",
|
|
2376
2529
|
fontFamily: "monospace",
|
|
2377
|
-
|
|
2378
|
-
|
|
2530
|
+
fontWeight: "600",
|
|
2531
|
+
textAlign: "center",
|
|
2532
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2533
|
+
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
2379
2534
|
},
|
|
2380
2535
|
onMouseEnter: (e) => {
|
|
2381
2536
|
if (playbackRate !== speed) {
|
|
2382
|
-
e.target.style.
|
|
2537
|
+
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
2383
2538
|
}
|
|
2384
2539
|
},
|
|
2385
2540
|
onMouseLeave: (e) => {
|
|
2386
2541
|
if (playbackRate !== speed) {
|
|
2387
|
-
e.target.style.
|
|
2542
|
+
e.target.style.background = "transparent";
|
|
2388
2543
|
}
|
|
2389
2544
|
},
|
|
2390
2545
|
children: [
|
|
@@ -2411,51 +2566,45 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2411
2566
|
}
|
|
2412
2567
|
},
|
|
2413
2568
|
style: {
|
|
2414
|
-
background: "
|
|
2415
|
-
|
|
2416
|
-
|
|
2569
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
|
|
2570
|
+
backdropFilter: "blur(8px)",
|
|
2571
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
2572
|
+
color: "#ffffff",
|
|
2417
2573
|
cursor: "pointer",
|
|
2418
|
-
padding: "
|
|
2419
|
-
borderRadius: "
|
|
2574
|
+
padding: "10px",
|
|
2575
|
+
borderRadius: "10px",
|
|
2420
2576
|
display: "flex",
|
|
2421
2577
|
alignItems: "center",
|
|
2422
2578
|
justifyContent: "center",
|
|
2423
|
-
transition: "
|
|
2579
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2580
|
+
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2581
|
+
minWidth: "40px",
|
|
2582
|
+
minHeight: "40px"
|
|
2424
2583
|
},
|
|
2425
2584
|
onMouseEnter: (e) => {
|
|
2426
|
-
|
|
2585
|
+
const target = e.target;
|
|
2586
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
|
|
2587
|
+
target.style.transform = "translateY(-1px) scale(1.03)";
|
|
2588
|
+
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2427
2589
|
},
|
|
2428
2590
|
onMouseLeave: (e) => {
|
|
2429
|
-
|
|
2591
|
+
const target = e.target;
|
|
2592
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
|
|
2593
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2594
|
+
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
2430
2595
|
},
|
|
2431
2596
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
2432
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2433
|
-
|
|
2597
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2598
|
+
import_fa.FaCompress,
|
|
2434
2599
|
{
|
|
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
|
-
]
|
|
2600
|
+
size: 16,
|
|
2601
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2445
2602
|
}
|
|
2446
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2447
|
-
|
|
2603
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2604
|
+
import_fa.FaExpand,
|
|
2448
2605
|
{
|
|
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
|
-
]
|
|
2606
|
+
size: 16,
|
|
2607
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2459
2608
|
}
|
|
2460
2609
|
)
|
|
2461
2610
|
}
|
|
@@ -2480,165 +2629,155 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2480
2629
|
zIndex: 10
|
|
2481
2630
|
},
|
|
2482
2631
|
children: [
|
|
2483
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
2484
|
-
"
|
|
2632
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
2633
|
+
"div",
|
|
2485
2634
|
{
|
|
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
2635
|
style: {
|
|
2506
|
-
|
|
2507
|
-
color: "white",
|
|
2508
|
-
border: "1px solid rgba(255, 255, 255, 0.2)",
|
|
2509
|
-
borderRadius: "8px",
|
|
2510
|
-
padding: "10px",
|
|
2511
|
-
cursor: "pointer",
|
|
2636
|
+
position: "relative",
|
|
2512
2637
|
display: "flex",
|
|
2513
2638
|
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)"
|
|
2639
|
+
padding: "8px",
|
|
2640
|
+
margin: "-8px"
|
|
2518
2641
|
},
|
|
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
|
-
]
|
|
2642
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2643
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2644
|
+
children: [
|
|
2645
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2646
|
+
"button",
|
|
2647
|
+
{
|
|
2648
|
+
onClick: () => {
|
|
2649
|
+
if (onVolumeToggle) {
|
|
2650
|
+
onVolumeToggle();
|
|
2651
|
+
} else if (playerRef.current) {
|
|
2652
|
+
playerRef.current.toggleMute();
|
|
2612
2653
|
}
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2654
|
+
},
|
|
2655
|
+
onMouseEnter: (e) => {
|
|
2656
|
+
const target = e.currentTarget;
|
|
2657
|
+
target.style.transform = "translateY(-3px) scale(1.08)";
|
|
2658
|
+
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)";
|
|
2659
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
2660
|
+
},
|
|
2661
|
+
onMouseLeave: (e) => {
|
|
2662
|
+
const target = e.currentTarget;
|
|
2663
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2664
|
+
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)";
|
|
2665
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
2666
|
+
},
|
|
2667
|
+
style: {
|
|
2668
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
|
|
2669
|
+
color: isMuted ? "#ff6b6b" : "#ffffff",
|
|
2670
|
+
border: "none",
|
|
2671
|
+
borderRadius: "16px",
|
|
2672
|
+
padding: "10px",
|
|
2673
|
+
cursor: "pointer",
|
|
2674
|
+
display: "flex",
|
|
2675
|
+
alignItems: "center",
|
|
2676
|
+
justifyContent: "center",
|
|
2677
|
+
backdropFilter: "blur(20px)",
|
|
2678
|
+
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)",
|
|
2679
|
+
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2680
|
+
minWidth: "44px",
|
|
2681
|
+
minHeight: "44px"
|
|
2682
|
+
},
|
|
2683
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
2684
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2685
|
+
import_fa.FaVolumeMute,
|
|
2616
2686
|
{
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2687
|
+
size: 16,
|
|
2688
|
+
style: {
|
|
2689
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2690
|
+
color: "#ffffff"
|
|
2691
|
+
}
|
|
2621
2692
|
}
|
|
2622
|
-
),
|
|
2623
|
-
|
|
2624
|
-
"path",
|
|
2693
|
+
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2694
|
+
import_fa.FaVolumeDown,
|
|
2625
2695
|
{
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2696
|
+
size: 16,
|
|
2697
|
+
style: {
|
|
2698
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2699
|
+
color: "#ffffff"
|
|
2700
|
+
}
|
|
2629
2701
|
}
|
|
2630
|
-
),
|
|
2631
|
-
|
|
2632
|
-
"path",
|
|
2702
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2703
|
+
import_fa.FaVolumeUp,
|
|
2633
2704
|
{
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2705
|
+
size: 16,
|
|
2706
|
+
style: {
|
|
2707
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2708
|
+
color: "#ffffff"
|
|
2709
|
+
}
|
|
2637
2710
|
}
|
|
2638
2711
|
)
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2712
|
+
}
|
|
2713
|
+
),
|
|
2714
|
+
showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
2715
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2716
|
+
"div",
|
|
2717
|
+
{
|
|
2718
|
+
style: {
|
|
2719
|
+
position: "absolute",
|
|
2720
|
+
bottom: "100%",
|
|
2721
|
+
left: "50%",
|
|
2722
|
+
transform: "translateX(-50%)",
|
|
2723
|
+
width: "60px",
|
|
2724
|
+
height: "20px",
|
|
2725
|
+
marginBottom: "-16px",
|
|
2726
|
+
zIndex: 9
|
|
2727
|
+
},
|
|
2728
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2729
|
+
onMouseLeave: () => setShowVolumeSlider(false)
|
|
2730
|
+
}
|
|
2731
|
+
),
|
|
2732
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2733
|
+
"div",
|
|
2734
|
+
{
|
|
2735
|
+
style: {
|
|
2736
|
+
position: "absolute",
|
|
2737
|
+
bottom: "100%",
|
|
2738
|
+
left: "50%",
|
|
2739
|
+
transform: "translateX(-50%)",
|
|
2740
|
+
marginBottom: "4px",
|
|
2741
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%)",
|
|
2742
|
+
backdropFilter: "blur(20px)",
|
|
2743
|
+
padding: "16px 12px",
|
|
2744
|
+
borderRadius: "12px",
|
|
2745
|
+
border: "2px solid rgba(255, 255, 255, 0.6)",
|
|
2746
|
+
display: "flex",
|
|
2747
|
+
flexDirection: "column",
|
|
2748
|
+
alignItems: "center",
|
|
2749
|
+
height: "130px",
|
|
2750
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
|
|
2751
|
+
zIndex: 10
|
|
2752
|
+
},
|
|
2753
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2754
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2755
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2756
|
+
"input",
|
|
2757
|
+
{
|
|
2758
|
+
type: "range",
|
|
2759
|
+
min: "0",
|
|
2760
|
+
max: "1",
|
|
2761
|
+
step: "0.01",
|
|
2762
|
+
value: isMuted ? 0 : volume,
|
|
2763
|
+
onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
|
|
2764
|
+
style: {
|
|
2765
|
+
writingMode: "bt-lr",
|
|
2766
|
+
WebkitAppearance: "slider-vertical",
|
|
2767
|
+
width: "6px",
|
|
2768
|
+
height: "90px",
|
|
2769
|
+
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%)",
|
|
2770
|
+
borderRadius: "3px",
|
|
2771
|
+
outline: "none",
|
|
2772
|
+
cursor: "pointer",
|
|
2773
|
+
border: "1px solid rgba(255, 255, 255, 0.3)"
|
|
2774
|
+
}
|
|
2775
|
+
}
|
|
2776
|
+
)
|
|
2777
|
+
}
|
|
2778
|
+
)
|
|
2779
|
+
] })
|
|
2780
|
+
]
|
|
2642
2781
|
}
|
|
2643
2782
|
),
|
|
2644
2783
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -2655,124 +2794,50 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2655
2794
|
},
|
|
2656
2795
|
onMouseEnter: (e) => {
|
|
2657
2796
|
const target = e.currentTarget;
|
|
2658
|
-
target.style.transform = "translateY(-
|
|
2659
|
-
target.style.boxShadow = "0
|
|
2660
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
2797
|
+
target.style.transform = "translateY(-3px) scale(1.08)";
|
|
2798
|
+
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)";
|
|
2799
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
2661
2800
|
},
|
|
2662
2801
|
onMouseLeave: (e) => {
|
|
2663
2802
|
const target = e.currentTarget;
|
|
2664
2803
|
target.style.transform = "translateY(0) scale(1)";
|
|
2665
|
-
target.style.boxShadow = "0
|
|
2666
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
2804
|
+
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)";
|
|
2805
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
2667
2806
|
},
|
|
2668
2807
|
style: {
|
|
2669
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
2670
|
-
color: "
|
|
2671
|
-
border: "
|
|
2672
|
-
borderRadius: "
|
|
2808
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
|
|
2809
|
+
color: "#ffffff",
|
|
2810
|
+
border: "none",
|
|
2811
|
+
borderRadius: "16px",
|
|
2673
2812
|
padding: "10px",
|
|
2674
2813
|
cursor: "pointer",
|
|
2675
2814
|
display: "flex",
|
|
2676
2815
|
alignItems: "center",
|
|
2677
2816
|
justifyContent: "center",
|
|
2678
|
-
backdropFilter: "blur(
|
|
2679
|
-
boxShadow: "0
|
|
2680
|
-
transition: "all 0.
|
|
2817
|
+
backdropFilter: "blur(20px)",
|
|
2818
|
+
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)",
|
|
2819
|
+
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2820
|
+
minWidth: "44px",
|
|
2821
|
+
minHeight: "44px"
|
|
2681
2822
|
},
|
|
2682
2823
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
2683
|
-
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2684
|
-
|
|
2824
|
+
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2825
|
+
import_fa.FaCompress,
|
|
2685
2826
|
{
|
|
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
|
-
]
|
|
2827
|
+
size: 16,
|
|
2828
|
+
style: {
|
|
2829
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2830
|
+
color: "#ffffff"
|
|
2831
|
+
}
|
|
2729
2832
|
}
|
|
2730
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.
|
|
2731
|
-
|
|
2833
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2834
|
+
import_fa.FaExpand,
|
|
2732
2835
|
{
|
|
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
|
-
]
|
|
2836
|
+
size: 16,
|
|
2837
|
+
style: {
|
|
2838
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2839
|
+
color: "#ffffff"
|
|
2840
|
+
}
|
|
2776
2841
|
}
|
|
2777
2842
|
)
|
|
2778
2843
|
}
|