(this.webpackJsonpfrontend=this.webpackJsonpfrontend||[]).push([[0],{116:function(e,n){},136:function(e,n){},138:function(e,n){},146:function(e,n,t){"use strict";t.r(n);var r=t(0),o=t.n(r),a=t(63),i=t.n(a),c=(t(79),t(80),t(71)),u=t(9),l=t(64),s=t.n(l),f=t(1),d=t(2);function m(){var e=Object(f.a)(["\n  background-color: #cad5db;\n  border: 1px solid gray;\n  border-radius: 3px;\n  margin: 6px;\n  padding-left: 3px;\n"]);return m=function(){return e},e}function p(){var e=Object(f.a)(["\n  background-color: rgb(50, 52, 56);\n\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  padding-left: 6px;\n  padding-right: 6px;\n\n  @media screen and (min-width: 2048px) {\n    margin-left: 400px;\n    margin-right: 400px;\n  }\n  @media screen and (min-width: 1024px) {\n    margin-top: 100px;\n    margin-left: 300px;\n    margin-right: 300px;\n  }\n"]);return p=function(){return e},e}var h=d.a.div(p()),v=d.a.div(m());function g(){var e=Object(f.a)(["\n  color: rgb(50, 52, 56);\n"]);return g=function(){return e},e}function E(){var e=Object(f.a)(["\n  color: rgb(231, 232, 233);\n"]);return E=function(){return e},e}function O(){var e=Object(f.a)(["\n  color: rgb(237, 125, 49);\n"]);return O=function(){return e},e}function b(){var e=Object(f.a)(["\n  color: rgb(237, 125, 49);\n"]);return b=function(){return e},e}function R(){var e=Object(f.a)(["\n  color: rgb(237, 125, 49);\n"]);return R=function(){return e},e}function S(){var e=Object(f.a)(["\n  color: rgb(237, 125, 49);\n"]);return S=function(){return e},e}d.a.h1(S());var k=d.a.h2(R()),x=(d.a.h3(b()),d.a.h4(O())),I=(d.a.p(E()),d.a.p(g()));function N(){var e=Object(f.a)(["\n  color: rgb(231, 232, 233);\n  background-color: rgb(237, 125, 49);\n  border-radius: 3px;\n  margin: 6px;\n  border: 1px solid gray;\n  font-size: 20px;\n"]);return N=function(){return e},e}function y(){var e=Object(f.a)(["\n  border: 1px solid gray;\n  height: 20px;\n  margin: 6px;\n  font-size: 18px;\n"]);return y=function(){return e},e}var _=d.a.input(y()),w=d.a.button(N()),j=Object(u.f)((function(e){var n=Object(r.useState)(s.a.getRandomName(20)),t=Object(c.a)(n,2),a=t[0],i=t[1],u=function(){e.history.push("/".concat(a))};return o.a.createElement(h,null,o.a.createElement(k,null,"Einfacher Anonymer chat."),o.a.createElement(v,null,o.a.createElement(I,null,"Einfach einen Chatroom namen \xfcberlegen und eingeben."),o.a.createElement(I,null,"Im Anschluss den Link an den Chatpartner senden."),o.a.createElement(I,null,"Und loschatten! :) "),o.a.createElement(I,null,"Viel Spa\xdf")),o.a.createElement(x,null,"Bitte Raumname eingeben:"),o.a.createElement(_,{onKeyDown:function(e){"Enter"===e.key&&u()},value:a,onChange:function(e){i(e.target.value)},type:"text"}),o.a.createElement(w,{onClick:function(){u()}},"Eintreten"))})),L=t(36),U=t.n(L),A=t(69),C=t(10),D=t(20),M=t(73),T=t(72),V=t(70),G=t.n(V),J=t(21),P=t.n(J),H=function e(){var n=this;Object(C.a)(this,e),this.peer={},this.init=function(e,t,r){var o=new P.a({initiator:t,stream:e,trickle:!1,reconnectTimer:1e3,config:{iceServers:[{urls:"stun:stun4.l.google.com:19302".split(",")},{urls:"turn:turn4.l.google.com:19302".split(","),username:"[email]",credential:"[password]"}]}});return n.peer[r]=o,o},this.connect=function(e,t){console.log("peer counts",Object.keys(n.peer).length),n.peer[t].signal(e)}},B=function(){function e(){Object(C.a)(this,e),this.peerHandler=void 0,this.peerHandler=new H}return Object(D.a)(e,[{key:"getNewServerConnection",value:function(e){return new F(e)}},{key:"getNewPeerConnection",value:function(e,n,t){return this.peerHandler.init(e,n,t)}},{key:"connectPeerConnection",value:function(e,n){this.peerHandler.connect(e,n)}}]),e}(),z={JOIN_ROOM:"JOIN_ROOM",USER_SIGNAL:"USER_SIGNAL",RETURNED_SIGNAL:"RETURNED_SIGNAL"},W={INIT_ROOM:"INIT_ROOM",USER_HELLO:"HELLO",ENTER_ROOM:"USER_ENTER_ROOM",LEAVE_ROOM:"USER_LEAVE_ROOM",SIGNAL_CONNECTION:"SIGNAL_CONNECTION",ALL_USER_AT_ROOM:"ALL_USER_AT_ROOM",USER_JOINED:"USER_JOINED",RECEIVE_RETURNED_SIGNAL:"RECEIVE_RETURNED_SIGNAL"},F=function(){function e(n){Object(C.a)(this,e),this.socket=void 0,this.roomId=void 0,this.roomId=n,this.socket=G()()}return Object(D.a)(e,[{key:"sendJoinRoom",value:function(){var e={roomId:this.roomId};this.socket.emit(z.JOIN_ROOM,e)}},{key:"sendUserSignal",value:function(e){this.socket.emit(z.USER_SIGNAL,e)}},{key:"allUserAtRoom",value:function(e){this.socket.on(W.ALL_USER_AT_ROOM,(function(n){e(n)}))}},{key:"onUserEnterRoom",value:function(e){this.socket.on(W.ENTER_ROOM,(function(n){e(JSON.parse(n))}))}},{key:"onUserLeaveRoom",value:function(e){this.socket.on(W.LEAVE_ROOM,(function(n){e(n)}))}},{key:"onSignalConnection",value:function(e){this.socket.on(W.SIGNAL_CONNECTION,(function(n,t){e(n,t)}))}},{key:"onUserJoined",value:function(e){this.socket.on(W.USER_JOINED,(function(n,t){e(n,t)}))}},{key:"onReceiveReturnedSignal",value:function(e){this.socket.on(W.RECEIVE_RETURNED_SIGNAL,(function(n,t){e(n,t)}))}},{key:"createPeer",value:function(e,n){var t=this,r=new P.a({initiator:!0,trickle:!1,stream:n});return r.on("signal",(function(n){t.socket.emit(z.USER_SIGNAL,{userToSignal:e,callerID:t.socket.id,signal:n})})),r}},{key:"addPeer",value:function(e,n,t){var r=this,o=new P.a({initiator:!1,trickle:!1,stream:t});return o.on("signal",(function(e){r.socket.emit(z.RETURNED_SIGNAL,{signal:e,callerID:n})})),o.signal(e),o}}]),e}();function K(){var e=Object(f.a)(["\n  flex: 1;\n"]);return K=function(){return e},e}function Y(){var e=Object(f.a)(["\n  min-width: 100px;\n  min-height: 100px;\n"]);return Y=function(){return e},e}function $(){var e=Object(f.a)(["\n  transform: rotateY(180deg);\n  margin: 9px;\n  max-width: 300px;\n  position: fixed;\n  @media screen and (max-width: 1024px) {\n    max-width: 150px;\n  }\n"]);return $=function(){return e},e}var q=d.a.video($()),Q=d.a.video(Y()),X=d.a.video(K()),Z=function(e){var n=Object(r.useRef)();return Object(r.useEffect)((function(){e.peer.peer.on("stream",(function(e){n.current.srcObject=e}))}),[e.peer]),o.a.createElement(X,{playsInline:!0,autoPlay:!0,ref:n})};function ee(){var e=Object(f.a)(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  @media screen and (max-width: 1024px) {\n    flex-direction: column;\n  }\n"]);return ee=function(){return e},e}function ne(){var e=Object(f.a)(["\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n"]);return ne=function(){return e},e}var te=d.a.div(ne()),re=d.a.div(ee()),oe=function(e){for(var n,t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];(n=console).log.apply(n,[e].concat(r))},ae=function(e){Object(M.a)(t,e);var n=Object(T.a)(t);function t(e){var r;return Object(C.a)(this,t),(r=n.call(this,e)).connector=new B,r.username="",r.localVideo=null,r.remoteVideoList=[],r.enter=function(e,n,t,o){r.setState({connecting:!0});var a=r.connector.getNewPeerConnection(r.state.localStream,r.state.initiator,t);a.on("signal",(function(r){oe("signal !!!",n),o.sendUserSignal({roomId:e,username:t,data:r})})),a.on("stream",(function(e){oe("stream!!!!",n),r.remoteVideoList[n].srcObject=e,r.setState({connecting:!1,waiting:!1})})),a.on("error",(function(e){oe("peer error",e)}))},r.renderRemoteVideos=function(e){for(var n=[],t=function(e){n.push(o.a.createElement(Q,{key:"remoteVideo".concat(e),autoPlay:!0,playsInline:!0,id:"remoteVideo".concat(e),ref:function(n){return r.remoteVideoList[e]=n}},o.a.createElement("h1",null,"nana")))},a=0;a<e;a++)t(a);return n},r.state={initiator:!1,connecting:!1,waiting:!0,localStream:{},peers:[]},r}return Object(D.a)(t,[{key:"componentDidMount",value:function(){var e=this,n=this.props.match.params.roomId,t=this.connector.getNewServerConnection(n);t.allUserAtRoom((function(n){console.log(n),null===n&&(n=[]);var r=n.map((function(n){return{peerID:n,peer:t.createPeer(n,e.state.localStream)}}));e.setState({peers:r})})),t.onUserLeaveRoom((function(n){oe("user leave room",n),e.setState({peers:e.state.peers.filter((function(e){return e.peerID!==n}))})})),t.onUserJoined((function(n,r){var o=t.addPeer(n,r,e.state.localStream),a=e.state.peers;a.push({peerID:r,peer:o}),e.setState({peers:a})})),t.onReceiveReturnedSignal((function(n,t){e.state.peers.find((function(e){return e.peerID===t})).peer.signal(n)})),this.getUserMedia().then((function(){t.sendJoinRoom()}))}},{key:"getUserMedia",value:function(){var e=Object(A.a)(U.a.mark((function e(){var n,t;return U.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n={video:{width:{min:160,ideal:640,max:1280},height:{min:120,ideal:360,max:720}},audio:!0},e.next=3,navigator.mediaDevices.getUserMedia(n);case 3:return t=e.sent,this.setState({localStream:t}),this.localVideo&&(this.localVideo.srcObject=t),e.abrupt("return",t);case 7:case"end":return e.stop()}}),e,this)})));return function(){return e.apply(this,arguments)}}()},{key:"renderPeerRow",value:function(){return this.twoDimensional(this.state.peers,2).map((function(e,n){return o.a.createElement(re,{key:"peerrow"+n},e.map((function(e,n){return o.a.createElement(Z,{key:n,peer:e})})))}))}},{key:"twoDimensional",value:function(e,n){for(var t=[],r=0;r<e.length;r+=n)t.push(e.slice(r,r+n));return t}},{key:"render",value:function(){var e=this;return o.a.createElement(o.a.Fragment,null,o.a.createElement(te,null,this.renderPeerRow()),o.a.createElement(q,{playsInline:!0,autoPlay:!0,id:"localVideo",muted:!0,ref:function(n){return e.localVideo=n}}))}}]),t}(o.a.Component),ie=Object(u.f)(ae),ce=t(25);var ue=function(){return o.a.createElement(ce.a,null,o.a.createElement(u.c,null,o.a.createElement(u.a,{path:"/:roomId"},o.a.createElement(ie,null)),o.a.createElement(u.a,{path:"/"},o.a.createElement(j,null))))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));i.a.render(o.a.createElement(o.a.StrictMode,null,o.a.createElement(ue,null)),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){console.error(e.message)}))},74:function(e,n,t){e.exports=t(146)},79:function(e,n,t){},80:function(e,n,t){}},[[74,1,2]]]);
//# sourceMappingURL=main.bf87d267.chunk.js.map