From 8a5702f29656281ff006c649ef4ea188ab57ea08 Mon Sep 17 00:00:00 2001
From: Rafostar <40623528+Rafostar@users.noreply.github.com>
Date: Sun, 7 Feb 2021 21:20:14 +0100
Subject: [PATCH 1/2] Detect mobile monitor based on application-pixels

---
 src/controls.js | 2 ++
 src/widget.js   | 9 ++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/controls.js b/src/controls.js
index 308d5b12..f861da3b 100644
--- a/src/controls.js
+++ b/src/controls.js
@@ -28,6 +28,8 @@ class ClapperControls extends Gtk.Box
         this.currentPosition = 0;
         this.currentDuration = 0;
         this.isPositionDragging = false;
+
+        this.isMobileMonitor = false;
         this.isMobile = false;
 
         this.showHours = false;
diff --git a/src/widget.js b/src/widget.js
index 2298b9ec..fc622d57 100644
--- a/src/widget.js
+++ b/src/widget.js
@@ -571,13 +571,20 @@ class ClapperWidget extends Gtk.Grid
         const geometry = monitor.geometry;
         const size = this.windowSize;
 
-        debug(`detected monitor resolution: ${geometry.width}x${geometry.height}`);
+        debug(`monitor application-pixels: ${geometry.width}x${geometry.height}`);
 
         if(geometry.width >= size[0] && geometry.height >= size[1]) {
             root.set_default_size(size[0], size[1]);
             debug(`restored window size: ${size[0]}x${size[1]}`);
         }
 
+        const monitorWidth = Math.max(geometry.width, geometry.height);
+
+        if(monitorWidth < 1280) {
+            this.controls.isMobileMonitor = true;
+            debug('mobile monitor detected');
+        }
+
         surface.connect('notify::state', this._onStateNotify.bind(this));
     }
 });

From 65f1e8e60e2a581d323632031cd1c17c47817d95 Mon Sep 17 00:00:00 2001
From: Rafostar <40623528+Rafostar@users.noreply.github.com>
Date: Sun, 7 Feb 2021 21:47:25 +0100
Subject: [PATCH 2/2] Observe surface width instead of video widget

---
 src/controls.js |  3 +--
 src/widget.js   | 11 +++++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/controls.js b/src/controls.js
index f861da3b..57b5b1b7 100644
--- a/src/controls.js
+++ b/src/controls.js
@@ -509,10 +509,9 @@ class ClapperControls extends Gtk.Box
             : Misc.getCubicValue(settings.get_double('volume-last'));
 
         this.volumeScale.set_value(initialVolume);
-        player.widget.connect('resize', this._onPlayerResize.bind(this));
     }
 
-    _onPlayerResize(widget, width, height)
+    _onPlayerResize(width, height)
     {
         const isMobile = (width < 560);
         if(this.isMobile === isMobile)
diff --git a/src/widget.js b/src/widget.js
index fc622d57..90f84c85 100644
--- a/src/widget.js
+++ b/src/widget.js
@@ -21,6 +21,7 @@ class ClapperWidget extends Gtk.Grid
 
         this.windowSize = JSON.parse(settings.get_string('window-size'));
         this.floatSize = JSON.parse(settings.get_string('float-size'));
+        this.layoutWidth = 0;
 
         this.fullscreenMode = false;
         this.floatingMode = false;
@@ -549,6 +550,15 @@ class ClapperWidget extends Gtk.Grid
         debug(`interface in fullscreen mode: ${isFullscreen}`);
     }
 
+    _onLayoutUpdate(surface, width, height)
+    {
+        if(width === this.layoutWidth)
+            return;
+
+        this.layoutWidth = width;
+        this.controls._onPlayerResize(width, height);
+    }
+
     _onLeave(controller)
     {
         if(
@@ -586,5 +596,6 @@ class ClapperWidget extends Gtk.Grid
         }
 
         surface.connect('notify::state', this._onStateNotify.bind(this));
+        surface.connect('layout', this._onLayoutUpdate.bind(this));
     }
 });