Introduce texttospeechbar.ui

Added UI with stop and close button for TTS

kiwix-desktop.pro

@@ -158,6 +158,8 @@ FORMS += \
     ui/localkiwixserver.ui \
     ui/settings.ui
 
+equals(HAS_TTS, TRUE): FORMS += src/texttospeechbar.ui
+
 include(subprojects/QtSingleApplication/src/qtsingleapplication.pri)
 CODECFORSRC = UTF-8
 

resources/css/style.css

@@ -359,4 +359,28 @@ ContentTypeFilter {
 #readinglistbar QPushButton::menu-indicator {
     width: 0;
     height: 0;
+
+/* ----------------------------------------
+    Text to Speech Page
+*/
+
+#TextToSpeechBar {
+    border-top: 1px solid #ccc;
+}
+
+TextToSpeechBar > #closeButton {
+    outline: none;
+    max-height: 36px;
+    max-width: 36px;
+    border: 1px solid #ccc;
+    border-radius: 0;
+}
+
+TextToSpeechBar > #closeButton:pressed {
+    background-color: #D9E9FF;
+    border: 1px solid #3366CC;
+}
+
+TextToSpeechBar > #stopButton:disabled {
+    color: grey;
 }

resources/i18n/en.json

@@ -170,5 +170,6 @@
     "scroll-next-tab": "Scroll to next tab",
     "scroll-previous-tab": "Scroll to previous tab",
     "read-article": "Read article",
-    "read-text": "Read selected text"
+    "read-text": "Read selected text",
+    "stop": "Stop"
 }

resources/i18n/qqq.json

@@ -178,5 +178,6 @@
 	"scroll-next-tab": "Represents the action of scrolling to the next tab of the current tab which toward the end of the tab bar.",
 	"scroll-previous-tab": "Represents the action of scrolling to the previous tab of the current tab which toward the start of the tab bar.",
 	"read-article": "Represents the action of letting the computer read out all the text in the current article.",
-	"read-text": "Represents the action of letting the computer read out the selected text on the article."
+	"read-text": "Represents the action of letting the computer read out the selected text on the article.",
+	"stop": "{{Identical|Stop}}"
 }

resources/kiwix.qrc

@@ -66,5 +66,6 @@
         <file>icons/home-button.svg</file>
         <file>icons/more-vertical.svg</file>
         <file>icons/caret-left-solid.svg</file>
+        <file>icons/stop-circle.svg</file>
     </qresource>
 </RCC>

src/texttospeechbar.cpp

@@ -1,14 +1,47 @@
+#include "kiwixapp.h"
 #include "texttospeechbar.h"
+#include "ui_texttospeechbar.h"
 #include <QDebug>
 
 TextToSpeechBar::TextToSpeechBar(QWidget *parent)
-    : QFrame(parent), mp_speech(new QTextToSpeech(this))
+    : QFrame(parent), mp_speech(new QTextToSpeech(this)),
+      mp_ui(new Ui::TextToSpeechBar)
 {
-    mp_speech->setVolume(0.5);
+    close();
+    mp_ui->setupUi(this);
     mp_speech->setLocale(QLocale::system().language());
+    mp_ui->stopButton->setText(gt("stop"));
+    connect(mp_speech, &QTextToSpeech::stateChanged, this,
+            &TextToSpeechBar::onStateChanged);
+    connect(mp_ui->stopButton, &QPushButton::released, this,
+            &TextToSpeechBar::stop);
+    connect(mp_ui->closeButton, &QPushButton::released,
+                this, &TextToSpeechBar::speechBarClose);
 }
 
 void TextToSpeechBar::speak(const QString &text)
 {
     mp_speech->say(text);
 }
+
+void TextToSpeechBar::stop()
+{
+    mp_speech->stop();
+}
+
+void TextToSpeechBar::onStateChanged(QTextToSpeech::State state)
+{
+    mp_ui->stopButton->setEnabled(state != QTextToSpeech::Ready);
+}
+
+void TextToSpeechBar::speechBarClose()
+{
+    /* Prevent webview from scrolling to up to the top after losing focus. */
+    auto current = KiwixApp::instance()->getTabWidget()->currentWebView();
+    if (!current)
+        return;
+    current->setFocus();
+
+    mp_speech->stop();
+    close();
+}

