@stormstreaming/stormstreamer 1.0.6 → 1.0.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 1.0.8
+
+Fix frozen video preview after detach/reattach to DOM tree.
+
+## 1.0.7
+
+Fixed race condition in StageController where resize methods could fire after detach, causing "Cannot read properties of null" errors.
+
 ## 1.0.6
 
 Fixed intervals not being properly cleaned up when player instance is removed,

package/dist/amd/index.js

@@ -4,8 +4,8 @@
  * contact@stormstreaming.com
  * https://stormstreaming.com
  *
- * Version: 1.0.6
- * Version: 2/22/2026, 12:57:01 PM
+ * Version: 1.0.8
+ * Version: 2/24/2026, 4:44:50 PM
  *
  * LEGAL NOTICE:
  * This software is subject to the terms and conditions defined in
@@ -2774,12 +2774,12 @@
          */
         this._tempContainerHeight = 0;
         /**
-         * Video width (initally 0, after "onmetadata" event is updated to match the real one
+         * Video width (initially 0, after "onmetadata" event is updated to match the real one)
          * @private
          */
         this._videoWidth = 0;
         /**
-         * Video width (initally 0, after "onmetadata" event is updated to match the real one
+         * Video height (initially 0, after "onmetadata" event is updated to match the real one)
          * @private
          */
         this._videoHeight = 0;
@@ -2799,7 +2799,7 @@
          */
         this._isResizing = false;
         /**
-         * Deco
+         * Auto resize flag
          * @private
          */
         this._autoResizeEnabled = true;
@@ -2855,16 +2855,17 @@
         this._screenElement = new ScreenElement(this._main);
         this._videoContainer.appendChild(this._screenElement.getVideoElement());
         const debounceValue = this._main.getConfigManager().getSettingsData().getVideoData().resizeDebounce;
