Merge branch 'master' of https://github.com/AkiraLaine/music-app

app/client/app.css

@@ -885,15 +885,13 @@ footer .fa {
     border-radius: 100%;
 }
 
-.playlist-title, .chat-title {
-    text-align: center;
-    color: white;
-    font-weight: 600;
+ul#playlist{
+    margin-top: 10px;
 }
 
 #playlist {
     margin: 0;
-    padding: 0 0 0 15px;
+    padding: 0 0 0 5px;
     color: white;
     font-size: 21px;
     max-height: 100%;
@@ -1200,3 +1198,11 @@ nav form input[type="image"]{
     height:100%;
     overflow: auto;
 }
+.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
+    background-color: transparent;
+    color:#ffffff;
+}
+.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
+    background-color: transparent;
+    color:#ffffff;
+}

app/client/client.js

@@ -18,6 +18,11 @@ var id = parts.pop();
 var type = id.toLowerCase();
 var resizeSeekerbarInterval;
 
+UI.registerHelper("formatTime", function(seconds) {
+    var d = moment.duration(parseInt(seconds), 'seconds');
+    return d.minutes() + ":" + ("0" + d.seconds()).slice(-2);
+});
+
 function getSpotifyInfo(title, cb, artist) {
     var q = "";
     q = title;
@@ -51,7 +56,7 @@ Template.profile.helpers({
 });
 
 Template.profile.onCreated(function() {
-    var parts = location.href.split('/');
+    var parts = Router.current().url.split('/');
     var username = parts.pop();
     Session.set("loaded", false);
     Meteor.subscribe("userProfiles", function() {
@@ -375,9 +380,6 @@ Template.room.events({
             });
         }
     },
-    "click #add-songs": function(){
-        $("#add-songs-modal").show();
-    },
     "click #close-modal-a": function(){
         $("#search-info").show();
         $("#add-info").hide();
@@ -922,6 +924,7 @@ Template.playlist.helpers({
     }
 });
 
+
 Meteor.subscribe("rooms");
 
 Template.room.onCreated(function () {
@@ -965,6 +968,7 @@ Template.room.onCreated(function () {
         Session.set("duration", parseInt(songData.duration));
         var d = moment.duration(parseInt(songData.duration), 'seconds');
         $("#time-total").text(d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
+        Session.set("timeFormat", d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
     }
 
     function resizeSeekerbar() {

app/client/head.html

@@ -25,7 +25,6 @@
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
     <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
     <script src="/bootstrap-slider.js"></script>
     <script type="application/javascript">

app/client/templates/header.html

@@ -32,7 +32,6 @@
                             <li><a class="logout" href="#">Logout</a></li>
                         </ul>
                     </li>
-                    <li><a href="#" class="logout navbar-right">Logout</a></li>
                       <li>
                           <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
                               <input type="hidden" name="cmd" value="_s-xclick">

app/client/templates/playlist.html

@@ -1,11 +1,12 @@
 <template name="playlist">
-  <h2 class="playlist-title">Playlist</h2>
-  <ul id="playlist">
+    <ul id="playlist">
       {{#each playlist_songs}}
         <li>
             {{#if current}}<i class="fa fa-arrow-right"></i>{{/if}}
-            <strong>{{title}}</strong> - {{artist}}
+            <p style="float:right;padding-right:10px;font-weight:900">{{formatTime duration}}</p>
+            <strong>{{title}}</strong>
+            <p>{{artist}}</p>
         </li>
       {{/each}}
-  </ul>
+    </ul>
 </template>

app/client/templates/room.html

@@ -7,13 +7,13 @@
                         <div id="room-icons">
                             <a class="back" href="/"><i class="fa fa-chevron-left"></i></a>
                             {{#if isAdmin}}
-                            {{#if paused}}
-                            <i class="fa fa-play fa-1" id="play"></i>
-                            {{else}}
-                            <i class="fa fa-pause fa-1" id="pause"></i>
-                            {{/if}}
-                            <i class="fa fa-step-forward fa-1" id="skip"></i>
-                            <i class="fa fa-random fa-1" id="shuffle"></i>
+                                {{#if paused}}
+                                    <i class="fa fa-play fa-1" id="play"></i>
+                                {{else}}
+                                    <i class="fa fa-pause fa-1" id="pause"></i>
+                                {{/if}}
+                                <i class="fa fa-step-forward fa-1" id="skip"></i>
+                                <i class="fa fa-random fa-1" id="shuffle"></i>
                             {{/if}}
                         </div>
 
@@ -35,23 +35,23 @@
                             </div>
                         </div>
                         <div id="song-info" class="col-md-4" style="margin-top:15px">
-                          <img class="song-img" onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" id="song-img"/>
-                          <h2 class="room-title">{{{title}}} <small id="time-display">(<span id="time-elapsed"></span> / <span id="time-total"></span>)</small></h2>
-                          <h2 class="room-artist">{{{artist}}}</h2>
+                            <img class="song-img" onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" id="song-img"/>
+                            <h2 class="room-title">{{{title}}} <small id="time-display">(<span id="time-elapsed"></span> / <span id="time-total"></span>)</small></h2>
+                            <h2 class="room-artist">{{{artist}}}</h2>
                         </div>
                     </div>
                     <!--<div class="row" id="settings">-->
-                        <!--<div class="col-md-4">-->
-                            <!--{{#if currentUser}}-->
-                            <!--<button type="button" id="song-modal" class="button action-button action-button-25" data-toggle="modal" data-target="#myModal">Add songs</button>-->
-                            <!--{{else}}-->
-                            <!--<button title="You need to be logged in to add songs." type="button" class="button btn btn-disabled action-button action-button-25" disabled>Add songs</button>-->
-                            <!--{{/if}}-->
-                        <!--</div>-->
-                        <!--<div class="col-md-4">-->
-                            <!--<button type="button" id="toggle-video" class="button action-button action-button-25">Hide video</button>-->
-                            <!--<div class="action-button action-button-25">-->
-                        <!--</div>-->
+                    <!--<div class="col-md-4">-->
+                        <!--{{#if currentUser}}-->
+                    <!--<button type="button" id="song-modal" class="button action-button action-button-25" data-toggle="modal" data-target="#myModal">Add songs</button>-->
+                        <!--{{else}}-->
+                    <!--<button title="You need to be logged in to add songs." type="button" class="button btn btn-disabled action-button action-button-25" disabled>Add songs</button>-->
+                        <!--{{/if}}-->
+                    <!--</div>-->
+                    <!--<div class="col-md-4">-->
+                    <!--<button type="button" id="toggle-video" class="button action-button action-button-25">Hide video</button>-->
+                    <!--<div class="action-button action-button-25">-->
+                    <!--</div>-->
                     <!--</div>-->
                     <!---->
                     <div class="row" id="settings">
@@ -99,23 +99,22 @@
                             {{> playlist}}
                         </div>
                         <div class="tab-pane" id="chat">
-                            <h2 class="chat-title">Chat</h2>
                             <ul id="chat-ul">
                                 {{#each chat}}
-                                <li class="chat-message"><small class="chat-rank">[{{this.rank}}]</small> <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank"><b class="bold">{{this.username}}</b></a>: {{this.message}}</li>
-                                <hr>
+                                    <li class="chat-message"><small class="chat-rank">[{{this.rank}}]</small> <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank"><b class="bold">{{this.username}}</b></a>: {{this.message}}</li>
+                                    <hr>
                                 {{/each}}
                             </ul>
                             <div id="chat-input-div">
                                 {{#if currentUser}}
-                                <input id="chat-input" placeholder="Type a message...">
-                            {{else}}
-                                <input id="chat-input" placeholder="Please register and login to chat." disabled>
-                            {{/if}}
+                                    <input id="chat-input" placeholder="Type a message...">
+                                {{else}}
+                                    <input id="chat-input" placeholder="Please register and login to chat." disabled>
+                                {{/if}}
                                 <div id="submit"><i id="submit-message" class="fa fa-paper-plane-o"></i>
+                                </div>
                             </div>
                         </div>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -126,8 +125,8 @@
                     <!-- Modal content-->
                     <div class="modal-content">
                         <div class="modal-header">
-                          <button type="button" class="close" data-dismiss="modal">&times;</button>
-                          <h4 class="modal-title">Search for a song</h4>
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Search for a song</h4>
                         </div>
                         <div class="modal-body">
                             <div id="search-info">
@@ -185,8 +184,8 @@
                                         Song
                                     </label>
                                 </div>
-                                    <!-- Layer2 -->
-                                    {{#if reportSong}}
+                                <!-- Layer2 -->
+                                {{#if reportSong}}
                                     <div class="report-layer-2" id="report-song-list">
                                         <div class="checkbox">
                                             <input type="checkbox" id="report-song-not-playing">
@@ -208,14 +207,14 @@
                                             </label>
                                         </div>
                                     </div>
-                                    {{/if}}
+                                {{/if}}
                                 <div class="checkbox">
                                     <input class="checkbox-box" type="checkbox" id="report-title">
                                     <label for="report-title">
                                         Title
                                     </label>
                                 </div>
-                                    <!-- Layer2 -->
+                                <!-- Layer2 -->
                                 {{#if reportTitle}}
                                     <div class="report-layer-2" id="report-title-list">
                                         <div class="checkbox">
@@ -245,7 +244,7 @@
                                         Author
                                     </label>
                                 </div>
-                                    <!-- Layer2 -->
+                                <!-- Layer2 -->
                                 {{#if reportAuthor}}
                                     <div class="report-layer-2" id="report-author-list">
                                         <div class="checkbox">
@@ -275,7 +274,7 @@
                                         Duration
                                     </label>
                                 </div>
-                                    <!-- Layer2 -->
+                                <!-- Layer2 -->
                                 {{#if reportDuration}}
                                     <div class="report-layer-2" id="report-duration-list">
                                         <div class="checkbox">
@@ -305,7 +304,7 @@
                                         Audio
                                     </label>
                                 </div>
-                                    <!-- Layer2 -->
+                                <!-- Layer2 -->
                                 {{#if reportAudio}}
                                     <div class="report-layer-2" id="report-audio-list">
                                         <div class="checkbox">
@@ -335,7 +334,7 @@
                                         Albumart
                                     </label>
                                 </div>
-                                    <!-- Layer2 -->
+                                <!-- Layer2 -->
                                 {{#if reportAlbumart}}
                                     <div class="report-layer-2" id="report-albumart-list">
                                         <div class="checkbox">
@@ -383,28 +382,28 @@
                 </div>
             </div>
             <ul class="bg-bubbles">
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-            <li></li>
-        </ul>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+            </ul>
         </div>
     {{else}}
         {{> loading}}
     {{/if}}
     <script type="text/javascript">
-      window.doorbellOptions = {
-          appKey: 'v2Gu14c8s9HgBsAFCXNWIm2vlk11N12Plt2Wu5k2MbQIkM1Ao6kOTCbfN95ElEVM',
-          hideEmail: true
-      };
-      (function(d, t) {
-          var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/2408?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g);
-      }(document, 'script'));
+        window.doorbellOptions = {
+            appKey: 'v2Gu14c8s9HgBsAFCXNWIm2vlk11N12Plt2Wu5k2MbQIkM1Ao6kOTCbfN95ElEVM',
+            hideEmail: true
+        };
+        (function(d, t) {
+            var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/2408?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g);
+        }(document, 'script'));
     </script>
 </template>