音频悬浮窗

@@ -13,6 +13,7 @@ import { image } from '@kit.ImageKit';
 import { getPicture, imageNet2PixelMap } from '../../utils/ImageUtils';
 import { getPicture, imageNet2PixelMap } from '../../utils/ImageUtils';
 import { effectKit } from '@kit.ArkGraphics2D';
 import { effectKit } from '@kit.ArkGraphics2D';
 import { window } from '@kit.ArkUI';
 import { window } from '@kit.ArkUI';
+import { AudioSuspensionModel } from '../../viewmodel/AudioSuspensionModel'
 
 
 const TAG = 'MorningEveningPaperComponent';
 const TAG = 'MorningEveningPaperComponent';
 
 
@@ -54,6 +55,8 @@ export struct MorningEveningPaperComponent {
   @State topSafeHeight: number = 0;
   @State topSafeHeight: number = 0;
   private audioDataList: AudioDataList[] = []
   private audioDataList: AudioDataList[] = []
   private playerController: WDPlayerController = new WDPlayerController();
   private playerController: WDPlayerController = new WDPlayerController();
+  private AudioSuspension = new AudioSuspensionModel()
+
   simpleAudioDialog: CustomDialogController = new CustomDialogController({
   simpleAudioDialog: CustomDialogController = new CustomDialogController({
     builder: PaperReaderSimpleDialog({
     builder: PaperReaderSimpleDialog({
       cancel: this.onCancel,
       cancel: this.onCancel,
@@ -261,8 +264,9 @@ export struct MorningEveningPaperComponent {
           .objectFit(ImageFit.Contain)
           .objectFit(ImageFit.Contain)
           .onClick(() => {
           .onClick(() => {
             Logger.info("TAG", "cj compInfoBean onClick1 = " + this.isAudioPlaying)
             Logger.info("TAG", "cj compInfoBean onClick1 = " + this.isAudioPlaying)
-            dialog.open()
-            this.playerController.firstPlay(this.audioPlayUrl)
+            // dialog.open()
+            this.AudioSuspension.showWindow()
+            // this.playerController.firstPlay(this.audioPlayUrl)
             Logger.info("TAG", "cj compInfoBean onClick2 = " + this.isAudioPlaying)
             Logger.info("TAG", "cj compInfoBean onClick2 = " + this.isAudioPlaying)
           })
           })
       }
       }

+import window from '@ohos.window';
 import { Logger } from 'wdKit';
 import { Logger } from 'wdKit';
 import { WDPlayerController } from 'wdPlayer';
 import { WDPlayerController } from 'wdPlayer';
+import { BusinessError } from '@ohos.base';
 
 
 const TAG = 'AudioSuspensionModel'
 const TAG = 'AudioSuspensionModel'
 
 
@@ -8,10 +10,8 @@ const TAG = 'AudioSuspensionModel'
  */
  */
 export class AudioSuspensionModel {
 export class AudioSuspensionModel {
   public playerController: SubscribedAbstractProperty<WDPlayerController> =  AppStorage.link<WDPlayerController>('playerController')
   public playerController: SubscribedAbstractProperty<WDPlayerController> =  AppStorage.link<WDPlayerController>('playerController')
-  public simpleAudioDialog: CustomDialogController = {} as  CustomDialogController
-  constructor(simpleAudioDialog: CustomDialogController) {
-    this.simpleAudioDialog = simpleAudioDialog
-
+  public floatWindowClass: SubscribedAbstractProperty<window.Window> =  AppStorage.link<window.Window>('floatWindowClass')
+  constructor() {
     this.initPlayerController()
     this.initPlayerController()
   }
   }
   /**
   /**
@@ -34,10 +34,28 @@ export class AudioSuspensionModel {
     // this.playerController.switchPlayOrPause()
     // this.playerController.switchPlayOrPause()
     Logger.info(TAG, 'handlePlayer')
     Logger.info(TAG, 'handlePlayer')
   }
   }
+  // 显示悬浮窗。
+  public showWindow() {
+    this.floatWindowClass.get().showWindow((err: BusinessError) => {
+      let errCode: number = err.code;
+      if (errCode) {
+        console.error('floatWindowClass Failed to show the window. Cause: ' + JSON.stringify(err));
+        return;
+      }
+      console.info('floatWindowClass Succeeded in showing the window.');
+    });
+  }
 
 
-  public delete() {
-    let res: boolean = AppStorage.delete('PropB');
-    Logger.info(TAG, `delete:  ${res}`)
+  // 销毁悬浮窗 使用destroy对其进行销毁。
+  public destroyWindow() {
+    this.floatWindowClass.get().destroyWindow((err: BusinessError) => {
+      let errCode: number = err.code;
+      if (errCode) {
+        console.error('floatWindowClass Failed to destroy the window. Cause: ' + JSON.stringify(err));
+        return;
+      }
+      console.info('floatWindowClass Succeeded in destroying the window.');
+    });
   }
   }
 
 
 
 

@@ -18,6 +18,7 @@
     "wdHwAbility": "file:../../features/wdHwAbility",
     "wdHwAbility": "file:../../features/wdHwAbility",
     "wdJsBridge": "file:../../commons/wdJsBridge",
     "wdJsBridge": "file:../../commons/wdJsBridge",
     "wdLogin": "file:../../features/wdLogin",
     "wdLogin": "file:../../features/wdLogin",
-    "wdTracking": "file:../../features/wdTracking"
+    "wdTracking": "file:../../features/wdTracking",
+    "wdPlayer": "file:../../features/wdPlayer"
   }
   }
 }
 }

@@ -3,6 +3,7 @@ import hilog from '@ohos.hilog';
 import UIAbility from '@ohos.app.ability.UIAbility';
 import UIAbility from '@ohos.app.ability.UIAbility';
 import Want from '@ohos.app.ability.Want';
 import Want from '@ohos.app.ability.Want';
 import window from '@ohos.window';
 import window from '@ohos.window';
+import { BusinessError } from '@ohos.base';
 import { registerRouter } from 'wdRouter';
 import { registerRouter } from 'wdRouter';
 import {
 import {
   EmitterEventId,
   EmitterEventId,
@@ -79,6 +80,8 @@ export default class EntryAbility extends UIAbility {
     AppStorage.setOrCreate('topSafeHeight', topSafeHeight);
     AppStorage.setOrCreate('topSafeHeight', topSafeHeight);
     AppStorage.setOrCreate('windowWidth', width);
     AppStorage.setOrCreate('windowWidth', width);
     AppStorage.setOrCreate('windowHeight', height);
     AppStorage.setOrCreate('windowHeight', height);
+    let audioWidth = px2vp(width)*0.65
+    console.info('floatWindowClass audioWidth' + audioWidth);
 
 
 
 
     // let a = new WindowModel();
     // let a = new WindowModel();
@@ -98,6 +101,48 @@ export default class EntryAbility extends UIAbility {
       }
       }
       hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
       hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
     });
     });
+    //  1.创建悬浮窗
+    let floatWindowClass: window.Window | null = null;
+    const config: window.Configuration = {
+      name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: this.context
+    };
+    window.createWindow(config, (err: BusinessError, data) => {
+      let errCode: number = err.code;
+      if (errCode) {
+        console.error('floatWindowClass Failed to create the floatWindow. Cause: ' + JSON.stringify(err));
+        return;
+      }
+      console.info('floatWindowClass Succeeded in creating the floatWindow. Data: ' + JSON.stringify(data));
+      floatWindowClass = data;
+      AppStorage.setOrCreate('floatWindowClass', floatWindowClass);
+      // 2.悬浮窗窗口创建成功后，设置悬浮窗的位置、大小及相关属性等。
+      floatWindowClass.moveWindowTo(0, 604, (err: BusinessError) => {
+        let errCode: number = err.code;
+        if (errCode) {
+          console.error('floatWindowClass Failed to move the window. Cause:' + JSON.stringify(err));
+          return;
+        }
+        console.info('floatWindowClass Succeeded in moving the window.');
+      });
+      floatWindowClass.resize(800, 200, (err: BusinessError) => {
+        let errCode: number = err.code;
+        if (errCode) {
+          console.error('floatWindowClass Failed to change the window size. Cause:' + JSON.stringify(err));
+          return;
+        }
+        console.info('floatWindowClass Succeeded in changing the window size.');
+      });
+      // 3.为悬浮窗加载对应的目标页面。
+      floatWindowClass.setUIContent("pages/view/AudioComponent", (err: BusinessError) => {
+        let errCode: number = err.code;
+        if (errCode) {
+          console.error('floatWindowClass Failed to load the content. Cause:' + JSON.stringify(err));
+          return;
+        }
+        console.info('floatWindowClass Succeeded in loading the content.');
+      });
+
+    });
   }
   }
 
 
   onWindowStageDestroy(): void {
   onWindowStageDestroy(): void {

-import { WDPlayerController, PlayerConstants } from 'wdPlayer';
-import { PaperReaderSimpleDialog } from './PaperReaderDialog';
-import { Logger } from 'wdKit/Index';
-import { AudioSuspensionModel } from '../viewmodel/AudioSuspensionModel';
+import { AudioSuspensionModel } from 'wdComponent'
+import { PlayerConstants } from 'wdPlayer'
 
 
-const TAG = 'AudioDialog';
-
-@Preview
-@CustomDialog
-export struct AudioDialog {
-  @Consume audioTitle: string;
-  @Consume currentTime: string;
-  @Consume totalTime: string;
-  @Consume progressVal: number;
+@Entry
+@Component
+struct Index {
+  private AudioSuspension = new AudioSuspensionModel()
+  @State audioTitle: string = '来了！新闻早班车5月9日';
+  @State currentTime: string = '00:03';
+  @State totalTime: string = '06:16';
+  @State progressVal: number = 20;
   @State currentStatus: number = 0;
   @State currentStatus: number = 0;
-  controllerDetail?: CustomDialogController
-
-  private playerController: WDPlayerController = new WDPlayerController();
-  private simpleAudioDialog: CustomDialogController = new CustomDialogController({
-    builder: PaperReaderSimpleDialog({
-      cancel: this.onCancel,
-      confirm: this.onConfirm,
-      playerController: this.playerController
-    }),
-    autoCancel: false,
-    customStyle: true,
-    alignment: DialogAlignment.CenterStart,
-    offset: { dx: 12, dy: -150 },
-
-  })
-
-  private AudioSuspension = new AudioSuspensionModel(this.simpleAudioDialog)
-
-
-  onCancel() {
-    Logger.info(TAG, "cj2024 onCancel = ")
-    this.AudioSuspension.setPlayerUrl()
-  }
-
-  /**
-   *  回调无用
-   **/
-  onConfirm() {
-    Logger.info(TAG, "cj2024 onConfirm = ")
-    // if (this.playerController != undefined) {
-    //
-    // }
-    // this.status = PlayerConstants.STATUS_PAUSE;
-    // this.playerController?.pause()
-  }
 
 
   build() {
   build() {
     Stack({ alignContent: Alignment.End }) {
     Stack({ alignContent: Alignment.End }) {
@@ -61,7 +23,7 @@ export struct AudioDialog {
         })
         })
           .width("60%")
           .width("60%")
           .height(20)
           .height(20)
-          .fontColor($r("app.color.color_222222"))
+          .fontColor('#222222')
           .fontSize(14)
           .fontSize(14)
           .margin({ top: 10, left: 10 })
           .margin({ top: 10, left: 10 })
           .alignSelf(ItemAlign.Start)
           .alignSelf(ItemAlign.Start)
@@ -77,13 +39,13 @@ export struct AudioDialog {
 
 
         Row() {
         Row() {
           Text(this.currentTime)
           Text(this.currentTime)
-            .fontSize($r('app.float.font_size_12'))
-            .fontColor($r('app.color.color_999999'))
+            .fontSize(12)
+            .fontColor("#999999")
             .height("100%")
             .height("100%")
             .alignSelf(ItemAlign.Start)
             .alignSelf(ItemAlign.Start)
           Text("/" + this.totalTime)
           Text("/" + this.totalTime)
-            .fontSize($r('app.float.font_size_12'))
-            .fontColor($r('app.color.color_999999'))
+            .fontSize(12)
+            .fontColor("#999999")
             .height("100%")
             .height("100%")
             .alignSelf(ItemAlign.Start)
             .alignSelf(ItemAlign.Start)
 
 
@@ -93,7 +55,7 @@ export struct AudioDialog {
         .margin({ top: 4, left: 10 })
         .margin({ top: 4, left: 10 })
 
 
         Progress({ value: this.progressVal, total: 100, type: ProgressType.Capsule })
         Progress({ value: this.progressVal, total: 100, type: ProgressType.Capsule })
-          .color($r('app.color.color_ED2800'))
+          .color("#ED2800")
           .backgroundColor($r('app.color.white'))
           .backgroundColor($r('app.color.white'))
           .width("100%")
           .width("100%")
           .height(3)
           .height(3)
@@ -110,11 +72,9 @@ export struct AudioDialog {
           .height(24)
           .height(24)
           .margin({ right: 12 })
           .margin({ right: 12 })
           .onClick(() => {
           .onClick(() => {
-            if (this.playerController) {
-              // this.onConfirm()
-              this.playerController.switchPlayOrPause()
+            if (this.AudioSuspension.playerController) {
               this.AudioSuspension.playerController.get().switchPlayOrPause()
               this.AudioSuspension.playerController.get().switchPlayOrPause()
-              this.currentStatus = this.playerController.getStatus()
+              this.currentStatus = this.AudioSuspension.playerController.get().getStatus()
             }
             }
           })
           })
 
 
@@ -123,19 +83,17 @@ export struct AudioDialog {
           .width(24)
           .width(24)
           .height(24)
           .height(24)
           .onClick(() => {
           .onClick(() => {
-            if (this.playerController) {
-              this.playerController.stop()
-            }
-            if (this.controllerDetail) {
-              this.controllerDetail.close()
+            if (this.AudioSuspension.playerController) {
+              this.AudioSuspension.playerController.get().stop()
+              this.AudioSuspension.destroyWindow()
             }
             }
           })
           })
       }.width(80)
       }.width(80)
       .height(60)
       .height(60)
 
 
     }
     }
-    .width("65%")
-    .height(60)
+    .width('100%')
+    .height('100%')
     .backgroundColor(Color.White)
     .backgroundColor(Color.White)
     .borderRadius(2)
     .borderRadius(2)
   }
   }

@@ -91,6 +91,9 @@
       },
       },
       {
       {
         "name": "ohos.permission.INTERNET"
         "name": "ohos.permission.INTERNET"
+      },
+      {
+        "name": "ohos.permission.SYSTEM_FLOAT_WINDOW",
       }
       }
     ]
     ]
   }
   }

@@ -14,6 +14,7 @@
     "pages/broadcast/BroadcastPage",
     "pages/broadcast/BroadcastPage",
     "pages/launchPage/LaunchInterestsHobbiesPage",
     "pages/launchPage/LaunchInterestsHobbiesPage",
     "pages/SpacialTopicPage",
     "pages/SpacialTopicPage",
-    "pages/column/ColumnPage"
+    "pages/column/ColumnPage",
+    "pages/view/AudioComponent"
   ]
   ]
 }
 }