Dll

src/App.jsx

@@ -1,16 +1,17 @@
 import Player from "./Player/Player";
 import "./Player/player.scss";
-import { songsdata } from "./Player/AudioData.js";
 import { useRef, useState, useEffect } from "react";
+import { song_dll } from "./Player/AudioData.js";
+import { BsArrowsExpandVertical } from "react-icons/bs";
 
 const App = () => {
-  const [songs, setSongs] = useState(songsdata);
+  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(() => {
+  useEffect(() => {songs
     if (isplaying) {
       audioElem.current.play();
     } else {
@@ -31,7 +32,11 @@ const App = () => {
 
   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,40 @@
+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";
 
-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);
+
+
+
+window.current_song_ptr = song_dll.head;
+export {  song_dll, song_node };
+
 
 //Better Data
 // let savage = {
@@ -283,4 +301,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
-};
+};

src/algorithms/dll.js

@@ -0,0 +1,118 @@
+class Node {
+  constructor(data) {
+    this.data = data;
+    this.prev = null;
+    this.next = null;
+  }
+}
+
+class DoublyLinkedList {
+  constructor() {
+    this.head = null;
+    this.tail = null;
+    this.size = 0;
+  }
+
+  isEmpty() {
+    return this.size === 0;
+  }
+
+  back() {
+    if (this.isEmpty()) {
+      return null;
+    }
+    return this.tail.data;
+  }
+
+  front() {
+    if (this.isEmpty()) {
+      return null;
+    }
+    return this.head.data;
+  }
+
+  pushBack(data) {
+    const newNode = new Node(data);
+    if (this.isEmpty()) {
+      this.head = newNode;
+      this.tail = newNode;
+    } else {
+      this.tail.next = newNode;
+      newNode.prev = this.tail;
+      this.tail = newNode;
+    }
+    this.size++;
+  }
+
+  pushFront(data) {
+    const newNode = new Node(data);
+    if (this.isEmpty()) {
+      this.head = newNode;
+      this.tail = newNode;
+    } else {
+      newNode.next = this.head;
+      this.head.prev = newNode;
+      this.head = newNode;
+    }
+    this.size++;
+  }
+
+  popBack() {
+    if (this.isEmpty()) {
+      return null;
+    }
+    const removedData = this.tail.data;
+    if (this.size === 1) {
+      this.head = null;
+      this.tail = null;
+    } else {
+      this.tail = this.tail.prev;
+      this.tail.next = null;
+    }
+    this.size--;
+    return removedData;
+  }
+
+  popFront() {
+    if (this.isEmpty()) {
+      return null;
+    }
+    const removedData = this.head.data;
+    if (this.size === 1) {
+      this.head = null;
+      this.tail = null;
+    } else {
+      this.head = this.head.next;
+      this.head.prev = null;
+    }
+    this.size--;
+    return removedData;
+  }
+
+ display() {
+    let current = this.head;
+    while (current) {
+      console.log(current.data);
+      current = current.next;
+    }
+  }
+}
+
+export default DoublyLinkedList;
+// Example usage:
+const dll = new DoublyLinkedList();
+dll.pushBack(1);
+dll.pushBack("anup");
+dll.pushBack(3);
+// dll.display(); // Output: 1 anup 3
+var ptr = dll.head;
+ptr= ptr.next;
+ptr = ptr.prev;
+console.log(ptr.data);
+
+// console.log(dll.tail.prev.prev.data);
+
+
+
+
+