Connatix bugfixing (#39696)

* various fixes

* minor change

(cherry picked from commit 394ee4b)

extensions/amp-connatix-player/0.1/amp-connatix-player.js

@@ -3,7 +3,11 @@ import {
   CONSENT_STRING_TYPE,
 } from '#core/constants/consent-state';
 import {Deferred} from '#core/data-structures/promise';
-import {getDataParamsFromAttributes, removeElement} from '#core/dom';
+import {
+  dispatchCustomEvent,
+  getDataParamsFromAttributes,
+  removeElement,
+} from '#core/dom';
 import {applyFillContent, isLayoutSizeDefined} from '#core/dom/layout';
 import {
   observeContentSize,
@@ -24,7 +28,7 @@ import {
   getConsentPolicySharedData,
   getConsentPolicyState,
 } from '../../../src/consent';
-import {redispatch} from '../../../src/iframe-video';
+import {mutedOrUnmutedEvent, redispatch} from '../../../src/iframe-video';
 import {addParamsToUrl} from '../../../src/url';
 import {
   VideoEvents_Enum,
@@ -92,6 +96,12 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
 
     /** @private {boolean} */
     this.isFullscreen_ = false;
+
+    /** @private {boolean} */
+    this.muted_ = true;
+
+    /** @private {?MutationObserver} */
+    this.mutationObserver_ = null;
   }
 
   /**
@@ -323,8 +333,36 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     // bind to amp consent and send consent info to the iframe content and propagate to player
     this.bindToAmpConsent_();
 
+    if (!this.mutationObserver_) {
+      const mutationObserverCallback = (mutationList) => {
+        for (const mutation of mutationList) {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'class'
+          ) {
+            this.sendCommand_(
+              mutation.target.classList.contains('i-amphtml-video-docked')
+                ? 'dock'
+                : 'undock'
+            );
+          }
+        }
+      };
+
+      this.mutationObserver_ = new MutationObserver(mutationObserverCallback);
+    }
+
+    const mutationObserverConfig = {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    };
+
+    this.mutationObserver_.observe(this.iframe_, mutationObserverConfig);
+
     observeContentSize(this.element, this.onResized_);
     this.pauseHelper_.updatePlaying(true);
+    dispatchCustomEvent(this.element, mutedOrUnmutedEvent(this.muted_));
 
     return this.loadPromise(iframe).then(() => this.playerReadyPromise_);
   }
@@ -364,6 +402,7 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     this.playerReadyResolver_ = deferred.resolve;
 
     unobserveContentSize(this.element, this.onResized_);
+    this.mutationObserver_.disconnect();
     this.pauseHelper_.updatePlaying(false);
 
     return true;
@@ -393,11 +432,15 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
 
   /** @override */
   mute() {
+    this.muted_ = true;
+    dispatchCustomEvent(this.element, mutedOrUnmutedEvent(this.muted_));
     this.sendCommand_('mute');
   }
 
   /** @override */
   unmute() {
+    this.muted_ = false;
+    dispatchCustomEvent(this.element, mutedOrUnmutedEvent(this.muted_));
     this.sendCommand_('unmute');
   }