added eslint to the monorepo and fixed UI linting errors

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  extends: 'standard-with-typescript',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: [
+      './ui/tsconfig.eslint.json'
+    ]
+  },
+  overrides: [{
+    files: ['*.ts'],
+    rules: {
+      radix: 'off',
+      'accessor-pairs': 'off',
+      'return-undefined': 'off',
+      'no-throw-literal': 'off',
+      'import-first': 'off',
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/consistent-type-assertions': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-empty-interface': 'off',
+      '@typescript-eslint/no-extraneous-class': 'off',
+      '@typescript-eslint/no-floating-promises': 'off',
+      '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
+      '@typescript-eslint/require-await': 'off',
+      '@typescript-eslint/restrict-template-expressions': 'off',
+      '@typescript-eslint/promise-function-async': 'off',
+      '@typescript-eslint/no-misused-promises': 'off',
+      'array-bracket-spacing': ['error', 'always'],
+      '@typescript-eslint/quotes': ['error', 'single', { avoidEscape: true }],
+      '@typescript-eslint/strict-boolean-expressions': 'off',
+      '@typescript-eslint/return-await': 'off',
+      'node/no-callback-literal': 'off',
+      'no-async-promise-executor': 'off',
+      '@typescript-eslint/no-dynamic-delete': 'off'
+    }
+  }],
+  env: {
+    node: true
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "eqmac",
+  "version": "1.0.0",
+  "description": "eqMac Monorepo",
+  "main": ".eslintrc.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bitgapp/eqMac.git"
+  },
+  "author": "Roman Kisil <Nodeful>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/bitgapp/eqMac/issues"
+  },
+  "homepage": "https://github.com/bitgapp/eqMac#readme",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "eslint": "^7.22.0",
+    "eslint-config-standard-with-typescript": "^20.0.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1"
+  },
+  "dependencies": {
+    "typescript": "^4.2.3"
+  }
+}

ui/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

ui/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '../.eslintrc.js'
+}

ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "eqmac",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

ui/scripts/purge-cache.ts

