featurecommon/customdialog/MultiCameraDialog.ets

/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { CameraService } from '../../camera/CameraService'
import { CameraId } from '../../setting/settingitem/CameraId'
import { Log } from '../../utils/Log'
import EntryComponentForMulti from './EntryComponentForMulti'
import { OhCombinedState } from '../../redux/store'
import { getStore } from '../../redux/store'
import { Action } from '../../redux/actions/Action'
import { Dispatch } from '../../redux/core/redux/types/store'

let storageCameraId: string = AppStorage.Link('storageCameraId') as string;

class StateStruct {
}

class MultiCameraDispatcher {
  private mDispatch: Dispatch = (data) => data;

  public setDispatch(dispatch: Dispatch) {
    this.mDispatch = dispatch;
  }

  public changeCameraPosition(cameraPosition: string): void {
    this.mDispatch(Action.uiState(false));
    this.mDispatch(Action.switchCamera(cameraPosition));
    this.mDispatch(Action.resetZoomRatio(1));
  }
}


@CustomDialog
export default struct MultiCameraDialog {
  private TAG: string = '[MultiCameraDialog]:';
  private cameraService = CameraService.getInstance();
  controller?: CustomDialogController;
  cancel: () => void = () => {};
  confirm: () => void = () => {};
  private localList: string[] = [
  CameraId.FRONT,
  CameraId.BACK
  ];
  @State private moreList: string[] = [];
  @State state: StateStruct = new StateStruct();
  @State isShowMore: boolean = false;
  @State gridColumns: number = 12;
  @State useSizeTypeOffset: number = 4;
  @Link deviceType: string;
  @StorageLink('storageCameraId') storageCameraId: string = '';
  private mAction: MultiCameraDispatcher = new MultiCameraDispatcher();

  aboutToAppear() {
    Log.info(`${this.TAG} aboutToAppear.`)
    getStore().subscribe((state: OhCombinedState) => {
      this.state = {
      };
    }, (dispatch: Dispatch) => {
      this.mAction.setDispatch(dispatch);
    });

    let localCameraInfo = this.cameraService.getLocalCameraMap()
    if (!localCameraInfo.get('front')) {
      this.localList.shift()
    } else if (!localCameraInfo.get('back')) {
      this.localList.pop()
    }
    if (this.deviceType === 'phone' || this .deviceType === 'default') {
      this.gridColumns = 4
      this.useSizeTypeOffset = 0
    } else {
      this.gridColumns = 12
      this.useSizeTypeOffset = 4
    }
  }

  private onChange(item: string): void {
    Log.info(`${this.TAG} MultiCameraPosition ${JSON.stringify(item)}`)
    if (item.includes('BACK')) {
      this.storageCameraId = 'BACK'
    } else if(item.includes('FRONT')) {
      this.storageCameraId = 'FRONT'
    }
    this.mAction.changeCameraPosition(item);
    this.cancel();
    if (this.controller) {
      this.controller.close();
    }
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      GridContainer({ columns: this.gridColumns, gutter: 12, margin: 12 }) {
        Column() {
          Row() {
            Text($r('app.string.select_camera'))
              .fontSize($r("sys.float.ohos_id_text_size_dialog_tittle"))
              .fontColor('#E6000000')
              .opacity(0.9)
              .fontWeight(FontWeight.Medium)
              .opacity($r("sys.float.ohos_id_alpha_content_primary"))
          }
          .width('100%')
          .height('56vp')

          Row() {
            Text($r('app.string.local_device'))
              .fontSize($r("sys.float.ohos_id_text_size_body2"))
              .fontColor("#99182431")
              .fontWeight(FontWeight.Medium)
          }
          .width('100%')
          .height('48vp')
          .padding({top: 20, bottom: 8})

          List() {
            ForEach(this.localList, (item: string) => {
              ListItem() {
                EntryComponentForMulti({
                  item: item,
                  localList: this.localList.toString(),
                  onChange: (data:string) => this.onChange(data)
                })
              }
              .width('100%')
              .height(48)
            })
          }
          .listDirection(Axis.Vertical)
          .divider({ strokeWidth: '1vp', color: "#33182431", startMargin: 0, endMargin: 12})

          Row() {
            Text($r('app.string.more_devices'))
              .fontSize($r("sys.float.ohos_id_text_size_body2"))
              .fontColor("#99182431")
              .fontWeight(FontWeight.Medium)
          }
          .width('100%')
          .height('48vp')
          .padding({top: 20, bottom: 8})

          if (this.isShowMore) {
            List() {
              ForEach(this.moreList, (item: string) => {
                ListItem() {
                  EntryComponentForMulti({
                    item: item,
                    localList: this.localList.toString(),
                    onChange: (data: string) => this.onChange(data)
                  })
                }
                .width('100%')
                .height(48)
              })
            }
            .listDirection(Axis.Vertical)
            .divider({ strokeWidth: 0.5, color: '#33000000', startMargin: 0, endMargin: 12 })
          }

          Column() {
            Button({ type: ButtonType.Capsule, stateEffect: true }) {
              Text($r('app.string.cancel'))
                .fontSize($r("sys.float.ohos_id_text_size_sub_title2"))
                .fontColor('#1095E8')
                .fontWeight(FontWeight.Medium)
                .height('100%')
                .height('100%')
            }
            .width('100%')
            .height('100%')
            .backgroundColor('#00ffffff')
            .onClick(() => {
              if (this.controller) {
                this.controller.close();
              }
            })
          }
          .height(56)
          .width('100%')
          .margin({ top: 8 }).padding({ bottom: 16 })
        }
        .width('100%')
        .backgroundColor(Color.White)
        .padding({ left: 24, right: 24 })
        .borderRadius($r("sys.float.ohos_id_corner_radius_default_xl"))
        .useSizeType({
          xs: { span: 4, offset: this.useSizeTypeOffset },
          sm: { span: 4, offset: this.useSizeTypeOffset },
          md: { span: 4, offset: this.useSizeTypeOffset },
          lg: { span: 4, offset: this.useSizeTypeOffset }
        })
      }.width('100%')
    }
  }
}