import { deviceInfo } from '@kit.BasicServicesKit' import { hdsEffect } from '@kit.UIDesignKit' import { StrUtil } from '@pura/harmony-utils' @Component export struct PlayerPage { // 播放页拖拽关闭时的位移状态,由 LocalMusic 统一维护,页面只负责消费。 @Prop translateY: number = 0 // 是否启用播放页背景流光效果,避免页面组件反向依赖 LocalMusic 的实现细节。 @Prop enableBackgroundEffect: boolean = false // 是否显示背景流光效果,和启用开关拆开,便于后续继续裁剪状态依赖。 @Prop showBackgroundEffect: boolean = false // 背景流光控制器仍然由 LocalMusic 持有,独立页面只做承载。 @Prop bgController: hdsEffect.ShaderEffectController | undefined = undefined // 新页面壳层也支持承载封面背景,便于 NewIndex 先接入独立的播放页容器。 @Prop backgroundCover: string | undefined = '' @Prop backgroundCoverEnabled: boolean = false @Prop backgroundCoverFillMode: 'width' | 'height' | 'height-width' = 'width' @Prop pageBackgroundBlurStyle: BlurStyle = BlurStyle.NONE @Prop paddingTop: number = 0 @Prop alignItemsValue: HorizontalAlign = HorizontalAlign.Center @Prop panOptions: PanGestureOptions = new PanGestureOptions() @BuilderParam contentBuilder: () => void // 页面拖拽和销毁清理动作通过回调下沉给 LocalMusic,保证业务状态仍在一个地方维护。 onPanUpdate: (event?: GestureEvent) => void = (_event?: GestureEvent): void => {} onPanEnd: (event?: GestureEvent) => void = (_event?: GestureEvent): void => {} onDisappearCleanup: () => void = (): void => {} build() { Column() { // 播放页只负责壳层结构,内部内容逐步从 LocalMusic 迁移。 this.contentBuilder() } .transition(TransitionEffect.asymmetric( TransitionEffect.opacity(1), TransitionEffect.OPACITY )) .visualEffect(this.enableBackgroundEffect && this.showBackgroundEffect && deviceInfo.sdkApiVersion >= 20 && this.bgController ? new hdsEffect.HdsEffectBuilder() .shaderEffect({ effectType: hdsEffect.EffectType.UV_BACKGROUND_FLOW_LIGHT, animation: { duration: 10000, iterations: -1, autoPlay: true, onFinish: () => { console.info('Succeeded in finishing') } }, controller: this.bgController, }) .buildEffect() : undefined) .height('100%') .width('100%') .padding({ top: this.paddingTop }) .alignItems(this.alignItemsValue) .backgroundImage(this.backgroundCoverEnabled && StrUtil.isNotEmpty(this.backgroundCover) ? this.backgroundCover : null) .backgroundImageSize(this.backgroundCoverFillMode === 'height-width' ? { height: '150%', width: '100%' } : (this.backgroundCoverFillMode === 'height' ? { height: '150%' } : { width: '100%' })) .backgroundBlurStyle(this.pageBackgroundBlurStyle) .onDisAppear(() => { // 页面消失时统一回调外部清理拖拽中间态,避免残留到下一次打开。 this.onDisappearCleanup() }) .translate({ y: this.translateY }) .gesture( // 播放页的关闭/切歌手势放在独立页面里承载,但具体业务判断仍交给 LocalMusic。 PanGesture(this.panOptions) .onActionUpdate((event?: GestureEvent) => { this.onPanUpdate(event) }) .onActionEnd((event?: GestureEvent) => { this.onPanEnd(event) }) ) } }