Add toggle fullscreen button

clapper_src/app.js

@@ -1,4 +1,4 @@
-const { GLib, GObject, Gtk } = imports.gi;
+const { Gdk, GLib, GObject, Gtk } = imports.gi;
 const { Player } = imports.clapper_src.player;
 const { Interface } = imports.clapper_src.interface;
 
@@ -18,6 +18,7 @@ var App = GObject.registerClass({
 
         super._init();
 
+        this.isFullscreen = false;
         this.connect('startup', () => this._buildUI());
         this.connect('activate', () => this._openDialog());
     }
@@ -28,6 +29,12 @@ var App = GObject.registerClass({
         super.run(arr);
     }
 
+    toggleFullscreen()
+    {
+        let isUn = (this.isFullscreen) ? 'un' : '';
+        this.appWindow[`${isUn}fullscreen`]();
+    }
+
     _buildUI()
     {
         this.appWindow = new Gtk.ApplicationWindow({
@@ -39,13 +46,24 @@ var App = GObject.registerClass({
             width_request: 960,
             height_request: 642
         });
+        this.appWindow.connect(
+            'window-state-event', this._onWindowStateEvent.bind(this)
+        );
 
         this.interface = new Interface();
+        this.interface.controls.toggleFullscreenButton.connect(
+            'clicked', this.toggleFullscreen.bind(this)
+        );
 
         this.appWindow.add(this.interface);
         this.appWindow.connect('realize', this._onRealize.bind(this));
     }
 
+    _openDialog()
+    {
+        this.appWindow.show_all();
+    }
+
     _onRealize()
     {
         this.player = new Player();
@@ -55,8 +73,17 @@ var App = GObject.registerClass({
         this.emit('player-ready', true);
     }
 
-    _openDialog()
+    _onWindowStateEvent(widget, event)
     {
-        this.appWindow.show_all();
+        let window = event.get_window();
+        let state = window.get_state();
+
+        this.isFullscreen = Boolean(state & Gdk.WindowState.FULLSCREEN);
+        this.interface.controls.toggleFullscreenButton.image = (this.isFullscreen)
+            ? this.interface.controls.unfullscreenImage
+            : this.interface.controls.fullscreenImage;
+
+        let action = (this.isFullscreen) ? 'hide' : 'show';
+        this.interface.controls[action]();
     }
 });

clapper_src/controls.js

@@ -32,9 +32,21 @@ class ClapperControls extends Gtk.HBox
         });
         this._prepareVolumeButton();
 
+        this.toggleFullscreenButton = Gtk.Button.new_from_icon_name(
+            'view-fullscreen-symbolic',
+            Gtk.IconSize.SMALL_TOOLBAR
+        );
+        this.unfullscreenButton = Gtk.Button.new_from_icon_name(
+            'view-restore-symbolic',
+            Gtk.IconSize.SMALL_TOOLBAR
+        );
+        this.fullscreenImage = this.toggleFullscreenButton.image;
+        this.unfullscreenImage = this.unfullscreenButton.image;
+
         this.pack_start(this.togglePlayButton, false, false, 4);
         this.pack_start(this.positionScale, true, true, 0);
-        this.pack_start(this.volumeButton, false, false, 4);
+        this.pack_start(this.volumeButton, false, false, 0);
+        this.pack_start(this.toggleFullscreenButton, false, false, 4);
     }
 
     _prepareVolumeButton()

main.js

@@ -1,3 +1,4 @@
+imports.gi.versions.Gdk = '3.0';
 imports.gi.versions.Gtk = '3.0';
 
 const { Gst } = imports.gi;