|
@@ -0,0 +1,607 @@
|
|
|
|
|
+import { PreferencesUtil } from '@pura/harmony-utils'
|
|
|
|
|
+import { HSBColorPicker, HSBColorPickerLayout } from '@keke/color-picker'
|
|
|
|
|
+import { CommonConstants } from '../../common/constants/CommonConstants'
|
|
|
|
|
+import { LyricController } from '../../lyric/LyricController'
|
|
|
|
|
+import { SettingPage } from '../../pages/SettingPage'
|
|
|
|
|
+import {
|
|
|
|
|
+ applyPlayerLyricHighlightColor,
|
|
|
|
|
+ applyPlayerLyricHighlightScale,
|
|
|
|
|
+ applyPlayerLyricLineSpace,
|
|
|
|
|
+ applyPlayerLyricTextColor,
|
|
|
|
|
+ applyPlayerLyricTextSize,
|
|
|
|
|
+ applyPlayerLyricTextWeight,
|
|
|
|
|
+ clampPlayerLyricOffset,
|
|
|
|
|
+ formatPlayerLyricOffsetText,
|
|
|
|
|
+ resolvePlayerLyricAlignMode
|
|
|
|
|
+} from './PlayerLyricSettingsHelper'
|
|
|
|
|
+
|
|
|
|
|
+@Component
|
|
|
|
|
+export struct PlayerLyricSettingSheet {
|
|
|
|
|
+ @Prop themeColor: string = CommonConstants.DEFAULT_THEME_COLOR
|
|
|
|
|
+ @Link timeOffset: number
|
|
|
|
|
+ @Link isShowSingleLineLyric: boolean
|
|
|
|
|
+ @Link isEnableWordByWordLyric: boolean
|
|
|
|
|
+ @Link isLightText: boolean
|
|
|
|
|
+ @Link isHightLightCenter: boolean
|
|
|
|
|
+ @Link currentLyricAlignMode: number
|
|
|
|
|
+ @Link lyricController: LyricController
|
|
|
|
|
+ @Link lyricControllerSingle: LyricController
|
|
|
|
|
+ onTimeOffsetChanged: () => void = (): void => {}
|
|
|
|
|
+ onSelectLocalLyric: () => void = (): void => {}
|
|
|
|
|
+ onFetchLyric: () => void = (): void => {}
|
|
|
|
|
+ onShareLyric: () => void = (): void => {}
|
|
|
|
|
+
|
|
|
|
|
+ @State private currentLyricColor: string = '#FFFFFF'
|
|
|
|
|
+ @State private currentHighLightLyricColor: string = '#FFFFFF'
|
|
|
|
|
+ @State private currentLyricSize: number = 18
|
|
|
|
|
+ @State private currentHightLyricSize: number = 1.23
|
|
|
|
|
+ @State private currentLyricLineSpace: number = 10
|
|
|
|
|
+ @State private lyricTextWeight: number = 400
|
|
|
|
|
+ @State private isShowSelectColor: boolean = false
|
|
|
|
|
+ @State private isShowHLSelectColor: boolean = false
|
|
|
|
|
+
|
|
|
|
|
+ aboutToAppear(): void {
|
|
|
|
|
+ this.currentLyricColor = PreferencesUtil.getStringSync('LyricColor', '#FFFFFF')
|
|
|
|
|
+ this.currentHighLightLyricColor = PreferencesUtil.getStringSync('LyricHighLightColor', '#FFFFFF')
|
|
|
|
|
+ this.currentLyricSize = PreferencesUtil.getNumberSync('LyricTextSize', 18)
|
|
|
|
|
+ this.currentHightLyricSize = PreferencesUtil.getNumberSync('HighLyricTextSize', 1.23)
|
|
|
|
|
+ this.currentLyricLineSpace = PreferencesUtil.getNumberSync('LyricLineSpace', 10)
|
|
|
|
|
+ this.lyricTextWeight = PreferencesUtil.getNumberSync('lyricTextWeight', 400)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private syncWordByWordLyricMode(): void {
|
|
|
|
|
+ this.lyricController.setEnableWordByWordLyric(this.isEnableWordByWordLyric)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private syncLyricLightTextMode(): void {
|
|
|
|
|
+ this.lyricController.setLightText(this.isLightText)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private setLyricAlignMode(index: number): void {
|
|
|
|
|
+ this.currentLyricAlignMode = index === 1 ? 1 : 0
|
|
|
|
|
+ this.lyricController.setAlignMode(resolvePlayerLyricAlignMode(this.currentLyricAlignMode))
|
|
|
|
|
+ PreferencesUtil.putSync('LyricAlignMode', this.currentLyricAlignMode)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private setLyricTextSize(value: number): void {
|
|
|
|
|
+ this.currentLyricSize = value
|
|
|
|
|
+ applyPlayerLyricTextSize(this.lyricController, this.lyricControllerSingle, this.currentLyricSize)
|
|
|
|
|
+ PreferencesUtil.putSync('LyricTextSize', this.currentLyricSize)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private setHighLyricTextSize(scale: number): void {
|
|
|
|
|
+ this.currentHightLyricSize = scale
|
|
|
|
|
+ applyPlayerLyricHighlightScale(this.lyricController, this.lyricControllerSingle, this.currentHightLyricSize)
|
|
|
|
|
+ PreferencesUtil.putSync('HighLyricTextSize', scale)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private setLyricLineSpace(value: number): void {
|
|
|
|
|
+ this.currentLyricLineSpace = value
|
|
|
|
|
+ applyPlayerLyricLineSpace(this.lyricController, this.lyricControllerSingle, this.currentLyricLineSpace)
|
|
|
|
|
+ PreferencesUtil.putSync('LyricLineSpace', this.currentLyricLineSpace)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private setLyricTextWeight(value: number): void {
|
|
|
|
|
+ this.lyricTextWeight = value
|
|
|
|
|
+ applyPlayerLyricTextWeight(this.lyricController, this.lyricControllerSingle, this.lyricTextWeight)
|
|
|
|
|
+ PreferencesUtil.putSync('lyricTextWeight', this.lyricTextWeight)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private changeLyricColor(color: string): void {
|
|
|
|
|
+ this.currentLyricColor = color
|
|
|
|
|
+ applyPlayerLyricTextColor(this.lyricController, this.lyricControllerSingle, this.currentLyricColor)
|
|
|
|
|
+ PreferencesUtil.putSync('LyricColor', this.currentLyricColor)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private changeLyricHighlightColor(color: string): void {
|
|
|
|
|
+ this.currentHighLightLyricColor = color
|
|
|
|
|
+ applyPlayerLyricHighlightColor(this.lyricController, this.lyricControllerSingle, this.currentHighLightLyricColor)
|
|
|
|
|
+ PreferencesUtil.putSync('LyricHighLightColor', this.currentHighLightLyricColor)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private handlePrecisionAdjust(step: number): void {
|
|
|
|
|
+ if (step === 0) {
|
|
|
|
|
+ this.timeOffset = 0
|
|
|
|
|
+ this.onTimeOffsetChanged()
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ const nextOffset = clampPlayerLyricOffset(this.timeOffset + step)
|
|
|
|
|
+ if (nextOffset === this.timeOffset) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.timeOffset = nextOffset
|
|
|
|
|
+ this.onTimeOffsetChanged()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private isButtonDisabled(step: number): boolean {
|
|
|
|
|
+ if (step === 0) {
|
|
|
|
|
+ return this.timeOffset === 0
|
|
|
|
|
+ }
|
|
|
|
|
+ return clampPlayerLyricOffset(this.timeOffset + step) === this.timeOffset
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private getLyricSizeDisplayValue(): string {
|
|
|
|
|
+ return this.currentLyricSize.toFixed(1)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private getHighLyricSizeDisplayValue(): string {
|
|
|
|
|
+ return this.currentHightLyricSize.toFixed(1)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private getLyricLineSpaceDisplayValue(): string {
|
|
|
|
|
+ return Math.round(this.currentLyricLineSpace).toString()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private getLyricTextWeightDisplayValue(): string {
|
|
|
|
|
+ return Math.round(this.lyricTextWeight).toString()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ private SelectColor(isHighColor: boolean) {
|
|
|
|
|
+ Row({ space: 10 }) {
|
|
|
|
|
+ HSBColorPicker({
|
|
|
|
|
+ color: '#FFFFFF',
|
|
|
|
|
+ radius: 8,
|
|
|
|
|
+ layout: HSBColorPickerLayout.COLUMN,
|
|
|
|
|
+ predefine: ['#8b27f4', '#73f9fc', '#fffe55', '#f5cee3', '#eb4827', '#e93bf4', '#3e68f4', '#c5e6d3', '#e4e4e4',
|
|
|
|
|
+ '#fa7105'],
|
|
|
|
|
+ onChange: (value: string) => {
|
|
|
|
|
+ if (isHighColor) {
|
|
|
|
|
+ this.changeLyricHighlightColor(value)
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.changeLyricColor(value)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .height(250)
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .padding(25)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('66%')
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ private BuildTimeControls() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Text(formatPlayerLyricOffsetText(this.timeOffset))
|
|
|
|
|
+ .fontSize(18)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .margin({ bottom: 10 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ this.PrecisionTimeButton($r('app.media.ic_previous'), -0.5, ' -0.5s ')
|
|
|
|
|
+ this.PrecisionTimeButton($r('app.media.loop'), 0, '重置')
|
|
|
|
|
+ this.PrecisionTimeButton($r('app.media.ic_next'), 0.5, ' +0.5s ')
|
|
|
|
|
+ }
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ }
|
|
|
|
|
+ .margin({ top: 12, bottom: 8 })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ private PrecisionTimeButton(icon: Resource, step: number, label: string) {
|
|
|
|
|
+ Button({ type: ButtonType.Capsule, stateEffect: true }) {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Image(icon)
|
|
|
|
|
+ .width(28)
|
|
|
|
|
+ .margin({ bottom: 5 })
|
|
|
|
|
+ .opacity(this.isButtonDisabled(step) ? 0.5 : 1)
|
|
|
|
|
+
|
|
|
|
|
+ Text(label)
|
|
|
|
|
+ .fontSize(12)
|
|
|
|
|
+ .fontColor('#FFFFFF')
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .enabled(!this.isButtonDisabled(step))
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.handlePrecisionAdjust(step)
|
|
|
|
|
+ })
|
|
|
|
|
+ .padding(5)
|
|
|
|
|
+ .width(66)
|
|
|
|
|
+ .height(66)
|
|
|
|
|
+ .margin({ left: 18, right: 18 })
|
|
|
|
|
+ .border({
|
|
|
|
|
+ color: '#FFFFFF',
|
|
|
|
|
+ width: 1.8
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ private pushLyricButton(icon: Resource, step: number, label: string) {
|
|
|
|
|
+ Button({ type: ButtonType.Capsule, stateEffect: true }) {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Image(icon)
|
|
|
|
|
+ .width(14)
|
|
|
|
|
+ .margin({ left: 13 })
|
|
|
|
|
+
|
|
|
|
|
+ Text(label)
|
|
|
|
|
+ .fontSize(12)
|
|
|
|
|
+ .margin({ left: 6 })
|
|
|
|
|
+ .fontColor('#FFFFFF')
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ if (step === 0) {
|
|
|
|
|
+ this.onSelectLocalLyric()
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if (step === 1) {
|
|
|
|
|
+ this.onFetchLyric()
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.onShareLyric()
|
|
|
|
|
+ })
|
|
|
|
|
+ .padding({ left: 6, right: 6 })
|
|
|
|
|
+ .margin({ left: 10, right: 10 })
|
|
|
|
|
+ .height(42)
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .border({
|
|
|
|
|
+ color: '#FFFFFF',
|
|
|
|
|
+ width: 1.8
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ build() {
|
|
|
|
|
+ Scroll() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ this.BuildTimeControls()
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('迷你歌词:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .width(88)
|
|
|
|
|
+ Toggle({ type: ToggleType.Switch, isOn: this.isShowSingleLineLyric })
|
|
|
|
|
+ .selectedColor(this.themeColor)
|
|
|
|
|
+ .switchPointColor(Color.White)
|
|
|
|
|
+ .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
|
|
|
|
|
+ .onChange((checked: boolean) => {
|
|
|
|
|
+ this.isShowSingleLineLyric = checked
|
|
|
|
|
+ PreferencesUtil.putSync(SettingPage.IS_SHOW_SLLYRIC, this.isShowSingleLineLyric)
|
|
|
|
|
+ })
|
|
|
|
|
+ .width(50)
|
|
|
|
|
+ .height(30)
|
|
|
|
|
+ .alignSelf(ItemAlign.Start)
|
|
|
|
|
+ .margin({ left: 12 })
|
|
|
|
|
+ Blank()
|
|
|
|
|
+ }
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('逐字歌词:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .width(88)
|
|
|
|
|
+ Toggle({ type: ToggleType.Switch, isOn: this.isEnableWordByWordLyric })
|
|
|
|
|
+ .selectedColor(this.themeColor)
|
|
|
|
|
+ .switchPointColor(Color.White)
|
|
|
|
|
+ .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
|
|
|
|
|
+ .onChange((checked: boolean) => {
|
|
|
|
|
+ this.isEnableWordByWordLyric = checked
|
|
|
|
|
+ PreferencesUtil.putSync(SettingPage.IS_ENABLE_WORD_BY_WORD_LYRIC, this.isEnableWordByWordLyric)
|
|
|
|
|
+ this.syncWordByWordLyricMode()
|
|
|
|
|
+ })
|
|
|
|
|
+ .width(50)
|
|
|
|
|
+ .height(30)
|
|
|
|
|
+ .alignSelf(ItemAlign.Start)
|
|
|
|
|
+ .margin({ left: 12 })
|
|
|
|
|
+ Blank()
|
|
|
|
|
+ }
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ left: 20, right: 15, top: 10, bottom: 10 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('歌词发光:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .width(88)
|
|
|
|
|
+ Toggle({ type: ToggleType.Switch, isOn: this.isLightText })
|
|
|
|
|
+ .selectedColor(this.themeColor)
|
|
|
|
|
+ .switchPointColor(Color.White)
|
|
|
|
|
+ .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
|
|
|
|
|
+ .onChange((checked: boolean) => {
|
|
|
|
|
+ this.isLightText = checked
|
|
|
|
|
+ PreferencesUtil.putSync(SettingPage.IS_LIGHT_TEXT, this.isLightText)
|
|
|
|
|
+ this.syncLyricLightTextMode()
|
|
|
|
|
+ })
|
|
|
|
|
+ .width(50)
|
|
|
|
|
+ .height(30)
|
|
|
|
|
+ .alignSelf(ItemAlign.Start)
|
|
|
|
|
+ .margin({ left: 12 })
|
|
|
|
|
+ Blank()
|
|
|
|
|
+ }
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('高亮居中:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .width(88)
|
|
|
|
|
+ Toggle({ type: ToggleType.Switch, isOn: this.isHightLightCenter })
|
|
|
|
|
+ .selectedColor(this.themeColor)
|
|
|
|
|
+ .switchPointColor(Color.White)
|
|
|
|
|
+ .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
|
|
|
|
|
+ .onChange((checked: boolean) => {
|
|
|
|
|
+ this.isHightLightCenter = checked
|
|
|
|
|
+ PreferencesUtil.putSync(SettingPage.IS_SHOW_SIMI, this.isHightLightCenter)
|
|
|
|
|
+ this.lyricController.setHightLightCenter(this.isHightLightCenter)
|
|
|
|
|
+ })
|
|
|
|
|
+ .width(50)
|
|
|
|
|
+ .height(30)
|
|
|
|
|
+ .alignSelf(ItemAlign.Start)
|
|
|
|
|
+ .margin({ left: 12 })
|
|
|
|
|
+ Blank()
|
|
|
|
|
+ }
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ left: 20, right: 15, top: 10, bottom: 10 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('歌词居中:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ ForEach(['居中', '居左'], (size: string, index: number) => {
|
|
|
|
|
+ Button(size)
|
|
|
|
|
+ .width(60)
|
|
|
|
|
+ .height(28)
|
|
|
|
|
+ .fontSize(12)
|
|
|
|
|
+ .fontColor('#FFFFFF')
|
|
|
|
|
+ .backgroundColor(this.currentLyricAlignMode === index ? this.themeColor : Color.Transparent)
|
|
|
|
|
+ .border({
|
|
|
|
|
+ color: this.currentLyricAlignMode === index ? '#007DFF' : '#DDDDDD',
|
|
|
|
|
+ width: 1.8
|
|
|
|
|
+ })
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.setLyricAlignMode(index)
|
|
|
|
|
+ })
|
|
|
|
|
+ .margin({ left: 10, right: 8 })
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+
|
|
|
|
|
+ Blank()
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ top: 10, bottom: 10, right: 15, left: 20 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('歌词颜色:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ Text(this.currentLyricColor)
|
|
|
|
|
+ .fontSize(15)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .margin({ left: 6, right: 6 })
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ }
|
|
|
|
|
+ .backgroundColor(this.currentLyricColor)
|
|
|
|
|
+ .margin({ right: 12 })
|
|
|
|
|
+ .borderRadius(20)
|
|
|
|
|
+ .height(28)
|
|
|
|
|
+ .width(28)
|
|
|
|
|
+
|
|
|
|
|
+ Button({ type: ButtonType.Capsule, stateEffect: true }) {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ SymbolGlyph($r('sys.symbol.paintbrush'))
|
|
|
|
|
+ .fontColor([Color.White])
|
|
|
|
|
+ .effectStrategy(1)
|
|
|
|
|
+ Text('选择颜色')
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .margin({ left: 10 })
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .border({
|
|
|
|
|
+ color: '#FFFFFF',
|
|
|
|
|
+ radius: 20,
|
|
|
|
|
+ width: 1.8
|
|
|
|
|
+ })
|
|
|
|
|
+ .height(36)
|
|
|
|
|
+ .width(110)
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.isShowSelectColor = !this.isShowSelectColor
|
|
|
|
|
+ })
|
|
|
|
|
+ .bindPopup(this.isShowSelectColor, {
|
|
|
|
|
+ builder: this.SelectColor(false),
|
|
|
|
|
+ placement: Placement.Top,
|
|
|
|
|
+ mask: { color: '#33000000' },
|
|
|
|
|
+ enableArrow: false,
|
|
|
|
|
+ showInSubWindow: false,
|
|
|
|
|
+ onStateChange: (e) => {
|
|
|
|
|
+ if (!e.isVisible) {
|
|
|
|
|
+ this.isShowSelectColor = false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ top: 10, bottom: 10, right: 15, left: 20 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('高亮颜色:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ Text(this.currentHighLightLyricColor)
|
|
|
|
|
+ .fontSize(15)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .margin({ left: 6, right: 6 })
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ }
|
|
|
|
|
+ .backgroundColor(this.currentHighLightLyricColor)
|
|
|
|
|
+ .margin({ right: 12 })
|
|
|
|
|
+ .borderRadius(20)
|
|
|
|
|
+ .height(28)
|
|
|
|
|
+ .width(28)
|
|
|
|
|
+
|
|
|
|
|
+ Button({ type: ButtonType.Capsule, stateEffect: true }) {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ SymbolGlyph($r('sys.symbol.paintbrush'))
|
|
|
|
|
+ .fontColor([Color.White])
|
|
|
|
|
+ .effectStrategy(1)
|
|
|
|
|
+ Text('选择颜色')
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .margin({ left: 10 })
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .border({
|
|
|
|
|
+ color: '#FFFFFF',
|
|
|
|
|
+ radius: 20,
|
|
|
|
|
+ width: 1.8
|
|
|
|
|
+ })
|
|
|
|
|
+ .height(36)
|
|
|
|
|
+ .width(110)
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ this.isShowHLSelectColor = !this.isShowHLSelectColor
|
|
|
|
|
+ })
|
|
|
|
|
+ .bindPopup(this.isShowHLSelectColor, {
|
|
|
|
|
+ builder: this.SelectColor(true),
|
|
|
|
|
+ placement: Placement.Top,
|
|
|
|
|
+ mask: { color: '#33000000' },
|
|
|
|
|
+ enableArrow: false,
|
|
|
|
|
+ showInSubWindow: false,
|
|
|
|
|
+ onStateChange: (e) => {
|
|
|
|
|
+ if (!e.isVisible) {
|
|
|
|
|
+ this.isShowHLSelectColor = false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ top: 10, bottom: 10, right: 15, left: 20 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('歌词字号:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ Slider({
|
|
|
|
|
+ value: this.currentLyricSize,
|
|
|
|
|
+ min: 12,
|
|
|
|
|
+ max: 30,
|
|
|
|
|
+ step: 0.1,
|
|
|
|
|
+ style: SliderStyle.OutSet
|
|
|
|
|
+ })
|
|
|
|
|
+ .blockColor(this.themeColor)
|
|
|
|
|
+ .trackColor($r('app.color.speed_text_color'))
|
|
|
|
|
+ .selectedColor(Color.White)
|
|
|
|
|
+ .trackThickness(6)
|
|
|
|
|
+ .onChange((value: number) => {
|
|
|
|
|
+ this.setLyricTextSize(value)
|
|
|
|
|
+ })
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .margin({ right: 3 })
|
|
|
|
|
+ Text(this.getLyricSizeDisplayValue())
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ left: 20, right: 15, top: 5, bottom: 5 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('高亮倍数:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ Slider({
|
|
|
|
|
+ value: this.currentHightLyricSize,
|
|
|
|
|
+ min: 1,
|
|
|
|
|
+ max: 2,
|
|
|
|
|
+ step: 0.1,
|
|
|
|
|
+ style: SliderStyle.OutSet
|
|
|
|
|
+ })
|
|
|
|
|
+ .blockColor(this.themeColor)
|
|
|
|
|
+ .trackColor($r('app.color.speed_text_color'))
|
|
|
|
|
+ .selectedColor(Color.White)
|
|
|
|
|
+ .trackThickness(6)
|
|
|
|
|
+ .onChange((value: number) => {
|
|
|
|
|
+ this.setHighLyricTextSize(value)
|
|
|
|
|
+ })
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .margin({ right: 3 })
|
|
|
|
|
+ Text(this.getHighLyricSizeDisplayValue())
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ left: 20, right: 15, top: 5, bottom: 5 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('歌词间隙:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ Slider({
|
|
|
|
|
+ value: this.currentLyricLineSpace,
|
|
|
|
|
+ min: 0,
|
|
|
|
|
+ max: 100,
|
|
|
|
|
+ step: 1,
|
|
|
|
|
+ style: SliderStyle.OutSet
|
|
|
|
|
+ })
|
|
|
|
|
+ .blockColor(this.themeColor)
|
|
|
|
|
+ .trackColor($r('app.color.speed_text_color'))
|
|
|
|
|
+ .selectedColor(Color.White)
|
|
|
|
|
+ .trackThickness(6)
|
|
|
|
|
+ .onChange((value: number) => {
|
|
|
|
|
+ this.setLyricLineSpace(value)
|
|
|
|
|
+ })
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .margin({ right: 3 })
|
|
|
|
|
+ Text(this.getLyricLineSpaceDisplayValue())
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ left: 20, right: 15, top: 5, bottom: 5 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text('歌词字重:')
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ Slider({
|
|
|
|
|
+ value: this.lyricTextWeight,
|
|
|
|
|
+ min: 100,
|
|
|
|
|
+ max: 900,
|
|
|
|
|
+ step: 100,
|
|
|
|
|
+ style: SliderStyle.OutSet
|
|
|
|
|
+ })
|
|
|
|
|
+ .blockColor(this.themeColor)
|
|
|
|
|
+ .trackColor($r('app.color.speed_text_color'))
|
|
|
|
|
+ .selectedColor(Color.White)
|
|
|
|
|
+ .trackThickness(6)
|
|
|
|
|
+ .onChange((value: number) => {
|
|
|
|
|
+ this.setLyricTextWeight(value)
|
|
|
|
|
+ })
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .margin({ right: 3 })
|
|
|
|
|
+ Text(this.getLyricTextWeightDisplayValue())
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .margin({ left: 20, right: 15, top: 5, bottom: 5 })
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ this.pushLyricButton($r('app.media.cut_current'), 0, '本地歌词')
|
|
|
|
|
+ this.pushLyricButton($r('app.media.share2'), 2, '分享歌词')
|
|
|
|
|
+ this.pushLyricButton($r('app.media.white_search'), 1, '获取歌词')
|
|
|
|
|
+ }
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ .margin({ top: 3, bottom: 10 })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('88%')
|
|
|
|
|
+ }
|
|
|
|
|
+ .width('100%')
|
|
|
|
|
+ .height('100%')
|
|
|
|
|
+ }
|
|
|
|
|
+}
|