I’m working on a React app and aiming to integrate a feature similar to YouTube playlists. The goal is to allow users to start a playlist and prevent them from skipping videos within the playlist nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

import React, { useState } from 'react';
import YouTube from 'react-youtube';

const playlists = [
  {
    link: 'https://www.youtube.com/playlist?list=PLrEHtFUVEYE88BNHtLTlkZykS0jF_QaNH&jct=EMYMWuf98p83qC9FznbdrgWTV1ne7A',
    title: 'Crash Course Economics',
    description: 'In 35 episodes, Adriene Hill and Jacob Clifford teach you economics!',
    badgeName: 'Economics Badge',
  },
];

const extractPlaylistId = (link) => {
  const urlParams = new URLSearchParams(new URL(link).search);
  return urlParams.get('list');
};

const EducationRecommendation = () => {
  const [selectedPlaylist, setSelectedPlaylist] = useState(null);
  const [showPopup, setShowPopup] = useState(false);
  const [courseStarted, setCourseStarted] = useState(false);
  const [courseCompleted, setCourseCompleted] = useState(false);
  const [player, setPlayer] = useState(null);
  const [completedCourses, setCompletedCourses] = useState([]);

  const handleStartCourse = (playlist) => {
    setSelectedPlaylist(playlist);
    setShowPopup(true);
  };

  const confirmStartCourse = () => {
    setCourseStarted(true);
    setCourseCompleted(false);
    setShowPopup(false);
  };

  const onPlayerReady = (event) => {
    setPlayer(event.target);
    if (courseStarted) {
      event.target.playVideo();
    }
  };

  const onPlayerStateChange = (event) => {
    if (event.data === 1 && courseStarted) { // Playing
      event.target.unMute();
    } else if (event.data === 0) { // Ended
      const currentIndex = player.getPlaylistIndex();
      const playlistLength = player.getPlaylist().length;
      if (currentIndex === playlistLength - 1) {
        setCourseCompleted(true);
        setCourseStarted(false);
        setCompletedCourses([...completedCourses, selectedPlaylist.badgeName]);
      }
    } else if (event.data === 3 && courseStarted) { // Buffering
      const currentIndex = player.getPlaylistIndex();
      const currentTime = player.getCurrentTime();
      const duration = player.getDuration();
      if (currentIndex !== 0 || currentTime < duration * 0.9) {
        player.seekTo(currentTime);
      }
    }
  };

  return (
    <div>
      <h2>Educational Content Recommendations</h2>
      <div className="video-list">
        {playlists.map((playlist) => {
          const playlistId = extractPlaylistId(playlist.link);
          return (
            <div key={playlistId} className="video-item">
              <YouTube
                videoId=""
                opts={{
                  playerVars: {
                    listType: 'playlist',
                    list: playlistId,
                    disablekb: 1,
                    controls: 0,
                    rel: 0,
                    fs: 0,
                    iv_load_policy: 3,
                    modestbranding: 1,
                    showinfo: 0,
                  },
                }}
                onReady={onPlayerReady}
                onStateChange={onPlayerStateChange}
              />
              <h3>{playlist.title}</h3>
              <p>{playlist.description}</p>
              <button onClick={() => handleStartCourse(playlist)}>Start Course</button>
            </div>
          );
        })}
      </div>

      {showPopup && (
        <div className="popup">
          <div className="popup-content">
            <p>Do you want to start this course? Once started, you won't be able to skip videos.</p>
            <button onClick={confirmStartCourse}>Yes</button>
            <button onClick={() => setShowPopup(false)}>No</button>
          </div>
        </div>
      )}

      {courseCompleted && (
        <div className="badge-popup">
          <div className="popup-content">
            <p>Congratulations! You've completed the course and earned a badge!</p>
            <p>Earned Badge: {completedCourses[completedCourses.length - 1]}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default EducationRecommendation;

import React, { useState } from 'react';
import YouTube from 'react-youtube';

const playlists = [
  {
    link: 'https://www.youtube.com/playlist?list=PLrEHtFUVEYE88BNHtLTlkZykS0jF_QaNH&jct=EMYMWuf98p83qC9FznbdrgWTV1ne7A',
    title: 'Crash Course Economics',
    description: 'In 35 episodes, Adriene Hill and Jacob Clifford teach you economics!',
    badgeName: 'Economics Badge',
  },
];

const extractPlaylistId = (link) => {
  const urlParams = new URLSearchParams(new URL(link).search);
  return urlParams.get('list');
};

const EducationRecommendation = () => {
  const [selectedPlaylist, setSelectedPlaylist] = useState(null);
  const [showPopup, setShowPopup] = useState(false);
  const [courseStarted, setCourseStarted] = useState(false);
  const [courseCompleted, setCourseCompleted] = useState(false);
  const [player, setPlayer] = useState(null);
  const [completedCourses, setCompletedCourses] = useState([]);

  const handleStartCourse = (playlist) => {
    setSelectedPlaylist(playlist);
    setShowPopup(true);
  };

  const confirmStartCourse = () => {
    setCourseStarted(true);
    setCourseCompleted(false);
    setShowPopup(false);
  };

  const onPlayerReady = (event) => {
    setPlayer(event.target);
    if (courseStarted) {
      event.target.playVideo();
    }
  };

  const onPlayerStateChange = (event) => {
    if (event.data === 1 && courseStarted) { // Playing
      event.target.unMute();
    } else if (event.data === 0) { // Ended
      const currentIndex = player.getPlaylistIndex();
      const playlistLength = player.getPlaylist().length;
      if (currentIndex === playlistLength - 1) {
        setCourseCompleted(true);
        setCourseStarted(false);
        setCompletedCourses([...completedCourses, selectedPlaylist.badgeName]);
      }
    } else if (event.data === 3 && courseStarted) { // Buffering
      const currentIndex = player.getPlaylistIndex();
      const currentTime = player.getCurrentTime();
      const duration = player.getDuration();
      if (currentIndex !== 0 || currentTime < duration * 0.9) {
        player.seekTo(currentTime);
      }
    }
  };

  return (
    <div>
      <h2>Educational Content Recommendations</h2>
      <div className="video-list">
        {playlists.map((playlist) => {
          const playlistId = extractPlaylistId(playlist.link);
          return (
            <div key={playlistId} className="video-item">
              <YouTube
                videoId=""
                opts={{
                  playerVars: {
                    listType: 'playlist',
                    list: playlistId,
                    disablekb: 1,
                    controls: 0,
                    rel: 0,
                    fs: 0,
                    iv_load_policy: 3,
                    modestbranding: 1,
                    showinfo: 0,
                  },
                }}
                onReady={onPlayerReady}
                onStateChange={onPlayerStateChange}
              />
              <h3>{playlist.title}</h3>
              <p>{playlist.description}</p>
              <button onClick={() => handleStartCourse(playlist)}>Start Course</button>
            </div>
          );
        })}
      </div>

      {showPopup && (
        <div className="popup">
          <div className="popup-content">
            <p>Do you want to start this course? Once started, you won't be able to skip videos.</p>
            <button onClick={confirmStartCourse}>Yes</button>
            <button onClick={() => setShowPopup(false)}>No</button>
          </div>
        </div>
      )}

      {courseCompleted && (
        <div className="badge-popup">
          <div className="popup-content">
            <p>Congratulations! You've completed the course and earned a badge!</p>
            <p>Earned Badge: {completedCourses[completedCourses.length - 1]}</p>
          </div>
        </div>
      )}
    </div>
  );
 };

export default EducationRecommendation;