@extends('layouts.admin.app')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/defaults.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/community-skin/video.min.css" />
    <script type="module" src="https://cdn.jsdelivr.net/npm/vidstack/dist/cdn/prod.js"></script>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header"></div>
                <div class="card-body">
                    
                      <div class="row mt-4">
                        <div class="mb-lg-0 mb-4">
                          <div class="card z-index-2">
                            <div class="card-body p-3">
                              <div class="{{-- bg-gradient-dark  --}}border-radius-lg py-3 pe-1 mb-3">
                                <div class="chart">
                                  <media-player title="Sprite Fight" src="/storage/videos/{{ $video }}.m3u8"
                                  poster="/storage/thumbnails/{{ $video }}.jpg" thumbnails="storage/thumbnails.vtt"
                                  aspect-ratio="16/9" crossorigin>
                                  <media-outlet>
                                      <media-poster alt="Waves"></media-poster>
                                      {{-- <track src="https://media-files.vidstack.io/sprite-fight/subs/english.vtt" label="English"
                                          srclang="en-US" kind="subtitles" default /> --}}
                                      <track src="/videos/2023-10-30/lUxd7oCv9U0HGU6sEGoXbQCXdBju9VTKMkGXiadd.mp4"  srclang="en-US" kind="chapters" default />
                                  </media-outlet>
                                  <media-community-skin></media-community-skin>
                              </media-player>
                                </div>
                              </div>
                              <h6 class="ms-2 mt-4 mb-0"> {{$video->title}}</h6>
                              <p class="text-sm ms-2"> {{$video->description}}</p>
                      
                            </div>
                          </div>
                        </div>
                       
                      </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", (event) => {

      const player = document.querySelector('media-player');
      const firstQuality = player.qualities[1];


      console.log(firstQuality)

     /*  player.onAttach(() => {
          player.subscribe(({
              qualities,
              quality,
              autoQuality,
              canSetQuality
          }) => {
              console.log(qualities)
          });
      }); */
  });
</script>
@endsection