diff --git a/public/chat.html b/public/chat.html deleted file mode 100644 index 7da720e..0000000 --- a/public/chat.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - Watch With Friends! - - - - - - - - - - - - - - -
-
- -
-
-
- -
-
- - -
- -
- -
-
- - - - \ No newline at end of file diff --git a/public/css/styles.css b/public/css/styles.css index 0dfbf19..b99784c 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -87,6 +87,7 @@ button:disabled { .chat { display: flex; + visibility: hidden; } .chat__sidebar { @@ -110,7 +111,7 @@ button:disabled { top: 1vh; width: 49%; height: 49%; - z-index: 1; + z-index: 2; /* margin-top: 5px; */ /* margin-left: 5px; */ } @@ -214,3 +215,46 @@ button:disabled { margin-right: 8px; color: #333333; } + +/* The Modal (background) */ +.modal { + display: block; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(72, 65, 138); /* Fallback color */ + background-color: rgba(0, 0, 0, 0.616); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +.modal-content { + background-color: #333744; + margin: 10% auto; /* 15% from the top and centered */ + border-radius: 7px; + padding: 25px; + color: #d1d1d1; + font-size: 18px; + font-weight: 100; + width: 60%; /* Could be more or less, depending on screen size */ + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + text-align: justify; +} + +/* The Close Button */ +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} diff --git a/public/js/chat.js b/public/js/chat.js index 8432395..dd0107f 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -9,40 +9,11 @@ const messageContainer = document.querySelector('#messages-container'); const sidebarContainer = document.querySelector('.chat__sidebar'); const changeVideoButton = document.querySelector('#changeVideo'); const syncVideosButton = document.querySelector('#syncVideos'); +const chatBox = document.querySelector('.chat'); +const modal = document.getElementById('myModal'); +const span = document.getElementsByClassName('close')[0]; -// TEMPLATES -const sidebarTemplate = `

{{room}}

-

Users

-`; - -const htmlTemplate = [ - `
-

- {{user}} - {{createdAt}} -

-

{{string}}

-
`, - `
-

- {{user}} - {{createdAt}} -

-

Link

-
`, - `
-

{{string}}

-
`, -]; - -let message = ''; -let videoId = ''; - -// YT PLAYER LOGIC +// ###### YOUTUBE PLAYER ###### // // Load the IFrame Player API code asynchronously. var tag = document.createElement('script'); @@ -70,50 +41,13 @@ function onYouTubePlayerAPIReady() { }); } -// ON PLAYER STATE DATA RECV -socket.on('onPlayerState', (data, time) => { - if (data === 1 || data === -1) { - // player.seekTo(time, true); - player.playVideo(); - } else if (data === 2) { - if (Math.abs(player.getCurrentTime() - time) > 2) { - player.seekTo(time, true); - player.playVideo(); - } else { - player.pauseVideo(); - } - } else if (data === 0) player.stopVideo(); +// Parsing room query + +const { username, room } = Qs.parse(location.search, { + ignoreQueryPrefix: true, }); -const videoIdParse = (link) => { - if (link.includes('&ab_channel')) { - const substr = link.substring( - link.indexOf('v=') + 2, - link.indexOf('&') - ); - return substr; - } else { - return link.slice(link.indexOf('v=') + 2); - } -}; - -// SYNC VIDEOS -syncVideosButton.addEventListener('click', () => { - console.log(player.getVideoUrl()); - - // If video is the same as starting video - if ( - videoIdParse(player.getVideoUrl()) === - videoIdParse(`https://youtube.com/watch?v=M7lc1UVf-VE`) - ) - return alert( - 'This is a default video, you cannot synchronize it. \nWrite a request for synchronization in the chat or paste your own link.' - ); - - const time = player.getCurrentTime(); - const id = videoIdParse(player.getVideoUrl()); - socket.emit('videoSync', time, id); -}); +// ###### SOCKETS LOGIC ###### // socket.on('videoSync', (time, id) => { // console.log(time, id); @@ -121,47 +55,10 @@ socket.on('videoSync', (time, id) => { // player.seekTo(time); }); -// Change video -changeVideoButton.addEventListener('click', () => { - let link = input.value; - if (!link) return alert('You should pass the youtube link'); - const videoId = videoIdParse(link); - socket.emit('changeVideo', videoId); - player.loadVideoById(`${videoId}`, 'large'); - input.value = ''; -}); - socket.on('changeVideo', (videoId) => { player.loadVideoById(`${videoId}`, 'large'); }); -const autoscroll = () => { - // New message elemnt - const newMessage = messageContainer.lastElementChild; - - // Height of the new message - const newMessageStyles = getComputedStyle(newMessage); - const newMessageMargin = parseInt(newMessageStyles.marginBottom); - const newMessageHeight = newMessage.offsetHeight + newMessageMargin; - - // Visible height - const visibleHeight = messageContainer.offsetHeight; - - // Height of messages container - const containerHeight = messageContainer.scrollHeight; - - // scrolloffset - const scrolloffset = messageContainer.scrollTop + visibleHeight + 120; - - if (containerHeight - newMessageHeight <= scrolloffset) { - messageContainer.scrollTop = messageContainer.scrollHeight; - } -}; - -const { username, room } = Qs.parse(location.search, { - ignoreQueryPrefix: true, -}); - socket.on('message', (object) => { // console.log(object); const string = object.text; @@ -195,12 +92,72 @@ socket.on('message', (object) => { } }); +socket.on('roomData', ({ room, users }) => { + const html = Mustache.render(sidebarTemplate, { room, users }); + sidebarContainer.innerHTML = html; +}); + +socket.on('videoData', (videoData) => { + player.loadVideoById(`${videoData}`, 'large'); +}); + +// ON PLAYER STATE DATA RECV +socket.on('onPlayerState', (data, time) => { + if (data === 1 || data === -1) { + // player.seekTo(time, true); + player.playVideo(); + } else if (data === 2) { + if (Math.abs(player.getCurrentTime() - time) > 2) { + player.seekTo(time, true); + player.playVideo(); + } else { + player.pauseVideo(); + } + } else if (data === 0) player.stopVideo(); +}); + +socket.emit('join', { username, room }, (error) => { + if (error) { + alert(error); + location.href = '/'; + } +}); +// ####### EVENT LISTENERS ####### // + +// SYNC VIDEOS +syncVideosButton.addEventListener('click', () => { + console.log(player.getVideoUrl()); + + // If video is the same as starting video + if ( + videoIdParse(player.getVideoUrl()) === + videoIdParse(`https://youtube.com/watch?v=M7lc1UVf-VE`) + ) + return alert( + 'This is a default video, you cannot synchronize it. \nWrite a request for synchronization in the chat or paste your own link.' + ); + + const time = player.getCurrentTime(); + const id = videoIdParse(player.getVideoUrl()); + socket.emit('videoSync', time, id); +}); + +// Change video +changeVideoButton.addEventListener('click', () => { + let link = input.value; + if (!link) return alert('You should pass the youtube link'); + const videoId = videoIdParse(link); + socket.emit('changeVideo', videoId); + player.loadVideoById(`${videoId}`, 'large'); + input.value = ''; +}); + +// Form submission form.addEventListener('submit', (e) => { e.preventDefault(); input.focus(); // Disable form - if (input.value === '') return; button.setAttribute('disabled', 'disabled'); @@ -208,7 +165,6 @@ form.addEventListener('submit', (e) => { // Re-enable form button.removeAttribute('disabled'); if (error) return console.log(error); - // console.log('Message delivered'); input.value = ''; input.focus(); }); @@ -232,18 +188,81 @@ buttonLocation.addEventListener('click', (e) => { }); }); -socket.on('roomData', ({ room, users }) => { - const html = Mustache.render(sidebarTemplate, { room, users }); - sidebarContainer.innerHTML = html; -}); +// ###### UTILITIES ######// -socket.on('videoData', (videoData) => { - player.loadVideoById(`${videoData}`, 'large'); -}); +// Auto scroll function +const autoscroll = () => { + // New message elemnt + const newMessage = messageContainer.lastElementChild; -socket.emit('join', { username, room }, (error) => { - if (error) { - alert(error); - location.href = '/'; + // Height of the new message + const newMessageStyles = getComputedStyle(newMessage); + const newMessageMargin = parseInt(newMessageStyles.marginBottom); + const newMessageHeight = newMessage.offsetHeight + newMessageMargin; + + // Visible height + const visibleHeight = messageContainer.offsetHeight; + + // Height of messages container + const containerHeight = messageContainer.scrollHeight; + + // scrolloffset + const scrolloffset = messageContainer.scrollTop + visibleHeight + 120; + + if (containerHeight - newMessageHeight <= scrolloffset) { + messageContainer.scrollTop = messageContainer.scrollHeight; } -}); +}; + +// Parsing yt video +const videoIdParse = (link) => { + if (link.includes('&ab_channel')) { + const substr = link.substring( + link.indexOf('v=') + 2, + link.indexOf('&') + ); + return substr; + } else { + return link.slice(link.indexOf('v=') + 2); + } +}; + +span.onclick = function () { + modal.style.display = 'none'; + chatBox.style.visibility = 'visible'; +}; +window.onclick = function (event) { + if (event.target == modal) { + modal.style.display = 'none'; + chatBox.style.visibility = 'visible'; + } +}; + +// TEMPLATES +const sidebarTemplate = `

{{room}}

+

Users

+`; + +const htmlTemplate = [ + `
+

+ {{user}} + {{createdAt}} +

+

{{string}}

+
`, + `
+

+ {{user}} + {{createdAt}} +

+

Link

+
`, + `
+

{{string}}

+
`, +]; diff --git a/views/chat.html b/views/chat.html index 3400c0f..6c76be0 100644 --- a/views/chat.html +++ b/views/chat.html @@ -19,6 +19,20 @@ + +