modified: src/app/component/Bus.tsx

modified: src/app/component/BusesList.tsx modified: src/app/component/Strip.tsx modified: src/app/page.tsx
2024-08-08 00:33:48 +02:00 · 2024-08-08 00:33:48 +02:00 · 81d889d66e
commit 81d889d66e
parent 42ccd675b8
4 changed files with 96 additions and 41 deletions
--- a/src/app/component/Bus.tsx
+++ b/src/app/component/Bus.tsx
@ -6,7 +6,9 @@ import {
  Input,
  Slider,
  Stack,
+  styled,
  TextField,
+  Typography,
 } from "@mui/material";
 import React from "react";
 import { StripBusOutput, StripBusOutputEvent } from "./StripBusOutput";
@ -14,18 +16,17 @@ import { EventCounter } from "@/utils/EventCounter";

 export interface BusProps {
  values?: Partial<Omit<BusState, StateDefaultValueException>>;
-  showInputdB?: boolean;
+  width: number;
  name: string;
  onChange: (event: BusEvent) => any;
 }

-type StateDefaultValueException = "showInputdB";
+type StateDefaultValueException = "";

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

 export type BusEvent = BusMuted | BusGainChanged | BusSelectToggle;
@ -50,6 +51,25 @@ export class Bus extends React.Component<BusProps, BusState> {
    selected: false,
    muted: false,
  };
