SHX-Theme/snippets/shx-video-base.liquid

{% assign content_type = content_type | default: 'awdawd' %}

{% if content_type == 'wasd' %}


{% elsif content_type == "init" %}

  <style type="text/css">

    .shx-video {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .shx-video__wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .shx-video__wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .shx-video-for-desc {
      max-width: 100%;
      height: 400px;
      width: 400px;

      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 0 auto;
    }

    .shx-video-card-product {
      width: 100%;
      height: auto;
      opacity: 0;

      position: absolute;
      top: 0;
      left: 0;

      transform: translate(-50%, -50%);
    }

  </style>

  <script type="text/javascript">

    // create Class for video in product card
    class ShxVideo extends HTMLElement {
      constructor() {
        super();
        
      }

      connectedCallback() {
        console.log('connected');
        this.initVideo();
        this.observer = new MutationObserver(this.initVideo.bind(this));
        this.observer.observe(this, { childList: true });
      }

      initVideo() {
        this.video = this.querySelector('video');
        if (!this.video) {
          console.error('No video element found');
          return;
        }
        console.log("video!", this.video);
        this.addEventListeners();
      }

      disconnectedCallback() {
        if (this.observer) {
          this.observer.disconnect();
        }
      }

      addEventListeners() { 

        if(!this.video) {
          console.error('No video element found');


          setTimeout(this.connectedCallback.bind(this), 1000);

          return;
        }

        // get parrent with class "card-wrapper product-card-wrapper"
        this.productCard = this.video.closest('.product-card-wrapper');
        console.log(this.productCard);

        //hover effect
        this.productCard.addEventListener('mouseenter', this.hoverEffectIn.bind(this));
        this.productCard.addEventListener('mouseleave', this.hoverEffectOut.bind(this));

        // play video on hover
        this.productCard.addEventListener('mouseenter', this.playVideo.bind(this));
        this.productCard.addEventListener('mouseleave', this.pauseVideo.bind(this));

        // also make it mobile friendly
        this.productCard.addEventListener('touchstart', this.hoverEffectIn.bind(this));
        this.productCard.addEventListener('touchend', this.hoverEffectOut.bind(this));

        this.productCard.addEventListener('touchstart', this.playVideo.bind(this));
        this.productCard.addEventListener('touchend', this.pauseVideo.bind(this));
      }

      destroy() {
        console.log('destroy');  

        this.productCard.removeEventListener('mouseenter', this.hoverEffectIn.bind(this));
        this.productCard.removeEventListener('mouseleave', this.hoverEffectOut.bind(this));
        this.productCard.removeEventListener('touchstart', this.hoverEffectIn.bind(this));
        this.productCard.removeEventListener('touchend', this.hoverEffectOut.bind(this));
        this.productCard.removeEventListener('mouseenter', this.playVideo.bind(this));
        this.productCard.removeEventListener('mouseleave', this.pauseVideo.bind(this));
        this.productCard.removeEventListener('touchstart', this.playVideo.bind(this));
        this.productCard.removeEventListener('touchend', this.pauseVideo.bind(this));
      }

      hoverEffectIn() {
        console.log('hover in');
        // use animejs
        anime({
          targets: this.video,
          scale: 1.1,
          opacity: 1,
          duration: 300,
          easing: 'easeOutQuad'
        });
      }

      hoverEffectOut() {
        console.log('hover out');
        // use animejs
        anime({
          targets: this.video,
          scale: 1,
          opacity: 0,
          duration: 300,
          easing: 'easeOutQuad'
        });
      }

      playVideo() {
        this.video.play();
      }

      pauseVideo() {
        this.video.pause();
      }
    }

    // register custom element
    customElements.define('shx-video-card-product', ShxVideo);

    /*
    // dom ready
    document.addEventListener('DOMContentLoaded', function() {
      const videos = document.querySelectorAll('.shx-video-card-product');
      videos.forEach(video => new ShxVideo(video));
    });

    // Assuming `document` is the target to observe
    const targetNode = document.querySelector('.product-card-wrapper');

    // Options for the observer (which mutations to observe)
    const config = { attributes: false, childList: true, subtree: true };

    // watch out for new video elements with class "shx-video-card-product"
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(node) {
          if (node.classList && node.classList.contains('shx-video-card-product')) {
            new ShxVideo(node);
            console.log('new video added', node);
          }
        });
      });
    });

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);

    setInterval(function() {
      // log all videos
    }, 1000);*/

  </script>

{% endif %}