+        // FIX: debounce(() => ()=>{}) zwracało funkcję zamiast ją wywoływać
         if (debounceValue > 0) {
-          this._resizeObserver = new ResizeObserver(debounce$1(() => () => {
-            if (this._autoResizeEnabled) this.handleResize();
+          this._resizeObserver = new ResizeObserver(debounce$1(() => {
+            if (this._autoResizeEnabled && this._parentElement) this.handleResize();
           }, debounceValue, {
             leading: false,
             trailing: true
           }));
         } else {
           this._resizeObserver = new ResizeObserver(() => {
-            if (this._autoResizeEnabled) this.handleResize();
+            if (this._autoResizeEnabled && this._parentElement) this.handleResize();
           });
         }
         this._fullscreenChangeHandler = this.onFullScreenChange;
@@ -2892,7 +2893,7 @@
        */
       attachToParent(container) {
         // preparing elements
-        let result = false; // To indicate the success of the operation
+        let result = false;
         let tempParentElement = null;
         // Check if container is either an ID string or an HTMLElement instance
         if (typeof container === "string") {
@@ -2913,21 +2914,26 @@
           if (this._debug) this._logger.decoratedLog("Attach To Parent: " + container + " (success)", "dark-pink");
           this._parentElement = tempParentElement;
           this._parentElement.appendChild(this._videoContainer);
+          if (this._screenElement) {
+            const videoElement = this._screenElement.getVideoElement();
+            if (videoElement === null || videoElement === void 0 ? void 0 : videoElement.srcObject) {
+              videoElement.play().catch(() => {});
+            }
+          }
           this._resizeObserver.observe(this._parentElement);
-          this._parentElement.addEventListener("transitionend", () => {
-            this.handleResize();
-          });
+          // FIX: użyj zapisanego handlera zamiast anonimowej funkcji
+          this._parentElement.addEventListener("transitionend", this._transitionEndHandler);
           this._main.dispatchEvent("containerChange", {
             ref: this._main,
             container: this._parentElement
           });
           this.handleResize();
-          result = true; // Operation successful
+          result = true;
         } else {
           if (this._debug) this._logger.decoratedLog("Attach To Parent: " + container + " (failure - container not found)", "dark-pink");
           this._logger.warning(this, "attachToParent :: container \"" + container + "\"+ was not found");
         }
-        return result; // Return the result of the operation
+        return result;
       }
       /**
        * Detaches the library from a parent container
@@ -2937,7 +2943,16 @@
         let result = false;
         if (this._parentElement != null && this._videoContainer != null) {
           this._logger.info(this, "Detaching from parent: " + this._videoContainer);
-          // POPRAWKA: Usuń event listener z zapisanym handlerem
+          // FIX: anuluj pending requestAnimationFrame żeby callback nie strzelił na null parent
+          if (this._animationFrameId !== null) {
+            cancelAnimationFrame(this._animationFrameId);
+            this._animationFrameId = null;
+            // przywróć overflow jeśli został zmieniony przez handleResize
+            if (this._isResizing) {
+              this._parentElement.style.overflow = this._parentOriginalOverflow;
+            }
+            this._isResizing = false;
+          }
           if (this._transitionEndHandler) {
             this._parentElement.removeEventListener("transitionend", this._transitionEndHandler);
           }
@@ -2958,7 +2973,6 @@
       }
       handleResize() {
         if (!this._parentElement || this._isResizing || this._isDestroying) return;
-        // POPRAWKA: Anulowanie poprzedniego requestAnimationFrame
         if (this._animationFrameId !== null) {
           cancelAnimationFrame(this._animationFrameId);
         }
@@ -2966,7 +2980,12 @@
         this._parentOriginalOverflow = this._parentElement.style.overflow;
         this._parentElement.style.overflow = 'hidden';
         this._animationFrameId = requestAnimationFrame(() => {
-          if (this._isDestroying) return;
+          // FIX: ponowny guard - parentElement mógł zostać null między kolejkowaniem a wykonaniem RAF
+          if (this._isDestroying || !this._parentElement) {
+            this._isResizing = false;
+            this._animationFrameId = null;
+            return;
+          }
           this.calculateNewDimensions();
           if (this._parentElement) {
             this._parentElement.style.overflow = this._parentOriginalOverflow;
@@ -2983,6 +3002,7 @@
         });
       }
       calculateNewDimensions() {
+        if (!this._parentElement) return;
         const calcMethod = this._main.getConfigManager().getSettingsData().getVideoData().parentSizeCalculationMethod;
         switch (calcMethod) {
           case SizeCalculationType.CLIENT_DIMENSIONS:
@@ -3080,7 +3100,6 @@
             //--- LETTER BOX
             case ScalingType.LETTER_BOX:
               {
-                // jeżeli szerokość
                 videoWidth = this._containerWidth;
                 videoHeight = this._videoHeight * this._containerWidth / this._videoWidth;
                 if (videoHeight <= this._containerHeight) {
@@ -3255,42 +3274,37 @@
             }
             this._fullscreenChangeHandler = null;
           }
-          // 6. Zniszcz ScreenElement
+          // 5. Zniszcz ScreenElement
           if (this._screenElement) {
-            // Wyczyść video element
             const videoElement = this._screenElement.getVideoElement();
             if (videoElement) {
-              // Zatrzymaj wszelkie strumienie
               if (videoElement.srcObject instanceof MediaStream) {
                 videoElement.srcObject.getTracks().forEach(track => {
                   track.enabled = false;
                   track.stop();
                 });
               }
-              // Wyczyść element
               videoElement.pause();
               videoElement.removeAttribute('src');
               videoElement.srcObject = null;
               videoElement.load();
-              // Usuń z DOM jeśli jest podłączony
               if (videoElement.parentNode) {
                 videoElement.parentNode.removeChild(videoElement);
               }
             }
-            // Jeśli ScreenElement ma własną metodę destroy, wywołaj ją
             if (typeof this._screenElement.destroy === 'function') {
               this._screenElement.destroy();
             }
             this._screenElement = null;
           }
-          // 7. Usuń kontener video z DOM
+          // 6. Usuń kontener video z DOM
           if (this._videoContainer) {
             if (this._videoContainer.parentNode) {
               this._videoContainer.parentNode.removeChild(this._videoContainer);
             }
             this._videoContainer = null;
           }
-          // 8. Resetuj zmienne
+          // 7. Resetuj zmienne
           this._containerWidth = 0;
           this._containerHeight = 0;
           this._tempContainerWidth = 0;
@@ -3300,6 +3314,7 @@
           this.isInFullScreenMode = false;
           this._isResizing = false;
           this._autoResizeEnabled = false;
+          this._transitionEndHandler = null;
           this._logger.success(this, "StageController successfully destroyed");
         } catch (error) {
           this._logger.error(this, "Error during destroy: " + error);
@@ -6760,8 +6775,8 @@
       constructor(streamConfig, autoInitialize = false) {
         super();
         this.DEV_MODE = true;
-        this.STREAMER_VERSION = "1.0.6";
-        this.COMPILE_DATE = "2/22/2026, 12:56:59 PM";
+        this.STREAMER_VERSION = "1.0.8";
+        this.COMPILE_DATE = "2/24/2026, 4:44:48 PM";
         this.STREAMER_BRANCH = "Experimental";
         this.STREAMER_PROTOCOL_VERSION = 1;
         this._initialized = false;