From 4e235a0e9b122280af7456004db6b3d2771f1eeb Mon Sep 17 00:00:00 2001
From: Rafostar <40623528+Rafostar@users.noreply.github.com>
Date: Fri, 4 Sep 2020 10:47:05 +0200
Subject: [PATCH] Add controls background on fullscreen

---
 clapper_src/controls.js  |  3 ++-
 clapper_src/interface.js | 16 ++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/clapper_src/controls.js b/clapper_src/controls.js
index 54e59377..5c4be944 100644
--- a/clapper_src/controls.js
+++ b/clapper_src/controls.js
@@ -31,7 +31,8 @@ var Controls = GObject.registerClass({
         this.positionScale = new Gtk.Scale({
             orientation: Gtk.Orientation.HORIZONTAL,
             value_pos: Gtk.PositionType.LEFT,
-            draw_value: false
+            draw_value: false,
+            hexpand: true,
         });
         this.positionScale.connect(
             'button-press-event', this._onPositionScaleButtonPressEvent.bind(this)
diff --git a/clapper_src/interface.js b/clapper_src/interface.js
index 9b10a357..48871a37 100644
--- a/clapper_src/interface.js
+++ b/clapper_src/interface.js
@@ -25,12 +25,15 @@ class ClapperInterface extends Gtk.Grid
 
         this.overlay = new Gtk.Overlay();
         this.controls = new Controls();
-        this.revealer= new Gtk.Revealer({
+        this.revealer = new Gtk.Revealer({
             transition_duration: this.revealTime,
             transition_type: Gtk.RevealerTransitionType.SLIDE_UP,
             valign: Gtk.Align.END,
         });
+        this.revealerBox = new Gtk.Box();
+        this.revealerBox.get_style_context().add_class('background');
 
+        this.revealer.add(this.revealerBox);
         this.attach(this.overlay, 0, 0, 1, 1);
         this.attach(this.controls, 0, 1, 1, 1);
     }
@@ -78,18 +81,15 @@ class ClapperInterface extends Gtk.Grid
     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.remove(this.controls);
             this.overlay.add_overlay(this.revealer);
-            this.revealer.add(this.controls);
+            this.revealerBox.pack_start(this.controls, false, true, 0);
             this.revealer.show();
+            this.revealerBox.show();
         }
         else if(!isOnVideo && this.controlsInVideo) {
-            this.revealer.remove(this.controls);
+            this.revealerBox.remove(this.controls);
             this.overlay.remove(this.revealer);
-            this.controls.margin = 4;
             this.attach(this.controls, 0, 1, 1, 1);
             this.controls.show();
         }