105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import app from "ags/gtk3/app"
|
|
import { Astal, Gtk, Gdk } from "ags/gtk3"
|
|
import { execAsync } from "ags/process"
|
|
import { createPoll } from "ags/time"
|
|
|
|
export default function Media(gdkmonitor: Gdk.Monitor) {
|
|
const { TOP, LEFT } = Astal.WindowAnchor
|
|
|
|
const pollCmd = "playerctl metadata -f '{{title}}|||{{artist}}|||{{mpris:artUrl}}|||{{status}}|||{{mpris:length}}|||{{position}}' 2>/dev/null || echo 'No Media||||||Stopped|||0|||0'";
|
|
|
|
const mediaState = createPoll({
|
|
title: "No Media",
|
|
artist: "",
|
|
artUrl: "",
|
|
status: "Stopped",
|
|
length: 0,
|
|
position: 0
|
|
}, 1000, pollCmd, (stdout) => {
|
|
const parts = stdout.split("|||");
|
|
const title = parts[0]?.trim() || "No Media";
|
|
const artist = parts[1]?.trim() || "";
|
|
const rawUrl = parts[2]?.trim() || "";
|
|
const artUrl = rawUrl.replace(/^file:\/\//, '');
|
|
const status = parts[3]?.trim() || "Stopped";
|
|
const length = Number(parts[4]) || 0;
|
|
const position = Number(parts[5]) || 0;
|
|
return { title, artist, artUrl, status, length, position };
|
|
});
|
|
|
|
return (
|
|
<window
|
|
class="MediaWindow"
|
|
gdkmonitor={gdkmonitor}
|
|
exclusivity={Astal.Exclusivity.NORMAL}
|
|
layer={Astal.Layer.BOTTOM}
|
|
anchor={TOP | LEFT}
|
|
margin={20}
|
|
application={app}
|
|
>
|
|
<box class="media-container" css="min-width: 350px;" spacing={15}>
|
|
<box
|
|
class="media-cover"
|
|
css={mediaState.as(s => s.artUrl ? `background-image: url('${s.artUrl}'); min-width: 80px; min-height: 80px;` : 'min-width: 80px; min-height: 80px; background-color: alpha(@color0, 0.5);')}
|
|
/>
|
|
|
|
<box vertical class="media-info-box" valign={Gtk.Align.CENTER} hexpand>
|
|
<label
|
|
class="media-title"
|
|
label={mediaState.as(s => s.title)}
|
|
halign={Gtk.Align.FILL}
|
|
xalign={0}
|
|
truncate
|
|
maxWidthChars={35}
|
|
css="font-size: 15px;"
|
|
/>
|
|
<label
|
|
class="media-artist"
|
|
label={mediaState.as(s => s.artist)}
|
|
halign={Gtk.Align.FILL}
|
|
xalign={0}
|
|
truncate
|
|
maxWidthChars={40}
|
|
css="font-size: 13px;"
|
|
/>
|
|
|
|
<slider
|
|
class="media-progress"
|
|
drawValue={false}
|
|
hexpand
|
|
min={0}
|
|
max={1}
|
|
value={mediaState.as(s => {
|
|
const len = s.length / 1000000;
|
|
return len > 0 ? Math.min(s.position / len, 1) : 0;
|
|
})}
|
|
marginTop={10}
|
|
marginBottom={10}
|
|
/>
|
|
|
|
<box class="media-controls" spacing={15} halign={Gtk.Align.CENTER}>
|
|
<button
|
|
class="media-btn"
|
|
onClicked={() => execAsync("playerctl previous").catch(print)}
|
|
>
|
|
<label label="" css="font-size: 18px;" />
|
|
</button>
|
|
<button
|
|
class="media-btn"
|
|
onClicked={() => execAsync("playerctl play-pause").catch(print)}
|
|
>
|
|
<label label={mediaState.as(s => s.status === "Playing" ? "" : "")} css="font-size: 22px;" />
|
|
</button>
|
|
<button
|
|
class="media-btn"
|
|
onClicked={() => execAsync("playerctl next").catch(print)}
|
|
>
|
|
<label label="" css="font-size: 18px;" />
|
|
</button>
|
|
</box>
|
|
</box>
|
|
</box>
|
|
</window>
|
|
)
|
|
}
|