Added ability to report songs.

app/app.css

@@ -867,7 +867,7 @@ footer .fa {
     opacity: 0.33333333333333;
 }
 
-#add-song-button, #get-spotify-info, #save-song-button {
+#add-song-button, #get-spotify-info, #save-song-button, #report-song-button {
     display: block;
     margin: 0 auto;
 }
@@ -1040,4 +1040,26 @@ footer .fa {
 }
 .panel-title {
     display: inline-block;
+}
+.report-layer-1 {
+    margin-left: 19%;
+}
+.report-layer-2 {
+    margin-left: 80px;
+}
+.other-textarea {
+    outline: 0px;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    width: 304px;
+    border-radius: 3px;
+    padding: 10px 15px;
+    margin: 5px -285.578px 10px 0px;
+    display: block;
+    text-align: left;
+    font-size: 18px;
+    color: white;
+    transition-duration: 0.25s;
+    font-weight: 300;
+    background-color: rgba(255, 255, 255, 0.2);
+    resize: vertical;
 }

app/app.js

@@ -1,7 +1,7 @@
 Playlists = new Mongo.Collection("playlists");
 Rooms = new Mongo.Collection("rooms");
 Queues = new Mongo.Collection("queues");
-Chat = new Mongo.Collection("chat");
+Reports = new Mongo.Collection("reports");
 
 if (Meteor.isClient) {
     Meteor.startup(function() {
@@ -213,6 +213,22 @@ if (Meteor.isClient) {
     });
 
     Template.room.events({
+        "click #report-prev": function(e) {
+            if (Session.get("previousSong") !== undefined) {
+                Session.set("reportPrevious", true);
+                $("#report-prev").prop("disabled", true);
+                $("#report-curr").prop("disabled", false);
+            }
+        },
+        "click #report-curr": function(e) {
+            Session.set("reportPrevious", false);
+            $("#report-prev").prop("disabled", false);
+            $("#report-curr").prop("disabled", true);
+        },
+        "click #report-modal": function() {
+            Session.set("currentSongR", Session.get("currentSong"));
+            Session.set("previousSongR", Session.get("previousSong"));
+        },
         "click #add-song-button": function(e){
             e.preventDefault();
             parts = location.href.split('/');
@@ -227,7 +243,7 @@ if (Meteor.isClient) {
             Meteor.call("addSongToQueue", genre, songData, function(err, res) {
                 console.log(err, res);
             });
-            $("#close-modal").click();
+            $("#close-modal-a").click();
         },
         "click #toggle-video": function(e){
             e.preventDefault();
@@ -337,7 +353,7 @@ if (Meteor.isClient) {
         "click #add-songs": function(){
           $("#add-songs-modal").show();
         },
-        "click #close-modal": function(){
+        "click #close-modal-a": function(){
           $("#search-info").show();
           $("#add-info").hide();
         },
@@ -366,6 +382,86 @@ if (Meteor.isClient) {
         },
         "click #shuffle": function() {
             Meteor.call("shufflePlaylist", type);
+        },
+        "change ": function(e) {
+            if (e.target && e.target.id) {
+                var partsOfId = e.target.id.split("-");
+                partsOfId[1] = partsOfId[1].charAt(0).toUpperCase() + partsOfId[1].slice(1);
+                var camelCase = partsOfId.join("");
+                Session.set(camelCase, e.target.checked);
+            }
+        },
+        "click #report-song-button": function() {
+            var report = {};
+            report.reportSongB = $("#report-song").is(":checked");
+            report.reportTitleB = $("#report-title").is(":checked");
+            report.reportAuthorB = $("#report-author").is(":checked");
+            report.reportDurationB = $("#report-duration").is(":checked");
+            report.reportAudioB = $("#report-audio").is(":checked");
+            report.reportAlbumartB = $("#report-albumart").is(":checked");
+            report.reportOtherB = $("#report-other").is(":checked");
+            
+            if (report.reportSongB) {
+                report.reportSong = {};
+                report.reportSong.notPlayingB = $("#report-song-not-playing").is(":checked");
+                report.reportSong.doesNotExistB = $("#report-song-does-not-exist").is(":checked");
+                report.reportSong.otherB = $("#report-song-other").is(":checked");
+                if (report.reportSong.otherB) {
+                    report.reportSong.other = $("#report-song-other-ta").val();
+                }
+            }
+            if (report.reportTitleB) {
+                report.reportTitle = {};
+                report.reportTitle.incorrectB = $("#report-title-incorrect").is(":checked");
+                report.reportTitle.inappropriateB = $("#report-title-inappropriate").is(":checked");
+                report.reportTitle.otherB = $("#report-title-other").is(":checked");
+                if (report.reportTitle.otherB) {
+                    report.reportTitle.other = $("#report-title-other-ta").val();
+                }
+            }
+            if (report.reportAuthorB) {
+                report.reportAuthor = {};
+                report.reportAuthor.incorrectB = $("#report-author-incorrect").is(":checked");
+                report.reportAuthor.inappropriateB = $("#report-author-inappropriate").is(":checked");
+                report.reportAuthor.otherB = $("#report-author-other").is(":checked");
+                if (report.reportAuthor.otherB) {
+                    report.reportAuthor.other = $("#report-author-other-ta").val();
+                }
+            }
+            if (report.reportDurationB) {
+                report.reportDuration = {};
+                report.reportDuration.longB = $("#report-duration-incorrect").is(":checked");
+                report.reportDuration.shortB = $("#report-duration-inappropriate").is(":checked");
+                report.reportDuration.otherB = $("#report-duration-other").is(":checked");
+                if (report.reportDuration.otherB) {
+                    report.reportDuration.other = $("#report-duration-other-ta").val();
+                }
+            }
+            if (report.reportAudioB) {
+                report.reportAudio = {};
+                report.reportAudio.inappropriate = $("#report-audio-inappropriate").is(":checked");
+                report.reportAudio.notPlayingB = $("#report-audio-incorrect").is(":checked");
+                report.reportAudio.otherB = $("#report-audio-other").is(":checked");
+                if (report.reportAudio.otherB) {
+                    report.reportAudio.other = $("#report-audio-other-ta").val();
+                }
+            }
+            if (report.reportAlbumartB) {
+                report.reportAlbumart = {};
+                report.reportAlbumart.incorrectB = $("#report-albumart-incorrect").is(":checked");
+                report.reportAlbumart.inappropriateB = $("#report-albumart-inappropriate").is(":checked");
+                report.reportAlbumart.notShowingB = $("#report-albumart-inappropriate").is(":checked");
+                report.reportAlbumart.otherB = $("#report-albumart-other").is(":checked");
+                if (report.reportAlbumart.otherB) {
+                    report.reportAlbumart.other = $("#report-albumart-other-ta").val();
+                }
+            }
+            if (report.reportOtherB) {
+                report.other = $("#report-other-ta").val();
+            }
+            Meteor.call("submitReport", report, Session.get("id"), function() {
+                $("#close-modal-r").click();
+            });
         }
     });
 
@@ -427,6 +523,49 @@ if (Meteor.isClient) {
         },
         paused: function() {
             return Session.get("state") === "paused";
+        },
+        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");
+            }
         }
     });
 
@@ -674,6 +813,13 @@ if (Meteor.isClient) {
     Meteor.subscribe("rooms");
 
     Template.room.onCreated(function () {
+        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;
@@ -702,6 +848,7 @@ if (Meteor.isClient) {
         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", songData.duration);
         }
@@ -803,16 +950,12 @@ if (Meteor.isClient) {
                     }
 
                     if (currentSongR === undefined || room.currentSong.started !== currentSongR.started) {
-                        //var playlist = Playlists.findOne({type: type});
+                        Session.set("previousSong", currentSong);
                         currentSongR = room.currentSong;
+
                         currentSong = room.currentSong.song;
                         currentSong.started = room.currentSong.started;
-                        //var songArray = playlist.songs;
-                        //songArray.forEach(function(song) {
-                        //    if (song.id === currentSongR.song.id) {
-                        //        currentSong = song;
-                        //    }
-                        //});
+                        Session.set("currentSong", currentSong);
 
                         startSong();
                     }
@@ -1151,6 +1294,11 @@ if (Meteor.isServer) {
     }
 
     Meteor.methods({
+        submitReport: function(report, id) {
+            var obj = report;
+            obj.id = id;
+            Reports.insert(obj);
+        },
         shufflePlaylist: function(type) {
             if (isAdmin()) {
                 getStation(type, function(station) {

app/checkboxes.css

@@ -0,0 +1,251 @@
+.checkbox {
+    padding-left: 20px;
+}
+.checkbox label {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    padding-left: 5px;
+}
+.checkbox label::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 17px;
+    height: 17px;
+    left: 0;
+    margin-left: -20px;
+    border: 1px solid #cccccc;
+    border-radius: 3px;
+    background-color: #fff;
+    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+.checkbox label::after {
+    display: inline-block;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    left: 0;
+    top: 0;
+    margin-left: -20px;
+    padding-left: 3px;
+    padding-top: 1px;
+    font-size: 11px;
+    color: #555555;
+}
+.checkbox input[type="checkbox"],
+.checkbox input[type="radio"] {
+    opacity: 0;
+    z-index: 1;
+}
+.checkbox input[type="checkbox"]:focus + label::before,
+.checkbox input[type="radio"]:focus + label::before {
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+.checkbox input[type="checkbox"]:checked + label::after,
+.checkbox input[type="radio"]:checked + label::after {
+    font-family: "FontAwesome";
+    content: "\f00c";
+}
+.checkbox input[type="checkbox"]:disabled + label,
+.checkbox input[type="radio"]:disabled + label {
+    opacity: 0.65;
+}
+.checkbox input[type="checkbox"]:disabled + label::before,
+.checkbox input[type="radio"]:disabled + label::before {
+    background-color: #eeeeee;
+    cursor: not-allowed;
+}
+.checkbox.checkbox-circle label::before {
+    border-radius: 50%;
+}
+.checkbox.checkbox-inline {
+    margin-top: 0;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::before,
+.checkbox-primary input[type="radio"]:checked + label::before {
+    background-color: #337ab7;
+    border-color: #337ab7;
+}
+.checkbox-primary input[type="checkbox"]:checked + label::after,
+.checkbox-primary input[type="radio"]:checked + label::after {
+    color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::before,
+.checkbox-danger input[type="radio"]:checked + label::before {
+    background-color: #d9534f;
+    border-color: #d9534f;
+}
+.checkbox-danger input[type="checkbox"]:checked + label::after,
+.checkbox-danger input[type="radio"]:checked + label::after {
+    color: #fff;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::before,
+.checkbox-info input[type="radio"]:checked + label::before {
+    background-color: #5bc0de;
+    border-color: #5bc0de;
+}
+.checkbox-info input[type="checkbox"]:checked + label::after,
+.checkbox-info input[type="radio"]:checked + label::after {
+    color: #fff;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::before,
+.checkbox-warning input[type="radio"]:checked + label::before {
+    background-color: #f0ad4e;
+    border-color: #f0ad4e;
+}
+.checkbox-warning input[type="checkbox"]:checked + label::after,
+.checkbox-warning input[type="radio"]:checked + label::after {
+    color: #fff;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::before,
+.checkbox-success input[type="radio"]:checked + label::before {
+    background-color: #5cb85c;
+    border-color: #5cb85c;
+}
+.checkbox-success input[type="checkbox"]:checked + label::after,
+.checkbox-success input[type="radio"]:checked + label::after {
+    color: #fff;
+}
+
+.radio {
+    padding-left: 20px;
+}
+.radio label {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    padding-left: 5px;
+}
+.radio label::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 17px;
+    height: 17px;
+    left: 0;
+    margin-left: -20px;
+    border: 1px solid #cccccc;
+    border-radius: 50%;
+    background-color: #fff;
+    -webkit-transition: border 0.15s ease-in-out;
+    -o-transition: border 0.15s ease-in-out;
+    transition: border 0.15s ease-in-out;
+}
+.radio label::after {
+    display: inline-block;
+    position: absolute;
+    content: " ";
+    width: 11px;
+    height: 11px;
+    left: 3px;
+    top: 3px;
+    margin-left: -20px;
+    border-radius: 50%;
+    background-color: #555555;
+    -webkit-transform: scale(0, 0);
+    -ms-transform: scale(0, 0);
+    -o-transform: scale(0, 0);
+    transform: scale(0, 0);
+    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+}
+.radio input[type="radio"] {
+    opacity: 0;
+    z-index: 1;
+}
+.radio input[type="radio"]:focus + label::before {
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+.radio input[type="radio"]:checked + label::after {
+    -webkit-transform: scale(1, 1);
+    -ms-transform: scale(1, 1);
+    -o-transform: scale(1, 1);
+    transform: scale(1, 1);
+}
+.radio input[type="radio"]:disabled + label {
+    opacity: 0.65;
+}
+.radio input[type="radio"]:disabled + label::before {
+    cursor: not-allowed;
+}
+.radio.radio-inline {
+    margin-top: 0;
+}
+
+.radio-primary input[type="radio"] + label::after {
+    background-color: #337ab7;
+}
+.radio-primary input[type="radio"]:checked + label::before {
+    border-color: #337ab7;
+}
+.radio-primary input[type="radio"]:checked + label::after {
+    background-color: #337ab7;
+}
+
+.radio-danger input[type="radio"] + label::after {
+    background-color: #d9534f;
+}
+.radio-danger input[type="radio"]:checked + label::before {
+    border-color: #d9534f;
+}
+.radio-danger input[type="radio"]:checked + label::after {
+    background-color: #d9534f;
+}
+
+.radio-info input[type="radio"] + label::after {
+    background-color: #5bc0de;
+}
+.radio-info input[type="radio"]:checked + label::before {
+    border-color: #5bc0de;
+}
+.radio-info input[type="radio"]:checked + label::after {
+    background-color: #5bc0de;
+}
+
+.radio-warning input[type="radio"] + label::after {
+    background-color: #f0ad4e;
+}
+.radio-warning input[type="radio"]:checked + label::before {
+    border-color: #f0ad4e;
+}
+.radio-warning input[type="radio"]:checked + label::after {
+    background-color: #f0ad4e;
+}
+
+.radio-success input[type="radio"] + label::after {
+    background-color: #5cb85c;
+}
+.radio-success input[type="radio"]:checked + label::before {
+    border-color: #5cb85c;
+}
+.radio-success input[type="radio"]:checked + label::after {
+    background-color: #5cb85c;
+}
+
+input[type="checkbox"].styled:checked + label:after,
+input[type="radio"].styled:checked + label:after {
+    font-family: 'FontAwesome';
+    content: "\f00c";
+}
+input[type="checkbox"] .styled:checked + label::before,
+input[type="radio"] .styled:checked + label::before {
+    color: #fff;
+}
+input[type="checkbox"] .styled:checked + label::after,
+input[type="radio"] .styled:checked + label::after {
+    color: #fff;
+}

app/templates/room.html

@@ -52,12 +52,11 @@
                             {{#if currentUser}}
 							<button title="Smile to this song." type="button" id="song-modal" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal"><i class="fa fa-smile-o"> 79</i></button>
                             <button title="I dislike this song." type="button" id="song-modal" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal"><i class="fa fa-meh-o"> 14</i></button>
-							<button title="Report this song!" type="button" id="song-modal" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal"><i class="fa fa-flag"></i></button> 
                             {{else}}
                             <button title="You need to be logged to smile to this song." type="button" id="song-modal" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal" disabled><i class="fa fa-smile-o"> 79</i></button>
                             <button title="You need to be logge to dislike this song." type="button" id="song-modal" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal" disabled><i class="fa fa-meh-o"> 14</i></button>
-							<button title="You need to be logged to report this song!" type="button" id="song-modal" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal" disabled><i class="fa fa-flag"></i></button>
 							{{/if}}
+                            <button title="Report this song!" type="button" id="report-modal" class="btn btn-warning btn-lg report-button" data-toggle="modal" data-target="#reportModal"><i class="fa fa-flag"></i></button>
                         </div>
                     </div>
                 </div>
@@ -105,7 +104,228 @@
                             <!--small id="search-alert">Searching for a song fills out the above fields automatically, but you will still have to verify them.</small-->
                         </div>
                         <div class="modal-footer">
-                            <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                            <button id="close-modal-a" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <!-- Report Modal -->
+            <div id="reportModal" class="modal fade" role="dialog">
+                <div class="modal-dialog">
+
+                    <!-- Modal content-->
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            <h4 class="modal-title">Report this song</h4>
+                        </div>
+                        <div class="modal-body">
+
+                            <button type="button" id="report-prev" class="btn btn-warning btn-lg btn-block">Report previous song ({{previousSongR.title}})</button>
+                            <button type="button" id="report-curr" class="btn btn-warning btn-lg btn-block" disabled>Report current song ({{currentSongR.title}})</button>
+
+                            <h3 class="text-primary"><b>Reporting:</b> {{reportingSong.title}} by {{reportingSong.artist}}</h3>
+
+                            <div class="report-layer-1">
+                                <div class="checkbox">
+                                    <input class="checkbox-box" type="checkbox" id="report-song">
+                                    <label for="report-song">
+                                        Song
+                                    </label>
+                                </div>
+                                    <!-- Layer2 -->
+                                    {{#if reportSong}}
+                                    <div class="report-layer-2" id="report-song-list">
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-song-not-playing">
+                                            <label for="report-song-not-playing">
+                                                Not playing
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-song-does-not-exist">
+                                            <label for="report-song-does-not-exist">
+                                                Does not exist
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-song-other">
+                                            <label for="report-song-other">
+                                                Other: <br>
+                                                <textarea class="other-textarea" id="report-song-other-ta" type="text"></textarea>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    {{/if}}
+                                <div class="checkbox">
+                                    <input class="checkbox-box" type="checkbox" id="report-title">
+                                    <label for="report-title">
+                                        Title
+                                    </label>
+                                </div>
+                                    <!-- Layer2 -->
+                                {{#if reportTitle}}
+                                    <div class="report-layer-2" id="report-title-list">
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-title-incorrect">
+                                            <label for="report-title-incorrect">
+                                                Incorrect
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-title-inappropriate">
+                                            <label for="report-title-inappropriate">
+                                                Inappropriate
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-title-other">
+                                            <label for="report-title-other">
+                                                Other: <br>
+                                                <textarea class="other-textarea" id="report-title-other-ta" type="text"></textarea>
+                                            </label>
+                                        </div>
+                                    </div>
+                                {{/if}}
+                                <div class="checkbox">
+                                    <input class="checkbox-box" type="checkbox" id="report-author">
+                                    <label for="report-author">
+                                        Author
+                                    </label>
+                                </div>
+                                    <!-- Layer2 -->
+                                {{#if reportAuthor}}
+                                    <div class="report-layer-2" id="report-author-list">
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-author-incorrect">
+                                            <label for="report-author-incorrect">
+                                                Incorrect
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-author-inappropriate">
+                                            <label for="report-author-inappropriate">
+                                                Inappropriate
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-author-other">
+                                            <label for="report-author-other">
+                                                Other: <br>
+                                                <textarea class="other-textarea" id="report-author-other-ta" type="text"></textarea>
+                                            </label>
+                                        </div>
+                                    </div>
+                                {{/if}}
+                                <div class="checkbox">
+                                    <input class="checkbox-box" type="checkbox" id="report-duration">
+                                    <label for="report-duration">
+                                        Duration
+                                    </label>
+                                </div>
+                                    <!-- Layer2 -->
+                                {{#if reportDuration}}
+                                    <div class="report-layer-2" id="report-duration-list">
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-duration-long">
+                                            <label for="report-duration-long">
+                                                Too long
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-duration-short">
+                                            <label for="report-duration-short">
+                                                Too short
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-duration-other">
+                                            <label for="report-duration-other">
+                                                Other: <br>
+                                                <textarea class="other-textarea" id="report-duration-other-ta" type="text"></textarea>
+                                            </label>
+                                        </div>
+                                    </div>
+                                {{/if}}
+                                <div class="checkbox">
+                                    <input class="checkbox-box" type="checkbox" id="report-audio">
+                                    <label for="report-audio">
+                                        Audio
+                                    </label>
+                                </div>
+                                    <!-- Layer2 -->
+                                {{#if reportAudio}}
+                                    <div class="report-layer-2" id="report-audio-list">
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-audio-inappropriate">
+                                            <label for="report-audio-inappropriate">
+                                                Inappropriate
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-audio-not-playing">
+                                            <label for="report-audio-not-playing">
+                                                Not playing
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-audio-other">
+                                            <label for="report-audio-other">
+                                                Other: <br>
+                                                <textarea class="other-textarea" id="report-audio-other-ta" type="text"></textarea>
+                                            </label>
+                                        </div>
+                                    </div>
+                                {{/if}}
+                                <div class="checkbox">
+                                    <input class="checkbox-box" type="checkbox" id="report-albumart">
+                                    <label for="report-albumart">
+                                        Albumart
+                                    </label>
+                                </div>
+                                    <!-- Layer2 -->
+                                {{#if reportAlbumart}}
+                                    <div class="report-layer-2" id="report-albumart-list">
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-albumart-incorrect">
+                                            <label for="report-albumart-incorrect">
+                                                Incorrect
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-albumart-inappropriate">
+                                            <label for="report-albumart-inappropriate">
+                                                Inappropriate
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-albumart-not-showing">
+                                            <label for="report-albumart-not-showing">
+                                                Not showing
+                                            </label>
+                                        </div>
+                                        <div class="checkbox">
+                                            <input type="checkbox" id="report-albumart-other">
+                                            <label for="report-albumart-other">
+                                                Other: <br>
+                                                <textarea class="other-textarea" id="report-albumart-other-ta" type="text"></textarea>
+                                            </label>
+                                        </div>
+                                    </div>
+                                {{/if}}
+                                <div class="checkbox">
+                                    <input class="checkbox-box" type="checkbox" id="report-other">
+                                    <label for="report-other">
+                                        Other: <br>
+                                        <textarea class="other-textarea" id="report-other-ta" type="text"></textarea>
+                                    </label>
+                                </div>
+                            </div>
+                            <button type="button" id="report-song-button" class="button">Submit</button>
+                        </div>
+                        <div class="modal-footer">
+                            <button id="close-modal-r" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                         </div>
                     </div>