Fix enter fullscreen and popover buttons

clapper_src/app.js

@@ -21,8 +21,6 @@ var App = GObject.registerClass({
 {
     _init(opts)
     {
-        GLib.set_prgname(APP_NAME);
-
         super._init({
             application_id: pkg.name
         });
@@ -204,27 +202,15 @@ var App = GObject.registerClass({
 
     _onWindowFullscreenChanged(window, isFullscreen)
     {
-        // when changing fullscreen pango layout of popup is lost
-        // and we need to re-add marks to the new layout
-        this.interface.controls.setVolumeMarks(false);
-
         if(isFullscreen) {
             this.setUpdateTimeInterval();
             this.setHideControlsTimeout();
-            this.interface.controls.unfullscreenButton.set_sensitive(true);
-            this.interface.controls.unfullscreenButton.show();
-            this.interface.showControls(true);
         }
         else {
             this.clearTimeout('updateTime');
-            this.interface.controls.unfullscreenButton.set_sensitive(false);
-            this.interface.controls.unfullscreenButton.hide();
-            this.interface.showControls(false);
         }
 
-        this.interface.setControlsOnVideo(isFullscreen);
-        this.interface.controls.setVolumeMarks(true);
-        this.interface.controls.setFullscreenMode(isFullscreen);
+        this.interface.setFullscreenMode(isFullscreen);
     }
 
     _onWindowKeyPressEvent(self, event)

clapper_src/buttons.js

@@ -1,41 +1,51 @@
 const { GObject, Gtk } = imports.gi;
 
-var BoxedIconButton = GObject.registerClass(
-class BoxedIconButton extends Gtk.Button
+var IconButton = GObject.registerClass(
+class ClapperIconButton extends Gtk.Button
 {
-    _init(icon, size, isFullscreen)
+    _init(icon)
     {
         super._init({
             margin_top: 4,
             margin_bottom: 4,
+            margin_start: 1,
+            margin_end: 1,
             can_focus: false,
-            //can_default: false,
+            icon_name: icon,
         });
 
-        this.isFullscreen = isFullscreen || false;
-
-        size = size || Gtk.IconSize.SMALL_TOOLBAR;
-        let image = Gtk.Image.new_from_icon_name(icon);
-
-        //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.isFullscreen = false;
         this.add_css_class('flat');
-
-        this.box = new Gtk.Box();
-        this.box.append(this);
-
-        super.show();
     }
 
-    get visible()
+    setFullscreenMode(isFullscreen)
     {
-        return this.box.visible;
+        this.isFullscreen = isFullscreen;
+    }
+});
+
+var PopoverButton = GObject.registerClass(
+class ClapperPopoverButton extends IconButton
+{
+    _init(icon)
+    {
+        super._init(icon);
+
+        this.popover = new Gtk.Popover({
+            position: Gtk.PositionType.TOP,
+        });
+        this.popoverBox = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+        });
+
+        this.popover.set_parent(this);
+        this.popover.set_child(this.popoverBox);
+        this.popover.set_offset(0, -this.margin_top);
+
+        if(this.isFullscreen)
+            this.popover.add_css_class('osd');
+
+        this.destroySignal = this.connect('destroy', this._onDestroy.bind(this));
     }
 
     setFullscreenMode(isFullscreen)
@@ -43,62 +53,30 @@ class BoxedIconButton extends Gtk.Button
         if(this.isFullscreen === isFullscreen)
             return;
 
-        this.image.icon_size = (isFullscreen)
-            ? this.image.fullscreenSize
-            : this.image.defaultSize;
+        this.margin_top = (isFullscreen) ? 6 : 4;
+        this.popover.set_offset(0, -this.margin_top);
 
-        this.isFullscreen = isFullscreen;
-    }
-/*
-    show_all()
-    {
-        this.box.show_all();
-    }
-*/
-    show()
-    {
-        this.box.show();
-    }
-
-    hide()
-    {
-        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({
-            default_widget: this.box
-        });
-        this.popoverBox = new Gtk.Box({
-            orientation: Gtk.Orientation.VERTICAL
-        });
-        this.popover.set_child(this.popoverBox);
-        this.popoverBox.show();
-
-        if(this.isFullscreen)
-            this.popover.add_css_class('osd');
-    }
-
-    setFullscreenMode(isEnabled)
-    {
-        if(this.isFullscreen === isEnabled)
+        let cssClass = 'osd';
+        if(isFullscreen == this.popover.has_css_class(cssClass))
             return;
 
-        let action = (isEnabled) ? 'add' : 'remove';
-        this.popover[action + '_css_class']('osd');
+        let action = (isFullscreen) ? 'add' : 'remove';
+        this.popover[action + '_css_class'](cssClass);
 
-        super.setFullscreenMode(isEnabled);
+        super.setFullscreenMode(isFullscreen);
     }
 
     vfunc_clicked()
     {
         this.popover.popup();
     }
+
+    _onDestroy()
+    {
+        this.disconnect(this.destroySignal);
+
+        this.popover.unparent();
+        this.popoverBox.emit('destroy');
+        this.popover.emit('destroy');
+    }
 });

clapper_src/controls.js

@@ -31,7 +31,6 @@ var Controls = GObject.registerClass({
             valign: Gtk.Align.END,
         });
 
-        this.fullscreenMode = false;
         this.durationFormated = '00:00:00';
         this.buttonsArr = [];
 
@@ -52,124 +51,100 @@ var Controls = GObject.registerClass({
         this._addVolumeButton();
         this.unfullscreenButton = this.addButton(
             'view-restore-symbolic',
-            Gtk.IconSize.SMALL_TOOLBAR,
-            true
         );
+        this.unfullscreenButton.set_visible(false);
         this.fullscreenButton = Gtk.Button.new_from_icon_name(
             'view-fullscreen-symbolic',
-            //Gtk.IconSize.SMALL_TOOLBAR
         );
         this.setDefaultWidgetBehaviour(this.fullscreenButton);
         this.openMenuButton = Gtk.Button.new_from_icon_name(
             'open-menu-symbolic',
-            //Gtk.IconSize.SMALL_TOOLBAR
         );
         this.setDefaultWidgetBehaviour(this.openMenuButton);
         //this.forall(this.setDefaultWidgetBehaviour);
 
-        this.realizeSignal = this.connect('realize', this._onControlsRealize.bind(this));
-        this.destroySignal = this.connect('destroy', this._onControlsDestroy.bind(this));
-    }
-
-    pack_start(widget, expand, fill, padding)
-    {
-        if(
-            widget.box
-            && widget.box.constructor
-            && widget.box.constructor === Gtk.Box
-        )
-            widget = widget.box;
-
-        super.append(widget);
+        this.realizeSignal = this.connect('realize', this._onRealize.bind(this));
+        this.destroySignal = this.connect('destroy', this._onDestroy.bind(this));
     }
 
     setFullscreenMode(isFullscreen)
     {
-        if(isFullscreen === this.fullscreenMode)
-            return;
-
         for(let button of this.buttonsArr)
             button.setFullscreenMode(isFullscreen);
 
-        this.fullscreenMode = isFullscreen;
+        this.unfullscreenButton.set_visible(isFullscreen);
     }
 
-    addButton(iconName, size, noPack)
+    addButton(iconName)
     {
-        let button = new Buttons.BoxedIconButton(
-            iconName, size, this.fullscreenMode
-        );
-
-        if(!noPack)
-            this.pack_start(button, false, false, 0);
-
-        this.buttonsArr.push(button);
-        return button;
-    }
-
-    addPopoverButton(iconName, size)
-    {
-        let button = new Buttons.BoxedPopoverButton(
-            iconName, size, this.fullscreenMode
-        );
-        this.pack_start(button, false, false, 0);
+        let button = new Buttons.IconButton(iconName);
+        this.append(button);
         this.buttonsArr.push(button);
 
         return button;
     }
 
-    addRadioButtons(box, array, activeId)
+    addPopoverButton(iconName)
     {
-        return;
+        let button = new Buttons.PopoverButton(iconName);
+        this.append(button);
+        this.buttonsArr.push(button);
 
+        return button;
+    }
+
+    addCheckButtons(box, array, activeId)
+    {
         let group = null;
-        let children = box.get_children();
-        let lastEl = (children.length > array.length)
-            ? children.length
-            : array.length;
+        let child = box.get_first_child();
+        let i = 0;
 
-        for(let i = 0; i < lastEl; i++) {
+        while(child || i < array.length) {
             if(i >= array.length) {
-                children[i].hide();
-                debug(`hiding unused ${children[i].type} radioButton nr: ${i}`);
+                child.hide();
+                debug(`hiding unused ${child.type} checkButton nr: ${i}`);
+                i++;
+                child = child.get_next_sibling();
                 continue;
             }
 
             let el = array[i];
-            let radioButton;
+            let checkButton;
 
-            if(i < children.length) {
-                radioButton = children[i];
-                debug(`reusing ${el.type} radioButton nr: ${i}`);
+            if(child) {
+                checkButton = child;
+                debug(`reusing ${el.type} checkButton nr: ${i}`);
             }
             else {
-                debug(`creating new ${el.type} radioButton nr: ${i}`);
-                radioButton = new Gtk.RadioButton({
+                debug(`creating new ${el.type} checkButton nr: ${i}`);
+                checkButton = new Gtk.CheckButton({
                     group: group,
                 });
-                radioButton.connect(
+                checkButton.connect(
                     'toggled',
-                    this._onRadioButtonToggled.bind(this, radioButton)
+                    this._onCheckButtonToggled.bind(this, checkButton)
                 );
-                this.setDefaultWidgetBehaviour(radioButton);
-                box.add(radioButton);
+                this.setDefaultWidgetBehaviour(checkButton);
+                box.append(checkButton);
             }
 
-            radioButton.label = el.label;
-            debug(`radioButton label: ${radioButton.label}`);
-            radioButton.type = el.type;
-            debug(`radioButton type: ${radioButton.type}`);
-            radioButton.activeId = el.activeId;
-            debug(`radioButton id: ${radioButton.activeId}`);
+            checkButton.label = el.label;
+            debug(`checkButton label: ${checkButton.label}`);
+            checkButton.type = el.type;
+            debug(`checkButton type: ${checkButton.type}`);
+            checkButton.activeId = el.activeId;
+            debug(`checkButton id: ${checkButton.activeId}`);
 
-            if(radioButton.activeId === activeId) {
-                radioButton.set_active(true);
-                debug(`activated ${el.type} radioButton nr: ${i}`);
+            if(checkButton.activeId === activeId) {
+                checkButton.set_active(true);
+                debug(`activated ${el.type} checkButton nr: ${i}`);
             }
             if(!group)
-                group = radioButton;
+                group = checkButton;
 
-            radioButton.show();
+            i++;
+            if(child)
+                child = child.get_next_sibling();
         }
     }
 
@@ -179,16 +154,6 @@ var Controls = GObject.registerClass({
         //widget.can_default = false;
     }
 
-    setVolumeMarks(isAdded)
-    {
-        if(!isAdded)
-            return this.volumeScale.clear_marks();
-
-        this.volumeScale.add_mark(0, Gtk.PositionType.LEFT, '0%');
-        this.volumeScale.add_mark(1, Gtk.PositionType.LEFT, '100%');
-        this.volumeScale.add_mark(2, Gtk.PositionType.LEFT, '200%');
-    }
-
     handleScaleIncrement(type, isUp)
     {
         let value = this[`${type}Scale`].get_value();
@@ -252,7 +217,7 @@ var Controls = GObject.registerClass({
         );
 */
         this.positionAdjustment = this.positionScale.get_adjustment();
-        this.pack_start(this.positionScale, true, true, 0);
+        this.append(this.positionScale);
     }
 
     _addVolumeButton()
@@ -280,10 +245,11 @@ var Controls = GObject.registerClass({
         this.volumeAdjustment.set_page_increment(0.05);
         this.setDefaultWidgetBehaviour(this.volumeScale);
 
+        for(let i = 0; i <= 2; i++) {
+            let text = (i) ? `${i}00%` : '0%';
+            this.volumeScale.add_mark(i, Gtk.PositionType.LEFT, text);
+        }
         this.volumeButton.popoverBox.append(this.volumeScale);
-        //this.volumeButton.popoverBox.show_all();
-
-        this.setVolumeMarks(true);
     }
 
     _getFormatedTime(time)
@@ -297,25 +263,25 @@ var Controls = GObject.registerClass({
         return `${hours}:${minutes}:${seconds}`;
     }
 
-    _onRadioButtonToggled(self, radioButton)
+    _onCheckButtonToggled(self, checkButton)
     {
-        if(!radioButton.get_active())
+        if(!checkButton.get_active())
             return;
 
-        switch(radioButton.type) {
+        switch(checkButton.type) {
             case 'video':
             case 'audio':
             case 'subtitle':
                 this.emit(
                     'track-change-requested',
-                    radioButton.type,
-                    radioButton.activeId
+                    checkButton.type,
+                    checkButton.activeId
                 );
                 break;
             case 'visualization':
                 this.emit(
-                    `${radioButton.type}-change-requested`,
-                    radioButton.activeId
+                    `${checkButton.type}-change-requested`,
+                    checkButton.activeId
                 );
                 break;
             default:
@@ -341,7 +307,7 @@ var Controls = GObject.registerClass({
         this.emit('position-seeking-changed', this.isPositionSeeking);
     }
 
-    _onControlsRealize()
+    _onRealize()
     {
         this.disconnect(this.realizeSignal);
 
@@ -380,9 +346,15 @@ var Controls = GObject.registerClass({
         }
     }
 
-    _onControlsDestroy()
+    _onDestroy()
     {
         this.disconnect(this.destroySignal);
+
         this.positionScale.set_format_value_func(null);
+        this.visualizationsButton.emit('destroy');
+        this.videoTracksButton.emit('destroy');
+        this.audioTracksButton.emit('destroy');
+        this.subtitleTracksButton.emit('destroy');
+        this.volumeButton.emit('destroy');
     }
 });

clapper_src/interface.js

@@ -19,7 +19,7 @@ class ClapperInterface extends Gtk.Grid
         };
         Object.assign(this, defaults, opts);
 
-        this.controlsInVideo = false;
+        this.fullscreenMode = false;
         this.lastVolumeValue = null;
         this.lastPositionValue = 0;
         this.lastRevealerEventTime = 0;
@@ -38,7 +38,7 @@ class ClapperInterface extends Gtk.Grid
         this.attach(this.videoBox, 0, 0, 1, 1);
         this.attach(this.controls, 0, 1, 1, 1);
 
-        this.destroySignal = this.connect('destroy', this._onInterfaceDestroy.bind(this));
+        this.destroySignal = this.connect('destroy', this._onDestroy.bind(this));
     }
 
     addPlayer(player)
@@ -102,24 +102,25 @@ class ClapperInterface extends Gtk.Grid
             this[`revealer${pos}`].showChild(isShow);
     }
 
-    setControlsOnVideo(isOnVideo)
+    setFullscreenMode(isFullscreen)
     {
-        if(this.controlsInVideo === isOnVideo)
+        if(this.fullscreenMode === isFullscreen)
             return;
 
-        if(isOnVideo) {
+        if(isFullscreen) {
             this.remove(this.controls);
-            this.controls.pack_start(this.controls.unfullscreenButton.box, false, false, 0);
-            this.revealerBottom.addWidget(this.controls);
+            this.revealerBottom.append(this.controls);
         }
         else {
-            this.revealerBottom.removeWidget(this.controls);
-            this.controls.remove(this.controls.unfullscreenButton.box);
+            this.revealerBottom.remove(this.controls);
             this.attach(this.controls, 0, 1, 1, 1);
         }
 
-        this.controlsInVideo = isOnVideo;
-        debug(`placed controls in overlay: ${isOnVideo}`);
+        this.controls.setFullscreenMode(isFullscreen);
+        this.showControls(isFullscreen);
+
+        this.fullscreenMode = isFullscreen;
+        debug(`interface in fullscreen mode: ${isFullscreen}`);
     }
 
     updateMediaTracks()
@@ -212,7 +213,7 @@ class ClapperInterface extends Gtk.Grid
                 }
                 continue;
             }
-            this.controls.addRadioButtons(
+            this.controls.addCheckButtons(
                 this.controls[`${type}TracksButton`].popoverBox,
                 parsedInfo[`${type}Tracks`],
                 activeId
@@ -265,7 +266,7 @@ class ClapperInterface extends Gtk.Grid
                 });
             });
 
-            this.controls.addRadioButtons(
+            this.controls.addCheckButtons(
                 this.controls.visualizationsButton.popoverBox,
                 parsedVisArr,
                 null
@@ -433,7 +434,7 @@ class ClapperInterface extends Gtk.Grid
         this.lastPositionValue = positionSeconds;
         this._player.seek_seconds(positionSeconds);
 
-        if(this.controls.fullscreenMode)
+        if(this.fullscreenMode)
             this.updateTime();
     }
 
@@ -469,7 +470,7 @@ class ClapperInterface extends Gtk.Grid
         this._player.set_volume(volume);
     }
 
-    _onInterfaceDestroy()
+    _onDestroy()
     {
         this.disconnect(this.destroySignal);
         this.controls.emit('destroy');

clapper_src/revealers.js

@@ -220,15 +220,14 @@ class ClapperRevealerBottom extends CustomRevealer
         this.revealerBox.add_css_class('osd');
 
         this.set_child(this.revealerBox);
-        //this.revealerBox.show_all();
     }
 
-    addWidget(widget)
+    append(widget)
     {
-        this.revealerBox.pack_start(widget, false, true, 0);
+        this.revealerBox.append(widget);
     }
 
-    removeWidget(widget)
+    remove(widget)
     {
         this.revealerBox.remove(widget);
     }

css/styles.css

@@ -8,7 +8,8 @@ scale marks {
   font-weight: 500;
 }
 .osd button {
-  margin: 2px;
+  margin-left: 1px;
+  margin-right: 1px;
   min-width: 36px;
   min-height: 36px;
 }