isfopo / liveremote Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 1.61 MB

HTML 1.00% TypeScript 48.10% Python 43.35% SCSS 7.56%

liveremote's Introduction

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

liveremote's People

Contributors

Watchers

liveremote's Issues

Allow multiple layouts

Add an action that can switch between and add layouts. Each layout should have a name.

The hook useSocket can catch errors from the websocket - those should be displayed when they happen. Since those errors are in the state of the hook, I'll have return them and show them at some level on the main app page.

I could just have some way to handle them on the Remote page, but I could also create a context for errors and other notifications.

Also, the errors should be leave after a while.

Optimistic rendering on set calls

When a button or any interaction is sent to Live, instead of waiting for the server to respond with the updated value, update it in the Live context first in teh send function. This will provide a snapper experience for the user.

Update icon

Create grid for control widgets

Using react-grid-layout create a grid to put widgets on. These widgets can be used to control aspects of Live, like the transport or playback. The layout, for now, can be stored in local storage.

Handle updates from Live set

Use the "update" dispatch action to update the live context from recieved websocket messages.

Fix styles on mobile

Icons and some text is appearing as blue, not matching the color for the given theme

Setup deployment and CI/CD

Spin up a secure websocket server so https pages can connect

Will need to create a SSL certificate, but will need to be created on the user's machine be remote script.

https://gist.github.com/bloodearnest/9017111a313777b9cce5

SSL Socket wrapper - https://python.readthedocs.io/en/latest/library/ssl.html

Create a FAB for actions

https://www.upbeatcode.com/react/implement-floating-action-button-in-react/

Style Connect Dialog

Show code and code input should be on the same line, with the button taking up 1/3(ish) of the space. The check button should take the whole line and be a different color. The close button should also be fixed.

Navigate to Remote if opened in PWA

Make grid responsive

Use the reactive layout to allow the grid to adjust to given screen size. https://github.com/react-grid-layout/react-grid-layout/blob/master/test/examples/8-localstorage-responsive.jsx

Register and unregister listeners on widget mount

When a widget is added or removed from the grid view, a listener should be added or removed, respectivly to the Live Api. Ideally, the listeners a widget needs should be defined close to the widget component itself, either in the widget (that make prove to be awkward) or in the list od widgets that exists in the useWidgetLayout hook.

Add Tempo Widget

Display current set tempo along with a way to adjust.

Use context for widget layout

Having some issues with updating available widgets from the add widget dialog. This is probably due to the availableWidgets prop for the dialog not being updated. If this is kept in context, along with the rest of the widget layout, it should be possible to update the available widgets from the dialog.

Add new widgets to layout

Create an "add" button to the actions, next to the edit icon, that opens a dialog to add a new widget to the grid.