Repository: exadel-inc/esl
Pull request #2432 (2024-05-24 13:04:15)

fix(esl-panel): fix the falsy state of animation in the default open panel in esl-panel-group
Closes: #2431 



Patch:
diff --git a/package-lock.json b/package-lock.json
index c3818f53b..0b9fc09ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,7 +68,7 @@
         "@types/puppeteer": "^7.0.4",
         "jest-image-snapshot": "^6.4.0",
         "jest-puppeteer": "^10.0.1",
-        "puppeteer": "^22.10.0",
+        "puppeteer": "^22.9.0",
         "stucumber": "^0.19.0"
       }
     },
@@ -4844,9 +4844,9 @@
       "optional": true
     },
     "node_modules/bare-path": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
-      "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.2.tgz",
+      "integrity": "sha512-o7KSt4prEphWUHa3QUwCxUI00R86VdjiuxmJK0iNVDHYPGo+HsDaVCnqCmPbf/MiW1ok8F4p3m8RTHlWk8K2ig==",
       "optional": true,
       "dependencies": {
         "bare-os": "^2.1.0"
@@ -17806,15 +17806,15 @@
       }
     },
     "node_modules/puppeteer": {
-      "version": "22.10.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-22.10.0.tgz",
-      "integrity": "sha512-ZOkZd6a6t0BdKcWb0wAYHWQqCfdlN1PPnXOmg/XNrbo6gJhYWFX4qCNb6ahSn8TpAqBqLCoD4Q010F7GwOM7mA==",
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-22.9.0.tgz",
+      "integrity": "sha512-yNux2cm6Sfik4lNLNjJ25Cdn9spJRbMXxl1YZtVZCEhEeej1sFlCvZ/Cr64LhgyJOuvz3iq2uk+RLFpQpGwrjw==",
       "hasInstallScript": true,
       "dependencies": {
         "@puppeteer/browsers": "2.2.3",
         "cosmiconfig": "9.0.0",
         "devtools-protocol": "0.0.1286932",
-        "puppeteer-core": "22.10.0"
+        "puppeteer-core": "22.9.0"
       },
       "bin": {
         "puppeteer": "lib/esm/puppeteer/node/cli.js"
@@ -17824,9 +17824,9 @@
       }
     },
     "node_modules/puppeteer-core": {
-      "version": "22.10.0",
-      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.10.0.tgz",
-      "integrity": "sha512-I54J4Vy4I07UHsgB1QSmuFoF7KNQjJWcvFBPhtY+ezMdBfwgGDr8dzYrJa11aPgP9kxIUHjhktcMmmfJkOAtTw==",
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.9.0.tgz",
+      "integrity": "sha512-Q2SYVZ1SIE7jCd/Pp+1/mNLFtdJfGvAF+CqOTDG8HcCNCiBvoXfopXfOfMHQ/FueXhGfJW/I6DartWv6QzpNGg==",
       "dependencies": {
         "@puppeteer/browsers": "2.2.3",
         "chromium-bidi": "0.5.19",
diff --git a/src/modules/esl-media/core/esl-media-iobserver.ts b/src/modules/esl-media/core/esl-media-iobserver.ts
index f24de4ddc..e4f78a424 100644
--- a/src/modules/esl-media/core/esl-media-iobserver.ts
+++ b/src/modules/esl-media/core/esl-media-iobserver.ts
@@ -1,6 +1,6 @@
 import type {ESLMedia} from './esl-media';
 
-const RATIO_TO_PLAY = 0.5; // TODO: customizable, at least global
+const RATIO_TO_PLAY = 0.75; // TODO: customizable, at least global
 const RATIO_TO_STOP = 0.20; // TODO: customizable, at least global
 
 const RATIO_TO_ACTIVATE = 0.05;
diff --git a/src/modules/esl-media/core/esl-media.shape.ts b/src/modules/esl-media/core/esl-media.shape.ts
index ecfea52f5..0dbcfc095 100644
--- a/src/modules/esl-media/core/esl-media.shape.ts
+++ b/src/modules/esl-media/core/esl-media.shape.ts
@@ -46,8 +46,6 @@ export type ESLMediaTagShape = ({
   'preload'?: 'none' | 'metadata' | 'auto' | '';
   /** Allow play media inline */
   'playsinline'?: boolean;
-  /** Allows to start viewing a resource from a specific time offset */
-  'start-time'?: number;
 
   /** Optional BC provider player id */
   'data-player-id'?: string;
diff --git a/src/modules/esl-media/core/esl-media.ts b/src/modules/esl-media/core/esl-media.ts
index d9de1a2b3..c6a93e0ed 100644
--- a/src/modules/esl-media/core/esl-media.ts
+++ b/src/modules/esl-media/core/esl-media.ts
@@ -46,8 +46,7 @@ export class ESLMedia extends ESLBaseElement {
     'muted',
     'loop',
     'controls',
-    'lazy',
-    'start-time'
+    'lazy'
   ];
 
   /** Event to dispatch on ready state */
@@ -181,7 +180,6 @@ export class ESLMedia extends ESLBaseElement {
       case 'media-id':
       case 'media-src':
       case 'media-type':
-      case 'start-time':
         this.deferredReinitialize();
         break;
       case 'lazy':
diff --git a/src/modules/esl-panel-group/README.md b/src/modules/esl-panel-group/README.md
index 9b4d00b8d..7c6c8e6e8 100644
--- a/src/modules/esl-panel-group/README.md
+++ b/src/modules/esl-panel-group/README.md
@@ -34,6 +34,7 @@ ESLPanelGroup.register();
 
 - `has-opened` - readonly attribute that indicates whether the panel group has opened panels
 - `current-mode` - readonly attribute that indicates the currently applied rendering mode of the panel group
+- `animating` - a marker of animation process running
 
 ### Events
 
diff --git a/src/modules/esl-panel-group/core/esl-panel-group.ts b/src/modules/esl-panel-group/core/esl-panel-group.ts
index a95a76903..64fa02fed 100644
--- a/src/modules/esl-panel-group/core/esl-panel-group.ts
+++ b/src/modules/esl-panel-group/core/esl-panel-group.ts
@@ -72,6 +72,9 @@ export class ESLPanelGroup extends ESLBaseElement {
   /** Readonly attribute that indicates whether the panel group has opened panels */
   @boolAttr({readonly: true}) public hasOpened: boolean;
 
+  /** Active while animation in progress */
+  @boolAttr({readonly: true}) public animating: boolean;
+
   /** Height of previous active panel */
   protected _previousHeight: number = 0;
 
@@ -268,6 +271,7 @@ export class ESLPanelGroup extends ESLBaseElement {
 
   /** Pre-processing animation action */
   protected beforeAnimate(): void {
+    this.$$attr('animating', true);
     CSSClassUtils.add(this, this.animationClass);
   }
 
@@ -275,6 +279,7 @@ export class ESLPanelGroup extends ESLBaseElement {
   protected afterAnimate(silent?: boolean): void {
     this.style.removeProperty('height');
     CSSClassUtils.remove(this, this.animationClass);
+    this.$$attr('animating', false);
 
     if (silent) return;
     this.$$fire(this.AFTER_ANIMATE_EVENT, {bubbles: false});
diff --git a/src/modules/esl-panel/core/esl-panel.ts b/src/modules/esl-panel/core/esl-panel.ts
index cc759f4c9..26b5003b0 100644
--- a/src/modules/esl-panel/core/esl-panel.ts
+++ b/src/modules/esl-panel/core/esl-panel.ts
@@ -90,7 +90,7 @@ export class ESLPanel extends ESLToggleable {
 
   /** Handles post animation process to initiate after animate step */
   protected postAnimate(capturedBy?: ESLPanelGroup | null): void {
-    if (capturedBy) {
+    if (capturedBy && capturedBy.animating) {
       capturedBy.$$on({
         event: capturedBy.AFTER_ANIMATE_EVENT,
         once: true


Test patch:
diff --git a/e2e/package.json b/e2e/package.json
index 167f78028..c7c27e5c7 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -19,7 +19,7 @@
     "@types/puppeteer": "^7.0.4",
     "jest-image-snapshot": "^6.4.0",
     "jest-puppeteer": "^10.0.1",
-    "puppeteer": "^22.10.0",
+    "puppeteer": "^22.9.0",
     "stucumber": "^0.19.0"
   }
 }