stormcloud-video-player 0.2.15 → 0.2.16
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/dist/stormcloud-vp.min.js +2 -2
- package/lib/index.cjs +350 -243
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +2 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +350 -243
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +52 -18
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +2 -0
- package/lib/players/FilePlayer.cjs +12 -1
- package/lib/players/FilePlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.cjs +65 -21
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +77 -22
- package/lib/players/index.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +325 -239
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -1734,6 +1734,8 @@ var StormcloudVideoPlayer = class {
|
|
|
1734
1734
|
this.totalAdsInBreak = 0;
|
|
1735
1735
|
this.showAds = false;
|
|
1736
1736
|
this.isLiveStream = false;
|
|
1737
|
+
this.nativeHlsMode = false;
|
|
1738
|
+
this.videoSrcProtection = null;
|
|
1737
1739
|
initializePolyfills();
|
|
1738
1740
|
const browserOverrides = getBrowserConfigOverrides();
|
|
1739
1741
|
this.config = { ...config, ...browserOverrides };
|
|
@@ -1754,7 +1756,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1754
1756
|
}
|
|
1755
1757
|
if (adPlayerType === "hls") {
|
|
1756
1758
|
if (this.config.debugAdTiming) {
|
|
1757
|
-
console.log(
|
|
1759
|
+
console.log(
|
|
1760
|
+
"[StormcloudVideoPlayer] Creating HLS ad player (AdStorm mode)"
|
|
1761
|
+
);
|
|
1758
1762
|
}
|
|
1759
1763
|
return createHlsAdPlayer(this.video, {
|
|
1760
1764
|
continueLiveStreamDuringAds,
|
|
@@ -1763,7 +1767,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1763
1767
|
});
|
|
1764
1768
|
} else {
|
|
1765
1769
|
if (this.config.debugAdTiming) {
|
|
1766
|
-
console.log(
|
|
1770
|
+
console.log(
|
|
1771
|
+
"[StormcloudVideoPlayer] Creating Google IMA ad player (Default mode)"
|
|
1772
|
+
);
|
|
1767
1773
|
}
|
|
1768
1774
|
return createImaController(this.video, {
|
|
1769
1775
|
continueLiveStreamDuringAds
|
|
@@ -1787,11 +1793,13 @@ var StormcloudVideoPlayer = class {
|
|
|
1787
1793
|
}
|
|
1788
1794
|
this.initializeTracking();
|
|
1789
1795
|
if (this.shouldUseNativeHls()) {
|
|
1796
|
+
this.nativeHlsMode = true;
|
|
1797
|
+
this.videoSrcProtection = this.config.src;
|
|
1790
1798
|
this.video.src = this.config.src;
|
|
1791
1799
|
this.isLiveStream = (_a = this.config.lowLatencyMode) != null ? _a : false;
|
|
1792
1800
|
if (this.config.debugAdTiming) {
|
|
1793
1801
|
console.log(
|
|
1794
|
-
"[StormcloudVideoPlayer]
|
|
1802
|
+
"[StormcloudVideoPlayer] Using native HLS playback - VOD mode:",
|
|
1795
1803
|
{
|
|
1796
1804
|
isLive: this.isLiveStream,
|
|
1797
1805
|
allowNativeHls: this.config.allowNativeHls,
|
|
@@ -1939,7 +1947,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1939
1947
|
this.ima.initialize();
|
|
1940
1948
|
this.ima.on("all_ads_completed", () => {
|
|
1941
1949
|
if (this.config.debugAdTiming) {
|
|
1942
|
-
console.log(
|
|
1950
|
+
console.log(
|
|
1951
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
1952
|
+
);
|
|
1943
1953
|
}
|
|
1944
1954
|
});
|
|
1945
1955
|
this.ima.on("ad_error", () => {
|
|
@@ -2004,13 +2014,31 @@ var StormcloudVideoPlayer = class {
|
|
|
2004
2014
|
this.video.addEventListener("timeupdate", () => {
|
|
2005
2015
|
this.onTimeUpdate(this.video.currentTime);
|
|
2006
2016
|
});
|
|
2017
|
+
this.video.addEventListener("emptied", () => {
|
|
2018
|
+
if (this.nativeHlsMode && this.videoSrcProtection && !this.ima.isAdPlaying()) {
|
|
2019
|
+
if (this.config.debugAdTiming) {
|
|
2020
|
+
console.log(
|
|
2021
|
+
"[StormcloudVideoPlayer] Video src was cleared, restoring:",
|
|
2022
|
+
this.videoSrcProtection
|
|
2023
|
+
);
|
|
2024
|
+
}
|
|
2025
|
+
const currentTime = this.video.currentTime;
|
|
2026
|
+
const wasPaused = this.video.paused;
|
|
2027
|
+
this.video.src = this.videoSrcProtection;
|
|
2028
|
+
this.video.currentTime = currentTime;
|
|
2029
|
+
if (!wasPaused) {
|
|
2030
|
+
this.video.play().catch(() => {
|
|
2031
|
+
});
|
|
2032
|
+
}
|
|
2033
|
+
}
|
|
2034
|
+
});
|
|
2007
2035
|
}
|
|
2008
2036
|
shouldUseNativeHls() {
|
|
2009
2037
|
const streamType = this.getStreamType();
|
|
2010
2038
|
if (streamType === "other") {
|
|
2011
2039
|
return true;
|
|
2012
2040
|
}
|
|
2013
|
-
const canNative = this.video.canPlayType("application/vnd.apple.
|
|
2041
|
+
const canNative = this.video.canPlayType("application/vnd.apple.mpegurl");
|
|
2014
2042
|
return !!(this.config.allowNativeHls && canNative);
|
|
2015
2043
|
}
|
|
2016
2044
|
onId3Tag(tag) {
|
|
@@ -2437,10 +2465,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2437
2465
|
var _a, _b, _c;
|
|
2438
2466
|
const vastMode = this.config.vastMode || "default";
|
|
2439
2467
|
if (this.config.debugAdTiming) {
|
|
2440
|
-
console.log(
|
|
2441
|
-
"[StormcloudVideoPlayer] VAST mode:",
|
|
2442
|
-
vastMode
|
|
2443
|
-
);
|
|
2468
|
+
console.log("[StormcloudVideoPlayer] VAST mode:", vastMode);
|
|
2444
2469
|
}
|
|
2445
2470
|
if (vastMode === "adstorm") {
|
|
2446
2471
|
if (!this.config.licenseKey) {
|
|
@@ -2558,10 +2583,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2558
2583
|
this.currentAdIndex = 0;
|
|
2559
2584
|
this.totalAdsInBreak = 1;
|
|
2560
2585
|
if (this.config.debugAdTiming) {
|
|
2561
|
-
console.log(
|
|
2562
|
-
"[StormcloudVideoPlayer] Using VAST endpoint:",
|
|
2563
|
-
vastTagUrl
|
|
2564
|
-
);
|
|
2586
|
+
console.log("[StormcloudVideoPlayer] Using VAST endpoint:", vastTagUrl);
|
|
2565
2587
|
}
|
|
2566
2588
|
} else if (tags && tags.length > 0) {
|
|
2567
2589
|
vastTagUrl = tags[0];
|
|
@@ -2713,15 +2735,21 @@ var StormcloudVideoPlayer = class {
|
|
|
2713
2735
|
await this.ima.requestAds(vastTagUrl);
|
|
2714
2736
|
try {
|
|
2715
2737
|
if (this.config.debugAdTiming) {
|
|
2716
|
-
console.log(
|
|
2738
|
+
console.log(
|
|
2739
|
+
"[StormcloudVideoPlayer] Ad request completed, attempting playback"
|
|
2740
|
+
);
|
|
2717
2741
|
}
|
|
2718
2742
|
await this.ima.play();
|
|
2719
2743
|
if (this.config.debugAdTiming) {
|
|
2720
|
-
console.log(
|
|
2744
|
+
console.log(
|
|
2745
|
+
"[StormcloudVideoPlayer] Ad playback started successfully"
|
|
2746
|
+
);
|
|
2721
2747
|
}
|
|
2722
2748
|
} catch (playError) {
|
|
2723
2749
|
if (this.config.debugAdTiming) {
|
|
2724
|
-
console.log(
|
|
2750
|
+
console.log(
|
|
2751
|
+
"[StormcloudVideoPlayer] No ads available, skipping playback"
|
|
2752
|
+
);
|
|
2725
2753
|
}
|
|
2726
2754
|
this.handleAdFailure();
|
|
2727
2755
|
return;
|
|
@@ -2777,7 +2805,9 @@ var StormcloudVideoPlayer = class {
|
|
|
2777
2805
|
});
|
|
2778
2806
|
} else {
|
|
2779
2807
|
if (this.config.debugAdTiming) {
|
|
2780
|
-
console.log(
|
|
2808
|
+
console.log(
|
|
2809
|
+
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
2810
|
+
);
|
|
2781
2811
|
}
|
|
2782
2812
|
}
|
|
2783
2813
|
}
|
|
@@ -2796,7 +2826,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2796
2826
|
if (this.config.debugAdTiming) {
|
|
2797
2827
|
console.warn(
|
|
2798
2828
|
"[StormcloudVideoPlayer] Failsafe timer triggered - forcing video resume",
|
|
2799
|
-
{
|
|
2829
|
+
{
|
|
2830
|
+
paused: this.video.paused,
|
|
2831
|
+
showAds: this.showAds,
|
|
2832
|
+
adPlaying: this.ima.isAdPlaying()
|
|
2833
|
+
}
|
|
2800
2834
|
);
|
|
2801
2835
|
}
|
|
2802
2836
|
this.handleAdFailure();
|
|
@@ -3001,6 +3035,19 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3001
3035
|
const [isBuffering, setIsBuffering] = React.useState(false);
|
|
3002
3036
|
const [showCenterPlay, setShowCenterPlay] = React.useState(false);
|
|
3003
3037
|
const [showLicenseWarning, setShowLicenseWarning] = React.useState(false);
|
|
3038
|
+
const [viewportWidth, setViewportWidth] = React.useState(
|
|
3039
|
+
typeof window !== "undefined" ? window.innerWidth : 1920
|
|
3040
|
+
);
|
|
3041
|
+
const [isPortrait, setIsPortrait] = React.useState(
|
|
3042
|
+
typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false
|
|
3043
|
+
);
|
|
3044
|
+
const getResponsiveScale = () => {
|
|
3045
|
+
if (viewportWidth < 480) return 0.7;
|
|
3046
|
+
if (viewportWidth < 768) return 0.8;
|
|
3047
|
+
if (viewportWidth < 1024) return 0.9;
|
|
3048
|
+
return 1;
|
|
3049
|
+
};
|
|
3050
|
+
const responsiveScale = getResponsiveScale();
|
|
3004
3051
|
const formatTime = (seconds) => {
|
|
3005
3052
|
if (!isFinite(seconds)) return "0:00:00";
|
|
3006
3053
|
const hours = Math.floor(seconds / 3600);
|
|
@@ -3009,10 +3056,20 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3009
3056
|
return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
|
|
3010
3057
|
};
|
|
3011
3058
|
const handlePlayPause = () => {
|
|
3059
|
+
var _a;
|
|
3012
3060
|
if (videoRef.current) {
|
|
3013
3061
|
if (videoRef.current.paused) {
|
|
3014
|
-
videoRef.current.
|
|
3015
|
-
|
|
3062
|
+
const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
|
|
3063
|
+
if (hasValidSource) {
|
|
3064
|
+
(_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
|
|
3065
|
+
console.error("[StormcloudVideoPlayer] Failed to play:", error);
|
|
3066
|
+
});
|
|
3067
|
+
setShowCenterPlay(false);
|
|
3068
|
+
} else {
|
|
3069
|
+
console.warn(
|
|
3070
|
+
"[StormcloudVideoPlayer] Cannot play: video has no valid source"
|
|
3071
|
+
);
|
|
3072
|
+
}
|
|
3016
3073
|
} else {
|
|
3017
3074
|
videoRef.current.pause();
|
|
3018
3075
|
setShowCenterPlay(true);
|
|
@@ -3020,9 +3077,19 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3020
3077
|
}
|
|
3021
3078
|
};
|
|
3022
3079
|
const handleCenterPlayClick = () => {
|
|
3080
|
+
var _a;
|
|
3023
3081
|
if (videoRef.current && videoRef.current.paused) {
|
|
3024
|
-
videoRef.current.
|
|
3025
|
-
|
|
3082
|
+
const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
|
|
3083
|
+
if (hasValidSource) {
|
|
3084
|
+
(_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
|
|
3085
|
+
console.error("[StormcloudVideoPlayer] Failed to play:", error);
|
|
3086
|
+
});
|
|
3087
|
+
setShowCenterPlay(false);
|
|
3088
|
+
} else {
|
|
3089
|
+
console.warn(
|
|
3090
|
+
"[StormcloudVideoPlayer] Cannot play: video has no valid source"
|
|
3091
|
+
);
|
|
3092
|
+
}
|
|
3026
3093
|
}
|
|
3027
3094
|
};
|
|
3028
3095
|
const handleTimelineSeek = (e) => {
|
|
@@ -3053,7 +3120,14 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3053
3120
|
const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
3054
3121
|
const criticalPropsKey = useMemo(() => {
|
|
3055
3122
|
return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
|
|
3056
|
-
}, [
|
|
3123
|
+
}, [
|
|
3124
|
+
src,
|
|
3125
|
+
allowNativeHls,
|
|
3126
|
+
licenseKey,
|
|
3127
|
+
lowLatencyMode,
|
|
3128
|
+
driftToleranceMs,
|
|
3129
|
+
vastMode
|
|
3130
|
+
]);
|
|
3057
3131
|
useEffect(() => {
|
|
3058
3132
|
if (typeof window === "undefined") return;
|
|
3059
3133
|
const el = videoRef.current;
|
|
@@ -3157,6 +3231,8 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3157
3231
|
playerRef.current.resize();
|
|
3158
3232
|
}
|
|
3159
3233
|
}
|
|
3234
|
+
setViewportWidth(window.innerWidth);
|
|
3235
|
+
setIsPortrait(window.innerHeight > window.innerWidth);
|
|
3160
3236
|
};
|
|
3161
3237
|
window.addEventListener("resize", handleResize);
|
|
3162
3238
|
return () => window.removeEventListener("resize", handleResize);
|
|
@@ -3473,14 +3549,14 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3473
3549
|
},
|
|
3474
3550
|
onMouseEnter: (e) => {
|
|
3475
3551
|
const target = e.currentTarget;
|
|
3476
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3552
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3477
3553
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
|
|
3478
3554
|
target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
3479
3555
|
target.style.borderColor = "rgba(255, 255, 255, 0.9)";
|
|
3480
3556
|
},
|
|
3481
3557
|
onMouseLeave: (e) => {
|
|
3482
3558
|
const target = e.currentTarget;
|
|
3483
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3559
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3484
3560
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
|
|
3485
3561
|
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
3486
3562
|
target.style.borderColor = "rgba(255, 255, 255, 0.8)";
|
|
@@ -3570,7 +3646,9 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3570
3646
|
display: "flex",
|
|
3571
3647
|
alignItems: "center",
|
|
3572
3648
|
justifyContent: "space-between",
|
|
3573
|
-
color: "white"
|
|
3649
|
+
color: "white",
|
|
3650
|
+
flexWrap: viewportWidth < 768 ? "wrap" : "nowrap",
|
|
3651
|
+
gap: `${8 * responsiveScale}px`
|
|
3574
3652
|
},
|
|
3575
3653
|
children: [
|
|
3576
3654
|
/* @__PURE__ */ jsxs(
|
|
@@ -3579,7 +3657,8 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3579
3657
|
style: {
|
|
3580
3658
|
display: "flex",
|
|
3581
3659
|
alignItems: "center",
|
|
3582
|
-
gap:
|
|
3660
|
+
gap: `${12 * responsiveScale}px`,
|
|
3661
|
+
flexWrap: viewportWidth < 480 ? "wrap" : "nowrap"
|
|
3583
3662
|
},
|
|
3584
3663
|
children: [
|
|
3585
3664
|
/* @__PURE__ */ jsx(
|
|
@@ -3587,44 +3666,42 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3587
3666
|
{
|
|
3588
3667
|
onClick: handlePlayPause,
|
|
3589
3668
|
style: {
|
|
3590
|
-
background: "linear-gradient(135deg, rgba(
|
|
3591
|
-
backdropFilter: "blur(
|
|
3592
|
-
border:
|
|
3669
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
3670
|
+
backdropFilter: "blur(12px)",
|
|
3671
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
3593
3672
|
color: "#ffffff",
|
|
3594
3673
|
cursor: "pointer",
|
|
3595
|
-
padding:
|
|
3596
|
-
borderRadius:
|
|
3674
|
+
padding: `${10 * responsiveScale}px`,
|
|
3675
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3597
3676
|
display: "flex",
|
|
3598
3677
|
alignItems: "center",
|
|
3599
3678
|
justifyContent: "center",
|
|
3600
3679
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3601
|
-
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.
|
|
3602
|
-
minWidth:
|
|
3603
|
-
minHeight:
|
|
3680
|
+
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
|
|
3681
|
+
minWidth: `${48 * responsiveScale}px`,
|
|
3682
|
+
minHeight: `${48 * responsiveScale}px`
|
|
3604
3683
|
},
|
|
3605
3684
|
onMouseEnter: (e) => {
|
|
3606
3685
|
const target = e.target;
|
|
3607
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3608
|
-
target.style.
|
|
3609
|
-
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
3686
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
3687
|
+
target.style.boxShadow = "0 12px 48px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
3610
3688
|
},
|
|
3611
3689
|
onMouseLeave: (e) => {
|
|
3612
3690
|
const target = e.target;
|
|
3613
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3614
|
-
target.style.
|
|
3615
|
-
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
3691
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
3692
|
+
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
3616
3693
|
},
|
|
3617
3694
|
title: isPlaying ? "Pause" : "Play",
|
|
3618
3695
|
children: isPlaying ? /* @__PURE__ */ jsx(
|
|
3619
3696
|
FaPause,
|
|
3620
3697
|
{
|
|
3621
|
-
size: 20,
|
|
3698
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3622
3699
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3623
3700
|
}
|
|
3624
3701
|
) : /* @__PURE__ */ jsx(
|
|
3625
3702
|
FaPlay,
|
|
3626
3703
|
{
|
|
3627
|
-
size: 20,
|
|
3704
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3628
3705
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3629
3706
|
}
|
|
3630
3707
|
)
|
|
@@ -3647,45 +3724,44 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3647
3724
|
"button",
|
|
3648
3725
|
{
|
|
3649
3726
|
onClick: () => {
|
|
3727
|
+
if (playerRef.current) {
|
|
3728
|
+
playerRef.current.toggleMute();
|
|
3729
|
+
}
|
|
3650
3730
|
if (onVolumeToggle) {
|
|
3651
3731
|
onVolumeToggle();
|
|
3652
|
-
} else if (playerRef.current) {
|
|
3653
|
-
playerRef.current.toggleMute();
|
|
3654
3732
|
}
|
|
3655
3733
|
},
|
|
3656
3734
|
style: {
|
|
3657
|
-
background: "linear-gradient(135deg, rgba(
|
|
3658
|
-
backdropFilter: "blur(
|
|
3659
|
-
border:
|
|
3660
|
-
color:
|
|
3735
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
3736
|
+
backdropFilter: "blur(10px)",
|
|
3737
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
3738
|
+
color: "#ffffff",
|
|
3661
3739
|
cursor: "pointer",
|
|
3662
|
-
padding:
|
|
3663
|
-
borderRadius:
|
|
3740
|
+
padding: `${8 * responsiveScale}px`,
|
|
3741
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3664
3742
|
display: "flex",
|
|
3665
3743
|
alignItems: "center",
|
|
3666
3744
|
justifyContent: "center",
|
|
3667
3745
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3668
|
-
boxShadow: "0 6px
|
|
3669
|
-
minWidth:
|
|
3670
|
-
minHeight:
|
|
3746
|
+
boxShadow: "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
|
|
3747
|
+
minWidth: `${44 * responsiveScale}px`,
|
|
3748
|
+
minHeight: `${44 * responsiveScale}px`
|
|
3671
3749
|
},
|
|
3672
3750
|
onMouseEnter: (e) => {
|
|
3673
3751
|
const target = e.target;
|
|
3674
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3675
|
-
target.style.
|
|
3676
|
-
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
3752
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
3753
|
+
target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
|
|
3677
3754
|
},
|
|
3678
3755
|
onMouseLeave: (e) => {
|
|
3679
3756
|
const target = e.target;
|
|
3680
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3681
|
-
target.style.
|
|
3682
|
-
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
3757
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
3758
|
+
target.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
|
|
3683
3759
|
},
|
|
3684
3760
|
title: isMuted ? "Unmute" : "Mute",
|
|
3685
3761
|
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
|
|
3686
3762
|
FaVolumeMute,
|
|
3687
3763
|
{
|
|
3688
|
-
size: 16,
|
|
3764
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3689
3765
|
style: {
|
|
3690
3766
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3691
3767
|
}
|
|
@@ -3693,7 +3769,7 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3693
3769
|
) : volume < 0.5 ? /* @__PURE__ */ jsx(
|
|
3694
3770
|
FaVolumeDown,
|
|
3695
3771
|
{
|
|
3696
|
-
size: 16,
|
|
3772
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3697
3773
|
style: {
|
|
3698
3774
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3699
3775
|
}
|
|
@@ -3701,7 +3777,7 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3701
3777
|
) : /* @__PURE__ */ jsx(
|
|
3702
3778
|
FaVolumeUp,
|
|
3703
3779
|
{
|
|
3704
|
-
size: 16,
|
|
3780
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3705
3781
|
style: {
|
|
3706
3782
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3707
3783
|
}
|
|
@@ -3752,13 +3828,11 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3752
3828
|
},
|
|
3753
3829
|
onMouseEnter: (e) => {
|
|
3754
3830
|
setShowVolumeSlider(true);
|
|
3755
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
3756
3831
|
e.currentTarget.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(59, 130, 246, 0.3)";
|
|
3757
3832
|
e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
|
|
3758
3833
|
},
|
|
3759
3834
|
onMouseLeave: (e) => {
|
|
3760
3835
|
setShowVolumeSlider(false);
|
|
3761
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
3762
3836
|
e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
|
|
3763
3837
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.15)";
|
|
3764
3838
|
},
|
|
@@ -3773,10 +3847,8 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3773
3847
|
transition: "transform 0.2s ease-in-out"
|
|
3774
3848
|
},
|
|
3775
3849
|
onMouseEnter: (e) => {
|
|
3776
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
3777
3850
|
},
|
|
3778
3851
|
onMouseLeave: (e) => {
|
|
3779
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
3780
3852
|
},
|
|
3781
3853
|
onMouseDown: (e) => {
|
|
3782
3854
|
e.preventDefault();
|
|
@@ -3789,11 +3861,23 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3789
3861
|
handleVolumeChange(percentage2);
|
|
3790
3862
|
};
|
|
3791
3863
|
const handleMouseUp = () => {
|
|
3792
|
-
document.removeEventListener(
|
|
3793
|
-
|
|
3864
|
+
document.removeEventListener(
|
|
3865
|
+
"mousemove",
|
|
3866
|
+
handleMouseMove
|
|
3867
|
+
);
|
|
3868
|
+
document.removeEventListener(
|
|
3869
|
+
"mouseup",
|
|
3870
|
+
handleMouseUp
|
|
3871
|
+
);
|
|
3794
3872
|
};
|
|
3795
|
-
document.addEventListener(
|
|
3796
|
-
|
|
3873
|
+
document.addEventListener(
|
|
3874
|
+
"mousemove",
|
|
3875
|
+
handleMouseMove
|
|
3876
|
+
);
|
|
3877
|
+
document.addEventListener(
|
|
3878
|
+
"mouseup",
|
|
3879
|
+
handleMouseUp
|
|
3880
|
+
);
|
|
3797
3881
|
const rect = sliderElement.getBoundingClientRect();
|
|
3798
3882
|
const y = e.clientY - rect.top;
|
|
3799
3883
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -3855,20 +3939,16 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3855
3939
|
cursor: "grab"
|
|
3856
3940
|
},
|
|
3857
3941
|
onMouseEnter: (e) => {
|
|
3858
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3859
3942
|
e.currentTarget.style.boxShadow = "0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.6)";
|
|
3860
3943
|
e.currentTarget.style.cursor = "grab";
|
|
3861
3944
|
},
|
|
3862
3945
|
onMouseLeave: (e) => {
|
|
3863
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
3864
3946
|
e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(59, 130, 246, 0.3), 0 0 12px rgba(59, 130, 246, 0.4)";
|
|
3865
3947
|
},
|
|
3866
3948
|
onMouseDown: (e) => {
|
|
3867
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.4)";
|
|
3868
3949
|
e.currentTarget.style.cursor = "grabbing";
|
|
3869
3950
|
},
|
|
3870
3951
|
onMouseUp: (e) => {
|
|
3871
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3872
3952
|
e.currentTarget.style.cursor = "grab";
|
|
3873
3953
|
}
|
|
3874
3954
|
}
|
|
@@ -3886,9 +3966,10 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3886
3966
|
"div",
|
|
3887
3967
|
{
|
|
3888
3968
|
style: {
|
|
3889
|
-
fontSize:
|
|
3969
|
+
fontSize: `${14 * responsiveScale}px`,
|
|
3890
3970
|
fontFamily: "monospace",
|
|
3891
|
-
color: "rgba(255, 255, 255, 0.9)"
|
|
3971
|
+
color: "rgba(255, 255, 255, 0.9)",
|
|
3972
|
+
display: viewportWidth < 480 ? "none" : "block"
|
|
3892
3973
|
},
|
|
3893
3974
|
children: [
|
|
3894
3975
|
formatTime(currentTime),
|
|
@@ -3906,105 +3987,113 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
3906
3987
|
style: {
|
|
3907
3988
|
display: "flex",
|
|
3908
3989
|
alignItems: "center",
|
|
3909
|
-
gap:
|
|
3990
|
+
gap: `${12 * responsiveScale}px`
|
|
3910
3991
|
},
|
|
3911
3992
|
children: [
|
|
3912
|
-
/* @__PURE__ */ jsxs(
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
{
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
const target = e.target;
|
|
3940
|
-
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
|
|
3941
|
-
target.style.transform = "translateY(0) scale(1)";
|
|
3942
|
-
target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
|
|
3943
|
-
},
|
|
3944
|
-
title: "Playback Speed",
|
|
3945
|
-
children: [
|
|
3946
|
-
playbackRate,
|
|
3947
|
-
"x"
|
|
3948
|
-
]
|
|
3949
|
-
}
|
|
3950
|
-
),
|
|
3951
|
-
showSpeedMenu && /* @__PURE__ */ jsx(
|
|
3952
|
-
"div",
|
|
3953
|
-
{
|
|
3954
|
-
style: {
|
|
3955
|
-
position: "absolute",
|
|
3956
|
-
bottom: "100%",
|
|
3957
|
-
right: 0,
|
|
3958
|
-
marginBottom: "12px",
|
|
3959
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
3960
|
-
backdropFilter: "blur(20px)",
|
|
3961
|
-
borderRadius: "12px",
|
|
3962
|
-
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
3963
|
-
overflow: "hidden",
|
|
3964
|
-
minWidth: "90px",
|
|
3965
|
-
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
3966
|
-
},
|
|
3967
|
-
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
3968
|
-
(speed) => /* @__PURE__ */ jsxs(
|
|
3969
|
-
"button",
|
|
3970
|
-
{
|
|
3971
|
-
onClick: () => handlePlaybackRateChange(speed),
|
|
3972
|
-
style: {
|
|
3973
|
-
display: "block",
|
|
3974
|
-
width: "100%",
|
|
3975
|
-
padding: "10px 16px",
|
|
3976
|
-
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
3977
|
-
border: "none",
|
|
3978
|
-
color: "white",
|
|
3979
|
-
cursor: "pointer",
|
|
3980
|
-
fontSize: "13px",
|
|
3981
|
-
fontFamily: "monospace",
|
|
3982
|
-
fontWeight: "600",
|
|
3983
|
-
textAlign: "center",
|
|
3984
|
-
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3985
|
-
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
3986
|
-
},
|
|
3987
|
-
onMouseEnter: (e) => {
|
|
3988
|
-
if (playbackRate !== speed) {
|
|
3989
|
-
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
3990
|
-
}
|
|
3991
|
-
},
|
|
3992
|
-
onMouseLeave: (e) => {
|
|
3993
|
-
if (playbackRate !== speed) {
|
|
3994
|
-
e.target.style.background = "transparent";
|
|
3995
|
-
}
|
|
3996
|
-
},
|
|
3997
|
-
children: [
|
|
3998
|
-
speed,
|
|
3999
|
-
"x"
|
|
4000
|
-
]
|
|
3993
|
+
/* @__PURE__ */ jsxs(
|
|
3994
|
+
"div",
|
|
3995
|
+
{
|
|
3996
|
+
style: {
|
|
3997
|
+
position: "relative",
|
|
3998
|
+
display: viewportWidth < 600 ? "none" : "block"
|
|
3999
|
+
},
|
|
4000
|
+
children: [
|
|
4001
|
+
/* @__PURE__ */ jsxs(
|
|
4002
|
+
"button",
|
|
4003
|
+
{
|
|
4004
|
+
onClick: () => setShowSpeedMenu(!showSpeedMenu),
|
|
4005
|
+
style: {
|
|
4006
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
4007
|
+
backdropFilter: "blur(10px)",
|
|
4008
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
4009
|
+
color: "#ffffff",
|
|
4010
|
+
cursor: "pointer",
|
|
4011
|
+
padding: `${8 * responsiveScale}px ${14 * responsiveScale}px`,
|
|
4012
|
+
borderRadius: `${14 * responsiveScale}px`,
|
|
4013
|
+
fontSize: `${14 * responsiveScale}px`,
|
|
4014
|
+
fontFamily: "monospace",
|
|
4015
|
+
fontWeight: "700",
|
|
4016
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4017
|
+
boxShadow: "0 6px 24px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
|
|
4018
|
+
minWidth: `${56 * responsiveScale}px`,
|
|
4019
|
+
minHeight: `${40 * responsiveScale}px`
|
|
4001
4020
|
},
|
|
4002
|
-
|
|
4003
|
-
|
|
4021
|
+
onMouseEnter: (e) => {
|
|
4022
|
+
const target = e.target;
|
|
4023
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
4024
|
+
target.style.boxShadow = "0 10px 32px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
|
|
4025
|
+
},
|
|
4026
|
+
onMouseLeave: (e) => {
|
|
4027
|
+
const target = e.target;
|
|
4028
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
4029
|
+
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
|
|
4030
|
+
},
|
|
4031
|
+
title: "Playback Speed",
|
|
4032
|
+
children: [
|
|
4033
|
+
playbackRate,
|
|
4034
|
+
"x"
|
|
4035
|
+
]
|
|
4036
|
+
}
|
|
4037
|
+
),
|
|
4038
|
+
showSpeedMenu && /* @__PURE__ */ jsx(
|
|
4039
|
+
"div",
|
|
4040
|
+
{
|
|
4041
|
+
style: {
|
|
4042
|
+
position: "absolute",
|
|
4043
|
+
bottom: "100%",
|
|
4044
|
+
right: 0,
|
|
4045
|
+
marginBottom: "12px",
|
|
4046
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
4047
|
+
backdropFilter: "blur(20px)",
|
|
4048
|
+
borderRadius: "12px",
|
|
4049
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
4050
|
+
overflow: "hidden",
|
|
4051
|
+
minWidth: "90px",
|
|
4052
|
+
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
4053
|
+
},
|
|
4054
|
+
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
4055
|
+
(speed) => /* @__PURE__ */ jsxs(
|
|
4056
|
+
"button",
|
|
4057
|
+
{
|
|
4058
|
+
onClick: () => handlePlaybackRateChange(speed),
|
|
4059
|
+
style: {
|
|
4060
|
+
display: "block",
|
|
4061
|
+
width: "100%",
|
|
4062
|
+
padding: "10px 16px",
|
|
4063
|
+
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
4064
|
+
border: "none",
|
|
4065
|
+
color: "white",
|
|
4066
|
+
cursor: "pointer",
|
|
4067
|
+
fontSize: "13px",
|
|
4068
|
+
fontFamily: "monospace",
|
|
4069
|
+
fontWeight: "600",
|
|
4070
|
+
textAlign: "center",
|
|
4071
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4072
|
+
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
4073
|
+
},
|
|
4074
|
+
onMouseEnter: (e) => {
|
|
4075
|
+
if (playbackRate !== speed) {
|
|
4076
|
+
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
4077
|
+
}
|
|
4078
|
+
},
|
|
4079
|
+
onMouseLeave: (e) => {
|
|
4080
|
+
if (playbackRate !== speed) {
|
|
4081
|
+
e.target.style.background = "transparent";
|
|
4082
|
+
}
|
|
4083
|
+
},
|
|
4084
|
+
children: [
|
|
4085
|
+
speed,
|
|
4086
|
+
"x"
|
|
4087
|
+
]
|
|
4088
|
+
},
|
|
4089
|
+
speed
|
|
4090
|
+
)
|
|
4091
|
+
)
|
|
4092
|
+
}
|
|
4004
4093
|
)
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4094
|
+
]
|
|
4095
|
+
}
|
|
4096
|
+
),
|
|
4008
4097
|
/* @__PURE__ */ jsx(
|
|
4009
4098
|
"button",
|
|
4010
4099
|
{
|
|
@@ -4018,44 +4107,42 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4018
4107
|
}
|
|
4019
4108
|
},
|
|
4020
4109
|
style: {
|
|
4021
|
-
background: "linear-gradient(135deg, rgba(
|
|
4022
|
-
backdropFilter: "blur(
|
|
4023
|
-
border:
|
|
4110
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
4111
|
+
backdropFilter: "blur(10px)",
|
|
4112
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
4024
4113
|
color: "#ffffff",
|
|
4025
4114
|
cursor: "pointer",
|
|
4026
|
-
padding:
|
|
4027
|
-
borderRadius:
|
|
4115
|
+
padding: `${8 * responsiveScale}px`,
|
|
4116
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
4028
4117
|
display: "flex",
|
|
4029
4118
|
alignItems: "center",
|
|
4030
4119
|
justifyContent: "center",
|
|
4031
4120
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4032
|
-
boxShadow: "0 6px
|
|
4033
|
-
minWidth:
|
|
4034
|
-
minHeight:
|
|
4121
|
+
boxShadow: "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
|
|
4122
|
+
minWidth: `${44 * responsiveScale}px`,
|
|
4123
|
+
minHeight: `${44 * responsiveScale}px`
|
|
4035
4124
|
},
|
|
4036
4125
|
onMouseEnter: (e) => {
|
|
4037
4126
|
const target = e.target;
|
|
4038
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4039
|
-
target.style.
|
|
4040
|
-
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
4127
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
4128
|
+
target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
|
|
4041
4129
|
},
|
|
4042
4130
|
onMouseLeave: (e) => {
|
|
4043
4131
|
const target = e.target;
|
|
4044
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4045
|
-
target.style.
|
|
4046
|
-
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
4132
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
4133
|
+
target.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
|
|
4047
4134
|
},
|
|
4048
4135
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4049
4136
|
children: isFullscreen ? /* @__PURE__ */ jsx(
|
|
4050
4137
|
FaCompress,
|
|
4051
4138
|
{
|
|
4052
|
-
size: 16,
|
|
4139
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4053
4140
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4054
4141
|
}
|
|
4055
4142
|
) : /* @__PURE__ */ jsx(
|
|
4056
4143
|
FaExpand,
|
|
4057
4144
|
{
|
|
4058
|
-
size: 16,
|
|
4145
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4059
4146
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4060
4147
|
}
|
|
4061
4148
|
)
|
|
@@ -4074,10 +4161,12 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4074
4161
|
{
|
|
4075
4162
|
style: {
|
|
4076
4163
|
position: "absolute",
|
|
4077
|
-
bottom:
|
|
4078
|
-
right:
|
|
4164
|
+
bottom: `${10 * responsiveScale}px`,
|
|
4165
|
+
right: `${10 * responsiveScale}px`,
|
|
4166
|
+
transform: "none",
|
|
4079
4167
|
display: "flex",
|
|
4080
|
-
|
|
4168
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
4169
|
+
gap: `${10 * responsiveScale}px`,
|
|
4081
4170
|
zIndex: 10
|
|
4082
4171
|
},
|
|
4083
4172
|
children: [
|
|
@@ -4098,45 +4187,44 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4098
4187
|
"button",
|
|
4099
4188
|
{
|
|
4100
4189
|
onClick: () => {
|
|
4190
|
+
if (playerRef.current) {
|
|
4191
|
+
playerRef.current.toggleMute();
|
|
4192
|
+
}
|
|
4101
4193
|
if (onVolumeToggle) {
|
|
4102
4194
|
onVolumeToggle();
|
|
4103
|
-
} else if (playerRef.current) {
|
|
4104
|
-
playerRef.current.toggleMute();
|
|
4105
4195
|
}
|
|
4106
4196
|
},
|
|
4107
4197
|
onMouseEnter: (e) => {
|
|
4108
4198
|
const target = e.currentTarget;
|
|
4109
|
-
target.style.
|
|
4110
|
-
target.style.
|
|
4111
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
4199
|
+
target.style.boxShadow = "0 14px 48px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
4200
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
4112
4201
|
},
|
|
4113
4202
|
onMouseLeave: (e) => {
|
|
4114
4203
|
const target = e.currentTarget;
|
|
4115
|
-
target.style.
|
|
4116
|
-
target.style.
|
|
4117
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
4204
|
+
target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
4205
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
4118
4206
|
},
|
|
4119
4207
|
style: {
|
|
4120
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
4121
|
-
color:
|
|
4208
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
4209
|
+
color: "#ffffff",
|
|
4122
4210
|
border: "none",
|
|
4123
|
-
borderRadius:
|
|
4124
|
-
padding:
|
|
4211
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4212
|
+
padding: `${8 * responsiveScale}px`,
|
|
4125
4213
|
cursor: "pointer",
|
|
4126
4214
|
display: "flex",
|
|
4127
4215
|
alignItems: "center",
|
|
4128
4216
|
justifyContent: "center",
|
|
4129
4217
|
backdropFilter: "blur(20px)",
|
|
4130
|
-
boxShadow: "0
|
|
4218
|
+
boxShadow: "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
|
|
4131
4219
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4132
|
-
minWidth:
|
|
4133
|
-
minHeight:
|
|
4220
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4221
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4134
4222
|
},
|
|
4135
4223
|
title: isMuted ? "Unmute" : "Mute",
|
|
4136
4224
|
children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
|
|
4137
4225
|
FaVolumeMute,
|
|
4138
4226
|
{
|
|
4139
|
-
size: 16,
|
|
4227
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4140
4228
|
style: {
|
|
4141
4229
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4142
4230
|
color: "#ffffff"
|
|
@@ -4145,7 +4233,7 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4145
4233
|
) : volume < 0.5 ? /* @__PURE__ */ jsx(
|
|
4146
4234
|
FaVolumeDown,
|
|
4147
4235
|
{
|
|
4148
|
-
size: 16,
|
|
4236
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4149
4237
|
style: {
|
|
4150
4238
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4151
4239
|
color: "#ffffff"
|
|
@@ -4154,7 +4242,7 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4154
4242
|
) : /* @__PURE__ */ jsx(
|
|
4155
4243
|
FaVolumeUp,
|
|
4156
4244
|
{
|
|
4157
|
-
size: 16,
|
|
4245
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4158
4246
|
style: {
|
|
4159
4247
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4160
4248
|
color: "#ffffff"
|
|
@@ -4206,13 +4294,11 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4206
4294
|
},
|
|
4207
4295
|
onMouseEnter: (e) => {
|
|
4208
4296
|
setShowVolumeSlider(true);
|
|
4209
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
4210
4297
|
e.currentTarget.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), 0 6px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 24px rgba(96, 165, 250, 0.4)";
|
|
4211
4298
|
e.currentTarget.style.borderColor = "rgba(96, 165, 250, 0.8)";
|
|
4212
4299
|
},
|
|
4213
4300
|
onMouseLeave: (e) => {
|
|
4214
4301
|
setShowVolumeSlider(false);
|
|
4215
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
4216
4302
|
e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35)";
|
|
4217
4303
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.7)";
|
|
4218
4304
|
},
|
|
@@ -4226,12 +4312,6 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4226
4312
|
cursor: "pointer",
|
|
4227
4313
|
transition: "transform 0.2s ease-in-out"
|
|
4228
4314
|
},
|
|
4229
|
-
onMouseEnter: (e) => {
|
|
4230
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
4231
|
-
},
|
|
4232
|
-
onMouseLeave: (e) => {
|
|
4233
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
4234
|
-
},
|
|
4235
4315
|
onMouseDown: (e) => {
|
|
4236
4316
|
e.preventDefault();
|
|
4237
4317
|
const sliderElement = e.currentTarget;
|
|
@@ -4243,11 +4323,23 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4243
4323
|
handleVolumeChange(percentage2);
|
|
4244
4324
|
};
|
|
4245
4325
|
const handleMouseUp = () => {
|
|
4246
|
-
document.removeEventListener(
|
|
4247
|
-
|
|
4326
|
+
document.removeEventListener(
|
|
4327
|
+
"mousemove",
|
|
4328
|
+
handleMouseMove
|
|
4329
|
+
);
|
|
4330
|
+
document.removeEventListener(
|
|
4331
|
+
"mouseup",
|
|
4332
|
+
handleMouseUp
|
|
4333
|
+
);
|
|
4248
4334
|
};
|
|
4249
|
-
document.addEventListener(
|
|
4250
|
-
|
|
4335
|
+
document.addEventListener(
|
|
4336
|
+
"mousemove",
|
|
4337
|
+
handleMouseMove
|
|
4338
|
+
);
|
|
4339
|
+
document.addEventListener(
|
|
4340
|
+
"mouseup",
|
|
4341
|
+
handleMouseUp
|
|
4342
|
+
);
|
|
4251
4343
|
const rect = sliderElement.getBoundingClientRect();
|
|
4252
4344
|
const y = e.clientY - rect.top;
|
|
4253
4345
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -4311,20 +4403,16 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4311
4403
|
cursor: "grab"
|
|
4312
4404
|
},
|
|
4313
4405
|
onMouseEnter: (e) => {
|
|
4314
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4315
4406
|
e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(96, 165, 250, 0.6), 0 0 24px rgba(96, 165, 250, 0.7)";
|
|
4316
4407
|
e.currentTarget.style.cursor = "grab";
|
|
4317
4408
|
},
|
|
4318
4409
|
onMouseLeave: (e) => {
|
|
4319
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
4320
4410
|
e.currentTarget.style.boxShadow = "0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(96, 165, 250, 0.4), 0 0 16px rgba(96, 165, 250, 0.5)";
|
|
4321
4411
|
},
|
|
4322
4412
|
onMouseDown: (e) => {
|
|
4323
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.45)";
|
|
4324
4413
|
e.currentTarget.style.cursor = "grabbing";
|
|
4325
4414
|
},
|
|
4326
4415
|
onMouseUp: (e) => {
|
|
4327
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4328
4416
|
e.currentTarget.style.cursor = "grab";
|
|
4329
4417
|
}
|
|
4330
4418
|
}
|
|
@@ -4352,37 +4440,35 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4352
4440
|
},
|
|
4353
4441
|
onMouseEnter: (e) => {
|
|
4354
4442
|
const target = e.currentTarget;
|
|
4355
|
-
target.style.
|
|
4356
|
-
target.style.
|
|
4357
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
4443
|
+
target.style.boxShadow = "0 14px 48px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
4444
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
4358
4445
|
},
|
|
4359
4446
|
onMouseLeave: (e) => {
|
|
4360
4447
|
const target = e.currentTarget;
|
|
4361
|
-
target.style.
|
|
4362
|
-
target.style.
|
|
4363
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
4448
|
+
target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
4449
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
4364
4450
|
},
|
|
4365
4451
|
style: {
|
|
4366
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
4452
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
4367
4453
|
color: "#ffffff",
|
|
4368
4454
|
border: "none",
|
|
4369
|
-
borderRadius:
|
|
4370
|
-
padding:
|
|
4455
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4456
|
+
padding: `${8 * responsiveScale}px`,
|
|
4371
4457
|
cursor: "pointer",
|
|
4372
4458
|
display: "flex",
|
|
4373
4459
|
alignItems: "center",
|
|
4374
4460
|
justifyContent: "center",
|
|
4375
4461
|
backdropFilter: "blur(20px)",
|
|
4376
|
-
boxShadow: "0
|
|
4462
|
+
boxShadow: "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
|
|
4377
4463
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4378
|
-
minWidth:
|
|
4379
|
-
minHeight:
|
|
4464
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4465
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4380
4466
|
},
|
|
4381
4467
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4382
4468
|
children: isFullscreen ? /* @__PURE__ */ jsx(
|
|
4383
4469
|
FaCompress,
|
|
4384
4470
|
{
|
|
4385
|
-
size: 16,
|
|
4471
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4386
4472
|
style: {
|
|
4387
4473
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4388
4474
|
color: "#ffffff"
|
|
@@ -4391,7 +4477,7 @@ var StormcloudVideoPlayerComponent = React.memo(
|
|
|
4391
4477
|
) : /* @__PURE__ */ jsx(
|
|
4392
4478
|
FaExpand,
|
|
4393
4479
|
{
|
|
4394
|
-
size: 16,
|
|
4480
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4395
4481
|
style: {
|
|
4396
4482
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4397
4483
|
color: "#ffffff"
|
|
@@ -4681,10 +4767,20 @@ var HlsPlayer = class extends Component {
|
|
|
4681
4767
|
}
|
|
4682
4768
|
};
|
|
4683
4769
|
this.play = () => {
|
|
4684
|
-
var _a, _b;
|
|
4770
|
+
var _a, _b, _c;
|
|
4685
4771
|
if (this.props.videoElement) {
|
|
4686
|
-
this.props.videoElement
|
|
4687
|
-
|
|
4772
|
+
const video = this.props.videoElement;
|
|
4773
|
+
const hasValidSource = video.src || video.currentSrc && video.currentSrc !== "" || video.readyState >= 1;
|
|
4774
|
+
if (hasValidSource) {
|
|
4775
|
+
(_a = video.play()) == null ? void 0 : _a.catch((error) => {
|
|
4776
|
+
var _a2, _b2;
|
|
4777
|
+
console.error("[HlsPlayer] Failed to play:", error);
|
|
4778
|
+
(_b2 = (_a2 = this.props).onError) == null ? void 0 : _b2.call(_a2, error);
|
|
4779
|
+
});
|
|
4780
|
+
(_c = (_b = this.props).onPlay) == null ? void 0 : _c.call(_b);
|
|
4781
|
+
} else {
|
|
4782
|
+
console.warn("[HlsPlayer] Cannot play: video has no valid source");
|
|
4783
|
+
}
|
|
4688
4784
|
}
|
|
4689
4785
|
};
|
|
4690
4786
|
this.pause = () => {
|
|
@@ -4853,8 +4949,19 @@ var FilePlayer = class extends Component2 {
|
|
|
4853
4949
|
};
|
|
4854
4950
|
};
|
|
4855
4951
|
this.play = () => {
|
|
4952
|
+
var _a;
|
|
4856
4953
|
if (this.props.videoElement) {
|
|
4857
|
-
this.props.videoElement
|
|
4954
|
+
const video = this.props.videoElement;
|
|
4955
|
+
const hasValidSource = video.src || video.currentSrc && video.currentSrc !== "" || video.readyState >= 1;
|
|
4956
|
+
if (hasValidSource) {
|
|
4957
|
+
(_a = video.play()) == null ? void 0 : _a.catch((error) => {
|
|
4958
|
+
var _a2, _b;
|
|
4959
|
+
console.error("[FilePlayer] Failed to play:", error);
|
|
4960
|
+
(_b = (_a2 = this.props).onError) == null ? void 0 : _b.call(_a2, error);
|
|
4961
|
+
});
|
|
4962
|
+
} else {
|
|
4963
|
+
console.warn("[FilePlayer] Cannot play: video has no valid source");
|
|
4964
|
+
}
|
|
4858
4965
|
}
|
|
4859
4966
|
};
|
|
4860
4967
|
this.pause = () => {
|