Fix toggle play button icon change

clapper_src/buttons.js

@@ -1,18 +1,22 @@
 const { GObject, Gtk } = imports.gi;
 
-var IconButton = GObject.registerClass(
-class ClapperIconButton extends Gtk.Button
+var CustomButton = GObject.registerClass(
+class ClapperCustomButton extends Gtk.Button
 {
-    _init(icon)
+    _init(opts)
     {
-        super._init({
+        opts = opts || {};
+
+        let defaults = {
             margin_top: 4,
             margin_bottom: 4,
             margin_start: 1,
             margin_end: 1,
             can_focus: false,
-            icon_name: icon,
-        });
+        };
+        Object.assign(opts, defaults);
+
+        super._init(opts);
 
         this.isFullscreen = false;
         this.add_css_class('flat');
@@ -20,10 +24,47 @@ class ClapperIconButton extends Gtk.Button
 
     setFullscreenMode(isFullscreen)
     {
+        if(this.isFullscreen === isFullscreen)
+            return;
+
+        this.margin_top = (isFullscreen) ? 6 : 4;
         this.isFullscreen = isFullscreen;
     }
 });
 
+var IconButton = GObject.registerClass(
+class ClapperIconButton extends CustomButton
+{
+    _init(icon)
+    {
+        super._init({
+            icon_name: icon,
+        });
+    }
+});
+
+var IconToggleButton = GObject.registerClass(
+class ClapperIconToggleButton extends IconButton
+{
+    _init(primaryIcon, secondaryIcon)
+    {
+        super._init(primaryIcon);
+
+        this.primaryIcon = primaryIcon;
+        this.secondaryIcon = secondaryIcon;
+    }
+
+    setPrimaryIcon()
+    {
+        this.icon_name = this.primaryIcon;
+    }
+
+    setSecondaryIcon()
+    {
+        this.icon_name = this.secondaryIcon;
+    }
+});
+
 var PopoverButton = GObject.registerClass(
 class ClapperPopoverButton extends IconButton
 {
@@ -53,7 +94,8 @@ class ClapperPopoverButton extends IconButton
         if(this.isFullscreen === isFullscreen)
             return;
 
-        this.margin_top = (isFullscreen) ? 6 : 4;
+        super.setFullscreenMode(isFullscreen);
+
         this.popover.set_offset(0, -this.margin_top);
 
         let cssClass = 'osd';
@@ -62,8 +104,6 @@ class ClapperPopoverButton extends IconButton
 
         let action = (isFullscreen) ? 'add' : 'remove';
         this.popover[action + '_css_class'](cssClass);
-
-        super.setFullscreenMode(isFullscreen);
     }
 
     vfunc_clicked()

clapper_src/controls.js

@@ -63,6 +63,8 @@ var Controls = GObject.registerClass({
         this.setDefaultWidgetBehaviour(this.openMenuButton);
         //this.forall(this.setDefaultWidgetBehaviour);
 
+        this.add_css_class('playercontrols');
+
         this.realizeSignal = this.connect('realize', this._onRealize.bind(this));
         this.destroySignal = this.connect('destroy', this._onDestroy.bind(this));
     }
@@ -75,9 +77,12 @@ var Controls = GObject.registerClass({
         this.unfullscreenButton.set_visible(isFullscreen);
     }
 
-    addButton(iconName)
+    addButton(buttonIcon)
     {
-        let button = new Buttons.IconButton(iconName);
+        let button = (buttonIcon instanceof Gtk.Button)
+            ? buttonIcon
+            : new Buttons.IconButton(buttonIcon);
+
         this.append(button);
         this.buttonsArr.push(button);
 
@@ -87,10 +92,8 @@ var Controls = GObject.registerClass({
     addPopoverButton(iconName)
     {
         let button = new Buttons.PopoverButton(iconName);
-        this.append(button);
-        this.buttonsArr.push(button);
 
-        return button;
+        return this.addButton(button);
     }
 
     addCheckButtons(box, array, activeId)
@@ -172,28 +175,11 @@ var Controls = GObject.registerClass({
 
     _addTogglePlayButton()
     {
-        this.togglePlayButton = this.addButton(
+        this.togglePlayButton = new Buttons.IconToggleButton(
             'media-playback-start-symbolic',
-            Gtk.IconSize.LARGE_TOOLBAR
+            'media-playback-pause-symbolic'
         );
-        this.togglePlayButton.setPlayImage = () =>
-        {
-/*
-            this.togglePlayButton.image.set_from_icon_name(
-                'media-playback-start-symbolic',
-                this.togglePlayButton.image.icon_size
-            );
-*/
-        }
-        this.togglePlayButton.setPauseImage = () =>
-        {
-/*
-            this.togglePlayButton.image.set_from_icon_name(
-                'media-playback-pause-symbolic',
-                this.togglePlayButton.image.icon_size
-            );
-*/
-        }
+        this.addButton(this.togglePlayButton);
     }
 
     _addPositionScale()
@@ -203,7 +189,16 @@ var Controls = GObject.registerClass({
             value_pos: Gtk.PositionType.LEFT,
             draw_value: true,
             hexpand: true,
+            valign: Gtk.Align.CENTER,
         });
+
+        this.togglePlayButton.bind_property('margin_top',
+            this.positionScale, 'margin_top', GObject.BindingFlags.SYNC_CREATE
+        );
+        this.togglePlayButton.bind_property('margin_bottom',
+            this.positionScale, 'margin_bottom', GObject.BindingFlags.SYNC_CREATE
+        );
+
         this.positionScale.add_css_class('positionscale');
         this.positionScale.set_format_value_func(
             this._onPositionScaleFormatValue.bind(this)

clapper_src/interface.js

@@ -350,10 +350,10 @@ class ClapperInterface extends Gtk.Grid
             case GstPlayer.PlayerState.STOPPED:
                 this.needsTracksUpdate = true;
             case GstPlayer.PlayerState.PAUSED:
-                this.controls.togglePlayButton.setPlayImage();
+                this.controls.togglePlayButton.setPrimaryIcon();
                 break;
             case GstPlayer.PlayerState.PLAYING:
-                this.controls.togglePlayButton.setPauseImage();
+                this.controls.togglePlayButton.setSecondaryIcon();
                 if(this.needsTracksUpdate) {
                     this.needsTracksUpdate = false;
                     this.updateMediaTracks();

css/styles.css

@@ -7,9 +7,10 @@ scale marks {
   font-size: 22px;
   font-weight: 500;
 }
+.osd .playercontrols {
+  -gtk-icon-size: 24px;
+}
 .osd button {
-  margin-left: 1px;
-  margin-right: 1px;
   min-width: 36px;
   min-height: 36px;
 }
@@ -28,7 +29,7 @@ scale marks {
 }
 .reavealertop {
   min-height: 100px;
-  box-shadow: inset 0px 200px 10px -124px rgba(0,0,0,0.4);
+  box-shadow: inset 0px 200px 10px -124px rgba(0,0,0,0.3);
   font-family: 'Cantarell', 'Noto Sans', sans-serif;
   font-size: 30px;
   font-weight: 500;