435 lines
12 KiB
JavaScript
435 lines
12 KiB
JavaScript
import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
|
|
|
|
import { Button, Icon, Label, Stack, Slider, CenterBox, Box } from 'resource:///com/github/Aylur/ags/widget.js';
|
|
import { execAsync, lookUpIcon, readFileAsync } from 'resource:///com/github/Aylur/ags/utils.js';
|
|
|
|
import Separator from '../misc/separator.js';
|
|
import CursorBox from '../misc/cursorbox.js';
|
|
|
|
/**
|
|
* @typedef {import('types/service/mpris').MprisPlayer} Player
|
|
* @typedef {import('types/variable').Variable} Variable
|
|
* @typedef {import('types/widgets/overlay').default} Overlay
|
|
*/
|
|
|
|
const ICON_SIZE = 32;
|
|
|
|
const icons = {
|
|
mpris: {
|
|
fallback: 'audio-x-generic-symbolic',
|
|
shuffle: {
|
|
enabled: '',
|
|
disabled: '',
|
|
},
|
|
loop: {
|
|
none: '',
|
|
track: '',
|
|
playlist: '',
|
|
},
|
|
playing: ' ',
|
|
paused: ' ',
|
|
stopped: ' ',
|
|
prev: '',
|
|
next: '',
|
|
},
|
|
};
|
|
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Variable} colors
|
|
* @param {import('types/widgets/centerbox').CenterBoxProps=} props
|
|
*/
|
|
export const CoverArt = (player, colors, props) => CenterBox({
|
|
...props,
|
|
// @ts-expect-error
|
|
vertical: true,
|
|
|
|
attribute: {
|
|
bgStyle: '',
|
|
player,
|
|
},
|
|
|
|
setup: (self) => {
|
|
// Give temp cover art
|
|
readFileAsync(player.cover_path).catch(() => {
|
|
if (!colors.value && !player.track_cover_url) {
|
|
colors.value = {
|
|
imageAccent: '#6b4fa2',
|
|
buttonAccent: '#ecdcff',
|
|
buttonText: '#25005a',
|
|
hoverAccent: '#d4baff',
|
|
};
|
|
|
|
self.attribute.bgStyle = `
|
|
background: radial-gradient(circle,
|
|
rgba(0, 0, 0, 0.4) 30%,
|
|
${colors.value.imageAccent}),
|
|
rgb(0, 0, 0);
|
|
background-size: cover;
|
|
background-position: center;
|
|
`;
|
|
self.setCss(self.attribute.bgStyle);
|
|
}
|
|
});
|
|
|
|
self.hook(player, () => {
|
|
execAsync(['bash', '-c', `[[ -f "${player.cover_path}" ]] &&
|
|
coloryou "${player.cover_path}" | grep -v Warning`])
|
|
.then((out) => {
|
|
if (!Mpris.players.find((p) => player === p)) {
|
|
return;
|
|
}
|
|
|
|
colors.value = JSON.parse(out);
|
|
|
|
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;
|
|
`;
|
|
|
|
// @ts-expect-error
|
|
if (!self?.get_parent()?.attribute.dragging) {
|
|
self.setCss(self.attribute.bgStyle);
|
|
}
|
|
}).catch((err) => {
|
|
if (err !== '') {
|
|
print(err);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
});
|
|
|
|
/** @param {Player} player */
|
|
export const TitleLabel = (player) => Label({
|
|
xalign: 0,
|
|
max_width_chars: 40,
|
|
truncate: 'end',
|
|
justification: 'left',
|
|
class_name: 'title',
|
|
label: player.bind('track_title'),
|
|
});
|
|
|
|
/** @param {Player} player */
|
|
export const ArtistLabel = (player) => Label({
|
|
xalign: 0,
|
|
max_width_chars: 40,
|
|
truncate: 'end',
|
|
justification: 'left',
|
|
class_name: 'artist',
|
|
label: player.bind('track_artists')
|
|
.transform((a) => a.join(', ') || ''),
|
|
});
|
|
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Overlay} overlay
|
|
*/
|
|
export const PlayerIcon = (player, overlay) => {
|
|
/**
|
|
* @param {Player} p
|
|
* @param {Overlay=} widget
|
|
* @param {Overlay=} over
|
|
*/
|
|
const playerIcon = (p, widget, over) => CursorBox({
|
|
tooltip_text: p.identity || '',
|
|
|
|
on_primary_click_release: () => {
|
|
widget?.attribute.moveToTop(over);
|
|
},
|
|
|
|
child: Icon({
|
|
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;
|
|
});
|
|
},
|
|
}),
|
|
});
|
|
|
|
return Box().hook(Mpris, (self) => {
|
|
const thisIndex = overlay.attribute.list()
|
|
.indexOf(self?.get_parent()?.get_parent());
|
|
|
|
self.children = Array.from(overlay.attribute.list())
|
|
.map((over, i) => {
|
|
self.children.push(Separator(2));
|
|
|
|
return i === thisIndex ?
|
|
playerIcon(player) :
|
|
playerIcon(over.attribute.player, overlay, over);
|
|
})
|
|
.reverse();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Variable} colors
|
|
*/
|
|
export const PositionSlider = (player, colors) => Slider({
|
|
class_name: 'position-slider',
|
|
cursor: 'pointer',
|
|
vpack: 'center',
|
|
hexpand: true,
|
|
draw_value: false,
|
|
|
|
on_change: ({ value }) => {
|
|
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')
|
|
.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}; }
|
|
`);
|
|
}
|
|
})
|
|
.on('button-press-event', () => {
|
|
self.cursor = 'grabbing';
|
|
})
|
|
.on('button-release-event', () => {
|
|
self.cursor = 'pointer';
|
|
});
|
|
},
|
|
});
|
|
|
|
const PlayerButton = ({
|
|
player,
|
|
colors,
|
|
items,
|
|
onClick,
|
|
prop,
|
|
}) => CursorBox({
|
|
child: Button({
|
|
attribute: { hovered: false },
|
|
child: Stack({ items }),
|
|
|
|
on_primary_click_release: () => player[onClick](),
|
|
|
|
on_hover: (self) => {
|
|
self.attribute.hovered = true;
|
|
|
|
if (prop === 'playBackStatus' && colors.value) {
|
|
const c = colors.value;
|
|
|
|
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;
|
|
`);
|
|
});
|
|
}
|
|
},
|
|
|
|
on_hover_lost: (self) => {
|
|
self.attribute.hovered = false;
|
|
if (prop === 'playBackStatus' && colors.value) {
|
|
const c = colors.value;
|
|
|
|
Array.from(items).forEach((item) => {
|
|
item[1].setCss(`
|
|
background-color: ${c.buttonAccent};
|
|
color: ${c.buttonText};
|
|
min-height: 42px;
|
|
min-width: 38px;
|
|
`);
|
|
});
|
|
}
|
|
},
|
|
|
|
setup: (self) => {
|
|
self
|
|
.hook(player, () => {
|
|
// @ts-expect-error
|
|
self.child.shown = `${player[prop]}`;
|
|
})
|
|
.hook(colors, () => {
|
|
if (!Mpris.players.find((p) => player === p)) {
|
|
return;
|
|
}
|
|
|
|
if (colors.value) {
|
|
const c = colors.value;
|
|
|
|
if (prop === 'playBackStatus') {
|
|
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 {
|
|
Array.from(items).forEach((item) => {
|
|
item[1].setCss(`
|
|
background-color: ${c.buttonAccent};
|
|
color: ${c.buttonText};
|
|
min-height: 42px;
|
|
min-width: 38px;
|
|
`);
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
self.setCss(`
|
|
* { color: ${c.buttonAccent}; }
|
|
*:hover { color: ${c.hoverAccent}; }
|
|
`);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}),
|
|
});
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Variable} colors
|
|
*/
|
|
export const ShuffleButton = (player, colors) => PlayerButton({
|
|
player,
|
|
colors,
|
|
items: [
|
|
['true', Label({
|
|
class_name: 'shuffle enabled',
|
|
label: icons.mpris.shuffle.enabled,
|
|
})],
|
|
['false', Label({
|
|
class_name: 'shuffle disabled',
|
|
label: icons.mpris.shuffle.disabled,
|
|
})],
|
|
],
|
|
onClick: 'shuffle',
|
|
prop: 'shuffleStatus',
|
|
});
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Variable} colors
|
|
*/
|
|
export const LoopButton = (player, colors) => PlayerButton({
|
|
player,
|
|
colors,
|
|
items: [
|
|
['None', Label({
|
|
class_name: 'loop none',
|
|
label: icons.mpris.loop.none,
|
|
})],
|
|
['Track', Label({
|
|
class_name: 'loop track',
|
|
label: icons.mpris.loop.track,
|
|
})],
|
|
['Playlist', Label({
|
|
class_name: 'loop playlist',
|
|
label: icons.mpris.loop.playlist,
|
|
})],
|
|
],
|
|
onClick: 'loop',
|
|
prop: 'loopStatus',
|
|
});
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Variable} colors
|
|
*/
|
|
export const PlayPauseButton = (player, colors) => PlayerButton({
|
|
player,
|
|
colors,
|
|
items: [
|
|
['Playing', Label({
|
|
class_name: 'pausebutton playing',
|
|
label: icons.mpris.playing,
|
|
})],
|
|
['Paused', Label({
|
|
class_name: 'pausebutton paused',
|
|
label: icons.mpris.paused,
|
|
})],
|
|
['Stopped', Label({
|
|
class_name: 'pausebutton stopped paused',
|
|
label: icons.mpris.stopped,
|
|
})],
|
|
],
|
|
onClick: 'playPause',
|
|
prop: 'playBackStatus',
|
|
});
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Variable} colors
|
|
*/
|
|
export const PreviousButton = (player, colors) => PlayerButton({
|
|
player,
|
|
colors,
|
|
items: [
|
|
['true', Label({
|
|
class_name: 'previous',
|
|
label: icons.mpris.prev,
|
|
})],
|
|
['false', Label({
|
|
class_name: 'previous',
|
|
label: icons.mpris.prev,
|
|
})],
|
|
],
|
|
onClick: 'previous',
|
|
prop: 'canGoPrev',
|
|
});
|
|
|
|
/**
|
|
* @param {Player} player
|
|
* @param {Variable} colors
|
|
*/
|
|
export const NextButton = (player, colors) => PlayerButton({
|
|
player,
|
|
colors,
|
|
items: [
|
|
['true', Label({
|
|
class_name: 'next',
|
|
label: icons.mpris.next,
|
|
})],
|
|
['false', Label({
|
|
class_name: 'next',
|
|
label: icons.mpris.next,
|
|
})],
|
|
],
|
|
onClick: 'next',
|
|
prop: 'canGoNext',
|
|
});
|