Wait until Youtube video has loaded data to request a video quality change

app/src/main/assets/web_extensions/webcompat_youtube/main.js

@@ -60,7 +60,15 @@ try {
       viewportEl.parentNode.removeChild(viewportEl);
     }
 
-    onNavigate(0);
+    // Wait until video has loaded the first frame to force quality change.
+    // This prevents the infinite spinner problem.
+    // See https://github.com/MozillaReality/FirefoxReality/issues/1433
+    var video = document.getElementsByTagName("video")[0];
+    if (video.readyState >= 2) {
+      onNavigate(0);
+    } else {
+       video.addEventListener("loadeddata", () => onNavigate(0));
+    }
   });
 
   window.addEventListener('pushstate', onNavigate);
@@ -275,7 +283,7 @@ try {
     log(`Changed quality from "${currentQuality}" to "${newBestQuality}"`);
   };
 
-  window.onYouTubePlayerReady = evt => {
+  window.wrappedJSObject.onYouTubePlayerReady = evt => {
     log('`onYouTubePlayerReady` called');
     window.ytImprover(1);
     evt.addEventListener('onStateChange', 'ytImprover');
@@ -284,9 +292,9 @@ try {
 
   window.addEventListener('spfready', () => {
     log('`spfready` event fired');
-    if (typeof window.ytplayer === 'object' && window.ytplayer.config) {
+    if (window.wrappedJSObject.ytplayer && window.wrappedJSObject.ytplayer.config) {
       log('`window.ytplayer.config.args.jsapicallback` set');
-      window.ytplayer.config.args.jsapicallback = 'onYouTubePlayerReady';
+      window.wrappedJSObject.ytplayer.config.args.jsapicallback = 'onYouTubePlayerReady';
     }
   });