diff --git a/CHANGELOG.md b/CHANGELOG.md index 737c58a..e641fe1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ Added: - A spinning loader at startup while spotify is not ready (Can be disabled in settings) - The old search box in the top bar (Can be disabled in settings) +- Ability to disable the progress transition to improve performance `Playbar > Progress Transition` (#118) Fixed: - Checking for update every 10 Minutes not working diff --git a/src/js/main.js b/src/js/main.js index d32ad23..b85c56c 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -146,18 +146,6 @@ Dribbblish.on("ready", () => { onChange: (val) => $("html").css("--sidebar-gap-right", `${val}px`) }); - waitForElement([".main-nowPlayingBar-container"], ([container]) => { - Dribbblish.config.register({ - area: "Playbar", - type: "checkbox", - key: "playbarShadow", - name: "Playbar Shadow", - description: "Add a shadow effect underneath the playbar", - defaultValue: true, - onChange: (val) => $(container).toggleClass("with-shadow", val) - }); - }); - Dribbblish.config.register({ type: "select", data: { none: "None", "none-padding": "None (With Top Padding)", solid: "Solid", transparent: "Transparent" }, @@ -168,6 +156,31 @@ Dribbblish.on("ready", () => { onChange: (val) => $("#main").attr("top-bar", val) }); + waitForElement([".main-nowPlayingBar-container"], ([container]) => { + Dribbblish.config.register({ + area: "Playbar", + type: "checkbox", + key: "playbarShadow", + name: "Shadow", + description: "Add a shadow effect underneath the playbar", + defaultValue: true, + onChange: (val) => $(container).toggleClass("with-shadow", val) + }); + }); + + Dribbblish.config.register({ + area: "Playbar", + type: "checkbox", + key: "playbarTransition", + name: "Progress Transition", + description: ` + Have the player progress bar transition smoothly. + Turn this off if you're noticing high CPU utilization [(see)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/118){.muted} + `, + defaultValue: true, + onChange: (val) => $("#main").attr("playbar-transition", val ? "" : null) + }); + Dribbblish.config.register({ area: "Playbar", type: "select", diff --git a/src/styles/main.scss b/src/styles/main.scss index 4770dbc..3d01b9b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -548,12 +548,14 @@ html.sidebar-hide-text .GlueDropTarget span { opacity: 1; } -.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div { - transition: transform var(--playbar-movement-anim-speed) ease; -} +#main[playbar-transition] { + .progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div { + transition: transform var(--playbar-movement-anim-speed) ease; + } -.progress-bar:not(:active) .progress-bar__slider { - transition-property: left, opacity; + .progress-bar:not(:active) .progress-bar__slider { + transition-property: left, opacity; + } } .playback-bar .prog-tooltip {