• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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 */
15import router from '@ohos.router'
16import mediaQuery from '@ohos.mediaquery';
17import { VideoPage } from "./VideoPage"
18import { SmallVideo } from "./SmallVideo"
19import { MyDataSource } from '../model/LiveDataModel'
20
21@Entry
22@Component
23export struct MainPage {
24  private arrScroll: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
25  private arrSwiper: number[] = [0, 1, 2, 3]
26  @State isHidden: boolean = false
27  @State @Watch("onScrollUpdated") scrollSum: number = 0
28  @State isState: boolean = true
29  @State isCancel: boolean = true
30  @State activeVideo: number = 0
31  @State openFirst: boolean = false
32  @Provide('playTime') playNum: number = 20
33  @State isPhone: boolean = false
34  portraitFunc = null
35  listenerIsPhone = mediaQuery.matchMediaSync('(orientation:landscape)');
36
37  onPortrait(mediaQueryResult) {
38    this.isPhone = !mediaQueryResult.matches
39  }
40
41  async aboutToAppear() {
42    this.portraitFunc = this.onPortrait.bind(this) // bind current js instance
43    this.listenerIsPhone.on('change', this.portraitFunc)
44  }
45
46  onScrollUpdated(): void { // 监听Scroll下滑距离
47    if (this.isCancel) { // 判断视频右上角的X，如果点过，不再出现小窗口
48      this.isDistance(this.scrollSum)
49    }
50  }
51
52  isDistance(scrollUpdated) {
53    if (this.activeVideo === 0) { // 判断是否是swiper第一页
54      if (this.openFirst) { // 判断主视频是否开始播放，如果没开始播放，则不出现小窗口
55        if (scrollUpdated > 500) { // 判断下滑距离
56          if (this.isState) { // 控制小窗口不再重复刷新
57            this.isHidden = true
58            this.isState = false
59          }
60        } else { // 符合开启情况下，回到500以内可以再次触发
61          this.isHidden = false
62          this.isState = true
63        }
64      }
65    }
66  }
67
68  build() {
69    Column() {
70      Stack() {
71        Scroll() {
72          Column() {
73            Swiper() {
74              VideoPage({ isStart: $openFirst })
75              // 模拟Swiper数据
76              LazyForEach(new MyDataSource(this.arrSwiper), (item) => {
77                Text(item.toString())
78                  .width('100%')
79                  .aspectRatio(1.12)
80                  .backgroundColor(0xAFEEEE)
81                  .textAlign(TextAlign.Center)
82                  .fontSize(20)
83              }, item => item)
84            }
85            .width('100%')
86            .aspectRatio(this.isPhone ? 1.12 : 3.5)
87            .backgroundColor('#ffffff')
88            .height(250)
89            .indicator(false)
90            .onChange((index: number) => {
91              this.activeVideo = index
92            })
93            // 模拟scroll数据
94            LazyForEach(new MyDataSource(this.arrScroll), (item) => {
95              Text(item.toString())
96                .width('90%')
97                .height(150)
98                .backgroundColor(0xFFFFFF)
99                .borderRadius(15)
100                .fontSize(16)
101                .textAlign(TextAlign.Center)
102                .margin({ top: 10 })
103            }, item => item)
104          }
105          .width('100%')
106          .backgroundColor('#F1F3F5')
107        }
108        .scrollBar(BarState.Off)
109        .scrollable(ScrollDirection.Vertical)
110        .scrollBarColor(Color.Gray)
111        .scrollBarWidth(30)
112        .onScroll((xOffset: number, yOffset: number) => {
113          this.scrollSum += yOffset
114        })
115
116        // 视频小窗口
117        Column() {
118          SmallVideo({ isHidden: $isHidden, isCancel: $isCancel })
119        }
120        .position({ x: '64%', y: '42%' })
121
122        // 直播按键
123        Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
124          Image($r('app.media.broadcast'))
125            .objectFit(ImageFit.Contain)
126            .width('24')
127            .height('24')
128            .margin({ top: 10 })
129          Text($r("app.string.in_live"))
130            .fontSize(10)
131            .fontColor('#000000')
132            .margin({ top: 5 })
133        }
134        .width(58)
135        .height(58)
136        .backgroundColor('#FFFFFF')
137        .border({ color: 'rgba(0,0,0,0.2)' })
138        .borderRadius(16)
139        .borderWidth(1.3)
140        .key('directVideo')
141        .onClick(() => {
142          router.push({ url: 'pages/LivePage' })
143        })
144        .position({ x: '86%', y: '20%' })
145      }.width('100%').height('100%').backgroundColor(0xDCDCDC)
146
147    }
148  }
149}
150