• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import router from '@ohos.router'
17import mediaQuery from '@ohos.mediaquery';
18import { LiveInfoDataModel, MyDataSource } from '../model/LiveDataModel'
19import { LiveData } from '../mock/LiveData'
20import { Live } from '../net/Utils'
21import { CommentPage } from './CommentPage'
22
23class LiveInfoResponse {
24  code: number
25  data: Array<Info>
26}
27
28class Info {
29  uri: string
30  name: string
31  peopleNum: string
32  commentList: Array<commentInfo>
33}
34
35class commentInfo {
36  name: string
37  comment: string
38}
39
40@Entry
41@Component
42export struct LivePage {
43  @State active: number = 0
44  @State liveInfoList: Array<LiveInfoDataModel> = LiveData // 直播信息
45  @State liveList: any[] = []
46  @State mData: LiveInfoResponse = {
47    code: 0,
48    data: [{ uri: '', name: '', peopleNum: '', commentList: [{ name: '', comment: '' }] }]
49  }
50  @State isPhone: boolean = false
51  portraitFunc = null
52  listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)');
53
54  onPortrait(mediaQueryResult) {
55    this.isPhone = !mediaQueryResult.matches
56  }
57
58  async aboutToAppear() {
59    this.portraitFunc = (mediaQueryResult) => this.onPortrait(mediaQueryResult);
60    this.listenerIsPhone.on('change', this.portraitFunc);
61
62    try {
63      let a = await Live() // 调用网络接口
64      this.mData = JSON.parse(a.result.toString())
65      this.liveInfoList = this.mData.data
66    } catch (error) {
67      console.log('http resquest is fail:' + error)
68    }
69  }
70
71  build() {
72    Scroll() {
73      Column() {
74        Swiper() {
75          ForEach(this.liveInfoList, (item, index) => {
76            Stack() {
77              if (this.active == index) {
78                Video({ src: item.uri })
79                  .autoPlay(true)
80                  .loop(false)
81                  .controls(false)
82                  .objectFit(ImageFit.Contain)
83                  .width('100%')
84                  .height('100%')
85              }
86
87              // 直播界面信息栏
88              Row() {
89                // 信息栏左边信息
90                Row() {
91                  Row() {
92                    Image($r('app.media.live_author')) // 直播间头像
93                      .width(38).height(38)
94
95                    Column() {
96                      Text(item.name) // 直播间名字
97                        .fontSize(16)
98                        .fontColor('#ffffff')
99                      Row() {
100                        Text(item.peopleNum) // 直播间观看人数
101                          .id(item.peopleNum)
102                          .fontSize(12)
103                          .fontColor('#ffffff')
104                        Text($r('app.string.watch'))
105                          .fontSize(12)
106                          .fontColor('#ffffff')
107                      }
108                    }
109                    .alignItems(HorizontalAlign.Start)
110                    .padding({ left: '3%' })
111                  }
112
113                  Image($r('app.media.live_attention')) // 关注按钮
114                    .height(35)
115                    .width(59)
116                }
117                .justifyContent(FlexAlign.SpaceBetween)
118                .padding({ left: this.isPhone ? '2%' : '1%', right: this.isPhone ? '2%' : '1%' })
119                .width(this.isPhone ? '57.2%' : '30%')
120                .aspectRatio(this.isPhone ? 5.15 : 7)
121                .backgroundColor('rgba(0,0,0,0.40)')
122                .borderRadius(this.isPhone ? 26 : 36)
123
124                // 右边信息栏
125                Column() {
126                  Image($r('app.media.live_share')) // 分享图标
127                    .width(42).height(42)
128                }
129                .margin({ left: this.isPhone ? '12%' : '49%' })
130
131                Column() {
132                  Image($r('app.media.live_close')) // 关闭图标
133                    .id('close')
134                    .width(42).height(42)
135                    .onClick(() => {
136                      router.back()
137                    })
138                }
139                .margin({ left: '4%' })
140              }
141              .position({ x: '4.4%', y: '5.1%' })
142
143              // 评论框
144              Column() {
145                if (this.active === index) {
146                  CommentPage({ activeItem: $active })
147                }
148              }
149              .position({ x: '4.4%', y: this.isPhone ? '72%' : '62%' })
150            }
151            .backgroundColor('#D8D8D8')
152            .width('100%')
153            .height('100%')
154          })
155        }
156        .width('100%')
157        .height('100%')
158        .loop(false)
159        .indicator(false)
160        .vertical(true)
161        .onChange((index: number) => {
162          this.active = index
163        })
164      }
165    }
166  }
167}
168