youtube-together/client/build/static/js/main.2dd4ad94.chunk.js

Embed youtube-together sessions in any iframe to allow watching youtube videos together with friends located anywhere

(this.webpackJsonpclient=this.webpackJsonpclient||[]).push([[0],{134:function(e,t){},137:function(e,t,n){"use strict";n.r(t);var a,r=n(0),o=n.n(r),i=n(9),c=n.n(i),s=n(21),u=n(29),l=n(6),m=function(e){var t=Object(l.f)(),n=Object(l.g)(),a=n.sessionID,r=n.videoUrl,i=function(e){var t=e.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/);return!(!t||11!==t[7].length)&&t[7]};return o.a.createElement("div",null,function(){var n=decodeURIComponent(r),o=i(n);o&&(e.session(o,a,!0),t.push("/watch/leader"))}())},d=(n(93),n(75)),v=n.n(d),p=n(156),f=n(157),h=n(155),w=n(77),y=n.n(w),E=function(e){var t=Object(r.useState)(e.videoID),n=Object(s.a)(t,2),i=n[0],c=n[1],u=Object(r.useState)({currentTime:0,shouldPause:!1,timestamp:0}),l=Object(s.a)(u,2),m=l[0],d=l[1],w=Object(r.useRef)(),E=Object(r.useState)(e.leader),g=Object(s.a)(E,2),b=g[0],j=g[1],I=o.a.useState(!e.leader),O=Object(s.a)(I,2),k=O[0],D=O[1],T=function(){null==a&&(a=new window.YT.Player("player",{videoId:i,playerVars:{mute:e.leader?0:1},events:{onReady:N,onStateChange:P}}))};Object(r.useEffect)((function(){if(e.socket.on("message",(function(e){var t=e;"speaker"===t.event&&(j(!1),a.mute()),"sync"===t.event&&S(t),"join"===t.event&&(!function(e){c(e.videoID)}(t),null!=t.latestEvent&&(d({currentTime:t.latestEvent.currentTime,shouldPause:"pause"===t.latestEvent.action,timestamp:t.latestEvent.timestamp}),k&&D(!1)))})),null!==i)if(window.YT)T();else{var t=document.createElement("script");t.src="https://www.youtube.com/iframe_api",window.onYouTubeIframeAPIReady=T;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}}));var S=function(e){if(k&&D(!1),null!=a&&null!=a.getPlayerState){var t=a.getPlayerState();"currenttime"!==e.action||2!==t&&-1!==t?"pause"===e.action&&2!==t&&C():(w.current={currentTime:e.currentTime,timestamp:e.timestamp},V())}},N=function(e){if(b?a.unMute():a.mute(),0===m.timestamp)return a.playVideo(),void a.pauseVideo();w.current={timestamp:m.timestamp,currentTime:m.currentTime},a.playVideo(),m.shouldPause&&a.pauseVideo()},P=function(e){return B(e.data)},C=function(){return a.pauseVideo()},V=function(){return a.playVideo()},x=function(){var e,t=a.getCurrentTime();if(null!=w.current){var n=(Date.now()-w.current.timestamp)/1e3,r=w.current.currentTime+n;Math.abs(r-t)>.1&&(t=w.current.currentTime+n,e=t,a.seekTo(e,!0))}return{event:"sync",action:"currenttime",videoID:i,currentTime:t,timestamp:Date.now()}},B=function(t){1===t?e.socket.emit("message",x()):2===t&&function(){var t=Date.now(),n=a.getCurrentTime();w.current=null,e.socket.emit("message",{event:"sync",action:"pause",currentTime:n,timestamp:t})}()};return o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{className:"video"},o.a.createElement("div",{id:"player"},o.a.createElement("h3",null,"Loading...")),o.a.createElement(v.a,{isOpen:k,contentLabel:"Example Modal"},o.a.createElement("div",{style:{textAlign:"center",marginTop:"auto",marginBottom:"auto",height:"100%",overflow:"hidden",display:"flex",justifyContent:"center",alignItems:"center"}},o.a.createElement("h3",{style:{fontFamily:"Lato, sans-serif"}},"Waiting for ",e.leaderName," to start video")))),o.a.createElement("div",{style:{width:"100%",textAlign:"center"}},o.a.createElement("br",null),o.a.createElement(h.a,{display:"flex",alignItems:"center",justifyContent:"center"},o.a.createElement(f.a,{variant:"outlined",onClick:function(){b||(j(!0),a.unMute(),e.socket.emit("message",{event:"speaker",action:"update"}))}},b?"Playing out of your speakers":"Can't hear audio? Press to play out of your speakers"),o.a.createElement(p.a,{title:"Audio sync only works when you have sound playing from one person's laptop speaker. Pass the speaker around as your friends join and leave"},o.a.createElement(y.a,null)))))},g=n(78),b=n.n(g),j=function(e){var t=Object(l.f)(),n="".concat(window.location.protocol,"//").concat(window.location.hostname,":").concat(window.location.port,"/"),a=b()(n),i=e.sessionID,c=Object(l.g)(),s=c.sessionID,u=c.leaderName;return i||(i=s),Object(r.useEffect)((function(){a.on("connect",(function(){return a.emit("message",{event:"session",action:e.action,sessionID:i,videoID:e.videoID})}))})),"leader"!==s||e.leader||t.push("/"),o.a.createElement(E,{videoID:e.videoID,leader:e.leader,leaderName:u||"leader",sessionID:i,socket:a})};var I=function(){var e=Object(r.useState)(!1),t=Object(s.a)(e,2),n=t[0],a=t[1],i=Object(r.useState)(null),c=Object(s.a)(i,2),d=c[0],v=c[1],p=Object(r.useState)(null),f=Object(s.a)(p,2),h=f[0],w=f[1],y=Object(r.useState)("join"),E=Object(s.a)(y,2),g=E[0],b=E[1],I=function(e,t,n){w(e),v(t),a(n),b("create")};return o.a.createElement(u.a,null,o.a.createElement("div",{className:"skewed"}),o.a.createElement("div",{className:"container"},o.a.createElement("main",{className:"content"},o.a.createElement(l.c,null,o.a.createElement(l.a,{path:"/start/:sessionID/:videoUrl",render:function(){return o.a.createElement(m,{session:I})}}),o.a.createElement(l.a,{path:"/watch/:sessionID/:leaderName?",render:function(){return o.a.createElement(j,{leader:n,sessionID:d,videoID:h,action:g})}})))))};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}$/));c.a.render(o.a.createElement(o.a.StrictMode,null,o.a.createElement(I,null)),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){console.error(e.message)}))},84:function(e,t,n){e.exports=n(137)},93:function(e,t,n){}},[[84,1,2]]]);
//# sourceMappingURL=main.2dd4ad94.chunk.js.map