Trouble Mapping Multiple Interactive Twitch Players with ReactJS

Hello all, I am creating a React App that will embed small streamers live streams in cards that span the page in rows and columns. I have the Twitch Embedding setup correctly, I think. When I display just one stream it works correctly, but when I try to map through multiple users, all of the streams seem to get bunched into one card, then the rest of the cards just have the streams information but no stream. I also noticed that the streams are not mapped in the same order as they are stored in the program. I also tried using the non-interactive embedding and that worked as intended. Unfortunately, I would really love to use the interactive to hide streams that are offline and to be able to set volumes of the stream rather than just mute/unmute. I will include the code to both my interactive twitch embed for react and the mapping function that I was attempting to use.

TWITCH INTERACTIVE CODE:

import React from ‘react’;
import root from ‘window-or-global’;

const EMBED_URL = ‘https://embed.twitch.tv/embed/v1.js’;

class Stream extends React.Component {

static defaultProps = {
targetID: ‘twitch-embed’,
width: ‘400’,
height: ‘270’,
channel: ‘bossviz’,
layout: ‘video’,
autoplay: true,
muted: false,
};

state = {
embed : null,
};

componentDidMount(){
if (root.Twitch && root.Twitch.Embed){
this.embed = new root.Twitch.Embed(this.props.targetID, {…this.props});
this._addEventListeners();
} else {
const script = document.createElement(‘script’);
script.setAttribute(
‘src’, EMBED_URL
);

	script.addEventListener('load', () =>{
		this.embed = new root.Twitch.Embed(this.props.targetID, {...this.props});
		this._addEventListeners();
	});

	document.body.appendChild(script);
}

}

_addEventListeners(){

this.embed.addEventListener(root.Twitch.Embed.VIDEO_PLAY, function(data){
	if(this.props.onVideoPlay){
		this.props.onVideoPlay(data);
	}
}.bind(this));

this.embed.addEventListener(root.Twitch.Embed.VIDEO_READY, function(){
	const {autoplay, muted} = this.props;

	var player = this.embed.getPlayer();

	player.setVolume(0.01);

	console.log(player.getMuted());

	if(!autoplay){
		player.pause();
	}
	if(this.props.onPlayerReady){
		this.props.onPlayerReady(player);
	}
}.bind(this));

}

render() {

return (
    <div id={this.props.targetID}></div>
)

}
}

export default Stream;

CODE FOR THE MAPPING:

import React, { Component } from ‘react’;
import uuid from ‘uuid’;
import Stream from ‘./Stream’;

class StreamPage extends Component {

state = {
    streams: [
        {id: uuid(), channel: 'unknownkoder', desc: "Test description"},
        {id: uuid(), channel: 'ltgoodl', desc: "Test description"},
        {id: uuid(), channel: 'thekeno', desc: "Test description"},
        {id: uuid(), channel: 'steamypowered', desc: "Test description"},
        {id: uuid(), channel: 'ghostunknown_tv', desc: "Test description"},
        {id: uuid(), channel: 'wrenchedup', desc: "Test description"}
    ]
}

render(){
    const { streams, url } = this.state;
    return(
        <div className="cards">
            
            {streams.map(stream => (
                <div>
                    <Stream channel={stream.channel}/>
                    <p>{stream.desc}</p>
                </div>
            ))}
        </div>
    );
}

}

export default StreamPage;

Thank you for any and all help and or recommendations.

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