• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2021-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 Log from '../../../../../../../../common/src/main/ets/default/Log'
17import AbilityManager from '../../../../../../../../common/src/main/ets/default/abilitymanager/abilityManager'
18import StyleConfiguration, { VolumePanelComponentStyle } from '../common/StyleConfiguration'
19import Constants from '../common/Constants'
20import ViewModel from '../viewmodel/VolumePanelVM'
21import VolumeWindowController from '../common/VolumeWindowController'
22
23const TAG = 'VolumePanel-VolumePanelComponent'
24
25@Component
26export default struct VolumePanelComponent {
27  @StorageLink('VolumePanelMaxVolume') VolumePanelMaxVolume: number = Constants.DEFAULT_MAX_VOLUME
28  @StorageLink('VolumePanelMinVolume') VolumePanelMinVolume: number = Constants.DEFAULT_MIN_VOLUME
29  @StorageLink('VolumePanelVolumeValue') VolumePanelVolumeValue: number = Constants.DEFAULT_MIN_VOLUME
30  @StorageLink('VolumePanelIsMute') VolumePanelIsMute: boolean = Constants.DEFAULT_MUTE_STATUS
31  @State style: VolumePanelComponentStyle = StyleConfiguration.getVolumePanelComponentStyle()
32
33  aboutToAppear() {
34    Log.showInfo(TAG, 'aboutToAppear');
35    ViewModel.initViewModel()
36  }
37
38  aboutToDisappear() {
39    Log.showInfo(TAG, 'aboutToDisappear');
40  }
41
42  build() {
43    Column() {
44      Slider({
45        value: this.VolumePanelVolumeValue,
46        min: this.VolumePanelMinVolume,
47        max: this.VolumePanelMaxVolume,
48        step: 1,
49        style: SliderStyle.OutSet,
50        direction: Axis.Vertical,
51        reverse: true
52      })
53        .margin({top: this.style.volumePanelSliderMarginTop, bottom: this.style.volumePanelSliderMarginBottom})
54        .trackThickness(this.style.volumePanSliderWidth)
55        .blockColor(this.style.volumePanelSliderBlockColor)
56        .trackColor($r('sys.color.ohos_id_color_component_normal'))
57        .selectedColor(this.style.volumeSelectedColor)
58        .onChange(this.onVolumeChange.bind(this))
59        .flexGrow(1)
60        .flexShrink(1)
61
62      Button({ type: ButtonType.Normal, stateEffect: true }) {
63        Image(this.getVolumeIcon(this.VolumePanelIsMute, this.VolumePanelVolumeValue, this.VolumePanelMaxVolume, this.VolumePanelMinVolume))
64          .width(this.style.volumePanelMutBtnIconSize)
65          .height(this.style.volumePanelMutBtnIconSize)
66          .margin({bottom: this.style.volumePanelMutBtnIconMarginBottom})
67          .fillColor($r('sys.color.ohos_id_color_activated'))
68      }
69      .width('100%')
70      .height(this.style.volumePanelMuteBtnHeight)
71      .backgroundColor(this.style.volumeButtonBackgroundColor)
72      .onClick(this.onMuteBtnClick.bind(this))
73
74      Divider()
75        .width(this.style.volumeDividerWidth)
76        .height(this.style.volumePanelDividerHeight)
77        .vertical(false)
78        .strokeWidth(this.style.volumePanelDividerHeight)
79        .color($r('sys.color.ohos_id_color_fourth'))
80        .lineCap(LineCapStyle.Square)
81
82      Button({ type: ButtonType.Circle, stateEffect: true }) {
83        Image($r('app.media.ic_public_settings'))
84          .width(this.style.volumePanelSettingIconSize)
85          .height(this.style.volumePanelSettingIconSize)
86          .margin({top: this.style.volumePanelMutBtnIconMarginBottom, bottom: this.style.volumePanelMutBtnIconMarginBottom})
87          .fillColor(this.style.volumePanelSettingColor)
88      }
89      .width('100%')
90      .height(this.style.volumePanelSettingButtonSize)
91      .backgroundColor(this.style.volumeButtonBackgroundColor)
92      .onClick(this.onSettingsBtnClick.bind(this))
93    }
94    .width('100%')
95    .height('100%')
96    .borderRadius(this.style.volumePanelBorderRadius)
97    .backgroundColor(this.style.volumePanelBackground)
98  }
99
100  getVolumeIcon(isMute, volume, maxVolume, minVolume) {
101    Log.showInfo(TAG, `getVolumeIcon, isMute: ${isMute} volume: ${volume} maxVolume: ${maxVolume} minVolume: ${minVolume}`);
102    let icon
103    if (isMute) {
104      icon = $r('app.media.ic_public_mute')
105    } else {
106      if (volume >= (((maxVolume - minVolume) / 3) * 2 + minVolume)) {
107        icon = $r('app.media.ic_public_sound_03')
108      } else if (volume >= ((maxVolume - minVolume) / 3 + minVolume)) {
109        icon = $r('app.media.ic_public_sound_02')
110      } else if (volume == minVolume) {
111        icon = $r('app.media.ic_public_sound_04')
112      } else {
113        icon = $r('app.media.ic_public_sound_01')
114      }
115    }
116    return icon
117  }
118
119  onVolumeChange(value: number, mode: SliderChangeMode) {
120    Log.showInfo(TAG, `onVolumeChange, value: ${value} mode: ${mode}`);
121    ViewModel.setVolume(value)
122  }
123
124  onMuteBtnClick(event: ClickEvent) {
125    Log.showInfo(TAG, `onMuteBtnClick`);
126    ViewModel.mute();
127  }
128
129  onSettingsBtnClick(event: ClickEvent) {
130    Log.showInfo(TAG, `onSettingsBtnClick`);
131    AbilityManager.startAbility(AbilityManager.getContext(AbilityManager.ABILITY_NAME_VOLUME_PANEL), {
132      bundleName: 'com.ohos.settings',
133      abilityName: 'com.ohos.settings.MainAbility',
134    });
135    VolumeWindowController.getInstance().setWindowState(false);
136  }
137}