index.html

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Youtube Playlist Embed</title>
    <!-- Thêm Bootstrap CDN -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Thêm FontAwesome CDN cho icon -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: #f8f9fa;
        padding: 30px;
      }
      .container {
        background-color: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
      .video-box {
        margin-top: 30px;
        max-height: 350px;
        overflow-y: auto;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        padding: 15px;
        background-color: #f9fafb;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
        display: none; /* Ẩn video box ban đầu */
      }
      .video-item {
        display: flex;
        align-items: center;
        background-color: #e9f5e9;
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
      }
      .video-item img {
        width: 80px;
        height: 45px;
        object-fit: cover;
        border-radius: 4px;
        margin-right: 12px;
      }
      .video-item:hover {
        background-color: #d0f0d0;
      }
      .json-box {
        margin-top: 20px;
        display: none; /* Ẩn json box ban đầu */
        padding: 15px;
        background-color: #f1f1f1;
        border-radius: 8px;
        font-family: monospace;
        white-space: pre-wrap;
        max-height: 300px;
        overflow-y: auto;
      }
      .history-box {
        margin-top: 20px;
        padding: 10px;
        background-color: #f1f1f1;
        border-radius: 8px;
      }
      .history-item {
        padding: 8px;
        margin-bottom: 8px;
        background-color: #fff;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
      }
      .history-item:hover {
        background-color: #e0f7fa;
      }
      .copy-all-button {
        background-color: #2196f3;
        color: white;
        border: none;
        cursor: pointer;
        font-weight: bold;
      }
      .copy-all-button:hover {
        background-color: #1e88e5;
      }
      .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1050;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h2 class="text-center mb-4">Nhập ID danh sách phát YouTube</h2>

      <!-- Input và Button -->
      <div class="input-group mb-3">
        <input
          type="text"
          id="playlistId"
          class="form-control"
          placeholder="VD: PL_-VfJajZj0Uo72G_6tSY4NRLpmffeXSA"
        />
        <button class="btn btn-success" onclick="loadVideos()">
          Lấy dữ liệu
        </button>
      </div>

      <!-- Video Box -->
      <div class="video-box" id="videoBox"></div>

      <!-- JSON Box -->
      <div class="json-box" id="jsonBox"></div>

      <div class="d-flex gap-2 mt-3 flex-wrap">
        <button
          class="copy-all-button btn btn-primary"
          onclick="copyAllLinks()"
        >
          <i class="fas fa-copy"></i> Sao chép tất cả liên kết
        </button>
        <button class="btn btn-info" onclick="copyJsonData()">
          <i class="fas fa-file-alt"></i> Sao chép JSON
        </button>
        <button class="btn btn-warning" onclick="refreshVideos()">
          <i class="fas fa-sync-alt"></i> Làm mới
        </button>
        <button class="btn btn-danger" onclick="resetData()">
          <i class="fas fa-trash"></i> Xóa dữ liệu
        </button>
        <button class="btn btn-secondary" onclick="toggleJsonBox()">
          <i class="fas fa-code"></i> Hiển thị JSON
        </button>
      </div>

      <!-- Lịch sử -->
      <div class="history-box mt-4" id="historySection">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h3>Lịch sử</h3>
          <button class="btn btn-danger" onclick="clearHistory()">
            <i class="fas fa-trash-alt"></i> Xóa lịch sử
          </button>
        </div>
        <div id="historyList"></div>
      </div>
    </div>

    <!-- Toasts -->
    <div class="toast-container">
      <div
        id="toast"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <strong class="me-auto">Thông báo</strong>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body" id="toastBody"></div>
      </div>
    </div>

    <!-- Thêm Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
      const apiKey = "YOUR_YOUTUBE_API_KEY_HERE"; // Thay thế bằng API key của bạn
      let nextPageToken = null;
      let videoLinks = [];
      let videoDetails = [];
      let history = JSON.parse(localStorage.getItem("history")) || [];

      function displayHistory() {
        const historySection = document.getElementById("historySection");
        const historyList = document.getElementById("historyList");
        historyList.innerHTML = "";
        if (history.length === 0) {
          historySection.style.display = "none";
        } else {
          historySection.style.display = "block";
          history.forEach((id) => {
            const item = document.createElement("div");
            item.className = "history-item";
            item.innerText = id;
            item.onclick = () => {
              document.getElementById("playlistId").value = id;
              resetState();
              loadVideos();
            };
            historyList.appendChild(item);
          });
        }
      }

      function showToast(msg) {
        document.getElementById("toastBody").innerText = msg;
        new bootstrap.Toast(document.getElementById("toast")).show();
      }

      async function loadVideos() {
        const playlistId = document.getElementById("playlistId").value.trim();
        if (!playlistId) return showToast("Vui lòng nhập ID danh sách phát");
        if (!history.includes(playlistId)) {
          history.push(playlistId);
          localStorage.setItem("history", JSON.stringify(history));
        }
        try {
          const plUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playlistId}&key=${apiKey}${
            nextPageToken ? `&pageToken=${nextPageToken}` : ""
          }`;
          const plRes = await fetch(plUrl);
          const plData = await plRes.json();
          if (!plData.items) throw new Error("Không lấy được playlist");

          // Lấy IDS
          const ids = plData.items
            .map((i) => i.snippet.resourceId.videoId)
            .join(",");
          const vidUrl = `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id=${ids}&key=${apiKey}`;
          const vidRes = await fetch(vidUrl);
          const vidData = await vidRes.json();

          const box = document.getElementById("videoBox");
          if (!nextPageToken) box.innerHTML = "";

          vidData.items.forEach((video) => {
            const id = video.id;
            const title = video.snippet.title;
            const thumb = video.snippet.thumbnails.default.url;
            const pub = video.snippet.publishedAt;
            const dur = formatDuration(video.contentDetails.duration);
            const embed = `https://www.youtube.com/embed/${id}`;
            videoLinks.push(embed);
            videoDetails.push({
              id,
              title,
              thumbnail: thumb,
              publishedAt: pub,
              duration: dur,
              url: embed,
            });

            const div = document.createElement("div");
            div.className = "video-item";
            div.innerHTML = `<img src="${thumb}" alt=""><div><b>${title}</b><br><small>Thời lượng: ${dur}</small></div>`;
            div.onclick = () => copyLink(embed);
            box.appendChild(div);
          });

          nextPageToken = plData.nextPageToken || null;
          if (nextPageToken) await loadVideos();
          else showToast("Hoàn thành tải");

          // Hiện video box
          document.getElementById("videoBox").style.display = "block";
          displayHistory();
        } catch (e) {
          console.error(e);
          showToast("Lỗi khi tải dữ liệu");
        }
      }

      function formatDuration(dur) {
        const m = dur.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
        const h = parseInt(m[1] || 0),
          min = parseInt(m[2] || 0),
          s = parseInt(m[3] || 0);
        return `${h ? h + ":" : ""}${String(min).padStart(2, "0")}:${String(
          s
        ).padStart(2, "0")}`;
      }

      function copyAllLinks() {
        navigator.clipboard.writeText(videoLinks.join("\n")).then(() => {
          showToast("Đã sao chép tất cả liên kết");
          videoLinks = []; // Xóa bộ nhớ sau khi sao chép
        });
      }

      function copyLink(url) {
        navigator.clipboard.writeText(url).then(() => {
          showToast("Đã sao chép liên kết");
          videoLinks = []; // Xóa bộ nhớ sau khi sao chép
        });
      }

      function copyJsonData() {
        if (!videoDetails.length) return showToast("Không có dữ liệu JSON");
        navigator.clipboard
          .writeText(JSON.stringify(videoDetails, null, 2))
          .then(() => {
            showToast("Đã sao chép JSON");
            videoDetails = []; // Xóa bộ nhớ sau khi sao chép
          });
      }

      function refreshVideos() {
        nextPageToken = null;
        videoLinks = [];
        videoDetails = [];
        loadVideos();
      }

      function resetData() {
        document.getElementById("playlistId").value = "";
        document.getElementById("videoBox").style.display = "none";
        document.getElementById("jsonBox").style.display = "none";
        resetState();
        showToast("Đã xóa dữ liệu");
      }

      function clearHistory() {
        if (confirm("Bạn có chắc chắn muốn xóa lịch sử không?")) {
          history = [];
          localStorage.setItem("history", "[]");
          displayHistory();
          showToast("Xóa lịch sử");
        }
      }

      function resetState() {
        nextPageToken = null;
        videoLinks = [];
        videoDetails = [];
        document.getElementById("videoBox").innerHTML = "";
      }

      function toggleJsonBox() {
        const jsonBox = document.getElementById("jsonBox");
        // Chuyển đổi giữa trạng thái ẩn/hiện
        if (jsonBox.style.display === "none") {
          jsonBox.style.display = "block";
          jsonBox.textContent = JSON.stringify(videoDetails, null, 2); // Cập nhật nội dung JSON ngay lập tức
        } else {
          jsonBox.style.display = "none";
        }
      }

      displayHistory();
    </script>
  </body>
</html>