bengreenier / overlayed

stream overlays that broadcasters can see 🎬🔴

overlayed 🎬🔴

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
• Configuration
  • Screen Layout
  • Built-in Overlays
  • Custom Overlays
• Contributing
  • Core
  • Building an Overlay
• License

Installation

Currently, This project is in Alpha status. As such, the only way to install is to clone this repository, and Build it.

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 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.

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 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
• Node

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 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
• 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 (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 <h1>Hello World</h1>
  }
}

package.json:

{
  "name": "test-overlay",
  "version": "0.0.1",
  "main": "TestOverlay.js"
}

License

MIT