User Stock Element #

You can use this Stock Element by extending the exported global: window.casthub.elements.user

The User Info Stock Element provides a base for presenting labeled information to the User, such as Stream Online status and Follower Count. An example of where this is used would the the many different User Modules, like the Twitch User Module.

Labels #

The most powerful part of the User Stock Element is the Labels system. This allows you to display labeled short text or counts to the User and update them easily.

To make use of this system, you have to define your List items in your constructor, for example:

this.setLabels({
    followers: {
        name: 'Followers',
        label: -1,
        enabled: true,
    },
    subscribers: {
        name: 'Subscribers',
        label: -1,
        enabled: false,
    },
});

This creates two Labels, Followers and Subscribers. Let's break-down the object:

  • name - The text displayed above the contents of the Label.
  • label - The initial content for the Label. Labels can be Number or String.
    • If a Label is a Number and is initially -1, it will be displayed as a - character.
    • If a Number, it will also be formatted as a number.
  • enabled - Whether the Label should be showed by default. You can enable/disable Labels whenever you like, this is just the initial state.

Now that you have registered your Label definitions, you can update them at any point in time with the following methods:

  • this.setLabel(key, value) - Set the key Label to the given value. E.g.:
    • this.setLabel('followers', 5)
    • this.setLabel('online', 'OFFLINE')
  • this.setLabelEnabled(key, enabled) - Sets whether the key Label is enabled or not. E.g.:
    • this.setLabelEnabled('subscribers', true)

Other Customisation #

The following properties can be set to further customise the Stock Element:

  • avatar - Sets the Avatar Image to the given URL.
  • colour - Sets the colour of the header block.
  • icon - Sets an Icon shown to the left of the header block, see a list of available Icons here.