Merge remote-tracking branch 'origin/main'

@@ -18,7 +18,8 @@ export struct MultiPictureDetailItemComponent {
   build() {
     Row() {
       Image(this.MultiPictureDetailItem.picPath)
-        .alt($r('app.media.picture_loading'))
+        .alt($r('app.media.datail_imageLoading_w'))
+
         .width(this.imageWidth)
         .objectFit(ImageFit.Contain)
         .interpolation(ImageInterpolation.High)

@@ -92,7 +92,7 @@ export struct Card6Component {
       .alignItems(HorizontalAlign.Start)
       .justifyContent(FlexAlign.Start)
       .width('64%')
-      .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 78 : 156)
+      .height(this.contentDTO.appStyle === CompStyle.Card_13 ? '' : 156)
 
       Stack() {
         Image(this.loadImg ? this.contentDTO.coverUrl : '')
@@ -102,7 +102,6 @@ export struct Card6Component {
           .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 78 : 156)
         CardMediaInfo({ contentDTO: this.contentDTO })
       }
-      .alignContent(Alignment.BottomEnd)
     }
     .onClick((event: ClickEvent) => {
       this.clicked = true;
@@ -118,5 +117,6 @@ export struct Card6Component {
     .width(CommonConstants.FULL_WIDTH)
     // .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 107 : 217)
     .justifyContent(FlexAlign.SpaceBetween)
+    .alignItems(VerticalAlign.Top)
   }
 }
\ No newline at end of file

@@ -148,7 +148,7 @@ struct localCard {
       offsetY: 3
     }) // 设置下方阴影
     .margin({
-      right: 10
+      right: -2
     })
   }
 }
\ No newline at end of file

@@ -531,7 +531,6 @@ struct ReserveMorePage {
     const eventHour = eventDateTime.getHours();
     const eventMinutes = eventDateTime.getMinutes();
     const eventTimeStr = `${eventHour}:${eventMinutes.toString().padStart(2, '0')}开始`; // 格式化时间，确保分钟是两位数
-
     if (type === 1) {
       // 判断是否是今天
       const eventDate = eventDateTime.setHours(0, 0, 0, 0);
@@ -547,4 +546,28 @@ struct ReserveMorePage {
       return `${eventTimeStr}`;
     }
   }
+  // getReserveDate(eventDateTimeString: string, type: number): string {
+  //   // 解析事件的日期和时间
+  //   const eventDateTime = new Date(eventDateTimeString);
+  //   const currentDateTime = new Date();
+  //
+  //   // 截取事件时间的小时和分钟（假设事件时间是按照24小时制）
+  //   const eventHour = eventDateTime.getHours();
+  //   const eventMinutes = eventDateTime.getMinutes();
+  //   const eventTimeStr = `${eventHour}:${eventMinutes.toString().padStart(2, '0')}开始`; // 格式化时间，确保分钟是两位数
+  //
+  //   if (type === 1) {
+  //     // 如果是今天
+  //     if (eventDateTime.setHours(0,0,0,0) === currentDateTime.setHours(0,0,0,0)) {
+  //       return `今天`;
+  //     } else {
+  //       // 如果事件不在今天
+  //       const month = eventDateTime.getMonth() + 1; // 月份从0开始
+  //       const date = eventDateTime.getDate();
+  //       return `${month}月${date}日`;
+  //     }
+  //   } else {
+  //     return `${eventTimeStr}`;
+  //   }
+  // }
 }
\ No newline at end of file

