modified: src/app/component/Bus.tsx

modified:   src/app/component/BusesList.tsx
	modified:   src/app/component/Strip.tsx
	modified:   src/app/page.tsx

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,
         ])
-      ),
+      ) as Omit<BusState, StateDefaultValueException>),
-      showInputdB: props.showInputdB !== undefined ? props.showInputdB : true,
+    };
-    } as BusState;
     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",
+              // margin: "5px",
-              marginInline: "15px",
+              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)}
           />

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)
         )}

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,8 +142,14 @@ 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" }}>
+            {this.props.width > 600 ? (
               <TextField
                 // inputProps={{
                 //   "aria-labelledby": "input-slider",
@@ -160,10 +165,18 @@ export class Strip extends React.Component<StripProps, StripState> {
                 // 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",
+                // margin: "5px",
-                marginBlockStart: "15px",
+                marginBlockStart: "10px",
               }}
               color={
                 (this.state.gain > 0 && this.state.gain < 12 && "warning") ||

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}