Make everything on fullscreen bigger (TV mode)

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

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();

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;
+}

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/"