[gnome-sound-recorder/bilelmoussaoui/fixes: 3/12] split recorder widget out of window




commit 76f6b6ef0f20daf358352db362d0ec46c0b26fc4
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Wed Sep 9 02:35:24 2020 +0200

    split recorder widget out of window

 data/org.gnome.SoundRecorder.data.gresource.xml  |   5 +-
 data/ui/recorder.ui                              | 187 ++++++++++++++++++
 data/ui/window.ui                                | 230 +++++------------------
 src/org.gnome.SoundRecorder.src.gresource.xml.in |   9 +-
 src/recorderWidget.js                            | 118 ++++++++++++
 src/window.js                                    |  89 ++-------
 6 files changed, 374 insertions(+), 264 deletions(-)
---
diff --git a/data/org.gnome.SoundRecorder.data.gresource.xml b/data/org.gnome.SoundRecorder.data.gresource.xml
index e736be8..ca14163 100644
--- a/data/org.gnome.SoundRecorder.data.gresource.xml
+++ b/data/org.gnome.SoundRecorder.data.gresource.xml
@@ -2,9 +2,10 @@
 <gresources>
   <gresource prefix="/org/gnome/SoundRecorder">
     <file>application.css</file>
-    <file>ui/window.ui</file>
+    <file>ui/recorder.ui</file>
     <file>ui/row.ui</file>
+    <file>ui/window.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">icons/skip-back-symbolic.svg</file>
     <file compressed="true" preprocess="xml-stripblanks">icons/skip-forward-symbolic.svg</file>
   </gresource>
-</gresources>
\ No newline at end of file
+</gresources>
diff --git a/data/ui/recorder.ui b/data/ui/recorder.ui
new file mode 100644
index 0000000..8a9ca99
--- /dev/null
+++ b/data/ui/recorder.ui
@@ -0,0 +1,187 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.36.0 -->
+<interface>
+  <requires lib="gtk+" version="3.22"/>
+  <requires lib="libhandy" version="1.0"/>
+  <template class="Gjs_RecorderWidget" parent="GtkBin">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <child>
+      <object class="HdyWindowHandle">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="margin_top">24</property>
+            <property name="margin_bottom">24</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkBox" id="recorderBox">
+                <property name="height_request">230</property>
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="valign">center</property>
+                <property name="orientation">vertical</property>
+                <child>
+                  <object class="GtkLabel" id="recorderTime">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="margin_top">18</property>
+                    <style>
+                      <class name="dim-label"/>
+                      <class name="recorder-time-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="pack_type">end</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="margin_top">8</property>
+                <property name="spacing">18</property>
+                <child>
+                  <object class="GtkStack" id="playbackStack">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <child>
+                      <object class="GtkButton" id="playButton">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">True</property>
+                        <property name="tooltip_text" translatable="yes">Resume Recording</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="action_name">recorder.resume</property>
+                        <child>
+                          <object class="GtkImage" id="playIcon">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">media-playback-start-symbolic</property>
+                          </object>
+                        </child>
+                        <style>
+                          <class name="rounded-button"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="name">recorder-start</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="pauseButton">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">True</property>
+                        <property name="tooltip_text" translatable="yes">Pause Recording</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="action_name">recorder.pause</property>
+                        <child>
+                          <object class="GtkImage" id="pauseIcon">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">media-playback-pause-symbolic</property>
+                          </object>
+                        </child>
+                        <style>
+                          <class name="rounded-button"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="name">recorder-pause</property>
+                        <property name="position">1</property>
+                      </packing>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="tooltip_text" translatable="yes">Stop Recording</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="action_name">recorder.stop</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">media-playback-stop-symbolic</property>
+                        <property name="icon_size">3</property>
+                      </object>
+                    </child>
+                    <style>
+                      <class name="destructive-action"/>
+                      <class name="rounded-button"/>
+                      <class name="large"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="tooltip_text" translatable="yes">Cancel Recording</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="action_name">recorder.cancel</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">user-trash-symbolic</property>
+                      </object>
+                    </child>
+                    <style>
+                      <class name="rounded-button"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">2</property>
+                  </packing>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="pack_type">end</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/data/ui/window.ui b/data/ui/window.ui
index a8a6dc6..0b44b21 100644
--- a/data/ui/window.ui
+++ b/data/ui/window.ui
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.2 -->
+<!-- Generated with glade 3.36.0 -->
 <interface>
