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.cjs
CHANGED
|
@@ -1803,6 +1803,8 @@ var StormcloudVideoPlayer = class {
|
|
|
1803
1803
|
this.totalAdsInBreak = 0;
|
|
1804
1804
|
this.showAds = false;
|
|
1805
1805
|
this.isLiveStream = false;
|
|
1806
|
+
this.nativeHlsMode = false;
|
|
1807
|
+
this.videoSrcProtection = null;
|
|
1806
1808
|
initializePolyfills();
|
|
1807
1809
|
const browserOverrides = getBrowserConfigOverrides();
|
|
1808
1810
|
this.config = { ...config, ...browserOverrides };
|
|
@@ -1823,7 +1825,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1823
1825
|
}
|
|
1824
1826
|
if (adPlayerType === "hls") {
|
|
1825
1827
|
if (this.config.debugAdTiming) {
|
|
1826
|
-
console.log(
|
|
1828
|
+
console.log(
|
|
1829
|
+
"[StormcloudVideoPlayer] Creating HLS ad player (AdStorm mode)"
|
|
1830
|
+
);
|
|
1827
1831
|
}
|
|
1828
1832
|
return createHlsAdPlayer(this.video, {
|
|
1829
1833
|
continueLiveStreamDuringAds,
|
|
@@ -1832,7 +1836,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1832
1836
|
});
|
|
1833
1837
|
} else {
|
|
1834
1838
|
if (this.config.debugAdTiming) {
|
|
1835
|
-
console.log(
|
|
1839
|
+
console.log(
|
|
1840
|
+
"[StormcloudVideoPlayer] Creating Google IMA ad player (Default mode)"
|
|
1841
|
+
);
|
|
1836
1842
|
}
|
|
1837
1843
|
return createImaController(this.video, {
|
|
1838
1844
|
continueLiveStreamDuringAds
|
|
@@ -1856,11 +1862,13 @@ var StormcloudVideoPlayer = class {
|
|
|
1856
1862
|
}
|
|
1857
1863
|
this.initializeTracking();
|
|
1858
1864
|
if (this.shouldUseNativeHls()) {
|
|
1865
|
+
this.nativeHlsMode = true;
|
|
1866
|
+
this.videoSrcProtection = this.config.src;
|
|
1859
1867
|
this.video.src = this.config.src;
|
|
1860
1868
|
this.isLiveStream = (_a = this.config.lowLatencyMode) != null ? _a : false;
|
|
1861
1869
|
if (this.config.debugAdTiming) {
|
|
1862
1870
|
console.log(
|
|
1863
|
-
"[StormcloudVideoPlayer]
|
|
1871
|
+
"[StormcloudVideoPlayer] Using native HLS playback - VOD mode:",
|
|
1864
1872
|
{
|
|
1865
1873
|
isLive: this.isLiveStream,
|
|
1866
1874
|
allowNativeHls: this.config.allowNativeHls,
|
|
@@ -2008,7 +2016,9 @@ var StormcloudVideoPlayer = class {
|
|
|
2008
2016
|
this.ima.initialize();
|
|
2009
2017
|
this.ima.on("all_ads_completed", () => {
|
|
2010
2018
|
if (this.config.debugAdTiming) {
|
|
2011
|
-
console.log(
|
|
2019
|
+
console.log(
|
|
2020
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
2021
|
+
);
|
|
2012
2022
|
}
|
|
2013
2023
|
});
|
|
2014
2024
|
this.ima.on("ad_error", () => {
|
|
@@ -2073,13 +2083,31 @@ var StormcloudVideoPlayer = class {
|
|
|
2073
2083
|
this.video.addEventListener("timeupdate", () => {
|
|
2074
2084
|
this.onTimeUpdate(this.video.currentTime);
|
|
2075
2085
|
});
|
|
2086
|
+
this.video.addEventListener("emptied", () => {
|
|
2087
|
+
if (this.nativeHlsMode && this.videoSrcProtection && !this.ima.isAdPlaying()) {
|
|
2088
|
+
if (this.config.debugAdTiming) {
|
|
2089
|
+
console.log(
|
|
2090
|
+
"[StormcloudVideoPlayer] Video src was cleared, restoring:",
|
|
2091
|
+
this.videoSrcProtection
|
|
2092
|
+
);
|
|
2093
|
+
}
|
|
2094
|
+
const currentTime = this.video.currentTime;
|
|
2095
|
+
const wasPaused = this.video.paused;
|
|
2096
|
+
this.video.src = this.videoSrcProtection;
|
|
2097
|
+
this.video.currentTime = currentTime;
|
|
2098
|
+
if (!wasPaused) {
|
|
2099
|
+
this.video.play().catch(() => {
|
|
2100
|
+
});
|
|
2101
|
+
}
|
|
2102
|
+
}
|
|
2103
|
+
});
|
|
2076
2104
|
}
|
|
2077
2105
|
shouldUseNativeHls() {
|
|
2078
2106
|
const streamType = this.getStreamType();
|
|
2079
2107
|
if (streamType === "other") {
|
|
2080
2108
|
return true;
|
|
2081
2109
|
}
|
|
2082
|
-
const canNative = this.video.canPlayType("application/vnd.apple.
|
|
2110
|
+
const canNative = this.video.canPlayType("application/vnd.apple.mpegurl");
|
|
2083
2111
|
return !!(this.config.allowNativeHls && canNative);
|
|
2084
2112
|
}
|
|
2085
2113
|
onId3Tag(tag) {
|
|
@@ -2506,10 +2534,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2506
2534
|
var _a, _b, _c;
|
|
2507
2535
|
const vastMode = this.config.vastMode || "default";
|
|
2508
2536
|
if (this.config.debugAdTiming) {
|
|
2509
|
-
console.log(
|
|
2510
|
-
"[StormcloudVideoPlayer] VAST mode:",
|
|
2511
|
-
vastMode
|
|
2512
|
-
);
|
|
2537
|
+
console.log("[StormcloudVideoPlayer] VAST mode:", vastMode);
|
|
2513
2538
|
}
|
|
2514
2539
|
if (vastMode === "adstorm") {
|
|
2515
2540
|
if (!this.config.licenseKey) {
|
|
@@ -2627,10 +2652,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2627
2652
|
this.currentAdIndex = 0;
|
|
2628
2653
|
this.totalAdsInBreak = 1;
|
|
2629
2654
|
if (this.config.debugAdTiming) {
|
|
2630
|
-
console.log(
|
|
2631
|
-
"[StormcloudVideoPlayer] Using VAST endpoint:",
|
|
2632
|
-
vastTagUrl
|
|
2633
|
-
);
|
|
2655
|
+
console.log("[StormcloudVideoPlayer] Using VAST endpoint:", vastTagUrl);
|
|
2634
2656
|
}
|
|
2635
2657
|
} else if (tags && tags.length > 0) {
|
|
2636
2658
|
vastTagUrl = tags[0];
|
|
@@ -2782,15 +2804,21 @@ var StormcloudVideoPlayer = class {
|
|
|
2782
2804
|
await this.ima.requestAds(vastTagUrl);
|
|
2783
2805
|
try {
|
|
2784
2806
|
if (this.config.debugAdTiming) {
|
|
2785
|
-
console.log(
|
|
2807
|
+
console.log(
|
|
2808
|
+
"[StormcloudVideoPlayer] Ad request completed, attempting playback"
|
|
2809
|
+
);
|
|
2786
2810
|
}
|
|
2787
2811
|
await this.ima.play();
|
|
2788
2812
|
if (this.config.debugAdTiming) {
|
|
2789
|
-
console.log(
|
|
2813
|
+
console.log(
|
|
2814
|
+
"[StormcloudVideoPlayer] Ad playback started successfully"
|
|
2815
|
+
);
|
|
2790
2816
|
}
|
|
2791
2817
|
} catch (playError) {
|
|
2792
2818
|
if (this.config.debugAdTiming) {
|
|
2793
|
-
console.log(
|
|
2819
|
+
console.log(
|
|
2820
|
+
"[StormcloudVideoPlayer] No ads available, skipping playback"
|
|
2821
|
+
);
|
|
2794
2822
|
}
|
|
2795
2823
|
this.handleAdFailure();
|
|
2796
2824
|
return;
|
|
@@ -2846,7 +2874,9 @@ var StormcloudVideoPlayer = class {
|
|
|
2846
2874
|
});
|
|
2847
2875
|
} else {
|
|
2848
2876
|
if (this.config.debugAdTiming) {
|
|
2849
|
-
console.log(
|
|
2877
|
+
console.log(
|
|
2878
|
+
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
2879
|
+
);
|
|
2850
2880
|
}
|
|
2851
2881
|
}
|
|
2852
2882
|
}
|
|
@@ -2865,7 +2895,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2865
2895
|
if (this.config.debugAdTiming) {
|
|
2866
2896
|
console.warn(
|
|
2867
2897
|
"[StormcloudVideoPlayer] Failsafe timer triggered - forcing video resume",
|
|
2868
|
-
{
|
|
2898
|
+
{
|
|
2899
|
+
paused: this.video.paused,
|
|
2900
|
+
showAds: this.showAds,
|
|
2901
|
+
adPlaying: this.ima.isAdPlaying()
|
|
2902
|
+
}
|
|
2869
2903
|
);
|
|
2870
2904
|
}
|
|
2871
2905
|
this.handleAdFailure();
|
|
@@ -3061,6 +3095,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3061
3095
|
const [isBuffering, setIsBuffering] = import_react.default.useState(false);
|
|
3062
3096
|
const [showCenterPlay, setShowCenterPlay] = import_react.default.useState(false);
|
|
3063
3097
|
const [showLicenseWarning, setShowLicenseWarning] = import_react.default.useState(false);
|
|
3098
|
+
const [viewportWidth, setViewportWidth] = import_react.default.useState(
|
|
3099
|
+
typeof window !== "undefined" ? window.innerWidth : 1920
|
|
3100
|
+
);
|
|
3101
|
+
const [isPortrait, setIsPortrait] = import_react.default.useState(
|
|
3102
|
+
typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false
|
|
3103
|
+
);
|
|
3104
|
+
const getResponsiveScale = () => {
|
|
3105
|
+
if (viewportWidth < 480) return 0.7;
|
|
3106
|
+
if (viewportWidth < 768) return 0.8;
|
|
3107
|
+
if (viewportWidth < 1024) return 0.9;
|
|
3108
|
+
return 1;
|
|
3109
|
+
};
|
|
3110
|
+
const responsiveScale = getResponsiveScale();
|
|
3064
3111
|
const formatTime = (seconds) => {
|
|
3065
3112
|
if (!isFinite(seconds)) return "0:00:00";
|
|
3066
3113
|
const hours = Math.floor(seconds / 3600);
|
|
@@ -3069,10 +3116,20 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3069
3116
|
return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
|
|
3070
3117
|
};
|
|
3071
3118
|
const handlePlayPause = () => {
|
|
3119
|
+
var _a;
|
|
3072
3120
|
if (videoRef.current) {
|
|
3073
3121
|
if (videoRef.current.paused) {
|
|
3074
|
-
videoRef.current.
|
|
3075
|
-
|
|
3122
|
+
const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
|
|
3123
|
+
if (hasValidSource) {
|
|
3124
|
+
(_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
|
|
3125
|
+
console.error("[StormcloudVideoPlayer] Failed to play:", error);
|
|
3126
|
+
});
|
|
3127
|
+
setShowCenterPlay(false);
|
|
3128
|
+
} else {
|
|
3129
|
+
console.warn(
|
|
3130
|
+
"[StormcloudVideoPlayer] Cannot play: video has no valid source"
|
|
3131
|
+
);
|
|
3132
|
+
}
|
|
3076
3133
|
} else {
|
|
3077
3134
|
videoRef.current.pause();
|
|
3078
3135
|
setShowCenterPlay(true);
|
|
@@ -3080,9 +3137,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3080
3137
|
}
|
|
3081
3138
|
};
|
|
3082
3139
|
const handleCenterPlayClick = () => {
|
|
3140
|
+
var _a;
|
|
3083
3141
|
if (videoRef.current && videoRef.current.paused) {
|
|
3084
|
-
videoRef.current.
|
|
3085
|
-
|
|
3142
|
+
const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
|
|
3143
|
+
if (hasValidSource) {
|
|
3144
|
+
(_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
|
|
3145
|
+
console.error("[StormcloudVideoPlayer] Failed to play:", error);
|
|
3146
|
+
});
|
|
3147
|
+
setShowCenterPlay(false);
|
|
3148
|
+
} else {
|
|
3149
|
+
console.warn(
|
|
3150
|
+
"[StormcloudVideoPlayer] Cannot play: video has no valid source"
|
|
3151
|
+
);
|
|
3152
|
+
}
|
|
3086
3153
|
}
|
|
3087
3154
|
};
|
|
3088
3155
|
const handleTimelineSeek = (e) => {
|
|
@@ -3113,7 +3180,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3113
3180
|
const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
3114
3181
|
const criticalPropsKey = (0, import_react.useMemo)(() => {
|
|
3115
3182
|
return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
|
|
3116
|
-
}, [
|
|
3183
|
+
}, [
|
|
3184
|
+
src,
|
|
3185
|
+
allowNativeHls,
|
|
3186
|
+
licenseKey,
|
|
3187
|
+
lowLatencyMode,
|
|
3188
|
+
driftToleranceMs,
|
|
3189
|
+
vastMode
|
|
3190
|
+
]);
|
|
3117
3191
|
(0, import_react.useEffect)(() => {
|
|
3118
3192
|
if (typeof window === "undefined") return;
|
|
3119
3193
|
const el = videoRef.current;
|
|
@@ -3217,6 +3291,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3217
3291
|
playerRef.current.resize();
|
|
3218
3292
|
}
|
|
3219
3293
|
}
|
|
3294
|
+
setViewportWidth(window.innerWidth);
|
|
3295
|
+
setIsPortrait(window.innerHeight > window.innerWidth);
|
|
3220
3296
|
};
|
|
3221
3297
|
window.addEventListener("resize", handleResize);
|
|
3222
3298
|
return () => window.removeEventListener("resize", handleResize);
|
|
@@ -3533,14 +3609,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3533
3609
|
},
|
|
3534
3610
|
onMouseEnter: (e) => {
|
|
3535
3611
|
const target = e.currentTarget;
|
|
3536
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3612
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3537
3613
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
|
|
3538
3614
|
target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
3539
3615
|
target.style.borderColor = "rgba(255, 255, 255, 0.9)";
|
|
3540
3616
|
},
|
|
3541
3617
|
onMouseLeave: (e) => {
|
|
3542
3618
|
const target = e.currentTarget;
|
|
3543
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3619
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3544
3620
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
|
|
3545
3621
|
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
3546
3622
|
target.style.borderColor = "rgba(255, 255, 255, 0.8)";
|
|
@@ -3630,7 +3706,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3630
3706
|
display: "flex",
|
|
3631
3707
|
alignItems: "center",
|
|
3632
3708
|
justifyContent: "space-between",
|
|
3633
|
-
color: "white"
|
|
3709
|
+
color: "white",
|
|
3710
|
+
flexWrap: viewportWidth < 768 ? "wrap" : "nowrap",
|
|
3711
|
+
gap: `${8 * responsiveScale}px`
|
|
3634
3712
|
},
|
|
3635
3713
|
children: [
|
|
3636
3714
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -3639,7 +3717,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3639
3717
|
style: {
|
|
3640
3718
|
display: "flex",
|
|
3641
3719
|
alignItems: "center",
|
|
3642
|
-
gap:
|
|
3720
|
+
gap: `${12 * responsiveScale}px`,
|
|
3721
|
+
flexWrap: viewportWidth < 480 ? "wrap" : "nowrap"
|
|
3643
3722
|
},
|
|
3644
3723
|
children: [
|
|
3645
3724
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -3647,44 +3726,42 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3647
3726
|
{
|
|
3648
3727
|
onClick: handlePlayPause,
|
|
3649
3728
|
style: {
|
|
3650
|
-
background: "linear-gradient(135deg, rgba(
|
|
3651
|
-
backdropFilter: "blur(
|
|
3652
|
-
border:
|
|
3729
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
3730
|
+
backdropFilter: "blur(12px)",
|
|
3731
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
3653
3732
|
color: "#ffffff",
|
|
3654
3733
|
cursor: "pointer",
|
|
3655
|
-
padding:
|
|
3656
|
-
borderRadius:
|
|
3734
|
+
padding: `${10 * responsiveScale}px`,
|
|
3735
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3657
3736
|
display: "flex",
|
|
3658
3737
|
alignItems: "center",
|
|
3659
3738
|
justifyContent: "center",
|
|
3660
3739
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3661
|
-
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.
|
|
3662
|
-
minWidth:
|
|
3663
|
-
minHeight:
|
|
3740
|
+
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)",
|
|
3741
|
+
minWidth: `${48 * responsiveScale}px`,
|
|
3742
|
+
minHeight: `${48 * responsiveScale}px`
|
|
3664
3743
|
},
|
|
3665
3744
|
onMouseEnter: (e) => {
|
|
3666
3745
|
const target = e.target;
|
|
3667
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3668
|
-
target.style.
|
|
3669
|
-
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
|
|
3746
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
3747
|
+
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)";
|
|
3670
3748
|
},
|
|
3671
3749
|
onMouseLeave: (e) => {
|
|
3672
3750
|
const target = e.target;
|
|
3673
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3674
|
-
target.style.
|
|
3675
|
-
target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
3751
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
3752
|
+
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)";
|
|
3676
3753
|
},
|
|
3677
3754
|
title: isPlaying ? "Pause" : "Play",
|
|
3678
3755
|
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3679
3756
|
import_fa.FaPause,
|
|
3680
3757
|
{
|
|
3681
|
-
size: 20,
|
|
3758
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3682
3759
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3683
3760
|
}
|
|
3684
3761
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3685
3762
|
import_fa.FaPlay,
|
|
3686
3763
|
{
|
|
3687
|
-
size: 20,
|
|
3764
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3688
3765
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3689
3766
|
}
|
|
3690
3767
|
)
|
|
@@ -3707,45 +3784,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3707
3784
|
"button",
|
|
3708
3785
|
{
|
|
3709
3786
|
onClick: () => {
|
|
3787
|
+
if (playerRef.current) {
|
|
3788
|
+
playerRef.current.toggleMute();
|
|
3789
|
+
}
|
|
3710
3790
|
if (onVolumeToggle) {
|
|
3711
3791
|
onVolumeToggle();
|
|
3712
|
-
} else if (playerRef.current) {
|
|
3713
|
-
playerRef.current.toggleMute();
|
|
3714
3792
|
}
|
|
3715
3793
|
},
|
|
3716
3794
|
style: {
|
|
3717
|
-
background: "linear-gradient(135deg, rgba(
|
|
3718
|
-
backdropFilter: "blur(
|
|
3719
|
-
border:
|
|
3720
|
-
color:
|
|
3795
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
3796
|
+
backdropFilter: "blur(10px)",
|
|
3797
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
3798
|
+
color: "#ffffff",
|
|
3721
3799
|
cursor: "pointer",
|
|
3722
|
-
padding:
|
|
3723
|
-
borderRadius:
|
|
3800
|
+
padding: `${8 * responsiveScale}px`,
|
|
3801
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3724
3802
|
display: "flex",
|
|
3725
3803
|
alignItems: "center",
|
|
3726
3804
|
justifyContent: "center",
|
|
3727
3805
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3728
|
-
boxShadow: "0 6px
|
|
3729
|
-
minWidth:
|
|
3730
|
-
minHeight:
|
|
3806
|
+
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)",
|
|
3807
|
+
minWidth: `${44 * responsiveScale}px`,
|
|
3808
|
+
minHeight: `${44 * responsiveScale}px`
|
|
3731
3809
|
},
|
|
3732
3810
|
onMouseEnter: (e) => {
|
|
3733
3811
|
const target = e.target;
|
|
3734
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3735
|
-
target.style.
|
|
3736
|
-
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
3812
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
3813
|
+
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)";
|
|
3737
3814
|
},
|
|
3738
3815
|
onMouseLeave: (e) => {
|
|
3739
3816
|
const target = e.target;
|
|
3740
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3741
|
-
target.style.
|
|
3742
|
-
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
3817
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
3818
|
+
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)";
|
|
3743
3819
|
},
|
|
3744
3820
|
title: isMuted ? "Unmute" : "Mute",
|
|
3745
3821
|
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3746
3822
|
import_fa.FaVolumeMute,
|
|
3747
3823
|
{
|
|
3748
|
-
size: 16,
|
|
3824
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3749
3825
|
style: {
|
|
3750
3826
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3751
3827
|
}
|
|
@@ -3753,7 +3829,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3753
3829
|
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3754
3830
|
import_fa.FaVolumeDown,
|
|
3755
3831
|
{
|
|
3756
|
-
size: 16,
|
|
3832
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3757
3833
|
style: {
|
|
3758
3834
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3759
3835
|
}
|
|
@@ -3761,7 +3837,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3761
3837
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3762
3838
|
import_fa.FaVolumeUp,
|
|
3763
3839
|
{
|
|
3764
|
-
size: 16,
|
|
3840
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3765
3841
|
style: {
|
|
3766
3842
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3767
3843
|
}
|
|
@@ -3812,13 +3888,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3812
3888
|
},
|
|
3813
3889
|
onMouseEnter: (e) => {
|
|
3814
3890
|
setShowVolumeSlider(true);
|
|
3815
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
3816
3891
|
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)";
|
|
3817
3892
|
e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
|
|
3818
3893
|
},
|
|
3819
3894
|
onMouseLeave: (e) => {
|
|
3820
3895
|
setShowVolumeSlider(false);
|
|
3821
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
3822
3896
|
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)";
|
|
3823
3897
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.15)";
|
|
3824
3898
|
},
|
|
@@ -3833,10 +3907,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3833
3907
|
transition: "transform 0.2s ease-in-out"
|
|
3834
3908
|
},
|
|
3835
3909
|
onMouseEnter: (e) => {
|
|
3836
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
3837
3910
|
},
|
|
3838
3911
|
onMouseLeave: (e) => {
|
|
3839
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
3840
3912
|
},
|
|
3841
3913
|
onMouseDown: (e) => {
|
|
3842
3914
|
e.preventDefault();
|
|
@@ -3849,11 +3921,23 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3849
3921
|
handleVolumeChange(percentage2);
|
|
3850
3922
|
};
|
|
3851
3923
|
const handleMouseUp = () => {
|
|
3852
|
-
document.removeEventListener(
|
|
3853
|
-
|
|
3924
|
+
document.removeEventListener(
|
|
3925
|
+
"mousemove",
|
|
3926
|
+
handleMouseMove
|
|
3927
|
+
);
|
|
3928
|
+
document.removeEventListener(
|
|
3929
|
+
"mouseup",
|
|
3930
|
+
handleMouseUp
|
|
3931
|
+
);
|
|
3854
3932
|
};
|
|
3855
|
-
document.addEventListener(
|
|
3856
|
-
|
|
3933
|
+
document.addEventListener(
|
|
3934
|
+
"mousemove",
|
|
3935
|
+
handleMouseMove
|
|
3936
|
+
);
|
|
3937
|
+
document.addEventListener(
|
|
3938
|
+
"mouseup",
|
|
3939
|
+
handleMouseUp
|
|
3940
|
+
);
|
|
3857
3941
|
const rect = sliderElement.getBoundingClientRect();
|
|
3858
3942
|
const y = e.clientY - rect.top;
|
|
3859
3943
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -3915,20 +3999,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3915
3999
|
cursor: "grab"
|
|
3916
4000
|
},
|
|
3917
4001
|
onMouseEnter: (e) => {
|
|
3918
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3919
4002
|
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)";
|
|
3920
4003
|
e.currentTarget.style.cursor = "grab";
|
|
3921
4004
|
},
|
|
3922
4005
|
onMouseLeave: (e) => {
|
|
3923
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
3924
4006
|
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)";
|
|
3925
4007
|
},
|
|
3926
4008
|
onMouseDown: (e) => {
|
|
3927
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.4)";
|
|
3928
4009
|
e.currentTarget.style.cursor = "grabbing";
|
|
3929
4010
|
},
|
|
3930
4011
|
onMouseUp: (e) => {
|
|
3931
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3932
4012
|
e.currentTarget.style.cursor = "grab";
|
|
3933
4013
|
}
|
|
3934
4014
|
}
|
|
@@ -3946,9 +4026,10 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3946
4026
|
"div",
|
|
3947
4027
|
{
|
|
3948
4028
|
style: {
|
|
3949
|
-
fontSize:
|
|
4029
|
+
fontSize: `${14 * responsiveScale}px`,
|
|
3950
4030
|
fontFamily: "monospace",
|
|
3951
|
-
color: "rgba(255, 255, 255, 0.9)"
|
|
4031
|
+
color: "rgba(255, 255, 255, 0.9)",
|
|
4032
|
+
display: viewportWidth < 480 ? "none" : "block"
|
|
3952
4033
|
},
|
|
3953
4034
|
children: [
|
|
3954
4035
|
formatTime(currentTime),
|
|
@@ -3966,105 +4047,113 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3966
4047
|
style: {
|
|
3967
4048
|
display: "flex",
|
|
3968
4049
|
alignItems: "center",
|
|
3969
|
-
gap:
|
|
4050
|
+
gap: `${12 * responsiveScale}px`
|
|
3970
4051
|
},
|
|
3971
4052
|
children: [
|
|
3972
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
{
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
|
|
3980
|
-
|
|
3981
|
-
|
|
3982
|
-
|
|
3983
|
-
|
|
3984
|
-
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
|
|
3993
|
-
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
const target = e.target;
|
|
4000
|
-
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
|
|
4001
|
-
target.style.transform = "translateY(0) scale(1)";
|
|
4002
|
-
target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
|
|
4003
|
-
},
|
|
4004
|
-
title: "Playback Speed",
|
|
4005
|
-
children: [
|
|
4006
|
-
playbackRate,
|
|
4007
|
-
"x"
|
|
4008
|
-
]
|
|
4009
|
-
}
|
|
4010
|
-
),
|
|
4011
|
-
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4012
|
-
"div",
|
|
4013
|
-
{
|
|
4014
|
-
style: {
|
|
4015
|
-
position: "absolute",
|
|
4016
|
-
bottom: "100%",
|
|
4017
|
-
right: 0,
|
|
4018
|
-
marginBottom: "12px",
|
|
4019
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
4020
|
-
backdropFilter: "blur(20px)",
|
|
4021
|
-
borderRadius: "12px",
|
|
4022
|
-
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
4023
|
-
overflow: "hidden",
|
|
4024
|
-
minWidth: "90px",
|
|
4025
|
-
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
4026
|
-
},
|
|
4027
|
-
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
4028
|
-
(speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
4029
|
-
"button",
|
|
4030
|
-
{
|
|
4031
|
-
onClick: () => handlePlaybackRateChange(speed),
|
|
4032
|
-
style: {
|
|
4033
|
-
display: "block",
|
|
4034
|
-
width: "100%",
|
|
4035
|
-
padding: "10px 16px",
|
|
4036
|
-
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
4037
|
-
border: "none",
|
|
4038
|
-
color: "white",
|
|
4039
|
-
cursor: "pointer",
|
|
4040
|
-
fontSize: "13px",
|
|
4041
|
-
fontFamily: "monospace",
|
|
4042
|
-
fontWeight: "600",
|
|
4043
|
-
textAlign: "center",
|
|
4044
|
-
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4045
|
-
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
4046
|
-
},
|
|
4047
|
-
onMouseEnter: (e) => {
|
|
4048
|
-
if (playbackRate !== speed) {
|
|
4049
|
-
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
4050
|
-
}
|
|
4051
|
-
},
|
|
4052
|
-
onMouseLeave: (e) => {
|
|
4053
|
-
if (playbackRate !== speed) {
|
|
4054
|
-
e.target.style.background = "transparent";
|
|
4055
|
-
}
|
|
4056
|
-
},
|
|
4057
|
-
children: [
|
|
4058
|
-
speed,
|
|
4059
|
-
"x"
|
|
4060
|
-
]
|
|
4053
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
4054
|
+
"div",
|
|
4055
|
+
{
|
|
4056
|
+
style: {
|
|
4057
|
+
position: "relative",
|
|
4058
|
+
display: viewportWidth < 600 ? "none" : "block"
|
|
4059
|
+
},
|
|
4060
|
+
children: [
|
|
4061
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
4062
|
+
"button",
|
|
4063
|
+
{
|
|
4064
|
+
onClick: () => setShowSpeedMenu(!showSpeedMenu),
|
|
4065
|
+
style: {
|
|
4066
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
4067
|
+
backdropFilter: "blur(10px)",
|
|
4068
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
4069
|
+
color: "#ffffff",
|
|
4070
|
+
cursor: "pointer",
|
|
4071
|
+
padding: `${8 * responsiveScale}px ${14 * responsiveScale}px`,
|
|
4072
|
+
borderRadius: `${14 * responsiveScale}px`,
|
|
4073
|
+
fontSize: `${14 * responsiveScale}px`,
|
|
4074
|
+
fontFamily: "monospace",
|
|
4075
|
+
fontWeight: "700",
|
|
4076
|
+
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4077
|
+
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)",
|
|
4078
|
+
minWidth: `${56 * responsiveScale}px`,
|
|
4079
|
+
minHeight: `${40 * responsiveScale}px`
|
|
4061
4080
|
},
|
|
4062
|
-
|
|
4063
|
-
|
|
4081
|
+
onMouseEnter: (e) => {
|
|
4082
|
+
const target = e.target;
|
|
4083
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
4084
|
+
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)";
|
|
4085
|
+
},
|
|
4086
|
+
onMouseLeave: (e) => {
|
|
4087
|
+
const target = e.target;
|
|
4088
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
4089
|
+
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)";
|
|
4090
|
+
},
|
|
4091
|
+
title: "Playback Speed",
|
|
4092
|
+
children: [
|
|
4093
|
+
playbackRate,
|
|
4094
|
+
"x"
|
|
4095
|
+
]
|
|
4096
|
+
}
|
|
4097
|
+
),
|
|
4098
|
+
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4099
|
+
"div",
|
|
4100
|
+
{
|
|
4101
|
+
style: {
|
|
4102
|
+
position: "absolute",
|
|
4103
|
+
bottom: "100%",
|
|
4104
|
+
right: 0,
|
|
4105
|
+
marginBottom: "12px",
|
|
4106
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
4107
|
+
backdropFilter: "blur(20px)",
|
|
4108
|
+
borderRadius: "12px",
|
|
4109
|
+
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
4110
|
+
overflow: "hidden",
|
|
4111
|
+
minWidth: "90px",
|
|
4112
|
+
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
4113
|
+
},
|
|
4114
|
+
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
4115
|
+
(speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
4116
|
+
"button",
|
|
4117
|
+
{
|
|
4118
|
+
onClick: () => handlePlaybackRateChange(speed),
|
|
4119
|
+
style: {
|
|
4120
|
+
display: "block",
|
|
4121
|
+
width: "100%",
|
|
4122
|
+
padding: "10px 16px",
|
|
4123
|
+
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
4124
|
+
border: "none",
|
|
4125
|
+
color: "white",
|
|
4126
|
+
cursor: "pointer",
|
|
4127
|
+
fontSize: "13px",
|
|
4128
|
+
fontFamily: "monospace",
|
|
4129
|
+
fontWeight: "600",
|
|
4130
|
+
textAlign: "center",
|
|
4131
|
+
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4132
|
+
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
4133
|
+
},
|
|
4134
|
+
onMouseEnter: (e) => {
|
|
4135
|
+
if (playbackRate !== speed) {
|
|
4136
|
+
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
4137
|
+
}
|
|
4138
|
+
},
|
|
4139
|
+
onMouseLeave: (e) => {
|
|
4140
|
+
if (playbackRate !== speed) {
|
|
4141
|
+
e.target.style.background = "transparent";
|
|
4142
|
+
}
|
|
4143
|
+
},
|
|
4144
|
+
children: [
|
|
4145
|
+
speed,
|
|
4146
|
+
"x"
|
|
4147
|
+
]
|
|
4148
|
+
},
|
|
4149
|
+
speed
|
|
4150
|
+
)
|
|
4151
|
+
)
|
|
4152
|
+
}
|
|
4064
4153
|
)
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4154
|
+
]
|
|
4155
|
+
}
|
|
4156
|
+
),
|
|
4068
4157
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4069
4158
|
"button",
|
|
4070
4159
|
{
|
|
@@ -4078,44 +4167,42 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4078
4167
|
}
|
|
4079
4168
|
},
|
|
4080
4169
|
style: {
|
|
4081
|
-
background: "linear-gradient(135deg, rgba(
|
|
4082
|
-
backdropFilter: "blur(
|
|
4083
|
-
border:
|
|
4170
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
|
|
4171
|
+
backdropFilter: "blur(10px)",
|
|
4172
|
+
border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
|
|
4084
4173
|
color: "#ffffff",
|
|
4085
4174
|
cursor: "pointer",
|
|
4086
|
-
padding:
|
|
4087
|
-
borderRadius:
|
|
4175
|
+
padding: `${8 * responsiveScale}px`,
|
|
4176
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
4088
4177
|
display: "flex",
|
|
4089
4178
|
alignItems: "center",
|
|
4090
4179
|
justifyContent: "center",
|
|
4091
4180
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4092
|
-
boxShadow: "0 6px
|
|
4093
|
-
minWidth:
|
|
4094
|
-
minHeight:
|
|
4181
|
+
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)",
|
|
4182
|
+
minWidth: `${44 * responsiveScale}px`,
|
|
4183
|
+
minHeight: `${44 * responsiveScale}px`
|
|
4095
4184
|
},
|
|
4096
4185
|
onMouseEnter: (e) => {
|
|
4097
4186
|
const target = e.target;
|
|
4098
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4099
|
-
target.style.
|
|
4100
|
-
target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
|
|
4187
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
|
|
4188
|
+
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)";
|
|
4101
4189
|
},
|
|
4102
4190
|
onMouseLeave: (e) => {
|
|
4103
4191
|
const target = e.target;
|
|
4104
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4105
|
-
target.style.
|
|
4106
|
-
target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
|
|
4192
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
|
|
4193
|
+
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)";
|
|
4107
4194
|
},
|
|
4108
4195
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4109
4196
|
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4110
4197
|
import_fa.FaCompress,
|
|
4111
4198
|
{
|
|
4112
|
-
size: 16,
|
|
4199
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4113
4200
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4114
4201
|
}
|
|
4115
4202
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4116
4203
|
import_fa.FaExpand,
|
|
4117
4204
|
{
|
|
4118
|
-
size: 16,
|
|
4205
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4119
4206
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4120
4207
|
}
|
|
4121
4208
|
)
|
|
@@ -4134,10 +4221,12 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4134
4221
|
{
|
|
4135
4222
|
style: {
|
|
4136
4223
|
position: "absolute",
|
|
4137
|
-
bottom:
|
|
4138
|
-
right:
|
|
4224
|
+
bottom: `${10 * responsiveScale}px`,
|
|
4225
|
+
right: `${10 * responsiveScale}px`,
|
|
4226
|
+
transform: "none",
|
|
4139
4227
|
display: "flex",
|
|
4140
|
-
|
|
4228
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
4229
|
+
gap: `${10 * responsiveScale}px`,
|
|
4141
4230
|
zIndex: 10
|
|
4142
4231
|
},
|
|
4143
4232
|
children: [
|
|
@@ -4158,45 +4247,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4158
4247
|
"button",
|
|
4159
4248
|
{
|
|
4160
4249
|
onClick: () => {
|
|
4250
|
+
if (playerRef.current) {
|
|
4251
|
+
playerRef.current.toggleMute();
|
|
4252
|
+
}
|
|
4161
4253
|
if (onVolumeToggle) {
|
|
4162
4254
|
onVolumeToggle();
|
|
4163
|
-
} else if (playerRef.current) {
|
|
4164
|
-
playerRef.current.toggleMute();
|
|
4165
4255
|
}
|
|
4166
4256
|
},
|
|
4167
4257
|
onMouseEnter: (e) => {
|
|
4168
4258
|
const target = e.currentTarget;
|
|
4169
|
-
target.style.
|
|
4170
|
-
target.style.
|
|
4171
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
4259
|
+
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)";
|
|
4260
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
4172
4261
|
},
|
|
4173
4262
|
onMouseLeave: (e) => {
|
|
4174
4263
|
const target = e.currentTarget;
|
|
4175
|
-
target.style.
|
|
4176
|
-
target.style.
|
|
4177
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
4264
|
+
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)";
|
|
4265
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
4178
4266
|
},
|
|
4179
4267
|
style: {
|
|
4180
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
4181
|
-
color:
|
|
4268
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
4269
|
+
color: "#ffffff",
|
|
4182
4270
|
border: "none",
|
|
4183
|
-
borderRadius:
|
|
4184
|
-
padding:
|
|
4271
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4272
|
+
padding: `${8 * responsiveScale}px`,
|
|
4185
4273
|
cursor: "pointer",
|
|
4186
4274
|
display: "flex",
|
|
4187
4275
|
alignItems: "center",
|
|
4188
4276
|
justifyContent: "center",
|
|
4189
4277
|
backdropFilter: "blur(20px)",
|
|
4190
|
-
boxShadow: "0
|
|
4278
|
+
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)",
|
|
4191
4279
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4192
|
-
minWidth:
|
|
4193
|
-
minHeight:
|
|
4280
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4281
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4194
4282
|
},
|
|
4195
4283
|
title: isMuted ? "Unmute" : "Mute",
|
|
4196
4284
|
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4197
4285
|
import_fa.FaVolumeMute,
|
|
4198
4286
|
{
|
|
4199
|
-
size: 16,
|
|
4287
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4200
4288
|
style: {
|
|
4201
4289
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4202
4290
|
color: "#ffffff"
|
|
@@ -4205,7 +4293,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4205
4293
|
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4206
4294
|
import_fa.FaVolumeDown,
|
|
4207
4295
|
{
|
|
4208
|
-
size: 16,
|
|
4296
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4209
4297
|
style: {
|
|
4210
4298
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4211
4299
|
color: "#ffffff"
|
|
@@ -4214,7 +4302,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4214
4302
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4215
4303
|
import_fa.FaVolumeUp,
|
|
4216
4304
|
{
|
|
4217
|
-
size: 16,
|
|
4305
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4218
4306
|
style: {
|
|
4219
4307
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4220
4308
|
color: "#ffffff"
|
|
@@ -4266,13 +4354,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4266
4354
|
},
|
|
4267
4355
|
onMouseEnter: (e) => {
|
|
4268
4356
|
setShowVolumeSlider(true);
|
|
4269
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
4270
4357
|
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)";
|
|
4271
4358
|
e.currentTarget.style.borderColor = "rgba(96, 165, 250, 0.8)";
|
|
4272
4359
|
},
|
|
4273
4360
|
onMouseLeave: (e) => {
|
|
4274
4361
|
setShowVolumeSlider(false);
|
|
4275
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
4276
4362
|
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)";
|
|
4277
4363
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.7)";
|
|
4278
4364
|
},
|
|
@@ -4286,12 +4372,6 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4286
4372
|
cursor: "pointer",
|
|
4287
4373
|
transition: "transform 0.2s ease-in-out"
|
|
4288
4374
|
},
|
|
4289
|
-
onMouseEnter: (e) => {
|
|
4290
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
4291
|
-
},
|
|
4292
|
-
onMouseLeave: (e) => {
|
|
4293
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
4294
|
-
},
|
|
4295
4375
|
onMouseDown: (e) => {
|
|
4296
4376
|
e.preventDefault();
|
|
4297
4377
|
const sliderElement = e.currentTarget;
|
|
@@ -4303,11 +4383,23 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4303
4383
|
handleVolumeChange(percentage2);
|
|
4304
4384
|
};
|
|
4305
4385
|
const handleMouseUp = () => {
|
|
4306
|
-
document.removeEventListener(
|
|
4307
|
-
|
|
4386
|
+
document.removeEventListener(
|
|
4387
|
+
"mousemove",
|
|
4388
|
+
handleMouseMove
|
|
4389
|
+
);
|
|
4390
|
+
document.removeEventListener(
|
|
4391
|
+
"mouseup",
|
|
4392
|
+
handleMouseUp
|
|
4393
|
+
);
|
|
4308
4394
|
};
|
|
4309
|
-
document.addEventListener(
|
|
4310
|
-
|
|
4395
|
+
document.addEventListener(
|
|
4396
|
+
"mousemove",
|
|
4397
|
+
handleMouseMove
|
|
4398
|
+
);
|
|
4399
|
+
document.addEventListener(
|
|
4400
|
+
"mouseup",
|
|
4401
|
+
handleMouseUp
|
|
4402
|
+
);
|
|
4311
4403
|
const rect = sliderElement.getBoundingClientRect();
|
|
4312
4404
|
const y = e.clientY - rect.top;
|
|
4313
4405
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -4371,20 +4463,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4371
4463
|
cursor: "grab"
|
|
4372
4464
|
},
|
|
4373
4465
|
onMouseEnter: (e) => {
|
|
4374
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4375
4466
|
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)";
|
|
4376
4467
|
e.currentTarget.style.cursor = "grab";
|
|
4377
4468
|
},
|
|
4378
4469
|
onMouseLeave: (e) => {
|
|
4379
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
4380
4470
|
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)";
|
|
4381
4471
|
},
|
|
4382
4472
|
onMouseDown: (e) => {
|
|
4383
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.45)";
|
|
4384
4473
|
e.currentTarget.style.cursor = "grabbing";
|
|
4385
4474
|
},
|
|
4386
4475
|
onMouseUp: (e) => {
|
|
4387
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4388
4476
|
e.currentTarget.style.cursor = "grab";
|
|
4389
4477
|
}
|
|
4390
4478
|
}
|
|
@@ -4412,37 +4500,35 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4412
4500
|
},
|
|
4413
4501
|
onMouseEnter: (e) => {
|
|
4414
4502
|
const target = e.currentTarget;
|
|
4415
|
-
target.style.
|
|
4416
|
-
target.style.
|
|
4417
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
|
|
4503
|
+
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)";
|
|
4504
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
|
|
4418
4505
|
},
|
|
4419
4506
|
onMouseLeave: (e) => {
|
|
4420
4507
|
const target = e.currentTarget;
|
|
4421
|
-
target.style.
|
|
4422
|
-
target.style.
|
|
4423
|
-
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
|
|
4508
|
+
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)";
|
|
4509
|
+
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
|
|
4424
4510
|
},
|
|
4425
4511
|
style: {
|
|
4426
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
4512
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
4427
4513
|
color: "#ffffff",
|
|
4428
4514
|
border: "none",
|
|
4429
|
-
borderRadius:
|
|
4430
|
-
padding:
|
|
4515
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4516
|
+
padding: `${8 * responsiveScale}px`,
|
|
4431
4517
|
cursor: "pointer",
|
|
4432
4518
|
display: "flex",
|
|
4433
4519
|
alignItems: "center",
|
|
4434
4520
|
justifyContent: "center",
|
|
4435
4521
|
backdropFilter: "blur(20px)",
|
|
4436
|
-
boxShadow: "0
|
|
4522
|
+
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)",
|
|
4437
4523
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4438
|
-
minWidth:
|
|
4439
|
-
minHeight:
|
|
4524
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4525
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4440
4526
|
},
|
|
4441
4527
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4442
4528
|
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4443
4529
|
import_fa.FaCompress,
|
|
4444
4530
|
{
|
|
4445
|
-
size: 16,
|
|
4531
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4446
4532
|
style: {
|
|
4447
4533
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4448
4534
|
color: "#ffffff"
|
|
@@ -4451,7 +4537,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4451
4537
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4452
4538
|
import_fa.FaExpand,
|
|
4453
4539
|
{
|
|
4454
|
-
size: 16,
|
|
4540
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4455
4541
|
style: {
|
|
4456
4542
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4457
4543
|
color: "#ffffff"
|
|
@@ -4741,10 +4827,20 @@ var HlsPlayer = class extends import_react3.Component {
|
|
|
4741
4827
|
}
|
|
4742
4828
|
};
|
|
4743
4829
|
this.play = () => {
|
|
4744
|
-
var _a, _b;
|
|
4830
|
+
var _a, _b, _c;
|
|
4745
4831
|
if (this.props.videoElement) {
|
|
4746
|
-
this.props.videoElement
|
|
4747
|
-
|
|
4832
|
+
const video = this.props.videoElement;
|
|
4833
|
+
const hasValidSource = video.src || video.currentSrc && video.currentSrc !== "" || video.readyState >= 1;
|
|
4834
|
+
if (hasValidSource) {
|
|
4835
|
+
(_a = video.play()) == null ? void 0 : _a.catch((error) => {
|
|
4836
|
+
var _a2, _b2;
|
|
4837
|
+
console.error("[HlsPlayer] Failed to play:", error);
|
|
4838
|
+
(_b2 = (_a2 = this.props).onError) == null ? void 0 : _b2.call(_a2, error);
|
|
4839
|
+
});
|
|
4840
|
+
(_c = (_b = this.props).onPlay) == null ? void 0 : _c.call(_b);
|
|
4841
|
+
} else {
|
|
4842
|
+
console.warn("[HlsPlayer] Cannot play: video has no valid source");
|
|
4843
|
+
}
|
|
4748
4844
|
}
|
|
4749
4845
|
};
|
|
4750
4846
|
this.pause = () => {
|
|
@@ -4913,8 +5009,19 @@ var FilePlayer = class extends import_react4.Component {
|
|
|
4913
5009
|
};
|
|
4914
5010
|
};
|
|
4915
5011
|
this.play = () => {
|
|
5012
|
+
var _a;
|
|
4916
5013
|
if (this.props.videoElement) {
|
|
4917
|
-
this.props.videoElement
|
|
5014
|
+
const video = this.props.videoElement;
|
|
5015
|
+
const hasValidSource = video.src || video.currentSrc && video.currentSrc !== "" || video.readyState >= 1;
|
|
5016
|
+
if (hasValidSource) {
|
|
5017
|
+
(_a = video.play()) == null ? void 0 : _a.catch((error) => {
|
|
5018
|
+
var _a2, _b;
|
|
5019
|
+
console.error("[FilePlayer] Failed to play:", error);
|
|
5020
|
+
(_b = (_a2 = this.props).onError) == null ? void 0 : _b.call(_a2, error);
|
|
5021
|
+
});
|
|
5022
|
+
} else {
|
|
5023
|
+
console.warn("[FilePlayer] Cannot play: video has no valid source");
|
|
5024
|
+
}
|
|
4918
5025
|
}
|
|
4919
5026
|
};
|
|
4920
5027
|
this.pause = () => {
|