Merge pull request #3 from Albert-PZY/feat/bg-video-audio

背景视频声音与音量调节 + 弹窗不透明度保底

Author: Albert-PZY

src/lib/app.ts

@@ -414,6 +414,33 @@ function bindBackTop(): void {
   });
 }
 
+/**
+ * 播放背景视频并按用户设定的音量输出声音。
+ * 浏览器默认禁止带声音的视频自动播放，只有用户与页面交互后才允许。
+ * 因此先尝试带声播放，被拦截时回退为静音自动播放，并在首次用户交互后自动恢复音量。
+ */
+function playBackgroundVideo(v: HTMLVideoElement, volume: number): void {
+  const vol = Math.max(0, Math.min(1, volume / 100));
+  v.volume = vol;
+  const wantSound = vol > 0;
+  v.muted = !wantSound;
+  const tryPlay = () => v.play().catch(() => undefined);
+  void v.play().catch(() => {
+    if (!wantSound) return;
+    v.muted = true;
+    void tryPlay();
+    const unmute = () => {
+      v.muted = false;
+      v.volume = vol;
+      void tryPlay();
+      window.removeEventListener('pointerdown', unmute);
+      window.removeEventListener('keydown', unmute);
+    };
+    window.addEventListener('pointerdown', unmute, { once: true });
+    window.addEventListener('keydown', unmute, { once: true });
+  });
+}
+
 /** 应用自定义背景：图 / GIF / 视频到 .bg-layer，统一自适应覆盖 */
 function applyBackground(bg: BackgroundConfig): void {
   const layer = document.getElementById('bg-layer');
@@ -422,7 +449,10 @@ function applyBackground(bg: BackgroundConfig): void {
   // 背景图自身不透明度
   layer.style.setProperty('--bg-opacity', bg.enabled && bg.src ? String(bg.opacity / 100) : '0');
   // 页面内容层不透明度：让顶栏/侧栏/卡片等表面层半透明，背景透出
-  document.documentElement.style.setProperty('--page-opacity', bg.enabled && bg.src ? String(bg.pageOpacity / 100) : '1');
+  const pageOpacity = bg.enabled && bg.src ? bg.pageOpacity / 100 : 1;
+  document.documentElement.style.setProperty('--page-opacity', String(pageOpacity));
+  // 模态框不透明度：独立于页面，保底 0.5，避免设置弹窗过透看不清
+  document.documentElement.style.setProperty('--modal-opacity', String(Math.max(0.5, pageOpacity)));
 
   if (!bg.enabled || !bg.src) {
     body.classList.remove('has-bg');
@@ -433,18 +463,18 @@ function applyBackground(bg: BackgroundConfig): void {
   body.classList.add('has-bg');
 
   if (bg.mime.startsWith('video/')) {
-    // 视频用 <video> 元素 autoplay loop muted
+    // 视频用 <video> 元素 autoplay loop，音量由用户设置控制
     let v = layer.querySelector('video');
     if (!v) {
       layer.replaceChildren();
       v = document.createElement('video');
       v.autoplay = true;
       v.loop = true;
-      v.muted = true;
       v.setAttribute('playsinline', '');
       layer.appendChild(v);
     }
     if (v.src !== bg.src) v.src = bg.src;
+    playBackgroundVideo(v, bg.volume);
     layer.style.backgroundImage = '';
   } else {
     // 图 / GIF 用 background-image，统一 cover 覆盖

src/lib/types.ts

@@ -93,6 +93,8 @@ export interface BackgroundConfig {
   posY: number;
   /** 媒体 MIME，用于判断图/视频 */
   mime: string;
+  /** 背景视频音量 0-100，仅视频背景生效 */
+  volume: number;
 }
 
 export interface Settings {
@@ -128,4 +130,5 @@ export const DEFAULT_BACKGROUND: BackgroundConfig = {
   posX: 50,
   posY: 50,
   mime: '',
+  volume: 50,
 };

src/lib/ui/dialogs.ts

@@ -447,6 +447,17 @@ export async function openSettings(): Promise<void> {
   const pageOpacityWrap = el('div', { style: 'flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px' });
   pageOpacityWrap.append(pageOpacityLabel, pageOpacityRange);
 
+  /* 视频音量：仅当背景为视频时显示 */
+  const volumeLabel = el('div', { class: 'field__hint', text: `视频音量 ${store.background.volume}%` });
+  const volumeRange = el('input', { class: 'range', type: 'range', min: '0', max: '100', value: String(store.background.volume) });
+  volumeRange.addEventListener('input', () => {
+    const v = Number(volumeRange.value);
+    volumeLabel.textContent = `视频音量 ${v}%`;
+    void store.setBackground({ volume: v });
+  });
+  const volumeWrap = el('div', { style: 'flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px' });
+  volumeWrap.append(volumeLabel, volumeRange);
+
   const enToggle = toggle('启用背景', '', store.background.enabled, (v) => { void store.setBackground({ enabled: v }); });
 
   const fileInput = el('input', { type: 'file', accept: 'image/*,video/*' });
@@ -457,8 +468,8 @@ export async function openSettings(): Promise<void> {
   fileInput.addEventListener('change', () => {
     const f = fileInput.files?.[0];
     if (!f) return;
-    if (f.size > 10 * 1024 * 1024) {
-      toast('文件不能超过 10MB', { kind: 'warn' });
+    if (f.size > 100 * 1024 * 1024) {
+      toast('文件不能超过 100MB', { kind: 'warn' });
       return;
     }
     if (!/^image\/|^video\//.test(f.type)) {
@@ -503,11 +514,11 @@ export async function openSettings(): Promise<void> {
   bgPreview.addEventListener('pointercancel', () => { dragging = false; });
 
   const bgControls = el('div', { style: 'display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:10px' });
-  bgControls.append(bgOpacityWrap, pageOpacityWrap);
+  bgControls.append(bgOpacityWrap, pageOpacityWrap, volumeWrap);
   const bgActions = el('div', { style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px' });
   bgActions.append(enToggle, uploadBtn, clearBtn);
   bgField.append(bgPreview, bgControls, bgActions, fileInput);
-  bgField.appendChild(el('p', { class: 'field__hint', text: '图片 / GIF / 视频 ≤10MB，拖动预览可调位置' }));
+  bgField.appendChild(el('p', { class: 'field__hint', text: '图片 / GIF / 视频 ≤100MB，拖动预览可调位置' }));
   m.body.appendChild(bgField);
 
   // 背景预览重绘
@@ -521,6 +532,9 @@ export async function openSettings(): Promise<void> {
     bgOpacityLabel.textContent = `背景不透明度 ${bg.opacity}%`;
     pageOpacityRange.value = String(bg.pageOpacity);
     pageOpacityLabel.textContent = `页面不透明度 ${bg.pageOpacity}%`;
+    volumeRange.value = String(bg.volume);
+    volumeLabel.textContent = `视频音量 ${bg.volume}%`;
+    volumeWrap.style.display = bg.mime.startsWith('video/') ? '' : 'none';
   };
   paintBg();
 

src/styles/_overlays.scss

@@ -37,7 +37,7 @@
   flex-direction: column;
   width: min(100%, var(--modal-w, 540px));
   max-height: min(86vh, 800px);
-  background: color-mix(in srgb, var(--surface), transparent calc((1 - var(--page-opacity)) * 100%));
+  background: color-mix(in srgb, var(--surface), transparent calc((1 - var(--modal-opacity)) * 100%));
   backdrop-filter: saturate(1.6) blur(20px);
   -webkit-backdrop-filter: saturate(1.6) blur(20px);
   border: 1px solid var(--border);

src/styles/_tokens.scss

@@ -41,6 +41,8 @@
 
   /* 页面内容层不透明度：背景启用时由 app.ts 设为 <1，让背景透出 */
   --page-opacity: 1;
+  /* 模态框不透明度：独立于页面不透明度，保底 0.5，避免设置弹窗过透看不清 */
+  --modal-opacity: 1;
 
   /* 动效曲线：分快速交互 / 标准 / 慢速大动画三档，全部 GPU 友好 */
   --ease: cubic-bezier(0.22, 0.68, 0.32, 1);