Improve initial playback stability

[Shingyx]

This PR fixes two issues I've occasionally been running into when opening a stream.

1. Add window-level promise queuing and _asyncQuerySelector:
   • When defaulting to the highest quality with the custom overlay, sometimes the highest quality will be "selected" in the overlay, but the actual playback will still be using the default "Auto" quality. Refreshing the stream or manually reselecting the highest quality are some workarounds.
   • I believe this is caused by a race condition where _listenOnLatencyChanges and _setStreamQualityIndex attempt to interact with the settings elements at the same time.
   • Prevent this by introducing a promise queue.
2. Use _asyncQuerySelector to initialize video element:
   • The overlay sometimes gets stuck in the "paused" state. I think 3bcb1c3 partially fixed this issue.
   • The issue occurs when the retried videoElement.addEventListener("playing", ...) is called after the player has already started playing. I tested this theory with the patch below.
   • Fix this by using _asyncQuerySelector to get the video element for the first time, removing the retry behaviour.

Patch for verifying the second issue

diff --git a/lib/screens/channel/video/video_store.dart b/lib/screens/channel/video/video_store.dart
index f39fdb5..935b13d 100644
--- a/lib/screens/channel/video/video_store.dart
+++ b/lib/screens/channel/video/video_store.dart
@@ -334,9 +334,9 @@ abstract class VideoStoreBase with Store {
       try {
         videoWebViewController.runJavaScript(
           '''
-        (function checkVideoElement() {
+        (function checkVideoElement(first) {
           const videoElement = document.getElementsByTagName("video")[0];
-          if (videoElement) {
+          if (videoElement && !first) {
             videoElement.addEventListener("pause", () => {
               VideoPause.postMessage("video paused");
               videoElement.textTracks[0].mode = "hidden";
@@ -346,9 +346,9 @@ abstract class VideoStoreBase with Store {
               videoElement.textTracks[0].mode = "hidden";
             });
           } else {
-            setTimeout(checkVideoElement, 100); // Check again after 100ms
+            setTimeout(checkVideoElement, 2000); // Check again after 2s
           }
-        })();
+        })(true);
         ''',
         );
         if (settingsStore.showOverlay) {

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frostyapp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 9, 2024 5:19am

[tommyxchow]

Awesome, thank you so much!