王士厅

音频悬浮窗相关问题

@@ -14,9 +14,6 @@ export class AudioSuspensionModel { @@ -14,9 +14,6 @@ export class AudioSuspensionModel {
14 public floatWindowClass: SubscribedAbstractProperty<window.Window> = AppStorage.link<window.Window>('floatWindowClass') 14 public floatWindowClass: SubscribedAbstractProperty<window.Window> = AppStorage.link<window.Window>('floatWindowClass')
15 public srcTitle: string = '' 15 public srcTitle: string = ''
16 private url: string = '' 16 private url: string = ''
17 - private expandWidth: number = vp2px(243)  
18 - private expandHeight: number = vp2px(60)  
19 - private initMoveX = vp2px(12)  
20 // 窗口是否最小化 17 // 窗口是否最小化
21 private isMinimize: SubscribedAbstractProperty<boolean> = AppStorage.link<boolean>('isMinimize') 18 private isMinimize: SubscribedAbstractProperty<boolean> = AppStorage.link<boolean>('isMinimize')
22 constructor() { 19 constructor() {
@@ -100,16 +97,6 @@ export class AudioSuspensionModel { @@ -100,16 +97,6 @@ export class AudioSuspensionModel {
100 console.info(TAG, 'floatWindowClass Succeeded in changing the window size.'); 97 console.info(TAG, 'floatWindowClass Succeeded in changing the window size.');
101 }); 98 });
102 } 99 }
103 - public moveWindow(y: number) {  
104 - this.floatWindowClass.get().moveWindowTo(this.initMoveX, vp2px(y), (err: BusinessError) => {  
105 - let errCode: number = err.code;  
106 - if (errCode) {  
107 - console.error('floatWindowClass Failed to move the window. Cause:' + JSON.stringify(err));  
108 - return;  
109 - }  
110 - console.info('floatWindowClass Succeeded in moving the window.');  
111 - });  
112 - }  
113 100
114 // 隐藏悬浮窗 101 // 隐藏悬浮窗
115 public minimize() { 102 public minimize() {
@@ -10,6 +10,8 @@ import { window } from '@kit.ArkUI'; @@ -10,6 +10,8 @@ import { window } from '@kit.ArkUI';
10 import { EmptyComponent } from 'wdComponent/Index'; 10 import { EmptyComponent } from 'wdComponent/Index';
11 import { DateTimeUtils } from 'wdKit/Index'; 11 import { DateTimeUtils } from 'wdKit/Index';
12 import { TrackConstants, TrackingPageBrowse } from 'wdTracking/Index'; 12 import { TrackConstants, TrackingPageBrowse } from 'wdTracking/Index';
  13 +import { AudioSuspensionModel } from 'wdComponent'
  14 +import { BusinessError } from '@kit.BasicServicesKit';
13 15
14 const storage = LocalStorage.getShared(); 16 const storage = LocalStorage.getShared();
15 const TAG = 'DetailVideoListPage' 17 const TAG = 'DetailVideoListPage'
@@ -42,6 +44,8 @@ export struct DetailVideoListPage { @@ -42,6 +44,8 @@ export struct DetailVideoListPage {
42 pageHideTime:number = 0; 44 pageHideTime:number = 0;
43 @Provide onlyWifiLoadVideo: boolean = false 45 @Provide onlyWifiLoadVideo: boolean = false
44 @Provide toastTextVisible: boolean = false 46 @Provide toastTextVisible: boolean = false
  47 + private AudioSuspension = new AudioSuspensionModel()
  48 + @State isShowAudioCom: boolean = false
45 49
46 async aboutToAppear(): Promise<void> { 50 async aboutToAppear(): Promise<void> {
47 // 注册监听网络连接 51 // 注册监听网络连接
@@ -80,6 +84,21 @@ export struct DetailVideoListPage { @@ -80,6 +84,21 @@ export struct DetailVideoListPage {
80 this.openFullScreen() 84 this.openFullScreen()
81 85
82 this.pageShowTime = DateTimeUtils.getTimeStamp() 86 this.pageShowTime = DateTimeUtils.getTimeStamp()
  87 +
  88 + // 判断当前窗口是否已显示,使用callback异步回调。
  89 + this.AudioSuspension.floatWindowClass.get().isShowing((err: BusinessError, data) => {
  90 + const errCode: number = err.code;
  91 + if (errCode) {
  92 + console.error(TAG, 'Failed window is showing Cause:' + JSON.stringify(err));
  93 + return;
  94 + }
  95 + console.info(TAG, 'window is showing: ' + JSON.stringify(data));
  96 + if(data) {
  97 + this.isShowAudioCom = true
  98 + this.AudioSuspension.playerController.get()?.pause();
  99 + this.AudioSuspension.minimize()
  100 + }
  101 + });
83 } 102 }
84 103
85 onPageHide(): void { 104 onPageHide(): void {
@@ -91,6 +110,13 @@ export struct DetailVideoListPage { @@ -91,6 +110,13 @@ export struct DetailVideoListPage {
91 let duration = 0 110 let duration = 0
92 duration = Math.floor((this.pageHideTime - this.pageShowTime)/1000) 111 duration = Math.floor((this.pageHideTime - this.pageShowTime)/1000)
93 TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Customer_Personal,TrackConstants.PageName.Customer_Personal,duration) 112 TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Customer_Personal,TrackConstants.PageName.Customer_Personal,duration)
  113 +
  114 + console.info(TAG, 'this.isShowAudioCom: ' + this.isShowAudioCom);
  115 + if (this.isShowAudioCom) {
  116 + this.AudioSuspension.showWindow()
  117 + this.AudioSuspension.playerController.get()?.play();
  118 + this.isShowAudioCom = false
  119 + }
94 } 120 }
95 121
96 /** 122 /**
@@ -7,6 +7,11 @@ import { LottieView } from 'wdComponent/Index' @@ -7,6 +7,11 @@ import { LottieView } from 'wdComponent/Index'
7 7
8 const TAG = 'AudioSuspensionModel' 8 const TAG = 'AudioSuspensionModel'
9 9
  10 +interface Position {
  11 + x: number,
  12 + y: number
  13 +}
  14 +
10 @Entry 15 @Entry
11 @Component 16 @Component
12 struct Index { 17 struct Index {
@@ -17,17 +22,21 @@ struct Index { @@ -17,17 +22,21 @@ struct Index {
17 @State progressVal: number = 0; 22 @State progressVal: number = 0;
18 @State currentStatus: number | string |undefined = 0; 23 @State currentStatus: number | string |undefined = 0;
19 @State isExpand: boolean = true; 24 @State isExpand: boolean = true;
20 - @State moveY: number = 604;  
21 private expandWidth: number = vp2px(243) 25 private expandWidth: number = vp2px(243)
22 private expandHeight: number = vp2px(60) 26 private expandHeight: number = vp2px(60)
23 private foldWidth: number = vp2px(60) 27 private foldWidth: number = vp2px(60)
24 private foldHeight: number = vp2px(60) 28 private foldHeight: number = vp2px(60)
25 - bottomSafeHeight: number = 720 // 悬浮窗底部滑动限制  
26 - topSafeHeight: number = 94 // 悬浮窗顶部滑动限制 29 + bottomSafeHeight: number = vp2px(720) // 悬浮窗底部滑动限制
  30 + topSafeHeight: number = vp2px(94) // 悬浮窗顶部滑动限制
27 @State name: string = 'audio_status_wait'; 31 @State name: string = 'audio_status_wait';
  32 + @State @Watch("moveWindow") windowPosition: Position = { x: vp2px(12), y: vp2px(576) };
  33 + private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });
  34 + private subWindow:window.Window | null = null
28 35
29 async aboutToAppear() { 36 async aboutToAppear() {
30 - window.findWindow("subWindow").setWindowBackgroundColor("#00000000") 37 + this.subWindow = window.findWindow("subWindow")
  38 + this.subWindow.setWindowBackgroundColor("#00000000")
  39 +
31 this.AudioSuspension.playerController.get().onTimeUpdate = (position, duration) => { 40 this.AudioSuspension.playerController.get().onTimeUpdate = (position, duration) => {
32 this.currentTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(position); 41 this.currentTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(position);
33 this.totalTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(duration); 42 this.totalTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(duration);
@@ -69,6 +78,14 @@ struct Index { @@ -69,6 +78,14 @@ struct Index {
69 78
70 } 79 }
71 80
  81 + moveWindow() {
  82 + if (this.subWindow == null) {
  83 + console.info('Faild in destroying the window.');
  84 + } else {
  85 + this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
  86 + }
  87 + }
  88 +
72 onPageHide() { 89 onPageHide() {
73 // this.status = PlayerConstants.STATUS_PAUSE; 90 // this.status = PlayerConstants.STATUS_PAUSE;
74 this.AudioSuspension.playerController.get()?.pause(); 91 this.AudioSuspension.playerController.get()?.pause();
@@ -183,16 +200,20 @@ struct Index { @@ -183,16 +200,20 @@ struct Index {
183 this.isExpand = true 200 this.isExpand = true
184 this.AudioSuspension.resizeWindow(this.expandWidth, this.expandHeight) 201 this.AudioSuspension.resizeWindow(this.expandWidth, this.expandHeight)
185 }), 202 }),
186 - PanGesture({  
187 - fingers: 1,  
188 - direction: PanDirection.Vertical,  
189 - distance: 0  
190 - }) 203 + PanGesture(this.panOption)
  204 + //手势识别成功回调。
  205 + .onActionStart((event: GestureEvent) => {
  206 + console.info('Pan start');
  207 + })
  208 + // 手势移动过程中回调。发生拖拽时,获取到触摸点的位置,并将位置信息传递给windowPosition
191 .onActionUpdate((event: GestureEvent) => { 209 .onActionUpdate((event: GestureEvent) => {
192 - let newY = Math.ceil(this.moveY + event.offsetY);  
193 - this.moveY = Math.min(Math.max(newY, this.topSafeHeight), this.bottomSafeHeight);  
194 - // console.log(TAG,'this.moveY', this.moveY)  
195 - this.AudioSuspension.moveWindow(this.moveY) 210 + // this.windowPosition.x += event.offsetX;
  211 + let newY = this.windowPosition.y + event.offsetY;
  212 + this.windowPosition.y = Math.min(Math.max(newY, this.topSafeHeight), this.bottomSafeHeight);
  213 + })
  214 + //手势识别成功,手指抬起后触发回调。
  215 + .onActionEnd(() => {
  216 + console.info('Pan end');
196 }) 217 })
197 ) 218 )
198 ) 219 )
@@ -9,6 +9,8 @@ import { VideoChannelPage } from './VideoChannelPage'; @@ -9,6 +9,8 @@ import { VideoChannelPage } from './VideoChannelPage';
9 import ChannelViewModel from 'wdComponent/src/main/ets/viewmodel/ChannelViewModel'; 9 import ChannelViewModel from 'wdComponent/src/main/ets/viewmodel/ChannelViewModel';
10 import { ALL, ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'; 10 import { ALL, ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
11 import { ParamType, Tracking } from 'wdTracking/Index'; 11 import { ParamType, Tracking } from 'wdTracking/Index';
  12 +import { AudioSuspensionModel } from 'wdComponent'
  13 +import { BusinessError } from '@kit.BasicServicesKit';
12 14
13 const TAG = 'BottomNavigationComponent'; 15 const TAG = 'BottomNavigationComponent';
14 PersistentStorage.persistProp('channelIds', ''); 16 PersistentStorage.persistProp('channelIds', '');
@@ -52,6 +54,8 @@ export struct BottomNavigationComponent { @@ -52,6 +54,8 @@ export struct BottomNavigationComponent {
52 @State assignChannel: AssignChannelParam = new AssignChannelParam() 54 @State assignChannel: AssignChannelParam = new AssignChannelParam()
53 // 自动刷新触发(双击tab自动刷新) 55 // 自动刷新触发(双击tab自动刷新)
54 @State autoRefresh: number = 0 56 @State autoRefresh: number = 0
  57 + private AudioSuspension = new AudioSuspensionModel()
  58 + @State isShowAudioCom: boolean = false
55 59
56 60
57 async aboutToAppear() { 61 async aboutToAppear() {
@@ -143,6 +147,9 @@ export struct BottomNavigationComponent { @@ -143,6 +147,9 @@ export struct BottomNavigationComponent {
143 .hoverEffect(HoverEffect.Highlight) 147 .hoverEffect(HoverEffect.Highlight)
144 .visibility(this.displayDirection === DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None) 148 .visibility(this.displayDirection === DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
145 // .hitTestBehavior(HitTestMode.Block) 149 // .hitTestBehavior(HitTestMode.Block)
  150 + .onTouch(() => {
  151 + this.handleAudio(navItem)
  152 + })
146 .onClick(() => { 153 .onClick(() => {
147 Logger.info(TAG, `onChange, index: ${index}`); 154 Logger.info(TAG, `onChange, index: ${index}`);
148 Logger.info(TAG, `onChange, navItem: ${JSON.stringify(navItem)}`); 155 Logger.info(TAG, `onChange, navItem: ${JSON.stringify(navItem)}`);
@@ -152,7 +159,6 @@ export struct BottomNavigationComponent { @@ -152,7 +159,6 @@ export struct BottomNavigationComponent {
152 "pageId": navItem.id, 159 "pageId": navItem.id,
153 } 160 }
154 Tracking.event("bar_click", params) 161 Tracking.event("bar_click", params)
155 -  
156 this.onBottomNavigationIndexChange(navItem, index) 162 this.onBottomNavigationIndexChange(navItem, index)
157 }) 163 })
158 164
@@ -221,9 +227,37 @@ export struct BottomNavigationComponent { @@ -221,9 +227,37 @@ export struct BottomNavigationComponent {
221 return isSelect ? $r('app.media.icon_tab_res1') : $r('app.media.icon_tab_res1_no') 227 return isSelect ? $r('app.media.icon_tab_res1') : $r('app.media.icon_tab_res1_no')
222 } 228 }
223 229
  230 + // 控制音频悬浮窗显隐
  231 + handleAudio(navItem: BottomNavDTO) {
  232 + if (navItem.name === '视频') {
  233 + // 判断当前窗口是否已显示,使用callback异步回调。
  234 + this.AudioSuspension.floatWindowClass.get().isShowing((err: BusinessError, data) => {
  235 + const errCode: number = err.code;
  236 + if (errCode) {
  237 + console.error(TAG, 'Failed window is showing Cause:' + JSON.stringify(err));
  238 + return;
  239 + }
  240 + console.info(TAG, 'window is showing: ' + JSON.stringify(data));
  241 + if(data) {
  242 + this.isShowAudioCom = true
  243 + this.AudioSuspension.playerController.get()?.pause();
  244 + this.AudioSuspension.minimize()
  245 + }
  246 + });
  247 + } else {
  248 + console.info(TAG, 'this.isShowAudioCom: ' + this.isShowAudioCom);
  249 + if (this.isShowAudioCom) {
  250 + this.AudioSuspension.showWindow()
  251 + this.AudioSuspension.playerController.get()?.play();
  252 + this.isShowAudioCom = false
  253 + }
  254 + }
  255 + }
  256 +
224 // 底导切换函数 257 // 底导切换函数
225 async onBottomNavigationIndexChange(navItem: BottomNavDTO, index: number) { 258 async onBottomNavigationIndexChange(navItem: BottomNavDTO, index: number) {
226 Logger.info(TAG, `onBottomNavigationIndexChange this.currentNavIndex: ${this.currentNavIndex}`); 259 Logger.info(TAG, `onBottomNavigationIndexChange this.currentNavIndex: ${this.currentNavIndex}`);
  260 +
227 if (navItem.name === '我的') { 261 if (navItem.name === '我的') {
228 this.barBackgroundColor = Color.White 262 this.barBackgroundColor = Color.White
229 this.currentBottomNavInfo = {} as BottomNavDTO 263 this.currentBottomNavInfo = {} as BottomNavDTO
@@ -237,7 +271,6 @@ export struct BottomNavigationComponent { @@ -237,7 +271,6 @@ export struct BottomNavigationComponent {
237 } 271 }
238 } 272 }
239 this.currentNavIndex = index; 273 this.currentNavIndex = index;
240 -  
241 // 请求顶导数据(参数): 274 // 请求顶导数据(参数):
242 } 275 }
243 276