1/*
2 * Copyright (c) 2023 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 {DeviceUtils} from '../util/DeviceUtils'
17
18/**
19 * 主界面LOGO视频/图片
20 *
21 * @since 2022-06-06
22 */
23@Component
24export struct HomeCardView {
25  @Prop @Watch('onChange')
26  private playVideo: boolean;
27  private indexImage: number = 1;
28  private indexVideo: number = 99;
29  private aspectRatioHorizontal: number = 16 / 7;
30  private aspectRatioVertical: number = 1 / 1;
31  private onVideoFinished: () => boolean;
32  private videoController: VideoController;
33  @State private handleVideoPlay: boolean = false;
34
35  onChange() {
36    if (this.playVideo) {
37      this.videoController.setCurrentTime(0);
38      this.handleVideoPlay = true;
39      setTimeout(() => {
40        this.videoController.start(); // 500ms ensure to start play, Video NOT beating
41      }, 500);
42    } else {
43      this.videoController.pause();
44      this.handleVideoPlay = false;
45    }
46  }
47
48  @Builder showLogoMedia(constraintSize) {
49    Stack({ alignContent: Alignment.Center }) {
50      Video({
51        src: $r('app.media.video'),
52        previewUri: $r('app.media.video_bg'),
53        controller: this.videoController
54      })
55        .visibility(this.handleVideoPlay ? Visibility.Visible : Visibility.Hidden)
56        .zIndex(this.indexVideo)
57        .controls(false)
58        .clip(true)
59        .objectFit(ImageFit.Cover)
60        .onFinish(() => {
61          if (this.onVideoFinished) {
62            if (!this.onVideoFinished()) {
63              this.videoController.start();
64            }
65          }
66        })
67        .onPrepared(() => {
68          this.onChange(); // when video Prepared.
69        })
70      Image($r('app.media.video_bg'))
71        .objectFit(ImageFit.Cover)
72        .zIndex(this.indexImage)
73    }
74    .aspectRatio(DeviceUtils.getDeviceType() == 'tablet' ? this.aspectRatioHorizontal : this.aspectRatioVertical)
75    .constraintSize(constraintSize)
76    .clip(true)
77    .borderRadius($r('app.float.card_border_radius'))
78    .width(constraintSize?.maxWidth ? '100%' : '67%')
79  }
80
81  build() {
82    if (DeviceUtils.getDeviceType() == 'tablet') {
83      this.showLogoMedia({ minWidth: $r('app.float.home_card_min_width')})
84    } else {
85      this.showLogoMedia({ minWidth: $r('app.float.home_card_min_width'), maxWidth: $r('app.float.home_card_max_width')})
86    }
87  }
88}
89