modified: src/app/component/Bus.tsx
new file: src/app/component/GainSlider.tsx modified: src/app/component/Strip.tsx modified: src/app/page.tsx new file: src/utils/GetComponentState.ts new file: src/utils/StopPropagation.ts
This commit is contained in:
parent
81d889d66e
commit
3b2fb0264e
|
|
@ -13,6 +13,8 @@ import {
|
|||
import React from "react";
|
||||
import { StripBusOutput, StripBusOutputEvent } from "./StripBusOutput";
|
||||
import { EventCounter } from "@/utils/EventCounter";
|
||||
import { getComponentState } from "@/utils/GetComponentState";
|
||||
import { GainSlider, GainSliderOnChangeEvent } from "./GainSlider";
|
||||
|
||||
export interface BusProps {
|
||||
values?: Partial<Omit<BusState, StateDefaultValueException>>;
|
||||
|
|
@ -24,7 +26,6 @@ export interface BusProps {
|
|||
type StateDefaultValueException = "";
|
||||
|
||||
export interface BusState {
|
||||
gain: number;
|
||||
muted: boolean;
|
||||
selected: boolean;
|
||||
}
|
||||
|
|
@ -45,56 +46,14 @@ export interface BusSelectToggle {
|
|||
}
|
||||
|
||||
export class Bus extends React.Component<BusProps, BusState> {
|
||||
private eventCounter = new EventCounter<"onSliderResetDefaults">();
|
||||
private defaultValues: Omit<BusState, StateDefaultValueException> = {
|
||||
gain: 0,
|
||||
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;
|
||||
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 Omit<BusState, StateDefaultValueException>),
|
||||
};
|
||||
this.eventCounter.on({
|
||||
callback: this.onResetDefaults.bind(this),
|
||||
count: 2,
|
||||
name: "onSliderResetDefaults",
|
||||
});
|
||||
}
|
||||
onResetDefaults() {
|
||||
this.setState({ gain: this.defaultValues.gain });
|
||||
this.state = getComponentState<BusState, "">(props.values, this.defaultValues);
|
||||
}
|
||||
onKeyDown(event: React.KeyboardEvent) {
|
||||
console.log(event);
|
||||
|
|
@ -103,24 +62,13 @@ export class Bus extends React.Component<BusProps, BusState> {
|
|||
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");
|
||||
onGainSliderChange(event: GainSliderOnChangeEvent) {
|
||||
const { gain, type } = event;
|
||||
if (type === "GainChanged")
|
||||
this.props.onChange({
|
||||
type: "StripGainChanged",
|
||||
gain,
|
||||
});
|
||||
}
|
||||
onMuteToggle(event: React.MouseEvent) {
|
||||
this.stopPropagation(event);
|
||||
|
|
@ -156,26 +104,36 @@ export class Bus extends React.Component<BusProps, BusState> {
|
|||
spacing={0}
|
||||
sx={{ width: "inherit" }}
|
||||
>
|
||||
{this.props.width > 600 ? (
|
||||
<TextField
|
||||
{/* {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)}
|
||||
onChange={(e) => this.onGainChange(e as unknown as Event)}
|
||||
size="small"
|
||||
label={this.props.name}
|
||||
type="number"
|
||||
variant="outlined"
|
||||
sx={{ minWidth: "100px", maxWidth: "100px" }}
|
||||
/>
|
||||
// value={Bus.percentToGain(this.state.gainPercent).toFixed(1)}
|
||||
// onWheel={(e) => this.onStripWheel(e)}
|
||||
// onClick={(e) => this.stopPropagation(e)}
|
||||
// onChange={(e) => {
|
||||
// e.target.value = Bus.gainToPercent(
|
||||
// parseInt(e.target.value)
|
||||
// ).toFixed(0);
|
||||
// this.onGainSliderChange(e as unknown as Event);
|
||||
// }}
|
||||
// size="small"
|
||||
// label={this.props.name}
|
||||
// type="number"
|
||||
// variant="outlined"
|
||||
// sx={{
|
||||
// minWidth: "100px",
|
||||
// maxWidth: "100px",
|
||||
// height: "",
|
||||
// marginBlockEnd: "8px",
|
||||
// }}
|
||||
// />
|
||||
) : (
|
||||
<Typography variant="caption">{this.props.name}</Typography>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
{/* {this.props.width <= 600 && (
|
||||
<Typography
|
||||
|
|
@ -189,27 +147,11 @@ export class Bus extends React.Component<BusProps, BusState> {
|
|||
{this.state.gain}dB
|
||||
</Typography>
|
||||
)} */}
|
||||
<this.slider
|
||||
sx={{
|
||||
// margin: "5px",
|
||||
marginInline: "10px",
|
||||
<GainSlider
|
||||
sliderProps={{
|
||||
valueLabelDisplay: this.props.width > 600 ? "off" : "on",
|
||||
}}
|
||||
valueLabelFormat={(e) => `${e} dB`}
|
||||
// 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}
|
||||
valueLabelDisplay={this.props.width > 600 ? "off" : "on"}
|
||||
onChange={(e) => this.onGainChange(e)}
|
||||
onClick={(e) => this.onSliderClick(e)}
|
||||
onChange={(e) => this.onGainSliderChange(e)}
|
||||
/>
|
||||
|
||||
<ButtonGroup>
|
||||
|
|
|
|||
153
src/app/component/GainSlider.tsx
Normal file
153
src/app/component/GainSlider.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import { EventCounter } from "@/utils/EventCounter";
|
||||
import { getComponentState } from "@/utils/GetComponentState";
|
||||
import { stopPropagation } from "@/utils/StopPropagation";
|
||||
import { Slider, SliderOwnProps, styled } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
export type GainSliderOnChangeEventType = "GainChanged";
|
||||
|
||||
export interface GainSliderOnChangeEvent {
|
||||
type: GainSliderOnChangeEventType;
|
||||
gain: number;
|
||||
}
|
||||
|
||||
export interface GainSliderOwnProps {
|
||||
gain?: number;
|
||||
onChange: (event: GainSliderOnChangeEvent) => any;
|
||||
}
|
||||
export interface GainSliderOwnState {
|
||||
gainPercent: number;
|
||||
}
|
||||
export type GainSliderProps = GainSliderOwnProps& {sliderProps?: SliderOwnProps}
|
||||
export const SliderStyled = styled(Slider)(({ theme }) => ({
|
||||
"& .MuiSlider-thumb": {
|
||||
width: "25px",
|
||||
height: "25px",
|
||||
},
|
||||
"& .MuiSlider-valueLabel": {
|
||||
top: 10,
|
||||
left: -10,
|
||||
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" ? "#000" : "#fff",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export class GainSlider extends React.Component<
|
||||
GainSliderProps,
|
||||
GainSliderOwnState
|
||||
> {
|
||||
/*[fromRangeMin, fromRangeMax],
|
||||
[toRangeMin, toRangeMax]*/
|
||||
private static o = {
|
||||
//originally gain to percent
|
||||
lessThanHalf: [
|
||||
[-60, 0],
|
||||
[0, 50],
|
||||
],
|
||||
halfOrMore: [
|
||||
[0, 12],
|
||||
[50, 100],
|
||||
],
|
||||
};
|
||||
static gainToPercent(gain: number) {
|
||||
const key: keyof typeof GainSlider.o =
|
||||
gain >= 0 ? "halfOrMore" : "lessThanHalf";
|
||||
return this.convertRange(gain, ...GainSlider.o[key]);
|
||||
}
|
||||
static percentToGain(percent: number) {
|
||||
const key: keyof typeof GainSlider.o =
|
||||
percent >= 50 ? "halfOrMore" : "lessThanHalf";
|
||||
return this.convertRange(
|
||||
percent,
|
||||
...GainSlider.o[key].map((i) => i.reverse()).reverse()
|
||||
);
|
||||
}
|
||||
static convertRange(value: number, ...ranges: number[][]) {
|
||||
const [output, input] = ranges;
|
||||
return (
|
||||
((value - output[0]) * (input[1] - input[0])) / (output[1] - output[0]) +
|
||||
input[0]
|
||||
);
|
||||
}
|
||||
static stopPropagation(event: Event | React.MouseEvent) {
|
||||
if (event instanceof Event) event.stopImmediatePropagation();
|
||||
else event.nativeEvent.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
private eventCounter = new EventCounter<"SliderClick">();
|
||||
defaultValues: GainSliderOwnState = { gainPercent: 50 };
|
||||
constructor(props: GainSliderProps) {
|
||||
super(props);
|
||||
this.state = getComponentState<GainSliderOwnState, "gainPercent">(
|
||||
props,
|
||||
this.defaultValues
|
||||
);
|
||||
this.eventCounter.on({
|
||||
name: "SliderClick",
|
||||
count: 2,
|
||||
callback: this.resetGain.bind(this),
|
||||
});
|
||||
}
|
||||
|
||||
resetGain() {
|
||||
this.setState({ gainPercent: this.defaultValues.gainPercent });
|
||||
}
|
||||
|
||||
onGainChange(event: Event): void {
|
||||
let changedGain = parseFloat((event.target as HTMLInputElement).value);
|
||||
if (changedGain > 100) changedGain = 100;
|
||||
else if (changedGain < 0) changedGain = 0;
|
||||
this.setState({
|
||||
gainPercent: changedGain,
|
||||
});
|
||||
this.props.onChange({
|
||||
type: "GainChanged",
|
||||
gain: Math.round(GainSlider.percentToGain(changedGain) * 10) / 10,
|
||||
});
|
||||
}
|
||||
onSliderClick(e: React.MouseEvent<HTMLSpanElement, MouseEvent>): void {
|
||||
stopPropagation(e);
|
||||
this.eventCounter.emit("SliderClick");
|
||||
}
|
||||
|
||||
render(): React.ReactNode {
|
||||
return (
|
||||
<SliderStyled
|
||||
sx={{
|
||||
// margin: "5px",
|
||||
marginInline: "10px",
|
||||
}}
|
||||
valueLabelFormat={(e) => `${e.toFixed(1)} dB`}
|
||||
// orientation="vertical"
|
||||
color={
|
||||
(this.state.gainPercent < GainSlider.gainToPercent(0) && "info") ||
|
||||
(this.state.gainPercent > GainSlider.gainToPercent(0) &&
|
||||
this.state.gainPercent < 100 &&
|
||||
"warning") ||
|
||||
(this.state.gainPercent === 100 && "error") ||
|
||||
"primary"
|
||||
}
|
||||
step={1}
|
||||
min={0}
|
||||
max={100}
|
||||
value={this.state.gainPercent}
|
||||
onChange={(e) => this.onGainChange(e)}
|
||||
onClick={(e) => this.onSliderClick(e)}
|
||||
scale={(v) => GainSlider.percentToGain(v)}
|
||||
{...this.props.sliderProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -7,12 +7,14 @@ import {
|
|||
Input,
|
||||
Slider,
|
||||
Stack,
|
||||
styled,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import React from "react";
|
||||
import { StripBusOutput, StripBusOutputEvent } from "./StripBusOutput";
|
||||
import { EventCounter } from "@/utils/EventCounter";
|
||||
import { stopPropagation } from "@/utils/StopPropagation";
|
||||
|
||||
export interface StripProps {
|
||||
physicalBuses: number;
|
||||
|
|
@ -83,7 +85,7 @@ export class Strip extends React.Component<StripProps, StripState> {
|
|||
this.setState({ gain: this.defaultValues.gain });
|
||||
}
|
||||
onSliderClick(event: React.MouseEvent) {
|
||||
this.stopPropagation(event);
|
||||
stopPropagation(event);
|
||||
this.eventCounter.emit("onSliderResetDefaults");
|
||||
}
|
||||
onKeyDown(event: React.KeyboardEvent) {
|
||||
|
|
@ -94,7 +96,7 @@ export class Strip extends React.Component<StripProps, StripState> {
|
|||
}
|
||||
}
|
||||
onGainChange(event: Event) {
|
||||
this.stopPropagation(event);
|
||||
stopPropagation(event);
|
||||
const multiplier = (event as unknown as React.KeyboardEvent).shiftKey
|
||||
? 2
|
||||
: 1;
|
||||
|
|
@ -127,7 +129,7 @@ export class Strip extends React.Component<StripProps, StripState> {
|
|||
console.log(event);
|
||||
}
|
||||
onMuteToggle(event: React.MouseEvent) {
|
||||
this.stopPropagation(event);
|
||||
stopPropagation(event);
|
||||
this.setState(
|
||||
(state) => ({ muted: !state.muted }),
|
||||
() => {
|
||||
|
|
@ -135,10 +137,7 @@ export class Strip extends React.Component<StripProps, StripState> {
|
|||
}
|
||||
);
|
||||
}
|
||||
stopPropagation(event: Event | React.MouseEvent) {
|
||||
if (event instanceof Event) event.stopImmediatePropagation();
|
||||
else event.nativeEvent.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -158,7 +157,7 @@ export class Strip extends React.Component<StripProps, StripState> {
|
|||
// }}
|
||||
value={this.state.gain}
|
||||
onWheel={(e) => this.onStripWheel(e)}
|
||||
onClick={(e) => this.stopPropagation(e)}
|
||||
onClick={(e) => stopPropagation(e)}
|
||||
size="small"
|
||||
type="number"
|
||||
label={this.props.name}
|
||||
|
|
@ -167,32 +166,20 @@ export class Strip extends React.Component<StripProps, StripState> {
|
|||
/>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="caption">{this.props.name}</Typography>
|
||||
{/* <Typography variant="caption">{this.props.name}</Typography>
|
||||
<Typography width={"4em"} textAlign="center" variant="caption">
|
||||
{this.state.gain} dB
|
||||
</Typography>
|
||||
</Typography> */}
|
||||
</>
|
||||
)}
|
||||
<Slider
|
||||
sx={{
|
||||
// margin: "5px",
|
||||
marginBlockStart: "10px",
|
||||
}}
|
||||
color={
|
||||
(this.state.gain > 0 && this.state.gain < 12 && "warning") ||
|
||||
(this.state.gain >= 12 && "error") ||
|
||||
(this.state.gain < 0 && "info") ||
|
||||
"primary"
|
||||
}
|
||||
orientation="vertical"
|
||||
defaultValue={0.0}
|
||||
step={0.1}
|
||||
min={-60}
|
||||
max={12}
|
||||
value={this.state.gain}
|
||||
aria-label="Temperature"
|
||||
slotProps={{
|
||||
root: {
|
||||
onClick: (e) => this.onSliderClick(e),
|
||||
},
|
||||
}}
|
||||
onChange={(e) => this.onGainChange(e)}
|
||||
onClick={(e) => this.onSliderClick(e)}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
"use client";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, { createRef, useEffect, useMemo, useState } from "react";
|
||||
import { Strip, StripEvent } from "./component/Strip";
|
||||
import {
|
||||
Button,
|
||||
|
|
@ -33,8 +33,21 @@ export default function Home() {
|
|||
}),
|
||||
[]
|
||||
);
|
||||
function onStripEvent(event: StripEvent) {
|
||||
function sendApi(path: string, fetchOptions: RequestInit) {
|
||||
const url = new URL(path, "http://127.0.0.1:3000/");
|
||||
return fetch(url.toString(), fetchOptions).then((r) => r.json());
|
||||
}
|
||||
function onStripEvent(event: StripEvent, stripId: number) {
|
||||
console.log(event);
|
||||
switch (event.type) {
|
||||
case "StripMuted": {
|
||||
sendApi(`/strip/${stripId}/mute`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({ muteState: event.muted }),
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
const isSnackBarHidden = useMemo(() => {
|
||||
if (typeof localStorage === "undefined") return false;
|
||||
|
|
@ -114,7 +127,7 @@ export default function Home() {
|
|||
}}
|
||||
color="secondary"
|
||||
>
|
||||
Gotcha
|
||||
OK
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
|
@ -155,7 +168,7 @@ export default function Home() {
|
|||
stripId + 1
|
||||
}`}</Typography> */}
|
||||
<Strip
|
||||
onChange={(ev) => onStripEvent(ev)}
|
||||
onChange={(ev) => onStripEvent(ev, stripId)}
|
||||
physicalBuses={buses.physical}
|
||||
virtualBuses={buses.virtual}
|
||||
width={width}
|
||||
|
|
|
|||
25
src/utils/GetComponentState.ts
Normal file
25
src/utils/GetComponentState.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
export function getComponentState<
|
||||
State extends Object,
|
||||
StateDefaultValueException extends keyof State | ""
|
||||
>(
|
||||
initialValues: Partial<Omit<State, StateDefaultValueException>> | undefined,
|
||||
defaultValues: State
|
||||
) {
|
||||
type InitialValuesType = Omit<State, StateDefaultValueException>;
|
||||
// const { initialValues } = props;
|
||||
const getValue = (name: keyof InitialValuesType) => {
|
||||
if (initialValues === undefined) return defaultValues[name];
|
||||
return initialValues[name] !== undefined
|
||||
? defaultValues[name]
|
||||
: initialValues[name];
|
||||
};
|
||||
const state = {
|
||||
...(Object.fromEntries(
|
||||
Object.entries(defaultValues).map(([name]) => [
|
||||
name,
|
||||
getValue(name as keyof InitialValuesType) as any,
|
||||
])
|
||||
) as InitialValuesType),
|
||||
} as State;
|
||||
return state;
|
||||
}
|
||||
4
src/utils/StopPropagation.ts
Normal file
4
src/utils/StopPropagation.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export function stopPropagation(event: Event | React.MouseEvent) {
|
||||
if (event instanceof Event) event.stopImmediatePropagation();
|
||||
else event.nativeEvent.stopImmediatePropagation();
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user