Alternative video button design

Toggleable in the settings Off by default Fixes #65
musiqpad · Jun 6, 2016 · 96397b8 · 96397b8
1 parent 957e97b
commit 96397b8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/webserver/public/index.html b/webserver/public/index.html
@@ -201,6 +201,11 @@
 						</label>
 						<span>Separate user and guest count</span>
 						<br>
+						<label class="set-check">
+							<input type="checkbox" ng-model="roomSettings.altControls" id="set-input-altcontrols" name="check" />
+						</label>
+						<span>Alternative controls</span>
+						<br>
 						<br>
 						<label class="set-check">
 							<input type="checkbox" ng-model="roomSettings.autoplayblocked" id="set-autplay-blocked" name="check" />
@@ -568,7 +573,7 @@
 					<div class="bottom">
 						<div class="song-progress" style="width: {{songProgress * 100}}%; background-color: {{vote}};"></div>
 					</div>
-					<div class="controls">
+					<div class="controls" data-ng-show="!roomSettings.altControls">
 						<div class="ctrl btn-downvote" title="Dislike"><div class="mdi mdi-thumb-down"></div><span class="info dislikes" data-ng-bind="queue.votes.dislike || 0"></span></div>
 						<div class="ctrl btn-snooze" data-ng-class="{'active' : snooze}" title="Snooze"><div class="mdi mdi-block-helper"></div></div>
 						<!--<div class="ctrl btn-join" title="Join DJ Queue" ng-class="{hidden: findPosInWaitlist() != -1}"><div class="material-icons">play_circle_outline</div><span class="position">JOIN</span></div>
@@ -589,6 +594,25 @@
 						</div>
 						<div class="ctrl btn-upvote" title="Like"><div class="mdi mdi-thumb-up"></div><span class="info likes" data-ng-bind="queue.votes.like || 0"></span></div>
 					</div>
+					<div class="controls" data-ng-show="roomSettings.altControls">
+						<div class="ctrl btn-upvote" title="Like"><div class="mdi mdi-thumb-up"></div><span class="info likes" data-ng-bind="queue.votes.like || 0"></span></div>
+						<div class="ctrl btn-downvote" title="Dislike"><div class="mdi mdi-thumb-down"></div><span class="info dislikes" data-ng-bind="queue.votes.dislike || 0"></span></div>
+						<div class="ctrl-alt btn-join" data-ng-class="{'active' : (isLoggedIn && findPosInWaitlist() == 0)}" title="{{(isLoggedIn ? (findPosInWaitlist() == -1 ? 'Join' : 'Leave') + ' DJ Queue' : 'SIGN UP TO DJ!')}}">
+							<div class="mdi" data-ng-class="{'mdi-play-circle-outline': (isLoggedIn && findPosInWaitlist() == -1), 'mdi-stop':(isLoggedIn && findPosInWaitlist() != -1)}"></div>
+							<span class="info position" data-ng-bind="(isLoggedIn ? ((findPosInWaitlist() > -1 && findPosInWaitlist() != 0) ? '#' + findPosInWaitlist() : (findPosInWaitlist() == 0 ? 'DJ' : 'JOIN')) : 'SIGN UP TO DJ!')"></span>
+						</div>
+						<div class="ctrl btn-grab" title="Grab Song">
+							<div class="mdi mdi-plus-circle-outline"></div>
+							<span class="info grabs" data-ng-bind="queue.votes.grab || 0"></span>
+							<div class="popup playlists-grab">
+								<div class="pl-grab-create">Create a playlist</div>
+								<div class="pl-grab" data-ng-repeat="x in playlists | orderByPlaylist:'name'" data-pid="{{x.id}}">
+									{{x.name}}
+								</div>
+							</div>
+						</div>
+						<div class="ctrl-alt btn-snooze" data-ng-class="{'active' : snooze}" title="Snooze"><div class="mdi mdi-block-helper"></div></div>
+					</div>
 				</div>
 			</div>
 			<div id="app-right">

diff --git a/webserver/public/lib/css/video.css b/webserver/public/lib/css/video.css
@@ -129,7 +129,7 @@
     border-top:1px solid #444A59;
     background: #1C1C1F;
 }
-.controls .ctrl {
+.controls .ctrl, .controls .ctrl-alt {
     font-size: 16px;
     line-height: 40px;
     vertical-align: middle;
@@ -157,6 +157,12 @@
 .btn-snooze:not(.active):hover {
     background: rgba(146, 90, 255, .25);
 }
+.ctrl-alt.btn-snooze {
+    color: #F46B40;
+}
+.ctrl-alt.btn-snooze:not(.active):hover {
+    background: rgba(244, 107, 64, .25);
+}
 .btn-join {
     color: #F46B40;
 }
@@ -167,6 +173,16 @@
     background: #F46B40;
     color: #1C1C1F;
 }
+.ctrl-alt.btn-join {
+    color: #91c5a9;
+}
+.ctrl-alt.btn-join:not(.active):hover {
+    background: rgba(145, 197, 169, .25);
+}
+.ctrl-alt.btn-join.active {
+    background: #91c5a9;
+    color: #1C1C1F;
+}
 .btn-grab {
     color: #925AFF;
     position: relative;
@@ -175,6 +191,10 @@
     color: #1C1C1F;
     background: #925AFF;
 }
+.ctrl-alt.btn-snooze.active {
+    color: #1C1C1F;
+    background: #F46B40;
+}
 .btn-grab:not(.active):hover {
     background: rgba(146, 90, 255, .25);
 }
@@ -251,7 +271,7 @@
 .btn-hd.active, .btn-lastdj.active {
     color: #A77DC2;
 }
-.ctrl .info {
+.ctrl .info, .ctrl-alt .info {
     font-size: 12px;
     font-weight: bold;
     margin: 0 3px;

diff --git a/webserver/public/lib/js/app.js b/webserver/public/lib/js/app.js
@@ -7282,6 +7282,7 @@
                 	},
                 },
                 separateUserCount: true,
+                altControls: false,
 			};
 
 			$scope.changeTab = function(inProp, val){