bncm: 调优了窗口较小时的布局

bncm: 修正了调节窗口大小时歌词组件不能正确计算对齐位置的问题

packages/bncm/dist/manifest.json

@@ -1 +1 @@
-{"manifest_version":1,"name":"类苹果歌词","slug":"Apple-Musiclike-lyrics","author":"SteveXMH","author_links":["https://github.com/Steve-xmh","https://github.com/Steve-xmh/applemusic-like-lyrics"],"description":"类 Apple Music 歌词页面插件|近乎完美的 Apple Music 歌词体验","preview":"preview.svg","version":"3.0.3","commit":"e1195a8260a580d8d827f4680cdf5f2f6f0070d3","branch":"dev","type":"extension","noDevReload":true,"ncm3-compatible":true,"betterncm_version":">=1.0.0","injects":{"Main":[{"file":"amll-bncm.js"}]},"hijacks":{">= 1.0.0":{"orpheus://orpheus/pub/app.html":{"type":"replace","id":"csp-worker","from":"<meta http-equiv=\"Content-Security-Policy\" content=\"script-src ","to":"<meta http-equiv=\"Content-Security-Policy\" content=\"script-src data: blob: "}},">= 3.0.0":{"orpheus://orpheus/pub/hybrid/vendors":{"type":"replace","id":"redux-dispatch-hook","from":"\"sagaEffects.put\"),","to":"\"sagaEffects.put\"),window?.amllDispatchHook?.(n),"}}}}
+{"manifest_version":1,"name":"类苹果歌词","slug":"Apple-Musiclike-lyrics","author":"SteveXMH","author_links":["https://github.com/Steve-xmh","https://github.com/Steve-xmh/applemusic-like-lyrics"],"description":"类 Apple Music 歌词页面插件|近乎完美的 Apple Music 歌词体验","preview":"preview.svg","version":"3.0.3","commit":"1ad21dc4b47cf8c51310d3ee0be2c2476d812bd3","branch":"dev","type":"extension","noDevReload":true,"ncm3-compatible":true,"betterncm_version":">=1.0.0","injects":{"Main":[{"file":"amll-bncm.js"}]},"hijacks":{">= 1.0.0":{"orpheus://orpheus/pub/app.html":{"type":"replace","id":"csp-worker","from":"<meta http-equiv=\"Content-Security-Policy\" content=\"script-src ","to":"<meta http-equiv=\"Content-Security-Policy\" content=\"script-src data: blob: "}},">= 3.0.0":{"orpheus://orpheus/pub/hybrid/vendors":{"type":"replace","id":"redux-dispatch-hook","from":"\"sagaEffects.put\"),","to":"\"sagaEffects.put\"),window?.amllDispatchHook?.(n),"}}}}

packages/bncm/src/components/song-info/audio-quality-tag.tsx

@@ -11,19 +11,13 @@ export const AudioQualityTag: FC = () => {
 	return (
 		<div className="am-music-quality">
 			{currentAudioQualityType === AudioQualityType.Lossless && (
-				<div>
 					<TagLossless />
-				</div>
 			)}
 			{currentAudioQualityType === AudioQualityType.HiRes && (
-				<div>
 					<TagHiresLossless />
-				</div>
 			)}
 			{currentAudioQualityType === AudioQualityType.DolbyAtmos && (
-				<div>
 					<IconDolbyAtmos />
-				</div>
 			)}
 		</div>
 	);

packages/bncm/src/index.sass

@@ -117,19 +117,21 @@ body.amll-lyric-page-open
     font-weight: 400
     opacity: 0.5
     align-items: center
+    justify-content: center
     font-size: 0.55em
     letter-spacing: 0.5px
+    @media screen and (max-height: 768px)
+        margin-top: 8px
 
     > *
         flex: 0
+        height: fit-content
 
         &:first-child
             flex: 1
 
         &:last-child
             flex: 1
             text-align: right
-
-    > .am-music-quality
-        height: 10px
-        transform: translateY(-9px)
+    .am-music-quality
+        transform: translateY(1px)

packages/bncm/src/player/common/player.tsx

@@ -1,5 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useState, type FC, useEffect, useRef } from "react";
+import { useState, type FC, useEffect, useRef, RefObject } from "react";
 import {
 	currentTimeAtom,
 	lyricPageOpenedAtom,
@@ -27,7 +27,7 @@ import { AMLLEnvironment, amllEnvironmentAtom } from "../../injector";
 import "./player.sass";
 
 export const CoreLyricPlayer: FC<{
-	albumCoverRef: HTMLElement | null;
+	albumCoverRef?: RefObject<HTMLElement | null>;
 	isVertical?: boolean;
 }> = (props) => {
 	const playerRef = useRef<LyricPlayerRef>(null);
@@ -51,8 +51,9 @@ export const CoreLyricPlayer: FC<{
 	const [alignPosition, setAlighPosition] = useState(0.5);
 
 	useEffect(() => {
-		if (props.albumCoverRef) {
-			const el = props.albumCoverRef;
+		const el = props.albumCoverRef?.current;
+		console.log("已更新居中位置", el);
+		if (el) {
 			const onResize = () => {
 				setAlighPosition(
 					(el.offsetTop + el.clientHeight / 2) / window.innerHeight,
@@ -67,7 +68,7 @@ export const CoreLyricPlayer: FC<{
 		} else {
 			setAlighPosition(0.5);
 		}
-	}, [props.albumCoverRef, lyricPageOpened]);
+	}, [props.albumCoverRef?.current, lyricPageOpened]);
 
 	if (
 		wsStatus.color === ConnectionColor.Active &&

packages/bncm/src/player/common/volume-control.tsx

@@ -13,7 +13,6 @@ export const VolumeControl: FC = () => {
 	const maxSpeakerRef = useRef<SVGSVGElement>(null);
 
 	useEffect(() => {
-		console.log(volume);
 		if (lastVolumeRef.current !== volume) {
 			lastVolumeRef.current = volume;
 			if (volume === 0 && minSpeakerRef.current) {

packages/bncm/src/player/horizonal/index.sass

@@ -61,8 +61,9 @@
         justify-content: space-around
         transition: margin-top 0.25s
         margin-top: 3.5vh
-        @media screen and (max-height: 900px)
+        @media screen and (max-height: 768px)
             margin-top: unset
+            font-size: 133%
     .amll-cover-image
         aspect-ratio: 1/1
         grid-column: info-side

packages/bncm/src/player/horizonal/index.tsx

@@ -140,7 +140,7 @@ export const LyricPlayerHorizonal: FC = () => {
 						/>
 					))}
 				<MusicInfo />
-				<CoreLyricPlayer albumCoverRef={albumCoverRef.current} />
+				<CoreLyricPlayer albumCoverRef={albumCoverRef} />
 				<div
 					data-tauri-drag-region
 					style={{