{% extends "base.html" %}
{% block extra_head %}
<style>
body {
  padding-bottom: 0 !important;
}
nav {
  display: none !important;
}
html,body {
  height: 100vh;
  height: 100dvh;
  background: black;
  margin: 0;
  overflow: hidden;
}
#container {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
}
video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  object-fit: contain;
}
.fab {
  position: fixed;
  bottom: 5.75rem;
  right: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1000;
}
.fab svg {
  width: 40px;
  height: 40px;
  color: #e3e3e3;
}
.speed-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.speed-text {
  color: #e3e3e3;
  font-size: 14px;
  font-weight: bold;
}
.is-active svg {
  fill: #ff0000;
}
</style>
{% endblock %}
{% block content %}
<div id="container">
  <div class="fab">
    <a id="speed-btn" class="speed-btn">
      <span class="speed-text">1x</span>
    </a>
    <a id="favorite-btn" data-value="">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
    </a>
    <a id="info-btn" href="">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    </a>
    <a href="/gallery">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
    </a>
  </div>
</div>
{% endblock %}
{% block extra_body %}
<script src="{{url_for('static', filename='hammer.min.js')}}"></script>
<script>
  (async() => {
    const infoBtn = document.querySelector("#info-btn");
    const favoriteBtn = document.getElementById("favorite-btn");
    const speedBtn = document.getElementById("speed-btn");
    const speedText = document.querySelector(".speed-text");
    const container = document.querySelector('#container');
    let videos = [];
    let index = 0;
    let isLoading = false;
    const speedOptions = [0.75, 1, 1.25, 1.5, 2];
    let currentSpeedIndex = 1; // 默认 1x

    async function loadVideos() {
      if (isLoading) return;
      isLoading = true;
      const res = await fetch('/api/videos');
      const newVideos = await res.json();
      newVideos.forEach(videoPath => {
        const video = document.createElement('video');
        video.controls = true;
        video.classList.add('video');
        video.muted = true;
        video.loop = true;
        video.dataset.name = videoPath;
        video.dataset.src = `/media/${videoPath}`;
        container.appendChild(video);
      });
      videos = container.querySelectorAll('video');
      isLoading = false;
    }

    await loadVideos();

    if (videos.length > 0) {
        videos[0].style.display = 'block';
        videos[0].src = videos[0].dataset.src;
        videos[0].load();
        videos[0].playbackRate = speedOptions[currentSpeedIndex];
        videos[0].play();

        infoBtn.href = `/detail/${videos[0].dataset.name}`;
        favoriteBtn.dataset.value = videos[0].dataset.name;
        const favoriteRes = await checkFavorite(videos[0].dataset.name);
        if(favoriteRes) {
          favoriteBtn.classList.add("is-active");
        } else {
          favoriteBtn.classList.remove("is-active");
        }
    }


    var manager = new Hammer.Manager(container);
    var Swipe = new Hammer.Swipe();
    manager.add(Swipe);
    manager.on('swipedown', async(e) => {
      //previous;
      if (videos.length === 0) return;

      let previous = index;
      index -= 1;
      if (index < 0) {
        index = videos.length - 1;
      }

      videos[previous].style.display = 'none';
      videos[previous].pause();
      videos[index].style.display = 'block';
      videos[index].muted = false;
      videos[index].playbackRate = speedOptions[currentSpeedIndex];
      videos[index].play();

      const value = videos[index].dataset.name;      
      infoBtn.href = `/detail/${value}`;
      const favoriteRes = await checkFavorite(value);
      favoriteBtn.dataset.value = value;
      if(favoriteRes) {
        favoriteBtn.classList.add("is-active");
      } else {
        favoriteBtn.classList.remove("is-active");
      }
    });
    manager.on('swipeup', async(e) => {
      //next;
      if (videos.length === 0) return;

      let previous = index;
      index += 1;
      if (index >= videos.length) {
        index = 0;
      }

      if (index >= videos.length - 5) {
          loadVideos();
      }

      videos[previous].style.display = 'none';
      videos[previous].pause();

      if (videos[index]) {
        videos[index].style.display = 'block';
        videos[index].src = videos[index].dataset.src;
        videos[index].load();
        videos[index].muted = false;
        videos[index].playbackRate = speedOptions[currentSpeedIndex];
        videos[index].play();

        const value = videos[index].dataset.name;      
        infoBtn.href = `/detail/${value}`;
        const favoriteRes = await checkFavorite(value);
        favoriteBtn.dataset.value = value;
        if(favoriteRes) {
          favoriteBtn.classList.add("is-active");
        } else {
          favoriteBtn.classList.remove("is-active");
        }
      }

    });

    async function checkFavorite(name) {
      const res = await fetch(`/api/favorite/${name}`);
      const resJson = await res.json();
      return resJson.favorite;
    }

    favoriteBtn.addEventListener("click", async(e) => {
      e.preventDefault();
      const value = favoriteBtn.dataset.value;
      const res = await fetch(`/api/favorite/${value}`, {
        method: 'POST'
      });
      favoriteBtn.classList.toggle("is-active");
    });

    speedBtn.addEventListener("click", (e) => {
      e.preventDefault();
      currentSpeedIndex = (currentSpeedIndex + 1) % speedOptions.length;
      const speed = speedOptions[currentSpeedIndex];
      speedText.textContent = speed + 'x';
      if (videos[index]) {
        videos[index].playbackRate = speed;
      }
    });
  })()
</script>
{% endblock %}