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

{
  "overlayed": {
    "window": {
      "x": 780,
      "y": 0,
      "width": 1920,
      "height": 1080
    }
  }
}

home/
  .overlayed/
    TestPlugin/
      package.json
      TestPlugin.js
    OtherPlugin/
      package.json
      OtherPlugin.js

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