https://github.com/bengreenier/overlayed
stream overlays that broadcasters can see 🎬🔴
https://github.com/bengreenier/overlayed
electron react streamer streamer-tool
Last synced: about 1 year ago
JSON representation
stream overlays that broadcasters can see 🎬🔴
- Host: GitHub
- URL: https://github.com/bengreenier/overlayed
- Owner: bengreenier
- License: mit
- Created: 2018-08-31T20:43:29.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-16T16:54:15.000Z (over 7 years ago)
- Last Synced: 2025-03-18T06:35:55.620Z (about 1 year ago)
- Topics: electron, react, streamer, streamer-tool
- Language: TypeScript
- Size: 197 KB
- Stars: 28
- Watchers: 2
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# overlayed 🎬🔴
[](https://github.com/bengreenier/overlayed/releases)
[](https://travis-ci.org/bengreenier/overlayed)
[](https://discord.gg/Vg7VMVe)
Overlayed is a tool that enables streamers to see their overlays atop their desktop. I built it to interact more seamlessly with my viewers. If you want to interact in faster, more interesting ways it may be built for you too. ❤️
## Table of contents
+ [Installation](#installation)
+ [Configuration](#configuration)
+ [Screen Layout](#screen-layout)
+ [Built-in Overlays](#built-in-overlays)
+ [Custom Overlays](#custom-overlays)
+ [Contributing](#contributing)
+ [Core](#core)
+ [Building an Overlay](#building-an-overlay)
+ [License](#license)
## Installation
Currently, This project is in Alpha status. As such, the only way to install is to clone this repository, and [Build it](#core).
## Configuration
> Note: Most folks will use our __shiny new editor__ ✨
To open the settings editor, click the Overlayed icon in your taskbar, and choose "Settings".
Technical details
Overlayed uses [electron-settings](https://github.com/nathanbuchar/electron-settings) under the hood, which saves settings to different locations based on your operating system.
| Windows | Mac | Linux |
| ------- | --- | ----- |
|`%APPDATA%/overlayed/Settings`|`~/Library/Application\ Support/Overlayed/Settings`|`$XDG_CONFIG_HOME/Overlayed/Settings`|
||| or |
|||`~/.config/Overlayed/Settings`|
Learn more [in the electron-settings FAQ](https://github.com/nathanbuchar/electron-settings/wiki/FAQs#where-is-the-settings-file-saved).
### Screen Layout
Overlayed can be configured to overlay above a portion of your screen, which can be great if you don't share your entire display when streaming.
To configure the screen layout, modify the following settings:
```
{
"overlayed": {
"window": {
"x": 780,
"y": 0,
"width": 1920,
"height": 1080
}
}
}
```
+ `x` - the left-most side of the overlay region
+ `y` - the top-most side of the overlay region
+ `width` - the total width of the overlay region
+ `height` - the total height of the overlay region
### Built-In Overlays
Overlayed ships with some built-in overlays. These live [in this directory](./src/app/plugin) and are now configurable! You can find more information below.
### Custom Overlays
Overlayed supports loading custom plugins from your home directory. To add custom overlays, create a folder in your home directory named `.overlayed` and a folder for each plugin inside that parent folder. For example:
```
home/
.overlayed/
TestPlugin/
package.json
TestPlugin.js
OtherPlugin/
package.json
OtherPlugin.js
```
All plugins, including custom plugins, are now configurable by adding an object to the configuration file containing the plugin config, indexed by the plugin name.
For instance:
{
"clock": {
"locale": "en-US"
}
}
## Contributing
This project loves new contributors, but it is maintained as a side project. If you feel you aren't getting traction, please be patient!
### Core
To contribute to the core of the project (namely, this repository) you'll need the following things:
+ [Git](https://git-scm.com/)
+ [Node](https://nodejs.org/)
Then clone this repository and execute the following commands from the directory in which you cloned into (likely `overlayed`):
```
npm install
npm run build
npm start
```
These will (in order): install dependencies, build the project, start the application. Please note that this project uses [typescript](https://www.typescriptlang.org/) to build files into the `dist/` folder. As such, the `dist/` folder should not be modified by engineers, nor should it be included in PRs.
### Building an Overlay
> A more detailed walkthrough is coming soon! ✨
+ Create a new directory `.overlayed` in your [home directory](http://www.linfo.org/home_directory.html)
+ Create a new directory under `.overlayed` for your overlay, like `MyOverlay`
+ Run `npm init` or manually create a `package.json` file
+ Ensure `package.json` contains `name`, `version`, and `main`
+ Ensure main points to a `.js` file that has a [default export](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#Using_the_default_export) (or `module.exports.default = YourClass`)
+ Profit! Overlayed will attempt to load your plugin on start
For example:
__TestOverlay.js:__
```
export default class TestOverlay extends React.Component {
render() {
return
Hello World
}
}
```
__package.json:__
```
{
"name": "test-overlay",
"version": "0.0.1",
"main": "TestOverlay.js"
}
```
## License
MIT