-  <requires lib="gtk+" version="3.12"/>
+  <requires lib="gtk+" version="3.20"/>
   <requires lib="libhandy" version="0.0"/>
   <template class="Gjs_Window" parent="HdyApplicationWindow">
     <property name="width_request">350</property>
@@ -27,16 +27,13 @@
                 <property name="can_focus">False</property>
                 <property name="title" translatable="yes">Sound Recorder</property>
                 <property name="show_close_button">True</property>
-                <style>
-                  <class name="titlebar" />
-                </style>
                 <child>
-                  <object class="GtkButton" id="recordStartButton">
+                  <object class="GtkButton">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
-                    <property name="valign">center</property>
-                    <property name="halign">center</property>
                     <property name="receives_default">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
                     <property name="action_name">recorder.start</property>
                     <child>
                       <object class="GtkBox">
@@ -63,6 +60,8 @@
                             <property name="label" translatable="yes">Record</property>
                           </object>
                           <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
                             <property name="position">1</property>
                           </packing>
                         </child>
@@ -95,10 +94,15 @@
                     <property name="position">1</property>
                   </packing>
                 </child>
+                <style>
+                  <class name="titlebar"/>
+                </style>
               </object>
             </child>
           </object>
           <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
             <property name="position">0</property>
           </packing>
         </child>
@@ -147,6 +151,11 @@
                           <class name="title-1"/>
                         </style>
                       </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">1</property>
+                      </packing>
                     </child>
                     <child>
                       <object class="GtkLabel">
@@ -163,13 +172,14 @@
                         </style>
                       </object>
                       <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
                         <property name="position">2</property>
                       </packing>
                     </child>
                   </object>
                   <packing>
                     <property name="name">empty</property>
-                    <property name="position">2</property>
                   </packing>
                 </child>
                 <child>
@@ -189,216 +199,62 @@
                   </object>
                   <packing>
                     <property name="name">recordings</property>
