stormcloud-video-player 0.2.14 → 0.2.16

package/lib/index.js

@@ -848,7 +848,7 @@ function createHlsAdPlayer(contentVideo, options) {
       const xmlDoc = parser.parseFromString(xmlString, "text/xml");
       const parserError = xmlDoc.querySelector("parsererror");
       if (parserError) {
-        console.error("[HlsAdPlayer] XML parsing error:", parserError.textContent);
+        console.error("[HlsAdPlayer] XML parsing error (malformed VAST XML):", parserError.textContent);
         return null;
       }
       const adElement = xmlDoc.querySelector("Ad");
@@ -858,28 +858,45 @@ function createHlsAdPlayer(contentVideo, options) {
       }
       const adId = adElement.getAttribute("id") || "unknown";
       const title = ((_a = xmlDoc.querySelector("AdTitle")) == null ? void 0 : _a.textContent) || "Ad";
+      const isNoAdAvailable = adId === "empty" || title.toLowerCase().includes("no ad available") || title.toLowerCase() === "no ad available";
       const durationText = ((_b = xmlDoc.querySelector("Duration")) == null ? void 0 : _b.textContent) || "00:00:30";
       const durationParts = durationText.split(":");
       const duration = parseInt(durationParts[0] || "0", 10) * 3600 + parseInt(durationParts[1] || "0", 10) * 60 + parseInt(durationParts[2] || "0", 10);
       const mediaFileElements = xmlDoc.querySelectorAll("MediaFile");
       const mediaFiles = [];
-      mediaFileElements.forEach((mf) => {
+      console.log(`[HlsAdPlayer] Found ${mediaFileElements.length} MediaFile element(s) in VAST XML`);
+      mediaFileElements.forEach((mf, index) => {
         var _a2;
         const type = mf.getAttribute("type") || "";
+        const url = ((_a2 = mf.textContent) == null ? void 0 : _a2.trim()) || "";
+        const width = mf.getAttribute("width") || "";
+        const height = mf.getAttribute("height") || "";
+        console.log(`[HlsAdPlayer] MediaFile ${index}: type="${type}", url="${url}", width="${width}", height="${height}"`);
         if (type === "application/x-mpegURL" || type.includes("m3u8")) {
+          if (!url) {
+            console.warn(`[HlsAdPlayer] MediaFile ${index} has HLS type but empty URL`);
+            return;
+          }
           const bitrateAttr = mf.getAttribute("bitrate");
           const bitrateValue = bitrateAttr ? parseInt(bitrateAttr, 10) : void 0;
           mediaFiles.push({
-            url: ((_a2 = mf.textContent) == null ? void 0 : _a2.trim()) || "",
+            url,
             type,
-            width: parseInt(mf.getAttribute("width") || "1920", 10),
-            height: parseInt(mf.getAttribute("height") || "1080", 10),
+            width: parseInt(width || "1920", 10),
+            height: parseInt(height || "1080", 10),
             bitrate: bitrateValue && bitrateValue > 0 ? bitrateValue : void 0
           });
+          console.log(`[HlsAdPlayer] Added HLS MediaFile: ${url}`);
+        } else {
+          console.log(`[HlsAdPlayer] MediaFile ${index} ignored (type="${type}" is not HLS)`);
         }
       });
       if (mediaFiles.length === 0) {
-        console.warn("[HlsAdPlayer] No HLS media files found in VAST XML");
+        if (isNoAdAvailable) {
+          console.warn("[HlsAdPlayer] No ads available (VAST response indicates no ads)");
+        } else {
+          console.warn("[HlsAdPlayer] No HLS media files found in VAST XML");
+        }
         return null;
       }
       const trackingUrls = {
@@ -1067,9 +1084,11 @@ function createHlsAdPlayer(contentVideo, options) {
         }
         const vastXml = await response.text();
         console.log("[HlsAdPlayer] VAST XML received");
+        console.log("[HlsAdPlayer] VAST XML content (first 2000 chars):", vastXml.substring(0, 2e3));
         const ad = parseVastXml(vastXml);
         if (!ad) {
-          throw new Error("Failed to parse VAST XML or no ads available");
+          console.warn("[HlsAdPlayer] No ads available from VAST response");
+          return Promise.resolve();
         }
         currentAd = ad;
         console.log(`[HlsAdPlayer] Ad parsed: ${ad.title}, duration: ${ad.duration}s`);
@@ -1084,7 +1103,7 @@ function createHlsAdPlayer(contentVideo, options) {
     },
     async play() {
       if (!currentAd) {
-        console.warn("[HlsAdPlayer] Cannot play: No ad loaded");
+        console.warn("[HlsAdPlayer] Cannot play: No ad loaded (no ads available)");
         return Promise.reject(new Error("No ad loaded"));
       }
       console.log("[HlsAdPlayer] Starting ad playback");
@@ -1715,6 +1734,8 @@ var StormcloudVideoPlayer = class {
     this.totalAdsInBreak = 0;
     this.showAds = false;
     this.isLiveStream = false;
+    this.nativeHlsMode = false;
+    this.videoSrcProtection = null;
     initializePolyfills();
     const browserOverrides = getBrowserConfigOverrides();
     this.config = { ...config, ...browserOverrides };
@@ -1735,7 +1756,9 @@ var StormcloudVideoPlayer = class {
     }
     if (adPlayerType === "hls") {
       if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] Creating HLS ad player (AdStorm mode)");
+        console.log(
+          "[StormcloudVideoPlayer] Creating HLS ad player (AdStorm mode)"
+        );
       }
       return createHlsAdPlayer(this.video, {
         continueLiveStreamDuringAds,
@@ -1744,7 +1767,9 @@ var StormcloudVideoPlayer = class {
       });
     } else {
       if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] Creating Google IMA ad player (Default mode)");
+        console.log(
+          "[StormcloudVideoPlayer] Creating Google IMA ad player (Default mode)"
+        );
       }
       return createImaController(this.video, {
         continueLiveStreamDuringAds
@@ -1768,11 +1793,13 @@ var StormcloudVideoPlayer = class {
     }
     this.initializeTracking();
     if (this.shouldUseNativeHls()) {
+      this.nativeHlsMode = true;
+      this.videoSrcProtection = this.config.src;
       this.video.src = this.config.src;
       this.isLiveStream = (_a = this.config.lowLatencyMode) != null ? _a : false;
       if (this.config.debugAdTiming) {
         console.log(
-          "[StormcloudVideoPlayer] allowNativeHls: true - VOD mode detected:",
+          "[StormcloudVideoPlayer] Using native HLS playback - VOD mode:",
           {
             isLive: this.isLiveStream,
             allowNativeHls: this.config.allowNativeHls,
@@ -1920,7 +1947,9 @@ var StormcloudVideoPlayer = class {
     this.ima.initialize();
     this.ima.on("all_ads_completed", () => {
       if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] IMA all_ads_completed event received");
+        console.log(
+          "[StormcloudVideoPlayer] IMA all_ads_completed event received"
+        );
       }
     });
     this.ima.on("ad_error", () => {
@@ -1985,13 +2014,31 @@ var StormcloudVideoPlayer = class {
     this.video.addEventListener("timeupdate", () => {
       this.onTimeUpdate(this.video.currentTime);
     });
+    this.video.addEventListener("emptied", () => {
+      if (this.nativeHlsMode && this.videoSrcProtection && !this.ima.isAdPlaying()) {
+        if (this.config.debugAdTiming) {
+          console.log(
+            "[StormcloudVideoPlayer] Video src was cleared, restoring:",
+            this.videoSrcProtection
+          );
+        }
+        const currentTime = this.video.currentTime;
+        const wasPaused = this.video.paused;
+        this.video.src = this.videoSrcProtection;
+        this.video.currentTime = currentTime;
+        if (!wasPaused) {
+          this.video.play().catch(() => {
+          });
+        }
+      }
+    });
   }
   shouldUseNativeHls() {
     const streamType = this.getStreamType();
     if (streamType === "other") {
       return true;
     }
-    const canNative = this.video.canPlayType("application/vnd.apple.mpegURL");
+    const canNative = this.video.canPlayType("application/vnd.apple.mpegurl");
     return !!(this.config.allowNativeHls && canNative);
   }
   onId3Tag(tag) {
@@ -2418,10 +2465,7 @@ var StormcloudVideoPlayer = class {
     var _a, _b, _c;
     const vastMode = this.config.vastMode || "default";
     if (this.config.debugAdTiming) {
-      console.log(
-        "[StormcloudVideoPlayer] VAST mode:",
-        vastMode
-      );
+      console.log("[StormcloudVideoPlayer] VAST mode:", vastMode);
     }
     if (vastMode === "adstorm") {
       if (!this.config.licenseKey) {
@@ -2436,7 +2480,7 @@ var StormcloudVideoPlayer = class {
       this.apiVastTagUrl = vastEndpoint;
       if (this.config.debugAdTiming) {
         console.log(
-          "[StormcloudVideoPlayer] Using AdStorm VAST endpoint:",
+          "[StormcloudVideoPlayer] Using AdStorm VAST endpoint (adstorm mode):",
           vastEndpoint
         );
       }
@@ -2539,10 +2583,7 @@ var StormcloudVideoPlayer = class {
       this.currentAdIndex = 0;
       this.totalAdsInBreak = 1;
       if (this.config.debugAdTiming) {
-        console.log(
-          "[StormcloudVideoPlayer] Using VAST endpoint:",
-          vastTagUrl
-        );
+        console.log("[StormcloudVideoPlayer] Using VAST endpoint:", vastTagUrl);
       }
     } else if (tags && tags.length > 0) {
       vastTagUrl = tags[0];
@@ -2692,12 +2733,26 @@ var StormcloudVideoPlayer = class {
     this.startAdFailsafeTimer();
     try {
       await this.ima.requestAds(vastTagUrl);
-      if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] Ad request successful, starting playback");
-      }
-      await this.ima.play();
-      if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] Ad playback started successfully");
+      try {
+        if (this.config.debugAdTiming) {
+          console.log(
+            "[StormcloudVideoPlayer] Ad request completed, attempting playback"
+          );
+        }
+        await this.ima.play();
+        if (this.config.debugAdTiming) {
+          console.log(
+            "[StormcloudVideoPlayer] Ad playback started successfully"
+          );
+        }
+      } catch (playError) {
+        if (this.config.debugAdTiming) {
+          console.log(
+            "[StormcloudVideoPlayer] No ads available, skipping playback"
+          );
+        }
+        this.handleAdFailure();
+        return;
       }
     } catch (error) {
       if (this.config.debugAdTiming) {
@@ -2750,7 +2805,9 @@ var StormcloudVideoPlayer = class {
       });
     } else {
       if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] Video is already playing, no resume needed");
+        console.log(
+          "[StormcloudVideoPlayer] Video is already playing, no resume needed"
+        );
       }
     }
   }
@@ -2769,7 +2826,11 @@ var StormcloudVideoPlayer = class {
         if (this.config.debugAdTiming) {
           console.warn(
             "[StormcloudVideoPlayer] Failsafe timer triggered - forcing video resume",
-            { paused: this.video.paused, showAds: this.showAds, adPlaying: this.ima.isAdPlaying() }
+            {
+              paused: this.video.paused,
+              showAds: this.showAds,
+              adPlaying: this.ima.isAdPlaying()
+            }
           );
         }
         this.handleAdFailure();
@@ -2923,7 +2984,8 @@ var CRITICAL_PROPS = [
   "allowNativeHls",
   "licenseKey",
   "lowLatencyMode",
-  "driftToleranceMs"
+  "driftToleranceMs",
+  "vastMode"
 ];
 var StormcloudVideoPlayerComponent = React.memo(
   (props) => {
@@ -2951,6 +3013,9 @@ var StormcloudVideoPlayerComponent = React.memo(
       poster,
       children,
       licenseKey,
+      vastMode,
+      vastTagUrl,
+      adPlayerType,
       ...restVideoAttrs
     } = props;
     const videoRef = useRef(null);
@@ -2970,6 +3035,19 @@ var StormcloudVideoPlayerComponent = React.memo(
     const [isBuffering, setIsBuffering] = React.useState(false);
     const [showCenterPlay, setShowCenterPlay] = React.useState(false);
     const [showLicenseWarning, setShowLicenseWarning] = React.useState(false);
+    const [viewportWidth, setViewportWidth] = React.useState(
+      typeof window !== "undefined" ? window.innerWidth : 1920
+    );
+    const [isPortrait, setIsPortrait] = React.useState(
+      typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false
+    );
+    const getResponsiveScale = () => {
+      if (viewportWidth < 480) return 0.7;
+      if (viewportWidth < 768) return 0.8;
+      if (viewportWidth < 1024) return 0.9;
+      return 1;
+    };
+    const responsiveScale = getResponsiveScale();
     const formatTime = (seconds) => {
       if (!isFinite(seconds)) return "0:00:00";
       const hours = Math.floor(seconds / 3600);
@@ -2978,10 +3056,20 @@ var StormcloudVideoPlayerComponent = React.memo(
       return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
     };
     const handlePlayPause = () => {
+      var _a;
       if (videoRef.current) {
         if (videoRef.current.paused) {
-          videoRef.current.play();
-          setShowCenterPlay(false);
+          const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
+          if (hasValidSource) {
+            (_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
+              console.error("[StormcloudVideoPlayer] Failed to play:", error);
+            });
+            setShowCenterPlay(false);
+          } else {
+            console.warn(
+              "[StormcloudVideoPlayer] Cannot play: video has no valid source"
+            );
+          }
         } else {
           videoRef.current.pause();
           setShowCenterPlay(true);
@@ -2989,9 +3077,19 @@ var StormcloudVideoPlayerComponent = React.memo(
       }
     };
     const handleCenterPlayClick = () => {
+      var _a;
       if (videoRef.current && videoRef.current.paused) {
-        videoRef.current.play();
-        setShowCenterPlay(false);
+        const hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
+        if (hasValidSource) {
+          (_a = videoRef.current.play()) == null ? void 0 : _a.catch((error) => {
+            console.error("[StormcloudVideoPlayer] Failed to play:", error);
+          });
+          setShowCenterPlay(false);
+        } else {
+          console.warn(
+            "[StormcloudVideoPlayer] Cannot play: video has no valid source"
+          );
+        }
       }
     };
     const handleTimelineSeek = (e) => {
@@ -3022,7 +3120,14 @@ var StormcloudVideoPlayerComponent = React.memo(
     const shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
     const criticalPropsKey = useMemo(() => {
       return CRITICAL_PROPS.map((prop) => `${prop}:${props[prop]}`).join("|");
-    }, [src, allowNativeHls, licenseKey, lowLatencyMode, driftToleranceMs]);
+    }, [
+      src,
+      allowNativeHls,
+      licenseKey,
+      lowLatencyMode,
+      driftToleranceMs,
+      vastMode
+    ]);
     useEffect(() => {
       if (typeof window === "undefined") return;
       const el = videoRef.current;
@@ -3063,6 +3168,9 @@ var StormcloudVideoPlayerComponent = React.memo(
         cfg.onFullscreenToggle = onFullscreenToggle;
       if (onControlClick !== void 0) cfg.onControlClick = onControlClick;
       if (licenseKey !== void 0) cfg.licenseKey = licenseKey;
+      if (vastMode !== void 0) cfg.vastMode = vastMode;
+      if (vastTagUrl !== void 0) cfg.vastTagUrl = vastTagUrl;
+      if (adPlayerType !== void 0) cfg.adPlayerType = adPlayerType;
       const player = new StormcloudVideoPlayer(cfg);
       playerRef.current = player;
       player.load().then(() => {
@@ -3123,6 +3231,8 @@ var StormcloudVideoPlayerComponent = React.memo(
             playerRef.current.resize();
           }
         }
+        setViewportWidth(window.innerWidth);
+        setIsPortrait(window.innerHeight > window.innerWidth);
       };
       window.addEventListener("resize", handleResize);
       return () => window.removeEventListener("resize", handleResize);
@@ -3439,14 +3549,14 @@ var StormcloudVideoPlayerComponent = React.memo(
                 },
                 onMouseEnter: (e) => {
                   const target = e.currentTarget;
-                  target.style.transform = "translate(-50%, -50%) scale(1.1)";
+                  target.style.transform = "translate(-50%, -50%)";
                   target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
                   target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
                   target.style.borderColor = "rgba(255, 255, 255, 0.9)";
                 },
                 onMouseLeave: (e) => {
                   const target = e.currentTarget;
-                  target.style.transform = "translate(-50%, -50%) scale(1)";
+                  target.style.transform = "translate(-50%, -50%)";
                   target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
                   target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
                   target.style.borderColor = "rgba(255, 255, 255, 0.8)";
@@ -3536,7 +3646,9 @@ var StormcloudVideoPlayerComponent = React.memo(
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "space-between",
-                        color: "white"
+                        color: "white",
+                        flexWrap: viewportWidth < 768 ? "wrap" : "nowrap",
+                        gap: `${8 * responsiveScale}px`
                       },
                       children: [
                         /* @__PURE__ */ jsxs(
@@ -3545,7 +3657,8 @@ var StormcloudVideoPlayerComponent = React.memo(
                             style: {
                               display: "flex",
                               alignItems: "center",
-                              gap: "12px"
+                              gap: `${12 * responsiveScale}px`,
+                              flexWrap: viewportWidth < 480 ? "wrap" : "nowrap"
                             },
                             children: [
                               /* @__PURE__ */ jsx(
@@ -3553,44 +3666,42 @@ var StormcloudVideoPlayerComponent = React.memo(
                                 {
                                   onClick: handlePlayPause,
                                   style: {
-                                    background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)",
-                                    backdropFilter: "blur(10px)",
-                                    border: "1px solid rgba(255, 255, 255, 0.2)",
+                                    background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
+                                    backdropFilter: "blur(12px)",
+                                    border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
                                     color: "#ffffff",
                                     cursor: "pointer",
-                                    padding: "12px",
-                                    borderRadius: "12px",
+                                    padding: `${10 * responsiveScale}px`,
+                                    borderRadius: `${16 * responsiveScale}px`,
                                     display: "flex",
                                     alignItems: "center",
                                     justifyContent: "center",
                                     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
-                                    minWidth: "48px",
-                                    minHeight: "48px"
+                                    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)",
+                                    minWidth: `${48 * responsiveScale}px`,
+                                    minHeight: `${48 * responsiveScale}px`
                                   },
                                   onMouseEnter: (e) => {
                                     const target = e.target;
-                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%)";
-                                    target.style.transform = "translateY(-2px) scale(1.05)";
-                                    target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
+                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
+                                    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)";
                                   },
                                   onMouseLeave: (e) => {
                                     const target = e.target;
-                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
-                                    target.style.transform = "translateY(0) scale(1)";
-                                    target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
+                                    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)";
                                   },
                                   title: isPlaying ? "Pause" : "Play",
                                   children: isPlaying ? /* @__PURE__ */ jsx(
                                     FaPause,
                                     {
-                                      size: 20,
+                                      size: Math.max(16, 20 * responsiveScale),
                                       style: { filter: "drop-shadow(0 0 0 transparent)" }
                                     }
                                   ) : /* @__PURE__ */ jsx(
                                     FaPlay,
                                     {
-                                      size: 20,
+                                      size: Math.max(16, 20 * responsiveScale),
                                       style: { filter: "drop-shadow(0 0 0 transparent)" }
                                     }
                                   )
@@ -3613,45 +3724,44 @@ var StormcloudVideoPlayerComponent = React.memo(
                                       "button",
                                       {
                                         onClick: () => {
+                                          if (playerRef.current) {
+                                            playerRef.current.toggleMute();
+                                          }
                                           if (onVolumeToggle) {
                                             onVolumeToggle();
-                                          } else if (playerRef.current) {
-                                            playerRef.current.toggleMute();
                                           }
                                         },
                                         style: {
-                                          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
-                                          backdropFilter: "blur(8px)",
-                                          border: "1px solid rgba(255, 255, 255, 0.15)",
-                                          color: isMuted ? "#ff6b6b" : "#ffffff",
+                                          background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
+                                          backdropFilter: "blur(10px)",
+                                          border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
+                                          color: "#ffffff",
                                           cursor: "pointer",
-                                          padding: "10px",
-                                          borderRadius: "10px",
+                                          padding: `${8 * responsiveScale}px`,
+                                          borderRadius: `${16 * responsiveScale}px`,
                                           display: "flex",
                                           alignItems: "center",
                                           justifyContent: "center",
                                           transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                          boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
-                                          minWidth: "40px",
-                                          minHeight: "40px"
+                                          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)",
+                                          minWidth: `${44 * responsiveScale}px`,
+                                          minHeight: `${44 * responsiveScale}px`
                                         },
                                         onMouseEnter: (e) => {
                                           const target = e.target;
-                                          target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
-                                          target.style.transform = "translateY(-1px) scale(1.03)";
-                                          target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                                          target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
+                                          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)";
                                         },
                                         onMouseLeave: (e) => {
                                           const target = e.target;
-                                          target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
-                                          target.style.transform = "translateY(0) scale(1)";
-                                          target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
+                                          target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
+                                          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)";
                                         },
                                         title: isMuted ? "Unmute" : "Mute",
                                         children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
                                           FaVolumeMute,
                                           {
-                                            size: 16,
+                                            size: Math.max(14, 16 * responsiveScale),
                                             style: {
                                               filter: "drop-shadow(0 0 0 transparent)"
                                             }
@@ -3659,7 +3769,7 @@ var StormcloudVideoPlayerComponent = React.memo(
                                         ) : volume < 0.5 ? /* @__PURE__ */ jsx(
                                           FaVolumeDown,
                                           {
-                                            size: 16,
+                                            size: Math.max(14, 16 * responsiveScale),
                                             style: {
                                               filter: "drop-shadow(0 0 0 transparent)"
                                             }
@@ -3667,7 +3777,7 @@ var StormcloudVideoPlayerComponent = React.memo(
                                         ) : /* @__PURE__ */ jsx(
                                           FaVolumeUp,
                                           {
-                                            size: 16,
+                                            size: Math.max(14, 16 * responsiveScale),
                                             style: {
                                               filter: "drop-shadow(0 0 0 transparent)"
                                             }
@@ -3718,13 +3828,11 @@ var StormcloudVideoPlayerComponent = React.memo(
                                           },
                                           onMouseEnter: (e) => {
                                             setShowVolumeSlider(true);
-                                            e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
                                             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)";
                                             e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
                                           },
                                           onMouseLeave: (e) => {
                                             setShowVolumeSlider(false);
-                                            e.currentTarget.style.transform = "translateX(-50%)";
                                             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)";
                                             e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.15)";
                                           },
@@ -3739,10 +3847,8 @@ var StormcloudVideoPlayerComponent = React.memo(
                                                 transition: "transform 0.2s ease-in-out"
                                               },
                                               onMouseEnter: (e) => {
-                                                e.currentTarget.style.transform = "scaleX(1.2)";
                                               },
                                               onMouseLeave: (e) => {
-                                                e.currentTarget.style.transform = "scaleX(1)";
                                               },
                                               onMouseDown: (e) => {
                                                 e.preventDefault();
@@ -3755,11 +3861,23 @@ var StormcloudVideoPlayerComponent = React.memo(
                                                   handleVolumeChange(percentage2);
                                                 };
                                                 const handleMouseUp = () => {
-                                                  document.removeEventListener("mousemove", handleMouseMove);
-                                                  document.removeEventListener("mouseup", handleMouseUp);
+                                                  document.removeEventListener(
+                                                    "mousemove",
+                                                    handleMouseMove
+                                                  );
+                                                  document.removeEventListener(
+                                                    "mouseup",
+                                                    handleMouseUp
+                                                  );
                                                 };
-                                                document.addEventListener("mousemove", handleMouseMove);
-                                                document.addEventListener("mouseup", handleMouseUp);
+                                                document.addEventListener(
+                                                  "mousemove",
+                                                  handleMouseMove
+                                                );
+                                                document.addEventListener(
+                                                  "mouseup",
+                                                  handleMouseUp
+                                                );
                                                 const rect = sliderElement.getBoundingClientRect();
                                                 const y = e.clientY - rect.top;
                                                 const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
@@ -3821,20 +3939,16 @@ var StormcloudVideoPlayerComponent = React.memo(
                                                       cursor: "grab"
                                                     },
                                                     onMouseEnter: (e) => {
-                                                      e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
                                                       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)";
                                                       e.currentTarget.style.cursor = "grab";
                                                     },
                                                     onMouseLeave: (e) => {
-                                                      e.currentTarget.style.transform = "translateX(-50%) scale(1)";
                                                       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)";
                                                     },
                                                     onMouseDown: (e) => {
-                                                      e.currentTarget.style.transform = "translateX(-50%) scale(1.4)";
                                                       e.currentTarget.style.cursor = "grabbing";
                                                     },
                                                     onMouseUp: (e) => {
-                                                      e.currentTarget.style.transform = "translateX(-50%) scale(1.3)";
                                                       e.currentTarget.style.cursor = "grab";
                                                     }
                                                   }
@@ -3852,9 +3966,10 @@ var StormcloudVideoPlayerComponent = React.memo(
                                 "div",
                                 {
                                   style: {
-                                    fontSize: "14px",
+                                    fontSize: `${14 * responsiveScale}px`,
                                     fontFamily: "monospace",
-                                    color: "rgba(255, 255, 255, 0.9)"
+                                    color: "rgba(255, 255, 255, 0.9)",
+                                    display: viewportWidth < 480 ? "none" : "block"
                                   },
                                   children: [
                                     formatTime(currentTime),
@@ -3872,105 +3987,113 @@ var StormcloudVideoPlayerComponent = React.memo(
                             style: {
                               display: "flex",
                               alignItems: "center",
-                              gap: "12px"
+                              gap: `${12 * responsiveScale}px`
                             },
                             children: [
-                              /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-                                /* @__PURE__ */ jsxs(
-                                  "button",
-                                  {
-                                    onClick: () => setShowSpeedMenu(!showSpeedMenu),
-                                    style: {
-                                      background: "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)",
-                                      backdropFilter: "blur(8px)",
-                                      border: "1px solid rgba(255, 255, 255, 0.12)",
-                                      color: "#ffffff",
-                                      cursor: "pointer",
-                                      padding: "8px 14px",
-                                      borderRadius: "8px",
-                                      fontSize: "13px",
-                                      fontFamily: "monospace",
-                                      fontWeight: "600",
-                                      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)",
-                                      minWidth: "50px"
-                                    },
-                                    onMouseEnter: (e) => {
-                                      const target = e.target;
-                                      target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%)";
-                                      target.style.transform = "translateY(-1px) scale(1.02)";
-                                      target.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
-                                    },
-                                    onMouseLeave: (e) => {
-                                      const target = e.target;
-                                      target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%)";
-                                      target.style.transform = "translateY(0) scale(1)";
-                                      target.style.boxShadow = "0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
-                                    },
-                                    title: "Playback Speed",
-                                    children: [
-                                      playbackRate,
-                                      "x"
-                                    ]
-                                  }
-                                ),
-                                showSpeedMenu && /* @__PURE__ */ jsx(
-                                  "div",
-                                  {
-                                    style: {
-                                      position: "absolute",
-                                      bottom: "100%",
-                                      right: 0,
-                                      marginBottom: "12px",
-                                      background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
-                                      backdropFilter: "blur(20px)",
-                                      borderRadius: "12px",
-                                      border: "1px solid rgba(255, 255, 255, 0.1)",
-                                      overflow: "hidden",
-                                      minWidth: "90px",
-                                      boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
-                                    },
-                                    children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
-                                      (speed) => /* @__PURE__ */ jsxs(
-                                        "button",
-                                        {
-                                          onClick: () => handlePlaybackRateChange(speed),
-                                          style: {
-                                            display: "block",
-                                            width: "100%",
-                                            padding: "10px 16px",
-                                            background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
-                                            border: "none",
-                                            color: "white",
-                                            cursor: "pointer",
-                                            fontSize: "13px",
-                                            fontFamily: "monospace",
-                                            fontWeight: "600",
-                                            textAlign: "center",
-                                            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                                            borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
-                                          },
-                                          onMouseEnter: (e) => {
-                                            if (playbackRate !== speed) {
-                                              e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
-                                            }
-                                          },
-                                          onMouseLeave: (e) => {
-                                            if (playbackRate !== speed) {
-                                              e.target.style.background = "transparent";
-                                            }
-                                          },
-                                          children: [
-                                            speed,
-                                            "x"
-                                          ]
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  style: {
+                                    position: "relative",
+                                    display: viewportWidth < 600 ? "none" : "block"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsxs(
+                                      "button",
+                                      {
+                                        onClick: () => setShowSpeedMenu(!showSpeedMenu),
+                                        style: {
+                                          background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
+                                          backdropFilter: "blur(10px)",
+                                          border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
+                                          color: "#ffffff",
+                                          cursor: "pointer",
+                                          padding: `${8 * responsiveScale}px ${14 * responsiveScale}px`,
+                                          borderRadius: `${14 * responsiveScale}px`,
+                                          fontSize: `${14 * responsiveScale}px`,
+                                          fontFamily: "monospace",
+                                          fontWeight: "700",
+                                          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                          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)",
+                                          minWidth: `${56 * responsiveScale}px`,
+                                          minHeight: `${40 * responsiveScale}px`
                                         },
-                                        speed
-                                      )
+                                        onMouseEnter: (e) => {
+                                          const target = e.target;
+                                          target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
+                                          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)";
+                                        },
+                                        onMouseLeave: (e) => {
+                                          const target = e.target;
+                                          target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
+                                          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)";
+                                        },
+                                        title: "Playback Speed",
+                                        children: [
+                                          playbackRate,
+                                          "x"
+                                        ]
+                                      }
+                                    ),
+                                    showSpeedMenu && /* @__PURE__ */ jsx(
+                                      "div",
+                                      {
+                                        style: {
+                                          position: "absolute",
+                                          bottom: "100%",
+                                          right: 0,
+                                          marginBottom: "12px",
+                                          background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
+                                          backdropFilter: "blur(20px)",
+                                          borderRadius: "12px",
+                                          border: "1px solid rgba(255, 255, 255, 0.1)",
+                                          overflow: "hidden",
+                                          minWidth: "90px",
+                                          boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
+                                        },
+                                        children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
+                                          (speed) => /* @__PURE__ */ jsxs(
+                                            "button",
+                                            {
+                                              onClick: () => handlePlaybackRateChange(speed),
+                                              style: {
+                                                display: "block",
+                                                width: "100%",
+                                                padding: "10px 16px",
+                                                background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
+                                                border: "none",
+                                                color: "white",
+                                                cursor: "pointer",
+                                                fontSize: "13px",
+                                                fontFamily: "monospace",
+                                                fontWeight: "600",
+                                                textAlign: "center",
+                                                transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                                                borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
+                                              },
+                                              onMouseEnter: (e) => {
+                                                if (playbackRate !== speed) {
+                                                  e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
+                                                }
+                                              },
+                                              onMouseLeave: (e) => {
+                                                if (playbackRate !== speed) {
+                                                  e.target.style.background = "transparent";
+                                                }
+                                              },
+                                              children: [
+                                                speed,
+                                                "x"
+                                              ]
+                                            },
+                                            speed
+                                          )
+                                        )
+                                      }
                                     )
-                                  }
-                                )
-                              ] }),
+                                  ]
+                                }
+                              ),
                               /* @__PURE__ */ jsx(
                                 "button",
                                 {
@@ -3984,44 +4107,42 @@ var StormcloudVideoPlayerComponent = React.memo(
                                     }
                                   },
                                   style: {
-                                    background: "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)",
-                                    backdropFilter: "blur(8px)",
-                                    border: "1px solid rgba(255, 255, 255, 0.15)",
+                                    background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
+                                    backdropFilter: "blur(10px)",
+                                    border: `${2 * responsiveScale}px solid rgba(255, 255, 255, 0.3)`,
                                     color: "#ffffff",
                                     cursor: "pointer",
-                                    padding: "10px",
-                                    borderRadius: "10px",
+                                    padding: `${8 * responsiveScale}px`,
+                                    borderRadius: `${16 * responsiveScale}px`,
                                     display: "flex",
                                     alignItems: "center",
                                     justifyContent: "center",
                                     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                    boxShadow: "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
-                                    minWidth: "40px",
-                                    minHeight: "40px"
+                                    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)",
+                                    minWidth: `${44 * responsiveScale}px`,
+                                    minHeight: `${44 * responsiveScale}px`
                                   },
                                   onMouseEnter: (e) => {
                                     const target = e.target;
-                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
-                                    target.style.transform = "translateY(-1px) scale(1.03)";
-                                    target.style.boxShadow = "0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
+                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
+                                    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)";
                                   },
                                   onMouseLeave: (e) => {
                                     const target = e.target;
-                                    target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%)";
-                                    target.style.transform = "translateY(0) scale(1)";
-                                    target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1)";
+                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
+                                    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)";
                                   },
                                   title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
                                   children: isFullscreen ? /* @__PURE__ */ jsx(
                                     FaCompress,
                                     {
-                                      size: 16,
+                                      size: Math.max(14, 16 * responsiveScale),
                                       style: { filter: "drop-shadow(0 0 0 transparent)" }
                                     }
                                   ) : /* @__PURE__ */ jsx(
                                     FaExpand,
                                     {
-                                      size: 16,
+                                      size: Math.max(14, 16 * responsiveScale),
                                       style: { filter: "drop-shadow(0 0 0 transparent)" }
                                     }
                                   )
@@ -4040,10 +4161,12 @@ var StormcloudVideoPlayerComponent = React.memo(
               {
                 style: {
                   position: "absolute",
-                  bottom: "10px",
-                  right: "10px",
+                  bottom: `${10 * responsiveScale}px`,
+                  right: `${10 * responsiveScale}px`,
+                  transform: "none",
                   display: "flex",
-                  gap: "8px",
+                  flexDirection: isPortrait ? "column" : "row",
+                  gap: `${10 * responsiveScale}px`,
                   zIndex: 10
                 },
                 children: [
@@ -4064,45 +4187,44 @@ var StormcloudVideoPlayerComponent = React.memo(
                           "button",
                           {
                             onClick: () => {
+                              if (playerRef.current) {
+                                playerRef.current.toggleMute();
+                              }
                               if (onVolumeToggle) {
                                 onVolumeToggle();
-                              } else if (playerRef.current) {
-                                playerRef.current.toggleMute();
                               }
                             },
                             onMouseEnter: (e) => {
                               const target = e.currentTarget;
-                              target.style.transform = "translateY(-3px) scale(1.08)";
-                              target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
-                              target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
+                              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)";
+                              target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
                             },
                             onMouseLeave: (e) => {
                               const target = e.currentTarget;
-                              target.style.transform = "translateY(0) scale(1)";
-                              target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
-                              target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
+                              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)";
+                              target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
                             },
                             style: {
-                              background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
-                              color: isMuted ? "#ff6b6b" : "#ffffff",
+                              background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
+                              color: "#ffffff",
                               border: "none",
-                              borderRadius: "16px",
-                              padding: "10px",
+                              borderRadius: `${18 * responsiveScale}px`,
+                              padding: `${8 * responsiveScale}px`,
                               cursor: "pointer",
                               display: "flex",
                               alignItems: "center",
                               justifyContent: "center",
                               backdropFilter: "blur(20px)",
-                              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
+                              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)",
                               transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                              minWidth: "44px",
-                              minHeight: "44px"
+                              minWidth: `${46 * responsiveScale}px`,
+                              minHeight: `${46 * responsiveScale}px`
                             },
                             title: isMuted ? "Unmute" : "Mute",
                             children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(
                               FaVolumeMute,
                               {
-                                size: 16,
+                                size: Math.max(14, 16 * responsiveScale),
                                 style: {
                                   filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
                                   color: "#ffffff"
@@ -4111,7 +4233,7 @@ var StormcloudVideoPlayerComponent = React.memo(
                             ) : volume < 0.5 ? /* @__PURE__ */ jsx(
                               FaVolumeDown,
                               {
-                                size: 16,
+                                size: Math.max(14, 16 * responsiveScale),
                                 style: {
                                   filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
                                   color: "#ffffff"
@@ -4120,7 +4242,7 @@ var StormcloudVideoPlayerComponent = React.memo(
                             ) : /* @__PURE__ */ jsx(
                               FaVolumeUp,
                               {
-                                size: 16,
+                                size: Math.max(14, 16 * responsiveScale),
                                 style: {
                                   filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
                                   color: "#ffffff"
@@ -4172,13 +4294,11 @@ var StormcloudVideoPlayerComponent = React.memo(
                               },
                               onMouseEnter: (e) => {
                                 setShowVolumeSlider(true);
-                                e.currentTarget.style.transform = "translateX(-50%) translateY(-2px) scale(1.02)";
                                 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)";
                                 e.currentTarget.style.borderColor = "rgba(96, 165, 250, 0.8)";
                               },
                               onMouseLeave: (e) => {
                                 setShowVolumeSlider(false);
-                                e.currentTarget.style.transform = "translateX(-50%)";
                                 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)";
                                 e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.7)";
                               },
@@ -4192,12 +4312,6 @@ var StormcloudVideoPlayerComponent = React.memo(
                                     cursor: "pointer",
                                     transition: "transform 0.2s ease-in-out"
                                   },
-                                  onMouseEnter: (e) => {
-                                    e.currentTarget.style.transform = "scaleX(1.2)";
-                                  },
-                                  onMouseLeave: (e) => {
-                                    e.currentTarget.style.transform = "scaleX(1)";
-                                  },
                                   onMouseDown: (e) => {
                                     e.preventDefault();
                                     const sliderElement = e.currentTarget;
@@ -4209,11 +4323,23 @@ var StormcloudVideoPlayerComponent = React.memo(
                                       handleVolumeChange(percentage2);
                                     };
                                     const handleMouseUp = () => {
-                                      document.removeEventListener("mousemove", handleMouseMove);
-                                      document.removeEventListener("mouseup", handleMouseUp);
+                                      document.removeEventListener(
+                                        "mousemove",
+                                        handleMouseMove
+                                      );
+                                      document.removeEventListener(
+                                        "mouseup",
+                                        handleMouseUp
+                                      );
                                     };
-                                    document.addEventListener("mousemove", handleMouseMove);
-                                    document.addEventListener("mouseup", handleMouseUp);
+                                    document.addEventListener(
+                                      "mousemove",
+                                      handleMouseMove
+                                    );
+                                    document.addEventListener(
+                                      "mouseup",
+                                      handleMouseUp
+                                    );
                                     const rect = sliderElement.getBoundingClientRect();
                                     const y = e.clientY - rect.top;
                                     const percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
@@ -4277,20 +4403,16 @@ var StormcloudVideoPlayerComponent = React.memo(
                                           cursor: "grab"
                                         },
                                         onMouseEnter: (e) => {
-                                          e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
                                           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)";
                                           e.currentTarget.style.cursor = "grab";
                                         },
                                         onMouseLeave: (e) => {
-                                          e.currentTarget.style.transform = "translateX(-50%) scale(1)";
                                           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)";
                                         },
                                         onMouseDown: (e) => {
-                                          e.currentTarget.style.transform = "translateX(-50%) scale(1.45)";
                                           e.currentTarget.style.cursor = "grabbing";
                                         },
                                         onMouseUp: (e) => {
-                                          e.currentTarget.style.transform = "translateX(-50%) scale(1.35)";
                                           e.currentTarget.style.cursor = "grab";
                                         }
                                       }
@@ -4318,37 +4440,35 @@ var StormcloudVideoPlayerComponent = React.memo(
                       },
                       onMouseEnter: (e) => {
                         const target = e.currentTarget;
-                        target.style.transform = "translateY(-3px) scale(1.08)";
-                        target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
-                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(40, 40, 40, 0.85) 100%)";
+                        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)";
+                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
                       },
                       onMouseLeave: (e) => {
                         const target = e.currentTarget;
-                        target.style.transform = "translateY(0) scale(1)";
-                        target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)";
-                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)";
+                        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)";
+                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
                       },
                       style: {
-                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(30, 30, 30, 0.8) 100%)",
+                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
                         color: "#ffffff",
                         border: "none",
-                        borderRadius: "16px",
-                        padding: "10px",
+                        borderRadius: `${18 * responsiveScale}px`,
+                        padding: `${8 * responsiveScale}px`,
                         cursor: "pointer",
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
                         backdropFilter: "blur(20px)",
-                        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2)",
+                        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)",
                         transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                        minWidth: "44px",
-                        minHeight: "44px"
+                        minWidth: `${46 * responsiveScale}px`,
+                        minHeight: `${46 * responsiveScale}px`
                       },
                       title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
                       children: isFullscreen ? /* @__PURE__ */ jsx(
                         FaCompress,
                         {
-                          size: 16,
+                          size: Math.max(14, 16 * responsiveScale),
                           style: {
                             filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
                             color: "#ffffff"
@@ -4357,7 +4477,7 @@ var StormcloudVideoPlayerComponent = React.memo(
                       ) : /* @__PURE__ */ jsx(
                         FaExpand,
                         {
-                          size: 16,
+                          size: Math.max(14, 16 * responsiveScale),
                           style: {
                             filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
                             color: "#ffffff"
@@ -4647,10 +4767,20 @@ var HlsPlayer = class extends Component {
       }
     };
     this.play = () => {
-      var _a, _b;
+      var _a, _b, _c;
       if (this.props.videoElement) {
-        this.props.videoElement.play();
-        (_b = (_a = this.props).onPlay) == null ? void 0 : _b.call(_a);
+        const video = this.props.videoElement;
+        const hasValidSource = video.src || video.currentSrc && video.currentSrc !== "" || video.readyState >= 1;
+        if (hasValidSource) {
+          (_a = video.play()) == null ? void 0 : _a.catch((error) => {
+            var _a2, _b2;
+            console.error("[HlsPlayer] Failed to play:", error);
+            (_b2 = (_a2 = this.props).onError) == null ? void 0 : _b2.call(_a2, error);
+          });
+          (_c = (_b = this.props).onPlay) == null ? void 0 : _c.call(_b);
+        } else {
+          console.warn("[HlsPlayer] Cannot play: video has no valid source");
+        }
       }
     };
     this.pause = () => {
@@ -4819,8 +4949,19 @@ var FilePlayer = class extends Component2 {
       };
     };
     this.play = () => {
+      var _a;
       if (this.props.videoElement) {
-        this.props.videoElement.play();
+        const video = this.props.videoElement;
+        const hasValidSource = video.src || video.currentSrc && video.currentSrc !== "" || video.readyState >= 1;
+        if (hasValidSource) {
+          (_a = video.play()) == null ? void 0 : _a.catch((error) => {
+            var _a2, _b;
+            console.error("[FilePlayer] Failed to play:", error);
+            (_b = (_a2 = this.props).onError) == null ? void 0 : _b.call(_a2, error);
+          });
+        } else {
+          console.warn("[FilePlayer] Cannot play: video has no valid source");
+        }
       }
     };
     this.pause = () => {