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() .toString()
.padStart(2, "0")}`; .padStart(2, "0")}`;
const noNull = (s: string | null) => s ?? "-";
const FaceFallback = () => ( const FaceFallback = () => (
<label <label
setup={self => { setup={self => {
@ -55,43 +57,51 @@ const User = () => {
); );
}; };
const QuickToggles = () => <box></box>;
const Media = ({ player }: { player: AstalMpris.Player }) => { 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 ( return (
<box className="media" onDestroy={() => position.drop()}> <box className="media" onDestroy={() => position.drop()}>
<box <box
homogeneous homogeneous
className="cover-art" 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>
<box vertical className="details"> <box vertical className="details">
<label truncate className="title" label={bind(player, "title")} /> <label truncate className="title" label={player ? bind(player, "title").as(noNull) : ""} />
<label truncate className="artist" label={bind(player, "artist")} /> <label truncate className="artist" label={player ? bind(player, "artist").as(noNull) : "No media"} />
<box hexpand className="controls"> <box hexpand className="controls">
<button <button
hexpand hexpand
sensitive={bind(player, "canGoPrevious")} sensitive={player ? bind(player, "canGoPrevious") : false}
cursor="pointer" cursor="pointer"
onClicked={() => player.next()} onClicked={() => player.next()}
label="󰒮" label="󰒮"
/> />
<button <button
hexpand hexpand
sensitive={bind(player, "canControl")} sensitive={player ? bind(player, "canControl") : false}
cursor="pointer" cursor="pointer"
onClicked={() => player.play_pause()} onClicked={() => player.play_pause()}
label={bind(player, "playbackStatus").as(s => label={
s === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊" player
)} ? bind(player, "playbackStatus").as(s =>
s === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"
)
: "󰐊"
}
/> />
<button <button
hexpand hexpand
sensitive={bind(player, "canGoNext")} sensitive={player ? bind(player, "canGoNext") : false}
cursor="pointer" cursor="pointer"
onClicked={() => player.next()} onClicked={() => player.next()}
label="󰒭" label="󰒭"
@ -99,17 +109,15 @@ const Media = ({ player }: { player: AstalMpris.Player }) => {
</box> </box>
<Slider value={bind(position)} /> <Slider value={bind(position)} />
<box className="time"> <box className="time">
<label label={bind(player, "position").as(lengthStr)} /> <label label={player ? bind(player, "position").as(lengthStr) : "-1:-1"} />
<box hexpand /> <box hexpand />
<label label={bind(player, "length").as(lengthStr)} /> <label label={player ? bind(player, "length").as(lengthStr) : "-1:-1"} />
</box> </box>
</box> </box>
</box> </box>
); );
}; };
const Today = () => <box></box>;
export default () => ( export default () => (
<box vertical className="pane dashboard" name="dashboard"> <box vertical className="pane dashboard" name="dashboard">
<User /> <User />