Change elapsed time into button

clapper_src/app.js

@@ -84,7 +84,7 @@ var App = GObject.registerClass({
     {
         super.vfunc_activate();
 
-        this.window.show();
+        this.window.present();
         Gtk.StyleContext.add_provider_for_display(
             Gdk.Display.get_default(),
             this.cssProvider,
@@ -307,8 +307,10 @@ var App = GObject.registerClass({
             if(!this.inhibitCookie)
                 return;
 
+            /* Uninhibit seems to be broken as of GTK 3.99.2
             this.uninhibit(this.inhibitCookie);
             this.inhibitCookie = null;
+            */
         }
 
         debug(`set prevent suspend to: ${isInhibited}`);

clapper_src/buttons.js

@@ -65,6 +65,31 @@ class ClapperIconToggleButton extends IconButton
     }
 });
 
+var LabelButton = GObject.registerClass(
+class ClapperLabelButton extends CustomButton
+{
+    _init(text)
+    {
+        super._init({
+            margin_start: 0,
+            margin_end: 0,
+        });
+
+        this.customLabel = new Gtk.Label({
+            label: text,
+            single_line_mode: true,
+        });
+
+        this.customLabel.add_css_class('labelbutton');
+        this.set_child(this.customLabel);
+    }
+
+    set_label(text)
+    {
+        this.customLabel.set_text(text);
+    }
+});
+
 var PopoverButton = GObject.registerClass(
 class ClapperPopoverButton extends IconButton
 {

clapper_src/controls.js

@@ -32,6 +32,7 @@ var Controls = GObject.registerClass({
         });
 
         this.durationFormated = '00:00:00';
+        this.elapsedInitial = '00:00:00/00:00:00';
         this.buttonsArr = [];
 
         this._addTogglePlayButton();
@@ -89,6 +90,14 @@ var Controls = GObject.registerClass({
         return button;
     }
 
+    addLabelButton(text)
+    {
+        text = text || '';
+        let button = new Buttons.LabelButton(text);
+
+        return this.addButton(button);
+    }
+
     addPopoverButton(iconName)
     {
         let button = new Buttons.PopoverButton(iconName);
@@ -184,10 +193,11 @@ var Controls = GObject.registerClass({
 
     _addPositionScale()
     {
+        this.elapsedButton = this.addLabelButton(this.elapsedInitial);
         this.positionScale = new Gtk.Scale({
             orientation: Gtk.Orientation.HORIZONTAL,
             value_pos: Gtk.PositionType.LEFT,
-            draw_value: true,
+            draw_value: false,
             hexpand: true,
             valign: Gtk.Align.CENTER,
         });
@@ -200,9 +210,7 @@ var Controls = GObject.registerClass({
         );
 
         this.positionScale.add_css_class('positionscale');
-        this.positionScale.set_format_value_func(
-            this._onPositionScaleFormatValue.bind(this)
-        );
+        this.positionScale.connect('value-changed', this._onPositionScaleValueChanged.bind(this));
 /*
         this.positionScale.connect(
             'button-press-event', this._onPositionScaleButtonPressEvent.bind(this)
@@ -284,10 +292,12 @@ var Controls = GObject.registerClass({
         }
     }
 
-    _onPositionScaleFormatValue(self, value)
+    _onPositionScaleValueChanged()
     {
-        return this._getFormatedTime(value)
+        let elapsed = this._getFormatedTime(this.positionScale.get_value())
             + '/' + this.durationFormated;
+
+        this.elapsedButton.set_label(elapsed);
     }
 
     _onPositionScaleButtonPressEvent()
@@ -345,7 +355,6 @@ var Controls = GObject.registerClass({
     {
         this.disconnect(this.destroySignal);
 
-        this.positionScale.set_format_value_func(null);
         this.visualizationsButton.emit('destroy');
         this.videoTracksButton.emit('destroy');
         this.audioTracksButton.emit('destroy');

css/styles.css

@@ -24,6 +24,11 @@ scale marks {
   min-width: 18px;
   min-height: 18px;
 }
+.labelbutton {
+  font-family: 'Cantarell', 'Noto Sans', sans-serif;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
 .videobox {
   background: black;
 }
@@ -45,25 +50,13 @@ scale marks {
   font-size: 24px;
   font-weight: 600;
 }
-
-/* Position Scale */
-.positionscale value {
-  font-weight: 600;
-  color: currentColor;
-}
-.positionscale trough highlight {
-  min-height: 4px;
-}
-.osd .positionscale value {
+.osd .labelbutton {
   font-size: 24px;
 }
-.positionscale contents {
-  margin-left: 4px;
-  margin-right: 2px;
-}
-.osd .positionscale contents {
-  margin-left: 8px;
-  margin-right: 2px;
+
+/* Position Scale */
+.positionscale trough highlight {
+  min-height: 4px;
 }
 .osd .positionscale trough slider {
   color: transparent;
@@ -77,12 +70,10 @@ scale marks {
 
 /* Volume Scale */
 .volumescale {
-  margin-left: 4px;
   min-height: 180px;
 }
 .osd .volumescale {
   margin: 6px;
-  margin-left: 10px;
   min-height: 280px;
 }
 .volumescale marks label {