feat(ui): Show indeterminate state for non-positional players

FoxxMD · Oct 25, 2024 · c498bde · c498bde
1 parent 0c9b496
commit c498bde
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 31 deletions.
diff --git a/src/client/components/player/Player.tsx b/src/client/components/player/Player.tsx
@@ -94,7 +94,7 @@ art = {},
                         <p className="subtitle">{calculated !== 'stopped' ? artists.join(' / ') : '-'}</p>
                     </div>
 
-                    <PlayerTimestamp duration={duration} current={data.position || 0} />
+                    <PlayerTimestamp duration={duration} indeterminate={calculated === 'playing' && data.position === undefined} current={data.position || 0} />
                     <div className="flex">
                         <p className="stats flex-1 text-left">Status: {capitalize(calculated)}</p>
                         <p className="stats flex-1 text-right">Listened: {calculated !== 'stopped' ? `${listenedDuration.toFixed(0)}s` : '-'}{durPer}</p>

diff --git a/src/client/components/player/PlayerTimestamp.tsx b/src/client/components/player/PlayerTimestamp.tsx
@@ -4,6 +4,7 @@ import './timestamp.scss';
 export interface TimestampProps {
     current: number
     duration: number
+    indeterminate?: boolean
 }
 
 const convertTime = (rawTime: number) => {
@@ -19,44 +20,17 @@ const convertTime = (rawTime: number) => {
 const Timestamp = (props: TimestampProps) => {
     return(
         <div className="timestamp">
-            <div className="timestamp__current">
-                {convertTime(Math.floor(props.current))}
+            <div className="timestamp__current" style={{left: props.indeterminate ? '1em' : '0'}}>
+                {props.indeterminate ? '-' : convertTime(Math.floor(props.current))}
             </div>
             <div className="timestamp__progress">
-                <div style={{ width: (props.current === 0 && props.duration === 0 ? 0 : Math.floor((props.current / props.duration) * 100)) + "%" }}></div>
+                <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>
             </div>
             <div className="timestamp__total">
                 {convertTime(Math.floor(props.duration) - Math.floor(props.current))}
             </div>
         </div>
     );
 }
-/*export class TimestampC extends React.Component {
-    convertTime(time) {
-        let mins = Math.floor(time / 60);
-        let seconds = time - (mins * 60);
-        if (seconds < 10) {
-            seconds = "0" + seconds;
-        }
-        time = mins + ":" + seconds;
-        return time;
-    }
-
-    render() {
-        return(
-            <div className="timestamp">
-                <div className="timestamp__current">
-                    {this.convertTime(this.props.current)}
-                </div>
-                <div className="timestamp__progress">
-                    <div style={{ width: Math.floor((this.props.current / this.props.duration) * 100) + "%" }}></div>
-                </div>
-                <div className="timestamp__total">
-                    {this.convertTime(this.props.duration - this.props.current)}
-                </div>
-            </div>
-        );
-    }
-}*/
 
 export default Timestamp;
diff --git a/src/client/components/player/timestamp.scss b/src/client/components/player/timestamp.scss
@@ -34,6 +34,13 @@ $primary: #556a77;
       bottom: 0;
       background: $primary;
     }
+
+    > div.indeterminate {
+      background-color: #ECEFF1;
+      animation: indeterminateAnimation 3s infinite linear;
+      transform-origin: 0% 50%;
+      background: $primary;
+    }
   }
 
   &__current {
@@ -44,3 +51,15 @@ $primary: #556a77;
     right: 0;
   }
 }
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform:  translateX(0) scaleX(0);
+  }
+  50% {
+    transform:  translateX(0) scaleX(0.5);
+  }
+  100% {
+    transform:  translateX(100%) scaleX(0.5);
+  }
+}