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 { Action } from '../../redux/actions/Action' 17import { CameraSwitchController } from './CameraSwitchController' 18import getStore from '../../redux/store' 19import { Log } from '../../utils/Log' 20import MultiCameraDialog from '../customdialog/MultiCameraDialog' 21import deviceInfo from '@ohos.deviceInfo' 22 23let localState = (state) => { 24 return { 25 mode: state.ModeReducer.mode, 26 uiEnable: state.ContextReducer.uiEnable, 27 cameraPosition: state.CameraReducer.cameraPosition, 28 videoState: state.RecordReducer.videoState, 29 } 30} 31 32let localDispatcher = (dispatch) => { 33 return { 34 changeCameraPosition: (cameraPosition: string) => { 35 dispatch(Action.uiState(false)) 36 dispatch(Action.switchCamera(cameraPosition)) 37 dispatch(Action.resetZoomRatio(1)) 38 }, 39 } 40} 41 42let storageCameraId = AppStorage.Link('storageCameraId') 43 44@Component 45export struct CameraSwitchButton { 46 private TAG: string = '[CameraSwitchButton]:' 47 @State state: any = {} 48 @State deviceType: string = deviceInfo.deviceType 49 @StorageLink('storageCameraId') storageCameraId: string = '' 50 51 icon: Resource = $r('app.media.small_switch_camera') 52 mWidth: number 53 mHeight: number 54 mMargin: number 55 type: ButtonType 56 stateEffect: boolean 57 cameraSwitchController: CameraSwitchController = new CameraSwitchController() 58 multiDialogController: CustomDialogController = new CustomDialogController({ 59 builder: MultiCameraDialog({ 60 cancel: this.existView.bind(this), 61 deviceType: $deviceType 62 }), 63 autoCancel: true, 64 alignment:DialogAlignment.Center, 65 customStyle: true, 66 cancel: this.existView 67 }) 68 69 aboutToAppear() { 70 Log.info(`${this.TAG} aboutToAppear E`) 71 getStore().connect(localState, localDispatcher)(this.state) 72 this.cameraSwitchController.getParam() 73 this.icon = this.cameraSwitchController.icon 74 this.mWidth = this.cameraSwitchController.width 75 this.mHeight = this.cameraSwitchController.height 76 this.mMargin = this.cameraSwitchController.margin 77 this.type = this.cameraSwitchController.type 78 this.stateEffect = this.cameraSwitchController.stateEffect 79 Log.info(`${this.TAG} aboutToAppear X`) 80 } 81 82 private openMultiDialog() { 83 Log.info(`${this.TAG} openMultiDialog E`) 84 this.multiDialogController.open() 85 Log.info(`${this.TAG} openMultiDialog X`) 86 } 87 88 private existView() {} 89 90 build() { 91 Column() { 92 Stack() { 93 Image($r('app.media.small_switch_camera')) 94 .width('67.5%').aspectRatio(1) 95 .clip(new Circle({ width: '100%', height: '100%' })) 96 Column() {}.width(44).height(44) 97 .border({ width: 1, color: Color.White, radius: 22, style: BorderStyle.Solid }) 98 } 99 .width('100%').height('100%').enabled(this.state.uiEnable) 100 .onClick(() => { 101 Log.info(`${this.TAG} onClick invoke E`) 102 Log.info(`${this.TAG} this.state.videoState: ${this.state.videoState}, this.state.mode: ${this.state.mode}`) 103 Log.info(`${this.TAG} this.state.cameraPosition: ${this.state.cameraPosition}`) 104 if (this.state.videoState === 'beforeTakeVideo') { 105 if (this.state.mode === 'MULTI') { 106 this.openMultiDialog() 107 } else { 108 globalThis.switchCameraTime = new Date().getTime() 109 if (this.state.cameraPosition !== 'BACK') { 110 this.state.changeCameraPosition('BACK') 111 this.storageCameraId = 'BACK' 112 } else { 113 this.state.changeCameraPosition('FRONT') 114 this.storageCameraId = 'FRONT' 115 } 116 } 117 } 118 Log.info(`${this.TAG} onClick invoke X`) 119 }) 120 }.width(44).aspectRatio(1) 121 } 122}