From 7ce91cd80fd2f8593b429b559f811b62ddb9f457 Mon Sep 17 00:00:00 2001
From: hensm <m+github@matt.tf>
Date: Mon, 20 Jan 2020 03:43:29 +0000
Subject: [PATCH] Use requestAnimationFrame in place of setInterval for tab
 mirroring

---
 ext/src/senders/mirroring.ts | 38 +++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/ext/src/senders/mirroring.ts b/ext/src/senders/mirroring.ts
index cac8f5e..0c87620 100644
--- a/ext/src/senders/mirroring.ts
+++ b/ext/src/senders/mirroring.ts
@@ -90,25 +90,31 @@ async function onRequestSessionSuccess (newSession: cast.Session) {
             const drawFlags =
                     ctx.DRAWWINDOW_DRAW_CARET
                   | ctx.DRAWWINDOW_DRAW_VIEW
-                  | ctx.DRAWWINDOW_ASYNC_DECODE_IMAGES;
+                  | ctx.DRAWWINDOW_ASYNC_DECODE_IMAGES
+                  | ctx.DRAWWINDOW_USE_WIDGET_LAYERS;
 
-            /**
-             * Clears the canvas and draws the window. Called repeatedly,
-             * currently at 30FPS rate because performance is quite poor.
-             */
-            function drawWindow () {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.drawWindow(
-                        window        // window
-                      , 0, 0          // x, y
-                      , canvas.width  // w
-                      , canvas.height // h
-                      , "white"       // bgColor
-                      , drawFlags);   // flags
-            }
+            let lastFrame: DOMHighResTimeStamp;
+            window.requestAnimationFrame(
+                    function draw (now: DOMHighResTimeStamp) {
 
+                if (!lastFrame) {
+                    lastFrame = now;
+                }
 
-            window.setInterval(drawWindow, 1000 / 30);
+                if ((now - lastFrame) > (1000 / 30)) {
+                    ctx.drawWindow(
+                            window        // window
+                          , 0, 0          // x, y
+                          , canvas.width  // w
+                          , canvas.height // h
+                          , "white"       // bgColor
+                          , drawFlags);   // flags
+
+                    lastFrame = now;
+                }
+
+                window.requestAnimationFrame(draw);
+            });
 
             /**
              * Capture video stream from canvas and feed into the RTC