127 lines
4.5 KiB
TypeScript
127 lines
4.5 KiB
TypeScript
import { App } from "astal/gtk3";
|
|
import { bind } from "astal";
|
|
import { Astal, Gtk } from "astal/gtk3";
|
|
import Mpris from "gi://AstalMpris";
|
|
|
|
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}`;
|
|
}
|
|
|
|
export default function MediaMenu() {
|
|
const { TOP, RIGHT } = Astal.WindowAnchor;
|
|
const mpris = Mpris.get_default();
|
|
|
|
return (
|
|
<window
|
|
anchor={TOP | RIGHT}
|
|
name="Mediamenu"
|
|
className="Media"
|
|
application={App}
|
|
visible={false}
|
|
>
|
|
<box vertical>
|
|
{bind(mpris, "players").as((ps) =>
|
|
ps.map((psi) =>
|
|
psi ? (
|
|
<box className="MediaContent">
|
|
<box>
|
|
<box
|
|
className="Cover"
|
|
valign={Gtk.Align.CENTER}
|
|
css={bind(psi, "coverArt").as(
|
|
(cover) => `background-image: url('${cover}');`,
|
|
)}
|
|
/>
|
|
<box vertical>
|
|
<box className="title">
|
|
<label
|
|
truncate
|
|
hexpand
|
|
halign={Gtk.Align.START}
|
|
label={bind(psi, "metadata").as(() => `${psi.title}`)}
|
|
/>
|
|
<icon
|
|
icon={bind(psi, "entry").as((e) =>
|
|
Astal.Icon.lookup_icon(e)
|
|
? e
|
|
: "audio-x-generic-symbolic",
|
|
)}
|
|
/>
|
|
</box>
|
|
<label
|
|
halign={Gtk.Align.START}
|
|
valign={Gtk.Align.START}
|
|
className="artist"
|
|
vexpand
|
|
wrap
|
|
label={bind(psi, "metadata").as(() => `${psi.artist}`)}
|
|
/>
|
|
<slider
|
|
visible={bind(psi, "length").as((l) => l > 0)}
|
|
onDragged={({ value }) =>
|
|
(psi.position = value * psi.length)
|
|
}
|
|
value={bind(psi, "position").as((p) =>
|
|
psi.length > 0 ? p / psi.length : 0,
|
|
)}
|
|
/>
|
|
<centerbox className="actions">
|
|
<label
|
|
hexpand
|
|
className="position"
|
|
halign={Gtk.Align.START}
|
|
visible={bind(psi, "length").as((l) => l > 0)}
|
|
label={bind(psi, "position").as(lengthStr)}
|
|
/>
|
|
<box>
|
|
<button
|
|
onClicked={() => psi.previous()}
|
|
visible={bind(psi, "canGoPrevious")}
|
|
>
|
|
<icon icon="media-skip-backward-symbolic" />
|
|
</button>
|
|
<button
|
|
onClicked={() => psi.play_pause()}
|
|
visible={bind(psi, "canControl")}
|
|
>
|
|
<icon
|
|
icon={bind(psi, "playbackStatus").as((s) =>
|
|
s === Mpris.PlaybackStatus.PLAYING
|
|
? "media-playback-pause-symbolic"
|
|
: "media-playback-start-symbolic",
|
|
)}
|
|
/>
|
|
</button>
|
|
<button
|
|
onClicked={() => psi.next()}
|
|
visible={bind(psi, "canGoNext")}
|
|
>
|
|
<icon icon="media-skip-forward-symbolic" />
|
|
</button>
|
|
</box>
|
|
<label
|
|
className="length"
|
|
hexpand
|
|
halign={Gtk.AlignEND}
|
|
visible={bind(psi, "length").as((l) => l > 0)}
|
|
label={bind(psi, "length").as((l) =>
|
|
l > 0 ? lengthStr(l) : "0:00",
|
|
)}
|
|
/>
|
|
</centerbox>
|
|
</box>
|
|
</box>
|
|
</box>
|
|
) : (
|
|
<label label="Nothing Playing" />
|
|
),
|
|
),
|
|
)}
|
|
</box>
|
|
</window>
|
|
);
|
|
}
|