developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
dd97650d 1 parent 5eba3a8f

音频悬浮窗

Inline Side-by-side
Showing 9 changed files with 190 additions and 115 deletions
... ... @@ -43,5 +43,8 @@ export enum EmitterEventId {
// 获取音频悬浮窗焦点状态
AUDIO_WINDOW_TYPE = 12,
// 展开悬浮窗
AUDIO_WINDOW_EXPAND = 13,
}
... ...
... ... @@ -26,6 +26,7 @@ import { WDShare } from 'wdShare/Index';
import { AudioSuspensionModel } from '../../viewmodel/AudioSuspensionModel'
import { EmitterEventId, EmitterUtils } from 'wdKit/Index'
import { PlayerConstants } from 'wdPlayer'
import { LottieView } from '../lottie/LottieView'
const TAG = 'OperRowListView';
... ... @@ -78,8 +79,9 @@ export struct OperRowListView {
@State audioUrl: string = ''
@State audioTitle: string = ''
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
// private AudioSuspension = new AudioSuspensionModel()
private AudioSuspension = new AudioSuspensionModel()
@State currentStatus: number | string | undefined = 0;
@State name: string = 'audio_recommend_status_wait'
async aboutToAppear() {
console.info(TAG, '22222----', this.styleType)
... ... @@ -284,16 +286,36 @@ export struct OperRowListView {
@Builder
builderListen() {
Column() {
Image(this.currentStatus === PlayerConstants.STATUS_START ? $r("app.media.icon_audio_pause") :
$r("app.media.icon_listen"))
if(this.currentStatus === PlayerConstants.STATUS_START) {
Column() {
LottieView({
name: this.name,
path: "lottie/audio_recommend_playing.json",
lottieWidth: 24,
lottieHeight: 24,
autoplay: true,
loop: true
})
}
.width(25)
.height(25)
.parallelGesture(
TapGesture()
.onAction((event: GestureEvent) => {
this.AudioSuspension.setPlayerUrl(this.audioUrl, this.audioTitle)
}))
} else {
Image($r("app.media.icon_listen"))
.width(24)
.height(24)
.aspectRatio(1)
.interpolation(ImageInterpolation.High)
.onClick((event: ClickEvent) => {
// this.AudioSuspension.setPlayerUrl(this.audioUrl, this.audioTitle)
// ToastUtils.showToast('音频为公共方法，待开发', 1000);
})
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
this.AudioSuspension.setPlayerUrl(this.audioUrl, this.audioTitle)
}))
}
}
.height(36)
.width(48)
... ...
... ... @@ -14,8 +14,10 @@ export class AudioSuspensionModel {
public floatWindowClass: SubscribedAbstractProperty<window.Window> = AppStorage.link<window.Window>('floatWindowClass')
public srcTitle: string = ''
private url: string = ''
private expandWidth: number = 800
private expandHeight: number = 200
private expandWidth: number = vp2px(243)
private expandHeight: number = vp2px(60)
// 窗口是否最小化
private isMinimize: SubscribedAbstractProperty<boolean> = AppStorage.link<boolean>('isMinimize')
constructor() {
this.initPlayerController()
}
... ... @@ -29,7 +31,7 @@ export class AudioSuspensionModel {
this.playerController = AppStorage.link<WDPlayerController>('playerController')
Logger.info(TAG, 'playerController create success')
this.playerController.get().onStatusChange = (status: number) => {
console.info(TAG, 'this.currentStatus', status)
console.info(TAG, 'this.currentStatus Model', status)
EmitterUtils.sendEvent(EmitterEventId.AUDIO_CHANGE_STATUS, status)
}
} else {
... ... @@ -43,6 +45,12 @@ export class AudioSuspensionModel {
// console.log(TAG,'this.url', this.url)
// console.log(TAG,'url', url)
if (this.url === url) {
this.isMinimize = AppStorage.link<boolean>('isMinimize')
console.log(TAG, 'this.isMinimize', this.isMinimize?.get())
if (this.isMinimize?.get()) {
EmitterUtils.sendEvent(EmitterEventId.AUDIO_WINDOW_EXPAND, 1)
AppStorage.setOrCreate('isMinimize', false);
}
this.playerController.get().switchPlayOrPause()
} else {
this.url = url
... ... @@ -52,7 +60,6 @@ export class AudioSuspensionModel {
}
this.srcTitle = srcTitle
EmitterUtils.sendEvent(EmitterEventId.AUDIO_CHANGE_TITLe, this.srcTitle)
console.log(TAG, 'handlePlayer')
this.resizeWindow(this.expandWidth, this.expandHeight)
}
this.showWindow()
... ... @@ -93,16 +100,28 @@ export class AudioSuspensionModel {
});
}
// 销毁悬浮窗 使用destroy对其进行销毁。
public destroyWindow() {
/*this.floatWindowClass.get().destroyWindow((err: BusinessError) => {
public moveWindow(y: number) {
this.floatWindowClass.get().moveWindowTo(0, vp2px(y), (err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
console.error('floatWindowClass Failed to destroy the window. Cause: ' + JSON.stringify(err));
console.error('floatWindowClass Failed to move the window. Cause:' + JSON.stringify(err));
return;
}
console.info('floatWindowClass Succeeded in destroying the window.');
});*/
console.info('floatWindowClass Succeeded in moving the window.');
});
}
// 隐藏悬浮窗
public minimize() {
this.floatWindowClass.get().minimize((err: BusinessError) => {
const errCode: number = err.code;
if (errCode) {
console.error(TAG, 'Failed to minimize the window. Cause: ' + JSON.stringify(err));
return;
}
AppStorage.setOrCreate('isMinimize', true);
console.info(TAG, 'Succeeded in minimizing the window.');
});
}
... ...
... ... @@ -7,6 +7,7 @@
"main": "",
"version": "1.0.0",
"dependencies": {
"@ohos/lottie": "2.0.10",
"wdComponent": "file:../../features/wdComponent",
"wdConstant": "file:../../commons/wdConstant",
"wdKit": "file:../../commons/wdKit",
... ...
... ... @@ -9,6 +9,7 @@ import { DeviceUtil, EmitterEventId, EmitterUtils, WindowModel } from 'wdKit';
import { ConfigurationConstant } from '@kit.AbilityKit';
import { WDPushNotificationManager } from 'wdHwAbility/Index';
import { StartupManager } from '../startupmanager/StartupManager';
import { UIContext } from '@ohos.arkui.UIContext';
let floatWindowClass: window.Window | null = null;
... ... @@ -54,8 +55,8 @@ export default class EntryAbility extends UIAbility {
AppStorage.setOrCreate('topSafeHeight', topSafeHeight);
AppStorage.setOrCreate('windowWidth', width);
AppStorage.setOrCreate('windowHeight', height);
let audioWidth = px2vp(width) * 0.65
console.info('floatWindowClass audioWidth' + audioWidth);
// 音频悬浮窗初始移动位置604为ui高度
let initMoveY = vp2px(604)
// 在普通phone/折叠屏/tablet设备上以沉浸式(全屏)启动
... ... @@ -91,58 +92,55 @@ export default class EntryAbility extends UIAbility {
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
// 1.创建悬浮窗
// 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.');
// });
// // 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.');
// });
//
// floatWindowClass.on('windowEvent', (data) => {
// EmitterUtils.sendEvent(EmitterEventId.AUDIO_WINDOW_TYPE, data)
// });
//
// });
windowStage.createSubWindow('subWindow', (err: BusinessError, data) => {
let errCode: number = err.code;
if (errCode) {
console.error('floatWindowClass Failed to create the subwindow. Cause: ' + JSON.stringify(err));
return;
}
console.info('floatWindowClass Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
floatWindowClass = data;
AppStorage.setOrCreate('floatWindowClass', floatWindowClass);
// 2.悬浮窗窗口创建成功后，设置悬浮窗的位置、大小及相关属性等。
floatWindowClass.moveWindowTo(0, initMoveY, (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.');
});
// 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.');
});
floatWindowClass.on('windowEvent', (data) => {
EmitterUtils.sendEvent(EmitterEventId.AUDIO_WINDOW_TYPE, data)
});
});
}
// destroyFloatWindow() {
// (floatWindowClass as window.Window).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.');
// });
// }
destroyFloatWindow() {
(floatWindowClass as window.Window).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.');
});
}
onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
// this.destroyFloatWindow()
this.destroyFloatWindow()
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}
... ...
{"v":"5.6.10","fr":60,"ip":0,"op":32,"w":120,"h":120,"nm":"播放的","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"“图层 2”轮廓","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[60.375,60,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-24.327],[5.075,-19.579],[5.716,-18.514],[5.716,23.545],[4.523,24.745],[-4.523,24.745],[-5.716,23.545],[-5.716,-23.264]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.902,-39.149],[5.144,-34.4],[5.785,-33.336],[5.785,23.475],[4.592,24.676],[-4.454,24.676],[-5.647,23.475],[-5.647,-38.085]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.985,-64.591],[5.061,-59.842],[5.702,-58.778],[5.785,23.475],[4.592,24.676],[-4.454,24.676],[-5.647,23.475],[-5.73,-63.527]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.902,-39.149],[5.144,-34.4],[5.785,-33.336],[5.785,23.475],[4.592,24.676],[-4.454,24.676],[-5.647,23.475],[-5.647,-38.085]],"c":true}]},{"t":32,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-24.327],[5.075,-19.579],[5.716,-18.514],[5.716,23.545],[4.523,24.745],[-4.523,24.745],[-5.716,23.545],[-5.716,-23.264]],"c":true}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411824544,0.156862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[24.216,79.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"“图层 3”轮廓","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[60,60,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.075,-39.472],[-3.971,-44.221],[-5.715,-43.157],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.715,-38.408]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.04,-14.722],[-4.006,-19.471],[-5.75,-18.407],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.681,-13.658]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.096,0.153],[-3.95,-4.596],[-5.694,-3.532],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.737,1.217]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.083,-14.972],[-3.963,-19.721],[-5.707,-18.657],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.724,-13.908]],"c":true}]},{"t":32,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.057,-40.097],[-3.989,-44.846],[-5.733,-43.782],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.698,-39.033]],"c":true}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411824544,0.156862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[60.249,59.859],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"“图层 4”轮廓","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[60,60,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-31.704],[5.075,-26.955],[5.716,-25.891],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.716,-30.64]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-4.005,-56.954],[5.041,-52.205],[5.682,-51.141],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.75,-55.89]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-31.704],[5.075,-26.955],[5.716,-25.891],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.716,-30.64]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-4.005,-16.829],[5.041,-12.08],[5.682,-11.016],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.75,-15.765]],"c":true}]},{"t":32,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.948,-31.954],[5.098,-27.205],[5.739,-26.141],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.693,-30.89]],"c":true}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411824544,0.156862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[95.785,72.379],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
... ...
{"v":"5.6.10","fr":60,"ip":0,"op":32,"w":144,"h":144,"nm":"今日推荐-直播","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"空 16","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[72,72,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[70,70,100],"ix":6}},"ao":0,"ip":0,"op":32,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"“图层 2”轮廓","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0.161,-0.036,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-24.327],[5.075,-19.579],[5.716,-18.514],[5.716,23.545],[4.523,24.745],[-4.523,24.745],[-5.716,23.545],[-5.716,-23.264]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.902,-39.149],[5.144,-34.4],[5.785,-33.336],[5.785,23.475],[4.592,24.676],[-4.454,24.676],[-5.647,23.475],[-5.647,-38.085]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.985,-64.591],[5.061,-59.842],[5.702,-58.778],[5.785,23.475],[4.592,24.676],[-4.454,24.676],[-5.647,23.475],[-5.73,-63.527]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.902,-39.149],[5.144,-34.4],[5.785,-33.336],[5.785,23.475],[4.592,24.676],[-4.454,24.676],[-5.647,23.475],[-5.647,-38.085]],"c":true}]},{"t":32,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-24.327],[5.075,-19.579],[5.716,-18.514],[5.716,23.545],[4.523,24.745],[-4.523,24.745],[-5.716,23.545],[-5.716,-23.264]],"c":true}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411824544,0.156862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[24.216,79.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"“图层 3”轮廓","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-0.214,-0.036,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.075,-39.472],[-3.971,-44.221],[-5.715,-43.157],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.715,-38.408]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.04,-14.722],[-4.006,-19.471],[-5.75,-18.407],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.681,-13.658]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.096,0.153],[-3.95,-4.596],[-5.694,-3.532],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.737,1.217]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.083,-14.972],[-3.963,-19.721],[-5.707,-18.657],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.724,-13.908]],"c":true}]},{"t":32,"s":[{"i":[[0.394,0.207],[0,0],[0,-0.901],[0,0],[-0.659,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[-0.794,-0.417],[0,0],[0,0.663],[0,0],[0.659,0],[0,0],[0,-0.447]],"v":[[5.057,-40.097],[-3.989,-44.846],[-5.733,-43.782],[-5.715,43.438],[-4.523,44.638],[4.523,44.638],[5.715,43.438],[5.698,-39.033]],"c":true}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411824544,0.156862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[60.249,59.859],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"“图层 4”轮廓","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-0.214,-0.036,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-31.704],[5.075,-26.955],[5.716,-25.891],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.716,-30.64]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-4.005,-56.954],[5.041,-52.205],[5.682,-51.141],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.75,-55.89]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":16,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.971,-31.704],[5.075,-26.955],[5.716,-25.891],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.716,-30.64]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-4.005,-16.829],[5.041,-12.08],[5.682,-11.016],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.75,-15.765]],"c":true}]},{"t":32,"s":[{"i":[[-0.794,-0.417],[0,0],[0,-0.447],[0,0],[0.658,0],[0,0],[0,0.663],[0,0]],"o":[[0,0],[0.394,0.207],[0,0],[0,0.663],[0,0],[-0.659,0],[0,0],[0,-0.901]],"v":[[-3.948,-31.954],[5.098,-27.205],[5.739,-26.141],[5.716,30.92],[4.523,32.121],[-4.523,32.121],[-5.716,30.92],[-5.693,-30.89]],"c":true}]}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411824544,0.156862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[95.785,72.379],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"形状图层 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[72,72,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"d":1,"ty":"el","s":{"a":0,"k":[144,144],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"椭圆路径 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929411768913,0.156862750649,0,1],"ix":4},"o":{"a":0,"k":5,"ix":5},"r":1,"bm":0,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":32,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
... ...
... ... @@ -2,50 +2,67 @@ import { AudioSuspensionModel } from 'wdComponent'
import { PlayerConstants, DateFormatUtil } from 'wdPlayer'
import { EmitterEventId, EmitterUtils } from 'wdKit/Index'
import window from '@ohos.window';
import lottie from '@ohos/lottie';
import { LottieView } from 'wdComponent/Index'
const TAG = 'AudioSuspensionModel'
@Entry
@Component
struct Index {
// private AudioSuspension = new AudioSuspensionModel()
private AudioSuspension = new AudioSuspensionModel()
@State audioTitle: string | undefined = '';
@State currentTime: string = '00:00';
@State totalTime: string = '00:00';
@State progressVal: number = 0;
@State currentStatus: number | string |undefined = 0;
@State isExpand: boolean = true;
private expandWidth: number = 800
private expandHeight: number = 200
private foldWidth: number = 200
private foldHeight: number = 200
@State moveY: number = 604;
private expandWidth: number = vp2px(243)
private expandHeight: number = vp2px(60)
private foldWidth: number = vp2px(60)
private foldHeight: number = vp2px(60)
bottomSafeHeight: number = 720 // 悬浮窗底部滑动限制
topSafeHeight: number = 94 // 悬浮窗顶部滑动限制
@State name: string = 'audio_status_wait';
aboutToAppear() {
// this.AudioSuspension.playerController.get().onTimeUpdate = (position, duration) => {
// this.currentTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(position);
// this.totalTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(duration);
// this.progressVal = Math.floor(position * 100 / duration);
// }
async aboutToAppear() {
this.AudioSuspension.playerController.get().onTimeUpdate = (position, duration) => {
this.currentTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(position);
this.totalTime = DateFormatUtil.convertMillisecondsToMinutesSeconds(duration);
this.progressVal = Math.floor(position * 100 / duration);
}
EmitterUtils.receiveEvent(EmitterEventId.AUDIO_CHANGE_TITLe, (val:string | undefined) => {
console.log(TAG,'this.audioTitle', val)
this.audioTitle = val
})
EmitterUtils.receiveEvent(EmitterEventId.AUDIO_CHANGE_STATUS, (val: number | string | undefined) => {
console.log(TAG,'this.currentStatus', val)
// val 2 pause
if(val === 2) {
console.log(TAG,'this.currentStatus 2 ', val)
lottie.pause(this.name)
} else if(val === 1) {
console.log(TAG,'this.currentStatus 1 ', val)
lottie.play(this.name)
}
this.currentStatus = val
})
EmitterUtils.receiveEvent(EmitterEventId.AUDIO_WINDOW_TYPE, (val: number | string | undefined) => {
if (val == window.WindowEventType.WINDOW_ACTIVE) {
console.info(TAG, 'current window stage event is WINDOW_ACTIVE', val);
this.isExpand = true
// this.isExpand = true
// this.AudioSuspension.resizeWindow(this.expandWidth, this.expandHeight)
} else if (val == window.WindowEventType.WINDOW_INACTIVE) {
console.info(TAG, 'current window stage event is WINDOW_INACTIVE', val);
this.isExpand = false
// this.AudioSuspension.resizeWindow(this.foldWidth, this.foldHeight)
this.AudioSuspension.resizeWindow(this.foldWidth, this.foldHeight)
}
})
EmitterUtils.receiveEvent(EmitterEventId.AUDIO_WINDOW_EXPAND, (val: number | string | undefined) => {
if (val == 1) {
this.isExpand = true
this.AudioSuspension.resizeWindow(this.expandWidth, this.expandHeight)
}
})
... ... @@ -53,7 +70,7 @@ struct Index {
onPageHide() {
// this.status = PlayerConstants.STATUS_PAUSE;
// this.AudioSuspension.playerController.get()?.pause();
this.AudioSuspension.playerController.get()?.pause();
}
build() {
... ... @@ -117,34 +134,37 @@ struct Index {
.width(24)
.height(24)
.margin({ right: 12 })
.onClick(() => {
// if (this.AudioSuspension.playerController) {
// this.AudioSuspension.playerController.get().switchPlayOrPause()
// }
})
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
if (this.AudioSuspension.playerController) {
this.AudioSuspension.playerController.get().switchPlayOrPause()
}
}))
Image($r("app.media.icon_audio_close"))
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.onClick(() => {
// if (this.AudioSuspension.playerController) {
// this.AudioSuspension.playerController.get().stop()
// this.AudioSuspension.destroyWindow()
// }
})
}.width(80)
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
if (this.AudioSuspension.playerController) {
this.AudioSuspension.playerController.get().switchPlayOrPause()
this.AudioSuspension.minimize()
}
}))
}
.width(80)
.height(60)
} else {
Row() {
Image(this.currentStatus === PlayerConstants.STATUS_START ? $r("app.media.icon_audio_pause") : $r("app.media.icon_audio_playing"))
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.onClick(() => {
// if (this.AudioSuspension.playerController) {
// this.AudioSuspension.playerController.get().switchPlayOrPause()
// }
LottieView({
name: this.name,
path: "lottie/audio_animation_playing.json",
lottieWidth: 24,
lottieHeight: 24,
autoplay: true,
loop: true
})
}
.justifyContent(FlexAlign.Center)
... ... @@ -152,6 +172,26 @@ struct Index {
.height(60)
}
}
.parallelGesture(
GestureGroup(GestureMode.Parallel,
TapGesture()
.onAction((event?: GestureEvent) => {
this.isExpand = true
this.AudioSuspension.resizeWindow(this.expandWidth, this.expandHeight)
}),
PanGesture({
fingers: 1,
direction: PanDirection.Vertical,
distance: 0
})
.onActionUpdate((event: GestureEvent) => {
let newY = Math.ceil(this.moveY + event.offsetY);
this.moveY = Math.min(Math.max(newY, this.topSafeHeight), this.bottomSafeHeight);
// console.log(TAG,'this.moveY', this.moveY)
this.AudioSuspension.moveWindow(this.moveY)
})
)
)
.width('100%')
.height('100%')
.backgroundColor(Color.White)
... ...
... ... @@ -92,16 +92,6 @@
{
"name": "ohos.permission.INTERNET"
},
// {
// "name": "ohos.permission.SYSTEM_FLOAT_WINDOW",
// "reason": "$string:EntryAbility_desc",
// "usedScene": {
// "abilities": [
// "FormAbility"
// ],
// "when": "inuse"
// }
// }
]
}
}
\ No newline at end of file
... ...