Merge branch 'february_release' of https://github.com/Musare/Musare into february_release

app/client/scripts/events.js

@@ -1345,331 +1345,6 @@ Template.room.events({
         $("#playlist-import").hide();
     }
 });
-
-Template.room.helpers({
-    singleVideo: function() {
-        return true;
-    },
-    chat: function() {
-        Meteor.setTimeout(function() {
-            var elem = document.getElementById('chat');
-            if (elem !== undefined && elem !== null) {
-                elem.scrollTop = elem.scrollHeight;
-            }
-        }, 100);
-        return Chat.find({type: Session.get("type")}, {sort: {time: -1}, limit: 50 }).fetch().reverse();
-    },
-    globalChat: function() {
-        Meteor.setTimeout(function() {
-            var elem = document.getElementById('global-chat');
-            if (elem !== undefined && elem !== null) {
-                elem.scrollTop = elem.scrollHeight;
-            }
-        }, 100);
-        return Chat.find({type: "global"}, {sort: {time: -1}, limit: 50 }).fetch().reverse();
-    },
-    likes: function() {
-        var playlist = Playlists.findOne({type: Session.get("type")});
-        var likes = 0;
-        playlist.songs.forEach(function(song) {
-            if (Session.get("currentSong") && song.mid === Session.get("currentSong").mid) {
-                likes = song.likes;
-                return;
-            }
-        });
-        return likes;
-    },
-    dislikes: function() {
-        var playlist = Playlists.findOne({type: Session.get("type")});
-        var dislikes = 0;
-        playlist.songs.forEach(function(song) {
-            if (Session.get("currentSong") && song.mid === Session.get("currentSong").mid) {
-                dislikes = song.dislikes;
-                return;
-            }
-        });
-        return dislikes;
-    },
-    liked: function() {
-        if (Meteor.userId()) {
-            var currentSong = Session.get("currentSong");
-            if (currentSong && Meteor.user().profile.liked.indexOf(currentSong.mid) !== -1) {
-                return "active";
-            } else {
-                return "";
-            }
-        } else {
-            "";
-        }
-    },
-    disliked: function() {
-        if (Meteor.userId()) {
-            var currentSong = Session.get("currentSong");
-            if (currentSong && Meteor.user().profile.disliked.indexOf(currentSong.mid) !== -1) {
-                return "active";
-            } else {
-                return "";
-            }
-        } else {
-            "";
-        }
-    },
-    type: function() {
-        var parts = location.href.split('/');
-        var id = parts.pop().toLowerCase();
-        return Rooms.findOne({type: id}).display;
-    },
-    users: function() {
-        var parts = location.href.split('/');
-        var id = parts.pop().toLowerCase();
-        return Rooms.findOne({type: id}).users;
-    },
-    title: function(){
-        return Session.get("title");
-    },
-    artist: function(){
-        return Session.get("artist");
-    },
-    loaded: function() {
-        return Session.get("loaded");
-    },
-    paused: function() {
-        return Session.get("state") === "paused";
-    },
-    private: function() {
-        return Rooms.findOne({type: Session.get("type")}).private === true;
-    },
-    report: function() {
-        return Session.get("reportObj");
-    },
-    reportSong: function() {
-        return Session.get("reportSong");
-    },
-    reportTitle: function() {
-        return Session.get("reportTitle");
-    },
-    reportAuthor: function() {
-        return Session.get("reportAuthor");
-    },
-    reportDuration: function() {
-        return Session.get("reportDuration");
-    },
-    reportAudio: function() {
-        return Session.get("reportAudio");
-    },
-    reportAlbumart: function() {
-        return Session.get("reportAlbumart");
-    },
-    reportOther: function() {
-        return Session.get("reportOther");
-    },
-    currentSong: function() {
-        return Session.get("currentSong");
-    },
-    previousSong: function() {
-        return Session.get("previousSong");
-    },
-    currentSongR: function() {
-        return Session.get("currentSongR");
-    },
-    previousSongR: function() {
-        return Session.get("previousSongR");
-    },
-    reportingSong: function() {
-        if (Session.get("reportPrevious")) {
-            return Session.get("previousSongR");
-        } else {
-            return Session.get("currentSongR");
-        }
-    },
-    votes: function(){
-        return Rooms.findOne({type: Session.get("type")}).votes;
-    }
-});
-Template.room.onCreated(function () {
-    Chat.after.find(function(userId, selector) {
-        if (selector.type === "global") {
-            if (!$("#global-chat-tab").hasClass("active")) {
-                $("#global-chat-tab").addClass("unread-messages");
-            }
-        } else if(selector.type === Session.get("type")) {
-            if (!$("#chat-tab").hasClass("active")) {
-                $("#chat-tab").addClass("unread-messages");
-            }
-        }
-    });
-    Session.set("reportSong", false);
-    Session.set("reportTitle", false);
-    Session.set("reportAuthor", false);
-    Session.set("reportDuration", false);
-    Session.set("reportAudio", false);
-    Session.set("reportAlbumart", false);
-    Session.set("reportOther", false);
-    /*if (resizeSeekerbarInterval !== undefined) {
-        Meteor.clearInterval(resizeSeekerbarInterval);
-        resizeSeekerbarInterval = undefined;
-    }*/
-    YTPlayer = undefined;
-    Session.set("videoHidden", false);
-    var tag = document.createElement("script");
-    tag.src = "https://www.youtube.com/iframe_api";
-    var firstScriptTag = document.getElementsByTagName('script')[0];
-    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-    Session.set("singleVideo", true);
-
-    var currentSong = undefined;
-    var currentSongR = undefined;
-
-    function getTimeElapsed() {
-        if (currentSong !== undefined) {
-            var room = Rooms.findOne({type: type});
-            if (room !== undefined) {
-                return Date.now() - currentSong.started - room.timePaused;
-            }
-        }
-        return 0;
-    }
-
-    function getSongInfo(songData){
-        Session.set("title", songData.title);
-        Session.set("artist", songData.artist);
-        Session.set("id", songData.id);
-        $("#song-img").attr("src", songData.img);
-        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() {
-        if (Session.get("state") === "playing") {
-            $("#seeker-bar").width(((getTimeElapsed() / 1000) / Session.get("duration") * 100) + "%");
-        }
-    }
-
-    function startSong() {
-        $("#time-elapsed").text("0:00");
-        $("#vote-skip").attr("disabled", false);
-        if (currentSong !== undefined) {
-            if (YTPlayer !== undefined && YTPlayer.stopVideo !== undefined) YTPlayer.stopVideo();
-
-            var volume = localStorage.getItem("volume") || 20;
-
-            if ($("#player").length !== 1) {
-                $("#media-container").append('<div id="player" class="embed-responsive-item"></div>');
-            }
-            $("#player").show();
-            function loadVideo() {
-                if (!Session.get("YTLoaded")) {
-                    Session.set("loadVideoTimeout", Meteor.setTimeout(function () {
-                        loadVideo();
-                    }, 500));
-                } else {
-                    if (YTPlayer === undefined) {
-                        YTPlayer = new YT.Player("player", {
-                            height: 540,
-                            width: 960,
-                            videoId: currentSong.id,
-                            playerVars: {controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0},
-                            events: {
-                                'onReady': function (event) {
-                                    if (currentSong.skipDuration === undefined) {
-                                        currentSong.skipDuration = 0;
-                                    }
-                                    event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                                    event.target.playVideo();
-                                    event.target.setVolume(volume);
-                                    resizeSeekerbar();
-                                },
-                                'onStateChange': function (event) {
-                                    if (Session.get("YTLoaded")) {
-                                        if (event.data == YT.PlayerState.PAUSED && Session.get("state") === "playing") {
-                                            event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                                            event.target.playVideo();
-                                        }
-                                        if (event.data == YT.PlayerState.PLAYING && Session.get("state") === "paused") {
-                                            event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                                            event.target.pauseVideo();
-                                        }
-                                    }
-                                }
-                            }
-                        });
-                    } else {
-                        YTPlayer.loadVideoById(currentSong.id);
-                        if (currentSong.skipDuration === undefined) {
-                            currentSong.skipDuration = 0;
-                        }
-                        YTPlayer.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                    }
-                    Session.set("pauseVideo", false);
-                    getSongInfo(currentSong);
-                }
-            }
-            loadVideo();
-        }
-    }
-
-    Session.set("loaded", false);
-    Meteor.subscribe("rooms", function() {
-        var parts = location.href.split('/');
-        var id = parts.pop();
-        var type = id.toLowerCase();
-        Session.set("type", type);
-        if (Rooms.find({type: type}).count() !== 1) {
-            window.location = "/";
-        } else {
-            StationSubscription = Meteor.subscribe(type);
-            Session.set("loaded", true);
-            minterval = Meteor.setInterval(function () {
-                var room = Rooms.findOne({type: type});
-                if (room !== undefined) {
-                    if (room.state === "paused" || Session.get("pauseVideo")) {
-                        Session.set("state", "paused");
-                        // TODO Fix issue where sometimes nothing loads with the YT is not defined error. The error points to around this.
-                        if (YTPlayer !== undefined && YTPlayer.getPlayerState !== undefined && YTPlayer.getPlayerState() === 1) {
-                            YTPlayer.pauseVideo();
-                        }
-                    } else {
-                        Session.set("state", "playing");
-                        if (YTPlayer !== undefined && YTPlayer.getPlayerState !== undefined && YTPlayer.getPlayerState() !== 1) {
-                            YTPlayer.playVideo();
-                        }
-                    }
-                }
-
-                if (room.currentSong.song !== undefined && (currentSongR === undefined || room.currentSong.started !== currentSongR.started)) {
-                    Session.set("previousSong", currentSong);
-                    currentSongR = room.currentSong;
-
-                    currentSong = room.currentSong.song;
-                    currentSong.started = room.currentSong.started;
-                    Session.set("currentSong", currentSong);
-                    Meteor.clearTimeout(Session.get("loadVideoTimeout"));
-                    startSong();
-                }
-
-                if (currentSong !== undefined) {
-                    if (room !== undefined) {
-                        var duration = (Date.now() - currentSong.started - room.timePaused) / 1000;
-                        var song_duration = currentSong.duration;
-                            if (song_duration <= duration) {
-                                Session.set("pauseVideo", true);
-                            }
-                        var d = moment.duration(duration, 'seconds');
-                        if (Session.get("state") === "playing") {
-                            $("#time-elapsed").text(d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
-                        }
-                    }
-                }
-            }, 100);
-            resizeSeekerbarInterval = Meteor.setInterval(function () {
-                resizeSeekerbar();
-            }, 500);
-        }
-    });
-});
 // Settings Template
 Template.settings.events({
     "click #save-settings": function() {

app/client/scripts/onCreated.js

@@ -127,6 +127,7 @@ Template.room.onCreated(function () {
             }
         }
     });
+
     Session.set("reportSong", false);
     Session.set("reportTitle", false);
     Session.set("reportAuthor", false);
@@ -134,6 +135,9 @@ Template.room.onCreated(function () {
     Session.set("reportAudio", false);
     Session.set("reportAlbumart", false);
     Session.set("reportOther", false);
+    var parts = location.href.split('/');
+    var id = parts.pop();
+    var type = id.toLowerCase();
     if (resizeSeekerbarInterval !== undefined) {
         Meteor.clearInterval(resizeSeekerbarInterval);
         resizeSeekerbarInterval = undefined;
@@ -149,6 +153,7 @@ Template.room.onCreated(function () {
 
     var currentSong = undefined;
     var currentSongR = undefined;
+    var type = Session.get("type");
 
     function getTimeElapsed() {
         if (currentSong !== undefined) {

app/client/scripts/routes.js

@@ -54,6 +54,10 @@ Router.route("/settings", {
     }
 });
 
+Router.route("/add", {
+    template: "addSong"
+});
+
 Router.route("/terms", {
     template: "terms"
 });

app/client/stylesheets/app.css

@@ -175,7 +175,7 @@ textarea{
     color: black;
 }
 
-#team-page-container {
+.hack-container{
     margin-left: 0;
     margin-right: 0;
     /* Weird hack... No clue why this is needed but it is.*/
@@ -185,6 +185,56 @@ textarea{
   padding-top: 15px;
 }
 
+#thumbs_up, #thumbs_down {
+  color: white;
+  cursor: pointer;
+}
+
+#thumbs_up:hover {
+  color: #00bfa5;
+}
+
+#thumbs_down:hover {
+  color: #e53935;
+}
+
 .feedback-message{
     word-wrap: break-word;
 }
+
+.brand-logo{
+	font-weight:900;
+}
+
+.dropdown-content {
+  background-color: #FFFFFF;
+  margin: 0;
+  display: none;
+  min-width: 300px; /* Changed this to accomodate content width */
+  height: 100vh;
+	margin-left: -1px; /* Add this to keep dropdown in line with edge of navbar */
+  overflow: hidden; /* Changed this from overflow-y:auto; to overflow:hidden; */
+  opacity: 0;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 1;
+  will-change: width, height;
+}
+
+.video-import-thumbnail {
+    position: absolute;
+    height: 150px;
+    width: 267px;
+    overflow: hidden;
+    left: 15px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.youtube-search-result-li {
+    height: 170px;
+}
+
+.video-import-text {
+    margin-left: 225px !important;
+}

app/client/templates/addSong.html

@@ -0,0 +1,70 @@
+<template name="addSong">
+    {{> header}}
+    <main class="content-box row hack-container">
+        <h3 class="black-text thin center">Add Song</h3>
+        <div class="card teal-text col m6 s12 l6 offset-m3 offset-l3">
+            <div class="card-content">
+                <span>Import Video</span>
+                <hr>
+                <div class="row">
+                    <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                        <input class="validate" name="query" id="query" type="text"/>
+                        <label for="query">Song Title / URL</label>
+                    </div>
+                    <button type="button" id="search-song" class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">Search</button>
+                </div>
+                <hr>
+                <ul class="collection">
+                    <li class="collection-item avatar youtube-search-result-li">
+                        <img src="http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg" alt="" class="video-import-thumbnail">
+                        <span class="title video-import-text">Title</span>
+                        <p class="video-import-text">First Line <br>
+                            Second Line
+                        </p>
+                        <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </main>
+
+
+    <div id="createArticle" class="modal">
+        <div class="modal-content musare white-text">
+            <h4 class="center-align">Create Article</h4>
+            <div class="row">
+                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                    <label for="title" class="white-text">Title</label>
+                    <input class="validate" name="title" id="title" type="text"/>
+                </div>
+                <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                    <textarea class="materialize-textarea validate" name="content" id="content" type="text"></textarea>
+                    <label for="content" class="white-text">Content</label>
+                </div>
+                <div class="col l8 m8 s12 offset-l2 offset-m2">
+                    <div class="switch">
+                        <label class="white-text">
+                            Post as myself
+                            <input id="anonymous" type="checkbox">
+                            <span class="lever"></span>
+                            Post anonymous
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <button type="button" id="createArticleButton" class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">Create Article</button>
+            </div>
+        </div>
+        <div class="modal-footer musare white-text">
+            <a href="#!" class="modal-action modal-close waves-effect waves-light btn-flat white">X</a>
+        </div>
+    </div>
+    <script>
+        $(document).ready(function(){
+            // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+            $('.modal-trigger').leanModal();
+        });
+    </script>
+    {{> footer}}
+</template>

app/client/templates/room.html

@@ -6,15 +6,43 @@
                 <div class="nav-wrapper teal accent-4">
                     <ul class="left hide-on-med-and-down">
                         <li><a href="/"><i class="material-icons">home</i></a></li>
-                        <li><a href="#add_song_modal"><i class="material-icons">playlist_add</i></a></li>
+                        <li><a href="#add_song_modal" id="add-song-button"><i class="material-icons">playlist_add</i></a></li>
                         <li><a href="#bug_report_modal"><i class="material-icons">bug_report</i></a></li>
                         <li><a href="#vote_to_skip" id="skip_vote"><i class="material-icons">skip_next</i></a></li>
                     </ul>
                     <span class="brand-logo center">{{type}}</span>
                     <ul class="right hide-on-med-and-down">
                         <li><a href="#"><i class="material-icons">queue_music</i></a></li>
-                        <li><a href="#"><i class="material-icons">chat</i></a></li>
+                        <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a></li>
                     </ul>
+                    <div id='chat' class='dropdown-content right'>
+                      <ul id="chat-ul">
+                                {{#each chat}}
+                                    {{#emojione}}
+                                        <li class="chat-message"><small class="rank-{{this.rawrank}}">{{this.rank}}</small> <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank"><b class="bold">{{this.username}}</b></a> <span title="{{time}}" style="float: right;">{{rtime time}}</span> <br/>
+                                        {{#if this.isMentioned}}
+                                            {{#if this.curUserMention}}
+                                                <span style="background-color: lightblue">{{this.message}}</span>
+                                            {{else}}
+                                                {{this.message}}
+                                            {{/if}}
+                                        {{else}}
+                                            {{this.message}}
+                                        {{/if}}
+                                        </li>
+                                    {{/emojione}}
+                                    <hr>
+                                {{/each}}
+                            </ul>
+                            <div id="chat-input-div">
+                                {{#if currentUser}}
+                                    <textarea id="chat-input" placeholder="Type a message..."></textarea>
+                                {{else}}
+                                    <input id="chat-input" placeholder="Please register and login to chat." disabled>
+                                {{/if}}
+                                <div id="submit"><button class="btn btn-primary btn-block">Submit<i id="submit-message" class="fa fa-paper-plane-o"></i></button></div>
+                            </div>
+                    </div>
                 </div>
             </nav>
         </header>
@@ -40,8 +68,8 @@
                                   </form>
                                   <div class="right col s4 m2 l2">
                                     <ul>
-                                      <li class="left"><a href="#add_song_modal"><i class="material-icons black-text">thumb_up</i></a></li>
-                                      <li class="right"><a href="#bug_report_modal"><i class="material-icons black-text">thumb_down</i></a></li>
+                                      <li class="left"><i id="thumbs_up" class="material-icons">thumb_up</i></li>
+                                      <li class="right"><i id="thumbs_down" class="material-icons">thumb_down</i></li>
                                     </ul>
                                   </div>
                                 </div>
@@ -54,6 +82,64 @@
                     </div>
                 </div>
             </div>
+            <div id="add_song_modal" class="modal">
+              <div class="center modal-content container">
+                <div class="row">
+                  <form class="black-text" id="search-info">
+                    <div class="row">
+                      <div class="input-field">
+                        <select>
+                          <option value="" disabled selected>Select import type</option>
+                          <option value="singleSong">Single Song</option>
+                          <option value="importPlaylist">Import Playlist</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="input-field">
+                        <input id="song-input" type="text" class="validate">
+                        <label for="search_for_song">Search for song</label>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <a class="waves-effect waves-light btn" id="search-song"><i class="material-icons left">search</i>Search</a>
+                    </div>
+                  </form>
+                  <div id="song-results"></div>
+                </div>
+                <div class="row">
+                  <form class="black-text hide" id="add-info">
+                    <div class="row">
+                      <div class="input-field">
+                        <input id="song-id" type="text" class="validate">
+                        <label for="song-id">Song ID</label>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <a class="waves-effect waves-light btn" id="add-song-button"><i class="material-icons left">playlist_add</i>Request Song</a>
+                    </div>
+                  </form>
+                </div>
+              </div>
+
+              <div class="divider"></div>
+              <div class="modal-footer">
+                <a href="#!" class="modal-action modal-close waves-effect btn">Close</a>
+              </div>
+            </div>
         </main>
+        <script>
+          $("#add-song-button").leanModal({
+            dismissible: true,
+            opacity: .5,
+            in_duration: 500,
+            out_duration: 200
+          });
+          $(".dropdown-button").dropdown({
+            belowOrigin: true,
+            alignment: 'right'
+          });
+          $('select').material_select();
+        </script>
     {{/if}}
 </template>

app/client/templates/team.html

@@ -1,6 +1,6 @@
 <template name="team">
     {{> header}}
-    <main class="content-box row" id="team-page-container">
+    <main class="content-box row hack-container">
         <div class="col s12 l4 m8 offset-l4 offset-m2">
             <h3 class="black-text thin">The Team</h3>
             <ul class="collection">