[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients
docs.multi-scrobbler.app
deezer
docker
jellyfin
koito
lastfm
listenbrainz
maloja
mopidy
mpris
music
music-assistant
plex
scrobble
self-hosted
spotify
subsonic
tautulli
youtube-music
feat(ui): Show indeterminate state for non-positional players
+24
-31
+1
-1
src/client/components/player/Player.tsx
+1
-1
src/client/components/player/Player.tsx
···
94
94
<p className="subtitle">{calculated !== 'stopped' ? artists.join(' / ') : '-'}</p>
95
95
</div>
96
96
97
-
<PlayerTimestamp duration={duration} current={data.position || 0} />
97
+
<PlayerTimestamp duration={duration} indeterminate={calculated === 'playing' && data.position === undefined} current={data.position || 0} />
98
98
<div className="flex">
99
99
<p className="stats flex-1 text-left">Status: {capitalize(calculated)}</p>
100
100
<p className="stats flex-1 text-right">Listened: {calculated !== 'stopped' ? `${listenedDuration.toFixed(0)}s` : '-'}{durPer}</p>
+4
-30
src/client/components/player/PlayerTimestamp.tsx
+4
-30
src/client/components/player/PlayerTimestamp.tsx
···
4
4
export interface TimestampProps {
5
5
current: number
6
6
duration: number
7
+
indeterminate?: boolean
7
8
}
8
9
9
10
const convertTime = (rawTime: number) => {
···
19
20
const Timestamp = (props: TimestampProps) => {
20
21
return(
21
22
<div className="timestamp">
22
-
<div className="timestamp__current">
23
-
{convertTime(Math.floor(props.current))}
23
+
<div className="timestamp__current" style={{left: props.indeterminate ? '1em' : '0'}}>
24
+
{props.indeterminate ? '-' : convertTime(Math.floor(props.current))}
24
25
</div>
25
26
<div className="timestamp__progress">
26
-
<div style={{ width: (props.current === 0 && props.duration === 0 ? 0 : Math.floor((props.current / props.duration) * 100)) + "%" }}></div>
27
+
<div className={props.indeterminate ? 'indeterminate' : ''} style={{ width: props.indeterminate ? '100%' : (props.current === 0 && props.duration === 0 ? 0 : Math.floor((props.current / props.duration) * 100)) + "%" }}></div>
27
28
</div>
28
29
<div className="timestamp__total">
29
30
{convertTime(Math.floor(props.duration) - Math.floor(props.current))}
···
31
32
</div>
32
33
);
33
34
}
34
-
/*export class TimestampC extends React.Component {
35
-
convertTime(time) {
36
-
let mins = Math.floor(time / 60);
37
-
let seconds = time - (mins * 60);
38
-
if (seconds < 10) {
39
-
seconds = "0" + seconds;
40
-
}
41
-
time = mins + ":" + seconds;
42
-
return time;
43
-
}
44
-
45
-
render() {
46
-
return(
47
-
<div className="timestamp">
48
-
<div className="timestamp__current">
49
-
{this.convertTime(this.props.current)}
50
-
</div>
51
-
<div className="timestamp__progress">
52
-
<div style={{ width: Math.floor((this.props.current / this.props.duration) * 100) + "%" }}></div>
53
-
</div>
54
-
<div className="timestamp__total">
55
-
{this.convertTime(this.props.duration - this.props.current)}
56
-
</div>
57
-
</div>
58
-
);
59
-
}
60
-
}*/
61
35
62
36
export default Timestamp;
+19
src/client/components/player/timestamp.scss
+19
src/client/components/player/timestamp.scss
···
34
34
bottom: 0;
35
35
background: $primary;
36
36
}
37
+
38
+
> div.indeterminate {
39
+
background-color: #ECEFF1;
40
+
animation: indeterminateAnimation 3s infinite linear;
41
+
transform-origin: 0% 50%;
42
+
background: $primary;
43
+
}
37
44
}
38
45
39
46
&__current {
···
44
51
right: 0;
45
52
}
46
53
}
54
+
55
+
@keyframes indeterminateAnimation {
56
+
0% {
57
+
transform: translateX(0) scaleX(0);
58
+
}
59
+
50% {
60
+
transform: translateX(0) scaleX(0.5);
61
+
}
62
+
100% {
63
+
transform: translateX(100%) scaleX(0.5);
64
+
}
65
+
}