It'd be awesome if the player could responsively resize its height based on its width.

Thanks!

I'd love to be able to provide a className property for the returned component instead of an ID.

I use this.props to send my components props to utilize.

I define this in my App.js via a line in render which passes the props from state to the data property:

        <Twitch data={this.state.resumeData.social}/>   

On the component I am loading this via

var myUsername = this.props.data.twitch

This is so I can retrieve the Username from a JSON file that is stored in State rather than hard coding things.

I am then expecting to pass this to the TwitchEmbed component via

                    <TwitchEmbed channel={myUsername} theme="dark" muted />

This fails indicating that the channel is expected and not defined.

Upon investigating this, I am finding that whenever I have any of the components from react-twitch-embed in the return for my Twitch component, it overwrites this.props with its own data which clears out the properties I am passing the component.

I have never had this issue with other React modules. Any thoughts on what is happening here and how to prevent it?

The function that adds the website domain into the parent parameters of the clip and chat urls requires access to the window object which is not defined on SSR apps at the stage it's been used. This only happens when these components are loaded on the first page accessed of the app.

Error: Could not find a declaration file for module 'react-twitch-embed'. 'c:/Users/ClassifiedUser/ClassifiedProject/node_modules/react-twitch-embed/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-twitch-embed if it exists or add a new declaration (.d.ts) file containing `declare module 'react-twitch-embed';

Tried both import and namespace imports
import * as reactTwitchEmbed from 'react-twitch-embed';
import { TwitchEmbed, TwitchChat, TwitchClip, TwitchPlayer } from 'react-twitch-embed';

Neither of which will work in gatsby-react.

Lovely package, thanks for dealing with all the crap for us, unfortunately, the TwitchEmbed doesn't work at all.

I'm running on the latest version of next.js, on localhost. I tested chat and the others, they work.

I don't see the request for twitch's JS files at all. I am using server-side rendering, since, well, it is, after all, a Next.js app, however, this component isn't SSR, or so I think.

This component loads on every page, very, very early on. Here's the dump , included as an image if you prefer that:

Unhandled Runtime Error
TypeError: Cannot read property 'Embed' of undefined

Call Stack
TwitchEmbed._createEmbed
node_modules\react-twitch-embed\dist\index.es.js (220:0)

TwitchEmbed.componentDidUpdate
/_next/static/chunks/pages/_app.js (46980:21)

commitLifeCycles
node_modules\react-dom\cjs\react-dom.development.js (19835:0)

commitLayoutEffects
/_next/static/chunks/main.js (43099:7)

HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (188:0)

Object.invokeGuardedCallbackDev
/_next/static/chunks/main.js (20533:16)

invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (292:0)

commitRootImpl
/_next/static/chunks/main.js (42837:9)

unstable_runWithPriority
node_modules\scheduler\cjs\scheduler.development.js (653:0)

runWithPriority$1
/_next/static/chunks/main.js (31335:10)

commitRoot
node_modules\react-dom\cjs\react-dom.development.js (22381:0)

finishSyncRender
/_next/static/chunks/main.js (42103:3)

performSyncWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (21793:0)

<unknown>
/_next/static/chunks/main.js (31385:24)

unstable_runWithPriority
node_modules\scheduler\cjs\scheduler.development.js (653:0)

runWithPriority$1
/_next/static/chunks/main.js (31335:10)

flushSyncCallbackQueueImpl
node_modules\react-dom\cjs\react-dom.development.js (11084:0)

flushSyncCallbackQueue
/_next/static/chunks/main.js (31368:3)

flushPassiveEffectsImpl
node_modules\react-dom\cjs\react-dom.development.js (22883:0)

unstable_runWithPriority
/_next/static/chunks/main.js (49289:12)

runWithPriority$1
node_modules\react-dom\cjs\react-dom.development.js (11039:0)

flushPassiveEffects
/_next/static/chunks/main.js (43116:12)

<unknown>
node_modules\react-dom\cjs\react-dom.development.js (22699:0)

workLoop
/_next/static/chunks/main.js (49233:34)

flushWork
node_modules\scheduler\cjs\scheduler.development.js (552:0)

MessagePort.performWorkUntilDeadline
/_next/static/chunks/main.js (48800:27)

I can see that it's calling unknownHTMLElement which makes me think it failed to load properly at all.

I'm getting the Twitch purple screen when embedding...I tried adding the parent domains in the array but it doesn't help...anyone know if this is just Twitch showing it no matter what as seems to be indicated on other forums?

Any way to get rid of it?

I want to hide the default controls that twitch gives and use my own custom ones is that possible?

Web browsers started using native picture-in-picture modes for videos and images, and they're automatically set. Per the spec at W3C Editors Draft, a new attribute called disablePictureInPicture is ready to be used in order to disable picture-in-picture frames.

But, your component is filtered for predefined attributes that are passed to the final embed, so it's hard to implement a direct solution for the problem, is that simple to add it? Can I do a fork and do it myself? I'm not used to class components.

The package looks great and I've tested the example out. When I try to integrate into my project I'm getting a document not defined error. I'm including the package and installed all of the dependencies and importing it like so: // import { TwitchEmbed, TwitchChat, TwitchClip, TwitchPlayer } from 'react-twitch-embed';

Do you have any ideas as to what might be going on? The errors I'm getting are below. Thanks in advance!

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
file:///Users/jshaw/Sites/vector2020/strapi-starter-next-blog/frontend/node_modules/react-twitch-embed/dist/index.js (95:21)
Module._compile
internal/modules/cjs/loader.js (1158:30)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1178:10)
Module.load
internal/modules/cjs/loader.js (1002:32)
Function.Module._load
internal/modules/cjs/loader.js (901:14)
Module.require
internal/modules/cjs/loader.js (1044:19)
require
internal/modules/cjs/helpers.js (77:18)
eval
external%20%22react-twitch-embed%22 (1:0)
Object.react-twitch-embed
file:///Users/jshaw/Sites/vector2020/strapi-starter-next-blog/frontend/.next/server/static/development/pages/event/[id].js (448:1)
__webpack_require__
file:///Users/jshaw/Sites/vector2020/strapi-starter-next-blog/frontend/.next/server/static/development/pages/event/[id].js (23:31)

Hey there! Great repo by the way. I'm having some trouble getting the Twitch Player Controls to hide/not show with the Player. Can you let me know how you do it for them not to show? People have said there's a way like with a Controls prop. I would really appreciate any help!