From b8010ba9f59732b18ff4570e95a9337cc71241bc Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Wed, 30 Jun 2021 21:36:03 -0500
Subject: [PATCH] Web compat: polyfill MediaQueryList.addEventListener() for
 Safari < 14 (#36274)

---
 public/app/app.ts                          |  1 +
 public/app/polyfills/old-mediaquerylist.ts | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 public/app/polyfills/old-mediaquerylist.ts

diff --git a/public/app/app.ts b/public/app/app.ts
index 13782b275a5..59f95f00e86 100644
--- a/public/app/app.ts
+++ b/public/app/app.ts
@@ -4,6 +4,7 @@ import 'regenerator-runtime/runtime';
 
 import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering
+import './polyfills/old-mediaquerylist'; // Safari < 14 does not have mql.addEventListener()
 import 'file-saver';
 import 'jquery';
 
diff --git a/public/app/polyfills/old-mediaquerylist.ts b/public/app/polyfills/old-mediaquerylist.ts
new file mode 100644
index 00000000000..15f04a6eded
--- /dev/null
+++ b/public/app/polyfills/old-mediaquerylist.ts
@@ -0,0 +1,20 @@
+// Safari < 14 does not have mql.addEventListener(), but uses the old spec mql.addListener()
+
+let oMatchMedia = window.matchMedia;
+
+type MqlListener = (this: MediaQueryList, ev: MediaQueryListEvent) => any;
+
+window.matchMedia = (mediaQueryString) => {
+  let mql = oMatchMedia(mediaQueryString);
+
+  if (!mql.addEventListener) {
+    mql.addEventListener = (type: string, listener: MqlListener) => {
+      mql.addListener(listener);
+    };
+    mql.removeEventListener = (type: string, listener: MqlListener) => {
+      mql.removeListener(listener);
+    };
+  }
+
+  return mql;
+};