Move revealers logic to separate file

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)

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({
+        this.revealerTop = new Revealers.RevealerTop();
-            transition_duration: this.revealTime,
+        this.revealerBottom = new Revealers.RevealerBottom();
-            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.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']) {
+        for(let pos of ['Top', 'Bottom'])
-            this[`revealer${pos}`].set_transition_duration(this.revealTime);
+            this[`revealer${pos}`].revealChild(isReveal);
-            this[`revealer${pos}`].set_reveal_child(isReveal);
-        }
     }
 
     showControls(isShow)
     {
-        for(let pos of ['Bottom', 'Top']) {
+        for(let pos of ['Top', 'Bottom'])
-            this[`revealer${pos}`].set_transition_duration(0);
+            this[`revealer${pos}`].showChild(isShow);
-            this[`revealer${pos}`].set_reveal_child(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.revealerTop.setMediaTitle(title);
-        this.fsTitle.label = 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);
+        let nextUpdate = this.revealerTop.setTimes(currTime, endTime);
-
-        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}`);
 
         return nextUpdate;
     }

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);
+    }
+});