initial commit

src/components/AudioPlayer.jsx

@@ -0,0 +1,58 @@
+import {useState, React} from "react";
+import jQuery from "jquery";
+import Play from '@mui/icons-material/PlayArrow';
+import Pause from '@mui/icons-material/Pause';
+
+<style>
+  @import "@styles/player.css";
+</style>
+
+export const render = false;
+
+const PlayIcon = () => {
+    return (
+        <Play />
+    );
+}
+
+const PauseIcon = () => {
+    return (
+        <Pause />
+    )
+}
+
+export function Player() {
+    const [isPlaying, setPlaying] = useState(false);
+    window.isPlaying = isPlaying;
+  return (
+    <div>
+    <div className="c-containter">
+        <div className="music-container">
+            <section className="album-cover">
+                
+                <img src="https://api.codey.lol/radio/album_art" className="cover" alt="Cover Art" />
+                
+            </section>
+            <section className="music-player">
+                <h1 className='music-player__header'>serious.FM</h1>
+                <h1 className="music-player__title"></h1>
+                <h2 className="music-player__author"></h2>
+                <h2 className="music-player__genre"></h2>
+                <div className="music-time">
+                    <p className="music-time__current"></p>
+                    <p className="music-time__last"></p>
+                </div>
+                <div className="music-bar" id="progress">
+                    <div id="length"></div>
+                </div>
+                <div className="music-control">
+                    <div className="music-control__play" id="play">
+                        {isPlaying == false && (<Play onClick={(e) => { setPlaying(!isPlaying); togglePlayback(); } } />)}
+                        {isPlaying && (<Pause onClick={(e) => { setPlaying(!isPlaying); togglePlayback(); }} />)}
+                    </div>
+                </div>
+            </section>
+        </div>
+    </div>
+    </div>
+  )};