<turbo-stream action="update" target="tutorial_7_video_file"><template>
  <div class="bg-black flex items-center justify-center aspect-[4/3] xl:aspect-auto xl:max-w-[640px] xl:h-[480px] relative group"
         data-controller="video-chapters video-player"
         data-video-chapters-start-time-value="535"
         data-video-chapters-end-time-value="536"
         data-video-player-chapters-value="[{&quot;start_time&quot;:535,&quot;name&quot;:&quot;Recognize Melody Flow&quot;},{&quot;start_time&quot;:628,&quot;name&quot;:&quot;Recognize Melody Flow&quot;}]">
    <video id="lesson-video" autoplay="autoplay" preload="metadata" class="w-full h-full object-contain" data-video-chapters-target="video" data-video-player-target="video" data-action="click-&gt;video-player#togglePlay" src="/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTAxLCJwdXIiOiJibG9iX2lkIn19--7286af994c2ff0f8bf9e84b6bc7b9668e3cad2cf/video1363202835.mp4#t=535,536"></video>
      <!-- Custom Controls -->
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent px-4 pb-4 pt-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col gap-2 z-10"
       data-video-player-target="controls">
  <!-- Progress Bar Container -->
  <div class="relative h-1.5 bg-gray-600/50 rounded cursor-pointer group/progress hover:h-2 transition-all"
         data-video-player-target="progressContainer"
         data-action="click->video-player#seek mousemove->video-player#showThumbnail mouseleave->video-player#hideThumbnail">
    <!-- Progress Bar -->
    <div class="absolute top-0 left-0 h-full bg-blue-500 rounded pointer-events-none"
           data-video-player-target="progressBar"
           style="width: 0%"></div>
    <!-- Thumbnail Tooltip -->
    <div class="absolute bottom-6 hidden pointer-events-none bg-black border border-gray-700 rounded shadow-lg overflow-hidden w-32 z-50"
           data-video-player-target="thumbnailTooltip">
      <div class="bg-black/80 text-white text-[10px] px-1 py-0.5 text-center truncate hidden" data-video-player-target="chapterTitle"></div>
      <div class="aspect-video w-full">
        <video class="w-full h-full object-cover"
                 muted
                 preload="metadata"
                 data-video-player-target="thumbnailVideo"></video>
      </div>
    </div>
  </div>
  <!-- Buttons & Time -->
  <div class="flex items-center justify-between text-white">
    <div class="flex items-center gap-4">
      <button data-action="video-player#skipBackward" class="hover:text-blue-400 transition-colors" title="Rewind 10s">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5l-7 7 7 7M19 5l-7 7 7 7" /></svg>
      </button>
      <button data-action="video-player#togglePlay" class="hover:text-blue-400 transition-colors">
        <!-- Play Icon -->
        <svg data-video-player-target="playButton" class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
        <!-- Pause Icon -->
        <svg data-video-player-target="pauseButton" class="w-8 h-8 hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
      </button>
      <button data-action="video-player#skipForward" class="hover:text-blue-400 transition-colors" title="Forward 10s">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" /></svg>
      </button>
      <span data-video-player-target="timeDisplay" class="text-xs font-mono text-gray-300 ml-2">0:00 / 0:00</span>
    </div>
    <button data-action="video-player#toggleFullscreen" class="hover:text-blue-400 transition-colors">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
      </svg>
    </button>
  </div>
</div>

  </div>
  <div class="text-center text-sm text-gray-600 dark:text-gray-400 mb-2">
    Playing from 08:55 to 08:56
  </div>
  <div class="text-center space-x-12">
    <a class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 text-sm" href="/public/professors/34-phong-le/tutorials/7-melody-flow">
      <span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
        </svg> Back to Presentation</span>
</a>    <a data-turbo-frame="_top" class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 text-sm" href="/public/projects/34-sonatina-in-c-opus-20-no-1-jayanth-panneerselvam/episodes/68-annotating-melody-for-memorization">
      <span>Go to Lesson
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline">
          <path stroke-linecap="round" stroke-linejoin="round" d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3" />
        </svg>
      </span>
</a>  </div>
</template></turbo-stream>