diff options
Diffstat (limited to 'examples/gtk3/js/media-player')
| -rw-r--r-- | examples/gtk3/js/media-player/README.md | 5 | ||||
| -rw-r--r-- | examples/gtk3/js/media-player/app.ts | 11 | ||||
| -rw-r--r-- | examples/gtk3/js/media-player/style.scss | 1 | ||||
| -rw-r--r-- | examples/gtk3/js/media-player/widget/MediaPlayer.scss | 56 | ||||
| -rw-r--r-- | examples/gtk3/js/media-player/widget/MediaPlayer.tsx | 94 |
5 files changed, 167 insertions, 0 deletions
diff --git a/examples/gtk3/js/media-player/README.md b/examples/gtk3/js/media-player/README.md new file mode 100644 index 0000000..4e3d237 --- /dev/null +++ b/examples/gtk3/js/media-player/README.md @@ -0,0 +1,5 @@ +# Media Player + + + +Using [Mpris](https://aylur.github.io/astal/guide/libraries/mpris). diff --git a/examples/gtk3/js/media-player/app.ts b/examples/gtk3/js/media-player/app.ts new file mode 100644 index 0000000..5b7558a --- /dev/null +++ b/examples/gtk3/js/media-player/app.ts @@ -0,0 +1,11 @@ +import { App, Widget } from "astal/gtk3" +import style from "./style.scss" +import MprisPlayers from "./widget/MediaPlayer" + +App.start({ + instanceName: "players", + css: style, + main: () => { + new Widget.Window({}, MprisPlayers()) + } +}) diff --git a/examples/gtk3/js/media-player/style.scss b/examples/gtk3/js/media-player/style.scss new file mode 100644 index 0000000..2e2f625 --- /dev/null +++ b/examples/gtk3/js/media-player/style.scss @@ -0,0 +1 @@ +@use "./widget/MediaPlayer.scss"; 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> +} |