Get current status of Player in event listener attached to it?

Hey folks,
I’m making a web app that embeds multiple Twitch players in a single page, and the app checks the channel’s online/offline status to decide how to order them in the page (by changing channels using setChannel(...). I’m trying to use event listeners to get the best responsiveness on this (compared to polling the channels API, which can lag behind by minutes at times), but a problem arises when I’m trying to define the Players’ ‘online’ and ‘ended’ event listeners (I chose ‘ended’ over ‘offline’ because ‘offline’ seems to get called multiple times, while ‘ended’ is only called once, when a stream goes offline); I can pass in the Player object I’ve defined, but the event listener will always reference the initial state of the Player rather than its most up-to-date state. See code sample below:

player = new Twitch.Player( id, { channel: 'kinggothalion' } );
player.addEventListener( 'online', recalibratePlayers( player.getChannel(), 'online' ) );
player.addEventListener( 'ended', recalibratePlayers( player.getChannel(), 'offline' ) );

Is there a way I can instead have these event listeners poll the current state of the Player object they’re assigned to to get the current channel of the player? Thanks!

Just to make sure I’m understanding, you initialize the player with channel kinggothalion, setChannel(‘otherchannel’), and then getChannel() still returns kinggothalion?

@DallasNChains, not exactly. When I add the event listener to the Player, it’s calling player.getChannel(), which gets the currently-assigned channel when I define the event listener. So future event callbacks calling the original channel don’t surprise me.

I also tried passing the player object instead of player.getChannel(), but this also only returns the current state of the player, so I get the same result if I try to invoke player.getChannel() in the recalibratePlayers method.

What I need is some way to access the current state of the player that an event listener is attached to when it’s called.

Oh! I see. You’re looking for the object that fired the event listener. You’ll need to research this in JavaScript. In particular, I would look at the section titled “The value of this within the handler” on MDN.

I’ve noticed you don’t bind an actual function.
You need to wrap your recalibratePlayers functions into an anonymous function, or create a synonym.

Either replace both
recalibratePlayers( ...)
with
function() { recalibratePlayers( ...); }
or replace them both with:
recalibratePlayer.bind(player,arg1,arg2)

What the code you gave is doing, is binding the ‘RESULT’ of the function recalibratePlayers as an event listener. IE, it executes the function in place ONCE. It executes the function and puts the return value or whatever it does in the addEventListener function.

read more about function binds here

@DallasNChains, @JB940, thank you for your replies! I’ll give those a try and see if I get the correct results.

@JB940’s suggestion worked for me. Putting the call to recalibratePlayers(player.getChannel(), ...) inside an anonymous function when adding the event listener passes the current status of the player. Thanks for all your help!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.