Performance: add option to disable window shadows

Rendering window shadows in GTK4 doubles GPU usage. This commit adds an option to disable them for performance gain (useful on low-end devices).

clapper_src/app.js

@@ -6,6 +6,7 @@ const Menu = imports.clapper_src.menu;
 const Misc = imports.clapper_src.misc;
 
 let { debug } = Debug;
+let { settings } = Misc;
 
 var App = GObject.registerClass(
 class ClapperApp extends Gtk.Application
@@ -30,6 +31,11 @@ class ClapperApp extends Gtk.Application
             application: this,
             title: Misc.appName,
         });
+        window.isClapperApp = true;
+        window.add_css_class('nobackground');
+
+        if(!settings.get_boolean('render-shadows'))
+            window.add_css_class('gpufriendly');
 
         for(let action in Menu.actions) {
             let simpleAction = new Gio.SimpleAction({

clapper_src/controls.js

@@ -206,8 +206,8 @@ class ClapperControls extends Gtk.Box
         if(checkButton.activeId < 0) {
             /* Disabling video leaves last frame frozen,
              * so we hide it by making it transparent */
-            if(checkButton.type === 'video')
-                clapperWidget.player.widget.set_opacity(0);
+            //if(checkButton.type === 'video')
+            //    clapperWidget.player.widget.set_opacity(0);
 
             return clapperWidget.player[
                 `set_${checkButton.type}_track_enabled`
@@ -219,8 +219,8 @@ class ClapperControls extends Gtk.Box
         clapperWidget.player[setTrack](checkButton.activeId);
         clapperWidget.player[`${setTrack}_enabled`](true);
 
-        if(checkButton.type === 'video' && !clapperWidget.player.widget.opacity)
-            clapperWidget.player.widget.set_opacity(1);
+        //if(checkButton.type === 'video' && !clapperWidget.player.widget.opacity)
+        //    clapperWidget.player.widget.set_opacity(1);
     }
 
     _handleVisualizationChange(checkButton)

clapper_src/dialogs.js

@@ -164,6 +164,10 @@ class ClapperPrefsDialog extends Gtk.Dialog
                     {
                         title: 'GStreamer',
                         widget: Prefs.GStreamerPage,
+                    },
+                    {
+                        title: 'Tweaks',
+                        widget: Prefs.TweaksPage,
                     }
                 ]
             }

clapper_src/playerBase.js

@@ -62,7 +62,6 @@ class ClapperPlayerBase extends GstPlayer.Player
         this.widget = gtkglsink.widget;
         this.widget.vexpand = true;
         this.widget.hexpand = true;
-        this.widget.set_opacity(0);
 
         this.visualization_enabled = false;
 
@@ -192,6 +191,20 @@ class ClapperPlayerBase extends GstPlayer.Player
                         break;
                 }
                 break;
+            case 'render-shadows':
+                let root = this.widget.get_root();
+                if(root && root.isClapperApp) {
+                    let cssClass = 'gpufriendly';
+                    let renderShadows = settings.get_boolean('render-shadows');
+                    let hasShadows = !root.has_css_class(cssClass);
+
+                    if(renderShadows === hasShadows)
+                        break;
+
+                    let action = (renderShadows) ? 'remove' : 'add';
+                    root[action + '_css_class'](cssClass);
+                }
+                break;
             default:
                 break;
         }

clapper_src/prefs.js

@@ -241,3 +241,15 @@ class ClapperGStreamerPage extends PrefsBase.Grid
         this.settingsChangedSignal = null;
     }
 });
+
+var TweaksPage = GObject.registerClass(
+class ClapperTweaksPage extends PrefsBase.Grid
+{
+    _init()
+    {
+        super._init();
+
+        this.addTitle('Performance');
+        this.addCheckButton('Render window shadows', 'render-shadows');
+    }
+});

clapper_src/widget.js

@@ -52,8 +52,14 @@ var Widget = GObject.registerClass({
         this.revealerBottom = new Revealers.RevealerBottom();
         this.controls = new Controls();
 
+        this.controlsBox = new Gtk.Box({
+            orientation: Gtk.Orientation.HORIZONTAL,
+        });
+        this.controlsBox.add_css_class('controlsbox');
+        this.controlsBox.append(this.controls);
+
         this.attach(this.overlay, 0, 0, 1, 1);
-        this.attach(this.controls, 0, 1, 1, 1);
+        this.attach(this.controlsBox, 0, 1, 1, 1);
 
         this.mapSignal = this.connect('map', this._onMap.bind(this));
 
@@ -101,7 +107,7 @@ var Widget = GObject.registerClass({
 
         let root = this.get_root();
         let action = (isFullscreen) ? 'add' : 'remove';
-        root[action + '_css_class']('gpufriendly');
+        root[action + '_css_class']('gpufriendlyfs');
 
         if(!this.floatingMode)
             this._changeControlsPlacement(isFullscreen);
@@ -185,12 +191,12 @@ var Widget = GObject.registerClass({
     _changeControlsPlacement(isOnTop)
     {
         if(isOnTop) {
-            this.remove(this.controls);
+            this.controlsBox.remove(this.controls);
             this.revealerBottom.append(this.controls);
         }
         else {
             this.revealerBottom.remove(this.controls);
-            this.attach(this.controls, 0, 1, 1, 1);
+            this.controlsBox.append(this.controls);
         }
     }
 

css/styles.css

@@ -97,8 +97,8 @@ scale marks {
 
 /* Floating Mode */
 .floatingwindow {
-  background: none;
   border-radius: 12px;
+  box-shadow: -8px -8px transparent, 8px 8px transparent;
 }
 .osd.floatingcontrols .playercontrols {
   -gtk-icon-size: 16px;
@@ -144,8 +144,16 @@ scale marks {
   margin: 12px;
 }
 
-/* Other */
-.gpufriendly {
-  box-shadow: none;
+/* Tweaks */
+.nobackground {
   background: none;
 }
+.controlsbox {
+  background: @theme_bg_color;
+}
+.gpufriendly {
+  box-shadow: -8px -8px transparent, 8px 8px transparent;
+}
+.gpufriendlyfs {
+  box-shadow: none;
+}

data/com.github.rafostar.Clapper.gschema.xml

@@ -29,6 +29,12 @@
       <summary>Unit to use with seeking value</summary>
     </key>
 
+    <!-- Tweaks -->
+    <key name="render-shadows" type="b">
+      <default>true</default>
+      <summary>Enable rendering window shadows (only if theme has them)</summary>
+    </key>
+
     <!-- GStreamer -->
     <key name="plugin-ranking" type="s">
       <default>'[{"apply":false,"name":"vah264dec","rank":300}]'</default>