40 lines
1.0 KiB
JavaScript
40 lines
1.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import YouTube from 'react-youtube';
|
|
|
|
export function TrackPlayer({ next, queueList, setQueueList }) {
|
|
// Initial list of video IDs (YouTube video IDs)
|
|
const videos = [
|
|
'dQw4w9WgXcQ', // Example Video 1
|
|
'tgbNymZ7vqY', // Example Video 2
|
|
'oHg5SJYRHA0', // Example Video 3
|
|
];
|
|
|
|
// State to track the current video index
|
|
const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
|
|
|
|
// Function to handle video end event
|
|
const handleVideoEnd = () => {
|
|
// Update to next video or loop to the first video if at the end
|
|
setCurrentVideoIndex((prevIndex) => (prevIndex + 1) % videos.length);
|
|
};
|
|
|
|
// YouTube video player options
|
|
const opts = {
|
|
height: '390',
|
|
width: '640',
|
|
playerVars: {
|
|
autoplay: 1, // Automatically play the video
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<YouTube
|
|
videoId={videos[currentVideoIndex]} // Use the current video ID
|
|
opts={opts}
|
|
onEnd={handleVideoEnd} // Call handleVideoEnd when the video ends
|
|
/>
|
|
</div>
|
|
);
|
|
};
|