Strange animation and behavior on end

Podlove Web Player
1

Hello! I really like the player and the templating possibilities! So my template looks like this (sorry, no expert so maybe a little convoluted):

<root data-test="player--l" style="min-width:260px;">
  <div class="flex items-center">
   <play-button class="mr-5" variant="simple"></play-button>
   <div class="flex-grow">
    <episode-title class="text-base"></episode-title>
    <play-state on="initialized">
     <div class="flex">
      <episode-subtitle class="text-sm grow"></episode-subtitle>
     </div>
    </play-state>
    <play-state on="active">
     <div class="items-center">
      <div class="flex items-center">
       <step-backward class="mr-5"></step-backward>
       <progress-bar class="grow"></progress-bar>
       <timer-duration class="ml-5"></timer-duration>
      </div>
     </div>
    </play-state>
    <play-state on="ended">
     <div class="flex">
      <episode-subtitle class="text-sm grow"></episode-subtitle>
     </div>
    </play-state>
   </div>
  </div>
</root>

Two things which are not optimal:

  • The animation when hitting play: When I hit play I was hoping that the subtitle gets replaced by the progress bar, but first the progress bar appears below, then the subtitle disappears and finally the progress bar moves up. Is there a way to change this?
  • When the audio ends and when I hit play again, the simple play button becomes the big play button. When I pause and play, it changes back to be the simple play.

Is there a way to fix these issues? Thank you very much!