feat: Add simple mockup and implementation of the GJS-based UI for media playback

Author: pojntfx

mockups/playback/.gitignore

@@ -0,0 +1,2 @@
+.sass-cache
+out

mockups/playback/Makefile

@@ -0,0 +1,14 @@
+all: build
+
+build:
+	mkdir -p out
+	cp video.webp out
+	scss main.scss out/main.css
+	blueprint-compiler compile --output out/window.ui window.blp
+	esbuild --bundle --outfile=out/main.js '--external:gi://*' --platform=neutral main.js
+
+run: build
+	gjs -m out/main.js
+
+clean:
+	rm -rf out

mockups/playback/main.js

@@ -0,0 +1,82 @@
+import Adw from "gi://Adw?version=1";
+import GObject from "gi://GObject";
+import GLib from "gi://GLib";
+import Gio from "gi://Gio";
+import Gtk from "gi://Gtk?version=4.0";
+
+const application = new Adw.Application({
+  application_id: "com.pojtinger.felicitas.multiplex.mockups.playback",
+});
+
+const dirname = GLib.path_get_dirname(
+  GLib.Uri.parse(import.meta.url, GLib.UriFlags.NONE).get_path()
+);
+
+const Window = GObject.registerClass(
+  {
+    GTypeName: "MultiplexWindow",
+    Template: GLib.filename_to_uri(
+      GLib.build_filenamev([dirname, "window.ui"]),
+      null
+    ),
+    InternalChildren: ["video_player", "video_metadata", "video_controls"],
+  },
+  class MultiplexWindow extends Adw.Window {
+    constructor(...args) {
+      super(...args);
+
+      let hideTimeout;
+      const resetTimeout = () => {
+        if (hideTimeout) {
+          GLib.source_remove(hideTimeout);
+        }
+
+        hideTimeout = GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, 3, () => {
+          this._video_metadata.reveal_child = false;
+          this._video_controls.reveal_child = false;
+
+          hideTimeout = undefined;
+
+          return GLib.SOURCE_REMOVE;
+        });
+      };
+      resetTimeout();
+
+      const controller = new Gtk.EventControllerMotion();
+      controller.connect("motion", () => {
+        this._video_metadata.reveal_child = true;
+        this._video_controls.reveal_child = true;
+
+        resetTimeout();
+      });
+      this.add_controller(controller);
+    }
+
+    get videoPlayer() {
+      return this._video_player;
+    }
+  }
+);
+
+application.connect("activate", () => {
+  const window = new Window({
+    application,
+  });
+
+  window.videoPlayer.file = Gio.File.new_for_uri(
+    GLib.filename_to_uri(GLib.build_filenamev([dirname, "video.webp"]), null)
+  );
+
+  const css = new Gtk.CssProvider();
+  css.load_from_path(GLib.build_filenamev([dirname, "main.css"]));
+
+  Gtk.StyleContext.add_provider_for_display(
+    window.get_display(),
+    css,
+    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+  );
+
+  window.show();
+});
+
+application.run([]);

mockups/playback/main.scss

@@ -0,0 +1,12 @@
+.video-player-headerbar {
+  background: rgba(
+    0,
+    0,
+    0,
+    0.7
+  ); // To match even when not in focus https://gitlab.gnome.org/GNOME/libadwaita/-/blob/c174e07254aa423c704c3cdb62516249f8df5559/src/stylesheet/_colors.scss#L98
+}
+
+.video-player-window {
+  background: black;
+}

mockups/playback/video.webp

@@ -0,0 +1,158 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $MultiplexWindow: Adw.Window {
+    default-width: 1000;
+    default-height: 700;
+    title: _("Multiplex");
+
+    Overlay {
+        Picture video_player {}
+
+        [overlay]
+        Revealer video_metadata {
+            transition-duration: 250;
+            transition-type: crossfade;
+            valign: start;
+            reveal-child: true;
+
+            Adw.HeaderBar {
+                show-back-button: true;
+
+                styles [
+                    "osd",
+                    "video-player-headerbar"
+                ]
+            }
+        }
+
+        [overlay]
+        Revealer video_controls {
+            transition-duration: 250;
+            transition-type: crossfade;
+            valign: end;
+            reveal-child: true;
+
+            Box {
+                orientation: vertical;
+                margin-start: 24;
+                margin-end: 24;
+                margin-bottom: 24;
+
+                Box {
+                    spacing: 16;
+                    margin-start: 16;
+                    margin-end: 16;
+
+                    Label {
+                        label: '00:00:00';
+                        tooltip-text: 'Elapsed time';
+
+                        styles [
+                            "tabular-nums",
+                        ]
+                    }
+
+                    Scale {
+                        hexpand: true;
+                        orientation: horizontal;
+                        show-fill-level: true;
+
+                        adjustment: Adjustment {
+                            lower: 0;
+                            upper: 100;
+                        };
+                    }
+
+                    Label {
+                        label: '01:32:00';
+                        tooltip-text: 'Remaining time';
+
+                        styles [
+                            "tabular-nums",
+                        ]
+                    }
+                }
+
+                Box {
+                    spacing: 8;
+
+                    Box {
+                        spacing: 8;
+
+                        Button {
+                            icon-name: "media-seek-backward-symbolic";
+                            sensitive: false;
+                        }
+
+                        Button {
+                            icon-name: "media-playback-start-symbolic";
+                        }
+
+                        Button {
+                            icon-name: "media-seek-forward-symbolic";
+                            sensitive: false;
+                        }
+                    }
+
+                    Box {
+                        hexpand: true;
+                    }
+
+                    Box {
+                        spacing: 16;
+
+                        Box {
+                            spacing: 8;
+                        
+                            Button {
+                                icon-name: "applications-engineering-symbolic";
+                            }
+                        
+                            Button {
+                                icon-name: "media-optical-symbolic";
+                            }
+
+                            Button {
+                                icon-name: "media-view-subtitles-symbolic";
+                            }
+                        }
+
+                        Box {
+                            spacing: 8;
+
+                            Button {
+                                icon-name: "audio-volume-medium-symbolic";
+                            }
+
+                            Scale {
+                                orientation: horizontal;
+                                show-fill-level: true;
+                                width-request: 125;
+
+                                adjustment: Adjustment {
+                                    lower: 0;
+                                    upper: 100;
+                                };
+                            }
+                        }
+                        
+
+                        Button {
+                            icon-name: "view-fullscreen-symbolic";
+                        }
+                    }
+                }
+
+                styles [
+                    "toolbar",
+                    "osd"
+                ]
+            }
+        }
+    }
+
+    styles [
+        "video-player-window"
+    ]
+}