react-twitch-embed/dist/index.es.js

A collection of components to embed Twitch.

import e,{useState as t,useEffect as n,useRef as r,useCallback as o}from"react";function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}"function"==typeof SuppressedError&&SuppressedError;const a=()=>{const[e,r]=t();return n((()=>{r(window.location.hostname)}),[]),e},l="https://embed.twitch.tv/embed/v1.js",d="https://www.twitch.tv/embed",c="https://clips.twitch.tv/embed",s="https://player.twitch.tv/js/embed/v1.js",h="https://player.twitch.tv",u={CHAT:{HEIGHT:550,WIDTH:350},MEDIA:{HEIGHT:480,WIDTH:940},ID:{TWITCH_EMBED:"twitch-embed",TWITCH_PLAYER:"twitch-player"},TITLE:{TWITCH_CHAT:"TwitchChat",TWITCH_CLIP:"TwitchClip",TWITCH_PLAYER_NON_INTERACTIVE:"TwitchPlayerNonInteractive"},ALLOW_FULLSCREEN:!0,AUTOPLAY:!0,WITH_CHAT:!0,MUTED:!1,DARK_MODE:!0,TIME:"0h0m0s",HIDE_CONTROLS:!1,INLINE:!0},E={darkMode:u.DARK_MODE},p=t=>{var{channel:n,parent:r,darkMode:o=u.DARK_MODE,title:l=u.TITLE.TWITCH_CHAT,height:c=u.CHAT.HEIGHT,width:s=u.CHAT.WIDTH}=t,h=i(t,["channel","parent","darkMode","title","height","width"]);const p=a();if(!r&&!p)return null;const T=((e,t,n=E)=>{const r=Object.assign(Object.assign({},E),n),o=new URLSearchParams;Array.isArray(t)?t.forEach((e=>o.append("parent",e))):o.append("parent",t);const i=r.darkMode?"?darkpopout&":"?";return`${d}/${e}/chat${i}${o.toString()}`})(n,null!=r?r:p,{darkMode:o});return e.createElement("iframe",Object.assign({title:l,height:c,width:s,src:T,frameBorder:0},h))},T={autoplay:u.AUTOPLAY,muted:u.MUTED},I=t=>{var{clip:n,parent:r,autoplay:o=u.AUTOPLAY,muted:l=u.MUTED,title:d=u.TITLE.TWITCH_CLIP,height:s=u.MEDIA.HEIGHT,width:h=u.MEDIA.WIDTH}=t,E=i(t,["clip","parent","autoplay","muted","title","height","width"]);const p=a();if(!r&&!p)return null;const I=((e,t,n=T)=>{const r=Object.assign(Object.assign({},T),n),o=new URLSearchParams;return o.append("clip",e),o.append("autoplay",r.autoplay.toString()),o.append("muted",r.muted.toString()),Array.isArray(t)?t.forEach((e=>o.append("parent",e))):o.append("parent",t),`${c}?${o.toString()}`})(n,null!=r?r:p,{autoplay:o,muted:l});return e.createElement("iframe",Object.assign({title:d,height:s,width:h,src:I,frameBorder:0},E))},v=e=>{const[r,o]=t({loading:!0,error:null});return n((()=>{if(!e)return void o({loading:!1,error:new Error("No src provided to useScript.")});let t=document.querySelector(`script[src="${e}"]`);t?o((e=>Object.assign(Object.assign({},e),{loading:"true"===t.getAttribute("data-loading")}))):(t=document.createElement("script"),t.src=e,t.async=!0,t.type="text/javascript",t.setAttribute("data-loading","true"),document.body.appendChild(t),t.addEventListener("load",(()=>{null==t||t.setAttribute("data-loading","false")}),{once:!0}),t.addEventListener("error",(()=>{null==t||t.setAttribute("data-loading","false")}),{once:!0}));const n=t=>{"load"===t.type?o({loading:!1,error:null}):"error"===t.type&&o({loading:!1,error:new Error(`There was an error loading the script for ${e}`)})};return t.addEventListener("load",n),t.addEventListener("error",n),()=>{null==t||t.removeEventListener("load",n),null==t||t.removeEventListener("error",n)}}),[e]),r},y=e=>{const t=r();return n((()=>{t.current=e}),[e]),t.current},A=()=>e=>{},L=()=>(e,t)=>{},g=(e,t,n)=>{for(const r in e){if(e[r]!==t[r]&&!n.includes(r))return!0}return!1},m=e=>{const t=document.getElementById(e);t&&(t.innerHTML="")},w=["channel","video","collection","height","width"],O=t=>{const{allowFullscreen:a=u.ALLOW_FULLSCREEN,autoplay:d=u.AUTOPLAY,channel:c,video:s,collection:h,withChat:E=u.WITH_CHAT,muted:p=u.MUTED,parent:T,darkMode:I=u.DARK_MODE,time:O=u.TIME,hideControls:D=u.HIDE_CONTROLS,onAuthenticate:C=L(),onVideoPlay:H=L(),onVideoPause:P=A(),onVideoReady:f=A(),id:b=u.ID.TWITCH_EMBED,height:M=u.MEDIA.HEIGHT,width:_=u.MEDIA.WIDTH}=t,S=i(t,["allowFullscreen","autoplay","channel","video","collection","withChat","muted","parent","darkMode","time","hideControls","onAuthenticate","onVideoPlay","onVideoPause","onVideoReady","id","height","width"]),{loading:N,error:R}=v(l),U=y(t),j=r(),W=o((e=>{m(b);const t=new e(b,{allowfullscreen:a,autoplay:d,channel:c,video:s,collection:h,layout:E?"video-with-chat":"video",muted:p,parent:"string"==typeof T?[T]:T,theme:I?"dark":"light",time:O,controls:!D,height:"100%",width:"100%"});return t.addEventListener(e.AUTHENTICATE,(e=>C(t,e))),t.addEventListener(e.VIDEO_PLAY,(e=>H(t,e))),t.addEventListener(e.VIDEO_PAUSE,(()=>P(t))),t.addEventListener(e.VIDEO_READY,(()=>f(t))),t}),[a,d,c,s,h,E,p,T,I,O,D,C,P,H,f,b]);return n((()=>{N||(R?console.error(R):j.current&&!((e,t)=>{var n;return g(null!==(n=e)&&void 0!==n?n:{},t,w)})(U,t)?(c&&(null==U?void 0:U.channel)!==c&&j.current.getPlayer().setChannel(c),s&&(null==U?void 0:U.video)!==s&&j.current.getPlayer().setVideo(s,0),h&&(null==U?void 0:U.collection)!==h&&j.current.getPlayer().setCollection(h,s)):j.current=W(window.Twitch.Embed))}),[c,h,W,R,N,U,t,s]),N?null:e.createElement("div",Object.assign({id:b,style:{height:M,width:_}},S))},D=["channel","video","collection","height","width"],C=t=>{const{channel:a,video:l,collection:d,parent:c,autoplay:h=u.AUTOPLAY,muted:E=u.MUTED,time:p=u.TIME,allowFullscreen:T=u.ALLOW_FULLSCREEN,playsInline:I=u.INLINE,hideControls:w=u.HIDE_CONTROLS,onCaptions:O=L(),onEnded:C=A(),onPause:H=A(),onPlay:P=L(),onPlaybackBlocked:f=A(),onPlaying:b=A(),onOffline:M=A(),onOnline:_=A(),onReady:S=A(),onSeek:N=L(),id:R=u.ID.TWITCH_PLAYER,height:U=u.MEDIA.HEIGHT,width:j=u.MEDIA.WIDTH}=t,W=i(t,["channel","video","collection","parent","autoplay","muted","time","allowFullscreen","playsInline","hideControls","onCaptions","onEnded","onPause","onPlay","onPlaybackBlocked","onPlaying","onOffline","onOnline","onReady","onSeek","id","height","width"]),{loading:Y,error:k}=v(s),V=y(t),B=r(),$=o((e=>{m(R);const t=new e(R,{channel:a,video:l,collection:d,parent:"string"==typeof c?[c]:c,autoplay:h,muted:E,time:p,allowfullscreen:T,playsinline:I,controls:!w,height:"100%",width:"100%"});return t.addEventListener(e.CAPTIONS,(e=>O(t,e))),t.addEventListener(e.ENDED,(()=>C(t))),t.addEventListener(e.PAUSE,(()=>H(t))),t.addEventListener(e.PLAY,(e=>P(t,e))),t.addEventListener(e.PLAYBACK_BLOCKED,(()=>f(t))),t.addEventListener(e.PLAYING,(()=>b(t))),t.addEventListener(e.OFFLINE,(()=>M(t))),t.addEventListener(e.ONLINE,(()=>_(t))),t.addEventListener(e.READY,(()=>S(t))),t.addEventListener(e.SEEK,(e=>N(t,e))),t}),[a,l,d,c,h,E,p,T,I,w,O,C,M,_,H,P,f,b,S,N,R]);return n((()=>{Y||(k?console.error(k):B.current&&!((e,t)=>{var n;return g(null!==(n=e)&&void 0!==n?n:{},t,D)})(V,t)?(a&&(null==V?void 0:V.channel)!==a&&B.current.setChannel(a),l&&(null==V?void 0:V.video)!==l&&B.current.setVideo(l,0),d&&(null==V?void 0:V.collection)!==d&&B.current.setCollection(d,l)):B.current=$(window.Twitch.Player))}),[a,d,$,k,Y,V,t,l]),Y?null:e.createElement("div",Object.assign({id:R,style:{height:U,width:j}},W))},H={autoplay:u.AUTOPLAY,muted:u.MUTED,time:u.TIME},P=t=>{var{parent:n,channel:r,video:o,collection:l,autoplay:d=u.AUTOPLAY,muted:c=u.MUTED,time:s=u.TIME,title:E=u.TITLE.TWITCH_PLAYER_NON_INTERACTIVE,height:p=u.MEDIA.HEIGHT,width:T=u.MEDIA.WIDTH}=t,I=i(t,["parent","channel","video","collection","autoplay","muted","time","title","height","width"]);const v=a();if(!n&&!v)return null;const y=((e,t,n=H)=>{const r=Object.assign(Object.assign({},H),n),o=new URLSearchParams;return e.channel?o.append("channel",e.channel):(e.video&&o.append("video",e.video),e.collection&&o.append("collection",e.collection)),Object.entries(r).forEach((([e,t])=>{o.append(e,t.toString())})),Array.isArray(t)?t.forEach((e=>o.append("parent",e))):o.append("parent",t),`${h}/?${o.toString()}`})({channel:r,video:o,collection:l},null!=n?n:v,{autoplay:d,muted:c,time:s});return e.createElement("iframe",Object.assign({title:E,height:p,width:T,src:y,frameBorder:0},I))};export{p as TwitchChat,I as TwitchClip,O as TwitchEmbed,C as TwitchPlayer,P as TwitchPlayerNonInteractive};
//# sourceMappingURL=index.es.js.map