src/texttospeechbar.h

@@ -3,16 +3,27 @@
 
 #include <QTextToSpeech>
 #include <QFrame>
+
+namespace Ui {
+class TextToSpeechBar;
+}
+
 class TextToSpeechBar : public QFrame
 {
     Q_OBJECT
 public:
     TextToSpeechBar(QWidget *parent = nullptr);
 
     void speak(const QString& text);
+    void stop();
+
+public slots:
+    void speechBarClose();
+    void onStateChanged(QTextToSpeech::State state);
 
 private:
     QTextToSpeech *mp_speech;
+    Ui::TextToSpeechBar *mp_ui;
 };
 
 #endif // TEXTTOSPEECHMANAGER_H

src/texttospeechbar.ui

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>TextToSpeechBar</class>
+ <widget class="QFrame" name="TextToSpeechBar">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>833</width>
+    <height>43</height>
+   </rect>
+  </property>
+  <property name="sizePolicy">
+   <sizepolicy hsizetype="Preferred" vsizetype="Fixed">
+    <horstretch>0</horstretch>
+    <verstretch>0</verstretch>
+   </sizepolicy>
+  </property>
+  <property name="windowTitle">
+   <string>Frame</string>
+  </property>
+  <layout class="QHBoxLayout" name="horizontalLayout">
+   <item>
+    <spacer name="horizontalSpacer">
+     <property name="orientation">
+      <enum>Qt::Horizontal</enum>
+     </property>
+     <property name="sizeHint" stdset="0">
+      <size>
+       <width>40</width>
+       <height>20</height>
+      </size>
+     </property>
+    </spacer>
+   </item>
+   <item>
+    <widget class="QPushButton" name="stopButton">
+     <property name="enabled">
+      <bool>true</bool>
+     </property>
+     <property name="sizePolicy">
+      <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
+       <horstretch>0</horstretch>
+       <verstretch>0</verstretch>
+      </sizepolicy>
+     </property>
+     <property name="toolTip">
+      <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;&lt;br/&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+     <property name="icon">
+      <iconset resource="../resources/kiwix.qrc">
+       <normaloff>:/icons/stop-circle.svg</normaloff>:/icons/stop-circle.svg</iconset>
+     </property>
+    </widget>
+   </item>
+   <item>
+    <spacer name="horizontalSpacer_2">
+     <property name="orientation">
+      <enum>Qt::Horizontal</enum>
+     </property>
+     <property name="sizeHint" stdset="0">
+      <size>
+       <width>40</width>
+       <height>20</height>
+      </size>
+     </property>
+    </spacer>
+   </item>
+   <item>
+    <widget class="QPushButton" name="closeButton">
+     <property name="toolTip">
+      <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;&lt;br/&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+     <property name="icon">
+      <iconset resource="../resources/kiwix.qrc">
+       <normaloff>:/icons/close.svg</normaloff>:/icons/close.svg</iconset>
+     </property>
+     <property name="flat">
+      <bool>true</bool>
+     </property>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <resources>
+  <include location="../resources/kiwix.qrc"/>
+ </resources>
+ <connections/>
+</ui>

src/zimview.cpp

@@ -33,6 +33,16 @@ ZimView::ZimView(TabBar *tabBar, QWidget *parent)
                     return;
                 mp_ttsBar->speak(mp_webView->page()->selectedText());
             });
+    connect(app->getAction(KiwixApp::ReadTextAction), &QAction::triggered, [=](){
+        if (mp_tabBar->currentZimView() != this)
+            return;
+        if (this->getWebView()->page()->hasSelection())
+            mp_ttsBar->show();
+    });
+    connect(app->getAction(KiwixApp::ReadArticleAction), &QAction::triggered, [=](){
+        if (mp_tabBar->currentZimView() == this)
+            mp_ttsBar->show();
+    });
 #endif
     layout->addWidget(mp_findInPageBar);
     layout->setContentsMargins(0,0,0,0);