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

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)
        })
    )
  }
}