stormcloud-video-player 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -18
- package/dist/stormcloud-vp.min.js +3 -3
- package/lib/index.cjs +524 -440
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +533 -440
- package/lib/index.js.map +1 -1
- package/package.json +3 -2
package/lib/index.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]);
|
|
@@ -1853,18 +1883,62 @@ 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
|
+
setShowCenterPlay(true);
|
|
1904
|
+
};
|
|
1905
|
+
const handleEnded = () => {
|
|
1906
|
+
setShowCenterPlay(true);
|
|
1907
|
+
};
|
|
1856
1908
|
const video = videoRef.current;
|
|
1909
|
+
video.addEventListener("loadstart", handleLoadStart);
|
|
1857
1910
|
video.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1858
1911
|
video.addEventListener("loadeddata", handleLoadedMetadata);
|
|
1859
|
-
video.addEventListener("canplay",
|
|
1912
|
+
video.addEventListener("canplay", handleCanPlay);
|
|
1913
|
+
video.addEventListener("waiting", handleWaiting);
|
|
1914
|
+
video.addEventListener("playing", handlePlaying);
|
|
1915
|
+
video.addEventListener("pause", handlePause);
|
|
1916
|
+
video.addEventListener("ended", handleEnded);
|
|
1917
|
+
if (video.paused) {
|
|
1918
|
+
setShowCenterPlay(true);
|
|
1919
|
+
}
|
|
1860
1920
|
return () => {
|
|
1921
|
+
video.removeEventListener("loadstart", handleLoadStart);
|
|
1861
1922
|
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1862
1923
|
video.removeEventListener("loadeddata", handleLoadedMetadata);
|
|
1863
|
-
video.removeEventListener("canplay",
|
|
1924
|
+
video.removeEventListener("canplay", handleCanPlay);
|
|
1925
|
+
video.removeEventListener("waiting", handleWaiting);
|
|
1926
|
+
video.removeEventListener("playing", handlePlaying);
|
|
1927
|
+
video.removeEventListener("pause", handlePause);
|
|
1928
|
+
video.removeEventListener("ended", handleEnded);
|
|
1864
1929
|
};
|
|
1865
1930
|
}, []);
|
|
1866
1931
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1867
1932
|
/* @__PURE__ */ jsx("style", { children: `
|
|
1933
|
+
@keyframes spin {
|
|
1934
|
+
from {
|
|
1935
|
+
transform: rotate(0deg);
|
|
1936
|
+
}
|
|
1937
|
+
to {
|
|
1938
|
+
transform: rotate(360deg);
|
|
1939
|
+
}
|
|
1940
|
+
}
|
|
1941
|
+
|
|
1868
1942
|
.stormcloud-video-wrapper:fullscreen {
|
|
1869
1943
|
border-radius: 0 !important;
|
|
1870
1944
|
box-shadow: none !important;
|
|
@@ -1959,6 +2033,89 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
1959
2033
|
children
|
|
1960
2034
|
}
|
|
1961
2035
|
),
|
|
2036
|
+
(isLoading || isBuffering) && /* @__PURE__ */ jsx(
|
|
2037
|
+
"div",
|
|
2038
|
+
{
|
|
2039
|
+
style: {
|
|
2040
|
+
position: "absolute",
|
|
2041
|
+
top: "50%",
|
|
2042
|
+
left: "50%",
|
|
2043
|
+
transform: "translate(-50%, -50%)",
|
|
2044
|
+
zIndex: 20,
|
|
2045
|
+
display: "flex",
|
|
2046
|
+
alignItems: "center",
|
|
2047
|
+
justifyContent: "center",
|
|
2048
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.6) 100%)",
|
|
2049
|
+
width: "80px",
|
|
2050
|
+
height: "80px",
|
|
2051
|
+
borderRadius: "50%",
|
|
2052
|
+
backdropFilter: "blur(20px)",
|
|
2053
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1)"
|
|
2054
|
+
},
|
|
2055
|
+
children: /* @__PURE__ */ jsx(
|
|
2056
|
+
FaSpinner,
|
|
2057
|
+
{
|
|
2058
|
+
size: 28,
|
|
2059
|
+
color: "white",
|
|
2060
|
+
style: {
|
|
2061
|
+
animation: "spin 1s linear infinite",
|
|
2062
|
+
filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
|
|
2063
|
+
}
|
|
2064
|
+
}
|
|
2065
|
+
)
|
|
2066
|
+
}
|
|
2067
|
+
),
|
|
2068
|
+
showCenterPlay && !isLoading && !isBuffering && /* @__PURE__ */ jsx(
|
|
2069
|
+
"div",
|
|
2070
|
+
{
|
|
2071
|
+
onClick: handleCenterPlayClick,
|
|
2072
|
+
style: {
|
|
2073
|
+
position: "absolute",
|
|
2074
|
+
top: "50%",
|
|
2075
|
+
left: "50%",
|
|
2076
|
+
transform: "translate(-50%, -50%)",
|
|
2077
|
+
zIndex: 15,
|
|
2078
|
+
cursor: "pointer",
|
|
2079
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)",
|
|
2080
|
+
borderRadius: "50%",
|
|
2081
|
+
width: "100px",
|
|
2082
|
+
height: "100px",
|
|
2083
|
+
display: "flex",
|
|
2084
|
+
alignItems: "center",
|
|
2085
|
+
justifyContent: "center",
|
|
2086
|
+
backdropFilter: "blur(20px)",
|
|
2087
|
+
border: "3px solid rgba(255, 255, 255, 0.8)",
|
|
2088
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
|
|
2089
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2090
|
+
},
|
|
2091
|
+
onMouseEnter: (e) => {
|
|
2092
|
+
const target = e.currentTarget;
|
|
2093
|
+
target.style.transform = "translate(-50%, -50%) scale(1.1)";
|
|
2094
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
|
|
2095
|
+
target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
2096
|
+
target.style.borderColor = "rgba(255, 255, 255, 0.9)";
|
|
2097
|
+
},
|
|
2098
|
+
onMouseLeave: (e) => {
|
|
2099
|
+
const target = e.currentTarget;
|
|
2100
|
+
target.style.transform = "translate(-50%, -50%) scale(1)";
|
|
2101
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
|
|
2102
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
2103
|
+
target.style.borderColor = "rgba(255, 255, 255, 0.8)";
|
|
2104
|
+
},
|
|
2105
|
+
title: "Play",
|
|
2106
|
+
children: /* @__PURE__ */ jsx(
|
|
2107
|
+
FaPlay,
|
|
2108
|
+
{
|
|
2109
|
+
size: 36,
|
|
2110
|
+
color: "white",
|
|
2111
|
+
style: {
|
|
2112
|
+
marginLeft: "6px",
|
|
2113
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))"
|
|
2114
|
+
}
|
|
2115
|
+
}
|
|
2116
|
+
)
|
|
2117
|
+
}
|
|
2118
|
+
),
|
|
1962
2119
|
adStatus.showAds && adStatus.totalAds > 0 && /* @__PURE__ */ jsxs(
|
|
1963
2120
|
"div",
|
|
1964
2121
|
{
|
|
@@ -2000,12 +2157,15 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2000
2157
|
{
|
|
2001
2158
|
style: {
|
|
2002
2159
|
width: "100%",
|
|
2003
|
-
height: "
|
|
2004
|
-
|
|
2005
|
-
borderRadius: "
|
|
2006
|
-
marginBottom: "
|
|
2160
|
+
height: "8px",
|
|
2161
|
+
background: "linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)",
|
|
2162
|
+
borderRadius: "8px",
|
|
2163
|
+
marginBottom: "16px",
|
|
2007
2164
|
cursor: "pointer",
|
|
2008
|
-
position: "relative"
|
|
2165
|
+
position: "relative",
|
|
2166
|
+
backdropFilter: "blur(5px)",
|
|
2167
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2168
|
+
boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
|
|
2009
2169
|
},
|
|
2010
2170
|
onClick: handleTimelineSeek,
|
|
2011
2171
|
children: [
|
|
@@ -2014,10 +2174,11 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2014
2174
|
{
|
|
2015
2175
|
style: {
|
|
2016
2176
|
height: "100%",
|
|
2017
|
-
|
|
2018
|
-
borderRadius: "
|
|
2177
|
+
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%)",
|
|
2178
|
+
borderRadius: "8px",
|
|
2019
2179
|
width: `${duration > 0 ? currentTime / duration * 100 : 0}%`,
|
|
2020
|
-
transition: "width 0.
|
|
2180
|
+
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2181
|
+
boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)"
|
|
2021
2182
|
}
|
|
2022
2183
|
}
|
|
2023
2184
|
),
|
|
@@ -2026,15 +2187,16 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2026
2187
|
{
|
|
2027
2188
|
style: {
|
|
2028
2189
|
position: "absolute",
|
|
2029
|
-
top: "-
|
|
2190
|
+
top: "-6px",
|
|
2030
2191
|
right: `${duration > 0 ? 100 - currentTime / duration * 100 : 100}%`,
|
|
2031
|
-
width: "
|
|
2032
|
-
height: "
|
|
2033
|
-
|
|
2192
|
+
width: "20px",
|
|
2193
|
+
height: "20px",
|
|
2194
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%)",
|
|
2034
2195
|
borderRadius: "50%",
|
|
2035
|
-
border: "
|
|
2036
|
-
boxShadow: "0
|
|
2037
|
-
transform: "translateX(50%)"
|
|
2196
|
+
border: "3px solid rgba(139, 92, 246, 0.8)",
|
|
2197
|
+
boxShadow: "0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
|
|
2198
|
+
transform: "translateX(50%)",
|
|
2199
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
2038
2200
|
}
|
|
2039
2201
|
}
|
|
2040
2202
|
)
|
|
@@ -2065,41 +2227,45 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2065
2227
|
{
|
|
2066
2228
|
onClick: handlePlayPause,
|
|
2067
2229
|
style: {
|
|
2068
|
-
background: "
|
|
2069
|
-
|
|
2070
|
-
|
|
2230
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)",
|
|
2231
|
+
backdropFilter: "blur(10px)",
|
|
2232
|
+
border: "1px solid rgba(255, 255, 255, 0.2)",
|
|
2233
|
+
color: "#ffffff",
|
|
2071
2234
|
cursor: "pointer",
|
|
2072
|
-
padding: "
|
|
2073
|
-
borderRadius: "
|
|
2235
|
+
padding: "12px",
|
|
2236
|
+
borderRadius: "12px",
|
|
2074
2237
|
display: "flex",
|
|
2075
2238
|
alignItems: "center",
|
|
2076
2239
|
justifyContent: "center",
|
|
2077
|
-
transition: "
|
|
2240
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2241
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
|
|
2242
|
+
minWidth: "48px",
|
|
2243
|
+
minHeight: "48px"
|
|
2078
2244
|
},
|
|
2079
2245
|
onMouseEnter: (e) => {
|
|
2080
|
-
|
|
2246
|
+
const target = e.target;
|
|
2247
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%)";
|
|
2248
|
+
target.style.transform = "translateY(-2px) scale(1.05)";
|
|
2249
|
+
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
2081
2250
|
},
|
|
2082
2251
|
onMouseLeave: (e) => {
|
|
2083
|
-
|
|
2252
|
+
const target = e.target;
|
|
2253
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
2254
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2255
|
+
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2084
2256
|
},
|
|
2085
2257
|
title: isPlaying ? "Pause" : "Play",
|
|
2086
2258
|
children: isPlaying ? /* @__PURE__ */ jsx(
|
|
2087
|
-
|
|
2259
|
+
FaPause,
|
|
2088
2260
|
{
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
viewBox: "0 0 24 24",
|
|
2092
|
-
fill: "currentColor",
|
|
2093
|
-
children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
|
|
2261
|
+
size: 20,
|
|
2262
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2094
2263
|
}
|
|
2095
2264
|
) : /* @__PURE__ */ jsx(
|
|
2096
|
-
|
|
2265
|
+
FaPlay,
|
|
2097
2266
|
{
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
viewBox: "0 0 24 24",
|
|
2101
|
-
fill: "currentColor",
|
|
2102
|
-
children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
|
|
2267
|
+
size: 20,
|
|
2268
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2103
2269
|
}
|
|
2104
2270
|
)
|
|
2105
2271
|
}
|
|
@@ -2110,7 +2276,9 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2110
2276
|
style: {
|
|
2111
2277
|
position: "relative",
|
|
2112
2278
|
display: "flex",
|
|
2113
|
-
alignItems: "center"
|
|
2279
|
+
alignItems: "center",
|
|
2280
|
+
padding: "8px",
|
|
2281
|
+
margin: "-8px"
|
|
2114
2282
|
},
|
|
2115
2283
|
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2116
2284
|
onMouseLeave: () => setShowVolumeSlider(false),
|
|
@@ -2126,126 +2294,126 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2126
2294
|
}
|
|
2127
2295
|
},
|
|
2128
2296
|
style: {
|
|
2129
|
-
background: "
|
|
2130
|
-
|
|
2131
|
-
|
|
2297
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
|
|
2298
|
+
backdropFilter: "blur(8px)",
|
|
2299
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
2300
|
+
color: isMuted ? "#ff6b6b" : "#ffffff",
|
|
2132
2301
|
cursor: "pointer",
|
|
2133
|
-
padding: "
|
|
2134
|
-
borderRadius: "
|
|
2302
|
+
padding: "10px",
|
|
2303
|
+
borderRadius: "10px",
|
|
2135
2304
|
display: "flex",
|
|
2136
2305
|
alignItems: "center",
|
|
2137
2306
|
justifyContent: "center",
|
|
2138
|
-
transition: "
|
|
2307
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2308
|
+
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2309
|
+
minWidth: "40px",
|
|
2310
|
+
minHeight: "40px"
|
|
2139
2311
|
},
|
|
2140
2312
|
onMouseEnter: (e) => {
|
|
2141
|
-
|
|
2313
|
+
const target = e.target;
|
|
2314
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
|
|
2315
|
+
target.style.transform = "translateY(-1px) scale(1.03)";
|
|
2316
|
+
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2142
2317
|
},
|
|
2143
2318
|
onMouseLeave: (e) => {
|
|
2144
|
-
|
|
2319
|
+
const target = e.target;
|
|
2320
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
|
|
2321
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2322
|
+
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
2145
2323
|
},
|
|
2146
2324
|
title: isMuted ? "Unmute" : "Mute",
|
|
2147
|
-
children: isMuted || volume === 0 ? /* @__PURE__ */
|
|
2148
|
-
|
|
2325
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
|
|
2326
|
+
FaVolumeMute,
|
|
2149
2327
|
{
|
|
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
|
-
]
|
|
2328
|
+
size: 16,
|
|
2329
|
+
style: {
|
|
2330
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2331
|
+
}
|
|
2164
2332
|
}
|
|
2165
|
-
) : volume < 0.5 ? /* @__PURE__ */
|
|
2166
|
-
|
|
2333
|
+
) : volume < 0.5 ? /* @__PURE__ */ jsx(
|
|
2334
|
+
FaVolumeDown,
|
|
2167
2335
|
{
|
|
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
|
-
]
|
|
2336
|
+
size: 16,
|
|
2337
|
+
style: {
|
|
2338
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2339
|
+
}
|
|
2182
2340
|
}
|
|
2183
|
-
) : /* @__PURE__ */
|
|
2184
|
-
|
|
2341
|
+
) : /* @__PURE__ */ jsx(
|
|
2342
|
+
FaVolumeUp,
|
|
2185
2343
|
{
|
|
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)),
|
|
2344
|
+
size: 16,
|
|
2237
2345
|
style: {
|
|
2238
|
-
|
|
2239
|
-
WebkitAppearance: "slider-vertical",
|
|
2240
|
-
width: "4px",
|
|
2241
|
-
height: "80px",
|
|
2242
|
-
background: "rgba(255, 255, 255, 0.3)",
|
|
2243
|
-
outline: "none"
|
|
2346
|
+
filter: "drop-shadow(0 0 0 transparent)"
|
|
2244
2347
|
}
|
|
2245
2348
|
}
|
|
2246
2349
|
)
|
|
2247
2350
|
}
|
|
2248
|
-
)
|
|
2351
|
+
),
|
|
2352
|
+
showVolumeSlider && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2353
|
+
/* @__PURE__ */ jsx(
|
|
2354
|
+
"div",
|
|
2355
|
+
{
|
|
2356
|
+
style: {
|
|
2357
|
+
position: "absolute",
|
|
2358
|
+
bottom: "100%",
|
|
2359
|
+
left: "50%",
|
|
2360
|
+
transform: "translateX(-50%)",
|
|
2361
|
+
width: "60px",
|
|
2362
|
+
height: "20px",
|
|
2363
|
+
marginBottom: "-16px",
|
|
2364
|
+
zIndex: 9
|
|
2365
|
+
},
|
|
2366
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2367
|
+
onMouseLeave: () => setShowVolumeSlider(false)
|
|
2368
|
+
}
|
|
2369
|
+
),
|
|
2370
|
+
/* @__PURE__ */ jsx(
|
|
2371
|
+
"div",
|
|
2372
|
+
{
|
|
2373
|
+
style: {
|
|
2374
|
+
position: "absolute",
|
|
2375
|
+
bottom: "100%",
|
|
2376
|
+
left: "50%",
|
|
2377
|
+
transform: "translateX(-50%)",
|
|
2378
|
+
marginBottom: "4px",
|
|
2379
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 20, 20, 0.9) 100%)",
|
|
2380
|
+
backdropFilter: "blur(15px)",
|
|
2381
|
+
padding: "16px 12px",
|
|
2382
|
+
borderRadius: "12px",
|
|
2383
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2384
|
+
display: "flex",
|
|
2385
|
+
flexDirection: "column",
|
|
2386
|
+
alignItems: "center",
|
|
2387
|
+
height: "130px",
|
|
2388
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2389
|
+
zIndex: 10
|
|
2390
|
+
},
|
|
2391
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2392
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2393
|
+
children: /* @__PURE__ */ jsx(
|
|
2394
|
+
"input",
|
|
2395
|
+
{
|
|
2396
|
+
type: "range",
|
|
2397
|
+
min: "0",
|
|
2398
|
+
max: "1",
|
|
2399
|
+
step: "0.01",
|
|
2400
|
+
value: isMuted ? 0 : volume,
|
|
2401
|
+
onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
|
|
2402
|
+
style: {
|
|
2403
|
+
writingMode: "bt-lr",
|
|
2404
|
+
WebkitAppearance: "slider-vertical",
|
|
2405
|
+
width: "6px",
|
|
2406
|
+
height: "90px",
|
|
2407
|
+
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%)",
|
|
2408
|
+
borderRadius: "3px",
|
|
2409
|
+
outline: "none",
|
|
2410
|
+
cursor: "pointer"
|
|
2411
|
+
}
|
|
2412
|
+
}
|
|
2413
|
+
)
|
|
2414
|
+
}
|
|
2415
|
+
)
|
|
2416
|
+
] })
|
|
2249
2417
|
]
|
|
2250
2418
|
}
|
|
2251
2419
|
),
|
|
@@ -2282,21 +2450,31 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2282
2450
|
{
|
|
2283
2451
|
onClick: () => setShowSpeedMenu(!showSpeedMenu),
|
|
2284
2452
|
style: {
|
|
2285
|
-
background: "
|
|
2286
|
-
|
|
2287
|
-
|
|
2453
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)",
|
|
2454
|
+
backdropFilter: "blur(8px)",
|
|
2455
|
+
border: "1px solid rgba(255, 255, 255, 0.12)",
|
|
2456
|
+
color: "#ffffff",
|
|
2288
2457
|
cursor: "pointer",
|
|
2289
|
-
padding: "8px
|
|
2290
|
-
borderRadius: "
|
|
2291
|
-
fontSize: "
|
|
2458
|
+
padding: "8px 14px",
|
|
2459
|
+
borderRadius: "8px",
|
|
2460
|
+
fontSize: "13px",
|
|
2292
2461
|
fontFamily: "monospace",
|
|
2293
|
-
|
|
2462
|
+
fontWeight: "600",
|
|
2463
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2464
|
+
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)",
|
|
2465
|
+
minWidth: "50px"
|
|
2294
2466
|
},
|
|
2295
2467
|
onMouseEnter: (e) => {
|
|
2296
|
-
|
|
2468
|
+
const target = e.target;
|
|
2469
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%)";
|
|
2470
|
+
target.style.transform = "translateY(-1px) scale(1.02)";
|
|
2471
|
+
target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
|
|
2297
2472
|
},
|
|
2298
2473
|
onMouseLeave: (e) => {
|
|
2299
|
-
|
|
2474
|
+
const target = e.target;
|
|
2475
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
|
|
2476
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2477
|
+
target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
|
|
2300
2478
|
},
|
|
2301
2479
|
title: "Playback Speed",
|
|
2302
2480
|
children: [
|
|
@@ -2312,11 +2490,14 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2312
2490
|
position: "absolute",
|
|
2313
2491
|
bottom: "100%",
|
|
2314
2492
|
right: 0,
|
|
2315
|
-
marginBottom: "
|
|
2316
|
-
background: "rgba(0, 0, 0, 0.9)",
|
|
2317
|
-
|
|
2493
|
+
marginBottom: "12px",
|
|
2494
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
2495
|
+
backdropFilter: "blur(20px)",
|
|
2496
|
+
borderRadius: "12px",
|
|
2497
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
2318
2498
|
overflow: "hidden",
|
|
2319
|
-
minWidth: "
|
|
2499
|
+
minWidth: "90px",
|
|
2500
|
+
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
2320
2501
|
},
|
|
2321
2502
|
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
2322
2503
|
(speed) => /* @__PURE__ */ jsxs(
|
|
@@ -2326,24 +2507,26 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2326
2507
|
style: {
|
|
2327
2508
|
display: "block",
|
|
2328
2509
|
width: "100%",
|
|
2329
|
-
padding: "
|
|
2330
|
-
background: playbackRate === speed ? "rgba(
|
|
2510
|
+
padding: "10px 16px",
|
|
2511
|
+
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
2331
2512
|
border: "none",
|
|
2332
2513
|
color: "white",
|
|
2333
2514
|
cursor: "pointer",
|
|
2334
|
-
fontSize: "
|
|
2515
|
+
fontSize: "13px",
|
|
2335
2516
|
fontFamily: "monospace",
|
|
2336
|
-
|
|
2337
|
-
|
|
2517
|
+
fontWeight: "600",
|
|
2518
|
+
textAlign: "center",
|
|
2519
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2520
|
+
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
2338
2521
|
},
|
|
2339
2522
|
onMouseEnter: (e) => {
|
|
2340
2523
|
if (playbackRate !== speed) {
|
|
2341
|
-
e.target.style.
|
|
2524
|
+
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
2342
2525
|
}
|
|
2343
2526
|
},
|
|
2344
2527
|
onMouseLeave: (e) => {
|
|
2345
2528
|
if (playbackRate !== speed) {
|
|
2346
|
-
e.target.style.
|
|
2529
|
+
e.target.style.background = "transparent";
|
|
2347
2530
|
}
|
|
2348
2531
|
},
|
|
2349
2532
|
children: [
|
|
@@ -2370,51 +2553,45 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2370
2553
|
}
|
|
2371
2554
|
},
|
|
2372
2555
|
style: {
|
|
2373
|
-
background: "
|
|
2374
|
-
|
|
2375
|
-
|
|
2556
|
+
background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
|
|
2557
|
+
backdropFilter: "blur(8px)",
|
|
2558
|
+
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
2559
|
+
color: "#ffffff",
|
|
2376
2560
|
cursor: "pointer",
|
|
2377
|
-
padding: "
|
|
2378
|
-
borderRadius: "
|
|
2561
|
+
padding: "10px",
|
|
2562
|
+
borderRadius: "10px",
|
|
2379
2563
|
display: "flex",
|
|
2380
2564
|
alignItems: "center",
|
|
2381
2565
|
justifyContent: "center",
|
|
2382
|
-
transition: "
|
|
2566
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2567
|
+
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
|
|
2568
|
+
minWidth: "40px",
|
|
2569
|
+
minHeight: "40px"
|
|
2383
2570
|
},
|
|
2384
2571
|
onMouseEnter: (e) => {
|
|
2385
|
-
|
|
2572
|
+
const target = e.target;
|
|
2573
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
|
|
2574
|
+
target.style.transform = "translateY(-1px) scale(1.03)";
|
|
2575
|
+
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
2386
2576
|
},
|
|
2387
2577
|
onMouseLeave: (e) => {
|
|
2388
|
-
|
|
2578
|
+
const target = e.target;
|
|
2579
|
+
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
|
|
2580
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2581
|
+
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
2389
2582
|
},
|
|
2390
2583
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
2391
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
2392
|
-
|
|
2584
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(
|
|
2585
|
+
FaCompress,
|
|
2393
2586
|
{
|
|
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
|
-
]
|
|
2587
|
+
size: 16,
|
|
2588
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2404
2589
|
}
|
|
2405
|
-
) : /* @__PURE__ */
|
|
2406
|
-
|
|
2590
|
+
) : /* @__PURE__ */ jsx(
|
|
2591
|
+
FaExpand,
|
|
2407
2592
|
{
|
|
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
|
-
]
|
|
2593
|
+
size: 16,
|
|
2594
|
+
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
2418
2595
|
}
|
|
2419
2596
|
)
|
|
2420
2597
|
}
|
|
@@ -2439,165 +2616,155 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2439
2616
|
zIndex: 10
|
|
2440
2617
|
},
|
|
2441
2618
|
children: [
|
|
2442
|
-
/* @__PURE__ */
|
|
2443
|
-
"
|
|
2619
|
+
/* @__PURE__ */ jsxs(
|
|
2620
|
+
"div",
|
|
2444
2621
|
{
|
|
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
2622
|
style: {
|
|
2465
|
-
|
|
2466
|
-
color: "white",
|
|
2467
|
-
border: "1px solid rgba(255, 255, 255, 0.2)",
|
|
2468
|
-
borderRadius: "8px",
|
|
2469
|
-
padding: "10px",
|
|
2470
|
-
cursor: "pointer",
|
|
2623
|
+
position: "relative",
|
|
2471
2624
|
display: "flex",
|
|
2472
2625
|
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)"
|
|
2626
|
+
padding: "8px",
|
|
2627
|
+
margin: "-8px"
|
|
2477
2628
|
},
|
|
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
|
-
]
|
|
2629
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2630
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2631
|
+
children: [
|
|
2632
|
+
/* @__PURE__ */ jsx(
|
|
2633
|
+
"button",
|
|
2634
|
+
{
|
|
2635
|
+
onClick: () => {
|
|
2636
|
+
if (onVolumeToggle) {
|
|
2637
|
+
onVolumeToggle();
|
|
2638
|
+
} else if (playerRef.current) {
|
|
2639
|
+
playerRef.current.toggleMute();
|
|
2571
2640
|
}
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2641
|
+
},
|
|
2642
|
+
onMouseEnter: (e) => {
|
|
2643
|
+
const target = e.currentTarget;
|
|
2644
|
+
target.style.transform = "translateY(-3px) scale(1.08)";
|
|
2645
|
+
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)";
|
|
2646
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
2647
|
+
},
|
|
2648
|
+
onMouseLeave: (e) => {
|
|
2649
|
+
const target = e.currentTarget;
|
|
2650
|
+
target.style.transform = "translateY(0) scale(1)";
|
|
2651
|
+
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)";
|
|
2652
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
2653
|
+
},
|
|
2654
|
+
style: {
|
|
2655
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
|
|
2656
|
+
color: isMuted ? "#ff6b6b" : "#ffffff",
|
|
2657
|
+
border: "none",
|
|
2658
|
+
borderRadius: "16px",
|
|
2659
|
+
padding: "10px",
|
|
2660
|
+
cursor: "pointer",
|
|
2661
|
+
display: "flex",
|
|
2662
|
+
alignItems: "center",
|
|
2663
|
+
justifyContent: "center",
|
|
2664
|
+
backdropFilter: "blur(20px)",
|
|
2665
|
+
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)",
|
|
2666
|
+
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2667
|
+
minWidth: "44px",
|
|
2668
|
+
minHeight: "44px"
|
|
2669
|
+
},
|
|
2670
|
+
title: isMuted ? "Unmute" : "Mute",
|
|
2671
|
+
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
|
|
2672
|
+
FaVolumeMute,
|
|
2575
2673
|
{
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2674
|
+
size: 16,
|
|
2675
|
+
style: {
|
|
2676
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2677
|
+
color: "#ffffff"
|
|
2678
|
+
}
|
|
2580
2679
|
}
|
|
2581
|
-
)
|
|
2582
|
-
|
|
2583
|
-
"path",
|
|
2680
|
+
) : volume < 0.5 ? /* @__PURE__ */ jsx(
|
|
2681
|
+
FaVolumeDown,
|
|
2584
2682
|
{
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2683
|
+
size: 16,
|
|
2684
|
+
style: {
|
|
2685
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2686
|
+
color: "#ffffff"
|
|
2687
|
+
}
|
|
2588
2688
|
}
|
|
2589
|
-
)
|
|
2590
|
-
|
|
2591
|
-
"path",
|
|
2689
|
+
) : /* @__PURE__ */ jsx(
|
|
2690
|
+
FaVolumeUp,
|
|
2592
2691
|
{
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2692
|
+
size: 16,
|
|
2693
|
+
style: {
|
|
2694
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2695
|
+
color: "#ffffff"
|
|
2696
|
+
}
|
|
2596
2697
|
}
|
|
2597
2698
|
)
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2699
|
+
}
|
|
2700
|
+
),
|
|
2701
|
+
showVolumeSlider && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2702
|
+
/* @__PURE__ */ jsx(
|
|
2703
|
+
"div",
|
|
2704
|
+
{
|
|
2705
|
+
style: {
|
|
2706
|
+
position: "absolute",
|
|
2707
|
+
bottom: "100%",
|
|
2708
|
+
left: "50%",
|
|
2709
|
+
transform: "translateX(-50%)",
|
|
2710
|
+
width: "60px",
|
|
2711
|
+
height: "20px",
|
|
2712
|
+
marginBottom: "-16px",
|
|
2713
|
+
zIndex: 9
|
|
2714
|
+
},
|
|
2715
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2716
|
+
onMouseLeave: () => setShowVolumeSlider(false)
|
|
2717
|
+
}
|
|
2718
|
+
),
|
|
2719
|
+
/* @__PURE__ */ jsx(
|
|
2720
|
+
"div",
|
|
2721
|
+
{
|
|
2722
|
+
style: {
|
|
2723
|
+
position: "absolute",
|
|
2724
|
+
bottom: "100%",
|
|
2725
|
+
left: "50%",
|
|
2726
|
+
transform: "translateX(-50%)",
|
|
2727
|
+
marginBottom: "4px",
|
|
2728
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%)",
|
|
2729
|
+
backdropFilter: "blur(20px)",
|
|
2730
|
+
padding: "16px 12px",
|
|
2731
|
+
borderRadius: "12px",
|
|
2732
|
+
border: "2px solid rgba(255, 255, 255, 0.6)",
|
|
2733
|
+
display: "flex",
|
|
2734
|
+
flexDirection: "column",
|
|
2735
|
+
alignItems: "center",
|
|
2736
|
+
height: "130px",
|
|
2737
|
+
boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
|
|
2738
|
+
zIndex: 10
|
|
2739
|
+
},
|
|
2740
|
+
onMouseEnter: () => setShowVolumeSlider(true),
|
|
2741
|
+
onMouseLeave: () => setShowVolumeSlider(false),
|
|
2742
|
+
children: /* @__PURE__ */ jsx(
|
|
2743
|
+
"input",
|
|
2744
|
+
{
|
|
2745
|
+
type: "range",
|
|
2746
|
+
min: "0",
|
|
2747
|
+
max: "1",
|
|
2748
|
+
step: "0.01",
|
|
2749
|
+
value: isMuted ? 0 : volume,
|
|
2750
|
+
onChange: (e) => handleVolumeChange(parseFloat(e.target.value)),
|
|
2751
|
+
style: {
|
|
2752
|
+
writingMode: "bt-lr",
|
|
2753
|
+
WebkitAppearance: "slider-vertical",
|
|
2754
|
+
width: "6px",
|
|
2755
|
+
height: "90px",
|
|
2756
|
+
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%)",
|
|
2757
|
+
borderRadius: "3px",
|
|
2758
|
+
outline: "none",
|
|
2759
|
+
cursor: "pointer",
|
|
2760
|
+
border: "1px solid rgba(255, 255, 255, 0.3)"
|
|
2761
|
+
}
|
|
2762
|
+
}
|
|
2763
|
+
)
|
|
2764
|
+
}
|
|
2765
|
+
)
|
|
2766
|
+
] })
|
|
2767
|
+
]
|
|
2601
2768
|
}
|
|
2602
2769
|
),
|
|
2603
2770
|
/* @__PURE__ */ jsx(
|
|
@@ -2614,124 +2781,50 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
2614
2781
|
},
|
|
2615
2782
|
onMouseEnter: (e) => {
|
|
2616
2783
|
const target = e.currentTarget;
|
|
2617
|
-
target.style.transform = "translateY(-
|
|
2618
|
-
target.style.boxShadow = "0
|
|
2619
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
2784
|
+
target.style.transform = "translateY(-3px) scale(1.08)";
|
|
2785
|
+
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)";
|
|
2786
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
2620
2787
|
},
|
|
2621
2788
|
onMouseLeave: (e) => {
|
|
2622
2789
|
const target = e.currentTarget;
|
|
2623
2790
|
target.style.transform = "translateY(0) scale(1)";
|
|
2624
|
-
target.style.boxShadow = "0
|
|
2625
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
2791
|
+
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)";
|
|
2792
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
2626
2793
|
},
|
|
2627
2794
|
style: {
|
|
2628
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
2629
|
-
color: "
|
|
2630
|
-
border: "
|
|
2631
|
-
borderRadius: "
|
|
2795
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
|
|
2796
|
+
color: "#ffffff",
|
|
2797
|
+
border: "none",
|
|
2798
|
+
borderRadius: "16px",
|
|
2632
2799
|
padding: "10px",
|
|
2633
2800
|
cursor: "pointer",
|
|
2634
2801
|
display: "flex",
|
|
2635
2802
|
alignItems: "center",
|
|
2636
2803
|
justifyContent: "center",
|
|
2637
|
-
backdropFilter: "blur(
|
|
2638
|
-
boxShadow: "0
|
|
2639
|
-
transition: "all 0.
|
|
2804
|
+
backdropFilter: "blur(20px)",
|
|
2805
|
+
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)",
|
|
2806
|
+
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
2807
|
+
minWidth: "44px",
|
|
2808
|
+
minHeight: "44px"
|
|
2640
2809
|
},
|
|
2641
2810
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
2642
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
2643
|
-
|
|
2811
|
+
children: isFullscreen ? /* @__PURE__ */ jsx(
|
|
2812
|
+
FaCompress,
|
|
2644
2813
|
{
|
|
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
|
-
]
|
|
2814
|
+
size: 16,
|
|
2815
|
+
style: {
|
|
2816
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2817
|
+
color: "#ffffff"
|
|
2818
|
+
}
|
|
2688
2819
|
}
|
|
2689
|
-
) : /* @__PURE__ */
|
|
2690
|
-
|
|
2820
|
+
) : /* @__PURE__ */ jsx(
|
|
2821
|
+
FaExpand,
|
|
2691
2822
|
{
|
|
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
|
-
]
|
|
2823
|
+
size: 16,
|
|
2824
|
+
style: {
|
|
2825
|
+
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
2826
|
+
color: "#ffffff"
|
|
2827
|
+
}
|
|
2735
2828
|
}
|
|
2736
2829
|
)
|
|
2737
2830
|
}
|