improve for stream audio mode

packages/app/src/components/EmbbededMediaPlayer/index.jsx

@@ -2,7 +2,6 @@ import React from "react"
 import * as antd from "antd"
 import Slider from "@mui/material/Slider"
 import classnames from "classnames"
-import Ticker from "react-ticker"
 
 import { Icons, createIconRender } from "components/Icons"
 
@@ -38,6 +37,7 @@ class SeekBar extends React.Component {
         durationText: "00:00",
         sliderTime: 0,
         sliderLock: false,
+        streamMode: false,
     }
 
     handleSeek = (value) => {
@@ -58,6 +58,19 @@ class SeekBar extends React.Component {
         // get current audio duration
         const audioDuration = app.cores.player.duration()
 
+        // if duration is infinity, set stream mode
+        if (audioDuration === Infinity) {
+            this.setState({
+                streamMode: true,
+            })
+
+            return
+        }
+
+        if (isNaN(audioDuration)) {
+            return
+        }
+
         console.log(`Audio duration: ${audioDuration}`)
 
         // convert duration to minutes and seconds
@@ -150,6 +163,7 @@ class SeekBar extends React.Component {
             this.setState({
                 timeText: "00:00",
                 sliderTime: 0,
+                streamMode: false,
             })
 
             this.calculateDuration()
@@ -168,12 +182,14 @@ class SeekBar extends React.Component {
     }
 
     tick = () => {
-        if (this.props.playing) {
+        if (this.props.playing || this.state.streamMode) {
             this.interval = setInterval(() => {
                 this.updateAll()
             }, 1000)
         } else {
-            clearInterval(this.interval)
+            if (this.interval) {
+                clearInterval(this.interval)
+            }
         }
     }
 
@@ -199,12 +215,26 @@ class SeekBar extends React.Component {
     }
 
     render() {
-        return <div className="status">
-            <div className="progress">
+        return <div
+            className={classnames(
+                "status",
+                {
+                    ["hidden"]: !this.props.initialLoad,
+                }
+            )}
+        >
+            <div
+                className={classnames(
+                    "progress",
+                    {
+                        ["hidden"]: this.state.streamMode,
+                    }
+                )}
+            >
                 <Slider
                     size="small"
                     value={this.state.sliderTime}
-                    disabled={this.props.stopped}
+                    disabled={this.props.stopped || this.state.streamMode}
                     min={0}
                     max={100}
                     step={0.1}
@@ -232,7 +262,9 @@ class SeekBar extends React.Component {
                     <span>{this.state.timeText}</span>
                 </div>
                 <div>
-                    <span>{this.state.durationText}</span>
+                    {
+                        this.state.streamMode ? <antd.Tag>Live</antd.Tag> : <span>{this.state.durationText}</span>
+                    }
                 </div>
             </div>
         </div>
@@ -275,6 +307,7 @@ export default class AudioPlayer extends React.Component {
         bpm: app.cores.player.getState("trackBPM") ?? 0,
         showControls: false,
         minimized: false,
+        initialLoad: false,
     }
 
     events = {
@@ -283,6 +316,12 @@ export default class AudioPlayer extends React.Component {
         },
         "player.loading.update": (data) => {
             this.setState({ loading: data })
+
+            if (!data && !this.state.initialLoad) {
+                this.setState({
+                    initialLoad: true
+                })
+            }
         },
         "player.status.update": (data) => {
             this.setState({ playbackStatus: data })
@@ -456,6 +495,7 @@ export default class AudioPlayer extends React.Component {
                 <SeekBar
                     stopped={playbackStatus === "stopped"}
                     playing={playbackStatus === "playing"}
+                    initialLoad={this.state.initialLoad}
                 />
             </div>
         </div>

packages/app/src/components/EmbbededMediaPlayer/index.less

@@ -260,15 +260,31 @@
         align-self: center;
 
         width: 90%;
-
-        height: fit-content;
+        height: 100%;
 
         margin: 20px 0 10px 0;
 
         border-radius: 8px;
 
+        transition: all 150ms ease-in-out;
+
+        &.hidden {
+            height: 0px;
+            opacity: 0;
+            pointer-events: none;
+        }
+
         .progress {
             width: 100%;
+            height: 100%;
+
+            transition: all 150ms ease-in-out;
+
+            &.hidden {
+                opacity: 0;
+                height: 0;
+                pointer-events: none;
+            }
         }
 
         .timers {
@@ -279,6 +295,7 @@
             height: fit-content;
 
             justify-content: space-between;
+            align-items: center;
         }
 
         h1,