From d8d342a95668345ceeb70338d217abbcf4a879a7 Mon Sep 17 00:00:00 2001
From: Rafostar <40623528+Rafostar@users.noreply.github.com>
Date: Sun, 6 Sep 2020 10:18:53 +0200
Subject: [PATCH] Make everything on fullscreen bigger (TV mode)

---
 clapper_src/app.js      | 11 +++++++++
 clapper_src/controls.js | 34 +++++++++++++++++++++++++++-
 css/styles.css          | 49 +++++++++++++++++++++++++++++++++++++++++
 install.sh              |  1 +
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 css/styles.css

diff --git a/clapper_src/app.js b/clapper_src/app.js
index cdad3ec0..22a42646 100644
--- a/clapper_src/app.js
+++ b/clapper_src/app.js
@@ -30,6 +30,11 @@ var App = GObject.registerClass({
         };
         Object.assign(this, defaults, opts);
 
+        this.cssProvider = new Gtk.CssProvider();
+        this.cssProvider.load_from_path(
+            `${pkg.datadir}/${pkg.name}/css/styles.css`
+        );
+
         this.window = null;
         this.interface = null;
         this.player = null;
@@ -104,6 +109,12 @@ var App = GObject.registerClass({
 
     _onWindowRealize()
     {
+        Gtk.StyleContext.add_provider_for_screen(
+            Gdk.Screen.get_default(),
+            this.cssProvider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+        );
+
         this.player = new Player();
         this.player.widget.add_events(
             Gdk.EventMask.SCROLL_MASK
diff --git a/clapper_src/controls.js b/clapper_src/controls.js
index 390fb457..69cce15f 100644
--- a/clapper_src/controls.js
+++ b/clapper_src/controls.js
@@ -19,8 +19,9 @@ var Controls = GObject.registerClass({
             valign: Gtk.Align.END,
         });
 
-        this.fullscreenMode = false;
+        this._fullscreenMode = false;
         this.durationFormated = '00:00:00';
+        this.buttonImages = [];
 
         this.togglePlayButton = this.addButton(
             'media-playback-pause-symbolic',
@@ -83,6 +84,10 @@ var Controls = GObject.registerClass({
             style.add_class('flat');
 
         this.volumeButtonImage = this.volumeButton.get_child();
+        this.volumeButtonImage.defaultSize = Gtk.IconSize.SMALL_TOOLBAR;
+        this.volumeButtonImage.fullscreenSize = Gtk.IconSize.LARGE_TOOLBAR;
+        this.buttonImages.push(this.volumeButtonImage);
+
         this.volumeAdjustment = this.volumeButton.get_adjustment();
         this._prepareVolumeButton();
         this.pack_start(this.volumeButton, false, false, 0);
@@ -101,11 +106,36 @@ var Controls = GObject.registerClass({
         this.forall(this.setDefaultWidgetBehaviour);
     }
 
+    set fullscreenMode(isFullscreen)
+    {
+        if(isFullscreen === this._fullscreenMode)
+            return;
+
+        for(let image of this.buttonImages) {
+            image.icon_size = (isFullscreen)
+                ? image.fullscreenSize
+                : image.defaultSize;
+        }
+
+        this.volumeButton.size = this.volumeButtonImage.icon_size;
+        this._fullscreenMode = isFullscreen;
+    }
+
+    get fullscreenMode()
+    {
+        return this._fullscreenMode;
+    }
+
     addButton(iconName, size, noPack)
     {
         size = size || Gtk.IconSize.SMALL_TOOLBAR;
 
         let button = Gtk.Button.new_from_icon_name(iconName, size);
+        button.image.defaultSize = size;
+        button.image.fullscreenSize = (size === Gtk.IconSize.SMALL_TOOLBAR)
+            ? Gtk.IconSize.LARGE_TOOLBAR
+            : Gtk.IconSize.DND;
+
         this.setDefaultWidgetBehaviour(button);
         button.get_style_context().add_class('flat');
 
@@ -114,6 +144,7 @@ var Controls = GObject.registerClass({
             button.show();
         }
 
+        this.buttonImages.push(button.image);
         return button;
     }
 
@@ -155,6 +186,7 @@ var Controls = GObject.registerClass({
             radioButton.connect(
                 'toggled', this._onTrackRadioButtonToggled.bind(this, radioButton)
             );
+            this.setDefaultWidgetBehaviour(radioButton);
             box.add(radioButton);
         }
         box.show_all();
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 00000000..a62ceae4
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,49 @@
+scale value {
+  font-weight: 500;
+  color: currentColor;
+}
+
+scale marks {
+  color: currentColor;
+}
+
+scale trough highlight {
+  min-width: 4px;
+  min-height: 4px;
+}
+
+.osd {
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.osd scale value {
+  font-size: 24px;
+}
+
+.osd scale contents {
+  margin-left: 8px;
+  margin-right: 4px;
+}
+
+.osd button {
+  margin: 2px;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.osd scale trough highlight {
+  min-width: 6px;
+  min-height: 6px;
+}
+
+.osd scale slider {
+  margin: -14px;
+}
+
+.osd radio {
+  margin: 6px;
+  border: 2px solid;
+  min-width: 18px;
+  min-height: 18px;
+}
diff --git a/install.sh b/install.sh
index 678cae46..44dc0d8e 100755
--- a/install.sh
+++ b/install.sh
@@ -27,6 +27,7 @@ echo "Copying files..."
 cp -f "./COPYING" "$LICENSES_DIR/"
 cp -f "./README.md" "$DOC_DIR/"
 cp -rf "./clapper_src" "$MAIN_DIR/"
+cp -rf "./css" "$MAIN_DIR/"
 cp -f "./main.js" "$MAIN_DIR/"
 cp -f "./gjs-1.0/clapper.js" "$GJS_DIR/"
 cp -f "./bin/clapper" "$BIN_DIR/"