OKru-Playlist-Player ใช้ Tailwind CSS v2

ผมได้ปรับปรุงโค้ดเพื่อรองรับข้อมูลจาก attribute ใหม่ๆ และเพิ่มความยืดหยุ่นในการจัดการเพลย์ลิสต์ต่างๆ ดังนี้:

1. เพิ่มฟังก์ชัน parsePlaylistData เพื่อแยกวิเคราะห์ข้อมูลจาก dataset ต่างๆ:
   javascript

   Copy

   function parsePlaylistData(data) {
return data.split(',').map(item => {
const parts = item.split('|');
return {
platform: parts[0],
videoId: parts[1],
episode: parts[2],
title: parts[3],
series: parts[4] || '',
duration: parts[5] || '',
fullTitle: parts[6] || parts[3],
type: parts[7] || '',
tags: (parts[8] || '').split(';'),
views: parts[9] || '0',
likes: parts[10] || '0',
order: parts[11] || '0'
};
});
}
2. สร้างออบเจ็กต์ playlists เพื่อเก็บข้อมูลเพลย์ลิสต์ทั้งหมด:
   javascript

   Copy

   const playlists = {
new: parsePlaylistData(playlistArticle.dataset.playlistNew),
recommended: parsePlaylistData(playlistArticle.dataset.playlistRecommended),
popular: parsePlaylistData(playlistArticle.dataset.playlistPopular)
};
3. เพิ่ม dropdown เพื่อเลือกเพลย์ลิสต์:
   html

   Copy

   <select id="playlist-selector" class="p-2 border rounded">
<option value="new">New</option>
<option value="recommended">Recommended</option>
<option value="popular">Popular</option>
</select>
4. ปรับปรุงฟังก์ชัน createPlaylistItems เพื่อแสดงข้อมูลเพิ่มเติมของวิดีโอ:
   javascript

   Copy

   function createPlaylistItems() {
playlistItemsContainer.innerHTML = '';
playlists[currentPlaylist].forEach((video, index) => {
// ... (โค้ดสร้าง playlist item)
});
updateRemainingVideos();
}
5. เพิ่ม event listener สำหรับการเปลี่ยนเพลย์ลิสต์:
   javascript

   Copy

   playlistSelector.addEventListener('change', (e) => {
currentPlaylist = e.target.value;
currentVideoIndex = 0;
createPlaylistItems();
playVideo(0);
});
6. ปรับปรุงฟังก์ชัน playVideo เพื่อใช้ข้อมูลจากเพลย์