Scale fullscreen differently depending on monitor res

css/styles.css

@@ -333,3 +333,52 @@ scale trough slider {
 .blackbackground {
   background: black;
 }
+
+/** SCALING LOW-RES **/
+.fullscreen.tvmode.lowres .clappercontrols button image {
+  -gtk-icon-size: 22px;
+}
+.fullscreen.tvmode.lowres .clappercontrolsbutton {
+  min-width: 28px;
+  min-height: 28px;
+}
+.fullscreen.tvmode.lowres .clappercontrolsbutton.text-button label {
+  font-size: 21px;
+}
+.fullscreen.tvmode.lowres .positionscale trough highlight {
+  min-height: 18px;
+}
+.fullscreen.tvmode.lowres .positionscale.fine-tune trough highlight {
+  min-height: 18px;
+}
+.fullscreen.tvmode.lowres popover box {
+  font-size: 19px;
+}
+.fullscreen.tvmode.lowres radio {
+  min-width: 15px;
+  min-height: 15px;
+}
+.fullscreen.tvmode.lowres .clapperplaylist row button {
+  min-width: 32px;
+  min-height: 32px;
+}
+.fullscreen.tvmode.lowres .tvtitle {
+  font-size: 26px;
+}
+.fullscreen.tvmode.lowres .tvtime {
+  font-size: 34px;
+}
+.fullscreen.tvmode.lowres .tvendtime {
+  font-size: 21px;
+}
+.fullscreen.tvmode.lowres .elapsedpopover {
+  min-width: 410px;
+}
+.fullscreen.tvmode.lowres .chapterlabel {
+  font-size: 21px;
+}
+
+/** SCALING HI-RES **/
+.fullscreen.tvmode.hires .clappercontrols button image {
+  -gtk-icon-size: 24px; /* Sharpest on 2160p with scaling 2x */
+}

src/widget.js

@@ -10,6 +10,8 @@ const Revealers = imports.src.revealers;
 const { debug } = Debug;
 const { settings } = Misc;
 
+let lastTvScaling = null;
+
 var Widget = GObject.registerClass({
     GTypeName: 'ClapperWidget',
 },
@@ -28,9 +30,9 @@ class ClapperWidget extends Gtk.Grid
         this.layoutWidth = 0;
 
         this.isFullscreenMode = false;
-        this.isSeekable = false;
         this.isMobileMonitor = false;
 
+        this.isSeekable = false;
         this.isDragAllowed = false;
         this.isSwipePerformed = false;
         this.isReleaseKeyEnabled = false;
@@ -614,6 +616,27 @@ class ClapperWidget extends Gtk.Grid
             const action = (this.isMobileMonitor) ? 'remove' : 'add';
             this.root[action + '_css_class']('tvmode');
         }
+
+        /* Mobile does not have TV mode, so we do not care about removing scaling */
+        if(!this.isMobileMonitor) {
+            const pixWidth = monitorWidth * monitor.scale_factor;
+            const tvScaling = (pixWidth <= 1280)
+                ? 'lowres'
+                : (pixWidth > 1920)
+                ? 'hires'
+                : null;
+
+            if(lastTvScaling !== tvScaling) {
+                if(lastTvScaling)
+                    this.root.remove_css_class(lastTvScaling);
+                if(tvScaling)
+                    this.root.add_css_class(tvScaling);
+
+                lastTvScaling = tvScaling;
+            }
+            debug(`using scaling mode: ${tvScaling || 'normal'}`);
+        }
+
         /* Update top revealer display mode */
         this.revealerTop.setFullscreenMode(this.isFullscreenMode, this.isMobileMonitor);
     }