From 1918b30beab0941ecced78970060c99afdbc047e Mon Sep 17 00:00:00 2001 From: Rafostar <40623528+Rafostar@users.noreply.github.com> Date: Wed, 16 Sep 2020 11:54:01 +0200 Subject: [PATCH] Cover whole video screen with top revealer Previously top revealer was set to fixed size, which caused a noticable video tearing along the revealer edge during its animation. This commit removes fixed revealer size, which in turn casues the revealer to cover whole video screen (default behavior), thus eliminates the tearing. Since overlay now becomes the top widget, all player notify signals were reconnected to it. --- clapper_src/app.js | 13 +++++-------- clapper_src/interface.js | 38 +++++++++++++++++++++++++------------- css/styles.css | 3 +-- 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/clapper_src/app.js b/clapper_src/app.js index 1cf25ae3..20fc95ec 100644 --- a/clapper_src/app.js +++ b/clapper_src/app.js @@ -168,16 +168,13 @@ var App = GObject.registerClass({ this.interface.revealerTop.connect( 'button-press-event', this._onPlayerButtonPressEvent.bind(this) ); - this.player.connectWidget( - 'button-press-event', this._onPlayerButtonPressEvent.bind(this) - ); - this.player.connectWidget( + this.interface.revealerTop.connect( 'enter-notify-event', this._onPlayerEnterNotifyEvent.bind(this) ); - this.player.connectWidget( + this.interface.revealerTop.connect( 'leave-notify-event', this._onPlayerLeaveNotifyEvent.bind(this) ); - this.player.connectWidget( + this.interface.revealerTop.connect( 'motion-notify-event', this._onPlayerMotionNotifyEvent.bind(this) ); @@ -200,16 +197,16 @@ var App = GObject.registerClass({ if(isFullscreen) { this.setUpdateTimeInterval(); - this.interface.showControls(true); this.setHideControlsTimeout(); this.interface.controls.unfullscreenButton.set_sensitive(true); this.interface.controls.unfullscreenButton.show(); + this.interface.showControls(true); } else { this.clearTimeout('updateTime'); - this.interface.showControls(false); this.interface.controls.unfullscreenButton.set_sensitive(false); this.interface.controls.unfullscreenButton.hide(); + this.interface.showControls(false); } this.interface.setControlsOnVideo(isFullscreen); diff --git a/clapper_src/interface.js b/clapper_src/interface.js index fe00abd2..7ee9bb8b 100644 --- a/clapper_src/interface.js +++ b/clapper_src/interface.js @@ -1,4 +1,4 @@ -const { Gdk, GLib, GObject, Gtk, Gst, GstPlayer } = imports.gi; +const { Gdk, GLib, GObject, Gtk, Gst, GstPlayer, Pango } = imports.gi; const { Controls } = imports.clapper_src.controls; const Debug = imports.clapper_src.debug; @@ -36,22 +36,25 @@ class ClapperInterface extends Gtk.Grid this.revealerTop = new Gtk.Revealer({ transition_duration: this.revealTime, transition_type: Gtk.RevealerTransitionType.CROSSFADE, - valign: Gtk.Align.START, }); this.revealerBottom = new Gtk.Revealer({ transition_duration: this.revealTime, transition_type: Gtk.RevealerTransitionType.SLIDE_UP, valign: Gtk.Align.END, }); - this.revealerGridTop = new Gtk.Grid(); + this.revealerGridTop = new Gtk.Grid({ + column_spacing: 8 + }); this.revealerBoxBottom = new Gtk.Box(); this.controls = new Controls(); this.fsTitle = new Gtk.Label({ + ellipsize: Pango.EllipsizeMode.END, expand: true, + margin_top: 14, margin_left: 12, xalign: 0, - yalign: 0.22, + yalign: 0, }); let timeLabelOpts = { @@ -62,6 +65,17 @@ class ClapperInterface extends Gtk.Grid this.fsTime = new Gtk.Label(timeLabelOpts); this.fsEndTime = new Gtk.Label(timeLabelOpts); + this.revealerTop.set_events( + Gdk.EventMask.BUTTON_PRESS_MASK + | Gdk.EventMask.BUTTON_RELEASE_MASK + | Gdk.EventMask.TOUCH_MASK + | Gdk.EventMask.SCROLL_MASK + | Gdk.EventMask.TOUCHPAD_GESTURE_MASK + | Gdk.EventMask.POINTER_MOTION_MASK + | Gdk.EventMask.ENTER_NOTIFY_MASK + | Gdk.EventMask.LEAVE_NOTIFY_MASK + ); + this.revealerGridTop.attach(this.fsTitle, 0, 0, 1, 1); this.revealerGridTop.attach(this.fsTime, 1, 0, 1, 1); this.revealerGridTop.attach(this.fsEndTime, 1, 0, 1, 1); @@ -96,10 +110,6 @@ 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) ); @@ -120,6 +130,12 @@ class ClapperInterface extends Gtk.Grid ); this.overlay.add(this._player.widget); + this.overlay.add_overlay(this.revealerTop); + this.overlay.add_overlay(this.revealerBottom); + + this.revealerTop.connect( + 'scroll-event', (self, event) => this.controls._onScrollEvent(event) + ); } addHeaderBar(headerBar, defaultTitle) @@ -152,15 +168,11 @@ class ClapperInterface extends Gtk.Grid if(isOnVideo) { this.remove(this.controls); this.controls.pack_start(this.controls.unfullscreenButton.box, false, false, 0); - this.overlay.add_overlay(this.revealerBottom); - this.overlay.add_overlay(this.revealerTop); this.revealerBoxBottom.pack_start(this.controls, false, true, 0); } else { this.revealerBoxBottom.remove(this.controls); this.controls.remove(this.controls.unfullscreenButton.box); - this.overlay.remove(this.revealerBottom); - this.overlay.remove(this.revealerTop); this.attach(this.controls, 0, 1, 1, 1); } @@ -350,7 +362,7 @@ class ClapperInterface extends Gtk.Grid } if(this.controls.visualizationsButton.visible === isShow) - return debug('visualizations button is already visible'); + return; let action = (isShow) ? 'show' : 'hide'; this.controls.visualizationsButton[action](); diff --git a/css/styles.css b/css/styles.css index 8d10c645..14e7b133 100644 --- a/css/styles.css +++ b/css/styles.css @@ -25,9 +25,8 @@ scale marks { background: black; } .reavealertop { - min-height: 100px; box-shadow: inset 0px 200px 10px -124px rgba(0,0,0,0.4); - font-size: 32px; + font-size: 30px; font-weight: 500; background: transparent; }