Add "Floating Window Mode"

A simple borderless window floating on desktop. Window can be resized and moved by dragging. It also has some minimalistic controls showing on top of the video when cursor is hovering over it.\n\n This was a feature originally requested by @zahid1905.

clapper_src/controls.js

@@ -56,6 +56,12 @@ class ClapperControls extends Gtk.Box
         this.unfullscreenButton.connect('clicked', this._onUnfullscreenClicked.bind(this));
         this.unfullscreenButton.set_visible(false);
 
+        this.unfloatButton = this.addButton(
+            'preferences-desktop-remote-desktop-symbolic',
+        );
+        this.unfloatButton.connect('clicked', this._onUnfloatClicked.bind(this));
+        this.unfloatButton.set_visible(false);
+
         let keyController = new Gtk.EventControllerKey();
         keyController.connect('key-pressed', this._onControlsKeyPressed.bind(this));
         keyController.connect('key-released', this._onControlsKeyReleased.bind(this));
@@ -74,6 +80,12 @@ class ClapperControls extends Gtk.Box
         this.set_can_focus(isFullscreen);
     }
 
+    setFloatingMode(isFloating)
+    {
+        for(let button of this.buttonsArr)
+            button.setFloatingMode(isFloating);
+    }
+
     setLiveMode(isLive, isSeekable)
     {
         if(isLive)
@@ -350,6 +362,12 @@ class ClapperControls extends Gtk.Box
         root.unfullscreen();
     }
 
+    _onUnfloatClicked(button)
+    {
+        let clapperWidget = this.get_ancestor(Gtk.Grid);
+        clapperWidget.setFloatingMode(false);
+    }
+
     _onCheckButtonToggled(checkButton)
     {
         if(!checkButton.get_active())