@@ -9,7 +9,7 @@ const cf = Cloudflare({
 })
 
 ;(async () => {
-  const [ major, minor ] = version.split('.')
+  const [ major ] = version.split('.')
   const domain = `https://ui-v${major}.eqmac.app`
   await cf.zones.purgeCache(process.env.CLOUDFLARE_ZONE_ID, {
     files: [ domain ]

ui/src/app/app.component.ts

@@ -16,8 +16,8 @@ import { SettingsService, IconMode } from './sections/settings/settings.service'
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: [ './app.component.scss' ],
-  animations: [FadeInOutAnimation, FromTopAnimation]
+  animations: [ FadeInOutAnimation, FromTopAnimation ]
 })
 
 export class AppComponent implements OnInit, AfterContentInit {
@@ -75,7 +75,7 @@ export class AppComponent implements OnInit, AfterContentInit {
 
   async syncHeight (dimensions?: UIDimensions) {
     await this.utils.delay(10)
-    let height = this.container.nativeElement.offsetHeight
+    let height: number = this.container.nativeElement.offsetHeight
     if (dimensions) {
       if (dimensions.heightDiff) {
         height += dimensions.heightDiff
@@ -88,7 +88,7 @@ export class AppComponent implements OnInit, AfterContentInit {
 
   async syncWidth (dimensions?: UIDimensions) {
     await this.utils.delay(10)
-    let width = this.container.nativeElement.offsetWidth
+    let width: number = this.container.nativeElement.offsetWidth
     if (dimensions) {
       if (dimensions.widthDiff) {
         width += dimensions.widthDiff
@@ -100,8 +100,8 @@ export class AppComponent implements OnInit, AfterContentInit {
   }
 
   startDimensionsSync () {
-    this.ui.dimensionsChanged.subscribe(dimensions => this.syncDimensions(dimensions))
+    this.ui.dimensionsChanged.subscribe(async dimensions => await this.syncDimensions(dimensions))
-    setInterval(() => this.syncDimensions(), 1000)
+    setInterval(async () => await this.syncDimensions(), 1000)
   }
 
   toggleDropdownSection (section: string) {
@@ -123,7 +123,7 @@ export class AppComponent implements OnInit, AfterContentInit {
 
   closeDropdownSection (section: string, event?: any) {
     // if (event && event.target && ['backdrop', 'mat-dialog'].some(e => event.target.className.includes(e))) return
-    if (this.matDialog.openDialogs.length) return
+    if (this.matDialog.openDialogs.length > 0) return
     if (section in this.showDropdownSections) {
       this.showDropdownSections[section] = false
     }

ui/src/app/app.module.ts

@@ -9,10 +9,6 @@ import {
   AppComponent
 } from './app.component'
 
-import {
-  environment
-} from '../environments/environment'
-
 import {
   FlexLayoutModule
 } from '@angular/flex-layout'
@@ -70,9 +66,6 @@ import {
 import {
   VolumeBoosterBalanceComponent
 } from './sections/volume/booster-balance/volume-booster-balance.component'
-import {
-  VolumeMixerComponent
-} from './sections/volume/volume-mixer/volume-mixer.component'
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { SettingsComponent } from './sections/settings/settings.component'
@@ -115,7 +108,6 @@ import { OptionsDialogComponent } from './components/options-dialog/options-dial
     BasicEqualizerComponent,
     AdvancedEqualizerComponent,
     VolumeBoosterBalanceComponent,
-    VolumeMixerComponent,
     SettingsComponent,
     OptionsComponent,
     HelpComponent,
@@ -125,6 +117,6 @@ import { OptionsDialogComponent } from './components/options-dialog/options-dial
     OptionsDialogComponent
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [ AppComponent ]
 })
 export class AppModule {}

ui/src/app/components/confirm-dialog/confirm-dialog.component.ts

@@ -10,7 +10,7 @@ export interface ConfirmDialogData {
 @Component({
   selector: 'eqm-confirm-dialog',
   templateUrl: './confirm-dialog.component.html',
-  styleUrls: ['./confirm-dialog.component.scss']
+  styleUrls: [ './confirm-dialog.component.scss' ]
 })
 export class ConfirmDialogComponent implements OnInit {
   @Input() text: string
@@ -26,7 +26,7 @@ export class ConfirmDialogComponent implements OnInit {
 
   ngOnInit () {
     if (this.data) {
-      for (const [key, value] of Object.entries(this.data)) {
+      for (const [ key, value ] of Object.entries(this.data)) {
         this[key] = value || this[key]
       }
     }
@@ -43,5 +43,4 @@ export class ConfirmDialogComponent implements OnInit {
       this.dialogRef.close(true)
     }
   }
-
 }

ui/src/app/components/options-dialog/options-dialog.component.ts

@@ -9,7 +9,7 @@ export interface OptionsDialogData {
 @Component({
   selector: 'eqm-options-dialog',
   templateUrl: './options-dialog.component.html',
-  styleUrls: ['./options-dialog.component.scss']
+  styleUrls: [ './options-dialog.component.scss' ]
 })
 export class OptionsDialogComponent implements OnInit {
   @Input() options: Options
@@ -22,10 +22,9 @@ export class OptionsDialogComponent implements OnInit {
 
   ngOnInit () {
     if (this.data) {
-      for (const [key, value] of Object.entries(this.data)) {
+      for (const [ key, value ] of Object.entries(this.data)) {
         this[key] = value || this[key]
       }
     }
   }
-
 }

ui/src/app/components/options/options.component.ts

@@ -74,8 +74,8 @@ export interface BreadcrumbsOption extends BaseOptions {
 }
 
 export interface InputOption extends BaseOptions {
-  type: 'input',
+  type: 'input'
-  value?: string,
+  value?: string
   placeholder?: string
   changed?: (value: string) => any
   enter?: () => any
@@ -117,7 +117,7 @@ export interface ValueScreenOption extends BaseOptions {
   clicked?: () => any
 }
 
-export type Option = ButtonOption | CheckboxOption | SelectOption 
+export type Option = ButtonOption | CheckboxOption | SelectOption
 | DividerOption | LabelOption | HTMLOption | DropdownOption
 | BreadcrumbsOption | InputOption | FlatSliderOption | SkeuomorphSliderOption
 | ValueScreenOption
@@ -126,7 +126,7 @@ export type Options = Option[][]
 @Component({
   selector: 'eqm-options',
   templateUrl: './options.component.html',
-  styleUrls: ['./options.component.scss']
+  styleUrls: [ './options.component.scss' ]
 })
 export class OptionsComponent {
   @Input() options: Options = []
@@ -135,10 +135,10 @@ export class OptionsComponent {
   constructor (
     public app: ApplicationService,
     public ref: ChangeDetectorRef
-    ) {}
+  ) {}
 
   getOptionStyle (option: Option, row: Option[]) {
-    let style = option.style || {}
+    const style = option.style || {}
     if (!style.width) {
       style.width = `${100 / row.length}%`
     }
@@ -146,7 +146,7 @@ export class OptionsComponent {
       style.width = '100%'
     }
 
-    if (!!option.isEnabled && option.isEnabled() === false) {
+    if (!!option.isEnabled && !option.isEnabled()) {
       style.filter = 'grayscale(1)'
     }
 
@@ -154,7 +154,7 @@ export class OptionsComponent {
   }
 
   toggleCheckbox (checkbox: CheckboxOption) {
-    if (!!checkbox.isEnabled && checkbox.isEnabled() === false) {
+    if (!!checkbox.isEnabled && !checkbox.isEnabled()) {
       return
     }
     checkbox.value = !checkbox.value
@@ -163,7 +163,7 @@ export class OptionsComponent {
   }
 
   selectedOption (option: SelectOption, selectOption: SelectOptionOption) {
-    if (!!option.isEnabled && option.isEnabled() === false) {
+    if (!!option.isEnabled && !option.isEnabled()) {
       return
     }
     if (option.selectedId !== selectOption.id) {

ui/src/app/components/prompt-dialog/prompt-dialog.component.ts

@@ -10,7 +10,7 @@ export interface PromptDialogData extends ConfirmDialogData {
 @Component({
   selector: 'eqm-prompt-dialog',
   templateUrl: './prompt-dialog.component.html',
-  styleUrls: ['./prompt-dialog.component.scss']
+  styleUrls: [ './prompt-dialog.component.scss' ]
 })
 export class PromptDialogComponent extends ConfirmDialogComponent {
   @Input() prompt

ui/src/app/modules/animations/fade-in-out.ts

@@ -1,13 +1,13 @@
-import { trigger, style, animate, transition, state } from '@angular/animations'
+import { trigger, style, animate, transition } from '@angular/animations'
 
 const DURATION = 100
 
 export const FadeInOutAnimation = trigger('FadeInOut', [
-  transition(':enter', [   // :enter is alias to 'void => *'
+  transition(':enter', [ // :enter is alias to 'void => *'
     style({ opacity: 0 }),
     animate(DURATION, style({ opacity: 1 }))
   ]),
-  transition(':leave', [   // :leave is alias to '* => void'
+  transition(':leave', [ // :leave is alias to '* => void'
     animate(DURATION, style({ opacity: 0 }))
   ])
 ])

ui/src/app/modules/animations/from-top.ts

@@ -11,11 +11,11 @@ const END_FRAME_STATE = {
 }
 
 export const FromTopAnimation = trigger('FromTop', [
-  transition(':enter', [   // :enter is alias to 'void => *'
+  transition(':enter', [ // :enter is alias to 'void => *'
     style(INITIAL_STATE),
     animate(DURATION, style(END_FRAME_STATE))
   ]),
-  transition(':leave', [   // :leave is alias to '* => void'
+  transition(':leave', [ // :leave is alias to '* => void'
     animate(DURATION, style(INITIAL_STATE))
   ])
 ])

ui/src/app/modules/eqmac-components/components/analyzer/analyzer.component.ts

@@ -8,7 +8,7 @@ import {
 @Component({
   selector: 'eqm-analyzer',
   templateUrl: './analyzer.component.html',
-  styleUrls: ['./analyzer.component.scss']
+  styleUrls: [ './analyzer.component.scss' ]
 })
 
 export class AnalyzerComponent implements OnInit {
@@ -32,8 +32,8 @@ export class AnalyzerComponent implements OnInit {
     // Get canvas context
     const gridCanvas: HTMLCanvasElement = this.gridCanvas.nativeElement
 
-    gridCanvas.style.height = this.container.nativeElement.offsetHeight + 'px'
+    gridCanvas.style.height = `${parseInt(this.container.nativeElement.offsetHeight)}px`
-    gridCanvas.style.width = this.container.nativeElement.offsetWidth + 'px'
+    gridCanvas.style.width = `${parseInt(this.container.nativeElement.offsetWidth)}px`
 
     this.width = gridCanvas.offsetWidth
     this.height = gridCanvas.offsetHeight

ui/src/app/modules/eqmac-components/components/breadcrumbs/breadcrumbs.component.ts

@@ -1,17 +1,15 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 
 @Component({
   selector: 'eqm-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss']
+  styleUrls: [ './breadcrumbs.component.scss' ]
 })
 export class BreadcrumbsComponent implements OnInit {
   @Input() crumbs: string[]
   @Input() underline = true
   @Output() crumbClicked = new EventEmitter<{ crumb: string, index: number }>()
-  constructor() { }
 
-  ngOnInit(): void {
+  ngOnInit (): void {
   }
-
 }

ui/src/app/modules/eqmac-components/components/button/button.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 @Component({
   selector: 'eqm-button',
   templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss']
+  styleUrls: [ './button.component.scss' ]
 })
 export class ButtonComponent implements OnInit {
   @Input() type: 'large' | 'narrow' | 'square' | 'circle' | 'transparent' = 'large'
@@ -15,7 +15,6 @@ export class ButtonComponent implements OnInit {
   @Input() hoverable = true
   @Input() disabled = false
   @Output() pressed = new EventEmitter()
-  constructor () { }
 
   ngOnInit () {
   }
@@ -55,5 +54,4 @@ export class ButtonComponent implements OnInit {
       this.pressed.emit()
     }
   }
-
 }

ui/src/app/modules/eqmac-components/components/carousel/carousel.component.ts

@@ -1,5 +1,5 @@
-import { Component, ContentChildren, QueryList, Directive, ViewChild, ElementRef, Input, TemplateRef, ViewContainerRef, AfterViewInit, Output, EventEmitter, HostBinding, ViewChildren, OnDestroy } from '@angular/core'
+import { Component, ContentChildren, QueryList, Directive, ViewChild, ElementRef, Input, TemplateRef, AfterViewInit, Output, EventEmitter, ViewChildren, OnDestroy } from '@angular/core'
-import { AnimationPlayer, AnimationFactory, animate, style, AnimationBuilder } from '@angular/animations'
+import { AnimationFactory, animate, style, AnimationBuilder } from '@angular/animations'
 
 @Directive({
   selector: '[eqmCarouselItem]'
@@ -23,7 +23,7 @@ export class CarouselItemElement {
 @Component({
   selector: 'eqm-carousel',
   templateUrl: './carousel.component.html',
-  styleUrls: ['./carousel.component.scss']
+  styleUrls: [ './carousel.component.scss' ]
 })
 export class CarouselComponent implements AfterViewInit, OnDestroy {
   @ContentChildren(CarouselItemDirective) items: QueryList<CarouselItemDirective>
@@ -41,6 +41,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
       this.heightDiff.emit(diff)
     }
   }
+
   @Output() heightDiff = new EventEmitter<number>()
   @Output() heightChange = new EventEmitter<number>()
   public recalculateHeightTimer
@@ -54,6 +55,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
     this.recalculateHeight()
     this.itemCameIntoView.emit(this.selectedItemId)
   }
+
   get selectedItemId () { return this._selectedItemId }
   @Output() selectedItemIdChange = new EventEmitter<string>()
   @Output() animationCompleted = new EventEmitter<string>()
@@ -75,13 +77,13 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   ngAfterViewInit () {
     for (const item of this.items.toArray()) {
       if (!item.eqmCarouselItem || typeof item.eqmCarouselItem !== 'string') {
-        throw new Error(`eqmCarouselItem directive was not provided an item ID`)
+        throw new Error('eqmCarouselItem directive was not provided an item ID')
       }
     }
 
     this.animate()
     this.recalculateHeight()
-    this.recalculateHeightTimer = setInterval(this.recalculateHeight.bind(this), 1000)
+    this.recalculateHeightTimer = setInterval(() => this.recalculateHeight(), 1000)
   }
 
   ngOnDestroy () {
@@ -127,8 +129,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
   }
 
   public recalculateHeight () {
-    const itemEl = this.itemElems && this.itemElems.toArray()[this.currentIndex].nativeElement.nextElementSibling
+    const itemEl = this.itemElems?.toArray()[this.currentIndex].nativeElement.nextElementSibling
-    itemEl && itemEl.offsetHeight && (this.height = itemEl.offsetHeight)
+    itemEl?.offsetHeight && (this.height = itemEl.offsetHeight)
   }
-
 }

ui/src/app/modules/eqmac-components/components/checkbox/checkbox.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'
+import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core'
 
 @Component({
   selector: 'eqm-checkbox',
   templateUrl: './checkbox.component.html',
-  styleUrls: ['./checkbox.component.scss']
+  styleUrls: [ './checkbox.component.scss' ]
 })
 export class CheckboxComponent {
   @Input() interactive: boolean = true

ui/src/app/modules/eqmac-components/components/container/container.component.ts

@@ -3,13 +3,11 @@ import { Component, OnInit, HostBinding, Input } from '@angular/core'
 @Component({
   selector: 'eqm-container',
   templateUrl: './container.component.html',
-  styleUrls: ['./container.component.scss']
+  styleUrls: [ './container.component.scss' ]
 })
 export class ContainerComponent implements OnInit {
   @HostBinding('class.disabled') @Input() disabled = false
-  constructor () { }
 
   ngOnInit () {
   }
-
 }

ui/src/app/modules/eqmac-components/components/divider/divider.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, Input, ElementRef, HostBinding } from '@angular/core'
+import { Component, Input, ElementRef, HostBinding } from '@angular/core'
 
 @Component({
   selector: 'eqm-divider',
   templateUrl: './divider.component.html',
-  styleUrls: ['./divider.component.scss']
+  styleUrls: [ './divider.component.scss' ]
 })
 export class DividerComponent {
   @Input() orientation: 'vertical' | 'horizontal' = 'horizontal'
@@ -41,5 +41,4 @@ export class DividerComponent {
   get bottomtBorder () {
     return this.orientation === 'horizontal' ? '1px solid rgb(96, 97, 101)' : undefined
   }
-
 }

ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.ts

@@ -1,34 +1,35 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, EventEmitter, Output, NgZone, HostBinding, HostListener } from '@angular/core'
 import { SelectBoxComponent } from '../select-box/select-box.component'
 import { UtilitiesService } from '../../services/utilities.service'
-import { InputFieldComponent } from '../input-field/input-field.component'
 import { FadeInOutAnimation } from 'src/app/modules/animations'
 
 @Component({
   selector: 'eqm-dropdown',
   templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss'],
+  styleUrls: [ './dropdown.component.scss' ],
   animations: [ FadeInOutAnimation ]
 })
 export class DropdownComponent implements OnInit {
   constructor (
-    public utils: UtilitiesService, 
+    public utils: UtilitiesService,
     public zone: NgZone,
     public ref: ElementRef
   ) {
   }
-  
+
   public _items: any[] = []
   @Input() editable = false
   @Input()
   get items () {
     return this._items
   }
+
   set items (newItems) {
     if (!newItems || !Array.isArray(newItems)) return
     this.searchText = null
     this._items = newItems
   }
+
   @Output() refChanged = new EventEmitter<DropdownComponent>()
   @HostBinding('class.disabled') @Input() disabled = false
   @Input() selectedItem = null
@@ -54,7 +55,8 @@ export class DropdownComponent implements OnInit {
     if (!this.items) this.items = []
     this.setDimensions()
     this.calculateYCoordinate()
-    for (let _ in [...Array(3)]) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    for (const _ of [ ...Array(3) ]) {
       await this.utils.delay(100)
       this.calculateYCoordinate()
     }
@@ -78,19 +80,19 @@ export class DropdownComponent implements OnInit {
     this.direction = preferredDirection
     const inputEl = this.container.nativeElement
 
-    const inputHeight = inputEl.offsetHeight
+    const inputHeight = parseInt(inputEl.offsetHeight)
     const inputPosition = inputEl.getBoundingClientRect()
 
     const boxHeight = this.boxComponent.height
 
-    const downY = inputPosition.y + inputHeight + this.padding / 2
+    const downY = parseInt(inputPosition.y) + inputHeight + this.padding / 2
     const downSpaceLeft = viewHeight - (downY + boxHeight)
 
     const upY = inputPosition.top - boxHeight - this.padding
     const upSpaceLeft = upY
 
     this.direction = this.forceDirection ?? (downSpaceLeft > upSpaceLeft ? 'down' : 'up')
-    let y = this.direction === 'down' ? downY : upY
+    const y = this.direction === 'down' ? downY : upY
 
     this.yCoordinate = y
   }
@@ -128,7 +130,7 @@ export class DropdownComponent implements OnInit {
   }
 
   searchText: string
-  @HostListener('document:keypress', ['$event'])
+  @HostListener('document:keypress', [ '$event' ])
   keypress (event: KeyboardEvent) {
     if (!this.disabled && this.shown && this.searchable) {
       switch (event.key) {

ui/src/app/modules/eqmac-components/components/flat-slider/flat-slider.component.ts

@@ -1,6 +1,5 @@
 import {
   Component,
-  OnInit,
   ViewChild,
   Input,
   Output,
@@ -13,7 +12,7 @@ import {
   UtilitiesService
 } from '../../services/utilities.service'
 import { FadeInOutAnimation } from '../../../animations'
-import { SafeStyle, DomSanitizer } from '@angular/platform-browser'
+import { DomSanitizer } from '@angular/platform-browser'
 
 export interface FlatSliderValueChangedEvent {
   value: number
@@ -23,8 +22,8 @@ export interface FlatSliderValueChangedEvent {
 @Component({
   selector: 'eqm-flat-slider',
   templateUrl: './flat-slider.component.html',
-  styleUrls: ['./flat-slider.component.scss'],
+  styleUrls: [ './flat-slider.component.scss' ],
-  animations: [FadeInOutAnimation]
+  animations: [ FadeInOutAnimation ]
 })
 export class FlatSliderComponent {
   constructor (
@@ -61,6 +60,7 @@ export class FlatSliderComponent {
     this._enabled = shouldBeEnabled
     this._color = this._enabled ? this.defaultColor : '#777'
   }
+
   get enabled () { return this._enabled }
 
   public _color = this.defaultColor
@@ -69,6 +69,7 @@ export class FlatSliderComponent {
     this.defaultColor = newColor
     this._color = this._enabled ? this.defaultColor : '#777'
   }
+
   get color () {
     return this._color
   }
@@ -85,7 +86,7 @@ export class FlatSliderComponent {
   public dragging = false
   public thumbRadius = 4
 
-  public _value = .5
+  public _value = 0.5
   @Input()
   set value (newValue) {
     let value = this.clampValue(newValue)
@@ -98,10 +99,10 @@ export class FlatSliderComponent {
         diffFromMiddle *= -1
       }
       const percFromMiddle = this.mapValue({
-        value: diffFromMiddle, 
+        value: diffFromMiddle,
-        inMin: 0, 
+        inMin: 0,
-        inMax: this.max - middleValue, 
+        inMax: this.max - middleValue,
-        outMin: 0, 
+        outMin: 0,
         outMax: 100
       })
       if ((this._value).toFixed(2) === (middleValue).toFixed(2) && percFromMiddle < 5) {
@@ -116,6 +117,7 @@ export class FlatSliderComponent {
     this._value = this.clampValue(value)
     this.valueChange.emit(this._value)
   }
+
   get value () { return this._value }
 
   @Output() valueChange = new EventEmitter()
@@ -128,13 +130,14 @@ export class FlatSliderComponent {
   get width () {
     return this.containerRef.nativeElement.offsetWidth
   }
+
   public clampValue (value) {
     if (value < this.min) return this.min
     if (value > this.max) return this.max
     return value
   }
 
-  @HostListener('mousewheel', ['$event'])
+  @HostListener('mousewheel', [ '$event' ])
   mouseWheel (event: MouseWheelEvent) {
     if (this.enabled && this.scrollEnabled) {
       // const multiplier = (this.max - this.min) / 1000
@@ -165,7 +168,8 @@ export class FlatSliderComponent {
       if (progress > inMax) progress = inMax
       return this.mapValue({
         value: progress,
-        inMin, inMax,
+        inMin,
+        inMax,
         outMin: this.min,
         outMax: this.max
       })
@@ -173,7 +177,7 @@ export class FlatSliderComponent {
     return value
   }
 
-  @HostListener('mousedown', ['$event'])
+  @HostListener('mousedown', [ '$event' ])
   mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.dragging = true
@@ -182,7 +186,7 @@ export class FlatSliderComponent {
     }
   }
 
-  @HostListener('mousemove', ['$event'])
+  @HostListener('mousemove', [ '$event' ])
   mousemove (event: MouseEvent) {
     if (this.enabled && this.dragging) {
       this.value = this.getValueFromMouseEvent(event)
@@ -195,6 +199,7 @@ export class FlatSliderComponent {
   onMouseEnter (): void {
     this.mouseInside = true
   }
+
   @HostListener('mouseleave')
   onMouseLeave (): void {
     this.mouseInside = false
@@ -229,13 +234,13 @@ export class FlatSliderComponent {
       value += step
       this.value = value
     }
-    return
   }
 
-  @HostListener('mouseup', ['$event'])
+  @HostListener('mouseup', [ '$event' ])
   onMouseUp () {
     this.dragging = false
   }
+
   mouseup (event) {
     this.dragging = false
   }
@@ -259,10 +264,10 @@ export class FlatSliderComponent {
     const styles: { [style: string]: string } = {}
     const narrow = this.thumbRadius * 2 + 2
     if (this.orientation === 'horizontal') {
-      styles.width = `100%`
+      styles.width = '100%'
       styles.height = `${narrow}px`
     } else {
-      styles.height = `100%`
+      styles.height = '100%'
       styles.width = `${narrow}px`
     }
 
@@ -329,20 +334,20 @@ export class FlatSliderComponent {
     style.borderRadius = '100%'
     if (this.orientation === 'horizontal') {
       const left = this.mapValue({
-        value: this.value, 
+        value: this.value,
-        inMin: this.min, 
+        inMin: this.min,
-        inMax: this.max, 
+        inMax: this.max,
-        outMin: -borderSize, 
+        outMin: -borderSize,
         outMax: this.width - this.thumbRadius * 2 - borderSize,
         logInverse: true
       })
       style.left = `${left}px`
     } else {
       style.bottom = `${this.mapValue({
-        value: this.value, 
+        value: this.value,
-        inMin: this.min, 
+        inMin: this.min,
-        inMax: this.max, 
+        inMax: this.max,
-        outMin: -borderSize, 
+        outMin: -borderSize,
         outMax: this.height - this.thumbRadius * 2 - borderSize,
         logInverse: true
       })}px`
@@ -351,13 +356,16 @@ export class FlatSliderComponent {
   }
 
   private mapValue ({ value, inMin, inMax, outMin, outMax, logInverse }: {
-    value: number, inMin: number, inMax: number, outMin: number, outMax: number
+    value: number
+    inMin: number
+    inMax: number
+    outMin: number
+    outMax: number
     logInverse?: boolean
   }) {
     switch (this.scale) {
       case 'linear': return this.utils.mapValue(value, inMin, inMax, outMin, outMax)
-      case 'logarithmic': return (logInverse ? this.utils.logMapValueInverse : this.utils.logMapValue)
+      case 'logarithmic': return (logInverse ? this.utils.logMapValueInverse : this.utils.logMapValue)({ value, inMin, inMax, outMin, outMax })
-        ({ value, inMin, inMax, outMin, outMax })
     }
   }
 }

ui/src/app/modules/eqmac-components/components/icon/icon.component.ts

@@ -10,7 +10,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 @Component({
   selector: 'eqm-icon',
   templateUrl: './icon.component.html',
-  styleUrls: ['./icon.component.scss'],
+  styleUrls: [ './icon.component.scss' ],
   encapsulation: ViewEncapsulation.ShadowDom
 })
 export class IconComponent implements OnInit {
@@ -18,10 +18,12 @@ export class IconComponent implements OnInit {
   @Input() height = 20
   svg: SafeHtml
   icons = svgs
+
   @Input() set size (newSize) {
     this.width = newSize
     this.height = newSize
   }
+
   _color = '#979aa0'
   @Input()
   set color (newColor) {
@@ -47,6 +49,7 @@ export class IconComponent implements OnInit {
   get rotate () {
     return this._rotate
   }
+
   set rotate (angle: number) {
     this._rotate = angle
   }
@@ -57,6 +60,7 @@ export class IconComponent implements OnInit {
     this._name = iconName
     this.svg = this.sanitizer.bypassSecurityTrustHtml(this.icons[this.name])
   }
+
   get name () { return this._name }
 
   @Input() stroke: number = 0

ui/src/app/modules/eqmac-components/components/input-field/input-field.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, Input, EventEmitter, Output, ViewChild, HostBinding
 @Component({
   selector: 'eqm-input-field',
   templateUrl: './input-field.component.html',
-  styleUrls: ['./input-field.component.scss']
+  styleUrls: [ './input-field.component.scss' ]
 })
 export class InputFieldComponent implements OnInit {
   @Input() text: string
@@ -14,7 +14,6 @@ export class InputFieldComponent implements OnInit {
   @HostBinding('class.disabled') @Input() disabled = false
   @Input() fontSize = 12
   @ViewChild('container', { static: true }) container
-  constructor () { }
 
   ngOnInit () {
   }
@@ -26,5 +25,4 @@ export class InputFieldComponent implements OnInit {
   enterPressed () {
     this.enter.emit()
   }
-
 }

ui/src/app/modules/eqmac-components/components/knob/knob.component.ts

@@ -19,7 +19,7 @@ export interface KnobValueChangedEvent {
 @Component({
   selector: 'eqm-knob',
   templateUrl: './knob.component.html',
-  styleUrls: ['./knob.component.scss']
+  styleUrls: [ './knob.component.scss' ]
 })
 export class KnobComponent implements OnInit {
   @Input() size: 'large' | 'medium' | 'small' = 'medium'
@@ -59,7 +59,6 @@ export class KnobComponent implements OnInit {
     if (this._value === newValue || typeof newValue !== 'number') return
     let value = newValue
     if (this.stickToMiddle) {
-
       let diffFromMiddle = this.middleValue - value
       if (diffFromMiddle < 0) {
         diffFromMiddle *= -1
@@ -77,6 +76,7 @@ export class KnobComponent implements OnInit {
     this._value = this.clampValue(value)
     this.valueChange.emit(this._value)
   }
+
   get value () {
     return this._value
   }
@@ -116,7 +116,7 @@ export class KnobComponent implements OnInit {
     this.dragging = false
   }
 
-  @HostListener('gesturechange', ['$event'])
+  @HostListener('gesturechange', [ '$event' ])
   onGestureChange (event) {
     if (!this.disabled) {
       try {
@@ -133,7 +133,6 @@ export class KnobComponent implements OnInit {
 
   mousemove (event) {
     if (!this.disabled) {
-
       if (this.setDraggingFalseTimeout) {
         window.clearTimeout(this.setDraggingFalseTimeout)
       }
@@ -236,7 +235,6 @@ export class KnobComponent implements OnInit {
       }
     }
     this.continueAnimation = false
-    return
   }
 
   public getDegreesFromEvent (event) {

ui/src/app/modules/eqmac-components/components/label/label.component.ts

@@ -1,15 +1,14 @@
-import { Component, OnInit, Input, HostBinding } from '@angular/core'
+import { Component, Input, HostBinding } from '@angular/core'
 
 @Component({
   selector: 'eqm-label',
   templateUrl: './label.component.html',
-  styleUrls: ['./label.component.scss']
+  styleUrls: [ './label.component.scss' ]
 })
 export class LabelComponent {
   @Input() fontSize: number
   @Input() color: string
   @Input() clickable = false
-  constructor () { }
 
   get style () {
     return {

ui/src/app/modules/eqmac-components/components/loading/loading.component.ts

@@ -1,15 +1,16 @@
-import { Component, ViewChild, ElementRef, OnInit, AfterViewInit } from '@angular/core'
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'
 
 @Component({
   selector: 'eqm-loading',
   templateUrl: './loading.component.html',
-  styleUrls: ['./loading.component.scss']
+  styleUrls: [ './loading.component.scss' ]
 })
 export class LoadingComponent implements AfterViewInit {
   @ViewChild('wave', { static: true }) wave: ElementRef
 
   ngAfterViewInit () {
     const path = this.wave.nativeElement
+    // eslint-disable-next-line no-loss-of-precision
     const m = 0.512286623256592433
     const w = 90
     const h = 60

ui/src/app/modules/eqmac-components/components/prompt/prompt.component.ts

@@ -3,13 +3,9 @@ import { Component, OnInit } from '@angular/core'
 @Component({
   selector: 'eqm-prompt',
   templateUrl: './prompt.component.html',
-  styleUrls: ['./prompt.component.scss']
+  styleUrls: [ './prompt.component.scss' ]
 })
 export class PromptComponent implements OnInit {
-
-  constructor () { }
-
   ngOnInit () {
   }
-
 }

ui/src/app/modules/eqmac-components/components/question/question.component.ts

@@ -1,13 +1,11 @@
-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 
 @Component({
   selector: 'eqm-question',
   template: '<eqm-icon stroke="0" color="#c9cdd0" width="8" height="8" name="help"></eqm-icon>',
-  styles: [':host { height: 12px; width: 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #2c2c2e; }']
+  styles: [ ':host { height: 12px; width: 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #2c2c2e; }' ]
 })
 export class QuestionComponent implements OnInit {
-  constructor () { }
-
   ngOnInit () {
   }
 }

ui/src/app/modules/eqmac-components/components/screw/screw.component.ts

@@ -3,13 +3,9 @@ import { Component, OnInit } from '@angular/core'
 @Component({
   selector: 'eqm-screw',
   templateUrl: './screw.component.html',
-  styleUrls: ['./screw.component.scss']
+  styleUrls: [ './screw.component.scss' ]
 })
 export class ScrewComponent implements OnInit {
-
-  constructor () { }
-
   ngOnInit () {
   }
-
 }

ui/src/app/modules/eqmac-components/components/select-box/select-box.component.ts

@@ -3,16 +3,16 @@ import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef }
 @Component({
   selector: 'eqm-select-box',
   templateUrl: './select-box.component.html',
-  styleUrls: ['./select-box.component.scss']
+  styleUrls: [ './select-box.component.scss' ]
 })
 export class SelectBoxComponent implements OnInit {
-
   _items: any[] = []
   @Input()
   set items (newItems: any[]) {
     this._items = newItems
     this.setHeight()
   }
+
   get items () {
     return this._items
   }
@@ -67,5 +67,4 @@ export class SelectBoxComponent implements OnInit {
     this.selectedItem = item
     this.itemSelected.emit(item)
   }
-
 }

ui/src/app/modules/eqmac-components/components/skeuomorph-slider/skeuomorph-slider.component.ts

@@ -21,10 +21,9 @@ export interface SkeuomorphSliderValueChangedEvent {
 @Component({
   selector: 'eqm-skeuomorph-slider',
   templateUrl: './skeuomorph-slider.component.html',
-  styleUrls: ['./skeuomorph-slider.component.scss']
+  styleUrls: [ './skeuomorph-slider.component.scss' ]
 })
 export class SkeuomorphSliderComponent implements OnInit {
-
   constructor (public utils: UtilitiesService, public elRef: ElementRef) {}
 
   @Input() min: number = 0
@@ -50,7 +49,7 @@ export class SkeuomorphSliderComponent implements OnInit {
 
   @HostBinding('class.disabled') @Input() disabled = false
 
-  public _value = .5
+  public _value = 0.5
   @Input()
   set value (newValue) {
     let value = this.clampValue(newValue)
@@ -74,11 +73,11 @@ export class SkeuomorphSliderComponent implements OnInit {
     }
     this._value = this.clampValue(value)
     this.valueChange.emit(this._value)
-
   }
+
   get value () { return this._value }
 
-  @HostListener('mousewheel', ['$event'])
+  @HostListener('mousewheel', [ '$event' ])
   onMouseWheel (event): void {
     if (!this.disabled && this.scrollEnabled) {
       this.value += -event.deltaY / 100
@@ -105,7 +104,7 @@ export class SkeuomorphSliderComponent implements OnInit {
     }
   }
 
-  @HostListener('mousedown', ['$event'])
+  @HostListener('mousedown', [ '$event' ])
   onMouseDown (event) {
     if (!this.disabled) {
       this.dragging = true
@@ -119,7 +118,7 @@ export class SkeuomorphSliderComponent implements OnInit {
     }
   }
 
-  @HostListener('mousemove', ['$event'])
+  @HostListener('mousemove', [ '$event' ])
   onMouseMove (event) {
     if (!this.disabled && this.dragging) {
       this.value = this.getValueFromMouseEvent(event)
@@ -127,7 +126,7 @@ export class SkeuomorphSliderComponent implements OnInit {
     }
   }
 
-  @HostListener('mouseup', ['$event'])
+  @HostListener('mouseup', [ '$event' ])
   onMouseUp () {
     this.dragging = false
   }
@@ -154,7 +153,7 @@ export class SkeuomorphSliderComponent implements OnInit {
   ngOnInit () {
     if (this.showNotches) {
       this.drawNotches()
-      setTimeout(this.drawNotches.bind(this))
+      setTimeout(() => this.drawNotches())
     }
   }
 
@@ -171,7 +170,6 @@ export class SkeuomorphSliderComponent implements OnInit {
       value += step
       this.value = value
     }
-    return
   }
 
   @HostListener('window:resize')
@@ -186,9 +184,9 @@ export class SkeuomorphSliderComponent implements OnInit {
     const gap = (height - padding * 2) / 10
     ctx.strokeStyle = '#559e7d'
     for (let i = 0; i <= 10; i++) {
-      const y = Math.round(padding + gap * i) - .5
+      const y = Math.round(padding + gap * i) - 0.5
       ctx.beginPath()
-      const lineWidth = [0, 5, 10].includes(i) ? width : (width * 0.9)
+      const lineWidth = [ 0, 5, 10 ].includes(i) ? width : (width * 0.9)
       ctx.moveTo((width - lineWidth) / 1, y)
       ctx.lineTo(lineWidth, y)
       ctx.stroke()
@@ -198,6 +196,6 @@ export class SkeuomorphSliderComponent implements OnInit {
   }
 
   calculateTop () {
-    return this.utils.mapValue(this._value, this.min, this.max, this.elRef.nativeElement.offsetHeight - 25, 0) + 'px'
+    return `${this.utils.mapValue(this._value, this.min, this.max, parseInt(this.elRef.nativeElement.offsetHeight) - 25, 0)}px`
   }
 }

ui/src/app/modules/eqmac-components/components/toggle/toggle.component.ts

@@ -3,12 +3,9 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 @Component({
   selector: 'eqm-toggle',
   templateUrl: './toggle.component.html',
-  styleUrls: ['./toggle.component.scss']
+  styleUrls: [ './toggle.component.scss' ]
 })
 export class ToggleComponent implements OnInit {
-
-  constructor () { }
-
   @Input() state = false
   @Output() stateChange = new EventEmitter()
 

ui/src/app/modules/eqmac-components/components/tooltip/tooltip-container.component.ts

@@ -16,10 +16,8 @@ import { FadeInOutAnimation } from '../../../animations/fade-in-out'
       </eqm-tooltip>
     </div>
   `,
-  animations: [FadeInOutAnimation]
+  animations: [ FadeInOutAnimation ]
 })
 export class TooltipContainerComponent {
-
   constructor (public tooltipService: TooltipService) {}
-
 }

ui/src/app/modules/eqmac-components/components/tooltip/tooltip.component.ts

@@ -6,13 +6,13 @@ import {
   ViewChild
 } from '@angular/core'
 import { UtilitiesService } from '../../services/utilities.service'
-import { SafeStyle, DomSanitizer } from '@angular/platform-browser'
+import { DomSanitizer } from '@angular/platform-browser'
 
 export type TooltipPositionSide = 'top' | 'bottom' | 'left' | 'right'
 @Component({
   selector: 'eqm-tooltip',
   templateUrl: './tooltip.component.html',
-  styleUrls: ['./tooltip.component.scss']
+  styleUrls: [ './tooltip.component.scss' ]
 })
 export class TooltipComponent implements OnInit {
   @Input() text: string
@@ -49,12 +49,11 @@ export class TooltipComponent implements OnInit {
     const viewHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
     const viewWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
     const tooltipEl = this.tooltip.nativeElement
-    const tooltipWidth = tooltipEl.offsetWidth + 3
+    const tooltipWidth = parseInt(tooltipEl.offsetWidth) + 3
-    const tooltipHeight = tooltipEl.offsetHeight + 2
+    const tooltipHeight = parseInt(tooltipEl.offsetHeight) + 2
     const parentEl = this.parent.nativeElement
     const parentPosition = this.utils.getElementPosition(parentEl)
-    const parentWidth = parentEl.offsetWidth
+    const parentHeight = parseInt(parentEl.offsetHeight)
-    const parentHeight = parentEl.offsetHeight
 
     x = parentPosition.x
     y = parentPosition.y
@@ -98,14 +97,12 @@ export class TooltipComponent implements OnInit {
     let angle = 0
     const style: { [style: string]: string } = {}
     const tooltipEl = this.tooltip.nativeElement
-    const tooltipWidth = tooltipEl.offsetWidth
     const tooltipHeight = tooltipEl.offsetHeight
     const tooltipPosition = this.utils.getElementPosition(tooltipEl)
 
     const parentEl = this.parent.nativeElement
     const parentPosition = this.utils.getElementPosition(parentEl)
     const parentWidth = parentEl.offsetWidth
-    const parentHeight = parentEl.offsetHeight
 
     x = parentPosition.x + parentWidth / 2 - tooltipPosition.x - arrowSize / 2 + 3
     if (this.positionSide === 'top') {
@@ -126,5 +123,4 @@ export class TooltipComponent implements OnInit {
 
     return style
   }
-
 }

ui/src/app/modules/eqmac-components/components/tooltip/tooltip.directive.ts

@@ -51,5 +51,4 @@ export class TooltipDirective implements OnDestroy {
   destroy (): void {
     this.tooltipService.components = []
   }
-
 }

ui/src/app/modules/eqmac-components/components/tooltip/tooltip.service.ts

@@ -4,6 +4,5 @@ import { Injectable } from '@angular/core'
   providedIn: 'root'
 })
 export class TooltipService {
-
   components: any[] = []
 }

ui/src/app/modules/eqmac-components/components/value-screen/value-screen.component.ts

@@ -1,20 +1,17 @@
 import {
   Component,
   OnInit,
-  Input,
+  Input
-  HostBinding
 } from '@angular/core'
 
 @Component({
   selector: 'eqm-value-screen',
   templateUrl: './value-screen.component.html',
-  styleUrls: ['./value-screen.component.scss']
+  styleUrls: [ './value-screen.component.scss' ]
 })
 export class ValueScreenComponent implements OnInit {
   @Input() fontSize = 10
   @Input() disabled = false
-  constructor () {}
 
   ngOnInit () {}
-
 }

ui/src/app/modules/eqmac-components/components/vent/vent.component.ts

@@ -3,11 +3,9 @@ import { Component, OnInit } from '@angular/core'
 @Component({
   selector: 'eqm-vent',
   template: '',
-  styleUrls: ['./vent.component.scss']
+  styleUrls: [ './vent.component.scss' ]
 })
 export class VentComponent implements OnInit {
-  constructor () { }
-
   ngOnInit () {
   }
 }

ui/src/app/modules/eqmac-components/directives/clicked-outside.directive.ts

@@ -1,6 +1,6 @@
-import { Component, Directive, EventEmitter, HostListener, Output } from "@angular/core";
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core'
 
-@Directive({ selector: `[clickedOutside]` })
+@Directive({ selector: '[clickedOutside]' })
 export class ClickedOutsideDirective {
   @Output() clickedOutside = new EventEmitter()
 
@@ -9,6 +9,7 @@ export class ClickedOutsideDirective {
   insideClick () {
     this.inside = true
   }
+
   @HostListener('document:click')
   outsideClick () {
     if (!this.inside) {
@@ -16,4 +17,4 @@ export class ClickedOutsideDirective {
     }
     this.inside = false
   }
-}
+}

ui/src/app/modules/eqmac-components/directives/mousewheel.directive.ts

@@ -4,21 +4,20 @@ import { Directive, Output, HostListener, EventEmitter } from '@angular/core'
 export class MouseWheelDirective {
   @Output() mouseWheel = new EventEmitter()
 
-  @HostListener('mousewheel', ['$event']) onMouseWheelChrome (event: any) {
+  @HostListener('mousewheel', [ '$event' ]) onMouseWheelChrome (event: any) {
     this.mouseWheelFunc(event)
   }
 
-  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox (event: any) {
+  @HostListener('DOMMouseScroll', [ '$event' ]) onMouseWheelFirefox (event: any) {
     this.mouseWheelFunc(event)
   }
 
-  @HostListener('onmousewheel', ['$event']) onMouseWheelIE (event: any) {
+  @HostListener('onmousewheel', [ '$event' ]) onMouseWheelIE (event: any) {
     this.mouseWheelFunc(event)
   }
 
   mouseWheelFunc (event: any) {
     event = window.event || event // old IE support
-    const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))
     this.mouseWheel.emit(event)
     // for IE
     event.returnValue = false
@@ -27,5 +26,4 @@ export class MouseWheelDirective {
       event.preventDefault()
     }
   }
-
 }

ui/src/app/modules/eqmac-components/eqmac-components.module.ts

@@ -1,5 +1,5 @@
 import {
-  NgModule, TemplateRef
+  NgModule
 } from '@angular/core'
 import {
   CommonModule
@@ -46,7 +46,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CarouselComponent, CarouselItemDirective, CarouselItemElement } from './components/carousel/carousel.component'
 import { QuestionComponent } from './components/question/question.component'
 import { ClickedOutsideDirective } from './directives/clicked-outside.directive'
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling'
 import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component'
 
 @NgModule({

ui/src/app/modules/eqmac-components/services/utilities.service.ts

@@ -2,14 +2,16 @@ import { Injectable } from '@angular/core'
 
 @Injectable()
 export class UtilitiesService {
-  constructor () { }
-
   mapValue (value: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
     return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin
   }
 
   logMapValue ({ value, inMin, inMax, outMin, outMax }: {
-    value: number, inMin: number, inMax: number, outMin: number, outMax: number
+    value: number
+    inMin: number
+    inMax: number
+    outMin: number
+    outMax: number
   }) {
     outMin = Math.log(outMin)
     outMax = Math.log(outMax)
@@ -18,7 +20,11 @@ export class UtilitiesService {
   }
 
   logMapValueInverse ({ value, inMin, inMax, outMin, outMax }: {
-    value: number, inMin: number, inMax: number, outMin: number, outMax: number
+    value: number
+    inMin: number
+    inMax: number
+    outMin: number
+    outMax: number
   }) {
     inMin = Math.log(inMin || 1)
     inMax = Math.log(inMax)
@@ -31,7 +37,7 @@ export class UtilitiesService {
   getImageFromSrcWhenLoaded (src) {
     return new Promise<HTMLImageElement>((resolve, reject) => {
       const image = new Image()
-      image.crossOrigin = 'anonymous'  // This enables CORS
+      image.crossOrigin = 'anonymous' // This enables CORS
       image.onload = () => resolve(image)
       image.onerror = () => reject(image)
       image.src = src
@@ -52,12 +58,12 @@ export class UtilitiesService {
     return this.getImageFromSrcWhenLoaded(this.getBackgroundImageSrcFromClass(className))
   }
 
-  getRandomFloatInRange (min, max) {
+  getRandomFloatInRange (min: number, max: number) {
     return (Math.random() * (max - min) + min)
   }
 
   getCoordinatesInsideElementFromEvent (event: MouseEvent, element?) {
-    let el = element || event.target
+    const el = element || event.target
     const rect = el.getBoundingClientRect()
     return {
       x: event.clientX - rect.left,
@@ -75,7 +81,7 @@ export class UtilitiesService {
     const rect = el.getBoundingClientRect()
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-    return { y: rect.top + scrollTop, x: rect.left + scrollLeft }
+    return { y: parseInt(rect.top) + scrollTop, x: parseInt(rect.left) + scrollLeft }
   }
 
   hexToRgb (hex: string) {
@@ -86,7 +92,7 @@ export class UtilitiesService {
         g: result[2],
         b: result[3]
       }
-      for (const [color, hex] of Object.entries(rgb)) {
+      for (const [ color, hex ] of Object.entries(rgb)) {
         if ((hex as string).length < 2) rgb[color] = `${hex}${hex}`
         rgb[color] = parseInt(rgb[color], 16)
       }
@@ -99,5 +105,4 @@ export class UtilitiesService {
   rgbToHex ({ r, g, b }: { r: number, g: number, b: number }) {
     return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
   }
-
 }

ui/src/app/modules/pipes/clip-value.pipe.ts

@@ -4,11 +4,9 @@ import { Pipe, PipeTransform } from '@angular/core'
   name: 'clipValue'
 })
 export class ClipValuePipe implements PipeTransform {
-
   transform (value: number, min: number, max: number): number {
     if (value < min) { return min }
     if (value > max) { return max }
     return value
   }
-
 }

ui/src/app/modules/pipes/fix-float.pipe.ts

@@ -4,7 +4,6 @@ import { Pipe, PipeTransform } from '@angular/core'
   name: 'fixFloat'
 })
 export class FixFloatPipe implements PipeTransform {
-
   transform (value: number, fixTo: number, showZeros = true) {
     let fixedValue: any = value.toFixed(fixTo)
     if (!showZeros) {
@@ -12,5 +11,4 @@ export class FixFloatPipe implements PipeTransform {
     }
     return fixedValue
   }
-
 }

ui/src/app/modules/pipes/map-value.pipe.ts

@@ -4,9 +4,7 @@ import { Pipe, PipeTransform } from '@angular/core'
   name: 'mapValue'
 })
 export class MapValuePipe implements PipeTransform {
-  constructor () {}
   transform (value: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
     return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin
   }
-
 }

ui/src/app/sections/effects/effect.service.ts

@@ -17,6 +17,6 @@ export class EffectService extends DataService {
   }
 
   onEnabledChanged (callback: (enabled: boolean) => void) {
-    this.on(`/enabled`, ({ enabled }) => callback(enabled))
+    this.on('/enabled', ({ enabled }) => callback(enabled))
   }
 }

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

@@ -15,7 +15,7 @@ import { ApplicationService } from '../../../../services/app.service'
 @Component({
   selector: 'eqm-advanced-equalizer',
   templateUrl: './advanced-equalizer.component.html',
-  styleUrls: ['./advanced-equalizer.component.scss']
+  styleUrls: [ './advanced-equalizer.component.scss' ]
 })
 export class AdvancedEqualizerComponent extends EqualizerComponent implements OnInit {
   @Input() enabled = true
@@ -26,7 +26,8 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
     value: false,
     toggled: (show) => this.service.setShowDefaultPresets(show)
   }
-  settings: Options = [[
+
+  settings: Options = [ [
     {
       type: 'button',
       label: 'Import Presets',
@@ -38,7 +39,8 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
     }
   ], [
     this.ShowDefaultPresetsCheckbox
-  ]]
+  ] ]
+
   public _presets: AdvancedEqualizerPreset[]
   @Output() presetsChange = new EventEmitter<AdvancedEqualizerPreset[]>()
   set presets (newPresets: AdvancedEqualizerPreset[]) {
@@ -46,10 +48,11 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
     [
       newPresets.find(p => p.id === 'manual'),
       newPresets.find(p => p.id === 'flat'),
-      ...newPresets.filter(p => !['manual', 'flat'].includes(p.id)).sort((a, b) => a.name > b.name ? 1 : -1)
+      ...newPresets.filter(p => ![ 'manual', 'flat' ].includes(p.id)).sort((a, b) => a.name > b.name ? 1 : -1)
     ]
     this.presetsChange.emit(this.presets)
   }
+
   get presets () { return this._presets }
 
   public _selectedPreset: AdvancedEqualizerPreset
@@ -58,10 +61,11 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
     this._selectedPreset = newSelectedPreset
     this.selectedPresetChange.emit(this.selectedPreset)
   }
-  get selectedPreset () { return this._selectedPreset }
-  bandFrequencyLabels = ['32', '64', '125', '250', '500', '1K', '2K', '4K', '8K', '16K']
 
-  bands = [...Array(10)].map(() => 0)
+  get selectedPreset () { return this._selectedPreset }
+  bandFrequencyLabels = [ '32', '64', '125', '250', '500', '1K', '2K', '4K', '8K', '16K' ]
+
+  bands = [ ...Array(10) ].map(() => 0)
   global = 0
 
   stickSlidersToMiddle = true
@@ -80,7 +84,7 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
         this.change.detectChanges()
       })
     }
-    for (const [i, gain] of this.selectedPreset.gains.bands.entries()) {
+    for (const [ i, gain ] of this.selectedPreset.gains.bands.entries()) {
       const currentGain = this.bands[i]
       if (currentGain !== gain) {
         this.stickSlidersToMiddle = false
@@ -101,7 +105,7 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
     public transition: TransitionService,
     public change: ChangeDetectorRef,
     public app: ApplicationService
-    ) {
+  ) {
     super()
     this.getImportLegacyAvailable()
   }
@@ -134,6 +138,7 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
       )
     }
   }
+
   public async syncPresets () {
     const [ presets, selectedPreset ] = await Promise.all([
       this.service.getPresets(),

ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.service.ts

@@ -24,27 +24,27 @@ export class AdvancedEqualizerService extends EqualizersService {
   }
 
   createPreset (preset: AdvancedEqualizerPreset, select: boolean = false) {
-    return this.request({ method: 'POST', endpoint: `/presets`, data: { ...preset, select } })
+    return this.request({ method: 'POST', endpoint: '/presets', data: { ...preset, select } })
   }
 
   updatePreset (preset: AdvancedEqualizerPreset, opts?: { select?: boolean, transition?: boolean }) {
     return this.request({
       method: 'POST',
-      endpoint: `/presets`,
+      endpoint: '/presets',
       data: {
-        ...preset,
+        // ...preset,
-        select: opts && opts.select,
+        select: opts?.select,
-        transition: opts && opts.transition
+        transition: opts?.transition
       }
     })
   }
 
   selectPreset (preset: AdvancedEqualizerPreset) {
-    return this.request({ method: 'POST', endpoint: `/presets/select`, data: { ...preset } })
+    return this.request({ method: 'POST', endpoint: '/presets/select', data: { ...preset } })
   }
 
   deletePreset (preset: AdvancedEqualizerPreset) {
-    return this.request({ method: 'DELETE', endpoint: `/presets`, data: { ...preset } })
+    return this.request({ method: 'DELETE', endpoint: '/presets', data: { ...preset } })
   }
 
   async getImportLegacyAvailable () {
@@ -81,10 +81,10 @@ export class AdvancedEqualizerService extends EqualizersService {
   }
 
   onPresetsChanged (callback: (presets: AdvancedEqualizerPreset[]) => void) {
-    this.on(`/presets`, (presets) => callback(presets))
+    this.on('/presets', (presets) => callback(presets))
   }
 
   onSelectedPresetChanged (callback: (preset: AdvancedEqualizerPreset) => void) {
-    this.on(`/presets/selected`, (preset) => callback(preset))
+    this.on('/presets/selected', (preset) => callback(preset))
   }
 }

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

@@ -1,16 +1,15 @@
 import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'
 import { BasicEqualizerService, BasicEqualizerPreset, BasicEqualizerBand, BasicEqualizerPresetGains } from './basic-equalizer.service'
-import { BridgeService } from '../../../../services/bridge.service'
 import { EqualizerComponent } from '../equalizer.component'
 import { KnobValueChangedEvent } from '../../../../modules/eqmac-components/components/knob/knob.component'
 import { TransitionService } from '../../../../services/transitions.service'
 import { ApplicationService } from '../../../../services/app.service'
-import { UISettings, UIService } from '../../../../services/ui.service'
+import { UIService } from '../../../../services/ui.service'
 
 @Component({
   selector: 'eqm-basic-equalizer',
   templateUrl: './basic-equalizer.component.html',
-  styleUrls: ['./basic-equalizer.component.scss']
+  styleUrls: [ './basic-equalizer.component.scss' ]
 })
 export class BasicEqualizerComponent extends EqualizerComponent implements OnInit {
   @Input() enabled = true
@@ -20,6 +19,7 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
     mid: 0,
     treble: 0
   }
+
   peakLimiter = false
 
   replaceKnobsWithSliders = false
@@ -31,10 +31,11 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
     [
       newPresets.find(p => p.id === 'manual'),
       newPresets.find(p => p.id === 'flat'),
-      ...newPresets.filter(p => !['manual', 'flat'].includes(p.id)).sort((a, b) => a.name > b.name ? 1 : -1)
+      ...newPresets.filter(p => ![ 'manual', 'flat' ].includes(p.id)).sort((a, b) => a.name > b.name ? 1 : -1)
     ]
     this.presetsChange.emit(this.presets)
   }
+
   get presets () { return this._presets }
 
   public _selectedPreset: BasicEqualizerPreset
@@ -43,6 +44,7 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
     this._selectedPreset = newSelectedPreset
     this.selectedPresetChange.emit(this.selectedPreset)
   }
+
   get selectedPreset () { return this._selectedPreset }
 
   settings = []
@@ -108,8 +110,8 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
     // TODO: Refactor this bollocks
     this.peakLimiter = this.selectedPreset.peakLimiter || false
 
-    for (const [type, gain] of Object.entries(this.selectedPreset.gains)) {
+    for (const [ type, gain ] of Object.entries(this.selectedPreset.gains)) {
-      const currentGain: number = this.gains[type]
+      const currentGain = this.gains[type] as number
       if (currentGain !== gain) {
         this.stickSlidersToMiddle = false
         this.change.detectChanges()

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

@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core'
 import { EqualizersService } from '../equalizers.service'
 import { EqualizerPreset } from '../presets/equalizer-presets.component'
-import { JSONEncodable, JSONData } from '../../../../services/data.service'
 
-export type BasicEqualizerPresetGains = {
+export interface BasicEqualizerPresetGains {
   bass: number
   mid: number
   treble: number
@@ -31,34 +30,34 @@ export class BasicEqualizerService extends EqualizersService {
   }
 
   createPreset (preset: BasicEqualizerPreset, select: boolean = false) {
-    return this.request({ method: 'POST', endpoint: `/presets`, data: { ...preset, select } })
+    return this.request({ method: 'POST', endpoint: '/presets', data: { ...preset, select } as any })
   }
 
   updatePreset (preset: BasicEqualizerPreset, opts?: { select?: boolean, transition?: boolean }) {
     return this.request({
       method: 'POST',
-      endpoint: `/presets`,
+      endpoint: '/presets',
       data: {
         ...preset,
-        select: opts && opts.select,
+        select: opts?.select,
-        transition: opts && opts.transition
+        transition: opts?.transition
-      }
+      } as any
     })
   }
 
   selectPreset (preset: BasicEqualizerPreset) {
-    return this.request({ method: 'POST', endpoint: `/presets/select`, data: { ...preset } })
+    return this.request({ method: 'POST', endpoint: '/presets/select', data: { ...preset } as any })
   }
 
   deletePreset (preset: BasicEqualizerPreset) {
-    return this.request({ method: 'DELETE', endpoint: `/presets`, data: { ...preset } })
+    return this.request({ method: 'DELETE', endpoint: '/presets', data: { ...preset } as any })
   }
 
   onPresetsChanged (callback: (presets: BasicEqualizerPreset[]) => void) {
-    this.on(`/presets`, (presets) => callback(presets))
+    this.on('/presets', (presets) => callback(presets))
   }
 
   onSelectedPresetChanged (callback: (preset: BasicEqualizerPreset) => void) {
-    this.on(`/presets/selected`, (preset) => callback(preset))
+    this.on('/presets/selected', (preset) => callback(preset))
   }
 }

ui/src/app/sections/effects/equalizers/equalizer.component.ts

@@ -1,9 +1,10 @@
-import { Option, Options } from 'src/app/components/options/options.component'
+import { Options } from 'src/app/components/options/options.component'
 import { AdditionalPresetOption, EqualizerPreset } from './presets/equalizer-presets.component'
-import { Input } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { MatDialogRef } from '@angular/material/dialog'
 import { OptionsDialogComponent } from '../../../components/options-dialog/options-dialog.component'
 
+@Component({ template: '' })
 export abstract class EqualizerComponent {
   @Input() animationDuration = 500
   @Input() animationFps = 30

ui/src/app/sections/effects/equalizers/equalizers.component.ts

@@ -12,7 +12,7 @@ import { UIService } from '../../../services/ui.service'
 @Component({
   selector: 'eqm-equalizers',
   templateUrl: './equalizers.component.html',
-  styleUrls: ['./equalizers.component.scss'],
+  styleUrls: [ './equalizers.component.scss' ],
   animations: [ FadeInOutAnimation ]
 })
 export class EqualizersComponent implements OnInit {
@@ -38,6 +38,7 @@ export class EqualizersComponent implements OnInit {
     this.changeRef.detectChanges()
     this.activeEqualizer = this.getEqualizerFromType(this.type)
   }
+
   get type () { return this._type }
 
   gain: number = 0
@@ -48,8 +49,8 @@ export class EqualizersComponent implements OnInit {
     public equalizersService: EqualizersService,
     public dialog: MatDialog,
     public ui: UIService,
-    private changeRef: ChangeDetectorRef
+    private readonly changeRef: ChangeDetectorRef
-    ) { }
+  ) { }
 
   async ngOnInit () {
     await this.sync()
@@ -132,5 +133,4 @@ export class EqualizersComponent implements OnInit {
   selectPreset (preset: EqualizerPreset) {
     return this.activeEqualizer.selectPreset(preset)
   }
-
 }

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

@@ -20,7 +20,7 @@ export interface AdditionalPresetOption {
 @Component({
   selector: 'eqm-equalizer-presets',
   templateUrl: './equalizer-presets.component.html',
-  styleUrls: ['./equalizer-presets.component.scss']
+  styleUrls: [ './equalizer-presets.component.scss' ]
 })
 export class EqualizerPresetsComponent implements OnInit {
   @Input() presets: EqualizerPreset[]
@@ -62,7 +62,7 @@ export class EqualizerPresetsComponent implements OnInit {
             data: {
               confirmText: 'Yes, save',
               cancelText: 'No, cancel',
-              text: `A Default preset with this name already exists. Would you like to use this name anyway? You might see Duplicate names in the Preset list.`
+              text: 'A Default preset with this name already exists. Would you like to use this name anyway? You might see Duplicate names in the Preset list.'
             }
           }).afterClosed().toPromise()
           if (!saveAnyway) return this.savePreset(presetName)
@@ -73,7 +73,7 @@ export class EqualizerPresetsComponent implements OnInit {
             data: {
               confirmText: 'Yes, overwrite',
               cancelText: 'No, cancel',
-              text: `A preset with this name already exists. Would you like to overwrite it?`
+              text: 'A preset with this name already exists. Would you like to overwrite it?'
             }
           }).afterClosed().toPromise()
           if (!overwrite) return this.savePreset(presetName)
@@ -90,7 +90,7 @@ export class EqualizerPresetsComponent implements OnInit {
       data: {
         confirmText: 'Yes, remove',
         cancelText: 'No, cancel',
-        text: `Are you sure you want to remove this Preset?`
+        text: 'Are you sure you want to remove this Preset?'
       }
     }).afterClosed().toPromise()
 
@@ -98,5 +98,4 @@ export class EqualizerPresetsComponent implements OnInit {
       this.presetDeleted.emit()
     }
   }
-
 }

ui/src/app/sections/effects/reverb/reverb.component.ts

@@ -11,7 +11,7 @@ import {
 @Component({
   selector: 'eqm-reverb',
   templateUrl: './reverb.component.html',
-  styleUrls: ['./reverb.component.scss']
+  styleUrls: [ './reverb.component.scss' ]
 })
 export class ReverbComponent implements OnInit {
   presets = []
@@ -51,7 +51,6 @@ export class ReverbComponent implements OnInit {
     this.getSelectedPreset()
     this.getMix()
     this.getEnabled()
-
   }
 
   async getPresets () {
@@ -87,5 +86,4 @@ export class ReverbComponent implements OnInit {
     this.hide = !this.hide
     this.visibilityToggled.emit()
   }
-
 }

ui/src/app/sections/header/header.component.ts

@@ -9,7 +9,7 @@ import { SettingsService, IconMode } from '../settings/settings.service'
 @Component({
   selector: 'eqm-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
+  styleUrls: [ './header.component.scss' ],
   animations: [ FadeInOutAnimation ]
 })
 export class HeaderComponent implements OnInit {
@@ -25,7 +25,7 @@ export class HeaderComponent implements OnInit {
     public ui: UIService,
     public dialog: MatDialog,
     public settings: SettingsService
-    ) { }
+  ) { }
 
   async ngOnInit () {
     await this.sync()
@@ -41,8 +41,8 @@ export class HeaderComponent implements OnInit {
     this.uiMode = await this.ui.getMode()
   }
 
-  setShowBoolean (name, bool) {
+  setShowBoolean (name: string, bool: boolean) {
-    if (this.showBooleanDebouncers.hasOwnProperty(name)) {
+    if (name in this.showBooleanDebouncers) {
       clearTimeout(this.showBooleanDebouncers[name])
       delete this.showBooleanDebouncers[name]
       this[name] = bool
@@ -104,5 +104,4 @@ export class HeaderComponent implements OnInit {
   //   this.mode = this.mode === 'window' ? 'popover' : 'window'
   //   return this.ui.setMode(this.mode)
   // }
-
 }

ui/src/app/sections/help/help.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { Option, Options } from 'src/app/components/options/options.component'
+import { Options } from 'src/app/components/options/options.component'
 import { ApplicationService, MacInfo } from 'src/app/services/app.service'
 import { ConstantsService } from 'src/app/services/constants.service'
 import { version } from '../../../../package.json'
@@ -8,7 +8,7 @@ import { UIService } from '../../services/ui.service.js'
 @Component({
   selector: 'eqm-help',
   templateUrl: './help.component.html',
-  styleUrls: ['./help.component.scss']
+  styleUrls: [ './help.component.scss' ]
 })
 export class HelpComponent implements OnInit {
   options: Options = [

ui/src/app/sections/outputs/outputs.component.ts

@@ -4,7 +4,7 @@ import { OutputsService, Output } from './outputs.service'
 @Component({
   selector: 'eqm-outputs',
   templateUrl: './outputs.component.html',
-  styleUrls: ['./outputs.component.scss']
+  styleUrls: [ './outputs.component.scss' ]
 })
 export class OutputsComponent implements OnInit {
   outputs: Output[]

ui/src/app/sections/outputs/outputs.service.ts

@@ -18,7 +18,7 @@ export type DeviceTransportType =
 export interface Output {
   id: number
   name: string
-  transportType: DeviceTransportType,
+  transportType: DeviceTransportType
   icon?: IconName
 }
 @Injectable({

ui/src/app/sections/recorder/recorder.component.ts

@@ -4,7 +4,7 @@ import { UtilitiesService } from '../../services/utilities.service'
 @Component({
   selector: 'eqm-recorder',
   templateUrl: './recorder.component.html',
-  styleUrls: ['./recorder.component.scss']
+  styleUrls: [ './recorder.component.scss' ]
 })
 export class RecorderComponent implements OnInit {
   recording = false
@@ -29,5 +29,4 @@ export class RecorderComponent implements OnInit {
       }, 1000)
     }
   }
-
 }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { Option, CheckboxOption, ButtonOption, Options, SelectOption } from 'src/app/components/options/options.component'
+import { CheckboxOption, ButtonOption, Options, SelectOption } from 'src/app/components/options/options.component'
 import { SettingsService, IconMode } from './settings.service'
 import { ApplicationService } from '../../services/app.service'
 import { MatDialog } from '@angular/material/dialog'
@@ -9,7 +9,7 @@ import { UIService } from '../../services/ui.service'
 @Component({
   selector: 'eqm-settings',
   templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.scss']
+  styleUrls: [ './settings.component.scss' ]
 })
 export class SettingsComponent implements OnInit {
   launchOnStartupOption: CheckboxOption = {
@@ -29,7 +29,7 @@ export class SettingsComponent implements OnInit {
   iconModeOption: SelectOption = {
     type: 'select',
     label: 'Show Icon',
-    options: [{
+    options: [ {
       id: IconMode.dock,
       label: 'Dock'
     }, {
@@ -38,7 +38,7 @@ export class SettingsComponent implements OnInit {
     }, {
       id: IconMode.statusBar,
       label: 'Status Bar'
-    }],
+    } ],
     selectedId: IconMode.both,
     selected: async iconMode => {
       const uiMode = await this.ui.getMode()
@@ -48,6 +48,7 @@ export class SettingsComponent implements OnInit {
       await this.settingsService.setIconMode(iconMode as IconMode)
     }
   }
+
   uninstallOption: ButtonOption = {
     type: 'button',
     label: 'Uninstall eqMac',

ui/src/app/sections/settings/settings.service.ts

@@ -31,7 +31,7 @@ export class SettingsService extends DataService {
     return this.request({ method: 'POST', endpoint: '/icon-mode', data: { mode } })
   }
 
-    // async getMode () {
+  // async getMode () {
   //   const { mode } = await this.request({ method: 'GET', endpoint: '/mode' })
   //   return mode as UIMode
   // }

ui/src/app/sections/source/file/file.component.ts

@@ -19,7 +19,7 @@ interface FileMeta {
 @Component({
   selector: 'eqm-file',
   templateUrl: './file.component.html',
-  styleUrls: ['./file.component.scss']
+  styleUrls: [ './file.component.scss' ]
 })
 
 export class FileComponent implements OnInit, OnDestroy {
@@ -27,6 +27,7 @@ export class FileComponent implements OnInit, OnDestroy {
     name: null,
     duration: 0
   }
+
   public syncedOnce = false
   public progressProjectionInterval = null
   public progressSetDebouncer = null
@@ -95,14 +96,13 @@ export class FileComponent implements OnInit, OnDestroy {
     ]
     if (this.selected || !this.syncedOnce) {
       thingsToSync.push(
-          this.getFile(),
+        this.getFile(),
-          this.getProgress(),
+        this.getProgress(),
-          this.getPlaybackState()
+        this.getPlaybackState()
-        )
+      )
     }
     await Promise.all(thingsToSync)
     this.syncedOnce = true
-
   }
 
   async getSelected () {
@@ -112,6 +112,7 @@ export class FileComponent implements OnInit, OnDestroy {
       this.selected = false
     }
   }
+
   async getFile () {
     try {
       this.meta = await this.fileService.getMeta()

ui/src/app/sections/source/file/file.service.ts

@@ -46,10 +46,10 @@ export class FileService extends SourceService {
   }
 
   onPlayingChanged (callback: (playing: boolean) => void) {
-    this.on(`/playing`, ({ playing }) => callback(playing))
+    this.on('/playing', ({ playing }) => callback(playing))
   }
 
   onProgressChanged (callback: (progress: number) => void) {
-    this.on(`/progress`, ({ progress }) => callback(progress))
+    this.on('/progress', ({ progress }) => callback(progress))
   }
 }

ui/src/app/sections/source/input/input.component.ts

@@ -10,10 +10,9 @@ export interface InputDevice {
 @Component({
   selector: 'eqm-input',
   templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss']
+  styleUrls: [ './input.component.scss' ]
 })
 export class InputComponent implements OnInit {
-
   constructor (public inputService: InputService) { }
 
   devices: InputDevice[] = []
@@ -36,7 +35,7 @@ export class InputComponent implements OnInit {
   }
 
   async syncSelectedDevice () {
-    const selectedDevice = await this.inputService.getDevice()
+    await this.inputService.getDevice()
   }
 
   protected setupEvents () {

ui/src/app/sections/source/source.component.ts

@@ -4,10 +4,9 @@ import { SourceService, SourceType } from './source.service'
 @Component({
   selector: 'eqm-source',
   templateUrl: './source.component.html',
-  styleUrls: ['./source.component.scss']
+  styleUrls: [ './source.component.scss' ]
 })
 export class SourceComponent implements OnInit {
-
   source: SourceType = 'File'
   constructor (public sourceService: SourceService) { }
 
@@ -27,5 +26,4 @@ export class SourceComponent implements OnInit {
       this.sourceService.setSource(this.source)
     }
   }
-
 }

ui/src/app/sections/source/system/system.component.ts

@@ -3,13 +3,9 @@ import { Component, OnInit } from '@angular/core'
 @Component({
   selector: 'eqm-system',
   templateUrl: './system.component.html',
-  styleUrls: ['./system.component.scss']
+  styleUrls: [ './system.component.scss' ]
 })
 export class SystemComponent implements OnInit {
-
-  constructor () { }
-
   ngOnInit () {
   }
-
 }

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

@@ -3,12 +3,12 @@ import { BalanceService } from './balance.service'
 import { ApplicationService } from '../../../../services/app.service'
 import { KnobValueChangedEvent } from '../../../../modules/eqmac-components/components/knob/knob.component'
 import { FlatSliderValueChangedEvent } from '../../../../modules/eqmac-components/components/flat-slider/flat-slider.component'
-import { UIService, UISettings } from '../../../../services/ui.service'
+import { UIService } from '../../../../services/ui.service'
 
 @Component({
   selector: 'eqm-balance',
   templateUrl: './balance.component.html',
-  styleUrls: ['./balance.component.scss']
+  styleUrls: [ './balance.component.scss' ]
 })
 export class BalanceComponent implements OnInit {
   balance = 0

ui/src/app/sections/volume/booster-balance/balance/balance.service.ts

@@ -5,7 +5,6 @@ import { VolumeService } from '../../../../services/volume.service'
   providedIn: 'root'
 })
 export class BalanceService extends VolumeService {
-
   async getBalance () {
     const resp = await this.request({ method: 'GET', endpoint: '/balance' })
     return resp.balance

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

@@ -7,12 +7,12 @@ import {
 
 import { BoosterService } from './booster.service'
 import { ApplicationService } from '../../../../services/app.service'
-import { UIService, UISettings } from '../../../../services/ui.service'
+import { UIService } from '../../../../services/ui.service'
 
 @Component({
   selector: 'eqm-booster',
   templateUrl: './booster.component.html',
-  styleUrls: ['./booster.component.scss']
+  styleUrls: [ './booster.component.scss' ]
 })
 export class BoosterComponent implements OnInit {
   gain = 1

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

@@ -4,7 +4,7 @@ import { UIService } from '../../../services/ui.service'
 @Component({
   selector: 'eqm-volume-booster-balance',
   templateUrl: './volume-booster-balance.component.html',
-  styleUrls: ['./volume-booster-balance.component.scss']
+  styleUrls: [ './volume-booster-balance.component.scss' ]
 })
 export class VolumeBoosterBalanceComponent implements OnInit {
   hide = false
@@ -34,5 +34,4 @@ export class VolumeBoosterBalanceComponent implements OnInit {
     this.hide = !this.hide
     this.visibilityToggled.emit()
   }
-
 }

ui/src/app/sections/volume/volume-mixer/volume-mixer.component.html

@@ -1,3 +0,0 @@
-<p>
-  volume-mixer works!
-</p>

ui/src/app/sections/volume/volume-mixer/volume-mixer.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-
-@Component({
-  selector: 'eqm-volume-mixer',
-  templateUrl: './volume-mixer.component.html',
-  styleUrls: ['./volume-mixer.component.scss']
-})
-export class VolumeMixerComponent implements OnInit {
-
-  constructor () { }
-
-  ngOnInit () {
-  }
-
-}

ui/src/app/services/bridge.service.ts

@@ -47,7 +47,7 @@ export class BridgeService {
       if (window[bridgeCallbacksKey]) {
         return window[bridgeCallbacksKey].push(resolve)
       }
-      window[bridgeCallbacksKey] = [resolve]
+      window[bridgeCallbacksKey] = [ resolve ]
 
       const WVJBIframe = document.createElement('iframe')
       WVJBIframe.style.display = 'none'
@@ -78,6 +78,7 @@ export class BridgeService {
     bridge.registerHandler(event, async (data, cb) => {
       const handleError = (err: string | Error) => {
         console.error(err)
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
         cb({ error: err.toString() })
       }
       try {

ui/src/app/services/constants.service.ts

@@ -7,6 +7,6 @@ export class ConstantsService {
   readonly DOMAIN = 'eqmac.app'
   readonly FAQ_URL = new URL(`https://${this.DOMAIN}/faq`)
   readonly BUG_REPORT_URL = new URL(`https://${this.DOMAIN}/report-bug`)
-  readonly LOCAL_API_URL = `https://127.0.0.1`
+  readonly LOCAL_API_URL = 'https://127.0.0.1'
   readonly REMOTE_API_URL = `https://api.${this.DOMAIN}`
 }

ui/src/app/services/cookies.service.ts

@@ -10,6 +10,7 @@ export class CookiesService {
   constructor (
     public CONST: ConstantsService
   ) {}
+
   set (key: string, value: any) {
     if (typeof value !== 'string') {
       value = JSON.stringify(value)

ui/src/app/services/data.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core'
 import { BridgeService } from './bridge.service'
-import { Logger } from './logger.service'
 import { CookiesService } from './cookies.service'
 
 export type JSONEncodable = null | boolean | number | string | JSONData
@@ -27,7 +26,7 @@ export class DataService {
 
   async request (opts: RequestOptions): Promise<any> {
     if (opts.endpoint && opts.endpoint[0] !== '/') opts.endpoint = `/${opts.endpoint}`
-    const args: [string, any?] = [`${opts.method} ${this.route}${opts.endpoint || ''}`, opts.data]
+    const args: [string, any?] = [ `${opts.method} ${this.route}${opts.endpoint || ''}`, opts.data ]
     const resp = await this.bridge.call(...args)
     return resp
   }

ui/src/app/services/logger.service.ts

@@ -5,7 +5,7 @@ export class Logger {
     this.console('log', ...something)
   }
 
-  public static console (func: 'log' , ...something: any[]) {
+  public static console (func: 'log', ...something: any[]) {
     if (!environment.production) {
       console[func](...something)
     }

ui/src/app/services/transitions.service.ts

@@ -36,9 +36,9 @@ export class TransitionService extends DataService {
   perform (from: number, to: number, cb: (value: number) => any) {
     const distance = to - from
     const step = distance / this.FRAME_COUNT
-    const frames = [...Array(this.FRAME_COUNT)].map((_, i) => i + 1)
+    const frames = [ ...Array(this.FRAME_COUNT) ].map((_, i) => i + 1)
     for (const frame of frames) {
-      let delay = Math.round(this.FRAME_DURATION * frame)
+      const delay = Math.round(this.FRAME_DURATION * frame)
       setTimeout(() => {
         cb(from + step * frame)
       }, delay)

ui/src/app/services/ui.service.ts

@@ -1,8 +1,8 @@
-import { Injectable, EventEmitter } from '@angular/core'
+import { Injectable } from '@angular/core'
 import { DataService } from './data.service'
-import { Observable, Subject } from 'rxjs'
+import { Subject } from 'rxjs'
 
-export type UISettings = {
+export interface UISettings {
   replaceKnobsWithSliders?: boolean
 }
 
@@ -24,12 +24,12 @@ export class UIService extends DataService {
   settingsChanged = new Subject<UISettings>()
 
   readonly colors = {
-    'accent': '#4f8d71',
+    accent: '#4f8d71',
-    'warning': '#e80415',
+    warning: '#e80415',
     'gradient-start': '#5a5b5f',
     'gradient-end': '#2c2c2e',
-    'light': '#c9cdd0',
+    light: '#c9cdd0',
-    'dark': '#16191c'
+    dark: '#16191c'
   }
 
   get isLocal () {
@@ -84,5 +84,4 @@ export class UIService extends DataService {
     settings = await this.request({ method: 'POST', endpoint: '/settings', data: settings })
     this.settingsChanged.next(settings)
   }
-
 }

ui/src/main.ts

@@ -10,11 +10,11 @@ if (environment.production) {
 }
 
 platformBrowserDynamic()
-.bootstrapModule(AppModule)
+  .bootstrapModule(AppModule)
   .then(() => {
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.getRegistration('ngsw-worker.js')
-        .then(registration => registration && registration.unregister())
+        .then(async registration => await registration?.unregister())
     }
   })
   .catch(err => console.error(err))

ui/src/polyfills.ts

@@ -52,18 +52,18 @@
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
  **/
-import 'web-animations-js'  // Run `npm install --save web-animations-js`.
+import 'web-animations-js' // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
- /*
+/*
  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  * with the following flag, it will bypass `zone.js` patch for IE/Edge
  */
@@ -72,8 +72,7 @@ import 'web-animations-js'  // Run `npm install --save web-animations-js`.
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js/dist/zone' // Included with Angular CLI.
-
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

ui/src/tsconfig.app.json

@@ -6,7 +6,8 @@
     "resolveJsonModule": true
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "enableIvy": true,
+    "strictTemplates": true
   },
   "exclude": []
 }

ui/tsconfig.eslint.json

@@ -0,0 +1,17 @@
+{
+  // extend your base config to share compilerOptions, etc
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    // ensure that nobody can accidentally use this config for a build
+    "noEmit": true
+  },
+  "include": [
+    // whatever paths you intend to lint
+    "src",
+    "scripts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

ui/tsconfig.json

@@ -18,6 +18,6 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
   }
 }

ui/tslint.json

@@ -1,6 +0,0 @@
-{
-  "extends": "tslint-config-standard",
-  "rules": {
-    "no-empty": false
-  }
-}