Current time is not displayed correctly based on track type

[KyryloPikhno]

Hi Hanz Luo, I just wanted to express a huge thank you for your work on the audio player! I don't know if this is a bug or not. I'll write just in case. Please help me figure it out.

Description: When using the code for the audio player, there is an issue with displaying the current playback time. The problem occurs when reassigning customProgressBarSection depending on the track type.

Steps to Reproduce: Load the page with the audio player. Switch the track type. Notice that the current playback time does not update according to the new track type.

Expected Behavior: It was expected that when switching the track type, the current playback time would be displayed correctly on the player.

Actual Behavior: The current playback time does not update after reassigning customProgressBarSection depending on the track type.

const customProgressBarSection = isTrackLive
    ? [
        <div
          className="bg-[#000000] gap-1 w-[48px] sm:text-[13px] text-[12px] sm:h-[23px] h-[16px] px-1 rounded-full text-white flex justify-center items-center"
          key={0}
        >
          <div className="w-2 h-2 rounded-full bg-[#FC272D]" />
          <p>Live</p>
        </div>,
      ]
    : [RHAP_UI.CURRENT_TIME, RHAP_UI.PROGRESS_BAR, RHAP_UI.DURATION]

return (
    <div>
        <AudioPlayer
            autoPlay={false}
            customProgressBarSection={customProgressBarSection}
            layout="stacked-reverse"
            loop={false}
            src={mediaUrl}
            timeFormat="hh:mm:ss"
        />
        {/* Other code here */}
    </div>
);

Environment React version: 18.2.0 Browser: latest versions of chrome OS: macOS (13.0.1)

[lhz516]

The layout wasn't designed to be dynamically set, but it's a reasonable feature. PRs are welcome.

[KyryloPikhno]

@lhz516 Understand. Thank you.