350 lines
11 KiB
JavaScript
350 lines
11 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 EventBox from '../misc/cursorbox.js';
|
|
|
|
const icons = {
|
|
mpris: {
|
|
fallback: 'audio-x-generic-symbolic',
|
|
shuffle: {
|
|
enabled: '',
|
|
disabled: '',
|
|
},
|
|
loop: {
|
|
none: '',
|
|
track: '',
|
|
playlist: '',
|
|
},
|
|
playing: ' ',
|
|
paused: ' ',
|
|
stopped: ' ',
|
|
prev: '',
|
|
next: '',
|
|
},
|
|
};
|
|
|
|
|
|
export const CoverArt = (player, props) => CenterBox({
|
|
...props,
|
|
vertical: true,
|
|
properties: [['bgStyle', '']],
|
|
setup: self => {
|
|
// Give temp cover art
|
|
readFileAsync(player.coverPath).catch(() => {
|
|
if (!player.colors.value && !player.trackCoverUrl) {
|
|
player.colors.value = {
|
|
'imageAccent': '#6b4fa2',
|
|
'buttonAccent': '#ecdcff',
|
|
'buttonText': '#25005a',
|
|
'hoverAccent': '#d4baff',
|
|
};
|
|
|
|
self._bgStyle = `
|
|
background: radial-gradient(circle,
|
|
rgba(0, 0, 0, 0.4) 30%,
|
|
${player.colors.value.imageAccent}),
|
|
rgb(0, 0, 0);
|
|
background-size: cover;
|
|
background-position: center;
|
|
`;
|
|
self.setCss(self._bgStyle);
|
|
}
|
|
});
|
|
},
|
|
connections: [[player, self => {
|
|
execAsync(['bash', '-c', `[[ -f "${player.coverPath}" ]] &&
|
|
coloryou "${player.coverPath}" | grep -v Warning`])
|
|
.then(out => {
|
|
if (!Mpris.players.find(p => player === p))
|
|
return;
|
|
|
|
player.colors.value = JSON.parse(out);
|
|
|
|
self._bgStyle = `
|
|
background: radial-gradient(circle,
|
|
rgba(0, 0, 0, 0.4) 30%,
|
|
${player.colors.value.imageAccent}),
|
|
url("${player.coverPath}");
|
|
background-size: cover;
|
|
background-position: center;
|
|
`;
|
|
|
|
if (!self.get_parent()._dragging)
|
|
self.setCss(self._bgStyle);
|
|
}).catch(err => {
|
|
if (err !== '')
|
|
print(err);
|
|
});
|
|
}]],
|
|
});
|
|
|
|
export const TitleLabel = (player, props) => Label({
|
|
...props,
|
|
xalign: 0,
|
|
maxWidthChars: 40,
|
|
truncate: 'end',
|
|
justification: 'left',
|
|
className: 'title',
|
|
binds: [['label', player, 'track-title']],
|
|
});
|
|
|
|
export const ArtistLabel = (player, props) => Label({
|
|
...props,
|
|
xalign: 0,
|
|
maxWidthChars: 40,
|
|
truncate: 'end',
|
|
justification: 'left',
|
|
className: 'artist',
|
|
binds: [['label', player, 'track-artists', a => a.join(', ') || '']],
|
|
});
|
|
|
|
export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
|
|
// Get player's icon
|
|
const MainIcon = Icon({
|
|
...props,
|
|
className: 'player-icon',
|
|
size: 32,
|
|
tooltipText: player.identity || '',
|
|
connections: [[player, self => {
|
|
const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
|
|
lookUpIcon(name) ? self.icon = name
|
|
: self.icon = icons.mpris.fallback;
|
|
}]],
|
|
});
|
|
// Multiple player indicators
|
|
return Box({
|
|
properties: [['overlay']],
|
|
connections: [[Mpris, self => {
|
|
if (!self._overlay)
|
|
self._overlay = self.get_parent().get_parent().get_parent();
|
|
|
|
const overlays = self._overlay.list();
|
|
|
|
const player = overlays.find(overlay => {
|
|
return overlay === self.get_parent().get_parent();
|
|
});
|
|
|
|
const index = overlays.indexOf(player);
|
|
|
|
const children = [];
|
|
for (let i = 0; i < overlays.length; ++i) {
|
|
if (i === index) {
|
|
children.push(Separator(2));
|
|
children.push(MainIcon);
|
|
}
|
|
else {
|
|
children.push(Separator(2));
|
|
// TODO: make this clickable to switch
|
|
children.push(Box({ className: 'position-indicator' }));
|
|
}
|
|
}
|
|
self.children = children.reverse();
|
|
}]],
|
|
});
|
|
};
|
|
|
|
export const PositionSlider = (player, props) => Slider({
|
|
...props,
|
|
className: 'position-slider',
|
|
cursor: 'pointer',
|
|
vpack: 'center',
|
|
hexpand: true,
|
|
drawValue: false,
|
|
onChange: ({ value }) => {
|
|
player.position = player.length * value;
|
|
},
|
|
properties: [['update', slider => {
|
|
if (!slider.dragging) {
|
|
slider.visible = player.length > 0;
|
|
if (player.length > 0)
|
|
slider.value = player.position / player.length;
|
|
}
|
|
}]],
|
|
connections: [
|
|
[player, s => s._update(s), 'position'],
|
|
[1000, s => s._update(s)],
|
|
[player.colors, s => {
|
|
const c = player.colors.value;
|
|
if (player.colors.value) {
|
|
s.setCss(`
|
|
highlight { background-color: ${c.buttonAccent}; }
|
|
slider { background-color: ${c.buttonAccent}; }
|
|
slider:hover { background-color: ${c.hoverAccent}; }
|
|
trough { background-color: ${c.buttonText}; }
|
|
`);
|
|
}
|
|
}],
|
|
|
|
['button-press-event', s => { s.cursor = 'grabbing'; }],
|
|
['button-release-event', s => { s.cursor = 'pointer'; }],
|
|
],
|
|
});
|
|
|
|
const PlayerButton = ({ player, items, onClick, prop }) => EventBox({
|
|
child: Button({
|
|
child: Stack({ items }),
|
|
onPrimaryClickRelease: () => player[onClick](),
|
|
properties: [['hovered', false]],
|
|
onHover: self => {
|
|
self._hovered = true;
|
|
|
|
if (prop == 'playBackStatus') {
|
|
items.forEach(item => {
|
|
item[1].setCss(`
|
|
background-color: ${player.colors.value.hoverAccent};
|
|
color: ${player.colors.value.buttonText};
|
|
min-height: 40px;
|
|
min-width: 36px;
|
|
margin-bottom: 1px;
|
|
margin-right: 1px;
|
|
`);
|
|
});
|
|
}
|
|
},
|
|
onHoverLost: self => {
|
|
self._hovered = false;
|
|
if (prop == 'playBackStatus') {
|
|
items.forEach(item => {
|
|
item[1].setCss(`
|
|
background-color: ${player.colors.value.buttonAccent};
|
|
color: ${player.colors.value.buttonText};
|
|
min-height: 42px;
|
|
min-width: 38px;
|
|
`);
|
|
});
|
|
}
|
|
},
|
|
connections: [
|
|
[player, button => {
|
|
button.child.shown = `${player[prop]}`;
|
|
}],
|
|
|
|
[player.colors, button => {
|
|
if (!Mpris.players.find(p => player === p))
|
|
return;
|
|
|
|
if (player.colors.value) {
|
|
if (prop == 'playBackStatus') {
|
|
if (button._hovered) {
|
|
items.forEach(item => {
|
|
item[1].setCss(`
|
|
background-color: ${player.colors.value.hoverAccent};
|
|
color: ${player.colors.value.buttonText};
|
|
min-height: 40px;
|
|
min-width: 36px;
|
|
margin-bottom: 1px;
|
|
margin-right: 1px;
|
|
`);
|
|
});
|
|
}
|
|
else {
|
|
items.forEach(item => {
|
|
item[1].setCss(`
|
|
background-color: ${player.colors.value.buttonAccent};
|
|
color: ${player.colors.value.buttonText};
|
|
min-height: 42px;
|
|
min-width: 38px;`);
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
button.setCss(`
|
|
* { color: ${player.colors.value.buttonAccent}; }
|
|
*:hover { color: ${player.colors.value.hoverAccent}; }
|
|
`);
|
|
}
|
|
}
|
|
}],
|
|
],
|
|
}),
|
|
});
|
|
|
|
export const ShuffleButton = player => PlayerButton({
|
|
player,
|
|
items: [
|
|
['true', Label({
|
|
className: 'shuffle enabled',
|
|
label: icons.mpris.shuffle.enabled,
|
|
})],
|
|
['false', Label({
|
|
className: 'shuffle disabled',
|
|
label: icons.mpris.shuffle.disabled,
|
|
})],
|
|
],
|
|
onClick: 'shuffle',
|
|
prop: 'shuffleStatus',
|
|
});
|
|
|
|
export const LoopButton = player => PlayerButton({
|
|
player,
|
|
items: [
|
|
['None', Label({
|
|
className: 'loop none',
|
|
label: icons.mpris.loop.none,
|
|
})],
|
|
['Track', Label({
|
|
className: 'loop track',
|
|
label: icons.mpris.loop.track,
|
|
})],
|
|
['Playlist', Label({
|
|
className: 'loop playlist',
|
|
label: icons.mpris.loop.playlist,
|
|
})],
|
|
],
|
|
onClick: 'loop',
|
|
prop: 'loopStatus',
|
|
});
|
|
|
|
export const PlayPauseButton = player => PlayerButton({
|
|
player,
|
|
items: [
|
|
['Playing', Label({
|
|
className: 'pausebutton playing',
|
|
label: icons.mpris.playing,
|
|
})],
|
|
['Paused', Label({
|
|
className: 'pausebutton paused',
|
|
label: icons.mpris.paused,
|
|
})],
|
|
['Stopped', Label({
|
|
className: 'pausebutton stopped paused',
|
|
label: icons.mpris.stopped,
|
|
})],
|
|
],
|
|
onClick: 'playPause',
|
|
prop: 'playBackStatus',
|
|
});
|
|
|
|
export const PreviousButton = player => PlayerButton({
|
|
player,
|
|
items: [
|
|
['true', Label({
|
|
className: 'previous',
|
|
label: icons.mpris.prev,
|
|
})],
|
|
['false', Label({
|
|
className: 'previous',
|
|
label: icons.mpris.prev,
|
|
})],
|
|
],
|
|
onClick: 'previous',
|
|
prop: 'canGoPrev',
|
|
});
|
|
|
|
export const NextButton = player => PlayerButton({
|
|
player,
|
|
items: [
|
|
['true', Label({
|
|
className: 'next',
|
|
label: icons.mpris.next,
|
|
})],
|
|
['false', Label({
|
|
className: 'next',
|
|
label: icons.mpris.next,
|
|
})],
|
|
],
|
|
onClick: 'next',
|
|
prop: 'canGoNext',
|
|
});
|