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
|
@@ -1739,6 +1739,8 @@ var StormcloudVideoPlayer = class {
|
|
|
1739
1739
|
this.totalAdsInBreak = 0;
|
|
1740
1740
|
this.showAds = false;
|
|
1741
1741
|
this.isLiveStream = false;
|
|
1742
|
+
this.nativeHlsMode = false;
|
|
1743
|
+
this.videoSrcProtection = null;
|
|
1742
1744
|
initializePolyfills();
|
|
1743
1745
|
const browserOverrides = getBrowserConfigOverrides();
|
|
1744
1746
|
this.config = { ...config, ...browserOverrides };
|
|
@@ -1759,7 +1761,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1759
1761
|
}
|
|
1760
1762
|
if (adPlayerType === "hls") {
|
|
1761
1763
|
if (this.config.debugAdTiming) {
|
|
1762
|
-
console.log(
|
|
1764
|
+
console.log(
|
|
1765
|
+
"[StormcloudVideoPlayer] Creating HLS ad player (AdStorm mode)"
|
|
1766
|
+
);
|
|
1763
1767
|
}
|
|
1764
1768
|
return createHlsAdPlayer(this.video, {
|
|
1765
1769
|
continueLiveStreamDuringAds,
|
|
@@ -1768,7 +1772,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1768
1772
|
});
|
|
1769
1773
|
} else {
|
|
1770
1774
|
if (this.config.debugAdTiming) {
|
|
1771
|
-
console.log(
|
|
1775
|
+
console.log(
|
|
1776
|
+
"[StormcloudVideoPlayer] Creating Google IMA ad player (Default mode)"
|
|
1777
|
+
);
|
|
1772
1778
|
}
|
|
1773
1779
|
return createImaController(this.video, {
|
|
1774
1780
|
continueLiveStreamDuringAds
|
|
@@ -1792,11 +1798,13 @@ var StormcloudVideoPlayer = class {
|
|
|
1792
1798
|
}
|
|
1793
1799
|
this.initializeTracking();
|
|
1794
1800
|
if (this.shouldUseNativeHls()) {
|
|
1801
|
+
this.nativeHlsMode = true;
|
|
1802
|
+
this.videoSrcProtection = this.config.src;
|
|
1795
1803
|
this.video.src = this.config.src;
|
|
1796
1804
|
this.isLiveStream = (_a = this.config.lowLatencyMode) != null ? _a : false;
|
|
1797
1805
|
if (this.config.debugAdTiming) {
|
|
1798
1806
|
console.log(
|
|
1799
|
-
"[StormcloudVideoPlayer]
|
|
1807
|
+
"[StormcloudVideoPlayer] Using native HLS playback - VOD mode:",
|
|
1800
1808
|
{
|
|
1801
1809
|
isLive: this.isLiveStream,
|
|
1802
1810
|
allowNativeHls: this.config.allowNativeHls,
|
|
@@ -1944,7 +1952,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1944
1952
|
this.ima.initialize();
|
|
1945
1953
|
this.ima.on("all_ads_completed", () => {
|
|
1946
1954
|
if (this.config.debugAdTiming) {
|
|
1947
|
-
console.log(
|
|
1955
|
+
console.log(
|
|
1956
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
1957
|
+
);
|
|
1948
1958
|
}
|
|
1949
1959
|
});
|
|
1950
1960
|
this.ima.on("ad_error", () => {
|
|
@@ -2009,13 +2019,31 @@ var StormcloudVideoPlayer = class {
|
|
|
2009
2019
|
this.video.addEventListener("timeupdate", () => {
|
|
2010
2020
|
this.onTimeUpdate(this.video.currentTime);
|
|
2011
2021
|
});
|
|
2022
|
+
this.video.addEventListener("emptied", () => {
|
|
2023
|
+
if (this.nativeHlsMode && this.videoSrcProtection && !this.ima.isAdPlaying()) {
|
|
2024
|
+
if (this.config.debugAdTiming) {
|
|
2025
|
+
console.log(
|
|
2026
|
+
"[StormcloudVideoPlayer] Video src was cleared, restoring:",
|
|
2027
|
+
this.videoSrcProtection
|
|
2028
|
+
);
|
|
2029
|
+
}
|
|
2030
|
+
const currentTime = this.video.currentTime;
|
|
2031
|
+
const wasPaused = this.video.paused;
|
|
2032
|
+
this.video.src = this.videoSrcProtection;
|
|
2033
|
+
this.video.currentTime = currentTime;
|
|
2034
|
+
if (!wasPaused) {
|
|
2035
|
+
this.video.play().catch(() => {
|
|
2036
|
+
});
|
|
2037
|
+
}
|
|
2038
|
+
}
|
|
2039
|
+
});
|
|
2012
2040
|
}
|
|
2013
2041
|
shouldUseNativeHls() {
|
|
2014
2042
|
const streamType = this.getStreamType();
|
|
2015
2043
|
if (streamType === "other") {
|
|
2016
2044
|
return true;
|
|
2017
2045
|
}
|
|
2018
|
-
const canNative = this.video.canPlayType("application/vnd.apple.
|
|
2046
|
+
const canNative = this.video.canPlayType("application/vnd.apple.mpegurl");
|
|
2019
2047
|
return !!(this.config.allowNativeHls && canNative);
|
|
2020
2048
|
}
|
|
2021
2049
|
onId3Tag(tag) {
|
|
@@ -2442,10 +2470,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2442
2470
|
var _a, _b, _c;
|
|
2443
2471
|
const vastMode = this.config.vastMode || "default";
|
|
2444
2472
|
if (this.config.debugAdTiming) {
|
|
2445
|
-
console.log(
|
|
2446
|
-
"[StormcloudVideoPlayer] VAST mode:",
|
|
2447
|
-
vastMode
|
|
2448
|
-
);
|
|
2473
|
+
console.log("[StormcloudVideoPlayer] VAST mode:", vastMode);
|
|
2449
2474
|
}
|
|
2450
2475
|
if (vastMode === "adstorm") {
|
|
2451
2476
|
if (!this.config.licenseKey) {
|
|
@@ -2563,10 +2588,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2563
2588
|
this.currentAdIndex = 0;
|
|
2564
2589
|
this.totalAdsInBreak = 1;
|
|
2565
2590
|
if (this.config.debugAdTiming) {
|
|
2566
|
-
console.log(
|
|
2567
|
-
"[StormcloudVideoPlayer] Using VAST endpoint:",
|
|
2568
|
-
vastTagUrl
|
|
2569
|
-
);
|
|
2591
|
+
console.log("[StormcloudVideoPlayer] Using VAST endpoint:", vastTagUrl);
|
|
2570
2592
|
}
|
|
2571
2593
|
} else if (tags && tags.length > 0) {
|
|
2572
2594
|
vastTagUrl = tags[0];
|
|
@@ -2718,15 +2740,21 @@ var StormcloudVideoPlayer = class {
|
|
|
2718
2740
|
await this.ima.requestAds(vastTagUrl);
|
|
2719
2741
|
try {
|
|
2720
2742
|
if (this.config.debugAdTiming) {
|
|
2721
|
-
console.log(
|
|
2743
|
+
console.log(
|
|
2744
|
+
"[StormcloudVideoPlayer] Ad request completed, attempting playback"
|
|
2745
|
+
);
|
|
2722
2746
|
}
|
|
2723
2747
|
await this.ima.play();
|
|
2724
2748
|
if (this.config.debugAdTiming) {
|
|
2725
|
-
console.log(
|
|
2749
|
+
console.log(
|
|
2750
|
+
"[StormcloudVideoPlayer] Ad playback started successfully"
|
|
2751
|
+
);
|
|
2726
2752
|
}
|
|
2727
2753
|
} catch (playError) {
|
|
2728
2754
|
if (this.config.debugAdTiming) {
|
|
2729
|
-
console.log(
|
|
2755
|
+
console.log(
|
|
2756
|
+
"[StormcloudVideoPlayer] No ads available, skipping playback"
|
|
2757
|
+
);
|
|
2730
2758
|
}
|
|
2731
2759
|
this.handleAdFailure();
|
|
2732
2760
|
return;
|
|
@@ -2782,7 +2810,9 @@ var StormcloudVideoPlayer = class {
|
|
|
2782
2810
|
});
|
|
2783
2811
|
} else {
|
|
2784
2812
|
if (this.config.debugAdTiming) {
|
|
2785
|
-
console.log(
|
|
2813
|
+
console.log(
|
|
2814
|
+
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
2815
|
+
);
|
|
2786
2816
|
}
|
|
2787
2817
|
}
|
|
2788
2818
|
}
|
|
@@ -2801,7 +2831,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2801
2831
|
if (this.config.debugAdTiming) {
|
|
2802
2832
|
console.warn(
|
|
2803
2833
|
"[StormcloudVideoPlayer] Failsafe timer triggered - forcing video resume",
|
|
2804
|
-
{
|
|
2834
|
+
{
|
|
2835
|
+
paused: this.video.paused,
|
|
2836
|
+
showAds: this.showAds,
|
|
2837
|
+
adPlaying: this.ima.isAdPlaying()
|
|
2838
|
+
}
|
|
2805
2839
|
);
|
|
2806
2840
|
}
|
|
2807
2841
|
this.handleAdFailure();
|
|
@@ -2997,6 +3031,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2997
3031
|
const [isBuffering, setIsBuffering] = import_react.default.useState(false);
|
|
2998
3032
|
const [showCenterPlay, setShowCenterPlay] = import_react.default.useState(false);
|
|
2999
3033
|
const [showLicenseWarning, setShowLicenseWarning] = import_react.default.useState(false);
|
|
3034
|
+
const [viewportWidth, setViewportWidth] = import_react.default.useState(
|
|
3035
|
+
typeof window !== "undefined" ? window.innerWidth : 1920
|
|
3036
|
+
);
|
|
3037
|
+
const [isPortrait, setIsPortrait] = import_react.default.useState(
|
|
3038
|
+
typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false
|
|
3039
|
+
);
|
|
3040
|
+
const getResponsiveScale = () => {
|
|
3041
|
+
if (viewportWidth < 480) return 0.7;
|
|
3042
|
+
if (viewportWidth < 768) return 0.8;
|
|
3043
|
+
if (viewportWidth < 1024) return 0.9;
|
|
3044
|
+
return 1;
|
|
3045
|
+
};
|
|
3046
|
+
const responsiveScale = getResponsiveScale();
|
|
3000
3047
|
const formatTime = (seconds) => {
|
|
3001
3048
|
if (!isFinite(seconds)) return "0:00:00";
|
|
3002
3049
|
const hours = Math.floor(seconds / 3600);
|
|
@@ -3005,10 +3052,20 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3005
3052
|
return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
|
|
3006
3053
|
};
|
|
3007
3054
|
const handlePlayPause = () => {
|
|
3055
|
+
var _a;
|
|
3008
3056
|
if (videoRef.current) {
|
|
3009
3057
|
if (videoRef.current.paused) {
|
|
3010
|
-
videoRef.current.
|
|
3011
|
-
|
|
3058
|
+
const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
|
|
3059
|
+
if (hasValidSource) {
|
|
3060
|
+
(_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
|
|
3061
|
+
console.error("[StormcloudVideoPlayer] Failed to play:", error);
|
|
3062
|
+
});
|
|
3063
|
+
setShowCenterPlay(false);
|
|
3064
|
+
} else {
|
|
3065
|
+
console.warn(
|
|
3066
|
+
"[StormcloudVideoPlayer] Cannot play: video has no valid source"
|
|
3067
|
+
);
|
|
3068
|
+
}
|
|
3012
3069
|
} else {
|
|
3013
3070
|
videoRef.current.pause();
|
|
3014
3071
|
setShowCenterPlay(true);
|
|
@@ -3016,9 +3073,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3016
3073
|
}
|
|
3017
3074
|
};
|
|
3018
3075
|
const handleCenterPlayClick = () => {
|
|
3076
|
+
var _a;
|
|
3019
3077
|
if (videoRef.current && videoRef.current.paused) {
|
|
3020
|
-
videoRef.current.
|
|
3021
|
-
|
|
3078
|
+
const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
|
|
3079
|
+
if (hasValidSource) {
|
|
3080
|
+
(_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
|
|
3081
|
+
console.error("[StormcloudVideoPlayer] Failed to play:", error);
|
|
3082
|
+
});
|
|
3083
|
+
setShowCenterPlay(false);
|
|
3084
|
+
} else {
|
|
3085
|
+
console.warn(
|
|
3086
|
+
"[StormcloudVideoPlayer] Cannot play: video has no valid source"
|
|
3087
|
+
);
|
|
3088
|
+
}
|
|
3022
3089
|
}
|
|
3023
3090
|
};
|
|
3024
3091
|
const handleTimelineSeek = (e) => {
|
|
@@ -3049,7 +3116,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3049
3116
|
const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
3050
3117
|
const criticalPropsKey = (0, import_react.useMemo)(() => {
|
|
3051
3118
|
return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
|
|
3052
|
-
}, [
|
|
3119
|
+
}, [
|
|
3120
|
+
src,
|
|
3121
|
+
allowNativeHls,
|
|
3122
|
+
licenseKey,
|
|
3123
|
+
lowLatencyMode,
|
|
3124
|
+
driftToleranceMs,
|
|
3125
|
+
vastMode
|
|
3126
|
+
]);
|
|
3053
3127
|
(0, import_react.useEffect)(() => {
|
|
3054
3128
|
if (typeof window === "undefined") return;
|
|
3055
3129
|
const el = videoRef.current;
|
|
@@ -3153,6 +3227,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3153
3227
|
playerRef.current.resize();
|
|
3154
3228
|
}
|
|
3155
3229
|
}
|
|
3230
|
+
setViewportWidth(window.innerWidth);
|
|
3231
|
+
setIsPortrait(window.innerHeight > window.innerWidth);
|
|
3156
3232
|
};
|
|
3157
3233
|
window.addEventListener("resize", handleResize);
|
|
3158
3234
|
return () => window.removeEventListener("resize", handleResize);
|
|
@@ -3469,14 +3545,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3469
3545
|
},
|
|
3470
3546
|
onMouseEnter: (e) => {
|
|
3471
3547
|
const target = e.currentTarget;
|
|
3472
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3548
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3473
3549
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
|
|
3474
3550
|
target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
3475
3551
|
target.style.borderColor = "rgba(255, 255, 255, 0.9)";
|
|
3476
3552
|
},
|
|
3477
3553
|
onMouseLeave: (e) => {
|
|
3478
3554
|
const target = e.currentTarget;
|
|
3479
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3555
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3480
3556
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
|
|
3481
3557
|
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
3482
3558
|
target.style.borderColor = "rgba(255, 255, 255, 0.8)";
|
|
@@ -3566,7 +3642,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3566
3642
|
display: "flex",
|
|
3567
3643
|
alignItems: "center",
|
|
3568
3644
|
justifyContent: "space-between",
|
|
3569
|
-
color: "white"
|
|
3645
|
+
color: "white",
|
|
3646
|
+
flexWrap: viewportWidth < 768 ? "wrap" : "nowrap",
|
|
3647
|
+
gap: `${8 * responsiveScale}px`
|
|
3570
3648
|
},
|
|
3571
3649
|
children: [
|
|
3572
3650
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -3575,7 +3653,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3575
3653
|
style: {
|
|
3576
3654
|
display: "flex",
|
|
3577
3655
|
alignItems: "center",
|
|
3578
|
-
gap:
|
|
3656
|
+
gap: `${12 * responsiveScale}px`,
|
|
3657
|
+
flexWrap: viewportWidth < 480 ? "wrap" : "nowrap"
|
|
3579
3658
|
},
|
|
3580
3659
|
children: [
|
|
3581
3660
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -3583,44 +3662,42 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3583
3662
|
{
|
|
3584
3663
|
onClick: handlePlayPause,
|
|
3585
3664
|
style: {
|
|
3586
|
-
background: "linear-gradient(135deg, rgba(
|
|
3587
|
-
backdropFilter: "blur(
|
|
3588
|
-
border:
|
|
3665
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
3666
|
+
backdropFilter: "blur(12px)",
|
|
3667
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
3589
3668
|
color: "#ffffff",
|
|
3590
3669
|
cursor: "pointer",
|
|
3591
|
-
padding:
|
|
3592
|
-
borderRadius:
|
|
3670
|
+
padding: `${10 * responsiveScale}px`,
|
|
3671
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3593
3672
|
display: "flex",
|
|
3594
3673
|
alignItems: "center",
|
|
3595
3674
|
justifyContent: "center",
|
|
3596
3675
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3597
|
-
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.
|
|
3598
|
-
minWidth:
|
|
3599
|
-
minHeight:
|
|
3676
|
+
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)",
|
|
3677
|
+
minWidth: `${48 * responsiveScale}px`,
|
|
3678
|
+
minHeight: `${48 * responsiveScale}px`
|
|
3600
3679
|
},
|
|
3601
3680
|
onMouseEnter: (e) => {
|
|
3602
3681
|
const target = e.target;
|
|
3603
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3604
|
-
target.style.
|
|
3605
|
-
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
3682
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
3683
|
+
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)";
|
|
3606
3684
|
},
|
|
3607
3685
|
onMouseLeave: (e) => {
|
|
3608
3686
|
const target = e.target;
|
|
3609
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3610
|
-
target.style.
|
|
3611
|
-
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
3687
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
3688
|
+
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)";
|
|
3612
3689
|
},
|
|
3613
3690
|
title: isPlaying ? "Pause" : "Play",
|
|
3614
3691
|
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3615
3692
|
import_fa.FaPause,
|
|
3616
3693
|
{
|
|
3617
|
-
size: 20,
|
|
3694
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3618
3695
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3619
3696
|
}
|
|
3620
3697
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3621
3698
|
import_fa.FaPlay,
|
|
3622
3699
|
{
|
|
3623
|
-
size: 20,
|
|
3700
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3624
3701
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3625
3702
|
}
|
|
3626
3703
|
)
|
|
@@ -3643,45 +3720,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3643
3720
|
"button",
|
|
3644
3721
|
{
|
|
3645
3722
|
onClick: () => {
|
|
3723
|
+
if (playerRef.current) {
|
|
3724
|
+
playerRef.current.toggleMute();
|
|
3725
|
+
}
|
|
3646
3726
|
if (onVolumeToggle) {
|
|
3647
3727
|
onVolumeToggle();
|
|
3648
|
-
} else if (playerRef.current) {
|
|
3649
|
-
playerRef.current.toggleMute();
|
|
3650
3728
|
}
|
|
3651
3729
|
},
|
|
3652
3730
|
style: {
|
|
3653
|
-
background: "linear-gradient(135deg, rgba(
|
|
3654
|
-
backdropFilter: "blur(
|
|
3655
|
-
border:
|
|
3656
|
-
color:
|
|
3731
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
3732
|
+
backdropFilter: "blur(10px)",
|
|
3733
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
3734
|
+
color: "#ffffff",
|
|
3657
3735
|
cursor: "pointer",
|
|
3658
|
-
padding:
|
|
3659
|
-
borderRadius:
|
|
3736
|
+
padding: `${8 * responsiveScale}px`,
|
|
3737
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3660
3738
|
display: "flex",
|
|
3661
3739
|
alignItems: "center",
|
|
3662
3740
|
justifyContent: "center",
|
|
3663
3741
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3664
|
-
boxShadow: "0 6px
|
|
3665
|
-
minWidth:
|
|
3666
|
-
minHeight:
|
|
3742
|
+
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)",
|
|
3743
|
+
minWidth: `${44 * responsiveScale}px`,
|
|
3744
|
+
minHeight: `${44 * responsiveScale}px`
|
|
3667
3745
|
},
|
|
3668
3746
|
onMouseEnter: (e) => {
|
|
3669
3747
|
const target = e.target;
|
|
3670
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3671
|
-
target.style.
|
|
3672
|
-
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
3748
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
3749
|
+
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)";
|
|
3673
3750
|
},
|
|
3674
3751
|
onMouseLeave: (e) => {
|
|
3675
3752
|
const target = e.target;
|
|
3676
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3677
|
-
target.style.
|
|
3678
|
-
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
3753
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
3754
|
+
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)";
|
|
3679
3755
|
},
|
|
3680
3756
|
title: isMuted ? "Unmute" : "Mute",
|
|
3681
3757
|
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3682
3758
|
import_fa.FaVolumeMute,
|
|
3683
3759
|
{
|
|
3684
|
-
size: 16,
|
|
3760
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3685
3761
|
style: {
|
|
3686
3762
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3687
3763
|
}
|
|
@@ -3689,7 +3765,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3689
3765
|
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3690
3766
|
import_fa.FaVolumeDown,
|
|
3691
3767
|
{
|
|
3692
|
-
size: 16,
|
|
3768
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3693
3769
|
style: {
|
|
3694
3770
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3695
3771
|
}
|
|
@@ -3697,7 +3773,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3697
3773
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3698
3774
|
import_fa.FaVolumeUp,
|
|
3699
3775
|
{
|
|
3700
|
-
size: 16,
|
|
3776
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3701
3777
|
style: {
|
|
3702
3778
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3703
3779
|
}
|
|
@@ -3748,13 +3824,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3748
3824
|
},
|
|
3749
3825
|
onMouseEnter: (e) => {
|
|
3750
3826
|
setShowVolumeSlider(true);
|
|
3751
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
3752
3827
|
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)";
|
|
3753
3828
|
e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
|
|
3754
3829
|
},
|
|
3755
3830
|
onMouseLeave: (e) => {
|
|
3756
3831
|
setShowVolumeSlider(false);
|
|
3757
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
3758
3832
|
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)";
|
|
3759
3833
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.15)";
|
|
3760
3834
|
},
|
|
@@ -3769,10 +3843,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3769
3843
|
transition: "transform 0.2s ease-in-out"
|
|
3770
3844
|
},
|
|
3771
3845
|
onMouseEnter: (e) => {
|
|
3772
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
3773
3846
|
},
|
|
3774
3847
|
onMouseLeave: (e) => {
|
|
3775
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
3776
3848
|
},
|
|
3777
3849
|
onMouseDown: (e) => {
|
|
3778
3850
|
e.preventDefault();
|
|
@@ -3785,11 +3857,23 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3785
3857
|
handleVolumeChange(percentage2);
|
|
3786
3858
|
};
|
|
3787
3859
|
const handleMouseUp = () => {
|
|
3788
|
-
document.removeEventListener(
|
|
3789
|
-
|
|
3860
|
+
document.removeEventListener(
|
|
3861
|
+
"mousemove",
|
|
3862
|
+
handleMouseMove
|
|
3863
|
+
);
|
|
3864
|
+
document.removeEventListener(
|
|
3865
|
+
"mouseup",
|
|
3866
|
+
handleMouseUp
|
|
3867
|
+
);
|
|
3790
3868
|
};
|
|
3791
|
-
document.addEventListener(
|
|
3792
|
-
|
|
3869
|
+
document.addEventListener(
|
|
3870
|
+
"mousemove",
|
|
3871
|
+
handleMouseMove
|
|
3872
|
+
);
|
|
3873
|
+
document.addEventListener(
|
|
3874
|
+
"mouseup",
|
|
3875
|
+
handleMouseUp
|
|
3876
|
+
);
|
|
3793
3877
|
const rect = sliderElement.getBoundingClientRect();
|
|
3794
3878
|
const y = e.clientY - rect.top;
|
|
3795
3879
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -3851,20 +3935,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3851
3935
|
cursor: "grab"
|
|
3852
3936
|
},
|
|
3853
3937
|
onMouseEnter: (e) => {
|
|
3854
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3855
3938
|
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)";
|
|
3856
3939
|
e.currentTarget.style.cursor = "grab";
|
|
3857
3940
|
},
|
|
3858
3941
|
onMouseLeave: (e) => {
|
|
3859
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
3860
3942
|
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)";
|
|
3861
3943
|
},
|
|
3862
3944
|
onMouseDown: (e) => {
|
|
3863
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.4)";
|
|
3864
3945
|
e.currentTarget.style.cursor = "grabbing";
|
|
3865
3946
|
},
|
|
3866
3947
|
onMouseUp: (e) => {
|
|
3867
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3868
3948
|
e.currentTarget.style.cursor = "grab";
|
|
3869
3949
|
}
|
|
3870
3950
|
}
|
|
@@ -3882,9 +3962,10 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3882
3962
|
"div",
|
|
3883
3963
|
{
|
|
3884
3964
|
style: {
|
|
3885
|
-
fontSize:
|
|
3965
|
+
fontSize: `${14 * responsiveScale}px`,
|
|
3886
3966
|
fontFamily: "monospace",
|
|
3887
|
-
color: "rgba(255, 255, 255, 0.9)"
|
|
3967
|
+
color: "rgba(255, 255, 255, 0.9)",
|
|
3968
|
+
display: viewportWidth < 480 ? "none" : "block"
|
|
3888
3969
|
},
|
|
3889
3970
|
children: [
|
|
3890
3971
|
formatTime(currentTime),
|
|
@@ -3902,105 +3983,113 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3902
3983
|
style: {
|
|
3903
3984
|
display: "flex",
|
|
3904
3985
|
alignItems: "center",
|
|
3905
|
-
gap:
|
|
3986
|
+
gap: `${12 * responsiveScale}px`
|
|
3906
3987
|
},
|
|
3907
3988
|
children: [
|
|
3908
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
{
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
const target = e.target;
|
|
3936
|
-
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
|
|
3937
|
-
target.style.transform = "translateY(0) scale(1)";
|
|
3938
|
-
target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
|
|
3939
|
-
},
|
|
3940
|
-
title: "Playback Speed",
|
|
3941
|
-
children: [
|
|
3942
|
-
playbackRate,
|
|
3943
|
-
"x"
|
|
3944
|
-
]
|
|
3945
|
-
}
|
|
3946
|
-
),
|
|
3947
|
-
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3948
|
-
"div",
|
|
3949
|
-
{
|
|
3950
|
-
style: {
|
|
3951
|
-
position: "absolute",
|
|
3952
|
-
bottom: "100%",
|
|
3953
|
-
right: 0,
|
|
3954
|
-
marginBottom: "12px",
|
|
3955
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
3956
|
-
backdropFilter: "blur(20px)",
|
|
3957
|
-
borderRadius: "12px",
|
|
3958
|
-
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
3959
|
-
overflow: "hidden",
|
|
3960
|
-
minWidth: "90px",
|
|
3961
|
-
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
3962
|
-
},
|
|
3963
|
-
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
3964
|
-
(speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
3965
|
-
"button",
|
|
3966
|
-
{
|
|
3967
|
-
onClick: () => handlePlaybackRateChange(speed),
|
|
3968
|
-
style: {
|
|
3969
|
-
display: "block",
|
|
3970
|
-
width: "100%",
|
|
3971
|
-
padding: "10px 16px",
|
|
3972
|
-
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
3973
|
-
border: "none",
|
|
3974
|
-
color: "white",
|
|
3975
|
-
cursor: "pointer",
|
|
3976
|
-
fontSize: "13px",
|
|
3977
|
-
fontFamily: "monospace",
|
|
3978
|
-
fontWeight: "600",
|
|
3979
|
-
textAlign: "center",
|
|
3980
|
-
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3981
|
-
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
3982
|
-
},
|
|
3983
|
-
onMouseEnter: (e) => {
|
|
3984
|
-
if (playbackRate !== speed) {
|
|
3985
|
-
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
3986
|
-
}
|
|
3987
|
-
},
|
|
3988
|
-
onMouseLeave: (e) => {
|
|
3989
|
-
if (playbackRate !== speed) {
|
|
3990
|
-
e.target.style.background = "transparent";
|
|
3991
|
-
}
|
|
3992
|
-
},
|
|
3993
|
-
children: [
|
|
3994
|
-
speed,
|
|
3995
|
-
"x"
|
|
3996
|
-
]
|
|
3989
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
3990
|
+
"div",
|
|
3991
|
+
{
|
|
3992
|
+
style: {
|
|
3993
|
+
position: "relative",
|
|
3994
|
+
display: viewportWidth < 600 ? "none" : "block"
|
|
3995
|
+
},
|
|
3996
|
+
children: [
|
|
3997
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
3998
|
+
"button",
|
|
3999
|
+
{
|
|
4000
|
+
onClick: () => setShowSpeedMenu(!showSpeedMenu),
|
|
4001
|
+
style: {
|
|
4002
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
4003
|
+
backdropFilter: "blur(10px)",
|
|
4004
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
4005
|
+
color: "#ffffff",
|
|
4006
|
+
cursor: "pointer",
|
|
4007
|
+
padding: `${8 * responsiveScale}px ${14 * responsiveScale}px`,
|
|
4008
|
+
borderRadius: `${14 * responsiveScale}px`,
|
|
4009
|
+
fontSize: `${14 * responsiveScale}px`,
|
|
4010
|
+
fontFamily: "monospace",
|
|
4011
|
+
fontWeight: "700",
|
|
4012
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4013
|
+
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)",
|
|
4014
|
+
minWidth: `${56 * responsiveScale}px`,
|
|
4015
|
+
minHeight: `${40 * responsiveScale}px`
|
|
3997
4016
|
},
|
|
3998
|
-
|
|
3999
|
-
|
|
4017
|
+
onMouseEnter: (e) => {
|
|
4018
|
+
const target = e.target;
|
|
4019
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
4020
|
+
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)";
|
|
4021
|
+
},
|
|
4022
|
+
onMouseLeave: (e) => {
|
|
4023
|
+
const target = e.target;
|
|
4024
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
4025
|
+
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)";
|
|
4026
|
+
},
|
|
4027
|
+
title: "Playback Speed",
|
|
4028
|
+
children: [
|
|
4029
|
+
playbackRate,
|
|
4030
|
+
"x"
|
|
4031
|
+
]
|
|
4032
|
+
}
|
|
4033
|
+
),
|
|
4034
|
+
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4035
|
+
"div",
|
|
4036
|
+
{
|
|
4037
|
+
style: {
|
|
4038
|
+
position: "absolute",
|
|
4039
|
+
bottom: "100%",
|
|
4040
|
+
right: 0,
|
|
4041
|
+
marginBottom: "12px",
|
|
4042
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
4043
|
+
backdropFilter: "blur(20px)",
|
|
4044
|
+
borderRadius: "12px",
|
|
4045
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
4046
|
+
overflow: "hidden",
|
|
4047
|
+
minWidth: "90px",
|
|
4048
|
+
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
4049
|
+
},
|
|
4050
|
+
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
4051
|
+
(speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
4052
|
+
"button",
|
|
4053
|
+
{
|
|
4054
|
+
onClick: () => handlePlaybackRateChange(speed),
|
|
4055
|
+
style: {
|
|
4056
|
+
display: "block",
|
|
4057
|
+
width: "100%",
|
|
4058
|
+
padding: "10px 16px",
|
|
4059
|
+
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
4060
|
+
border: "none",
|
|
4061
|
+
color: "white",
|
|
4062
|
+
cursor: "pointer",
|
|
4063
|
+
fontSize: "13px",
|
|
4064
|
+
fontFamily: "monospace",
|
|
4065
|
+
fontWeight: "600",
|
|
4066
|
+
textAlign: "center",
|
|
4067
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4068
|
+
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
4069
|
+
},
|
|
4070
|
+
onMouseEnter: (e) => {
|
|
4071
|
+
if (playbackRate !== speed) {
|
|
4072
|
+
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
4073
|
+
}
|
|
4074
|
+
},
|
|
4075
|
+
onMouseLeave: (e) => {
|
|
4076
|
+
if (playbackRate !== speed) {
|
|
4077
|
+
e.target.style.background = "transparent";
|
|
4078
|
+
}
|
|
4079
|
+
},
|
|
4080
|
+
children: [
|
|
4081
|
+
speed,
|
|
4082
|
+
"x"
|
|
4083
|
+
]
|
|
4084
|
+
},
|
|
4085
|
+
speed
|
|
4086
|
+
)
|
|
4087
|
+
)
|
|
4088
|
+
}
|
|
4000
4089
|
)
|
|
4001
|
-
|
|
4002
|
-
|
|
4003
|
-
|
|
4090
|
+
]
|
|
4091
|
+
}
|
|
4092
|
+
),
|
|
4004
4093
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4005
4094
|
"button",
|
|
4006
4095
|
{
|
|
@@ -4014,44 +4103,42 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4014
4103
|
}
|
|
4015
4104
|
},
|
|
4016
4105
|
style: {
|
|
4017
|
-
background: "linear-gradient(135deg, rgba(
|
|
4018
|
-
backdropFilter: "blur(
|
|
4019
|
-
border:
|
|
4106
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
4107
|
+
backdropFilter: "blur(10px)",
|
|
4108
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
4020
4109
|
color: "#ffffff",
|
|
4021
4110
|
cursor: "pointer",
|
|
4022
|
-
padding:
|
|
4023
|
-
borderRadius:
|
|
4111
|
+
padding: `${8 * responsiveScale}px`,
|
|
4112
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
4024
4113
|
display: "flex",
|
|
4025
4114
|
alignItems: "center",
|
|
4026
4115
|
justifyContent: "center",
|
|
4027
4116
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4028
|
-
boxShadow: "0 6px
|
|
4029
|
-
minWidth:
|
|
4030
|
-
minHeight:
|
|
4117
|
+
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)",
|
|
4118
|
+
minWidth: `${44 * responsiveScale}px`,
|
|
4119
|
+
minHeight: `${44 * responsiveScale}px`
|
|
4031
4120
|
},
|
|
4032
4121
|
onMouseEnter: (e) => {
|
|
4033
4122
|
const target = e.target;
|
|
4034
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4035
|
-
target.style.
|
|
4036
|
-
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
4123
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
4124
|
+
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)";
|
|
4037
4125
|
},
|
|
4038
4126
|
onMouseLeave: (e) => {
|
|
4039
4127
|
const target = e.target;
|
|
4040
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4041
|
-
target.style.
|
|
4042
|
-
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
4128
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
4129
|
+
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)";
|
|
4043
4130
|
},
|
|
4044
4131
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4045
4132
|
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4046
4133
|
import_fa.FaCompress,
|
|
4047
4134
|
{
|
|
4048
|
-
size: 16,
|
|
4135
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4049
4136
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4050
4137
|
}
|
|
4051
4138
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4052
4139
|
import_fa.FaExpand,
|
|
4053
4140
|
{
|
|
4054
|
-
size: 16,
|
|
4141
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4055
4142
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4056
4143
|
}
|
|
4057
4144
|
)
|
|
@@ -4070,10 +4157,12 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4070
4157
|
{
|
|
4071
4158
|
style: {
|
|
4072
4159
|
position: "absolute",
|
|
4073
|
-
bottom:
|
|
4074
|
-
right:
|
|
4160
|
+
bottom: `${10 * responsiveScale}px`,
|
|
4161
|
+
right: `${10 * responsiveScale}px`,
|
|
4162
|
+
transform: "none",
|
|
4075
4163
|
display: "flex",
|
|
4076
|
-
|
|
4164
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
4165
|
+
gap: `${10 * responsiveScale}px`,
|
|
4077
4166
|
zIndex: 10
|
|
4078
4167
|
},
|
|
4079
4168
|
children: [
|
|
@@ -4094,45 +4183,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4094
4183
|
"button",
|
|
4095
4184
|
{
|
|
4096
4185
|
onClick: () => {
|
|
4186
|
+
if (playerRef.current) {
|
|
4187
|
+
playerRef.current.toggleMute();
|
|
4188
|
+
}
|
|
4097
4189
|
if (onVolumeToggle) {
|
|
4098
4190
|
onVolumeToggle();
|
|
4099
|
-
} else if (playerRef.current) {
|
|
4100
|
-
playerRef.current.toggleMute();
|
|
4101
4191
|
}
|
|
4102
4192
|
},
|
|
4103
4193
|
onMouseEnter: (e) => {
|
|
4104
4194
|
const target = e.currentTarget;
|
|
4105
|
-
target.style.
|
|
4106
|
-
target.style.
|
|
4107
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
4195
|
+
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)";
|
|
4196
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
4108
4197
|
},
|
|
4109
4198
|
onMouseLeave: (e) => {
|
|
4110
4199
|
const target = e.currentTarget;
|
|
4111
|
-
target.style.
|
|
4112
|
-
target.style.
|
|
4113
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
4200
|
+
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)";
|
|
4201
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
4114
4202
|
},
|
|
4115
4203
|
style: {
|
|
4116
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
4117
|
-
color:
|
|
4204
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
4205
|
+
color: "#ffffff",
|
|
4118
4206
|
border: "none",
|
|
4119
|
-
borderRadius:
|
|
4120
|
-
padding:
|
|
4207
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4208
|
+
padding: `${8 * responsiveScale}px`,
|
|
4121
4209
|
cursor: "pointer",
|
|
4122
4210
|
display: "flex",
|
|
4123
4211
|
alignItems: "center",
|
|
4124
4212
|
justifyContent: "center",
|
|
4125
4213
|
backdropFilter: "blur(20px)",
|
|
4126
|
-
boxShadow: "0
|
|
4214
|
+
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)",
|
|
4127
4215
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4128
|
-
minWidth:
|
|
4129
|
-
minHeight:
|
|
4216
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4217
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4130
4218
|
},
|
|
4131
4219
|
title: isMuted ? "Unmute" : "Mute",
|
|
4132
4220
|
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4133
4221
|
import_fa.FaVolumeMute,
|
|
4134
4222
|
{
|
|
4135
|
-
size: 16,
|
|
4223
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4136
4224
|
style: {
|
|
4137
4225
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4138
4226
|
color: "#ffffff"
|
|
@@ -4141,7 +4229,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4141
4229
|
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4142
4230
|
import_fa.FaVolumeDown,
|
|
4143
4231
|
{
|
|
4144
|
-
size: 16,
|
|
4232
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4145
4233
|
style: {
|
|
4146
4234
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4147
4235
|
color: "#ffffff"
|
|
@@ -4150,7 +4238,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4150
4238
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4151
4239
|
import_fa.FaVolumeUp,
|
|
4152
4240
|
{
|
|
4153
|
-
size: 16,
|
|
4241
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4154
4242
|
style: {
|
|
4155
4243
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4156
4244
|
color: "#ffffff"
|
|
@@ -4202,13 +4290,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4202
4290
|
},
|
|
4203
4291
|
onMouseEnter: (e) => {
|
|
4204
4292
|
setShowVolumeSlider(true);
|
|
4205
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
4206
4293
|
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)";
|
|
4207
4294
|
e.currentTarget.style.borderColor = "rgba(96, 165, 250, 0.8)";
|
|
4208
4295
|
},
|
|
4209
4296
|
onMouseLeave: (e) => {
|
|
4210
4297
|
setShowVolumeSlider(false);
|
|
4211
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
4212
4298
|
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)";
|
|
4213
4299
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.7)";
|
|
4214
4300
|
},
|
|
@@ -4222,12 +4308,6 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4222
4308
|
cursor: "pointer",
|
|
4223
4309
|
transition: "transform 0.2s ease-in-out"
|
|
4224
4310
|
},
|
|
4225
|
-
onMouseEnter: (e) => {
|
|
4226
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
4227
|
-
},
|
|
4228
|
-
onMouseLeave: (e) => {
|
|
4229
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
4230
|
-
},
|
|
4231
4311
|
onMouseDown: (e) => {
|
|
4232
4312
|
e.preventDefault();
|
|
4233
4313
|
const sliderElement = e.currentTarget;
|
|
@@ -4239,11 +4319,23 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4239
4319
|
handleVolumeChange(percentage2);
|
|
4240
4320
|
};
|
|
4241
4321
|
const handleMouseUp = () => {
|
|
4242
|
-
document.removeEventListener(
|
|
4243
|
-
|
|
4322
|
+
document.removeEventListener(
|
|
4323
|
+
"mousemove",
|
|
4324
|
+
handleMouseMove
|
|
4325
|
+
);
|
|
4326
|
+
document.removeEventListener(
|
|
4327
|
+
"mouseup",
|
|
4328
|
+
handleMouseUp
|
|
4329
|
+
);
|
|
4244
4330
|
};
|
|
4245
|
-
document.addEventListener(
|
|
4246
|
-
|
|
4331
|
+
document.addEventListener(
|
|
4332
|
+
"mousemove",
|
|
4333
|
+
handleMouseMove
|
|
4334
|
+
);
|
|
4335
|
+
document.addEventListener(
|
|
4336
|
+
"mouseup",
|
|
4337
|
+
handleMouseUp
|
|
4338
|
+
);
|
|
4247
4339
|
const rect = sliderElement.getBoundingClientRect();
|
|
4248
4340
|
const y = e.clientY - rect.top;
|
|
4249
4341
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -4307,20 +4399,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4307
4399
|
cursor: "grab"
|
|
4308
4400
|
},
|
|
4309
4401
|
onMouseEnter: (e) => {
|
|
4310
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4311
4402
|
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)";
|
|
4312
4403
|
e.currentTarget.style.cursor = "grab";
|
|
4313
4404
|
},
|
|
4314
4405
|
onMouseLeave: (e) => {
|
|
4315
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
4316
4406
|
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)";
|
|
4317
4407
|
},
|
|
4318
4408
|
onMouseDown: (e) => {
|
|
4319
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.45)";
|
|
4320
4409
|
e.currentTarget.style.cursor = "grabbing";
|
|
4321
4410
|
},
|
|
4322
4411
|
onMouseUp: (e) => {
|
|
4323
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4324
4412
|
e.currentTarget.style.cursor = "grab";
|
|
4325
4413
|
}
|
|
4326
4414
|
}
|
|
@@ -4348,37 +4436,35 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4348
4436
|
},
|
|
4349
4437
|
onMouseEnter: (e) => {
|
|
4350
4438
|
const target = e.currentTarget;
|
|
4351
|
-
target.style.
|
|
4352
|
-
target.style.
|
|
4353
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
4439
|
+
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)";
|
|
4440
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
4354
4441
|
},
|
|
4355
4442
|
onMouseLeave: (e) => {
|
|
4356
4443
|
const target = e.currentTarget;
|
|
4357
|
-
target.style.
|
|
4358
|
-
target.style.
|
|
4359
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
4444
|
+
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)";
|
|
4445
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
4360
4446
|
},
|
|
4361
4447
|
style: {
|
|
4362
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
4448
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
4363
4449
|
color: "#ffffff",
|
|
4364
4450
|
border: "none",
|
|
4365
|
-
borderRadius:
|
|
4366
|
-
padding:
|
|
4451
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4452
|
+
padding: `${8 * responsiveScale}px`,
|
|
4367
4453
|
cursor: "pointer",
|
|
4368
4454
|
display: "flex",
|
|
4369
4455
|
alignItems: "center",
|
|
4370
4456
|
justifyContent: "center",
|
|
4371
4457
|
backdropFilter: "blur(20px)",
|
|
4372
|
-
boxShadow: "0
|
|
4458
|
+
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)",
|
|
4373
4459
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4374
|
-
minWidth:
|
|
4375
|
-
minHeight:
|
|
4460
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4461
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4376
4462
|
},
|
|
4377
4463
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4378
4464
|
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4379
4465
|
import_fa.FaCompress,
|
|
4380
4466
|
{
|
|
4381
|
-
size: 16,
|
|
4467
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4382
4468
|
style: {
|
|
4383
4469
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4384
4470
|
color: "#ffffff"
|
|
@@ -4387,7 +4473,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4387
4473
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4388
4474
|
import_fa.FaExpand,
|
|
4389
4475
|
{
|
|
4390
|
-
size: 16,
|
|
4476
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4391
4477
|
style: {
|
|
4392
4478
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4393
4479
|
color: "#ffffff"
|