1/*
2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development 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 Logger from '../utils/Logger';
18import AVPlayerModel from '../model/AVPlayerModel';
19import Constant from '../utils/Constant';
20import emitter from '@ohos.events.emitter';
21
22const TAG: string = '[VideoComponent]';
23
24@Component
25export default struct VideoComponent {
26  private xComponentController: XComponentController = new XComponentController();
27  private avPlayerModel: AVPlayerModel = new AVPlayerModel(getContext(this));
28  @State surfaceId: string = '-1';
29  @State selectTopIndex: number = 4; // 顶部选择索引
30  @State isLike: boolean = false; // 是否喜欢
31  @State isCollect: boolean = false; // 是否收藏
32  @State isPlay: boolean = true; // 是否播放
33
34  aboutToAppear() {
35    // 监听暂停事件，当有其他音乐播放时当前播放
36    emitter.on({ eventId: Constant.EVENT_PAUSED_INDEX }, data => {
37      Logger.info(TAG, `emitter on data = ${JSON.stringify(data)}`)
38      Logger.info(TAG, `emitter on data this.isPlay= ${JSON.stringify(this.isPlay)}`)
39      if (this.isPlay) {
40        this.avPlayerModel.paused();
41        this.isPlay = false;
42      }
43    });
44  }
45
46  build() {
47    Column() {
48      Stack() {
49        XComponent({
50          id: 'xComponentId',
51          type: 'surface',
52          controller: this.xComponentController
53        })
54          .onLoad(() => {
55            Logger.info(TAG, 'onLoad is called')
56            // 设置XComponent创建的曲面宽为640vp，高为480vp
57            this.xComponentController.setXComponentSurfaceSize({ surfaceWidth: 640, surfaceHeight: 480 })
58            this.surfaceId = this.xComponentController.getXComponentSurfaceId()
59            Logger.info(TAG, `onLoad surfaceId: ${this.surfaceId}`)
60            this.avPlayerModel.avPlayerFdSrcDemo(Constant.TEST_NAME_DEMO_VIDEO, this.surfaceId)
61          })
62          .height('100%')
63          .width('100%')
64
65        Column() {
66          Row({space:28}) {
67            Image($r('app.media.app_icon'))
68              .width(30)
69              .height(30)
70              .objectFit(ImageFit.Contain)
71            Text($r('app.string.Stroll'))
72              .height('100%')
73              .fontColor(this.selectTopIndex === 0 ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF'))
74              .fontSize(22)
75              .fontFamily($r('app.string.Font_family_medium'))
76              .onClick(e => {
77                this.selectTopIndex = 0;
78              })
79            Text($r('app.string.Experience'))
80              .height('100%')
81              .fontColor(this.selectTopIndex === 1 ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF'))
82              .fontSize(22)
83              .fontFamily($r('app.string.Font_family_medium'))
84              .onClick(e => {
85                this.selectTopIndex = 1;
86              })
87            Text($r('app.string.Attention'))
88              .height('100%')
89              .fontColor(this.selectTopIndex === 2 ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF'))
90              .fontSize(22)
91              .fontFamily($r('app.string.Font_family_medium'))
92              .onClick(e => {
93                this.selectTopIndex = 2;
94              })
95            Text($r('app.string.Store'))
96              .height('100%')
97              .fontColor(this.selectTopIndex === 3 ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF'))
98              .fontSize(22)
99              .fontFamily($r('app.string.Font_family_medium'))
100              .onClick(e => {
101                this.selectTopIndex = 3;
102              })
103            Text($r('app.string.Recommend'))
104              .height('100%')
105              .fontColor(this.selectTopIndex === 4 ? $r('app.color.COLOR_FFFFFF') : $r('app.color.COLOR_CCFFFFFF'))
106              .fontSize(22)
107              .fontFamily($r('app.string.Font_family_medium'))
108              .onClick(e => {
109                this.selectTopIndex = 4;
110              })
111            Row(){
112              Image($r('app.media.app_icon'))
113                .id('search')
114                .width(30)
115                .height(30)
116                .objectFit(ImageFit.Contain)
117            }
118            .width(40)
119            .height(50)
120            .justifyContent(FlexAlign.Center)
121            .onClick(e => {
122              Logger.info(TAG, `search_white onClick`);
123              emitter.emit({ eventId: Constant.EVENT_PAUSED_INDEX });
124              router.pushUrl({url: 'appsampled/pages/SearchPage'})
125            })
126          }
127          .width('100%')
128          .height('8%')
129          .justifyContent(FlexAlign.Center)
130
131          Blank()
132
133          Row() {
134            Column() {
135              Text($r('app.string.UserNick'))
136                .height(30)
137                .fontColor($r('app.color.COLOR_FFFFFF'))
138                .fontSize(22)
139                .fontFamily($r('app.string.Font_family_medium'))
140                .margin({ left: 15, bottom: 10  })
141              Text($r('app.string.TikContent'))
142                .fontColor($r('app.color.COLOR_E6FFFFFF'))
143                .fontSize(20)
144                .fontFamily($r('app.string.Font_family_regular'))
145                .margin({ left: 15, bottom: 20 })
146            }
147            .width('85%')
148            .height('100%')
149            .alignItems(HorizontalAlign.Start)
150            .justifyContent(FlexAlign.End)
151
152            Column({space: 10}) {
153              Stack(){
154                Image($r('app.media.app_icon'))
155                  .width(60)
156                  .height(60)
157                  .objectFit(ImageFit.Contain)
158                  .borderRadius(30)
159                  .border({color: $r('app.color.COLOR_FFFFFF'), width: 2})
160                Image($r('app.media.app_icon'))
161                  .width(20)
162                  .height(20)
163                  .objectFit(ImageFit.Contain)
164                  .borderRadius(10)
165                  .offset({y: 10})
166              }
167              .width(60)
168              .height(60)
169              .margin({bottom: 10})
170              .alignContent(Alignment.Bottom)
171
172              Column(){
173                Image(this.isLike ? $r('app.media.app_icon') : $r('app.media.app_icon'))
174                  .width(35)
175                  .height(35)
176                  .objectFit(ImageFit.Contain)
177                  .onClick(e=>{
178                    this.isLike = !this.isLike;
179                    Logger.info(TAG, `isLike= ${this.isLike}`);
180                  })
181                Text($r('app.string.Num',"273.1"))
182                  .width(60)
183                  .height(20)
184                  .fontColor($r('app.color.COLOR_E6FFFFFF'))
185                  .fontSize(14)
186                  .fontFamily($r('app.string.Font_family_regular'))
187                  .textAlign(TextAlign.Center)
188              }
189              .width(60)
190              .height(60)
191              .alignItems(HorizontalAlign.Center)
192
193              this.Item($r('app.media.app_icon'),$r('app.string.Num','36.3'),()=> {
194                Logger.info(TAG, 'ic_message');
195              })
196
197              Column(){
198                Image(this.isCollect ? $r('app.media.app_icon') : $r('app.media.app_icon'))
199                  .width(35)
200                  .height(35)
201                  .objectFit(ImageFit.Contain)
202                  .onClick(e=>{
203                    this.isCollect = !this.isCollect;
204                    Logger.info(TAG, `isCollect= ${this.isCollect}`);
205                  })
206                Text($r('app.string.Num','18.9'))
207                  .width(60)
208                  .height(20)
209                  .fontColor($r('app.color.COLOR_E6FFFFFF'))
210                  .fontSize(14)
211                  .fontFamily($r('app.string.Font_family_regular'))
212                  .textAlign(TextAlign.Center)
213              }
214              .width(60)
215              .height(60)
216              .alignItems(HorizontalAlign.Center)
217
218              this.Item($r('app.media.app_icon'),$r('app.string.Num','40.2'),()=> {
219                Logger.info(TAG, 'ic_transmit');
220              })
221              Column(){
222                Image($r('app.media.app_icon'))
223                  .width(20)
224                  .height(20)
225                  .objectFit(ImageFit.Contain)
226              }
227              .width(50)
228              .height(50)
229              .justifyContent(FlexAlign.Center)
230              .borderRadius(25)
231              .margin({bottom: 20})
232              .backgroundColor($r('app.color.COLOR_FFFFFF'))
233            }
234            .width('15%')
235            .height('100%')
236          }
237          .width('100%')
238          .height('60%')
239        }
240        .width('100%')
241        .height('100%')
242
243        Column(){
244          if (!this.isPlay){
245            Image($r('app.media.app_icon'))
246              .width(640)
247              .height(64)
248              .objectFit(ImageFit.Contain)
249              .opacity(0.6)
250          }
251        }
252        .id('video_action')
253        .width('60%')
254        .height('70%')
255        .justifyContent(FlexAlign.Center)
256        .onClick(e=>{
257          if (this.isPlay) {
258            this.avPlayerModel.paused();
259          } else {
260            this.avPlayerModel.play();
261          }
262          this.isPlay = !this.isPlay;
263        })
264      }
265      .width('100%')
266      .height('100%')
267      .alignContent(Alignment.Center)
268    }
269    .width('100%')
270    .height('100%')
271    .backgroundColor($r('app.color.COLOR_000000'))
272  }
273
274  @Builder
275  Item(img: Resource, num: Resource, callback: Function) {
276    Column() {
277      Image(img)
278        .width(35)
279        .height(35)
280        .objectFit(ImageFit.Contain)
281        .onClick(e => {
282          callback();
283        })
284      Text(num)
285        .width(60)
286        .height(20)
287        .fontColor($r('app.color.COLOR_E6FFFFFF'))
288        .fontSize(14)
289        .fontFamily($r('app.string.Font_family_regular'))
290        .textAlign(TextAlign.Center)
291    }
292    .width(60)
293    .height(60)
294    .alignItems(HorizontalAlign.Center)
295  }
296
297}