From 9e8634d892c559c5b44565a68bf35b13cbcb5572 Mon Sep 17 00:00:00 2001
From: Aylur <k.demeter@protonmail.com>
Date: Thu, 16 Jan 2025 17:37:00 +0100
Subject: add: gtk3 ts popover example

closes #224
closes #157
---
 .../gtk3/js/media-player/widget/MediaPlayer.scss   | 56 +++++++++++++
 .../gtk3/js/media-player/widget/MediaPlayer.tsx    | 94 ++++++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 examples/gtk3/js/media-player/widget/MediaPlayer.scss
 create mode 100644 examples/gtk3/js/media-player/widget/MediaPlayer.tsx

(limited to 'examples/gtk3/js/media-player/widget')

diff --git a/examples/gtk3/js/media-player/widget/MediaPlayer.scss b/examples/gtk3/js/media-player/widget/MediaPlayer.scss
new file mode 100644
index 0000000..e1597c2
--- /dev/null
+++ b/examples/gtk3/js/media-player/widget/MediaPlayer.scss
@@ -0,0 +1,56 @@
+// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+$fg-color: #{"@theme_fg_color"};
+$bg-color: #{"@theme_bg_color"};
+
+window {
+    all: unset;
+}
+
+box.MediaPlayer {
+    padding: .6rem;
+    background-color: $bg-color;
+
+    box.cover-art {
+        min-width: 120px;
+        min-height: 120px;
+        border-radius: 9px;
+        margin-right: .6rem;
+        background-size: contain;
+        background-position: center;
+    }
+
+    box.title {
+        label {
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+    }
+
+    scale {
+        padding: 0;
+        margin: .4rem 0;
+
+        trough {
+            min-height: 8px;
+        }
+
+        highlight {
+            background-color: $fg-color;
+        }
+
+        slider {
+            all: unset;
+        }
+    }
+
+    centerbox.actions {
+        min-width: 220px;
+
+        button {
+            min-width: 0;
+            min-height: 0;
+            padding: .4rem;
+            margin: 0 .2rem;
+        }
+    }
+}
diff --git a/examples/gtk3/js/media-player/widget/MediaPlayer.tsx b/examples/gtk3/js/media-player/widget/MediaPlayer.tsx
new file mode 100644
index 0000000..06c7e77
--- /dev/null
+++ b/examples/gtk3/js/media-player/widget/MediaPlayer.tsx
@@ -0,0 +1,94 @@
+import { Astal, Gtk } from "astal/gtk3"
+import Mpris from "gi://AstalMpris"
+import { bind } from "astal"
+
+function lengthStr(length: number) {
+    const min = Math.floor(length / 60)
+    const sec = Math.floor(length % 60)
+    const sec0 = sec < 10 ? "0" : ""
+    return `${min}:${sec0}${sec}`
+}
+
+
+function MediaPlayer({ player }: { player: Mpris.Player }) {
+    const { START, END } = Gtk.Align
+
+    const title = bind(player, "title").as(t =>
+        t || "Unknown Track")
+
+    const artist = bind(player, "artist").as(a =>
+        a || "Unknown Artist")
+
+    const coverArt = bind(player, "coverArt").as(c =>
+        `background-image: url('${c}')`)
+
+    const playerIcon = bind(player, "entry").as(e =>
+        Astal.Icon.lookup_icon(e) ? e : "audio-x-generic-symbolic")
+
+    const position = bind(player, "position").as(p => player.length > 0
+        ? p / player.length : 0)
+
+    const playIcon = bind(player, "playbackStatus").as(s =>
+        s === Mpris.PlaybackStatus.PLAYING
+            ? "media-playback-pause-symbolic"
+            : "media-playback-start-symbolic"
+    )
+
+    return <box className="MediaPlayer">
+        <box className="cover-art" css={coverArt} />
+        <box vertical>
+            <box className="title">
+                <label truncate hexpand halign={START} label={title} />
+                <icon icon={playerIcon} />
+            </box>
+            <label halign={START} valign={START} vexpand wrap label={artist} />
+            <slider
+                visible={bind(player, "length").as(l => l > 0)}
+                onDragged={({ value }) => player.position = value * player.length}
+                value={position}
+            />
+            <centerbox className="actions">
+                <label
+                    hexpand
+                    className="position"
+                    halign={START}
+                    visible={bind(player, "length").as(l => l > 0)}
+                    label={bind(player, "position").as(lengthStr)}
+                />
+                <box>
+                    <button
+                        onClicked={() => player.previous()}
+                        visible={bind(player, "canGoPrevious")}>
+                        <icon icon="media-skip-backward-symbolic" />
+                    </button>
+                    <button
+                        onClicked={() => player.play_pause()}
+                        visible={bind(player, "canControl")}>
+                        <icon icon={playIcon} />
+                    </button>
+                    <button
+                        onClicked={() => player.next()}
+                        visible={bind(player, "canGoNext")}>
+                        <icon icon="media-skip-forward-symbolic" />
+                    </button>
+                </box>
+                <label
+                    className="length"
+                    hexpand
+                    halign={END}
+                    visible={bind(player, "length").as(l => l > 0)}
+                    label={bind(player, "length").as(l => l > 0 ? lengthStr(l) : "0:00")}
+                />
+            </centerbox>
+        </box>
+    </box>
+}
+
+export default function MprisPlayers() {
+    const mpris = Mpris.get_default()
+    return <box vertical>
+        {bind(mpris, "players").as(arr => arr.map(player => (
+            <MediaPlayer player={player} />
+        )))}
+    </box>
+}
-- 
cgit v1.2.3