Tạo danh sách tập phim có tính năng VIP

<style>
/*<![CDATA[*/
.video-container{max-width:700px;margin:20px auto;text-align:center;background-color:#f9f9f9;padding:20px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.1)}#videoPlayer{width:100%;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.episode-list{list-style:none;padding:0;margin:20px 0 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.episode-item{margin:0}.episode-number{font-size:14px;font-weight:500;position:relative;display:inline-block;padding:8px 12px;cursor:pointer;border-radius:5px;background-color:#34495e;color:#ecf0f1;transition:background-color 0.3s ease,transform 0.3s ease;box-shadow:0 2px 5px rgba(0,0,0,0.1);text-align:center;min-width:50px}.episode-number:hover{background-color:#2c3e50;transform:scale(1.05)}.episode-number.disabled{cursor:not-allowed;opacity:0.5;background-color:#7f8c8d}.vip-badge{position:absolute;top:-5px;right:-5px;background-color:#e74c3c;color:white;border-radius:50%;padding:2px 6px;font-size:10px;font-weight:bold;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.active{background-color:#1abc9c;border:1px solid #16a085;transform:scale(1.05);color:white}.hidden{display:none}#vipMessage{margin-top:20px;font-size:16px;color:#e74c3c;font-weight:bold}#loginStatus{margin-top:20px;display:flex;justify-content:center;gap:10px}#loginStatus input{padding:8px 12px;border-radius:5px;border:1px solid #ccc;font-size:14px}#loginBtn,#logoutBtn{padding:8px 15px;background-color:#34495e;color:#ecf0f1;border:none;border-radius:5px;cursor:pointer;transition:background-color 0.3s ease}#loginBtn:hover{background-color:#2c3e50}#loginMessage{margin-top:10px;font-size:14px;color:#e74c3c}
/*]]>*/
</style>
<div class='video-container'>
  <p>Tài khoản TEST:  <strong>user123</strong> | pass: <strong>user123</strong></p>
    <video controls='' id='videoPlayer'>
        <source id='videoSource' src='' type='video/mp4'/> Trình duyệt của bạn không hỗ trợ thẻ video.
    </video>
    <ul class='episode-list' id='episodeList'/>
    <div class='hidden' id='vipMessage'>Bạn cần đăng ký VIP để xem tập này.</div>
<div id='loginStatus'>
    <input id='userID' placeholder='ID người dùng' type='text'/>
    <input id='password' placeholder='Mật khẩu' type='password'/>
    <button id='loginBtn'>Đăng nhập</button>
    <button id='logoutBtn'>Đăng xuất</button>
</div>
<p id='loginMessage'/>
</div>  
<script>
  //<![CDATA[
  // Danh sách các thông tin đăng nhập hợp lệ
  const userCredentials = [{
    id: 'user123',
    password: 'user123'
  }, {
    id: 'user456',
    password: 'user456'
  }];

  // Danh sách ID người dùng VIP
  const vipAccounts = ['user123'];

  // Danh sách các tập phim
const episodes = [
  {
    url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4',
    isVIP: false
  },
  {
    url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4',
    isVIP: true
  },
  {
    url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4',
    isVIP: false
  },
  {
    url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
    isVIP: false
  },
  {
    url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4',
    isVIP: true
  }
];

document.addEventListener("DOMContentLoaded", function() {
  let currentEpisode = 0;
  let isVIPUser = false;

  function loadUserState() {
    const storedUserID = sessionStorage.getItem("userID");
    const storedVIPStatus = sessionStorage.getItem("isVIPUser");

    if (storedUserID && storedVIPStatus) {
      isVIPUser = storedVIPStatus === 'true';
      const user = userCredentials.find(cred => cred.id === storedUserID);
      if (user) {
        isVIPUser = vipAccounts.includes(storedUserID);
      }
    }
  }

  function updateVideoSource(play = false) {
    const videoSource = document.getElementById("videoSource");
    const videoPlayer = document.getElementById("videoPlayer");
    const vipMessage = document.getElementById("vipMessage");
    const episodeItems = document.querySelectorAll(".episode-item");
    if (episodes[currentEpisode].isVIP && !isVIPUser) {
      videoSource.src = "";
      videoPlayer.load();
      vipMessage.classList.remove("hidden")
    } else {
      videoSource.src = episodes[currentEpisode].url;
      videoPlayer.load();
      vipMessage.classList.add("hidden");
      if (play) {
        videoPlayer.play()["catch"](error => {
          console.log("Video không thể phát tự động:", error)
        })
      }
    }
    episodeItems.forEach((item, index) => {
      if (index === currentEpisode) {
        item.classList.add("active")
      } else {
        item.classList.remove("active")
      }
    })
  }

  function selectEpisode(index) {
    if (index >= 0 && index < episodes.length) {
      if (episodes[index].isVIP && !isVIPUser) {
        return
      }
      currentEpisode = index;
      updateVideoSource(true)
    }
  }

  function renderEpisodeList() {
    const episodeList = document.getElementById("episodeList");
    episodeList.innerHTML = "";
    episodes.forEach((episode, index) => {
      const listItem = document.createElement("li");
      listItem.className = "episode-item";
      const episodeNumber = document.createElement("span");
      episodeNumber.className = "episode-number";
      episodeNumber.innerHTML = `Tập ${index+1}`;
      if (episode.isVIP) {
        const vipBadge = document.createElement("span");
        vipBadge.className = "vip-badge";
        vipBadge.textContent = "VIP";
        episodeNumber.appendChild(vipBadge);
        if (!isVIPUser) {
          episodeNumber.classList.add("disabled");
          episodeNumber.onclick = null
        }
      }
      episodeNumber.onclick = () => selectEpisode(index);
      listItem.appendChild(episodeNumber);
      episodeList.appendChild(listItem)
    })
  }

  function login() {
    const userID = document.getElementById("userID").value;
    const password = document.getElementById("password").value;
    const loginMessage = document.getElementById("loginMessage");
    const user = userCredentials.find(cred => cred.id === userID && cred.password === password);
    if (user) {
      isVIPUser = vipAccounts.includes(userID);
      loginMessage.textContent = "Đăng nhập thành công!";
      sessionStorage.setItem("userID", userID);
      sessionStorage.setItem("isVIPUser", isVIPUser);
      renderEpisodeList();
      updateVideoSource()
    } else {
      loginMessage.textContent = "ID người dùng hoặc mật khẩu không đúng."
    }
  }

  function logout() {
    sessionStorage.removeItem("userID");
    sessionStorage.removeItem("isVIPUser");
    isVIPUser = false;
    currentEpisode = 0;
    renderEpisodeList();
    updateVideoSource();
    document.getElementById("loginMessage").textContent = "Đăng xuất thành công!";
  }

  document.getElementById("loginBtn").addEventListener("click", login);
  document.getElementById("logoutBtn").addEventListener("click", logout); 

  loadUserState();
  renderEpisodeList();
  updateVideoSource();
});
  //]]>
</script>