stormcloud-video-player 0.2.14 → 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/README.md +92 -11
- package/dist/stormcloud-vp.min.js +2 -2
- package/lib/index.cjs +397 -256
- 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 +397 -256
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +91 -30
- 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 +104 -33
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +116 -34
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/hlsAdPlayer.cjs +27 -8
- package/lib/sdk/hlsAdPlayer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +372 -252
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -853,7 +853,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
853
853
|
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
|
|
854
854
|
const parserError = xmlDoc.querySelector("parsererror");
|
|
855
855
|
if (parserError) {
|
|
856
|
-
console.error("[HlsAdPlayer] XML parsing error:", parserError.textContent);
|
|
856
|
+
console.error("[HlsAdPlayer] XML parsing error (malformed VAST XML):", parserError.textContent);
|
|
857
857
|
return null;
|
|
858
858
|
}
|
|
859
859
|
const adElement = xmlDoc.querySelector("Ad");
|
|
@@ -863,28 +863,45 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
863
863
|
}
|
|
864
864
|
const adId = adElement.getAttribute("id") || "unknown";
|
|
865
865
|
const title = ((_a = xmlDoc.querySelector("AdTitle")) == null ? void 0 : _a.textContent) || "Ad";
|
|
866
|
+
const isNoAdAvailable = adId === "empty" || title.toLowerCase().includes("no ad available") || title.toLowerCase() === "no ad available";
|
|
866
867
|
const durationText = ((_b = xmlDoc.querySelector("Duration")) == null ? void 0 : _b.textContent) || "00:00:30";
|
|
867
868
|
const durationParts = durationText.split(":");
|
|
868
869
|
const duration = parseInt(durationParts[0] || "0", 10) * 3600 + parseInt(durationParts[1] || "0", 10) * 60 + parseInt(durationParts[2] || "0", 10);
|
|
869
870
|
const mediaFileElements = xmlDoc.querySelectorAll("MediaFile");
|
|
870
871
|
const mediaFiles = [];
|
|
871
|
-
mediaFileElements.
|
|
872
|
+
console.log(`[HlsAdPlayer] Found ${mediaFileElements.length} MediaFile element(s) in VAST XML`);
|
|
873
|
+
mediaFileElements.forEach((mf, index) => {
|
|
872
874
|
var _a2;
|
|
873
875
|
const type = mf.getAttribute("type") || "";
|
|
876
|
+
const url = ((_a2 = mf.textContent) == null ? void 0 : _a2.trim()) || "";
|
|
877
|
+
const width = mf.getAttribute("width") || "";
|
|
878
|
+
const height = mf.getAttribute("height") || "";
|
|
879
|
+
console.log(`[HlsAdPlayer] MediaFile ${index}: type="${type}", url="${url}", width="${width}", height="${height}"`);
|
|
874
880
|
if (type === "application/x-mpegURL" || type.includes("m3u8")) {
|
|
881
|
+
if (!url) {
|
|
882
|
+
console.warn(`[HlsAdPlayer] MediaFile ${index} has HLS type but empty URL`);
|
|
883
|
+
return;
|
|
884
|
+
}
|
|
875
885
|
const bitrateAttr = mf.getAttribute("bitrate");
|
|
876
886
|
const bitrateValue = bitrateAttr ? parseInt(bitrateAttr, 10) : void 0;
|
|
877
887
|
mediaFiles.push({
|
|
878
|
-
url
|
|
888
|
+
url,
|
|
879
889
|
type,
|
|
880
|
-
width: parseInt(
|
|
881
|
-
height: parseInt(
|
|
890
|
+
width: parseInt(width || "1920", 10),
|
|
891
|
+
height: parseInt(height || "1080", 10),
|
|
882
892
|
bitrate: bitrateValue && bitrateValue > 0 ? bitrateValue : void 0
|
|
883
893
|
});
|
|
894
|
+
console.log(`[HlsAdPlayer] Added HLS MediaFile: ${url}`);
|
|
895
|
+
} else {
|
|
896
|
+
console.log(`[HlsAdPlayer] MediaFile ${index} ignored (type="${type}" is not HLS)`);
|
|
884
897
|
}
|
|
885
898
|
});
|
|
886
899
|
if (mediaFiles.length === 0) {
|
|
887
|
-
|
|
900
|
+
if (isNoAdAvailable) {
|
|
901
|
+
console.warn("[HlsAdPlayer] No ads available (VAST response indicates no ads)");
|
|
902
|
+
} else {
|
|
903
|
+
console.warn("[HlsAdPlayer] No HLS media files found in VAST XML");
|
|
904
|
+
}
|
|
888
905
|
return null;
|
|
889
906
|
}
|
|
890
907
|
const trackingUrls = {
|
|
@@ -1072,9 +1089,11 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1072
1089
|
}
|
|
1073
1090
|
const vastXml = await response.text();
|
|
1074
1091
|
console.log("[HlsAdPlayer] VAST XML received");
|
|
1092
|
+
console.log("[HlsAdPlayer] VAST XML content (first 2000 chars):", vastXml.substring(0, 2e3));
|
|
1075
1093
|
const ad = parseVastXml(vastXml);
|
|
1076
1094
|
if (!ad) {
|
|
1077
|
-
|
|
1095
|
+
console.warn("[HlsAdPlayer] No ads available from VAST response");
|
|
1096
|
+
return Promise.resolve();
|
|
1078
1097
|
}
|
|
1079
1098
|
currentAd = ad;
|
|
1080
1099
|
console.log(`[HlsAdPlayer] Ad parsed: ${ad.title}, duration: ${ad.duration}s`);
|
|
@@ -1089,7 +1108,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1089
1108
|
},
|
|
1090
1109
|
async play() {
|
|
1091
1110
|
if (!currentAd) {
|
|
1092
|
-
console.warn("[HlsAdPlayer] Cannot play: No ad loaded");
|
|
1111
|
+
console.warn("[HlsAdPlayer] Cannot play: No ad loaded (no ads available)");
|
|
1093
1112
|
return Promise.reject(new Error("No ad loaded"));
|
|
1094
1113
|
}
|
|
1095
1114
|
console.log("[HlsAdPlayer] Starting ad playback");
|
|
@@ -1720,6 +1739,8 @@ var StormcloudVideoPlayer = class {
|
|
|
1720
1739
|
this.totalAdsInBreak = 0;
|
|
1721
1740
|
this.showAds = false;
|
|
1722
1741
|
this.isLiveStream = false;
|
|
1742
|
+
this.nativeHlsMode = false;
|
|
1743
|
+
this.videoSrcProtection = null;
|
|
1723
1744
|
initializePolyfills();
|
|
1724
1745
|
const browserOverrides = getBrowserConfigOverrides();
|
|
1725
1746
|
this.config = { ...config, ...browserOverrides };
|
|
@@ -1740,7 +1761,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1740
1761
|
}
|
|
1741
1762
|
if (adPlayerType === "hls") {
|
|
1742
1763
|
if (this.config.debugAdTiming) {
|
|
1743
|
-
console.log(
|
|
1764
|
+
console.log(
|
|
1765
|
+
"[StormcloudVideoPlayer] Creating HLS ad player (AdStorm mode)"
|
|
1766
|
+
);
|
|
1744
1767
|
}
|
|
1745
1768
|
return createHlsAdPlayer(this.video, {
|
|
1746
1769
|
continueLiveStreamDuringAds,
|
|
@@ -1749,7 +1772,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1749
1772
|
});
|
|
1750
1773
|
} else {
|
|
1751
1774
|
if (this.config.debugAdTiming) {
|
|
1752
|
-
console.log(
|
|
1775
|
+
console.log(
|
|
1776
|
+
"[StormcloudVideoPlayer] Creating Google IMA ad player (Default mode)"
|
|
1777
|
+
);
|
|
1753
1778
|
}
|
|
1754
1779
|
return createImaController(this.video, {
|
|
1755
1780
|
continueLiveStreamDuringAds
|
|
@@ -1773,11 +1798,13 @@ var StormcloudVideoPlayer = class {
|
|
|
1773
1798
|
}
|
|
1774
1799
|
this.initializeTracking();
|
|
1775
1800
|
if (this.shouldUseNativeHls()) {
|
|
1801
|
+
this.nativeHlsMode = true;
|
|
1802
|
+
this.videoSrcProtection = this.config.src;
|
|
1776
1803
|
this.video.src = this.config.src;
|
|
1777
1804
|
this.isLiveStream = (_a = this.config.lowLatencyMode) != null ? _a : false;
|
|
1778
1805
|
if (this.config.debugAdTiming) {
|
|
1779
1806
|
console.log(
|
|
1780
|
-
"[StormcloudVideoPlayer]
|
|
1807
|
+
"[StormcloudVideoPlayer] Using native HLS playback - VOD mode:",
|
|
1781
1808
|
{
|
|
1782
1809
|
isLive: this.isLiveStream,
|
|
1783
1810
|
allowNativeHls: this.config.allowNativeHls,
|
|
@@ -1925,7 +1952,9 @@ var StormcloudVideoPlayer = class {
|
|
|
1925
1952
|
this.ima.initialize();
|
|
1926
1953
|
this.ima.on("all_ads_completed", () => {
|
|
1927
1954
|
if (this.config.debugAdTiming) {
|
|
1928
|
-
console.log(
|
|
1955
|
+
console.log(
|
|
1956
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
1957
|
+
);
|
|
1929
1958
|
}
|
|
1930
1959
|
});
|
|
1931
1960
|
this.ima.on("ad_error", () => {
|
|
@@ -1990,13 +2019,31 @@ var StormcloudVideoPlayer = class {
|
|
|
1990
2019
|
this.video.addEventListener("timeupdate", () => {
|
|
1991
2020
|
this.onTimeUpdate(this.video.currentTime);
|
|
1992
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
|
+
});
|
|
1993
2040
|
}
|
|
1994
2041
|
shouldUseNativeHls() {
|
|
1995
2042
|
const streamType = this.getStreamType();
|
|
1996
2043
|
if (streamType === "other") {
|
|
1997
2044
|
return true;
|
|
1998
2045
|
}
|
|
1999
|
-
const canNative = this.video.canPlayType("application/vnd.apple.
|
|
2046
|
+
const canNative = this.video.canPlayType("application/vnd.apple.mpegurl");
|
|
2000
2047
|
return !!(this.config.allowNativeHls && canNative);
|
|
2001
2048
|
}
|
|
2002
2049
|
onId3Tag(tag) {
|
|
@@ -2423,10 +2470,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2423
2470
|
var _a, _b, _c;
|
|
2424
2471
|
const vastMode = this.config.vastMode || "default";
|
|
2425
2472
|
if (this.config.debugAdTiming) {
|
|
2426
|
-
console.log(
|
|
2427
|
-
"[StormcloudVideoPlayer] VAST mode:",
|
|
2428
|
-
vastMode
|
|
2429
|
-
);
|
|
2473
|
+
console.log("[StormcloudVideoPlayer] VAST mode:", vastMode);
|
|
2430
2474
|
}
|
|
2431
2475
|
if (vastMode === "adstorm") {
|
|
2432
2476
|
if (!this.config.licenseKey) {
|
|
@@ -2441,7 +2485,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2441
2485
|
this.apiVastTagUrl = vastEndpoint;
|
|
2442
2486
|
if (this.config.debugAdTiming) {
|
|
2443
2487
|
console.log(
|
|
2444
|
-
"[StormcloudVideoPlayer] Using AdStorm VAST endpoint:",
|
|
2488
|
+
"[StormcloudVideoPlayer] Using AdStorm VAST endpoint (adstorm mode):",
|
|
2445
2489
|
vastEndpoint
|
|
2446
2490
|
);
|
|
2447
2491
|
}
|
|
@@ -2544,10 +2588,7 @@ var StormcloudVideoPlayer = class {
|
|
|
2544
2588
|
this.currentAdIndex = 0;
|
|
2545
2589
|
this.totalAdsInBreak = 1;
|
|
2546
2590
|
if (this.config.debugAdTiming) {
|
|
2547
|
-
console.log(
|
|
2548
|
-
"[StormcloudVideoPlayer] Using VAST endpoint:",
|
|
2549
|
-
vastTagUrl
|
|
2550
|
-
);
|
|
2591
|
+
console.log("[StormcloudVideoPlayer] Using VAST endpoint:", vastTagUrl);
|
|
2551
2592
|
}
|
|
2552
2593
|
} else if (tags && tags.length > 0) {
|
|
2553
2594
|
vastTagUrl = tags[0];
|
|
@@ -2697,12 +2738,26 @@ var StormcloudVideoPlayer = class {
|
|
|
2697
2738
|
this.startAdFailsafeTimer();
|
|
2698
2739
|
try {
|
|
2699
2740
|
await this.ima.requestAds(vastTagUrl);
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2741
|
+
try {
|
|
2742
|
+
if (this.config.debugAdTiming) {
|
|
2743
|
+
console.log(
|
|
2744
|
+
"[StormcloudVideoPlayer] Ad request completed, attempting playback"
|
|
2745
|
+
);
|
|
2746
|
+
}
|
|
2747
|
+
await this.ima.play();
|
|
2748
|
+
if (this.config.debugAdTiming) {
|
|
2749
|
+
console.log(
|
|
2750
|
+
"[StormcloudVideoPlayer] Ad playback started successfully"
|
|
2751
|
+
);
|
|
2752
|
+
}
|
|
2753
|
+
} catch (playError) {
|
|
2754
|
+
if (this.config.debugAdTiming) {
|
|
2755
|
+
console.log(
|
|
2756
|
+
"[StormcloudVideoPlayer] No ads available, skipping playback"
|
|
2757
|
+
);
|
|
2758
|
+
}
|
|
2759
|
+
this.handleAdFailure();
|
|
2760
|
+
return;
|
|
2706
2761
|
}
|
|
2707
2762
|
} catch (error) {
|
|
2708
2763
|
if (this.config.debugAdTiming) {
|
|
@@ -2755,7 +2810,9 @@ var StormcloudVideoPlayer = class {
|
|
|
2755
2810
|
});
|
|
2756
2811
|
} else {
|
|
2757
2812
|
if (this.config.debugAdTiming) {
|
|
2758
|
-
console.log(
|
|
2813
|
+
console.log(
|
|
2814
|
+
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
2815
|
+
);
|
|
2759
2816
|
}
|
|
2760
2817
|
}
|
|
2761
2818
|
}
|
|
@@ -2774,7 +2831,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2774
2831
|
if (this.config.debugAdTiming) {
|
|
2775
2832
|
console.warn(
|
|
2776
2833
|
"[StormcloudVideoPlayer] Failsafe timer triggered - forcing video resume",
|
|
2777
|
-
{
|
|
2834
|
+
{
|
|
2835
|
+
paused: this.video.paused,
|
|
2836
|
+
showAds: this.showAds,
|
|
2837
|
+
adPlaying: this.ima.isAdPlaying()
|
|
2838
|
+
}
|
|
2778
2839
|
);
|
|
2779
2840
|
}
|
|
2780
2841
|
this.handleAdFailure();
|
|
@@ -2919,7 +2980,8 @@ var CRITICAL_PROPS = [
|
|
|
2919
2980
|
"allowNativeHls",
|
|
2920
2981
|
"licenseKey",
|
|
2921
2982
|
"lowLatencyMode",
|
|
2922
|
-
"driftToleranceMs"
|
|
2983
|
+
"driftToleranceMs",
|
|
2984
|
+
"vastMode"
|
|
2923
2985
|
];
|
|
2924
2986
|
var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
2925
2987
|
(props) => {
|
|
@@ -2947,6 +3009,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2947
3009
|
poster,
|
|
2948
3010
|
children,
|
|
2949
3011
|
licenseKey,
|
|
3012
|
+
vastMode,
|
|
3013
|
+
vastTagUrl,
|
|
3014
|
+
adPlayerType,
|
|
2950
3015
|
...restVideoAttrs
|
|
2951
3016
|
} = props;
|
|
2952
3017
|
const videoRef = (0, import_react.useRef)(null);
|
|
@@ -2966,6 +3031,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2966
3031
|
const [isBuffering, setIsBuffering] = import_react.default.useState(false);
|
|
2967
3032
|
const [showCenterPlay, setShowCenterPlay] = import_react.default.useState(false);
|
|
2968
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();
|
|
2969
3047
|
const formatTime = (seconds) => {
|
|
2970
3048
|
if (!isFinite(seconds)) return "0:00:00";
|
|
2971
3049
|
const hours = Math.floor(seconds / 3600);
|
|
@@ -2974,10 +3052,20 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2974
3052
|
return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
|
|
2975
3053
|
};
|
|
2976
3054
|
const handlePlayPause = () => {
|
|
3055
|
+
var _a;
|
|
2977
3056
|
if (videoRef.current) {
|
|
2978
3057
|
if (videoRef.current.paused) {
|
|
2979
|
-
videoRef.current.
|
|
2980
|
-
|
|
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
|
+
}
|
|
2981
3069
|
} else {
|
|
2982
3070
|
videoRef.current.pause();
|
|
2983
3071
|
setShowCenterPlay(true);
|
|
@@ -2985,9 +3073,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
2985
3073
|
}
|
|
2986
3074
|
};
|
|
2987
3075
|
const handleCenterPlayClick = () => {
|
|
3076
|
+
var _a;
|
|
2988
3077
|
if (videoRef.current && videoRef.current.paused) {
|
|
2989
|
-
videoRef.current.
|
|
2990
|
-
|
|
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
|
+
}
|
|
2991
3089
|
}
|
|
2992
3090
|
};
|
|
2993
3091
|
const handleTimelineSeek = (e) => {
|
|
@@ -3018,7 +3116,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3018
3116
|
const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
|
|
3019
3117
|
const criticalPropsKey = (0, import_react.useMemo)(() => {
|
|
3020
3118
|
return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
|
|
3021
|
-
}, [
|
|
3119
|
+
}, [
|
|
3120
|
+
src,
|
|
3121
|
+
allowNativeHls,
|
|
3122
|
+
licenseKey,
|
|
3123
|
+
lowLatencyMode,
|
|
3124
|
+
driftToleranceMs,
|
|
3125
|
+
vastMode
|
|
3126
|
+
]);
|
|
3022
3127
|
(0, import_react.useEffect)(() => {
|
|
3023
3128
|
if (typeof window === "undefined") return;
|
|
3024
3129
|
const el = videoRef.current;
|
|
@@ -3059,6 +3164,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3059
3164
|
cfg.onFullscreenToggle = onFullscreenToggle;
|
|
3060
3165
|
if (onControlClick !== void 0) cfg.onControlClick = onControlClick;
|
|
3061
3166
|
if (licenseKey !== void 0) cfg.licenseKey = licenseKey;
|
|
3167
|
+
if (vastMode !== void 0) cfg.vastMode = vastMode;
|
|
3168
|
+
if (vastTagUrl !== void 0) cfg.vastTagUrl = vastTagUrl;
|
|
3169
|
+
if (adPlayerType !== void 0) cfg.adPlayerType = adPlayerType;
|
|
3062
3170
|
const player = new StormcloudVideoPlayer(cfg);
|
|
3063
3171
|
playerRef.current = player;
|
|
3064
3172
|
player.load().then(() => {
|
|
@@ -3119,6 +3227,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3119
3227
|
playerRef.current.resize();
|
|
3120
3228
|
}
|
|
3121
3229
|
}
|
|
3230
|
+
setViewportWidth(window.innerWidth);
|
|
3231
|
+
setIsPortrait(window.innerHeight > window.innerWidth);
|
|
3122
3232
|
};
|
|
3123
3233
|
window.addEventListener("resize", handleResize);
|
|
3124
3234
|
return () => window.removeEventListener("resize", handleResize);
|
|
@@ -3435,14 +3545,14 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3435
3545
|
},
|
|
3436
3546
|
onMouseEnter: (e) => {
|
|
3437
3547
|
const target = e.currentTarget;
|
|
3438
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3548
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3439
3549
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
|
|
3440
3550
|
target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
|
|
3441
3551
|
target.style.borderColor = "rgba(255, 255, 255, 0.9)";
|
|
3442
3552
|
},
|
|
3443
3553
|
onMouseLeave: (e) => {
|
|
3444
3554
|
const target = e.currentTarget;
|
|
3445
|
-
target.style.transform = "translate(-50%, -50%)
|
|
3555
|
+
target.style.transform = "translate(-50%, -50%)";
|
|
3446
3556
|
target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
|
|
3447
3557
|
target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
|
|
3448
3558
|
target.style.borderColor = "rgba(255, 255, 255, 0.8)";
|
|
@@ -3532,7 +3642,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3532
3642
|
display: "flex",
|
|
3533
3643
|
alignItems: "center",
|
|
3534
3644
|
justifyContent: "space-between",
|
|
3535
|
-
color: "white"
|
|
3645
|
+
color: "white",
|
|
3646
|
+
flexWrap: viewportWidth < 768 ? "wrap" : "nowrap",
|
|
3647
|
+
gap: `${8 * responsiveScale}px`
|
|
3536
3648
|
},
|
|
3537
3649
|
children: [
|
|
3538
3650
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -3541,7 +3653,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3541
3653
|
style: {
|
|
3542
3654
|
display: "flex",
|
|
3543
3655
|
alignItems: "center",
|
|
3544
|
-
gap:
|
|
3656
|
+
gap: `${12 * responsiveScale}px`,
|
|
3657
|
+
flexWrap: viewportWidth < 480 ? "wrap" : "nowrap"
|
|
3545
3658
|
},
|
|
3546
3659
|
children: [
|
|
3547
3660
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -3549,44 +3662,42 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3549
3662
|
{
|
|
3550
3663
|
onClick: handlePlayPause,
|
|
3551
3664
|
style: {
|
|
3552
|
-
background: "linear-gradient(135deg, rgba(
|
|
3553
|
-
backdropFilter: "blur(
|
|
3554
|
-
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)`,
|
|
3555
3668
|
color: "#ffffff",
|
|
3556
3669
|
cursor: "pointer",
|
|
3557
|
-
padding:
|
|
3558
|
-
borderRadius:
|
|
3670
|
+
padding: `${10 * responsiveScale}px`,
|
|
3671
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3559
3672
|
display: "flex",
|
|
3560
3673
|
alignItems: "center",
|
|
3561
3674
|
justifyContent: "center",
|
|
3562
3675
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3563
|
-
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.
|
|
3564
|
-
minWidth:
|
|
3565
|
-
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`
|
|
3566
3679
|
},
|
|
3567
3680
|
onMouseEnter: (e) => {
|
|
3568
3681
|
const target = e.target;
|
|
3569
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3570
|
-
target.style.
|
|
3571
|
-
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)";
|
|
3572
3684
|
},
|
|
3573
3685
|
onMouseLeave: (e) => {
|
|
3574
3686
|
const target = e.target;
|
|
3575
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3576
|
-
target.style.
|
|
3577
|
-
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)";
|
|
3578
3689
|
},
|
|
3579
3690
|
title: isPlaying ? "Pause" : "Play",
|
|
3580
3691
|
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3581
3692
|
import_fa.FaPause,
|
|
3582
3693
|
{
|
|
3583
|
-
size: 20,
|
|
3694
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3584
3695
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3585
3696
|
}
|
|
3586
3697
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3587
3698
|
import_fa.FaPlay,
|
|
3588
3699
|
{
|
|
3589
|
-
size: 20,
|
|
3700
|
+
size: Math.max(16, 20 * responsiveScale),
|
|
3590
3701
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
3591
3702
|
}
|
|
3592
3703
|
)
|
|
@@ -3609,45 +3720,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3609
3720
|
"button",
|
|
3610
3721
|
{
|
|
3611
3722
|
onClick: () => {
|
|
3723
|
+
if (playerRef.current) {
|
|
3724
|
+
playerRef.current.toggleMute();
|
|
3725
|
+
}
|
|
3612
3726
|
if (onVolumeToggle) {
|
|
3613
3727
|
onVolumeToggle();
|
|
3614
|
-
} else if (playerRef.current) {
|
|
3615
|
-
playerRef.current.toggleMute();
|
|
3616
3728
|
}
|
|
3617
3729
|
},
|
|
3618
3730
|
style: {
|
|
3619
|
-
background: "linear-gradient(135deg, rgba(
|
|
3620
|
-
backdropFilter: "blur(
|
|
3621
|
-
border:
|
|
3622
|
-
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",
|
|
3623
3735
|
cursor: "pointer",
|
|
3624
|
-
padding:
|
|
3625
|
-
borderRadius:
|
|
3736
|
+
padding: `${8 * responsiveScale}px`,
|
|
3737
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3626
3738
|
display: "flex",
|
|
3627
3739
|
alignItems: "center",
|
|
3628
3740
|
justifyContent: "center",
|
|
3629
3741
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3630
|
-
boxShadow: "0 6px
|
|
3631
|
-
minWidth:
|
|
3632
|
-
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`
|
|
3633
3745
|
},
|
|
3634
3746
|
onMouseEnter: (e) => {
|
|
3635
3747
|
const target = e.target;
|
|
3636
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3637
|
-
target.style.
|
|
3638
|
-
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)";
|
|
3639
3750
|
},
|
|
3640
3751
|
onMouseLeave: (e) => {
|
|
3641
3752
|
const target = e.target;
|
|
3642
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
3643
|
-
target.style.
|
|
3644
|
-
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)";
|
|
3645
3755
|
},
|
|
3646
3756
|
title: isMuted ? "Unmute" : "Mute",
|
|
3647
3757
|
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3648
3758
|
import_fa.FaVolumeMute,
|
|
3649
3759
|
{
|
|
3650
|
-
size: 16,
|
|
3760
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3651
3761
|
style: {
|
|
3652
3762
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3653
3763
|
}
|
|
@@ -3655,7 +3765,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3655
3765
|
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3656
3766
|
import_fa.FaVolumeDown,
|
|
3657
3767
|
{
|
|
3658
|
-
size: 16,
|
|
3768
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3659
3769
|
style: {
|
|
3660
3770
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3661
3771
|
}
|
|
@@ -3663,7 +3773,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3663
3773
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3664
3774
|
import_fa.FaVolumeUp,
|
|
3665
3775
|
{
|
|
3666
|
-
size: 16,
|
|
3776
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
3667
3777
|
style: {
|
|
3668
3778
|
filter: "drop-shadow(0 0 0 transparent)"
|
|
3669
3779
|
}
|
|
@@ -3714,13 +3824,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3714
3824
|
},
|
|
3715
3825
|
onMouseEnter: (e) => {
|
|
3716
3826
|
setShowVolumeSlider(true);
|
|
3717
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
3718
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)";
|
|
3719
3828
|
e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
|
|
3720
3829
|
},
|
|
3721
3830
|
onMouseLeave: (e) => {
|
|
3722
3831
|
setShowVolumeSlider(false);
|
|
3723
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
3724
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)";
|
|
3725
3833
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.15)";
|
|
3726
3834
|
},
|
|
@@ -3735,10 +3843,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3735
3843
|
transition: "transform 0.2s ease-in-out"
|
|
3736
3844
|
},
|
|
3737
3845
|
onMouseEnter: (e) => {
|
|
3738
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
3739
3846
|
},
|
|
3740
3847
|
onMouseLeave: (e) => {
|
|
3741
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
3742
3848
|
},
|
|
3743
3849
|
onMouseDown: (e) => {
|
|
3744
3850
|
e.preventDefault();
|
|
@@ -3751,11 +3857,23 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3751
3857
|
handleVolumeChange(percentage2);
|
|
3752
3858
|
};
|
|
3753
3859
|
const handleMouseUp = () => {
|
|
3754
|
-
document.removeEventListener(
|
|
3755
|
-
|
|
3860
|
+
document.removeEventListener(
|
|
3861
|
+
"mousemove",
|
|
3862
|
+
handleMouseMove
|
|
3863
|
+
);
|
|
3864
|
+
document.removeEventListener(
|
|
3865
|
+
"mouseup",
|
|
3866
|
+
handleMouseUp
|
|
3867
|
+
);
|
|
3756
3868
|
};
|
|
3757
|
-
document.addEventListener(
|
|
3758
|
-
|
|
3869
|
+
document.addEventListener(
|
|
3870
|
+
"mousemove",
|
|
3871
|
+
handleMouseMove
|
|
3872
|
+
);
|
|
3873
|
+
document.addEventListener(
|
|
3874
|
+
"mouseup",
|
|
3875
|
+
handleMouseUp
|
|
3876
|
+
);
|
|
3759
3877
|
const rect = sliderElement.getBoundingClientRect();
|
|
3760
3878
|
const y = e.clientY - rect.top;
|
|
3761
3879
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -3817,20 +3935,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3817
3935
|
cursor: "grab"
|
|
3818
3936
|
},
|
|
3819
3937
|
onMouseEnter: (e) => {
|
|
3820
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3821
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)";
|
|
3822
3939
|
e.currentTarget.style.cursor = "grab";
|
|
3823
3940
|
},
|
|
3824
3941
|
onMouseLeave: (e) => {
|
|
3825
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
3826
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)";
|
|
3827
3943
|
},
|
|
3828
3944
|
onMouseDown: (e) => {
|
|
3829
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.4)";
|
|
3830
3945
|
e.currentTarget.style.cursor = "grabbing";
|
|
3831
3946
|
},
|
|
3832
3947
|
onMouseUp: (e) => {
|
|
3833
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
|
|
3834
3948
|
e.currentTarget.style.cursor = "grab";
|
|
3835
3949
|
}
|
|
3836
3950
|
}
|
|
@@ -3848,9 +3962,10 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3848
3962
|
"div",
|
|
3849
3963
|
{
|
|
3850
3964
|
style: {
|
|
3851
|
-
fontSize:
|
|
3965
|
+
fontSize: `${14 * responsiveScale}px`,
|
|
3852
3966
|
fontFamily: "monospace",
|
|
3853
|
-
color: "rgba(255, 255, 255, 0.9)"
|
|
3967
|
+
color: "rgba(255, 255, 255, 0.9)",
|
|
3968
|
+
display: viewportWidth < 480 ? "none" : "block"
|
|
3854
3969
|
},
|
|
3855
3970
|
children: [
|
|
3856
3971
|
formatTime(currentTime),
|
|
@@ -3868,105 +3983,113 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3868
3983
|
style: {
|
|
3869
3984
|
display: "flex",
|
|
3870
3985
|
alignItems: "center",
|
|
3871
|
-
gap:
|
|
3986
|
+
gap: `${12 * responsiveScale}px`
|
|
3872
3987
|
},
|
|
3873
3988
|
children: [
|
|
3874
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
{
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
|
|
3896
|
-
|
|
3897
|
-
|
|
3898
|
-
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
const target = e.target;
|
|
3902
|
-
target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
|
|
3903
|
-
target.style.transform = "translateY(0) scale(1)";
|
|
3904
|
-
target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
|
|
3905
|
-
},
|
|
3906
|
-
title: "Playback Speed",
|
|
3907
|
-
children: [
|
|
3908
|
-
playbackRate,
|
|
3909
|
-
"x"
|
|
3910
|
-
]
|
|
3911
|
-
}
|
|
3912
|
-
),
|
|
3913
|
-
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3914
|
-
"div",
|
|
3915
|
-
{
|
|
3916
|
-
style: {
|
|
3917
|
-
position: "absolute",
|
|
3918
|
-
bottom: "100%",
|
|
3919
|
-
right: 0,
|
|
3920
|
-
marginBottom: "12px",
|
|
3921
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
|
|
3922
|
-
backdropFilter: "blur(20px)",
|
|
3923
|
-
borderRadius: "12px",
|
|
3924
|
-
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
3925
|
-
overflow: "hidden",
|
|
3926
|
-
minWidth: "90px",
|
|
3927
|
-
boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
3928
|
-
},
|
|
3929
|
-
children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
|
|
3930
|
-
(speed) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
3931
|
-
"button",
|
|
3932
|
-
{
|
|
3933
|
-
onClick: () => handlePlaybackRateChange(speed),
|
|
3934
|
-
style: {
|
|
3935
|
-
display: "block",
|
|
3936
|
-
width: "100%",
|
|
3937
|
-
padding: "10px 16px",
|
|
3938
|
-
background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
|
|
3939
|
-
border: "none",
|
|
3940
|
-
color: "white",
|
|
3941
|
-
cursor: "pointer",
|
|
3942
|
-
fontSize: "13px",
|
|
3943
|
-
fontFamily: "monospace",
|
|
3944
|
-
fontWeight: "600",
|
|
3945
|
-
textAlign: "center",
|
|
3946
|
-
transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3947
|
-
borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
|
|
3948
|
-
},
|
|
3949
|
-
onMouseEnter: (e) => {
|
|
3950
|
-
if (playbackRate !== speed) {
|
|
3951
|
-
e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
|
|
3952
|
-
}
|
|
3953
|
-
},
|
|
3954
|
-
onMouseLeave: (e) => {
|
|
3955
|
-
if (playbackRate !== speed) {
|
|
3956
|
-
e.target.style.background = "transparent";
|
|
3957
|
-
}
|
|
3958
|
-
},
|
|
3959
|
-
children: [
|
|
3960
|
-
speed,
|
|
3961
|
-
"x"
|
|
3962
|
-
]
|
|
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`
|
|
3963
4016
|
},
|
|
3964
|
-
|
|
3965
|
-
|
|
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
|
+
}
|
|
3966
4089
|
)
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
4090
|
+
]
|
|
4091
|
+
}
|
|
4092
|
+
),
|
|
3970
4093
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3971
4094
|
"button",
|
|
3972
4095
|
{
|
|
@@ -3980,44 +4103,42 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
3980
4103
|
}
|
|
3981
4104
|
},
|
|
3982
4105
|
style: {
|
|
3983
|
-
background: "linear-gradient(135deg, rgba(
|
|
3984
|
-
backdropFilter: "blur(
|
|
3985
|
-
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)`,
|
|
3986
4109
|
color: "#ffffff",
|
|
3987
4110
|
cursor: "pointer",
|
|
3988
|
-
padding:
|
|
3989
|
-
borderRadius:
|
|
4111
|
+
padding: `${8 * responsiveScale}px`,
|
|
4112
|
+
borderRadius: `${16 * responsiveScale}px`,
|
|
3990
4113
|
display: "flex",
|
|
3991
4114
|
alignItems: "center",
|
|
3992
4115
|
justifyContent: "center",
|
|
3993
4116
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3994
|
-
boxShadow: "0 6px
|
|
3995
|
-
minWidth:
|
|
3996
|
-
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`
|
|
3997
4120
|
},
|
|
3998
4121
|
onMouseEnter: (e) => {
|
|
3999
4122
|
const target = e.target;
|
|
4000
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4001
|
-
target.style.
|
|
4002
|
-
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)";
|
|
4003
4125
|
},
|
|
4004
4126
|
onMouseLeave: (e) => {
|
|
4005
4127
|
const target = e.target;
|
|
4006
|
-
target.style.background = "linear-gradient(135deg, rgba(
|
|
4007
|
-
target.style.
|
|
4008
|
-
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)";
|
|
4009
4130
|
},
|
|
4010
4131
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4011
4132
|
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4012
4133
|
import_fa.FaCompress,
|
|
4013
4134
|
{
|
|
4014
|
-
size: 16,
|
|
4135
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4015
4136
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4016
4137
|
}
|
|
4017
4138
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4018
4139
|
import_fa.FaExpand,
|
|
4019
4140
|
{
|
|
4020
|
-
size: 16,
|
|
4141
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4021
4142
|
style: { filter: "drop-shadow(0 0 0 transparent)" }
|
|
4022
4143
|
}
|
|
4023
4144
|
)
|
|
@@ -4036,10 +4157,12 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4036
4157
|
{
|
|
4037
4158
|
style: {
|
|
4038
4159
|
position: "absolute",
|
|
4039
|
-
bottom:
|
|
4040
|
-
right:
|
|
4160
|
+
bottom: `${10 * responsiveScale}px`,
|
|
4161
|
+
right: `${10 * responsiveScale}px`,
|
|
4162
|
+
transform: "none",
|
|
4041
4163
|
display: "flex",
|
|
4042
|
-
|
|
4164
|
+
flexDirection: isPortrait ? "column" : "row",
|
|
4165
|
+
gap: `${10 * responsiveScale}px`,
|
|
4043
4166
|
zIndex: 10
|
|
4044
4167
|
},
|
|
4045
4168
|
children: [
|
|
@@ -4060,45 +4183,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4060
4183
|
"button",
|
|
4061
4184
|
{
|
|
4062
4185
|
onClick: () => {
|
|
4186
|
+
if (playerRef.current) {
|
|
4187
|
+
playerRef.current.toggleMute();
|
|
4188
|
+
}
|
|
4063
4189
|
if (onVolumeToggle) {
|
|
4064
4190
|
onVolumeToggle();
|
|
4065
|
-
} else if (playerRef.current) {
|
|
4066
|
-
playerRef.current.toggleMute();
|
|
4067
4191
|
}
|
|
4068
4192
|
},
|
|
4069
4193
|
onMouseEnter: (e) => {
|
|
4070
4194
|
const target = e.currentTarget;
|
|
4071
|
-
target.style.
|
|
4072
|
-
target.style.
|
|
4073
|
-
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%)";
|
|
4074
4197
|
},
|
|
4075
4198
|
onMouseLeave: (e) => {
|
|
4076
4199
|
const target = e.currentTarget;
|
|
4077
|
-
target.style.
|
|
4078
|
-
target.style.
|
|
4079
|
-
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%)";
|
|
4080
4202
|
},
|
|
4081
4203
|
style: {
|
|
4082
|
-
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.
|
|
4083
|
-
color:
|
|
4204
|
+
background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
|
|
4205
|
+
color: "#ffffff",
|
|
4084
4206
|
border: "none",
|
|
4085
|
-
borderRadius:
|
|
4086
|
-
padding:
|
|
4207
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4208
|
+
padding: `${8 * responsiveScale}px`,
|
|
4087
4209
|
cursor: "pointer",
|
|
4088
4210
|
display: "flex",
|
|
4089
4211
|
alignItems: "center",
|
|
4090
4212
|
justifyContent: "center",
|
|
4091
4213
|
backdropFilter: "blur(20px)",
|
|
4092
|
-
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)",
|
|
4093
4215
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4094
|
-
minWidth:
|
|
4095
|
-
minHeight:
|
|
4216
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4217
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4096
4218
|
},
|
|
4097
4219
|
title: isMuted ? "Unmute" : "Mute",
|
|
4098
4220
|
children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4099
4221
|
import_fa.FaVolumeMute,
|
|
4100
4222
|
{
|
|
4101
|
-
size: 16,
|
|
4223
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4102
4224
|
style: {
|
|
4103
4225
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4104
4226
|
color: "#ffffff"
|
|
@@ -4107,7 +4229,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4107
4229
|
) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4108
4230
|
import_fa.FaVolumeDown,
|
|
4109
4231
|
{
|
|
4110
|
-
size: 16,
|
|
4232
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4111
4233
|
style: {
|
|
4112
4234
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4113
4235
|
color: "#ffffff"
|
|
@@ -4116,7 +4238,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4116
4238
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4117
4239
|
import_fa.FaVolumeUp,
|
|
4118
4240
|
{
|
|
4119
|
-
size: 16,
|
|
4241
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4120
4242
|
style: {
|
|
4121
4243
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4122
4244
|
color: "#ffffff"
|
|
@@ -4168,13 +4290,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4168
4290
|
},
|
|
4169
4291
|
onMouseEnter: (e) => {
|
|
4170
4292
|
setShowVolumeSlider(true);
|
|
4171
|
-
e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
|
|
4172
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)";
|
|
4173
4294
|
e.currentTarget.style.borderColor = "rgba(96, 165, 250, 0.8)";
|
|
4174
4295
|
},
|
|
4175
4296
|
onMouseLeave: (e) => {
|
|
4176
4297
|
setShowVolumeSlider(false);
|
|
4177
|
-
e.currentTarget.style.transform = "translateX(-50%)";
|
|
4178
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)";
|
|
4179
4299
|
e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.7)";
|
|
4180
4300
|
},
|
|
@@ -4188,12 +4308,6 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4188
4308
|
cursor: "pointer",
|
|
4189
4309
|
transition: "transform 0.2s ease-in-out"
|
|
4190
4310
|
},
|
|
4191
|
-
onMouseEnter: (e) => {
|
|
4192
|
-
e.currentTarget.style.transform = "scaleX(1.2)";
|
|
4193
|
-
},
|
|
4194
|
-
onMouseLeave: (e) => {
|
|
4195
|
-
e.currentTarget.style.transform = "scaleX(1)";
|
|
4196
|
-
},
|
|
4197
4311
|
onMouseDown: (e) => {
|
|
4198
4312
|
e.preventDefault();
|
|
4199
4313
|
const sliderElement = e.currentTarget;
|
|
@@ -4205,11 +4319,23 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4205
4319
|
handleVolumeChange(percentage2);
|
|
4206
4320
|
};
|
|
4207
4321
|
const handleMouseUp = () => {
|
|
4208
|
-
document.removeEventListener(
|
|
4209
|
-
|
|
4322
|
+
document.removeEventListener(
|
|
4323
|
+
"mousemove",
|
|
4324
|
+
handleMouseMove
|
|
4325
|
+
);
|
|
4326
|
+
document.removeEventListener(
|
|
4327
|
+
"mouseup",
|
|
4328
|
+
handleMouseUp
|
|
4329
|
+
);
|
|
4210
4330
|
};
|
|
4211
|
-
document.addEventListener(
|
|
4212
|
-
|
|
4331
|
+
document.addEventListener(
|
|
4332
|
+
"mousemove",
|
|
4333
|
+
handleMouseMove
|
|
4334
|
+
);
|
|
4335
|
+
document.addEventListener(
|
|
4336
|
+
"mouseup",
|
|
4337
|
+
handleMouseUp
|
|
4338
|
+
);
|
|
4213
4339
|
const rect = sliderElement.getBoundingClientRect();
|
|
4214
4340
|
const y = e.clientY - rect.top;
|
|
4215
4341
|
const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
|
|
@@ -4273,20 +4399,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4273
4399
|
cursor: "grab"
|
|
4274
4400
|
},
|
|
4275
4401
|
onMouseEnter: (e) => {
|
|
4276
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4277
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)";
|
|
4278
4403
|
e.currentTarget.style.cursor = "grab";
|
|
4279
4404
|
},
|
|
4280
4405
|
onMouseLeave: (e) => {
|
|
4281
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1)";
|
|
4282
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)";
|
|
4283
4407
|
},
|
|
4284
4408
|
onMouseDown: (e) => {
|
|
4285
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.45)";
|
|
4286
4409
|
e.currentTarget.style.cursor = "grabbing";
|
|
4287
4410
|
},
|
|
4288
4411
|
onMouseUp: (e) => {
|
|
4289
|
-
e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
|
|
4290
4412
|
e.currentTarget.style.cursor = "grab";
|
|
4291
4413
|
}
|
|
4292
4414
|
}
|
|
@@ -4314,37 +4436,35 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4314
4436
|
},
|
|
4315
4437
|
onMouseEnter: (e) => {
|
|
4316
4438
|
const target = e.currentTarget;
|
|
4317
|
-
target.style.
|
|
4318
|
-
target.style.
|
|
4319
|
-
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%)";
|
|
4320
4441
|
},
|
|
4321
4442
|
onMouseLeave: (e) => {
|
|
4322
4443
|
const target = e.currentTarget;
|
|
4323
|
-
target.style.
|
|
4324
|
-
target.style.
|
|
4325
|
-
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%)";
|
|
4326
4446
|
},
|
|
4327
4447
|
style: {
|
|
4328
|
-
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%)",
|
|
4329
4449
|
color: "#ffffff",
|
|
4330
4450
|
border: "none",
|
|
4331
|
-
borderRadius:
|
|
4332
|
-
padding:
|
|
4451
|
+
borderRadius: `${18 * responsiveScale}px`,
|
|
4452
|
+
padding: `${8 * responsiveScale}px`,
|
|
4333
4453
|
cursor: "pointer",
|
|
4334
4454
|
display: "flex",
|
|
4335
4455
|
alignItems: "center",
|
|
4336
4456
|
justifyContent: "center",
|
|
4337
4457
|
backdropFilter: "blur(20px)",
|
|
4338
|
-
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)",
|
|
4339
4459
|
transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
4340
|
-
minWidth:
|
|
4341
|
-
minHeight:
|
|
4460
|
+
minWidth: `${46 * responsiveScale}px`,
|
|
4461
|
+
minHeight: `${46 * responsiveScale}px`
|
|
4342
4462
|
},
|
|
4343
4463
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
4344
4464
|
children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4345
4465
|
import_fa.FaCompress,
|
|
4346
4466
|
{
|
|
4347
|
-
size: 16,
|
|
4467
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4348
4468
|
style: {
|
|
4349
4469
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4350
4470
|
color: "#ffffff"
|
|
@@ -4353,7 +4473,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(
|
|
|
4353
4473
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
4354
4474
|
import_fa.FaExpand,
|
|
4355
4475
|
{
|
|
4356
|
-
size: 16,
|
|
4476
|
+
size: Math.max(14, 16 * responsiveScale),
|
|
4357
4477
|
style: {
|
|
4358
4478
|
filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
|
|
4359
4479
|
color: "#ffffff"
|