nixos-configs/modules/ags/config/ts/media-player/mpris.ts

473 lines
13 KiB
TypeScript
Raw Normal View History

const Mpris = await Service.import('mpris');
const { Button, Icon, Label, Stack, Slider, CenterBox, Box } = Widget;
const { execAsync, lookUpIcon, readFileAsync } = Utils;
import Separator from '../misc/separator.ts';
import CursorBox from '../misc/cursorbox.ts';
const ICON_SIZE = 32;
const icons = {
mpris: {
fallback: 'audio-x-generic-symbolic',
shuffle: {
enabled: '󰒝',
disabled: '󰒞',
},
loop: {
none: '󰑗',
track: '󰑘',
playlist: '󰑖',
},
playing: ' ',
paused: ' ',
stopped: ' ',
prev: '󰒮',
next: '󰒭',
},
};
2024-01-13 11:15:08 -05:00
// Types
import { MprisPlayer } from 'types/service/mpris.ts';
2024-01-13 11:15:08 -05:00
import { Variable as Var } from 'types/variable';
import {
AgsWidget,
CenterBoxPropsGeneric,
Colors,
PlayerBox,
PlayerButtonType,
PlayerDrag,
PlayerOverlay,
StackGeneric,
} from 'global-types';
2024-01-13 11:15:08 -05:00
export const CoverArt = (
player: MprisPlayer,
colors: Var<Colors>,
props: CenterBoxPropsGeneric,
2024-01-13 11:15:08 -05:00
) => CenterBox({
...props,
vertical: true,
2023-12-18 18:00:30 -05:00
attribute: {
bgStyle: '',
player,
},
setup: (self: PlayerBox) => {
// Give temp cover art
2023-12-18 18:00:30 -05:00
readFileAsync(player.cover_path).catch(() => {
if (!colors.value && !player.track_cover_url) {
colors.value = {
imageAccent: '#6b4fa2',
buttonAccent: '#ecdcff',
buttonText: '#25005a',
hoverAccent: '#d4baff',
};
2023-12-18 18:00:30 -05:00
self.attribute.bgStyle = `
background: radial-gradient(circle,
rgba(0, 0, 0, 0.4) 30%,
2023-12-18 18:00:30 -05:00
${colors.value.imageAccent}),
rgb(0, 0, 0);
background-size: cover;
background-position: center;
`;
2023-12-18 18:00:30 -05:00
self.setCss(self.attribute.bgStyle);
}
});
self.hook(player, () => {
2023-12-18 18:00:30 -05:00
execAsync(['bash', '-c', `[[ -f "${player.cover_path}" ]] &&
coloryou "${player.cover_path}" | grep -v Warning`])
.then((out) => {
if (!Mpris.players.find((p) => player === p)) {
return;
}
2023-12-18 18:00:30 -05:00
colors.value = JSON.parse(out);
2023-12-18 18:00:30 -05:00
self.attribute.bgStyle = `
background: radial-gradient(circle,
rgba(0, 0, 0, 0.4) 30%,
${colors.value.imageAccent}),
url("${player.cover_path}");
background-size: cover;
background-position: center;
`;
if (!(self.get_parent() as PlayerDrag)
2024-01-13 11:15:08 -05:00
.attribute.dragging) {
2023-12-18 18:00:30 -05:00
self.setCss(self.attribute.bgStyle);
}
}).catch((err) => {
if (err !== '') {
print(err);
}
});
});
},
});
2024-01-13 11:15:08 -05:00
export const TitleLabel = (player: MprisPlayer) => Label({
xalign: 0,
2023-12-18 18:00:30 -05:00
max_width_chars: 40,
truncate: 'end',
justification: 'left',
2023-12-18 18:00:30 -05:00
class_name: 'title',
label: player.bind('track_title'),
});
2024-01-13 11:15:08 -05:00
export const ArtistLabel = (player: MprisPlayer) => Label({
xalign: 0,
2023-12-18 18:00:30 -05:00
max_width_chars: 40,
truncate: 'end',
justification: 'left',
2023-12-18 18:00:30 -05:00
class_name: 'artist',
label: player.bind('track_artists')
.transform((a) => a.join(', ') || ''),
});
2023-12-18 18:00:30 -05:00
export const PlayerIcon = (player: MprisPlayer, overlay: PlayerOverlay) => {
2024-01-13 11:15:08 -05:00
const playerIcon = (
p: MprisPlayer,
widget?: PlayerOverlay,
playerBox?: PlayerBox,
2024-01-13 11:15:08 -05:00
) => CursorBox({
2023-12-18 18:00:30 -05:00
tooltip_text: p.identity || '',
on_primary_click_release: () => {
if (widget && playerBox) {
widget.attribute.moveToTop(playerBox);
}
},
child: Icon({
2023-12-18 18:00:30 -05:00
class_name: widget ? 'position-indicator' : 'player-icon',
size: widget ? 0 : ICON_SIZE,
setup: (self) => {
self.hook(p, () => {
self.icon = lookUpIcon(p.entry) ?
p.entry :
icons.mpris.fallback;
});
},
}),
});
2023-12-18 18:00:30 -05:00
return Box().hook(Mpris, (self) => {
const grandPa = self.get_parent()?.get_parent() as AgsWidget;
2024-01-13 11:15:08 -05:00
if (!grandPa) {
return;
}
2024-01-13 11:15:08 -05:00
const thisIndex = overlay.overlays
.indexOf(grandPa);
self.children = (overlay.overlays as PlayerBox[])
.map((playerBox, i) => {
2023-12-18 18:00:30 -05:00
self.children.push(Separator(2));
2023-12-18 18:00:30 -05:00
return i === thisIndex ?
playerIcon(player) :
playerIcon(playerBox.attribute.player, overlay, playerBox);
2023-12-18 18:00:30 -05:00
})
.reverse();
});
};
const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();
2024-01-13 11:15:08 -05:00
export const PositionSlider = (
player: MprisPlayer,
colors: Var<Colors>,
2024-01-13 11:15:08 -05:00
) => Slider({
2023-12-18 18:00:30 -05:00
class_name: 'position-slider',
2023-11-16 15:02:00 -05:00
vpack: 'center',
hexpand: true,
2023-12-18 18:00:30 -05:00
draw_value: false,
2023-12-18 18:00:30 -05:00
on_change: ({ value }) => {
2023-11-16 15:02:00 -05:00
player.position = player.length * value;
},
setup: (self) => {
const update = () => {
if (!self.dragging) {
self.visible = player.length > 0;
if (player.length > 0) {
self.value = player.position / player.length;
}
}
};
self
.poll(1000, () => update())
.hook(player, () => update(), 'position')
2023-12-18 18:00:30 -05:00
.hook(colors, () => {
if (colors.value) {
const c = colors.value;
self.setCss(`
highlight { background-color: ${c.buttonAccent}; }
slider { background-color: ${c.buttonAccent}; }
slider:hover { background-color: ${c.hoverAccent}; }
trough { background-color: ${c.buttonText}; }
`);
}
})
// OnClick
2023-12-18 18:00:30 -05:00
.on('button-press-event', () => {
2024-01-22 10:23:32 -05:00
if (!display) {
return;
}
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'grabbing',
));
})
// OnRelease
2023-12-18 18:00:30 -05:00
.on('button-release-event', () => {
2024-01-22 10:23:32 -05:00
if (!display) {
return;
}
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
})
// OnHover
.on('enter-notify-event', () => {
2024-01-22 10:23:32 -05:00
if (!display) {
return;
}
self.window.set_cursor(Gdk.Cursor.new_from_name(
display,
'pointer',
));
self.toggleClassName('hover', true);
})
// OnHoverLost
.on('leave-notify-event', () => {
self.window.set_cursor(null);
self.toggleClassName('hover', false);
});
},
});
const PlayerButton = ({
player,
colors,
items,
onClick,
prop,
2024-01-13 11:15:08 -05:00
}: PlayerButtonType) => CursorBox({
2023-11-16 15:02:00 -05:00
child: Button({
2023-12-18 18:00:30 -05:00
attribute: { hovered: false },
2023-11-16 15:02:00 -05:00
child: Stack({ items }),
2023-12-18 18:00:30 -05:00
on_primary_click_release: () => player[onClick](),
2023-12-18 18:00:30 -05:00
on_hover: (self) => {
self.attribute.hovered = true;
2023-12-18 18:00:30 -05:00
if (prop === 'playBackStatus' && colors.value) {
const c = colors.value;
2024-01-13 11:15:08 -05:00
items.forEach((item) => {
2023-11-16 15:02:00 -05:00
item[1].setCss(`
background-color: ${c.hoverAccent};
color: ${c.buttonText};
min-height: 40px;
min-width: 36px;
margin-bottom: 1px;
margin-right: 1px;
`);
2023-11-16 15:02:00 -05:00
});
}
},
2023-12-18 18:00:30 -05:00
on_hover_lost: (self) => {
self.attribute.hovered = false;
if (prop === 'playBackStatus' && colors.value) {
const c = colors.value;
2024-01-13 11:15:08 -05:00
items.forEach((item) => {
2023-11-16 15:02:00 -05:00
item[1].setCss(`
background-color: ${c.buttonAccent};
color: ${c.buttonText};
min-height: 42px;
min-width: 38px;
`);
2023-11-16 15:02:00 -05:00
});
}
},
setup: (self) => {
self
.hook(player, () => {
(self.child as StackGeneric).shown = `${player[prop]}`;
})
2023-12-18 18:00:30 -05:00
.hook(colors, () => {
if (!Mpris.players.find((p) => player === p)) {
return;
}
2023-12-18 18:00:30 -05:00
if (colors.value) {
const c = colors.value;
if (prop === 'playBackStatus') {
2023-12-18 18:00:30 -05:00
if (self.attribute.hovered) {
Array.from(items).forEach((item) => {
item[1].setCss(`
background-color: ${c.hoverAccent};
color: ${c.buttonText};
min-height: 40px;
min-width: 36px;
margin-bottom: 1px;
margin-right: 1px;
`);
});
}
else {
2024-01-13 11:15:08 -05:00
items.forEach((item) => {
item[1].setCss(`
background-color: ${c.buttonAccent};
color: ${c.buttonText};
min-height: 42px;
min-width: 38px;
`);
});
}
2023-11-16 15:02:00 -05:00
}
else {
self.setCss(`
* { color: ${c.buttonAccent}; }
*:hover { color: ${c.hoverAccent}; }
`);
2023-11-16 15:02:00 -05:00
}
}
});
},
2023-11-16 15:02:00 -05:00
}),
});
2024-01-13 11:15:08 -05:00
export const ShuffleButton = (
player: MprisPlayer,
colors: Var<Colors>,
2024-01-13 11:15:08 -05:00
) => PlayerButton({
player,
2023-12-18 18:00:30 -05:00
colors,
items: [
['true', Label({
2023-12-18 18:00:30 -05:00
class_name: 'shuffle enabled',
label: icons.mpris.shuffle.enabled,
})],
['false', Label({
2023-12-18 18:00:30 -05:00
class_name: 'shuffle disabled',
label: icons.mpris.shuffle.disabled,
})],
],
onClick: 'shuffle',
prop: 'shuffleStatus',
});
2024-01-13 11:15:08 -05:00
export const LoopButton = (
player: MprisPlayer,
colors: Var<Colors>,
2024-01-13 11:15:08 -05:00
) => PlayerButton({
player,
2023-12-18 18:00:30 -05:00
colors,
items: [
['None', Label({
2023-12-18 18:00:30 -05:00
class_name: 'loop none',
label: icons.mpris.loop.none,
})],
['Track', Label({
2023-12-18 18:00:30 -05:00
class_name: 'loop track',
label: icons.mpris.loop.track,
})],
['Playlist', Label({
2023-12-18 18:00:30 -05:00
class_name: 'loop playlist',
label: icons.mpris.loop.playlist,
})],
],
onClick: 'loop',
prop: 'loopStatus',
});
2024-01-13 11:15:08 -05:00
export const PlayPauseButton = (
player: MprisPlayer,
colors: Var<Colors>,
2024-01-13 11:15:08 -05:00
) => PlayerButton({
player,
2023-12-18 18:00:30 -05:00
colors,
items: [
['Playing', Label({
2023-12-18 18:00:30 -05:00
class_name: 'pausebutton playing',
label: icons.mpris.playing,
})],
['Paused', Label({
2023-12-18 18:00:30 -05:00
class_name: 'pausebutton paused',
label: icons.mpris.paused,
})],
['Stopped', Label({
2023-12-18 18:00:30 -05:00
class_name: 'pausebutton stopped paused',
label: icons.mpris.stopped,
})],
],
onClick: 'playPause',
prop: 'playBackStatus',
});
2024-01-13 11:15:08 -05:00
export const PreviousButton = (
player: MprisPlayer,
colors: Var<Colors>,
2024-01-13 11:15:08 -05:00
) => PlayerButton({
player,
2023-12-18 18:00:30 -05:00
colors,
items: [
['true', Label({
2023-12-18 18:00:30 -05:00
class_name: 'previous',
label: icons.mpris.prev,
})],
['false', Label({
2023-12-18 18:00:30 -05:00
class_name: 'previous',
label: icons.mpris.prev,
})],
],
onClick: 'previous',
prop: 'canGoPrev',
});
2024-01-13 11:15:08 -05:00
export const NextButton = (
player: MprisPlayer,
colors: Var<Colors>,
2024-01-13 11:15:08 -05:00
) => PlayerButton({
player,
2023-12-18 18:00:30 -05:00
colors,
items: [
['true', Label({
2023-12-18 18:00:30 -05:00
class_name: 'next',
label: icons.mpris.next,
})],
['false', Label({
2023-12-18 18:00:30 -05:00
class_name: 'next',
label: icons.mpris.next,
})],
],
onClick: 'next',
prop: 'canGoNext',
});