|
| 1 | +/** |
| 2 | + * @fileoverview |
| 3 | + * 一个播放歌词的组件，但是进行了部分效果的阉割精简，以尝试改善在低性能设备上的性能问题 |
| 4 | + * @author SteveXMH |
| 5 | + */ |
| 6 | + |
| 7 | +import type { LyricLine } from "../../interfaces.ts"; |
| 8 | +import "../../styles/index.css"; |
| 9 | +import { debounce } from "../../utils/debounce.ts"; |
| 10 | +import { LyricPlayerBase } from "../base.ts"; |
| 11 | +import { LyricLineMouseEvent } from "../dom/index.ts"; |
| 12 | +import styles from "./index.module.css"; |
| 13 | +import { LyricLineEl, type RawLyricLineMouseEvent } from "./lyric-line.ts"; |
| 14 | + |
| 15 | +/** |
| 16 | + * 歌词播放组件，本框架的核心组件 |
| 17 | + * |
| 18 | + * 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施 |
| 19 | + */ |
| 20 | +export class DomSlimLyricPlayer extends LyricPlayerBase { |
| 21 | + override currentLyricLineObjects: LyricLineEl[] = []; |
| 22 | + |
| 23 | + private debounceCalcLayout = debounce( |
| 24 | + () => |
| 25 | + this.calcLayout(true, true).then(() => |
| 26 | + this.currentLyricLineObjects.map(async (el, i) => { |
| 27 | + el.markMaskImageDirty("DomLyricPlayer onResize"); |
| 28 | + await el.waitMaskImageUpdated(); |
| 29 | + if (this.hotLines.has(i)) { |
| 30 | + el.enable(this.currentTime); |
| 31 | + el.resume(); |
| 32 | + } |
| 33 | + }), |
| 34 | + ), |
| 35 | + 1000, |
| 36 | + ); |
| 37 | + |
| 38 | + override onResize(): void { |
| 39 | + const computedStyles = getComputedStyle(this.element); |
| 40 | + this._baseFontSize = Number.parseFloat(computedStyles.fontSize); |
| 41 | + const innerWidth = |
| 42 | + this.element.clientWidth - |
| 43 | + Number.parseFloat(computedStyles.paddingLeft) - |
| 44 | + Number.parseFloat(computedStyles.paddingRight); |
| 45 | + const innerHeight = |
| 46 | + this.element.clientHeight - |
| 47 | + Number.parseFloat(computedStyles.paddingTop) - |
| 48 | + Number.parseFloat(computedStyles.paddingBottom); |
| 49 | + this.innerSize[0] = innerWidth; |
| 50 | + this.innerSize[1] = innerHeight; |
| 51 | + this.rebuildStyle(); |
| 52 | + // for (const obj of this.currentLyricLineObjects) { |
| 53 | + // if (!obj.getElement().classList.contains(styles.dirty)) |
| 54 | + // obj.getElement().classList.add(styles.dirty); |
| 55 | + // } |
| 56 | + this.debounceCalcLayout(); |
| 57 | + } |
| 58 | + |
| 59 | + readonly supportPlusLighter = CSS.supports("mix-blend-mode", "plus-lighter"); |
| 60 | + readonly supportMaskImage = CSS.supports("mask-image", "none"); |
| 61 | + readonly innerSize: [number, number] = [0, 0]; |
| 62 | + private readonly onLineClickedHandler = (e: RawLyricLineMouseEvent) => { |
| 63 | + const evt = new LyricLineMouseEvent( |
| 64 | + this.lyricLinesIndexes.get(e.line) ?? -1, |
| 65 | + e.line, |
| 66 | + e, |
| 67 | + ); |
| 68 | + if (!this.dispatchEvent(evt)) { |
| 69 | + e.preventDefault(); |
| 70 | + e.stopPropagation(); |
| 71 | + e.stopImmediatePropagation(); |
| 72 | + } |
| 73 | + }; |
| 74 | + /** |
| 75 | + * 是否为非逐词歌词 |
| 76 | + * @internal |
| 77 | + */ |
| 78 | + _getIsNonDynamic() { |
| 79 | + return this.isNonDynamic; |
| 80 | + } |
| 81 | + private _baseFontSize = Number.parseFloat( |
| 82 | + getComputedStyle(this.element).fontSize, |
| 83 | + ); |
| 84 | + public get baseFontSize() { |
| 85 | + return this._baseFontSize; |
| 86 | + } |
| 87 | + constructor() { |
| 88 | + super(); |
| 89 | + this.onResize(); |
| 90 | + this.element.classList.add("amll-lyric-player", "dom-slim"); |
| 91 | + if (this.disableSpring) { |
| 92 | + this.element.classList.add(styles.disableSpring); |
| 93 | + } |
| 94 | + } |
| 95 | + |
| 96 | + private rebuildStyle() { |
| 97 | + const width = this.innerSize[0]; |
| 98 | + const height = this.innerSize[1]; |
| 99 | + this.element.style.setProperty("--amll-lp-width", `${width.toFixed(4)}px`); |
| 100 | + this.element.style.setProperty( |
| 101 | + "--amll-lp-height", |
| 102 | + `${height.toFixed(4)}px`, |
| 103 | + ); |
| 104 | + } |
| 105 | + |
| 106 | + override setWordFadeWidth(value = 0.5) { |
| 107 | + super.setWordFadeWidth(value); |
| 108 | + for (const el of this.currentLyricLineObjects) { |
| 109 | + el.markMaskImageDirty("DomLyricPlayer setWordFadeWidth"); |
| 110 | + } |
| 111 | + } |
| 112 | + |
| 113 | + /** |
| 114 | + * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误 |
| 115 | + * @param lines 歌词数组 |
| 116 | + * @param initialTime 初始时间，默认为 0 |
| 117 | + */ |
| 118 | + override setLyricLines(lines: LyricLine[], initialTime = 0) { |
| 119 | + super.setLyricLines(lines, initialTime); |
| 120 | + if (this.hasDuetLine) { |
| 121 | + this.element.classList.add(styles.hasDuetLine); |
| 122 | + } else { |
| 123 | + this.element.classList.remove(styles.hasDuetLine); |
| 124 | + } |
| 125 | + |
| 126 | + for (const line of this.currentLyricLineObjects) { |
| 127 | + line.removeMouseEventListener("click", this.onLineClickedHandler); |
| 128 | + line.removeMouseEventListener("contextmenu", this.onLineClickedHandler); |
| 129 | + line.dispose(); |
| 130 | + } |
| 131 | + |
| 132 | + // 创建新的歌词行元素 |
| 133 | + this.currentLyricLineObjects = this.processedLines.map((line, i) => { |
| 134 | + const lineEl = new LyricLineEl(this, line); |
| 135 | + lineEl.addMouseEventListener("click", this.onLineClickedHandler); |
| 136 | + lineEl.addMouseEventListener("contextmenu", this.onLineClickedHandler); |
| 137 | + this.element.appendChild(lineEl.getElement()); |
| 138 | + this.lyricLinesIndexes.set(lineEl, i); |
| 139 | + lineEl.markMaskImageDirty("DomLyricPlayer setLyricLines"); |
| 140 | + return lineEl; |
| 141 | + }); |
| 142 | + |
| 143 | + this.setLinePosXSpringParams({}); |
| 144 | + this.setLinePosYSpringParams({}); |
| 145 | + this.setLineScaleSpringParams({}); |
| 146 | + this.calcLayout(true, true).then(() => { |
| 147 | + this.initialLayoutFinished = true; |
| 148 | + }); |
| 149 | + } |
| 150 | + |
| 151 | + override pause() { |
| 152 | + super.pause(); |
| 153 | + this.interludeDots.pause(); |
| 154 | + for (const line of this.currentLyricLineObjects) { |
| 155 | + line.pause(); |
| 156 | + } |
| 157 | + } |
| 158 | + |
| 159 | + override resume() { |
| 160 | + super.resume(); |
| 161 | + this.interludeDots.resume(); |
| 162 | + for (const line of this.currentLyricLineObjects) { |
| 163 | + line.resume(); |
| 164 | + } |
| 165 | + } |
| 166 | + |
| 167 | + override update(delta = 0) { |
| 168 | + if (!this.initialLayoutFinished) return; |
| 169 | + super.update(delta); |
| 170 | + if (!this.isPageVisible) return; |
| 171 | + const deltaS = delta / 1000; |
| 172 | + this.interludeDots.update(delta); |
| 173 | + this.bottomLine.update(deltaS); |
| 174 | + for (const line of this.currentLyricLineObjects) { |
| 175 | + line.update(deltaS); |
| 176 | + } |
| 177 | + } |
| 178 | + |
| 179 | + override async calcLayout(force?: boolean, reflow?: boolean): Promise<void> { |
| 180 | + await super.calcLayout(force, reflow); |
| 181 | + let scrollToPos = this.currentLyricLineObjects |
| 182 | + .slice(0, this.targetAlignIndex) |
| 183 | + .reduce( |
| 184 | + (acc, el) => |
| 185 | + acc + |
| 186 | + (el.getLine().isBG ? 0 : (this.lyricLinesSize.get(el)?.[1] ?? 0)), |
| 187 | + 0, |
| 188 | + ); |
| 189 | + scrollToPos -= this.size[1] * this.alignPosition; |
| 190 | + const curLine = this.currentLyricLineObjects[this.targetAlignIndex]; |
| 191 | + if (curLine) { |
| 192 | + const lineHeight = this.lyricLinesSize.get(curLine)?.[1] ?? 0; |
| 193 | + switch (this.alignAnchor) { |
| 194 | + case "bottom": |
| 195 | + scrollToPos += lineHeight; |
| 196 | + break; |
| 197 | + case "center": |
| 198 | + scrollToPos += lineHeight / 2; |
| 199 | + break; |
| 200 | + case "top": |
| 201 | + break; |
| 202 | + } |
| 203 | + } |
| 204 | + this.element.scrollTo({ |
| 205 | + top: scrollToPos, |
| 206 | + behavior: "smooth", |
| 207 | + }); |
| 208 | + } |
| 209 | + |
| 210 | + override dispose(): void { |
| 211 | + super.dispose(); |
| 212 | + this.element.remove(); |
| 213 | + for (const el of this.currentLyricLineObjects) { |
| 214 | + el.dispose(); |
| 215 | + } |
| 216 | + this.bottomLine.dispose(); |
| 217 | + this.interludeDots.dispose(); |
| 218 | + } |
| 219 | +} |
0 commit comments