Hi folks. I’ve noticed what appears to be a change in Twitch.Player events that fire when a stream goes offline, when dealing with interactive player embeds and the twitch.js library.
I’ve set up a simple test page to test which events fire when the stream goes online or offline, and when:
<head>
<style>
html, body {
margin: 0;
padding: 0;
}
#container {
display: flex;
flex-flow: row nowrap;
}
#streams {
flex: 0 0 60%;
}
#log {
flex: 0 0 40%;
}
#container > div {
height: 100vh;
overflow-y: auto;
}
#streams > div {
width: 100%;
height: 480px;
}
</style>
</head>
<script src= "http://player.twitch.tv/js/embed/v1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
<div id="streams"></div>
<div id="log">
Events will appear here.
<ul id="event-list"></ul>
</div>
</div>
<script type="text/javascript">
var options = {width: '100%', height: '100%', channel: 'Argus9'};
var id = 'player-' + 'Argus9';
$('#streams').append('<div id="' + id + '"></div>');
var player = new Twitch.Player(id, options);
player.setMuted(false);
player.setVolume(1);
player.addEventListener(Twitch.Player.ONLINE, function () {
$('#event-list').append('<li style="color: darkgreen;">[' + new Date($.now()).toISOString() + '][' + 'Argus9' + '][VISIBLE] ONLINE</li>');
});
player.addEventListener(Twitch.Player.OFFLINE, function () {
$('#event-list').append('<li style="color: darkred;">[' + new Date($.now()).toISOString() + '][' + 'Argus9' + '][VISIBLE] OFFLINE</li>');
});
player.addEventListener(Twitch.Player.PAUSE, function () {
$('#event-list').append('<li style="color: darkgoldenrod;">[' + new Date($.now()).toISOString() + '][' + 'Argus9' + '][VISIBLE] PAUSE</li>');
});
player.addEventListener(Twitch.Player.ENDED, function () {
$('#event-list').append('<li style="color: darkred;">[' + new Date($.now()).toISOString() + '][' + 'Argus9' + '][VISIBLE] ENDED</li>');
});
player.addEventListener(Twitch.Player.PLAY, function () {
$('#event-list').append('<li style="color: darkgreen;">[' + new Date($.now()).toISOString() + '][' + 'Argus9' + '][VISIBLE] PLAY</li>');
});
player.addEventListener(Twitch.Player.READY, function () {
$('#event-list').append('<li style="color: darkgreen;">[' + new Date($.now()).toISOString() + '][' + 'Argus9' + '][VISIBLE] READY</li>');
});
</script>
The page itself isn’t very important - it’s just a diagnostic tool to figure out the larger issue I’m writing about here.
Previously, the embedded player behaved such that it would automatically resume playing if its channel went from OFFLINE to ONLINE. In this case the Twitch.Player.ONLINE event occurs, and any event listeners on that event would fire.
When a channel goes from ONLINE to OFFLINE, the Twitch.Player.OFFLINE event (and Twitch.Player.ENDED, I believe) event(s) would fire.
Now, I’m noticing entirely different behavior:
Behavior / Events Fired
Player loaded, Channel is Online / Ready, Online, Play
Channel goes from Online to Offline / Paused, Ended
Player loaded, Channel is Offline / Ready, Ended
Channel goes from Offline to Online / None
Can anyone explain this change in behavior? This completely breaks an implementation I’m working on with multiple streams in a page, which relies on event listeners to function properly.
I know the documentation says the event is a String, but I believe it’s referring to the variable the constant “Twitch.Player.ONLINE” (etc.) refers to. For instance, Twitch.Player.ONLINE = “online”.