maksimgrs98/Voicemeeter-remote-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

modified: .gitignore

Browse Source 
modified:   next.config.mjs
	modified:   package-lock.json
	modified:   package.json
	new file:   public/manifest.json
	renamed:    src/app/component/BusStrip.tsx -> src/app/component/Bus.tsx
	modified:   src/app/component/Strip.tsx
	modified:   src/app/component/StripBusOutput.tsx
	modified:   src/app/layout.tsx
	modified:   src/app/page.tsx
This commit is contained in:
Maksym 2024-07-30 02:39:44 +02:00
parent 628cbfe735
commit df1bb8c35a
10 changed files with 3658 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -34,3 +34,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
**/public/sw.js*
**/public/workbox-*.js*

12
next.config.mjs
View File

@ -1,4 +1,14 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
import nextPWA from "next-pwa";
const withPWA = nextPWA({
dest: "public",
register: true,
skipWaiting: true,
});
const nextConfig = withPWA({
experimental: {},
});
export default nextConfig;

3675
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -13,6 +13,7 @@
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.20",
"next": "14.2.4",
"next-pwa": "^5.6.0",
"react": "^18",
"react-dom": "^18"
},

12
public/manifest.json Normal file
View File

@ -0,0 +1,12 @@
{
"theme_color": "#121212",
"background_color": "#121212",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"name": "Voicemeeter Remote Control",
"short_name": "VMRC",
"icons": {
"name": "favicon.ico"
}
}

45
src/app/component/BusStrip.tsx → src/app/component/Bus.tsx
View File

