Add functionality for #85 and add settings area "Consistency"

CHANGELOG.md

@@ -1,3 +1,7 @@
+Add:
+- New settings area called "Consistency" for things that make it more consistent with the original spotify theme
+- Ability to hide album name and year in playbar (#85)
+
 Fix:
 - Some sidebar items hawing wrong width on hover [(see)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428)
 - Sidebar config buttons being below the text

src/js/main.js

@@ -51,13 +51,27 @@ waitForElement(["#main"], () => {
     });
 
     DribbblishShared.config.register({
+        area: "Consistency",
         type: "select",
         data: { dribbblish: "Dribbblish", spotify: "Spotify" },
         key: "playerControlsStyle",
         name: "Player Controls Style",
         description: "Style of the Player Controls. Selecting Spotify basically changes Play / Pause back to the center",
         defaultValue: "dribbblish",
-        onChange: (val) => $("#main").attr("player-controls", val)
+        onChange: (val) => {
+            $("#main").attr("player-controls", val);
+            $(".main-trackInfo-container").toggleClass("left", val == "spotify");
+        }
+    });
+
+    DribbblishShared.config.register({
+        area: "Consistency",
+        type: "checkbox",
+        key: "showAlbumInfoInPlaybar",
+        name: "Show Album Info in Playbar",
+        description: "Show Album Name and Year in the Playbar",
+        defaultValue: true,
+        onChange: (val) => $("#main-trackInfo-year").css("display", val ? "block" : "none")
     });
 
     DribbblishShared.config.register({

src/styles/main.scss

@@ -661,6 +661,17 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
     flex: 0 0 32px;
 }
 
+.main-trackInfo-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    &.left {
+        align-items: flex-start;
+    }
+}
+
 .main-trackInfo-name {
     font-weight: 500;
 }