diff --git a/assets/icons/caelestia-consecutive-symbolic.svg b/assets/icons/caelestia-consecutive-symbolic.svg new file mode 100644 index 00000000..5b18fd2a --- /dev/null +++ b/assets/icons/caelestia-consecutive-symbolic.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/caelestia-no-repeat-symbolic.svg b/assets/icons/caelestia-no-repeat-symbolic.svg new file mode 100644 index 00000000..f878db7d --- /dev/null +++ b/assets/icons/caelestia-no-repeat-symbolic.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/caelestia-pause-symbolic.svg b/assets/icons/caelestia-pause-symbolic.svg new file mode 100644 index 00000000..8012654f --- /dev/null +++ b/assets/icons/caelestia-pause-symbolic.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/icons/caelestia-play-symbolic.svg b/assets/icons/caelestia-play-symbolic.svg new file mode 100644 index 00000000..8745847a --- /dev/null +++ b/assets/icons/caelestia-play-symbolic.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/caelestia-repeat-one-symbolic.svg b/assets/icons/caelestia-repeat-one-symbolic.svg new file mode 100644 index 00000000..ee38bb6e --- /dev/null +++ b/assets/icons/caelestia-repeat-one-symbolic.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/caelestia-repeat-symbolic.svg b/assets/icons/caelestia-repeat-symbolic.svg new file mode 100644 index 00000000..fc514b7c --- /dev/null +++ b/assets/icons/caelestia-repeat-symbolic.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/caelestia-shuffle-symbolic.svg b/assets/icons/caelestia-shuffle-symbolic.svg new file mode 100644 index 00000000..232eaace --- /dev/null +++ b/assets/icons/caelestia-shuffle-symbolic.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/caelestia-skip-next-symbolic.svg b/assets/icons/caelestia-skip-next-symbolic.svg new file mode 100644 index 00000000..1d4721c6 --- /dev/null +++ b/assets/icons/caelestia-skip-next-symbolic.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/icons/caelestia-skip-previous-symbolic.svg b/assets/icons/caelestia-skip-previous-symbolic.svg new file mode 100644 index 00000000..10d0e596 --- /dev/null +++ b/assets/icons/caelestia-skip-previous-symbolic.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/scss/popdowns/index.scss b/scss/popdowns/index.scss index 7f16c247..748ddd35 100644 --- a/scss/popdowns/index.scss +++ b/scss/popdowns/index.scss @@ -2,3 +2,4 @@ @forward "updates"; @forward "bluetoothdevices"; @forward "networks"; +@forward "media"; diff --git a/scss/popdowns/media.scss b/scss/popdowns/media.scss new file mode 100644 index 00000000..998c269e --- /dev/null +++ b/scss/popdowns/media.scss @@ -0,0 +1,113 @@ +@use "sass:color"; +@use "../scheme"; +@use "../lib"; +@use "../font"; + +$-accent: scheme.$lavender; +$-accent2: scheme.$pink; + +.media { + @include lib.rounded(8); + @include lib.border($-accent, 0.4, 2); + @include lib.shadow; + @include font.mono; + + background-color: scheme.$base; + color: $-accent; + padding: lib.s(12); + font-size: lib.s(14); + min-width: lib.s(500); + min-height: lib.s(220); + + .icon { + font-size: lib.s(32); + } + + .overlay { + @include lib.rounded(5); + + background-color: color.change(scheme.$base, $alpha: 0.8); + } + + .background { + @include lib.rounded(5); + + transition: background 300ms ease-in-out; + background-color: scheme.$surface0; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + .player { + padding: lib.s(35) lib.s(12); + font-weight: bold; + + @include lib.spacing(10, true); + + .title { + font-size: lib.s(18); + } + + .artist { + color: scheme.$green; + } + + .album { + color: $-accent2; + } + + .controls { + margin-top: lib.s(3); + + @include lib.spacing(10); + + button { + @include lib.rounded(4); + @include lib.element-decel; + @include lib.border(scheme.$base, 0.7); + + padding: lib.s(5) lib.s(12); + font-size: lib.s(18); + background-color: $-accent; + color: scheme.$base; + + &:disabled { + background-color: scheme.$overlay2; + } + + &:hover, + &:focus { + background-color: color.change($-accent, $alpha: 0.8); + } + + &:active { + background-color: color.change($-accent, $alpha: 0.6); + } + } + } + + // Progress bar + trough { + @include lib.rounded(3); + + margin-top: lib.s(10); + background-color: scheme.$surface0; + + highlight { + @include lib.rounded(3); + + background-color: $-accent2; + padding: lib.s(3) 0; + } + + slider { + @include lib.rounded(3); + + background-color: scheme.$overlay0; + min-width: lib.s(15); + min-height: lib.s(15); + } + } + } +} diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx index 60471ca7..c7f168e5 100644 --- a/src/modules/bar.tsx +++ b/src/modules/bar.tsx @@ -87,9 +87,9 @@ const MediaPlaying = () => { players.lastPlayer ? `${players.lastPlayer.title} - ${players.lastPlayer.artist}` : fallback; return ( + + + + + + player.set_position(self.value * player.length)} + setup={self => { + const update = () => { + self.set_tooltip_text(`${lengthStr(player.position)}/${lengthStr(player.length)}`); + self.set_value(player.position / player.length); + }; + self.hook(player, "notify::position", update); + self.hook(player, "notify::length", update); + update(); + }} + /> + , + ]} + > + {background} + + ); +}; + +export default () => { + const shown = Variable("none"); + return ( + + + { + if (event.button === Astal.MouseButton.SECONDARY) { + const current = Players.get_default().list.find(p => p.busName === shown.get()); + if (current) Players.get_default().makeCurrent(current); + } + }} + onScroll={(_, event) => { + const players = AstalMpris.get_default().players.filter(isRealPlayer); + const idx = players.findIndex(p => p.busName === shown.get()); + if (idx === -1) return; + if (event.delta_y < 0) { + if (idx > 0) shown.set(players[idx - 1].busName); + } else if (idx < players.length - 1) shown.set(players[idx + 1].busName); + }} + > + { + const players = new Map(); + + const addPlayer = (player: AstalMpris.Player) => { + if (!isRealPlayer(player) || players.has(player.busName)) return; + const widget = ; + self.add_named(widget, player.busName); + if (players.size === 0) shown.set(player.busName); + players.set(player.busName, widget); + }; + + for (const player of Players.get_default().list) addPlayer(player); + + self.hook(AstalMpris.get_default(), "player-added", (_, player) => addPlayer(player)); + self.hook(AstalMpris.get_default(), "player-closed", (_, player) => { + players.get(player.busName)?.destroy(); + players.delete(player.busName); + if (shown.get() === player.busName) + shown.set(AstalMpris.get_default().players.find(isRealPlayer)?.busName ?? "none"); + }); + }} + > + + + + + + + ); +};