Add ResizeObserver polyfill for safari (#3142)

ui/v2.5/package.json

@@ -66,6 +66,7 @@
     "react-select": "^4.0.2",
     "react-slick": "^0.29.0",
     "remark-gfm": "^1.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.32.5",
     "slick-carousel": "^1.8.1",
     "string.prototype.replaceall": "^1.0.4",

ui/v2.5/src/components/ScenePlayer/util.ts

@@ -3,4 +3,4 @@ import videojs from "video.js";
 export const VIDEO_PLAYER_ID = "VideoJsPlayer";
 
 export const getPlayerPosition = () =>
-  videojs.getPlayer(VIDEO_PLAYER_ID).currentTime();
+  videojs.getPlayer(VIDEO_PLAYER_ID)?.currentTime();

ui/v2.5/src/polyfills.ts

@@ -24,6 +24,11 @@ async function checkPolyfills() {
     await import("@formatjs/intl-pluralrules/polyfill");
     await import("@formatjs/intl-pluralrules/locale-data/en");
   }
+
+  if (!("ResizeObserver" in window)) {
+    const ResizeObserver = await import("resize-observer-polyfill");
+    window.ResizeObserver = ResizeObserver.default;
+  }
 }
 
 export const initPolyfills = async () => {

ui/v2.5/yarn.lock

@@ -6678,6 +6678,11 @@ resize-observer-polyfill@^1.5.0:
   resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@5.0.0, resolve-from@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz"