Merge pull request #1 from Zachary-Masson/v1.1

✨ Add different style and allows differant color
Zachary-Masson · Jun 17, 2024 · 373ed30 · 373ed30
2 parents 5cf1b45 + 6081f7c
commit 373ed30
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# 🎵 JsPlayer
+# 🎵 JsPlayer v1.1
 
 A library that allows you to integrate an MP3 player with playlist management in just a few lines of code.
 
@@ -9,21 +9,24 @@ A library that allows you to integrate an MP3 player with playlist management in
 This project offers an easy and fast integration of an MP3 player with playlist management, without any additional effort. You can add a fully functional music player in just a few lines of code.
 ![image](https://github.com/Zachary-Masson/JsPlayer/assets/66486552/3c11ec2c-e7a1-40db-8449-abdde9f2913c)
 
-
 ## ✨ Features
 
 - 🎵 Simple and fast integration.
 - 📜 Playlist management.
 - ▶️ Playback controls (play, pause, next, previous).
 - 🎶 Support for multiple MP3 formats.
+- 💄 Customize Color and style
 - 🌐 Compatible with major browsers.
 
 ## 🚀 Installation
 
 Add the library to your project using Jsdelivr:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zachary-Masson/JsPlayer/js-player.css" />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/Zachary-Masson/JsPlayer/js-player.css"
+/>
 ```
 
 ```js
@@ -33,13 +36,20 @@ import JsPlayer from "https://cdn.jsdelivr.net/gh/Zachary-Masson/JsPlayer/js-pla
 ## 🛠️ Usage
 
 Here's an example of using the library to integrate an MP3 player with a playlist:
+
 ```javascript
 import JsPlayer from "https://cdn.jsdelivr.net/gh/Zachary-Masson/JsPlayer/js-player.js";
 
 const player = new JsPlayer("player", {
   volume: 0.2,
   changeFavicon: boolean,
   changeTitle: boolean,
+  style: "basic" | "compact",
+  color: {
+    r: number,
+    g: number,
+    b: number,
+  },
 });
 
 player.setPlayList([
@@ -50,7 +60,6 @@ player.setPlayList([
     picture: "Path (String)",
   },
 ]);
-
 ```
 
 ## 🎨 Customization
@@ -79,7 +88,6 @@ Here's a complete example of integration into an HTML page:
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/Zachary-Masson/JsPlayer/js-player.css"
     />
-
   </head>
   <body>
     <js-player id="player"></js-player>
@@ -88,7 +96,6 @@ Here's a complete example of integration into an HTML page:
     <script type="module" src="./script.js"></script>
   </body>
 </html>
-
 ```
 
 ```js
@@ -98,6 +105,12 @@ const player = new JsPlayer("player", {
   volume: 0.2,
   changeFavicon: true,
   changeTitle: true,
+  style: "compact",
+  color: {
+    r: 46,
+    g: 6,
+    b: 30,
+  },
 });
 
 player.setPlayList([
@@ -142,7 +155,6 @@ player.setPlayList([
       "https://cdns-images.dzcdn.net/images/cover/3936f4dca70356fa037d9a976662355d/500x500.jpg",
   },
 ]);
-
 ```
 
 ## 🤝 Contributions
@@ -151,7 +163,7 @@ Contributions are welcome! If you have any improvement ideas or bugs to report,
 
 ## 👨‍💻 Author
 
-- **Zachary Masson** - *Lead Developer* - [GitHub Profile](https://github.com/Zachary-Masson)
+- **Zachary Masson** - _Lead Developer_ - [GitHub Profile](https://github.com/Zachary-Masson)
 
 ## 📜 License
 

diff --git a/exemple/assets/css/style.css b/exemple/assets/css/style.css
@@ -13,6 +13,8 @@ body {
     justify-content: center;
     align-items: center;
 
+    gap: 50px;
+
     background-color: rgb(240, 139, 7);
 }
 

diff --git a/exemple/assets/js/script.js b/exemple/assets/js/script.js
@@ -1,11 +1,6 @@
 import JsPlayer from "https://cdn.jsdelivr.net/gh/Zachary-Masson/JsPlayer/js-player.js";
 
-const player = new JsPlayer("player", {
-  volume: 0.2,
-  changeFavicon: true,
-  changeTitle: true,
-});
-player.setPlayList([
+const playlist = [
   {
     title: "Unity",
     author: "TheFatRat",
@@ -46,4 +41,18 @@ player.setPlayList([
     picture:
       "https://cdns-images.dzcdn.net/images/cover/3936f4dca70356fa037d9a976662355d/500x500.jpg",
   },
-]);
+];
+
+const player = new JsPlayer("player", {
+  volume: 0.2,
+  changeFavicon: true,
+  changeTitle: true,
+  style: "compact",
+  color: {
+    r: 46,
+    g: 6,
+    b: 30,
+  },
+});
+
+player.setPlayList(playlist);
diff --git a/js-player.css b/js-player.css
@@ -1,11 +1,19 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url("./src/css/compact.css");
+
+
 
 .js-player-element {
     padding: 0;
     margin: 0;
     font-family: "Poppins", sans-serif;
 }
 
+:root {
+    --color-primary: rgba(221, 3, 3, 0.945);
+    --color-hover: rgba(207, 0, 0, 0.178)
+}
+
 .js-player-none {
     display: none;
 }
@@ -34,7 +42,7 @@
 
     gap: 25px;
 
-    background-color: rgba(221, 3, 3, 0.945);
+    background-color: var(--color-primary);
 
     color: rgb(255, 255, 255);
 }
@@ -95,7 +103,7 @@
     margin: 1px;
     width: 2%;
     height: calc(100% - 2px);
-    background-color: rgba(221, 3, 3, 0.945);
+    background-color: var(--color-primary);
 
     border-radius: 2px;
 
@@ -139,7 +147,7 @@
 
 /* Style pour le pouce (la partie déplaçable) de la barre de défilement */
 .js-player-playlist-content::-webkit-scrollbar-thumb {
-    background: rgba(221, 3, 3, 0.945); /* Couleur de la barre */
+    background: var(--color-primary); /* Couleur de la barre */
     border-radius: 10px; /* Coins arrondis */
 }
 
@@ -175,7 +183,7 @@
 }
 
 .js-player-playlist-song.js-player-song-active {
-    background-color: rgba(207, 0, 0, 0.178);
+    background-color: var(--color-hover);
     transition: all 0.3s ease;
 
 }
@@ -243,4 +251,4 @@
     margin: 0;
 
     transform: translate(1px, 1px);
-}
+}
diff --git a/js-player.js b/js-player.js
@@ -11,7 +11,7 @@ class JsPlayer {
   _element;
 
   /**
-   * @type {{volume: number, changeTitle: boolean, changeFavicon: boolean}} _config
+   * @type {{volume: number, style: "basic" | "compact", color: {r: number, g: number, b: number, changeTitle: boolean, changeFavicon: boolean}} _config
    */
   _config;
 
@@ -28,11 +28,12 @@ class JsPlayer {
   /**
    *
    * @param {string} id
-   * @param {{volume: number, changeTitle: boolean, changeFavicon: boolean}} config
+   * @param {{volume: number, style: "basic" | "compact", color: {r: number, g: number, b: number}, changeTitle: boolean, changeFavicon: boolean}} config
    */
   constructor(id, config) {
     this._element = players.find((e) => e.id === id);
     this._config = config;
+    this._element.start(this._config.style || "basic", this._config.color);
   }
 
   /**

diff --git a/src/css/compact.css b/src/css/compact.css
@@ -0,0 +1,45 @@
+.js-player-viewer.compact {
+    position: relative;
+}
+
+.js-player-playlist.compact {
+    width: 100%;
+
+    background-color: rgb(37, 37, 37);
+
+    padding: 0 5px;
+    gap: 10px;
+
+    border-radius: 0 0 5px 5px;
+    transition: all 0.5s ease-in-out;
+}
+
+.js-player-playlist.compact.js-player-playlist-content-active {
+    padding: 10px 5px;
+    transition: all 0.5s ease-in-out;
+}
+
+.js-player-playlist-content.compact {
+    max-height: 0;
+    transition: all 0.5s ease-in-out;
+}
+
+.js-player-playlist-content.compact.js-player-playlist-content-active {
+    max-height: 300px;
+    transition: all 0.5s ease-in-out;
+}
+
+.js-player-compact-control-playlist {
+    position: absolute;
+    right: 50px;
+    bottom: 5px;
+
+    display: flex;
+    background-color: transparent;
+    border: none;
+    color: white;
+
+    font-size: 15px;
+
+    cursor: pointer;
+}
diff --git a/src/icons/play.svg b/src/icons/play.svg