/*
  Docs: https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks

  Usage: when using phx-hook, a unique DOM ID must always be set.

      <div phx-hook="ExampleHook" id="someUniqueId"></div>
*/

// import 'vidstack/styles/defaults.css'
// import 'vidstack/styles/community-skin/video.css'

// import { defineCustomElements } from 'vidstack/elements';
// import { VidstackPlayer, VidstackPlayerLayout } from 'vidstack/global/player';

// import { VidstackPlayer } from 'vidstack'
// import { VidstackPlayer, VidstackPlayerLayout } from 'https://cdn.vidstack.io/player';


// import { HlsFacade } from "../../vendor/superstreamer-player.js"
// import "../../vendor/player.js"



const VidstackHook = {
  // This function runs when the element has been added to the DOM and its server LiveView has finished mounting
  mounted() {
    // defineCustomElements();
    // let currentEl = this.el;

    // // console.log("VidstackHook mounted");
    // player = document.querySelector('media-player');
    console.log('hello!')


    var video = document.getElementById('video');
    if (Hls.isSupported()) {
      var hls = new Hls({
        debug: true,
      });
      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
      hls.attachMedia(video);
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        video.muted = true;
        video.play();
      });
    }
    // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
    // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
    // This is using the built-in support of the plain video element, without using hls.js.
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
      video.addEventListener('canplay', function () {
        video.play();
      });
    }






    // console.log(player);       
    // console.log(defineCustomElements)

    // defineCustomElements()

    // VidstackPlayer.create({
    //   target: '#media-player',
    //   title: 'Sprite Fight',
    //   src: 'https://files.vidstack.io/sprite-fight/hls/stream.m3u8',
    //   poster: 'https://files.vidstack.io/sprite-fight/poster.webp',
    //   layout: new VidstackPlayerLayout({
    //     thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt',
    //   }),
    // });
  },

  // This function runs when the element is about to be updated in the DOM. Note: any call here must be synchronous as the operation cannot be deferred or cancelled.
  beforeUpdate() {},

  // This function runs when the element has been updated in the DOM by the server
  updated() {
    console.log("VidstackHook updated");
  },

  // This function runs when the element has been removed from the page, either by a parent update, or by the parent being removed entirely
  destroyed() {},

  // This function runs when the element's parent LiveView has disconnected from the server
  disconnected() {},

  // This function runs when the element's parent LiveView has reconnected to the server
  reconnected() {},
};

export default VidstackHook;