From 5980873fca5c665ff16132e7b0ade1581494d7f8 Mon Sep 17 00:00:00 2001 From: Kyle Lim Date: Thu, 21 Jun 2018 23:44:23 -0700 Subject: [PATCH] Style Update + Mobile CSS Made the mobile site somewhat more usable. Also made it viewable on strangely sized screens. --- css/mobile-style.css | 72 +++++++++++++++++++++++++++++++++++ css/style.css | 90 ++++++++++++++++++++++++++------------------ index.html | 23 ++++++----- server.js | 53 +++++++++++++------------- 4 files changed, 167 insertions(+), 71 deletions(-) create mode 100644 css/mobile-style.css diff --git a/css/mobile-style.css b/css/mobile-style.css new file mode 100644 index 0000000..01748be --- /dev/null +++ b/css/mobile-style.css @@ -0,0 +1,72 @@ +/* This stylesheet is specifically for mobile */ + +@media only screen and (max-width: 700px) { + .h2 { + font-size: 1.5rem; + } + .video, .chat { + width: 352px; + height: 198px; + } + .chat-form { + width: 100%; + margin-top: 10px; + } + .btn { + padding: 3px 10px; + } + .mobile-hide { + display: block; + } + .nonmobile-hide { + display: none; + } + .switch { + display: none; + } + .right-header { + margin-top: 1rem; + float: left; + } + .noscrollbar { + float: left; + margin-bottom: 10px; + } + .inv_input { + width: 18em; + } + .invite-button { + height: 75px; + width: 75px; + } + /* Playlist */ + .vid-list-container { + width: 100%; + margin-top: 0px; + margin-left: 0px; + } +} + +/* Strange Screen Size */ +@media (max-width: 1200px) and (min-width: 992px){ + .video { + width: 551px; + height: 310px; + } + .chat { + width: 390px; + height: 300px; + } + .chat-form { + width: 390px; + } +} +@media (max-width: 1300px) and (min-width: 1201px){ + .chat { + width: 480px; + height: 300px; + } + .chat-form { + width: 480px; + } +} diff --git a/css/style.css b/css/style.css index c8540b2..a5976e2 100644 --- a/css/style.css +++ b/css/style.css @@ -53,6 +53,14 @@ background-color: #FF5A60 !important; } + .mobile-hide { + display: none; + } + + .nonmobile-hide { + display: block; + } + .center { display: block; margin: auto; @@ -77,6 +85,18 @@ background-color: black; } + .right-header { + float: right; + color: gray; + } + + .inv_input { + margin: 0 auto; + display: block; + text-align: center; + width: 22em; + } + .form-control-static { min-height: 34px; padding-top: 7px; @@ -177,13 +197,13 @@ float: right; /* padding-right: 11em; */ height: 140px; - width: 300px; + width: 270px; overflow: scroll; } .invite-button { - height: 100px; - width: 100px; + height: 90px; + width: 90px; } .chat-users { @@ -350,43 +370,41 @@ width: 96px; } .arrow-left { - left: 0; + /* left: 0; */ top: -20px; } .arrow-right { - right: 0; + /* right: 0; */ top: -20px; } } -.topbotmargins { - margin-top: 10px; - margin-bottom: 10px; -} - -/* GHOST BUTTONS */ -.ghost-button-full-color { - float: right; - display: inline-block; - width: 25px; - padding-bottom: 10px; - /* height: 25px; */ - /* padding: 8px; */ - color: #000; - background-color: transparent; - /* border: 2px solid #fff; */ text-align: center; - outline: none; - text-decoration: none; - transition: color 0.3s ease-out, - background-color 0.3s ease-out, - border-color 0.3s ease-out; -} -.ghost-button-full-color:hover, -.ghost-button-full-color:active { - background-color: #e05555; - border-color: #e05555; - color: #fff; - transition: color 0.3s ease-in, - background-color 0.3s ease-in, - border-color 0.3s ease-in; -} + .topbotmargins { + margin-top: 10px; + margin-bottom: 10px; + } + + /* GHOST BUTTONS */ + + .ghost-button-full-color { + float: right; + display: inline-block; + width: 25px; + padding-bottom: 10px; + /* height: 25px; */ + /* padding: 8px; */ + color: #000; + background-color: transparent; + /* border: 2px solid #fff; */ + text-align: center; + outline: none; + text-decoration: none; + transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out; + } + + .ghost-button-full-color:hover, .ghost-button-full-color:active { + background-color: #e05555; + border-color: #e05555; + color: #fff; + transition: color 0.3s ease-in, background-color 0.3s ease-in, border-color 0.3s ease-in; + } diff --git a/index.html b/index.html index a2ad7fd..023c39c 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@ + @@ -107,7 +108,8 @@