@@ -90,11 +90,20 @@ export struct OperRowListView {
     console.info(TAG, '22222----', this.styleType)
     console.info(TAG, '3333----', this.needLike)
     this.handleStyle()
+    this.onDetailUpdated()
     EmitterUtils.receiveEvent(EmitterEventId.AUDIO_CHANGE_STATUS, (val: number | string | undefined) => {
       console.log(TAG, 'this.currentStatus', val)
       this.currentStatus = val
     })
-    this.onDetailUpdated()
+    //注册通知，来自别的组件的评论成功通知
+    EmitterUtils.receiveEvent(EmitterEventId.COMMENT_PUBLISH, (targetId?: string) => {
+      if (targetId) {
+        if (targetId == this.publishCommentModel.targetId) {
+          //新增评论
+          this.queryContentInteractCount()
+        }
+      }
+    })
   }
 
   async onDetailUpdated() {

-import { DateFormatUtil, WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
+import { DateFormatUtil, WDAliPlayerController, WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
 import router from '@ohos.router';
 import { StringUtils } from 'wdKit/Index';
 import { Action } from 'wdBean';
@@ -10,7 +10,7 @@ const TAG = 'VideoPlayPage';
 export struct VideoPlayPage {
   //是否处于播放状态中
   @State isPlayStatus: boolean = true
-  playerController: WDPlayerController = new WDPlayerController();
+  playerController: WDAliPlayerController = new WDAliPlayerController();
   //视频地址
   @State videoUrl: string = ''
   //封面图

@@ -8,7 +8,7 @@ import { Logger, WindowModel } from 'wdKit/Index';
 import { router, window } from '@kit.ArkUI';
 import { devicePLSensorManager } from 'wdDetailPlayApi/Index';
 import { LiveCommentComponent } from 'wdComponent/Index';
-import { WDPlayerController } from 'wdPlayer/Index';
+import { WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index';
 import { OperRowListView } from 'wdComponent/src/main/ets/components/view/OperRowListView';
 import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel';
 import { ResponseDTO } from 'wdNetwork/Index';
@@ -19,7 +19,7 @@ let TAG: string = 'DetailPlayLivePage';
 export struct DetailPlayLivePage {
   //横竖屏,默认竖屏
   @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
-  playerController: WDPlayerController = new WDPlayerController();
+  playerController: WDAliPlayerController = new WDAliPlayerController();
   liveViewModel: LiveViewModel = new LiveViewModel()
   @State relId: string = ''
   @State contentId: string = ''

@@ -4,7 +4,7 @@ import router from '@ohos.router';
 import { WindowModel } from 'wdKit/Index';
 import { PlayerComponent } from '../widgets/vertical/PlayerComponent';
 import { PlayerInfoComponent } from '../widgets/vertical/PlayerInfoComponent';
-import { WDPlayerController } from 'wdPlayer/Index';
+import { WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index';
 import { DisplayDirection } from 'wdConstant/Index';
 import { LiveEmptyComponent, WDLiveViewDefaultType } from 'wdComponent/Index';
 import { PlayerEndView } from '../widgets/vertical/PlayerEndView';
@@ -16,7 +16,7 @@ const TAG = 'DetailPlayVLivePage'
 @Component
 export struct DetailPlayVLivePage {
   private liveViewModel: LiveViewModel = new LiveViewModel()
-  private playerController: WDPlayerController = new WDPlayerController();
+  private playerController: WDAliPlayerController = new WDAliPlayerController();
   private swiperController: SwiperController = new SwiperController()
   @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
   @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0

@@ -2,14 +2,14 @@ import { window } from '@kit.ArkUI'
 import lottie from '@ohos/lottie';
 
 import { NumberFormatterUtils, StringUtils, WindowModel } from 'wdKit/Index'
-import { DateFormatUtil, WDPlayerController } from 'wdPlayer/Index'
+import { DateFormatUtil, WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index'
 import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
 import { DisplayDirection } from 'wdConstant/Index'
 import { LiveFollowComponent, LottieView } from 'wdComponent/Index'
 
 @Component
 export struct PlayUIComponent {
-  playerController: WDPlayerController = new WDPlayerController();
+  playerController?: WDAliPlayerController;
   //菜单键是否可见
   @State @Watch('onChangeMenuVisible') isMenuVisible: boolean = true
   @Consume liveDetailsBean: LiveDetailsBean
@@ -39,10 +39,12 @@ export struct PlayUIComponent {
   aboutToAppear(): void {
     this.onChangeMenuVisible()
     //播放进度监听
-    this.playerController.onTimeUpdate = (position: number, duration: number) => {
-      this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
-      this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
-      this.progressVal = Math.floor(position * 100 / duration);
+    if (this.playerController) {
+      this.playerController.onTimeUpdate = (position: number, duration: number) => {
+        this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
+        this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
+        this.progressVal = Math.floor(position * 100 / duration);
+      }
     }
   }
 
@@ -312,10 +314,10 @@ export struct PlayUIComponent {
       .onClick(() => {
         if (this.isPlayStatus) {
           this.isPlayStatus = false
-          this.playerController.pause()
+          this.playerController?.pause()
         } else {
           this.isPlayStatus = true
-          this.playerController.play()
+          this.playerController?.play()
         }
       })
   }

 import { LiveDetailsBean } from 'wdBean/Index';
 import { StringUtils } from 'wdKit/Index';
-import { WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
+import { WDAliPlayerController, WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
 import { PlayUIComponent } from './PlayUIComponent';
 import { Logger } from 'wdKit/Index';
 
@@ -10,12 +10,14 @@ const TAG: string = 'TopPlayComponent'
 @Component
 export struct TopPlayComponent {
   @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
-  playerController?: WDPlayerController
+  playerController?: WDAliPlayerController
   @State imgUrl: string = ''
   //未开始
   @State isWait: boolean = false
   //已结束直播
   @State isEnd: boolean = false
+  private playUrl: string = ""
+  private xComponentIsLoaded: boolean = false
 
   aboutToAppear(): void {
     if (this.playerController) {
@@ -49,16 +51,31 @@ export struct TopPlayComponent {
       // this.playerController?.firstPlay('https://rmrbcmsonline.peopleapp.com/upload/rmh/video/mp4/202404/1713752415708fb81d0b8f137b.mp4');
       if (StringUtils.isNotEmpty(playUrl)) {
         Logger.debug(TAG, `${playUrl}`)
-        this.playerController?.firstPlay(playUrl);
+        this.playUrl = playUrl
+        this.tryToPlay()
       }
     }
   }
 
+  tryToPlay() {
+    if (!this.xComponentIsLoaded) {
+      Logger.debug(TAG, "需要xComponent加载完成")
+      return
+    }
+    if (this.playUrl.length == 0) {
+      Logger.debug(TAG, "播放地址为空")
+      return
+    }
+    this.playerController?.firstPlay(this.playUrl);
+  }
+
   build() {
     Stack() {
       WDPlayerRenderLiveView({
         playerController: this.playerController,
         onLoad: async () => {
+          this.xComponentIsLoaded = true
+          this.tryToPlay()
         }
       })
         .height('100%')

 import { LiveDetailsBean } from 'wdBean/Index';
-import { WDPlayerController, WDPlayerRenderVLiveView, WDPlayerRenderView } from 'wdPlayer/Index';
+import { WDPlayerController, WDPlayerRenderVLiveView, WDPlayerRenderView, WDAliPlayerController,
+  AliPlayerRenderView } from 'wdPlayer/Index';
 import { PictureLoading } from './PictureLoading';
 
 const TAG = 'PlayerComponent'
 
 @Component
 export struct PlayerComponent {
-  @Prop playerController: WDPlayerController;
+  @Prop playerController: WDAliPlayerController;
   @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
   @Consume @Watch('pageShowChange') pageShow: number
   @Consume @Watch('pageHideChange') pageHide: number
@@ -78,7 +79,7 @@ export struct PlayerComponent {
             }
           })
         } else if (this.liveStreamType == 0) {
-          WDPlayerRenderView({
+          AliPlayerRenderView({
             playerController: this.playerController,
             onLoad: () => {
               this.playerController?.firstPlay(this.playUrl);

-import { WDPlayerController } from 'wdPlayer/Index'
+import { WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index'
 import { PlayerUIComponent } from './PlayerUIComponent'
 
 @Component
 export struct PlayerInfoComponent {
   swiperController?: SwiperController
-  private playerController?: WDPlayerController
+  private playerController?: WDAliPlayerController
   @Consume bottomSafeHeight: number
   @Consume topSafeHeight: number
   @Consume liveState: string

 import { ContentDetailDTO } from 'wdBean/Index';
-import { WDPlayerController } from 'wdPlayer/Index';
+import { WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index';
 import { PlayerCommentComponent } from './PlayerCommentComponent';
 import { PlayerTitleComponent } from './PlayerTitleComponent';
 import { PlayerVideoControlComponent } from './PlayerVideoControlComponent';
 
 @Component
 export struct PlayerUIComponent {
-  private playerController?: WDPlayerController
+  private playerController?: WDAliPlayerController
   @Consume isShowControl: boolean
   
   build() {

@@ -2,13 +2,13 @@ import { window } from '@kit.ArkUI'
 import { NumberFormatterUtils, WindowModel } from 'wdKit/Index'
 
 import { devicePLSensorManager } from 'wdDetailPlayApi/Index'
-import { DateFormatUtil, WDPlayerController } from 'wdPlayer/Index'
+import { DateFormatUtil, WDAliPlayerController, WDPlayerController } from 'wdPlayer/Index'
 import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
 
 
 @Component
 export struct PlayerVideoControlComponent {
-  private playerController?: WDPlayerController
+  private playerController?: WDAliPlayerController
   @Consume liveDetailsBean: LiveDetailsBean
   @Consume liveRoomDataBean: LiveRoomDataBean
   @State currentTime: string = ''

@@ -14,4 +14,6 @@ export { DateFormatUtil } from "./src/main/ets/utils/DateFormatUtil"
 
 export { WDAliPlayerController } from "./src/main/ets/controller/WDAliPlayerController"
 
-export { WDListPlayerData, WDAliListPlayerController } from "./src/main/ets/controller/WDAliListPlayerController"
\ No newline at end of file
+export { WDListPlayerData, WDAliListPlayerController } from "./src/main/ets/controller/WDAliListPlayerController"
+
+export { AliPlayerRenderView } from "./src/main/ets/pages/AliPlayerRenderView"
\ No newline at end of file

@@ -11,8 +11,10 @@ import {
 
 import { initGlobalPlayerSettings, setupPlayerConfig } from '../utils/GlobalSetting';
 import prompt from '@ohos.promptAction';
-import { Logger } from '../utils/Logger';
 import { PlayerConstants, AVPlayerStatus, Events } from '../constants/PlayerConstants';
+import { Logger } from 'wdKit/Index';
+
+const TAG = "WDAliPlayerController"
 
 /*
   * 此播放器为阿里播放器鸿蒙版本封装，可播放单个视频、或直播
@@ -54,7 +56,7 @@ export class WDAliPlayerController {
   public onFirstFrameDisplay?: () => void
 
   constructor() {
-    Logger.info("初始化")
+    Logger.info(TAG, "初始化")
     initGlobalPlayerSettings()
     this.initPromise = this.createAVPlayer();
   }
@@ -64,24 +66,24 @@ export class WDAliPlayerController {
    */
   private createAVPlayer(): Promise<void> {
     return new Promise((resolve, reject) => {
-      Logger.debug("开始创建")
+      Logger.debug(TAG, "开始创建")
       let traceId = ''
       this.avPlayer = AliPlayerFactory.createAliPlayer(getContext(), traceId)
       if (this.avPlayer) {
-        Logger.debug("创建完成1")
+        Logger.debug(TAG, "创建完成1")
         setupPlayerConfig(this.avPlayer!)
         this.bindState();
         resolve();
       } else {
-        Logger.error("创建完成0")
-        Logger.error('[WDPlayerController] createAvPlayer fail!');
+        Logger.error(TAG, "创建完成0")
+        Logger.error(TAG, '[WDPlayerController] createAvPlayer fail!');
         reject();
       }
     });
   }
 
   public destory() {
-    Logger.debug("播放器销毁")
+    Logger.debug(TAG, "播放器销毁")
     this.avPlayer?.stop()
     this.avPlayer?.release()
   }
@@ -94,13 +96,13 @@ export class WDAliPlayerController {
       // 当调用play()方法后，会调用
         onPrepared: () => {
           this.duration = this.avPlayer?.getDuration();
-          Logger.debug("已准备好", `${this.duration}`)
+          Logger.debug(TAG, "已准备好", `${this.duration}`)
         }
       }
     );
     this.avPlayer?.setOnRenderingStartListener({
       onRenderingStart: () => {
-        Logger.debug("首帧开始显示")
+        Logger.debug(TAG, "首帧开始显示")
         if (this.onFirstFrameDisplay) {
           this.onFirstFrameDisplay()
         }
@@ -108,7 +110,7 @@ export class WDAliPlayerController {
     });
     this.avPlayer?.setOnCompletionListener({
       onCompletion: () => {
-        Logger.debug("播放完成")
+        Logger.debug(TAG, "播放完成")
       }
     });
     this.avPlayer?.setOnInfoListener({
@@ -116,7 +118,7 @@ export class WDAliPlayerController {
 
         if (bean.getCode() === InfoCode.CurrentPosition) {
           let position : number = bean.getExtraValue()
-          Logger.debug(`播放进度条：${position}/ ${this.duration}`)
+          Logger.debug(TAG, `播放进度条：${position}/ ${this.duration}`)
           this.initProgress(position);
 
         } else if (bean.getCode() === InfoCode.BufferedPosition) {
@@ -126,7 +128,7 @@ export class WDAliPlayerController {
           }
 
         } else if (bean.getCode() === InfoCode.SwitchToSoftwareVideoDecoder) {
-          Logger.debug(`DOWNGRADE TO SOFTWARE DECODE`)
+          Logger.debug(TAG, `DOWNGRADE TO SOFTWARE DECODE`)
           // this.mSwitchedToSoftListener?.onSwitched();
         }
       }
@@ -134,7 +136,7 @@ export class WDAliPlayerController {
     this.avPlayer?.setOnStateChangedListener({
       onStateChanged: (status: number) => {
         this.avPlayerStatus = status
-        Logger.debug("status update:" + `${this.getStatusStringWith(status)}`)
+        Logger.debug(TAG, "status update:" + `${this.getStatusStringWith(status)}`)
 
         switch (status) {
           case initalized: {
@@ -189,7 +191,7 @@ export class WDAliPlayerController {
     });
     this.avPlayer?.setOnErrorListener({
       onError:(errorInfo) => {
-        Logger.error("播放错误", JSON.stringify(errorInfo))
+        Logger.error(TAG, "播放错误", JSON.stringify(errorInfo))
         this.errorCode = errorInfo.getCode()
         this.errorMesage = errorInfo.getMsg()
         this.status = PlayerConstants.STATUS_ERROR;
@@ -240,16 +242,24 @@ export class WDAliPlayerController {
 
   setXComponentController(controller: XComponentController) {
     this.setSurfaceId(controller.getXComponentSurfaceId())
+    if (this.avPlayerStatus > PlayerConstants.STATUS_IDLE) {
+      Logger.info(TAG, "设置SurfaceId: " + this.surfaceId)
+      this.avPlayer?.setSurfaceId(this.surfaceId)
+    }
   }
 
   setSurfaceId(surfaceId: string) {
     this.surfaceId = surfaceId
+    if (this.avPlayerStatus > PlayerConstants.STATUS_IDLE) {
+      Logger.info(TAG, "设置SurfaceId: " + this.surfaceId)
+      this.avPlayer?.setSurfaceId(this.surfaceId)
+    }
   }
 
   async firstPlay(url: string) {
     this.url = url;
     if (this.avPlayer == null) {
-      Logger.info("等待播放器初始化")
+      Logger.info(TAG, "等待播放器初始化")
       await this.initPromise;
     } else {
       if (this.avPlayerStatus != idle) {
@@ -269,10 +279,10 @@ export class WDAliPlayerController {
 
     this.avPlayer?.setAutoPlay(false)
 
-    Logger.debug("开始播放", this.url)
+    Logger.debug(TAG, "开始播放", this.url)
     this.setAliPlayerURL(this.url);
 
-    Logger.info("设置SurfaceId" + this.surfaceId)
+    Logger.info(TAG, "设置SurfaceId: " + this.surfaceId)
     this.avPlayer?.setSurfaceId(this.surfaceId)
 
     this.avPlayer?.prepare()
@@ -287,17 +297,17 @@ export class WDAliPlayerController {
   }
 
   pause() {
-    Logger.debug("暂停", this.url)
+    Logger.debug(TAG, "暂停", this.url)
     this.avPlayer?.pause();
   }
 
   play() {
-    Logger.debug("播放", this.url)
+    Logger.debug(TAG, "播放", this.url)
     this.avPlayer?.start();
   }
 
   stop() {
-    Logger.debug("停止", this.url)
+    Logger.debug(TAG, "停止", this.url)
     this.avPlayer?.stop();
   }
 
@@ -405,7 +415,7 @@ export class WDAliPlayerController {
     if (this.onVolumeUpdate) {
       this.onVolumeUpdate(this.volume);
     }
-    console.log("volume : " + this.volume)
+    Logger.debug(TAG, "volume : " + this.volume)
   }
 
   onBrightActionUpdate(event: GestureEvent) {
@@ -429,7 +439,7 @@ export class WDAliPlayerController {
   }
 
   watchStatus() {
-    console.log('watchStatus', this.status)
+    Logger.debug(TAG, 'watchStatus: ' + this.status)
     if (this.onStatusChange) {
       this.onStatusChange(this.status)
     }

+import componentUtils from '@ohos.arkui.componentUtils';
+import { WDPlayerController } from '../controller/WDPlayerController'
+import { WindowModel } from 'wdKit';
+import { Logger } from '../utils/Logger';
+import { enableAliPlayer } from '../utils/GlobalSetting';
+import { WDAliPlayerController } from '../controller/WDAliPlayerController';
+
+class Size {
+  width: Length = "100%";
+  height: Length = "100%";
+
+  constructor(width: Length, height: Length) {
+    this.width = width;
+    this.height = height;
+  }
+}
+
+let insIndex: number = 0;
+const TAG = 'AliPlayerRenderView'
+
+class MGPlayRenderViewIns {
+  static intCount: number = 0;
+
+  static add() {
+    MGPlayRenderViewIns.intCount++;
+    WindowModel.shared.setWindowKeepScreenOn(true);
+    console.log("add-- +1")
+  }
+
+  static del() {
+    console.log("del-- -1")
+    MGPlayRenderViewIns.intCount--;
+    if (MGPlayRenderViewIns.intCount <= 0) {
+      WindowModel.shared.setWindowKeepScreenOn(false);
+    }
+  }
+}
+
+/**
+ * 播放窗口组件，对接阿里播放器的RenderView
+ */
+@Component
+export struct AliPlayerRenderView {
+  private playerController?: WDAliPlayerController;
+  private xComponentController: XComponentController = new XComponentController();
+  private insId: string = "AliPlayerRenderView" + insIndex;
+  onLoad?: ((event?: object) => void);
+  @State videoWidth: number = 16
+  @State videoHeight: number = 9
+  @State videoRatio: number = 16 / 9
+  @State selfSize: Size = new Size('100%', '100%');
+  private enableAliPlayer = true
+
+  aboutToAppear() {
+    MGPlayRenderViewIns.add();
+
+    insIndex++;
+    if (!this.playerController) {
+      return
+    }
+
+    this.playerController.onVideoSizeChange = (width: number, height: number) => {
+      // console.log(`WDPlayerRenderView onVideoSizeChange width:${width} videoTop:${height}`)
+      Logger.info(TAG, ` onVideoSizeChange width:${width} videoTop:${height}`)
+      this.videoWidth = width;
+      this.videoHeight = height;
+      this.videoRatio = width / height
+      this.updateLayout()
+    }
+  }
+
+  aboutToDisappear() {
+    Logger.info(TAG, `aboutToDisappear`)
+    MGPlayRenderViewIns.del();
+  }
+
+  build() {
+    Row() {
+      // 设置为“surface“类型时XComponent组件可以和其他组件一起进行布局和渲染。
+      XComponent({
+        id: this.insId,
+        type: XComponentType.SURFACE,
+        libraryname: enableAliPlayer && this.enableAliPlayer ? "premierlibrary" : undefined,
+        controller: this.xComponentController
+      })
+        .onLoad(async (event) => {
+          Logger.info(TAG, 'onLoad')
+          this.xComponentController.setXComponentSurfaceSize({
+            surfaceWidth: 1920,
+            surfaceHeight: 1080
+          });
+          if (enableAliPlayer && this.enableAliPlayer) {
+            this.playerController?.setSurfaceId(this.insId)
+          } else {
+            this.playerController?.setXComponentController(this.xComponentController)
+          }
+          if (this.onLoad) {
+            this.onLoad(event)
+          }
+        })
+        .zIndex(1000)
+        .width(this.selfSize.width)
+        .height(this.selfSize.height)
+    }
+    .onAreaChange(() => {
+      this.updateLayout()
+    })
+    .backgroundColor("#000000")
+    .justifyContent(FlexAlign.Center)
+    .height('100%')
+    .width('100%')
+    .align(this.videoWidth > this.videoHeight ? Alignment.Top : Alignment.Center)
+  }
+
+  updateLayout() {
+    let info = componentUtils.getRectangleById(this.insId);
+    if (info.size.width > 0 && info.size.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {
+      if (info.size.width / info.size.height > this.videoWidth / this.videoHeight) {
+        let scale = info.size.height / this.videoHeight;
+        this.selfSize = new Size((this.videoWidth * scale / info.size.width) * 100 + "%", '100%');
+      } else {
+        let scale = info.size.width / this.videoWidth;
+        this.selfSize = new Size('100%', (this.videoHeight * scale / info.size.height) * 100 + "%");
+      }
+    }
+  }
+}
\ No newline at end of file

@@ -3,6 +3,7 @@ import { WDPlayerController } from '../controller/WDPlayerController'
 import { WindowModel } from 'wdKit';
 import { Logger } from '../utils/Logger';
 import { enableAliPlayer } from '../utils/GlobalSetting';
+import { WDAliPlayerController } from '../controller/WDAliPlayerController';
 
 class Size {
   width: Length = "100%";
@@ -40,7 +41,7 @@ class MGPlayRenderViewIns {
  */
 @Component
 export struct WDPlayerRenderLiveView {
-  private playerController?: WDPlayerController;
+  private playerController?: WDAliPlayerController;
   private xComponentController: XComponentController = new XComponentController();
   onLoad?: ((event?: object) => void);
   videoWidth: number = 0

@@ -3,6 +3,7 @@ import { WDPlayerController } from '../controller/WDPlayerController'
 import { WindowModel } from 'wdKit';
 import { Logger } from '../utils/Logger';
 import { enableAliPlayer } from '../utils/GlobalSetting';
+import { WDAliPlayerController } from '../controller/WDAliPlayerController';
 
 class Size {
   width: Length = "100%";
@@ -40,7 +41,7 @@ class MGPlayRenderViewIns {
  */
 @Component
 export struct WDPlayerRenderVLiveView {
-  private playerController?: WDPlayerController;
+  private playerController?: WDAliPlayerController;
   private xComponentController: XComponentController = new XComponentController();
   private insId: string = "WDPlayRenderView" + insIndex;
   onLoad?: ((event?: object) => void);

@@ -48,6 +48,7 @@ export struct WDPlayerRenderView {
   @State videoHeight: number = 9
   @State videoRatio: number = 16 / 9
   @State selfSize: Size = new Size('100%', '100%');
+  private enableAliPlayer = false
 
   aboutToAppear() {
     MGPlayRenderViewIns.add();
@@ -78,7 +79,7 @@ export struct WDPlayerRenderView {
       XComponent({
         id: this.insId,
         type: XComponentType.SURFACE,
-        libraryname: enableAliPlayer ? "premierlibrary" : undefined,
+        libraryname: enableAliPlayer && this.enableAliPlayer ? "premierlibrary" : undefined,
         controller: this.xComponentController
       })
         .onLoad(async (event) => {
@@ -87,7 +88,7 @@ export struct WDPlayerRenderView {
             surfaceWidth: 1920,
             surfaceHeight: 1080
           });
-          if (enableAliPlayer) {
+          if (enableAliPlayer && this.enableAliPlayer) {
             this.playerController?.setSurfaceId(this.insId)
           } else {
             this.playerController?.setXComponentController(this.xComponentController)

@@ -43,4 +43,4 @@ export function setupPlayerConfig(player: AliPlayer) {
  * 3、WDAliListPlayerController 暂时由于SDK问题，不能使用
  * 4、
  * */
-export const enableAliPlayer = false
\ No newline at end of file
+export const enableAliPlayer = true
\ No newline at end of file