Add a music player

- but the size and position is odd
- will not be deployed to production

package.json

@@ -4,11 +4,9 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.9",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@madzadev/audio-player": "^2.1.13",
     "@mui/icons-material": "^5.11.9",
     "@mui/lab": "^5.0.0-alpha.120",
-    "@mui/material": "^5.11.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/components/ContentsPage/Content.js

@@ -2,12 +2,17 @@ import React from "react";
 import Profile from "../ProfilePage/Profile";
 import Stage from "../UI/Stage";
 import Menus from "../MenuPage/Menus";
+// import MusicPlayer from "../MusicPlayer/MusicPlayer";
 
 const Content = () => {
   return (
     <React.Fragment>
       <main className="w-full h-full">
-        <section className="background-black sm:flex-wrap md:w-full md:h-full md:flex md:justify-center md:items-center md:flex-nowrap">
+        <section>
+          {/* trial music player */}
+          {/* <MusicPlayer /> */}
+        </section>
+        <section className="background-black sm:flex-wrap md:w-full md:h-full md:flex md:justify-center md:items-center md:flex-nowrap md:-mt-12">
           <div className="md:-mr-12">
             <Menus />
           </div>

src/components/MusicPlayer/MusicPlayer.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Player from "@madzadev/audio-player";
+import "@madzadev/audio-player/dist/index.css";
+import { tracks } from "../../data/tracks";
+
+const MusicPlayer = () => {
+  return (
+    <div className="w-full h-18 text-sm">
+      <Player
+        trackList={tracks}
+        includeTags={false}
+        includeSearch={false}
+        showPlaylist={false}
+        sortTracks={false}
+        autoPlayNextTrack={true}
+      />
+    </div>
+  );
+};
+
+export default MusicPlayer;

src/data/tracks.js

@@ -0,0 +1,7 @@
+export const tracks = [
+  {
+    url: "https://storage.cloud.google.com/my-website-profile-16b19.appspot.com/music/%E1%84%8B%E1%85%AF%E1%86%AB%E1%84%85%E1%85%A7%E1%86%BC%E1%84%80%E1%85%A9%E1%86%BC%E1%84%8C%E1%85%AE(Princess%20Mononoke)%20OST%20-%20The%20Legend%20Of%20Ashitaka%20(Piano%20cover).mp4",
+    title: "The Legend Of Ashitaka (Piano cover).mp4",
+    tags: ["piano"],
+  },
+];

src/index.js

@@ -7,6 +7,7 @@ import "./styles/global.css";
 import "./styles/menus.css";
 import "./styles/btns.css";
 import "./styles/contents.css";
+// import "./styles/player.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

src/styles/player.css

@@ -0,0 +1,20 @@
+._wrapper_1sefb_1 {
+    width: 60%;
+    margin: auto;
+    overflow: hidden;
+} 
+
+._title_1ldbx_1, ._time_ac0au_1, ._wrapper_1ssds_1 {
+    font-size: 0.8rem;
+}
+
+._play_rfl62_1, ._loop_1v4pf_1, ._previous_1mino_1, ._next_147p5_1, ._pause_1talx_1, ._shuffle_15ul3_1 {
+    width: 1rem;
+    height: 1rem;
+}
+
+._wrapper_l8wb1_1 {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}