moved effects/eq changes from Pro repo

nodeful · nodeful · commit 87257e3a7c2c · 2021-09-28T23:29:03.000+03:00
diff --git a/ui/src/app/sections/effects/equalizers/equalizers.component.html b/ui/src/app/sections/effects/equalizers/equalizers.component.html
@@ -1,23 +1,23 @@
 <div fxLayout="row" class="toolbar w-100" [style.min-height.px]="toolbarHeight" fxLayoutAlign="space-between center" >
     <div fxFlex="20" fxLayoutGap="10px" fxLayout="row" fxLayoutAlign="start center">
-        <eqm-toggle [enabled]="app.enabled" class="on-off" [(state)]="enabled" (stateChange)="setEnabled()"></eqm-toggle>
-        <eqm-icon [@FadeInOut] *ngIf="activeEqualizer && activeEqualizer.settings.length" (click)="enabled && openSettings()" eqmTooltip="Settings" eqmTooltipPositionSide="bottom" name="cog" color="#8E8E93" [size]="16"></eqm-icon>
+      <eqm-toggle [enabled]="app.enabled" [highlighted]="enabledToggleHighlighted" [(state)]="enabled" (stateChange)="setEnabled()"></eqm-toggle>
+      <eqm-icon [@FadeInOut] *ngIf="activeEqualizer && activeEqualizer.settings.length" (click)="openSettings()" eqmTooltip="Settings" eqmTooltipPositionSide="bottom" name="cog" color="#8E8E93" [size]="16"></eqm-icon>
     </div>
 
-    <div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px">
+    <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="5px">
       <eqm-label>Equalizer: </eqm-label>
       <eqm-label class="type" [class.active]="type === 'Basic'" (click)="setType('Basic')">Basic</eqm-label>
       <eqm-label class="type" [class.active]="type === 'Advanced'" (click)="setType('Advanced')">Advanced</eqm-label>
     </div>
 
-    <div fxFlex="20" fxLayoutGap="5px" fxLayout="row" fxLayoutAlign="end center">
+    <div fxFlex="10" fxLayoutGap="5px" fxLayout="row" fxLayoutAlign="end center">
       <eqm-icon (click)="toggleVisibility()" [name]="show ? 'hide' : 'show'"></eqm-icon>
     </div>
 </div>
 
 <eqm-loading *ngIf="show && !loaded"></eqm-loading>
 
-<eqm-equalizer-presets *ngIf="show && loaded"
+<eqm-equalizer-presets *ngIf="show && loaded" (click)="clicked()"
   [enabled]="enabled && app.enabled"
   class="presets"
   [presets]="presets" [selectedPreset]="selectedPreset" 
@@ -28,14 +28,14 @@
   [additionalRightOption]="activeEqualizer?.additionalPresetOptionRight"
 ></eqm-equalizer-presets>
 
-<eqm-basic-equalizer *ngIf="show && loaded && type === 'Basic'" #basicEqualizer
+<eqm-basic-equalizer *ngIf="show && loaded && type === 'Basic'" #basicEqualizer (click)="clicked()"
   [enabled]="enabled && app.enabled" class="equalizer" 
   (presetsChange)="presets = $event" (selectedPresetChange)="selectedPreset = $event" 
   [animationDuration]="animationDuration" [animationFps]="animationFps"
   [settingsDialog]="settingsDialog"
 ></eqm-basic-equalizer>
 
-<eqm-advanced-equalizer *ngIf="show && loaded && type === 'Advanced'" #advancedEqualizer
+<eqm-advanced-equalizer *ngIf="show && loaded && type === 'Advanced'" #advancedEqualizer (click)="clicked()"
   [enabled]="enabled && app.enabled" class="equalizer"
   (presetsChange)="presets = $event" (selectedPresetChange)="selectedPreset = $event"
   [animationDuration]="animationDuration" [animationFps]="animationFps"
