|
|
@@ -49,6 +49,7 @@ export struct LyricView2 {
|
|
|
@State isLyricEmpty: boolean = true // is no lyric.
|
|
|
@State textSize: number = 16
|
|
|
@State lineSpace: number = 16
|
|
|
+ @State textWeight: number = FontWeight.Medium
|
|
|
@State textHighlightSize: number = 18
|
|
|
@State textColor: string = '#000000'
|
|
|
@State textHighlightColor: string = '#000000'
|
|
|
@@ -67,6 +68,8 @@ export struct LyricView2 {
|
|
|
private autoHideSeekUIDuration = 2000
|
|
|
@State isLoadingData: boolean = false
|
|
|
private loadTimeout = -1
|
|
|
+ @State isHightLightCenter: boolean = true
|
|
|
+
|
|
|
private onDataChangedListener = (lyric: Lyric | null) => {
|
|
|
clearTimeout(this.loadTimeout)
|
|
|
this.isLoadingData = true
|
|
|
@@ -93,10 +96,10 @@ export struct LyricView2 {
|
|
|
let lyricLines = this.currentLyric.lyricList;
|
|
|
if (lyricLines!==undefined&&lyricLines.length > 0) {
|
|
|
let first = lyricLines[0].beginTime;
|
|
|
- // fill the top empty gap
|
|
|
- for (let i = 0; i < this.centerOffsetSize; i++) {
|
|
|
- this.listAdapter.addData(new LyricLine(' ', 0, first), false);
|
|
|
- }
|
|
|
+ // fill the top empty gap 注释掉修复 歌曲不播放的时候,可以显示完整的歌词,而不是显示一两行
|
|
|
+ // for (let i = 0; i < this.centerOffsetSize; i++) {
|
|
|
+ // this.listAdapter.addData(new LyricLine(' ', 0, first), false);
|
|
|
+ // }
|
|
|
lyricLines.forEach((line) => {
|
|
|
this.listAdapter.addData(line, false);
|
|
|
});
|
|
|
@@ -105,6 +108,7 @@ export struct LyricView2 {
|
|
|
for (let i = 0; i < this.centerOffsetSize; i++) {
|
|
|
this.listAdapter.addData(new LyricLine(' ', last + i, last + i), false);
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
this.listAdapter.notifyDataReload();
|
|
|
@@ -116,12 +120,14 @@ export struct LyricView2 {
|
|
|
this.currentIndex = 0;
|
|
|
this.animateToIndex(0);
|
|
|
printW('loadData isEmpty = ' + this.isLyricEmpty);
|
|
|
+
|
|
|
}
|
|
|
|
|
|
private getAttrFromController() {
|
|
|
this.currentLyric = this.controller.getLyric()
|
|
|
this.textSize = this.controller.getTextSize()
|
|
|
this.blurDegree = this.controller.getBlurDegree()
|
|
|
+ this.isHightLightCenter = this.controller.getHightLightCenter()
|
|
|
this.lineSpace = this.controller.getLineSpace()
|
|
|
this.textColor = this.controller.getTextColor()
|
|
|
this.textHighlightColor = this.controller.getHighlightColor()
|
|
|
@@ -131,6 +137,7 @@ export struct LyricView2 {
|
|
|
this.cacheSize = this.controller.getCacheSize()
|
|
|
this.emptyHint = this.controller.getEmptyHint()
|
|
|
this.alignMode = this.controller.getAlignMode()
|
|
|
+ this.textWeight = this.controller.getTextWeight()
|
|
|
}
|
|
|
|
|
|
aboutToAppear() {
|
|
|
@@ -164,89 +171,6 @@ export struct LyricView2 {
|
|
|
return Math.max(0.5, 1 - distance * 0.18); // 透明度随着距离增加而减小
|
|
|
}
|
|
|
|
|
|
- // @Builder
|
|
|
- // LyricListView() {
|
|
|
- // List({ space: this.lineSpace - 16, scroller: this.scroller }) {
|
|
|
- // LazyForEach(this.listAdapter, (item: LyricLine, index: number) => {
|
|
|
- // ListItem() {
|
|
|
- // Flex({ direction: FlexDirection.Row }) {
|
|
|
- // Text(item.text)
|
|
|
- // .width('100%') // 确保宽度为整个容器宽度
|
|
|
- //
|
|
|
- // .fontSize(index == this.currentIndex ? this.textHighlightSize : this.textSize)
|
|
|
- // .maxLines(index == this.currentIndex ? undefined : 2) // 未高亮时限制行数
|
|
|
- // .opacity(this.calculateOpacityFactor(index, this.currentIndex))
|
|
|
- // .blur(this.calculateBlurFactor(index, this.currentIndex))
|
|
|
- // .textAlign(this.alignMode == 'center' ? TextAlign.Center : TextAlign.Start)
|
|
|
- // .fontColor(index == this.currentIndex ? this.textHighlightColor : this.textColor)
|
|
|
- // .fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold : FontWeight.Medium)
|
|
|
- // .animation({ duration: this.animDuration, curve: Curve.FastOutSlowIn })
|
|
|
- //
|
|
|
- // // if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
|
|
|
- // // && this.enableSeek && this.isUserTouching) {
|
|
|
- // Text(this.scrollDurationText)
|
|
|
- // .fontSize(this.textSize)
|
|
|
- // .fontColor(this.seekUIColor)
|
|
|
- // .margin({right:22})
|
|
|
- // .visibility(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
|
|
|
- // && this.enableSeek && this.isUserTouching?Visibility.Visible:Visibility.Hidden)
|
|
|
- //
|
|
|
- // // }
|
|
|
- // }
|
|
|
- // .align(Alignment.End)
|
|
|
- // }
|
|
|
- // .padding(8)
|
|
|
- // // .margin({right:20})
|
|
|
- // .border({ radius: 4 })
|
|
|
- // .backgroundColor(this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
|
|
|
- // && this.enableSeek && this.isUserTouching ? '#80a9a9a9' : '#00000000')
|
|
|
- // .onClick(() => {
|
|
|
- // if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0) {
|
|
|
- // if (this.seekIndex != -1 && this.seekIndex != this.currentIndex) {
|
|
|
- // this.handleSeekAction();
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- // },
|
|
|
- // (item: LyricLine, index: number) => {
|
|
|
- // return item.text + '_' + index + '_' + item.beginTime + '_' + item.nextTime
|
|
|
- // })
|
|
|
- // }
|
|
|
- // .width('100%')
|
|
|
- // .height('100%')
|
|
|
- // .scrollBar(BarState.Off)
|
|
|
- // .cachedCount(this.cacheSize)
|
|
|
- // .visibility(this.isLoadingData ? Visibility.Hidden : Visibility.Visible)
|
|
|
- // .onScrollIndex((_, __, center) => {
|
|
|
- // if (this.isUserTouching) {
|
|
|
- // if (center >= 0 && center < this.listAdapter.totalCount()) {
|
|
|
- // this.seekIndex = center;
|
|
|
- // let targetPosition = this.listAdapter.getData(center).beginTime;
|
|
|
- // this.scrollDurationText = duration2text(targetPosition);
|
|
|
- // } else {
|
|
|
- // console.error(`Index out of range: ${center}`);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- // .onTouch((event) => {
|
|
|
- // let motion = event.touches[0];
|
|
|
- // switch (motion.type) {
|
|
|
- // case TouchType.Down:
|
|
|
- // clearTimeout(this.seekUiHideTimeout);
|
|
|
- // break;
|
|
|
- // case TouchType.Move:
|
|
|
- // this.isUserTouching = true;
|
|
|
- // break;
|
|
|
- // case TouchType.Up:
|
|
|
- // case TouchType.Cancel:
|
|
|
- // this.seekUiHideTimeout = setTimeout(() => {
|
|
|
- // this.seekIndex = -1;
|
|
|
- // this.isUserTouching = false;
|
|
|
- // this.animateToIndex(this.currentIndex);
|
|
|
- // }, this.autoHideSeekUIDuration);
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
|
|
|
// 优化建议代码示例:增加滚动节流
|
|
|
private lastScrollTime: number = 0
|
|
|
@@ -268,10 +192,12 @@ export struct LyricView2 {
|
|
|
centerX: this.alignMode == 'center' ? '50%' : 0
|
|
|
})
|
|
|
.fontColor(index == this.currentIndex ? this.textHighlightColor : this.textColor)
|
|
|
+ // .fontWeight(this.textWeight)
|
|
|
.fontWeight(index == this.currentIndex && this.isHighlightBold ? FontWeight.Bold :
|
|
|
- FontWeight.Medium)// .padding({
|
|
|
+ this.textWeight)
|
|
|
+ // .padding({
|
|
|
.animation({ duration: this.animDuration, curve: Curve.FastOutSlowIn })
|
|
|
- .width(this.alignMode == 'center'?'100%':'80%')
|
|
|
+ .width(this.alignMode == 'center'?'100%':'76%')
|
|
|
|
|
|
// if (this.seekUIStyle == 'listItem' && index == this.seekIndex && item.text.length > 0
|
|
|
// && this.enableSeek && this.isUserTouching) {
|
|
|
@@ -453,12 +379,18 @@ export struct LyricView2 {
|
|
|
if (this.isUserTouching) {
|
|
|
return
|
|
|
}
|
|
|
- // 计算目标索引,使其在居中位置上方有两条歌词
|
|
|
- // const targetIndex = Math.max(0, index - 3);
|
|
|
- // this.scroller.scrollToIndex(targetIndex, true, ScrollAlign.START);
|
|
|
- this.scroller.scrollToIndex(index, true, ScrollAlign.CENTER)
|
|
|
+ if(this.isHightLightCenter){
|
|
|
+ this.scroller.scrollToIndex(index, true, ScrollAlign.CENTER)
|
|
|
+ }else{
|
|
|
+ // 计算目标索引,使其在居中位置上方有两条歌词
|
|
|
+ const targetIndex = Math.max(0, index - 2);
|
|
|
+ this.scroller.scrollToIndex(targetIndex, true, ScrollAlign.START);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
+
|
|
|
private onPositionChanged(mediaPosition: number) {
|
|
|
if (this.isLyricEmpty) {
|
|
|
printW('The lyric data is empty!')
|