vidstack-hook.js

vidstack-hook.js

/*
  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';

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");

      this.handleEvent("gathered-metadata", ({media_format, src, mime_type, autoplay, inactivity_timeout, muted, poster, playback_second_index, attempting_media_format_switch}) => {
          console.log("gathered-metadata");

          if (attempting_media_format_switch == true) {

            player = document.querySelector('media-player');
            console.log(player);              
            player.pause()
            // player.destroy()
            console.log(player);              

            player = document.querySelector('media-player');
            console.log(player);              

            player.currentTime = playback_second_index

            player.addEventListener('can-play', (event) => {

              // original media event (`loadedmetadata`) is still available.
              console.log("player.addEventListener can-play");
              const originalMediaEvent = event.trigger;

              player.currentTime = playback_second_index

            });

            player.addEventListener("time-update", (event) => {
              console.log(event.detail.currentTime);
              // console.log("The currentTime attribute has been updated. Again.");
          });

          console.log("attempting_media_format_switch == true");
          console.log(src);
          console.log(media_format);
          console.log(mime_type);
          console.log(poster);


          player.onAttach(() => {
            console.log("player.onAttach");
            player.src = [
                // { src: 'https://media-files.vidstack.io/720p.ogv', type: 'video/ogg' },
                { src: src, type: mime_type },
                // { src: 'https://media-files.vidstack.io/720p.mp4', type: 'video/mp4' },
            ];
            player.poster = poster;
            }); 

          } else {
            console.log("attempting_media_format_switch == false");
            console.log(src);
            console.log(media_format);
            console.log(mime_type);
            console.log(poster);

            const player = document.querySelector('media-player');

            player.addEventListener('can-play', (event) => {

                // original media event (`loadedmetadata`) is still available.
                console.log("player.addEventListener can-play");
                const originalMediaEvent = event.trigger;

                player.currentTime = playback_second_index

              });

              player.addEventListener("time-update", (event) => {
            });

            player.onAttach(() => {

                player.src = [
                    { src: src, type: mime_type },
                ];

                player.poster = poster;
                });   
          }

      });

      this.pushEvent('gather-video-js-metadata', {});
  },

  // 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;