Add gradient background

solstice23 · Nov 28, 2022 · 0d3493d · 0d3493d
1 parent 5fbd6d5
commit 0d3493d
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,6 @@ https://user-images.githubusercontent.com/23134847/202904157-74c344c9-a3de-44d4-
 - [x] 自定义菜单
 - [x] 方形封面
 - [x] 歌词模糊
-- [ ] 渐变背景
-- [ ] 主题色切换开关
+- [x] 渐变背景
+- [x] 主题色切换开关
 - [ ] 适配亮色主题
diff --git a/RefinedNowPlaying/main.js b/RefinedNowPlaying/main.js
@@ -177,8 +177,11 @@ function getGradientFromPalette(palette) {
 	palette = palette.sort((a, b) => {
 		return calcLuminance(a) - calcLuminance(b);
 	});
-	palette = palette.slice(palette.length / 2 - 3, palette.length / 2 + 3);
-
+	palette = palette.slice(palette.length / 2 - 4, palette.length / 2 + 4);
+	palette = palette.sort((a, b) => {
+		return rgb2Hsl(b)[1] - rgb2Hsl(a)[1];
+	});
+	palette = palette.slice(0, 6);
 
 	let differences = new Array(6);
 	for(let i = 0; i < differences.length; i++){
@@ -400,6 +403,32 @@ const addSettingsMenu = async () => {
 		document.body.style.setProperty(variable, mapping(slider.value));
 		sliderEnhance(slider);
 	}
+	const bindSelectGroupToClasses = (selectGroup, defaultValue, mapping = (x) => { return x }) => {
+		const buttons = selectGroup.querySelectorAll(".rnp-select-group-btn");
+		buttons.forEach(button => {
+			button.addEventListener("click", e => {
+				const value = e.target.getAttribute("value");
+				buttons.forEach(button => {
+					button.classList.remove("selected");
+					document.body.classList.remove(mapping(button.getAttribute("value")));
+				});
+				e.target.classList.add("selected");
+				document.body.classList.add(mapping(value));
+				setSetting(selectGroup.id, value);
+			});
+		});
+		const value = getSetting(selectGroup.id, defaultValue);
+		buttons.forEach(button => {
+			if (button.getAttribute("value") == value) {
+				button.classList.add("selected");
+				document.body.classList.add(mapping(value));
+			} else {
+				button.classList.remove("selected");
+				document.body.classList.remove(mapping(button.getAttribute("value")));
+			}
+		});
+	}
+
 
 	const initSettings = () => {
 		const rectangleCover = document.querySelector('#rectangle-cover');
@@ -408,22 +437,29 @@ const addSettingsMenu = async () => {
 		const useNotosans = document.querySelector('#use-notosans');
 		const hideComments = document.querySelector('#hide-comments');
 		const partialBg = document.querySelector('#partial-bg');
+		const gradientBgDynamic = document.querySelector('#gradient-bg-dynamic');
 
 		bindCheckboxToClass(rectangleCover, 'rectangle-cover', true);
 		bindCheckboxToClass(lyricBlur, 'lyric-blur', true);
 		bindCheckboxToClass(enableAccentColor, 'enable-accent-color', true);
 		bindCheckboxToClass(useNotosans, 'use-notosans', false);
 		bindCheckboxToClass(hideComments, 'hide-comments', false);
 		bindCheckboxToClass(partialBg, 'partial-bg', false);
+		bindCheckboxToClass(gradientBgDynamic, 'gradient-bg-dynamic', true);
 
 
 		const bgBlur = document.querySelector('#bg-blur');
 		const bgDim = document.querySelector('#bg-dim');
+		const bgDimForGradientBg = document.querySelector('#bg-dim-for-gradient-bg');
 		const bgOpacity = document.querySelector('#bg-opacity');
 
 		bindSliderToCSSVariable(bgBlur, '--bg-blur', 36, 'change', (x) => { return x + 'px' });
 		bindSliderToCSSVariable(bgDim, '--bg-dim', 55, 'input', (x) => { return x / 100 });
+		bindSliderToCSSVariable(bgDimForGradientBg, '--bg-dim-for-gradient-bg', 45, 'input', (x) => { return x / 100 });
 		bindSliderToCSSVariable(bgOpacity, '--bg-opacity', 0, 'input', (x) => { return 1 - x / 100 });
+
+		const bgType = document.querySelector('#bg-type');
+		bindSelectGroupToClasses(bgType, 'album', (x) => { return x == 'gradient' ? 'gradient-bg' : 'album-bg' }); 
 	}
 	const settingsMenu = document.createElement('div');
 	settingsMenu.id = 'settings-menu';

diff --git a/RefinedNowPlaying/manifest.json b/RefinedNowPlaying/manifest.json
@@ -1,6 +1,6 @@
 {
     "manifest_version": 1,
-    "version": "0.3",
+    "version": "0.4",
     "name": "RefinedNowPlaying",
     "injects": {
         "Main": [

diff --git a/RefinedNowPlaying/settings-menu.html b/RefinedNowPlaying/settings-menu.html
@@ -27,14 +27,29 @@
 
 	<div class="rnp-group">
 		<div class="rnp-group-title">背景</div>
+		<div class="rnp-select-group-wrapper">
+			<label for="bg-type" class="rnp-select-group-label">类型</label>
+			<div class="rnp-select-group" id="bg-type">
+				<button class="rnp-select-group-btn" value="album">专辑图</button>
+				<button class="rnp-select-group-btn selected" value="gradient">渐变</button>
+			</div>
+		</div>
+		<div class="rnp-checkbox-wrapper gradient-bg-dynamic" style="--estimated-height: 20px;">
+			<input id="gradient-bg-dynamic" type="checkbox" class="rnp-checkbox">
+			<label for="gradient-bg-dynamic" class="rnp-checkbox-label">动态渐变</label>
+		</div>
 		<div class="rnp-slider-wrapper bg-blur">
 			<label for="bg-blur" class="rnp-slider-label">模糊<button class="rnp-slider-reset"></button></label>
 			<input id="bg-blur" type="range" class="rnp-slider" min="0" max="100" value="36" default="36">
 		</div>
-		<div class="rnp-slider-wrapper">
+		<div class="rnp-slider-wrapper bg-dim" style="transition: all 0s;">
 			<label for="bg-dim" class="rnp-slider-label">暗化<button class="rnp-slider-reset"></button></label>
 			<input id="bg-dim" type="range" class="rnp-slider" min="0" max="100" value="55" default="55">
 		</div>
+		<div class="rnp-slider-wrapper bg-dim-for-gradient-bg" style="transition: all 0s;"> <!-- 渐变背景 独立的暗化值 -->
+			<label for="bg-dim-for-gradient-bg" class="rnp-slider-label">暗化<button class="rnp-slider-reset"></button></label>
+			<input id="bg-dim-for-gradient-bg" type="range" class="rnp-slider" min="0" max="100" value="45" default="45">
+		</div>
 		<div class="rnp-slider-wrapper bg-opacity">
 			<label for="bg-opacity" class="rnp-slider-label">透明度<button class="rnp-slider-reset"></button></label>
 			<input id="bg-opacity" type="range" class="rnp-slider" min="0" max="100" value="0" default="0">
@@ -106,6 +121,8 @@
 		flex-direction: row;
 		align-items: center;
 		margin-bottom: 15px;
+		transition: all .3s ease;
+		height: var(--estimated-height, unset);
 	}
 	.rnp-checkbox-label {
 		padding-left: 10px;
@@ -184,6 +201,43 @@
 		pointer-events: none;
 	}
 
+	.rnp-select-group-wrapper {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 15px;
+	}
+	.rnp-select-group-label {
+		margin-right: 10px;
+		margin-bottom: 10px;
+	}
+	.rnp-select-group {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-content: stretch;
+		flex: 1;
+		gap: 1px;
+	}
+	.rnp-select-group-btn {
+		flex: 1;
+		background-color: #dfe1e433;
+		border: none;
+		border-radius: 0;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		transition: background-color .3s ease;
+	}
+	.rnp-select-group-btn:first-child {
+		border-radius: 6px 0 0 6px;
+	}
+	.rnp-select-group-btn:last-child {
+		border-radius: 0 6px 6px 0;
+	}
+	.rnp-select-group-btn.selected {
+		background-color: var(--accent-color);
+		font-weight: bold;
+	}
+
 
 
 	#rnp-settings-menu {
@@ -249,7 +303,10 @@
 
 <style>
 	body:not(.partial-bg) .bg-opacity,
-	body.gradient-bg .bg-blur{
+	body.gradient-bg .bg-blur,
+	body:not(.gradient-bg) .gradient-bg-dynamic,
+	body:not(.gradient-bg) .bg-dim-for-gradient-bg,
+	body.gradient-bg .bg-dim{
 		opacity: 0;
 		height: 0;
 		padding-bottom: 0;

diff --git a/RefinedNowPlaying/styles.css b/RefinedNowPlaying/styles.css
@@ -27,6 +27,9 @@
     opacity: var(--bg-dim, 0.55);
     pointer-events: none;
 }
+body.gradient-bg #cd-bg-blur::before {
+    opacity: var(--bg-dim-for-gradient-bg, 0.45);
+}
 #cd-bg-blur::after {
 	content: "";
 	position: absolute;
@@ -665,7 +668,7 @@ body.gradient-bg #cd-bg-blur {
 body.gradient-bg #cd-bg-blur::after {
 	filter: none !important;
 }
-body.gradient-bg.gradient-bg-animated #cd-bg-blur {
+body.gradient-bg.gradient-bg-dynamic #cd-bg-blur {
 	animation: bg-gradient-animation 120s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
 }
 @keyframes bg-gradient-animation {