nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

sidebar: media handle no players

Browse source
This commit is contained in:
2 * r + 2 * t 2025-03-25 21:50:31 +11:00
parent 8a8ccd52f7
commit dd5b749ba1
1 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/modules/sidebar/dashboard.tsx
View file

@ -11,6 +11,8 @@ const lengthStr = (length: number) =>
.toString()
.padStart(2, "0")}`;
const noNull = (s: string | null) => s ?? "-";
const FaceFallback = () => (
<label
setup={self => {
@ -55,43 +57,51 @@ const User = () => {
);
};
const QuickToggles = () => <box></box>;
const Media = ({ player }: { player: AstalMpris.Player }) => {
const position = Variable.derive([bind(player, "position"), bind(player, "length")], (p, l) => p / l);
const position = player
? Variable.derive([bind(player, "position"), bind(player, "length")], (p, l) => p / l)
: Variable(0);
return (
<box className="media" onDestroy={() => position.drop()}>
<box
homogeneous
className="cover-art"
css={bind(player, "coverArt").as(a => `background-image: url("${a}");`)}
css={player ? bind(player, "coverArt").as(a => `background-image: url("${a}");`) : ""}
>
{bind(player, "coverArt").as(a => (a ? <box visible={false} /> : <label xalign={0.31} label="" />))}
{player ? (
bind(player, "coverArt").as(a => (a ? <box visible={false} /> : <label xalign={0.31} label="" />))
) : (
<label xalign={0.31} label="" />
)}
</box>
<box vertical className="details">
<label truncate className="title" label={bind(player, "title")} />
<label truncate className="artist" label={bind(player, "artist")} />
<label truncate className="title" label={player ? bind(player, "title").as(noNull) : ""} />
<label truncate className="artist" label={player ? bind(player, "artist").as(noNull) : "No media"} />
<box hexpand className="controls">
<button
hexpand
sensitive={bind(player, "canGoPrevious")}
sensitive={player ? bind(player, "canGoPrevious") : false}
cursor="pointer"
onClicked={() => player.next()}
label="󰒮"
/>
<button
hexpand
sensitive={bind(player, "canControl")}
sensitive={player ? bind(player, "canControl") : false}
cursor="pointer"
onClicked={() => player.play_pause()}
label={bind(player, "playbackStatus").as(s =>
s === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"
)}
label={
player
? bind(player, "playbackStatus").as(s =>
s === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"
)
: "󰐊"
}
/>
<button
hexpand
sensitive={bind(player, "canGoNext")}
sensitive={player ? bind(player, "canGoNext") : false}
cursor="pointer"
onClicked={() => player.next()}
label="󰒭"
@ -99,17 +109,15 @@ const Media = ({ player }: { player: AstalMpris.Player }) => {
</box>
<Slider value={bind(position)} />
<box className="time">
<label label={bind(player, "position").as(lengthStr)} />
<label label={player ? bind(player, "position").as(lengthStr) : "-1:-1"} />
<box hexpand />
<label label={bind(player, "length").as(lengthStr)} />
<label label={player ? bind(player, "length").as(lengthStr) : "-1:-1"} />
</box>
</box>
</box>
);
};
const Today = () => <box></box>;
export default () => (
<box vertical className="pane dashboard" name="dashboard">
<User />