Algorithm

src/App.jsx

@@ -1,16 +1,29 @@
 import Player from "./Player/Player";
 import "./Player/player.scss";
-import { songsdata } from "./Player/AudioData.js";
 import { useRef, useState, useEffect } from "react";
+import RedBlackTree from "./algorithms/red_black_tree.js";
+import { song_dll } from "./Player/AudioData.js";
+import { BsArrowsExpandVertical } from "react-icons/bs";
+
+// apil change start
 
 const App = () => {
-  const [songs, setSongs] = useState(songsdata);
+  //Inserting songsdata into redblack tree
+  const songsTree = new RedBlackTree();
+
+  songsdata.forEach((item) => {
+    songsTree.add(item.title, item.url);
+  });
+
+  const [songs, setSongs] = useState(song_dll);
+
   const [isplaying, setisplaying] = useState(false);
-  const [currentSong, setCurrentSong] = useState(songsdata[1]);
+  const [currentSong, setCurrentSong] = useState(window.current_song_ptr);
 
   const audioElem = useRef();
 
   useEffect(() => {
+    songs;
     if (isplaying) {
       audioElem.current.play();
     } else {
@@ -29,9 +42,20 @@ const App = () => {
     });
   };
 
+  //Returns new sorted list of songs object
+  const sortByTitle = (rb_tree) => {
+    const emptyList = [];
+    const sortedList = rb_tree.inOrderTraversal(rb_tree.root, emptyList);
+    return sortedList;
+  };
+
   return (
     <div className="center-content">
-      <audio src={currentSong.url} ref={audioElem} onTimeUpdate={onPlaying} />
+      <audio
+        src={currentSong.data.url}
+        ref={audioElem}
+        onTimeUpdate={onPlaying}
+      />
       <Player
         songs={songs}
         setSongs={setSongs}

src/Player/AudioData.js

@@ -1,22 +1,95 @@
+// apil change
+
+// import song1 from "../assets/music/02. Paul Flint - Savage.mp3";
+// import song3 from "../assets/music/03. Retrovision - Puzzle.mp3";
+// import song2 from "../assets/music/04. Syn Cole - Feel Good.mp3";
+
+// import fs from "fs";
+
+// const directoryPath = "../assets/music";
+
+// // Read the contents of the directory
+// const readDirectory = async (directoryPath) => {
+//   const file_array = await fs.readdir(directoryPath, (err, files) => {
+//     const array = [];
+//     if (err) {
+//       console.error("Error reading directory:", err);
+//       return;
+//     }
+
+//     files.forEach((file) => {
+//       array.push(file);
+//     });
+//     return array;
+//   });
+//   return file_array;
+// };
+
+// const data = setTimeout(() => readDirectory(directoryPath), 50);
+// console.log(data);
+
+// const songsdata = [
+//   {
+//     title: "Paul Flint - Savage",
+//     url: song1,
+//   },
+//   {
+//     title: "Retrovision - Puzzle",
+//     url: song2,
+//   },
+//   {
+//     title: "Syn Cole - Feel Good",
+//     url: song3,
+//   },
+// ];
+// export { songsdata };
+
+//apil change end
+
+import DoublyLinkedList from "../algorithms/dll";
 import song1 from "../assets/music/02. Paul Flint - Savage.mp3";
 import song3 from "../assets/music/03. Retrovision - Puzzle.mp3";
 import song2 from "../assets/music/04. Syn Cole - Feel Good.mp3";
+import RedBlackTree from "../algorithms/red_black_tree";
+// import { cursorTo } from "readline";
 
-const songsdata = [
-    {
-        "title": "Paul Flint - Savage",
-        "url": song1
-    },
-    {
-        "title": "Retrovision - Puzzle",
-        "url": song2
-    },
-    {
-        "title": "Syn Cole - Feel Good",
-        "url": song3
-    }
-]
-export { songsdata };
+class song_node {
+  constructor() {
+    this.title = null;
+    this.url = null;
+  }
+}
+
+const s1 = new song_node();
+const s3 = new song_node();
+const s2 = new song_node();
+
+s1.title = "Paul Flint - Savage";
+s1.url = song1;
+
+s2.title = "Syn Cole - Feel Good";
+s2.url = song2;
+
+s3.title = "Retrovision - Puzzle";
+s3.url = song3;
+
+const song_dll = new DoublyLinkedList();
+song_dll.pushBack(s1);
+song_dll.pushBack(s2);
+song_dll.pushBack(s3);
+
+const songTree = new RedBlackTree();
+let cur_ptr = song_dll.head;
+while (cur_ptr != null) {
+  songTree.add(cur_ptr.data.title, cur_ptr.data);
+  cur_ptr = cur_ptr.next;
+}
+
+const sortedList = songTree.inOrderTraversal(songTree.root);
+console.log(sortedList);
+
+window.current_song_ptr = song_dll.head;
+export { song_dll, songTree, sortedList, song_node };
 
 //Better Data
 // let savage = {
@@ -283,4 +356,4 @@ export { songsdata };
 //     audio: null,
 //     isFav: null,
 //     duration: 161,
-//   };
+//   };

src/Player/Player.jsx

@@ -1,91 +1,90 @@
-import  { useRef } from 'react';
-import './player.scss';
-import {BsFillPlayCircleFill, BsFillPauseCircleFill, BsFillSkipStartCircleFill, BsFillSkipEndCircleFill} from 'react-icons/bs';
-
-const Player = ({audioElem, isPlaying, setIsPlaying, currentSong, setCurrentSong, songs})=> {
-
+import { useRef } from "react";
+import "./player.scss";
+import {
+  BsFillPlayCircleFill,
+  BsFillPauseCircleFill,
+  BsFillSkipStartCircleFill,
+  BsFillSkipEndCircleFill,
+} from "react-icons/bs";
+const Player = ({
+  audioElem,
+  isPlaying,
+  setIsPlaying,
+  currentSong,
+  setCurrentSong,
+
+}) => {
   const clickRef = useRef();
 
-  const PlayPause = ()=>
-  {
+  const PlayPause = () => {
     setIsPlaying(!isPlaying);
+  };
 
-  }
-
-
-  const checkWidth = (e)=>
-  {
+  const checkWidth = (e) => {
     let width = clickRef.current.clientWidth;
     const offset = e.nativeEvent.offsetX;
 
-    const divprogress = offset / width * 100;
-    audioElem.current.currentTime = divprogress / 100 * currentSong.length;
+    const divprogress = (offset / width) * 100;
+    audioElem.current.currentTime = (divprogress / 100) * currentSong.length;
+  };
 
-  }
+  const skipBack = () => {
 
-  const skipBack = ()=>
-  {
-    const index = songs.findIndex(x=>x.title == currentSong.title);
-    if (index == 0)
-    {
-      setCurrentSong(songs[songs.length - 1])
-    }
-    else
-    {
-      setCurrentSong(songs[index - 1])
+    if (window.current_song_ptr.prev !== null) {
+      window.current_song_ptr = window.current_song_ptr.prev;
+      setCurrentSong(window.current_song_ptr);
     }
-    audioElem.current.currentTime = 0;
-
-  }
 
 
-  const skiptoNext = ()=>
-  {
-    const index = songs.findIndex(x=>x.title == currentSong.title);
+    audioElem.current.currentTime = 0;
+  };
 
-    if (index == songs.length-1)
-    {
-      setCurrentSong(songs[0])
-    }
-    else
-    {
-      setCurrentSong(songs[index + 1])
+  const skiptoNext = () => {
+    if (window.current_song_ptr.next !== null) {
+      window.current_song_ptr = window.current_song_ptr.next;
+      setCurrentSong(window.current_song_ptr);
     }
+
     audioElem.current.currentTime = 0;
-
-  }
+  };
 
   return (
-    <div className='player_container'>
+    <div className="player_container">
       <div className="title">
         <p>{currentSong.title}</p>
       </div>
       <div className="navigation">
         <div className="navigation_wrapper" onClick={checkWidth} ref={clickRef}>
-          <div className="seek_bar" style={{width: `${currentSong.progress+"%"}`}}></div>
+          <div
+            className="seek_bar"
+            style={{ width: `${currentSong.progress + "%"}` }}
+          ></div>
         </div>
       </div>
       <div className="controls">
-        <BsFillSkipStartCircleFill className='btn_action' onClick={skipBack}/>
-        {isPlaying ? <BsFillPauseCircleFill className='btn_action pp' onClick={PlayPause}/> : <BsFillPlayCircleFill className='btn_action pp' onClick={PlayPause}/>}
-        <BsFillSkipEndCircleFill className='btn_action' onClick={skiptoNext}/>        
+        <BsFillSkipStartCircleFill className="btn_action" onClick={skipBack} />
+        {isPlaying ? (
+          <BsFillPauseCircleFill
+            className="btn_action pp"
+            onClick={PlayPause}
+          />
+        ) : (
+          <BsFillPlayCircleFill className="btn_action pp" onClick={PlayPause} />
+        )}
+        <BsFillSkipEndCircleFill className="btn_action" onClick={skiptoNext} />
       </div>
     </div>
-
-  )
-}
-
-export default Player
-
-import PropTypes from 'prop-types';
+  );
+};
 
+export default Player;
 
+import PropTypes from "prop-types";
 
 Player.propTypes = {
   audioElem: PropTypes.object, // or other appropriate PropType
   isPlaying: PropTypes.bool,
   setIsPlaying: PropTypes.func,
   currentSong: PropTypes.object,
   setCurrentSong: PropTypes.func,
-  songs: PropTypes.array
-};
+};