+                    <property name="position">1</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="HdyWindowHandle">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="margin_left">8</property>
-                        <property name="margin_right">8</property>
-                        <property name="margin_top">24</property>
-                        <property name="margin_bottom">24</property>
-                        <property name="orientation">vertical</property>
-                        <child>
-                          <object class="GtkBox" id="recorderBox">
-                            <property name="height_request">230</property>
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="valign">center</property>
-                            <property name="orientation">vertical</property>
-                            <child>
-                              <object class="GtkLabel" id="recorderTime">
-                                <property name="visible">True</property>
-                                <property name="can_focus">False</property>
-                                <property name="margin_top">18</property>
-                                <style>
-                                  <class name="dim-label"/>
-                                  <class name="recorder-time-label"/>
-                                </style>
-                              </object>
-                              <packing>
-                                <property name="pack_type">end</property>
-                                <property name="position">0</property>
-                              </packing>
-                            </child>
-                          </object>
-                          <packing>
-                            <property name="position">0</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkBox">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="halign">center</property>
-                            <property name="valign">center</property>
-                            <property name="margin_top">8</property>
-                            <property name="spacing">18</property>
-                            <child>
-                              <object class="GtkStack" id="playbackStack">
-                                <property name="visible">True</property>
-                                <property name="can_focus">False</property>
-                                <child>
-                                  <object class="GtkButton" id="playButton">
-                                    <property name="visible">True</property>
-                                    <property name="can_focus">True</property>
-                                    <property name="valign">center</property>
-                                    <property name="halign">center</property>
-                                    <property name="receives_default">True</property>
-                                    <property name="tooltip_text" translatable="yes">Resume 
Recording</property>
-                                    <property name="action_name">recorder.resume</property>
-                                    <child>
-                                      <object class="GtkImage" id="playIcon">
-                                        <property name="visible">True</property>
-                                        <property name="can_focus">False</property>
-                                        <property name="icon_name">media-playback-start-symbolic</property>
-                                      </object>
-                                    </child>
-                                    <style>
-                                      <class name="rounded-button"/>
-                                    </style>
-                                  </object>
-                                  <packing>
-                                    <property name="name">recorder-start</property>
-                                  </packing>
-                                </child>
-                                <child>
-                                  <object class="GtkButton" id="pauseButton">
-                                    <property name="visible">True</property>
-                                    <property name="can_focus">True</property>
-                                    <property name="valign">center</property>
-                                    <property name="halign">center</property>
-                                    <property name="receives_default">True</property>
-                                    <property name="tooltip_text" translatable="yes">Pause 
Recording</property>
-                                    <property name="action_name">recorder.pause</property>
-                                    <child>
-                                      <object class="GtkImage" id="pauseIcon">
-                                        <property name="visible">True</property>
-                                        <property name="can_focus">False</property>
-                                        <property name="icon_name">media-playback-pause-symbolic</property>
-                                      </object>
-                                    </child>
-                                    <style>
-                                      <class name="rounded-button"/>
-                                    </style>
-                                  </object>
-                                  <packing>
-                                    <property name="name">recorder-pause</property>
-                                    <property name="position">1</property>
-                                  </packing>
-                                </child>
-                              </object>
-                              <packing>
-                                <property name="position">0</property>
-                              </packing>
-                            </child>
-                            <child>
-                              <object class="GtkButton">
-                                <property name="visible">True</property>
-                                <property name="can_focus">True</property>
-                                <property name="valign">center</property>
-                                <property name="halign">center</property>
-                                <property name="receives_default">True</property>
-                                <property name="tooltip_text" translatable="yes">Stop Recording</property>
-                                <property name="action_name">recorder.stop</property>
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="visible">True</property>
-                                    <property name="can_focus">False</property>
-                                    <property name="icon_name">media-playback-stop-symbolic</property>
-                                    <property name="icon_size">3</property>
-                                  </object>
-                                </child>
-                                <style>
-                                  <class name="destructive-action"/>
-                                  <class name="rounded-button"/>
-                                  <class name="large"/>
-                                </style>
-                              </object>
-                              <packing>
-                                <property name="position">1</property>
-                              </packing>
-                            </child>
-                            <child>
-                              <object class="GtkButton">
-                                <property name="visible">True</property>
-                                <property name="can_focus">True</property>
-                                <property name="valign">center</property>
-                                <property name="halign">center</property>
-                                <property name="receives_default">True</property>
-                                <property name="tooltip_text" translatable="yes">Cancel Recording</property>
-                                <property name="action_name">recorder.cancel</property>
-                                <child>
-                                  <object class="GtkImage">
-                                    <property name="visible">True</property>
-                                    <property name="can_focus">False</property>
-                                    <property name="icon_name">user-trash-symbolic</property>
-                                  </object>
-                                </child>
-                                <style>
-                                  <class name="rounded-button"/>
-                                </style>
-                              </object>
-                              <packing>
-                                <property name="position">2</property>
-                              </packing>
-                            </child>
-                          </object>
-                          <packing>
-                            <property name="pack_type">end</property>
-                            <property name="position">1</property>
-                          </packing>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                  <packing>
-                    <property name="name">recorder</property>
-                  </packing>
+                  <placeholder/>
                 </child>
               </object>
+              <packing>
+                <property name="index">-1</property>
+              </packing>
             </child>
             <child type="overlay">
               <object class="GtkRevealer" id="notificationRevealer">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="valign">start</property>
                 <property name="halign">center</property>
+                <property name="valign">start</property>
                 <child>
                   <object class="GtkBox">
-                    <property name="visible">True</property>
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <child>
                       <object class="GtkLabel" id="notificationMessage">
                         <property name="visible">True</property>
-                        <property name="xalign">0.0</property>
                         <property name="can_focus">False</property>
                         <property name="wrap">True</property>
                         <property name="ellipsize">end</property>
+                        <property name="xalign">0</property>
                       </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">0</property>
+                      </packing>
                     </child>
                     <child>
                       <object class="GtkButton" id="notificationUndoBtn">
+                        <property name="label" translatable="yes">Undo</property>
                         <property name="visible">True</property>
                         <property name="can_focus">True</property>
                         <property name="receives_default">True</property>
-                        <property name="label" translatable="yes">Undo</property>
                         <property name="margin_start">12</property>
                       </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">1</property>
