Jelajahi Sumber

新增自定义背景的 背景模糊 背景亮度设置

onecold 1 tahun lalu
induk
melakukan
62cfdc70fd

+ 127 - 7
entry/src/main/ets/pages/SettingPage.ets

@@ -31,8 +31,13 @@ export struct SettingPage {
   @State isShowHistory:boolean = true //是否显示最近播放
   @State isCustomizeBg: boolean = false //自定义背景界面
   @State isCustomizeBgSheet: boolean = false //自定义背景界面
+  @State blurValue: number = 0 //背景模糊
+  @State bgBrightness: number = 0 //背景亮度
+
   @State isGridMusic: boolean = false //是否网格布局
   @State isScrollHide: boolean = false //是否滚动隐藏
+  @State isSameTimePlay: boolean = false //是否和其他app同时播放
+  @State isSavePlayMode: boolean = true
   @State customizeBgPath: string | undefined = '';
   context = getContext(this);
 
@@ -61,6 +66,9 @@ export struct SettingPage {
   static readonly IS_GRID_MUSIC: string = 'is_grid_music';
   static readonly IS_CUSTOMIZE_BG_PATH: string = 'is_customize_bg_path';
   static readonly IS_SCROLL_HIDE: string = 'isScrollHide';
+  static readonly IS_SAMETIME_PLAY: string = 'isSameTimePlay';
+  static readonly CUSTOMIZE_BG_BLUR: string = 'customize_bg_blur';
+  static readonly BG_BRIGHTNESS: string = 'bg_brightness';
 
   /** 当前断点类型(如大屏/小屏) */
   @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointTypeEnum.MD;
@@ -153,7 +161,10 @@ export struct SettingPage {
     this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
     this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, false)
     this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
-
+    this.isSameTimePlay = PreferencesUtil.getBooleanSync(SettingPage.IS_SAMETIME_PLAY, false)
+    this.isSavePlayMode = PreferencesUtil.getBooleanSync(SettingPage.iS_SAVE_PLAY_MODE, true)
+    this.blurValue = PreferencesUtil.getNumberSync(SettingPage.CUSTOMIZE_BG_BLUR, 0)
+    this.bgBrightness = PreferencesUtil.getNumberSync(SettingPage.BG_BRIGHTNESS, 0)
     // 只用 themeMode 控制主题
     this.themeMode = PreferencesUtil.getNumberSync(SettingPage.THEME_MODE, 0)
     this.applyThemeMode(this.themeMode)
@@ -485,6 +496,50 @@ export struct SettingPage {
                 })
             }
             .height(55)
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+              .visibility(Visibility.None)
+            // 默认排序模式
+            Row() {
+              Text('保存播放模式')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Toggle({ type: ToggleType.Switch, isOn: this.isSavePlayMode })
+                .selectedColor($r('app.color.tab_item_bg'))
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isSavePlayMode = checked;
+                  PreferencesUtil.put(SettingPage.iS_SAVE_PLAY_MODE, this.isSavePlayMode)
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+              .visibility(Visibility.None)
+            Row() {
+              Text('与其他应用同时播放')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Toggle({ type: ToggleType.Switch, isOn: this.isSameTimePlay })
+                .selectedColor($r('app.color.tab_item_bg'))
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isSameTimePlay = checked;
+                  PreferencesUtil.put(SettingPage.IS_SAMETIME_PLAY, this.isSameTimePlay)
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
+            .visibility(Visibility.None)
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 播放背景随音乐封面
             Row() {
@@ -657,12 +712,14 @@ export struct SettingPage {
   CustomizeBg() {
     Column() {
       Image( this.customizeBgPath)
-        .height('52%')
+        .height('42%')
         .alt($r('app.color.white'))
         .objectFit( ImageFit.Contain)
         .borderRadius(20)
         .clip(true)
-        .margin({left:30,right:30,bottom:30 })
+        .blur(this.blurValue)
+        .brightness(this.bgBrightness+0.8)
+        .margin({left:30,right:30,bottom:20 })
 
       Row() {
 
@@ -690,11 +747,11 @@ export struct SettingPage {
       }
       .width('100%')
       .height(58)
-      .margin({ left: 20,bottom:30 })
+      .margin({ bottom:20 })
 
       Column() {
         Row() {
-          Text('自定义背景')
+          Text('自定义背景:')
             .margin({ left: 18 })
             .fontSize(15)
             .fontColor($r('app.color.text_color'))
@@ -714,12 +771,75 @@ export struct SettingPage {
             .height(30);
         }
         .height(55)
+
       }
       .backgroundColor($r('app.color.settings_background_main'))
-      .borderRadius(20)
-      .margin({ left: 30, right: 30, top: 0, bottom: 30 })
+      .borderRadius(15)
+      .margin({ left: 30, right: 30, top: 0, bottom: 20 })
       .padding(0)
 
+      Column() {
+        Row() {
+          Text('背景模糊:')
+            .margin({ left: 18 })
+            .fontSize(15)
+            .fontColor($r('app.color.text_color'))
+            .fontWeight(480)
+          Slider({
+            value: this.blurValue,
+            min: 0,
+            max: 100,
+            step: 1,
+            style: SliderStyle.OutSet
+          })
+            .blockColor(Color.Red)
+            .trackColor($r('app.color.speed_text_color'))
+            .selectedColor($r('app.color.index_background'))
+            .trackThickness(8)
+            .onChange((value: number) => {
+              this.blurValue = value;
+              PreferencesUtil.put(SettingPage.CUSTOMIZE_BG_BLUR, this.blurValue)
+              this.sendChangeEvent()
+            })
+            .layoutWeight(1)
+        }
+        .height(55)
+      }
+      .backgroundColor($r('app.color.settings_background_main'))
+      .borderRadius(15)
+      .margin({ left: 30, right: 30, top: 0, bottom: 20 })
+      .padding(0)
+      Column() {
+        Row() {
+          Text('背景亮度:')
+            .margin({ left: 18 })
+            .fontSize(15)
+            .fontColor($r('app.color.text_color'))
+            .fontWeight(480)
+          Slider({
+            value: this.bgBrightness,
+            min: -0.4,
+            max: 0.4,
+            step: 0.1,
+            style: SliderStyle.OutSet
+          })
+            .blockColor(Color.Red)
+            .trackColor($r('app.color.speed_text_color'))
+            .selectedColor($r('app.color.index_background'))
+            .trackThickness(8)
+            .onChange((value: number) => {
+              this.bgBrightness = value;
+              PreferencesUtil.put(SettingPage.BG_BRIGHTNESS, this.bgBrightness)
+              this.sendChangeEvent()
+            })
+            .layoutWeight(1)
+        }
+        .height(55)
+      }
+      .backgroundColor($r('app.color.settings_background_main'))
+      .borderRadius(15)
+      .margin({ left: 30, right: 30, top: 0, bottom: 20 })
+      .padding(0)
 
     }
     .margin({ bottom: 30 })

+ 65 - 29
entry/src/main/ets/view/LocalMusic.ets

@@ -1,5 +1,6 @@
 import TitleBar from './TitleBar'
-import { Animator, curves, display, PromptAction, promptAction, router, SymbolGlyphModifier, window } from '@kit.ArkUI';
+import { Animator,
+  curves, display, PromptAction, promptAction, router, SymbolGlyphModifier, window } from '@kit.ArkUI';
 import { VideoItem } from '../viewmodel/VideoItem';
 import {
   AppUtil,
@@ -84,6 +85,7 @@ import { deviceInfo } from '@kit.BasicServicesKit';
 import { HSBColorPicker, HSBColorPickerLayout } from '@keke/color-picker'
 import { DEBUG } from 'BuildProfile';
 import { LrcParser } from '@sgaolei/lrc_parser';
+import app, { AppResponse } from '@system.app';
 
 const TAG = 'LocalMusic';
 
@@ -128,7 +130,7 @@ interface GeneratedObjectLiteralInterface_1 {
   // DRM资源,需要配置支持的DRM类型, 以chinaDRM为例。
   drmScheme: string;
 }
-
+const ITEM_HEIGHT: number = 58; // 列表项高度
 //功能强大的音乐播放器
 @Preview
 @Component
@@ -171,10 +173,20 @@ export struct LocalMusic {
   @State isCustomizeBg: boolean = false //自定义背景界面
   @State isGridMusic: boolean = false //是否网格布局
   @State isScrollHide: boolean = false //是否滚动隐藏
+  @State isSameTimePlay: boolean = false //是否和其他app同时播放
   @State customizeBgPath: string | undefined = '';
   @State isDarkMode: boolean = false
   @State lyricTextWeight: number = 400
   @State currentSwiperIndex: number = 0
+  @State blurValue: number = 0 //背景模糊
+  @State bgBrightness: number = 0 //背景亮度
+  private listScroller: ListScroller = new ListScroller()
+  private listArea: Area = {
+    width: 0,
+    height: 0,
+    position: {},
+    globalPosition: {}
+  }
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
 
@@ -362,22 +374,7 @@ export struct LocalMusic {
 
   // 组件生命周期
   aboutToAppear() {
-    this.sortType = PreferencesUtil.getNumberSync(SettingPage.SORT_TYPE, 4)
-    this.isCustomizeBg  = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
-    this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
-    this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, false)
-    this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
-    if(this.isCustomizeBg){
-      this.titleBarModel.setRightTitleStateNormalStyleColor(Color.Transparent)
-      this.titleBarModel.setTitleBarBackground(Color.Transparent)
-      this.titleBarModel.setTitleBarBottomLineColor(Color.Transparent)
-      this.titleBarModel.setLeftTitleStateNormalStyleColor(Color.Transparent)
-
-    }else{
-      this.titleBarModel.setTitleBarBackground($r('app.color.title_bar_bg'))
-      this.titleBarModel.setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
-      // this.titleBarModel  .setRightTitleBackground($r('app.color.title_bar_bg'))
-    }
+    this.initSetting()
 
     Utility.getAppName(getContext(this)).then((appName: string) => {
       this.appName = appName
@@ -385,11 +382,6 @@ export struct LocalMusic {
     this.packName = AppUtil.getBundleName()
     this.loadCacheFromStorage(); // 加载缓存
 
-    this.isSavePlayMode = PreferencesUtil.getBooleanSync(SettingPage.iS_SAVE_PLAY_MODE, true)
-    if (this.isSavePlayMode) {
-      this.playType = PreferencesUtil.getNumberSync('musicPlayType', 0)
-    }
-
     this.historyList = PreferencesUtil.getSync(LocalMusic.HISTORY_MUSIC, this.historyList) as Array<VideoItem>
 
     this.mkDownLoadDir()
@@ -426,7 +418,8 @@ export struct LocalMusic {
     });
 
     let event: Callback<InterruptEvent> = (event) => {
-      LogUtils.getInstance().LOGI(`event: ${JSON.stringify(event)}`);
+      LogUtils.getInstance().LOGI(`onecold 与其他应用音频冲突 被截断点event: ${JSON.stringify(event)}`);
+      this.savePlaybackPosition()
       if (event.hintType === InterruptHintType.INTERRUPT_HINT_PAUSE) {
         this.pause();
       } else if (event.hintType === InterruptHintType.INTERRUPT_HINT_RESUME) {
@@ -479,12 +472,20 @@ export struct LocalMusic {
     context.getApplicationContext().setColorMode(colorMode)
   }
 
-  doChangeSetting(){
+
+  initSetting(){
     this.sortType = PreferencesUtil.getNumberSync(SettingPage.SORT_TYPE, 4)
     this.isCustomizeBg  = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
     this.customizeBgPath  = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
     this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, false)
     this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
+    this.isSameTimePlay = PreferencesUtil.getBooleanSync(SettingPage.IS_SAMETIME_PLAY, false)
+    this.isSavePlayMode = PreferencesUtil.getBooleanSync(SettingPage.iS_SAVE_PLAY_MODE, true)
+    this.blurValue = PreferencesUtil.getNumberSync(SettingPage.CUSTOMIZE_BG_BLUR, 0)
+    this.bgBrightness = PreferencesUtil.getNumberSync(SettingPage.BG_BRIGHTNESS, 0)
+    if (this.isSavePlayMode) {
+      this.playType = PreferencesUtil.getNumberSync('musicPlayType', 0)
+    }
     if(this.isCustomizeBg){
       this.titleBarModel.setRightTitleStateNormalStyleColor(Color.Transparent)
       this.titleBarModel.setTitleBarBackground(Color.Transparent)
@@ -496,7 +497,10 @@ export struct LocalMusic {
       this.titleBarModel.setRightTitleStateNormalStyleColor($r('app.color.title_bar_bg'))
       this.titleBarModel.setLeftTitleStateNormalStyleColor($r('app.color.title_bar_bg'))
     }
+  }
 
+  doChangeSetting(){
+    this.initSetting()
     this.doUpdateData()
   }
 
@@ -511,6 +515,9 @@ export struct LocalMusic {
   }
 
   onPageShow() {
+    app.setImageCacheCount(100);
+    // 设置解码前图片数据内存缓存上限为100MB (100MB=100*1024*1024B=104857600B)
+    app.setImageRawDataCacheSize(104857600);
     Logger.info('onecold onPageShow currentBreakpoint= ' + this.currentBreakpoint)
   }
 
@@ -1878,6 +1885,8 @@ export struct LocalMusic {
       .backgroundImage(this.isCustomizeBg?this.customizeBgPath:$r('app.color.bottom_control_background'))
       .backgroundImageSize(this.isCoverOpacity()?{width:'100%'}:{ height: '100%'})
       .backgroundImagePosition(Alignment.Center)
+      .backdropBlur(this.blurValue)
+      .backgroundBrightness({rate:this.isCustomizeBg?0.1:0,lightUpDegree:this.bgBrightness})
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
 
     }
@@ -2187,7 +2196,7 @@ export struct LocalMusic {
 
 
     }
-    .height(58)
+    .height(ITEM_HEIGHT)
     .width('100%')
     .visibility(this.isShowDir(item.name)?Visibility.Visible:Visibility.None)
     .opacity(this.opacityItem) // 绑定透明度
@@ -2304,7 +2313,7 @@ export struct LocalMusic {
 
     }
     .width('100%')
-    .height(58)
+    .height(ITEM_HEIGHT)
     .justifyContent(FlexAlign.SpaceBetween)
     .stateStyles({
       pressed: { opacity: 0.6 } // 按压反馈
@@ -2794,6 +2803,8 @@ export struct LocalMusic {
   }
 
   private scroller: Scroller = new Scroller();
+  @State startIndex:number = 0
+  @State endIndex:number = 0
   @Builder
   getGridView(){
 
@@ -2887,6 +2898,11 @@ export struct LocalMusic {
     .rowsGap(12)
     .visibility(this.isGridMusic?Visibility.Visible:Visibility.None)
     .enableScrollInteraction(true)
+    // 滚轴滑动,记录下滑动时的起始位置和终点位置
+    .onScrollIndex((start: number, end: number) => {
+      this.startIndex = start
+      this.endIndex = end
+    })
     .onScrollFrameBegin((offset: number) => {
       //滚动小屏幕 比如puraX外屏和手机横屏可以隐藏bottomBarHeight topBarHeight
       if(this.isPhoneLan()){
@@ -3128,11 +3144,11 @@ export struct LocalMusic {
     .height(item.type === CommonConstants.TYPE_IS_DIR ?'22%':'40%')
   }
 
-
+  private listMaxScrollOffsetY: number = 0
   @Builder
   getListView() {
 
-    List() {
+    List({ scroller: this.listScroller }) {
       LazyForEach(this.dataSource, (item: VideoItem, index: number) => {
         ListItem() {
           Column() {
@@ -3251,7 +3267,23 @@ export struct LocalMusic {
                     this.itemMove(indexA, indexA - 1);
                   });
                 }
+                let curListOffset = this.listScroller.currentOffset()
+                // 获取手指信息
+                let fingerInfo = event.fingerList[0]
+                let clickPercentY =
+                  (fingerInfo.globalY - Number(this.listArea.globalPosition.y)) / Number(this.listArea.height)
+                if (clickPercentY > 0.8 && !this.listScroller.isAtEnd()) {
+                  let scrollVelocity = clickPercentY > 0.9 ? 4 : 2
+                  if (this.listMaxScrollOffsetY - curListOffset.yOffset > scrollVelocity + 5) {
+                    this.listScroller.scrollTo({xOffset: 0, yOffset: curListOffset.yOffset += scrollVelocity})
 
+                  }
+                } else if (clickPercentY < 0.2 && curListOffset.yOffset >= 0) {
+                  let scrollVelocity = clickPercentY < 0.1 ? 4 : 2
+                  if (curListOffset.yOffset > scrollVelocity + 5) {
+                    this.listScroller.scrollTo({xOffset: 0, yOffset: curListOffset.yOffset -= scrollVelocity})
+                  }
+                }
 
               })
               .onActionEnd((event: GestureEvent) => {
@@ -3306,6 +3338,10 @@ export struct LocalMusic {
         xxl: 20
       }).getValue(this.currentBreakpoint)
     )
+    .onAreaChange((oldValue: Area, newValue: Area) => {
+      this.listArea = newValue
+      this.listMaxScrollOffsetY = this.videoLocalList.length * (ITEM_HEIGHT) - 10
+    })
     .onScrollFrameBegin((offset: number) => {
 
       //滚动小屏幕 比如puraX外屏和手机横屏可以隐藏bottomBarHeight topBarHeight

+ 1 - 1
lib/src/main/ets/parse/LyricParser.ts

@@ -28,7 +28,7 @@ export class LyricParser implements IParser {
         let album = ""
         let by = ""
         let offset = 0
-        const ignoredTags = [ 'hash', 'sign', 'qq', 'total']; // 定义需要忽略的标签
+        const ignoredTags = [ 'hash', 'sign', 'qq', 'total','Outro']; // 定义需要忽略的标签
         for (let i = 0; i < src.length; i++) {
             let line = src[i]
             console.info(`content The line of file:line ${line}`);