[gnome-sound-recorder/bilelmoussaoui/better-shortcuts: 1/3] properly handle recorder/recording duration

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 2a3cdcf748608f2aee47bfecc0e81276af280ee9
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Wed Sep 9 16:58:15 2020 +0200

    properly handle recorder/recording duration
    
    - default to 0 nanoseconds
    - make use of Date to get miliseconds easily
    - use tnum font feature

 data/ui/recorder.ui   |  4 ++++
 data/ui/row.ui        |  4 ++++
 src/recorder.js       |  6 +++---
 src/recorderWidget.js |  2 +-
 src/recording.js      |  3 ++-
 src/row.js            |  6 +++---
 src/utils.js          | 17 ++++++++++-------
 7 files changed, 27 insertions(+), 15 deletions(-)
---
diff --git a/data/ui/recorder.ui b/data/ui/recorder.ui
index fb109f6..0c36559 100644
--- a/data/ui/recorder.ui
+++ b/data/ui/recorder.ui
@@ -29,6 +29,10 @@
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="margin_top">18</property>
+                    <property name="use_markup">True</property>
+                    <attributes>
+                      <attribute name="font-features" value="tnum=1"/>
+                    </attributes>
                     <style>
                       <class name="dim-label"/>
                       <class name="recorder-time-label"/>
diff --git a/data/ui/row.ui b/data/ui/row.ui
index 9a60ffe..6fdcb41 100644
--- a/data/ui/row.ui
+++ b/data/ui/row.ui
@@ -31,6 +31,10 @@
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="halign">end</property>
+                    <property name="use_markup">True</property>
+                    <attributes>
+                      <attribute name="font-features" value="tnum=1"/>
+                    </attributes>
                   </object>
                   <packing>
                     <property name="pack_type">end</property>
diff --git a/src/recorder.js b/src/recorder.js
index a907a9b..2987e04 100644
--- a/src/recorder.js
+++ b/src/recorder.js
@@ -63,7 +63,7 @@ var Recorder = new GObject.registerClass({
     Properties: {
         'duration': GObject.ParamSpec.int(
             'duration',
-            'Recording Duration', 'Recording duration in seconds',
+            'Recording Duration', 'Recording duration in nanoseconds',
             GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
             0, GLib.MAXINT16, 0),
         'current-peak': GObject.ParamSpec.float(
@@ -131,7 +131,7 @@ var Recorder = new GObject.registerClass({
         this.timeout = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, () => {
             const pos = this.pipeline.query_position(Gst.Format.TIME)[1];
             if (pos > 0)
-                this.duration = pos / Gst.SECOND;
+                this.duration = pos;
             return true;
         });
     }
@@ -147,7 +147,7 @@ var Recorder = new GObject.registerClass({
 
     stop() {
         this.state = Gst.State.NULL;
-
+        this.duration = 0;
         if (this.timeout) {
             GLib.source_remove(this.timeout);
             this.timeout = null;
diff --git a/src/recorderWidget.js b/src/recorderWidget.js
index 6d33ffb..4335130 100644
--- a/src/recorderWidget.js
+++ b/src/recorderWidget.js
@@ -35,7 +35,7 @@ var RecorderWidget = GObject.registerClass({
 
         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._recorderTime.set_markup(formatTime(_recorder.duration));
         });
 
 
diff --git a/src/recording.js b/src/recording.js
index 43ebb09..9a05f2c 100644
--- a/src/recording.js
+++ b/src/recording.js
@@ -12,7 +12,7 @@ var Recording = new GObject.registerClass({
     Properties: {
         'duration': GObject.ParamSpec.int(
             'duration',
-            'Recording Duration', 'Recording duration in seconds',
+            'Recording Duration', 'Recording duration in nanoseconds',
             GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
             0, GLib.MAXINT16, 0),
         'name': GObject.ParamSpec.string(
@@ -47,6 +47,7 @@ var Recording = new GObject.registerClass({
         discoverer.start();
         discoverer.connect('discovered', (_discoverer, audioInfo) => {
             this._duration = audioInfo.get_duration();
+
             this.notify('duration');
         });
 
diff --git a/src/row.js b/src/row.js
index ba7c989..314ea6a 100644
--- a/src/row.js
+++ b/src/row.js
@@ -1,5 +1,5 @@
 /* exported Row */
-const { Gdk, Gio, GObject, Gst, Gtk } = imports.gi;
+const { Gdk, Gio, GObject, Gtk } = imports.gi;
 const { displayDateTime, formatTime } = imports.utils;
 const { WaveForm, WaveType } = imports.waveform;
 
@@ -154,9 +154,9 @@ var Row = GObject.registerClass({
 
         // Force LTR, we don't want reverse hh:mm::ss
         this._duration.direction = Gtk.TextDirection.LTR;
-        this._duration.label = formatTime(recording.duration / Gst.SECOND);
+        this._duration.markup = formatTime(recording.duration);
         recording.connect('notify::duration', () => {
-            this._duration.label = formatTime(recording.duration / Gst.SECOND);
+            this._duration.label = formatTime(recording.duration);
         });
     }
 
diff --git a/src/utils.js b/src/utils.js
index 2d42663..82cf504 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -18,15 +18,18 @@
  *
  */
 const Gettext = imports.gettext;
-const GLib = imports.gi.GLib;
+const { GLib, Gst } = imports.gi;
 
-var formatTime = totalSeconds => {
-    totalSeconds = Math.floor(totalSeconds);
-    const hours = parseInt(totalSeconds / Math.pow(60, 2)).toString();
-    const minutes = (parseInt(totalSeconds / 60) % 60).toString();
-    const seconds = parseInt(totalSeconds % 60).toString();
+var formatTime = nanoSeconds => {
+    const time = new Date(0, 0, 0, 0, 0, 0, parseInt(nanoSeconds / Gst.MSECOND));
 
-    return `${hours.padStart(2, '0')}∶${minutes.padStart(2, '0')}∶${seconds.padStart(2, '0')}`;
+    const miliseconds = time.getMilliseconds().toString().padStart(2, '0').substring(0, 2);
+    const seconds = time.getSeconds().toString().padStart(2, '0');
+    const minutes = time.getMinutes().toString().padStart(2, '0');
+    const hours = time.getHours().toString().padStart(2, '0');
+
+    // eslint-disable-next-line no-irregular-whitespace
+    return `${hours} ∶ ${minutes} ∶ ${seconds} . <small>${miliseconds}</small>`;
 };
 
 var displayDateTime = time => {