From c5c705a55399204d761f11f971e35eaeab78482e Mon Sep 17 00:00:00 2001
From: tonbotfy <106827778+tonbotfy@users.noreply.github.com>
Date: Tue, 9 Aug 2022 12:27:35 -0300
Subject: [PATCH] feat: [Updated] Loading screen listener with percent and
 message (#1563)

* last update

* eslint fix

* headless fix

* Update index.d.ts

Co-authored-by: stefanfuchs <stefan1234@gmail.com>

* Update index.d.ts - Add 'LOADING_SCREEN' type to Enum

Co-authored-by: stefanfuchs <stefan1234@gmail.com>
Co-authored-by: Rajeh Taher <rajeh@reforward.dev>
---
 example.js            |  4 ++++
 index.d.ts            |  4 ++++
 src/Client.js         | 46 +++++++++++++++++++++++++++++++++++++++++++
 src/util/Constants.js |  1 +
 4 files changed, 55 insertions(+)

diff --git a/example.js b/example.js
index 3c84bab..99dc7ea 100644
--- a/example.js
+++ b/example.js
@@ -7,6 +7,10 @@ const client = new Client({
 
 client.initialize();
 
+client.on('loading_screen', (percent, message) => {
+    console.log('LOADING SCREEN', percent, message);
+});
+
 client.on('qr', (qr) => {
     // NOTE: This event will not be fired if a session is specified.
     console.log('QR RECEIVED', qr);
diff --git a/index.d.ts b/index.d.ts
index 8759f5c..d4289d7 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -241,6 +241,9 @@ declare namespace WAWebJS {
             message: Message
         ) => void): this
 
+        /** Emitted when loading screen is appearing */
+        on(event: 'loading_screen', listener: (percent: string, message: string) => void): this
+
         /** Emitted when the QR code is received */
         on(event: 'qr', listener: (
             /** qr code string
@@ -463,6 +466,7 @@ declare namespace WAWebJS {
         GROUP_LEAVE = 'group_leave',
         GROUP_UPDATE = 'group_update',
         QR_RECEIVED = 'qr',
+        LOADING_SCREEN = 'loading_screen',
         DISCONNECTED = 'disconnected',
         STATE_CHANGED = 'change_state',
         BATTERY_CHANGED = 'change_battery',
diff --git a/src/Client.js b/src/Client.js
index d30390b..01d9527 100644
--- a/src/Client.js
+++ b/src/Client.js
@@ -115,6 +115,52 @@ class Client extends EventEmitter {
             referer: 'https://whatsapp.com/'
         });
 
+        await page.evaluate(`function getElementByXpath(path) {
+            return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+          }`);
+
+        let lastPercent = null,
+            lastPercentMessage = null;
+
+        await page.exposeFunction('loadingScreen', async (percent, message) => {
+            if (lastPercent !== percent || lastPercentMessage !== message) {
+                this.emit(Events.LOADING_SCREEN, percent, message);
+                lastPercent = percent;
+                lastPercentMessage = message;
+            }
+        });
+
+        await page.evaluate(
+            async function (selectors) {
+                var observer = new MutationObserver(function () {
+                    let progressBar = window.getElementByXpath(
+                        selectors.PROGRESS
+                    );
+                    let progressMessage = window.getElementByXpath(
+                        selectors.PROGRESS_MESSAGE
+                    );
+
+                    if (progressBar) {
+                        window.loadingScreen(
+                            progressBar.value,
+                            progressMessage.innerText
+                        );
+                    }
+                });
+
+                observer.observe(document, {
+                    attributes: true,
+                    childList: true,
+                    characterData: true,
+                    subtree: true,
+                });
+            },
+            {
+                PROGRESS: '//*[@id=\'app\']/div/div/div[2]/progress',
+                PROGRESS_MESSAGE: '//*[@id=\'app\']/div/div/div[3]',
+            }
+        );
+
         const INTRO_IMG_SELECTOR = '[data-testid="intro-md-beta-logo-dark"], [data-testid="intro-md-beta-logo-light"], [data-asset-intro-image-light="true"], [data-asset-intro-image-dark="true"]';
         const INTRO_QRCODE_SELECTOR = 'div[data-ref] canvas';
 
diff --git a/src/util/Constants.js b/src/util/Constants.js
index c3d9dfd..009ae5e 100644
--- a/src/util/Constants.js
+++ b/src/util/Constants.js
@@ -46,6 +46,7 @@ exports.Events = {
     GROUP_LEAVE: 'group_leave',
     GROUP_UPDATE: 'group_update',
     QR_RECEIVED: 'qr',
+    LOADING_SCREEN: 'loading_screen',
     DISCONNECTED: 'disconnected',
     STATE_CHANGED: 'change_state',
     BATTERY_CHANGED: 'change_battery',