itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ratings): Subsonic entity ratings and StarRating UX

Browse Source 
Probe OpenSubsonic after connect; persist album/artist ratings via setRating when supported. Add shared StarRating (repeat same star to clear, pulse and shrink animations, hover freeze after clear). Widen tracklist duration column and bump narrow saved widths in localStorage. Use StarRating in AlbumHeader, track lists, and playlist rows.
This commit is contained in:
Maxim Isaev
2026-04-08 01:08:41 +03:00
parent c1624342d3
commit 705c80ef07
20 changed files with 462 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+44 -1
View File
@@ -997,7 +997,50 @@
gap: var(--space-2);
color: var(--text-muted);
font-size: 13px;
margin: var(--space-2) 0 var(--space-4);
margin: var(--space-2) 0 var(--space-2);
}
.album-detail-entity-rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-4);
}
/* Inline with label: do not stretch to full row width */
.album-detail-entity-rating .star-rating {
width: auto;
justify-content: flex-start;
}
.album-detail-entity-rating-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.artist-detail-entity-rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-3);
}
.artist-detail-entity-rating .star-rating {
width: auto;
justify-content: flex-start;
}
.artist-detail-entity-rating-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.album-detail-actions {
src/styles/theme.css
+68
View File
@@ -3800,6 +3800,74 @@ select.input.input:focus {
cursor: pointer;
}
/* While clearing: no yellow hover until pointer leaves or next click */
.star-rating--suppress-hover .star:hover {
color: var(--ctp-overlay1);
}
.star-rating--disabled {
opacity: 0.55;
}
.star-rating--disabled .star:hover {
color: inherit;
cursor: not-allowed;
}
.star-rating .star {
transform-origin: center center;
}
@keyframes star-rating-star-pulse {
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(1.3);
opacity: 0.88;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.star-rating .star.star--pulse {
animation: star-rating-star-pulse 0.38s ease-out;
}
@keyframes star-rating-star-clear-shrink {
0% {
transform: scale(1);
opacity: 1;
}
55% {
transform: scale(0.58);
opacity: 0.28;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.star-rating .star.star--clear-shrink {
animation: star-rating-star-clear-shrink 0.44s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.star-rating .star.star--pulse,
.star-rating .star.star--clear-shrink {
animation: none;
}
}
/* ─── Animations ─── */
@keyframes fadeIn {
from {