Add overlay for controls when fullscreen

When player is fullscreen playback controls are shown on top of video (at screen bottom). When windowed, controls are shown below the video instead.

clapper_src/app.js

@@ -60,6 +60,21 @@ var App = GObject.registerClass({
         });
     }
 
+    setHideControlsTimeout()
+    {
+        if(this.hideControlsTimeout)
+            GLib.source_remove(this.hideControlsTimeout);
+
+        this.hideControlsTimeout = GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, 3, () => {
+            this.hideControlsTimeout = null;
+
+            if(this.window.isFullscreen)
+                this.interface.controls.hide();
+
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
     _buildUI()
     {
         this.window = new Window(this, APP_NAME);
@@ -129,12 +144,19 @@ var App = GObject.registerClass({
 
     _onWindowFullscreenChanged(window, isFullscreen)
     {
+        // when changing fullscreen pango layout of popup is lost
+        // and we need to re-add marks to the new layout
+        this.interface.controls.setVolumeMarks(false);
+
         this.interface.controls.toggleFullscreenButton.image = (isFullscreen)
             ? this.interface.controls.unfullscreenImage
             : this.interface.controls.fullscreenImage;
 
-        let action = (isFullscreen) ? 'hide' : 'show';
-        this.interface.controls[action]();
+        if(isFullscreen)
+            this.setHideControlsTimeout();
+
+        this.interface.setControlsOnVideo(isFullscreen);
+        this.interface.controls.setVolumeMarks(true);
     }
 
     _onWindowKeyPressEvent(self, event)
@@ -153,6 +175,7 @@ var App = GObject.registerClass({
             case Gdk.KEY_Right:
                 bool = true;
             case Gdk.KEY_Left:
+                // disabled due to missing "seek on drop" support
                 //this._handleScaleIncrement('position', 'Scale', bool);
                 break;
             case Gdk.KEY_Up:
@@ -318,6 +341,15 @@ var App = GObject.registerClass({
         this.playerWindow.set_cursor(this.defaultCursor);
         this.setHideCursorTimeout();
 
+        if(this.window.isFullscreen) {
+            this.setHideControlsTimeout();
+            this.interface.controls.show();
+        }
+        else if(this.hideControlsTimeout) {
+            GLib.source_remove(this.hideControlsTimeout);
+            this.hideControlsTimeout = null;
+        }
+
         if(!this.dragStartReady || this.window.isFullscreen)
             return;
 

clapper_src/controls.js

@@ -13,6 +13,7 @@ var Controls = GObject.registerClass({
         super._init({
             margin: 4,
             spacing: 4,
+            valign: Gtk.Align.END,
         });
 
         this.togglePlayButton = this.addButton(
@@ -95,6 +96,16 @@ var Controls = GObject.registerClass({
         widget.can_default = false;
     }
 
+    setVolumeMarks(isAdded)
+    {
+        if(!isAdded)
+            return this.volumeScale.clear_marks();
+
+        this.volumeScale.add_mark(0, Gtk.PositionType.LEFT, '0%');
+        this.volumeScale.add_mark(1, Gtk.PositionType.LEFT, '100%');
+        this.volumeScale.add_mark(2, Gtk.PositionType.LEFT, '200%');
+    }
+
     _prepareVolumeButton()
     {
         this.volumeAdjustment.set_upper(2.001);
@@ -114,9 +125,8 @@ var Controls = GObject.registerClass({
                 this.setDefaultWidgetBehaviour(child);
                 child.height_request = 200;
                 child.round_digits = 2;
-                child.add_mark(0, Gtk.PositionType.LEFT, '0%');
-                child.add_mark(1, Gtk.PositionType.LEFT, '100%');
-                child.add_mark(2, Gtk.PositionType.LEFT, '200%');
+                this.volumeScale = child;
+                this.setVolumeMarks(true);
             }
         }
     }

clapper_src/interface.js

@@ -18,10 +18,14 @@ class ClapperInterface extends Gtk.Grid
         };
         Object.assign(this, defaults, opts);
 
+        this.controlsInVideo = false;
         this.lastVolumeValue = null;
         this.lastPositionValue = 0;
 
+        this.overlay = new Gtk.Overlay();
         this.controls = new Controls();
+
+        this.attach(this.overlay, 0, 0, 1, 1);
         this.attach(this.controls, 0, 1, 1, 1);
     }
 
@@ -48,7 +52,27 @@ class ClapperInterface extends Gtk.Grid
             'position-seeking-changed', this._onPositionSeekingChanged.bind(this)
         );
 
-        this.attach(this._player.widget, 0, 0, 1, 1);
+        this.overlay.add(this._player.widget);
+    }
+
+    setControlsOnVideo(isOnVideo)
+    {
+        if(isOnVideo && !this.controlsInVideo) {
+            this.remove_row(1);
+            this.controls.margin = 8;
+            this.controls.margin_start = 10;
+            this.controls.margin_end = 10;
+            this.overlay.add_overlay(this.controls);
+        }
+        else if(!isOnVideo && this.controlsInVideo) {
+            this.overlay.remove(this.controls);
+            this.controls.margin = 4;
+            this.attach(this.controls, 0, 1, 1, 1);
+            this.controls.show();
+        }
+
+        this.controlsInVideo = isOnVideo;
+        debug(`placed controls in overlay: ${isOnVideo}`);
     }
 
     _onPlayerStateChanged(player, state)