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