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 { Log } from '../../utils/Log' 17import { OhCombinedState } from '../../redux/store' 18import { getStore } from '../../redux/store' 19import { Action } from '../../redux/actions/Action' 20import { Dispatch } from '../../redux/core/redux/types/store' 21 22class StateStruct { 23 mode:string = ''; 24} 25 26class BigTextDispatcher { 27 private mDispatch: Dispatch = (data) => data; 28 29 public setDispatch(dispatch: Dispatch) { 30 this.mDispatch = dispatch; 31 } 32 33 public updateShowBigTextFlag(flag: boolean): void { 34 this.mDispatch(Action.updateShowBigTextFlag(flag)); 35 } 36 37 public updateUiState(state: boolean): void { 38 this.mDispatch(Action.uiState(state)); 39 } 40} 41 42@Component 43export struct BigText { 44 private TAG: string = '[BigText]:' 45 private modeResource: Record<string, Resource> = { 46 'MULTI': $r('app.string.multi_mode'), 47 'PHOTO': $r('app.string.photo_mode'), 48 'VIDEO': $r('app.string.video_mode') 49 } 50 @State state: StateStruct = new StateStruct() 51 @State bigTextOpacity: number = 0 52 private mAction: BigTextDispatcher = new BigTextDispatcher(); 53 54 public aboutToAppear() { 55 Log.info(`${this.TAG} aboutToAppear E`) 56 getStore().subscribe((state: OhCombinedState) => { 57 this.state = { 58 mode: state.ModeReducer.mode 59 }; 60 }, (dispatch: Dispatch) => { 61 this.mAction.setDispatch(dispatch); 62 }); 63 Log.info(`${this.TAG} aboutToAppear X`) 64 } 65 66 public aboutToDisappear(): void { 67 } 68 69 build() { 70 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 71 Text(this.modeResource[this.state.mode]) 72 .fontSize(60) 73 .fontColor(Color.White) 74 .fontWeight(300) 75 .textAlign(TextAlign.Center) 76 .width('100%') 77 .opacity(this.bigTextOpacity) 78 .onAppear(() => { 79 animateTo({ duration: 150, 80 curve: Curve.Sharp, 81 delay: 0, 82 onFinish: () => { 83 animateTo({ duration: 150, 84 curve: Curve.Sharp, 85 delay: 1000, 86 onFinish: () => { 87 this.mAction.updateShowBigTextFlag(false) 88 this.mAction.updateUiState(true) 89 } 90 }, () => { 91 this.bigTextOpacity = 0 92 }) 93 } 94 }, () => { 95 this.bigTextOpacity = 1 96 }) 97 }) 98 } 99 .width('100%') 100 .height('96vp') 101 } 102}