+                      </packing>
                     </child>
                     <child>
                       <object class="GtkButton" id="notificationCloseBtn">
                         <property name="visible">True</property>
                         <property name="can_focus">True</property>
                         <property name="receives_default">True</property>
-                        <property name="margin_start">8</property>
                         <property name="tooltip_text" translatable="yes">Close</property>
+                        <property name="margin_start">8</property>
                         <property name="relief">none</property>
                         <child>
                           <object class="GtkImage">
@@ -408,6 +264,11 @@
                           </object>
                         </child>
                       </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">2</property>
+                      </packing>
                     </child>
                     <style>
                       <class name="app-notification"/>
@@ -417,6 +278,11 @@
               </object>
             </child>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
         </child>
       </object>
     </child>
diff --git a/src/org.gnome.SoundRecorder.src.gresource.xml.in 
b/src/org.gnome.SoundRecorder.src.gresource.xml.in
index 1495586..a8c9d73 100644
--- a/src/org.gnome.SoundRecorder.src.gresource.xml.in
+++ b/src/org.gnome.SoundRecorder.src.gresource.xml.in
@@ -2,13 +2,14 @@
 <gresources>
   <gresource prefix="/org/gnome/SoundRecorder@profile@/js">
     <file>application.js</file>
-    <file>utils.js</file>
+    <file>main.js</file>
+    <file>recorder.js</file>
+    <file>recorderWidget.js</file>
+    <file>recording.js</file>
     <file>recordingList.js</file>
     <file>recordingsListBox.js</file>
-    <file>recording.js</file>
     <file>row.js</file>
-    <file>main.js</file>
-    <file>recorder.js</file>
+    <file>utils.js</file>
     <file>waveform.js</file>
     <file>window.js</file>
   </gresource>
diff --git a/src/recorderWidget.js b/src/recorderWidget.js
new file mode 100644
index 0000000..9d746fd
--- /dev/null
+++ b/src/recorderWidget.js
@@ -0,0 +1,118 @@
+/* exported RecorderState RecorderWidget */
+const { Gdk, Gio, GObject, Gst, Gtk } = imports.gi;
+const { displayDateTime, formatTime } = imports.utils;
+const { WaveForm, WaveType } = imports.waveform;
+
+var RecorderState = {
+    RECORDING: 0,
+    PAUSED: 1,
+    STOPPED: 2,
+}
+
+var RecorderWidget = GObject.registerClass({
+    Template: 'resource:///org/gnome/SoundRecorder/ui/recorder.ui',
+    InternalChildren: ['recorderBox', 'playbackStack', 'recorderTime', ],
+    Signals: {
+        'canceled': {},
+        'paused': {},
+        'resumed': {},
+        'started': {},
+        'stopped': { param_types: [GObject.TYPE_OBJECT] },
+    },
+}, class RecorderWidget extends Gtk.Bin {
+    _init(recorder) {
+        super._init({});
+        this.recorder = recorder;
+
+        this.waveform = new WaveForm({
+            vexpand: true,
+            valign: Gtk.Align.FILL,
+        }, WaveType.RECORDER);
+        this._recorderBox.add(this.waveform);
+
+        this.recorder.bind_property('current-peak', this.waveform, 'peak', GObject.BindingFlags.SYNC_CREATE 
| GObject.BindingFlags.DEFAULT);
+        this.recorder.connect('notify::duration', _recorder => {
+            this._recorderTime.label = formatTime(_recorder.duration);
+        });
+
+
+        const actions = [
+            { name: 'start', callback : this.onStart.bind(this), enabled: true },
+            { name: 'pause', callback : this.onPause.bind(this), enabled: false },
+            { name: 'stop', callback : this.onStop.bind(this), enabled: false,  },
+            { name: 'resume', callback : this.onResume.bind(this), enabled: false },
+            { name: 'cancel', callback : this.onCancel.bind(this), enabled: false }
+        ];
+
+        this.actionsGroup = new Gio.SimpleActionGroup();
+
+        for ( let { name, callback, enabled } of actions) {
+            const action = new Gio.SimpleAction({ name: name, enabled: enabled });
+            action.connect('activate', callback);
+            this.actionsGroup.add_action(action);
+        }
+
+        const cancelAction = this.actionsGroup.lookup('cancel');
+        const startAction = this.actionsGroup.lookup('start');
+        startAction.bind_property("enabled", cancelAction, "enabled", GObject.BindingFlags.INVERT_BOOLEAN);
+    }
+
+    onPause() {
+        this._playbackStack.visible_child_name = 'recorder-start';
+        this.state = RecorderState.PAUSED;
+
+        this.recorder.pause();
+        this.emit('paused');
+    }
+
+    onResume() {
+        this._playbackStack.visible_child_name = 'recorder-pause';
+        this.state = RecorderState.RECORDING;
+
+        this.recorder.resume();
+        this.emit('resumed');
+    }
+
+    onStart() {
+        this._playbackStack.visible_child_name = 'recorder-pause';
+        this.state = RecorderState.RECORDING;
+
+        this.recorder.start();
+        this.emit('started');
+    }
+
+    onCancel() {
+        const recording = this.recorder.stop();
+        this.state = RecorderState.STOPPED;
+        this.waveform.destroy();
+
+        recording.delete();
+        this.emit('canceled');
+    }
+
+    onStop() {
+        this.state = RecorderState.STOPPED;
+        const recording = this.recorder.stop();
+        this.waveform.destroy();
+        this.emit('stopped', recording);
+    }
+
+    set state(recorderState) {
+        switch (recorderState) {
+            case RecorderState.PAUSED:
+                this.actionsGroup.lookup('pause').set_enabled(false);
+                this.actionsGroup.lookup('resume').set_enabled(true);
+                break;
+            case RecorderState.RECORDING:
+                this.actionsGroup.lookup('start').set_enabled(false);
+                this.actionsGroup.lookup('stop').set_enabled(true);
+                this.actionsGroup.lookup('resume').set_enabled(false);
+                this.actionsGroup.lookup('pause').set_enabled(true);
+                break;
+            case RecorderState.STOPPED:
+                this.actionsGroup.lookup('start').set_enabled(true);
+                this.actionsGroup.lookup('stop').set_enabled(false);
+                break;
+        }
+    }
+});
diff --git a/src/window.js b/src/window.js
index d76d812..615f481 100644
--- a/src/window.js
+++ b/src/window.js
@@ -25,6 +25,7 @@ const { RecordingList } = imports.recordingList;
 const { RecordingsListBox } = imports.recordingsListBox;
 const { formatTime } = imports.utils;
 const { WaveForm, WaveType } = imports.waveform;
