竖屏直播入口

@@ -2,7 +2,7 @@
  * ResponseDTO
  * ResponseDTO
  */
  */
 export interface ResponseDTO<T = string> {
 export interface ResponseDTO<T = string> {
-  success:boolean;
+  success: boolean;
 
 
   // 服务请求响应值/微服务响应状态码”
   // 服务请求响应值/微服务响应状态码”
   code: number;
   code: number;
@@ -12,6 +12,7 @@ export interface ResponseDTO<T = string> {
 
 
   // 响应结果
   // 响应结果
   data?: T;
   data?: T;
+  totalCount?: number;
 
 
   // 请求响应时间戳（unix格式）
   // 请求响应时间戳（unix格式）
   timestamp?: number;
   timestamp?: number;

@@ -43,6 +43,7 @@ export class WDRouterPage {
   static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
   static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
   // 直播详情页
   // 直播详情页
   static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
   static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
+  static detailPlayVLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayVLivePage");
   // 多图(图集)详情页
   // 多图(图集)详情页
   static multiPictureDetailPage = new WDRouterPage("phone", "ets/pages/detail/MultiPictureDetailPage");
   static multiPictureDetailPage = new WDRouterPage("phone", "ets/pages/detail/MultiPictureDetailPage");
   // 音乐详情页
   // 音乐详情页

@@ -171,12 +171,15 @@ export interface LiveInfo {
   liveState: string
   liveState: string
   //2024-04-12 15:00:00 直播开始时间
   //2024-04-12 15:00:00 直播开始时间
   planStartTime: string
   planStartTime: string
+  liveStyle: number;
   vlive: Array<Vlive>
   vlive: Array<Vlive>
-  mlive:MLive
+  mlive: MLive
 }
 }
+
 export interface MLive {
 export interface MLive {
-  mliveId:string
+  mliveId: string
 }
 }
+
 export interface FullColumnImgUrls {
 export interface FullColumnImgUrls {
   url: string
   url: string
 }
 }

 export { DetailPlayLivePage } from './src/main/ets/pages/DetailPlayLivePage'
 export { DetailPlayLivePage } from './src/main/ets/pages/DetailPlayLivePage'
+
+export { DetailPlayVLivePage } from './src/main/ets/pages/DetailPlayVLivePage'

+import { BottomComponent } from '../widgets/details/BottomComponent';
+import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
+import { TopPlayVComponent } from '../widgets/details/video/TopPlayVComponet';
+
+
+@Component
+export struct DetailPlayVLivePage {
+  aboutToAppear(): void {
+
+  }
+
+  build() {
+    Column() {
+      TopPlayVComponent()
+      // TabComponent()
+      BottomComponent()
+    }
+    .height('100%')
+    .width('100%')
+  }
+
+  onPageShow(): void {
+
+  }
+
+  aboutToDisappear(): void {
+
+  }
+}

+import { LiveDetailsBean } from 'wdBean/Index';
+import { WDPlayerController, WDPlayerRenderView } from 'wdPlayer/Index';
+import { PlayUIComponent } from './PlayUIComponent';
+
+@Component
+export struct TopPlayVComponent {
+  @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
+  playerController: WDPlayerController = new WDPlayerController();
+
+  aboutToAppear(): void {
+    this.playerController.onCanplay = () => {
+      this.playerController.play()
+    }
+  }
+
+  updateData() {
+    //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
+    if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
+      let playUrl = ''
+      if (this.liveDetailsBean.liveInfo.liveState == 'running') {
+        playUrl = this.liveDetailsBean.liveInfo.vlive[0].liveUrl
+      } else if (this.liveDetailsBean.liveInfo.liveState == 'end') {
+        playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
+      }
+      this.playerController.firstPlay(playUrl);
+    }
+  }
+
+  build() {
+    Stack() {
+      // https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345
+      Image(this.liveDetailsBean.fullColumnImgUrls[0].url)
+        .height('100%')
+        .width('100%')
+        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+        .blur(100)
+
+      WDPlayerRenderView({
+        playerController: this.playerController,
+        onLoad: async () => {
+        }
+      })// .height('100%')
+        .width('100%')// 扩展至所有非安全区域
+        .onClick(() => {
+          this.playerController.play()
+        })
+      // PlayUIComponent({ playerController: this.playerController })
+    }
+    // .height('100%')
+    .width('100%')
+    // 扩展至所有非安全区域
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+  }
+
+  aboutToDisappear(): void {
+    this.playerController.pause()
+  }
+}

 import mediaquery from '@ohos.mediaquery';
 import mediaquery from '@ohos.mediaquery';
 import { ContentDetailDTO, InteractDataDTO } from 'wdBean';
 import { ContentDetailDTO, InteractDataDTO } from 'wdBean';
-import { WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
+import { PlayerConstants, WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
 import { ContentDetailRequest, devicePLSensorManager } from 'wdDetailPlayApi';
 import { ContentDetailRequest, devicePLSensorManager } from 'wdDetailPlayApi';
 import { PlayControlViewContainer } from '../view/PlayControlViewContainer';
 import { PlayControlViewContainer } from '../view/PlayControlViewContainer';
 import { PlayerDetailContainer } from '../view/PlayerDetailContainer';
 import { PlayerDetailContainer } from '../view/PlayerDetailContainer';
@@ -32,6 +32,19 @@ export struct DetailPlayShortVideoPage {
   @Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
   @Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
   @Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @Provide followStatus: string = '0' // 关注状态
   @Provide followStatus: string = '0' // 关注状态
+  @Link @Watch('switchVideoStatusChange') switchVideoStatus: boolean
+
+  switchVideoStatusChange() {
+    if (this.switchVideoStatus) {
+      if (this.currentIndex === this.index && this.playerController.getStatus() === PlayerConstants.STATUS_PAUSE) {
+        this.playerController.play()
+      }
+    } else {
+      if (this.currentIndex === this.index && this.playerController.getStatus() === PlayerConstants.STATUS_START) {
+        this.playerController.pause()
+      }
+    }
+  }
 
 
   currentIndexChange() {
   currentIndexChange() {
     if (this.currentIndex != this.index) {
     if (this.currentIndex != this.index) {
@@ -166,6 +179,7 @@ export struct DetailPlayShortVideoPage {
     })
     })
       .height('100%')
       .height('100%')
       .width('100%')
       .width('100%')
+      .margin({ top: this.contentDetailData?.videoInfo[0]?.videoLandScape === 1 ? 218 : 0 })
       .onClick(() => {
       .onClick(() => {
         console.error('WDPlayerRenderView=== onClick')
         console.error('WDPlayerRenderView=== onClick')
         this.playerController?.switchPlayOrPause();
         this.playerController?.switchPlayOrPause();

@@ -24,6 +24,7 @@ export struct DetailVideoListPage {
   @State currentIndex: number = 0
   @State currentIndex: number = 0
   @State interactDataList: InteractDataDTO[] = []
   @State interactDataList: InteractDataDTO[] = []
   @State isFullScreen: boolean = false
   @State isFullScreen: boolean = false
+  @State switchVideoStatus: boolean = false
 
 
   async aboutToAppear(): Promise<void> {
   async aboutToAppear(): Promise<void> {
 
 
@@ -157,6 +158,7 @@ export struct DetailVideoListPage {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
           Column() {
           Column() {
             DetailPlayShortVideoPage({
             DetailPlayShortVideoPage({
+              switchVideoStatus: $switchVideoStatus,
               contentDetailData: item,
               contentDetailData: item,
               currentIndex: this.currentIndex,
               currentIndex: this.currentIndex,
               index: index,
               index: index,

@@ -34,14 +34,15 @@ export struct VideoChannelDetail {
   private channelStrategy: string = '1' // 频道策略 1-推荐;2-时间线
   private channelStrategy: string = '1' // 频道策略 1-推荐;2-时间线
   // private topicId?: string = '' // 专题id
   // private topicId?: string = '' // 专题id
   // private recommend?: string = '' // 0.非推荐，1.推荐；
   // private recommend?: string = '' // 0.非推荐，1.推荐；
-  @State @Watch('navIndexChange') bottomNavIndex: number = 0
-  @State @Watch('navIndexChange') topNavIndex: number = 0
+  @Link @Watch('navIndexChange') bottomNavIndex: number
+  @Link @Watch('navIndexChange') topNavIndex: number
   private swiperController: SwiperController = new SwiperController()
   private swiperController: SwiperController = new SwiperController()
   @Provide showComment: boolean = false
   @Provide showComment: boolean = false
   @State data: ContentDetailDTO[] = []
   @State data: ContentDetailDTO[] = []
   @State currentIndex: number = 0
   @State currentIndex: number = 0
   @State interactDataList: InteractDataDTO[] = []
   @State interactDataList: InteractDataDTO[] = []
   @State totalCount: number = 0
   @State totalCount: number = 0
+  @State switchVideoStatus: boolean = false
 
 
   /**
   /**
    * 监听视频频道激活或失活
    * 监听视频频道激活或失活
@@ -49,30 +50,22 @@ export struct VideoChannelDetail {
   navIndexChange() {
   navIndexChange() {
     if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
     if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
       // 如果视频在暂停则播放视频
       // 如果视频在暂停则播放视频
+      this.switchVideoStatus = true
     } else {
     } else {
       // 如果视频在播放则暂停视频
       // 如果视频在播放则暂停视频
+      this.switchVideoStatus = false
     }
     }
+
   }
   }
 
 
   async aboutToAppear(): Promise<void> {
   async aboutToAppear(): Promise<void> {
-    const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
-    const windowClass: window.Window = windowStage.getMainWindowSync();
-    windowClass.setWindowSystemBarProperties({
-      statusBarContentColor: '#ffffff',
-    })
-    console.error('aboutToAppear groupId', this.groupId)
-    console.error('aboutToAppear pageId', this.pageId)
-    console.error('aboutToAppear channelId', this.channelId)
+    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', })
     // 根据视频频道传参查询视频楼层信息
     // 根据视频频道传参查询视频楼层信息
     this.getRecCompInfo()
     this.getRecCompInfo()
   }
   }
 
 
   aboutToDisappear(): void {
   aboutToDisappear(): void {
-    const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
-    const windowClass: window.Window = windowStage.getMainWindowSync();
-    windowClass.setWindowSystemBarProperties({
-      statusBarContentColor: '#000000',
-    })
+    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
     console.error('aboutToDisappear videoChanel')
     console.error('aboutToDisappear videoChanel')
   }
   }
 
 
@@ -105,8 +98,7 @@ export struct VideoChannelDetail {
     }
     }
 
 
     await ContentDetailRequest.getRecCompInfo(params).then(res => {
     await ContentDetailRequest.getRecCompInfo(params).then(res => {
-      console.log('根据视频频道传参查询视频楼层信息', res.data?.totalCount)
-      console.log('根据视频频道传参查询视频楼层信息', JSON.stringify(res.data?.compList))
+      console.log('根据视频频道传参查询视频楼层信息totalCount', res.data?.totalCount + '')
 
 
       this.totalCount = res.data?.totalCount || 0
       this.totalCount = res.data?.totalCount || 0
       const list1: batchContentDetailParams = {
       const list1: batchContentDetailParams = {
@@ -136,8 +128,6 @@ export struct VideoChannelDetail {
       this.batchContentDetail(list1)
       this.batchContentDetail(list1)
       this.getContentInteract(list2)
       this.getContentInteract(list2)
 
 
-    }).catch((e: BusinessError) => {
-      console.error('eeeeeeeeeeeeee', e)
     })
     })
   }
   }
 
 
@@ -147,7 +137,7 @@ export struct VideoChannelDetail {
   async batchContentDetail(list: batchContentDetailParams) {
   async batchContentDetail(list: batchContentDetailParams) {
     if (list.contents.length > 0) {
     if (list.contents.length > 0) {
       await ContentDetailRequest.batchContentDetail(list).then(res => {
       await ContentDetailRequest.batchContentDetail(list).then(res => {
-        console.log('根据视频楼层信息批量查询视频列表', JSON.stringify(res.data))
+        console.log('根据视频楼层信息批量查询视频列表', res.data)
         this.data = this.data.concat(res.data as [])
         this.data = this.data.concat(res.data as [])
       })
       })
     }
     }
@@ -160,7 +150,7 @@ export struct VideoChannelDetail {
     if (list.contentList.length > 0) {
     if (list.contentList.length > 0) {
       await ContentDetailRequest.getContentInteract(list).then(res => {
       await ContentDetailRequest.getContentInteract(list).then(res => {
         this.interactDataList = res.data || []
         this.interactDataList = res.data || []
-        console.log('根据视频信息批量查询点赞、收藏状态', JSON.stringify(res))
+        console.log('根据视频信息批量查询点赞、收藏状态', res.data)
       })
       })
     }
     }
   }
   }
@@ -171,6 +161,7 @@ export struct VideoChannelDetail {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
         ForEach(this.data, (item: ContentDetailDTO, index: number) => {
           Column() {
           Column() {
             DetailPlayShortVideoPage({
             DetailPlayShortVideoPage({
+              switchVideoStatus: $switchVideoStatus,
               contentDetailData: item,
               contentDetailData: item,
               currentIndex: this.currentIndex,
               currentIndex: this.currentIndex,
               index: index,
               index: index,

@@ -48,7 +48,9 @@ export struct PlayerTitleComment {
   }
   }
 
 
   getName() {
   getName() {
-    return this.contentDetailData?.newsSourceName || this.contentDetailData?.editorName || ''
+    // console.error(this.contentDetailData?.newsSourceName + '===========' + this.contentDetailData?.editorName)
+    // this.contentDetailData?.newsSourceName ||
+    return this.contentDetailData?.editorName || ''
   }
   }
 
 
   getTitle() {
   getTitle() {

@@ -41,16 +41,15 @@ class MGPlayRenderViewIns {
 export struct WDPlayerRenderView {
 export struct WDPlayerRenderView {
   private playerController?: WDPlayerController;
   private playerController?: WDPlayerController;
   private xComponentController: XComponentController = new XComponentController();
   private xComponentController: XComponentController = new XComponentController();
+  private insId: string = "WDPlayRenderView" + insIndex;
   onLoad?: ((event?: object) => void);
   onLoad?: ((event?: object) => void);
-  videoWidth: number = 0
-  videoHeight: number = 0
+  @State videoWidth: number = 0
+  @State videoHeight: number = 0
   @State selfSize: Size = new Size('100%', '100%');
   @State selfSize: Size = new Size('100%', '100%');
-  private insId: string = "WDPlayRenderView" + insIndex;
 
 
   aboutToAppear() {
   aboutToAppear() {
     MGPlayRenderViewIns.add();
     MGPlayRenderViewIns.add();
 
 
-    console.log('playerController', this.playerController)
     insIndex++;
     insIndex++;
     if (!this.playerController) {
     if (!this.playerController) {
       return
       return
@@ -80,9 +79,7 @@ export struct WDPlayerRenderView {
       })
       })
         .onLoad(async (event) => {
         .onLoad(async (event) => {
           Logger.info(TAG, 'onLoad')
           Logger.info(TAG, 'onLoad')
-          let surfaceId = this.xComponentController.getXComponentSurfaceId()
-          console.log('surfaceId===', surfaceId)
-          console.log('insId===', this.insId)
+          // const surfaceId = this.xComponentController.getXComponentSurfaceId()
           this.xComponentController.setXComponentSurfaceSize({
           this.xComponentController.setXComponentSurfaceSize({
             surfaceWidth: 1920,
             surfaceWidth: 1920,
             surfaceHeight: 1080
             surfaceHeight: 1080
@@ -94,25 +91,12 @@ export struct WDPlayerRenderView {
         })
         })
         .width(this.selfSize.width)
         .width(this.selfSize.width)
         .height(this.selfSize.height)
         .height(this.selfSize.height)
-        .margin({ top: this.getPlayerMarginTop() })
     }
     }
     .id(this.insId)
     .id(this.insId)
     .onAreaChange(() => {
     .onAreaChange(() => {
       // this.updateLayout()
       // this.updateLayout()
     })
     })
     .backgroundColor("#000000")
     .backgroundColor("#000000")
-    .alignItems(VerticalAlign.Center)
-    .justifyContent(FlexAlign.Center)
-    .alignItems(this.selfSize.width === '100%' ? VerticalAlign.Top : VerticalAlign.Center)
-    .height('100%')
-    .width('100%')
-  }
-
-  /**
-   * 横屏播放器非居中展示
-   */
-  getPlayerMarginTop() {
-    return this.selfSize.width === '100%' && this.videoWidth > this.videoHeight ? 218 : 0
   }
   }
   
   
   updateLayout() {
   updateLayout() {