chore: add full view support closes #46

- an option in setting to allow toggle full view mode
- remove unused webchannel module

6 files changed, 137 insertions, 30 deletions

diff --git a/src/WhatsApp.pro b/src/WhatsApp.pro
index 765e0a7..64342d0 100644
--- a/src/WhatsApp.pro
+++ b/src/WhatsApp.pro
@@ -4,7 +4,7 @@
 #
 #-------------------------------------------------
 
-QT += core gui webengine webenginewidgets webchannel xml positioning
+QT += core gui webengine webenginewidgets xml positioning
 
 CONFIG += c++11
 
diff --git a/src/mainwindow.cpp b/src/mainwindow.cpp
index 7ab2216..e2bef52 100644
--- a/src/mainwindow.cpp
+++ b/src/mainwindow.cpp
@@ -45,8 +45,8 @@ void MainWindow::restoreMainWindow() {
         this->move(screenRect.center() - this->rect().center());
       }
     }
-  }else{
-      this->resize(636, 760);
+  } else {
+    this->resize(636, 760);
   }
 }
 
@@ -171,17 +171,18 @@ void MainWindow::loadAppWithArgument(const QString &arg) {
 }
 
 void MainWindow::updatePageTheme() {
-  QString webPageTheme = "web"; // implies light
-  QString windowTheme = settings.value("windowTheme", "light").toString();
-  if (windowTheme == "dark") {
-    webPageTheme = "web dark";
-  }
   if (webEngine && webEngine->page()) {
-    webEngine->page()->runJavaScript(
-        "document.querySelector('body').className='" + webPageTheme + "';",
-        [](const QVariant &result) {
-          qDebug() << "Value is: " << result.toString() << Qt::endl;
-        });
+    QString webPageTheme = "web";
+    QString windowTheme = settings.value("windowTheme", "light").toString();
+    if (windowTheme == "dark") {
+      webPageTheme = "dark";
+      webEngine->page()->runJavaScript(
+          "document.querySelector('body').classList.add('" + webPageTheme +
+          "');");
+    } else {
+      webEngine->page()->runJavaScript(
+          "document.querySelector('body').classList.remove('dark');");
+    }
   }
 }
 
@@ -352,6 +353,20 @@ void MainWindow::init_settingWidget() {
     connect(settingsWidget, &SettingsWidget::notify, settingsWidget,
             [=](QString message) { notify("", message); });
 
+    connect(settingsWidget, &SettingsWidget::updateFullWidthView,
+            settingsWidget, [=](bool checked) {
+              if (webEngine && webEngine->page()) {
+                if (checked)
+                  webEngine->page()->runJavaScript(
+                      "document.querySelector('body').classList.add('whatsie-"
+                      "full-view');");
+                else
+                  webEngine->page()->runJavaScript(
+                      "document.querySelector('body').classList.remove('"
+                      "whatsie-full-view');");
+              }
+            });
+
     settingsWidget->appLockSetChecked(
         settings.value("lockscreen", false).toBool());
 
@@ -634,7 +649,6 @@ void MainWindow::init_lock() {
                             "QWidget#signup{background-color:palette(window)}");
   lockWidget->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
   lockWidget->setGeometry(this->rect());
-  // lockWidget->disconnect();
 
   connect(lockWidget, &Lock::passwordNotSet, settingsWidget, [=]() {
     settings.setValue("lockscreen", false);
@@ -915,24 +929,90 @@ void MainWindow::handleLoadFinished(bool loaded) {
     checkLoadedCorrectly();
     updatePageTheme();
     handleZoom();
+    injectMutationObserver();
+    injectClassChangeObserver();
     injectNewChatJavaScript();
+    injectFullWidthJavaScript();
     settingsWidget->refresh();
   }
 }
 
+void MainWindow::injectClassChangeObserver() {
+  QString js = R"(
+            const observer = new MutationObserver(() => {
+                var haveFullView = document.body.classList.contains('whatsie-full-view');
+                var container = document.querySelector('#app > .app-wrapper-web > div');
+                if(haveFullView){
+                    container.style.width = '100%';
+                    container.style.height = '100%';
+                    container.style.top = '0';
+                    container.style.maxWidth = 'unset';
+                }else{
+                    container.style.width = null;
+                    container.style.height = null;
+                    container.style.top = null;
+                    container.style.maxWidth = null;
+                }
+            });
+            observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+            childList: false,
+            characterData: false
+        });)";
+  webEngine->page()->runJavaScript(js);
+}
+
+void MainWindow::injectMutationObserver() {
+  QString js =
+      R"(function waitForElement(selector) {
+                return new Promise(resolve => {
+                    if (document.querySelector(selector)) {
+                        return resolve(document.querySelector(selector));
+                    }
+                    const observer = new MutationObserver(mutations => {
+                        if (document.querySelector(selector)) {
+                            resolve(document.querySelector(selector));
+                            observer.disconnect();
+                        }
+                    });
+                    observer.observe(document.body, {
+                        childList: true,
+                        subtree: true
+                    });
+                });
+            })";
+  webEngine->page()->runJavaScript(js);
+}
+
+void MainWindow::injectFullWidthJavaScript() {
+  if (!settings.value("fullWidthView", true).toBool())
+    return;
+  QString js =
+      R"(waitForElement('#pane-side').then( () => {
+            var container = document.querySelector('#app > .app-wrapper-web > div');
+            container.style.width = '100%';
+            container.style.height = '100%';
+            container.style.top = '0';
+            container.style.maxWidth = 'unset';
+         });
+        )";
+  webEngine->page()->runJavaScript(js);
+}
+
 void MainWindow::injectNewChatJavaScript() {
-  QString js = "const openNewChatWhatsie = (phone,text) => { "
-               "const link = document.createElement('a');"
-               "link.setAttribute('href', "
-               "`whatsapp://send/?phone=${phone}&text=${text}`);"
-               "document.body.append(link);"
-               "link.click();"
-               "document.body.removeChild(link);"
-               "};"
-               "function openNewChatWhatsieDefined()"
-               "{"
-               "    return (openNewChatWhatsie != 'undefined');"
-               "}";
+  QString js = R"(const openNewChatWhatsie = (phone,text) => {
+                    const link = document.createElement('a');
+                    link.setAttribute('href',
+                    `whatsapp://send/?phone=${phone}&text=${text}`);
+                    document.body.append(link);
+                    link.click();
+                    document.body.removeChild(link);
+                };
+                function openNewChatWhatsieDefined()
+                {
+                    return (openNewChatWhatsie != 'undefined');
+                })";
   webEngine->page()->runJavaScript(js);
 }
 
