<root data-test="player--l" style="max-width:950px;min-width:260px;">
  <div class="p-4 flex flex-col">
    <div class="flex-col items-center mobile:flex tablet:hidden">
      <show-title class="text-sm"></show-title>
      <episode-title class="text-base mb-2"></episode-title>
      <subscribe-button class="mb-4 mobile:flex tablet:hidden"></subscribe-button>
      <poster class="rounded-sm w-48 shadow overflow-hidden"></poster>
      <divider class="w-full my-4"></divider>
    </div>

    <div class="tablet:flex flex-grow">
      <div class="w-40 mobile:hidden tablet:block tablet:mr-6">
        <poster class="rounded-sm shadow overflow-hidden"></poster>
      </div>
      <div class="w-full">
        <div class="hidden tablet:block">
          <div class="flex justify-between items-center">
            <div>
              <show-title class="text-base"></show-title>
              <episode-title class="text-xl"></episode-title>
            </div>
            <subscribe-button></subscribe-button>
          </div>
          <divider class="w-full my-4"></divider>
        </div>
        <div class="flex w-full items-center justify-center">
          <play-button class="block mr-5" variant="simple"></play-button>
          <timer-current class="text-base mr-5 hidden tablet:block"></timer-current>
          <progress-bar class="mr-5"></progress-bar>
          <timer-duration class="text-base"></timer-duration>
        </div>
      </div>
    </div>
  </div>
  <error></error>
</root>