+const { RecorderWidget } = imports.recorderWidget;
 
 var WindowState = {
     EMPTY: 0,
@@ -35,9 +36,9 @@ var WindowState = {
 var Window = GObject.registerClass({
     Template: 'resource:///org/gnome/SoundRecorder/ui/window.ui',
     InternalChildren: [
-        'recorderTime', 'mainStack', 'recorderBox', 'emptyIcon', 'playbackStack',
-        'headerRevealer', 'notificationRevealer', 'notificationMessage',
-        'notificationUndoBtn', 'notificationCloseBtn', 'column',
+        'mainStack', 'emptyIcon', 'column', 'headerRevealer',
+        'notificationRevealer', 'notificationMessage',
+        'notificationUndoBtn', 'notificationCloseBtn',
     ],
 }, class Window extends Handy.ApplicationWindow {
 
@@ -47,23 +48,15 @@ var Window = GObject.registerClass({
         }, params));
 
         this.recorder = new Recorder();
-        this.waveform = new WaveForm({
-            vexpand: true,
-            valign: Gtk.Align.FILL,
-        }, WaveType.RECORDER);
-        this._recorderBox.add(this.waveform);
+        this.recorderWidget = new RecorderWidget(this.recorder);
+        this._mainStack.add_named(this.recorderWidget, "recorder");
 
         const dispatcher = GstPlayer.PlayerGMainContextSignalDispatcher.new(null);
         this.player = GstPlayer.Player.new(null, dispatcher);
         this.player.connect('end-of-stream', _p => this.player.stop());
 
-        this.recorder.bind_property('current-peak', this.waveform, 'peak', GObject.BindingFlags.SYNC_CREATE 
| GObject.BindingFlags.DEFAULT);
-        this.recorder.connect('notify::duration', _recorder => {
-            this._recorderTime.label = formatTime(_recorder.duration);
-        });
 
         this.connect('destroy', () => {
-            this.waveform.destroy();
             this.player.stop();
             this.recorder.stop();
         });
@@ -96,94 +89,38 @@ var Window = GObject.registerClass({
             }
             this._notificationUndoBtn.disconnect(this.cancelSignalId);
         });
-
-        const actions = [
-            { name: 'start', callback : this.onRecorderStart.bind(this), enabled: true },
-            { name: 'pause', callback : this.onRecorderPause.bind(this), enabled: false },
-            { name: 'stop', callback : this.onRecorderStop.bind(this), enabled: false,  },
-            { name: 'resume', callback : this.onRecorderResume.bind(this), enabled: false },
-            { name: 'cancel', callback : this.onRecorderCancel.bind(this), enabled: false }
-        ];
-
-        this.recorderActions = new Gio.SimpleActionGroup();
-
-        for ( let { name, callback, enabled } of actions) {
-            const action = new Gio.SimpleAction({ name: name, enabled: enabled });
-            action.connect('activate', callback);
-            this.recorderActions.add_action(action);
-        }
-
-        this.insert_action_group('recorder', this.recorderActions);
-
         this._column.add(this._recordingListBox);
 
+        this.recorderWidget.connect('started', this.onRecorderStarted.bind(this));
+        this.recorderWidget.connect('canceled', this.onRecorderCanceled.bind(this));
+        this.recorderWidget.connect('stopped', this.onRecorderStopped.bind(this));
+        this.insert_action_group('recorder', this.recorderWidget.actionsGroup);
         this._emptyIcon.icon_name = `${pkg.name}-symbolic`;
         this.show();
     }
 
-    onRecorderPause() {
-        this.recorder.pause();
-        this.recorderActions.lookup('resume').set_enabled(true);
-        this.recorderActions.lookup('pause').set_enabled(false);
-        this._playbackStack.visible_child_name = 'recorder-start';
-    }
-
-    onRecorderResume() {
-        this.recorder.resume();
-        this.recorderActions.lookup('resume').set_enabled(false);
-        this.recorderActions.lookup('pause').set_enabled(true);
-        this._playbackStack.visible_child_name = 'recorder-pause';
-    }
-
-    onRecorderStart() {
+    onRecorderStarted() {
         this.player.stop();
-        this.recorderActions.lookup('start').set_enabled(false);
-        this.recorderActions.lookup('stop').set_enabled(true);
-        this.recorderActions.lookup('cancel').set_enabled(true);
-        this.recorderActions.lookup('pause').set_enabled(true);
-        this.recorderActions.lookup('resume').set_enabled(false);
 
         const activeRow = this._recordingListBox.activeRow;
         if (activeRow && activeRow.editMode)
             activeRow.editMode = false;
 
-        this._playbackStack.visible_child_name = 'recorder-pause';
         this.state = WindowState.RECORDER;
-        this.recorder.start();
     }
 
-    onRecorderCancel() {
-        const recording = this.recorder.stop();
-
-        this.recorderActions.lookup('stop').set_enabled(false);
-        this.recorderActions.lookup('cancel').set_enabled(false);
-        this.recorderActions.lookup('resume').set_enabled(false);
-        this.recorderActions.lookup('pause').set_enabled(false);
-        this.recorderActions.lookup('start').set_enabled(true);
-
-        recording.delete();
-
+    onRecorderCanceled() {
         if (this._recordingList.get_n_items() === 0)
             this.state = WindowState.EMPTY;
         else
             this.state = WindowState.LIST;
-
-        this.waveform.destroy();
     }
 
-    onRecorderStop() {
-        const recording = this.recorder.stop();
-
-        this.recorderActions.lookup('stop').set_enabled(false);
-        this.recorderActions.lookup('cancel').set_enabled(false);
-        this.recorderActions.lookup('resume').set_enabled(false);
-        this.recorderActions.lookup('pause').set_enabled(false);
-        this.recorderActions.lookup('start').set_enabled(true);
+    onRecorderStopped(widget, recording) {
 
         this._recordingList.insert(0, recording);
         this._recordingListBox.get_row_at_index(0).editMode = true;
         this.state = WindowState.LIST;
-        this.waveform.destroy();
     }
 
     notify(message, callback, cancelCallback) {



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]