Voicemeeter-remote-frontend/src/app/component/Bus.tsx

"use client";
import { Button, ButtonGroup, Grid, Input, Slider, Stack } from "@mui/material";
import React from "react";
import { StripBusOutput, StripBusOutputEvent } from "./StripBusOutput";
import { EventCounter } from "@/utils/EventCounter";

export interface BusProps {
  values?: Partial<BusState>;
  onChange: (event: BusEvent) => any;
}

export interface BusState {
  gain: number;
  muted: boolean;
  selected: boolean;
}

export type BusEvent = BusMuted | BusGainChanged | BusSelectToggle;

export interface BusGainChanged {
  type: "StripGainChanged";
  gain: number;
}
export interface BusMuted {
  type: "StripMuted";
  muted: boolean;
}
export interface BusSelectToggle {
  type: "BusSelectToggle";
  selected: boolean;
}

export class Bus extends React.Component<BusProps, BusState> {
  private eventCounter = new EventCounter<"onSliderResetDefaults">();
  private defaultValues: BusState = {
    gain: 0,
    selected: false,
    muted: false,
  };
  constructor(props: BusProps) {
    super(props);
    const { values: initialValues } = props;
    const getValue = (name: keyof typeof this.defaultValues) => {
      if (initialValues === undefined) return this.defaultValues[name];
      return initialValues[name] !== undefined
        ? this.defaultValues[name]
        : initialValues[name];
    };
    this.state = Object.fromEntries(
      Object.entries(this.defaultValues).map(([name]) => [
        name,
        getValue(name as keyof typeof this.defaultValues) as any,
      ])
    ) as BusState;
    this.eventCounter.on({
      callback: this.onResetDefaults.bind(this),
      count: 2,
      name: "onSliderResetDefaults",
    });
  }
  onResetDefaults() {
    this.setState({ gain: this.defaultValues.gain });
  }
  onKeyDown(event: React.KeyboardEvent) {
    console.log(event);

    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      event.preventDefault();
    }
  }
  onGainChange(event: Event | React.ChangeEvent<HTMLInputElement>) {
    
    let changedGain =
      parseFloat((event.target as HTMLInputElement).value);
      if(changedGain > 12) changedGain = 12
      else if(changedGain < -60) changedGain = -60;
    this.setState({
      gain: changedGain,
    });
    this.props.onChange({
      type: "StripGainChanged",
      gain: changedGain,
    });
  }
  onStripWheel(event: React.WheelEvent) {
    console.log(event);
  }
  onSliderClick(event: React.MouseEvent) {
    this.stopPropagation(event);
    this.eventCounter.emit("onSliderResetDefaults");
  }
  onMuteToggle(event: React.MouseEvent) {
    this.stopPropagation(event);
    this.setState(
      (state) => ({ muted: !state.muted }),
      () => {
        this.props.onChange({ type: "StripMuted", muted: this.state.muted });
      }
    );
  }
  onSelectToggle(event: React.MouseEvent) {
    this.stopPropagation(event);
    this.setState(
      (state) => ({ selected: !state.selected }),
      () => {
        this.props.onChange({
          type: "BusSelectToggle",
          selected: this.state.selected,
        });
      }
    );
  }
  stopPropagation(event: Event | React.MouseEvent) {
    if (event instanceof Event) event.stopImmediatePropagation();
    else event.nativeEvent.stopImmediatePropagation();
  }
  render() {
    return (
      <>
        <Stack alignItems={"center"} direction={"row"} spacing={0}>
          <Input
            inputProps={{
              "aria-labelledby": "input-slider",
              itemType: "number",
              style:{padding: 0}
            }}
            value={this.state.gain}
            onWheel={(e) => this.onStripWheel(e)}
            onClick={(e) => this.stopPropagation(e)}
            onChange={(e) => this.onGainChange(e as unknown as Event)}
            size="small"
            sx={{ width: "50px" }}
          />
          <Slider
            sx={{
              margin: "5px",
              marginInline: "15px",
            }}
            // orientation="vertical"
            color={
              (this.state.gain > 0 && this.state.gain < 12 && "warning") ||
              (this.state.gain >= 12 && "error") ||
              (this.state.gain < 0 && "info") ||
              "primary"
            }
            defaultValue={0.0}
            step={0.1}
            min={-60}
            max={12}
            value={this.state.gain}
            onChange={(e) => this.onGainChange(e)}
            onClick={(e) => this.onSliderClick(e)}
          />

          <ButtonGroup>
            <Button
              onClick={(e) => this.onMuteToggle(e)}
              variant={this.state.muted ? "contained" : "outlined"}
              color={"error"}
            >
              Mute
            </Button>
            <Button
              onClick={(e) => this.onSelectToggle(e)}
              sx={{}}
              variant={this.state.selected ? "contained" : "outlined"}
              color={"warning"}
            >
              S
            </Button>
          </ButtonGroup>
        </Stack>
        {/* <Stack>
            <ButtonGroup orientation="vertical">
              {[
                ...Array(this.props.physicalBuses + this.props.virtualBuses),
              ].map((_v, i) => (
                <StripBusOutput
                  key={`${i < this.props.physicalBuses ? "a" : "b"}${
                    i < this.props.physicalBuses
                      ? i
                      : i - this.props.physicalBuses
                  }`}
                  id={
                    i < this.props.physicalBuses
                      ? i
                      : i - this.props.physicalBuses
                  }
                  isVirtual={i < this.props.physicalBuses ? false : true}
                  onChange={(ev) => this.onBusChange(ev)}
                  default={{ enabled: this.state.buses[i] }}
                />
              ))}
            </ButtonGroup>
          </Stack> */}
      </>
    );
  }
}