Chaturbate Overlay App

This app serves views that display information directly from a Chaturbte profile.

These views are intended to be used as an OBS source overlay.

Quickstart

Run the docker image:

docker run \
  -ti \
  --name=cb-overlay-app \
  --publish=8080:8080 \
  paulallen87/chaturbate-overlay-app

Then navigate to:

http://localhost:8080/default/<your username>

Prerequisites

You must already have node.js installed.

You also need Google Chrome/Chromium (version >= 59) installed.

Then install the yarn package manager.

npm install -g yarn

Starting A Development Instance

sh chaturbate-overlay-app/bin/start-dev.sh

Starting A Production Instance

sh chaturbate-overlay-app/bin/start-prod.sh

Developing New Views

Views are located at:

src/views/<VIEW NAME>/view-<VIEW NAME>.html

They need to be registered with src/my-app.html under this comment:

<!-- ADD VIEWS HERE -->

Note:

There are two places in my-app.html that need to be updated.

All views should include the <chaturbate-controller> tag:

<chaturbate-controller 
    username="[[subrouteData.username]]"
    chat="{{chat}}"
    ...>
</chaturbate-controller>

The data-bindings provided by the controller component can be used to dive other UI components:

<chaturbate-chat items="{{chat}}"></chaturbate-chat>

Developing New Polymer Components

First create a new git repo for the component.

Then create the new component and create a global link to it:

mkdir new-component && cd new-component
git clone https://github.com/YOUR-USERNAME/new-component.git  .
bower init
touch new-component.html
bower link

Link the new component to this app:

cd chaturbate-overlay-app
bower link new-component

Update your view to import the new component:

<link rel="import" href="../../../bower_components/new-component/new-component.html">

Update your view to use the new component:

<new-component></new-component>

Test the new component:

sh chaturbate-overlay-app/bin/start-dev.sh

After the component is complete, upload it to Github.

cd new-component
git add .
git commit -m 'initial commit'
git tag v1.0.0
git push origin master --tags

Add the new component to the Bower dependencies:

cd chaturbate-overlay-app
bower add https://github.com/YOUR-USERNAME/new-component.git --save

Finally push a commit of this app with the new component:

git add .
git commit -m 'added new component'
git push origin master

Developing New Node Modules

First create a new git repo for the module.

Then create the new module and create a global link to it:

mkdir new-module && cd new-module
git clone https://github.com/YOUR-USERNAME/new-module.git  .
yarn init --scope=YOUR-USERNAME
touch index.js
yarn link

Link the new module to this app:

cd chaturbate-overlay-app
yarn link @YOUR-USERNAME/new-module

Update the server to import the new module:

const NewModule = require('@YOUR-USERNAME/new-module')

Test the new module:

sh chaturbate-overlay-app/bin/start-dev.sh

After the module is complete, upload it to Github.

cd new-module
git add .
git commit -m 'initial commit'
git tag v1.0.0
git push origin master --tags

The publish it to NPM:

yarn publish --access=public

Add the new module to the node dependencies:

cd chaturbate-overlay-app
yarn install @YOUR-USERNAME/new-module --save

Finally push a commit of this app with the new component:

git add .
git commit -m 'added new module'
git push origin master

Building A New Docker Image

sh chaturbate-overlay-app/bin/docker/build.sh

Running A New Docker Image

sh chaturbate-overlay-app/bin/docker/run.sh