Add backwards support for MediaQueryList.addEventListener in older br…

…owsers
qonto · Nov 9, 2023 · 480033f · 480033f
1 parent 0ffd080
commit 480033f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/ember-lottie/src/components/lottie.ts b/ember-lottie/src/components/lottie.ts
@@ -113,10 +113,15 @@ export default class LottieComponent extends Component<LottieSignature> {
     const speed = Ember.testing ? 0 : this.args.speed || 1;
     this.animation.setSpeed(speed);
 
-    this.mediaQuery?.addEventListener(
-      'change',
-      this.handleReducedMotionPreferenceChange,
-    );
+    if (this.mediaQuery?.addEventListener) {
+      this.mediaQuery?.addEventListener(
+        'change',
+        this.handleReducedMotionPreferenceChange
+      );
+    } else {
+      // For backwards compatibility with older browsers, e.g. Safari 13
+      this.mediaQuery?.addListener(this.handleReducedMotionPreferenceChange);
+    }
   }
 
   @action
@@ -130,10 +135,15 @@ export default class LottieComponent extends Component<LottieSignature> {
   willDestroy(): void {
     super.willDestroy();
 
-    this.mediaQuery?.removeEventListener(
-      'change',
-      this.handleReducedMotionPreferenceChange,
-    );
+    if (this.mediaQuery?.removeEventListener) {
+      this.mediaQuery?.removeEventListener(
+        'change',
+        this.handleReducedMotionPreferenceChange
+      );
+    } else {
+      // For backwards compatibility with older browsers, e.g. Safari 13
+      this.mediaQuery?.removeListener(this.handleReducedMotionPreferenceChange);
+    }
 
     if (this.animation) {
       this.animation.destroy();

diff --git a/test-app/tests/integration/components/lottie-test.ts b/test-app/tests/integration/components/lottie-test.ts
@@ -107,6 +107,32 @@ module('Integration | Component | lottie', function (hooks) {
     assert.dom('[data-test-autoplay=false]').exists();
   });
 
+  test('it defaults to addListener and removeListener when addEventListener and removeEventListener is not available', async function (this: TestContext, assert) {
+    const addListener = sinon.spy();
+    const removeListener = sinon.spy();
+    window.matchMedia = (): MediaQueryList => {
+      return {
+        addListener,
+        removeListener,
+        addEventListener: undefined,
+        removeEventListener: undefined,
+        matches: true,
+      } as unknown as MediaQueryList;
+    };
+
+    await render<TestContext>(hbs`
+      <Lottie
+        @path="/data.json"
+      />
+    `);
+
+    find('svg');
+    assert.true(addListener.calledOnce);
+
+    await clearRender();
+    assert.true(removeListener.calledOnce);
+  });
+
   test('it does not autoplay the animation when autoplay is false', async function (this: TestContext, assert) {
     window.matchMedia = (): MediaQueryList => {
       return {