Shaker 500ml

.is-hidden {
  display: none;
}

document.querySelectorAll('.influencer-card').forEach(card => {
  const video = card.querySelector('video');
  const btnPlay = card.querySelector('.btn__play');
  const btnMute = card.querySelector('.btn__mute');
  const btnUnmute = card.querySelector('.btn__unmute');

  if (!video || !btnPlay || !btnMute || !btnUnmute) return;

  const setState = (state) => {
    // stopped | playing-muted | playing-unmuted
    const isStopped = state === 'stopped';

    card.classList.toggle('is-playing', !isStopped);

    btnPlay.classList.toggle('is-hidden', !isStopped);
    btnMute.classList.toggle('is-hidden', state !== 'playing-unmuted');
    btnUnmute.classList.toggle('is-hidden', state !== 'playing-muted');
  };

  const resetCard = (targetCard) => {
    const targetVideo = targetCard.querySelector('video');
    const targetPlay = targetCard.querySelector('.btn__play');
    const targetMute = targetCard.querySelector('.btn__mute');
    const targetUnmute = targetCard.querySelector('.btn__unmute');

    if (!targetVideo || !targetPlay || !targetMute || !targetUnmute) return;

    targetVideo.pause();
    // targetVideo.currentTime = 0;
    targetVideo.muted = true;

    targetCard.classList.remove('is-playing');

    targetPlay.classList.remove('is-hidden');
    targetMute.classList.add('is-hidden');
    targetUnmute.classList.add('is-hidden');
  };

  const pauseCard = (targetCard) => {
    const targetVideo = targetCard.querySelector('video');
    const targetPlay = targetCard.querySelector('.btn__play');
    const targetMute = targetCard.querySelector('.btn__mute');
    const targetUnmute = targetCard.querySelector('.btn__unmute');

    if (!targetVideo || !targetPlay || !targetMute || !targetUnmute) return;

    targetVideo.pause();
    targetVideo.muted = true;

    // targetCard.classList.remove('is-playing');

    // targetPlay.classList.remove('is-hidden');
    // targetMute.classList.add('is-hidden');
    // targetUnmute.classList.add('is-hidden');
  };

  const stopAllOthers = () => {
    document.querySelectorAll('.influencer-card').forEach(otherCard => {
      if (otherCard === card) return;
      resetCard(otherCard);
    });
  };

  resetCard(card);

  btnPlay.addEventListener('click', async (e) => {
    e.preventDefault();
    e.stopPropagation();

    stopAllOthers();

    try {
      video.muted = false;
      await video.play();
      setState('playing-unmuted');
    } catch (err) {
      console.warn('Play failed:', err);
    }
  });

  btnMute.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();

    video.muted = true;
    setState('playing-muted');
  });

  btnUnmute.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();

    video.muted = false;
    setState('playing-unmuted');
  });

  /*
  video.addEventListener(
    'click',
    (e) => {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();

      if (!video.paused) {
        pauseCard(card);
      } else {
        stopAllOthers();
        video.muted = false;
        video.play().then(() => {
          setState('playing-unmuted');
        }).catch(err => {
          console.warn('Video toggle failed:', err);
        });
      }
    },
    true
  );
*/
  video.addEventListener('ended', () => {
    resetCard(card);
  });
});