• 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 */
15
16import display from '@ohos.display';
17
18import { Log } from '../../../../../../common/src/main/ets/default/utils/Log'
19import getStore, { OhCombinedState } from '../../../../../../common/src/main/ets/default/redux/store'
20import { Action } from '../../../../../../common/src/main/ets/default/redux/actions/Action'
21import { EventBus } from '../../../../../../common/src/main/ets/default/worker/eventbus/EventBus'
22import EventBusManager from '../../../../../../common/src/main/ets/default/worker/eventbus/EventBusManager'
23
24let localState = (state: OhCombinedState) => {
25  return {
26    recordingTime: state.RecordReducer.recordingTime,
27    recordingTimeDisplay: state.RecordReducer.recordingTimeDisplay,
28    isRecordingPaused: state.RecordReducer.isRecordingPaused,
29    isRecordingSpotVisible: state.RecordReducer.isRecordingSpotVisible,
30  }
31}
32
33let localDispatcher = (dispatch) => {
34  return {
35    updateSpotVisible: (visible: boolean) => {
36      dispatch(Action.updateRecordingSpotVisible(visible))
37    },
38    updateRecordingTime: (recordingTime: number) => {
39      dispatch(Action.updateRecordingTime(recordingTime))
40    },
41    updateRecordingTimeDisplay: (timeDisplay: string) => {
42      dispatch(Action.updateRecordingTimeDisplay(timeDisplay))
43    }
44  }
45}
46
47@Component
48export struct SmallVideoTimer {
49  private TAG: string = '[SmallVideoTimer]'
50  private timer: number = 0
51  private timerTick: number = 0
52  private appEventBus: EventBus = EventBusManager.getInstance().getEventBus()
53  @State state: any = {}
54
55  private async onRecordPausedSmall(data) {
56    Log.info(`${this.TAG} onRecordPaused timer id: ${this.timer} E`)
57    clearInterval(this.timer)
58    Log.info(`${this.TAG} onRecordPaused X`)
59  }
60
61  private async onRecordResumedSmall(data) {
62    Log.info(`${this.TAG} onRecordResumed E`)
63    this.setIntervalTimer()
64    Log.info(`${this.TAG} onRecordResumed timer id: ${this.timer} X`)
65  }
66
67  aboutToAppear(): void {
68    Log.info(`${this.TAG} aboutToAppear E`)
69    getStore().connect(localState, localDispatcher)(this.state)
70    this.setIntervalTimer()
71    this.appEventBus.on(Action.ACTION_RECORD_PAUSE, this.onRecordPausedSmall.bind(this))
72    this.appEventBus.on(Action.ACTION_RECORD_RESUME, this.onRecordResumedSmall.bind(this))
73    Log.info(`${this.TAG} aboutToAppear X`)
74  }
75
76  aboutToDisappear(): void {
77    Log.info(`${this.TAG} aboutToDisappear E`)
78    this.appEventBus.off(Action.ACTION_RECORD_PAUSE, this.onRecordPausedSmall.bind(this))
79    this.appEventBus.off(Action.ACTION_RECORD_RESUME, this.onRecordResumedSmall.bind(this))
80    clearInterval(this.timer)
81    Log.info(`${this.TAG} aboutToDisappear X`)
82  }
83
84  private setIntervalTimer() {
85    clearInterval(this.timer)
86    this.timer = setInterval(() => {
87      this.timerTick++
88      if (this.timerTick % 2 === 0) {
89        this.state.updateRecordingTime(this.state.recordingTime + 1)
90        let shownSec = '00'
91        let shownMin = '00'
92        let sec = this.state.recordingTime % 60
93        if (sec < 10) {
94          shownSec = `0${sec}`
95        } else {
96          shownSec = `${sec}`
97        }
98        let minute = Math.floor(this.state.recordingTime / 60)
99        if (minute < 10) {
100          shownMin = `0${minute}`
101        } else {
102          shownMin = `${minute}`
103        }
104        this.state.updateRecordingTimeDisplay(`${shownMin}:${shownSec}`)
105      }
106      this.state.updateSpotVisible(!this.state.isRecordingSpotVisible)
107    }, 500)
108  }
109
110  build() {
111    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
112      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
113        if (this.state.isRecordingPaused) {
114          Image($r('app.media.ic_video_recording')).width(12).height(12).fillColor(Color.White)
115        } else {
116          if (this.state.isRecordingSpotVisible) {
117            Column() {
118            }.width(12).height(12).backgroundColor('#FF0000').borderRadius(6).visibility(Visibility.Visible)
119          } else {
120            Column() {
121            }.width(12).height(12).backgroundColor('#FF0000').borderRadius(6).visibility(Visibility.Hidden)
122          }
123        }
124        Text(`${this.state.recordingTimeDisplay.split(':')[0]}`).margin({ left: 8 }).fontSize('28fp').fontWeight(300).fontColor('#FFFFFF')
125        //TODO 需要确认UX样式
126//        Text(this.showMinute).margin({ left: 8 }).fontSize('28fp').fontWeight(300).fontColor('#FFFFFF')
127      }.layoutWeight(1)
128      Text(":").fontSize('28fp').fontWeight(300).fontColor('#FFFFFF')
129      Text(`${this.state.recordingTimeDisplay.split(':')[1]}`).fontSize('28fp').fontWeight(300).fontColor('#FFFFFF').textAlign(TextAlign.Start).align(Alignment.Start).layoutWeight(1)
130//      Text(this.showSecond).fontSize('28fp').fontWeight(300).fontColor('#FFFFFF').textAlign(TextAlign.Start).layoutWeight(1)
131    }.width('100%').height(48)
132  }
133}