From 1c2a8a476e91a2b39a3ca4616994a32e180864da Mon Sep 17 00:00:00 2001 From: Rafostar <40623528+Rafostar@users.noreply.github.com> Date: Wed, 16 Sep 2020 13:26:30 +0200 Subject: [PATCH] Move revealers logic to separate file --- clapper_src/app.js | 2 - clapper_src/interface.js | 98 ++++----------------------- clapper_src/revealers.js | 141 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 153 insertions(+), 88 deletions(-) create mode 100644 clapper_src/revealers.js diff --git a/clapper_src/app.js b/clapper_src/app.js index 20fc95ec..18bd50cc 100644 --- a/clapper_src/app.js +++ b/clapper_src/app.js @@ -185,8 +185,6 @@ var App = GObject.registerClass({ this._playerDrawSignal = this.player.widget.connect( 'draw', this._onPlayerDraw.bind(this) ); - - this.player.widget.show(); } _onWindowFullscreenChanged(window, isFullscreen) diff --git a/clapper_src/interface.js b/clapper_src/interface.js index 7ee9bb8b..e9d133b0 100644 --- a/clapper_src/interface.js +++ b/clapper_src/interface.js @@ -1,6 +1,7 @@ const { Gdk, GLib, GObject, Gtk, Gst, GstPlayer, Pango } = imports.gi; const { Controls } = imports.clapper_src.controls; const Debug = imports.clapper_src.debug; +const Revealers = imports.clapper_src.revealers; let { debug } = Debug; @@ -22,82 +23,19 @@ class ClapperInterface extends Gtk.Grid this.lastVolumeValue = null; this.lastPositionValue = 0; this.needsTracksUpdate = true; - this.revealTime = 800; this.headerBar = null; this.defaultTitle = null; - let initTime = GLib.DateTime.new_now_local().format('%X'); - this.timeFormat = (initTime.length > 8) - ? '%I:%M %p' - : '%H:%M'; - this.videoBox = new Gtk.Box(); this.overlay = new Gtk.Overlay(); - this.revealerTop = new Gtk.Revealer({ - transition_duration: this.revealTime, - transition_type: Gtk.RevealerTransitionType.CROSSFADE, - }); - this.revealerBottom = new Gtk.Revealer({ - transition_duration: this.revealTime, - transition_type: Gtk.RevealerTransitionType.SLIDE_UP, - valign: Gtk.Align.END, - }); - this.revealerGridTop = new Gtk.Grid({ - column_spacing: 8 - }); - this.revealerBoxBottom = new Gtk.Box(); + this.revealerTop = new Revealers.RevealerTop(); + this.revealerBottom = new Revealers.RevealerBottom(); 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, - }); - - let timeLabelOpts = { - margin_right: 10, - xalign: 1, - yalign: 0, - }; - 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); - this.videoBox.get_style_context().add_class('videobox'); - let revealerGridTopContext = this.revealerGridTop.get_style_context(); - revealerGridTopContext.add_class('osd'); - revealerGridTopContext.add_class('reavealertop'); - this.revealerBoxBottom.get_style_context().add_class('osd'); - - this.fsTime.get_style_context().add_class('osdtime'); - this.fsEndTime.get_style_context().add_class('osdendtime'); - this.videoBox.pack_start(this.overlay, true, true, 0); - this.revealerBottom.add(this.revealerBoxBottom); - this.revealerTop.add(this.revealerGridTop); this.attach(this.videoBox, 0, 0, 1, 1); this.attach(this.controls, 0, 1, 1, 1); - - this.revealerTop.add_events(Gdk.EventMask.BUTTON_PRESS_MASK); - this.revealerTop.show_all(); - this.revealerBottom.show_all(); } addPlayer(player) @@ -132,6 +70,7 @@ class ClapperInterface extends Gtk.Grid 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) @@ -146,18 +85,14 @@ class ClapperInterface extends Gtk.Grid revealControls(isReveal) { - for(let pos of ['Bottom', 'Top']) { - this[`revealer${pos}`].set_transition_duration(this.revealTime); - this[`revealer${pos}`].set_reveal_child(isReveal); - } + for(let pos of ['Top', 'Bottom']) + this[`revealer${pos}`].revealChild(isReveal); } showControls(isShow) { - for(let pos of ['Bottom', 'Top']) { - this[`revealer${pos}`].set_transition_duration(0); - this[`revealer${pos}`].set_reveal_child(isShow); - } + for(let pos of ['Top', 'Bottom']) + this[`revealer${pos}`].showChild(isShow); } setControlsOnVideo(isOnVideo) @@ -168,10 +103,10 @@ class ClapperInterface extends Gtk.Grid if(isOnVideo) { this.remove(this.controls); this.controls.pack_start(this.controls.unfullscreenButton.box, false, false, 0); - this.revealerBoxBottom.pack_start(this.controls, false, true, 0); + this.revealerBottom.addWidget(this.controls); } else { - this.revealerBoxBottom.remove(this.controls); + this.revealerBottom.removeWidget(this.controls); this.controls.remove(this.controls.unfullscreenButton.box); this.attach(this.controls, 0, 1, 1, 1); } @@ -307,8 +242,7 @@ class ClapperInterface extends Gtk.Grid this.headerBar.set_title(title); this.headerBar.set_subtitle(subtitle); - - this.fsTitle.label = title; + this.revealerTop.setMediaTitle(title); } updateTime() @@ -317,15 +251,7 @@ class ClapperInterface extends Gtk.Grid let endTime = currTime.add_seconds( this.controls.positionAdjustment.get_upper() - this.lastPositionValue ); - let now = currTime.format(this.timeFormat); - - this.fsTime.set_label(now); - this.fsEndTime.set_label(`Ends at: ${endTime.format(this.timeFormat)}`); - - // Make sure that next timeout is always run after clock changes, - // by delaying it for additional few milliseconds - let nextUpdate = 60002 - parseInt(currTime.get_seconds() * 1000); - debug(`updated current time: ${now}`); + let nextUpdate = this.revealerTop.setTimes(currTime, endTime); return nextUpdate; } diff --git a/clapper_src/revealers.js b/clapper_src/revealers.js new file mode 100644 index 00000000..60d713b0 --- /dev/null +++ b/clapper_src/revealers.js @@ -0,0 +1,141 @@ +const { Gdk, GLib, GObject, Gtk, Pango } = imports.gi; +const Debug = imports.clapper_src.debug; + +const REVEAL_TIME = 800; + +let { debug } = Debug; + +var CustomRevealer = GObject.registerClass( +class ClapperCustomRevealer extends Gtk.Revealer +{ + _init(opts) + { + super._init(opts); + } + + revealChild(isReveal) + { + this._timedReveal(isReveal, REVEAL_TIME); + } + + showChild(isReveal) + { + this._timedReveal(isReveal, 0); + } + + _timedReveal(isReveal, time) + { + this.set_transition_duration(time); + this.set_reveal_child(isReveal); + } +}); + +var RevealerTop = GObject.registerClass( +class ClapperRevealerTop extends CustomRevealer +{ + _init() + { + super._init({ + transition_duration: REVEAL_TIME, + transition_type: Gtk.RevealerTransitionType.CROSSFADE, + }); + + this.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 + ); + + let initTime = GLib.DateTime.new_now_local().format('%X'); + this.timeFormat = (initTime.length > 8) + ? '%I:%M %p' + : '%H:%M'; + + this.revealerGrid = new Gtk.Grid({ + column_spacing: 8 + }); + let gridContext = this.revealerGrid.get_style_context(); + gridContext.add_class('osd'); + gridContext.add_class('reavealertop'); + + this.mediaTitle = new Gtk.Label({ + ellipsize: Pango.EllipsizeMode.END, + expand: true, + margin_top: 14, + margin_left: 12, + xalign: 0, + yalign: 0, + }); + + let timeLabelOpts = { + margin_right: 10, + xalign: 1, + yalign: 0, + }; + this.currentTime = new Gtk.Label(timeLabelOpts); + this.currentTime.get_style_context().add_class('osdtime'); + + this.endTime = new Gtk.Label(timeLabelOpts); + this.endTime.get_style_context().add_class('osdendtime'); + + this.revealerGrid.attach(this.mediaTitle, 0, 0, 1, 1); + this.revealerGrid.attach(this.currentTime, 1, 0, 1, 1); + this.revealerGrid.attach(this.endTime, 1, 0, 1, 1); + + this.add(this.revealerGrid); + } + + setMediaTitle(title) + { + this.mediaTitle.label = title; + } + + setTimes(currTime, endTime) + { + let now = currTime.format(this.timeFormat); + let end = `Ends at: ${endTime.format(this.timeFormat)}`; + + this.currentTime.set_label(now); + this.endTime.set_label(end); + + // Make sure that next timeout is always run after clock changes, + // by delaying it for additional few milliseconds + let nextUpdate = 60002 - parseInt(currTime.get_seconds() * 1000); + debug(`updated current time: ${now}`); + + return nextUpdate; + } +}); + +var RevealerBottom = GObject.registerClass( +class ClapperRevealerBottom extends CustomRevealer +{ + _init() + { + super._init({ + transition_duration: REVEAL_TIME, + transition_type: Gtk.RevealerTransitionType.SLIDE_UP, + valign: Gtk.Align.END, + }); + + this.revealerBox = new Gtk.Box(); + this.revealerBox.get_style_context().add_class('osd'); + + this.add(this.revealerBox); + } + + addWidget(widget) + { + this.revealerBox.pack_start(widget, false, true, 0); + } + + removeWidget(widget) + { + this.revealerBox.remove(widget); + } +});