+  slider = styled(Slider)(({ theme }) => ({
+    "& .MuiSlider-valueLabel": {
+      top: 0,
+      fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+      fontWeight: 400,
+      fontSize: "0.75rem",
+      width:"4em",
+      letterSpacing: "0.03333em",
+      backgroundColor: "unset",
+      color: theme.palette.text.primary,
+      "&::before": {
+        display: "none",
+      },
+      "& *": {
+        background: "transparent",
+        color: theme.palette.mode === "dark" ? "#fff" : "#000",
+      },
+    },
+  }));
  constructor(props: BusProps) {
    super(props);
    let { values: initialValues } = props;
@ -60,14 +80,13 @@ export class Bus extends React.Component<BusProps, BusState> {
        : initialValues[name];
    };
    this.state = {
-      ...Object.fromEntries(
+      ...(Object.fromEntries(
        Object.entries(this.defaultValues).map(([name]) => [
          name,
          getValue(name as keyof typeof this.defaultValues) as any,
        ])
-      ),
-      showInputdB: props.showInputdB !== undefined ? props.showInputdB : true,
-    } as BusState;
+      ) as Omit<BusState, StateDefaultValueException>),
+    };
    this.eventCounter.on({
      callback: this.onResetDefaults.bind(this),
      count: 2,
@ -137,7 +156,7 @@ export class Bus extends React.Component<BusProps, BusState> {
          spacing={0}
          sx={{ width: "inherit" }}
        >
-          {this.state.showInputdB && (
+          {this.props.width > 600 ? (
            <TextField
              // inputProps={{
              //   "aria-labelledby": "input-slider",
@ -154,12 +173,28 @@ export class Bus extends React.Component<BusProps, BusState> {
              variant="outlined"
              sx={{ minWidth: "100px", maxWidth: "100px" }}
            />
+          ) : (
+            <Typography variant="caption">{this.props.name}</Typography>
          )}
-          <Slider
+
+          {/* {this.props.width <= 600 && (
+            <Typography
+              position={"absolute"}
+              paddingInlineStart={"10rem"}
+              paddingBlockEnd={"2rem"}
+              fontSize={"0.6rem"}
+              width={"fit-content"}
+              variant="caption"
+            >
+              {this.state.gain}dB
+            </Typography>
+          )} */}
+          <this.slider
            sx={{
-              margin: "5px",
-              marginInline: "15px",
+              // margin: "5px",
+              marginInline: "10px",
            }}
+            valueLabelFormat={(e) => `${e} dB`}
            // orientation="vertical"
            color={
              (this.state.gain > 0 && this.state.gain < 12 && "warning") ||
@ -172,6 +207,7 @@ export class Bus extends React.Component<BusProps, BusState> {
            min={-60}
            max={12}
            value={this.state.gain}
+            valueLabelDisplay={this.props.width > 600 ? "off" : "on"}
            onChange={(e) => this.onGainChange(e)}
            onClick={(e) => this.onSliderClick(e)}
          />
--- a/src/app/component/BusesList.tsx
+++ b/src/app/component/BusesList.tsx
@ -1,4 +1,4 @@
-import { Chip, Stack, Theme, Typography, useTheme, withTheme } from "@mui/material";
+import { Chip, Stack, StackOwnProps, Theme, Typography, useTheme, withTheme } from "@mui/material";
 import React from "react";
 import { Bus } from "./Bus";
 import { range } from "@/utils/Range";
@ -7,6 +7,7 @@ export interface BusesListProps {
  physical: number;
  virtual: number;
  width: number;
+  stackProps?: StackOwnProps
 }
 export interface BusesListState {
 }
@ -30,14 +31,14 @@ export class BusesList extends React.Component<BusesListProps, BusesListState> {
        key={name}
      >
        {/* <Chip variant="outlined" sx={{marginInlineEnd: "15px"}} label={name}/> */}
-        <Bus name={name} onChange={console.log} />
+        <Bus width={this.props.width} name={name} onChange={console.log} />
      </Stack>
    );
  }
  render(): React.ReactNode {
-    if (this.props.width > 600) {
+    if (this.props.width > 800) {
      return (
-        <Stack direction={"row"} spacing={this.props.width > 1200 ? 4 : 2}>
+        <Stack {...this.props.stackProps} direction={"row"} spacing={this.props.width > 1200 ? 4 : 2}>
          <Stack sx={{ width: "50%" }}>
            {range(this.props.physical).map(this.mapCallback.bind(this))}
          </Stack>
@ -50,7 +51,7 @@ export class BusesList extends React.Component<BusesListProps, BusesListState> {
      );
    }
    return (
-      <Stack>
+      <Stack {...this.props.stackProps}>
        {range(this.props.physical + this.props.virtual).map(
          this.mapCallback.bind(this)
        )}
--- a/src/app/component/Strip.tsx
+++ b/src/app/component/Strip.tsx
@ -8,6 +8,7 @@ import {
  Slider,
  Stack,
  TextField,
+  Typography,
 } from "@mui/material";
 import React from "react";
 import { StripBusOutput, StripBusOutputEvent } from "./StripBusOutput";
@ -17,17 +18,17 @@ export interface StripProps {
  physicalBuses: number;
  virtualBuses: number;
  values?: Partial<StripState>;
-  showOutputdB?: boolean;
+  width: number;
  name: string;
  onChange: (event: StripEvent) => any;
 }
-type StateDefaultValueException = "showOutputdB";
+
+export type StateDefaultValueException = "";

 export interface StripState {
  gain: number;
  outputBuses: boolean[];
  muted: boolean;
-  showOutputdB: boolean;
 }

 export type StripEvent = StripBusOutputChanged | StripMuted | StripGainChanged;
@ -71,8 +72,6 @@ export class Strip extends React.Component<StripProps, StripState> {
          getValue(name as keyof typeof this.defaultValues) as any,
        ])
      ) as Omit<StripState, StateDefaultValueException>),
-      showOutputdB:
-        props.showOutputdB !== undefined ? props.showOutputdB : true,
    };
    this.eventCounter.on({
      callback: this.onResetDefaults.bind(this),
@ -143,27 +142,41 @@ export class Strip extends React.Component<StripProps, StripState> {
  render() {
    return (
      <>
-        <Stack direction={"row"}>
+        <Stack
+          direction={"row"}
+          sx={{
+            ...(this.props.width <= 1027 && { marginBlockEnd: "10px" }),
+          }}
+        >
          <Stack alignItems={"center"} style={{ maxWidth: "70px" }}>
-            <TextField
-              // inputProps={{
-              //   "aria-labelledby": "input-slider",
-              //   itemType: "number",
-              //   style: { padding: 0 },
-              // }}
-              value={this.state.gain}
-              onWheel={(e) => this.onStripWheel(e)}
-              onClick={(e) => this.stopPropagation(e)}
-              size="small"
-              type="number"
-              label={this.props.name}
-              // sx={{minWidth: "4em", maxWidth: "5em"}}
-              // fullWidth
-            />
+            {this.props.width > 600 ? (
+              <TextField
+                // inputProps={{
+                //   "aria-labelledby": "input-slider",
+                //   itemType: "number",
+                //   style: { padding: 0 },
+                // }}
+                value={this.state.gain}
+                onWheel={(e) => this.onStripWheel(e)}
+                onClick={(e) => this.stopPropagation(e)}
+                size="small"
+                type="number"
+                label={this.props.name}
+                // sx={{minWidth: "4em", maxWidth: "5em"}}
+                // fullWidth
+              />
+            ) : (
+              <>
+                <Typography variant="caption">{this.props.name}</Typography>
+                <Typography width={"4em"} textAlign="center" variant="caption">
+                  {this.state.gain} dB
+                </Typography>
+              </>
+            )}
            <Slider
              sx={{
-                margin: "5px",
-                marginBlockStart: "15px",
+                // margin: "5px",
+                marginBlockStart: "10px",
              }}
              color={
                (this.state.gain > 0 && this.state.gain < 12 && "warning") ||
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -131,10 +131,11 @@ export default function Home() {
          <Grid
            container
            // spacing={width ? 0 : 1}
+            sx={{ paddingBlockStart: "15px" }}
            display={"flex"}
            alignItems={"center"}
            justifyContent={"space-evenly"}
-            columns={{ xs: 8, sm: 12, md: 16, lg: 14 }}
+            columns={{ xs: 8, sm: 12, md: 12, lg: 14 }}
          >
            {[...Array(amountOfStrips)].map((_v, stripId) => {
              const isPhysical = stripId < strips.physical;
@ -145,7 +146,9 @@ export default function Home() {
                <React.Fragment key={name}>
                  <Grid
                    lgOffset={stripId === strips.physical ? 2 : 0}
-                    mdOffset={stripId === strips.physical ? 0.8 : 0}
+                    mdOffset={
+                      stripId === strips.physical ? (width > 1098 ? 0.8 : 0) : 0
+                    }
                    sx={{ minWidth: "fit-content" }}
                  >
                    {/* <Typography variant="overline">{`Strip #${
@ -155,6 +158,7 @@ export default function Home() {
                      onChange={(ev) => onStripEvent(ev)}
                      physicalBuses={buses.physical}
                      virtualBuses={buses.virtual}
+                      width={width}
                      name={
                        isPhysical
                          ? `#${stripId + 1}`
@ -168,6 +172,7 @@ export default function Home() {
          </Grid>
          <Typography variant="h5">Outputs</Typography>
          <BusesList
+            stackProps={{ sx: { paddingBlockStart: "10px" } }}
            width={width}
            physical={buses.physical}
            virtual={buses.virtual}