added max width height to ui

native/app/Source/UI/UI.swift

@@ -35,6 +35,18 @@ class UI: StoreSubscriber {
   static var minHeight: Double {
     return state.minHeight * scale
   }
+  
+  static var minWidth: Double {
+    return state.minWidth * scale
+  }
+  
+  static var maxHeight: Double {
+    return state.maxHeight ?? 4000 * scale
+  }
+  
+  static var maxWidth: Double {
+    return state.maxWidth ?? 4000 * scale
+  }
 
   static var height: Double {
     get {
@@ -60,14 +72,17 @@ class UI: StoreSubscriber {
 
   static var minSize: NSSize {
     return NSSize(
-      width: 400 * scale,
+      width: minWidth,
       height: minHeight
     )
   }
 
   static var maxSize: NSSize {
     if isResizable {
-      return NSSize(width: 4000, height: 4000)
+      return NSSize(
+        width: maxWidth,
+        height: maxHeight
+      )
     } else {
       return minSize
     }

native/app/Source/UI/UIDataBus.swift

@@ -152,6 +152,40 @@ class UIDataBus: DataBus {
       Application.dispatchAction(UIAction.setMinHeight(minHeight))
       return "Min Height has been set"
     }
+    
+    self.on(.GET, "/min-width") { _, _ in
+      return [ "minWidth": self.state.minWidth ]
+    }
+
+    self.on(.POST, "/min-width") { data, _ in
+      guard let minWidth = data["minWidth"] as? Double else {
+        throw "Please provide a valid 'minWidth' parameter, must be a Float value"
+      }
+
+      Application.dispatchAction(UIAction.setMinWidth(minWidth))
+      return "Min Width has been set"
+    }
+    
+    self.on(.GET, "/max-height") { _, _ in
+      return [ "maxHeight": self.state.maxHeight ]
+    }
+
+    self.on(.POST, "/max-height") { data, _ in
+      let maxHeight = data["maxHeight"] as? Double
+      Application.dispatchAction(UIAction.setMaxHeight(maxHeight))
+      return "Max Height has been set"
+    }
+    
+    self.on(.GET, "/max-width") { _, _ in
+      return [ "maxWidth": self.state.maxWidth ]
+    }
+
+    self.on(.POST, "/max-width") { data, _ in
+      let maxWidth = data["maxWidth"] as? Double
+      Application.dispatchAction(UIAction.setMaxWidth(maxWidth))
+      return "Min Width has been set"
+    }
+    
 
     self.on(.GET, "/scale") { _, _ in
       return [ "scale": self.state.scale ]

native/app/Source/UI/UIState.swift

@@ -21,6 +21,9 @@ struct UIState: State {
   var statusItemIconType: StatusItemIconType = .classic
   var scale: Double = 1
   var minHeight: Double = 400
+  var minWidth: Double = 400
+  var maxHeight: Double?
+  var maxWidth: Double?
   var fromUI = false
 }
 
@@ -34,6 +37,9 @@ enum UIAction: Action {
   case setStatusItemIconType(StatusItemIconType)
   case setScale(Double)
   case setMinHeight(Double)
+  case setMinWidth(Double)
+  case setMaxHeight(Double?)
+  case setMaxWidth(Double?)
 }
 
 func UIStateReducer(action: Action, state: UIState?) -> UIState {
@@ -60,6 +66,12 @@ func UIStateReducer(action: Action, state: UIState?) -> UIState {
     state.scale = scale
   case .setMinHeight(let minHeight)?:
     state.minHeight = minHeight
+  case .setMinWidth(let minWidth)?:
+    state.minWidth = minWidth
+  case .setMaxHeight(let maxHeight)?:
+    state.maxHeight = maxHeight
+  case .setMaxWidth(let maxWidth)?:
+    state.maxWidth = maxWidth
   case .none:
     break
   }

ui/src/app/app.component.ts

@@ -88,10 +88,38 @@ export class AppComponent implements OnInit, AfterContentInit {
     return minHeight
   }
 
+  get minWidth () {
+    return 400
+  }
+
+  get maxHeight () {
+    const divider = 3
+
+    const {
+      volumeFeatureEnabled, balanceFeatureEnabled,
+      equalizersFeatureEnabled,
+      outputFeatureEnabled
+    } = this.ui.settings
+    let maxHeight = this.header.height + divider +
+      ((volumeFeatureEnabled || balanceFeatureEnabled) ? (this.volumeBoosterBalance.height + divider) : 0) +
+      (equalizersFeatureEnabled ? (this.equalizers.maxHeight + divider) : 0) +
+      (outputFeatureEnabled ? this.outputs.height : 0)
+
+    const dropdownSection = document.getElementById('dropdown-section')
+    if (dropdownSection) {
+      const dropdownHeight = dropdownSection.offsetHeight + this.header.height + divider
+      if (dropdownHeight > maxHeight) {
+        maxHeight = dropdownHeight
+      }
+    }
+
+    return maxHeight
+  }
+
   async ngOnInit () {
     await this.sync()
-    this.startHeightSync()
     await this.fixUIMode()
+    this.startDimensionsSync()
     await this.setupPrivacy()
   }
 
@@ -210,19 +238,39 @@ This data would help us improve and grow the product.`
     ])
   }
 
-  async startHeightSync () {
-    this.syncHeight()
+  async startDimensionsSync () {
     setInterval(() => {
-      this.syncHeight()
+      this.syncMinHeight()
+      this.syncMaxHeight()
     }, 1000)
   }
 
   private previousMinHeight
-  async syncHeight () {
+  async syncMinHeight () {
     const diff = this.minHeight - this.previousMinHeight
     this.previousMinHeight = this.minHeight
-    await this.ui.setMinHeight({ minHeight: this.minHeight })
-    if (diff < 0) {
+    if (diff !== 0) {
+      await this.ui.setMinHeight({ minHeight: this.minHeight })
+      this.ui.changeHeight({ diff })
+    }
+  }
+
+  private previousMinWidth
+  async syncMinWidth () {
+    const diff = this.minWidth - this.previousMinWidth
+    this.previousMinWidth = this.minWidth
+    if (diff !== 0) {
+      await this.ui.setMinWidth({ minWidth: this.minWidth })
+      this.ui.changeWidth({ diff })
+    }
+  }
+
+  private previousMaxHeight
+  async syncMaxHeight () {
+    const diff = this.maxHeight - this.previousMaxHeight
+    this.previousMaxHeight = this.maxHeight
+    if (diff !== 0) {
+      await this.ui.setMaxHeight({ maxHeight: this.maxHeight })
       this.ui.changeHeight({ diff })
     }
   }

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

@@ -32,6 +32,12 @@ 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 () {
+    switch (this.type) {
+      default: return this.height
+    }
+  }
+
   loaded = false
   enabled = true
   show = true

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

@@ -116,6 +116,12 @@ export class UIService extends DataService {
     return this.request({ method: 'POST', endpoint: '/width', data: { width } })
   }
 
+  async changeWidth ({ diff }: { diff: number }) {
+    const currentWidth = await this.getWidth()
+    const width = currentWidth + diff
+    await this.setWidth(width)
+  }
+
   async getHeight (): Promise<number> {
     const { height } = await this.request({ method: 'GET', endpoint: '/height' })
     return height
@@ -212,6 +218,33 @@ export class UIService extends DataService {
     return this.request({ method: 'POST', endpoint: '/min-height', data: { minHeight } })
   }
 
+  async getMinWidth (): Promise<number> {
+    const { minWidth } = await this.request({ method: 'GET', endpoint: '/min-width' })
+    return minWidth
+  }
+
+  async setMinWidth ({ minWidth }: { minWidth: number }) {
+    return this.request({ method: 'POST', endpoint: '/min-width', data: { minWidth } })
+  }
+
+  async getMaxHeight (): Promise<number | null> {
+    const { maxHeight } = await this.request({ method: 'GET', endpoint: '/max-height' })
+    return maxHeight
+  }
+
+  async setMaxHeight ({ maxHeight }: { maxHeight?: number }) {
+    return this.request({ method: 'POST', endpoint: '/max-height', data: { maxHeight } })
+  }
+
+  async getMaxWidth (): Promise<number | null> {
+    const { maxWidth } = await this.request({ method: 'GET', endpoint: '/max-width' })
+    return maxWidth
+  }
+
+  async setMaxWidth ({ maxWidth }: { maxWidth?: number }) {
+    return this.request({ method: 'POST', endpoint: '/max-width', data: { maxWidth } })
+  }
+
   onShownChanged (cb: UIShownChangedEventCallback) {
     this.on('/shown', cb)
   }