@ -7,7 +7,7 @@ export interface StripProps {
physicalBuses: number;
virtualBuses: number;
default?: Partial<StripState>;
onChange: <T extends StripEvent>(event: StripEvent) => any;
onChange: (event: BusEvent) => any;
}
export interface StripState {
@ -16,7 +16,7 @@ export interface StripState {
muted: boolean;
}
export type StripEvent = StripBusOutputChanged | StripMuted | StripGainChanged;
export type BusEvent = StripBusOutputChanged | StripMuted | StripGainChanged;
export interface StripBusOutputChanged extends StripBusOutputEvent {
type: "StripBusOutputChanged";
@ -31,7 +31,7 @@ export interface StripMuted {
muted: boolean;
}
export class Strip extends React.Component<StripProps, StripState> {
export class Bus extends React.Component<StripProps, StripState> {
constructor(props: StripProps) {
super(props);
const buses = (props.default && props.default.buses) || [];
@ -50,6 +50,8 @@ export class Strip extends React.Component<StripProps, StripState> {
};
}
onKeyDown(event: React.KeyboardEvent) {
console.log(event);
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
event.preventDefault();
}
@ -83,6 +85,9 @@ export class Strip extends React.Component<StripProps, StripState> {
enabled: event.enabled,
});
}
onStripWheel(event: React.WheelEvent) {
console.log(event);
}
onMuteToggle() {
this.setState(
(state) => ({ muted: !state.muted }),
@ -94,34 +99,28 @@ export class Strip extends React.Component<StripProps, StripState> {
render() {
return (
<>
<Grid container>
<Stack alignItems={"center"}>
<Grid container sx={{ width: "100%"}}>
<Stack alignItems={"center"} direction={"row"}>
<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: "3vh",
// minHeight: "30%",
'& input[type="range"]': {
WebkitAppearance: "slider-vertical",
},
}
}
orientation="vertical"
sx={{
margin: "5px",
}}
// orientation="vertical"
defaultValue={0.0}
step={0.1}
min={-60}
max={12}
value={this.state.gain}
aria-label="Temperature"
onChange={(ev) =>
this.onChange(
ev as unknown as React.ChangeEvent<HTMLInputElement>
@ -130,6 +129,7 @@ export class Strip extends React.Component<StripProps, StripState> {
onKeyDown={(ev) => this.onKeyDown(ev)}
/>
<ButtonGroup>
<Button
onClick={() => this.onMuteToggle()}
variant={this.state.muted ? "contained" : "outlined"}
@ -137,8 +137,17 @@ export class Strip extends React.Component<StripProps, StripState> {
>
Mute
</Button>
<Button
onClick={() => this.onMuteToggle()}
sx={{ }}
variant={this.state.muted ? "contained" : "outlined"}
color={"warning"}
>
S
</Button>
</ButtonGroup>
</Stack>
<Stack>
{/* <Stack>
<ButtonGroup orientation="vertical">
{[
...Array(this.props.physicalBuses + this.props.virtualBuses),
@ -160,7 +169,7 @@ export class Strip extends React.Component<StripProps, StripState> {
/>
))}
</ButtonGroup>
</Stack>
</Stack> */}
</Grid>
</>
);

10
src/app/component/Strip.tsx
View File

@ -7,7 +7,7 @@ export interface StripProps {
physicalBuses: number;
virtualBuses: number;
default?: Partial<StripState>;
onChange: <T extends StripEvent>(event: StripEvent) => any;
onChange: (event: StripEvent) => any;
}
export interface StripState {
@ -50,6 +50,8 @@ export class Strip extends React.Component<StripProps, StripState> {
};
}
onKeyDown(event: React.KeyboardEvent) {
console.log(event);
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
event.preventDefault();
}
@ -98,7 +100,7 @@ export class Strip extends React.Component<StripProps, StripState> {
render() {
return (
<>
<Grid container>
<Grid container sx={{ minHeight: "263px", minWidth: "112px" }}>
<Stack alignItems={"center"}>
<Input
inputProps={{
@ -113,10 +115,6 @@ export class Strip extends React.Component<StripProps, StripState> {
<Slider
sx={{
margin: "5px",
// minHeight: "30%",
'& input[type="range"]': {
WebkitAppearance: "slider-vertical",
},
}}
orientation="vertical"
defaultValue={0.0}

2
src/app/component/StripBusOutput.tsx
View File

@ -47,7 +47,7 @@ export class StripBusOutput extends React.Component<StripProps, StripState> {
<>
<Button
size="small"
sx={{ width: "5px" }}
sx={{ width: "5px", height: "35px" }}
onClick={(ev) => this.onClick(ev)}
variant={this.state.enabled ? "contained" : "outlined"}
>

6
src/app/layout.tsx
View File

@ -2,6 +2,9 @@ import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
import { Metadata, Viewport } from "next";
import Head from "next/head";
export default function RootLayout({
children,
@ -10,6 +13,9 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<Head>
<link rel="manifest" href="/manifest.json" />
</Head>
<body>{children}</body>
</html>
);

67
src/app/page.tsx
View File

@ -1,7 +1,17 @@
"use client";
import React from "react";
import { Strip, StripEvent } from "./component/Strip";
import { Button, Container, Divider, Stack } from "@mui/material";
import {
Button,
Container,
createTheme,
CssBaseline,
Divider,
Stack,
ThemeProvider,
Typography,
} from "@mui/material";
import { Bus } from "./component/Bus";
function random(min: number, max: number, floor: boolean = true) {
const value = Math.random() * (max - min + 1) + min;
@ -15,10 +25,59 @@ export default function Home() {
const physicalBuses = 5;
const virtualBuses = 3;
const strips = physicalBuses + virtualBuses;
let clicks = 0;
let timeout: NodeJS.Timeout | undefined;
document.body.onclick = (e) => {
clicks++;
if (timeout !== undefined) {
clearTimeout(timeout);
timeout = undefined;
}
timeout = setTimeout(() => (clicks = 0), 500);
if (clicks < 2) return;
clearTimeout(timeout);
clicks = 0;
console.log(e.target);
e.stopPropagation();
e.preventDefault();
if (document.fullscreenElement !== null) document.exitFullscreen();
else document.body.requestFullscreen({ navigationUI: "hide" });
};
return (
<Container fixed maxWidth="xl" sx={{ height: "100%" }}>
<ThemeProvider theme={createTheme({ palette: { mode: "dark" } })}>
<Container maxWidth="xl" sx={{ height: "100%" }}>
<div>
<CssBaseline />
<Typography variant="h5">Inputs</Typography>
<Stack direction={"row"}>
{[...Array(strips)].map((_v, i) => (
<React.Fragment
key={`${i < physicalBuses ? "a" : "b"}${
i < physicalBuses ? i : i - physicalBuses
}`}
>
{i === physicalBuses ? (
<Divider
orientation="vertical"
variant="middle"
sx={{ marginInlineEnd: "15px" }}
/>
) : (
""
)}
<Strip
onChange={(ev) => onStripEvent(ev)}
physicalBuses={physicalBuses}
virtualBuses={virtualBuses}
/>
</React.Fragment>
))}
</Stack>
<Typography variant="h5">Outputs</Typography>
<Stack direction={"column"}>
{[...Array(strips)].map((_v, i) => (
<React.Fragment
key={`${i < physicalBuses ? "a" : "b"}${
@ -34,7 +93,7 @@ export default function Home() {
) : (
""
)}
<Strip
<Bus
onChange={(ev) => onStripEvent(ev)}
physicalBuses={physicalBuses}
virtualBuses={virtualBuses}
@ -44,6 +103,8 @@ export default function Home() {
</Stack>
<Button></Button>
</div>
</Container>
</ThemeProvider>
);
}