• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-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 {
17  Action,
18  ActionBarColorMode,
19  ActionBarMode,
20  ActionBarProp,
21  BrowserConstants,
22  Constants,
23  Log,
24  ScreenManager
25} from '@ohos/common';
26import { ActionBar } from '@ohos/common/CommonComponents';
27import Curves from '@ohos.curves';
28
29const TAG: string = 'browser_PhotoBrowserActionBar';
30
31@Component
32export struct PhotoBrowserActionBar {
33  @Consume @Watch('onShowChanged') isShowBar: boolean;
34  @State opacityValue: number = 1;
35  @State isVisibility: boolean = true;
36  @State currentBackgroundColor: Resource = ActionBarProp.NORMAL_BACKGROUND_COLOR;
37  @StorageLink('isSplitMode') isSplitMode: boolean = ScreenManager.getInstance().isSplitMode();
38  @StorageLink('leftBlank') leftBlank: number[]
39    = [0, ScreenManager.getInstance().getStatusBarHeight(), 0, ScreenManager.getInstance().getNaviBarHeight()];
40  onMenuClicked: Function = (): void => {};
41  isVideoPage: boolean = false;
42  @StorageLink('isHorizontal') isHorizontal: boolean
43    = ScreenManager.getInstance().isHorizontal();
44  @State actionBarProp: ActionBarProp = new ActionBarProp();
45  @Consume @Watch('updateActionBarProp') menuList: Action[];
46  @StorageLink('statusBarHeight') statusBarHeight: number = 0;
47
48  updateActionBarProp(): void {
49    this.actionBarProp = this.createActionBar();
50  }
51
52  aboutToAppear(): void {
53    this.actionBarProp = this.createActionBar();
54  }
55
56  onShowChanged(): void {
57    if (this.isShowBar) {
58      this.isVisibility = this.isShowBar;
59    }
60
61    animateTo({
62      duration: BrowserConstants.IMMERSE_ANIM_DURATION,
63      delay: this.isShowBar ? BrowserConstants.IMMERSE_ANIM_DELAY : 0,
64      curve: this.isShowBar ? Curves.cubicBezier(0.6, 0.0, 0.6, 1.0) : Curves.cubicBezier(0.2, 0.0, 0.2, 1.0),
65      onFinish: () => {
66        if (!this.isShowBar) {
67          this.isVisibility = this.isShowBar;
68        }
69      }
70    }, () => {
71      if (this.isShowBar) {
72        this.opacityValue = 1;
73      } else {
74        this.opacityValue = 0;
75      }
76    })
77  }
78
79  build() {
80    if (this.isVideoPage) {
81      Stack() {
82        if (this.isVideoPage) {
83          Image($r('app.media.play_video_title_bar_mask'))
84            .height($r('app.float.photo_browser_action_bar_cover_height'))
85            .width('100%')
86        }
87        ActionBar({
88          actionBarProp: $actionBarProp,
89          onMenuClicked: this.onMenuClicked,
90          isVideoPage: this.isVideoPage,
91          isNeedPlaceholder: false
92        })
93      }
94      .markAnchor({ x: Constants.PERCENT_0, y: Constants.PERCENT_0 })
95      .position({ x: Constants.PERCENT_0, y: Constants.PERCENT_0 })
96      .padding({
97        top: this.isHorizontal ? Constants.NUMBER_0 : px2vp(this.statusBarHeight)
98      })
99      .visibility(this.isShowBar ? Visibility.Visible : Visibility.Hidden)
100      .sharedTransition('PhotoBrowserActionBar', {
101        zIndex: 1,
102        type: SharedTransitionEffectType.Static,
103        duration: BrowserConstants.SHARE_TRANSITION_DURATION, //  大图进出时间
104        curve: BrowserConstants.PHOTO_TRANSITION_CURVE // 大图进出阻尼曲线参数
105      })
106    } else {
107      Stack() {
108        ActionBar({
109          actionBarProp: $actionBarProp,
110          onMenuClicked: this.onMenuClicked,
111          isVideoPage: this.isVideoPage,
112          isNeedPlaceholder: false,
113          isFromPhotoBrowser: true
114        })
115      }
116      .markAnchor({ x: Constants.PERCENT_0, y: Constants.PERCENT_0 })
117      .position({ x: Constants.PERCENT_0, y: Constants.PERCENT_0 })
118      .padding({
119        top: this.isHorizontal ? Constants.NUMBER_0 : px2vp(this.statusBarHeight)
120      })
121      .visibility(this.isVisibility ? Visibility.Visible : Visibility.Hidden)
122      .opacity(this.opacityValue)
123      .backgroundColor(this.currentBackgroundColor)
124      .sharedTransition('PhotoBrowserActionBar', {
125        zIndex: 1,
126        type: SharedTransitionEffectType.Static,
127        duration: BrowserConstants.SHARE_TRANSITION_DURATION, //  大图进出时间
128        curve: BrowserConstants.PHOTO_TRANSITION_CURVE // 大图进出阻尼曲线参数
129      })
130    }
131  }
132
133  private createActionBar(): ActionBarProp {
134    let actionBarProp: ActionBarProp = new ActionBarProp();
135    actionBarProp
136      .setHasTabBar(false)
137      .setLeftAction(Action.BACK)
138      .setAlpha(ActionBarProp.PHOTO_BROWSER_ACTIONBAR_ALPHA)
139      .setMode(ActionBarMode.TOP_MODE)
140      .setColorMode(this.isVideoPage ? ActionBarColorMode.TRANSPARENT : ActionBarColorMode.NORMAL)
141      .setMenuList(this.menuList);
142    return actionBarProp;
143  }
144}