Move Popover button creation to buttons.js

clapper_src/app.js

@@ -190,7 +190,7 @@ var App = GObject.registerClass({
 
         this.interface.setControlsOnVideo(isFullscreen);
         this.interface.controls.setVolumeMarks(true);
-        this.interface.controls.fullscreenMode = isFullscreen;
+        this.interface.controls.setFullscreenMode(isFullscreen);
     }
 
     _onWindowKeyPressEvent(self, event)

clapper_src/buttons.js

@@ -3,15 +3,30 @@ const { GObject, Gtk } = imports.gi;
 var BoxedIconButton = GObject.registerClass(
 class BoxedIconButton extends Gtk.Button
 {
-    _init(icon, size)
+    _init(icon, size, isFullscreen)
     {
-        super._init();
+        super._init({
+            margin_top: 4,
+            margin_bottom: 4,
+            can_focus: false,
+            can_default: false,
+        });
 
+        this.isFullscreen = isFullscreen || false;
+
+        size = size || Gtk.IconSize.SMALL_TOOLBAR;
         let image = Gtk.Image.new_from_icon_name(icon, size);
 
         if(image)
             this.set_image(image);
 
+        this.image.defaultSize = size;
+        this.image.fullscreenSize = (size === Gtk.IconSize.SMALL_TOOLBAR)
+            ? Gtk.IconSize.LARGE_TOOLBAR
+            : Gtk.IconSize.DND;
+
+        this.get_style_context().add_class('flat');
+
         this.box = new Gtk.Box();
         this.box.pack_start(this, false, false, 0);
 
@@ -23,6 +38,18 @@ class BoxedIconButton extends Gtk.Button
         return this.box.visible;
     }
 
+    setFullscreenMode(isFullscreen)
+    {
+        if(this.isFullscreen === isFullscreen)
+            return;
+
+        this.image.icon_size = (isFullscreen)
+            ? this.image.fullscreenSize
+            : this.image.defaultSize;
+
+        this.isFullscreen = isFullscreen;
+    }
+
     show_all()
     {
         this.box.show_all();
@@ -38,3 +65,40 @@ class BoxedIconButton extends Gtk.Button
         this.box.hide();
     }
 });
+
+var BoxedPopoverButton = GObject.registerClass(
+class BoxedPopoverButton extends BoxedIconButton
+{
+    _init(icon, size, isFullscreen)
+    {
+        super._init(icon, size, isFullscreen);
+
+        this.popover = new Gtk.Popover({
+            relative_to: this.box
+        });
+        this.popoverBox = new Gtk.VBox();
+        this.popover.add(this.popoverBox);
+        this.popoverBox.show();
+        this.connect(
+            'clicked', this._onPopoverButtonClicked.bind(this)
+        );
+        if(this.isFullscreen)
+            this.popover.get_style_context().add_class('osd');
+    }
+
+    setFullscreenMode(isEnabled)
+    {
+        if(this.isFullscreen === isEnabled)
+            return;
+
+        let action = (isEnabled) ? 'add_class' : 'remove_class';
+        this.popover.get_style_context()[action]('osd');
+
+        super.setFullscreenMode(isEnabled);
+    }
+
+    _onPopoverButtonClicked()
+    {
+        this.popover.popup();
+    }
+});

clapper_src/controls.js

@@ -30,9 +30,9 @@ var Controls = GObject.registerClass({
             valign: Gtk.Align.END,
         });
 
-        this._fullscreenMode = false;
+        this.fullscreenMode = false;
         this.durationFormated = '00:00:00';
-        this.buttonImages = [];
+        this.buttonsArr = [];
 
         this._addTogglePlayButton();
         this._addPositionScale();
@@ -71,59 +71,49 @@ var Controls = GObject.registerClass({
         );
     }
 
-    set fullscreenMode(isFullscreen)
+    pack_start(widget, expand, fill, padding)
     {
-        if(isFullscreen === this._fullscreenMode)
+        if(
+            widget.box
+            && widget.box.constructor
+            && widget.box.constructor === Gtk.Box
+        )
+            widget = widget.box;
+
+        super.pack_start(widget, expand, fill, padding);
+    }
+
+    setFullscreenMode(isFullscreen)
+    {
+        if(isFullscreen === this.fullscreenMode)
             return;
 
-        for(let image of this.buttonImages) {
-            image.icon_size = (isFullscreen)
-                ? image.fullscreenSize
-                : image.defaultSize;
-        }
+        for(let button of this.buttonsArr)
+            button.setFullscreenMode(isFullscreen);
 
-        this._fullscreenMode = isFullscreen;
-    }
-
-    get fullscreenMode()
-    {
-        return this._fullscreenMode;
+        this.fullscreenMode = isFullscreen;
     }
 
     addButton(iconName, size, noPack)
     {
-        size = size || Gtk.IconSize.SMALL_TOOLBAR;
-
-        let button = new Buttons.BoxedIconButton(iconName, size);
-        button.margin_top = CONTROLS_MARGIN;
-        button.margin_bottom = CONTROLS_MARGIN;
-        button.image.defaultSize = size;
-        button.image.fullscreenSize = (size === Gtk.IconSize.SMALL_TOOLBAR)
-            ? Gtk.IconSize.LARGE_TOOLBAR
-            : Gtk.IconSize.DND;
-
-        this.setDefaultWidgetBehaviour(button);
-        button.get_style_context().add_class('flat');
+        let button = new Buttons.BoxedIconButton(
+            iconName, size, this.fullscreenMode
+        );
 
         if(!noPack)
-            this.pack_start(button.box, false, false, 0);
+            this.pack_start(button, false, false, 0);
 
-        this.buttonImages.push(button.image);
+        this.buttonsArr.push(button);
         return button;
     }
 
     addPopoverButton(iconName, size)
     {
-        let button = this.addButton(iconName, size);
-
-        button.popover = new Gtk.Popover({
-            relative_to: button.get_parent()
-        });
-        button.popoverBox = new Gtk.VBox();
-        button.osd = this.fullscreenMode;
-        button.popover.add(button.popoverBox);
-        button.connect('clicked', this._onPopoverButtonClicked.bind(this, button));
-        button.popoverBox.show();
+        let button = new Buttons.BoxedPopoverButton(
+            iconName, size, this.fullscreenMode
+        );
+        this.pack_start(button, false, false, 0);
+        this.buttonsArr.push(button);
 
         return button;
     }
@@ -282,16 +272,6 @@ var Controls = GObject.registerClass({
         return `${hours}:${minutes}:${seconds}`;
     }
 
-    _onPopoverButtonClicked(self, button)
-    {
-        if(button.osd !== this.fullscreenMode) {
-            let action = (this.fullscreenMode) ? 'add_class' : 'remove_class';
-            button.popover.get_style_context()[action]('osd');
-            button.osd = this.fullscreenMode;
-        }
-        button.popover.popup();
-    }
-
     _onRadioButtonToggled(self, radioButton)
     {
         if(!radioButton.get_active())