stormcloud-video-player 0.7.32 → 0.7.35

package/lib/ui/OverlayRenderer.cjs

@@ -1723,12 +1723,63 @@ function hexToRgb(hex) {
     return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
 }
 var FADE_DURATION_MS = 1e3;
+var SHOWCASE_CYCLE_MS_DEFAULT = 6e4;
+var SHOWCASE_POP_IN_MS = 420;
+var SHOWCASE_STEADY_END_MS = 46e3;
+var SHOWCASE_POP_OUT_MS = 450;
+var SHOWCASE_POP_OUT_END_MS = SHOWCASE_STEADY_END_MS + SHOWCASE_POP_OUT_MS;
+function easeOutCubic(t) {
+    var u = 1 - t;
+    return 1 - u * u * u;
+}
+function easeInCubic(t) {
+    return t * t * t;
+}
+function easeOutBack(t) {
+    var c1 = 1.70158;
+    var c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+}
+function showcaseOpacity(phase) {
+    if (phase < SHOWCASE_POP_IN_MS) return easeOutCubic(phase / SHOWCASE_POP_IN_MS);
+    if (phase >= SHOWCASE_STEADY_END_MS && phase < SHOWCASE_POP_OUT_END_MS) {
+        return 1 - easeInCubic((phase - SHOWCASE_STEADY_END_MS) / SHOWCASE_POP_OUT_MS);
+    }
+    return 1;
+}
+function showcaseScale(phase) {
+    if (phase < SHOWCASE_POP_IN_MS) {
+        return 0.78 + 0.22 * easeOutBack(phase / SHOWCASE_POP_IN_MS);
+    }
+    if (phase >= SHOWCASE_STEADY_END_MS && phase < SHOWCASE_POP_OUT_END_MS) {
+        return 1 - 0.14 * easeInCubic((phase - SHOWCASE_STEADY_END_MS) / SHOWCASE_POP_OUT_MS);
+    }
+    return 1;
+}
+function useShowcasePhase(enabled, cycleMs) {
+    var _ref = _sliced_to_array((0, import_react.useState)(0), 2), phase = _ref[0], setPhase = _ref[1];
+    (0, import_react.useEffect)(function() {
+        if (!enabled) return;
+        setPhase(Date.now() % cycleMs);
+        var id = window.setInterval(function() {
+            setPhase(Date.now() % cycleMs);
+        }, 48);
+        return function() {
+            return clearInterval(id);
+        };
+    }, [
+        enabled,
+        cycleMs
+    ]);
+    return phase;
+}
 var OverlayRenderer = function OverlayRenderer(param) {
-    var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace;
+    var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace, _param_showcaseMode = param.showcaseMode, showcaseMode = _param_showcaseMode === void 0 ? false : _param_showcaseMode, _param_showcaseCycleMs = param.showcaseCycleMs, showcaseCycleMs = _param_showcaseCycleMs === void 0 ? SHOWCASE_CYCLE_MS_DEFAULT : _param_showcaseCycleMs;
     var _ref = _sliced_to_array((0, import_react.useState)(null), 2), dims = _ref[0], setDims = _ref[1];
     var rafRef = (0, import_react.useRef)(null);
     var _ref1 = _sliced_to_array((0, import_react.useState)(/* @__PURE__ */ new Map()), 2), fadeMap = _ref1[0], setFadeMap = _ref1[1];
     var removeTimers = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+    var showcasePhase = useShowcasePhase(showcaseMode, showcaseCycleMs);
     var updateDims = (0, import_react.useCallback)(function() {
         var video = videoRef.current;
         if (video) {
@@ -1760,12 +1811,26 @@ var OverlayRenderer = function OverlayRenderer(param) {
         updateDims
     ]);
     var activeOverlays = (0, import_react.useMemo)(function() {
+        if (showcaseMode) {
+            return overlays.filter(function(o) {
+                return o.visible && showcasePhase < SHOWCASE_POP_OUT_END_MS;
+            });
+        }
         return overlays.filter(function(o) {
             return isOverlayActive(o, currentTime);
         });
     }, [
         overlays,
-        currentTime
+        currentTime,
+        showcaseMode,
+        showcasePhase
+    ]);
+    var activeBeatIds = (0, import_react.useMemo)(function() {
+        return new Set(activeOverlays.map(function(o) {
+            return o.id;
+        }));
+    }, [
+        activeOverlays
     ]);
     (0, import_react.useEffect)(function() {
         var activeIds = new Set(activeOverlays.map(function(o) {
@@ -1955,7 +2020,9 @@ var OverlayRenderer = function OverlayRenderer(param) {
             var width = overlay.width * scaleX;
             var height = overlay.height * scaleY;
             var baseOpacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
-            var opacity = visible ? baseOpacity : 0;
+            var inShowcaseBeat = showcaseMode && activeBeatIds.has(overlay.id);
+            var opacity = inShowcaseBeat ? baseOpacity * showcaseOpacity(showcasePhase) : visible ? baseOpacity : 0;
+            var popScale = inShowcaseBeat ? showcaseScale(showcasePhase) : 1;
             var sz = {
                 w: width,
                 h: height
@@ -1968,7 +2035,9 @@ var OverlayRenderer = function OverlayRenderer(param) {
                     width: "".concat(width, "px"),
                     height: "".concat(height, "px"),
                     opacity: opacity,
-                    transition: "opacity ".concat(FADE_DURATION_MS, "ms ease"),
+                    transition: inShowcaseBeat ? "none" : "opacity ".concat(FADE_DURATION_MS, "ms ease"),
+                    transform: showcaseMode ? "scale(".concat(popScale, ")") : void 0,
+                    transformOrigin: showcaseMode ? "center center" : void 0,
                     zIndex: overlay.z_index,
                     overflow: "hidden"
                 },