Refactor screen recording feature

Author: farhan-momin

js/activity.js

@@ -1671,6 +1671,7 @@ class Activity {
             let mediaRecorder;
             var clickEvent = new Event("click");
             let flag = 0;
+            let stream = null;
 
             /**
              * Records the screen using the browser's media devices API.
@@ -1693,8 +1694,6 @@ class Activity {
                 });
             }
 
-            const that = this;
-
             /**
              * Saves the recorded chunks as a video file.
              * @param {Blob[]} recordedChunks - The recorded video chunks.
@@ -1711,7 +1710,6 @@ class Activity {
                     alert(_("File save canceled"));
                     flag = 0;
                     recording();
-                    doRecordButton();
                     return; // Exit without saving the file
                 }
 
@@ -1726,18 +1724,13 @@ class Activity {
                 flag = 0;
                 // eslint-disable-next-line no-use-before-define
                 recording();
-                doRecordButton();
-                that.textMsg(_("Click on stop saving"));
             }
             /**
              * Stops the recording process.
              */
             function stopRec() {
                 flag = 0;
                 mediaRecorder.stop();
-                const node = document.createElement("p");
-                node.textContent = "Stopped recording";
-                document.body.appendChild(node);
             }
 
             /**
@@ -1748,13 +1741,11 @@ class Activity {
              */
             function createRecorder(stream, mimeType) {
                 flag = 1;
-                recInside.classList.add("blink");
-                start.removeEventListener("click", createRecorder, true);
                 let recordedChunks = [];
                 const mediaRecorder = new MediaRecorder(stream);
+
                 stream.oninactive = function () {
                     // eslint-disable-next-line no-console
-                    console.log("Recording is ready to save");
                     stopRec();
                     flag = 0;
                 };
@@ -1773,11 +1764,9 @@ class Activity {
                 };
 
                 mediaRecorder.start(200);
-                setTimeout(() => {
-                    // eslint-disable-next-line no-console
-                    console.log("Resizing for Record", that.canvas.height);
-                    that._onResize();
-                }, 500);
+                recInside.classList.add("blink");
+                recInside.setAttribute("fill", "red");
+                start.addEventListener("click", stopRec);
                 return mediaRecorder;
             }
 
@@ -1786,31 +1775,23 @@ class Activity {
              */
             function recording() {
                 start.addEventListener("click", async function handler() {
-                    const stream = await recordScreen();
+                    if (!stream || stream.active == false) {
+                        stream = await recordScreen();
+                    }
                     const mimeType = "video/webm";
                     mediaRecorder = createRecorder(stream, mimeType);
                     if (flag == 1) {
                         this.removeEventListener("click", handler);
                     }
-                    const node = document.createElement("p");
-                    node.textContent = "Started recording";
-                    document.body.appendChild(node);
-                    recInside.setAttribute("fill", "red");
                 });
             }
 
             // Start recording process if not already executing
-            if (flag == 0 && isExecuting) {
+            if (flag == 0) {
                 recording();
                 start.dispatchEvent(clickEvent);
                 flag = 1;
             }
-
-            // Stop recording if already executing
-            if (flag == 1 && isExecuting) {
-                start.addEventListener("click", stopRec);
-                flag = 0;
-            }
         };
 
         /*