y0dax / oratio

Oratio is a long term project for speech impaired streamers to provide a unique experience for viewers in the form of on screen displays.

Welcome to Project Oratio Electron Application

This project uses React with Electron and Electron Builder

Install

First, clone the repo via git and install dependencies:

git clone --depth 1 --single-branch https://github.com/Y0dax/Oratio.git your-project-name
cd your-project-name
yarn

Starting Development

Start the app in the dev environment:

yarn start

Packaging for Production

To package apps for the local platform:

yarn package

Docs

See Electron React Boilerplate Guides

oratio's Issues

Potentially strip react out of project to simplify technology stack

log-spam in Home.tsx: Content Security Policy

Do we really need to dynamically add sources here? https://github.com/Y0dax/Oratio/blob/master/src/index.html#L37

Is the best policy something that's like "everything should be local except the downloads for emotes"?

Ways of adding a CSP:

• Header Tag like <meta http-equiv="Content-Security-Policy" content="default-src 'self'>
• https://stackoverflow.com/a/52243138

Documentation on CSP: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

Browser source looses styling seemingly at random

When sending multiple messages to the browser source, sometimes they have the correct styling (appear in the bottom left with large font)
and sometimes they appear in the top-left with a tiny font. This behaviour changes without reloading the webpage but with sending multiple messages, often flipflopping multiple times.

This might be related to the warning that comes up in the console:
Warning: Prop className did not match. Server: "makeStyles-hidden-6 makeStyles-hidden-49" Client: "makeStyles-hidden-6 makeStyles-hidden-13"
Note that the 49 increases with every reload of the browser.

log-spam in Home.tsx: dist/style.css 404

I removed it as I thought style.css was generated by the unused sass.
e3c5dd8#diff-ce434ef5cc161194b450135a3586eb89357fc270e8aaa8e336db5a04e8d52fbeL6

But then it was re-added:
f63a2d5#diff-ce434ef5cc161194b450135a3586eb89357fc270e8aaa8e336db5a04e8d52fbeR6

Now I'm seeing this error in dev builds:

Is this something that's only required in a release build or did we mis-characterize the issue?

Browser source does not pick up dev changes

It's inconvenient to develop / debug it if all of Oratio has to be restarted to pick up changes to that webpage.
Should look into some kind of reloading, ideally hot reloading.

`yarn start` does not work on windows

It uses rm which isn't on windows unless the user has installed cygwin/git bash or so.
https://stackoverflow.com/a/33198210

log-spam in terminal: "Loose" private methods

I get this warning multiple times in my terminal when I compile each time within yarn start

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

I don't yet know what this is about. Is this something to fix or to ignore?

Pre-Commit is too slow

Having pre-commit fail after 15 seconds with something that the linter knows how to fix is really annoying.

The linter with --cach --fix is too slow to be run after each file save (which works nicely in other languages like python with black).

Ideally we can make linting fast but I haven't seen a way of doing that. Having this check only at pre-push seems better than what we currently have.