Skip to content

Commit 60aa351

Browse files
nodefulnodeful
committed
finished with optional knobs
1 parent d0d964f commit 60aa351

11 files changed

Lines changed: 86 additions & 31 deletions

File tree

‎ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<eqm-loading *ngIf="!selectedPreset || !presets"></eqm-loading>
22
<div *ngIf="selectedPreset && presets" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="10px">
3-
<div class="basic-level" fxFill fxLayout="row" fxLayoutAlign="space-around center">
3+
<!-- Knobs -->
4+
<div *ngIf="!uiSettings.replaceKnobsWithSliders" class="basic-level-knobs" fxFill fxLayout="row" fxLayoutAlign="space-around center">
45
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
56
<eqm-label>BASS</eqm-label>
67
<eqm-knob #bassKnob size="large" [disabled]="!enabled" [min]="-24" [max]="24" [(value)]="gains.bass"
@@ -27,4 +28,42 @@
2728
<eqm-value-screen [disabled]="!enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
2829
</div>
2930
</div>
30-
</div>
31+
32+
<!-- Sliders -->
33+
<div *ngIf="uiSettings.replaceKnobsWithSliders" class="basic-level-sliders" fxFill fxLayoutGap="15px" fxLayout="column" fxLayoutAlign="space-around center">
34+
<div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
35+
<eqm-label fxFlex="52px">BASS</eqm-label>
36+
<div fxFlex="70%">
37+
<eqm-flat-slider [enabled]="enabled"
38+
[min]="-24" [max]="24"
39+
[(value)]="gains.bass" (userChangedValue)="setGain('bass', $event)"
40+
[doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps"
41+
[stickToMiddle]="true" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
42+
</div>
43+
<eqm-value-screen fxFlex="52px" [disabled]="!enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
44+
45+
</div>
46+
<div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
47+
<eqm-label fxFlex="52px">MID</eqm-label>
48+
<div fxFlex="70%">
49+
<eqm-flat-slider [enabled]="enabled"
50+
[min]="-24" [max]="24"
51+
[(value)]="gains.mid" (userChangedValue)="setGain('mid', $event)"
52+
[doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps"
53+
[stickToMiddle]="true" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
54+
</div>
55+
<eqm-value-screen fxFlex="52px" [disabled]="!enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
56+
</div>
57+
<div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
58+
<eqm-label fxFlex="52px">TREBLE</eqm-label>
59+
<div fxFlex="70%">
60+
<eqm-flat-slider [enabled]="enabled"
61+
[min]="-24" [max]="24"
62+
[(value)]="gains.treble" (userChangedValue)="setGain('treble', $event)"
63+
[doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps"
64+
[stickToMiddle]="true" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
65+
</div>
66+
<eqm-value-screen fxFlex="52px" [disabled]="!enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
67+
</div>
68+
</div>
69+
</div>

‎ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@
22
display: block;
33
}
44

5-
.basic-level {
5+
.basic-level-knobs {
66
padding-bottom: 10px;
77
eqm-value-screen {
88
margin-top: -10px;
99
}
10+
}
11+
12+
13+
.basic-level-sliders {
14+
margin: 10px;
1015
}

‎ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { EqualizerComponent } from '../equalizer.component'
55
import { KnobValueChangedEvent } from '../../../../modules/eqmac-components/components/knob/knob.component'
66
import { TransitionService } from '../../../../services/transitions.service'
77
import { ApplicationService } from '../../../../services/app.service'
8+
import { WebUISettings, UIService } from '../../../../services/ui.service'
89

910
@Component({
1011
selector: 'eqm-basic-equalizer',
@@ -20,6 +21,8 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
2021
treble: 0
2122
}
2223

24+
uiSettings: WebUISettings
25+
2326
private _presets: BasicEqualizerPreset[]
2427
@Output() presetsChange = new EventEmitter<BasicEqualizerPreset[]>()
2528
set presets (newPresets: BasicEqualizerPreset[]) {
@@ -41,14 +44,15 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
4144
constructor (
4245
private service: BasicEqualizerService,
4346
private app: ApplicationService,
44-
private bridge: BridgeService,
47+
private ui: UIService,
4548
private change: ChangeDetectorRef,
4649
private transition: TransitionService
4750
) {
4851
super()
4952
}
5053

5154
async ngOnInit () {
55+
await this.sync()
5256
this.setupEvents()
5357
}
5458

@@ -60,9 +64,13 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
6064
this.selectedPreset = preset
6165
this.setSelectedPresetsGains()
6266
})
67+
this.ui.settingsChanged.subscribe(uiSettings => {
68+
this.uiSettings = uiSettings
69+
})
6370
}
6471

6572
async sync () {
73+
this.uiSettings = this.ui.settings
6674
await Promise.all([
6775
this.syncPresets()
6876
])

‎ui/src/app/sections/settings/settings.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class SettingsComponent implements OnInit {
2525
type: 'checkbox',
2626
label: 'Replace Knobs with Sliders',
2727
value: false,
28-
toggled: replaceKnobsWithSliders => this.ui.setWebSettings({ replaceKnobsWithSliders })
28+
toggled: replaceKnobsWithSliders => this.ui.setSettings({ replaceKnobsWithSliders })
2929
}
3030

3131
iconModeOption: SelectOption = {
@@ -98,7 +98,7 @@ export class SettingsComponent implements OnInit {
9898
}
9999

100100
async syncUISettings () {
101-
const webUISettings = this.ui.getWebSettings()
101+
const webUISettings = this.ui.settings
102102
this.replaceKnobsWithSlidersOption.value = webUISettings.replaceKnobsWithSliders
103103
const nativeUISettings = await this.ui.getNativeSettings()
104104
this.iconModeOption.selectedId = nativeUISettings.iconMode

‎ui/src/app/sections/volume/booster-balance/balance/balance.component.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<eqm-label>Balance</eqm-label>
22

33
<!-- Knob controls -->
4-
<div *ngIf="!replaceKnobWithSlider" fxLayout="row" fxLayoutAlign="space-around start"
4+
<div *ngIf="!uiSettings.replaceKnobsWithSliders" fxLayout="row" fxLayoutAlign="space-around start"
55
[class]="'controls' + (hide ? ' hide' : '')">
66
<div fxLayout="column" fxLayoutAlign="center center">
77
<eqm-label>Left</eqm-label>
@@ -17,9 +17,8 @@
1717
</div>
1818

1919
<!-- Slider controls -->
20-
<div *ngIf="replaceKnobWithSlider" fxLayout="row" fxLayoutAlign="space-around start"
21-
[class]="'controls' + (hide ? ' hide' : '')">
22-
<div fxLayout="column" fxLayoutAlign="center center">
20+
<div *ngIf="uiSettings.replaceKnobsWithSliders" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px" class="slider-control">
21+
<div fxLayout="column" fxLayoutAlign="center center" fxFlex="52px">
2322
<eqm-label>Left</eqm-label>
2423
<eqm-value-screen>{{(balance | mapValue:0:1:100:0 | clipValue:0:100 | fixFloat:0:false)}}%</eqm-value-screen>
2524
</div>
@@ -28,7 +27,7 @@
2827
[doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps"
2928
[stickToMiddle]="true" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
3029
</div>
31-
<div fxLayout="column" fxLayoutAlign="center center">
30+
<div fxLayout="column" fxLayoutAlign="center center" fxFlex="52px">
3231
<eqm-label>Right</eqm-label>
3332
<eqm-value-screen>{{(balance | mapValue:0:-1:100:0 | clipValue:0:100 | fixFloat:0:false)}}%</eqm-value-screen>
3433
</div>

‎ui/src/app/sections/volume/booster-balance/balance/balance.component.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
@import '../volume-booster-balance.component.scss'
1+
@import '../volume-booster-balance.component.scss';
2+
3+
.slider-control {
4+
margin-bottom: 5px;
5+
margin-top: -10px;
6+
}

‎ui/src/app/sections/volume/booster-balance/balance/balance.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, OnInit, Input } from '@angular/core'
22
import { BalanceService } from './balance.service'
33
import { ApplicationService } from '../../../../services/app.service'
44
import { KnobValueChangedEvent } from '../../../../modules/eqmac-components/components/knob/knob.component'
5-
import { UIService } from '../../../../services/ui.service'
5+
import { UIService, WebUISettings } from '../../../../services/ui.service'
66

77
@Component({
88
selector: 'eqm-balance',
@@ -14,7 +14,7 @@ export class BalanceComponent implements OnInit {
1414
@Input() animationDuration = 500
1515
@Input() animationFps = 30
1616
@Input() hide = false
17-
replaceKnobWithSlider = false
17+
uiSettings: WebUISettings
1818

1919
constructor (
2020
public balanceService: BalanceService,
@@ -28,7 +28,7 @@ export class BalanceComponent implements OnInit {
2828
}
2929

3030
async sync () {
31-
this.replaceKnobWithSlider = !!this.ui.getWebSettings().replaceKnobsWithSliders
31+
this.uiSettings = this.ui.settings
3232
await Promise.all([
3333
this.getBalance()
3434
])
@@ -38,8 +38,8 @@ export class BalanceComponent implements OnInit {
3838
this.balanceService.onBalanceChanged((balance) => {
3939
this.balance = balance
4040
})
41-
this.ui.webSettingsChanged.subscribe(webUISettings => {
42-
this.replaceKnobWithSlider = !!webUISettings.replaceKnobsWithSliders
41+
this.ui.settingsChanged.subscribe(uiSettings => {
42+
this.uiSettings = uiSettings
4343
})
4444
}
4545

‎ui/src/app/sections/volume/booster-balance/booster/booster.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<eqm-label>Volume</eqm-label>
22

33
<!-- Knob controls -->
4-
<div *ngIf="!replaceKnobWithSlider" fxLayout="row" fxLayoutAlign="center start"
4+
<div *ngIf="!uiSettings.replaceKnobsWithSliders" fxLayout="row" fxLayoutAlign="center start"
55
class="knob-control">
66
<div fxLayout="column" fxLayoutAlign="center center" fxFlex="52px">
77
<eqm-label>Volume</eqm-label>
@@ -19,7 +19,7 @@
1919

2020

2121
<!-- Slider controls -->
22-
<div *ngIf="replaceKnobWithSlider" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px" class="slider-control">
22+
<div *ngIf="uiSettings.replaceKnobsWithSliders" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px" class="slider-control">
2323
<div fxLayout="column" fxLayoutAlign="center center" fxFlex="52px">
2424
<eqm-label>Volume</eqm-label>
2525
<eqm-value-screen>{{(gain | mapValue:0:1:0:100 | clipValue:0:100 | fixFloat:0:false)}}%</eqm-value-screen>

‎ui/src/app/sections/volume/booster-balance/booster/booster.component.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77

88
import { BoosterService } from './booster.service'
99
import { ApplicationService } from '../../../../services/app.service'
10-
import { UIService } from '../../../../services/ui.service'
10+
import { UIService, WebUISettings } from '../../../../services/ui.service'
1111

1212
@Component({
1313
selector: 'eqm-booster',
@@ -16,7 +16,7 @@ import { UIService } from '../../../../services/ui.service'
1616
})
1717
export class BoosterComponent implements OnInit {
1818
gain = 1
19-
replaceKnobWithSlider = false
19+
uiSettings: WebUISettings
2020
@Input() hide = false
2121

2222
constructor (
@@ -32,8 +32,7 @@ export class BoosterComponent implements OnInit {
3232
}
3333

3434
async sync () {
35-
const uiSettings = this.ui.getWebSettings()
36-
this.replaceKnobWithSlider = !!uiSettings.replaceKnobsWithSliders
35+
this.uiSettings = this.ui.settings
3736
await Promise.all([
3837
this.getGain()
3938
])
@@ -48,7 +47,7 @@ export class BoosterComponent implements OnInit {
4847
this.changeRef.detectChanges()
4948
}
5049
})
51-
this.ui.webSettingsChanged.subscribe(uiSettings => this.replaceKnobWithSlider = !!uiSettings.replaceKnobsWithSliders)
50+
this.ui.settingsChanged.subscribe(uiSettings => this.uiSettings = uiSettings)
5251
}
5352

5453
setGain (gain: number) {

‎ui/src/app/sections/volume/booster-balance/volume-booster-balance.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ export class VolumeBoosterBalanceComponent implements OnInit {
2020
}
2121

2222
async syncUISettings () {
23-
const uiSettings = this.ui.getWebSettings()
23+
const uiSettings = this.ui.settings
2424
this.replaceKnobsWithSliders = !!uiSettings.replaceKnobsWithSliders
2525
}
2626

2727
setupListeners () {
28-
this.ui.webSettingsChanged.subscribe(uiSettings => {
28+
this.ui.settingsChanged.subscribe(uiSettings => {
2929
this.replaceKnobsWithSliders = !!uiSettings.replaceKnobsWithSliders
3030
})
3131
}

0 commit comments

Comments
 (0)