TTMusic/entry/src/main/ets/view/player/PlayerPage.ets

import { deviceInfo } from '@kit.BasicServicesKit'
import { hdsEffect } from '@kit.UIDesignKit'

@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

  // 页面拖拽和销毁清理动作通过回调下沉给 LocalMusic，保证业务状态仍在一个地方维护。
  onPanUpdate: (event?: GestureEvent) => void = (_event?: GestureEvent): void => {}
  onPanEnd: (event?: GestureEvent) => void = (_event?: GestureEvent): void => {}
  onDisappearCleanup: () => void = (): void => {}

  // 实际播放器内容由外部 builder 传入，这样播放页文件独立后还能平滑迁移剩余内容。
  @BuilderParam contentBuilder: () => 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%')
    .onDisAppear(() => {
      // 页面消失时统一回调外部清理拖拽中间态，避免残留到下一次打开。
      this.onDisappearCleanup()
    })
    .translate({ y: this.translateY })
    .gesture(
      // 播放页的关闭/切歌手势放在独立页面里承载，但具体业务判断仍交给 LocalMusic。
      PanGesture()
        .onActionUpdate((event?: GestureEvent) => {
          this.onPanUpdate(event)
        })
        .onActionEnd((event?: GestureEvent) => {
          this.onPanEnd(event)
        })
    )
  }
}