react-twitch-embed/dist/index.js

A collection of components to embed Twitch.

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