=== Twitch Status ===
Contributors: nicolas.bernier
Tags: Twitch.tv, tag, AJAX, status, widget, thumbnail
Requires at least: 3.0.1
Tested up to: 4.3.1
Stable tag: 1.2.2
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Inserts Twitch.tv stream status widget and tags for your blog menus, pages and whatever following jQuery selectors. Now supports multiple channels!

== Description ==

Inserts Twitch.tv stream status tags in your blog. The tags just indicates if the stream is live with a blinking red cirle or offline.

Supports multiple channels.

Also implements a simple widget showing the stream status (including the thumbnail, title, game name and number of viewers) + CSS classes to show and hide some elements of the markup accordingly to the channel status.

The tags and the widget are updated every 30 seconds.

== Installation ==

1. Download and unzip twitch-status archive contents to the `/wp-content/plugins/twitch-status` directory or add it using WordPress' plugin manager.
2. Activate the plugin through the 'Plugins' menu in WordPress.

== Configuration ==

1. Go to *Settings* / *Twitch status*
2. Enter your channel name and the jQuery selectors matching the places you want to insert the tags.
3. You can add more than one channel by clicking the "Add channel" button.

== Frequently Asked Questions ==

= I want to add a stream status tag on my "Twitch" tab. How do I find the matching jQuery selector? =

You can find the jQuery selector by using the browser developers tools (right click / inspect on element) to get the id and/or classes of the element. If you have an id, just prepend the # symbol to it and you have it. For example, if your element has ID `menu-item-582`, the jQuery selector would be `#menu-item-582`. If the menu element has a link inside it (`a` element), add the a element in the selector `#menu-item-582 a`.

If your element doesn't have an id but a class, use the class instead. The matching selector would have a `.` instead of a `#` (ie `.menu-item-582 a`).

Fore more information about jQuery selectors, check out http://api.jquery.com/category/selectors/

= How to I add the stream status tag in a blog post or page? =

Just add the following HTML code anywhere you want one : `<span class="twitch-status-tag twitch-status-channel-CHANNEL_NAME"></span>` where CHANNEL_NAME` is the name of the channel you want to display the status.

Please be aware that the channel must be added on the settings page.

= Can I show and hide some parts of my page accordingly to my channel status? =

Yes! There are 3 CSS classes `twitch-is-online`, `twitch-is-offline` and `twitch-is-loading` to be used in conjunction with your channel CSS class `twitch-status-channel-CHANNEL_NAME` (where `CHANNEL_NAME` is the name of your channel) to achieve this.

Please be aware that the channel must be added on the settings page.

Example, if your channel name is "nolife":

`Nolife is <span class="twitch-status-channel-nolife"><span class="twitch-is-online">online to kick ass and chew bubble gum!</span><span class="twitch-is-offline">offline. Eighters gonna 8.</span><span class="twitch-is-loading">...</span></span>`

The example below shows the embedded player when the "nolife" channel is online:

`<div class="twitch-is-online twitch-status-channel-nolife">
	<!-- Copy and paste the embedded player code provided by Twitch.tv here -->
</div>`

== Screenshots ==

1. The stream status tag when online and offline.
2. The stream status widget when online.
3. The stream status widget when offline.

== Changelog ==

= 1.2.2 =
* Fixed calls to Twitch.tv API.

= 1.2.1 =
* Added CSS classes `twitch-is-online`, `twitch-is-offline` and `twitch-is-loading` to be used in conjunction with `twitch-status-channel-CHANNEL_NAME` to enable/disable some elements of the page accordingly to the channel status.
* Fixed widget size issues

= 1.2 =
* Added multiple channel support

= 1.1 =
* Added stream status widget

= 1.0 =
* First release

== Upgrade Notice ==

= 1.x to 2.x =

If you added some custom Twitch status tags, you have to add the CSS class `twitch-status-channel-CHANNEL_NAME` (where `CHANNEL_NAME` is the name of your channel) to the markup of each of them.