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";

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> {
  constructor(props: BusProps) {
    super(props);
    const { values: initialValues } = props;
    const defaultValues: BusState = {
      gain: 0,
      selected: false,
      muted: false,
    };
    const getValue = (name: keyof typeof defaultValues) => {
      if (initialValues === undefined) return defaultValues[name];
      return initialValues[name] !== undefined
        ? defaultValues[name]
        : initialValues[name];
    };
    this.state = Object.fromEntries(
      Object.entries(defaultValues).map(([name]) => [
        name,
        getValue(name as keyof typeof defaultValues) as any,
      ])
    ) as BusState;
  }
  onResetDefaults(e: React.MouseEvent) {}
  onKeyDown(event: React.KeyboardEvent) {
    console.log(event);

    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      event.preventDefault();
    }
  }
  onChange(event: React.ChangeEvent<HTMLInputElement>) {
    const multiplier = (event as unknown as React.KeyboardEvent).shiftKey
      ? 2
      : 1;
    const changedGain =
      parseFloat((event.target as HTMLInputElement).value) * multiplier;
    this.setState({
      gain: changedGain,
    });
    this.props.onChange({
      type: "StripGainChanged",
      gain: changedGain,
    });
  }
  onStripWheel(event: React.WheelEvent) {
    console.log(event);
  }
  onMuteToggle() {
    this.setState(
      (state) => ({ muted: !state.muted }),
      () => {
        this.props.onChange({ type: "StripMuted", muted: this.state.muted });
      }
    );
  }
  onSelectToggle() {
    this.setState(
      (state) => ({ selected: !state.selected }),
      () => {
        this.props.onChange({
          type: "BusSelectToggle",
          selected: this.state.selected,
        });
      }
    );
  }
  render() {
    return (
      <>
        <Stack alignItems={"center"} direction={"row"} spacing={0}>
          <Input
            inputProps={{
              "aria-labelledby": "input-slider",
              itemType: "number",
            }}
            value={this.state.gain}
            onWheel={(ev) => this.onStripWheel(ev)}
            size="small"
            sx={{ width: "50px" }}
          />
          <Slider
            sx={{
              margin: "5px",
              marginInline: "15px",
            }}
            // orientation="vertical"
            defaultValue={0.0}
            step={0.1}
            min={-60}
            max={12}
            value={this.state.gain}
            onChange={(ev) =>
              this.onChange(
                ev as unknown as React.ChangeEvent<HTMLInputElement>
              )
            }
            onKeyDown={(ev) => this.onKeyDown(ev)}
          />

          <ButtonGroup>
            <Button
              onClick={() => this.onMuteToggle()}
              variant={this.state.muted ? "contained" : "outlined"}
              color={"error"}
            >
              Mute
            </Button>
            <Button
              onClick={() => this.onSelectToggle()}
              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> */}
      </>
    );
  }
}