stormcloud-video-player 0.7.1 → 0.7.3

package/lib/index.js

@@ -964,7 +964,6 @@ function createVastAdLayer(contentVideo, options) {
     var tornDown = false;
     var trackingFired = createEmptyTrackingState();
     var adStallTimerId;
-    var savedContentVideoStyles;
     var currentAdEventHandlers;
     var preloadSlots = /* @__PURE__ */ new Map();
     function emit(event, payload) {
@@ -1081,7 +1080,7 @@ function createVastAdLayer(contentVideo, options) {
         video.style.top = "0";
         video.style.width = "100%";
         video.style.height = "100%";
-        video.style.objectFit = "cover";
+        video.style.objectFit = "contain";
         video.style.backgroundColor = "#000";
         video.playsInline = true;
         video.muted = false;
@@ -1196,31 +1195,12 @@ function createVastAdLayer(contentVideo, options) {
             delete contentVideo.dataset.stormcloudAdPlaying;
         }
     }
-    function applyContentVideoAdCoverStyles() {
-        if (!singleElementMode) return;
-        savedContentVideoStyles = {
-            objectFit: contentVideo.style.objectFit,
-            width: contentVideo.style.width,
-            height: contentVideo.style.height
-        };
-        contentVideo.style.objectFit = "cover";
-        contentVideo.style.width = "100%";
-        contentVideo.style.height = "100%";
-    }
-    function restoreContentVideoStyles() {
-        if (!singleElementMode || !savedContentVideoStyles) return;
-        contentVideo.style.objectFit = savedContentVideoStyles.objectFit;
-        contentVideo.style.width = savedContentVideoStyles.width;
-        contentVideo.style.height = savedContentVideoStyles.height;
-        savedContentVideoStyles = void 0;
-    }
     function handleAdComplete() {
         if (tornDown) return;
         clearAdStallTimer();
         if (debug) console.log("".concat(LOG, " Handling ad completion"));
         adPlaying = false;
         setAdPlayingFlag(false);
-        restoreContentVideoStyles();
         if (adContainerEl) {
             adContainerEl.style.display = "none";
             adContainerEl.style.pointerEvents = "none";
@@ -1235,7 +1215,6 @@ function createVastAdLayer(contentVideo, options) {
         if (debug) console.log("".concat(LOG, " Handling ad error"));
         adPlaying = false;
         setAdPlayingFlag(false);
-        restoreContentVideoStyles();
         if (adContainerEl) {
             adContainerEl.style.display = "none";
             adContainerEl.style.pointerEvents = "none";
@@ -1406,7 +1385,6 @@ function createVastAdLayer(contentVideo, options) {
                         ];
                         contentVideo.style.visibility = "visible";
                         contentVideo.style.opacity = "1";
-                        applyContentVideoAdCoverStyles();
                         emit("content_pause");
                         setupAdEventListeners();
                         adVolume2 = originalMutedState ? 1 : originalVolume;
@@ -1645,7 +1623,6 @@ function createVastAdLayer(contentVideo, options) {
                         ];
                         contentVideo.style.visibility = "visible";
                         contentVideo.style.opacity = "1";
-                        applyContentVideoAdCoverStyles();
                         emit("content_pause");
                         setupAdEventListeners();
                         adVolume2 = originalMutedState ? 1 : originalVolume;
@@ -1796,7 +1773,6 @@ function createVastAdLayer(contentVideo, options) {
                     if (debug) console.log("".concat(LOG, " Stopping ad"));
                     adPlaying = false;
                     setAdPlayingFlag(false);
-                    restoreContentVideoStyles();
                     contentVideo.muted = originalMutedState;
                     contentVideo.volume = originalMutedState ? 0 : originalVolume;
                     contentVideo.style.visibility = "visible";
@@ -1835,7 +1811,6 @@ function createVastAdLayer(contentVideo, options) {
             destroyed = true;
             adPlaying = false;
             setAdPlayingFlag(false);
-            restoreContentVideoStyles();
             contentVideo.muted = originalMutedState;
             contentVideo.volume = originalVolume;
             var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
@@ -6133,7 +6108,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
     return StormcloudVideoPlayer;
 }();
 // src/ui/StormcloudVideoPlayer.tsx
-import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaSpinner } from "react-icons/fa";
+import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress } from "react-icons/fa";
 // src/ui/OverlayRenderer.tsx
 import React, { useEffect, useRef, useState, useCallback } from "react";
 // src/utils/overlays.ts
@@ -7243,6 +7218,7 @@ var CRITICAL_PROPS = [
     "driftToleranceMs"
 ];
 var CONTROLS_HIDE_DELAY = 3e3;
+var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
 var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, swirlProjectId = props.swirlProjectId, restVideoAttrs = _object_without_properties(props, [
         "src",
@@ -7303,6 +7279,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var _React2_useState17 = _sliced_to_array(React2.useState(null), 2), overlayCoordSpace = _React2_useState17[0], setOverlayCoordSpace = _React2_useState17[1];
     var _React2_useState18 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _React2_useState18[0], setViewportWidth = _React2_useState18[1];
     var _React2_useState19 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _React2_useState19[0], setIsPortrait = _React2_useState19[1];
+    var _React2_useState20 = _sliced_to_array(React2.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _React2_useState20[0], setPlayerAspectRatio = _React2_useState20[1];
     var getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -7598,6 +7575,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     }, []);
     useEffect2(function() {
         if (!videoRef.current) return;
+        var handleLoadedMetadata = function handleLoadedMetadata() {
+            var video2 = videoRef.current;
+            if (!video2) return;
+            if (video2.videoWidth > 0 && video2.videoHeight > 0) {
+                setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
+            }
+        };
         var handleCanPlay = function handleCanPlay() {
             setIsLoading(false);
             if (bufferingTimeoutRef.current) {
@@ -7644,6 +7628,8 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
             setShowCenterPlay(true);
         };
         var video = videoRef.current;
+        handleLoadedMetadata();
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
         video.addEventListener("canplay", handleCanPlay);
         video.addEventListener("canplaythrough", handleCanPlayThrough);
         video.addEventListener("waiting", handleWaiting);
@@ -7658,6 +7644,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                 clearTimeout(bufferingTimeoutRef.current);
                 bufferingTimeoutRef.current = null;
             }
+            video.removeEventListener("loadedmetadata", handleLoadedMetadata);
             video.removeEventListener("canplay", handleCanPlay);
             video.removeEventListener("canplaythrough", handleCanPlayThrough);
             video.removeEventListener("waiting", handleWaiting);
@@ -7668,6 +7655,11 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     }, [
         debugAdTiming
     ]);
+    useEffect2(function() {
+        setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
+    }, [
+        src
+    ]);
     useEffect2(function() {
         return function() {
             if (controlsTimerRef.current) {
@@ -7693,7 +7685,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     return /* @__PURE__ */ jsxs2(Fragment2, {
         children: [
             /* @__PURE__ */ jsx2("style", {
-                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-pulse {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0.6; }\n              }\n              @keyframes sc-fade-in {\n                from { opacity: 0; transform: translateY(8px); }\n                to { opacity: 1; transform: translateY(0); }\n              }\n              .sc-wrapper:fullscreen,\n              .sc-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              .sc-ctrl-btn {\n                background: none;\n                border: none;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 50%;\n                padding: 8px;\n                transition: background 0.15s ease, opacity 0.15s ease;\n                opacity: 0.9;\n              }\n              .sc-ctrl-btn:hover {\n                opacity: 1;\n                background: rgba(255, 255, 255, 0.1);\n              }\n              .sc-ctrl-btn:active {\n                opacity: 0.7;\n              }\n              .sc-controls-bar {\n                transition: opacity 0.35s ease, transform 0.35s ease;\n              }\n              .sc-progress-track:hover .sc-progress-thumb {\n                transform: translate(-50%, -50%) scale(1) !important;\n              }\n              .sc-loading-hidden .sc-loading-indicator {\n                display: none !important;\n              }\n            "
+                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-loading-glow {\n                0%, 100% { opacity: 0.85; transform: scale(1); }\n                50% { opacity: 1; transform: scale(1.05); }\n              }\n              @keyframes sc-pulse {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0.6; }\n              }\n              @keyframes sc-fade-in {\n                from { opacity: 0; transform: translateY(8px); }\n                to { opacity: 1; transform: translateY(0); }\n              }\n              .sc-wrapper:fullscreen,\n              .sc-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              .sc-ctrl-btn {\n                background: none;\n                border: none;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 50%;\n                padding: 8px;\n                transition: background 0.15s ease, opacity 0.15s ease;\n                opacity: 0.9;\n              }\n              .sc-ctrl-btn:hover {\n                opacity: 1;\n                background: rgba(255, 255, 255, 0.1);\n              }\n              .sc-ctrl-btn:active {\n                opacity: 0.7;\n              }\n              .sc-controls-bar {\n                transition: opacity 0.35s ease, transform 0.35s ease;\n              }\n              .sc-progress-track:hover .sc-progress-thumb {\n                transform: translate(-50%, -50%) scale(1) !important;\n              }\n              .sc-loading-hidden .sc-loading-indicator {\n                display: none !important;\n              }\n            "
             }),
             /* @__PURE__ */ jsxs2("div", {
                 ref: wrapperRef,
@@ -7711,6 +7703,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                     width: isFullscreen ? "100vw" : "100%",
                     height: isFullscreen ? "100vh" : "auto",
                     minHeight: isFullscreen ? "100vh" : "auto",
+                    aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
                     maxWidth: isFullscreen ? "100vw" : "100%",
                     maxHeight: isFullscreen ? "100vh" : "none",
                     zIndex: isFullscreen ? 999999 : void 0,
@@ -7727,7 +7720,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                             zIndex: 1,
                             display: "block",
                             width: "100%",
-                            height: isFullscreen ? "100%" : "auto",
+                            height: "100%",
                             maxWidth: "100%",
                             maxHeight: isFullscreen ? "100%" : "none",
                             objectFit: isFullscreen ? "cover" : "contain",
@@ -7747,18 +7740,44 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                         videoRef: videoRef,
                         coordinateSpace: overlayCoordSpace
                     }),
-                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ jsx2(FaSpinner, {
+                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ jsxs2("div", {
                         className: "sc-loading-indicator",
-                        size: 40,
-                        color: "rgba(255, 255, 255, 0.85)",
                         style: {
                             position: "absolute",
-                            top: "calc(50% - 20px)",
-                            left: "calc(50% - 20px)",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
                             zIndex: 20,
-                            animation: "sc-spin 0.9s linear infinite",
-                            filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
-                        }
+                            width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
+                            height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            animation: "sc-loading-glow 1.4s ease-in-out infinite",
+                            filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
+                        },
+                        children: [
+                            /* @__PURE__ */ jsx2("div", {
+                                style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "50%",
+                                    border: "3px solid rgba(255, 255, 255, 0.25)",
+                                    borderTopColor: "#ff0000",
+                                    borderRightColor: "rgba(255, 255, 255, 0.85)",
+                                    animation: "sc-spin 0.8s linear infinite"
+                                }
+                            }),
+                            /* @__PURE__ */ jsx2("div", {
+                                style: {
+                                    width: "7px",
+                                    height: "7px",
+                                    borderRadius: "50%",
+                                    background: "#ff0000",
+                                    boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
+                                }
+                            })
+                        ]
                     }),
                     showLicenseWarning && /* @__PURE__ */ jsxs2("div", {
                         style: {
@@ -7994,7 +8013,8 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                             /* @__PURE__ */ jsxs2("div", {
                                                 style: {
                                                     display: "flex",
-                                                    alignItems: "center"
+                                                    alignItems: "center",
+                                                    paddingRight: "".concat(6 * responsiveScale, "px")
                                                 },
                                                 onMouseEnter: function onMouseEnter() {
                                                     return setShowVolumeSlider(true);
@@ -8025,13 +8045,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                     }),
                                                     /* @__PURE__ */ jsx2("div", {
                                                         style: {
-                                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                                            width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
                                                             overflow: "hidden",
                                                             transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
                                                             display: "flex",
                                                             alignItems: "center",
-                                                            paddingLeft: showVolumeSlider ? "2px" : "0",
-                                                            paddingRight: showVolumeSlider ? "4px" : "0"
+                                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                                            paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
                                                         },
                                                         children: /* @__PURE__ */ jsxs2("div", {
                                                             style: {
@@ -8278,7 +8298,8 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                     alignItems: "center",
                                     background: "rgba(0, 0, 0, 0.6)",
                                     borderRadius: "".concat(18 * responsiveScale, "px"),
-                                    padding: "2px"
+                                    padding: "2px",
+                                    paddingRight: "".concat(8 * responsiveScale, "px")
                                 },
                                 onMouseEnter: function onMouseEnter() {
                                     return setShowVolumeSlider(true);
@@ -8307,13 +8328,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                     }),
                                     /* @__PURE__ */ jsx2("div", {
                                         style: {
-                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                            width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
                                             overflow: "hidden",
                                             transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
                                             display: "flex",
                                             alignItems: "center",
-                                            paddingLeft: showVolumeSlider ? "2px" : "0",
-                                            paddingRight: showVolumeSlider ? "6px" : "0"
+                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                            paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
                                         },
                                         children: /* @__PURE__ */ jsxs2("div", {
                                             style: {