matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ags): add anim on playpause button in player

Browse source
This commit is contained in:
matt1432 2023-09-18 14:31:08 -04:00
parent b5784a9e48
commit 0004dd85be
3 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
config/ags/js/media-player/mpris.js
View file

@ -47,7 +47,7 @@ export const CoverArt = (player, params) => CenterBox({
}); });
export const TitleLabel = (player, params) => Label({ export const TitleLabel = (player, params) => Label({
...params, ...params,
xalign: 0, xalign: 0,
maxWidthChars: 40, maxWidthChars: 40,
truncate: 'end', truncate: 'end',
@ -167,7 +167,9 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.hoverAccent}; item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
color: ${player.colors.value.buttonText};`); color: ${player.colors.value.buttonText};
min-height: 40px; min-width: 36px;
margin-bottom: 1px; margin-right: 1px;`);
}); });
} }
}, },
@ -176,7 +178,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent}; item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};`); color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
}); });
} }
}, },
@ -190,7 +193,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
if (prop == 'playBackStatus') { if (prop == 'playBackStatus') {
items.forEach(item => { items.forEach(item => {
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent}; item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
color: ${player.colors.value.buttonText};`); color: ${player.colors.value.buttonText};
min-height: 42px; min-width: 38px;`);
}); });
} }
else { else {

17
config/ags/scss/widgets/player.scss
View file

@ -35,23 +35,24 @@
} }
.pausebutton { .pausebutton {
transition: background 250ms; transition: background-color ease .2s,
color ease .2s;
font-size: 15px; font-size: 15px;
min-height: 14px; padding: 4px 4px 4px 7px;
min-width: 14px;
padding: 14px 14px 14px 17px;
} }
.playing { .playing {
transition: all ease .2s; transition: background-color ease .2s,
color ease .2s;
border-radius: 15px; border-radius: 15px;
} }
.stopped, .stopped,
.paused { .paused {
border-radius: 26px; transition: background-color ease .2s,
transition: all ease .2s; color ease .2s;
padding: 14px 14px 14px 20px; border-radius: 26px;
padding: 4px 4px 4px 10px;
} }
button label { button label {
min-width: 35px; min-width: 35px;

12
config/ags/style.css
View file

@ -617,19 +617,17 @@ calendar:indeterminate {
.player .bottom { .player .bottom {
font-size: 30px; } font-size: 30px; }
.player .pausebutton { .player .pausebutton {
transition: background 250ms; transition: background-color ease .2s, color ease .2s;
font-size: 15px; font-size: 15px;
min-height: 14px; padding: 4px 4px 4px 7px; }
min-width: 14px;
padding: 14px 14px 14px 17px; }
.player .playing { .player .playing {
transition: all ease .2s; transition: background-color ease .2s, color ease .2s;
border-radius: 15px; } border-radius: 15px; }
.player .stopped, .player .stopped,
.player .paused { .player .paused {
transition: background-color ease .2s, color ease .2s;
border-radius: 26px; border-radius: 26px;
transition: all ease .2s; padding: 4px 4px 4px 10px; }
padding: 14px 14px 14px 20px; }
.player button label { .player button label {
min-width: 35px; } min-width: 35px; }