diff --git a/ember-lottie/src/components/lottie.ts b/ember-lottie/src/components/lottie.ts index bb7eebbe..6d0b0dca 100644 --- a/ember-lottie/src/components/lottie.ts +++ b/ember-lottie/src/components/lottie.ts @@ -113,10 +113,15 @@ export default class LottieComponent extends Component { 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 { 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 index 88a43693..ede9cbf5 100644 --- 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(hbs` + + `); + + 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 {