diff --git a/clapper_src/app.js b/clapper_src/app.js index 18bd50cc..e398e701 100644 --- a/clapper_src/app.js +++ b/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) ); diff --git a/clapper_src/interface.js b/clapper_src/interface.js index e9d133b0..d53e593e 100644 --- a/clapper_src/interface.js +++ b/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( - 'scroll-event', (self, event) => this.controls._onScrollEvent(event) - ); + this.overlay.show(); + this._player.widget.show(); } addHeaderBar(headerBar, defaultTitle) diff --git a/clapper_src/revealers.js b/clapper_src/revealers.js index 60d713b0..7b6ad082 100644 --- a/clapper_src/revealers.js +++ b/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) diff --git a/css/styles.css b/css/styles.css index 14e7b133..00cbeb4c 100644 --- a/css/styles.css +++ b/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;