diff --git a/src/mainwindow.h b/src/mainwindow.h
index 43b02f5..4c2c1b8 100644
--- a/src/mainwindow.h
+++ b/src/mainwindow.h
@@ -129,6 +129,9 @@ private slots:
   void injectNewChatJavaScript();
   void triggerNewChat(QString phone, QString text);
   void restoreMainWindow();
+  void injectFullWidthJavaScript();
+  void injectMutationObserver();
+  void injectClassChangeObserver();
 };
 
 #endif // MAINWINDOW_H
diff --git a/src/settingswidget.cpp b/src/settingswidget.cpp
index 38624f8..4d13cbb 100644
--- a/src/settingswidget.cpp
+++ b/src/settingswidget.cpp
@@ -76,6 +76,10 @@ SettingsWidget::SettingsWidget(QWidget *parent, int screenNumber,
   ui->styleComboBox->setCurrentText(
       settings.value("widgetStyle", "Fusion").toString());
 
+  ui->fullWidthViewCheckbox->blockSignals(true);
+  ui->fullWidthViewCheckbox->setChecked(settings.value("fullWidthView", true).toBool());
+  ui->fullWidthViewCheckbox->blockSignals(false);
+
   ui->automaticThemeCheckBox->blockSignals(true);
   bool automaticThemeSwitching =
       settings.value("automaticTheme", false).toBool();
@@ -729,3 +733,10 @@ void SettingsWidget::on_chnageCurrentPasswordPushButton_clicked() {
     showSetApplockPasswordDialog();
   }
 }
+
+void SettingsWidget::on_fullWidthViewCheckbox_toggled(bool checked)
+{
+    settings.setValue("fullWidthView", checked);
+    emit updateFullWidthView(checked);
+}
+
diff --git a/src/settingswidget.h b/src/settingswidget.h
index fdce322..3e76b20 100644
--- a/src/settingswidget.h
+++ b/src/settingswidget.h
@@ -29,6 +29,7 @@ signals:
   void zoomChanged();
   void zoomMaximizedChanged();
   void appAutoLockChanged();
+  void updateFullWidthView(bool checked);
 
 public:
   explicit SettingsWidget(QWidget *parent = nullptr,int screenNumber = 0,
@@ -95,6 +96,8 @@ private slots:
   void themeSwitchTimerTimeout();
   void updateAutomaticTheme();
 
+  void on_fullWidthViewCheckbox_toggled(bool checked);
+
 private:
   Ui::SettingsWidget *ui;
   QString engineCachePath, enginePersistentStoragePath;
diff --git a/src/settingswidget.ui b/src/settingswidget.ui
index 76a7649..cbf98e1 100644
--- a/src/settingswidget.ui
+++ b/src/settingswidget.ui
@@ -6,8 +6,8 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>691</width>
-    <height>860</height>
+    <width>693</width>
+    <height>867</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -97,8 +97,8 @@ background:transparent;
       <property name="geometry">
        <rect>
         <x>0</x>
-        <y>0</y>
-        <width>675</width>
+        <y>-14</y>
+        <width>677</width>
         <height>791</height>
        </rect>
       </property>
@@ -375,6 +375,16 @@ background:transparent;
               </property>
              </widget>
             </item>
+            <item row="4" column="1">
+             <widget class="QCheckBox" name="fullWidthViewCheckbox">
+              <property name="toolTip">
+               <string>Expand the view to full width of window</string>
+              </property>
+              <property name="text">
+               <string>Full width view</string>
+              </property>
+             </widget>
+            </item>
            </layout>
           </item>
           <item row="15" column="0">