diff --git a/ui/src/app/sections/effects/equalizers/equalizers.component.ts b/ui/src/app/sections/effects/equalizers/equalizers.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, EventEmitter, Output, ViewChild, Input, ChangeDetectorRef, OnDestroy, HostBinding } from '@angular/core'
+import { Component, OnInit, EventEmitter, Output, ViewChild, Input, ChangeDetectorRef, OnDestroy, HostBinding, HostListener } from '@angular/core'
 import { EqualizersService, EqualizersTypeChangedEventCallback, EqualizerType } from './equalizers.service'
 import { BasicEqualizerComponent } from './basic-equalizer/basic-equalizer.component'
 import { AdvancedEqualizerComponent } from './advanced-equalizer/advanced-equalizer.component'
@@ -9,8 +9,8 @@ import { OptionsDialogComponent } from '../../../components/options-dialog/optio
 import { EqualizerPreset } from './presets/equalizer-presets.component'
 import { UIService } from '../../../services/ui.service'
 import { EffectEnabledChangedEventCallback } from '../effect.service'
-import { UtilitiesService } from '../../../services/utilities.service'
 import { ApplicationService } from '../../../services/app.service'
+import { UtilitiesService } from '../../../services/utilities.service'
 
 @Component({
   selector: 'eqm-equalizers',
@@ -32,9 +32,25 @@ export class EqualizersComponent implements OnInit, OnDestroy {
     return this.toolbarHeight + (this.show ? ((this.activeEqualizer?.height ?? 0) + this.presetsHeight) : 0)
   }
 
+  @HostBinding('style.max-height.px') get maxHeight () {
+    let maxHeight = this.toolbarHeight
+
+    if (this.show) {
+      const eqMaxHeight = (() => {
+        switch (this.type) {
+          default: return this.activeEqualizer?.height ?? 0
+        }
+      })()
+      maxHeight += this.presetsHeight + eqMaxHeight
+    }
+
+    return maxHeight
+  }
+
   loaded = false
   enabled = true
   show = true
+  enabledToggleHighlighted = false
 
   activeEqualizer? = this.getEqualizerFromType('Basic')
   presets: EqualizerPreset[] = []
@@ -43,19 +59,9 @@ export class EqualizersComponent implements OnInit, OnDestroy {
   _type: EqualizerType
   set type (newType: EqualizerType) {
     if (this._type === newType) return
-    const oldMinHeight = this.height
-    const oldType = this.type
     this._type = newType
     this.changeRef.detectChanges()
     this.activeEqualizer = this.getEqualizerFromType(this.type)
-    if (oldType !== undefined) {
-      setTimeout(() => {
-        const newMinHeight = this.height
-        const minHeightDiff = newMinHeight - oldMinHeight
-        console.log({ minHeightDiff })
-        this.ui.changeHeight({ diff: minHeightDiff })
-      })
-    }
   }
 
   get type () { return this._type }
@@ -65,14 +71,16 @@ export class EqualizersComponent implements OnInit, OnDestroy {
   public settingsDialog: MatDialogRef<OptionsDialogComponent>
 
   constructor (
-    public equalizersService: EqualizersService,
+    public service: EqualizersService,
     public dialog: MatDialog,
     public ui: UIService,
     public app: ApplicationService,
     private readonly changeRef: ChangeDetectorRef,
     private readonly utils: UtilitiesService,
     public colors: ColorsService
-  ) { }
+  ) {
+    this.service.ref = this
+  }
 
   async ngOnInit () {
     await this.sync()
@@ -88,8 +96,8 @@ export class EqualizersComponent implements OnInit, OnDestroy {
       enabled,
       uiSettings
     ] = await Promise.all([
-      this.equalizersService.getType(),
-      this.equalizersService.getEnabled(),
+      this.service.getType(),
+      this.service.getEnabled(),
       this.ui.getSettings()
     ])
     this.type = type
@@ -103,26 +111,26 @@ export class EqualizersComponent implements OnInit, OnDestroy {
     this.onEnabledChangedEventCallback = ({ enabled }) => {
       this.enabled = enabled
     }
-    this.equalizersService.onEnabledChanged(this.onEnabledChangedEventCallback)
+    this.service.onEnabledChanged(this.onEnabledChangedEventCallback)
 
     this.onTypeChangedEventCallback = ({ type }) => {
       this.type = type
     }
-    this.equalizersService.onTypeChanged(this.onTypeChangedEventCallback)
+    this.service.onTypeChanged(this.onTypeChangedEventCallback)
   }
 
   private destroyEvents () {
-    this.equalizersService.offEnabledChanged(this.onEnabledChangedEventCallback)
-    this.equalizersService.offTypeChanged(this.onTypeChangedEventCallback)
+    this.service.offEnabledChanged(this.onEnabledChangedEventCallback)
+    this.service.offTypeChanged(this.onTypeChangedEventCallback)
   }
 
   setEnabled () {
-    this.equalizersService.setEnabled(this.enabled)
+    this.service.setEnabled(this.enabled)
   }
 
   async setType (type: EqualizerType) {
     if (!this.app.enabled) return
-    await this.equalizersService.setType(type)
+    await this.service.setType(type)
     this.type = type
     await this.utils.delay(this.animationDuration)
     this.ui.dimensionsChanged.next()
@@ -139,10 +147,16 @@ export class EqualizersComponent implements OnInit, OnDestroy {
     this.show = !this.show
     this.ui.setSettings({ showEqualizers: this.show })
     this.visibilityToggled.emit(this.show)
-    setTimeout(() => { this.activeEqualizer = this.getEqualizerFromType(this.type) })
+
+    setTimeout(() => {
+      this.activeEqualizer = this.getEqualizerFromType(this.type)
+    })
   }
 
   openSettings () {
+    if (!this.app.enabled || !this.enabled) {
+      return this.clicked()
+    }
     const width = '90vw'
     this.settingsDialog = this.dialog.open(OptionsDialogComponent, {
       hasBackdrop: true,
@@ -169,6 +183,23 @@ export class EqualizersComponent implements OnInit, OnDestroy {
     return this.activeEqualizer.selectPreset(preset)
   }
 
+  clicked () {
+    if (!this.enabled) {
+      this.blinkEnabledToggle()
+    }
+  }
+
+  private async blinkEnabledToggle () {
+    this.enabledToggleHighlighted = true
+    await this.utils.delay(100)
+    this.enabledToggleHighlighted = false
+    await this.utils.delay(100)
+    this.enabledToggleHighlighted = true
+    await this.utils.delay(100)
+    this.enabledToggleHighlighted = false
+    await this.utils.delay(100)
+  }
+
   ngOnDestroy () {
     this.destroyEvents()
   }
diff --git a/ui/src/app/sections/effects/equalizers/equalizers.service.ts b/ui/src/app/sections/effects/equalizers/equalizers.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core'
 import { EffectService } from '../effect.service'
+import { EqualizersComponent } from './equalizers.component'
 
 export const EqualizersTypes = [
   'Basic',
@@ -13,6 +14,8 @@ export type EqualizerType = typeof EqualizersTypes[number]
 export class EqualizersService extends EffectService {
   route = `${this.route}/equalizers`
 
+  ref?: EqualizersComponent
+
   async getType (): Promise<EqualizerType> {
     const resp = await this.request({ method: 'GET', endpoint: '/type' })
     return resp.type
diff --git a/ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.html b/ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.html
@@ -23,7 +23,7 @@
     <eqm-dropdown
       [enabled]="enabled"
       [editable]="false" noItemsPlaceholder="No Presets" placeholder="Select Preset"
-      [items]="presets"
+      [items]="orderedPresets"
       [selectedItem]="selectedPreset"
       labelParam="name"
       (itemSelected)="presetSelected.emit($event)"
diff --git a/ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.ts b/ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.ts
@@ -98,4 +98,8 @@ export class EqualizerPresetsComponent implements OnInit {
       this.presetDeleted.emit()
     }
   }
+
+  get orderedPresets () {
+    return this.presets.sort((a, b) => a.isDefault ? 1 : a.name.localeCompare(b.name))
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -98,4 +98,8 @@ export class EqualizerPresetsComponent implements OnInit {`
`98`	`98`	`this.presetDeleted.emit()`
`99`	`99`	`}`
`100`	`100`	`}`
	`101`	`+`
	`102`	`+ get orderedPresets () {`
	`103`	`+ return this.presets.sort((a, b) => a.isDefault ? 1 : a.name.localeCompare(b.name))`
	`104`	`+ }`
`101`	`105`	`}`