Join a Room!

- Note: Mobile web browsers do not support autoplay. Host can control player natively. +
Note: Only the host can control the video using the native video player controls
+
Mobile User, please play the video once manually to give the browser permission to control the video player.
@@ -160,7 +162,7 @@

- +
@@ -206,7 +208,7 @@

-
Online Users
+
Online Users
@@ -216,7 +218,7 @@
Online Users
- +

Chatroom
@@ -234,7 +236,7 @@

Invite a Friend

Send a friend your unique room link so they can watch videos too!

- +
@@ -349,10 +351,13 @@

About Vynchronize

Contact Me

-

Who Am I

-

I'm Kyle! A student and developer just trying build software for the everyday user! I developed Vynchronize because it was a problem that I needed to solve myself, and now I continue to build it for the those who enjoy using it! :)

-

You can contact me directly at kylelim8998@gmail.com if you have any questions, concerns, or just to say hi! If you want to submit a suggestion, please see the github issues page.

-

Also I want to keep the website up and running with an ad-free experience because I hate ads too! I'm currently paying for servers and a domain, but they are expensive to a broke college kid. If you would like to donate click below! I appreciate the support!

+

Who Am I?

+

I'm Kyle! A student and developer just trying build software for the everyday user! I developed Vynchronize because it was a problem that I needed to solve myself, and now I continue to build it for the those who enjoy using + it! :)

+

You can contact me directly at kylelim8998@gmail.com if you have any questions, concerns, or just to say hi! If you want to submit a suggestion, please see the + github issues page.

+

Also I want to keep the website up and running with an ad-free experience because I hate ads too! I'm currently paying for servers and a domain, but they are expensive to a broke college kid. If you would like to donate click + below! I appreciate the support!

diff --git a/server.js b/server.js index fc7e9ca..d83f5bf 100644 --- a/server.js +++ b/server.js @@ -105,33 +105,34 @@ io.sockets.on('connection', function(socket) { socket.on('play next', function(data, callback) { var videoId = "QUEUE IS EMPTY" - - switch (io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer) { - case 0: - if (io.sockets.adapter.rooms['room-' + socket.roomnum].queue.yt.length > 0) { - // Gets the video id from the room object - videoId = io.sockets.adapter.rooms['room-' + socket.roomnum].queue.yt.shift().videoId - } - break; - case 1: - if (io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.length > 0) { - videoId = io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.shift().videoId - } - break; - case 2: - if (io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.length > 0) { - videoId = io.sockets.adapter.rooms['room-' + socket.roomnum].queue.vimeo.shift().videoId - } - break; - default: - console.log("Error invalid player id") + if (io.sockets.adapter.rooms['room-' + socket.roomnum] !== undefined) { + switch (io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer) { + case 0: + if (io.sockets.adapter.rooms['room-' + socket.roomnum].queue.yt.length > 0) { + // Gets the video id from the room object + videoId = io.sockets.adapter.rooms['room-' + socket.roomnum].queue.yt.shift().videoId + } + break; + case 1: + if (io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.length > 0) { + videoId = io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.shift().videoId + } + break; + case 2: + if (io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.length > 0) { + videoId = io.sockets.adapter.rooms['room-' + socket.roomnum].queue.vimeo.shift().videoId + } + break; + default: + console.log("Error invalid player id") + } + // console.log(videoId) + // Remove video from the front end + updateQueueVideos() + callback({ + videoId: videoId + }) } - // console.log(videoId) - // Remove video from the front end - updateQueueVideos() - callback({ - videoId: videoId - }) }); // Sync video