From 42ccd675b8789d92823c1084aeddb6d35002e35b Mon Sep 17 00:00:00 2001 From: Maksym Date: Wed, 7 Aug 2024 23:34:13 +0200 Subject: [PATCH] modified: src/app/component/Bus.tsx modified: src/app/component/BusesList.tsx modified: src/app/component/Strip.tsx modified: src/app/page.tsx modified: src/utils/DetectMobile.ts --- src/app/component/Bus.tsx | 82 ++++++++++++++++++++----------- src/app/component/BusesList.tsx | 19 ++++--- src/app/component/Strip.tsx | 44 +++++++++++------ src/app/page.tsx | 87 +++++++++++++++++++-------------- src/utils/DetectMobile.ts | 1 + 5 files changed, 142 insertions(+), 91 deletions(-) diff --git a/src/app/component/Bus.tsx b/src/app/component/Bus.tsx index 2e67d30..1dedfb6 100644 --- a/src/app/component/Bus.tsx +++ b/src/app/component/Bus.tsx @@ -1,18 +1,31 @@ "use client"; -import { Button, ButtonGroup, Grid, Input, Slider, Stack } from "@mui/material"; +import { + Button, + ButtonGroup, + Grid, + Input, + Slider, + Stack, + TextField, +} from "@mui/material"; import React from "react"; import { StripBusOutput, StripBusOutputEvent } from "./StripBusOutput"; import { EventCounter } from "@/utils/EventCounter"; export interface BusProps { - values?: Partial; + values?: Partial>; + showInputdB?: boolean; + name: string; onChange: (event: BusEvent) => any; } +type StateDefaultValueException = "showInputdB"; + export interface BusState { gain: number; muted: boolean; selected: boolean; + showInputdB: boolean; } export type BusEvent = BusMuted | BusGainChanged | BusSelectToggle; @@ -32,26 +45,29 @@ export interface BusSelectToggle { export class Bus extends React.Component { private eventCounter = new EventCounter<"onSliderResetDefaults">(); - private defaultValues: BusState = { + private defaultValues: Omit = { gain: 0, selected: false, muted: false, }; constructor(props: BusProps) { super(props); - const { values: initialValues } = props; + let { 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.state = { + ...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; this.eventCounter.on({ callback: this.onResetDefaults.bind(this), count: 2, @@ -69,11 +85,9 @@ export class Bus extends React.Component { } } onGainChange(event: Event | React.ChangeEvent) { - - let changedGain = - parseFloat((event.target as HTMLInputElement).value); - if(changedGain > 12) changedGain = 12 - else if(changedGain < -60) changedGain = -60; + let changedGain = parseFloat((event.target as HTMLInputElement).value); + if (changedGain > 12) changedGain = 12; + else if (changedGain < -60) changedGain = -60; this.setState({ gain: changedGain, }); @@ -117,20 +131,30 @@ export class Bus extends React.Component { render() { return ( <> - - this.onStripWheel(e)} - onClick={(e) => this.stopPropagation(e)} - onChange={(e) => this.onGainChange(e as unknown as Event)} - size="small" - sx={{ width: "50px" }} - /> + + {this.state.showInputdB && ( + this.onStripWheel(e)} + onClick={(e) => this.stopPropagation(e)} + onChange={(e) => this.onGainChange(e as unknown as Event)} + size="small" + label={this.props.name} + type="number" + variant="outlined" + sx={{ minWidth: "100px", maxWidth: "100px" }} + /> + )} { ) { const [busId] = args; const isPhysical = busId < this.props.physical; + const name = `${isPhysical ? "A" : "B"}${ + isPhysical ? busId + 1 : busId - this.props.physical + 1 + }`; return ( - - {`${isPhysical ? "A" : "B"}${ - isPhysical ? busId + 1 : busId - this.props.physical + 1 - }`} - - + {/* */} + + ); } render(): React.ReactNode { diff --git a/src/app/component/Strip.tsx b/src/app/component/Strip.tsx index d699dc7..c46de80 100644 --- a/src/app/component/Strip.tsx +++ b/src/app/component/Strip.tsx @@ -7,6 +7,7 @@ import { Input, Slider, Stack, + TextField, } from "@mui/material"; import React from "react"; import { StripBusOutput, StripBusOutputEvent } from "./StripBusOutput"; @@ -16,13 +17,17 @@ export interface StripProps { physicalBuses: number; virtualBuses: number; values?: Partial; + showOutputdB?: boolean; + name: string; onChange: (event: StripEvent) => any; } +type StateDefaultValueException = "showOutputdB"; export interface StripState { gain: number; outputBuses: boolean[]; muted: boolean; + showOutputdB: boolean; } export type StripEvent = StripBusOutputChanged | StripMuted | StripGainChanged; @@ -41,7 +46,7 @@ export interface StripMuted { } export class Strip extends React.Component { - private defaultValues: StripState; + private defaultValues: Omit; private eventCounter = new EventCounter<"onSliderResetDefaults">(); constructor(props: StripProps) { super(props); @@ -59,12 +64,16 @@ export class Strip extends React.Component { ? 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 StripState; + this.state = { + ...(Object.fromEntries( + Object.entries(this.defaultValues).map(([name]) => [ + name, + getValue(name as keyof typeof this.defaultValues) as any, + ]) + ) as Omit), + showOutputdB: + props.showOutputdB !== undefined ? props.showOutputdB : true, + }; this.eventCounter.on({ callback: this.onResetDefaults.bind(this), count: 2, @@ -135,18 +144,21 @@ export class Strip extends React.Component { return ( <> - - + this.onStripWheel(e)} onClick={(e) => this.stopPropagation(e)} size="small" - sx={{ marginInline: "5px" }} + type="number" + label={this.props.name} + // sx={{minWidth: "4em", maxWidth: "5em"}} + // fullWidth /> { /> - + {[ ...Array(this.props.physicalBuses + this.props.virtualBuses), ].map((_v, i) => ( diff --git a/src/app/page.tsx b/src/app/page.tsx index dc3cc28..034f766 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -26,7 +26,13 @@ function random(min: number, max: number, floor: boolean = true) { } export default function Home() { - const theme = useMemo(() => createTheme({ palette: { mode: "dark",background:{default: "black"} } }), []); + const theme = useMemo( + () => + createTheme({ + palette: { mode: "dark", background: { default: "#000" } }, + }), + [] + ); function onStripEvent(event: StripEvent) { console.log(event); } @@ -36,9 +42,7 @@ export default function Home() { }, []); const [snackBarVisible, setSnackBarVisibility] = useState(false); const breakPoints = useMemo(() => theme.breakpoints.values, []); - const [width, setWidth] = useState( - 1000 - ); + const [width, setWidth] = useState(1000); const eventCounter = useMemo(() => { const eventCounter = new EventCounter<"emptySpaceClick">(); eventCounter.on({ @@ -93,6 +97,7 @@ export default function Home() { const buses = { virtual: 3, physical: 5 }; const amountOfStrips = strips.physical + strips.virtual; const amountOfBuses = buses.physical + buses.virtual; + const virtualInputNames = useMemo(() => ["VAIO", "AUX", "VAIO3"], []); if (typeof document !== "undefined") { document.onclick = () => eventCounter.emit("emptySpaceClick"); window.onresize = () => { @@ -115,8 +120,8 @@ export default function Home() { ); return ( - @@ -129,35 +134,44 @@ export default function Home() { display={"flex"} alignItems={"center"} justifyContent={"space-evenly"} - columns={{ xs: 8, sm: 12, md: 16, lg: 12 }} + columns={{ xs: 8, sm: 12, md: 16, lg: 14 }} > - {[...Array(amountOfStrips)].map((_v, stripId) => ( - - - {`Strip #${ - stripId + 1 - }`} - onStripEvent(ev)} - physicalBuses={buses.physical} - virtualBuses={buses.virtual} - /> - - - ))} + {[...Array(amountOfStrips)].map((_v, stripId) => { + const isPhysical = stripId < strips.physical; + const name = `${isPhysical ? "A" : "B"}${ + isPhysical ? stripId + 1 : stripId + 1 - strips.physical + }`; + return ( + + + {/* {`Strip #${ + stripId + 1 + }`} */} + onStripEvent(ev)} + physicalBuses={buses.physical} + virtualBuses={buses.virtual} + name={ + isPhysical + ? `#${stripId + 1}` + : virtualInputNames[stripId - strips.physical] + } + /> + + + ); + })} Outputs - + Tips: - + - Double {isItMobileDevice? "tap": "click"} + Double {isItMobileDevice ? "tap" : "click"} {" "} - on any gain slider to reset it's value to 0 dB
+ on any gain slider to reset it's value to 0 dB +
- Triple {isItMobileDevice? "tap": "click"} + Triple {isItMobileDevice ? "tap" : "click"} {" "} on empty space for toggle fullscreen diff --git a/src/utils/DetectMobile.ts b/src/utils/DetectMobile.ts index dfd4d85..a4b9447 100644 --- a/src/utils/DetectMobile.ts +++ b/src/utils/DetectMobile.ts @@ -1,5 +1,6 @@ export function isItMobile(userAgent: string) { return ( + userAgent.includes("Android") || /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( userAgent ) ||