update and refactor
This commit is contained in:
wt committed
1 parent
2f416a1325
commit
f1c32ead5d
15 files changed
+164
-88
No files matched your search
@@ -4,18 +4,33 @@ window.Media {
|
||||
background-color: transparent;
|
||||
box {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
background-color: black;
|
||||
border-radius: 25px;
|
||||
padding: 2px;
|
||||
}
|
||||
box.MediaContent {
|
||||
margin: 5px;
|
||||
background-color: rgb(70, 70, 70);
|
||||
border-radius: 25px;
|
||||
padding: 5px;
|
||||
box {
|
||||
background-color: rgb(70, 70, 70);
|
||||
}
|
||||
}
|
||||
|
||||
box.title {
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
/* background-color: rgb(70, 70, 70); */
|
||||
label {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
icon {
|
||||
font-size: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Cover {
|
||||
@@ -30,4 +45,9 @@ window.Media {
|
||||
label.artist {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
@@ -22,98 +22,102 @@ export default function Media() {
|
||||
application={App}
|
||||
visible={false}
|
||||
>
|
||||
<box>
|
||||
<box vertical>
|
||||
{bind(mpris, "players").as((ps) =>
|
||||
ps[0] ? (
|
||||
<box>
|
||||
<box
|
||||
className="Cover"
|
||||
valign={Gtk.Align.CENTER}
|
||||
css={bind(ps[0], "coverArt").as(
|
||||
(cover) => `background-image: url('${cover}');`,
|
||||
)}
|
||||
/>
|
||||
<box vertical>
|
||||
<box className="title">
|
||||
<label
|
||||
truncate
|
||||
hexpand
|
||||
halign={Gtk.Align.START}
|
||||
label={bind(ps[0], "metadata").as(() => `${ps[0].title}`)}
|
||||
/>
|
||||
<icon
|
||||
icon={bind(ps[0], "entry").as((e) =>
|
||||
Astal.Icon.lookup_icon(e)
|
||||
? e
|
||||
: "audio-x-generic-symbolic",
|
||||
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>
|
||||
<label
|
||||
halign={Gtk.Align.START}
|
||||
valign={Gtk.Align.START}
|
||||
className="artist"
|
||||
vexpand
|
||||
wrap
|
||||
label={bind(ps[0], "metadata").as(() => `${ps[0].artist}`)}
|
||||
/>
|
||||
<slider
|
||||
visible={bind(ps[0], "length").as((l) => l > 0)}
|
||||
onDragged={({ value }) =>
|
||||
(ps[0].position = value * ps[0].length)
|
||||
}
|
||||
value={bind(ps[0], "position").as((p) =>
|
||||
ps[0].length > 0 ? p / ps[0].length : 0,
|
||||
)}
|
||||
/>
|
||||
<centerbox className="actions">
|
||||
<label
|
||||
hexpand
|
||||
className="position"
|
||||
halign={Gtk.Align.START}
|
||||
visible={bind(ps[0], "length").as((l) => l > 0)}
|
||||
label={bind(ps[0], "position").as(lengthStr)}
|
||||
/>
|
||||
<box>
|
||||
<button
|
||||
onClicked={() => ps[0].previous()}
|
||||
visible={bind(ps[0], "canGoPrevious")}
|
||||
>
|
||||
<icon icon="media-skip-backward-symbolic" />
|
||||
</button>
|
||||
<button
|
||||
onClicked={() => ps[0].play_pause()}
|
||||
visible={bind(ps[0], "canControl")}
|
||||
>
|
||||
<box vertical>
|
||||
<box className="title">
|
||||
<label
|
||||
truncate
|
||||
hexpand
|
||||
halign={Gtk.Align.START}
|
||||
label={bind(psi, "metadata").as(() => `${psi.title}`)}
|
||||
/>
|
||||
<icon
|
||||
icon={bind(ps[0], "playbackStatus").as((s) =>
|
||||
s === Mpris.PlaybackStatus.PLAYING
|
||||
? "media-playback-pause-symbolic"
|
||||
: "media-playback-start-symbolic",
|
||||
icon={bind(psi, "entry").as((e) =>
|
||||
Astal.Icon.lookup_icon(e)
|
||||
? e
|
||||
: "audio-x-generic-symbolic",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClicked={() => ps[0].next()}
|
||||
visible={bind(ps[0], "canGoNext")}
|
||||
>
|
||||
<icon icon="media-skip-forward-symbolic" />
|
||||
</button>
|
||||
</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>
|
||||
<label
|
||||
className="length"
|
||||
hexpand
|
||||
halign={Gtk.AlignEND}
|
||||
visible={bind(ps[0], "length").as((l) => l > 0)}
|
||||
label={bind(ps[0], "length").as((l) =>
|
||||
l > 0 ? lengthStr(l) : "0:00",
|
||||
)}
|
||||
/>
|
||||
</centerbox>
|
||||
</box>
|
||||
</box>
|
||||
</box>
|
||||
) : (
|
||||
<label label="Nothing Playing" />
|
||||
) : (
|
||||
<label label="Nothing Playing" />
|
||||
),
|
||||
),
|
||||
)}
|
||||
</box>
|
||||
|
||||
Reference in new issue
Block a user