🐛 Connatix dock UI fullscreen support (ampproject#39834)

* Add Dock UI fullscreen button support * small fix * add break at end of switch statement * fix lint * update test
krzysztofequativ · Apr 22, 2024 · dfc0ac2 · dfc0ac2
1 parent bfade01
commit dfc0ac2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/extensions/amp-connatix-player/0.1/amp-connatix-player.js b/extensions/amp-connatix-player/0.1/amp-connatix-player.js
@@ -8,6 +8,7 @@ import {
   getDataParamsFromAttributes,
   removeElement,
 } from '#core/dom';
+import {fullscreenEnter, fullscreenExit} from '#core/dom/fullscreen';
 import {applyFillContent, isLayoutSizeDefined} from '#core/dom/layout';
 import {
   observeContentSize,
@@ -20,7 +21,7 @@ import {Services} from '#service';
 import {installVideoManagerForDoc} from '#service/video-manager-impl';
 
 import {getData} from '#utils/event-helper';
-import {userAssert} from '#utils/log';
+import {dev, userAssert} from '#utils/log';
 
 import {
   getConsentMetadata,
@@ -180,7 +181,17 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
           break;
         }
         case 'cnxFullscreenChanged': {
-          this.isFullscreen_ = !this.isFullscreen_;
+          const fullscreenState = dataJSON['args'];
+
+          this.isFullscreen_ = fullscreenState;
+          break;
+        }
+        case 'cnxToggleFullscreen': {
+          if (this.isFullscreen_) {
+            this.fullscreenExit();
+          } else {
+            this.fullscreenEnter();
+          }
           break;
         }
         case 'cnxVolumeChanged': {
@@ -321,6 +332,7 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
       'playerId': this.playerId_ || undefined,
       'mediaId': this.mediaId_ || undefined,
       'url': Services.documentInfoForDoc(element).sourceUrl,
+      'isSafariOrIos': this.isSafariOrIos_(),
       ...getDataParamsFromAttributes(element),
     };
     const iframeUrl = this.iframeDomain_ + '/amp-embed/index.html';
@@ -421,6 +433,16 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
     return true;
   }
 
+  /**
+   * @private
+   * @return {boolean}
+   */
+  isSafariOrIos_() {
+    const platform = Services.platformFor(this.win);
+
+    return platform.isSafari() || platform.isIos();
+  }
+
   // VideoInterface Implementation. See ../src/video-interface.VideoInterface
 
   /** @override */
@@ -469,16 +491,27 @@ export class AmpConnatixPlayer extends AMP.BaseElement {
       return;
     }
 
-    this.sendCommand_('enterFullscreen');
+    if (this.isSafariOrIos_()) {
+      this.sendCommand_('toggleFullscreen', true);
+    } else {
+      fullscreenEnter(dev().assertElement(this.iframe_));
+      this.isFullscreen_ = true;
+      this.sendCommand_('updateFullscreenUi', true);
+    }
   }
 
   /** @override */
   fullscreenExit() {
     if (!this.iframe_) {
       return;
     }
-
-    this.sendCommand_('exitFullscreen');
+    if (this.isSafariOrIos_()) {
+      this.sendCommand_('toggleFullscreen', false);
+    } else {
+      fullscreenExit(dev().assertElement(this.iframe_));
+      this.isFullscreen_ = false;
+      this.sendCommand_('updateFullscreenUi', false);
+    }
   }
 
   /** @override */

diff --git a/extensions/amp-connatix-player/0.1/test/test-amp-connatix-player.js b/extensions/amp-connatix-player/0.1/test/test-amp-connatix-player.js
@@ -40,7 +40,7 @@ describes.realWin(
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.src).to.equal(
-        'https://amp.cntxcdm.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&url=about%3Asrcdoc'
+        'https://amp.cntxcdm.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&url=about%3Asrcdoc&isSafariOrIos=false'
       );
       expect(iframe.className).to.match(/i-amphtml-fill-content/);
     });
@@ -54,7 +54,7 @@ describes.realWin(
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.src).to.equal(
-        'https://amp.cntxcdm.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&mediaId=527207df-2007-43c4-b87a-f90814bafd2e&url=about%3Asrcdoc'
+        'https://amp.cntxcdm.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&mediaId=527207df-2007-43c4-b87a-f90814bafd2e&url=about%3Asrcdoc&isSafariOrIos=false'
       );
     });
     it('renders when data-elements-player is set', async () => {
@@ -66,7 +66,7 @@ describes.realWin(
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.src).to.equal(
-        'https://cdm.elements.video/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&url=about%3Asrcdoc'
+        'https://cdm.elements.video/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&url=about%3Asrcdoc&isSafariOrIos=false'
       );
     });
     it('should pass data-param-* attributes to the iframe src', async () => {
@@ -78,7 +78,7 @@ describes.realWin(
       expect(iframe).to.not.be.null;
       expect(iframe.tagName).to.equal('IFRAME');
       expect(iframe.src).to.equal(
-        'https://amp.cntxcdm.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&url=about%3Asrcdoc&myParam=17'
+        'https://amp.cntxcdm.com/amp-embed/index.html?playerId=f721b0d8-7a79-42b6-b637-fa4e86138ed9&url=about%3Asrcdoc&isSafariOrIos=false&myParam=17'
       );
     });