Lower CPU usage when OSD is visible

clapper_src/app.js

@@ -165,16 +165,16 @@ var App = GObject.registerClass({
         this.player.connect('error', this._onPlayerError.bind(this));
         this.player.connect('state-changed', this._onPlayerStateChanged.bind(this));
 
-        this.interface.revealerTop.connect(
+        this.player.connectWidget(
             'button-press-event', this._onPlayerButtonPressEvent.bind(this)
         );
-        this.interface.revealerTop.connect(
+        this.player.connectWidget(
             'enter-notify-event', this._onPlayerEnterNotifyEvent.bind(this)
         );
-        this.interface.revealerTop.connect(
+        this.player.connectWidget(
             'leave-notify-event', this._onPlayerLeaveNotifyEvent.bind(this)
         );
-        this.interface.revealerTop.connect(
+        this.player.connectWidget(
             'motion-notify-event', this._onPlayerMotionNotifyEvent.bind(this)
         );
 

clapper_src/interface.js

@@ -22,6 +22,7 @@ class ClapperInterface extends Gtk.Grid
         this.controlsInVideo = false;
         this.lastVolumeValue = null;
         this.lastPositionValue = 0;
+        this.lastRevealerEventTime = 0;
         this.needsTracksUpdate = true;
         this.headerBar = null;
         this.defaultTitle = null;
@@ -48,6 +49,9 @@ class ClapperInterface extends Gtk.Grid
         this._player.connect('duration-changed', this._onPlayerDurationChanged.bind(this));
         this._player.connect('position-updated', this._onPlayerPositionUpdated.bind(this));
 
+        this._player.connectWidget(
+            'scroll-event', (self, event) => this.controls._onScrollEvent(event)
+        );
         this.controls.togglePlayButton.connect(
             'clicked', this._onControlsTogglePlayClicked.bind(this)
         );
@@ -66,15 +70,14 @@ class ClapperInterface extends Gtk.Grid
         this.controls.connect(
             'visualization-change-requested', this._onVisualizationChangeRequested.bind(this)
         );
+        this.revealerTop.connect('event-after', (self, event) => this._player.widget.event(event));
 
         this.overlay.add(this._player.widget);
         this.overlay.add_overlay(this.revealerTop);
         this.overlay.add_overlay(this.revealerBottom);
-        this.overlay.show_all();
 
-        this.revealerTop.connect(
+        this.overlay.show();
-            'scroll-event', (self, event) => this.controls._onScrollEvent(event)
+        this._player.widget.show();
-        );
     }
 
     addHeaderBar(headerBar, defaultTitle)

clapper_src/revealers.js

@@ -11,15 +11,55 @@ class ClapperCustomRevealer extends Gtk.Revealer
     _init(opts)
     {
         super._init(opts);
+
+        this.revealerName = '';
     }
 
     revealChild(isReveal)
     {
+        if(isReveal) {
+            this._clearTimeout();
+            if(!this.visible)
+                this.show();
+
+            this._setShowTimeout();
+        }
+        else
+            this._setHideTimeout();
+
         this._timedReveal(isReveal, REVEAL_TIME);
     }
 
+    show()
+    {
+        if(this.visible)
+            return;
+
+        // Decreased size = lower CPU usage
+        this._setTopAlign('START');
+
+        super.show();
+        debug(`showing ${this.revealerName} revealer in drawing area`);
+    }
+
+    hide()
+    {
+        if(!this.visible)
+            return;
+
+        super.hide();
+        debug(`removed ${this.revealerName} revealer from drawing area`);
+    }
+
     showChild(isReveal)
     {
+        this._clearTimeout();
+
+        if(isReveal)
+            this.show();
+        else if(!isReveal)
+            this.hide();
+
         this._timedReveal(isReveal, 0);
     }
 
@@ -28,6 +68,54 @@ class ClapperCustomRevealer extends Gtk.Revealer
         this.set_transition_duration(time);
         this.set_reveal_child(isReveal);
     }
+
+    // Drawing revealers on top of video frames
+    // increases CPU usage, so we hide them
+    _setHideTimeout()
+    {
+        this._clearTimeout();
+        this._setTopAlign('FILL');
+
+        this._revealerTimeout = GLib.timeout_add(GLib.PRIORITY_DEFAULT, REVEAL_TIME + 20, () => {
+            this._revealerTimeout = null;
+            this.hide();
+
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
+    _setShowTimeout()
+    {
+        this._clearTimeout();
+        this._setTopAlign('FILL');
+
+        this._revealerTimeout = GLib.timeout_add(GLib.PRIORITY_DEFAULT, REVEAL_TIME + 20, () => {
+            this._revealerTimeout = null;
+            this._setTopAlign('START');
+
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
+    _clearTimeout()
+    {
+        if(!this._revealerTimeout)
+            return;
+
+        GLib.source_remove(this._revealerTimeout);
+        this._revealerTimeout = null;
+    }
+
+    _setTopAlign(align)
+    {
+        if(
+            this.revealerName !== 'top'
+            || this.valign === Gtk.Align[align]
+        )
+            return;
+
+        this.valign = Gtk.Align[align];
+    }
 });
 
 var RevealerTop = GObject.registerClass(
@@ -38,8 +126,11 @@ class ClapperRevealerTop extends CustomRevealer
         super._init({
             transition_duration: REVEAL_TIME,
             transition_type: Gtk.RevealerTransitionType.CROSSFADE,
+            valign: Gtk.Align.START,
         });
 
+        this.revealerName = 'top';
+
         this.set_events(
             Gdk.EventMask.BUTTON_PRESS_MASK
             | Gdk.EventMask.BUTTON_RELEASE_MASK
@@ -88,6 +179,7 @@ class ClapperRevealerTop extends CustomRevealer
         this.revealerGrid.attach(this.endTime, 1, 0, 1, 1);
 
         this.add(this.revealerGrid);
+        this.revealerGrid.show_all();
     }
 
     setMediaTitle(title)
@@ -123,10 +215,12 @@ class ClapperRevealerBottom extends CustomRevealer
             valign: Gtk.Align.END,
         });
 
+        this.revealerName = 'bottom';
         this.revealerBox = new Gtk.Box();
         this.revealerBox.get_style_context().add_class('osd');
 
         this.add(this.revealerBox);
+        this.revealerBox.show_all();
     }
 
     addWidget(widget)

css/styles.css

@@ -25,6 +25,7 @@ scale marks {
   background: black;
 }
 .reavealertop {
+  min-height: 100px;
   box-shadow: inset 0px 200px 10px -124px rgba(0,0,0,0.4);
   font-size: 30px;
   font-weight: 500;