Skip to content

Commit

Permalink
Style Update + Mobile CSS
Browse files Browse the repository at this point in the history 
Made the mobile site somewhat more usable. Also made it viewable on
strangely sized screens.
  • Loading branch information
@kyle8998
kyle8998 committed Jun 22, 2018
1 parent 845d3ac commit 5980873
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 71 deletions.
72 changes: 72 additions & 0 deletions css/mobile-style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
90 changes: 54 additions & 36 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,14 @@
background-color: #FF5A60 !important;
}

.mobile-hide {
display: none;
}

.nonmobile-hide {
display: block;
}

.center {
display: block;
margin: auto;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
23 changes: 14 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
<link href="css/small-business.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">
<link href="css/mobile-style.css" rel="stylesheet">

<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
Expand Down Expand Up @@ -107,7 +108,8 @@ <h2> Join a Room! </h2>
<div class="row my-4" style="margin-top: 0px !important;">
<div class="col-lg-7">

<b>Note:</b> Mobile web browsers do not support autoplay. Host can control player natively.
<div class="nonmobile-hide"><b>Note: </b>Only the host can control the video using the native video player controls </div>
<div class="mobile-hide"><b>Mobile User</b>, please play the video once manually to give the browser permission to control the video player. </div>
<!-- <hr style="height:0pt; visibility:hidden;" /> -->

<div style="margin: 10px" class="dropdown">
Expand Down Expand Up @@ -160,7 +162,7 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
<div id='persoff'></div>

<div class="topbotmargins">
<input type="Video" style="max-width: 200px; margin-right: .5rem; float: left;" class="form-control" id="inputVideoId" placeholder="Video ID">
<input type="Video" style="max-width: 200px; margin-right: .5rem; margin-bottom: .5rem; float: left;" class="form-control" id="inputVideoId" placeholder="Video ID">
<button onclick="enqueueVideo(roomnum)" class="btn btn-primary"><i class="fas fa-plus"></i> Add to Queue</button>
<button onclick="emptyQueue(roomnum)" class="btn btn-primary"><i class="fas fa-trash"></i> Empty Queue</button>
</div>
Expand Down Expand Up @@ -206,7 +208,7 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
<div class="col-lg-5">
<!-- <div class="col-md-4"> -->
<!-- <div id="onlineArea" class="row"> -->
<h5 style="float:right; color: gray;">Online Users</h5>
<h5 class="right-header">Online Users</h5>
<hr style="height:0pt; visibility:hidden;" />

<!-- <br/> -->
Expand All @@ -216,7 +218,7 @@ <h5 style="float:right; color: gray;">Online Users</h5>
</div>

<!-- Trigger the modal with a button -->
<button style="background-color: #007bff" type="button" class="btn btn-info btn-sm invite-button" data-toggle="modal" data-target="#inviteModal"><i style="width: 30px; height: 30px;" class="fas fa-user-plus"></i><br><h5>Invite</h5></button>
<button style="background-color: #007bff" type="button" class="nonmobile-hide btn btn-info btn-sm invite-button" data-toggle="modal" data-target="#inviteModal"><i style="width: 30px; height: 30px;" class="fas fa-user-plus"></i><br><h5>Invite</h5></button>
</div>
<hr style="height:0pt; visibility:hidden;" />
<h5 style="color:gray;">Chatroom</h5>
Expand All @@ -234,7 +236,7 @@ <h4 class="modal-title">Invite a Friend</h4>
<div class="modal-body">
<p>Send a friend your unique room link so they can watch videos too!</p>
<!-- <p style="text-align: center;" id="invite">vynchronize.herokuapp.com/ROOMNUM</p> -->
<input style="margin : 0 auto; display:block; text-align: center; width: 22em" id="inv_input" type="text" value="vynchronize.herokuapp.com/ROOMNUM" class="field left" readonly>
<input class="inv_input" id="inv_input" type="text" value="vynchronize.herokuapp.com/ROOMNUM" class="field left" readonly>
</div>
<div class="modal-footer">
<div style="opacity: 1" class="tooltip">
Expand Down Expand Up @@ -349,10 +351,13 @@ <h2>About Vynchronize</h2>
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Contact Me</h2>
<p class="lead">Who Am I</p>
<p> 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! :)</p>
<p> You can contact me directly at <a href="mailto:[email protected]?Subject=Vynchronize">[email protected]</a> if you have any questions, concerns, or just to say hi! If you want to submit a suggestion, please see the github issues page.</p>
<p> 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!</p>
<p class="lead">Who Am I?</p>
<p> 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! :)</p>
<p> You can contact me directly at <a href="mailto:[email protected]?Subject=Vynchronize">[email protected]</a> if you have any questions, concerns, or just to say hi! If you want to submit a suggestion, please see the
github issues page.</p>
<p> 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!</p>
<a href="https://www.paypal.me/kylelim"><button style="margin-top:.5rem" class="btn btn-primary"><i class="far fa-heart"></i> Donate</button></a>
</div>
</div>
Expand Down
53 changes: 27 additions & 26 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 5980873

Please sign in to comment.