Improve media overlay controls

johnfactotum · Oct 8, 2023 · 28f25e4 · 28f25e4
1 parent 6bab039
commit 28f25e4
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 30 deletions.
diff --git a/src/app.js b/src/app.js
@@ -218,6 +218,9 @@ export const Application = GObject.registerClass({
             .large-button {
                 padding: 6px;
             }
+            .chips button {
+                border-radius: 9999px;
+            }
 
             checkbutton.theme-selector {
                 padding: 0;

diff --git a/src/book-viewer.js b/src/book-viewer.js
@@ -590,6 +590,7 @@ GObject.registerClass({
     mediaOverlayResume() { return this.#exec('reader.view.mediaOverlay.resume') }
     mediaOverlayPrev() { return this.#exec('reader.view.mediaOverlay.prev') }
     mediaOverlayNext() { return this.#exec('reader.view.mediaOverlay.next') }
+    mediaOverlaySetVolume(x) { return this.#exec('reader.view.mediaOverlay.setVolume', x) }
     mediaOverlaySetRate(x) { return this.#exec('reader.view.mediaOverlay.setRate', x) }
     getCover() { return this.#exec('reader.getCover').then(utils.base64ToPixbuf) }
     init(x) { return this.#exec('reader.view.init', x) }
@@ -841,7 +842,8 @@ export const BookViewer = GObject.registerClass({
             'resume': () => this._view.mediaOverlayResume(),
             'backward': () => this._view.mediaOverlayPrev(),
             'forward': () => this._view.mediaOverlayNext(),
-            'set-rate': (_, x) => this._view.mediaOverlaySetRate(x),
+            'notify::volume': box => this._view.mediaOverlaySetVolume(box.volume),
+            'notify::rate': box => this._view.mediaOverlaySetRate(box.rate),
         })
 
         // setup actions

diff --git a/src/foliate-js b/src/foliate-js
diff --git a/src/gresource.xml b/src/gresource.xml
@@ -35,6 +35,7 @@
     <file alias="icons/scalable/actions/view-tag-symbolic.svg">icons/hicolor/scalable/actions/view-tag-symbolic.svg</file>
     <file alias="icons/scalable/actions/format-text-squiggly-symbolic.svg">icons/hicolor/scalable/actions/format-text-squiggly-symbolic.svg</file>
     <file alias="icons/scalable/actions/bookmark-filled-symbolic.svg">icons/hicolor/scalable/actions/bookmark-filled-symbolic.svg</file>
+    <file alias="icons/scalable/actions/speedometer-symbolic.svg">icons/hicolor/scalable/actions/speedometer-symbolic.svg</file>
     <file>foliate-js/comic-book.js</file>
     <file>foliate-js/epub.js</file>
     <file>foliate-js/epubcfi.js</file>

diff --git a/src/icons/hicolor/scalable/actions/speedometer-symbolic.svg b/src/icons/hicolor/scalable/actions/speedometer-symbolic.svg
diff --git a/src/navbar.js b/src/navbar.js
@@ -237,5 +237,6 @@ GObject.registerClass({
     }
     setTTSType(name) {
         this._tts_stack.visible_child_name = name
+        this._tts_popover.default_widget = this._tts_stack.visible_child.defaultWidget
     }
 })
diff --git a/src/tts.js b/src/tts.js
@@ -29,6 +29,7 @@ GObject.registerClass({
     ],
 }, class extends Gtk.Box {
     #state = 'stopped'
+    defaultWidget = this._play_button
     constructor(params) {
         super(params)
         this.insert_action_group('tts', utils.addMethods(this, {
@@ -124,28 +125,38 @@ GObject.registerClass({
 GObject.registerClass({
     GTypeName: 'FoliateMediaOverlayBox',
     Template: pkg.moduleuri('ui/media-overlay-box.ui'),
+    Properties: utils.makeParams({
+        'rate': 'double',
+        'volume': 'double',
+    }),
     Signals: {
         'start': {},
         'pause': {},
         'resume': {},
         'backward': {},
         'forward': {},
-        'set-rate': { param_types: [GObject.TYPE_DOUBLE] },
     },
     InternalChildren: [
-        'rate-scale',
+        'volume-scale',
         'media-buttons', 'play-button',
     ],
 }, class extends Gtk.Box {
     #state = 'stopped'
+    defaultWidget = this._play_button
     constructor(params) {
         super(params)
-        this.insert_action_group('media-overlay', utils.addMethods(this, {
+        this.set_property('rate', 1)
+        const actionGroup = utils.addMethods(this, {
             actions: ['play', 'backward', 'forward', 'stop'],
-        }))
+        })
+        utils.addPropertyActions(this, ['rate'], actionGroup)
+        this.insert_action_group('media-overlay', actionGroup)
+
         utils.setDirection(this._media_buttons, Gtk.TextDirection.LTR)
-        this._rate_scale.connect('value-changed', scale =>
-            this.emit('set-rate', scale.get_value()))
+
+        // GtkScale, y u no implement GtkActionable?
+        this._volume_scale.connect('value-changed', scale =>
+            this.set_property('volume', scale.get_value()))
     }
     get state() {
         return this.#state

diff --git a/src/ui/media-overlay-box.ui b/src/ui/media-overlay-box.ui
@@ -4,41 +4,89 @@
   <property name="orientation">vertical</property>
   <property name="spacing">9</property>
   <child>
-    <object class="GtkGrid">
-      <property name="column-spacing">6</property>
-      <property name="row-spacing">9</property>
+    <object class="GtkBox">
+      <property name="spacing">6</property>
       <property name="margin-start">6</property>
       <child>
-        <object class="GtkLabel">
-          <property name="label" translatable="yes">Speed</property>
-          <property name="xalign">0</property>
-          <layout>
-            <property name="row">1</property>
-            <property name="column">0</property>
-          </layout>
+        <object class="GtkImage">
+          <property name="tooltip-text" translatable="yes">Volume</property>
+          <property name="icon-name">audio-volume-high-symbolic</property>
         </object>
       </child>
       <child>
-        <object class="GtkScale" id="rate-scale">
+        <object class="GtkScale" id="volume-scale">
           <property name="draw-value">False</property>
-          <property name="width-request">200</property>
           <property name="hexpand">True</property>
           <property name="adjustment">
             <object class="GtkAdjustment">
-              <property name="lower">0.5</property>
-              <property name="upper">2</property>
+              <property name="lower">0</property>
+              <property name="upper">1</property>
               <property name="step-increment">0.05</property>
               <property name="page-increment">0.25</property>
               <property name="value">1</property>
             </object>
           </property>
-          <marks>
-            <mark value="1"/>
-          </marks>
-          <layout>
-            <property name="row">1</property>
-            <property name="column">1</property>
-          </layout>
+        </object>
+      </child>
+    </object>
+  </child>
+  <child>
+    <object class="GtkSeparator"/>
+  </child>
+  <child>
+    <object class="GtkBox">
+      <property name="spacing">6</property>
+      <property name="margin-start">6</property>
+      <child>
+        <object class="GtkImage">
+          <property name="tooltip-text" translatable="yes">Speed</property>
+          <property name="icon-name">speedometer-symbolic</property>
+        </object>
+      </child>
+      <child>
+        <object class="GtkBox">
+          <property name="spacing">3</property>
+          <style><class name="chips"/></style>
+          <child>
+            <object class="GtkToggleButton">
+              <property name="label" translatable="yes">0.75</property>
+              <property name="action-name">media-overlay.rate</property>
+              <property name="action-target">0.75</property>
+              <style><class name="flat"/></style>
+            </object>
+          </child>
+          <child>
+            <object class="GtkToggleButton">
+              <property name="label" translatable="yes">1</property>
+              <property name="action-name">media-overlay.rate</property>
+              <property name="action-target">1.0</property>
+              <style><class name="flat"/></style>
+            </object>
+          </child>
+          <child>
+            <object class="GtkToggleButton">
+              <property name="label" translatable="yes">1.25</property>
+              <property name="action-name">media-overlay.rate</property>
+              <property name="action-target">1.25</property>
+              <style><class name="flat"/></style>
+            </object>
+          </child>
+          <child>
+            <object class="GtkToggleButton">
+              <property name="label" translatable="yes">1.5</property>
+              <property name="action-name">media-overlay.rate</property>
+              <property name="action-target">1.5</property>
+              <style><class name="flat"/></style>
+            </object>
+          </child>
+          <child>
+            <object class="GtkToggleButton">
+              <property name="label" translatable="yes">2</property>
+              <property name="action-name">media-overlay.rate</property>
+              <property name="action-target">2.0</property>
+              <style><class name="flat"/></style>
+            </object>
+          </child>
         </object>
       </child>
     </object>

diff --git a/src/ui/navbar.ui b/src/ui/navbar.ui
@@ -88,7 +88,7 @@
       <property name="valign">center</property>
       <property name="direction">up</property>
       <property name="icon-name">audio-headphones-symbolic</property>
-      <property name="tooltip-text" translatable="yes">Text-to-Speech</property>
+      <property name="tooltip-text" translatable="yes">Narration</property>
       <property name="popover">
         <object class="GtkPopover" id="tts-popover">
           <child>